diff --git a/.github/workflows/wac/utils/listPackagesWithJestTests.ts b/.github/workflows/wac/utils/listPackagesWithJestTests.ts
index 6ec12ccb331..c106d79a431 100644
--- a/.github/workflows/wac/utils/listPackagesWithJestTests.ts
+++ b/.github/workflows/wac/utils/listPackagesWithJestTests.ts
@@ -266,6 +266,13 @@ const CUSTOM_HANDLERS: Record<string, () => Array<PackageWithTests>> = {
             }
         ];
     },
+    "admin-ui": () => {
+        return [
+            {
+                cmd: "packages/admin-ui"
+            }
+        ];
+    },
     migrations: () => {
         return [
             {
diff --git a/.gitignore b/.gitignore
index 1cc0254c336..fe6ab61fd50 100644
--- a/.gitignore
+++ b/.gitignore
@@ -47,8 +47,7 @@ schema.graphql
 .pnp.*
 lerna.json
 .stormTests
-
-# TODO remove after moving traffic splitting config to WPC
-gateway.*.json
-
+*storybook.log
+.normalizedFigmaExport.json
+.normalizedPrimitivesFigmaExport.json
 packages/tasks/tpl/*
diff --git a/.prettierignore b/.prettierignore
index 9e095ed2163..d30d1abb9f3 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -9,6 +9,7 @@
 .webiny/**
 packages/ui/src/RichTextEditor/editorjs/**
 packages/cli-plugin-deploy-pulumi/src/commands/newWatch/handler/mqtt.js
+packages/admin-ui/scripts/importFromFigma/exports/Alias tokens.json
 packages/cli-plugin-scaffold-ci/src/githubActions/files/workflows/
 lerna.json
 coverage/**
diff --git a/apps/admin/src/App.scss b/apps/admin/src/App.scss
index 54439b54975..4deec2d55a1 100644
--- a/apps/admin/src/App.scss
+++ b/apps/admin/src/App.scss
@@ -1,16 +1,2 @@
-// Webiny theme variables
-// $webiny-theme-light-primary: #fa5723;
-// $webiny-theme-light-secondary: #00ccb0;
-// $webiny-theme-light-background: #f2f2f2;
-// $webiny-theme-light-surface: #fff;
-// $webiny-theme-light-on-primary: #ffffff;
-// $webiny-theme-light-on-secondary: #ffffff;
-// $webiny-theme-light-on-surface: #000000;
-// $webiny-theme-light-on-background: rgba(212, 212, 212, 0.5);
-// $webiny-theme-light-text-primary-on-background: rgba(0, 0, 0, 0.87);
-// $webiny-theme-light-text-secondary-on-background: rgba(0, 0, 0, 0.54);
-// $webiny-theme-light-text-hint-on-dark: rgba(255, 255, 255, 0.5);
-// $webiny-theme-typography-font-family: "Source Sans Pro";
-
 // Import main styles
 @import "~@webiny/app-serverless-cms/styles.scss";
diff --git a/apps/api/graphql/src/index.ts b/apps/api/graphql/src/index.ts
index 33b5483bc5c..bf8db7d48bc 100644
--- a/apps/api/graphql/src/index.ts
+++ b/apps/api/graphql/src/index.ts
@@ -107,7 +107,9 @@ export const handler = createHandler({
         createApwPageBuilderContext({
             storageOperations: createApwSaStorageOperations({ documentClient })
         }),
-        createAco(),
+        createAco({
+            documentClient
+        }),
         createAcoPageBuilderContext(),
         createAcoHcmsContext(),
         createHcmsTasks(),
diff --git a/apps/core/dynamoToElastic/src/index.ts b/apps/core/dynamoToElastic/src/index.ts
index f03e43ec6f3..d73b3276068 100644
--- a/apps/core/dynamoToElastic/src/index.ts
+++ b/apps/core/dynamoToElastic/src/index.ts
@@ -1,6 +1,5 @@
 import { createHandler } from "@webiny/handler-aws/raw";
 import elasticsearchClientContextPlugin from "@webiny/api-elasticsearch";
-import elasticsearchDataGzipCompression from "@webiny/api-elasticsearch/plugins/GzipCompression";
 import { createEventHandler as createDynamoDBEventHandler } from "@webiny/api-dynamodb-to-elasticsearch";
 
 export const handler = createHandler({
@@ -8,7 +7,6 @@ export const handler = createHandler({
         elasticsearchClientContextPlugin({
             endpoint: `https://${process.env.ELASTIC_SEARCH_ENDPOINT}`
         }),
-        elasticsearchDataGzipCompression(),
         createDynamoDBEventHandler()
     ]
 });
diff --git a/package.json b/package.json
index d2caae2481f..c443c839e65 100644
--- a/package.json
+++ b/package.json
@@ -45,7 +45,7 @@
     "@babel/preset-react": "^7.26.3",
     "@babel/preset-typescript": "^7.26.0",
     "@babel/register": "^7.25.9",
-    "@babel/runtime": "7.26.7",
+    "@babel/runtime": "7.26.10",
     "@babel/template": "^7.25.9",
     "@babel/traverse": "7.26.7",
     "@babel/types": "7.26.7",
@@ -171,6 +171,7 @@
     "webiny-versions": "node ./scripts/webinyVersions.js",
     "trigger-release": "node ./scripts/release/triggerRelease.js",
     "dispatch-github-event": "node ./scripts/dispatchGitHubEvent.js",
+    "link-workspaces": "node ./scripts/linkWorkspaces.js",
     "lint-staged": "lint-staged",
     "postinstall": "yarn node ./scripts/linkWorkspaces.js",
     "prepublishOnly": "node scripts/prepublishOnly",
@@ -194,7 +195,10 @@
     "system:verify": "yarn eslint && yarn prettier:check && yarn adio && yarn check-ts-configs && yarn webiny verify-dependencies",
     "system:build": "yarn && yarn ghawac build && yarn webiny sync-dependencies && yarn build",
     "wby": "./node_modules/.bin/wby",
-    "webiny-ui-build-storybook": "cd packages/ui && cross-env OUT=../../netlify-static yarn build-storybook"
+    "webiny-admin-storybook": "cd packages/admin-ui && yarn storybook",
+    "webiny-admin-storybook-docs": "cd packages/admin-ui && yarn storybook-docs",
+    "webiny-admin-build-storybook": "cd packages/admin-ui && cross-env OUT=../../netlify-static yarn build-storybook",
+    "webiny-admin-import-from-figma": "node packages/admin-ui/scripts/importFromFigma.js"
   },
   "husky": {
     "hooks": {
@@ -246,7 +250,7 @@
     ]
   },
   "resolutions": {
-    "@babel/runtime": "^7.26.0",
+    "@babel/runtime": "7.26.10",
     "systeminformation": "^5.23.18",
     "@emotion/react": "11.10.8",
     "@octokit/rest": "^20.0.2",
diff --git a/packages/app-admin-rmwc/.babelrc.js b/packages/admin-ui/.babelrc.js
similarity index 100%
rename from packages/app-admin-rmwc/.babelrc.js
rename to packages/admin-ui/.babelrc.js
diff --git a/packages/admin-ui/.storybook/main.ts b/packages/admin-ui/.storybook/main.ts
new file mode 100644
index 00000000000..8090aabb88e
--- /dev/null
+++ b/packages/admin-ui/.storybook/main.ts
@@ -0,0 +1,118 @@
+import type { StorybookConfig } from "@storybook/react-webpack5";
+import path from "path";
+import tailwindcss from "tailwindcss";
+
+/**
+ * This function is used to resolve the absolute path of a package.
+ * It is needed in projects that use Yarn PnP or are set up within a monorepo.
+ */
+function getAbsolutePath(value: string): any {
+    return path.dirname(require.resolve(path.join(value, "package.json")));
+}
+
+const config: StorybookConfig = {
+    stories: [
+        "../docs/stories/**/*.mdx",
+        "../src/**/*.mdx",
+        "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"
+    ],
+    staticDirs: ["../assets"],
+    addons: [
+        getAbsolutePath("@storybook/addon-a11y"),
+        {
+            name: "@storybook/addon-essentials",
+            options: {
+                controls: true,
+                code: true
+            }
+        }
+    ],
+    framework: {
+        name: getAbsolutePath("@storybook/react-webpack5"),
+        options: {}
+    },
+    core: {
+        disableTelemetry: true,
+        disableWhatsNewNotifications: true
+    },
+    webpackFinal: async config => {
+        config.resolve = config.resolve || {};
+        config.resolve.alias = {
+            ...config.resolve.alias,
+            "~": path.resolve(__dirname, "../src")
+        };
+
+        // Add custom style handling
+        config.module?.rules?.push({
+            test: /\.s[ac]ss$/i,
+            use: [
+                "style-loader",
+                {
+                    loader: "css-loader",
+                    options: {
+                        importLoaders: 1
+                    }
+                },
+                {
+                    loader: "postcss-loader",
+                    options: {
+                        postcssOptions: {
+                            plugins: [
+                                tailwindcss({
+                                    config: path.join(__dirname, "../tailwind.config.js")
+                                })
+                            ]
+                        }
+                    }
+                },
+                {
+                    loader: "sass-loader",
+                    options: { implementation: require.resolve("sass") }
+                }
+            ]
+        });
+
+        // Add SVG handling
+        const svgRule = config.module?.rules?.find(rule => {
+            const test = (rule as { test: RegExp }).test;
+            return test ? test.test(".svg") : false;
+        }) as { [key: string]: any };
+
+        if (svgRule) {
+            svgRule.exclude = /\.svg$/;
+        }
+
+        config.module?.rules?.push({
+            test: /\.svg$/i,
+            use: [
+                {
+                    loader: "@svgr/webpack",
+                    options: {
+                        svgoConfig: {
+                            plugins: [
+                                {
+                                    name: "preset-default",
+                                    params: {
+                                        overrides: {
+                                            removeViewBox: false
+                                        }
+                                    }
+                                }
+                            ]
+                        }
+                    }
+                },
+                {
+                    loader: "file-loader",
+                    options: {
+                        name: "[name].[hash].[ext]"
+                    }
+                }
+            ]
+        });
+
+        return config;
+    }
+};
+
+export default config;
diff --git a/packages/admin-ui/.storybook/preview.ts b/packages/admin-ui/.storybook/preview.ts
new file mode 100644
index 00000000000..0dd3314486b
--- /dev/null
+++ b/packages/admin-ui/.storybook/preview.ts
@@ -0,0 +1,12 @@
+import type { Preview } from "@storybook/react";
+
+import "../src/theme.scss";
+
+const preview: Preview = {
+    parameters: {
+        layout: "centered",
+        docs: { toc: { headingSelector: "h2, h3, h4" } }
+    }
+};
+
+export default preview;
diff --git a/packages/admin-ui/DEVELOPMENT.md b/packages/admin-ui/DEVELOPMENT.md
new file mode 100644
index 00000000000..a73b4ce749b
--- /dev/null
+++ b/packages/admin-ui/DEVELOPMENT.md
@@ -0,0 +1,31 @@
+# Overview
+This document covers different aspects of the development process for the `@webiny/admin-ui` package.
+
+## Tailwind CSS
+Webiny's Admin app uses Tailwind CSS for styling.
+
+### Tailwind Configuration
+Tailwind CSS is configured as usual, via the [`tailwind.config.js`](./tailwind.config.js) file. Among other things, this file defines the default Webiny theme, which is based on Webiny's design system. More on this in the next section.
+
+### Default Theme
+One of the main things we define via the [`tailwind.config.js`](./tailwind.config.js) file is the default theme, which is based on Webiny's design system, and which can be found in this [Figma file](https://www.figma.com/file/f0QUDWX37Kt5X53eltTRiT/Webiny-Design-System?type=design&node-id=127-26352&mode=design&t=nhoOU7NamjWvImoW-0). 
+
+But, do note that all the default theme-values are not actually defined in the `tailwind.config.js` file, but rather in the `tailwind.config.theme.js` file, which is a file that is generated from a Figma export (more on this in the next section).
+
+### Figma To Code
+Since manually transferring values from the mentioned Figma file into code has shown to be a very cumbersome process, we've created a script that basically takes a Figma export and generates all the necessary Tailwind CSS configuration. 
+
+When we say "Figma export", we basically mean exports of (1) Primitives and (2) Alias tokens, which are created by this [Export/Import Variables](https://www.figma.com/community/plugin/1256972111705530093/export-import-variables) plugin.
+
+The exports need to be downloaded and place into the `packages/admin-ui/scripts/importFromFigma/exports` folder. Ultimately, we should end up with the following two:
+
+1. `packages/admin-ui/scripts/importFromFigma/exports/Alias tokens.json`
+2. `packages/admin-ui/scripts/importFromFigma/exports/Primitives.json`
+
+Finally, from project root, we run the following script:
+
+```bash
+yarn webiny-admin-import-from-figma
+```
+
+First, the script will regenerate the `tailwind.config.theme.js` file, which will contain all the necessary Tailwind CSS configuration. Second, it will also regenerate the `src/styles.scss` file, which contains actual values for CSS variables that are referenced in the `tailwind.config.theme.js` file.
diff --git a/packages/app-admin-rmwc/LICENSE b/packages/admin-ui/LICENSE
similarity index 100%
rename from packages/app-admin-rmwc/LICENSE
rename to packages/admin-ui/LICENSE
diff --git a/packages/admin-ui/README.md b/packages/admin-ui/README.md
new file mode 100644
index 00000000000..ffaaf1585dc
--- /dev/null
+++ b/packages/admin-ui/README.md
@@ -0,0 +1,6 @@
+# `@webiny/admin-ui`
+
+This package contains React components and styles for Webiny's Admin app.
+
+> [!NOTE]
+> This package is included in every Webiny project by default, and it's not meant to be used as a standalone package.
diff --git a/packages/admin-ui/assets/images/design-system-cover.png b/packages/admin-ui/assets/images/design-system-cover.png
new file mode 100644
index 00000000000..6c2f960effc
Binary files /dev/null and b/packages/admin-ui/assets/images/design-system-cover.png differ
diff --git a/packages/admin-ui/assets/images/storybook/alert/examples.png b/packages/admin-ui/assets/images/storybook/alert/examples.png
new file mode 100644
index 00000000000..f7259812a34
Binary files /dev/null and b/packages/admin-ui/assets/images/storybook/alert/examples.png differ
diff --git a/packages/admin-ui/assets/images/storybook/alert/floating-element.png b/packages/admin-ui/assets/images/storybook/alert/floating-element.png
new file mode 100644
index 00000000000..8a8f3551cfc
Binary files /dev/null and b/packages/admin-ui/assets/images/storybook/alert/floating-element.png differ
diff --git a/packages/admin-ui/assets/images/storybook/alert/full-width-banner.png b/packages/admin-ui/assets/images/storybook/alert/full-width-banner.png
new file mode 100644
index 00000000000..ae41f487a9b
Binary files /dev/null and b/packages/admin-ui/assets/images/storybook/alert/full-width-banner.png differ
diff --git a/packages/admin-ui/assets/images/storybook/alert/nested-element.png b/packages/admin-ui/assets/images/storybook/alert/nested-element.png
new file mode 100644
index 00000000000..1fac4b70c96
Binary files /dev/null and b/packages/admin-ui/assets/images/storybook/alert/nested-element.png differ
diff --git a/packages/admin-ui/assets/images/storybook/alert/options.png b/packages/admin-ui/assets/images/storybook/alert/options.png
new file mode 100644
index 00000000000..d3d9198aabf
Binary files /dev/null and b/packages/admin-ui/assets/images/storybook/alert/options.png differ
diff --git a/packages/admin-ui/assets/images/storybook/alert/style.png b/packages/admin-ui/assets/images/storybook/alert/style.png
new file mode 100644
index 00000000000..10327613dba
Binary files /dev/null and b/packages/admin-ui/assets/images/storybook/alert/style.png differ
diff --git a/packages/admin-ui/assets/images/storybook/alert/type.png b/packages/admin-ui/assets/images/storybook/alert/type.png
new file mode 100644
index 00000000000..be7772ce88c
Binary files /dev/null and b/packages/admin-ui/assets/images/storybook/alert/type.png differ
diff --git a/packages/admin-ui/assets/images/storybook/autocomplete/field-size.png b/packages/admin-ui/assets/images/storybook/autocomplete/field-size.png
new file mode 100644
index 00000000000..eec94755717
Binary files /dev/null and b/packages/admin-ui/assets/images/storybook/autocomplete/field-size.png differ
diff --git a/packages/admin-ui/assets/images/storybook/autocomplete/input-anatomy.png b/packages/admin-ui/assets/images/storybook/autocomplete/input-anatomy.png
new file mode 100644
index 00000000000..3a208243219
Binary files /dev/null and b/packages/admin-ui/assets/images/storybook/autocomplete/input-anatomy.png differ
diff --git a/packages/admin-ui/assets/images/storybook/autocomplete/label-anatomy.png b/packages/admin-ui/assets/images/storybook/autocomplete/label-anatomy.png
new file mode 100644
index 00000000000..f329582e155
Binary files /dev/null and b/packages/admin-ui/assets/images/storybook/autocomplete/label-anatomy.png differ
diff --git a/packages/admin-ui/assets/images/storybook/autocomplete/label-options.png b/packages/admin-ui/assets/images/storybook/autocomplete/label-options.png
new file mode 100644
index 00000000000..aea0aad98a2
Binary files /dev/null and b/packages/admin-ui/assets/images/storybook/autocomplete/label-options.png differ
diff --git a/packages/admin-ui/assets/images/storybook/autocomplete/label-properties.png b/packages/admin-ui/assets/images/storybook/autocomplete/label-properties.png
new file mode 100644
index 00000000000..284f4feb077
Binary files /dev/null and b/packages/admin-ui/assets/images/storybook/autocomplete/label-properties.png differ
diff --git a/packages/admin-ui/assets/images/storybook/autocomplete/option.png b/packages/admin-ui/assets/images/storybook/autocomplete/option.png
new file mode 100644
index 00000000000..ac8361e84a5
Binary files /dev/null and b/packages/admin-ui/assets/images/storybook/autocomplete/option.png differ
diff --git a/packages/admin-ui/assets/images/storybook/autocomplete/states-and-styles.png b/packages/admin-ui/assets/images/storybook/autocomplete/states-and-styles.png
new file mode 100644
index 00000000000..db05b38ed52
Binary files /dev/null and b/packages/admin-ui/assets/images/storybook/autocomplete/states-and-styles.png differ
diff --git a/packages/admin-ui/assets/images/storybook/autocomplete/style.png b/packages/admin-ui/assets/images/storybook/autocomplete/style.png
new file mode 100644
index 00000000000..69a41e160d7
Binary files /dev/null and b/packages/admin-ui/assets/images/storybook/autocomplete/style.png differ
diff --git a/packages/admin-ui/assets/images/storybook/autocomplete/used-in-forms.png b/packages/admin-ui/assets/images/storybook/autocomplete/used-in-forms.png
new file mode 100644
index 00000000000..2a636abfe76
Binary files /dev/null and b/packages/admin-ui/assets/images/storybook/autocomplete/used-in-forms.png differ
diff --git a/packages/admin-ui/assets/images/storybook/avatar/header.png b/packages/admin-ui/assets/images/storybook/avatar/header.png
new file mode 100644
index 00000000000..9ea02477dd2
Binary files /dev/null and b/packages/admin-ui/assets/images/storybook/avatar/header.png differ
diff --git a/packages/admin-ui/assets/images/storybook/avatar/size.png b/packages/admin-ui/assets/images/storybook/avatar/size.png
new file mode 100644
index 00000000000..b22e36d712b
Binary files /dev/null and b/packages/admin-ui/assets/images/storybook/avatar/size.png differ
diff --git a/packages/admin-ui/assets/images/storybook/avatar/style.png b/packages/admin-ui/assets/images/storybook/avatar/style.png
new file mode 100644
index 00000000000..9ca1141f8f8
Binary files /dev/null and b/packages/admin-ui/assets/images/storybook/avatar/style.png differ
diff --git a/packages/admin-ui/assets/images/storybook/avatar/table.png b/packages/admin-ui/assets/images/storybook/avatar/table.png
new file mode 100644
index 00000000000..4af80bebda9
Binary files /dev/null and b/packages/admin-ui/assets/images/storybook/avatar/table.png differ
diff --git a/packages/admin-ui/assets/images/storybook/avatar/type.png b/packages/admin-ui/assets/images/storybook/avatar/type.png
new file mode 100644
index 00000000000..5faa684b4bb
Binary files /dev/null and b/packages/admin-ui/assets/images/storybook/avatar/type.png differ
diff --git a/packages/admin-ui/assets/images/storybook/button/button-group.png b/packages/admin-ui/assets/images/storybook/button/button-group.png
new file mode 100644
index 00000000000..3cf8fdaa38f
Binary files /dev/null and b/packages/admin-ui/assets/images/storybook/button/button-group.png differ
diff --git a/packages/admin-ui/assets/images/storybook/button/contruction.png b/packages/admin-ui/assets/images/storybook/button/contruction.png
new file mode 100644
index 00000000000..00d29cc0324
Binary files /dev/null and b/packages/admin-ui/assets/images/storybook/button/contruction.png differ
diff --git a/packages/admin-ui/assets/images/storybook/button/icon-usage.png b/packages/admin-ui/assets/images/storybook/button/icon-usage.png
new file mode 100644
index 00000000000..d991420489f
Binary files /dev/null and b/packages/admin-ui/assets/images/storybook/button/icon-usage.png differ
diff --git a/packages/admin-ui/assets/images/storybook/button/options.png b/packages/admin-ui/assets/images/storybook/button/options.png
new file mode 100644
index 00000000000..b520db65f96
Binary files /dev/null and b/packages/admin-ui/assets/images/storybook/button/options.png differ
diff --git a/packages/admin-ui/assets/images/storybook/button/primary-button-usage.png b/packages/admin-ui/assets/images/storybook/button/primary-button-usage.png
new file mode 100644
index 00000000000..cf2b92f4b3a
Binary files /dev/null and b/packages/admin-ui/assets/images/storybook/button/primary-button-usage.png differ
diff --git a/packages/admin-ui/assets/images/storybook/button/size-icon-only.png b/packages/admin-ui/assets/images/storybook/button/size-icon-only.png
new file mode 100644
index 00000000000..714f8f4ca12
Binary files /dev/null and b/packages/admin-ui/assets/images/storybook/button/size-icon-only.png differ
diff --git a/packages/admin-ui/assets/images/storybook/button/size.png b/packages/admin-ui/assets/images/storybook/button/size.png
new file mode 100644
index 00000000000..3bfa15b20d1
Binary files /dev/null and b/packages/admin-ui/assets/images/storybook/button/size.png differ
diff --git a/packages/admin-ui/assets/images/storybook/button/states.png b/packages/admin-ui/assets/images/storybook/button/states.png
new file mode 100644
index 00000000000..877d850d60c
Binary files /dev/null and b/packages/admin-ui/assets/images/storybook/button/states.png differ
diff --git a/packages/admin-ui/assets/images/storybook/button/type.png b/packages/admin-ui/assets/images/storybook/button/type.png
new file mode 100644
index 00000000000..98b1e908c00
Binary files /dev/null and b/packages/admin-ui/assets/images/storybook/button/type.png differ
diff --git a/packages/admin-ui/assets/images/storybook/card/construction.png b/packages/admin-ui/assets/images/storybook/card/construction.png
new file mode 100644
index 00000000000..2a4a78493fd
Binary files /dev/null and b/packages/admin-ui/assets/images/storybook/card/construction.png differ
diff --git a/packages/admin-ui/assets/images/storybook/card/elevation.png b/packages/admin-ui/assets/images/storybook/card/elevation.png
new file mode 100644
index 00000000000..e2b6ea8fe39
Binary files /dev/null and b/packages/admin-ui/assets/images/storybook/card/elevation.png differ
diff --git a/packages/admin-ui/assets/images/storybook/card/padding.png b/packages/admin-ui/assets/images/storybook/card/padding.png
new file mode 100644
index 00000000000..dd9e491decf
Binary files /dev/null and b/packages/admin-ui/assets/images/storybook/card/padding.png differ
diff --git a/packages/admin-ui/assets/images/storybook/card/radius.png b/packages/admin-ui/assets/images/storybook/card/radius.png
new file mode 100644
index 00000000000..c496289f232
Binary files /dev/null and b/packages/admin-ui/assets/images/storybook/card/radius.png differ
diff --git a/packages/admin-ui/assets/images/storybook/card/stacked.png b/packages/admin-ui/assets/images/storybook/card/stacked.png
new file mode 100644
index 00000000000..517b30569a0
Binary files /dev/null and b/packages/admin-ui/assets/images/storybook/card/stacked.png differ
diff --git a/packages/admin-ui/assets/images/storybook/checkbox-group/general.png b/packages/admin-ui/assets/images/storybook/checkbox-group/general.png
new file mode 100644
index 00000000000..079df4de469
Binary files /dev/null and b/packages/admin-ui/assets/images/storybook/checkbox-group/general.png differ
diff --git a/packages/admin-ui/assets/images/storybook/checkbox/checkbox-input-options.png b/packages/admin-ui/assets/images/storybook/checkbox/checkbox-input-options.png
new file mode 100644
index 00000000000..90fdfa923cf
Binary files /dev/null and b/packages/admin-ui/assets/images/storybook/checkbox/checkbox-input-options.png differ
diff --git a/packages/admin-ui/assets/images/storybook/checkbox/general.png b/packages/admin-ui/assets/images/storybook/checkbox/general.png
new file mode 100644
index 00000000000..079df4de469
Binary files /dev/null and b/packages/admin-ui/assets/images/storybook/checkbox/general.png differ
diff --git a/packages/admin-ui/assets/images/storybook/checkbox/states.png b/packages/admin-ui/assets/images/storybook/checkbox/states.png
new file mode 100644
index 00000000000..c756f30b185
Binary files /dev/null and b/packages/admin-ui/assets/images/storybook/checkbox/states.png differ
diff --git a/packages/admin-ui/assets/images/storybook/checkbox/text-overflow.png b/packages/admin-ui/assets/images/storybook/checkbox/text-overflow.png
new file mode 100644
index 00000000000..16a43ce5d7e
Binary files /dev/null and b/packages/admin-ui/assets/images/storybook/checkbox/text-overflow.png differ
diff --git a/packages/admin-ui/assets/images/storybook/dialog/anatomy.png b/packages/admin-ui/assets/images/storybook/dialog/anatomy.png
new file mode 100644
index 00000000000..298fc189c50
Binary files /dev/null and b/packages/admin-ui/assets/images/storybook/dialog/anatomy.png differ
diff --git a/packages/admin-ui/assets/images/storybook/dialog/overlay-and-positioning.png b/packages/admin-ui/assets/images/storybook/dialog/overlay-and-positioning.png
new file mode 100644
index 00000000000..89e6a8d2f38
Binary files /dev/null and b/packages/admin-ui/assets/images/storybook/dialog/overlay-and-positioning.png differ
diff --git a/packages/admin-ui/assets/images/storybook/dialog/usage.png b/packages/admin-ui/assets/images/storybook/dialog/usage.png
new file mode 100644
index 00000000000..d19a2210d78
Binary files /dev/null and b/packages/admin-ui/assets/images/storybook/dialog/usage.png differ
diff --git a/packages/admin-ui/assets/images/storybook/drawer/anatomy.png b/packages/admin-ui/assets/images/storybook/drawer/anatomy.png
new file mode 100644
index 00000000000..8855503100e
Binary files /dev/null and b/packages/admin-ui/assets/images/storybook/drawer/anatomy.png differ
diff --git a/packages/admin-ui/assets/images/storybook/drawer/dividers.png b/packages/admin-ui/assets/images/storybook/drawer/dividers.png
new file mode 100644
index 00000000000..e295c4ef3fe
Binary files /dev/null and b/packages/admin-ui/assets/images/storybook/drawer/dividers.png differ
diff --git a/packages/admin-ui/assets/images/storybook/drawer/header.png b/packages/admin-ui/assets/images/storybook/drawer/header.png
new file mode 100644
index 00000000000..d117a0c1400
Binary files /dev/null and b/packages/admin-ui/assets/images/storybook/drawer/header.png differ
diff --git a/packages/admin-ui/assets/images/storybook/drawer/positioning.png b/packages/admin-ui/assets/images/storybook/drawer/positioning.png
new file mode 100644
index 00000000000..0f9c98f7e13
Binary files /dev/null and b/packages/admin-ui/assets/images/storybook/drawer/positioning.png differ
diff --git a/packages/admin-ui/assets/images/storybook/grid/breakpoints.png b/packages/admin-ui/assets/images/storybook/grid/breakpoints.png
new file mode 100644
index 00000000000..1e860281501
Binary files /dev/null and b/packages/admin-ui/assets/images/storybook/grid/breakpoints.png differ
diff --git a/packages/admin-ui/assets/images/storybook/grid/column-offsets.png b/packages/admin-ui/assets/images/storybook/grid/column-offsets.png
new file mode 100644
index 00000000000..773f38b9183
Binary files /dev/null and b/packages/admin-ui/assets/images/storybook/grid/column-offsets.png differ
diff --git a/packages/admin-ui/assets/images/storybook/grid/column-spans.png b/packages/admin-ui/assets/images/storybook/grid/column-spans.png
new file mode 100644
index 00000000000..4258b5baa7e
Binary files /dev/null and b/packages/admin-ui/assets/images/storybook/grid/column-spans.png differ
diff --git a/packages/admin-ui/assets/images/storybook/grid/fixed-dashboard.png b/packages/admin-ui/assets/images/storybook/grid/fixed-dashboard.png
new file mode 100644
index 00000000000..70f36c35855
Binary files /dev/null and b/packages/admin-ui/assets/images/storybook/grid/fixed-dashboard.png differ
diff --git a/packages/admin-ui/assets/images/storybook/grid/fixed.png b/packages/admin-ui/assets/images/storybook/grid/fixed.png
new file mode 100644
index 00000000000..73e8f87a762
Binary files /dev/null and b/packages/admin-ui/assets/images/storybook/grid/fixed.png differ
diff --git a/packages/admin-ui/assets/images/storybook/grid/fluid-dashboard.png b/packages/admin-ui/assets/images/storybook/grid/fluid-dashboard.png
new file mode 100644
index 00000000000..bcdc5cc93ee
Binary files /dev/null and b/packages/admin-ui/assets/images/storybook/grid/fluid-dashboard.png differ
diff --git a/packages/admin-ui/assets/images/storybook/grid/fluid.png b/packages/admin-ui/assets/images/storybook/grid/fluid.png
new file mode 100644
index 00000000000..eb92a242c11
Binary files /dev/null and b/packages/admin-ui/assets/images/storybook/grid/fluid.png differ
diff --git a/packages/admin-ui/assets/images/storybook/grid/grid-gutter-size-comfortable.png b/packages/admin-ui/assets/images/storybook/grid/grid-gutter-size-comfortable.png
new file mode 100644
index 00000000000..05552bd2bab
Binary files /dev/null and b/packages/admin-ui/assets/images/storybook/grid/grid-gutter-size-comfortable.png differ
diff --git a/packages/admin-ui/assets/images/storybook/grid/grid-gutter-size-spacious.png b/packages/admin-ui/assets/images/storybook/grid/grid-gutter-size-spacious.png
new file mode 100644
index 00000000000..7261808e45f
Binary files /dev/null and b/packages/admin-ui/assets/images/storybook/grid/grid-gutter-size-spacious.png differ
diff --git a/packages/admin-ui/assets/images/storybook/input/anatomy.png b/packages/admin-ui/assets/images/storybook/input/anatomy.png
new file mode 100644
index 00000000000..6f77adc3788
Binary files /dev/null and b/packages/admin-ui/assets/images/storybook/input/anatomy.png differ
diff --git a/packages/admin-ui/assets/images/storybook/input/field-size.png b/packages/admin-ui/assets/images/storybook/input/field-size.png
new file mode 100644
index 00000000000..07ba7e57706
Binary files /dev/null and b/packages/admin-ui/assets/images/storybook/input/field-size.png differ
diff --git a/packages/admin-ui/assets/images/storybook/input/label-anatomy.png b/packages/admin-ui/assets/images/storybook/input/label-anatomy.png
new file mode 100644
index 00000000000..d4a13499c95
Binary files /dev/null and b/packages/admin-ui/assets/images/storybook/input/label-anatomy.png differ
diff --git a/packages/admin-ui/assets/images/storybook/input/label-options.png b/packages/admin-ui/assets/images/storybook/input/label-options.png
new file mode 100644
index 00000000000..4b9ccfd09be
Binary files /dev/null and b/packages/admin-ui/assets/images/storybook/input/label-options.png differ
diff --git a/packages/admin-ui/assets/images/storybook/input/label-properties.png b/packages/admin-ui/assets/images/storybook/input/label-properties.png
new file mode 100644
index 00000000000..08f8dfaa87c
Binary files /dev/null and b/packages/admin-ui/assets/images/storybook/input/label-properties.png differ
diff --git a/packages/admin-ui/assets/images/storybook/input/states-and-styles.png b/packages/admin-ui/assets/images/storybook/input/states-and-styles.png
new file mode 100644
index 00000000000..c85e5318ac5
Binary files /dev/null and b/packages/admin-ui/assets/images/storybook/input/states-and-styles.png differ
diff --git a/packages/admin-ui/assets/images/storybook/input/styles.png b/packages/admin-ui/assets/images/storybook/input/styles.png
new file mode 100644
index 00000000000..b5273deb00a
Binary files /dev/null and b/packages/admin-ui/assets/images/storybook/input/styles.png differ
diff --git a/packages/admin-ui/assets/images/storybook/input/used-in-forms.png b/packages/admin-ui/assets/images/storybook/input/used-in-forms.png
new file mode 100644
index 00000000000..00a851b9eba
Binary files /dev/null and b/packages/admin-ui/assets/images/storybook/input/used-in-forms.png differ
diff --git a/packages/admin-ui/assets/images/storybook/link/primary.png b/packages/admin-ui/assets/images/storybook/link/primary.png
new file mode 100644
index 00000000000..7c0fc2dacf8
Binary files /dev/null and b/packages/admin-ui/assets/images/storybook/link/primary.png differ
diff --git a/packages/admin-ui/assets/images/storybook/link/secondary.png b/packages/admin-ui/assets/images/storybook/link/secondary.png
new file mode 100644
index 00000000000..45241e7ea0f
Binary files /dev/null and b/packages/admin-ui/assets/images/storybook/link/secondary.png differ
diff --git a/packages/admin-ui/assets/images/storybook/link/sizing.png b/packages/admin-ui/assets/images/storybook/link/sizing.png
new file mode 100644
index 00000000000..032c65e59b1
Binary files /dev/null and b/packages/admin-ui/assets/images/storybook/link/sizing.png differ
diff --git a/packages/admin-ui/assets/images/storybook/link/states.png b/packages/admin-ui/assets/images/storybook/link/states.png
new file mode 100644
index 00000000000..c4d7d6aa9cc
Binary files /dev/null and b/packages/admin-ui/assets/images/storybook/link/states.png differ
diff --git a/packages/admin-ui/assets/images/storybook/link/usage.png b/packages/admin-ui/assets/images/storybook/link/usage.png
new file mode 100644
index 00000000000..03331a3083b
Binary files /dev/null and b/packages/admin-ui/assets/images/storybook/link/usage.png differ
diff --git a/packages/admin-ui/assets/images/storybook/loader/background-overlay.png b/packages/admin-ui/assets/images/storybook/loader/background-overlay.png
new file mode 100644
index 00000000000..e1fe6d06ca9
Binary files /dev/null and b/packages/admin-ui/assets/images/storybook/loader/background-overlay.png differ
diff --git a/packages/admin-ui/assets/images/storybook/loader/construction.png b/packages/admin-ui/assets/images/storybook/loader/construction.png
new file mode 100644
index 00000000000..f45ec1de2bb
Binary files /dev/null and b/packages/admin-ui/assets/images/storybook/loader/construction.png differ
diff --git a/packages/admin-ui/assets/images/storybook/loader/size.png b/packages/admin-ui/assets/images/storybook/loader/size.png
new file mode 100644
index 00000000000..c53e4d9bfae
Binary files /dev/null and b/packages/admin-ui/assets/images/storybook/loader/size.png differ
diff --git a/packages/admin-ui/assets/images/storybook/loader/style.png b/packages/admin-ui/assets/images/storybook/loader/style.png
new file mode 100644
index 00000000000..821e6dd1936
Binary files /dev/null and b/packages/admin-ui/assets/images/storybook/loader/style.png differ
diff --git a/packages/admin-ui/assets/images/storybook/loader/type.png b/packages/admin-ui/assets/images/storybook/loader/type.png
new file mode 100644
index 00000000000..57eb1ea488c
Binary files /dev/null and b/packages/admin-ui/assets/images/storybook/loader/type.png differ
diff --git a/packages/admin-ui/assets/images/storybook/loader/usage-1.png b/packages/admin-ui/assets/images/storybook/loader/usage-1.png
new file mode 100644
index 00000000000..cb474cfc5e8
Binary files /dev/null and b/packages/admin-ui/assets/images/storybook/loader/usage-1.png differ
diff --git a/packages/admin-ui/assets/images/storybook/loader/usage-2.png b/packages/admin-ui/assets/images/storybook/loader/usage-2.png
new file mode 100644
index 00000000000..6e005db8116
Binary files /dev/null and b/packages/admin-ui/assets/images/storybook/loader/usage-2.png differ
diff --git a/packages/admin-ui/assets/images/storybook/radio-group/anatomy.png b/packages/admin-ui/assets/images/storybook/radio-group/anatomy.png
new file mode 100644
index 00000000000..c41104ead42
Binary files /dev/null and b/packages/admin-ui/assets/images/storybook/radio-group/anatomy.png differ
diff --git a/packages/admin-ui/assets/images/storybook/radio-group/options.png b/packages/admin-ui/assets/images/storybook/radio-group/options.png
new file mode 100644
index 00000000000..dfa594fea5d
Binary files /dev/null and b/packages/admin-ui/assets/images/storybook/radio-group/options.png differ
diff --git a/packages/admin-ui/assets/images/storybook/radio-group/states.png b/packages/admin-ui/assets/images/storybook/radio-group/states.png
new file mode 100644
index 00000000000..275b8d4b9ea
Binary files /dev/null and b/packages/admin-ui/assets/images/storybook/radio-group/states.png differ
diff --git a/packages/admin-ui/assets/images/storybook/radio-group/text-overflow.png b/packages/admin-ui/assets/images/storybook/radio-group/text-overflow.png
new file mode 100644
index 00000000000..1c783dd9cba
Binary files /dev/null and b/packages/admin-ui/assets/images/storybook/radio-group/text-overflow.png differ
diff --git a/packages/admin-ui/assets/images/storybook/select/anatomy.png b/packages/admin-ui/assets/images/storybook/select/anatomy.png
new file mode 100644
index 00000000000..1021e08266a
Binary files /dev/null and b/packages/admin-ui/assets/images/storybook/select/anatomy.png differ
diff --git a/packages/admin-ui/assets/images/storybook/select/label-anatomy.png b/packages/admin-ui/assets/images/storybook/select/label-anatomy.png
new file mode 100644
index 00000000000..bd1777e07e4
Binary files /dev/null and b/packages/admin-ui/assets/images/storybook/select/label-anatomy.png differ
diff --git a/packages/admin-ui/assets/images/storybook/select/label-options.png b/packages/admin-ui/assets/images/storybook/select/label-options.png
new file mode 100644
index 00000000000..4872dd4fe14
Binary files /dev/null and b/packages/admin-ui/assets/images/storybook/select/label-options.png differ
diff --git a/packages/admin-ui/assets/images/storybook/select/label-properties.png b/packages/admin-ui/assets/images/storybook/select/label-properties.png
new file mode 100644
index 00000000000..a7d79d73329
Binary files /dev/null and b/packages/admin-ui/assets/images/storybook/select/label-properties.png differ
diff --git a/packages/admin-ui/assets/images/storybook/select/options.png b/packages/admin-ui/assets/images/storybook/select/options.png
new file mode 100644
index 00000000000..4752e02a33d
Binary files /dev/null and b/packages/admin-ui/assets/images/storybook/select/options.png differ
diff --git a/packages/admin-ui/assets/images/storybook/select/states-and-styles.png b/packages/admin-ui/assets/images/storybook/select/states-and-styles.png
new file mode 100644
index 00000000000..6d773452150
Binary files /dev/null and b/packages/admin-ui/assets/images/storybook/select/states-and-styles.png differ
diff --git a/packages/admin-ui/assets/images/storybook/select/styles.png b/packages/admin-ui/assets/images/storybook/select/styles.png
new file mode 100644
index 00000000000..56e7a701f32
Binary files /dev/null and b/packages/admin-ui/assets/images/storybook/select/styles.png differ
diff --git a/packages/admin-ui/assets/images/storybook/select/used-in-forms.png b/packages/admin-ui/assets/images/storybook/select/used-in-forms.png
new file mode 100644
index 00000000000..6c15662cc02
Binary files /dev/null and b/packages/admin-ui/assets/images/storybook/select/used-in-forms.png differ
diff --git a/packages/admin-ui/assets/images/storybook/tabs/construction.png b/packages/admin-ui/assets/images/storybook/tabs/construction.png
new file mode 100644
index 00000000000..c0ebe9a2d34
Binary files /dev/null and b/packages/admin-ui/assets/images/storybook/tabs/construction.png differ
diff --git a/packages/admin-ui/assets/images/storybook/tabs/size-and-states.png b/packages/admin-ui/assets/images/storybook/tabs/size-and-states.png
new file mode 100644
index 00000000000..dd5897d5b59
Binary files /dev/null and b/packages/admin-ui/assets/images/storybook/tabs/size-and-states.png differ
diff --git a/packages/admin-ui/assets/images/storybook/tabs/tab-group.png b/packages/admin-ui/assets/images/storybook/tabs/tab-group.png
new file mode 100644
index 00000000000..ddc54cd68bc
Binary files /dev/null and b/packages/admin-ui/assets/images/storybook/tabs/tab-group.png differ
diff --git a/packages/admin-ui/assets/images/storybook/tabs/usage.png b/packages/admin-ui/assets/images/storybook/tabs/usage.png
new file mode 100644
index 00000000000..faca6f0328e
Binary files /dev/null and b/packages/admin-ui/assets/images/storybook/tabs/usage.png differ
diff --git a/packages/admin-ui/assets/images/storybook/tag/construction.png b/packages/admin-ui/assets/images/storybook/tag/construction.png
new file mode 100644
index 00000000000..6d0e1d602de
Binary files /dev/null and b/packages/admin-ui/assets/images/storybook/tag/construction.png differ
diff --git a/packages/admin-ui/assets/images/storybook/tag/states.png b/packages/admin-ui/assets/images/storybook/tag/states.png
new file mode 100644
index 00000000000..eba452dceca
Binary files /dev/null and b/packages/admin-ui/assets/images/storybook/tag/states.png differ
diff --git a/packages/admin-ui/assets/images/storybook/tag/style.png b/packages/admin-ui/assets/images/storybook/tag/style.png
new file mode 100644
index 00000000000..29458b4fd85
Binary files /dev/null and b/packages/admin-ui/assets/images/storybook/tag/style.png differ
diff --git a/packages/admin-ui/assets/images/storybook/tag/usage.png b/packages/admin-ui/assets/images/storybook/tag/usage.png
new file mode 100644
index 00000000000..26c61187df0
Binary files /dev/null and b/packages/admin-ui/assets/images/storybook/tag/usage.png differ
diff --git a/packages/admin-ui/assets/images/storybook/textarea/anatomy.png b/packages/admin-ui/assets/images/storybook/textarea/anatomy.png
new file mode 100644
index 00000000000..a6252083dfb
Binary files /dev/null and b/packages/admin-ui/assets/images/storybook/textarea/anatomy.png differ
diff --git a/packages/admin-ui/assets/images/storybook/textarea/field-size.png b/packages/admin-ui/assets/images/storybook/textarea/field-size.png
new file mode 100644
index 00000000000..31b944f8175
Binary files /dev/null and b/packages/admin-ui/assets/images/storybook/textarea/field-size.png differ
diff --git a/packages/admin-ui/assets/images/storybook/textarea/label-anatomy.png b/packages/admin-ui/assets/images/storybook/textarea/label-anatomy.png
new file mode 100644
index 00000000000..5756e04df55
Binary files /dev/null and b/packages/admin-ui/assets/images/storybook/textarea/label-anatomy.png differ
diff --git a/packages/admin-ui/assets/images/storybook/textarea/label-options.png b/packages/admin-ui/assets/images/storybook/textarea/label-options.png
new file mode 100644
index 00000000000..272f3aa6d70
Binary files /dev/null and b/packages/admin-ui/assets/images/storybook/textarea/label-options.png differ
diff --git a/packages/admin-ui/assets/images/storybook/textarea/label-properties.png b/packages/admin-ui/assets/images/storybook/textarea/label-properties.png
new file mode 100644
index 00000000000..f583300c06c
Binary files /dev/null and b/packages/admin-ui/assets/images/storybook/textarea/label-properties.png differ
diff --git a/packages/admin-ui/assets/images/storybook/textarea/states-and-styles.png b/packages/admin-ui/assets/images/storybook/textarea/states-and-styles.png
new file mode 100644
index 00000000000..20a1a2761a0
Binary files /dev/null and b/packages/admin-ui/assets/images/storybook/textarea/states-and-styles.png differ
diff --git a/packages/admin-ui/assets/images/storybook/textarea/styles.png b/packages/admin-ui/assets/images/storybook/textarea/styles.png
new file mode 100644
index 00000000000..9a0c28871e0
Binary files /dev/null and b/packages/admin-ui/assets/images/storybook/textarea/styles.png differ
diff --git a/packages/admin-ui/assets/images/storybook/textarea/used-in-forms.png b/packages/admin-ui/assets/images/storybook/textarea/used-in-forms.png
new file mode 100644
index 00000000000..acce6fcb69a
Binary files /dev/null and b/packages/admin-ui/assets/images/storybook/textarea/used-in-forms.png differ
diff --git a/packages/admin-ui/assets/images/wby-logo.png b/packages/admin-ui/assets/images/wby-logo.png
new file mode 100644
index 00000000000..ee207a1d70d
Binary files /dev/null and b/packages/admin-ui/assets/images/wby-logo.png differ
diff --git a/packages/admin-ui/docs/stories/00-getting-started/welcome.mdx b/packages/admin-ui/docs/stories/00-getting-started/welcome.mdx
new file mode 100644
index 00000000000..c8aa67f4d91
--- /dev/null
+++ b/packages/admin-ui/docs/stories/00-getting-started/welcome.mdx
@@ -0,0 +1,39 @@
+import { Meta } from '@storybook/blocks';
+
+<Meta title="Getting Started/Welcome" />
+
+<style>
+    {`
+    .sbdocs-wrapper > div:has(div > .toc-wrapper) {
+      display: none;
+    }
+  `}
+</style>
+
+![Webiny Design System cover](/images/design-system-cover.png)
+
+# Welcome
+
+Welcome to the Webiny Design System, your go-to resource for creating consistent, user-friendly, and innovative interfaces across all Webiny applications.
+
+The Webiny Design System is a collection of UI components, guidelines, and best practices that help you build interfaces that are not only visually appealing but also highly functional and accessible. Whether you're a developer, designer, or product manager, this system provides the tools and resources you need to create exceptional user experiences.
+
+## What You'll Find Here
+
+In this documentation, you'll find the following:
+
+1. **Components**: A comprehensive list of UI components, each with its own documentation, usage examples, and code snippets. You'll learn how to use these components to build your interfaces, as well as how to customize them to fit your specific needs.
+
+2. **Guidelines**: A set of design and development guidelines that help you create consistent and accessible interfaces. These guidelines cover topics such as color, layout, and accessibility.
+
+3. **Best Practices**: A collection of best practices for building interfaces that are not only visually appealing but also highly functional and accessible. These best practices cover topics such as form design, button usage, and error handling.
+
+## How to Use This Documentation
+
+To get started, we recommend that you explore the different components and their documentation. Each component has its own page with usage examples, code snippets, and additional resources.
+
+If you're looking for something specific, you can use the search bar at the top of the page to find what you're looking for.
+
+## Feedback and Contributions
+
+We welcome feedback and contributions to the Webiny Design System. If you have questions, suggestions, or bug reports, feel free to reach out on our 👉 [community Slack](https://www.webiny.com/slack) or open an issue on our [GitHub repository](https://github.com/webiny/webiny-js).
diff --git a/packages/admin-ui/jest.setup.js b/packages/admin-ui/jest.setup.js
new file mode 100644
index 00000000000..cc5ac2bb64f
--- /dev/null
+++ b/packages/admin-ui/jest.setup.js
@@ -0,0 +1,5 @@
+const base = require("../../jest.config.base");
+
+module.exports = {
+    ...base({ path: __dirname })
+};
diff --git a/packages/admin-ui/package.json b/packages/admin-ui/package.json
new file mode 100644
index 00000000000..5604ff18b5e
--- /dev/null
+++ b/packages/admin-ui/package.json
@@ -0,0 +1,98 @@
+{
+  "name": "@webiny/admin-ui",
+  "version": "0.0.0",
+  "main": "index.js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/webiny/webiny-js.git"
+  },
+  "description": "The UI component library for Webiny's Admin app.",
+  "license": "MIT",
+  "dependencies": {
+    "@editorjs/editorjs": "2.26.5",
+    "@fortawesome/fontawesome-svg-core": "^1.3.0",
+    "@fortawesome/react-fontawesome": "^0.1.17",
+    "@radix-ui/react-accessible-icon": "^1.1.2",
+    "@radix-ui/react-avatar": "^1.1.3",
+    "@radix-ui/react-checkbox": "^1.1.4",
+    "@radix-ui/react-collapsible": "^1.1.3",
+    "@radix-ui/react-dialog": "^1.1.6",
+    "@radix-ui/react-dropdown-menu": "^2.1.6",
+    "@radix-ui/react-label": "^2.1.2",
+    "@radix-ui/react-popover": "^1.1.6",
+    "@radix-ui/react-progress": "^1.1.7",
+    "@radix-ui/react-radio-group": "^1.2.3",
+    "@radix-ui/react-select": "^2.1.6",
+    "@radix-ui/react-separator": "^1.1.2",
+    "@radix-ui/react-slider": "^1.2.3",
+    "@radix-ui/react-slot": "^1.1.2",
+    "@radix-ui/react-switch": "^1.1.3",
+    "@radix-ui/react-tabs": "^1.1.3",
+    "@radix-ui/react-tooltip": "^1.1.8",
+    "@tanstack/react-table": "^8.20.6",
+    "@webiny/icons": "0.0.0",
+    "@webiny/react-composition": "0.0.0",
+    "@webiny/react-router": "0.0.0",
+    "@webiny/utils": "0.0.0",
+    "ace-builds": "^1.37.1",
+    "bytes": "^3.1.2",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.0.4",
+    "lodash": "^4.17.21",
+    "mobx": "^6.9.0",
+    "react": "18.2.0",
+    "react-ace": "^13.0.0",
+    "react-color": "^2.19.3",
+    "react-custom-scrollbars": "^4.2.1",
+    "react-virtualized": "^9.22.5",
+    "sonner": "^2.0.1",
+    "tailwind-merge": "^2.4.0",
+    "tailwindcss": "^3.4.6",
+    "tailwindcss-animate": "^1.0.7",
+    "timeago-react": "^3.0.6"
+  },
+  "devDependencies": {
+    "@fortawesome/free-solid-svg-icons": "^6.0.0",
+    "@storybook/addon-a11y": "7.6.20",
+    "@storybook/addon-essentials": "7.6.20",
+    "@storybook/react": "7.6.20",
+    "@storybook/react-webpack5": "7.6.20",
+    "@storybook/theming": "7.6.20",
+    "@svgr/webpack": "^6.1.1",
+    "@types/react": "18.2.79",
+    "@types/react-color": "^2.17.11",
+    "@types/react-custom-scrollbars": "^4.0.10",
+    "@types/react-virtualized": "^9.22.0",
+    "@webiny/cli": "0.0.0",
+    "@webiny/project-utils": "0.0.0",
+    "chalk": "^4.1.2",
+    "css-loader": "^6.10.0",
+    "file-loader": "6.2.0",
+    "postcss-loader": "^6.2.1",
+    "prettier": "^2.8.8",
+    "rimraf": "^6.0.1",
+    "sass": "1.44.0",
+    "storybook": "7.6.20",
+    "tailwindcss": "^3.4.6",
+    "typescript": "5.3.3"
+  },
+  "publishConfig": {
+    "access": "public",
+    "directory": "dist"
+  },
+  "scripts": {
+    "build": "yarn webiny run build",
+    "watch": "yarn webiny run watch",
+    "storybook": "storybook dev -p 6006",
+    "storybook-docs": "storybook dev --docs -p 6007",
+    "build-storybook": "storybook build --docs"
+  },
+  "adio": {
+    "ignore": {
+      "dependencies": [
+        "react-dom"
+      ]
+    }
+  }
+}
diff --git a/packages/admin-ui/scripts/importFromFigma.js b/packages/admin-ui/scripts/importFromFigma.js
new file mode 100644
index 00000000000..7725dfc7f47
--- /dev/null
+++ b/packages/admin-ui/scripts/importFromFigma.js
@@ -0,0 +1,65 @@
+const fs = require("fs");
+const { green } = require("chalk");
+const path = require("path");
+const { normalizeFigmaExport } = require("./importFromFigma/normalizeFigmaExport");
+const {
+    normalizePrimitivesFigmaExport
+} = require("./importFromFigma/normalizePrimitivesFigmaExport");
+const { createTailwindConfigTheme } = require("./importFromFigma/createTailwindConfigTheme");
+const { createThemeScss } = require("./importFromFigma/createThemeScss");
+const { formatCode } = require("./importFromFigma/formatCode");
+
+const saveFileAndFormat = async (filePath, content) => {
+    fs.writeFileSync(filePath, content);
+    await formatCode(filePath);
+};
+
+(async () => {
+    const normalizedFigmaExport = normalizeFigmaExport();
+    const normalizedPrimitivesFigmaExport = normalizePrimitivesFigmaExport();
+    const tailwindConfigTheme = createTailwindConfigTheme(normalizedFigmaExport);
+    const stylesScss = createThemeScss(normalizedFigmaExport, normalizedPrimitivesFigmaExport);
+
+    const paths = {
+        cwd: process.cwd(),
+        normalizedFigmaExport: path.join(__dirname, "../.normalizedFigmaExport.json"),
+        normalizedPrimitivesFigmaExport: path.join(
+            __dirname,
+            "../.normalizedPrimitivesFigmaExport.json"
+        ),
+        createTailwindConfigTheme: path.join(__dirname, "../tailwind.config.theme.js"),
+        stylesScss: path.join(__dirname, "../src/theme.scss")
+    };
+
+    console.log("Storing...");
+    console.log(
+        `‣ normalized Figma export (${green(
+            path.relative(paths.cwd, paths.normalizedFigmaExport)
+        )}).`
+    );
+    console.log(
+        `‣ Tailwind config theme (${green(
+            path.relative(paths.cwd, paths.createTailwindConfigTheme)
+        )}).`
+    );
+    console.log(`‣ styles.scss (${green(path.relative(paths.cwd, paths.stylesScss))}).`);
+
+    await saveFileAndFormat(
+        paths.normalizedFigmaExport,
+        JSON.stringify(normalizedFigmaExport, null, 2)
+    );
+
+    await saveFileAndFormat(
+        paths.normalizedPrimitivesFigmaExport,
+        JSON.stringify(normalizedPrimitivesFigmaExport, null, 2)
+    );
+
+    await saveFileAndFormat(
+        paths.createTailwindConfigTheme,
+        `module.exports = ${JSON.stringify(tailwindConfigTheme, null, 2)};`
+    );
+
+    await saveFileAndFormat(paths.stylesScss, stylesScss);
+
+    console.log("Done.");
+})();
diff --git a/packages/admin-ui/scripts/importFromFigma/createTailwindConfigTheme.js b/packages/admin-ui/scripts/importFromFigma/createTailwindConfigTheme.js
new file mode 100644
index 00000000000..9405f80423b
--- /dev/null
+++ b/packages/admin-ui/scripts/importFromFigma/createTailwindConfigTheme.js
@@ -0,0 +1,249 @@
+const { DEFAULTS } = require("./defaults");
+
+// We don't need tokens that end with `-a{one or two numbers}` because they are used for
+// alpha colors. We don't need these because we can use the /alpha function in Tailwind CSS.
+const isColorWithAlpha = variantName => {
+    return variantName.match(/^.*-a\d{1,2}$/);
+};
+
+const createTailwindConfigTheme = normalizedFigmaExport => {
+    return {
+        animation: {
+            "accordion-down": "accordion-down 0.2s ease-out",
+            "accordion-up": "accordion-up 0.2s ease-out",
+            "collapsible-down": "collapsible-down 0.2s ease-out",
+            "collapsible-up": "collapsible-up 0.2s ease-out",
+            "skeleton-pulse": "skeleton-pulse 1400ms ease-in-out infinite"
+        },
+        backgroundColor: normalizedFigmaExport.reduce(
+            (acc, { type, variantName }) => {
+                if (type === "backgroundColor") {
+                    if (isColorWithAlpha(variantName)) {
+                        return acc;
+                    }
+
+                    const [, color, variant] = variantName.match("(.*?)-(.*)");
+
+                    if (!acc[color]) {
+                        acc[color] = {
+                            DEFAULT: `hsl(var(--bg-${color}-default))`
+                        };
+                    }
+
+                    acc[color][variant] = `hsl(var(--bg-${variantName}))`;
+                }
+                return acc;
+            },
+            { ...DEFAULTS.COLORS }
+        ),
+        borderColor: normalizedFigmaExport.reduce(
+            (acc, { type, variantName }) => {
+                if (type === "borderColor") {
+                    const [color, ...variantParts] = variantName.split("-");
+                    const variantKey = variantParts.join("-") || "DEFAULT";
+
+                    if (!acc[color]) {
+                        acc[color] = {
+                            DEFAULT: `hsl(var(--border-${color}-default))`
+                        };
+                    }
+
+                    acc[color][variantKey] = `hsl(var(--border-${variantName}))`;
+                }
+                return acc;
+            },
+            { ...DEFAULTS.COLORS }
+        ),
+        borderRadius: normalizedFigmaExport.reduce((acc, { type, variantName }) => {
+            if (type === "borderRadius") {
+                acc[variantName] = `var(--radius-${variantName})`;
+            }
+            return acc;
+        }, {}),
+        borderWidth: normalizedFigmaExport.reduce((acc, { type, variantName }) => {
+            if (type === "borderWidth") {
+                acc[variantName] = `var(--border-width-${variantName})`;
+            }
+            return acc;
+        }, {}),
+        fill: normalizedFigmaExport.reduce(
+            (acc, { type, variantName }) => {
+                if (type === "fill") {
+                    if (isColorWithAlpha(variantName)) {
+                        return acc;
+                    }
+                    const [color, variant] = variantName.split("-");
+                    if (!acc[color]) {
+                        acc[color] = {
+                            DEFAULT: `hsl(var(--fill-${color}))`
+                        };
+                    }
+
+                    // `variant || color` was needed because we have some colors that don't have variants.
+                    // Like, `destructive` only has `destructive` variant. No `muted`, `strong`, etc.
+                    acc[color][variant || color] = `hsl(var(--fill-${variantName}))`;
+                }
+                return acc;
+            },
+            { ...DEFAULTS.COLORS }
+        ),
+        fontSize: normalizedFigmaExport.reduce(
+            (acc, { type, variantName }) => {
+                if (type === "textFont") {
+                    if (!variantName.startsWith("font-size-")) {
+                        return acc;
+                    }
+
+                    const size = variantName.replace("font-size-", "");
+                    acc[size] = [
+                        `var(--text-${size})`,
+                        {
+                            lineHeight: `var(--text-${size}-leading)`,
+                            letterSpacing: `var(--text-${size}-tracking)`
+                        }
+                    ];
+
+                    return acc;
+                }
+
+                return acc;
+            },
+            // On top of what will be imported from Figma, we also add the default heading sizes.
+            [1, 2, 3, 4, 5, 6].reduce((acc, lvl) => {
+                acc[`h${lvl}`] = [
+                    `var(--text-h${lvl})`,
+                    {
+                        lineHeight: `var(--text-h${lvl}-leading)`,
+                        letterSpacing: `var(--text-h${lvl}-tracking)`,
+                        fontWeight: `var(--text-h${lvl}-weight)`
+                    }
+                ];
+                return acc;
+            }, {})
+        ),
+        fontWeight: normalizedFigmaExport.reduce((acc, { type, variantName }) => {
+            if (type === "textFont") {
+                if (!variantName.startsWith("font-weight-")) {
+                    return acc;
+                }
+
+                const weight = variantName.replace("font-weight-", "");
+                acc[weight] = `var(--font-weight-${weight})`;
+
+                return acc;
+            }
+
+            return acc;
+        }, {}),
+        keyframes: {
+            "accordion-down": {
+                from: { height: "0" },
+                to: { height: "var(--radix-accordion-content-height)" }
+            },
+            "accordion-up": {
+                from: { height: "var(--radix-accordion-content-height)" },
+                to: { height: "0" }
+            },
+            "collapsible-down": {
+                from: { height: "0" },
+                to: { height: "var(--radix-collapsible-content-height)" }
+            },
+            "collapsible-up": {
+                from: { height: "var(--radix-collapsible-content-height)" },
+                to: { height: "0" }
+            },
+            "skeleton-pulse": {
+                "0%, 100%": { backgroundColor: "hsl(var(--bg-neutral-dimmed))" },
+                "50%": { backgroundColor: "hsl(var(--bg-neutral-muted))" }
+            }
+        },
+        margin: normalizedFigmaExport.reduce((acc, { type, variantName }) => {
+            if (type === "margin") {
+                acc[variantName] = `var(--margin-${variantName})`;
+            }
+            return acc;
+        }, {}),
+        padding: normalizedFigmaExport.reduce((acc, { type, variantName }) => {
+            if (type === "padding") {
+                acc[variantName] = `var(--padding-${variantName})`;
+            }
+            return acc;
+        }, {}),
+        ringColor: normalizedFigmaExport.reduce(
+            (acc, { type, variantName }) => {
+                if (type === "ringColor") {
+                    if (isColorWithAlpha(variantName)) {
+                        return acc;
+                    }
+
+                    const [color, variant] = variantName.split("-");
+                    if (!acc[color]) {
+                        acc[color] = {
+                            DEFAULT: `hsl(var(--ring-${color}-default))`
+                        };
+                    }
+
+                    acc[color][variant] = `hsl(var(--ring-${variantName}))`;
+                }
+                return acc;
+            },
+            { ...DEFAULTS.COLORS }
+        ),
+        ringWidth: normalizedFigmaExport.reduce((acc, { type, variantName }) => {
+            if (type === "ringWidth") {
+                acc[variantName] = `var(--ring-width-${variantName})`;
+            }
+            return acc;
+        }, {}),
+        shadow: normalizedFigmaExport.reduce((acc, { type, variantName }) => {
+            if (type === "shadow") {
+                acc[variantName] = `var(--shadow-${variantName})`;
+            }
+            return acc;
+        }, {}),
+        spacing: normalizedFigmaExport.reduce(
+            (acc, { type, variantName }) => {
+                if (type === "spacing") {
+                    acc[variantName] = `var(--spacing-${variantName})`;
+                }
+                return acc;
+            },
+            {
+                // Custom sidebar-related variables.
+                "sidebar-collapsed": "var(--spacing-sidebar-collapsed)",
+                "sidebar-expanded": "var(--spacing-sidebar-expanded)",
+                // Custom main content-related variables.
+                "main-content": "var(--spacing-main-content)"
+            }
+        ),
+        textColor: normalizedFigmaExport.reduce(
+            (acc, { type, variantName }) => {
+                if (type === "textColor") {
+                    if (isColorWithAlpha(variantName)) {
+                        return acc;
+                    }
+
+                    const [color, ...variantParts] = variantName.split("-");
+                    const variant = variantParts.join("-");
+                    if (!acc[color]) {
+                        acc[color] = {
+                            DEFAULT: `hsl(var(--text-${color}-default))`
+                        };
+                    }
+
+                    acc[color][variant] = `hsl(var(--text-${variantName}))`;
+                }
+                return acc;
+            },
+            { ...DEFAULTS.COLORS }
+        ),
+        zIndex: {
+            5: 5,
+            15: 15,
+            25: 25,
+            35: 35,
+            45: 45
+        }
+    };
+};
+module.exports = { createTailwindConfigTheme };
diff --git a/packages/admin-ui/scripts/importFromFigma/createThemeScss.js b/packages/admin-ui/scripts/importFromFigma/createThemeScss.js
new file mode 100644
index 00000000000..2597fc2d9d7
--- /dev/null
+++ b/packages/admin-ui/scripts/importFromFigma/createThemeScss.js
@@ -0,0 +1,331 @@
+const fs = require("fs");
+
+// We don't need tokens that end with `-a{one or two numbers}` because they are used for
+// alpha colors. We don't need these because we can use the /alpha function in Tailwind CSS.
+const isColorWithAlpha = variantName => {
+    return variantName.match(/^.*-a\d{1,2}$/);
+};
+
+const createThemeScss = (normalizedFigmaExport, normalizedPrimitivesFigmaExport) => {
+    // Generate `theme.scss` file.
+    let stylesScss = fs.readFileSync(__dirname + "/templates/theme.scss.txt", "utf8");
+
+    // 0. Colors
+    {
+        let currentBgColorGroup = null;
+        const bgColors = normalizedPrimitivesFigmaExport
+            .filter(item => item.type === "colors")
+            .map(variable => {
+                const [colorGroup] = variable.variantName.split("-");
+                const cssVar = `--color-${variable.variantName}: ${variable.hsla.h} ${variable.hsla.s}% ${variable.hsla.l}%;`;
+
+                if (!currentBgColorGroup) {
+                    currentBgColorGroup = colorGroup;
+                    return cssVar;
+                }
+
+                if (!currentBgColorGroup || currentBgColorGroup !== colorGroup) {
+                    currentBgColorGroup = colorGroup;
+                    return ["", cssVar];
+                }
+                return cssVar;
+            })
+            .flat()
+            .reverse();
+
+        stylesScss = stylesScss.replace("{COLORS}", bgColors.join("\n"));
+    }
+
+    // 1. Background color.
+    {
+        let currentBgColorGroup = null;
+        const bgColors = normalizedFigmaExport
+            .filter(item => item.type === "backgroundColor")
+            .filter(variable => !isColorWithAlpha(variable.variantName))
+            .map(variable => {
+                const [colorGroup] = variable.variantName.split("-");
+                const cssVarName = variable.aliasName.replace("colors/colors-", "color-");
+                const cssVar = `--bg-${variable.variantName}: var(--${cssVarName});`;
+
+                if (!currentBgColorGroup) {
+                    currentBgColorGroup = colorGroup;
+                    return cssVar;
+                }
+
+                if (!currentBgColorGroup || currentBgColorGroup !== colorGroup) {
+                    currentBgColorGroup = colorGroup;
+                    return ["", cssVar];
+                }
+                return cssVar;
+            })
+            .flat();
+
+        stylesScss = stylesScss.replace("{BACKGROUND_COLOR}", bgColors.join("\n"));
+    }
+
+    // 2. Border color.
+    {
+        let currentBorderColor = null;
+        const borderColors = normalizedFigmaExport
+            .filter(item => item.type === "borderColor")
+            .filter(variable => !isColorWithAlpha(variable.variantName))
+            .map(variable => {
+                const [colorGroup] = variable.variantName.split("-");
+                const cssVarName = variable.aliasName.replace("colors/colors-", "color-");
+                const cssVar = `--border-${variable.variantName}: var(--${cssVarName});`;
+
+                if (!currentBorderColor) {
+                    currentBorderColor = colorGroup;
+                    return cssVar;
+                }
+
+                if (!currentBorderColor || currentBorderColor !== colorGroup) {
+                    currentBorderColor = colorGroup;
+                    return ["", cssVar];
+                }
+                return cssVar;
+            })
+            .flat();
+
+        stylesScss = stylesScss.replace("{BORDER_COLOR}", borderColors.join("\n"));
+    }
+
+    // 3. Border radius.
+    {
+        const borderRadius = normalizedFigmaExport
+            .filter(item => item.type === "borderRadius")
+            .map(variable => {
+                return `--radius-${variable.variantName}: ${variable.resolvedValue}px;`;
+            });
+
+        stylesScss = stylesScss.replace("{BORDER_RADIUS}", borderRadius.join("\n"));
+    }
+
+    // 4. Border width.
+    {
+        const borderWidth = normalizedFigmaExport
+            .filter(item => item.type === "borderWidth")
+            .map(
+                variable => `--border-width-${variable.variantName}: ${variable.resolvedValue}px;`
+            );
+
+        stylesScss = stylesScss.replace("{BORDER_WIDTH}", borderWidth.join("\n"));
+    }
+
+    // 5. Fill.
+    {
+        let currentFillColorGroup = null;
+        const fillColors = normalizedFigmaExport
+            .filter(item => item.type === "fill")
+            .filter(variable => !isColorWithAlpha(variable.variantName))
+            .map(variable => {
+                const [colorGroup] = variable.variantName.split("-");
+                const cssVarName = variable.aliasName.replace("colors/colors-", "color-");
+                const cssVar = `--fill-${variable.variantName}: var(--${cssVarName});`;
+
+                if (!currentFillColorGroup) {
+                    currentFillColorGroup = colorGroup;
+                    return cssVar;
+                }
+
+                if (!currentFillColorGroup || currentFillColorGroup !== colorGroup) {
+                    currentFillColorGroup = colorGroup;
+                    return ["", cssVar];
+                }
+                return cssVar;
+            })
+            .flat();
+
+        stylesScss = stylesScss.replace("{FILL}", fillColors.join("\n"));
+    }
+
+    // 6. Font.
+    {
+        // Font is not in Figma, we're manually setting the values here.
+        stylesScss = stylesScss.replace("{FONT}", `--font-sans: 'Inter', sans-serif;`);
+    }
+
+    // 6. Font weight.
+    {
+        const weight = normalizedFigmaExport
+            .filter(item => item.type === "textFont" && item.variantName.startsWith("font-weight-"))
+            .map(variable => `--${variable.variantName}: ${variable.resolvedValue};`);
+
+        stylesScss = stylesScss.replace("{FONT_WEIGHT}", weight.join("\n"));
+    }
+
+    // 7. Margin.
+    {
+        const margin = normalizedFigmaExport
+            .filter(item => item.type === "margin")
+            .map(variable => `--margin-${variable.variantName}: ${variable.resolvedValue}px;`);
+
+        stylesScss = stylesScss.replace("{MARGIN}", margin.join("\n"));
+    }
+
+    // 8. Padding.
+    {
+        const padding = normalizedFigmaExport
+            .filter(item => item.type === "padding")
+            .map(variable => `--padding-${variable.variantName}: ${variable.resolvedValue}px;`);
+
+        stylesScss = stylesScss.replace("{PADDING}", padding.join("\n"));
+    }
+
+    // 9. Ring color.
+    {
+        let currentRingColorGroup = null;
+        const ringColors = normalizedFigmaExport
+            .filter(item => item.type === "ringColor")
+            .filter(variable => !isColorWithAlpha(variable.variantName))
+            .map(variable => {
+                const [colorGroup] = variable.variantName.split("-");
+                const cssVarName = variable.aliasName.replace("colors/colors-", "color-");
+                const cssVar = `--ring-${variable.variantName}: var(--${cssVarName});`;
+
+                if (!currentRingColorGroup) {
+                    currentRingColorGroup = colorGroup;
+                    return cssVar;
+                }
+
+                if (!currentRingColorGroup || currentRingColorGroup !== colorGroup) {
+                    currentRingColorGroup = colorGroup;
+                    return ["", cssVar];
+                }
+                return cssVar;
+            })
+            .flat();
+
+        stylesScss = stylesScss.replace("{RING_COLOR}", ringColors.join("\n"));
+    }
+
+    // 10. Ring width.
+    {
+        const ringWidth = normalizedFigmaExport
+            .filter(item => item.type === "ringWidth")
+            .map(variable => `--ring-width-${variable.variantName}: ${variable.resolvedValue}px;`);
+
+        stylesScss = stylesScss.replace("{RING_WIDTH}", ringWidth.join("\n"));
+    }
+
+    // 11. Shadow.
+    {
+        const shadow = normalizedFigmaExport
+            .filter(item => item.type === "shadow")
+            .map(variable => `--shadow-${variable.variantName}: ${variable.resolvedValue}px;`);
+
+        stylesScss = stylesScss.replace("{SHADOW}", shadow.join("\n"));
+    }
+
+    // 12. Spacing.
+    {
+        const spacing = normalizedFigmaExport
+            .filter(item => item.type === "spacing")
+            .map(variable => `--spacing-${variable.variantName}: ${variable.resolvedValue}px;`)
+
+            // Custom sidebar-related variables.
+            .concat(
+                `--spacing-sidebar-collapsed: 44px;`,
+                `--spacing-sidebar-expanded: 256px;`,
+                `--spacing-main-content: calc(100vh - 45px);`
+            );
+
+        stylesScss = stylesScss.replace("{SPACING}", spacing.join("\n"));
+    }
+
+    // 13. Text color.
+    {
+        let currentTextColor = null;
+        const textColors = normalizedFigmaExport
+            .filter(item => item.type === "textColor")
+            .filter(variable => !isColorWithAlpha(variable.variantName))
+            .map(variable => {
+                const [colorGroup] = variable.variantName.split("-");
+                const cssVarName = variable.aliasName.replace("colors/colors-", "color-");
+                const cssVar = `--text-${variable.variantName}: var(--${cssVarName});`;
+
+                if (!currentTextColor) {
+                    currentTextColor = colorGroup;
+                    return cssVar;
+                }
+
+                if (!currentTextColor || currentTextColor !== colorGroup) {
+                    currentTextColor = colorGroup;
+                    return ["", cssVar];
+                }
+                return cssVar;
+            })
+            .flat();
+
+        stylesScss = stylesScss.replace("{TEXT_COLOR}", textColors.join("\n"));
+    }
+
+    // 14. Text size.
+    {
+        const textSize = normalizedFigmaExport
+            .filter(item => item.type === "textFont" && item.variantName.startsWith("font-size-"))
+            .sort((a, b) => a.resolvedValue - b.resolvedValue)
+            .reduce(
+                (acc, { variantName, resolvedValue }) => {
+                    const size = variantName.replace("font-size-", "");
+                    const { resolvedValue: lineHeight } = normalizedFigmaExport.find(item => {
+                        return item.variantName === `line-height-${size}`;
+                    });
+
+                    return [
+                        ...acc,
+                        [
+                            `--text-${size}: ${resolvedValue}px;`,
+                            `--text-${size}-leading: ${lineHeight}px;`,
+                            `--text-${size}-tracking: initial;`,
+                            `--text-${size}-weight: normal;`
+                        ]
+                    ];
+                },
+                [
+                    [
+                        `--text-h1: var(--text-4xl);`,
+                        `--text-h1-leading: var(--text-4xl-leading);`,
+                        `--text-h1-tracking: var(--text-4xl-tracking);`,
+                        `--text-h1-weight: var(--font-weight-semibold);`
+                    ],
+                    [
+                        `--text-h2: var(--text-3xl);`,
+                        `--text-h2-leading: var(--text-3xl-leading);`,
+                        `--text-h2-tracking: var(--text-3xl-tracking);`,
+                        `--text-h2-weight: var(--font-weight-semibold);`
+                    ],
+                    [
+                        `--text-h3: var(--text-xxl);`,
+                        `--text-h3-leading: var(--text-xxl-leading);`,
+                        `--text-h3-tracking: var(--text-xxl-tracking);`,
+                        `--text-h3-weight: var(--font-weight-semibold);`
+                    ],
+                    [
+                        `--text-h4: var(--text-xl);`,
+                        `--text-h4-leading: var(--text-xl-leading);`,
+                        `--text-h4-tracking: initial;`,
+                        `--text-h4-weight: var(--font-weight-semibold);`
+                    ],
+                    [
+                        `--text-h5: var(--text-lg);`,
+                        `--text-h5-leading: var(--text-lg-leading);`,
+                        `--text-h5-tracking: initial;`,
+                        `--text-h5-weight: var(--font-weight-semibold);`
+                    ],
+                    [
+                        `--text-h6: var(--text-md);`,
+                        `--text-h6-leading: var(--text-md-leading);`,
+                        `--text-h6-tracking: initial;`,
+                        `--text-h6-weight: var(--font-weight-semibold);`
+                    ]
+                ]
+            );
+
+        stylesScss = stylesScss.replace("{TEXT_SIZE}", textSize.flat().join("\n"));
+    }
+
+    return stylesScss;
+};
+
+module.exports = { createThemeScss };
diff --git a/packages/admin-ui/scripts/importFromFigma/defaults.js b/packages/admin-ui/scripts/importFromFigma/defaults.js
new file mode 100644
index 00000000000..13c9bb8f7c5
--- /dev/null
+++ b/packages/admin-ui/scripts/importFromFigma/defaults.js
@@ -0,0 +1,8 @@
+const DEFAULTS = {
+    COLORS: {
+        transparent: "transparent",
+        white: "white"
+    }
+};
+
+module.exports = { DEFAULTS };
diff --git a/packages/admin-ui/scripts/importFromFigma/exports/Alias tokens.json b/packages/admin-ui/scripts/importFromFigma/exports/Alias tokens.json
new file mode 100644
index 00000000000..70af99e039a
--- /dev/null
+++ b/packages/admin-ui/scripts/importFromFigma/exports/Alias tokens.json	
@@ -0,0 +1 @@
+{"id":"VariableCollectionId:37:6","name":"Alias tokens","modes":{"37:2":"Mode 1"},"variableIds":["VariableID:39:112","VariableID:1970:8527","VariableID:1970:8529","VariableID:1970:8528","VariableID:1141:3695","VariableID:39:113","VariableID:62:2199","VariableID:1141:3698","VariableID:39:116","VariableID:39:117","VariableID:39:114","VariableID:39:115","VariableID:2665:9916","VariableID:1970:9130","VariableID:1970:9131","VariableID:39:118","VariableID:39:119","VariableID:1141:4555","VariableID:39:120","VariableID:841:778","VariableID:841:783","VariableID:39:121","VariableID:39:122","VariableID:1141:4556","VariableID:39:123","VariableID:841:779","VariableID:841:784","VariableID:835:90","VariableID:835:91","VariableID:1141:4557","VariableID:835:92","VariableID:841:780","VariableID:841:785","VariableID:52:22","VariableID:1522:9133","VariableID:1849:9683","VariableID:1658:621","VariableID:1658:638","VariableID:1522:9134","VariableID:1522:9135","VariableID:1522:9136","VariableID:1522:9137","VariableID:1522:9138","VariableID:1522:9139","VariableID:1522:9140","VariableID:1522:9141","VariableID:1522:9142","VariableID:1522:9143","VariableID:1522:9144","VariableID:1522:9145","VariableID:1522:9146","VariableID:52:23","VariableID:851:2608","VariableID:52:24","VariableID:891:81144","VariableID:2629:7631","VariableID:52:25","VariableID:52:28","VariableID:52:29","VariableID:52:30","VariableID:52:31","VariableID:52:32","VariableID:529:17319","VariableID:1335:7762","VariableID:183:122214","VariableID:1335:7763","VariableID:1335:7764","VariableID:1152:342","VariableID:849:906","VariableID:183:122215","VariableID:4661:15434","VariableID:183:122216","VariableID:183:122217","VariableID:1798:12878","VariableID:183:122218","VariableID:1141:6772","VariableID:183:122219","VariableID:849:783","VariableID:2237:20498","VariableID:849:784","VariableID:2237:20499","VariableID:1639:554","VariableID:52:18","VariableID:81:1904","VariableID:81:1905","VariableID:52:19","VariableID:2369:76482","VariableID:79:37","VariableID:79:38","VariableID:79:39","VariableID:79:40","VariableID:79:235","VariableID:79:239","VariableID:80:242","VariableID:80:243","VariableID:80:244","VariableID:80:245","VariableID:59:8","VariableID:59:9","VariableID:1141:4558","VariableID:59:10","VariableID:841:781","VariableID:841:786","VariableID:59:11","VariableID:59:12","VariableID:1141:4559","VariableID:59:13","VariableID:841:782","VariableID:841:787","VariableID:1148:687","VariableID:79:7","VariableID:1699:9362","VariableID:1148:690","VariableID:1148:689","VariableID:528:17123","VariableID:1516:33864","VariableID:528:17124","VariableID:1516:33861","VariableID:1516:33862","VariableID:528:17125","VariableID:1516:33863","VariableID:528:17126","VariableID:528:17127","VariableID:528:17128","VariableID:1148:688","VariableID:79:8","VariableID:1699:9360","VariableID:1699:9361","VariableID:79:12","VariableID:1699:9359","VariableID:79:236","VariableID:79:237","VariableID:79:238","VariableID:1849:9055","VariableID:1516:33865","VariableID:1516:15576","VariableID:107:716","VariableID:1516:33674","VariableID:1751:787","VariableID:1751:786","VariableID:528:17129","VariableID:1751:788","VariableID:528:17130","VariableID:1751:789","VariableID:1751:790","VariableID:528:17131","VariableID:1751:791","VariableID:528:17132","VariableID:528:17133","VariableID:528:17134","VariableID:107:713","VariableID:1516:33668","VariableID:1516:33671","VariableID:79:232","VariableID:1516:33672","VariableID:79:233","VariableID:79:234","VariableID:203:4497","VariableID:95:1557","VariableID:849:780","VariableID:2675:20392","VariableID:95:1558","VariableID:846:3890","VariableID:95:1559","VariableID:1227:19184","VariableID:1227:21660","VariableID:1227:21661","VariableID:95:1560","VariableID:2675:17230","VariableID:1639:2","VariableID:1639:3","VariableID:1639:540","VariableID:1639:547","VariableID:1639:548","VariableID:1639:549","VariableID:1639:551","VariableID:1639:552","VariableID:1639:553","VariableID:1751:924","VariableID:1751:925"],"variables":[{"id":"VariableID:39:112","name":"backgroundColor/backgroundColor-neutral-dark","description":"","type":"COLOR","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:39:57"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":{"r":0.09803921729326248,"g":0.10980392247438431,"b":0.125490203499794,"a":1},"alias":"VariableID:39:57","aliasName":"colors/colors-neutral-900"}},"scopes":["ALL_SCOPES"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:39:113","name":"backgroundColor/backgroundColor-neutral-strong","description":"","type":"COLOR","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:39:52"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":{"r":0.7438521981239319,"g":0.7645292282104492,"b":0.7989909052848816,"a":1},"alias":"VariableID:39:52","aliasName":"colors/colors-neutral-400"}},"scopes":["ALL_SCOPES"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:39:114","name":"backgroundColor/backgroundColor-neutral-subtle","description":"","type":"COLOR","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:118:19505"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":{"r":0.9803921580314636,"g":0.9843137264251709,"b":0.9843137264251709,"a":1},"alias":"VariableID:118:19505","aliasName":"colors/colors-neutral-50"}},"scopes":["ALL_SCOPES"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:39:115","name":"backgroundColor/backgroundColor-neutral-base","description":"","type":"COLOR","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:823:2"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":{"r":1,"g":1,"b":1,"a":1},"alias":"VariableID:823:2","aliasName":"colors/colors-neutral-0"}},"scopes":["ALL_SCOPES"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:39:116","name":"backgroundColor/backgroundColor-neutral-dimmed","description":"","type":"COLOR","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:39:50"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":{"r":0.9411764740943909,"g":0.9450980424880981,"b":0.9529411792755127,"a":1},"alias":"VariableID:39:50","aliasName":"colors/colors-neutral-200"}},"scopes":["ALL_SCOPES"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:39:117","name":"backgroundColor/backgroundColor-neutral-light","description":"","type":"COLOR","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:39:49"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":{"r":0.9686274528503418,"g":0.9725490212440491,"b":0.9764705896377563,"a":1},"alias":"VariableID:39:49","aliasName":"colors/colors-neutral-100"}},"scopes":["ALL_SCOPES"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:39:118","name":"backgroundColor/backgroundColor-primary-default","description":"","type":"COLOR","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:38:17"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":{"r":0.9803921580314636,"g":0.34117648005485535,"b":0.13725490868091583,"a":1},"alias":"VariableID:38:17","aliasName":"colors/colors-primary-500"}},"scopes":["ALL_SCOPES"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:39:119","name":"backgroundColor/backgroundColor-primary-muted","description":"","type":"COLOR","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:38:15"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":{"r":0.9882352948188782,"g":0.6666666865348816,"b":0.5686274766921997,"a":1},"alias":"VariableID:38:15","aliasName":"colors/colors-primary-300"}},"scopes":["ALL_SCOPES"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:39:120","name":"backgroundColor/backgroundColor-primary-subtle","description":"","type":"COLOR","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:37:4"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":{"r":1,"g":0.9529722929000854,"b":0.9474395513534546,"a":1},"alias":"VariableID:37:4","aliasName":"colors/colors-primary-100"}},"scopes":["ALL_SCOPES"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:39:121","name":"backgroundColor/backgroundColor-secondary-default","description":"","type":"COLOR","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:38:26"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":{"r":0,"g":0.7490196228027344,"b":0.6196078658103943,"a":1},"alias":"VariableID:38:26","aliasName":"colors/colors-success-500"}},"scopes":["ALL_SCOPES"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:39:122","name":"backgroundColor/backgroundColor-secondary-muted","description":"","type":"COLOR","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:38:25"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":{"r":0.43921568989753723,"g":0.8588235378265381,"b":0.7803921699523926,"a":1},"alias":"VariableID:38:25","aliasName":"colors/colors-success-400"}},"scopes":["ALL_SCOPES"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:39:123","name":"backgroundColor/backgroundColor-secondary-subtle","description":"","type":"COLOR","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:38:23"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":{"r":0.8705882430076599,"g":0.9647058844566345,"b":0.9490196108818054,"a":1},"alias":"VariableID:38:23","aliasName":"colors/colors-success-200"}},"scopes":["ALL_SCOPES"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:52:18","name":"borderRadius/borderRadius-xs","description":"","type":"FLOAT","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:39:133"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":2,"alias":"VariableID:39:133","aliasName":"radius/dimensions-border-radius-2"}},"scopes":["ALL_SCOPES"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:52:19","name":"borderRadius/borderRadius-sm","description":"","type":"FLOAT","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:39:134"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":4,"alias":"VariableID:39:134","aliasName":"radius/dimensions-border-radius-4"}},"scopes":["ALL_SCOPES"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:52:22","name":"textColor/textColor-neutral-primary","description":"","type":"COLOR","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:39:57"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":{"r":0.09803921729326248,"g":0.10980392247438431,"b":0.125490203499794,"a":1},"alias":"VariableID:39:57","aliasName":"colors/colors-neutral-900"}},"scopes":["TEXT_FILL"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:52:23","name":"textColor/textColor-neutral-strong","description":"","type":"COLOR","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:39:55"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":{"r":0.34716352820396423,"g":0.38350826501846313,"b":0.42792969942092896,"a":1},"alias":"VariableID:39:55","aliasName":"colors/colors-neutral-700"}},"scopes":["TEXT_FILL"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:52:24","name":"textColor/textColor-neutral-dimmed","description":"","type":"COLOR","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:39:52"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":{"r":0.7438521981239319,"g":0.7645292282104492,"b":0.7989909052848816,"a":1},"alias":"VariableID:39:52","aliasName":"colors/colors-neutral-400"}},"scopes":["TEXT_FILL"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:52:25","name":"textColor/textColor-neutral-light","description":"","type":"COLOR","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:823:2"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":{"r":1,"g":1,"b":1,"a":1},"alias":"VariableID:823:2","aliasName":"colors/colors-neutral-0"}},"scopes":["TEXT_FILL"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:52:28","name":"textColor/textColor-accent-primary","description":"","type":"COLOR","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:38:17"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":{"r":0.9803921580314636,"g":0.34117648005485535,"b":0.13725490868091583,"a":1},"alias":"VariableID:38:17","aliasName":"colors/colors-primary-500"}},"scopes":["TEXT_FILL"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:52:29","name":"textColor/textColor-accent-muted","description":"","type":"COLOR","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:38:15"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":{"r":0.9882352948188782,"g":0.6666666865348816,"b":0.5686274766921997,"a":1},"alias":"VariableID:38:15","aliasName":"colors/colors-primary-300"}},"scopes":["TEXT_FILL"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:52:30","name":"textColor/textColor-accent-subtle","description":"","type":"COLOR","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:37:4"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":{"r":1,"g":0.9529722929000854,"b":0.9474395513534546,"a":1},"alias":"VariableID:37:4","aliasName":"colors/colors-primary-100"}},"scopes":["TEXT_FILL"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:52:31","name":"textColor/textColor-success-primary","description":"","type":"COLOR","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:38:26"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":{"r":0,"g":0.7490196228027344,"b":0.6196078658103943,"a":1},"alias":"VariableID:38:26","aliasName":"colors/colors-success-500"}},"scopes":["TEXT_FILL"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:52:32","name":"textColor/textColor-success-muted","description":"","type":"COLOR","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:38:25"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":{"r":0.43921568989753723,"g":0.8588235378265381,"b":0.7803921699523926,"a":1},"alias":"VariableID:38:25","aliasName":"colors/colors-success-400"}},"scopes":["TEXT_FILL"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:59:8","name":"backgroundColor/backgroundColor-destructive-default","description":"","type":"COLOR","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:38:44"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":{"r":0.8313725590705872,"g":0.1411764770746231,"b":0.1411764770746231,"a":1},"alias":"VariableID:38:44","aliasName":"colors/colors-destructive-500"}},"scopes":["ALL_SCOPES"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:59:9","name":"backgroundColor/backgroundColor-destructive-muted","description":"","type":"COLOR","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:38:43"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":{"r":0.8745098114013672,"g":0.3803921639919281,"b":0.3803921639919281,"a":1},"alias":"VariableID:38:43","aliasName":"colors/colors-destructive-400"}},"scopes":["ALL_SCOPES"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:59:10","name":"backgroundColor/backgroundColor-destructive-subtle","description":"","type":"COLOR","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:38:40"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":{"r":1,"g":0.9372549057006836,"b":0.9372549057006836,"a":1},"alias":"VariableID:38:40","aliasName":"colors/colors-destructive-100"}},"scopes":["ALL_SCOPES"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:59:11","name":"backgroundColor/backgroundColor-warning-default","description":"","type":"COLOR","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:38:35"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":{"r":0.9843137264251709,"g":0.8117647171020508,"b":0.29019609093666077,"a":1},"alias":"VariableID:38:35","aliasName":"colors/colors-warning-500"}},"scopes":["ALL_SCOPES"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:59:12","name":"backgroundColor/backgroundColor-warning-muted","description":"","type":"COLOR","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:38:33"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":{"r":0.9882352948188782,"g":0.8745098114013672,"b":0.529411792755127,"a":1},"alias":"VariableID:38:33","aliasName":"colors/colors-warning-300"}},"scopes":["ALL_SCOPES"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:59:13","name":"backgroundColor/backgroundColor-warning-subtle","description":"","type":"COLOR","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:38:31"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":{"r":1,"g":0.9803921580314636,"b":0.929411768913269,"a":1},"alias":"VariableID:38:31","aliasName":"colors/colors-warning-100"}},"scopes":["ALL_SCOPES"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:62:2199","name":"backgroundColor/backgroundColor-neutral-muted","description":"","type":"COLOR","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:39:51"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":{"r":0.8909133672714233,"g":0.898869514465332,"b":0.9227376580238342,"a":1},"alias":"VariableID:39:51","aliasName":"colors/colors-neutral-300"}},"scopes":["ALL_SCOPES"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:79:7","name":"dimension/dimension-xs","description":"","type":"FLOAT","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:203:4487"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":4,"alias":"VariableID:203:4487","aliasName":"space/dimensions-fixed-4"}},"scopes":["WIDTH_HEIGHT","GAP"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:79:8","name":"dimension/dimension-sm","description":"","type":"FLOAT","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:203:4488"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":8,"alias":"VariableID:203:4488","aliasName":"space/dimensions-fixed-8"}},"scopes":["ALL_SCOPES"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:79:12","name":"dimension/dimension-md","description":"","type":"FLOAT","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:203:4492"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":16,"alias":"VariableID:203:4492","aliasName":"space/dimensions-fixed-16"}},"scopes":["ALL_SCOPES"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:79:37","name":"borderRadius/borderRadius-lg","description":"","type":"FLOAT","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:39:135"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":8,"alias":"VariableID:39:135","aliasName":"radius/dimensions-border-radius-8"}},"scopes":["ALL_SCOPES"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:79:38","name":"borderRadius/borderRadius-xl","description":"","type":"FLOAT","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:39:136"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":16,"alias":"VariableID:39:136","aliasName":"radius/dimensions-border-radius-16"}},"scopes":["ALL_SCOPES"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:79:39","name":"borderRadius/borderRadius-xxl","description":"","type":"FLOAT","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:39:137"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":24,"alias":"VariableID:39:137","aliasName":"radius/dimensions-border-radius-24"}},"scopes":["ALL_SCOPES"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:79:40","name":"borderRadius/borderRadius-3Xl","description":"","type":"FLOAT","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:52:21"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":36,"alias":"VariableID:52:21","aliasName":"radius/dimensions-border-radius-36"}},"scopes":["ALL_SCOPES"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:79:232","name":"padding/padding-md","description":"","type":"FLOAT","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:203:4492"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":16,"alias":"VariableID:203:4492","aliasName":"space/dimensions-fixed-16"}},"scopes":["WIDTH_HEIGHT","GAP"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:79:233","name":"padding/padding-lg","description":"","type":"FLOAT","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:203:4493"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":24,"alias":"VariableID:203:4493","aliasName":"space/dimensions-fixed-24"}},"scopes":["ALL_SCOPES"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:79:234","name":"padding/padding-xl","description":"","type":"FLOAT","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:203:4494"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":32,"alias":"VariableID:203:4494","aliasName":"space/dimensions-fixed-32"}},"scopes":["ALL_SCOPES"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:79:235","name":"shadow/shadow-flat","description":"","type":"FLOAT","valuesByMode":{"37:2":0},"resolvedValuesByMode":{"37:2":{"resolvedValue":0,"alias":null}},"scopes":["EFFECT_FLOAT"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:79:236","name":"dimension/dimension-lg","description":"","type":"FLOAT","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:203:4493"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":24,"alias":"VariableID:203:4493","aliasName":"space/dimensions-fixed-24"}},"scopes":["ALL_SCOPES"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:79:237","name":"dimension/dimension-xl","description":"","type":"FLOAT","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:203:4494"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":32,"alias":"VariableID:203:4494","aliasName":"space/dimensions-fixed-32"}},"scopes":["ALL_SCOPES"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:79:238","name":"dimension/dimension-xxl","description":"","type":"FLOAT","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:1849:9057"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":40,"alias":"VariableID:1849:9057","aliasName":"space/dimensions-fixed-40"}},"scopes":["ALL_SCOPES"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:79:239","name":"shadow/shadow-sm","description":"","type":"FLOAT","valuesByMode":{"37:2":4},"resolvedValuesByMode":{"37:2":{"resolvedValue":4,"alias":null}},"scopes":["EFFECT_FLOAT"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:80:242","name":"shadow/shadow-md","description":"","type":"FLOAT","valuesByMode":{"37:2":8},"resolvedValuesByMode":{"37:2":{"resolvedValue":8,"alias":null}},"scopes":["EFFECT_FLOAT"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:80:243","name":"shadow/shadow-lg","description":"","type":"FLOAT","valuesByMode":{"37:2":16},"resolvedValuesByMode":{"37:2":{"resolvedValue":16,"alias":null}},"scopes":["EFFECT_FLOAT"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:80:244","name":"shadow/shadow-xl","description":"","type":"FLOAT","valuesByMode":{"37:2":24},"resolvedValuesByMode":{"37:2":{"resolvedValue":24,"alias":null}},"scopes":["EFFECT_FLOAT"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:80:245","name":"shadow/shadow-xxl","description":"","type":"FLOAT","valuesByMode":{"37:2":48},"resolvedValuesByMode":{"37:2":{"resolvedValue":48,"alias":null}},"scopes":["EFFECT_FLOAT"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:81:1904","name":"borderWidth/borderWidth-sm","description":"","type":"FLOAT","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:59:20"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":1,"alias":"VariableID:59:20","aliasName":"borderWidth/dimensions-border-width-1"}},"scopes":["ALL_SCOPES"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:81:1905","name":"borderWidth/borderWidth-md","description":"","type":"FLOAT","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:59:21"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":2,"alias":"VariableID:59:21","aliasName":"borderWidth/dimensions-border-width-2"}},"scopes":["ALL_SCOPES"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:95:1557","name":"fill/fill-neutral-dark","description":"","type":"COLOR","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:39:56"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":{"r":0.1882352977991104,"g":0.2078431397676468,"b":0.23529411852359772,"a":1},"alias":"VariableID:39:56","aliasName":"colors/colors-neutral-800"}},"scopes":["FRAME_FILL","SHAPE_FILL","STROKE_COLOR"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:95:1558","name":"fill/fill-neutral-strong","description":"","type":"COLOR","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:39:53"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":{"r":0.6138784885406494,"g":0.6435658931732178,"b":0.689746081829071,"a":1},"alias":"VariableID:39:53","aliasName":"colors/colors-neutral-500"}},"scopes":["FRAME_FILL","SHAPE_FILL","STROKE_COLOR"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:95:1559","name":"fill/fill-accent-default","description":"","type":"COLOR","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:38:17"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":{"r":0.9803921580314636,"g":0.34117648005485535,"b":0.13725490868091583,"a":1},"alias":"VariableID:38:17","aliasName":"colors/colors-primary-500"}},"scopes":["FRAME_FILL","SHAPE_FILL","STROKE_COLOR"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:95:1560","name":"fill/fill-neutral-base","description":"","type":"COLOR","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:823:2"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":{"r":1,"g":1,"b":1,"a":1},"alias":"VariableID:823:2","aliasName":"colors/colors-neutral-0"}},"scopes":["FRAME_FILL","SHAPE_FILL","STROKE_COLOR"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:107:713","name":"padding/padding-sm","description":"","type":"FLOAT","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:203:4488"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":8,"alias":"VariableID:203:4488","aliasName":"space/dimensions-fixed-8"}},"scopes":["WIDTH_HEIGHT","GAP"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:107:716","name":"padding/padding-xs","description":"","type":"FLOAT","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:203:4487"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":4,"alias":"VariableID:203:4487","aliasName":"space/dimensions-fixed-4"}},"scopes":["WIDTH_HEIGHT","GAP"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:183:122214","name":"borderColor/borderColor-neutral-black","description":"","type":"COLOR","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:39:57"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":{"r":0.09803921729326248,"g":0.10980392247438431,"b":0.125490203499794,"a":1},"alias":"VariableID:39:57","aliasName":"colors/colors-neutral-900"}},"scopes":["ALL_SCOPES"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:183:122215","name":"borderColor/borderColor-neutral-muted","description":"","type":"COLOR","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:39:52"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":{"r":0.7438521981239319,"g":0.7645292282104492,"b":0.7989909052848816,"a":1},"alias":"VariableID:39:52","aliasName":"colors/colors-neutral-400"}},"scopes":["ALL_SCOPES"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:183:122216","name":"borderColor/borderColor-neutral-dimmed","description":"","type":"COLOR","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:39:50"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":{"r":0.9411764740943909,"g":0.9450980424880981,"b":0.9529411792755127,"a":1},"alias":"VariableID:39:50","aliasName":"colors/colors-neutral-200"}},"scopes":["ALL_SCOPES"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:183:122217","name":"borderColor/borderColor-neutral-subtle","description":"","type":"COLOR","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:39:49"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":{"r":0.9686274528503418,"g":0.9725490212440491,"b":0.9764705896377563,"a":1},"alias":"VariableID:39:49","aliasName":"colors/colors-neutral-100"}},"scopes":["ALL_SCOPES"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:183:122218","name":"borderColor/borderColor-accent-default","description":"","type":"COLOR","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:38:17"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":{"r":0.9803921580314636,"g":0.34117648005485535,"b":0.13725490868091583,"a":1},"alias":"VariableID:38:17","aliasName":"colors/colors-primary-500"}},"scopes":["ALL_SCOPES"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:183:122219","name":"borderColor/borderColor-accent-subtle","description":"","type":"COLOR","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:37:4"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":{"r":1,"g":0.9529722929000854,"b":0.9474395513534546,"a":1},"alias":"VariableID:37:4","aliasName":"colors/colors-primary-100"}},"scopes":["ALL_SCOPES"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:203:4497","name":"padding/padding-xxl","description":"","type":"FLOAT","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:203:4495"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":48,"alias":"VariableID:203:4495","aliasName":"space/dimensions-fixed-48"}},"scopes":["ALL_SCOPES"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:528:17123","name":"spacing/spacing-xs","description":"","type":"FLOAT","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:203:4487"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":4,"alias":"VariableID:203:4487","aliasName":"space/dimensions-fixed-4"}},"scopes":["WIDTH_HEIGHT","GAP"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:528:17124","name":"spacing/spacing-sm","description":"","type":"FLOAT","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:203:4488"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":8,"alias":"VariableID:203:4488","aliasName":"space/dimensions-fixed-8"}},"scopes":["WIDTH_HEIGHT","GAP"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:528:17125","name":"spacing/spacing-md","description":"","type":"FLOAT","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:203:4492"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":16,"alias":"VariableID:203:4492","aliasName":"space/dimensions-fixed-16"}},"scopes":["WIDTH_HEIGHT","GAP"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:528:17126","name":"spacing/spacing-lg","description":"","type":"FLOAT","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:203:4493"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":24,"alias":"VariableID:203:4493","aliasName":"space/dimensions-fixed-24"}},"scopes":["ALL_SCOPES"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:528:17127","name":"spacing/spacing-xl","description":"","type":"FLOAT","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:203:4494"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":32,"alias":"VariableID:203:4494","aliasName":"space/dimensions-fixed-32"}},"scopes":["ALL_SCOPES"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:528:17128","name":"spacing/spacing-xxl","description":"","type":"FLOAT","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:203:4495"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":48,"alias":"VariableID:203:4495","aliasName":"space/dimensions-fixed-48"}},"scopes":["ALL_SCOPES"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:528:17129","name":"margin/margin-xs","description":"","type":"FLOAT","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:203:4487"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":4,"alias":"VariableID:203:4487","aliasName":"space/dimensions-fixed-4"}},"scopes":["WIDTH_HEIGHT","GAP"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:528:17130","name":"margin/margin-sm","description":"","type":"FLOAT","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:203:4488"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":8,"alias":"VariableID:203:4488","aliasName":"space/dimensions-fixed-8"}},"scopes":["WIDTH_HEIGHT","GAP"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:528:17131","name":"margin/margin-md","description":"","type":"FLOAT","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:203:4492"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":16,"alias":"VariableID:203:4492","aliasName":"space/dimensions-fixed-16"}},"scopes":["WIDTH_HEIGHT","GAP"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:528:17132","name":"margin/margin-lg","description":"","type":"FLOAT","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:203:4493"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":24,"alias":"VariableID:203:4493","aliasName":"space/dimensions-fixed-24"}},"scopes":["ALL_SCOPES"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:528:17133","name":"margin/margin-xl","description":"","type":"FLOAT","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:203:4494"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":32,"alias":"VariableID:203:4494","aliasName":"space/dimensions-fixed-32"}},"scopes":["ALL_SCOPES"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:528:17134","name":"margin/margin-xxl","description":"","type":"FLOAT","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:203:4495"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":48,"alias":"VariableID:203:4495","aliasName":"space/dimensions-fixed-48"}},"scopes":["ALL_SCOPES"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:529:17319","name":"textColor/textColor-success-subtle","description":"","type":"COLOR","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:38:23"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":{"r":0.8705882430076599,"g":0.9647058844566345,"b":0.9490196108818054,"a":1},"alias":"VariableID:38:23","aliasName":"colors/colors-success-200"}},"scopes":["TEXT_FILL"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:835:90","name":"backgroundColor/backgroundColor-success-default","description":"","type":"COLOR","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:38:26"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":{"r":0,"g":0.7490196228027344,"b":0.6196078658103943,"a":1},"alias":"VariableID:38:26","aliasName":"colors/colors-success-500"}},"scopes":["ALL_SCOPES"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:835:91","name":"backgroundColor/backgroundColor-success-muted","description":"","type":"COLOR","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:38:25"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":{"r":0.43921568989753723,"g":0.8588235378265381,"b":0.7803921699523926,"a":1},"alias":"VariableID:38:25","aliasName":"colors/colors-success-400"}},"scopes":["ALL_SCOPES"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:835:92","name":"backgroundColor/backgroundColor-success-subtle","description":"","type":"COLOR","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:38:23"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":{"r":0.8705882430076599,"g":0.9647058844566345,"b":0.9490196108818054,"a":1},"alias":"VariableID:38:23","aliasName":"colors/colors-success-200"}},"scopes":["ALL_SCOPES"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:841:778","name":"backgroundColor/backgroundColor-primary-strong","description":"","type":"COLOR","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:38:19"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":{"r":0.7764706015586853,"g":0.20000000298023224,"b":0.0235294122248888,"a":1},"alias":"VariableID:38:19","aliasName":"colors/colors-primary-700"}},"scopes":["ALL_SCOPES"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:841:779","name":"backgroundColor/backgroundColor-secondary-strong","description":"","type":"COLOR","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:38:28"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":{"r":0,"g":0.572549045085907,"b":0.4313725531101227,"a":1},"alias":"VariableID:38:28","aliasName":"colors/colors-success-700"}},"scopes":["ALL_SCOPES"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:841:780","name":"backgroundColor/backgroundColor-success-strong","description":"","type":"COLOR","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:824:7484"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":{"r":0,"g":0.572549045085907,"b":0.4313725531101227,"a":1},"alias":"VariableID:824:7484","aliasName":"colors/colors-secondary-700"}},"scopes":["ALL_SCOPES"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:841:781","name":"backgroundColor/backgroundColor-destructive-strong","description":"","type":"COLOR","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:38:45"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":{"r":0.6745098233222961,"g":0.09019608050584793,"b":0.0941176488995552,"a":1},"alias":"VariableID:38:45","aliasName":"colors/colors-destructive-600"}},"scopes":["ALL_SCOPES"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:841:782","name":"backgroundColor/backgroundColor-warning-strong","description":"","type":"COLOR","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:38:37"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":{"r":0.7450980544090271,"g":0.5568627715110779,"b":0,"a":1},"alias":"VariableID:38:37","aliasName":"colors/colors-warning-700"}},"scopes":["ALL_SCOPES"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:841:783","name":"backgroundColor/backgroundColor-primary-xstrong","description":"","type":"COLOR","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:38:21"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":{"r":0.5098039507865906,"g":0.12156862765550613,"b":0,"a":1},"alias":"VariableID:38:21","aliasName":"colors/colors-primary-900"}},"scopes":["ALL_SCOPES"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:841:784","name":"backgroundColor/backgroundColor-secondary-xstrong","description":"","type":"COLOR","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:38:30"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":{"r":0,"g":0.29019609093666077,"b":0.1921568661928177,"a":1},"alias":"VariableID:38:30","aliasName":"colors/colors-success-900"}},"scopes":["ALL_SCOPES"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:841:785","name":"backgroundColor/backgroundColor-success-xstrong","description":"","type":"COLOR","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:824:7486"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":{"r":0,"g":0.29019609093666077,"b":0.1921568661928177,"a":1},"alias":"VariableID:824:7486","aliasName":"colors/colors-secondary-900"}},"scopes":["ALL_SCOPES"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:841:786","name":"backgroundColor/backgroundColor-destructive-xstrong","description":"","type":"COLOR","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:38:47"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":{"r":0.3960784375667572,"g":0.03529411926865578,"b":0.03529411926865578,"a":1},"alias":"VariableID:38:47","aliasName":"colors/colors-destructive-800"}},"scopes":["ALL_SCOPES"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:841:787","name":"backgroundColor/backgroundColor-warning-xstrong","description":"","type":"COLOR","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:38:38"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":{"r":0.4274509847164154,"g":0.32156863808631897,"b":0.003921568859368563,"a":1},"alias":"VariableID:38:38","aliasName":"colors/colors-warning-800"}},"scopes":["ALL_SCOPES"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:846:3890","name":"fill/fill-neutral-disabled","description":"","type":"COLOR","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:39:52"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":{"r":0.7438521981239319,"g":0.7645292282104492,"b":0.7989909052848816,"a":1},"alias":"VariableID:39:52","aliasName":"colors/colors-neutral-400"}},"scopes":["FRAME_FILL","SHAPE_FILL","STROKE_COLOR"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:849:780","name":"fill/fill-neutral-xstrong","description":"","type":"COLOR","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:39:55"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":{"r":0.34716352820396423,"g":0.38350826501846313,"b":0.42792969942092896,"a":1},"alias":"VariableID:39:55","aliasName":"colors/colors-neutral-700"}},"scopes":["FRAME_FILL","SHAPE_FILL","STROKE_COLOR"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:849:783","name":"borderColor/borderColor-destructive-default","description":"","type":"COLOR","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:38:44"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":{"r":0.8313725590705872,"g":0.1411764770746231,"b":0.1411764770746231,"a":1},"alias":"VariableID:38:44","aliasName":"colors/colors-destructive-500"}},"scopes":["ALL_SCOPES"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:849:784","name":"borderColor/borderColor-success-default","description":"","type":"COLOR","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:38:26"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":{"r":0,"g":0.7490196228027344,"b":0.6196078658103943,"a":1},"alias":"VariableID:38:26","aliasName":"colors/colors-success-500"}},"scopes":["ALL_SCOPES"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:849:906","name":"borderColor/borderColor-neutral-strong","description":"","type":"COLOR","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:39:53"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":{"r":0.6138784885406494,"g":0.6435658931732178,"b":0.689746081829071,"a":1},"alias":"VariableID:39:53","aliasName":"colors/colors-neutral-500"}},"scopes":["ALL_SCOPES"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:851:2608","name":"textColor/textColor-neutral-muted","description":"","type":"COLOR","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:39:53"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":{"r":0.6138784885406494,"g":0.6435658931732178,"b":0.689746081829071,"a":1},"alias":"VariableID:39:53","aliasName":"colors/colors-neutral-500"}},"scopes":["TEXT_FILL"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:891:81144","name":"textColor/textColor-neutral-disabled","description":"","type":"COLOR","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:39:52"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":{"r":0.7438521981239319,"g":0.7645292282104492,"b":0.7989909052848816,"a":1},"alias":"VariableID:39:52","aliasName":"colors/colors-neutral-400"}},"scopes":["TEXT_FILL"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:1141:3695","name":"backgroundColor/backgroundColor-neutral-xstrong","description":"","type":"COLOR","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:39:55"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":{"r":0.34716352820396423,"g":0.38350826501846313,"b":0.42792969942092896,"a":1},"alias":"VariableID:39:55","aliasName":"colors/colors-neutral-700"}},"scopes":["ALL_SCOPES"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:1141:3698","name":"backgroundColor/backgroundColor-neutral-disabled","description":"","type":"COLOR","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:39:50"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":{"r":0.9411764740943909,"g":0.9450980424880981,"b":0.9529411792755127,"a":1},"alias":"VariableID:39:50","aliasName":"colors/colors-neutral-200"}},"scopes":["ALL_SCOPES"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:1141:4555","name":"backgroundColor/backgroundColor-primary-disabled","description":"","type":"COLOR","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:38:15"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":{"r":0.9882352948188782,"g":0.6666666865348816,"b":0.5686274766921997,"a":1},"alias":"VariableID:38:15","aliasName":"colors/colors-primary-300"}},"scopes":["ALL_SCOPES"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:1141:4556","name":"backgroundColor/backgroundColor-secondary-disabled","description":"","type":"COLOR","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:38:25"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":{"r":0.43921568989753723,"g":0.8588235378265381,"b":0.7803921699523926,"a":1},"alias":"VariableID:38:25","aliasName":"colors/colors-success-400"}},"scopes":["ALL_SCOPES"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:1141:4557","name":"backgroundColor/backgroundColor-success-disabled","description":"","type":"COLOR","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:38:24"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":{"r":0.6745098233222961,"g":0.9137254953384399,"b":0.8666666746139526,"a":1},"alias":"VariableID:38:24","aliasName":"colors/colors-success-300"}},"scopes":["ALL_SCOPES"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:1141:4558","name":"backgroundColor/backgroundColor-destructive-disabled","description":"","type":"COLOR","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:38:42"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":{"r":0.9607843160629272,"g":0.5803921818733215,"b":0.572549045085907,"a":1},"alias":"VariableID:38:42","aliasName":"colors/colors-destructive-300"}},"scopes":["ALL_SCOPES"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:1141:4559","name":"backgroundColor/backgroundColor-warning-disabled","description":"","type":"COLOR","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:38:32"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":{"r":0.9960784316062927,"g":0.9333333373069763,"b":0.7529411911964417,"a":1},"alias":"VariableID:38:32","aliasName":"colors/colors-warning-200"}},"scopes":["ALL_SCOPES"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:1141:6772","name":"borderColor/borderColor-accent-dimmed","description":"","type":"COLOR","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:37:9"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":{"r":0.9921568632125854,"g":0.800000011920929,"b":0.7372549176216125,"a":1},"alias":"VariableID:37:9","aliasName":"colors/colors-primary-200"}},"scopes":["ALL_SCOPES"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:1148:687","name":"dimension/dimension-xxs","description":"","type":"FLOAT","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:203:4489"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":2,"alias":"VariableID:203:4489","aliasName":"space/dimensions-fixed-2"}},"scopes":["WIDTH_HEIGHT","GAP"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:1148:688","name":"spacing/spacing-3xl","description":"","type":"FLOAT","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:203:4496"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":64,"alias":"VariableID:203:4496","aliasName":"space/dimensions-fixed-64"}},"scopes":["ALL_SCOPES"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:1148:689","name":"spacing/spacing-xxs","description":"","type":"FLOAT","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:203:4489"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":2,"alias":"VariableID:203:4489","aliasName":"space/dimensions-fixed-2"}},"scopes":["WIDTH_HEIGHT","GAP"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:1148:690","name":"spacing/spacing-none","description":"","type":"FLOAT","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:1148:691"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":0,"alias":"VariableID:1148:691","aliasName":"space/dimensions-fixed-0"}},"scopes":["WIDTH_HEIGHT","GAP"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:1152:342","name":"borderColor/borderColor-neutral-dark","description":"","type":"COLOR","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:39:54"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":{"r":0.4613589644432068,"g":0.5014801025390625,"b":0.5576497316360474,"a":1},"alias":"VariableID:39:54","aliasName":"colors/colors-neutral-600"}},"scopes":["ALL_SCOPES"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:1227:19184","name":"fill/fill-success","description":"","type":"COLOR","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:38:26"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":{"r":0,"g":0.7490196228027344,"b":0.6196078658103943,"a":1},"alias":"VariableID:38:26","aliasName":"colors/colors-success-500"}},"scopes":["FRAME_FILL","SHAPE_FILL","STROKE_COLOR"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:1227:21660","name":"fill/fill-warning","description":"","type":"COLOR","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:38:35"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":{"r":0.9843137264251709,"g":0.8117647171020508,"b":0.29019609093666077,"a":1},"alias":"VariableID:38:35","aliasName":"colors/colors-warning-500"}},"scopes":["FRAME_FILL","SHAPE_FILL","STROKE_COLOR"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:1227:21661","name":"fill/fill-destructive","description":"","type":"COLOR","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:38:44"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":{"r":0.8313725590705872,"g":0.1411764770746231,"b":0.1411764770746231,"a":1},"alias":"VariableID:38:44","aliasName":"colors/colors-destructive-500"}},"scopes":["FRAME_FILL","SHAPE_FILL","STROKE_COLOR"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:1335:7762","name":"textColor/textColor-destructive-primary","description":"","type":"COLOR","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:38:44"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":{"r":0.8313725590705872,"g":0.1411764770746231,"b":0.1411764770746231,"a":1},"alias":"VariableID:38:44","aliasName":"colors/colors-destructive-500"}},"scopes":["TEXT_FILL"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:1335:7763","name":"textColor/textColor-destructive-muted","description":"","type":"COLOR","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:38:42"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":{"r":0.9607843160629272,"g":0.5803921818733215,"b":0.572549045085907,"a":1},"alias":"VariableID:38:42","aliasName":"colors/colors-destructive-300"}},"scopes":["TEXT_FILL"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:1335:7764","name":"textColor/textColor-destructive-subtle","description":"","type":"COLOR","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:38:40"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":{"r":1,"g":0.9372549057006836,"b":0.9372549057006836,"a":1},"alias":"VariableID:38:40","aliasName":"colors/colors-destructive-100"}},"scopes":["TEXT_FILL"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:1516:15576","name":"padding/padding-xxs","description":"","type":"FLOAT","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:203:4489"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":2,"alias":"VariableID:203:4489","aliasName":"space/dimensions-fixed-2"}},"scopes":["WIDTH_HEIGHT","GAP"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:1516:33668","name":"padding/padding-sm-plus","description":"","type":"FLOAT","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:1516:33669"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":10,"alias":"VariableID:1516:33669","aliasName":"space/dimensions-fixed-10"}},"scopes":["WIDTH_HEIGHT","GAP"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:1516:33671","name":"padding/padding-sm-extra","description":"","type":"FLOAT","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:203:5688"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":12,"alias":"VariableID:203:5688","aliasName":"space/dimensions-fixed-12"}},"scopes":["WIDTH_HEIGHT","GAP"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:1516:33672","name":"padding/padding-md-extra","description":"","type":"FLOAT","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:203:5689"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":20,"alias":"VariableID:203:5689","aliasName":"space/dimensions-fixed-20"}},"scopes":["WIDTH_HEIGHT","GAP"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:1516:33674","name":"padding/padding-xs-plus","description":"","type":"FLOAT","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:1516:33670"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":6,"alias":"VariableID:1516:33670","aliasName":"space/dimensions-fixed-6"}},"scopes":["WIDTH_HEIGHT","GAP"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:1516:33861","name":"spacing/spacing-sm-plus","description":"","type":"FLOAT","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:1516:33669"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":10,"alias":"VariableID:1516:33669","aliasName":"space/dimensions-fixed-10"}},"scopes":["WIDTH_HEIGHT","GAP"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:1516:33862","name":"spacing/spacing-sm-extra","description":"","type":"FLOAT","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:203:5688"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":12,"alias":"VariableID:203:5688","aliasName":"space/dimensions-fixed-12"}},"scopes":["WIDTH_HEIGHT","GAP"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:1516:33863","name":"spacing/spacing-md-plus","description":"","type":"FLOAT","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:203:5689"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":20,"alias":"VariableID:203:5689","aliasName":"space/dimensions-fixed-20"}},"scopes":["WIDTH_HEIGHT","GAP"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:1516:33864","name":"spacing/spacing-xs-plus","description":"","type":"FLOAT","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:1516:33670"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":6,"alias":"VariableID:1516:33670","aliasName":"space/dimensions-fixed-6"}},"scopes":["WIDTH_HEIGHT","GAP"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:1516:33865","name":"padding/padding-none","description":"","type":"FLOAT","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:1148:691"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":0,"alias":"VariableID:1148:691","aliasName":"space/dimensions-fixed-0"}},"scopes":["WIDTH_HEIGHT","GAP"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:1522:9133","name":"textFont/text-font-size-sm","description":"","type":"FLOAT","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:529:17323"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":12,"alias":"VariableID:529:17323","aliasName":"fontSize/font-size-text-12"}},"scopes":["ALL_SCOPES"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:1522:9134","name":"textFont/text-font-size-md","description":"","type":"FLOAT","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:529:17324"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":14,"alias":"VariableID:529:17324","aliasName":"fontSize/font-size-text-14"}},"scopes":["ALL_SCOPES"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:1522:9135","name":"textFont/text-font-size-lg","description":"","type":"FLOAT","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:529:17325"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":16,"alias":"VariableID:529:17325","aliasName":"fontSize/font-size-text-16"}},"scopes":["ALL_SCOPES"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:1522:9136","name":"textFont/text-font-size-xl","description":"","type":"FLOAT","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:529:17327"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":20,"alias":"VariableID:529:17327","aliasName":"fontSize/font-size-text-20"}},"scopes":["ALL_SCOPES"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:1522:9137","name":"textFont/text-font-size-xxl","description":"","type":"FLOAT","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:1522:9148"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":30,"alias":"VariableID:1522:9148","aliasName":"fontSize/font-size-text-30"}},"scopes":["ALL_SCOPES"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:1522:9138","name":"textFont/text-font-size-3xl","description":"","type":"FLOAT","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:1522:9149"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":36,"alias":"VariableID:1522:9149","aliasName":"fontSize/font-size-text-36"}},"scopes":["ALL_SCOPES"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:1522:9139","name":"textFont/text-font-size-4xl","description":"","type":"FLOAT","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:1522:9150"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":48,"alias":"VariableID:1522:9150","aliasName":"fontSize/font-size-text-48"}},"scopes":["ALL_SCOPES"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:1522:9140","name":"textFont/text-line-height-sm","description":"","type":"FLOAT","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:1522:9155"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":16,"alias":"VariableID:1522:9155","aliasName":"lineHeight/line-height-text-16"}},"scopes":["ALL_SCOPES"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:1522:9141","name":"textFont/text-line-height-md","description":"","type":"FLOAT","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:1522:9157"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":20,"alias":"VariableID:1522:9157","aliasName":"lineHeight/line-height-text-20"}},"scopes":["ALL_SCOPES"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:1522:9142","name":"textFont/text-line-height-lg","description":"","type":"FLOAT","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:1522:9158"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":24,"alias":"VariableID:1522:9158","aliasName":"lineHeight/line-height-text-24"}},"scopes":["ALL_SCOPES"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:1522:9143","name":"textFont/text-line-height-xl","description":"","type":"FLOAT","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:1522:9160"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":32,"alias":"VariableID:1522:9160","aliasName":"lineHeight/line-height-text-32"}},"scopes":["ALL_SCOPES"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:1522:9144","name":"textFont/text-line-height-xxl","description":"","type":"FLOAT","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:1522:9161"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":38,"alias":"VariableID:1522:9161","aliasName":"lineHeight/line-height-text-38"}},"scopes":["ALL_SCOPES"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:1522:9145","name":"textFont/text-line-height-3xl","description":"","type":"FLOAT","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:1522:9162"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":44,"alias":"VariableID:1522:9162","aliasName":"lineHeight/line-height-text-44"}},"scopes":["ALL_SCOPES"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:1522:9146","name":"textFont/text-line-height-4xl","description":"","type":"FLOAT","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:1522:9163"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":60,"alias":"VariableID:1522:9163","aliasName":"lineHeight/line-height-text-60"}},"scopes":["ALL_SCOPES"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:1639:2","name":"ringWidth/ringWidth-sm","description":"","type":"FLOAT","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:1639:537"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":1,"alias":"VariableID:1639:537","aliasName":"ringWidth/dimensions-ring-width-1"}},"scopes":["WIDTH_HEIGHT","GAP"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:1639:3","name":"ringWidth/ringWidth-md","description":"","type":"FLOAT","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:1639:538"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":2,"alias":"VariableID:1639:538","aliasName":"ringWidth/dimensions-ring-width-2"}},"scopes":["ALL_SCOPES"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:1639:540","name":"ringWidth/ringWidth-lg","description":"","type":"FLOAT","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:1639:539"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":4,"alias":"VariableID:1639:539","aliasName":"ringWidth/dimensions-ring-width-4"}},"scopes":["ALL_SCOPES"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:1639:547","name":"ringColor/ringColor-primary-strong","description":"","type":"COLOR","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:38:17"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":{"r":0.9803921580314636,"g":0.34117648005485535,"b":0.13725490868091583,"a":1},"alias":"VariableID:38:17","aliasName":"colors/colors-primary-500"}},"scopes":["ALL_SCOPES"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:1639:548","name":"ringColor/ringColor-primary-dimmed","description":"","type":"COLOR","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:37:9"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":{"r":0.9921568632125854,"g":0.800000011920929,"b":0.7372549176216125,"a":1},"alias":"VariableID:37:9","aliasName":"colors/colors-primary-200"}},"scopes":["ALL_SCOPES"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:1639:549","name":"ringColor/ringColor-primary-subtle","description":"","type":"COLOR","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:37:4"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":{"r":1,"g":0.9529722929000854,"b":0.9474395513534546,"a":1},"alias":"VariableID:37:4","aliasName":"colors/colors-primary-100"}},"scopes":["ALL_SCOPES"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:1639:551","name":"ringColor/ringColor-success-strong","description":"","type":"COLOR","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:38:26"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":{"r":0,"g":0.7490196228027344,"b":0.6196078658103943,"a":1},"alias":"VariableID:38:26","aliasName":"colors/colors-success-500"}},"scopes":["ALL_SCOPES"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:1639:552","name":"ringColor/ringColor-success-dimmed","description":"","type":"COLOR","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:38:23"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":{"r":0.8705882430076599,"g":0.9647058844566345,"b":0.9490196108818054,"a":1},"alias":"VariableID:38:23","aliasName":"colors/colors-success-200"}},"scopes":["ALL_SCOPES"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:1639:553","name":"ringColor/ringColor-success-subtle","description":"","type":"COLOR","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:38:22"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":{"r":0.9411764740943909,"g":0.9803921580314636,"b":0.9725490212440491,"a":1},"alias":"VariableID:38:22","aliasName":"colors/colors-success-100"}},"scopes":["ALL_SCOPES"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:1639:554","name":"borderWidth/borderWidth-none","description":"","type":"FLOAT","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:529:17331"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":0,"alias":"VariableID:529:17331","aliasName":"borderWidth/dimensions-border-width-0"}},"scopes":["ALL_SCOPES"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:1658:621","name":"textLetterspacing/text-letter-spacing-sm","description":"","type":"FLOAT","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:1658:637"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":-1,"alias":"VariableID:1658:637","aliasName":"fontSpacing/font-letter-spacing-1"}},"scopes":["ALL_SCOPES"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:1658:638","name":"textLetterspacing/text-letter-spacing-md","description":"","type":"FLOAT","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:1658:610"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":-2,"alias":"VariableID:1658:610","aliasName":"fontSpacing/font-letter-spacing-2"}},"scopes":["ALL_SCOPES"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:1699:9359","name":"dimension/dimension-md-plus","description":"","type":"FLOAT","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:203:5689"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":20,"alias":"VariableID:203:5689","aliasName":"space/dimensions-fixed-20"}},"scopes":["ALL_SCOPES"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:1699:9360","name":"dimension/dimension-sm-plus","description":"","type":"FLOAT","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:1516:33669"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":10,"alias":"VariableID:1516:33669","aliasName":"space/dimensions-fixed-10"}},"scopes":["ALL_SCOPES"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:1699:9361","name":"dimension/dimension-sm-extra","description":"","type":"FLOAT","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:203:5688"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":12,"alias":"VariableID:203:5688","aliasName":"space/dimensions-fixed-12"}},"scopes":["ALL_SCOPES"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:1699:9362","name":"dimension/dimension-xs-plus","description":"","type":"FLOAT","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:1516:33670"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":6,"alias":"VariableID:1516:33670","aliasName":"space/dimensions-fixed-6"}},"scopes":["WIDTH_HEIGHT","GAP"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:1751:786","name":"margin/margin-xxs","description":"","type":"FLOAT","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:203:4489"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":2,"alias":"VariableID:203:4489","aliasName":"space/dimensions-fixed-2"}},"scopes":["WIDTH_HEIGHT","GAP"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:1751:787","name":"margin/margin-none","description":"","type":"FLOAT","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:1148:691"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":0,"alias":"VariableID:1148:691","aliasName":"space/dimensions-fixed-0"}},"scopes":["WIDTH_HEIGHT","GAP"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:1751:788","name":"margin/margin-xs-plus","description":"","type":"FLOAT","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:1516:33670"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":6,"alias":"VariableID:1516:33670","aliasName":"space/dimensions-fixed-6"}},"scopes":["WIDTH_HEIGHT","GAP"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:1751:789","name":"margin/margin-sm-plus","description":"","type":"FLOAT","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:1516:33669"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":10,"alias":"VariableID:1516:33669","aliasName":"space/dimensions-fixed-10"}},"scopes":["WIDTH_HEIGHT","GAP"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:1751:790","name":"margin/margin-sm-extra","description":"","type":"FLOAT","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:203:5688"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":12,"alias":"VariableID:203:5688","aliasName":"space/dimensions-fixed-12"}},"scopes":["WIDTH_HEIGHT","GAP"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:1751:791","name":"margin/margin-md-plus","description":"","type":"FLOAT","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:203:5689"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":20,"alias":"VariableID:203:5689","aliasName":"space/dimensions-fixed-20"}},"scopes":["WIDTH_HEIGHT","GAP"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:1751:924","name":"textFont/text-font-weight-regular","description":"","type":"FLOAT","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:1751:921"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":400,"alias":"VariableID:1751:921","aliasName":"fontWeight/font-weight-400"}},"scopes":["ALL_SCOPES"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:1751:925","name":"textFont/text-font-weight-semibold","description":"","type":"FLOAT","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:1751:922"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":600,"alias":"VariableID:1751:922","aliasName":"fontWeight/font-weight-600"}},"scopes":["ALL_SCOPES"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:1798:12878","name":"borderColor/borderColor-neutral-base","description":"","type":"COLOR","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:823:2"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":{"r":1,"g":1,"b":1,"a":1},"alias":"VariableID:823:2","aliasName":"colors/colors-neutral-0"}},"scopes":["ALL_SCOPES"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:1849:9055","name":"dimension/dimension-3XL","description":"","type":"FLOAT","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:203:4495"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":48,"alias":"VariableID:203:4495","aliasName":"space/dimensions-fixed-48"}},"scopes":["ALL_SCOPES"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:1849:9683","name":"textLetterspacing/text-letter-spacing-none","description":"","type":"FLOAT","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:1849:9684"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":0,"alias":"VariableID:1849:9684","aliasName":"fontSpacing/font-letter-spacing-none"}},"scopes":["ALL_SCOPES"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:1970:8527","name":"backgroundColor/backgroundColor-neutral-dark-a50","description":"","type":"COLOR","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:1970:8513"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":{"r":0.09803921729326248,"g":0.10980392247438431,"b":0.125490203499794,"a":0.5},"alias":"VariableID:1970:8513","aliasName":"colors/colors-neutral-900-a50"}},"scopes":["ALL_SCOPES"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:1970:8528","name":"backgroundColor/backgroundColor-neutral-dark-a5","description":"","type":"COLOR","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:1970:8517"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":{"r":0.09803921729326248,"g":0.10980392247438431,"b":0.125490203499794,"a":0.05000000074505806},"alias":"VariableID:1970:8517","aliasName":"colors/colors-neutral-900-a5"}},"scopes":["ALL_SCOPES"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:1970:8529","name":"backgroundColor/backgroundColor-neutral-dark-a10","description":"","type":"COLOR","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:1970:8516"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":{"r":0.09803921729326248,"g":0.10980392247438431,"b":0.125490203499794,"a":0.10000000149011612},"alias":"VariableID:1970:8516","aliasName":"colors/colors-neutral-900-a10"}},"scopes":["ALL_SCOPES"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:1970:9130","name":"backgroundColor/backgroundColor-neutral-base-a30","description":"","type":"COLOR","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:1970:8521"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":{"r":1,"g":1,"b":1,"a":0.30000001192092896},"alias":"VariableID:1970:8521","aliasName":"colors/colors-neutral-0-a30"}},"scopes":["ALL_SCOPES"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:1970:9131","name":"backgroundColor/backgroundColor-neutral-base-a20","description":"","type":"COLOR","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:1970:8522"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":{"r":1,"g":1,"b":1,"a":0.20000000298023224},"alias":"VariableID:1970:8522","aliasName":"colors/colors-neutral-0-a20"}},"scopes":["ALL_SCOPES"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:2237:20498","name":"borderColor/borderColor-destructive-subtle","description":"","type":"COLOR","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:38:40"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":{"r":1,"g":0.9372549057006836,"b":0.9372549057006836,"a":1},"alias":"VariableID:38:40","aliasName":"colors/colors-destructive-100"}},"scopes":["ALL_SCOPES"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:2237:20499","name":"borderColor/borderColor-success-subtle","description":"","type":"COLOR","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:38:23"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":{"r":0.8705882430076599,"g":0.9647058844566345,"b":0.9490196108818054,"a":1},"alias":"VariableID:38:23","aliasName":"colors/colors-success-200"}},"scopes":["ALL_SCOPES"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:2369:76482","name":"borderRadius/borderRadius-md","description":"","type":"FLOAT","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:2110:16027"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":6,"alias":"VariableID:2110:16027","aliasName":"radius/dimensions-border-radius-6"}},"scopes":["ALL_SCOPES"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:2629:7631","name":"textColor/textColor-neutral-light-a50","description":"","type":"COLOR","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:1970:8520"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":{"r":1,"g":1,"b":1,"a":0.5},"alias":"VariableID:1970:8520","aliasName":"colors/colors-neutral-0-a50"}},"scopes":["TEXT_FILL"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:2665:9916","name":"backgroundColor/backgroundColor-neutral-base-a80","description":"","type":"COLOR","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:1970:8518"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":{"r":1,"g":1,"b":1,"a":0.800000011920929},"alias":"VariableID:1970:8518","aliasName":"colors/colors-neutral-0-a80"}},"scopes":["ALL_SCOPES"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:2675:17230","name":"fill/fill-neutral-base-a50","description":"","type":"COLOR","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:1970:8520"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":{"r":1,"g":1,"b":1,"a":0.5},"alias":"VariableID:1970:8520","aliasName":"colors/colors-neutral-0-a50"}},"scopes":["FRAME_FILL","SHAPE_FILL","STROKE_COLOR"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:2675:20392","name":"fill/fill-neutral-xstrong-a30","description":"","type":"COLOR","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:1970:8514"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":{"r":0.09803921729326248,"g":0.10980392247438431,"b":0.125490203499794,"a":0.30000001192092896},"alias":"VariableID:1970:8514","aliasName":"colors/colors-neutral-900-a30"}},"scopes":["FRAME_FILL","SHAPE_FILL","STROKE_COLOR"],"hiddenFromPublishing":false,"codeSyntax":{}},{"id":"VariableID:4661:15434","name":"borderColor/borderColor-neutral-dimmed-darker","description":"","type":"COLOR","valuesByMode":{"37:2":{"type":"VARIABLE_ALIAS","id":"VariableID:39:51"}},"resolvedValuesByMode":{"37:2":{"resolvedValue":{"r":0.8909133672714233,"g":0.898869514465332,"b":0.9227376580238342,"a":1},"alias":"VariableID:39:51","aliasName":"colors/colors-neutral-300"}},"scopes":["ALL_SCOPES"],"hiddenFromPublishing":false,"codeSyntax":{}}]}
\ No newline at end of file
diff --git a/packages/admin-ui/scripts/importFromFigma/exports/Primitives.json b/packages/admin-ui/scripts/importFromFigma/exports/Primitives.json
new file mode 100644
index 00000000000..8d9f03eb903
--- /dev/null
+++ b/packages/admin-ui/scripts/importFromFigma/exports/Primitives.json
@@ -0,0 +1,2464 @@
+{
+  "id": "VariableCollectionId:37:3",
+  "name": ".Primitives",
+  "modes": { "37:0": "Light" },
+  "variableIds": [
+    "VariableID:37:4",
+    "VariableID:37:9",
+    "VariableID:38:15",
+    "VariableID:38:16",
+    "VariableID:38:17",
+    "VariableID:38:18",
+    "VariableID:38:19",
+    "VariableID:38:20",
+    "VariableID:38:21",
+    "VariableID:824:7478",
+    "VariableID:824:7479",
+    "VariableID:824:7480",
+    "VariableID:824:7481",
+    "VariableID:824:7482",
+    "VariableID:824:7483",
+    "VariableID:824:7484",
+    "VariableID:824:7485",
+    "VariableID:824:7486",
+    "VariableID:38:22",
+    "VariableID:38:23",
+    "VariableID:38:24",
+    "VariableID:38:25",
+    "VariableID:38:26",
+    "VariableID:38:27",
+    "VariableID:38:28",
+    "VariableID:38:29",
+    "VariableID:38:30",
+    "VariableID:38:31",
+    "VariableID:38:32",
+    "VariableID:38:33",
+    "VariableID:38:34",
+    "VariableID:38:35",
+    "VariableID:38:36",
+    "VariableID:38:37",
+    "VariableID:38:38",
+    "VariableID:38:39",
+    "VariableID:38:40",
+    "VariableID:38:41",
+    "VariableID:38:42",
+    "VariableID:38:43",
+    "VariableID:38:44",
+    "VariableID:38:45",
+    "VariableID:38:46",
+    "VariableID:823:2",
+    "VariableID:38:47",
+    "VariableID:2665:9917",
+    "VariableID:1970:8518",
+    "VariableID:1970:8519",
+    "VariableID:1970:8520",
+    "VariableID:2629:7632",
+    "VariableID:1970:8521",
+    "VariableID:1970:8522",
+    "VariableID:1970:8523",
+    "VariableID:1970:8524",
+    "VariableID:38:48",
+    "VariableID:118:19505",
+    "VariableID:39:49",
+    "VariableID:39:50",
+    "VariableID:39:51",
+    "VariableID:39:52",
+    "VariableID:39:53",
+    "VariableID:39:54",
+    "VariableID:39:55",
+    "VariableID:39:56",
+    "VariableID:39:57",
+    "VariableID:1970:8513",
+    "VariableID:1970:8514",
+    "VariableID:1970:8515",
+    "VariableID:1970:8516",
+    "VariableID:1970:8517",
+    "VariableID:39:133",
+    "VariableID:39:134",
+    "VariableID:2110:16027",
+    "VariableID:39:135",
+    "VariableID:39:136",
+    "VariableID:39:137",
+    "VariableID:52:21",
+    "VariableID:529:17331",
+    "VariableID:1148:691",
+    "VariableID:203:4491",
+    "VariableID:59:20",
+    "VariableID:59:21",
+    "VariableID:203:4489",
+    "VariableID:529:17332",
+    "VariableID:203:4487",
+    "VariableID:1516:33670",
+    "VariableID:203:4488",
+    "VariableID:1516:33669",
+    "VariableID:203:5688",
+    "VariableID:1516:33673",
+    "VariableID:203:4492",
+    "VariableID:1798:15360",
+    "VariableID:203:5689",
+    "VariableID:203:4493",
+    "VariableID:203:4494",
+    "VariableID:1849:9057",
+    "VariableID:203:4495",
+    "VariableID:203:4496",
+    "VariableID:529:17322",
+    "VariableID:1849:9684",
+    "VariableID:1658:637",
+    "VariableID:1658:610",
+    "VariableID:529:17323",
+    "VariableID:529:17324",
+    "VariableID:529:17325",
+    "VariableID:529:17326",
+    "VariableID:529:17327",
+    "VariableID:529:17328",
+    "VariableID:1522:9148",
+    "VariableID:529:17330",
+    "VariableID:1522:9149",
+    "VariableID:1522:9150",
+    "VariableID:1522:9152",
+    "VariableID:1522:9153",
+    "VariableID:1522:9154",
+    "VariableID:1522:9155",
+    "VariableID:1522:9156",
+    "VariableID:1522:9157",
+    "VariableID:1522:9193",
+    "VariableID:1522:9158",
+    "VariableID:1522:9159",
+    "VariableID:1522:9160",
+    "VariableID:1522:9161",
+    "VariableID:1522:9162",
+    "VariableID:1522:9163",
+    "VariableID:1639:536",
+    "VariableID:1639:537",
+    "VariableID:1639:538",
+    "VariableID:1639:539",
+    "VariableID:1751:920",
+    "VariableID:1751:921",
+    "VariableID:1751:922",
+    "VariableID:1751:923"
+  ],
+  "variables": [
+    {
+      "id": "VariableID:37:4",
+      "name": "colors/colors-primary-100",
+      "description": "",
+      "type": "COLOR",
+      "valuesByMode": {
+        "37:0": { "r": 1, "g": 0.9529722929000854, "b": 0.9474395513534546, "a": 1 }
+      },
+      "resolvedValuesByMode": {
+        "37:0": {
+          "resolvedValue": { "r": 1, "g": 0.9529722929000854, "b": 0.9474395513534546, "a": 1 },
+          "alias": null
+        }
+      },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:37:9",
+      "name": "colors/colors-primary-200",
+      "description": "",
+      "type": "COLOR",
+      "valuesByMode": {
+        "37:0": { "r": 0.9921568632125854, "g": 0.800000011920929, "b": 0.7372549176216125, "a": 1 }
+      },
+      "resolvedValuesByMode": {
+        "37:0": {
+          "resolvedValue": {
+            "r": 0.9921568632125854,
+            "g": 0.800000011920929,
+            "b": 0.7372549176216125,
+            "a": 1
+          },
+          "alias": null
+        }
+      },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:38:15",
+      "name": "colors/colors-primary-300",
+      "description": "",
+      "type": "COLOR",
+      "valuesByMode": {
+        "37:0": {
+          "r": 0.9882352948188782,
+          "g": 0.6666666865348816,
+          "b": 0.5686274766921997,
+          "a": 1
+        }
+      },
+      "resolvedValuesByMode": {
+        "37:0": {
+          "resolvedValue": {
+            "r": 0.9882352948188782,
+            "g": 0.6666666865348816,
+            "b": 0.5686274766921997,
+            "a": 1
+          },
+          "alias": null
+        }
+      },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:38:16",
+      "name": "colors/colors-primary-400",
+      "description": "",
+      "type": "COLOR",
+      "valuesByMode": {
+        "37:0": { "r": 1, "g": 0.45098039507865906, "b": 0.2705882489681244, "a": 1 }
+      },
+      "resolvedValuesByMode": {
+        "37:0": {
+          "resolvedValue": { "r": 1, "g": 0.45098039507865906, "b": 0.2705882489681244, "a": 1 },
+          "alias": null
+        }
+      },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:38:17",
+      "name": "colors/colors-primary-500",
+      "description": "",
+      "type": "COLOR",
+      "valuesByMode": {
+        "37:0": {
+          "r": 0.9803921580314636,
+          "g": 0.34117648005485535,
+          "b": 0.13725490868091583,
+          "a": 1
+        }
+      },
+      "resolvedValuesByMode": {
+        "37:0": {
+          "resolvedValue": {
+            "r": 0.9803921580314636,
+            "g": 0.34117648005485535,
+            "b": 0.13725490868091583,
+            "a": 1
+          },
+          "alias": null
+        }
+      },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:38:18",
+      "name": "colors/colors-primary-600",
+      "description": "",
+      "type": "COLOR",
+      "valuesByMode": {
+        "37:0": {
+          "r": 0.8784313797950745,
+          "g": 0.27843138575553894,
+          "b": 0.09019608050584793,
+          "a": 1
+        }
+      },
+      "resolvedValuesByMode": {
+        "37:0": {
+          "resolvedValue": {
+            "r": 0.8784313797950745,
+            "g": 0.27843138575553894,
+            "b": 0.09019608050584793,
+            "a": 1
+          },
+          "alias": null
+        }
+      },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:38:19",
+      "name": "colors/colors-primary-700",
+      "description": "",
+      "type": "COLOR",
+      "valuesByMode": {
+        "37:0": {
+          "r": 0.7764706015586853,
+          "g": 0.20000000298023224,
+          "b": 0.0235294122248888,
+          "a": 1
+        }
+      },
+      "resolvedValuesByMode": {
+        "37:0": {
+          "resolvedValue": {
+            "r": 0.7764706015586853,
+            "g": 0.20000000298023224,
+            "b": 0.0235294122248888,
+            "a": 1
+          },
+          "alias": null
+        }
+      },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:38:20",
+      "name": "colors/colors-primary-800",
+      "description": "",
+      "type": "COLOR",
+      "valuesByMode": {
+        "37:0": { "r": 0.6431372761726379, "g": 0.14901961386203766, "b": 0, "a": 1 }
+      },
+      "resolvedValuesByMode": {
+        "37:0": {
+          "resolvedValue": { "r": 0.6431372761726379, "g": 0.14901961386203766, "b": 0, "a": 1 },
+          "alias": null
+        }
+      },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:38:21",
+      "name": "colors/colors-primary-900",
+      "description": "",
+      "type": "COLOR",
+      "valuesByMode": {
+        "37:0": { "r": 0.5098039507865906, "g": 0.12156862765550613, "b": 0, "a": 1 }
+      },
+      "resolvedValuesByMode": {
+        "37:0": {
+          "resolvedValue": { "r": 0.5098039507865906, "g": 0.12156862765550613, "b": 0, "a": 1 },
+          "alias": null
+        }
+      },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:38:22",
+      "name": "colors/colors-success-100",
+      "description": "",
+      "type": "COLOR",
+      "valuesByMode": {
+        "37:0": {
+          "r": 0.9411764740943909,
+          "g": 0.9803921580314636,
+          "b": 0.9725490212440491,
+          "a": 1
+        }
+      },
+      "resolvedValuesByMode": {
+        "37:0": {
+          "resolvedValue": {
+            "r": 0.9411764740943909,
+            "g": 0.9803921580314636,
+            "b": 0.9725490212440491,
+            "a": 1
+          },
+          "alias": null
+        }
+      },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:38:23",
+      "name": "colors/colors-success-200",
+      "description": "",
+      "type": "COLOR",
+      "valuesByMode": {
+        "37:0": {
+          "r": 0.8705882430076599,
+          "g": 0.9647058844566345,
+          "b": 0.9490196108818054,
+          "a": 1
+        }
+      },
+      "resolvedValuesByMode": {
+        "37:0": {
+          "resolvedValue": {
+            "r": 0.8705882430076599,
+            "g": 0.9647058844566345,
+            "b": 0.9490196108818054,
+            "a": 1
+          },
+          "alias": null
+        }
+      },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:38:24",
+      "name": "colors/colors-success-300",
+      "description": "",
+      "type": "COLOR",
+      "valuesByMode": {
+        "37:0": {
+          "r": 0.6745098233222961,
+          "g": 0.9137254953384399,
+          "b": 0.8666666746139526,
+          "a": 1
+        }
+      },
+      "resolvedValuesByMode": {
+        "37:0": {
+          "resolvedValue": {
+            "r": 0.6745098233222961,
+            "g": 0.9137254953384399,
+            "b": 0.8666666746139526,
+            "a": 1
+          },
+          "alias": null
+        }
+      },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:38:25",
+      "name": "colors/colors-success-400",
+      "description": "",
+      "type": "COLOR",
+      "valuesByMode": {
+        "37:0": {
+          "r": 0.43921568989753723,
+          "g": 0.8588235378265381,
+          "b": 0.7803921699523926,
+          "a": 1
+        }
+      },
+      "resolvedValuesByMode": {
+        "37:0": {
+          "resolvedValue": {
+            "r": 0.43921568989753723,
+            "g": 0.8588235378265381,
+            "b": 0.7803921699523926,
+            "a": 1
+          },
+          "alias": null
+        }
+      },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:38:26",
+      "name": "colors/colors-success-500",
+      "description": "",
+      "type": "COLOR",
+      "valuesByMode": {
+        "37:0": { "r": 0, "g": 0.7490196228027344, "b": 0.6196078658103943, "a": 1 }
+      },
+      "resolvedValuesByMode": {
+        "37:0": {
+          "resolvedValue": { "r": 0, "g": 0.7490196228027344, "b": 0.6196078658103943, "a": 1 },
+          "alias": null
+        }
+      },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:38:27",
+      "name": "colors/colors-success-600",
+      "description": "",
+      "type": "COLOR",
+      "valuesByMode": {
+        "37:0": { "r": 0, "g": 0.6941176652908325, "b": 0.5529412031173706, "a": 1 }
+      },
+      "resolvedValuesByMode": {
+        "37:0": {
+          "resolvedValue": { "r": 0, "g": 0.6941176652908325, "b": 0.5529412031173706, "a": 1 },
+          "alias": null
+        }
+      },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:38:28",
+      "name": "colors/colors-success-700",
+      "description": "",
+      "type": "COLOR",
+      "valuesByMode": {
+        "37:0": { "r": 0, "g": 0.572549045085907, "b": 0.4313725531101227, "a": 1 }
+      },
+      "resolvedValuesByMode": {
+        "37:0": {
+          "resolvedValue": { "r": 0, "g": 0.572549045085907, "b": 0.4313725531101227, "a": 1 },
+          "alias": null
+        }
+      },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:38:29",
+      "name": "colors/colors-success-800",
+      "description": "",
+      "type": "COLOR",
+      "valuesByMode": {
+        "37:0": { "r": 0, "g": 0.3921568691730499, "b": 0.25882354378700256, "a": 1 }
+      },
+      "resolvedValuesByMode": {
+        "37:0": {
+          "resolvedValue": { "r": 0, "g": 0.3921568691730499, "b": 0.25882354378700256, "a": 1 },
+          "alias": null
+        }
+      },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:38:30",
+      "name": "colors/colors-success-900",
+      "description": "",
+      "type": "COLOR",
+      "valuesByMode": {
+        "37:0": { "r": 0, "g": 0.29019609093666077, "b": 0.1921568661928177, "a": 1 }
+      },
+      "resolvedValuesByMode": {
+        "37:0": {
+          "resolvedValue": { "r": 0, "g": 0.29019609093666077, "b": 0.1921568661928177, "a": 1 },
+          "alias": null
+        }
+      },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:38:31",
+      "name": "colors/colors-warning-100",
+      "description": "",
+      "type": "COLOR",
+      "valuesByMode": {
+        "37:0": { "r": 1, "g": 0.9803921580314636, "b": 0.929411768913269, "a": 1 }
+      },
+      "resolvedValuesByMode": {
+        "37:0": {
+          "resolvedValue": { "r": 1, "g": 0.9803921580314636, "b": 0.929411768913269, "a": 1 },
+          "alias": null
+        }
+      },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:38:32",
+      "name": "colors/colors-warning-200",
+      "description": "",
+      "type": "COLOR",
+      "valuesByMode": {
+        "37:0": {
+          "r": 0.9960784316062927,
+          "g": 0.9333333373069763,
+          "b": 0.7529411911964417,
+          "a": 1
+        }
+      },
+      "resolvedValuesByMode": {
+        "37:0": {
+          "resolvedValue": {
+            "r": 0.9960784316062927,
+            "g": 0.9333333373069763,
+            "b": 0.7529411911964417,
+            "a": 1
+          },
+          "alias": null
+        }
+      },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:38:33",
+      "name": "colors/colors-warning-300",
+      "description": "",
+      "type": "COLOR",
+      "valuesByMode": {
+        "37:0": { "r": 0.9882352948188782, "g": 0.8745098114013672, "b": 0.529411792755127, "a": 1 }
+      },
+      "resolvedValuesByMode": {
+        "37:0": {
+          "resolvedValue": {
+            "r": 0.9882352948188782,
+            "g": 0.8745098114013672,
+            "b": 0.529411792755127,
+            "a": 1
+          },
+          "alias": null
+        }
+      },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:38:34",
+      "name": "colors/colors-warning-400",
+      "description": "",
+      "type": "COLOR",
+      "valuesByMode": {
+        "37:0": {
+          "r": 0.9843137264251709,
+          "g": 0.8117647171020508,
+          "b": 0.29019609093666077,
+          "a": 1
+        }
+      },
+      "resolvedValuesByMode": {
+        "37:0": {
+          "resolvedValue": {
+            "r": 0.9843137264251709,
+            "g": 0.8117647171020508,
+            "b": 0.29019609093666077,
+            "a": 1
+          },
+          "alias": null
+        }
+      },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:38:35",
+      "name": "colors/colors-warning-500",
+      "description": "",
+      "type": "COLOR",
+      "valuesByMode": {
+        "37:0": {
+          "r": 0.9843137264251709,
+          "g": 0.8117647171020508,
+          "b": 0.29019609093666077,
+          "a": 1
+        }
+      },
+      "resolvedValuesByMode": {
+        "37:0": {
+          "resolvedValue": {
+            "r": 0.9843137264251709,
+            "g": 0.8117647171020508,
+            "b": 0.29019609093666077,
+            "a": 1
+          },
+          "alias": null
+        }
+      },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:38:36",
+      "name": "colors/colors-warning-600",
+      "description": "",
+      "type": "COLOR",
+      "valuesByMode": {
+        "37:0": { "r": 0.8509804010391235, "g": 0.6352941393852234, "b": 0, "a": 1 }
+      },
+      "resolvedValuesByMode": {
+        "37:0": {
+          "resolvedValue": { "r": 0.8509804010391235, "g": 0.6352941393852234, "b": 0, "a": 1 },
+          "alias": null
+        }
+      },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:38:37",
+      "name": "colors/colors-warning-700",
+      "description": "",
+      "type": "COLOR",
+      "valuesByMode": {
+        "37:0": { "r": 0.7450980544090271, "g": 0.5568627715110779, "b": 0, "a": 1 }
+      },
+      "resolvedValuesByMode": {
+        "37:0": {
+          "resolvedValue": { "r": 0.7450980544090271, "g": 0.5568627715110779, "b": 0, "a": 1 },
+          "alias": null
+        }
+      },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:38:38",
+      "name": "colors/colors-warning-800",
+      "description": "",
+      "type": "COLOR",
+      "valuesByMode": {
+        "37:0": {
+          "r": 0.4274509847164154,
+          "g": 0.32156863808631897,
+          "b": 0.003921568859368563,
+          "a": 1
+        }
+      },
+      "resolvedValuesByMode": {
+        "37:0": {
+          "resolvedValue": {
+            "r": 0.4274509847164154,
+            "g": 0.32156863808631897,
+            "b": 0.003921568859368563,
+            "a": 1
+          },
+          "alias": null
+        }
+      },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:38:39",
+      "name": "colors/colors-warning-900",
+      "description": "",
+      "type": "COLOR",
+      "valuesByMode": {
+        "37:0": {
+          "r": 0.22745098173618317,
+          "g": 0.1725490242242813,
+          "b": 0.003921568859368563,
+          "a": 1
+        }
+      },
+      "resolvedValuesByMode": {
+        "37:0": {
+          "resolvedValue": {
+            "r": 0.22745098173618317,
+            "g": 0.1725490242242813,
+            "b": 0.003921568859368563,
+            "a": 1
+          },
+          "alias": null
+        }
+      },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:38:40",
+      "name": "colors/colors-destructive-100",
+      "description": "",
+      "type": "COLOR",
+      "valuesByMode": {
+        "37:0": { "r": 1, "g": 0.9372549057006836, "b": 0.9372549057006836, "a": 1 }
+      },
+      "resolvedValuesByMode": {
+        "37:0": {
+          "resolvedValue": { "r": 1, "g": 0.9372549057006836, "b": 0.9372549057006836, "a": 1 },
+          "alias": null
+        }
+      },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:38:41",
+      "name": "colors/colors-destructive-200",
+      "description": "",
+      "type": "COLOR",
+      "valuesByMode": {
+        "37:0": {
+          "r": 0.9960784316062927,
+          "g": 0.7882353067398071,
+          "b": 0.7882353067398071,
+          "a": 1
+        }
+      },
+      "resolvedValuesByMode": {
+        "37:0": {
+          "resolvedValue": {
+            "r": 0.9960784316062927,
+            "g": 0.7882353067398071,
+            "b": 0.7882353067398071,
+            "a": 1
+          },
+          "alias": null
+        }
+      },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:38:42",
+      "name": "colors/colors-destructive-300",
+      "description": "",
+      "type": "COLOR",
+      "valuesByMode": {
+        "37:0": { "r": 0.9607843160629272, "g": 0.5803921818733215, "b": 0.572549045085907, "a": 1 }
+      },
+      "resolvedValuesByMode": {
+        "37:0": {
+          "resolvedValue": {
+            "r": 0.9607843160629272,
+            "g": 0.5803921818733215,
+            "b": 0.572549045085907,
+            "a": 1
+          },
+          "alias": null
+        }
+      },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:38:43",
+      "name": "colors/colors-destructive-400",
+      "description": "",
+      "type": "COLOR",
+      "valuesByMode": {
+        "37:0": {
+          "r": 0.8745098114013672,
+          "g": 0.3803921639919281,
+          "b": 0.3803921639919281,
+          "a": 1
+        }
+      },
+      "resolvedValuesByMode": {
+        "37:0": {
+          "resolvedValue": {
+            "r": 0.8745098114013672,
+            "g": 0.3803921639919281,
+            "b": 0.3803921639919281,
+            "a": 1
+          },
+          "alias": null
+        }
+      },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:38:44",
+      "name": "colors/colors-destructive-500",
+      "description": "",
+      "type": "COLOR",
+      "valuesByMode": {
+        "37:0": {
+          "r": 0.8313725590705872,
+          "g": 0.1411764770746231,
+          "b": 0.1411764770746231,
+          "a": 1
+        }
+      },
+      "resolvedValuesByMode": {
+        "37:0": {
+          "resolvedValue": {
+            "r": 0.8313725590705872,
+            "g": 0.1411764770746231,
+            "b": 0.1411764770746231,
+            "a": 1
+          },
+          "alias": null
+        }
+      },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:38:45",
+      "name": "colors/colors-destructive-600",
+      "description": "",
+      "type": "COLOR",
+      "valuesByMode": {
+        "37:0": {
+          "r": 0.6745098233222961,
+          "g": 0.09019608050584793,
+          "b": 0.0941176488995552,
+          "a": 1
+        }
+      },
+      "resolvedValuesByMode": {
+        "37:0": {
+          "resolvedValue": {
+            "r": 0.6745098233222961,
+            "g": 0.09019608050584793,
+            "b": 0.0941176488995552,
+            "a": 1
+          },
+          "alias": null
+        }
+      },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:38:46",
+      "name": "colors/colors-destructive-700",
+      "description": "",
+      "type": "COLOR",
+      "valuesByMode": {
+        "37:0": {
+          "r": 0.49803921580314636,
+          "g": 0.0784313753247261,
+          "b": 0.08627451211214066,
+          "a": 1
+        }
+      },
+      "resolvedValuesByMode": {
+        "37:0": {
+          "resolvedValue": {
+            "r": 0.49803921580314636,
+            "g": 0.0784313753247261,
+            "b": 0.08627451211214066,
+            "a": 1
+          },
+          "alias": null
+        }
+      },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:38:47",
+      "name": "colors/colors-destructive-800",
+      "description": "",
+      "type": "COLOR",
+      "valuesByMode": {
+        "37:0": {
+          "r": 0.3960784375667572,
+          "g": 0.03529411926865578,
+          "b": 0.03529411926865578,
+          "a": 1
+        }
+      },
+      "resolvedValuesByMode": {
+        "37:0": {
+          "resolvedValue": {
+            "r": 0.3960784375667572,
+            "g": 0.03529411926865578,
+            "b": 0.03529411926865578,
+            "a": 1
+          },
+          "alias": null
+        }
+      },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": { "WEB": "base-color/Destructive/colors-destructive-800" }
+    },
+    {
+      "id": "VariableID:38:48",
+      "name": "colors/colors-destructive-900",
+      "description": "",
+      "type": "COLOR",
+      "valuesByMode": {
+        "37:0": {
+          "r": 0.30980393290519714,
+          "g": 0.0313725508749485,
+          "b": 0.03529411926865578,
+          "a": 1
+        }
+      },
+      "resolvedValuesByMode": {
+        "37:0": {
+          "resolvedValue": {
+            "r": 0.30980393290519714,
+            "g": 0.0313725508749485,
+            "b": 0.03529411926865578,
+            "a": 1
+          },
+          "alias": null
+        }
+      },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:39:49",
+      "name": "colors/colors-neutral-100",
+      "description": "",
+      "type": "COLOR",
+      "valuesByMode": {
+        "37:0": {
+          "r": 0.9686274528503418,
+          "g": 0.9725490212440491,
+          "b": 0.9764705896377563,
+          "a": 1
+        }
+      },
+      "resolvedValuesByMode": {
+        "37:0": {
+          "resolvedValue": {
+            "r": 0.9686274528503418,
+            "g": 0.9725490212440491,
+            "b": 0.9764705896377563,
+            "a": 1
+          },
+          "alias": null
+        }
+      },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:39:50",
+      "name": "colors/colors-neutral-200",
+      "description": "",
+      "type": "COLOR",
+      "valuesByMode": {
+        "37:0": {
+          "r": 0.9411764740943909,
+          "g": 0.9450980424880981,
+          "b": 0.9529411792755127,
+          "a": 1
+        }
+      },
+      "resolvedValuesByMode": {
+        "37:0": {
+          "resolvedValue": {
+            "r": 0.9411764740943909,
+            "g": 0.9450980424880981,
+            "b": 0.9529411792755127,
+            "a": 1
+          },
+          "alias": null
+        }
+      },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:39:51",
+      "name": "colors/colors-neutral-300",
+      "description": "",
+      "type": "COLOR",
+      "valuesByMode": {
+        "37:0": { "r": 0.8909133672714233, "g": 0.898869514465332, "b": 0.9227376580238342, "a": 1 }
+      },
+      "resolvedValuesByMode": {
+        "37:0": {
+          "resolvedValue": {
+            "r": 0.8909133672714233,
+            "g": 0.898869514465332,
+            "b": 0.9227376580238342,
+            "a": 1
+          },
+          "alias": null
+        }
+      },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:39:52",
+      "name": "colors/colors-neutral-400",
+      "description": "",
+      "type": "COLOR",
+      "valuesByMode": {
+        "37:0": {
+          "r": 0.7438521981239319,
+          "g": 0.7645292282104492,
+          "b": 0.7989909052848816,
+          "a": 1
+        }
+      },
+      "resolvedValuesByMode": {
+        "37:0": {
+          "resolvedValue": {
+            "r": 0.7438521981239319,
+            "g": 0.7645292282104492,
+            "b": 0.7989909052848816,
+            "a": 1
+          },
+          "alias": null
+        }
+      },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:39:53",
+      "name": "colors/colors-neutral-500",
+      "description": "",
+      "type": "COLOR",
+      "valuesByMode": {
+        "37:0": { "r": 0.6138784885406494, "g": 0.6435658931732178, "b": 0.689746081829071, "a": 1 }
+      },
+      "resolvedValuesByMode": {
+        "37:0": {
+          "resolvedValue": {
+            "r": 0.6138784885406494,
+            "g": 0.6435658931732178,
+            "b": 0.689746081829071,
+            "a": 1
+          },
+          "alias": null
+        }
+      },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:39:54",
+      "name": "colors/colors-neutral-600",
+      "description": "",
+      "type": "COLOR",
+      "valuesByMode": {
+        "37:0": {
+          "r": 0.4613589644432068,
+          "g": 0.5014801025390625,
+          "b": 0.5576497316360474,
+          "a": 1
+        }
+      },
+      "resolvedValuesByMode": {
+        "37:0": {
+          "resolvedValue": {
+            "r": 0.4613589644432068,
+            "g": 0.5014801025390625,
+            "b": 0.5576497316360474,
+            "a": 1
+          },
+          "alias": null
+        }
+      },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:39:55",
+      "name": "colors/colors-neutral-700",
+      "description": "",
+      "type": "COLOR",
+      "valuesByMode": {
+        "37:0": {
+          "r": 0.34716352820396423,
+          "g": 0.38350826501846313,
+          "b": 0.42792969942092896,
+          "a": 1
+        }
+      },
+      "resolvedValuesByMode": {
+        "37:0": {
+          "resolvedValue": {
+            "r": 0.34716352820396423,
+            "g": 0.38350826501846313,
+            "b": 0.42792969942092896,
+            "a": 1
+          },
+          "alias": null
+        }
+      },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:39:56",
+      "name": "colors/colors-neutral-800",
+      "description": "",
+      "type": "COLOR",
+      "valuesByMode": {
+        "37:0": {
+          "r": 0.1882352977991104,
+          "g": 0.2078431397676468,
+          "b": 0.23529411852359772,
+          "a": 1
+        }
+      },
+      "resolvedValuesByMode": {
+        "37:0": {
+          "resolvedValue": {
+            "r": 0.1882352977991104,
+            "g": 0.2078431397676468,
+            "b": 0.23529411852359772,
+            "a": 1
+          },
+          "alias": null
+        }
+      },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:39:57",
+      "name": "colors/colors-neutral-900",
+      "description": "",
+      "type": "COLOR",
+      "valuesByMode": {
+        "37:0": {
+          "r": 0.09803921729326248,
+          "g": 0.10980392247438431,
+          "b": 0.125490203499794,
+          "a": 1
+        }
+      },
+      "resolvedValuesByMode": {
+        "37:0": {
+          "resolvedValue": {
+            "r": 0.09803921729326248,
+            "g": 0.10980392247438431,
+            "b": 0.125490203499794,
+            "a": 1
+          },
+          "alias": null
+        }
+      },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:39:133",
+      "name": "radius/dimensions-border-radius-2",
+      "description": "",
+      "type": "FLOAT",
+      "valuesByMode": { "37:0": 2 },
+      "resolvedValuesByMode": { "37:0": { "resolvedValue": 2, "alias": null } },
+      "scopes": ["WIDTH_HEIGHT"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:39:134",
+      "name": "radius/dimensions-border-radius-4",
+      "description": "",
+      "type": "FLOAT",
+      "valuesByMode": { "37:0": 4 },
+      "resolvedValuesByMode": { "37:0": { "resolvedValue": 4, "alias": null } },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:39:135",
+      "name": "radius/dimensions-border-radius-8",
+      "description": "",
+      "type": "FLOAT",
+      "valuesByMode": { "37:0": 8 },
+      "resolvedValuesByMode": { "37:0": { "resolvedValue": 8, "alias": null } },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:39:136",
+      "name": "radius/dimensions-border-radius-16",
+      "description": "",
+      "type": "FLOAT",
+      "valuesByMode": { "37:0": 16 },
+      "resolvedValuesByMode": { "37:0": { "resolvedValue": 16, "alias": null } },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:39:137",
+      "name": "radius/dimensions-border-radius-24",
+      "description": "",
+      "type": "FLOAT",
+      "valuesByMode": { "37:0": 24 },
+      "resolvedValuesByMode": { "37:0": { "resolvedValue": 24, "alias": null } },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:52:21",
+      "name": "radius/dimensions-border-radius-36",
+      "description": "",
+      "type": "FLOAT",
+      "valuesByMode": { "37:0": 36 },
+      "resolvedValuesByMode": { "37:0": { "resolvedValue": 36, "alias": null } },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:59:20",
+      "name": "borderWidth/dimensions-border-width-1",
+      "description": "",
+      "type": "FLOAT",
+      "valuesByMode": { "37:0": 1 },
+      "resolvedValuesByMode": { "37:0": { "resolvedValue": 1, "alias": null } },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:59:21",
+      "name": "borderWidth/dimensions-border-width-2",
+      "description": "",
+      "type": "FLOAT",
+      "valuesByMode": { "37:0": 2 },
+      "resolvedValuesByMode": { "37:0": { "resolvedValue": 2, "alias": null } },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:118:19505",
+      "name": "colors/colors-neutral-50",
+      "description": "",
+      "type": "COLOR",
+      "valuesByMode": {
+        "37:0": {
+          "r": 0.9803921580314636,
+          "g": 0.9843137264251709,
+          "b": 0.9843137264251709,
+          "a": 1
+        }
+      },
+      "resolvedValuesByMode": {
+        "37:0": {
+          "resolvedValue": {
+            "r": 0.9803921580314636,
+            "g": 0.9843137264251709,
+            "b": 0.9843137264251709,
+            "a": 1
+          },
+          "alias": null
+        }
+      },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:203:4487",
+      "name": "space/dimensions-fixed-4",
+      "description": "",
+      "type": "FLOAT",
+      "valuesByMode": { "37:0": 4 },
+      "resolvedValuesByMode": { "37:0": { "resolvedValue": 4, "alias": null } },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:203:4488",
+      "name": "space/dimensions-fixed-8",
+      "description": "",
+      "type": "FLOAT",
+      "valuesByMode": { "37:0": 8 },
+      "resolvedValuesByMode": { "37:0": { "resolvedValue": 8, "alias": null } },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:203:4489",
+      "name": "space/dimensions-fixed-2",
+      "description": "",
+      "type": "FLOAT",
+      "valuesByMode": { "37:0": 2 },
+      "resolvedValuesByMode": { "37:0": { "resolvedValue": 2, "alias": null } },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:203:4491",
+      "name": "space/dimensions-fixed-1",
+      "description": "",
+      "type": "FLOAT",
+      "valuesByMode": { "37:0": 1 },
+      "resolvedValuesByMode": { "37:0": { "resolvedValue": 1, "alias": null } },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:203:4492",
+      "name": "space/dimensions-fixed-16",
+      "description": "",
+      "type": "FLOAT",
+      "valuesByMode": { "37:0": 16 },
+      "resolvedValuesByMode": { "37:0": { "resolvedValue": 16, "alias": null } },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:203:4493",
+      "name": "space/dimensions-fixed-24",
+      "description": "",
+      "type": "FLOAT",
+      "valuesByMode": { "37:0": 24 },
+      "resolvedValuesByMode": { "37:0": { "resolvedValue": 24, "alias": null } },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:203:4494",
+      "name": "space/dimensions-fixed-32",
+      "description": "",
+      "type": "FLOAT",
+      "valuesByMode": { "37:0": 32 },
+      "resolvedValuesByMode": { "37:0": { "resolvedValue": 32, "alias": null } },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:203:4495",
+      "name": "space/dimensions-fixed-48",
+      "description": "",
+      "type": "FLOAT",
+      "valuesByMode": { "37:0": 48 },
+      "resolvedValuesByMode": { "37:0": { "resolvedValue": 48, "alias": null } },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:203:4496",
+      "name": "space/dimensions-fixed-64",
+      "description": "",
+      "type": "FLOAT",
+      "valuesByMode": { "37:0": 64 },
+      "resolvedValuesByMode": { "37:0": { "resolvedValue": 64, "alias": null } },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:203:5688",
+      "name": "space/dimensions-fixed-12",
+      "description": "",
+      "type": "FLOAT",
+      "valuesByMode": { "37:0": 12 },
+      "resolvedValuesByMode": { "37:0": { "resolvedValue": 12, "alias": null } },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:203:5689",
+      "name": "space/dimensions-fixed-20",
+      "description": "",
+      "type": "FLOAT",
+      "valuesByMode": { "37:0": 20 },
+      "resolvedValuesByMode": { "37:0": { "resolvedValue": 20, "alias": null } },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:529:17322",
+      "name": "fontSize/font-size-text-10",
+      "description": "",
+      "type": "FLOAT",
+      "valuesByMode": { "37:0": 10 },
+      "resolvedValuesByMode": { "37:0": { "resolvedValue": 10, "alias": null } },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:529:17323",
+      "name": "fontSize/font-size-text-12",
+      "description": "",
+      "type": "FLOAT",
+      "valuesByMode": { "37:0": 12 },
+      "resolvedValuesByMode": { "37:0": { "resolvedValue": 12, "alias": null } },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:529:17324",
+      "name": "fontSize/font-size-text-14",
+      "description": "",
+      "type": "FLOAT",
+      "valuesByMode": { "37:0": 14 },
+      "resolvedValuesByMode": { "37:0": { "resolvedValue": 14, "alias": null } },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:529:17325",
+      "name": "fontSize/font-size-text-16",
+      "description": "",
+      "type": "FLOAT",
+      "valuesByMode": { "37:0": 16 },
+      "resolvedValuesByMode": { "37:0": { "resolvedValue": 16, "alias": null } },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:529:17326",
+      "name": "fontSize/font-size-text-18",
+      "description": "",
+      "type": "FLOAT",
+      "valuesByMode": { "37:0": 18 },
+      "resolvedValuesByMode": { "37:0": { "resolvedValue": 18, "alias": null } },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:529:17327",
+      "name": "fontSize/font-size-text-20",
+      "description": "",
+      "type": "FLOAT",
+      "valuesByMode": { "37:0": 20 },
+      "resolvedValuesByMode": { "37:0": { "resolvedValue": 20, "alias": null } },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:529:17328",
+      "name": "fontSize/font-size-text-24",
+      "description": "",
+      "type": "FLOAT",
+      "valuesByMode": { "37:0": 24 },
+      "resolvedValuesByMode": { "37:0": { "resolvedValue": 24, "alias": null } },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:529:17330",
+      "name": "fontSize/font-size-text-32",
+      "description": "",
+      "type": "FLOAT",
+      "valuesByMode": { "37:0": 32 },
+      "resolvedValuesByMode": { "37:0": { "resolvedValue": 32, "alias": null } },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:529:17331",
+      "name": "borderWidth/dimensions-border-width-0",
+      "description": "",
+      "type": "FLOAT",
+      "valuesByMode": { "37:0": 0 },
+      "resolvedValuesByMode": { "37:0": { "resolvedValue": 0, "alias": null } },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:529:17332",
+      "name": "borderWidth/dimensions-border-width-4",
+      "description": "",
+      "type": "FLOAT",
+      "valuesByMode": { "37:0": 4 },
+      "resolvedValuesByMode": { "37:0": { "resolvedValue": 4, "alias": null } },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:823:2",
+      "name": "colors/colors-neutral-0",
+      "description": "",
+      "type": "COLOR",
+      "valuesByMode": { "37:0": { "r": 1, "g": 1, "b": 1, "a": 1 } },
+      "resolvedValuesByMode": {
+        "37:0": { "resolvedValue": { "r": 1, "g": 1, "b": 1, "a": 1 }, "alias": null }
+      },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:824:7478",
+      "name": "colors/colors-secondary-100",
+      "description": "",
+      "type": "COLOR",
+      "valuesByMode": {
+        "37:0": {
+          "r": 0.9411764740943909,
+          "g": 0.9803921580314636,
+          "b": 0.9725490212440491,
+          "a": 1
+        }
+      },
+      "resolvedValuesByMode": {
+        "37:0": {
+          "resolvedValue": {
+            "r": 0.9411764740943909,
+            "g": 0.9803921580314636,
+            "b": 0.9725490212440491,
+            "a": 1
+          },
+          "alias": null
+        }
+      },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:824:7479",
+      "name": "colors/colors-secondary-200",
+      "description": "",
+      "type": "COLOR",
+      "valuesByMode": {
+        "37:0": {
+          "r": 0.8705882430076599,
+          "g": 0.9647058844566345,
+          "b": 0.9490196108818054,
+          "a": 1
+        }
+      },
+      "resolvedValuesByMode": {
+        "37:0": {
+          "resolvedValue": {
+            "r": 0.8705882430076599,
+            "g": 0.9647058844566345,
+            "b": 0.9490196108818054,
+            "a": 1
+          },
+          "alias": null
+        }
+      },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:824:7480",
+      "name": "colors/colors-secondary-300",
+      "description": "",
+      "type": "COLOR",
+      "valuesByMode": {
+        "37:0": {
+          "r": 0.6745098233222961,
+          "g": 0.9137254953384399,
+          "b": 0.8666666746139526,
+          "a": 1
+        }
+      },
+      "resolvedValuesByMode": {
+        "37:0": {
+          "resolvedValue": {
+            "r": 0.6745098233222961,
+            "g": 0.9137254953384399,
+            "b": 0.8666666746139526,
+            "a": 1
+          },
+          "alias": null
+        }
+      },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:824:7481",
+      "name": "colors/colors-secondary-400",
+      "description": "",
+      "type": "COLOR",
+      "valuesByMode": {
+        "37:0": {
+          "r": 0.43921568989753723,
+          "g": 0.8588235378265381,
+          "b": 0.7803921699523926,
+          "a": 1
+        }
+      },
+      "resolvedValuesByMode": {
+        "37:0": {
+          "resolvedValue": {
+            "r": 0.43921568989753723,
+            "g": 0.8588235378265381,
+            "b": 0.7803921699523926,
+            "a": 1
+          },
+          "alias": null
+        }
+      },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:824:7482",
+      "name": "colors/colors-secondary-500",
+      "description": "",
+      "type": "COLOR",
+      "valuesByMode": {
+        "37:0": { "r": 0, "g": 0.7490196228027344, "b": 0.6196078658103943, "a": 1 }
+      },
+      "resolvedValuesByMode": {
+        "37:0": {
+          "resolvedValue": { "r": 0, "g": 0.7490196228027344, "b": 0.6196078658103943, "a": 1 },
+          "alias": null
+        }
+      },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:824:7483",
+      "name": "colors/colors-secondary-600",
+      "description": "",
+      "type": "COLOR",
+      "valuesByMode": {
+        "37:0": { "r": 0, "g": 0.6941176652908325, "b": 0.5529412031173706, "a": 1 }
+      },
+      "resolvedValuesByMode": {
+        "37:0": {
+          "resolvedValue": { "r": 0, "g": 0.6941176652908325, "b": 0.5529412031173706, "a": 1 },
+          "alias": null
+        }
+      },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:824:7484",
+      "name": "colors/colors-secondary-700",
+      "description": "",
+      "type": "COLOR",
+      "valuesByMode": {
+        "37:0": { "r": 0, "g": 0.572549045085907, "b": 0.4313725531101227, "a": 1 }
+      },
+      "resolvedValuesByMode": {
+        "37:0": {
+          "resolvedValue": { "r": 0, "g": 0.572549045085907, "b": 0.4313725531101227, "a": 1 },
+          "alias": null
+        }
+      },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:824:7485",
+      "name": "colors/colors-secondary-800",
+      "description": "",
+      "type": "COLOR",
+      "valuesByMode": {
+        "37:0": { "r": 0, "g": 0.3921568691730499, "b": 0.25882354378700256, "a": 1 }
+      },
+      "resolvedValuesByMode": {
+        "37:0": {
+          "resolvedValue": { "r": 0, "g": 0.3921568691730499, "b": 0.25882354378700256, "a": 1 },
+          "alias": null
+        }
+      },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:824:7486",
+      "name": "colors/colors-secondary-900",
+      "description": "",
+      "type": "COLOR",
+      "valuesByMode": {
+        "37:0": { "r": 0, "g": 0.29019609093666077, "b": 0.1921568661928177, "a": 1 }
+      },
+      "resolvedValuesByMode": {
+        "37:0": {
+          "resolvedValue": { "r": 0, "g": 0.29019609093666077, "b": 0.1921568661928177, "a": 1 },
+          "alias": null
+        }
+      },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:1148:691",
+      "name": "space/dimensions-fixed-0",
+      "description": "",
+      "type": "FLOAT",
+      "valuesByMode": { "37:0": 0 },
+      "resolvedValuesByMode": { "37:0": { "resolvedValue": 0, "alias": null } },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:1516:33669",
+      "name": "space/dimensions-fixed-10",
+      "description": "",
+      "type": "FLOAT",
+      "valuesByMode": { "37:0": 10 },
+      "resolvedValuesByMode": { "37:0": { "resolvedValue": 10, "alias": null } },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:1516:33670",
+      "name": "space/dimensions-fixed-6",
+      "description": "",
+      "type": "FLOAT",
+      "valuesByMode": { "37:0": 6 },
+      "resolvedValuesByMode": { "37:0": { "resolvedValue": 6, "alias": null } },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:1516:33673",
+      "name": "space/dimensions-fixed-14",
+      "description": "",
+      "type": "FLOAT",
+      "valuesByMode": { "37:0": 14 },
+      "resolvedValuesByMode": { "37:0": { "resolvedValue": 14, "alias": null } },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:1522:9148",
+      "name": "fontSize/font-size-text-30",
+      "description": "",
+      "type": "FLOAT",
+      "valuesByMode": { "37:0": 30 },
+      "resolvedValuesByMode": { "37:0": { "resolvedValue": 30, "alias": null } },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:1522:9149",
+      "name": "fontSize/font-size-text-36",
+      "description": "",
+      "type": "FLOAT",
+      "valuesByMode": { "37:0": 36 },
+      "resolvedValuesByMode": { "37:0": { "resolvedValue": 36, "alias": null } },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:1522:9150",
+      "name": "fontSize/font-size-text-48",
+      "description": "",
+      "type": "FLOAT",
+      "valuesByMode": { "37:0": 48 },
+      "resolvedValuesByMode": { "37:0": { "resolvedValue": 48, "alias": null } },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:1522:9152",
+      "name": "lineHeight/line-height-text-10",
+      "description": "",
+      "type": "FLOAT",
+      "valuesByMode": { "37:0": 10 },
+      "resolvedValuesByMode": { "37:0": { "resolvedValue": 10, "alias": null } },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:1522:9153",
+      "name": "lineHeight/line-height-text-12",
+      "description": "",
+      "type": "FLOAT",
+      "valuesByMode": { "37:0": 12 },
+      "resolvedValuesByMode": { "37:0": { "resolvedValue": 12, "alias": null } },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:1522:9154",
+      "name": "lineHeight/line-height-text-14",
+      "description": "",
+      "type": "FLOAT",
+      "valuesByMode": { "37:0": 14 },
+      "resolvedValuesByMode": { "37:0": { "resolvedValue": 14, "alias": null } },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:1522:9155",
+      "name": "lineHeight/line-height-text-16",
+      "description": "",
+      "type": "FLOAT",
+      "valuesByMode": { "37:0": 16 },
+      "resolvedValuesByMode": { "37:0": { "resolvedValue": 16, "alias": null } },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:1522:9156",
+      "name": "lineHeight/line-height-text-18",
+      "description": "",
+      "type": "FLOAT",
+      "valuesByMode": { "37:0": 18 },
+      "resolvedValuesByMode": { "37:0": { "resolvedValue": 18, "alias": null } },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:1522:9157",
+      "name": "lineHeight/line-height-text-20",
+      "description": "",
+      "type": "FLOAT",
+      "valuesByMode": { "37:0": 20 },
+      "resolvedValuesByMode": { "37:0": { "resolvedValue": 20, "alias": null } },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:1522:9158",
+      "name": "lineHeight/line-height-text-24",
+      "description": "",
+      "type": "FLOAT",
+      "valuesByMode": { "37:0": 24 },
+      "resolvedValuesByMode": { "37:0": { "resolvedValue": 24, "alias": null } },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:1522:9159",
+      "name": "lineHeight/line-height-text-30",
+      "description": "",
+      "type": "FLOAT",
+      "valuesByMode": { "37:0": 30 },
+      "resolvedValuesByMode": { "37:0": { "resolvedValue": 30, "alias": null } },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:1522:9160",
+      "name": "lineHeight/line-height-text-32",
+      "description": "",
+      "type": "FLOAT",
+      "valuesByMode": { "37:0": 32 },
+      "resolvedValuesByMode": { "37:0": { "resolvedValue": 32, "alias": null } },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:1522:9161",
+      "name": "lineHeight/line-height-text-38",
+      "description": "",
+      "type": "FLOAT",
+      "valuesByMode": { "37:0": 38 },
+      "resolvedValuesByMode": { "37:0": { "resolvedValue": 38, "alias": null } },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:1522:9162",
+      "name": "lineHeight/line-height-text-44",
+      "description": "",
+      "type": "FLOAT",
+      "valuesByMode": { "37:0": 44 },
+      "resolvedValuesByMode": { "37:0": { "resolvedValue": 44, "alias": null } },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:1522:9163",
+      "name": "lineHeight/line-height-text-60",
+      "description": "",
+      "type": "FLOAT",
+      "valuesByMode": { "37:0": 60 },
+      "resolvedValuesByMode": { "37:0": { "resolvedValue": 60, "alias": null } },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:1522:9193",
+      "name": "lineHeight/line-height-text-22",
+      "description": "",
+      "type": "FLOAT",
+      "valuesByMode": { "37:0": 22 },
+      "resolvedValuesByMode": { "37:0": { "resolvedValue": 22, "alias": null } },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:1639:536",
+      "name": "ringWidth/dimensions-ring-width-0",
+      "description": "",
+      "type": "FLOAT",
+      "valuesByMode": { "37:0": 0 },
+      "resolvedValuesByMode": { "37:0": { "resolvedValue": 0, "alias": null } },
+      "scopes": ["WIDTH_HEIGHT"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:1639:537",
+      "name": "ringWidth/dimensions-ring-width-1",
+      "description": "",
+      "type": "FLOAT",
+      "valuesByMode": { "37:0": 1 },
+      "resolvedValuesByMode": { "37:0": { "resolvedValue": 1, "alias": null } },
+      "scopes": ["WIDTH_HEIGHT"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:1639:538",
+      "name": "ringWidth/dimensions-ring-width-2",
+      "description": "",
+      "type": "FLOAT",
+      "valuesByMode": { "37:0": 2 },
+      "resolvedValuesByMode": { "37:0": { "resolvedValue": 2, "alias": null } },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:1639:539",
+      "name": "ringWidth/dimensions-ring-width-4",
+      "description": "",
+      "type": "FLOAT",
+      "valuesByMode": { "37:0": 4 },
+      "resolvedValuesByMode": { "37:0": { "resolvedValue": 4, "alias": null } },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:1658:610",
+      "name": "fontSpacing/font-letter-spacing-2",
+      "description": "",
+      "type": "FLOAT",
+      "valuesByMode": { "37:0": -2 },
+      "resolvedValuesByMode": { "37:0": { "resolvedValue": -2, "alias": null } },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:1658:637",
+      "name": "fontSpacing/font-letter-spacing-1",
+      "description": "",
+      "type": "FLOAT",
+      "valuesByMode": { "37:0": -1 },
+      "resolvedValuesByMode": { "37:0": { "resolvedValue": -1, "alias": null } },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:1751:920",
+      "name": "fontWeight/font-weight-100",
+      "description": "",
+      "type": "FLOAT",
+      "valuesByMode": { "37:0": 100 },
+      "resolvedValuesByMode": { "37:0": { "resolvedValue": 100, "alias": null } },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:1751:921",
+      "name": "fontWeight/font-weight-400",
+      "description": "",
+      "type": "FLOAT",
+      "valuesByMode": { "37:0": 400 },
+      "resolvedValuesByMode": { "37:0": { "resolvedValue": 400, "alias": null } },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:1751:922",
+      "name": "fontWeight/font-weight-600",
+      "description": "",
+      "type": "FLOAT",
+      "valuesByMode": { "37:0": 600 },
+      "resolvedValuesByMode": { "37:0": { "resolvedValue": 600, "alias": null } },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:1751:923",
+      "name": "fontWeight/font-weight-700",
+      "description": "",
+      "type": "FLOAT",
+      "valuesByMode": { "37:0": 700 },
+      "resolvedValuesByMode": { "37:0": { "resolvedValue": 700, "alias": null } },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:1798:15360",
+      "name": "space/dimensions-fixed-18",
+      "description": "",
+      "type": "FLOAT",
+      "valuesByMode": { "37:0": 18 },
+      "resolvedValuesByMode": { "37:0": { "resolvedValue": 18, "alias": null } },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:1849:9057",
+      "name": "space/dimensions-fixed-40",
+      "description": "",
+      "type": "FLOAT",
+      "valuesByMode": { "37:0": 40 },
+      "resolvedValuesByMode": { "37:0": { "resolvedValue": 40, "alias": null } },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:1849:9684",
+      "name": "fontSpacing/font-letter-spacing-none",
+      "description": "",
+      "type": "FLOAT",
+      "valuesByMode": { "37:0": 0 },
+      "resolvedValuesByMode": { "37:0": { "resolvedValue": 0, "alias": null } },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:1970:8513",
+      "name": "colors/colors-neutral-900-a50",
+      "description": "",
+      "type": "COLOR",
+      "valuesByMode": {
+        "37:0": {
+          "r": 0.09803921729326248,
+          "g": 0.10980392247438431,
+          "b": 0.125490203499794,
+          "a": 0.5
+        }
+      },
+      "resolvedValuesByMode": {
+        "37:0": {
+          "resolvedValue": {
+            "r": 0.09803921729326248,
+            "g": 0.10980392247438431,
+            "b": 0.125490203499794,
+            "a": 0.5
+          },
+          "alias": null
+        }
+      },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:1970:8514",
+      "name": "colors/colors-neutral-900-a30",
+      "description": "",
+      "type": "COLOR",
+      "valuesByMode": {
+        "37:0": {
+          "r": 0.09803921729326248,
+          "g": 0.10980392247438431,
+          "b": 0.125490203499794,
+          "a": 0.30000001192092896
+        }
+      },
+      "resolvedValuesByMode": {
+        "37:0": {
+          "resolvedValue": {
+            "r": 0.09803921729326248,
+            "g": 0.10980392247438431,
+            "b": 0.125490203499794,
+            "a": 0.30000001192092896
+          },
+          "alias": null
+        }
+      },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:1970:8515",
+      "name": "colors/colors-neutral-900-a20",
+      "description": "",
+      "type": "COLOR",
+      "valuesByMode": {
+        "37:0": {
+          "r": 0.09803921729326248,
+          "g": 0.10980392247438431,
+          "b": 0.125490203499794,
+          "a": 0.20000000298023224
+        }
+      },
+      "resolvedValuesByMode": {
+        "37:0": {
+          "resolvedValue": {
+            "r": 0.09803921729326248,
+            "g": 0.10980392247438431,
+            "b": 0.125490203499794,
+            "a": 0.20000000298023224
+          },
+          "alias": null
+        }
+      },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:1970:8516",
+      "name": "colors/colors-neutral-900-a10",
+      "description": "",
+      "type": "COLOR",
+      "valuesByMode": {
+        "37:0": {
+          "r": 0.09803921729326248,
+          "g": 0.10980392247438431,
+          "b": 0.125490203499794,
+          "a": 0.10000000149011612
+        }
+      },
+      "resolvedValuesByMode": {
+        "37:0": {
+          "resolvedValue": {
+            "r": 0.09803921729326248,
+            "g": 0.10980392247438431,
+            "b": 0.125490203499794,
+            "a": 0.10000000149011612
+          },
+          "alias": null
+        }
+      },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:1970:8517",
+      "name": "colors/colors-neutral-900-a5",
+      "description": "",
+      "type": "COLOR",
+      "valuesByMode": {
+        "37:0": {
+          "r": 0.09803921729326248,
+          "g": 0.10980392247438431,
+          "b": 0.125490203499794,
+          "a": 0.05000000074505806
+        }
+      },
+      "resolvedValuesByMode": {
+        "37:0": {
+          "resolvedValue": {
+            "r": 0.09803921729326248,
+            "g": 0.10980392247438431,
+            "b": 0.125490203499794,
+            "a": 0.05000000074505806
+          },
+          "alias": null
+        }
+      },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:1970:8518",
+      "name": "colors/colors-neutral-0-a80",
+      "description": "",
+      "type": "COLOR",
+      "valuesByMode": { "37:0": { "r": 1, "g": 1, "b": 1, "a": 0.800000011920929 } },
+      "resolvedValuesByMode": {
+        "37:0": {
+          "resolvedValue": { "r": 1, "g": 1, "b": 1, "a": 0.800000011920929 },
+          "alias": null
+        }
+      },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:1970:8519",
+      "name": "colors/colors-neutral-0-a70",
+      "description": "",
+      "type": "COLOR",
+      "valuesByMode": { "37:0": { "r": 1, "g": 1, "b": 1, "a": 0.699999988079071 } },
+      "resolvedValuesByMode": {
+        "37:0": {
+          "resolvedValue": { "r": 1, "g": 1, "b": 1, "a": 0.699999988079071 },
+          "alias": null
+        }
+      },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:1970:8520",
+      "name": "colors/colors-neutral-0-a50",
+      "description": "",
+      "type": "COLOR",
+      "valuesByMode": { "37:0": { "r": 1, "g": 1, "b": 1, "a": 0.5 } },
+      "resolvedValuesByMode": {
+        "37:0": { "resolvedValue": { "r": 1, "g": 1, "b": 1, "a": 0.5 }, "alias": null }
+      },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:1970:8521",
+      "name": "colors/colors-neutral-0-a30",
+      "description": "",
+      "type": "COLOR",
+      "valuesByMode": { "37:0": { "r": 1, "g": 1, "b": 1, "a": 0.30000001192092896 } },
+      "resolvedValuesByMode": {
+        "37:0": {
+          "resolvedValue": { "r": 1, "g": 1, "b": 1, "a": 0.30000001192092896 },
+          "alias": null
+        }
+      },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:1970:8522",
+      "name": "colors/colors-neutral-0-a20",
+      "description": "",
+      "type": "COLOR",
+      "valuesByMode": { "37:0": { "r": 1, "g": 1, "b": 1, "a": 0.20000000298023224 } },
+      "resolvedValuesByMode": {
+        "37:0": {
+          "resolvedValue": { "r": 1, "g": 1, "b": 1, "a": 0.20000000298023224 },
+          "alias": null
+        }
+      },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:1970:8523",
+      "name": "colors/colors-neutral-0-a10",
+      "description": "",
+      "type": "COLOR",
+      "valuesByMode": { "37:0": { "r": 1, "g": 1, "b": 1, "a": 0.10000000149011612 } },
+      "resolvedValuesByMode": {
+        "37:0": {
+          "resolvedValue": { "r": 1, "g": 1, "b": 1, "a": 0.10000000149011612 },
+          "alias": null
+        }
+      },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:1970:8524",
+      "name": "colors/colors-neutral-0-a5",
+      "description": "",
+      "type": "COLOR",
+      "valuesByMode": { "37:0": { "r": 1, "g": 1, "b": 1, "a": 0.05000000074505806 } },
+      "resolvedValuesByMode": {
+        "37:0": {
+          "resolvedValue": { "r": 1, "g": 1, "b": 1, "a": 0.05000000074505806 },
+          "alias": null
+        }
+      },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:2110:16027",
+      "name": "radius/dimensions-border-radius-6",
+      "description": "",
+      "type": "FLOAT",
+      "valuesByMode": { "37:0": 6 },
+      "resolvedValuesByMode": { "37:0": { "resolvedValue": 6, "alias": null } },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:2629:7632",
+      "name": "colors/colors-neutral-0-a40",
+      "description": "",
+      "type": "COLOR",
+      "valuesByMode": { "37:0": { "r": 1, "g": 1, "b": 1, "a": 0.4000000059604645 } },
+      "resolvedValuesByMode": {
+        "37:0": {
+          "resolvedValue": { "r": 1, "g": 1, "b": 1, "a": 0.4000000059604645 },
+          "alias": null
+        }
+      },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    },
+    {
+      "id": "VariableID:2665:9917",
+      "name": "colors/colors-neutral-0-a95",
+      "description": "",
+      "type": "COLOR",
+      "valuesByMode": { "37:0": { "r": 1, "g": 1, "b": 1, "a": 0.949999988079071 } },
+      "resolvedValuesByMode": {
+        "37:0": {
+          "resolvedValue": { "r": 1, "g": 1, "b": 1, "a": 0.949999988079071 },
+          "alias": null
+        }
+      },
+      "scopes": ["ALL_SCOPES"],
+      "hiddenFromPublishing": false,
+      "codeSyntax": {}
+    }
+  ]
+}
diff --git a/packages/admin-ui/scripts/importFromFigma/figmaRgbaToHsla.js b/packages/admin-ui/scripts/importFromFigma/figmaRgbaToHsla.js
new file mode 100644
index 00000000000..d6ab4b73331
--- /dev/null
+++ b/packages/admin-ui/scripts/importFromFigma/figmaRgbaToHsla.js
@@ -0,0 +1,53 @@
+function rgbToHsl(r, g, b) {
+    // Convert RGB values (0-255 range) to the range of 0-1
+    r /= 255;
+    g /= 255;
+    b /= 255;
+
+    const maxVal = Math.max(r, g, b);
+    const minVal = Math.min(r, g, b);
+    const delta = maxVal - minVal;
+
+    let h = 0,
+        s = 0,
+        l = (maxVal + minVal) / 2;
+
+    if (delta !== 0) {
+        s = delta / (1 - Math.abs(2 * l - 1));
+
+        if (maxVal === r) {
+            h = ((g - b) / delta) % 6;
+        } else if (maxVal === g) {
+            h = (b - r) / delta + 2;
+        } else {
+            h = (r - g) / delta + 4;
+        }
+
+        h = Math.round(h * 60); // Convert to degrees
+        if (h < 0) {
+            h += 360;
+        }
+    }
+
+    s = +(s * 100).toFixed(1);
+    l = +(l * 100).toFixed(1);
+
+    return { h, s, l };
+}
+
+function figmaRgbaToHsla(figmaColor) {
+    const { r, g, b, a } = figmaColor;
+
+    // Convert normalized RGBA to standard RGB (0-255)
+    const red = Math.round(r * 255);
+    const green = Math.round(g * 255);
+    const blue = Math.round(b * 255);
+
+    // Get the HSL values
+    const { h, s, l } = rgbToHsl(red, green, blue);
+
+    // Return the HSLA value
+    return { h, s, l, a };
+}
+
+module.exports = { figmaRgbaToHsla };
diff --git a/packages/admin-ui/scripts/importFromFigma/formatCode.js b/packages/admin-ui/scripts/importFromFigma/formatCode.js
new file mode 100644
index 00000000000..3b851aaf12c
--- /dev/null
+++ b/packages/admin-ui/scripts/importFromFigma/formatCode.js
@@ -0,0 +1,14 @@
+const fs = require("fs");
+const prettier = require("prettier");
+
+const formatCode = async filePath => {
+    const options = await prettier.resolveConfig(filePath);
+    const fileContentRaw = fs.readFileSync(filePath).toString("utf8");
+    const fileContentFormatted = prettier.format(fileContentRaw, {
+        ...options,
+        filepath: filePath
+    });
+    fs.writeFileSync(filePath, fileContentFormatted);
+};
+
+module.exports = { formatCode };
diff --git a/packages/admin-ui/scripts/importFromFigma/normalizeFigmaExport.js b/packages/admin-ui/scripts/importFromFigma/normalizeFigmaExport.js
new file mode 100644
index 00000000000..546b3240269
--- /dev/null
+++ b/packages/admin-ui/scripts/importFromFigma/normalizeFigmaExport.js
@@ -0,0 +1,71 @@
+const aliasTokensExport = require("./exports/Alias tokens.json");
+const { figmaRgbaToHsla } = require("./figmaRgbaToHsla");
+
+const VARIABLE_TYPES = [
+    "backgroundColor",
+    "borderColor",
+    "borderRadius",
+    "borderWidth",
+    "fill",
+    "margin",
+    "padding",
+    "ringColor",
+    "ringWidth",
+    "shadow",
+    "spacing",
+    "textColor",
+    "textFont"
+];
+
+const IGNORED_VARIABLE_TYPES = ["dimension", "textLetterspacing"];
+
+const isIgnoredVariableType = variableName => {
+    for (const type of IGNORED_VARIABLE_TYPES) {
+        if (variableName.startsWith(type + "/")) {
+            return true;
+        }
+    }
+
+    return false;
+};
+
+const getVariableType = variableName => {
+    for (const type of VARIABLE_TYPES) {
+        if (variableName.startsWith(type + "/")) {
+            return type;
+        }
+    }
+
+    throw new Error(`Unknown variable type for variable "${variableName}".`);
+};
+
+const normalizeFigmaExport = () => {
+    return aliasTokensExport.variables
+        .map(variable => {
+            const { aliasName, resolvedValue } = variable.resolvedValuesByMode["37:2"];
+
+            const [, variantName] = variable.name.match(/[a-zA-Z]*?\/[a-zA-Z]*?-(.*)/);
+
+            if (isIgnoredVariableType(variable.name)) {
+                return null;
+            }
+
+            const type = getVariableType(variable.name);
+
+            return {
+                type,
+                name: variable.name,
+                aliasName,
+                hsla: figmaRgbaToHsla(resolvedValue),
+                variantName,
+                resolvedValue
+            };
+        })
+        .filter(Boolean)
+        .sort((variable1, variable2) => {
+            // Order by variable.name, from A to Z.
+            return variable1.name.localeCompare(variable2.name);
+        });
+};
+
+module.exports = { normalizeFigmaExport };
diff --git a/packages/admin-ui/scripts/importFromFigma/normalizePrimitivesFigmaExport.js b/packages/admin-ui/scripts/importFromFigma/normalizePrimitivesFigmaExport.js
new file mode 100644
index 00000000000..d7e6804d8cb
--- /dev/null
+++ b/packages/admin-ui/scripts/importFromFigma/normalizePrimitivesFigmaExport.js
@@ -0,0 +1,64 @@
+const primitiveTokensExport = require("./exports/Primitives.json");
+const { figmaRgbaToHsla } = require("./figmaRgbaToHsla");
+
+const INCLUDED_VARIABLE_TYPES = ["colors"];
+
+// We don't need tokens that end with `-a{one or two numbers}` because they are used for
+// alpha colors. We don't need these because we can use the /alpha function in Tailwind CSS.
+const isColorWithAlpha = variantName => {
+    return variantName.match(/^.*-a\d{1,2}$/);
+};
+
+const isIncludedVariableType = variableName => {
+    for (const type of INCLUDED_VARIABLE_TYPES) {
+        if (variableName.startsWith(type + "/")) {
+            return true;
+        }
+    }
+
+    return false;
+};
+
+const getVariableType = variableName => {
+    for (const type of INCLUDED_VARIABLE_TYPES) {
+        if (variableName.startsWith(type + "/")) {
+            return type;
+        }
+    }
+
+    throw new Error(`Unknown variable type for variable "${variableName}".`);
+};
+
+const normalizePrimitivesFigmaExport = () => {
+    return primitiveTokensExport.variables
+        .map(variable => {
+            const resolvedValue = variable.valuesByMode["37:0"];
+
+            const [, variantName] = variable.name.match(/[a-zA-Z]*?\/[a-zA-Z]*?-(.*)/);
+
+            if (!isIncludedVariableType(variable.name)) {
+                return null;
+            }
+
+            const type = getVariableType(variable.name);
+
+            if (isColorWithAlpha(variantName)) {
+                return null;
+            }
+
+            return {
+                type,
+                name: variable.name,
+                hsla: figmaRgbaToHsla(resolvedValue),
+                variantName,
+                resolvedValue
+            };
+        })
+        .filter(Boolean)
+        .sort((variable1, variable2) => {
+            // Order by variable.name, from A to Z.
+            return variable1.name.localeCompare(variable2.name);
+        });
+};
+
+module.exports = { normalizePrimitivesFigmaExport };
diff --git a/packages/admin-ui/scripts/importFromFigma/templates/theme.scss.txt b/packages/admin-ui/scripts/importFromFigma/templates/theme.scss.txt
new file mode 100644
index 00000000000..27c24265b54
--- /dev/null
+++ b/packages/admin-ui/scripts/importFromFigma/templates/theme.scss.txt
@@ -0,0 +1,79 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap");
+
+@layer base {
+  :root {
+    // Colors.
+    {COLORS}
+
+    // Background colors.
+    {BACKGROUND_COLOR}
+
+    // Border color.
+    {BORDER_COLOR}
+
+    // Border radius.
+    {BORDER_RADIUS}
+
+    // Border width.
+    {BORDER_WIDTH}
+
+    // Fill.
+    {FILL}
+
+    // Font.
+    {FONT}
+
+    // Font weight.
+    {FONT_WEIGHT}
+
+    // Margin.
+    {MARGIN}
+
+    // Padding.
+    {PADDING}
+
+    // Ring color.
+    {RING_COLOR}
+
+    // Ring width.
+    {RING_WIDTH}
+
+    // Shadow.
+    {SHADOW}
+
+    // Spacing.
+    {SPACING}
+
+    // Text color.
+    {TEXT_COLOR}
+
+    // Text size.
+    {TEXT_SIZE}
+  }
+}
+
+@layer base {
+  body {
+    // Styles all text that was not rendered via the Text component.
+    @apply wby-font-sans wby-antialiased wby-text-md wby-text-neutral-primary;
+  }
+
+  a {
+    // Styles all links that were not rendered via the Link component.
+    @apply wby-text-accent-primary hover:wby-underline focus-visible:wby-outline-none focus-visible:wby-ring-lg focus-visible:wby-ring-primary-dimmed wby-rounded-xs;
+  }
+
+    b,
+    strong {
+      @apply wby-font-semibold;
+    }
+
+    i,
+    em {
+      @apply wby-italic;
+    }
+}
diff --git a/packages/admin-ui/src/Accordion/Accordion.mdx b/packages/admin-ui/src/Accordion/Accordion.mdx
new file mode 100644
index 00000000000..9b9ad507d38
--- /dev/null
+++ b/packages/admin-ui/src/Accordion/Accordion.mdx
@@ -0,0 +1,509 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+
+import * as AccordionStories from './Accordion.stories';
+
+<Meta of={AccordionStories} />
+
+# Accordion
+
+The Accordion component is a vertically stacked set of interactive headings that each reveal an associated section of content. It allows users to show and hide sections of related content on a page, helping to reduce page length and organize complex content.
+
+## Usage
+
+<Canvas of={AccordionStories.Documentation} source={ { code: `
+import React from "react";
+import { Accordion } from "@webiny/admin-ui";
+import { ReactComponent as WarningIcon } from "@webiny/icons/insert_chart.svg";
+import { ReactComponent as EditIcon } from "@webiny/icons/edit.svg";
+import { ReactComponent as TrashIcon } from "@webiny/icons/delete.svg";
+
+const AccordionExample = () => {
+    return (
+        <Accordion variant="underline" background="base">
+            <Accordion.Item
+                title="Accordion Item 1"
+                description="This is a description for the first item"
+                icon={<Accordion.Item.Icon icon={<WarningIcon />} label={"Warning icon"} />}
+                actions={
+                    <>
+                        <Accordion.Item.Action icon={<EditIcon />} />
+                        <Accordion.Item.Action icon={<TrashIcon />} />
+                    </>
+                }
+            >
+                This is the content for the first accordion item. It can contain any React elements.
+            </Accordion.Item>
+
+            <Accordion.Item
+                title="Accordion Item 2"
+                description="This is a description for the second item"
+                defaultOpen={true}
+            >
+                This is the content for the second accordion item. It&apos;s open by default.
+            </Accordion.Item>
+
+            <Accordion.Item
+                title="Disabled Item"
+                description="This item cannot be interacted with"
+                disabled={true}
+            >
+                This content won&apos;t be visible because the item is disabled.
+            </Accordion.Item>
+        </Accordion>
+    );
+};
+
+export default AccordionExample;
+
+` } }
+        additionalActions={[
+            {
+                title: 'Open in GitHub',
+                onClick: () => {
+                    window.open(
+                        'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Accordion/Accordion.tsx',
+                        '_blank'
+                    );
+                },
+            }
+        ]}
+/>
+
+<Controls of={AccordionStories.Documentation} />
+
+```tsx
+import React from "react";
+import { Accordion } from "@webiny/admin-ui";
+import { ReactComponent as WarningIcon } from "@webiny/icons/insert_chart.svg";
+import { ReactComponent as EditIcon } from "@webiny/icons/edit.svg";
+import { ReactComponent as TrashIcon } from "@webiny/icons/delete.svg";
+
+const AccordionExample = () => {
+    return (
+        <Accordion variant="underline" background="base">
+            <Accordion.Item
+                title="Accordion Item 1"
+                description="This is a description for the first item"
+                icon={<Accordion.Item.Icon icon={<WarningIcon />} label={"Warning icon"} />}
+                actions={
+                    <>
+                        <Accordion.Item.Action icon={<EditIcon />} />
+                        <Accordion.Item.Action icon={<TrashIcon />} />
+                    </>
+                }
+            >
+                This is the content for the first accordion item. It can contain any React elements.
+            </Accordion.Item>
+
+            <Accordion.Item
+                title="Accordion Item 2"
+                description="This is a description for the second item"
+                defaultOpen={true}
+            >
+                This is the content for the second accordion item. It&apos;s open by default.
+            </Accordion.Item>
+
+            <Accordion.Item
+                title="Disabled Item"
+                description="This item cannot be interacted with"
+                disabled={true}
+            >
+                This content won&apos;t be visible because the item is disabled.
+            </Accordion.Item>
+        </Accordion>
+    );
+};
+
+export default AccordionExample;
+```
+
+## Examples
+
+### Default
+
+<Canvas of={AccordionStories.Default} source={ { code: `
+import React from "react";
+import { Accordion } from "@webiny/admin-ui";
+
+const DefaultAccordionExample = () => {
+    return (
+        <Accordion>
+            <Accordion.Item title="Accordion item 1">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet
+                convallis nec, consequat non nulla. Nunc sit amet sagittis tellus. Etiam venenatis, odio
+                sed consectetur consectetur, quam quam blandit ante, semper maximus lorem est vel dolor.
+            </Accordion.Item>
+            <Accordion.Item title="Accordion item 2">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet
+                convallis nec, consequat non nulla. Nunc sit amet sagittis tellus. Etiam venenatis, odio
+                sed consectetur consectetur, quam quam blandit ante, semper maximus lorem est vel dolor.
+            </Accordion.Item>
+            <Accordion.Item title="Accordion item 3">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet
+                convallis nec, consequat non nulla. Nunc sit amet sagittis tellus. Etiam venenatis, odio
+                sed consectetur consectetur, quam quam blandit ante, semper maximus lorem est vel dolor.
+            </Accordion.Item>
+        </Accordion>
+    );
+};
+
+export default DefaultAccordionExample;
+` } } />
+
+### With Descriptions
+
+<Canvas of={AccordionStories.WithDescriptions} source={ { code: `
+import React from "react";
+import { Accordion } from "@webiny/admin-ui";
+
+const WithDescriptionsExample = () => {
+    return (
+        <Accordion>
+            <Accordion.Item
+                title="Accordion item 1"
+                description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+            >
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet
+                convallis nec, consequat non nulla. Nunc sit amet sagittis tellus.
+            </Accordion.Item>
+            <Accordion.Item
+                title="Accordion item 2"
+                description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+            >
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet
+                convallis nec, consequat non nulla. Nunc sit amet sagittis tellus.
+            </Accordion.Item>
+            <Accordion.Item
+                title="Accordion item 3"
+                description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+            >
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet
+                convallis nec, consequat non nulla. Nunc sit amet sagittis tellus.
+            </Accordion.Item>
+        </Accordion>
+    );
+};
+
+export default WithDescriptionsExample;
+` } } />
+
+### With Icon
+
+<Canvas of={AccordionStories.WithIcon} source={ { code: `
+import React from "react";
+import { Accordion } from "@webiny/admin-ui";
+import { ReactComponent as WarningIcon } from "@webiny/icons/insert_chart.svg";
+
+const WithIconExample = () => {
+    return (
+        <Accordion>
+            <Accordion.Item
+                title="Accordion item 1"
+                description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                icon={<Accordion.Item.Icon icon={<WarningIcon />} label={"Warning icon"} />}
+            >
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet
+                convallis nec, consequat non nulla. Nunc sit amet sagittis tellus.
+            </Accordion.Item>
+            <Accordion.Item
+                title="Accordion item 2"
+                description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                icon={<Accordion.Item.Icon icon={<WarningIcon />} label={"Warning icon"} />}
+            >
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet
+                convallis nec, consequat non nulla. Nunc sit amet sagittis tellus.
+            </Accordion.Item>
+        </Accordion>
+    );
+};
+
+export default WithIconExample;
+` } } />
+
+### With Actions
+
+<Canvas of={AccordionStories.WithActionsIcon} source={ { code: `
+import React from "react";
+import { Accordion } from "@webiny/admin-ui";
+import { ReactComponent as WarningIcon } from "@webiny/icons/insert_chart.svg";
+import { ReactComponent as ArrowUp } from "@webiny/icons/arrow_upward.svg";
+import { ReactComponent as ArrowDown } from "@webiny/icons/arrow_downward.svg";
+import { ReactComponent as EditIcon } from "@webiny/icons/edit.svg";
+import { ReactComponent as TrashIcon } from "@webiny/icons/delete.svg";
+
+const WithActionsExample = () => {
+    return (
+        <Accordion>
+            <Accordion.Item
+                title="Accordion item 1"
+                description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                icon={<Accordion.Item.Icon icon={<WarningIcon />} label={"Warning icon"} />}
+                actions={
+                    <>
+                        <Accordion.Item.Action icon={<ArrowUp />} />
+                        <Accordion.Item.Action icon={<ArrowDown />} />
+                        <Accordion.Item.Action.Separator />
+                        <Accordion.Item.Action icon={<EditIcon />} />
+                        <Accordion.Item.Action icon={<TrashIcon />} />
+                    </>
+                }
+            >
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet
+                convallis nec, consequat non nulla. Nunc sit amet sagittis tellus.
+            </Accordion.Item>
+            <Accordion.Item
+                title="Accordion item 2"
+                description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                icon={<Accordion.Item.Icon icon={<WarningIcon />} label={"Warning icon"} />}
+                actions={
+                    <>
+                        <Accordion.Item.Action icon={<ArrowUp />} />
+                        <Accordion.Item.Action icon={<ArrowDown />} />
+                        <Accordion.Item.Action.Separator />
+                        <Accordion.Item.Action icon={<EditIcon />} />
+                        <Accordion.Item.Action icon={<TrashIcon />} />
+                    </>
+                }
+            >
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet
+                convallis nec, consequat non nulla. Nunc sit amet sagittis tellus.
+            </Accordion.Item>
+        </Accordion>
+    );
+};
+
+export default WithActionsExample;
+` } } />
+
+### With Handle
+
+<Canvas of={AccordionStories.WithHandleIcon} source={ { code: `
+import React from "react";
+import { Accordion } from "@webiny/admin-ui";
+import { ReactComponent as WarningIcon } from "@webiny/icons/insert_chart.svg";
+
+const WithHandleExample = () => {
+    return (
+        <Accordion>
+            <Accordion.Item
+                title="Accordion item 1"
+                description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                icon={<Accordion.Item.Icon icon={<WarningIcon />} label={"Warning icon"} />}
+                handle={<Accordion.Item.Handle />}
+            >
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet
+                convallis nec, consequat non nulla. Nunc sit amet sagittis tellus.
+            </Accordion.Item>
+            <Accordion.Item
+                title="Accordion item 2"
+                description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                handle={<Accordion.Item.Handle />}
+            >
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet
+                convallis nec, consequat non nulla. Nunc sit amet sagittis tellus.
+            </Accordion.Item>
+        </Accordion>
+    );
+};
+
+export default WithHandleExample;
+` } } />
+
+### Non-Interactive Item
+
+<Canvas of={AccordionStories.WithNotInteractiveItem} source={ { code: `
+import React from "react";
+import { Accordion } from "@webiny/admin-ui";
+
+const NonInteractiveExample = () => {
+    return (
+        <Accordion>
+            <Accordion.Item
+                title="Non-interactive item"
+                description="This item cannot be expanded or collapsed."
+                interactive={false}
+            >
+                This content won&apos;t be accessible because the item is not interactive.
+            </Accordion.Item>
+            <Accordion.Item title="Regular item">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet
+                convallis nec, consequat non nulla. Nunc sit amet sagittis tellus.
+            </Accordion.Item>
+            <Accordion.Item title="Another regular item">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet
+                convallis nec, consequat non nulla. Nunc sit amet sagittis tellus.
+            </Accordion.Item>
+        </Accordion>
+    );
+};
+
+export default NonInteractiveExample;
+` } } />
+
+### Default Open Item
+
+<Canvas of={AccordionStories.WithDefaultOpenedItem} source={ { code: `
+import React from "react";
+import { Accordion } from "@webiny/admin-ui";
+
+const DefaultOpenExample = () => {
+    return (
+        <Accordion>
+            <Accordion.Item
+                title="Regular item"
+                description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+            >
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet
+                convallis nec, consequat non nulla. Nunc sit amet sagittis tellus.
+            </Accordion.Item>
+            <Accordion.Item
+                title="Default open item"
+                description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                defaultOpen={true}
+            >
+                This item is open by default. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                Sed elit sem, pretium sit amet convallis nec, consequat non nulla.
+            </Accordion.Item>
+        </Accordion>
+    );
+};
+
+export default DefaultOpenExample;
+` } } />
+
+### Disabled Item
+
+<Canvas of={AccordionStories.WithDisabledItem} source={ { code: `
+import React from "react";
+import { Accordion } from "@webiny/admin-ui";
+
+const DisabledItemExample = () => {
+    return (
+        <Accordion>
+            <Accordion.Item
+                title="Regular item"
+                description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+            >
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet
+                convallis nec, consequat non nulla. Nunc sit amet sagittis tellus.
+            </Accordion.Item>
+            <Accordion.Item
+                title="Disabled item"
+                description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                disabled={true}
+            >
+                This content won&apos;t be accessible because the item is disabled.
+            </Accordion.Item>
+            <Accordion.Item
+                title="Disabled but open item"
+                description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                defaultOpen={true}
+                disabled={true}
+            >
+                This item is disabled but open by default. Users cannot toggle it.
+            </Accordion.Item>
+        </Accordion>
+    );
+};
+
+export default DisabledItemExample;
+` } } />
+
+### Container Variant
+
+<Canvas of={AccordionStories.ContainerVariant} source={ { code: `
+import React from "react";
+import { Accordion } from "@webiny/admin-ui";
+import { ReactComponent as WarningIcon } from "@webiny/icons/insert_chart.svg";
+
+const ContainerVariantExample = () => {
+    return (
+        <Accordion variant="container">
+            <Accordion.Item
+                title="Accordion item 1"
+                description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                icon={<Accordion.Item.Icon icon={<WarningIcon />} label={"Warning icon"} />}
+            >
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet
+                convallis nec, consequat non nulla. Nunc sit amet sagittis tellus.
+            </Accordion.Item>
+            <Accordion.Item
+                title="Accordion item 2"
+                description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                icon={<Accordion.Item.Icon icon={<WarningIcon />} label={"Warning icon"} />}
+            >
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet
+                convallis nec, consequat non nulla. Nunc sit amet sagittis tellus.
+            </Accordion.Item>
+        </Accordion>
+    );
+};
+
+export default ContainerVariantExample;
+` } } />
+
+### Light Background
+
+<Canvas of={AccordionStories.LightBackground} source={ { code: `
+import React from "react";
+import { Accordion } from "@webiny/admin-ui";
+import { ReactComponent as WarningIcon } from "@webiny/icons/insert_chart.svg";
+
+const LightBackgroundExample = () => {
+    return (
+        <Accordion background="light">
+            <Accordion.Item
+                title="Accordion item 1"
+                description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                icon={<Accordion.Item.Icon icon={<WarningIcon />} label={"Warning icon"} />}
+            >
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet
+                convallis nec, consequat non nulla. Nunc sit amet sagittis tellus.
+            </Accordion.Item>
+            <Accordion.Item
+                title="Accordion item 2"
+                description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                icon={<Accordion.Item.Icon icon={<WarningIcon />} label={"Warning icon"} />}
+            >
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet
+                convallis nec, consequat non nulla. Nunc sit amet sagittis tellus.
+            </Accordion.Item>
+        </Accordion>
+    );
+};
+
+export default LightBackgroundExample;
+` } } />
+
+### Container Variant with Light Background
+
+<Canvas of={AccordionStories.ContainerVariantWithLightBackground} source={ { code: `
+import React from "react";
+import { Accordion } from "@webiny/admin-ui";
+import { ReactComponent as WarningIcon } from "@webiny/icons/insert_chart.svg";
+
+const ContainerLightExample = () => {
+    return (
+        <Accordion variant="container" background="light">
+            <Accordion.Item
+                title="Accordion item 1"
+                description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                icon={<Accordion.Item.Icon icon={<WarningIcon />} label={"Warning icon"} />}
+            >
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet
+                convallis nec, consequat non nulla. Nunc sit amet sagittis tellus.
+            </Accordion.Item>
+            <Accordion.Item
+                title="Accordion item 2"
+                description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                icon={<Accordion.Item.Icon icon={<WarningIcon />} label={"Warning icon"} />}
+            >
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet
+                convallis nec, consequat non nulla. Nunc sit amet sagittis tellus.
+            </Accordion.Item>
+        </Accordion>
+    );
+};
+
+export default ContainerLightExample;
+` } } />
diff --git a/packages/admin-ui/src/Accordion/Accordion.stories.tsx b/packages/admin-ui/src/Accordion/Accordion.stories.tsx
new file mode 100644
index 00000000000..c45a0099de3
--- /dev/null
+++ b/packages/admin-ui/src/Accordion/Accordion.stories.tsx
@@ -0,0 +1,401 @@
+import React, { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Accordion, type AccordionItemProps as BaseAccordionItemProps } from "./Accordion";
+
+import { ReactComponent as WarningIcon } from "@webiny/icons/insert_chart.svg";
+import { ReactComponent as ArrowUp } from "@webiny/icons/arrow_upward.svg";
+import { ReactComponent as ArrowDown } from "@webiny/icons/arrow_downward.svg";
+import { ReactComponent as EditIcon } from "@webiny/icons/edit.svg";
+import { ReactComponent as TrashIcon } from "@webiny/icons/delete.svg";
+import { Button } from "~/Button";
+
+const meta: Meta<typeof Accordion> = {
+    title: "Components/Accordion",
+    component: Accordion,
+    argTypes: {},
+    decorators: [
+        Story => (
+            <div className="wby-w-[750px] wby-p-[50px] wby-min-h-[500px] wby-bg-[#f6f7f8]">
+                <Story />
+            </div>
+        )
+    ],
+    render: args => {
+        return <Accordion {...args} />;
+    }
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Accordion>;
+
+interface AccordionItemProps extends Omit<BaseAccordionItemProps, "value" | "title" | "children"> {
+    index: number;
+}
+
+const AccordionItem = (props: AccordionItemProps) => {
+    return (
+        <Accordion.Item title={`Accordion item ${props.index}`} {...props}>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet
+            convallis nec, consequat non nulla. Nunc sit amet sagittis tellus. Etiam venenatis, odio
+            sed consectetur consectetur, quam quam blandit ante, semper maximus lorem est vel dolor.
+            Praesent ac neque rutrum, elementum turpis et, vulputate enim. In ex lorem,
+        </Accordion.Item>
+    );
+};
+
+export const Default: Story = {
+    args: {
+        children: (
+            <>
+                <AccordionItem index={1} />
+                <AccordionItem index={2} />
+                <AccordionItem index={3} />
+            </>
+        )
+    }
+};
+
+export const WithDescriptions: Story = {
+    ...Default,
+    args: {
+        children: (
+            <>
+                <AccordionItem
+                    index={1}
+                    description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                />
+                <AccordionItem
+                    index={2}
+                    description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                />
+                <AccordionItem
+                    index={3}
+                    description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                />
+            </>
+        )
+    },
+    argTypes: {}
+};
+
+export const WithIcon: Story = {
+    ...Default,
+    args: {
+        children: (
+            <>
+                <AccordionItem
+                    index={1}
+                    description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                    icon={<Accordion.Item.Icon icon={<WarningIcon />} label={"Warning icon"} />}
+                />
+                <AccordionItem
+                    index={2}
+                    description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                    icon={<Accordion.Item.Icon icon={<WarningIcon />} label={"Warning icon"} />}
+                />
+            </>
+        )
+    }
+};
+
+export const WithActionsIcon: Story = {
+    ...Default,
+    args: {
+        children: (
+            <>
+                <AccordionItem
+                    index={1}
+                    description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                    icon={<Accordion.Item.Icon icon={<WarningIcon />} label={"Warning icon"} />}
+                    actions={
+                        <>
+                            <Accordion.Item.Action icon={<ArrowUp />} />
+                            <Accordion.Item.Action icon={<ArrowDown />} />
+                            <Accordion.Item.Action.Separator />
+                            <Accordion.Item.Action icon={<EditIcon />} />
+                            <Accordion.Item.Action icon={<TrashIcon />} />
+                        </>
+                    }
+                />
+                <AccordionItem
+                    index={2}
+                    description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                    icon={<Accordion.Item.Icon icon={<WarningIcon />} label={"Warning icon"} />}
+                    actions={
+                        <>
+                            <Accordion.Item.Action icon={<ArrowUp />} />
+                            <Accordion.Item.Action icon={<ArrowDown />} />
+                            <Accordion.Item.Action.Separator />
+                            <Accordion.Item.Action icon={<EditIcon />} />
+                            <Accordion.Item.Action icon={<TrashIcon />} />
+                        </>
+                    }
+                />
+            </>
+        )
+    }
+};
+
+export const WithHandleIcon: Story = {
+    ...Default,
+    args: {
+        children: (
+            <>
+                <AccordionItem
+                    index={1}
+                    description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                    icon={<Accordion.Item.Icon icon={<WarningIcon />} label={"Warning icon"} />}
+                    handle={<Accordion.Item.Handle />}
+                />
+                <AccordionItem
+                    index={2}
+                    description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                    handle={<Accordion.Item.Handle />}
+                />
+            </>
+        )
+    }
+};
+
+export const WithNotInteractiveItem: Story = {
+    ...Default,
+    args: {
+        children: (
+            <>
+                <AccordionItem index={1} description="Not interactive item." interactive={false} />
+                <AccordionItem index={2} />
+                <AccordionItem index={3} />
+            </>
+        )
+    }
+};
+
+export const WithDefaultOpenedItem: Story = {
+    ...Default,
+    args: {
+        children: (
+            <>
+                <AccordionItem
+                    index={1}
+                    description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                />
+                <AccordionItem
+                    index={2}
+                    description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                    defaultOpen={true}
+                />
+            </>
+        )
+    }
+};
+
+export const WithDisabledItem: Story = {
+    ...Default,
+    args: {
+        children: (
+            <>
+                <AccordionItem
+                    index={1}
+                    description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                />
+                <AccordionItem
+                    index={2}
+                    description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                    disabled={true}
+                />
+                <AccordionItem
+                    index={3}
+                    description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                    defaultOpen={true}
+                    disabled={true}
+                />
+            </>
+        )
+    }
+};
+
+export const WithControlledOpenedItem: Story = {
+    ...Default,
+    render: args => {
+        const [openFirstItem, setOpenFirstItem] = useState<boolean>();
+        const [openSecondItem, setOpenSecondItem] = useState<boolean>();
+        const [openThirdItem, setOpenThirdItem] = useState<boolean>();
+
+        return (
+            <>
+                <Accordion {...args}>
+                    <AccordionItem
+                        index={1}
+                        description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                        defaultOpen={openFirstItem}
+                    />
+                    <AccordionItem
+                        index={2}
+                        description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                        defaultOpen={openSecondItem}
+                    />
+                    <AccordionItem
+                        index={3}
+                        description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                        defaultOpen={openThirdItem}
+                    />
+                </Accordion>
+                <div className={"wby-flex wby-justify-center wby-mt-lg wby-gap-md"}>
+                    <Button
+                        onClick={() => setOpenFirstItem(!openFirstItem)}
+                        text={"Trigger First Item"}
+                    />
+                    <Button
+                        onClick={() => setOpenSecondItem(!openSecondItem)}
+                        text={"Trigger Second Item"}
+                    />
+                    <Button
+                        onClick={() => setOpenThirdItem(!openThirdItem)}
+                        text={"Trigger Third Item"}
+                    />
+                </div>
+            </>
+        );
+    }
+};
+
+export const ContainerVariant: Story = {
+    ...Default,
+    args: {
+        variant: "container",
+        children: (
+            <>
+                <AccordionItem
+                    index={1}
+                    description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                    icon={<Accordion.Item.Icon icon={<WarningIcon />} label={"Warning icon"} />}
+                />
+                <AccordionItem
+                    index={2}
+                    description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                    icon={<Accordion.Item.Icon icon={<WarningIcon />} label={"Warning icon"} />}
+                />
+            </>
+        )
+    }
+};
+
+export const LightBackground: Story = {
+    ...Default,
+    decorators: [
+        Story => (
+            <div className="wby-w-[750px] wby-p-[50px] wby-min-h-[500px]">
+                <Story />
+            </div>
+        )
+    ],
+    args: {
+        background: "light",
+        children: (
+            <>
+                <AccordionItem
+                    index={1}
+                    description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                    icon={<Accordion.Item.Icon icon={<WarningIcon />} label={"Warning icon"} />}
+                />
+                <AccordionItem
+                    index={2}
+                    description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                    icon={<Accordion.Item.Icon icon={<WarningIcon />} label={"Warning icon"} />}
+                />
+            </>
+        )
+    }
+};
+
+export const ContainerVariantWithLightBackground: Story = {
+    ...Default,
+    decorators: [
+        Story => (
+            <div className="wby-w-[750px] wby-p-[50px] wby-min-h-[500px]">
+                <Story />
+            </div>
+        )
+    ],
+    args: {
+        variant: "container",
+        background: "light",
+        children: (
+            <>
+                <AccordionItem
+                    index={1}
+                    description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                    icon={<Accordion.Item.Icon icon={<WarningIcon />} label={"Warning icon"} />}
+                />
+                <AccordionItem
+                    index={2}
+                    description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                    icon={<Accordion.Item.Icon icon={<WarningIcon />} label={"Warning icon"} />}
+                />
+            </>
+        )
+    }
+};
+
+// Add a Documentation story
+export const Documentation: Story = {
+    render: args => {
+        return <Accordion {...args} />;
+    },
+    args: {
+        variant: "underline",
+        background: "base",
+        children: (
+            <>
+                <Accordion.Item
+                    title="Accordion Item 1"
+                    description="This is a description for the first item"
+                    icon={<Accordion.Item.Icon icon={<WarningIcon />} label={"Warning icon"} />}
+                    actions={
+                        <>
+                            <Accordion.Item.Action icon={<EditIcon />} />
+                            <Accordion.Item.Action icon={<TrashIcon />} />
+                        </>
+                    }
+                >
+                    This is the content for the first accordion item. It can contain any React
+                    elements.
+                </Accordion.Item>
+
+                <Accordion.Item
+                    title="Accordion Item 2"
+                    description="This is a description for the second item"
+                    defaultOpen={true}
+                >
+                    This is the content for the second accordion item. It&apos;s open by default.
+                </Accordion.Item>
+
+                <Accordion.Item
+                    title="Disabled Item"
+                    description="This item cannot be interacted with"
+                    disabled={true}
+                >
+                    This content won&apos;t be visible because the item is disabled.
+                </Accordion.Item>
+            </>
+        )
+    },
+    argTypes: {
+        variant: {
+            control: "select",
+            options: ["underline", "container"],
+            description: "The visual style of the accordion"
+        },
+        background: {
+            control: "select",
+            options: ["base", "light", "transparent"],
+            description: "The background color of the accordion"
+        },
+        children: {
+            description:
+                "The content of the accordion. Please refer to the example code for details.",
+            control: "none"
+        }
+    }
+};
diff --git a/packages/admin-ui/src/Accordion/Accordion.tsx b/packages/admin-ui/src/Accordion/Accordion.tsx
new file mode 100644
index 00000000000..e87b94b53e2
--- /dev/null
+++ b/packages/admin-ui/src/Accordion/Accordion.tsx
@@ -0,0 +1,43 @@
+import React from "react";
+import { makeDecoratable, withStaticProps, cva, type VariantProps, cn } from "~/utils";
+import { AccordionRoot } from "./components/AccordionRoot";
+import { AccordionItem, type AccordionItemProps } from "./components/AccordionItem";
+
+const accordionVariants = cva("wby-group wby-w-full", {
+    variants: {
+        variant: {
+            container: "wby-accordion-variant-container wby-gap-xs wby-flex wby-flex-col",
+            underline: "wby-accordion-variant-underline "
+        },
+        background: {
+            base: "wby-accordion-background-base",
+            light: "wby-accordion-background-light",
+            transparent: "wby-accordion-background-transparent"
+        }
+    },
+    defaultVariants: {
+        variant: "underline",
+        background: "base"
+    }
+});
+
+type AccordionProps = React.ComponentPropsWithoutRef<typeof AccordionRoot> &
+    VariantProps<typeof accordionVariants> & {
+        children: React.ReactNode;
+    };
+
+const AccordionBase = ({ children, variant, background, className, ...props }: AccordionProps) => {
+    return (
+        <div {...props} className={cn(accordionVariants({ variant, background }), className)}>
+            {children}
+        </div>
+    );
+};
+
+const DecoratableAccordion = makeDecoratable("Accordion", AccordionBase);
+
+const Accordion = withStaticProps(DecoratableAccordion, {
+    Item: AccordionItem
+});
+
+export { Accordion, type AccordionProps, type AccordionItemProps };
diff --git a/packages/admin-ui/src/Accordion/components/AccordionContent.tsx b/packages/admin-ui/src/Accordion/components/AccordionContent.tsx
new file mode 100644
index 00000000000..a8ce2077c2c
--- /dev/null
+++ b/packages/admin-ui/src/Accordion/components/AccordionContent.tsx
@@ -0,0 +1,49 @@
+import * as React from "react";
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+import { cva, type VariantProps, cn } from "~/utils";
+
+const accordionContentVariants = cva(
+    [
+        "wby-overflow-hidden wby-text-md",
+        "wby-transition-all data-[state=closed]:wby-animate-collapsible-up data-[state=open]:wby-animate-collapsible-down"
+    ],
+    {
+        // Using pixel values here because of non-existing design tokens.
+        variants: {
+            withIcon: {
+                true: "wby-pl-9"
+            },
+            withHandle: {
+                true: "wby-pl-5"
+            }
+        },
+        compoundVariants: [
+            {
+                withIcon: true,
+                withHandle: true,
+                className: "wby-pl-14"
+            }
+        ],
+        defaultVariants: {
+            withIcon: false,
+            withHandle: false
+        }
+    }
+);
+
+export interface AccordionContentProps
+    extends React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Content>,
+        VariantProps<typeof accordionContentVariants> {}
+
+const AccordionContent = ({ children, withIcon, withHandle, ...props }: AccordionContentProps) => {
+    return (
+        <CollapsiblePrimitive.Content
+            {...props}
+            className={cn(accordionContentVariants({ withHandle, withIcon }), props.className)}
+        >
+            <div className={"wby-pt-sm wby-pb-lg wby-pl-md wby-pr-[52px]"}>{children}</div>
+        </CollapsiblePrimitive.Content>
+    );
+};
+
+export { AccordionContent };
diff --git a/packages/admin-ui/src/Accordion/components/AccordionItem.tsx b/packages/admin-ui/src/Accordion/components/AccordionItem.tsx
new file mode 100644
index 00000000000..c0e3516c6ef
--- /dev/null
+++ b/packages/admin-ui/src/Accordion/components/AccordionItem.tsx
@@ -0,0 +1,82 @@
+import * as React from "react";
+import { cn, makeDecoratable, withStaticProps } from "~/utils";
+import { AccordionTrigger } from "./AccordionTrigger";
+import { AccordionContent } from "./AccordionContent";
+import { AccordionItemIcon } from "./AccordionItemIcon";
+import { AccordionItemAction } from "./AccordionItemAction";
+import { AccordionItemHandle } from "./AccordionItemHandle";
+import { AccordionRoot, type AccordionRootProps } from "~/Accordion/components/AccordionRoot";
+
+interface AccordionItemProps extends Omit<AccordionRootProps, "title"> {
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    icon?: React.ReactNode;
+    handle?: React.ReactNode;
+    interactive?: boolean;
+    actions?: React.ReactNode;
+    children: React.ReactNode;
+}
+
+const AccordionItemBase = (props: AccordionItemProps) => {
+    const { itemProps, triggerProps, contentProps } = React.useMemo(() => {
+        const {
+            // Item props.
+            className,
+            defaultOpen,
+            disabled,
+            interactive,
+            onOpenChange,
+            open,
+
+            // Content props.
+            children,
+
+            // Trigger props.
+            ...triggerProps
+        } = props;
+
+        return {
+            itemProps: {
+                className,
+                defaultOpen,
+                disabled,
+                onOpenChange,
+                open
+            },
+            triggerProps: {
+                ...triggerProps,
+                interactive
+            },
+            contentProps: { children, withIcon: !!props.icon, withHandle: !!props.handle }
+        };
+    }, [props]);
+
+    return (
+        <AccordionRoot
+            {...itemProps}
+            className={cn(
+                [
+                    "wby-border-b-sm wby-border-b-neutral-dimmed data-[state=open]:wby-rounded-bl-lg data-[state=open]:wby-rounded-br-lg",
+                    "group-[.wby-accordion-variant-container]:wby-rounded-lg",
+                    "group-[.wby-accordion-background-base]:wby-bg-neutral-base",
+                    "group-[.wby-accordion-background-light]:wby-bg-neutral-light",
+                    "data-[disabled]:wby-pointer-events-none data-[disabled]:wby-opacity-50"
+                ],
+                itemProps.className
+            )}
+        >
+            <AccordionTrigger {...triggerProps} />
+            <AccordionContent {...contentProps} />
+        </AccordionRoot>
+    );
+};
+
+const DecoratableAccordionItem = makeDecoratable("AccordionItem", AccordionItemBase);
+
+const AccordionItem = withStaticProps(DecoratableAccordionItem, {
+    Icon: AccordionItemIcon,
+    Action: AccordionItemAction,
+    Handle: AccordionItemHandle
+});
+
+export { AccordionItem, type AccordionItemProps };
diff --git a/packages/admin-ui/src/Accordion/components/AccordionItemAction.tsx b/packages/admin-ui/src/Accordion/components/AccordionItemAction.tsx
new file mode 100644
index 00000000000..65c32315478
--- /dev/null
+++ b/packages/admin-ui/src/Accordion/components/AccordionItemAction.tsx
@@ -0,0 +1,33 @@
+import * as React from "react";
+import { makeDecoratable, withStaticProps } from "~/utils";
+import { IconButton, IconButtonProps as IconButtonProps } from "~/Button";
+import { AccordionItemSeparator } from "./AccordionItemSeparator";
+
+type AccordionItemActionProps = IconButtonProps;
+
+const AccordionItemActionBase = ({ onClick, ...props }: AccordionItemActionProps) => {
+    // We need to stop the event propagation to prevent the accordion from opening/closing when the action is clicked.
+    const onClickCallback = React.useCallback(
+        (e: React.MouseEvent<HTMLButtonElement>) => {
+            e.stopPropagation();
+
+            if (onClick) {
+                onClick(e);
+            }
+        },
+        [onClick]
+    );
+
+    return <IconButton variant={"ghost"} size={"sm"} {...props} onClick={onClickCallback} />;
+};
+
+const DecoratableAccordionItemAction = makeDecoratable(
+    "AccordionItemAction",
+    AccordionItemActionBase
+);
+
+const AccordionItemAction = withStaticProps(DecoratableAccordionItemAction, {
+    Separator: AccordionItemSeparator
+});
+
+export { AccordionItemAction, type AccordionItemActionProps };
diff --git a/packages/admin-ui/src/Accordion/components/AccordionItemHandle.tsx b/packages/admin-ui/src/Accordion/components/AccordionItemHandle.tsx
new file mode 100644
index 00000000000..f5d9f99e5ff
--- /dev/null
+++ b/packages/admin-ui/src/Accordion/components/AccordionItemHandle.tsx
@@ -0,0 +1,39 @@
+import * as React from "react";
+import { ReactComponent as DragHandleIcon } from "@webiny/icons/drag_indicator.svg";
+import { makeDecoratable } from "~/utils";
+import { Icon, IconProps as IconProps } from "~/Icon";
+
+interface AccordionItemHandleProps extends Omit<IconProps, "icon" | "label"> {
+    icon?: React.ReactElement;
+    label?: string;
+}
+
+const AccordionItemHandleBase = ({ onClick, ...props }: AccordionItemHandleProps) => {
+    // We need to stop the event propagation to prevent the accordion from opening/closing when the handle is clicked.
+    const onClickCallback = React.useCallback(
+        (e: React.MouseEvent<HTMLButtonElement>) => {
+            e.stopPropagation();
+
+            if (onClick) {
+                onClick(e);
+            }
+        },
+        [onClick]
+    );
+
+    return (
+        <Icon
+            size={"md"}
+            color={"neutral-light"}
+            className={"wby-mx-xxs wby-cursor-grab"}
+            icon={<DragHandleIcon />}
+            label={"Drag handle"}
+            {...props}
+            onClick={onClickCallback}
+        />
+    );
+};
+
+const AccordionItemHandle = makeDecoratable("AccordionItemHandle", AccordionItemHandleBase);
+
+export { AccordionItemHandle, type AccordionItemHandleProps };
diff --git a/packages/admin-ui/src/Accordion/components/AccordionItemIcon.tsx b/packages/admin-ui/src/Accordion/components/AccordionItemIcon.tsx
new file mode 100644
index 00000000000..aa2b8b78044
--- /dev/null
+++ b/packages/admin-ui/src/Accordion/components/AccordionItemIcon.tsx
@@ -0,0 +1,11 @@
+import * as React from "react";
+import { makeDecoratable } from "~/utils";
+import { Icon as IconComponent, IconProps as IconComponentProps } from "~/Icon";
+
+type AccordionItemIconProps = IconComponentProps;
+
+const AccordionItemIconBase = (props: AccordionItemIconProps) => {
+    return <IconComponent size={"md"} color={"neutral-strong"} {...props} />;
+};
+
+export const AccordionItemIcon = makeDecoratable("AccordionItemIcon", AccordionItemIconBase);
diff --git a/packages/admin-ui/src/Accordion/components/AccordionItemSeparator.tsx b/packages/admin-ui/src/Accordion/components/AccordionItemSeparator.tsx
new file mode 100644
index 00000000000..d2df80dee16
--- /dev/null
+++ b/packages/admin-ui/src/Accordion/components/AccordionItemSeparator.tsx
@@ -0,0 +1,14 @@
+import * as React from "react";
+import { makeDecoratable } from "~/utils";
+import { Separator, type SeparatorProps } from "~/Separator";
+
+type AccordionItemSeparatorProps = SeparatorProps;
+
+const AccordionItemSeparatorBase = (props: AccordionItemSeparatorProps) => {
+    return <Separator orientation={"vertical"} className={"wby-h-lg wby-mx-sm-plus"} {...props} />;
+};
+
+export const AccordionItemSeparator = makeDecoratable(
+    "AccordionItemSeparator",
+    AccordionItemSeparatorBase
+);
diff --git a/packages/admin-ui/src/Accordion/components/AccordionRoot.tsx b/packages/admin-ui/src/Accordion/components/AccordionRoot.tsx
new file mode 100644
index 00000000000..502c366fd4c
--- /dev/null
+++ b/packages/admin-ui/src/Accordion/components/AccordionRoot.tsx
@@ -0,0 +1,7 @@
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+
+type AccordionRootProps = CollapsiblePrimitive.CollapsibleProps;
+
+const AccordionRoot = CollapsiblePrimitive.Root;
+
+export { AccordionRoot, type AccordionRootProps };
diff --git a/packages/admin-ui/src/Accordion/components/AccordionTrigger.tsx b/packages/admin-ui/src/Accordion/components/AccordionTrigger.tsx
new file mode 100644
index 00000000000..87a7c812848
--- /dev/null
+++ b/packages/admin-ui/src/Accordion/components/AccordionTrigger.tsx
@@ -0,0 +1,94 @@
+import * as React from "react";
+import { ReactComponent as KeyboardArrowDownIcon } from "@webiny/icons/keyboard_arrow_down.svg";
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+import { cn } from "~/utils";
+import { type AccordionItemProps } from "./AccordionItem";
+import { AccordionItemAction } from "./AccordionItemAction";
+import { Icon } from "~/Icon";
+
+type AccordionTriggerProps = Pick<
+    AccordionItemProps,
+    "title" | "description" | "icon" | "handle" | "interactive" | "actions"
+>;
+
+const AccordionTrigger = ({
+    title,
+    description,
+    actions,
+    icon,
+    handle,
+    interactive = true
+}: AccordionTriggerProps) => {
+    // The following three attributes are required for the trigger to act as a button.
+    // We can't use the default button element here because the content of the trigger
+    // can also contain one or more buttons.
+    const divAsButtonProps = React.useMemo<React.HTMLAttributes<HTMLDivElement>>(() => {
+        return {
+            role: "button",
+            tabIndex: interactive ? 0 : -1, // Disable keyboard interaction if not interactive
+            onKeyDown: e => {
+                if (e.key === "Enter" || e.key === " ") {
+                    e.preventDefault();
+                    e.currentTarget.click();
+                }
+            }
+        };
+    }, [interactive]);
+
+    return (
+        <CollapsiblePrimitive.Trigger
+            asChild
+            onClick={e => !interactive && e.preventDefault()} // Prevent clicking if not interactive
+        >
+            <div
+                {...divAsButtonProps}
+                className={cn(
+                    "wby-w-full wby-flex wby-items-center wby-cursor-pointer",
+                    "focus-visible:wby-outline-none focus-visible:wby-border-none focus-visible:wby-ring-sm focus-visible:wby-ring-primary-dimmed",
+                    "hover:wby-bg-neutral-dimmed",
+                    "group-[.wby-accordion-variant-container]:wby-rounded-lg",
+                    "[&[data-state=open]_[data-role=open-close-indicator]]:wby-rotate-180",
+                    interactive ? "wby-cursor-pointer" : "wby-cursor-default"
+                )}
+            >
+                {handle}
+                <div
+                    className={
+                        "wby-w-full wby-flex wby-justify-between wby-items-center wby-px-md wby-py-sm-extra"
+                    }
+                >
+                    {icon && <div className={"wby-mr-md"}>{icon}</div>}
+                    <div
+                        className={"wby-flex wby-flex-col wby-gap-xxs wby-flex-grow wby-text-left"}
+                    >
+                        <div
+                            className={"wby-text-md wby-font-semibold webiny_accordion-item-title"}
+                        >
+                            {title}
+                        </div>
+                        <div className={"wby-text-sm wby-text-neutral-strong"}>{description}</div>
+                    </div>
+                    <div className={"wby-flex wby-ml-3xl wby-gap-xs"}>
+                        {actions}
+
+                        {/* No need to show the separator if there are no actions and the item is not interactive. */}
+                        {actions && interactive && <AccordionItemAction.Separator />}
+
+                        {interactive && (
+                            <Icon
+                                size={"lg"}
+                                className={"wby-transition"}
+                                color={"neutral-strong"}
+                                data-role={"open-close-indicator"}
+                                label={"Open/close indicator"}
+                                icon={<KeyboardArrowDownIcon />}
+                            />
+                        )}
+                    </div>
+                </div>
+            </div>
+        </CollapsiblePrimitive.Trigger>
+    );
+};
+
+export { AccordionTrigger };
diff --git a/packages/admin-ui/src/Accordion/index.ts b/packages/admin-ui/src/Accordion/index.ts
new file mode 100644
index 00000000000..16e0243c2a0
--- /dev/null
+++ b/packages/admin-ui/src/Accordion/index.ts
@@ -0,0 +1 @@
+export * from "./Accordion";
diff --git a/packages/admin-ui/src/Alert/Alert.mdx b/packages/admin-ui/src/Alert/Alert.mdx
new file mode 100644
index 00000000000..f89a900d230
--- /dev/null
+++ b/packages/admin-ui/src/Alert/Alert.mdx
@@ -0,0 +1,192 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+
+import * as AlertStories from './Alert.stories';
+
+<Meta of={AlertStories} />
+
+# Alert
+
+Alert component is an element used to display important messages to users, such as notifications, warnings, errors, or success confirmations. Its purpose is to bring attention to users by providing feedback on user actions or system states, ensuring users are informed about critical information. Alerts are relevant for guiding user behaviour, preventing errors, and improving user experience by delivering timely feedback and enhancing the communication between the user and the system.
+
+## Usage
+
+<Canvas of={AlertStories.Documentation} source={ { code:
+`// Code for a Info Alert
+
+import React from "react";
+
+import { Alert } from "@webiny/admin-ui";
+
+const AlertExample = () => {
+    return (
+        <Alert type={"info"}>
+            <>
+                This type of notification is suitable for general usage where there’s no need for
+                accent. And <a href={"#"}>this thing here</a> is a short link.
+            </>
+        </Alert>
+    );
+};
+
+export default AlertExample;
+
+` } }
+        additionalActions={[
+            {
+                title: 'Open in GitHub',
+                onClick: () => {
+                    window.open(
+                        'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Alert/Alert.tsx',
+                        '_blank'
+                    );
+                },
+            }
+        ]}
+/>
+
+<Controls of={AlertStories.Documentation} exclude={"children"}/>
+
+```tsx
+import React from "react";
+
+import { Alert } from "@webiny/admin-ui";
+
+const AlertExample = () => {
+    return (
+        <Alert type={"info"}>
+            <>
+                This type of notification is suitable for general usage where there’s no need for
+                accent. And <a href={"#"}>this thing here</a> is a short link.
+            </>
+        </Alert>
+    );
+};
+
+export default AlertExample;
+```
+
+## Examples
+
+### Info
+
+<Canvas of={AlertStories.Info} source={ { code: `
+// Code for an Info banner
+
+import { Alert } from '@webiny/admin-ui';
+
+<Alert type={"info"}>
+    <>
+        This type of notification is suitable for general usage where there’s no need for
+        accent. And <a href={"#"}>this thing here</a> is a short link.
+    </>
+</Alert>
+` } }
+/>
+
+### Success
+
+<Canvas of={AlertStories.Success} source={ { code: `
+// Code for a Success banner
+
+import { Alert } from '@webiny/admin-ui';
+
+<Alert type={"success"}>
+    <>
+        This is a success alert, used when something occurred successfully. And{" "}
+        <a href={"#"}>this thing here</a> is a short link.
+    </>
+</Alert>
+` } }
+/>
+
+
+### Warning
+
+<Canvas of={AlertStories.Warning} source={ { code: `
+// Code for a Warning banner
+
+import { Alert } from '@webiny/admin-ui';
+
+<Alert type={"warning"}>
+    <>
+        This is a warning alert, used when something of strong relevance needs to be
+        communicated. And <a href={"#"}>this thing here</a> is a short link.
+    </>
+</Alert>
+` } }
+/>
+
+### Danger
+
+<Canvas of={AlertStories.Danger} source={ { code: `
+// Code for a Danger banner
+
+import { Alert } from '@webiny/admin-ui';
+
+<Alert type={"danger"}>
+    <>
+        This is a danger alert, used when something critical needs to be communicated. And{" "}
+        <a href={"#"}>this thing here</a> is a short link.
+    </>
+</Alert>
+` } }
+/>
+
+### With Close Button
+
+<Canvas of={AlertStories.WithCloseButton} source={ { code: `
+// Code for a banner with a Close Button and an onClose action
+
+import { Alert } from '@webiny/admin-ui';
+
+<Alert type={"info"} showCloseButton={true} onClose={() => alert("Close button clicked.")}>
+    <>
+        An alert that can be closed.
+    </>
+</Alert>
+` } }
+/>
+
+### With Action
+
+<Canvas of={AlertStories.WithAction} source={ { code: `
+// Code for a banner with a close button and a action button
+
+import { Alert } from '@webiny/admin-ui';
+
+<Alert type={"info"} showCloseButton={true} onClose={() => alert("Close button clicked.")}
+        actions={(
+            <Alert.Action text={"Button"} onClick={() => alert("Custom action button clicked.")} />
+        )}>
+    <>
+        An alert that can be closed and also has action button.
+    </>
+</Alert>
+` } }
+/>
+
+## Anatomy
+
+### Options
+<img src="/images/storybook/alert/options.png" alt="Options"/>
+
+### Style
+<img src="/images/storybook/alert/style.png" alt="Style"/>
+
+### Type
+<img src="/images/storybook/alert/type.png" alt="Type"/>
+
+### Examples
+<img src="/images/storybook/alert/examples.png" alt="Examples"/>
+
+## Usage
+
+### Full width banner
+<img src="/images/storybook/alert/full-width-banner.png" alt="Full width banner"/>
+
+
+### Floating element
+<img src="/images/storybook/alert/floating-element.png" alt="Floating element"/>
+
+### Nested element
+<img src="/images/storybook/alert/nested-element.png" alt="Nested element"/>
\ No newline at end of file
diff --git a/packages/admin-ui/src/Alert/Alert.stories.tsx b/packages/admin-ui/src/Alert/Alert.stories.tsx
new file mode 100644
index 00000000000..501fd671b38
--- /dev/null
+++ b/packages/admin-ui/src/Alert/Alert.stories.tsx
@@ -0,0 +1,211 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Alert } from "./Alert";
+import React from "react";
+
+const meta: Meta<typeof Alert> = {
+    title: "Components/Alert",
+    component: Alert,
+    argTypes: {},
+    decorators: [
+        Story => (
+            <div className="wby-w-[700px]">
+                <Story />
+            </div>
+        )
+    ]
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Alert>;
+
+export const Default: Story = {
+    args: {
+        showCloseButton: true,
+        children: "This is an alert. Play around with different properties to see how it looks."
+    },
+    argTypes: {
+        type: {
+            control: "select",
+            options: ["info", "success", "warning", "danger"]
+        },
+        variant: {
+            control: "select",
+            options: ["strong", "subtle"]
+        }
+    }
+};
+
+export const Info: Story = {
+    args: {
+        ...Default.args,
+        type: "info",
+        children: (
+            <>
+                This type of notification is suitable for general usage where there’s no need for
+                accent. And <a href={"#"}>this thing here</a> is a short link.
+            </>
+        )
+    }
+};
+
+export const InfoStrong: Story = {
+    name: "Info (strong)",
+    args: {
+        ...Info.args,
+        variant: "strong",
+        children: (
+            <>
+                This type of notification is suitable for general usage where there is a need for
+                strong accent. And <a href={"#"}>this thing here</a> is a short link.
+            </>
+        )
+    }
+};
+
+export const Success: Story = {
+    args: {
+        ...Default.args,
+        type: "success",
+        children: (
+            <>
+                This is a success alert, used when something occurred successfully. And{" "}
+                <a href={"#"}>this thing here</a> is a short link.
+            </>
+        )
+    }
+};
+
+export const SuccessStrong: Story = {
+    name: "Success (strong)",
+    args: {
+        ...Success.args,
+        variant: "strong",
+        children: (
+            <>
+                This is a success alert, used when something occurred successfully and needs to be
+                prominent. And <a href={"#"}>this thing here</a> is a short link.
+            </>
+        )
+    }
+};
+
+export const Warning: Story = {
+    args: {
+        ...Default.args,
+        children: (
+            <>
+                This is a warning alert, used when something of strong relevance needs to be
+                communicated. And <a href={"#"}>this thing here</a> is a short link.
+            </>
+        ),
+        type: "warning"
+    }
+};
+
+export const WarningStrong: Story = {
+    name: "Warning (strong)",
+    args: {
+        ...Warning.args,
+        children: (
+            <>
+                This is a warning alert, used when something of strong relevance needs to be
+                prominently communicated. And <a href={"#"}>this thing here</a> is a short link.
+            </>
+        ),
+        variant: "strong"
+    }
+};
+
+export const Danger: Story = {
+    args: {
+        ...Default.args,
+        children: (
+            <>
+                This is a danger alert, used when something critical needs to be communicated. And{" "}
+                <a href={"#"}>this thing here</a> is a short link.
+            </>
+        ),
+        type: "danger"
+    }
+};
+
+export const DangerStrong: Story = {
+    name: "Danger (strong)",
+    args: {
+        ...Danger.args,
+        children: (
+            <>
+                This is a danger alert, used when something critical needs to be prominently
+                communicated. And <a href={"#"}>this thing here</a> is a short link.
+            </>
+        ),
+        variant: "strong"
+    }
+};
+
+export const WithCloseButton: Story = {
+    name: "With close button",
+    args: {
+        ...Default.args,
+        children: <>An alert that can be closed.</>,
+        showCloseButton: true,
+        onClose: () => alert("Close button clicked.")
+    }
+};
+
+export const WithAction: Story = {
+    name: "With action",
+    args: {
+        ...WithCloseButton.args,
+        children: <>An alert that can be closed and also has action button.</>,
+        showCloseButton: true,
+        actions: (
+            <Alert.Action text={"Button"} onClick={() => alert("Custom action button clicked.")} />
+        )
+    }
+};
+
+export const Documentation: Story = {
+    args: {
+        type: "info",
+        variant: "subtle",
+        showCloseButton: false,
+        children: (
+            <>
+                This type of notification is suitable for general usage where there’s no need for
+                accent. And <a href={"#"}>this thing here</a> is a short link.
+            </>
+        ),
+        onClose: () => {},
+        actions: undefined
+    },
+    argTypes: {
+        type: {
+            description: "Type",
+            control: "select",
+            options: ["info", "success", "warning", "danger"],
+            defaultValue: "info"
+        },
+        variant: {
+            description: "Variant",
+            control: "select",
+            options: ["subtle", "strong"],
+            defaultValue: "subtle"
+        },
+        showCloseButton: {
+            description:
+                "Show close button, please refer to the 'With Close Button' example below for details.",
+            control: "boolean",
+            defaultValue: false
+        },
+        onClose: {
+            description: "Please refer to the 'With Close Button' example below for details.",
+            control: "none"
+        },
+        actions: {
+            description: "Please refer to the 'With Action' example below for details.",
+            control: "none"
+        }
+    }
+};
diff --git a/packages/admin-ui/src/Alert/Alert.tsx b/packages/admin-ui/src/Alert/Alert.tsx
new file mode 100644
index 00000000000..eabf76ed0aa
--- /dev/null
+++ b/packages/admin-ui/src/Alert/Alert.tsx
@@ -0,0 +1,181 @@
+import * as React from "react";
+import { cva, type VariantProps, cn, makeDecoratable, withStaticProps } from "~/utils";
+import { Button, type ButtonProps, IconButton } from "~/Button";
+import { ReactComponent as InfoIcon } from "@webiny/icons/info.svg";
+import { ReactComponent as WarningIcon } from "@webiny/icons/warning_amber.svg";
+import { ReactComponent as SuccessIcon } from "@webiny/icons/check_circle.svg";
+import { ReactComponent as XIcon } from "@webiny/icons/close.svg";
+import { Icon } from "~/Icon";
+
+const VARIANT_ICON_MAP = {
+    info: InfoIcon,
+    success: SuccessIcon,
+    warning: InfoIcon,
+    danger: WarningIcon
+};
+
+const variants = {
+    type: { info: "", success: "", warning: "", danger: "" },
+    variant: { strong: "", subtle: "" }
+};
+
+const DEFAULT_TYPE = "info";
+const DEFAULT_VARIANT = "subtle";
+
+const defaultVariants = {
+    type: DEFAULT_TYPE,
+    variant: DEFAULT_VARIANT
+} as const;
+
+const alertVariants = cva(
+    "wby-flex wby-gap-sm-plus wby-items-start wby-w-full wby-rounded-lg wby-text-md wby-py-sm-extra wby-pl-md wby-pr-sm-plus [&_a]:wby-font-semibold [&_a]:wby-underline",
+    {
+        variants,
+        defaultVariants,
+        compoundVariants: [
+            {
+                type: "info",
+                variant: "strong",
+                className:
+                    "wby-bg-neutral-dark wby-text-neutral-light [&_a]:!wby-text-neutral-light"
+            },
+            {
+                type: "info",
+                variant: "subtle",
+                className:
+                    "wby-bg-neutral-dimmed wby-text-neutral-primary [&_a]:!wby-text-neutral-primary"
+            },
+            {
+                type: "success",
+                variant: "strong",
+                className:
+                    "wby-bg-secondary-default wby-text-neutral-light [&_a]:!wby-text-neutral-light"
+            },
+            {
+                type: "success",
+                variant: "subtle",
+                className:
+                    "wby-bg-success-subtle wby-text-neutral-primary [&_a]:!wby-text-neutral-primary"
+            },
+            {
+                type: "warning",
+                variant: "strong",
+                className:
+                    "wby-bg-warning-default wby-text-neutral-primary [&_a]:!wby-text-neutral-primary"
+            },
+            {
+                type: "warning",
+                variant: "subtle",
+                className:
+                    "wby-bg-warning-subtle wby-text-neutral-primary [&_a]:!wby-text-neutral-primary"
+            },
+            {
+                type: "danger",
+                variant: "strong",
+                className:
+                    "wby-bg-destructive-default wby-text-neutral-light [&_a]:!wby-text-neutral-light"
+            },
+            {
+                type: "danger",
+                variant: "subtle",
+                className:
+                    "wby-bg-destructive-subtle wby-text-neutral-primary [&_a]:!wby-text-neutral-primary"
+            }
+        ]
+    }
+);
+
+const alertIconVariants = cva("wby-size-md", {
+    variants,
+    defaultVariants,
+    compoundVariants: [
+        { type: "info", variant: "strong", className: "wby-fill-neutral-base" },
+        { type: "info", variant: "subtle", className: "wby-fill-neutral-xstrong" },
+        { type: "success", variant: "strong", className: "wby-fill-neutral-base" },
+        { type: "success", variant: "subtle", className: "wby-fill-success" },
+        { type: "warning", variant: "strong", className: "wby-fill-neutral-xstrong" },
+        { type: "warning", variant: "subtle", className: "wby-fill-warning" },
+        { type: "danger", variant: "strong", className: "wby-fill-neutral-base" },
+        { type: "danger", variant: "subtle", className: "wby-fill-destructive" }
+    ]
+});
+
+const closeButtonVariants = (props: Parameters<typeof alertVariants>[0] = {}) => {
+    const { type = DEFAULT_TYPE, variant = DEFAULT_VARIANT } = props;
+    if (variant === "subtle") {
+        return "ghost";
+    }
+
+    if (type === "warning") {
+        return "ghost";
+    }
+
+    return "ghost-negative";
+};
+
+export interface AlertProps
+    extends React.HTMLAttributes<HTMLDivElement>,
+        VariantProps<typeof alertVariants> {
+    showCloseButton?: boolean;
+    onClose?: () => void;
+    actions?: React.ReactElement<typeof AlertAction>;
+}
+
+const AlertContext = React.createContext<Pick<AlertProps, "variant">>({});
+
+const AlertActionBase = (props: ButtonProps) => {
+    const { variant: alertVariant } = React.useContext(AlertContext);
+    return (
+        <Button
+            text={"Button"}
+            variant={alertVariant === "strong" ? "secondary" : "tertiary"}
+            size={"sm"}
+            {...props}
+        />
+    );
+};
+
+const AlertAction = makeDecoratable("AlertAction", AlertActionBase);
+
+const AlertBase = ({
+    className,
+    type,
+    variant,
+    showCloseButton,
+    onClose,
+    actions,
+    children,
+    ...props
+}: AlertProps) => {
+    const IconComponent = VARIANT_ICON_MAP[type || "info"];
+
+    return (
+        <AlertContext.Provider value={{ variant }}>
+            <div
+                role="alert"
+                className={cn(alertVariants({ type, variant }), className)}
+                {...props}
+            >
+                <div className={"wby-py-xs"}>
+                    <IconComponent className={alertIconVariants({ type, variant })} />
+                </div>
+                <div className={"wby-flex-grow wby-py-xxs"}>{children}</div>
+                {actions && <div>{actions}</div>}
+                {showCloseButton && (
+                    <IconButton
+                        onClick={onClose}
+                        icon={<Icon icon={<XIcon />} label="Close" />}
+                        size={"sm"}
+                        variant={closeButtonVariants({ type, variant })}
+                    />
+                )}
+            </div>
+        </AlertContext.Provider>
+    );
+};
+
+const Alert = withStaticProps(makeDecoratable("AlertBase", AlertBase), {
+    Action: AlertAction
+});
+
+export { Alert };
diff --git a/packages/admin-ui/src/Alert/index.ts b/packages/admin-ui/src/Alert/index.ts
new file mode 100644
index 00000000000..b8e17a03c90
--- /dev/null
+++ b/packages/admin-ui/src/Alert/index.ts
@@ -0,0 +1 @@
+export * from "./Alert";
diff --git a/packages/admin-ui/src/AutoComplete/AutoComplete.mdx b/packages/admin-ui/src/AutoComplete/AutoComplete.mdx
new file mode 100644
index 00000000000..f9a6532e396
--- /dev/null
+++ b/packages/admin-ui/src/AutoComplete/AutoComplete.mdx
@@ -0,0 +1,135 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+
+import * as AutoCompleteStories from './AutoComplete.stories';
+
+<Meta of={AutoCompleteStories} />
+
+# AutoComplete
+
+The Input component is a user interface element that allows users to enter textual, numerical or any other kind of data into system database. It is essential for collecting user information, enabling interaction, and driving application functionality. As the user input is one of the most crucial aspects of using a system, we are ensuring that all our input options have necessary mechanism to make the data input as frictionless as possible.
+
+## Usage
+
+<Canvas of={AutoCompleteStories.Documentation} source={ { code: `
+import React, { useState } from "react";
+import { AutoComplete } from "@webiny/admin-ui";
+
+const TimezoneSelector = () => {
+    const [value, setValue] = useState("");
+    const [validation, setValidation] = useState({ isValid: true, message: "" });
+
+    const handleValueChange = (newValue: string) => {
+        setValue(newValue);
+
+        if (!newValue) {
+            setValidation({ isValid: false, message: "This field is required" });
+        } else {
+            setValidation({ isValid: true, message: "" });
+        }
+    };
+
+    const timezones = [
+        "Eastern Standard Time (EST)",
+        "Central Standard Time (CST)",
+        "Pacific Standard Time (PST)",
+        "Greenwich Mean Time (GMT)"
+    ];
+
+    return (
+        <AutoComplete
+            label="Time Zone"
+            required={true}
+            description="Select your timezone from the list"
+            placeholder="Select timezone..."
+            options={timezones}
+            value={value}
+            onValueChange={handleValueChange}
+            validation={validation}
+        />
+    );
+};
+
+export default TimezoneSelector;
+
+` } }
+        additionalActions={[
+            {
+                title: 'Open in GitHub',
+                onClick: () => {
+                    window.open(
+                        'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/AutoComplete/AutoComplete.tsx',
+                        '_blank'
+                    );
+                },
+            }
+        ]}
+/>
+
+<Controls of={AutoCompleteStories.Documentation}/>
+
+```tsx
+import React, { useState } from "react";
+import { AutoComplete } from "@webiny/admin-ui";
+
+const TimezoneSelector = () => {
+    const [value, setValue] = useState("");
+    const [validation, setValidation] = useState({ isValid: true, message: "" });
+
+    const handleValueChange = (newValue: string) => {
+        setValue(newValue);
+
+        if (!newValue) {
+            setValidation({ isValid: false, message: "This field is required" });
+        } else {
+            setValidation({ isValid: true, message: "" });
+        }
+    };
+
+    const timezones = [
+        "Eastern Standard Time (EST)",
+        "Central Standard Time (CST)",
+        "Pacific Standard Time (PST)",
+        "Greenwich Mean Time (GMT)"
+    ];
+
+    return (
+        <AutoComplete
+            label="Time Zone"
+            required={true}
+            description="Select your timezone from the list"
+            placeholder="Select timezone..."
+            options={timezones}
+            value={value}
+            onValueChange={handleValueChange}
+            validation={validation}
+        />
+    );
+};
+
+export default TimezoneSelector;
+```
+
+## Anatomy
+
+### Input Anatomy
+<img src="/images/storybook/autocomplete/input-anatomy.png" alt="Input Anatomy"/>
+
+### Style
+<img src="/images/storybook/autocomplete/style.png" alt="Style"/>
+
+### Option
+<img src="/images/storybook/autocomplete/option.png" alt="Option"/>
+
+### States and Styles
+<img src="/images/storybook/autocomplete/states-and-styles.png" alt="States and Styles"/>
+
+### Label Anatomy
+<img src="/images/storybook/autocomplete/label-anatomy.png" alt="Label Anatomy"/>
+
+### Label Properties
+<img src="/images/storybook/autocomplete/label-properties.png" alt="Label Properties"/>
+
+## Usage
+
+### Used in forms
+<img src="/images/storybook/autocomplete/used-in-forms.png" alt="Used in forms"/>
\ No newline at end of file
diff --git a/packages/admin-ui/src/AutoComplete/AutoComplete.stories.tsx b/packages/admin-ui/src/AutoComplete/AutoComplete.stories.tsx
new file mode 100644
index 00000000000..41aba30a1ed
--- /dev/null
+++ b/packages/admin-ui/src/AutoComplete/AutoComplete.stories.tsx
@@ -0,0 +1,206 @@
+import React, { useState, useEffect } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { AutoComplete } from "./AutoComplete";
+
+const meta: Meta<typeof AutoComplete> = {
+    title: "Components/Form/AutoComplete",
+    component: AutoComplete,
+    argTypes: {
+        onValueChange: { action: "onValueChange" }
+    },
+    parameters: {
+        layout: "padded"
+    },
+    render: args => {
+        const [value, setValue] = useState(args.value);
+        return <AutoComplete {...args} value={value} onValueChange={setValue} />;
+    }
+};
+
+export default meta;
+type Story = StoryObj<typeof AutoComplete>;
+
+export const Default: Story = {
+    args: {
+        options: [
+            "Eastern Standard Time (EST)",
+            "Central Standard Time (CST)",
+            "Pacific Standard Time (PST)",
+            "Greenwich Mean Time (GMT)",
+            "Central European Time (CET)",
+            "Central Africa Time (CAT)",
+            "India Standard Time (IST)",
+            "China Standard Time (CST)",
+            "Japan Standard Time (JST)",
+            "Australian Western Standard Time (AWST)",
+            "New Zealand Standard Time (NZST)",
+            "Fiji Time (FJT)",
+            "Argentina Time (ART)",
+            "Bolivia Time (BOT)",
+            "Brasilia Time (BRT)"
+        ]
+    }
+};
+
+export const WithLabel: Story = {
+    args: {
+        ...Default.args,
+        label: "Any field label"
+    }
+};
+
+export const WithRequiredLabel: Story = {
+    args: {
+        ...Default.args,
+        label: "Any field label",
+        required: true
+    }
+};
+
+export const WithDescription: Story = {
+    args: {
+        ...Default.args,
+        description: "Provide the required information for processing your request."
+    }
+};
+
+export const WithNotes: Story = {
+    args: {
+        ...Default.args,
+        note: "Note: Ensure your selection or input is accurate before proceeding."
+    }
+};
+
+export const WithErrors: Story = {
+    args: {
+        ...Default.args,
+        validation: {
+            isValid: false,
+            message: "This field is required."
+        }
+    }
+};
+
+export const Disabled: Story = {
+    args: {
+        ...Default.args,
+        label: "Any field label",
+        disabled: true
+    }
+};
+
+export const FullExample: Story = {
+    args: {
+        ...Default.args,
+        label: "Any field label",
+        required: true,
+        description: "Provide the required information for processing your request.",
+        note: "Note: Ensure your selection or input is accurate before proceeding.",
+        validation: {
+            isValid: false,
+            message: "This field is required."
+        }
+    }
+};
+
+export const OnValueChange: Story = {
+    args: {
+        options: [
+            "Eastern Standard Time (EST)",
+            "Central Standard Time (CST)",
+            "Pacific Standard Time (PST)",
+            "Greenwich Mean Time (GMT)"
+        ],
+        label: "Time Zone",
+        onValueChange: value => {
+            console.log("User selected Time zone:", value);
+        }
+    }
+};
+
+export const Documentation: Story = {
+    render: args => {
+        const [value, setValue] = useState(args.value || "");
+        const [validation, setValidation] = useState({ isValid: true, message: "" });
+
+        // Update value when args.value changes
+        useEffect(() => {
+            setValue(args.value || "");
+        }, [args.value]);
+
+        const handleValueChange = (newValue: string) => {
+            setValue(newValue);
+
+            // Simple required validation
+            if (!newValue && args.required) {
+                setValidation({ isValid: false, message: "This field is required" });
+            } else {
+                setValidation({ isValid: true, message: "" });
+            }
+        };
+
+        // Validate on required change
+        useEffect(() => {
+            if (args.required && !value) {
+                setValidation({ isValid: false, message: "This field is required" });
+            } else {
+                setValidation({ isValid: true, message: "" });
+            }
+        }, [args.required, value]);
+
+        return (
+            <AutoComplete
+                {...args}
+                value={value}
+                onValueChange={handleValueChange}
+                validation={validation}
+            />
+        );
+    },
+    args: {
+        options: [
+            "Eastern Standard Time (EST)",
+            "Central Standard Time (CST)",
+            "Pacific Standard Time (PST)",
+            "Greenwich Mean Time (GMT)"
+        ],
+        label: "Time Zone",
+        required: true,
+        description: "Select your timezone from the list",
+        placeholder: "Select timezone...",
+        validation: {
+            isValid: false,
+            message: "This field is required."
+        },
+        onValueChange: undefined
+    },
+    argTypes: {
+        options: {
+            description:
+                "AutoComplete Options - Please refer to the example code for details on usage."
+        },
+        label: {
+            description: "Label text for the autocomplete field",
+            control: "text"
+        },
+        required: {
+            description: "Makes the field required when set to true",
+            control: "boolean"
+        },
+        description: {
+            description: "Additional description text below the field",
+            control: "text"
+        },
+        placeholder: {
+            description: "Placeholder text shown when no value is selected",
+            control: "text"
+        },
+        validation: {
+            description: "Object containing validation state and message"
+        },
+        onValueChange: {
+            description: "Function called when the selected value changes",
+            control: "none"
+        }
+    }
+};
diff --git a/packages/admin-ui/src/AutoComplete/AutoComplete.tsx b/packages/admin-ui/src/AutoComplete/AutoComplete.tsx
new file mode 100644
index 00000000000..d6c99bfb104
--- /dev/null
+++ b/packages/admin-ui/src/AutoComplete/AutoComplete.tsx
@@ -0,0 +1,43 @@
+import React, { useMemo } from "react";
+import { makeDecoratable } from "~/utils";
+import { AutoCompletePrimitive, AutoCompletePrimitiveProps } from "./primitives";
+import {
+    FormComponentDescription,
+    FormComponentErrorMessage,
+    FormComponentLabel,
+    FormComponentNote,
+    FormComponentProps
+} from "~/FormComponent";
+
+type AutoCompleteProps = AutoCompletePrimitiveProps & FormComponentProps;
+
+const DecoratableAutoComplete = ({
+    label,
+    description,
+    note,
+    required,
+    disabled,
+    validation,
+    ...props
+}: AutoCompleteProps) => {
+    const { isValid: validationIsValid, message: validationMessage } = validation || {};
+    const invalid = useMemo(() => validationIsValid === false, [validationIsValid]);
+
+    return (
+        <div className={"wby-w-full"}>
+            <FormComponentLabel text={label} required={required} disabled={disabled} />
+            <FormComponentDescription text={description} disabled={disabled} />
+            <AutoCompletePrimitive {...props} disabled={disabled} label={label} invalid={invalid} />
+            <FormComponentErrorMessage
+                text={validationMessage}
+                invalid={invalid}
+                disabled={disabled}
+            />
+            <FormComponentNote text={note} disabled={disabled} />
+        </div>
+    );
+};
+
+const AutoComplete = makeDecoratable("AutoComplete", DecoratableAutoComplete);
+
+export { AutoComplete };
diff --git a/packages/admin-ui/src/AutoComplete/domains/AutoCompleteOption.ts b/packages/admin-ui/src/AutoComplete/domains/AutoCompleteOption.ts
new file mode 100644
index 00000000000..5bcc1c3a695
--- /dev/null
+++ b/packages/admin-ui/src/AutoComplete/domains/AutoCompleteOption.ts
@@ -0,0 +1,3 @@
+import { AutoCompleteOptionDto } from "./AutoCompleteOptionDto";
+
+export type AutoCompleteOption = AutoCompleteOptionDto | string;
diff --git a/packages/admin-ui/src/AutoComplete/domains/AutoCompleteOptionDto.ts b/packages/admin-ui/src/AutoComplete/domains/AutoCompleteOptionDto.ts
new file mode 100644
index 00000000000..0c3a6f24bda
--- /dev/null
+++ b/packages/admin-ui/src/AutoComplete/domains/AutoCompleteOptionDto.ts
@@ -0,0 +1,3 @@
+import { CommandOptionDto } from "~/Command";
+
+export type AutoCompleteOptionDto = CommandOptionDto;
diff --git a/packages/admin-ui/src/AutoComplete/domains/ListCache.ts b/packages/admin-ui/src/AutoComplete/domains/ListCache.ts
new file mode 100644
index 00000000000..34d99cf2639
--- /dev/null
+++ b/packages/admin-ui/src/AutoComplete/domains/ListCache.ts
@@ -0,0 +1,78 @@
+import { makeAutoObservable, runInAction, toJS } from "mobx";
+
+export type Constructor<T> = new (...args: any[]) => T;
+
+export interface IListCachePredicate<T> {
+    (item: T): boolean;
+}
+
+export interface IListCacheItemUpdater<T> {
+    (item: T): T;
+}
+
+export interface IListCache<T> {
+    count(): number;
+    clear(): void;
+    hasItems(): boolean;
+    getItems(predicate?: IListCachePredicate<T>): T[];
+    getItem(predicate: IListCachePredicate<T>): T | undefined;
+    addItems(items: T[]): void;
+    updateItems(updater: IListCacheItemUpdater<T>): void;
+    removeItems(predicate: IListCachePredicate<T>): void;
+}
+
+export class ListCache<T> implements IListCache<T> {
+    private state: T[];
+
+    constructor() {
+        this.state = [];
+
+        makeAutoObservable(this);
+    }
+
+    count() {
+        return this.state.length;
+    }
+
+    clear() {
+        runInAction(() => {
+            this.state = [];
+        });
+    }
+
+    hasItems() {
+        return this.state.length > 0;
+    }
+
+    getItems(predicate?: IListCachePredicate<T>): T[] {
+        if (predicate) {
+            return [...this.state.filter(item => predicate(item)).map(item => toJS(item))];
+        }
+
+        return [...this.state.map(item => toJS(item))];
+    }
+
+    getItem(predicate: IListCachePredicate<T>): T | undefined {
+        const item = this.state.find(item => predicate(item));
+
+        return item ? toJS(item) : undefined;
+    }
+
+    addItems(items: T[]) {
+        runInAction(() => {
+            this.state = [...this.state, ...items];
+        });
+    }
+
+    updateItems(updater: IListCacheItemUpdater<T>) {
+        runInAction(() => {
+            this.state = [...this.state.map(item => updater(item))];
+        });
+    }
+
+    removeItems(predicate: IListCachePredicate<T>) {
+        runInAction(() => {
+            this.state = this.state.filter(item => !predicate(item));
+        });
+    }
+}
diff --git a/packages/admin-ui/src/AutoComplete/domains/index.ts b/packages/admin-ui/src/AutoComplete/domains/index.ts
new file mode 100644
index 00000000000..5ac25dd186e
--- /dev/null
+++ b/packages/admin-ui/src/AutoComplete/domains/index.ts
@@ -0,0 +1,3 @@
+export * from "./AutoCompleteOption";
+export * from "./AutoCompleteOptionDto";
+export * from "./ListCache";
diff --git a/packages/admin-ui/src/AutoComplete/index.ts b/packages/admin-ui/src/AutoComplete/index.ts
new file mode 100644
index 00000000000..b6ebc777ad0
--- /dev/null
+++ b/packages/admin-ui/src/AutoComplete/index.ts
@@ -0,0 +1,2 @@
+export * from "./AutoComplete";
+export * from "./primitives";
diff --git a/packages/admin-ui/src/AutoComplete/primitives/AutoCompletePrimitive.stories.tsx b/packages/admin-ui/src/AutoComplete/primitives/AutoCompletePrimitive.stories.tsx
new file mode 100644
index 00000000000..23c751bd0e9
--- /dev/null
+++ b/packages/admin-ui/src/AutoComplete/primitives/AutoCompletePrimitive.stories.tsx
@@ -0,0 +1,454 @@
+import React, { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { ReactComponent as SearchIcon } from "@webiny/icons/search.svg";
+import { AutoCompletePrimitive } from "./AutoCompletePrimitive";
+import { Button } from "~/Button";
+import { Icon } from "~/Icon";
+
+const meta: Meta<typeof AutoCompletePrimitive> = {
+    title: "Components/Form Primitives/Autocomplete",
+    component: AutoCompletePrimitive,
+    parameters: {
+        layout: "padded"
+    },
+    argTypes: {
+        onValueChange: { action: "onValueChange" },
+        onOpenChange: { action: "onOpenChange" }
+    },
+    render: args => {
+        const [value, setValue] = useState(args.value);
+        return (
+            <div className={"wby-w-full"}>
+                <AutoCompletePrimitive {...args} value={value} onValueChange={setValue} />
+                <div className={"wby-mt-4 wby-text-center"}>
+                    Current selected value: <pre>{value}</pre>
+                </div>
+            </div>
+        );
+    }
+};
+
+export default meta;
+
+type Story = StoryObj<typeof AutoCompletePrimitive>;
+
+export const Default: Story = {
+    args: {
+        options: [
+            "Eastern Standard Time (EST)",
+            "Central Standard Time (CST)",
+            "Pacific Standard Time (PST)",
+            "Greenwich Mean Time (GMT)",
+            "Central European Time (CET)",
+            "Central Africa Time (CAT)",
+            "India Standard Time (IST)",
+            "China Standard Time (CST)",
+            "Japan Standard Time (JST)",
+            "Australian Western Standard Time (AWST)",
+            "New Zealand Standard Time (NZST)",
+            "Fiji Time (FJT)",
+            "Argentina Time (ART)",
+            "Bolivia Time (BOT)",
+            "Brasilia Time (BRT)"
+        ]
+    }
+};
+
+export const MediumSize: Story = {
+    args: {
+        ...Default.args,
+        size: "md"
+    }
+};
+
+export const LargeSize: Story = {
+    args: {
+        ...Default.args,
+        size: "lg"
+    }
+};
+
+export const ExtraLargeSize: Story = {
+    args: {
+        ...Default.args,
+        size: "xl"
+    }
+};
+
+export const WithStartIcon: Story = {
+    args: {
+        ...Default.args,
+        startIcon: <Icon label={"Search"} icon={<SearchIcon />} />
+    }
+};
+
+export const WithLoading: Story = {
+    args: {
+        ...Default.args,
+        loading: true
+    }
+};
+
+export const WithoutResetAction: Story = {
+    args: {
+        ...Default.args,
+        displayResetAction: false
+    }
+};
+
+export const PrimaryVariant: Story = {
+    args: {
+        ...Default.args,
+        variant: "primary"
+    }
+};
+
+export const PrimaryVariantDisabled: Story = {
+    args: {
+        ...PrimaryVariant.args,
+        disabled: true
+    }
+};
+
+export const PrimaryVariantInvalid: Story = {
+    args: {
+        ...PrimaryVariant.args,
+        invalid: true
+    }
+};
+
+export const SecondaryVariant: Story = {
+    args: {
+        variant: "secondary",
+        placeholder: "Custom placeholder"
+    }
+};
+
+export const SecondaryVariantDisabled: Story = {
+    args: {
+        ...SecondaryVariant.args,
+        disabled: true
+    }
+};
+
+export const SecondaryVariantInvalid: Story = {
+    args: {
+        ...SecondaryVariant.args,
+        invalid: true
+    }
+};
+
+export const GhostVariant: Story = {
+    args: {
+        variant: "ghost",
+        placeholder: "Custom placeholder"
+    }
+};
+
+export const GhostVariantDisabled: Story = {
+    args: {
+        ...GhostVariant.args,
+        disabled: true
+    }
+};
+
+export const GhostVariantInvalid: Story = {
+    args: {
+        ...GhostVariant.args,
+        invalid: true
+    }
+};
+
+export const WithPredefinedValue: Story = {
+    args: {
+        ...Default.args,
+        value: "Eastern Standard Time (EST)"
+    }
+};
+
+export const WithCustomPlaceholder: Story = {
+    args: {
+        ...Default.args,
+        placeholder: "Custom placeholder"
+    }
+};
+
+export const WithCustomEmptyMessage: Story = {
+    args: {
+        ...Default.args,
+        emptyMessage: "Custom empty message"
+    }
+};
+
+export const WithCustomInitialMessage: Story = {
+    args: {
+        ...Default.args,
+        initialMessage: "Custom initial message.",
+        options: []
+    }
+};
+
+export const WithFormattedOptions: Story = {
+    args: {
+        ...Default.args,
+        options: [
+            { label: "Eastern Standard Time (EST)", value: "est" },
+            { label: "Central Standard Time (CST)", value: "cst" },
+            { label: "Pacific Standard Time (PST)", value: "pst" },
+            { label: "Greenwich Mean Time (GMT)", value: "gmt" },
+            { label: "Central European Time (CET)", value: "cet" },
+            { label: "Central Africa Time (CAT)", value: "cat" },
+            { label: "India Standard Time (IST)", value: "ist" },
+            { label: "China Standard Time (CST)", value: "cst_china" },
+            { label: "Japan Standard Time (JST)", value: "jst" },
+            { label: "Australian Western Standard Time (AWST)", value: "awst" },
+            { label: "New Zealand Standard Time (NZST)", value: "nzst" },
+            { label: "Fiji Time (FJT)", value: "fjt" },
+            { label: "Argentina Time (ART)", value: "art" },
+            { label: "Bolivia Time (BOT)", value: "bot" },
+            { label: "Brasilia Time (BRT)", value: "brt" }
+        ]
+    }
+};
+
+export const WithCustomOptionRenderer: Story = {
+    args: {
+        ...Default.args,
+        options: [
+            {
+                label: "Eastern Standard Time (EST)",
+                value: "est",
+                item: {
+                    name: "Eastern Standard Time (EST)",
+                    time_difference: "-5:00",
+                    flag: "🇺🇸"
+                }
+            },
+            {
+                label: "Central Standard Time (CST)",
+                value: "cst",
+                item: {
+                    name: "Central Standard Time (CST)",
+                    time_difference: "-6:00",
+                    flag: "🇺🇸"
+                }
+            },
+            {
+                label: "Pacific Standard Time (PST)",
+                value: "pst",
+                item: {
+                    name: "Pacific Standard Time (PST)",
+                    time_difference: "-8:00",
+                    flag: "🇺🇸"
+                }
+            },
+            {
+                label: "Greenwich Mean Time (GMT)",
+                value: "gmt",
+                item: {
+                    name: "Greenwich Mean Time (GMT)",
+                    time_difference: "±0:00",
+                    flag: "🇬🇧"
+                }
+            },
+            {
+                label: "Central European Time (CET)",
+                value: "cet",
+                item: {
+                    name: "Central European Time (CET)",
+                    time_difference: "+1:00",
+                    flag: "🇪🇺"
+                }
+            },
+            {
+                label: "Central Africa Time (CAT)",
+                value: "cat",
+                item: {
+                    name: "Central Africa Time (CAT)",
+                    time_difference: "+2:00",
+                    flag: "🇿🇦"
+                }
+            },
+            {
+                label: "India Standard Time (IST)",
+                value: "ist",
+                item: {
+                    name: "India Standard Time (IST)",
+                    time_difference: "+5:30",
+                    flag: "🇮🇳"
+                }
+            },
+            {
+                label: "China Standard Time (CST)",
+                value: "cst_china",
+                item: {
+                    name: "China Standard Time (CST)",
+                    time_difference: "+8:00",
+                    flag: "🇨🇳"
+                }
+            },
+            {
+                label: "Japan Standard Time (JST)",
+                value: "jst",
+                item: {
+                    name: "Japan Standard Time (JST)",
+                    time_difference: "+9:00",
+                    flag: "🇯🇵"
+                }
+            },
+            {
+                label: "Australian Western Standard Time (AWST)",
+                value: "awst",
+                item: {
+                    name: "Australian Western Standard Time (AWST)",
+                    time_difference: "+8:00",
+                    flag: "🇦🇺"
+                }
+            },
+            {
+                label: "New Zealand Standard Time (NZST)",
+                value: "nzst",
+                item: {
+                    name: "New Zealand Standard Time (NZST)",
+                    time_difference: "+12:00",
+                    flag: "🇳🇿"
+                }
+            },
+            {
+                label: "Fiji Time (FJT)",
+                value: "fjt",
+                item: {
+                    name: "Fiji Time (FJT)",
+                    time_difference: "+12:00",
+                    flag: "🇫🇯"
+                }
+            },
+            {
+                label: "Argentina Time (ART)",
+                value: "art",
+                item: {
+                    name: "Argentina Time (ART)",
+                    time_difference: "-3:00",
+                    flag: "🇦🇷"
+                }
+            },
+            {
+                label: "Bolivia Time (BOT)",
+                value: "bot",
+                item: {
+                    name: "Bolivia Time (BOT)",
+                    time_difference: "-4:00",
+                    flag: "🇧🇴"
+                }
+            },
+            {
+                label: "Brasilia Time (BRT)",
+                value: "brt",
+                item: {
+                    name: "Brasilia Time (BRT)",
+                    time_difference: "-3:00",
+                    flag: "🇧🇷"
+                }
+            }
+        ],
+        optionRenderer: item => {
+            return (
+                <div className={"wby-w-full wby-flex wby-justify-between wby-align-middle"}>
+                    <div>
+                        <span className={"wby-mr-sm"}>{item.flag}</span>
+                        {item.name}
+                    </div>
+                    <div className={"wby-text-sm"}>{item.time_difference}</div>
+                </div>
+            );
+        }
+    }
+};
+
+export const WithSeparators: Story = {
+    args: {
+        ...Default.args,
+        options: [
+            { label: "Eastern Standard Time (EST)", value: "est" },
+            { label: "Central Standard Time (CST)", value: "cst" },
+            { label: "Pacific Standard Time (PST)", value: "pst", separator: true },
+            { label: "Greenwich Mean Time (GMT)", value: "gmt" },
+            { label: "Central European Time (CET)", value: "cet" },
+            { label: "Central Africa Time (CAT)", value: "cat", separator: true },
+            { label: "India Standard Time (IST)", value: "ist" },
+            { label: "China Standard Time (CST)", value: "cst_china" },
+            { label: "Japan Standard Time (JST)", value: "jst", separator: true },
+            { label: "Australian Western Standard Time (AWST)", value: "awst" },
+            { label: "New Zealand Standard Time (NZST)", value: "nzst" },
+            { label: "Fiji Time (FJT)", value: "fjt", separator: true },
+            { label: "Argentina Time (ART)", value: "art" },
+            { label: "Bolivia Time (BOT)", value: "bot" },
+            { label: "Brasilia Time (BRT)", value: "brt" }
+        ]
+    }
+};
+
+export const WithDisabledOptions: Story = {
+    args: {
+        options: [
+            { label: "Eastern Standard Time (EST)", value: "est", disabled: true },
+            { label: "Central Standard Time (CST)", value: "cst", disabled: true },
+            { label: "Pacific Standard Time (PST)", value: "pst", disabled: true },
+            { label: "Greenwich Mean Time (GMT)", value: "gmt" },
+            { label: "Central European Time (CET)", value: "cet" },
+            { label: "Central Africa Time (CAT)", value: "cat" },
+            { label: "India Standard Time (IST)", value: "ist" },
+            { label: "China Standard Time (CST)", value: "cst_china" },
+            { label: "Japan Standard Time (JST)", value: "jst" },
+            { label: "Australian Western Standard Time (AWST)", value: "awst" },
+            { label: "New Zealand Standard Time (NZST)", value: "nzst" },
+            { label: "Fiji Time (FJT)", value: "fjt" },
+            { label: "Argentina Time (ART)", value: "art" },
+            { label: "Bolivia Time (BOT)", value: "bot" },
+            { label: "Brasilia Time (BRT)", value: "brt" }
+        ]
+    }
+};
+
+export const WithExternalValueControl: Story = {
+    args: {
+        ...Default.args,
+        options: [
+            { label: "Eastern Standard Time (EST)", value: "est" },
+            { label: "Central Standard Time (CST)", value: "cst" },
+            { label: "Pacific Standard Time (PST)", value: "pst" },
+            { label: "Greenwich Mean Time (GMT)", value: "gmt" },
+            { label: "Central European Time (CET)", value: "cet" },
+            { label: "Central Africa Time (CAT)", value: "cat" },
+            { label: "India Standard Time (IST)", value: "ist" },
+            { label: "China Standard Time (CST)", value: "cst_china" },
+            { label: "Japan Standard Time (JST)", value: "jst" },
+            { label: "Australian Western Standard Time (AWST)", value: "awst" },
+            { label: "New Zealand Standard Time (NZST)", value: "nzst" },
+            { label: "Fiji Time (FJT)", value: "fjt" },
+            { label: "Argentina Time (ART)", value: "art" },
+            { label: "Bolivia Time (BOT)", value: "bot" },
+            { label: "Brasilia Time (BRT)", value: "brt" }
+        ]
+    },
+    render: args => {
+        const [value, setValue] = useState(args.value);
+        return (
+            <div className={"wby-w-full"}>
+                <div>
+                    <AutoCompletePrimitive
+                        {...args}
+                        value={value}
+                        onValueChange={value => setValue(value)}
+                    />
+                </div>
+                <div className={"wby-mt-4 wby-text-center"}>
+                    <Button text={"Reset"} onClick={() => setValue("")} />
+                </div>
+                <div className={"wby-mt-4 wby-text-center"}>
+                    Current selected value: <pre>{value}</pre>
+                </div>
+            </div>
+        );
+    }
+};
diff --git a/packages/admin-ui/src/AutoComplete/primitives/AutoCompletePrimitive.tsx b/packages/admin-ui/src/AutoComplete/primitives/AutoCompletePrimitive.tsx
new file mode 100644
index 00000000000..a898f07c743
--- /dev/null
+++ b/packages/admin-ui/src/AutoComplete/primitives/AutoCompletePrimitive.tsx
@@ -0,0 +1,185 @@
+import React, { KeyboardEvent } from "react";
+import { Command } from "~/Command";
+import { PopoverPrimitive } from "~/Popover";
+import { InputPrimitiveProps } from "~/Input";
+import { useAutoComplete } from "./useAutoComplete";
+import { AutoCompleteInputIcons, AutoCompleteList } from "./components";
+import { AutoCompleteOption } from "../domains";
+import { makeDecoratable } from "~/utils";
+import { Icon } from "~/Icon";
+
+interface AutoCompletePrimitiveProps {
+    /**
+     * Indicates if the reset action should be displayed.
+     */
+    displayResetAction?: boolean;
+    /**
+     * Indicates if the field is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Message to display when there are no options.
+     */
+    emptyMessage?: React.ReactNode;
+    /**
+     * Message to display when there are no options loaded or selected.
+     * Use it to invite the user to interact with the autocomplete by typing a value.
+     */
+    initialMessage?: React.ReactNode;
+    /**
+     * Indicates if the input field is invalid.
+     * Refer to `InputPrimitiveProps["invalid"]` for possible values.
+     */
+    invalid?: InputPrimitiveProps["invalid"];
+    /**
+     * Accessible label for the command menu. Not shown visibly.
+     */
+    label?: string;
+    /**
+     * Indicates if the autocomplete is loading options.
+     */
+    loading?: boolean;
+    /**
+     * Message to display while loading options.
+     */
+    loadingMessage?: React.ReactNode;
+    /**
+     * Callback triggered when the open state changes.
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Callback triggered to reset the value.
+     */
+    onValueReset?: () => void;
+    /**
+     * Callback triggered when a value has been searched by the user.
+     */
+    onValueSearch?: (value: string) => void;
+    /**
+     * Callback triggered when the value changes.
+     */
+    onValueChange: (value: string) => void;
+    /**
+     * List of options for the autocomplete.
+     */
+    options?: AutoCompleteOption[];
+    /**
+     * Custom renderer for the options.
+     */
+    optionRenderer?: (item: any, index: number) => React.ReactNode;
+    /**
+     * Placeholder text for the input field.
+     */
+    placeholder?: string;
+    /**
+     * Size of the input field.
+     * Refer to `InputPrimitiveProps["size"]` for possible values.
+     */
+    size?: InputPrimitiveProps["size"];
+    /**
+     * Icon to be displayed at the start of the input field.
+     */
+    startIcon?: React.ReactElement<typeof Icon> | React.ReactElement;
+    /**
+     * Variant of the input field.
+     * Refer to `InputPrimitiveProps["variant"]` for possible values.
+     */
+    variant?: InputPrimitiveProps["variant"];
+    /**
+     * Optional selected item.
+     */
+    value?: string;
+}
+
+const DecoratableAutoCompletePrimitive = (props: AutoCompletePrimitiveProps) => {
+    const {
+        vm,
+        setListOpenState,
+        setSelectedOption,
+        searchOption,
+        resetSelectedOption,
+        showSelectedOption
+    } = useAutoComplete(props);
+
+    const handleKeyDown = React.useCallback(
+        (event: KeyboardEvent<HTMLDivElement>) => {
+            if (props.disabled) {
+                return;
+            }
+
+            if (event.key.toLowerCase() === "escape") {
+                setListOpenState(false);
+            } else {
+                setListOpenState(true);
+            }
+        },
+        [props.disabled, setListOpenState]
+    );
+
+    const handleSelectOption = React.useCallback(
+        (value: string) => {
+            setSelectedOption(value);
+            setListOpenState(false);
+        },
+        [setSelectedOption, setListOpenState]
+    );
+
+    const handleOnBlur = React.useCallback(() => {
+        setListOpenState(false);
+        showSelectedOption();
+    }, [setListOpenState]);
+
+    return (
+        <PopoverPrimitive open={vm.optionsListVm.open} onOpenChange={() => setListOpenState(true)}>
+            <Command label={props.label} onKeyDown={handleKeyDown}>
+                <PopoverPrimitive.Trigger asChild>
+                    <span>
+                        <Command.Input
+                            value={vm.inputVm.value}
+                            onValueChange={searchOption}
+                            placeholder={vm.inputVm.placeholder}
+                            size={props.size}
+                            variant={props.variant}
+                            disabled={props.disabled}
+                            invalid={props.invalid}
+                            startIcon={props.startIcon}
+                            endIcon={
+                                <AutoCompleteInputIcons
+                                    inputSize={props.size}
+                                    displayResetAction={vm.inputVm.displayResetAction}
+                                    disabled={props.disabled}
+                                    loading={props.loading}
+                                    onResetValue={resetSelectedOption}
+                                    onOpenChange={() => setListOpenState(!vm.optionsListVm.open)}
+                                />
+                            }
+                            onBlur={handleOnBlur}
+                            onFocus={() => setListOpenState(true)}
+                        />
+                    </span>
+                </PopoverPrimitive.Trigger>
+                <PopoverPrimitive.Content
+                    style={{ width: "var(--radix-popover-trigger-width)" }}
+                    onOpenAutoFocus={e => e.preventDefault()}
+                >
+                    <AutoCompleteList
+                        options={vm.optionsListVm.options}
+                        onOptionSelect={handleSelectOption}
+                        empty={vm.optionsListVm.empty}
+                        loading={props.loading}
+                        loadingMessage={vm.optionsListVm.loadingMessage}
+                        emptyMessage={vm.optionsListVm.emptyMessage}
+                        optionRenderer={props.optionRenderer}
+                    />
+                </PopoverPrimitive.Content>
+            </Command>
+        </PopoverPrimitive>
+    );
+};
+
+const AutoCompletePrimitive = makeDecoratable(
+    "AutoCompletePrimitive",
+    DecoratableAutoCompletePrimitive
+);
+
+export { AutoCompletePrimitive, type AutoCompletePrimitiveProps };
diff --git a/packages/admin-ui/src/AutoComplete/primitives/components/AutoCompleteInputIcons.tsx b/packages/admin-ui/src/AutoComplete/primitives/components/AutoCompleteInputIcons.tsx
new file mode 100644
index 00000000000..2c3af35bef1
--- /dev/null
+++ b/packages/admin-ui/src/AutoComplete/primitives/components/AutoCompleteInputIcons.tsx
@@ -0,0 +1,44 @@
+import React from "react";
+import { ReactComponent as Close } from "@webiny/icons/close.svg";
+import { ReactComponent as ChevronDown } from "@webiny/icons/keyboard_arrow_down.svg";
+import { IconButton } from "~/Button";
+import { Icon } from "~/Icon";
+import { Loader } from "~/Loader";
+
+interface AutoCompleteInputIconsProps {
+    displayResetAction: boolean;
+    inputSize?: "md" | "lg" | "xl" | null;
+    loading?: boolean;
+    disabled?: boolean;
+    onOpenChange: (open: boolean) => void;
+    onResetValue: () => void;
+}
+
+export const AutoCompleteInputIcons = (props: AutoCompleteInputIconsProps) => {
+    return (
+        <div className={"wby-flex wby-items-center wby-gap-sm"}>
+            {props.loading && <Loader size={props.inputSize === "xl" ? "sm" : "xs"} />}
+            {props.displayResetAction && (
+                <IconButton
+                    size={props.inputSize === "xl" ? "sm" : "xs"} // Map button size based on the input size.
+                    variant={"secondary"}
+                    icon={<Icon icon={<Close />} label={"Reset"} />}
+                    disabled={props.disabled}
+                    onClick={event => {
+                        event.stopPropagation();
+                        props.onResetValue();
+                    }}
+                />
+            )}
+            <Icon
+                size={props.inputSize === "xl" ? "lg" : "sm"} // Map icon size based on the input size.
+                icon={<ChevronDown />}
+                label={"Open list"}
+                onClick={event => {
+                    event.stopPropagation();
+                    props.onOpenChange(true);
+                }}
+            />
+        </div>
+    );
+};
diff --git a/packages/admin-ui/src/AutoComplete/primitives/components/AutoCompleteList.tsx b/packages/admin-ui/src/AutoComplete/primitives/components/AutoCompleteList.tsx
new file mode 100644
index 00000000000..d8774f8903e
--- /dev/null
+++ b/packages/admin-ui/src/AutoComplete/primitives/components/AutoCompleteList.tsx
@@ -0,0 +1,69 @@
+import React from "react";
+import { CommandOptionFormatted } from "~/Command/domain/CommandOptionFormatted";
+import { Command } from "~/Command";
+
+interface AutoCompleteListProps extends React.ComponentPropsWithoutRef<typeof Command.List> {
+    options: CommandOptionFormatted[];
+    emptyMessage?: React.ReactNode;
+    empty?: boolean;
+    loading?: boolean;
+    loadingMessage?: React.ReactNode;
+    onOptionSelect: (value: string) => void;
+    optionRenderer?: (item: any, index: number) => React.ReactNode;
+}
+
+export const AutoCompleteList = ({
+    emptyMessage,
+    empty,
+    loading,
+    loadingMessage,
+    onOptionSelect,
+    optionRenderer,
+    options,
+    ...props
+}: AutoCompleteListProps) => {
+    const renderOptions = React.useCallback(
+        (items: CommandOptionFormatted[]) => {
+            if (empty) {
+                return null;
+            }
+
+            const elements = [
+                <Command.Item key={"dummy-element"} value="-" className="wby-hidden" />
+            ];
+
+            return items.reduce((acc, item, currentIndex) => {
+                acc.push(
+                    <Command.Item
+                        key={`item-${item.value}-${currentIndex}`}
+                        value={item.value}
+                        keywords={[item.label]}
+                        disabled={item.disabled}
+                        selected={item.selected}
+                        onSelect={() => onOptionSelect(item.value)}
+                        onMouseDown={event => event.preventDefault()}
+                    >
+                        {optionRenderer && item.item
+                            ? optionRenderer.call(this, item.item, currentIndex)
+                            : item.label}
+                    </Command.Item>
+                );
+
+                // Conditionally render the separator if `separator` is true
+                if (item.separator) {
+                    acc.push(<Command.Separator key={`separator-${item.value ?? currentIndex}`} />);
+                }
+
+                return acc;
+            }, elements);
+        },
+        [onOptionSelect, optionRenderer, empty]
+    );
+
+    return (
+        <Command.List {...props}>
+            {loading ? <Command.Loading>{loadingMessage}</Command.Loading> : renderOptions(options)}
+            {!loading && <Command.Empty>{emptyMessage}</Command.Empty>}
+        </Command.List>
+    );
+};
diff --git a/packages/admin-ui/src/AutoComplete/primitives/components/index.ts b/packages/admin-ui/src/AutoComplete/primitives/components/index.ts
new file mode 100644
index 00000000000..9b5759e336f
--- /dev/null
+++ b/packages/admin-ui/src/AutoComplete/primitives/components/index.ts
@@ -0,0 +1,2 @@
+export * from "./AutoCompleteInputIcons";
+export * from "./AutoCompleteList";
diff --git a/packages/admin-ui/src/AutoComplete/primitives/index.ts b/packages/admin-ui/src/AutoComplete/primitives/index.ts
new file mode 100644
index 00000000000..38b49132cbb
--- /dev/null
+++ b/packages/admin-ui/src/AutoComplete/primitives/index.ts
@@ -0,0 +1 @@
+export * from "./AutoCompletePrimitive";
diff --git a/packages/admin-ui/src/AutoComplete/primitives/presenters/AutoCompleteInputPresenter.ts b/packages/admin-ui/src/AutoComplete/primitives/presenters/AutoCompleteInputPresenter.ts
new file mode 100644
index 00000000000..d921309e471
--- /dev/null
+++ b/packages/admin-ui/src/AutoComplete/primitives/presenters/AutoCompleteInputPresenter.ts
@@ -0,0 +1,56 @@
+import { makeAutoObservable } from "mobx";
+
+interface AutoCompleteInputPresenterParams {
+    value?: string;
+    placeholder?: string;
+    displayResetAction?: boolean;
+}
+
+interface IAutoCompleteInputPresenter {
+    vm: {
+        placeholder: string;
+        value: string;
+        displayResetAction: boolean;
+    };
+    init: (params: AutoCompleteInputPresenterParams) => void;
+    setValue: (query: string) => void;
+    resetValue: () => void;
+}
+
+class AutoCompleteInputPresenter implements IAutoCompleteInputPresenter {
+    private searchQuery?: string = undefined;
+    private placeholder?: string = undefined;
+    private displayResetAction?: boolean = true;
+
+    constructor() {
+        makeAutoObservable(this);
+    }
+
+    init(params?: AutoCompleteInputPresenterParams) {
+        this.searchQuery = params?.value;
+        this.placeholder = params?.placeholder;
+        this.displayResetAction = params?.displayResetAction ?? true;
+    }
+
+    get vm() {
+        return {
+            placeholder: this.placeholder || "Start typing or select",
+            value: this.searchQuery || "",
+            displayResetAction: Boolean(this.displayResetAction && !!this.searchQuery)
+        };
+    }
+
+    public setValue = (value: string) => {
+        this.searchQuery = value;
+    };
+
+    public resetValue = () => {
+        this.searchQuery = undefined;
+    };
+}
+
+export {
+    AutoCompleteInputPresenter,
+    type IAutoCompleteInputPresenter,
+    type AutoCompleteInputPresenterParams
+};
diff --git a/packages/admin-ui/src/AutoComplete/primitives/presenters/AutoCompleteListOptionsPresenter.ts b/packages/admin-ui/src/AutoComplete/primitives/presenters/AutoCompleteListOptionsPresenter.ts
new file mode 100644
index 00000000000..2df5289a965
--- /dev/null
+++ b/packages/admin-ui/src/AutoComplete/primitives/presenters/AutoCompleteListOptionsPresenter.ts
@@ -0,0 +1,91 @@
+import { makeAutoObservable } from "mobx";
+import { CommandOption } from "~/Command/domain/CommandOption";
+import { CommandOptionFormatted } from "~/Command/domain/CommandOptionFormatted";
+import { CommandOptionFormatter } from "~/Command/domain/CommandOptionFormatter";
+import { ListCache } from "../../domains";
+
+export interface IAutoCompleteListOptionsPresenterParams {
+    options?: CommandOption[];
+    emptyMessage?: any;
+    loadingMessage?: any;
+    initialMessage?: any;
+}
+
+export interface IAutoCompleteListOptionsPresenter {
+    vm: {
+        options: CommandOptionFormatted[];
+        emptyMessage: any;
+        loadingMessage: any;
+        open: boolean;
+        empty: boolean;
+    };
+    init: (params: IAutoCompleteListOptionsPresenterParams) => void;
+    setListOpenState: (open: boolean) => void;
+    setLoadedOptions: (loaded: boolean) => void;
+    setSelectedOption: (value: string) => void;
+    removeSelectedOption: (value: string) => void;
+    resetSelectedOption: () => void;
+}
+
+export class AutoCompleteListOptionsPresenter implements IAutoCompleteListOptionsPresenter {
+    private open = false;
+    private loadedOptions = false;
+    private emptyMessage = "No results.";
+    private loadingMessage = "Loading...";
+    private initialMessage = "Start typing to find an option.";
+    private options = new ListCache<CommandOption>();
+
+    constructor() {
+        makeAutoObservable(this);
+    }
+
+    init(params: IAutoCompleteListOptionsPresenterParams) {
+        this.options.clear();
+        params.options && this.options.addItems(params.options);
+        this.emptyMessage = params.emptyMessage || this.emptyMessage;
+        this.loadingMessage = params.loadingMessage || this.loadingMessage;
+        this.initialMessage = params.initialMessage || this.initialMessage;
+    }
+
+    get vm() {
+        return {
+            options: this.options.getItems().map(option => CommandOptionFormatter.format(option)),
+            emptyMessage: this.loadedOptions ? this.emptyMessage : this.initialMessage,
+            loadingMessage: this.loadingMessage,
+            open: this.open,
+            empty: !this.options.hasItems()
+        };
+    }
+
+    setListOpenState = (open: boolean) => {
+        this.open = open;
+    };
+
+    setLoadedOptions = (loaded: boolean) => {
+        this.loadedOptions = loaded;
+    };
+
+    setSelectedOption = (value: string) => {
+        this.options.updateItems(option => {
+            option.selected = option.value === value;
+            return option;
+        });
+    };
+
+    removeSelectedOption = (value: string) => {
+        this.options.updateItems(option => {
+            if (option.value === value) {
+                option.selected = false;
+            }
+
+            return option;
+        });
+    };
+
+    resetSelectedOption = () => {
+        this.options.updateItems(option => {
+            option.selected = false;
+            return option;
+        });
+    };
+}
diff --git a/packages/admin-ui/src/AutoComplete/primitives/presenters/AutoCompletePresenter.test.ts b/packages/admin-ui/src/AutoComplete/primitives/presenters/AutoCompletePresenter.test.ts
new file mode 100644
index 00000000000..bb1550b688c
--- /dev/null
+++ b/packages/admin-ui/src/AutoComplete/primitives/presenters/AutoCompletePresenter.test.ts
@@ -0,0 +1,416 @@
+import { AutoCompletePresenter } from "./AutoCompletePresenter";
+import { AutoCompleteInputPresenter } from "./AutoCompleteInputPresenter";
+import { AutoCompleteListOptionsPresenter } from "./AutoCompleteListOptionsPresenter";
+
+describe("AutoCompletePresenter", () => {
+    const inputPresenter = new AutoCompleteInputPresenter();
+    const optionsListPresenter = new AutoCompleteListOptionsPresenter();
+    const presenter = new AutoCompletePresenter(inputPresenter, optionsListPresenter);
+    const onValueChange = jest.fn();
+
+    it("should return the compatible `vm.inputVm` based on params", () => {
+        // `placeholder`
+        {
+            presenter.init({ onValueChange });
+            presenter.initInput({ placeholder: "Custom placeholder" });
+            expect(presenter.vm.inputVm.placeholder).toEqual("Custom placeholder");
+        }
+
+        {
+            // default: no params
+            presenter.init({ onValueChange });
+            presenter.initInput({});
+            expect(presenter.vm.inputVm.placeholder).toEqual("Start typing or select");
+            expect(presenter.vm.inputVm.displayResetAction).toEqual(false);
+        }
+    });
+
+    it("should return the compatible `vm.optionsListVm` based on params", () => {
+        // with `options` as string
+        {
+            presenter.init({ onValueChange, options: ["Option 1", "Option 2"] });
+            expect(presenter.vm.optionsListVm.options).toEqual([
+                {
+                    value: "Option 1",
+                    label: "Option 1",
+                    disabled: false,
+                    selected: false,
+                    separator: false,
+                    item: null
+                },
+                {
+                    value: "Option 2",
+                    label: "Option 2",
+                    disabled: false,
+                    selected: false,
+                    separator: false,
+                    item: null
+                }
+            ]);
+            expect(presenter.vm.optionsListVm.empty).toEqual(false);
+        }
+
+        // with `options` as formatted options
+        {
+            presenter.init({
+                onValueChange,
+                options: [
+                    {
+                        value: "option-1",
+                        label: "Option 1"
+                    },
+                    {
+                        value: "option-2",
+                        label: "Option 2"
+                    },
+                    {
+                        value: "option-3",
+                        label: "Option 3",
+                        disabled: true
+                    },
+                    {
+                        value: "option-4",
+                        label: "Option 4",
+                        separator: true
+                    },
+                    {
+                        value: "option-5",
+                        label: "Option 5",
+                        item: {
+                            anyKey1: "custom-value",
+                            anyKey2: 2
+                        }
+                    }
+                ]
+            });
+
+            expect(presenter.vm.optionsListVm.options).toEqual([
+                {
+                    value: "option-1",
+                    label: "Option 1",
+                    disabled: false,
+                    selected: false,
+                    separator: false,
+                    item: null
+                },
+                {
+                    value: "option-2",
+                    label: "Option 2",
+                    disabled: false,
+                    selected: false, // `selected` is overwritten by the presenter
+                    separator: false,
+                    item: null
+                },
+                {
+                    value: "option-3",
+                    label: "Option 3",
+                    disabled: true,
+                    selected: false,
+                    separator: false,
+                    item: null
+                },
+                {
+                    value: "option-4",
+                    label: "Option 4",
+                    disabled: false,
+                    selected: false,
+                    separator: true,
+                    item: null
+                },
+                {
+                    value: "option-5",
+                    label: "Option 5",
+                    disabled: false,
+                    selected: false,
+                    separator: false,
+                    item: {
+                        anyKey1: "custom-value",
+                        anyKey2: 2
+                    }
+                }
+            ]);
+            expect(presenter.vm.optionsListVm.empty).toEqual(false);
+        }
+
+        // with `options` and `value`
+        {
+            presenter.init({ onValueChange, options: ["Option 1", "Option 2"], value: "Option 1" });
+            expect(presenter.vm.optionsListVm.options).toEqual([
+                {
+                    value: "Option 1",
+                    label: "Option 1",
+                    disabled: false,
+                    selected: true,
+                    separator: false,
+                    item: null
+                },
+                {
+                    value: "Option 2",
+                    label: "Option 2",
+                    disabled: false,
+                    selected: false,
+                    separator: false,
+                    item: null
+                }
+            ]);
+            expect(presenter.vm.optionsListVm.empty).toEqual(false);
+        }
+
+        {
+            // default: no params
+            presenter.init({ onValueChange });
+            expect(presenter.vm.optionsListVm.options).toEqual([]);
+            expect(presenter.vm.optionsListVm.emptyMessage).toEqual(
+                "Start typing to find an option."
+            );
+            expect(presenter.vm.optionsListVm.loadingMessage).toEqual("Loading...");
+            expect(presenter.vm.optionsListVm.open).toEqual(false);
+            expect(presenter.vm.optionsListVm.empty).toEqual(true);
+        }
+    });
+
+    it("should change the `options` state and call `onValueChange` callback when `setSelectedOption` is called", () => {
+        presenter.init({
+            onValueChange,
+            options: [
+                {
+                    label: "Option 1",
+                    value: "option-1"
+                },
+                {
+                    label: "Option 2",
+                    value: "option-2"
+                }
+            ]
+        });
+
+        expect(presenter.vm.optionsListVm.options).toEqual([
+            {
+                label: "Option 1",
+                value: "option-1",
+                disabled: false,
+                selected: false,
+                separator: false,
+                item: null
+            },
+            {
+                label: "Option 2",
+                value: "option-2",
+                disabled: false,
+                selected: false,
+                separator: false,
+                item: null
+            }
+        ]);
+
+        presenter.setSelectedOption("option-2");
+        expect(onValueChange).toHaveBeenCalledWith("option-2");
+        expect(presenter.vm.optionsListVm.options).toEqual([
+            {
+                label: "Option 1",
+                value: "option-1",
+                disabled: false,
+                selected: false,
+                separator: false,
+                item: null
+            },
+            {
+                label: "Option 2",
+                value: "option-2",
+                disabled: false,
+                selected: true,
+                separator: false,
+                item: null
+            }
+        ]);
+    });
+
+    it("should set the internal `inputValue` when `setInputValue` is called", () => {
+        presenter.init({
+            onValueChange
+        });
+
+        presenter.searchOption("value");
+        expect(presenter.vm.inputVm.value).toEqual("value");
+        expect(presenter.vm.inputVm.displayResetAction).toEqual(true);
+    });
+
+    it("should set the option as `selected` when the presenter is initialized with a value", () => {
+        presenter.init({
+            onValueChange,
+            value: "option-1",
+            options: [
+                {
+                    label: "Option 1",
+                    value: "option-1"
+                },
+                {
+                    label: "Option 2",
+                    value: "option-2"
+                }
+            ]
+        });
+
+        presenter.initInput({
+            value: "option-1"
+        });
+
+        expect(presenter.vm.optionsListVm.options).toEqual([
+            {
+                label: "Option 1",
+                value: "option-1",
+                disabled: false,
+                selected: true,
+                separator: false,
+                item: null
+            },
+            {
+                label: "Option 2",
+                value: "option-2",
+                disabled: false,
+                selected: false,
+                separator: false,
+                item: null
+            }
+        ]);
+        expect(presenter.vm.inputVm.value).toEqual("Option 1");
+    });
+
+    it("should reset the internal `options` state call `onValueChange` and `onValueReset` callbacks when `resetValue` is called", () => {
+        const onValueReset = jest.fn();
+        presenter.init({
+            onValueChange,
+            onValueReset,
+            options: [
+                {
+                    label: "Option 1",
+                    value: "option-1"
+                },
+                {
+                    label: "Option 2",
+                    value: "option-2"
+                }
+            ]
+        });
+
+        expect(presenter.vm.optionsListVm.options).toEqual([
+            {
+                label: "Option 1",
+                value: "option-1",
+                disabled: false,
+                selected: false,
+                separator: false,
+                item: null
+            },
+            {
+                label: "Option 2",
+                value: "option-2",
+                disabled: false,
+                selected: false,
+                separator: false,
+                item: null
+            }
+        ]);
+
+        presenter.setSelectedOption("option-1");
+        expect(presenter.vm.optionsListVm.options).toEqual([
+            {
+                label: "Option 1",
+                value: "option-1",
+                disabled: false,
+                selected: true,
+                separator: false,
+                item: null
+            },
+            {
+                label: "Option 2",
+                value: "option-2",
+                disabled: false,
+                selected: false,
+                separator: false,
+                item: null
+            }
+        ]);
+        expect(presenter.vm.inputVm.value).toEqual("Option 1");
+
+        presenter.resetSelectedOption();
+        expect(presenter.vm.optionsListVm.options).toEqual([
+            {
+                label: "Option 1",
+                value: "option-1",
+                disabled: false,
+                selected: false,
+                separator: false,
+                item: null
+            },
+            {
+                label: "Option 2",
+                value: "option-2",
+                disabled: false,
+                selected: false,
+                separator: false,
+                item: null
+            }
+        ]);
+        expect(presenter.vm.inputVm.value).toEqual("");
+
+        expect(onValueChange).toHaveBeenCalledWith("");
+        expect(onValueReset).toHaveBeenCalled();
+    });
+
+    it("should change `optionsListVm` and call `onOpenChange` when `setListOpenState` is called", () => {
+        const onOpenChange = jest.fn();
+
+        // let's open it
+        presenter.init({ onValueChange, onOpenChange });
+        presenter.setListOpenState(true);
+        expect(presenter.vm.optionsListVm.open).toBe(true);
+        expect(onOpenChange).toHaveBeenCalledWith(true);
+
+        // let's close it
+        presenter.setListOpenState(false);
+        expect(presenter.vm.optionsListVm.open).toBe(false);
+        expect(onOpenChange).toHaveBeenCalledWith(false);
+    });
+
+    it("should not display the reset action if `displayResetAction` is set to `false` and option is selected", () => {
+        presenter.init({
+            onValueChange,
+            options: [
+                {
+                    label: "Option 1",
+                    value: "option-1"
+                },
+                {
+                    label: "Option 2",
+                    value: "option-2"
+                }
+            ]
+        });
+
+        presenter.initInput({ displayResetAction: false });
+
+        presenter.setSelectedOption("option-2");
+        expect(onValueChange).toHaveBeenCalledWith("option-2");
+        // `displayResetAction` is set to `false` and option is selected
+        expect(presenter.vm.inputVm.displayResetAction).toEqual(false);
+        expect(presenter.vm.optionsListVm.options).toEqual([
+            {
+                label: "Option 1",
+                value: "option-1",
+                disabled: false,
+                selected: false,
+                separator: false,
+                item: null
+            },
+            {
+                label: "Option 2",
+                value: "option-2",
+                disabled: false,
+                selected: true,
+                separator: false,
+                item: null
+            }
+        ]);
+    });
+});
diff --git a/packages/admin-ui/src/AutoComplete/primitives/presenters/AutoCompletePresenter.ts b/packages/admin-ui/src/AutoComplete/primitives/presenters/AutoCompletePresenter.ts
new file mode 100644
index 00000000000..1d7b476266c
--- /dev/null
+++ b/packages/admin-ui/src/AutoComplete/primitives/presenters/AutoCompletePresenter.ts
@@ -0,0 +1,133 @@
+import { makeAutoObservable } from "mobx";
+import { CommandOption } from "~/Command/domain/CommandOption";
+import {
+    AutoCompleteInputPresenterParams,
+    IAutoCompleteInputPresenter
+} from "./AutoCompleteInputPresenter";
+import { IAutoCompleteListOptionsPresenter } from "./AutoCompleteListOptionsPresenter";
+import { AutoCompleteOption } from "../../domains";
+
+interface AutoCompletePresenterParams {
+    emptyMessage?: any;
+    loadingMessage?: any;
+    initialMessage?: any;
+    onOpenChange?: (open: boolean) => void;
+    onValueChange: (value: string) => void;
+    onValueReset?: () => void;
+    onValueSearch?: (value: string) => void;
+    options?: AutoCompleteOption[];
+    value?: string;
+}
+
+interface IAutoCompletePresenterParams {
+    vm: {
+        inputVm: IAutoCompleteInputPresenter["vm"];
+        optionsListVm: IAutoCompleteListOptionsPresenter["vm"];
+    };
+    init: (params: AutoCompletePresenterParams) => void;
+    initInput: (params: AutoCompleteInputPresenterParams) => void;
+    setListOpenState: (open: boolean) => void;
+    setSelectedOption: (value: string) => void;
+    showSelectedOption: () => void;
+    searchOption: (value: string) => void;
+    resetSelectedOption: () => void;
+}
+
+class AutoCompletePresenter implements IAutoCompletePresenterParams {
+    private params?: AutoCompletePresenterParams = undefined;
+    private inputPresenter: IAutoCompleteInputPresenter;
+    private optionsListPresenter: IAutoCompleteListOptionsPresenter;
+
+    constructor(
+        inputPresenter: IAutoCompleteInputPresenter,
+        optionsListPresenter: IAutoCompleteListOptionsPresenter
+    ) {
+        this.inputPresenter = inputPresenter;
+        this.optionsListPresenter = optionsListPresenter;
+        makeAutoObservable(this);
+    }
+
+    init(params: AutoCompletePresenterParams) {
+        this.params = params;
+
+        const listOptions = this.getListOptions(params.options, params.value);
+        this.optionsListPresenter.init({
+            options: listOptions,
+            emptyMessage: params.emptyMessage,
+            loadingMessage: params.loadingMessage,
+            initialMessage: params.initialMessage
+        });
+    }
+
+    initInput(params: AutoCompleteInputPresenterParams) {
+        const selected = this.getSelectedOption();
+        this.inputPresenter.init({
+            value: selected?.label ?? "",
+            placeholder: params.placeholder,
+            displayResetAction: params.displayResetAction
+        });
+    }
+
+    get vm() {
+        return {
+            inputVm: this.inputPresenter.vm,
+            optionsListVm: this.optionsListPresenter.vm
+        };
+    }
+
+    public setListOpenState = (open: boolean) => {
+        this.optionsListPresenter.setListOpenState(open);
+        this.params?.onOpenChange?.(open);
+    };
+
+    public searchOption = (value: string) => {
+        this.inputPresenter.setValue(value);
+        this.optionsListPresenter.setLoadedOptions(true);
+        this.params?.onValueSearch?.(value);
+    };
+
+    public setSelectedOption = (value: string) => {
+        this.inputPresenter.resetValue();
+        this.optionsListPresenter.resetSelectedOption();
+        this.optionsListPresenter.setSelectedOption(value);
+        const selectedOption = this.getSelectedOption();
+
+        if (selectedOption) {
+            this.inputPresenter.setValue(selectedOption.label);
+            this.params?.onValueChange?.(selectedOption.value);
+        } else {
+            this.params?.onValueChange?.("");
+        }
+    };
+
+    public resetSelectedOption = () => {
+        this.optionsListPresenter.resetSelectedOption();
+        this.inputPresenter.resetValue();
+
+        this.params?.onValueChange?.("");
+        this.params?.onValueReset?.();
+    };
+
+    public showSelectedOption = () => {
+        const selected = this.getSelectedOption();
+        this.inputPresenter.setValue(selected?.label ?? "");
+    };
+
+    private getListOptions(options: AutoCompleteOption[] = [], value?: string): CommandOption[] {
+        return options.map(option => {
+            const commandOption =
+                typeof option === "string"
+                    ? CommandOption.createFromString(option)
+                    : CommandOption.create(option);
+
+            commandOption.selected = commandOption.value === value;
+            return commandOption;
+        });
+    }
+
+    private getSelectedOption() {
+        return this.vm.optionsListVm.options.find(option => option.selected);
+    }
+}
+
+export { AutoCompletePresenter, type AutoCompletePresenterParams };
diff --git a/packages/admin-ui/src/AutoComplete/primitives/presenters/index.ts b/packages/admin-ui/src/AutoComplete/primitives/presenters/index.ts
new file mode 100644
index 00000000000..c8eca1661c4
--- /dev/null
+++ b/packages/admin-ui/src/AutoComplete/primitives/presenters/index.ts
@@ -0,0 +1,3 @@
+export * from "./AutoCompletePresenter";
+export * from "./AutoCompleteInputPresenter";
+export * from "./AutoCompleteListOptionsPresenter";
diff --git a/packages/admin-ui/src/AutoComplete/primitives/useAutoComplete.ts b/packages/admin-ui/src/AutoComplete/primitives/useAutoComplete.ts
new file mode 100644
index 00000000000..d0438f8fc67
--- /dev/null
+++ b/packages/admin-ui/src/AutoComplete/primitives/useAutoComplete.ts
@@ -0,0 +1,79 @@
+import { useEffect, useMemo, useState } from "react";
+import { autorun } from "mobx";
+import { AutoCompletePrimitiveProps } from "./AutoCompletePrimitive";
+import {
+    AutoCompletePresenter,
+    AutoCompletePresenterParams,
+    AutoCompleteInputPresenter,
+    AutoCompleteListOptionsPresenter,
+    AutoCompleteInputPresenterParams
+} from "./presenters";
+
+export const useAutoComplete = (props: AutoCompletePrimitiveProps) => {
+    const params: AutoCompletePresenterParams = useMemo(
+        () => ({
+            options: props.options,
+            value: props.value,
+            emptyMessage: props.emptyMessage,
+            loadingMessage: props.loadingMessage,
+            initialMessage: props.initialMessage,
+            onOpenChange: props.onOpenChange,
+            onValueChange: props.onValueChange,
+            onValueReset: props.onValueReset,
+            onValueSearch: props.onValueSearch
+        }),
+        [
+            props.options,
+            props.value,
+            props.emptyMessage,
+            props.loadingMessage,
+            props.initialMessage,
+            props.onOpenChange,
+            props.onValueChange,
+            props.onValueReset,
+            props.onValueSearch
+        ]
+    );
+
+    const inputParams: AutoCompleteInputPresenterParams = useMemo(
+        () => ({
+            value: props.value,
+            placeholder: props.placeholder,
+            displayResetAction: props.displayResetAction
+        }),
+        [props.value, props.placeholder, props.displayResetAction]
+    );
+
+    const presenter = useMemo(() => {
+        const inputPresenter = new AutoCompleteInputPresenter();
+        const optionsListPresenter = new AutoCompleteListOptionsPresenter();
+        const presenter = new AutoCompletePresenter(inputPresenter, optionsListPresenter);
+        presenter.init(params);
+        return presenter;
+    }, []);
+
+    const [vm, setVm] = useState(presenter.vm);
+
+    useEffect(() => {
+        presenter.init(params);
+    }, [params]);
+
+    useEffect(() => {
+        presenter.initInput(inputParams);
+    }, [inputParams]);
+
+    useEffect(() => {
+        return autorun(() => {
+            setVm(presenter.vm);
+        });
+    }, [presenter]);
+
+    return {
+        vm,
+        setSelectedOption: presenter.setSelectedOption,
+        searchOption: presenter.searchOption,
+        resetSelectedOption: presenter.resetSelectedOption,
+        setListOpenState: presenter.setListOpenState,
+        showSelectedOption: presenter.showSelectedOption
+    };
+};
diff --git a/packages/admin-ui/src/Avatar/Avatar.mdx b/packages/admin-ui/src/Avatar/Avatar.mdx
new file mode 100644
index 00000000000..fa2b65dcf42
--- /dev/null
+++ b/packages/admin-ui/src/Avatar/Avatar.mdx
@@ -0,0 +1,105 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+
+import * as AvatarStories from './Avatar.stories';
+
+<Meta of={AvatarStories} />
+
+# Avatar
+
+The Avatar component is a UI element that displays a user’s profile image, initials, or icon, often used to represent a person or entity in an application. Its purpose is to personalize the user experience, making interactions feel more engaging and identifiable and improve recognition and user interaction.
+
+## Usage
+
+<Canvas of={AvatarStories.Documentation} source={ { code: `
+import React from "react";
+import { Avatar } from "@webiny/admin-ui";
+
+const AvatarExample = () => {
+    return (
+        <Avatar
+            image={<Avatar.Image src="https://i.pravatar.cc/300" alt="User" />}
+            fallback={<Avatar.Fallback>JD</Avatar.Fallback>}
+            size="md"
+            variant="strong"
+        />
+    );
+};
+
+export default AvatarExample;
+
+` } }
+        additionalActions={[
+            {
+                title: 'Open in GitHub',
+                onClick: () => {
+                    window.open(
+                        'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Avatar/Avatar.tsx',
+                        '_blank'
+                    );
+                },
+            }
+        ]}
+/>
+
+<Controls of={AvatarStories.Documentation} />
+
+```tsx
+import React from "react";
+import { Avatar } from "@webiny/admin-ui";
+
+const AvatarExample = () => {
+    return (
+        <Avatar
+            image={<Avatar.Image src="https://i.pravatar.cc/300" alt="User" />}
+            fallback={<Avatar.Fallback>JD</Avatar.Fallback>}
+            size="md"
+            variant="strong"
+        />
+    );
+};
+
+export default AvatarExample;
+```
+
+## Example
+
+### Icon Avatar
+
+<Canvas of={AvatarStories.Icon} source={ { code: `
+import React from "react";
+import { ReactComponent as StormIcon } from "@webiny/icons/storm.svg";
+import { Avatar } from "@webiny/admin-ui";
+
+const AvatarExample = () => {
+    return (
+        <Avatar
+        fallback={<Avatar.Fallback><StormIcon /></Avatar.Fallback>}
+        size="md"
+        variant="strong"
+    />
+    );
+};
+
+export default AvatarExample;
+
+` } }
+/>
+
+## Anatomy
+
+### Size
+<img src="/images/storybook/avatar/size.png" alt="Size"/>
+
+### Type
+<img src="/images/storybook/avatar/type.png" alt="Type"/>
+
+### Style
+<img src="/images/storybook/avatar/style.png" alt="Style"/>
+
+## Usage
+
+### Header
+<img src="/images/storybook/avatar/header.png" alt="Header"/>
+
+### Table
+<img src="/images/storybook/avatar/table.png" alt="Table"/>
diff --git a/packages/admin-ui/src/Avatar/Avatar.stories.tsx b/packages/admin-ui/src/Avatar/Avatar.stories.tsx
new file mode 100644
index 00000000000..52724c869b1
--- /dev/null
+++ b/packages/admin-ui/src/Avatar/Avatar.stories.tsx
@@ -0,0 +1,129 @@
+import * as React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { ReactComponent as StormIcon } from "@webiny/icons/storm.svg";
+import { Avatar } from "./Avatar";
+
+const meta: Meta<typeof Avatar> = {
+    title: "Components/Avatar",
+    component: Avatar,
+    argTypes: {
+        size: {
+            control: "select",
+            options: ["sm", "md", "lg", "xl"],
+            defaultValue: "md"
+        },
+        variant: {
+            control: "select",
+            options: ["strong", "subtle", "light", "quiet", "outlined"],
+            defaultValue: "strong"
+        }
+    }
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Avatar>;
+
+export const Default: Story = {
+    args: {
+        image: <Avatar.Image src="https://i.pravatar.cc/300" alt="@webiny" />,
+        fallback: <Avatar.Fallback delayMs={0}>W</Avatar.Fallback>
+    }
+};
+
+export const SizeSm: Story = {
+    name: "Small",
+    args: {
+        ...Default.args,
+        size: "sm"
+    }
+};
+export const SizeMd: Story = {
+    name: "Medium",
+    args: {
+        ...Default.args,
+        size: "md"
+    }
+};
+
+export const SizeLg: Story = {
+    name: "Large",
+    args: {
+        ...Default.args,
+        size: "lg"
+    }
+};
+
+export const SizeXl: Story = {
+    name: "Extra Large",
+    args: {
+        ...Default.args,
+        size: "xl"
+    }
+};
+
+export const Text: Story = {
+    name: "Fallback Text",
+    args: {
+        fallback: <Avatar.Fallback>SH</Avatar.Fallback>
+    }
+};
+export const Icon: Story = {
+    name: "Icon",
+    args: {
+        fallback: (
+            <Avatar.Fallback>
+                <StormIcon />
+            </Avatar.Fallback>
+        )
+    }
+};
+
+export const Documentation: Story = {
+    render: args => {
+        return (
+            <Avatar
+                {...args}
+                image={args.image || <Avatar.Image src="https://i.pravatar.cc/300" alt="@webiny" />}
+                fallback={args.fallback || <Avatar.Fallback delayMs={0}>W</Avatar.Fallback>}
+            />
+        );
+    },
+    args: {
+        size: "md",
+        variant: "strong",
+        image: undefined,
+        fallback: undefined,
+        className: "commas, separated, class, name"
+    },
+    argTypes: {
+        size: {
+            description: "Controls the size of the avatar",
+            control: "select",
+            options: ["sm", "md", "lg", "xl"],
+            defaultValue: "md"
+        },
+        variant: {
+            description: "Controls the visual style of the avatar",
+            control: "select",
+            options: ["strong", "subtle", "light", "quiet", "outlined"],
+            defaultValue: "strong"
+        },
+        image: {
+            description:
+                "The image element to display. Please refer to the example code for details on usage.",
+            control: "none"
+        },
+        fallback: {
+            description:
+                "The fallback element to display when the image fails to load. Please refer to the example code for details on usage.",
+            control: "none"
+        },
+        className: {
+            description:
+                "Additional CSS class names. You can pass multiple class names, separated by commas.",
+            placeholder: "Enter class names, separated by commas.",
+            control: "text"
+        }
+    }
+};
diff --git a/packages/admin-ui/src/Avatar/Avatar.tsx b/packages/admin-ui/src/Avatar/Avatar.tsx
new file mode 100644
index 00000000000..7c1d555c956
--- /dev/null
+++ b/packages/admin-ui/src/Avatar/Avatar.tsx
@@ -0,0 +1,58 @@
+import * as React from "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import { withStaticProps, cn, makeDecoratable, cva, type VariantProps } from "~/utils";
+import {
+    AvatarFallback,
+    AvatarImage,
+    type AvatarFallbackProps,
+    type AvatarImageProps
+} from "./components";
+
+interface AvatarProps
+    extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>,
+        VariantProps<typeof avatarVariants> {
+    image?: React.ReactElement<AvatarImageProps>;
+    fallback?: React.ReactElement<AvatarFallbackProps>;
+}
+
+const avatarVariants = cva("wby-relative wby-flex wby-shrink-0 wby-overflow-hidden", {
+    variants: {
+        size: {
+            sm: "wby-text-h6 wby-rounded-sm wby-size-[24px] [&_svg]:wby-size-[16px]",
+            md: "wby-text-h6 wby-rounded-md wby-size-[32px] [&_svg]:wby-size-[24px]",
+            lg: "wby-text-h6 wby-rounded-md wby-size-[40px] [&_svg]:wby-size-[24px]",
+            xl: "wby-text-h4 wby-rounded-lg wby-size-[48px] [&_svg]:wby-size-[24px]"
+        },
+        variant: {
+            strong: "wby-bg-primary wby-text-neutral-light [&_svg]:wby-fill-neutral-base",
+            subtle: "wby-bg-neutral-light wby-text-neutral-primary [&_svg]:wby-fill-neutral-xstrong",
+            light: "wby-bg-neutral-dimmed wby-text-neutral-primary [&_svg]:wby-fill-neutral-xstrong",
+            quiet: "wby-bg-transparent wby-text-neutral-primary [&_svg]:wby-fill-neutral-xstrong",
+            outlined:
+                "wby-bg-neutral-base !wby-border-neutral-muted wby-border-sm wby-text-accent-primary [&_svg]:wby-fill-neutral-xstrong"
+        }
+    },
+    defaultVariants: {
+        size: "md",
+        variant: "strong"
+    }
+});
+
+const AvatarBase = ({ image, fallback, className, size, variant, ...props }: AvatarProps) => {
+    return (
+        <AvatarPrimitive.Root
+            className={cn(avatarVariants({ variant, size }), className)}
+            {...props}
+        >
+            {image}
+            {fallback}
+        </AvatarPrimitive.Root>
+    );
+};
+
+const Avatar = withStaticProps(makeDecoratable("Avatar", AvatarBase), {
+    Fallback: AvatarFallback,
+    Image: AvatarImage
+});
+
+export { Avatar, type AvatarProps, type AvatarImageProps, type AvatarFallbackProps };
diff --git a/packages/admin-ui/src/Avatar/components/AvatarFallback.tsx b/packages/admin-ui/src/Avatar/components/AvatarFallback.tsx
new file mode 100644
index 00000000000..bd7d5f17188
--- /dev/null
+++ b/packages/admin-ui/src/Avatar/components/AvatarFallback.tsx
@@ -0,0 +1,19 @@
+import * as React from "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import { cn, makeDecoratable } from "~/utils";
+
+type AvatarFallbackProps = AvatarPrimitive.AvatarFallbackProps;
+
+const AvatarFallbackBase = ({ className, ...props }: AvatarFallbackProps) => (
+    <AvatarPrimitive.Fallback
+        className={cn(
+            "wby-flex wby-h-full wby-w-full wby-items-center wby-justify-center wby-rounded-sm",
+            className
+        )}
+        {...props}
+    />
+);
+
+const AvatarFallback = makeDecoratable("AvatarFallback", AvatarFallbackBase);
+
+export { AvatarFallback, type AvatarFallbackProps };
diff --git a/packages/admin-ui/src/Avatar/components/AvatarImage.tsx b/packages/admin-ui/src/Avatar/components/AvatarImage.tsx
new file mode 100644
index 00000000000..fc893c6979d
--- /dev/null
+++ b/packages/admin-ui/src/Avatar/components/AvatarImage.tsx
@@ -0,0 +1,13 @@
+import * as React from "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import { cn, makeDecoratable } from "~/utils";
+
+type AvatarImageProps = AvatarPrimitive.AvatarImageProps;
+
+const AvatarImageBase = ({ className, ...props }: AvatarImageProps) => (
+    <AvatarPrimitive.Image className={cn("wby-aspect-square", className)} {...props} />
+);
+
+const AvatarImage = makeDecoratable("AvatarImage", AvatarImageBase);
+
+export { AvatarImage, type AvatarImageProps };
diff --git a/packages/admin-ui/src/Avatar/components/index.ts b/packages/admin-ui/src/Avatar/components/index.ts
new file mode 100644
index 00000000000..76431358f5f
--- /dev/null
+++ b/packages/admin-ui/src/Avatar/components/index.ts
@@ -0,0 +1,2 @@
+export * from "./AvatarFallback";
+export * from "./AvatarImage";
diff --git a/packages/admin-ui/src/Avatar/index.ts b/packages/admin-ui/src/Avatar/index.ts
new file mode 100644
index 00000000000..8d3d546e778
--- /dev/null
+++ b/packages/admin-ui/src/Avatar/index.ts
@@ -0,0 +1 @@
+export * from "./Avatar";
diff --git a/packages/admin-ui/src/Button/Button.mdx b/packages/admin-ui/src/Button/Button.mdx
new file mode 100644
index 00000000000..e912d824532
--- /dev/null
+++ b/packages/admin-ui/src/Button/Button.mdx
@@ -0,0 +1,207 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+
+import * as ButtonStories from './Button.stories';
+
+<Meta of={ButtonStories} />
+
+# Button
+
+The Button component is a key UI element that enables users to trigger actions or events, such as submitting forms, navigating pages, or interacting with system functionality. Its purpose is to provide a clear, intuitive way for users to interact with a system. Buttons are relevant in virtually all interfaces, ensuring user engagement by offering a simple, recognizable mechanism for executing commands. They are essential for usability, guiding user behavior and driving application workflows.
+
+## Usage
+
+<Canvas of={ButtonStories.Documentation}
+        source={ { code:
+                ` // Code for a Primary button
+        \n import { Button } from '@webiny/admin-ui';
+        \n <Button variant="primary" text={"Button"}></Button>
+
+` } }
+        additionalActions={[
+            {
+                title: 'Open in GitHub',
+                onClick: () => {
+                    window.open(
+                        'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Button/Button.tsx',
+                        '_blank'
+                    );
+                },
+            }
+        ]}
+/>
+
+<Controls of={ButtonStories.Documentation} exclude={"onClick"} />
+
+```jsx
+import { Button } from '@webiny/admin-ui';
+
+<Button variant="primary" text={"Button"}></Button>
+```
+
+## Examples
+
+### Primary
+
+<Canvas of={ButtonStories.Primary}
+        source={ { code:
+                `// Code for a Primary button
+        \n import { Button } from '@webiny/admin-ui';
+        \n <Button variant="primary" text={"Button"}></Button>
+
+` } }
+/>
+
+
+### Secondary
+
+<Canvas of={ButtonStories.Secondary}
+        source={ { code:
+                `// Code for a Secondary button
+        \n import { Button } from '@webiny/admin-ui';
+        \n <Button variant="secondary" text={"Button"}></Button>
+
+` } }
+/>
+
+### Tertiary
+
+<Canvas of={ButtonStories.Tertiary}
+        source={ { code:
+                `// Code for a Tertiary button
+        \n import { Button } from '@webiny/admin-ui';
+        \n <Button variant="tertiary" text={"Button"}></Button>
+
+` } }
+/>
+
+### Ghost
+
+<Canvas of={ButtonStories.Ghost}
+        source={ { code:
+                `// Code for a Ghost button
+        \n import { Button } from '@webiny/admin-ui';
+        \n <Button variant="ghost" text={"Button"}></Button>
+
+` } }
+/>
+
+### Ghost Negative
+
+<Canvas of={ButtonStories.GhostNegative}
+        source={ { code:
+                `// Code for a Ghost Negative button
+        \n import { Button } from '@webiny/admin-ui';
+        \n <Button variant="ghost-negative" text={"Button"}></Button>
+
+` } }
+/>
+
+### With Icon
+
+<Canvas of={ButtonStories.WithIcon} story={ {inline: false}}
+        source={ { code:
+                `// Code for a With Icon button
+
+                import { Button } from '@webiny/admin-ui';
+                import { ReactComponent as PencilIcon } from "@webiny/icons/edit.svg";
+                \n<Button variant="primary"  text={"Button"} size="md" icon={<PencilIcon />} iconPosition="start"></Button>
+` } }
+/>
+
+
+### As Child
+The Button component can be used as a wrapper for other elements, allowing flexible composition. This is particularly useful when integrating custom text elements, or any other components inside a button.
+
+<Canvas of={ButtonStories.WithAsChild} story={ {inline: false}}
+        source={ { code:
+                `// Code for a As Child button
+\n import { Button } from '@webiny/admin-ui';
+
+                <Button variant="primary" asChild={true}>
+                    <span>Button</span>
+                </Button>
+
+` } }
+/>
+
+### Icon Only Button
+import * as IconButtonStories from './IconButton.stories';
+
+**We have a dedicated `IconButton` component for the Icon-only button. Please check the code below for more details.**
+
+#### Usage
+
+```jsx
+import { IconButton } from '@webiny/admin-ui';
+```
+
+```jsx
+import { ReactComponent as AddIcon } from "@webiny/icons/add.svg"
+<IconButton icon={<AddIcon />} size={"md"}/>
+```
+
+<Canvas of={IconButtonStories.Documentation}
+        source={ { code:
+                ` // Code for a Icon Only Primary button
+        \n import { IconButton } from '@webiny/admin-ui';
+        \n import { ReactComponent as AddIcon } from "@webiny/icons/add.svg"
+        \n <IconButton icon={<AddIcon />} size={"md"}/>
+
+` } }
+        additionalActions={[
+            {
+                title: 'Open in GitHub',
+                onClick: () => {
+                    window.open(
+                        'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Button/Button.tsx',
+                        '_blank'
+                    );
+                },
+            }
+        ]}
+/>
+
+#### Props
+
+<Controls of={IconButtonStories.Documentation} exclude={"onClick"} />
+
+## Anatomy
+
+### Construction
+<img src="/images/storybook/button/contruction.png" alt="Construction"/>
+
+### Options
+<img src="/images/storybook/button/options.png" alt="Options"/>
+
+### Variants
+<img src="/images/storybook/button/type.png" alt="Variants"/>
+
+### Size
+Regular buttons come in four different sizes: small, medium, large, and xl. The medium size is the default and most frequently used option. Use the other sizes sparingly; they should be used to create a hierarchy of importance within the page.
+
+<img src="/images/storybook/button/size.png" alt="Size"/>
+
+**Icon-only button** come in six different sizes to accommodate for various component needs.
+
+<img src="/images/storybook/button/size-icon-only.png" alt="Size - Icon Only"/>
+
+
+### States
+<img src="/images/storybook/button/states.png" alt="States"/>
+
+## Usage
+
+### Icon Usage
+An icon should only be used in a button when it's benefitial and when it has a meaningful association with the label.
+
+<img src="/images/storybook/button/icon-usage.png" alt="Icon Usage"/>
+
+### Use primary buttons sparingly
+Use primary buttons as the desired action for users. Competing primary buttons may leave the user unsure of next steps in their user journey. As a rule of thumb limit primary buttons to 1 in contained UIs and 3 in full page UIs.
+
+<img src="/images/storybook/button/primary-button-usage.png" alt="Primary Button Usage"/>
+
+### Button Group
+When used in groups, buttons should support only maximum of two type variants, with an exception of third variant being ghost extension button (eg. ellipsis). Avoid using random type and icon options within the button groups. Avoid using different sizes within the same group.
+
+<img src="/images/storybook/button/button-group.png" alt="Button Group"/>
\ No newline at end of file
diff --git a/packages/admin-ui/src/Button/Button.stories.tsx b/packages/admin-ui/src/Button/Button.stories.tsx
new file mode 100644
index 00000000000..40837c692f4
--- /dev/null
+++ b/packages/admin-ui/src/Button/Button.stories.tsx
@@ -0,0 +1,163 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { ReactComponent as PencilIcon } from "@webiny/icons/edit.svg";
+import { Button } from "./Button";
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta: Meta<typeof Button> = {
+    title: "Components/Button",
+    component: Button,
+    argTypes: {
+        variant: {
+            description: "Type",
+            control: "select",
+            options: ["primary", "secondary", "tertiary", "ghost", "ghost-negative"],
+            defaultValue: "primary"
+        },
+        size: {
+            description: "Size",
+            control: "select",
+            options: ["sm", "md", "lg", "xl"],
+            defaultValue: "md"
+        },
+        text: {
+            description: "Label",
+            control: "text",
+            defaultValue: "Button"
+        },
+        disabled: {
+            control: "boolean",
+            defaultValue: false
+        },
+        icon: {
+            description: "Please refer to the 'With Icon' button example below for details.",
+            control: "none"
+        },
+        iconPosition: {
+            description: "Please refer to the 'With Icon' button example below for details.",
+            control: "select",
+            defaultValue: "start",
+            options: ["start", "end"]
+        },
+        asChild: {
+            description: "Please refer to the 'As Child' button example below for details.",
+            control: "none"
+        },
+        // Note: after upgrading to Storybook 8.X, use `fn`from `@storybook/test` to spy on the onClick argument.
+        onClick: { action: "onClick" }
+    }
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+export const Primary: Story = {
+    args: {
+        variant: "primary",
+        text: "Button"
+    }
+};
+
+export const Secondary: Story = {
+    args: {
+        ...Primary.args,
+        variant: "secondary"
+    }
+};
+
+export const Tertiary: Story = {
+    args: {
+        ...Primary.args,
+        variant: "tertiary"
+    }
+};
+
+export const Ghost: Story = {
+    args: {
+        ...Primary.args,
+        variant: "ghost"
+    }
+};
+
+export const GhostNegative: Story = {
+    decorators: [
+        (Story: any) => (
+            <div className="wby-bg-[#25292e] wby-p-[50px] wby-rounded-[5px]">
+                <Story />
+            </div>
+        )
+    ],
+    args: {
+        ...Primary.args,
+        variant: "ghost-negative"
+    }
+};
+
+export const Small: Story = {
+    args: {
+        ...Primary.args,
+        size: "sm"
+    }
+};
+
+export const Medium: Story = {
+    args: {
+        ...Primary.args,
+        size: "md"
+    }
+};
+
+export const Large: Story = {
+    args: {
+        ...Primary.args,
+        size: "lg"
+    }
+};
+
+export const ExtraLarge: Story = {
+    args: {
+        ...Primary.args,
+        size: "xl"
+    }
+};
+
+export const WithIcon: Story = {
+    args: {
+        ...Primary.args,
+        icon: <PencilIcon />
+    }
+};
+
+export const WithIconPositionEnd: Story = {
+    args: {
+        ...Primary.args,
+        icon: <PencilIcon />,
+        iconPosition: "end"
+    }
+};
+
+export const WithAsChild: Story = {
+    args: {
+        ...Primary.args,
+        asChild: true,
+        text: <span>Button</span>
+    }
+};
+
+/* The Documentation story is created for the Docs page.
+ * The description column for the `iconPosition` and `icon` props displays
+ * an extra dash (-), and the formatting breaks unless defined in the story.
+ * Hence, this Documentation story was created.
+ */
+
+export const Documentation: Story = {
+    args: {
+        variant: "primary",
+        text: "Button",
+        size: "md",
+        disabled: false,
+        icon: "",
+        iconPosition: "start",
+        asChild: false
+    }
+};
diff --git a/packages/admin-ui/src/Button/Button.tsx b/packages/admin-ui/src/Button/Button.tsx
new file mode 100644
index 00000000000..44a8e9d9f97
--- /dev/null
+++ b/packages/admin-ui/src/Button/Button.tsx
@@ -0,0 +1,229 @@
+import React, { useMemo } from "react";
+import { Slot, Slottable } from "@radix-ui/react-slot";
+import { cn, cva, type VariantProps, makeDecoratable } from "~/utils";
+
+const buttonWrapperVariants = cva("wby-inline-block", {
+    variants: {
+        disabled: {
+            true: "wby-cursor-not-allowed",
+            false: "wby-cursor-pointer"
+        }
+    }
+});
+
+const buttonVariants = cva(
+    [
+        "wby-border-transparent wby-rounded wby-font-sans wby-inline-flex wby-items-center wby-justify-center wby-whitespace-nowrap wby-ring-offset-background wby-transition-colors !wby-no-underline",
+        "aria-disabled:wby-pointer-events-none",
+        "focus-visible:wby-outline-none focus-visible:wby-border-accent-default"
+    ],
+    {
+        variants: {
+            variant: {
+                primary: [
+                    "wby-bg-primary wby-text-neutral-light wby-fill-neutral-base",
+                    "hover:wby-bg-primary-strong",
+                    "active:wby-bg-primary-xstrong",
+                    "aria-disabled:wby-bg-primary-disabled",
+                    "focus-visible:wby-ring-lg focus-visible:wby-ring-primary-dimmed"
+                ],
+                secondary: [
+                    "wby-bg-neutral-dimmed wby-text-neutral-strong wby-fill-neutral-xstrong",
+                    "hover:wby-bg-neutral-muted",
+                    "active:wby-bg-neutral-strong",
+                    "aria-disabled:wby-bg-neutral-disabled aria-disabled:wby-text-neutral-disabled aria-disabled:wby-fill-neutral-strong",
+                    "focus-visible:wby-ring-lg focus-visible:wby-ring-primary-dimmed"
+                ],
+                tertiary: [
+                    "wby-bg-neutral-base wby-text-neutral-strong wby-border-neutral-muted wby-fill-neutral-xstrong",
+                    "hover:wby-bg-neutral-light",
+                    "active:wby-bg-neutral-muted",
+                    "aria-disabled:wby-bg-neutral-disabled aria-disabled:wby-border-neutral-dimmed aria-disabled:wby-text-neutral-disabled aria-disabled:wby-fill-neutral-strong",
+                    "focus-visible:wby-ring-lg focus-visible:wby-ring-primary-dimmed"
+                ],
+                ghost: [
+                    "wby-text-neutral-strong wby-fill-neutral-xstrong",
+                    "hover:wby-bg-neutral-dimmed",
+                    "active:wby-bg-neutral-muted",
+                    "aria-disabled:wby-text-neutral-disabled aria-disabled:wby-fill-neutral-strong"
+                ],
+                "ghost-negative": [
+                    "wby-text-neutral-light wby-fill-neutral-base",
+                    "hover:wby-bg-neutral-base/20",
+                    "active:wby-bg-neutral-base/30",
+                    "aria-disabled:wby-text-neutral-disabled aria-disabled:wby-fill-neutral-base/50",
+                    "focus-visible:!wby-border-neutral-base"
+                ]
+            },
+            size: {
+                sm: [
+                    "wby-text-sm wby-border-sm wby-rounded-sm [&>svg]:wby-size-md",
+                    "wby-py-[calc(theme(padding.xs)-theme(borderWidth.sm))] wby-px-[calc(theme(padding.sm)-theme(borderWidth.sm))]"
+                ],
+                md: [
+                    "wby-text-md wby-border-sm wby-rounded-md [&>svg]:wby-size-md",
+                    "wby-py-[calc(theme(padding.xs-plus)-theme(borderWidth.sm))] wby-px-[calc(theme(padding.sm-extra)-theme(borderWidth.sm))]"
+                ],
+                lg: [
+                    "wby-text-md wby-border-sm wby-rounded-md [&>svg]:wby-size-md-plus",
+                    "wby-py-[calc(theme(padding.sm-plus)-theme(borderWidth.sm))] wby-px-[calc(theme(padding.md)-theme(borderWidth.sm))]"
+                ],
+                xl: [
+                    "wby-text-lg wby-font-semibold wby-border-lg wby-rounded-md [&>svg]:wby-size-lg",
+                    "wby-py-[calc(theme(padding.md-plus)-theme(borderWidth.md))] wby-px-[calc(theme(padding.md)-theme(borderWidth.md))]"
+                ]
+            },
+            contentLayout: {
+                text: "",
+                icon: "",
+                "text-icon-start": "",
+                "text-icon-end": ""
+            }
+        },
+        compoundVariants: [
+            {
+                size: "xl",
+                variant: "ghost",
+                className: "focus-visible:wby-border-md"
+            },
+            {
+                size: "sm",
+                contentLayout: "icon",
+                className: "wby-p-[calc(theme(padding.xs)-theme(borderWidth.sm))]"
+            },
+            {
+                size: "sm",
+                contentLayout: "text-icon-start",
+                className:
+                    "wby-pl-[calc(theme(padding.xs)-theme(borderWidth.sm))] [&>svg]:wby-mr-xs"
+            },
+            {
+                size: "sm",
+                contentLayout: "text-icon-end",
+                className:
+                    "wby-pr-[calc(theme(padding.xs)-theme(borderWidth.sm))] [&>svg]:wby-ml-xs"
+            },
+            {
+                size: "md",
+                contentLayout: "icon",
+                className: "wby-p-[calc(theme(padding.sm)-theme(borderWidth.sm))]"
+            },
+            {
+                size: "md",
+                contentLayout: "text-icon-start",
+                className:
+                    "wby-pl-[calc(theme(padding.xs-plus)-theme(borderWidth.sm))] [&>svg]:wby-mr-xs"
+            },
+            {
+                size: "md",
+                contentLayout: "text-icon-end",
+                className:
+                    "wby-pr-[calc(theme(padding.xs-plus)-theme(borderWidth.sm))] [&>svg]:wby-ml-xs"
+            },
+            {
+                size: "lg",
+                contentLayout: "icon",
+                className: "wby-p-[calc(theme(padding.sm-plus)-theme(borderWidth.sm))]"
+            },
+            {
+                size: "lg",
+                contentLayout: "text-icon-start",
+                className:
+                    "wby-pl-[calc(theme(padding.sm-extra)-theme(borderWidth.sm))] [&>svg]:wby-mr-xs-plus"
+            },
+            {
+                size: "lg",
+                contentLayout: "text-icon-end",
+                className:
+                    "wby-pr-[calc(theme(padding.sm-extra)-theme(borderWidth.sm))] [&>svg]:wby-ml-xs-plus"
+            },
+            {
+                size: "xl",
+                contentLayout: "icon",
+                className: "wby-p-[calc(theme(padding.md)-theme(borderWidth.md))]"
+            },
+            {
+                size: "xl",
+                contentLayout: "text-icon-start",
+                className:
+                    "wby-pl-[calc(theme(padding.sm-extra)-theme(borderWidth.md))] [&>svg]:wby-mr-sm"
+            },
+            {
+                size: "xl",
+                contentLayout: "text-icon-end",
+                className:
+                    "wby-pr-[calc(theme(padding.sm-extra)-theme(borderWidth.md))] [&>svg]:wby-ml-sm"
+            }
+        ],
+        defaultVariants: {
+            variant: "primary",
+            size: "md"
+        }
+    }
+);
+
+interface ButtonProps
+    extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children">,
+        VariantProps<typeof buttonVariants> {
+    text?: React.ReactNode;
+
+    icon?: React.ReactNode;
+
+    iconPosition?: "start" | "end";
+
+    asChild?: boolean;
+
+    containerClassName?: string;
+}
+
+type ContentLayout = "text" | "icon" | "text-icon-start" | "text-icon-end";
+
+const ButtonBase = ({
+    className,
+    variant,
+    size,
+    asChild = false,
+    text,
+    icon,
+    iconPosition = "start",
+    disabled,
+    containerClassName,
+    ...rest
+}: ButtonProps) => {
+    const Comp = asChild ? Slot : "button";
+
+    const contentLayout = useMemo<ContentLayout>(() => {
+        if (!text) {
+            return "icon";
+        }
+
+        if (!icon) {
+            return "text";
+        }
+
+        return `text-icon-${iconPosition}` as ContentLayout;
+    }, [text, icon, iconPosition]);
+
+    const cssClasses = cn(
+        buttonVariants({
+            variant,
+            size,
+            contentLayout
+        }),
+        className
+    );
+
+    return (
+        <span className={cn(buttonWrapperVariants({ disabled }), containerClassName)}>
+            <Comp className={cssClasses} disabled={disabled} aria-disabled={disabled} {...rest}>
+                {iconPosition !== "end" && icon}
+                <Slottable>{text}</Slottable>
+                {iconPosition === "end" && icon}
+            </Comp>
+        </span>
+    );
+};
+
+const Button = makeDecoratable("Button", ButtonBase);
+
+export { Button, type ButtonProps, buttonVariants };
diff --git a/packages/admin-ui/src/Button/CopyButton.tsx b/packages/admin-ui/src/Button/CopyButton.tsx
new file mode 100644
index 00000000000..92c19afd971
--- /dev/null
+++ b/packages/admin-ui/src/Button/CopyButton.tsx
@@ -0,0 +1,33 @@
+import React, { useCallback } from "react";
+import { ReactComponent as CopyToClipboardIcon } from "@webiny/icons/content_copy.svg";
+import { ButtonProps, Button } from "./Button";
+import { makeDecoratable } from "../utils";
+
+interface CopyButtonProps extends ButtonProps {
+    /**
+     * Value to copy to clipboard.
+     */
+    value: string;
+
+    /**
+     * Callback function that is executed after the value is copied to the clipboard.
+     */
+    onCopy?: () => void;
+}
+
+const CopyButtonBase = (props: CopyButtonProps) => {
+    const { value, onCopy, ...rest } = props;
+
+    const copyToClipboard = useCallback(() => {
+        navigator.clipboard.writeText(value);
+        if (typeof onCopy === "function") {
+            onCopy();
+        }
+    }, [value]);
+
+    return <Button {...rest} onClick={copyToClipboard} icon={<CopyToClipboardIcon />} />;
+};
+
+const CopyButton = makeDecoratable("CopyButton", CopyButtonBase);
+
+export { CopyButton, type CopyButtonProps };
diff --git a/packages/admin-ui/src/Button/IconButton.stories.tsx b/packages/admin-ui/src/Button/IconButton.stories.tsx
new file mode 100644
index 00000000000..4d663c23000
--- /dev/null
+++ b/packages/admin-ui/src/Button/IconButton.stories.tsx
@@ -0,0 +1,173 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { ReactComponent as AddIcon } from "@webiny/icons/add.svg";
+import { IconButton } from "./IconButton";
+
+const meta: Meta<typeof IconButton> = {
+    title: "Components/Icon Button",
+    component: IconButton,
+    tags: ["!autodocs"],
+    argTypes: {
+        variant: {
+            description: "Type",
+            control: "select",
+            options: ["primary", "secondary", "tertiary", "ghost", "ghost-negative"],
+            defaultValue: "primary"
+        },
+        size: {
+            description: "Size",
+            control: "select",
+            options: ["xxs", "xs", "sm", "md", "lg", "xl"],
+            defaultValue: "md"
+        },
+        iconSize: {
+            description: "Icon Size",
+            control: "select",
+            options: ["default", "lg"],
+            defaultValue: "default"
+        },
+        disabled: {
+            description: "State",
+            control: "boolean",
+            defaultValue: false
+        },
+        icon: {
+            description: "Please refer to the example above for usage information.",
+            control: "none"
+        },
+        onClick: { action: "onClick" }
+    }
+};
+
+export default meta;
+type Story = StoryObj<typeof IconButton>;
+
+export const Primary: Story = {
+    args: {
+        variant: "primary",
+        icon: <AddIcon />
+    }
+};
+
+export const Secondary: Story = {
+    args: {
+        ...Primary.args,
+        variant: "secondary"
+    }
+};
+
+export const Tertiary: Story = {
+    args: {
+        ...Primary.args,
+        variant: "tertiary"
+    }
+};
+
+export const Ghost: Story = {
+    args: {
+        ...Primary.args,
+        variant: "ghost"
+    }
+};
+
+export const GhostNegative: Story = {
+    decorators: [
+        Story => (
+            <div className="wby-bg-[#25292e] wby-p-[300px] wby-rounded-[5px]">
+                <Story />
+            </div>
+        )
+    ],
+    args: {
+        ...Primary.args,
+        variant: "ghost-negative"
+    }
+};
+
+export const DoubleExtraSmall: Story = {
+    args: {
+        ...Primary.args,
+        size: "xxs"
+    }
+};
+
+export const ExtraSmall: Story = {
+    args: {
+        ...Primary.args,
+        size: "xs"
+    }
+};
+
+export const Small: Story = {
+    args: {
+        ...Primary.args,
+        size: "sm"
+    }
+};
+
+export const SmallWithLargeIcon: Story = {
+    args: {
+        ...Primary.args,
+        size: "sm",
+        iconSize: "lg"
+    }
+};
+
+export const Medium: Story = {
+    args: {
+        ...Primary.args,
+        size: "md"
+    }
+};
+
+export const MediumWithLargeIcon: Story = {
+    args: {
+        ...Primary.args,
+        size: "md",
+        iconSize: "lg"
+    }
+};
+
+export const Large: Story = {
+    args: {
+        ...Primary.args,
+        size: "lg"
+    }
+};
+
+export const LargeWithLargeIcon: Story = {
+    args: {
+        ...Primary.args,
+        size: "lg",
+        iconSize: "lg"
+    }
+};
+
+export const ExtraLarge: Story = {
+    args: {
+        ...Primary.args,
+        size: "xl"
+    }
+};
+
+export const WithAsChild: Story = {
+    args: {
+        ...Primary.args,
+        asChild: true,
+        icon: (
+            <span>
+                <AddIcon />
+            </span>
+        )
+    }
+};
+
+export const Documentation: Story = {
+    args: {
+        variant: "primary",
+        size: "md",
+        disabled: false,
+        icon: <AddIcon />,
+        iconSize: "default"
+    }
+};
diff --git a/packages/admin-ui/src/Button/IconButton.tsx b/packages/admin-ui/src/Button/IconButton.tsx
new file mode 100644
index 00000000000..2d47d3ae8aa
--- /dev/null
+++ b/packages/admin-ui/src/Button/IconButton.tsx
@@ -0,0 +1,158 @@
+import React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cn, cva, type VariantProps, makeDecoratable } from "~/utils";
+
+const iconButtonWrapperVariants = cva("wby-inline-block", {
+    variants: {
+        disabled: {
+            true: "wby-cursor-not-allowed",
+            false: "wby-cursor-pointer"
+        }
+    }
+});
+
+const iconButtonVariants = cva(
+    [
+        "wby-border-transparent wby-rounded wby-flex wby-flex-shrink-0 wby-items-center wby-justify-center wby-ring-offset-background wby-transition-colors",
+        "[&_svg]:wby-pointer-events-none [&_svg]:wby-shrink-0",
+        "[&_img]:wby-pointer-events-none [&_img]:wby-shrink-0",
+        "aria-disabled:wby-pointer-events-none",
+        "focus-visible:wby-outline-none focus-visible:wby-border-accent-default"
+    ],
+    {
+        variants: {
+            variant: {
+                primary: [
+                    "wby-bg-primary wby-fill-neutral-base",
+                    "hover:wby-bg-primary-strong",
+                    "active:wby-bg-primary-xstrong",
+                    "aria-disabled:wby-bg-primary-disabled",
+                    "focus-visible:wby-ring-lg focus-visible:wby-ring-primary-dimmed"
+                ],
+                secondary: [
+                    "wby-bg-neutral-dimmed wby-fill-neutral-xstrong",
+                    "hover:wby-bg-neutral-muted",
+                    "active:wby-bg-neutral-strong",
+                    "aria-disabled:wby-bg-neutral-disabled aria-disabled:wby-fill-neutral-strong",
+                    "focus-visible:wby-ring-lg focus-visible:wby-ring-primary-dimmed"
+                ],
+                tertiary: [
+                    "wby-bg-neutral-base wby-border-neutral-muted wby-fill-neutral-xstrong",
+                    "hover:wby-bg-neutral-light",
+                    "active:wby-bg-neutral-muted",
+                    "aria-disabled:wby-bg-neutral-disabled aria-disabled:wby-fill-neutral-strong aria-disabled:wby-border-neutral-dimmed",
+                    "focus-visible:wby-ring-lg focus-visible:wby-ring-primary-dimmed"
+                ],
+                ghost: [
+                    "wby-fill-neutral-xstrong",
+                    "hover:wby-bg-neutral-dimmed",
+                    "active:wby-bg-neutral-muted",
+                    "aria-disabled:wby-fill-neutral-strong hover:aria-disabled:wby-bg-transparent active:aria-disabled:wby-bg-transparent"
+                ],
+                "ghost-negative": [
+                    "wby-fill-neutral-base",
+                    "hover:wby-bg-neutral-base/20",
+                    "active:wby-bg-neutral-base/30",
+                    "focus-visible:!wby-border-neutral-base",
+                    "aria-disabled:wby-fill-neutral-base aria-disabled:wby-opacity-50 hover:aria-disabled:wby-bg-transparent active:aria-disabled:wby-bg-transparent"
+                ]
+            },
+            size: {
+                xxs: "wby-border-sm wby-rounded-xs wby-size-sm-extra [&_svg]:wby-size-md [&_img]:wby-size-md",
+                xs: "wby-border-sm wby-rounded-xs wby-size-md [&_svg]:wby-size-md [&_img]:wby-size-md",
+                sm: "wby-border-sm wby-rounded-sm",
+                md: "wby-border-sm wby-rounded-md",
+                lg: "wby-border-sm wby-rounded-md",
+                xl: "wby-border-md wby-rounded-lg wby-p-[calc(theme(padding.md)-theme(borderWidth.md))] [&_svg]:wby-size-lg [&_img]:wby-size-lg"
+            },
+            iconSize: {
+                default: "",
+                lg: ""
+            }
+        },
+        compoundVariants: [
+            {
+                size: "xl",
+                variant: "ghost",
+                className: "focus-visible:wby-border-md"
+            },
+            {
+                size: "sm",
+                iconSize: "default",
+                className:
+                    "wby-p-[calc(theme(padding.xs)-theme(borderWidth.sm))] [&_svg]:wby-size-md [&_img]:wby-size-md"
+            },
+            {
+                size: "sm",
+                iconSize: "lg",
+                className:
+                    "wby-p-[calc(theme(padding.xxs)-theme(borderWidth.sm))] [&_svg]:wby-size-md-plus [&_img]:wby-size-md-plus"
+            },
+            {
+                size: "md",
+                iconSize: "default",
+                className:
+                    "wby-p-[calc(theme(padding.sm)-theme(borderWidth.sm))] [&_svg]:wby-size-md [&_img]:wby-size-md"
+            },
+            {
+                size: "md",
+                iconSize: "lg",
+                className:
+                    "wby-p-[calc(theme(padding.xs)-theme(borderWidth.sm))] [&_svg]:wby-size-lg [&_img]:wby-size-lg"
+            },
+            {
+                size: "lg",
+                iconSize: "default",
+                className:
+                    "wby-p-[calc(theme(padding.sm-plus)-theme(borderWidth.sm))] [&_svg]:wby-size-md-plus [&_img]:wby-size-md-plus"
+            },
+            {
+                size: "lg",
+                iconSize: "lg",
+                className:
+                    "wby-p-[calc(theme(padding.sm)-theme(borderWidth.sm))] [&_svg]:wby-size-lg [&_img]:wby-size-lg"
+            }
+        ],
+        defaultVariants: {
+            variant: "primary",
+            size: "md",
+            iconSize: "default"
+        }
+    }
+);
+
+interface IconButtonProps
+    extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children">,
+        VariantProps<typeof iconButtonVariants> {
+    icon?: React.ReactNode;
+    asChild?: boolean;
+}
+
+const DecoratableIconButton = ({
+    className,
+    variant,
+    size,
+    icon,
+    iconSize,
+    asChild = false,
+    disabled,
+    ...props
+}: IconButtonProps) => {
+    const Comp = asChild ? Slot : "button";
+    return (
+        <span className={cn(iconButtonWrapperVariants({ disabled }))}>
+            <Comp
+                {...props}
+                className={cn(iconButtonVariants({ variant, size, iconSize }), className)}
+                disabled={disabled}
+                aria-disabled={disabled}
+            >
+                {icon}
+            </Comp>
+        </span>
+    );
+};
+
+const IconButton = makeDecoratable("IconButton", DecoratableIconButton);
+
+export { IconButton, type IconButtonProps, iconButtonVariants };
diff --git a/packages/admin-ui/src/Button/index.ts b/packages/admin-ui/src/Button/index.ts
new file mode 100644
index 00000000000..ef3af1d4d32
--- /dev/null
+++ b/packages/admin-ui/src/Button/index.ts
@@ -0,0 +1,3 @@
+export * from "./Button";
+export * from "./CopyButton";
+export * from "./IconButton";
diff --git a/packages/admin-ui/src/Card/Card.mdx b/packages/admin-ui/src/Card/Card.mdx
new file mode 100644
index 00000000000..1257992ee91
--- /dev/null
+++ b/packages/admin-ui/src/Card/Card.mdx
@@ -0,0 +1,127 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+
+import * as CardStories from './Card.stories';
+
+<Meta of={CardStories} />
+
+# Cards
+
+A Card component in design systems is a versatile UI element used to encapsulate content and actions about a single subject. It serves as a modular container that can include images, text, links, buttons, and other interactive elements. Cards are designed to present information in a concise and organized manner, making it easier for users to scan and interact with multiple pieces of content.
+
+## Usage
+
+<Canvas of={CardStories.Documentation} source={ { code: `
+import React from 'react';
+import { Card, Button, IconButton, Icon } from '@webiny/admin-ui';
+import { ReactComponent as MoreVertical } from "@webiny/icons/more_vert.svg";
+
+const CardExample = () => {
+    return (
+        <Card
+            title="Card title"
+            description="Card description"
+            padding="standard"
+            elevation="sm"
+            borderRadius="md"
+            actions={
+                <>
+                    <Button variant="secondary" text="Cancel" />
+                    <Button variant="primary" text="Confirm" />
+                </>
+            }
+            options={
+                <IconButton
+                    variant={"ghost"}
+                    icon={<Icon icon={<MoreVertical />} label={"More options"} />}
+                    size={"sm"}
+                    iconSize={"lg"}
+                    onClick={() => alert("Custom action button clicked.")}
+                />
+            }
+        >
+            This is card content. Anything can go in here.
+        </Card>
+    );
+};
+
+export default CardExample;
+
+` } }
+        additionalActions={[
+            {
+                title: 'Open in GitHub',
+                onClick: () => {
+                    window.open(
+                        'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Card/Card.tsx',
+                        '_blank'
+                    );
+                },
+            }
+        ]}
+/>
+
+<Controls of={CardStories.Documentation} />
+
+```tsx
+import React from 'react';
+import { Card, Button, IconButton, Icon } from '@webiny/admin-ui';
+import { ReactComponent as MoreVertical } from "@webiny/icons/more_vert.svg";
+
+const CardExample = () => {
+    return (
+        <Card
+            title="Card title"
+            description="Card description"
+            padding="standard"
+            elevation="sm"
+            borderRadius="md"
+            actions={
+                <>
+                    <Button variant="secondary" text="Cancel" />
+                    <Button variant="primary" text="Confirm" />
+                </>
+            }
+            options={
+                <IconButton
+                    variant={"ghost"}
+                    icon={<Icon icon={<MoreVertical />} label={"More options"} />}
+                    size={"sm"}
+                    iconSize={"lg"}
+                    onClick={() => alert("Custom action button clicked.")}
+                />
+            }
+        >
+            This is card content. Anything can go in here.
+        </Card>
+    );
+};
+
+export default CardExample;
+```
+
+
+## Anatomy
+
+### Construction
+Depending on the content type and card usage, there are several elevation options available.
+
+<img src="/images/storybook/card/construction.png" alt="Construction"/>
+
+### Elevation
+
+<img src="/images/storybook/card/elevation.png" alt="Elevation"/>
+
+### Radius
+Depending on the content type and card usage, there are three basic paddings options to consider. Border radius can vary from 4px - 12px
+
+<img src="/images/storybook/card/radius.png" alt="Radius"/>
+
+### Padding
+
+<img src="/images/storybook/card/padding.png" alt="Padding"/>
+
+## Usage
+
+### Stacked
+
+<img src="/images/storybook/card/stacked.png" alt="Stacked"/>
diff --git a/packages/admin-ui/src/Card/Card.stories.tsx b/packages/admin-ui/src/Card/Card.stories.tsx
new file mode 100644
index 00000000000..bb87ec10f59
--- /dev/null
+++ b/packages/admin-ui/src/Card/Card.stories.tsx
@@ -0,0 +1,183 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { ReactComponent as MoreVertical } from "@webiny/icons/more_vert.svg";
+import { Card } from "./Card";
+import { Button, IconButton } from "~/Button";
+import { Icon } from "~/Icon";
+
+const meta: Meta<typeof Card> = {
+    title: "Components/Card",
+    component: Card,
+    decorators: [
+        Story => (
+            <div className="wby-bg-[#f4f4f4] wby-h-[500px] wby-w-[700px] wby-rounded-[5px] wby-px-[50px] wby-content-center">
+                <div className={"wby-m-auto wby-w-[300px]"}>
+                    <Story />
+                </div>
+            </div>
+        )
+    ]
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Card>;
+
+export const Default: Story = {
+    args: {
+        title: "Card title goes here",
+        description: "Card description goes here",
+        children: <>This is card content. Anything can go in here.</>,
+        actions: (
+            <>
+                <Button variant={"secondary"} text={"Cancel"} />
+                <Button variant={"primary"} text={"Confirm"} />
+            </>
+        ),
+        padding: "standard",
+        elevation: "sm",
+        borderRadius: "md"
+    },
+    argTypes: {
+        padding: {
+            control: "select",
+            options: ["none", "standard", "comfortable"]
+        },
+        elevation: {
+            control: "select",
+            options: ["none", "xs", "sm", "md", "lg", "xl"]
+        },
+        borderRadius: {
+            control: "select",
+            options: ["none", "sm", "md", "lg"]
+        }
+    }
+};
+
+export const NoTitleDescriptionActionsHeaderAndFooter: Story = {
+    name: "Only Body (Without Body, Title, Actions)",
+    args: {
+        children: <>This is card content. Anything can go in here.</>
+    }
+};
+
+export const WithMorePadding: Story = {
+    args: {
+        ...Default.args,
+        actions: null,
+        padding: "comfortable"
+    }
+};
+
+export const WithMoreElevation: Story = {
+    args: {
+        ...Default.args,
+        actions: null,
+        elevation: "md"
+    }
+};
+
+export const NoElevation: Story = {
+    args: {
+        ...Default.args,
+        actions: null,
+        elevation: "none"
+    }
+};
+
+export const NoBorderRadius: Story = {
+    args: {
+        ...Default.args,
+        actions: null,
+        borderRadius: "none"
+    }
+};
+
+export const WithOptions: Story = {
+    args: {
+        ...Default.args,
+        actions: null,
+        options: (
+            <IconButton
+                variant={"ghost"}
+                icon={<Icon icon={<MoreVertical />} label={"More options"} />}
+                size={"sm"}
+                iconSize={"lg"}
+                onClick={() => alert("Custom action button clicked.")}
+            />
+        )
+    }
+};
+
+export const WithActions: Story = {
+    args: Default.args
+};
+
+export const Documentation: Story = {
+    render: args => {
+        return <Card {...args} />;
+    },
+    args: {
+        title: "Card title goes here",
+        description: "Card description goes here",
+        children: <>This is card content. Anything can go in here.</>,
+        actions: (
+            <>
+                <Button variant={"secondary"} text={"Cancel"} />
+                <Button variant={"primary"} text={"Confirm"} />
+            </>
+        ),
+        padding: "standard",
+        elevation: "sm",
+        borderRadius: "md",
+        options: (
+            <IconButton
+                variant={"ghost"}
+                icon={<Icon icon={<MoreVertical />} label={"More options"} />}
+                size={"sm"}
+                iconSize={"lg"}
+                onClick={() => alert("Custom action button clicked.")}
+            />
+        )
+    },
+    argTypes: {
+        title: {
+            description: "The title displayed at the top of the card",
+            control: "text"
+        },
+        description: {
+            description: "A description displayed below the title",
+            control: "text"
+        },
+        children: {
+            description:
+                "The main content of the card. Please refer to the example code for details on usage.",
+            control: "none"
+        },
+        actions: {
+            description:
+                "Buttons or other interactive elements displayed at the bottom of the card. Please refer to the example code for details on usage.",
+            control: "none"
+        },
+        options: {
+            description:
+                "Additional options or actions displayed in the top-right corner. Please refer to the example code for details on usage.",
+            control: "none"
+        },
+        padding: {
+            description: "Controls the amount of padding inside the card",
+            control: "select",
+            options: ["none", "standard", "comfortable"]
+        },
+        elevation: {
+            description: "Controls the shadow depth of the card",
+            control: "select",
+            options: ["none", "xs", "sm", "md", "lg", "xl"]
+        },
+        borderRadius: {
+            description: "Controls the roundness of the card corners",
+            control: "select",
+            options: ["none", "sm", "md", "lg"]
+        }
+    }
+};
diff --git a/packages/admin-ui/src/Card/Card.tsx b/packages/admin-ui/src/Card/Card.tsx
new file mode 100644
index 00000000000..838ebe7ef07
--- /dev/null
+++ b/packages/admin-ui/src/Card/Card.tsx
@@ -0,0 +1,32 @@
+import React from "react";
+import { makeDecoratable, type VariantProps } from "~/utils";
+import {
+    CardFooter,
+    CardHeader,
+    CardRoot,
+    type CardRootProps,
+    cardRootVariants
+} from "./components";
+
+interface CardProps extends CardRootProps, VariantProps<typeof cardRootVariants> {
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    actions?: React.ReactNode;
+    options?: React.ReactNode;
+}
+
+const CardBase = (props: CardProps) => {
+    const { title, description, actions, children, options, ...rest } = props;
+
+    return (
+        <CardRoot {...rest}>
+            <CardHeader title={title} description={description} options={options} />
+            {children}
+            <CardFooter actions={actions} />
+        </CardRoot>
+    );
+};
+
+const Card = makeDecoratable("Card", CardBase);
+
+export { Card, type CardProps };
diff --git a/packages/admin-ui/src/Card/components/CardFooter.tsx b/packages/admin-ui/src/Card/components/CardFooter.tsx
new file mode 100644
index 00000000000..c63593c51ba
--- /dev/null
+++ b/packages/admin-ui/src/Card/components/CardFooter.tsx
@@ -0,0 +1,14 @@
+import React from "react";
+import { CardProps } from "~/Card";
+
+type CardFooterProps = Pick<CardProps, "actions">;
+
+const CardFooter = ({ actions }: CardFooterProps) => {
+    if (!actions) {
+        return null;
+    }
+
+    return <div className={"wby-flex wby-justify-end wby-gap-sm"}>{actions}</div>;
+};
+
+export { CardFooter, type CardFooterProps };
diff --git a/packages/admin-ui/src/Card/components/CardHeader.tsx b/packages/admin-ui/src/Card/components/CardHeader.tsx
new file mode 100644
index 00000000000..07884c1552c
--- /dev/null
+++ b/packages/admin-ui/src/Card/components/CardHeader.tsx
@@ -0,0 +1,36 @@
+import React from "react";
+import { Heading } from "~/Heading";
+import { Text } from "~/Text";
+import { CardProps } from "~/Card";
+
+type CardHeaderProps = Pick<CardProps, "title" | "description" | "options">;
+
+const CardHeader = ({ title, description, options }: CardHeaderProps) => {
+    if (!title && !description && !options) {
+        return null;
+    }
+
+    return (
+        <div className={"wby-flex wby-flex-row wby-justify-between"}>
+            <div className={"wby-flex wby-flex-col wby-gap-y-xs"}>
+                {typeof title === "string" ? (
+                    <Heading level={6} as={"h1"}>
+                        {title}
+                    </Heading>
+                ) : (
+                    title
+                )}
+                {typeof description === "string" ? (
+                    <Text size="sm" className={"wby-text-neutral-strong"}>
+                        {description}
+                    </Text>
+                ) : (
+                    description
+                )}
+            </div>
+            <div>{options}</div>
+        </div>
+    );
+};
+
+export { CardHeader, type CardHeaderProps };
diff --git a/packages/admin-ui/src/Card/components/CardRoot.tsx b/packages/admin-ui/src/Card/components/CardRoot.tsx
new file mode 100644
index 00000000000..4b58c98316f
--- /dev/null
+++ b/packages/admin-ui/src/Card/components/CardRoot.tsx
@@ -0,0 +1,46 @@
+import React from "react";
+import { cn, cva, VariantProps } from "~/utils";
+
+const cardRootVariants = cva(
+    "wby-flex wby-flex-col wby-bg-neutral-base wby-gap-y-md-plus wby-text-sm",
+    {
+        variants: {
+            padding: {
+                standard: "wby-p-lg",
+                comfortable: "wby-p-xl",
+                compact: "wby-p-md"
+            },
+            elevation: {
+                none: "",
+                xs: "wby-shadow-xs",
+                sm: "wby-shadow-sm",
+                md: "wby-shadow-md",
+                lg: "wby-shadow-lg",
+                xl: "wby-shadow-xl"
+            },
+            borderRadius: {
+                none: "wby-rounded-none",
+                sm: "wby-rounded-sm",
+                md: "wby-rounded-md"
+            }
+        },
+        defaultVariants: {
+            padding: "standard",
+            elevation: "none",
+            borderRadius: "md"
+        }
+    }
+);
+
+interface CardRootProps
+    extends Omit<React.HTMLAttributes<HTMLDivElement>, "title">,
+        VariantProps<typeof cardRootVariants> {}
+
+const CardRoot = ({ className, padding, elevation, borderRadius, ...props }: CardRootProps) => (
+    <div
+        className={cn(cardRootVariants({ padding, elevation, borderRadius }), className)}
+        {...props}
+    />
+);
+
+export { CardRoot, type CardRootProps, cardRootVariants };
diff --git a/packages/admin-ui/src/Card/components/index.ts b/packages/admin-ui/src/Card/components/index.ts
new file mode 100644
index 00000000000..03ec96955e3
--- /dev/null
+++ b/packages/admin-ui/src/Card/components/index.ts
@@ -0,0 +1,3 @@
+export * from "./CardFooter";
+export * from "./CardHeader";
+export * from "./CardRoot";
diff --git a/packages/admin-ui/src/Card/index.ts b/packages/admin-ui/src/Card/index.ts
new file mode 100644
index 00000000000..24d32124659
--- /dev/null
+++ b/packages/admin-ui/src/Card/index.ts
@@ -0,0 +1 @@
+export * from "./Card";
diff --git a/packages/admin-ui/src/Checkbox/Checkbox.mdx b/packages/admin-ui/src/Checkbox/Checkbox.mdx
new file mode 100644
index 00000000000..7762285b1d2
--- /dev/null
+++ b/packages/admin-ui/src/Checkbox/Checkbox.mdx
@@ -0,0 +1,125 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+
+import * as CheckboxStories from './Checkbox.stories';
+
+<Meta of={CheckboxStories} />
+
+# Checkbox
+
+Checkboxes allow users to select multiple items from a list of individual items, or to mark one individual item as selected. A checkbox group is a grouping of checkboxes that are related to each other.
+
+## Usage
+
+<Canvas of={CheckboxStories.Documentation} source={ { code:
+`// Code for a Checkbox
+
+import React, { useState } from "react";
+import { Checkbox } from "@webiny/admin-ui";
+
+const CheckboxExample = () => {
+    const [isChecked, setIsChecked] = useState(false);
+    const [validation, setValidation] = useState({ isValid: true, message: "" });
+
+    const handleChange = (checked: boolean) => {
+        setIsChecked(checked);
+
+        if (!checked) {
+            setValidation({ isValid: false, message: "This field is required" });
+        } else {
+            setValidation({ isValid: true, message: "" });
+        }
+    };
+
+    return (
+        <div>
+            <Checkbox
+                label="Any field label"
+                description="Provide the required information for processing your request."
+                note="Note: Ensure your selection or input is accurate before proceeding."
+                checked={isChecked}
+                required={true}
+                onChange={handleChange}
+                validation={validation}
+            />
+        </div>
+    );
+};
+
+export default CheckboxExample;
+
+` } }
+        additionalActions={[
+            {
+                title: 'Open in GitHub',
+                onClick: () => {
+                    window.open(
+                        'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Checkbox/Checkbox.tsx',
+                        '_blank'
+                    );
+                },
+            }
+        ]}
+/>
+
+<Controls of={CheckboxStories.Documentation} exclude={"onChange"}/>
+
+```tsx
+import React, { useState } from "react";
+import { Checkbox } from "@webiny/admin-ui";
+
+const CheckboxExample = () => {
+    const [isChecked, setIsChecked] = useState(false);
+    const [validation, setValidation] = useState({ isValid: true, message: "" });
+
+    const handleChange = (checked: boolean) => {
+        setIsChecked(checked);
+
+        if (!checked) {
+            setValidation({ isValid: false, message: "This field is required" });
+        } else {
+            setValidation({ isValid: true, message: "" });
+        }
+    };
+
+    return (
+        <div>
+            <Checkbox
+                label="Any field label"
+                description="Provide the required information for processing your request."
+                note="Note: Ensure your selection or input is accurate before proceeding."
+                checked={isChecked}
+                required={true}
+                onChange={handleChange}
+                validation={validation}
+            />
+        </div>
+    );
+};
+
+export default CheckboxExample;
+```
+
+## Anatomy
+
+### General
+Checkbox input enable users to select a single or multiple items from a list of offered choices. A checkbox input group organizes related checkbox input options together for better clarity and functionality.
+
+<img src="/images/storybook/checkbox/general.png" alt="General"/>
+
+### Checkbox input options
+Checkbox inputs can exist in two different states: Selected and Not Selected.
+
+<img src="/images/storybook/checkbox/checkbox-input-options.png" alt="Checkbox input options"/>
+
+### States
+<img src="/images/storybook/checkbox/states.png" alt="States"/>
+
+## Usage
+
+### Text overflow
+When the checkbox text content is too long for the horizontal space available, the content should wrap to form another line aligning the text and checkbox on top.
+
+<img src="/images/storybook/checkbox/text-overflow.png" alt="Text overflow"/>
+
+
+
diff --git a/packages/admin-ui/src/Checkbox/Checkbox.stories.tsx b/packages/admin-ui/src/Checkbox/Checkbox.stories.tsx
new file mode 100644
index 00000000000..df7b8545520
--- /dev/null
+++ b/packages/admin-ui/src/Checkbox/Checkbox.stories.tsx
@@ -0,0 +1,161 @@
+import React, { useState, useEffect } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Checkbox } from "~/Checkbox";
+
+const meta: Meta<typeof Checkbox> = {
+    title: "Components/Form/Checkbox",
+    component: Checkbox,
+    argTypes: {
+        disabled: {
+            control: "boolean",
+            defaultValue: false
+        }
+    },
+    parameters: {
+        layout: "padded"
+    },
+    render: args => {
+        const [checked, setChecked] = useState(args.checked);
+        return <Checkbox {...args} checked={checked} onChange={checked => setChecked(checked)} />;
+    }
+};
+
+export default meta;
+type Story = StoryObj<typeof Checkbox>;
+
+export const Default: Story = {
+    args: {
+        label: "Any field label"
+    }
+};
+
+export const WithDescription: Story = {
+    args: {
+        ...Default.args,
+        description: "Provide the required information for processing your request."
+    }
+};
+
+export const WithNotes: Story = {
+    args: {
+        ...Default.args,
+        note: "Note: Ensure your selection or input is accurate before proceeding."
+    }
+};
+
+export const WithErrors: Story = {
+    args: {
+        ...Default.args,
+        validation: {
+            isValid: false,
+            message: "This field is required."
+        }
+    }
+};
+
+export const Disabled: Story = {
+    args: {
+        ...Default.args,
+        disabled: true
+    }
+};
+
+export const FullExample: Story = {
+    args: {
+        ...Default.args,
+        label: "Any field label",
+        required: true,
+        description: "Provide the required information for processing your request.",
+        note: "Note: Ensure your selection or input is accurate before proceeding.",
+        validation: {
+            isValid: false,
+            message: "This field is required."
+        }
+    }
+};
+
+export const Documentation: Story = {
+    render: args => {
+        const [checked, setChecked] = useState(args.checked || false);
+        const [validation, setValidation] = useState({ isValid: true, message: "" });
+
+        // Update checked state when args.checked changes
+        useEffect(() => {
+            setChecked(args.checked || false);
+        }, [args.checked]);
+
+        const handleChange = (isChecked: boolean) => {
+            setChecked(isChecked);
+
+            // Simple required validation
+            if (args.required && !isChecked) {
+                setValidation({ isValid: false, message: "This field is required" });
+            } else {
+                setValidation({ isValid: true, message: "" });
+            }
+        };
+
+        // Validate on required change
+        useEffect(() => {
+            if (args.required && !checked) {
+                setValidation({ isValid: false, message: "This field is required" });
+            } else {
+                setValidation({ isValid: true, message: "" });
+            }
+        }, [args.required, checked]);
+
+        return (
+            <Checkbox {...args} checked={checked} onChange={handleChange} validation={validation} />
+        );
+    },
+    args: {
+        label: "Any field label",
+        checked: false,
+        disabled: false,
+        required: true,
+        description: "Provide the required information for processing your request.",
+        note: "Note: Ensure your selection or input is accurate before proceeding.",
+        validation: {
+            isValid: false,
+            message: "This field is required."
+        }
+    },
+    argTypes: {
+        label: {
+            description: "Label text for the checkbox",
+            control: "text",
+            defaultValue: "Any field label"
+        },
+        checked: {
+            description: "Determines if the checkbox is checked",
+            control: "boolean",
+            defaultValue: false
+        },
+        disabled: {
+            description: "Disables the checkbox when set to true",
+            control: "boolean",
+            defaultValue: false
+        },
+        required: {
+            description: "Makes the checkbox required when set to true",
+            control: "boolean",
+            defaultValue: false
+        },
+        description: {
+            description: "Additional description text below the checkbox",
+            control: "text"
+        },
+        note: {
+            description: "Additional note text below the checkbox",
+            control: "text"
+        },
+        validation: {
+            description: "Validation state and message",
+            control: "object"
+        },
+        onChange: {
+            description: "Callback function triggered when checkbox state changes",
+            control: "none"
+        }
+    }
+};
diff --git a/packages/admin-ui/src/Checkbox/Checkbox.tsx b/packages/admin-ui/src/Checkbox/Checkbox.tsx
new file mode 100644
index 00000000000..9c0c6f142bf
--- /dev/null
+++ b/packages/admin-ui/src/Checkbox/Checkbox.tsx
@@ -0,0 +1,32 @@
+import React, { useMemo } from "react";
+import { makeDecoratable } from "~/utils";
+import { CheckboxPrimitive, CheckboxPrimitiveProps } from "./primitives/";
+import {
+    FormComponentDescription,
+    FormComponentErrorMessage,
+    FormComponentNote,
+    FormComponentProps
+} from "~/FormComponent";
+
+type CheckboxProps = CheckboxPrimitiveProps & FormComponentProps;
+
+const DecoratableCheckbox = ({ description, note, validation, ...props }: CheckboxProps) => {
+    const { isValid: validationIsValid, message: validationMessage } = validation || {};
+    const invalid = useMemo(() => validationIsValid === false, [validationIsValid]);
+
+    return (
+        <div className={"wby-w-full"}>
+            <FormComponentDescription text={description} disabled={props.disabled} />
+            <CheckboxPrimitive {...props} />
+            <FormComponentErrorMessage
+                text={validationMessage}
+                invalid={invalid}
+                disabled={props.disabled}
+            />
+            <FormComponentNote text={note} disabled={props.disabled} />
+        </div>
+    );
+};
+const Checkbox = makeDecoratable("Checkbox", DecoratableCheckbox);
+
+export { Checkbox };
diff --git a/packages/admin-ui/src/Checkbox/domains/CheckboxItem.ts b/packages/admin-ui/src/Checkbox/domains/CheckboxItem.ts
new file mode 100644
index 00000000000..558da89b5fa
--- /dev/null
+++ b/packages/admin-ui/src/Checkbox/domains/CheckboxItem.ts
@@ -0,0 +1,62 @@
+import { CheckboxItemDto } from "./CheckboxItemDto";
+import { generateId } from "~/utils";
+
+export class CheckboxItem {
+    private readonly _id: string;
+    private readonly _label: any;
+    private readonly _value: string | number;
+    private readonly _checked: boolean;
+    private readonly _indeterminate: boolean;
+    private readonly _disabled: boolean;
+
+    protected constructor(data: {
+        id: string;
+        label: any;
+        value: any;
+        checked: boolean;
+        disabled: boolean;
+        indeterminate: boolean;
+    }) {
+        this._id = data.id;
+        this._label = data.label;
+        this._value = data.value;
+        this._checked = data.checked;
+        this._indeterminate = data.indeterminate;
+        this._disabled = data.disabled;
+    }
+
+    static create(data: CheckboxItemDto): CheckboxItem {
+        return new CheckboxItem({
+            id: generateId(data.id),
+            label: data.label,
+            value: data.value,
+            checked: Boolean(data.checked),
+            indeterminate: (data.indeterminate && !data.checked) ?? false,
+            disabled: data.disabled ?? false
+        });
+    }
+
+    get id() {
+        return this._id;
+    }
+
+    get label() {
+        return this._label;
+    }
+
+    get value() {
+        return this._value;
+    }
+
+    get checked() {
+        return this._checked;
+    }
+
+    get indeterminate() {
+        return this._indeterminate;
+    }
+
+    get disabled() {
+        return this._disabled;
+    }
+}
diff --git a/packages/admin-ui/src/Checkbox/domains/CheckboxItemDto.ts b/packages/admin-ui/src/Checkbox/domains/CheckboxItemDto.ts
new file mode 100644
index 00000000000..5236326caa1
--- /dev/null
+++ b/packages/admin-ui/src/Checkbox/domains/CheckboxItemDto.ts
@@ -0,0 +1,10 @@
+import React from "react";
+
+export interface CheckboxItemDto {
+    id?: string;
+    label?: string | React.ReactNode;
+    value?: number | string;
+    checked?: boolean;
+    indeterminate?: boolean;
+    disabled?: boolean;
+}
diff --git a/packages/admin-ui/src/Checkbox/domains/CheckboxItemFormatted.ts b/packages/admin-ui/src/Checkbox/domains/CheckboxItemFormatted.ts
new file mode 100644
index 00000000000..72ba219f87d
--- /dev/null
+++ b/packages/admin-ui/src/Checkbox/domains/CheckboxItemFormatted.ts
@@ -0,0 +1,11 @@
+import React from "react";
+
+export interface CheckboxItemFormatted {
+    id: string;
+    label: string | React.ReactNode;
+    value: string | number;
+    checked: boolean;
+    indeterminate: boolean;
+    disabled: boolean;
+    hasLabel: boolean;
+}
diff --git a/packages/admin-ui/src/Checkbox/domains/CheckboxItemMapper.ts b/packages/admin-ui/src/Checkbox/domains/CheckboxItemMapper.ts
new file mode 100644
index 00000000000..8b98d2c007a
--- /dev/null
+++ b/packages/admin-ui/src/Checkbox/domains/CheckboxItemMapper.ts
@@ -0,0 +1,16 @@
+import { CheckboxItemFormatted } from "./CheckboxItemFormatted";
+import { CheckboxItem } from "./CheckboxItem";
+
+export class CheckboxItemMapper {
+    static toFormatted(item: CheckboxItem): CheckboxItemFormatted {
+        return {
+            id: item.id,
+            label: item.label,
+            value: item.value,
+            checked: item.checked,
+            indeterminate: item.indeterminate,
+            disabled: item.disabled,
+            hasLabel: !!item.label
+        };
+    }
+}
diff --git a/packages/admin-ui/src/Checkbox/domains/index.ts b/packages/admin-ui/src/Checkbox/domains/index.ts
new file mode 100644
index 00000000000..c1518f744d1
--- /dev/null
+++ b/packages/admin-ui/src/Checkbox/domains/index.ts
@@ -0,0 +1,4 @@
+export * from "./CheckboxItem";
+export * from "./CheckboxItemDto";
+export * from "./CheckboxItemFormatted";
+export * from "./CheckboxItemMapper";
diff --git a/packages/admin-ui/src/Checkbox/index.ts b/packages/admin-ui/src/Checkbox/index.ts
new file mode 100644
index 00000000000..76284aa47dd
--- /dev/null
+++ b/packages/admin-ui/src/Checkbox/index.ts
@@ -0,0 +1,2 @@
+export * from "./Checkbox";
+export * from "./primitives";
diff --git a/packages/admin-ui/src/Checkbox/primitives/CheckboxPrimitive.stories.tsx b/packages/admin-ui/src/Checkbox/primitives/CheckboxPrimitive.stories.tsx
new file mode 100644
index 00000000000..b8f4e3e5ddc
--- /dev/null
+++ b/packages/admin-ui/src/Checkbox/primitives/CheckboxPrimitive.stories.tsx
@@ -0,0 +1,57 @@
+import React, { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { CheckboxPrimitive } from "./CheckboxPrimitive";
+
+const meta: Meta<typeof CheckboxPrimitive> = {
+    title: "Components/Form Primitives/Checkbox",
+    component: CheckboxPrimitive,
+    parameters: {
+        layout: "padded"
+    },
+    render: args => {
+        const [checked, setChecked] = useState(args.checked);
+        return (
+            <CheckboxPrimitive
+                {...args}
+                checked={checked}
+                onChange={checked => setChecked(checked)}
+            />
+        );
+    }
+};
+
+export default meta;
+type Story = StoryObj<typeof CheckboxPrimitive>;
+
+export const Default: Story = {
+    args: {
+        label: "Any field label"
+    }
+};
+
+export const LongLabel: Story = {
+    args: {
+        label: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eu aliquam lacus. Morbi eleifend, eros et vestibulum lobortis, mi elit scelerisque neque, sit amet dictum orci sem ac ante. In hac habitasse platea dictumst. Pellentesque molestie nisl tortor, eu dictum velit mollis vitae. Maecenas nec risus sit amet ante efficitur venenatis id eget eros. Aenean mollis vel dolor vitae vestibulum. Integer consectetur id diam eget iaculis. Praesent egestas ullamcorper libero vel eleifend. "
+    }
+};
+
+export const Checked: Story = {
+    args: {
+        ...Default.args,
+        checked: true
+    }
+};
+
+export const Indeterminate: Story = {
+    args: {
+        ...Default.args,
+        indeterminate: true
+    }
+};
+
+export const Disabled: Story = {
+    args: {
+        ...Default.args,
+        disabled: true
+    }
+};
diff --git a/packages/admin-ui/src/Checkbox/primitives/CheckboxPrimitive.tsx b/packages/admin-ui/src/Checkbox/primitives/CheckboxPrimitive.tsx
new file mode 100644
index 00000000000..f9f2bc0b8f6
--- /dev/null
+++ b/packages/admin-ui/src/Checkbox/primitives/CheckboxPrimitive.tsx
@@ -0,0 +1,129 @@
+import * as React from "react";
+import * as CheckboxPrimitives from "@radix-ui/react-checkbox";
+import { ReactComponent as CheckIcon } from "@webiny/icons/check.svg";
+import { cn, makeDecoratable, cva, type VariantProps } from "~/utils";
+import { useCheckbox } from "./useCheckbox";
+import { Label } from "~/Label";
+import type { CheckboxItemDto, CheckboxItemFormatted } from "~/Checkbox";
+
+/**
+ * Indeterminate Icon
+ */
+const IndeterminateIcon = () => {
+    return (
+        <span
+            className={
+                "wby-block wby-w-sm wby-h-xxs wby-rounded-sm wby-bg-primary-default group-disabled:wby-bg-primary-disabled"
+            }
+        />
+    );
+};
+
+/**
+ * Checkbox Renderer
+ */
+const checkboxVariants = cva(
+    [
+        "wby-group wby-peer wby-h-md wby-w-md wby-shrink-0 wby-rounded-sm wby-border-sm ",
+        "wby-border-neutral-muted wby-bg-neutral-base [&_svg]:!wby-fill-neutral-base wby-ring-offset-background",
+        "hover:wby-border-neutral-dark",
+        "focus:wby-outline-none focus-visible:wby-border-accent-default focus-visible:wby-ring-lg focus-visible:wby-ring-primary-dimmed focus-visible:wby-ring-offset-0",
+        "disabled:wby-cursor-not-allowed disabled:wby-border-transparent disabled:wby-bg-neutral-disabled",
+        "data-[state=checked]:wby-bg-primary-default data-[state=checked]:wby-border-transparent",
+        "data-[state=checked]:hover:wby-bg-primary-strong",
+        "data-[state=checked]:disabled:wby-bg-neutral-disabled data-[state=checked]:disabled:wby-fill-neutral-strong"
+    ],
+    {
+        variants: {
+            indeterminate: {
+                true: [
+                    "wby-border-neutral-muted",
+                    "data-[state=checked]:wby-bg-neutral-base data-[state=checked]:wby-border-neutral-muted",
+                    "data-[state=checked]:hover:wby-bg-neutral-base data-[state=checked]:hover:wby-border-neutral-strong",
+                    "data-[state=checked]:focus-visible:wby-border-accent-default",
+                    "data-[state=checked]:disabled:wby-border-transparent"
+                ]
+            },
+            hasLabel: {
+                true: "wby-mt-xxs"
+            }
+        }
+    }
+);
+
+type CheckboxPrimitiveProps = Omit<
+    CheckboxPrimitives.CheckboxProps,
+    "defaultChecked" | "onCheckedChange" | "onChange"
+> &
+    VariantProps<typeof checkboxVariants> &
+    CheckboxItemDto & {
+        onChange: (checked: boolean) => void;
+    };
+
+interface CheckboxPrimitiveVm {
+    item?: CheckboxItemFormatted;
+}
+
+type CheckboxPrimitiveRendererProps = Omit<CheckboxPrimitiveProps, "onCheckedChange" | "onChange"> &
+    NonNullable<CheckboxPrimitiveVm["item"]> & {
+        changeChecked: (checked: boolean) => void;
+    };
+
+const DecoratableCheckboxPrimitiveRenderer = ({
+    label,
+    id,
+    hasLabel,
+    indeterminate,
+    changeChecked,
+    checked,
+    className,
+    ...props
+}: CheckboxPrimitiveRendererProps) => {
+    return (
+        <div className="wby-flex wby-items-start wby-space-x-sm-extra">
+            <CheckboxPrimitives.Root
+                {...props}
+                id={id}
+                className={cn(checkboxVariants({ indeterminate, hasLabel }), className)}
+                onCheckedChange={changeChecked}
+                checked={indeterminate ? "indeterminate" : checked}
+            >
+                <span className={cn("wby-flex wby-items-center wby-justify-center")}>
+                    {indeterminate ? (
+                        <IndeterminateIcon />
+                    ) : (
+                        <CheckboxPrimitives.Indicator>
+                            <CheckIcon className={"!wby-size-sm-extra"} />
+                        </CheckboxPrimitives.Indicator>
+                    )}
+                </span>
+            </CheckboxPrimitives.Root>
+            {hasLabel && <Label id={id} text={label} weight={"light"} className={"wby-text-md"} />}
+        </div>
+    );
+};
+const CheckboxPrimitiveRenderer = makeDecoratable(
+    "CheckboxPrimitiveRenderer",
+    DecoratableCheckboxPrimitiveRenderer
+);
+
+/**
+ * Checkbox
+ */
+const DecoratableCheckboxPrimitive = (props: CheckboxPrimitiveProps) => {
+    const { vm, changeChecked } = useCheckbox(props);
+
+    if (!vm.item) {
+        return null;
+    }
+
+    return <CheckboxPrimitiveRenderer {...props} {...vm.item} changeChecked={changeChecked} />;
+};
+const CheckboxPrimitive = makeDecoratable("CheckboxPrimitive", DecoratableCheckboxPrimitive);
+
+export {
+    CheckboxPrimitive,
+    CheckboxPrimitiveRenderer,
+    type CheckboxPrimitiveProps,
+    type CheckboxPrimitiveVm
+};
diff --git a/packages/admin-ui/src/Checkbox/primitives/index.ts b/packages/admin-ui/src/Checkbox/primitives/index.ts
new file mode 100644
index 00000000000..b6f74004b32
--- /dev/null
+++ b/packages/admin-ui/src/Checkbox/primitives/index.ts
@@ -0,0 +1,2 @@
+export * from "./CheckboxPrimitive";
+export * from "../domains";
diff --git a/packages/admin-ui/src/Checkbox/primitives/presenters/CheckboxPresenter.test.ts b/packages/admin-ui/src/Checkbox/primitives/presenters/CheckboxPresenter.test.ts
new file mode 100644
index 00000000000..b641ef86cef
--- /dev/null
+++ b/packages/admin-ui/src/Checkbox/primitives/presenters/CheckboxPresenter.test.ts
@@ -0,0 +1,95 @@
+import { CheckboxPresenter } from "./CheckboxPresenter";
+
+describe("CheckboxPresenter", () => {
+    const onCheckedChange = jest.fn();
+
+    it("should return the compatible `vm` based on props", () => {
+        const presenter = new CheckboxPresenter();
+
+        // `label`
+        {
+            presenter.init({
+                onCheckedChange,
+                label: "Label"
+            });
+            expect(presenter.vm.item?.label).toEqual("Label");
+            expect(presenter.vm.item?.hasLabel).toEqual(true);
+        }
+
+        // `id`
+        {
+            presenter.init({
+                onCheckedChange,
+                id: "id"
+            });
+            expect(presenter.vm.item?.id).toEqual("id");
+        }
+
+        // `checked`
+        {
+            presenter.init({
+                onCheckedChange,
+                checked: true
+            });
+            expect(presenter.vm.item?.checked).toBeTruthy();
+        }
+
+        // `value`
+        {
+            presenter.init({
+                onCheckedChange,
+                value: "value"
+            });
+            expect(presenter.vm.item?.value).toEqual("value");
+        }
+
+        // `indeterminate`
+        {
+            presenter.init({
+                onCheckedChange,
+                indeterminate: true
+            });
+            expect(presenter.vm.item?.indeterminate).toBeTruthy();
+        }
+
+        // `indeterminate` + `checked`
+        {
+            presenter.init({
+                onCheckedChange,
+                indeterminate: true,
+                checked: false
+            });
+            expect(presenter.vm.item?.indeterminate).toEqual(true);
+        }
+
+        // `disabled`
+        {
+            presenter.init({
+                onCheckedChange,
+                disabled: true
+            });
+            expect(presenter.vm.item?.disabled).toBeTruthy();
+        }
+
+        // default: only mandatory props
+        {
+            presenter.init({
+                onCheckedChange
+            });
+            expect(presenter.vm.item).toEqual({
+                id: expect.any(String),
+                checked: false,
+                indeterminate: false,
+                disabled: false,
+                hasLabel: false
+            });
+        }
+    });
+
+    it("should call `onCheckedChange` callback when `changeChecked` is called", () => {
+        const presenter = new CheckboxPresenter();
+        presenter.init({ onCheckedChange });
+        presenter.changeChecked(true);
+        expect(onCheckedChange).toHaveBeenCalledWith(true);
+    });
+});
diff --git a/packages/admin-ui/src/Checkbox/primitives/presenters/CheckboxPresenter.ts b/packages/admin-ui/src/Checkbox/primitives/presenters/CheckboxPresenter.ts
new file mode 100644
index 00000000000..1e000d4bc04
--- /dev/null
+++ b/packages/admin-ui/src/Checkbox/primitives/presenters/CheckboxPresenter.ts
@@ -0,0 +1,48 @@
+import { makeAutoObservable } from "mobx";
+import { CheckboxPrimitiveVm } from "../CheckboxPrimitive";
+import { CheckboxItem } from "~/Checkbox/domains/CheckboxItem";
+import { type CheckboxItemDto } from "~/Checkbox/domains/CheckboxItemDto";
+import { CheckboxItemMapper } from "~/Checkbox/domains/CheckboxItemMapper";
+
+type CheckboxPresenterParams = CheckboxItemDto & {
+    onCheckedChange: (checked: boolean) => void;
+};
+
+interface ICheckboxPresenter<TParams extends CheckboxPresenterParams = CheckboxPresenterParams> {
+    vm: CheckboxPrimitiveVm;
+    init: (params: TParams) => void;
+    changeChecked: (checked: boolean) => void;
+}
+
+class CheckboxPresenter implements ICheckboxPresenter {
+    private params?: CheckboxPresenterParams = undefined;
+    private item?: CheckboxItem = undefined;
+
+    constructor() {
+        makeAutoObservable(this);
+    }
+
+    public init = (params: CheckboxPresenterParams) => {
+        this.params = params;
+        this.item = CheckboxItem.create({
+            id: params.id,
+            label: params.label,
+            value: params.value,
+            checked: params.checked,
+            indeterminate: params.indeterminate,
+            disabled: params.disabled
+        });
+    };
+
+    get vm() {
+        return {
+            item: this.item ? CheckboxItemMapper.toFormatted(this.item) : undefined
+        };
+    }
+
+    public changeChecked = (checked: boolean) => {
+        this.params?.onCheckedChange(checked);
+    };
+}
+
+export { CheckboxPresenter, type CheckboxPresenterParams, type ICheckboxPresenter };
diff --git a/packages/admin-ui/src/Checkbox/primitives/presenters/index.ts b/packages/admin-ui/src/Checkbox/primitives/presenters/index.ts
new file mode 100644
index 00000000000..9af53d53370
--- /dev/null
+++ b/packages/admin-ui/src/Checkbox/primitives/presenters/index.ts
@@ -0,0 +1 @@
+export * from "./CheckboxPresenter";
diff --git a/packages/admin-ui/src/Checkbox/primitives/useCheckbox.ts b/packages/admin-ui/src/Checkbox/primitives/useCheckbox.ts
new file mode 100644
index 00000000000..4136b6f2c2f
--- /dev/null
+++ b/packages/admin-ui/src/Checkbox/primitives/useCheckbox.ts
@@ -0,0 +1,46 @@
+import { useEffect, useMemo, useState } from "react";
+import { autorun } from "mobx";
+import { CheckboxPrimitiveProps } from "./CheckboxPrimitive";
+import { CheckboxPresenter, CheckboxPresenterParams } from "./presenters/CheckboxPresenter";
+
+export const useCheckbox = (props: CheckboxPrimitiveProps) => {
+    const params: CheckboxPresenterParams = useMemo(
+        () => ({
+            id: props.id,
+            label: props.label,
+            value: props.value,
+            checked: props.checked,
+            indeterminate: props.indeterminate,
+            disabled: props.disabled,
+            onCheckedChange: props.onChange
+        }),
+        [
+            props.id,
+            props.label,
+            props.value,
+            props.checked,
+            props.indeterminate,
+            props.disabled,
+            props.onChange
+        ]
+    );
+    const presenter = useMemo(() => {
+        const presenter = new CheckboxPresenter();
+        presenter.init(params);
+        return presenter;
+    }, []);
+
+    const [vm, setVm] = useState(presenter.vm);
+
+    useEffect(() => {
+        presenter.init(params);
+    }, [params]);
+
+    useEffect(() => {
+        return autorun(() => {
+            setVm(presenter.vm);
+        });
+    }, [presenter]);
+
+    return { vm, changeChecked: presenter.changeChecked };
+};
diff --git a/packages/admin-ui/src/CheckboxGroup/CheckboxGroup.mdx b/packages/admin-ui/src/CheckboxGroup/CheckboxGroup.mdx
new file mode 100644
index 00000000000..41be26a047a
--- /dev/null
+++ b/packages/admin-ui/src/CheckboxGroup/CheckboxGroup.mdx
@@ -0,0 +1,125 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+
+import * as CheckboxGroupStories from './CheckboxGroup.stories';
+
+<Meta of={CheckboxGroupStories} />
+
+# Checkbox Group
+
+Checkboxes allow users to select multiple items from a list of individual items, or to mark one individual item as selected. A checkbox group is a grouping of checkboxes that are related to each other.
+
+## Usage
+
+<Canvas of={CheckboxGroupStories.Documentation} source={ { code:
+`// Code for a Checkbox Group
+
+import React, { useState } from "react";
+
+import { CheckboxGroup } from "@webiny/admin-ui";
+
+const CheckboxGroupExample = () => {
+    const [selectedValues, setSelectedValues] = useState<string[]>([]);
+    const [validation, setValidation] = useState({ isValid: true, message: "" });
+
+    const handleChange = (newValues: string[]) => {
+        setSelectedValues(newValues);
+
+        // Simple required validation
+        if (!newValues || newValues.length === 0) {
+            setValidation({ isValid: false, message: "Please select at least one option." });
+        } else {
+            setValidation({ isValid: true, message: "" });
+        }
+    };
+
+    return (
+        <div>
+            <CheckboxGroup
+                label="Select your preferences"
+                description="Choose one or more options."
+                note="Note: You can select multiple values."
+                required={true}
+                items={[
+                    { label: "Value 1", value: "value-1" },
+                    { label: "Value 2", value: "value-2" },
+                    { label: "Value 3", value: "value-3" }
+                ]}
+                value={selectedValues}
+                onChange={handleChange}
+                validation={validation}
+            />
+        </div>
+    );
+};
+
+export default CheckboxGroupExample;
+
+` } }
+        additionalActions={[
+            {
+                title: 'Open in GitHub',
+                onClick: () => {
+                    window.open(
+                        'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/CheckboxGroup/CheckboxGroup.tsx',
+                        '_blank'
+                    );
+                },
+            }
+        ]}
+/>
+
+<Controls of={CheckboxGroupStories.Documentation} exclude={"onChange"}/>
+
+```tsx
+import React, { useState } from "react";
+
+import { CheckboxGroup } from "@webiny/admin-ui";
+
+const CheckboxGroupExample = () => {
+    const [selectedValues, setSelectedValues] = useState<string[]>([]);
+    const [validation, setValidation] = useState({ isValid: true, message: "" });
+
+    const handleChange = (newValues: string[]) => {
+        setSelectedValues(newValues);
+
+        // Simple required validation
+        if (!newValues || newValues.length === 0) {
+            setValidation({ isValid: false, message: "Please select at least one option." });
+        } else {
+            setValidation({ isValid: true, message: "" });
+        }
+    };
+
+    return (
+        <div>
+            <CheckboxGroup
+                label="Select your preferences"
+                description="Choose one or more options."
+                note="Note: You can select multiple values."
+                required={true}
+                items={[
+                    { label: "Value 1", value: "value-1" },
+                    { label: "Value 2", value: "value-2" },
+                    { label: "Value 3", value: "value-3" }
+                ]}
+                value={selectedValues}
+                onChange={handleChange}
+                validation={validation}
+            />
+        </div>
+    );
+};
+
+export default CheckboxGroupExample;
+```
+
+## Anatomy
+
+### General
+Checkbox Group input enable users to select a single or multiple items from a list of offered choices. A checkbox input group organizes related checkbox input options together for better clarity and functionality.
+
+<img src="/images/storybook/checkbox-group/general.png" alt="General"/>
+
+
+
+
diff --git a/packages/admin-ui/src/CheckboxGroup/CheckboxGroup.stories.tsx b/packages/admin-ui/src/CheckboxGroup/CheckboxGroup.stories.tsx
new file mode 100644
index 00000000000..56c3723491e
--- /dev/null
+++ b/packages/admin-ui/src/CheckboxGroup/CheckboxGroup.stories.tsx
@@ -0,0 +1,232 @@
+import React, { useState, useEffect } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { CheckboxGroup } from "~/CheckboxGroup";
+
+const meta: Meta<typeof CheckboxGroup> = {
+    title: "Components/Form/CheckboxGroup",
+    component: CheckboxGroup,
+    argTypes: {
+        disabled: {
+            control: "boolean",
+            defaultValue: false
+        }
+    },
+    parameters: {
+        layout: "padded"
+    },
+    render: args => {
+        const [value, setValue] = useState(args.value);
+        return <CheckboxGroup {...args} value={value} onChange={value => setValue(value)} />;
+    }
+};
+
+export default meta;
+type Story = StoryObj<typeof CheckboxGroup>;
+
+export const Default: Story = {
+    args: {
+        items: [
+            {
+                label: "Value 1",
+                value: "value-1"
+            },
+            {
+                label: "Value 2",
+                value: "value-2"
+            },
+            {
+                label: "Value 3",
+                value: "value-3"
+            }
+        ],
+        value: []
+    }
+};
+
+export const WithLabel: Story = {
+    args: {
+        ...Default.args,
+        label: "Any field label"
+    }
+};
+
+export const WithRequiredLabel: Story = {
+    args: {
+        ...Default.args,
+        label: "Any field label",
+        required: true
+    }
+};
+
+export const WithDescription: Story = {
+    args: {
+        ...Default.args,
+        description: "Provide the required information for processing your request."
+    }
+};
+
+export const WithNotes: Story = {
+    args: {
+        ...Default.args,
+        note: "Note: Ensure your selection or input is accurate before proceeding."
+    }
+};
+
+export const WithErrors: Story = {
+    args: {
+        ...Default.args,
+        validation: {
+            isValid: false,
+            message: "This field is required."
+        }
+    }
+};
+
+export const Disabled: Story = {
+    args: {
+        ...Default.args,
+        label: "Any field label",
+        items: [
+            {
+                label: "Value 1",
+                value: "value-1",
+                disabled: true
+            },
+            {
+                label: "Value 2",
+                value: "value-2",
+                disabled: true
+            },
+            {
+                label: "Value 3",
+                value: "value-3",
+                disabled: true
+            }
+        ],
+        disabled: true
+    }
+};
+
+export const FullExample: Story = {
+    args: {
+        ...Default.args,
+        label: "Select which deploy option do you prefer",
+        required: true,
+        description:
+            "Deployment option is simply a way of parsing the data based on your database settings.",
+        note: "Note: Ensure your selection or input is accurate before proceeding.",
+        validation: {
+            isValid: false,
+            message: "You must select at least one of the items!"
+        }
+    }
+};
+
+export const Documentation: Story = {
+    render: args => {
+        const [selectedValues, setSelectedValues] = useState<string[]>(args.value || []);
+        const [validation, setValidation] = useState({ isValid: true, message: "" });
+
+        // Update values when args.value changes
+        useEffect(() => {
+            setSelectedValues(args.value || []);
+        }, [args.value]);
+
+        const handleChange = (newValues: string[]) => {
+            setSelectedValues(newValues);
+
+            // Simple required validation
+            if (args.required && (!newValues || newValues.length === 0)) {
+                setValidation({ isValid: false, message: "Please select at least one option." });
+            } else {
+                setValidation({ isValid: true, message: "" });
+            }
+        };
+
+        // Validate on required change or value change
+        useEffect(() => {
+            if (args.required && (!selectedValues || selectedValues.length === 0)) {
+                setValidation({ isValid: false, message: "Please select at least one option." });
+            } else {
+                setValidation({ isValid: true, message: "" });
+            }
+        }, [args.required, selectedValues]);
+
+        return (
+            <CheckboxGroup
+                {...args}
+                value={selectedValues}
+                onChange={handleChange}
+                validation={validation}
+                required={args.required}
+            />
+        );
+    },
+    args: {
+        label: "Select your preferences",
+        required: true,
+        disabled: false,
+        description: "Choose one or more options.",
+        note: "Note: You can select multiple values.",
+        items: [
+            {
+                label: "Value 1",
+                value: "value-1"
+            },
+            {
+                label: "Value 2",
+                value: "value-2"
+            },
+            {
+                label: "Value 3",
+                value: "value-3"
+            }
+        ],
+        value: [],
+        validation: {
+            isValid: false,
+            message: "Please select at least one option."
+        }
+    },
+    argTypes: {
+        label: {
+            description: "Label text for the checkbox group",
+            control: "text",
+            defaultValue: "Select your preferences"
+        },
+        required: {
+            description: "Makes the checkbox group required when set to true",
+            control: "boolean",
+            defaultValue: true
+        },
+        disabled: {
+            description: "Disables the checkbox group when set to true",
+            control: "boolean",
+            defaultValue: false
+        },
+        description: {
+            description: "Additional description text below the checkbox group",
+            control: "text"
+        },
+        note: {
+            description: "Additional note text below the checkbox group",
+            control: "text"
+        },
+        validation: {
+            description: "Validation state and message",
+            control: "object"
+        },
+        items: {
+            description: "Array of checkbox items with label and value",
+            control: "object"
+        },
+        value: {
+            description: "Array of selected values",
+            control: "object"
+        },
+        onChange: {
+            description: "Callback function triggered when selection changes",
+            control: "none"
+        }
+    }
+};
diff --git a/packages/admin-ui/src/CheckboxGroup/CheckboxGroup.tsx b/packages/admin-ui/src/CheckboxGroup/CheckboxGroup.tsx
new file mode 100644
index 00000000000..0aa073fef25
--- /dev/null
+++ b/packages/admin-ui/src/CheckboxGroup/CheckboxGroup.tsx
@@ -0,0 +1,55 @@
+import React, { useMemo } from "react";
+import { makeDecoratable } from "~/utils";
+import {
+    CheckboxGroupPrimitive,
+    CheckboxGroupPrimitiveProps
+} from "./primitives/CheckboxGroupPrimitive";
+import {
+    FormComponentDescription,
+    FormComponentErrorMessage,
+    FormComponentLabel,
+    FormComponentNote,
+    FormComponentProps
+} from "~/FormComponent";
+
+type CheckboxGroupProps = CheckboxGroupPrimitiveProps & FormComponentProps;
+
+const DecoratableCheckboxGroup = ({
+    label,
+    description,
+    note,
+    required,
+    disabled,
+    validation,
+    ...props
+}: CheckboxGroupProps) => {
+    const { isValid: validationIsValid, message: validationMessage } = validation || {};
+    const invalid = useMemo(() => validationIsValid === false, [validationIsValid]);
+
+    return (
+        <div className={"wby-w-full"}>
+            <FormComponentLabel
+                text={label}
+                required={required}
+                disabled={disabled}
+                invalid={invalid}
+            />
+            <FormComponentDescription
+                text={description}
+                disabled={disabled}
+                className={"wby-mb-xs-plus"}
+            />
+            <FormComponentErrorMessage
+                text={validationMessage}
+                invalid={invalid}
+                disabled={disabled}
+                className={"wby-mt-none wby-mb-xs-plus"}
+            />
+            <CheckboxGroupPrimitive {...props} />
+            <FormComponentNote text={note} disabled={disabled} />
+        </div>
+    );
+};
+const CheckboxGroup = makeDecoratable("CheckboxGroup", DecoratableCheckboxGroup);
+
+export { CheckboxGroup };
diff --git a/packages/admin-ui/src/CheckboxGroup/index.ts b/packages/admin-ui/src/CheckboxGroup/index.ts
new file mode 100644
index 00000000000..639b4e5aa5b
--- /dev/null
+++ b/packages/admin-ui/src/CheckboxGroup/index.ts
@@ -0,0 +1,2 @@
+export * from "./CheckboxGroup";
+export * from "./primitives";
diff --git a/packages/admin-ui/src/CheckboxGroup/primitives/CheckboxGroupPrimitive.stories.tsx b/packages/admin-ui/src/CheckboxGroup/primitives/CheckboxGroupPrimitive.stories.tsx
new file mode 100644
index 00000000000..6594d6af9d4
--- /dev/null
+++ b/packages/admin-ui/src/CheckboxGroup/primitives/CheckboxGroupPrimitive.stories.tsx
@@ -0,0 +1,166 @@
+import React, { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { CheckboxGroupPrimitive } from "./CheckboxGroupPrimitive";
+import { Button } from "~/Button";
+
+const meta: Meta<typeof CheckboxGroupPrimitive> = {
+    title: "Components/Form Primitives/CheckboxGroup",
+    component: CheckboxGroupPrimitive,
+    parameters: {
+        layout: "padded"
+    },
+    render: args => {
+        const [values, setValues] = useState(args.value);
+        return (
+            <div className={"wby-w-full"}>
+                <CheckboxGroupPrimitive
+                    {...args}
+                    value={values}
+                    onChange={values => setValues(values)}
+                />
+                <div className={"wby-mt-4 wby-text-center"}>
+                    Current selected value: <pre>{values && values.join()}</pre>
+                </div>
+            </div>
+        );
+    }
+};
+
+export default meta;
+type Story = StoryObj<typeof CheckboxGroupPrimitive>;
+
+export const Default: Story = {
+    args: {
+        items: [
+            {
+                label: "Value 1",
+                value: "value-1"
+            },
+            {
+                label: "Value 2",
+                value: "value-2"
+            },
+            {
+                label: "Value 3",
+                value: "value-3"
+            }
+        ],
+        value: []
+    }
+};
+
+export const WithLongLabels: Story = {
+    args: {
+        items: [
+            {
+                label: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eu aliquam lacus. Morbi eleifend, eros et vestibulum lobortis, mi elit scelerisque neque, sit amet dictum orci sem ac ante. In hac habitasse platea dictumst. Pellentesque molestie nisl tortor, eu dictum velit mollis vitae. Integer consectetur id diam eget iaculis. Praesent egestas ullamcorper libero vel eleifend.",
+                value: "value-1"
+            },
+            {
+                label: "Ut pretium ex vel auctor bibendum. In hac habitasse platea dictumst. Etiam varius felis mi, eu sagittis erat congue vel. Phasellus dui eros, dignissim quis quam pulvinar, tincidunt venenatis felis.",
+                value: "value-2"
+            },
+            {
+                label: "Nullam gravida consequat volutpat. Ut faucibus imperdiet lobortis. Nullam tempus accumsan metus, vel fermentum lacus dignissim vitae. Sed vitae nunc ante. Cras sollicitudin id dolor sit amet imperdiet.",
+                value: "value-3"
+            }
+        ],
+        value: []
+    }
+};
+
+export const WithSelectedValues: Story = {
+    args: {
+        items: [
+            {
+                label: "Value 1",
+                value: "value-1"
+            },
+            {
+                label: "Value 2",
+                value: "value-2"
+            },
+            {
+                label: "Value 3",
+                value: "value-3"
+            }
+        ],
+        value: ["value-2"]
+    }
+};
+
+export const WithDisabledValue: Story = {
+    args: {
+        items: [
+            {
+                label: "Value 1",
+                value: "value-1"
+            },
+            {
+                label: "Value 2",
+                value: "value-2",
+                disabled: true
+            },
+            {
+                label: "Value 3",
+                value: "value-3"
+            }
+        ],
+        value: ["value-2"]
+    }
+};
+
+export const WithExternalValueControl: Story = {
+    args: {
+        ...Default.args
+    },
+    render: args => {
+        const [values, setValues] = useState(args.value);
+        return (
+            <div className={"wby-w-full"}>
+                <div>
+                    <CheckboxGroupPrimitive
+                        {...args}
+                        value={values}
+                        onChange={values => setValues(values)}
+                    />
+                </div>
+                <div className={"wby-mt-4 wby-text-center"}>
+                    <Button text={"Reset"} onClick={() => setValues([])} />
+                </div>
+                <div className={"wby-mt-4 wby-text-center"}>
+                    Current selected value: <pre>{values && values.join()}</pre>
+                </div>
+            </div>
+        );
+    }
+};
+
+export const WithNumericValues: Story = {
+    args: {
+        ...Default.args,
+        value: [3, 4],
+        items: [
+            {
+                label: "Number 1",
+                value: 1
+            },
+            {
+                label: "Number 2",
+                value: 2
+            },
+            {
+                label: "Number 3",
+                value: 3
+            },
+            {
+                label: "Number 4",
+                value: 4
+            },
+            {
+                label: "Number 5",
+                value: 5
+            }
+        ]
+    }
+};
diff --git a/packages/admin-ui/src/CheckboxGroup/primitives/CheckboxGroupPrimitive.tsx b/packages/admin-ui/src/CheckboxGroup/primitives/CheckboxGroupPrimitive.tsx
new file mode 100644
index 00000000000..e214f45549b
--- /dev/null
+++ b/packages/admin-ui/src/CheckboxGroup/primitives/CheckboxGroupPrimitive.tsx
@@ -0,0 +1,71 @@
+import React from "react";
+import { cn, makeDecoratable } from "~/utils";
+import { CheckboxItemDto, CheckboxItemFormatted, CheckboxPrimitiveRenderer } from "~/Checkbox";
+import { useCheckboxGroup } from "./useCheckboxGroup";
+
+interface CheckboxGroupPrimitiveProps<TValue = any> {
+    /**
+     * Array of checkbox items.
+     */
+    items: CheckboxItemDto[];
+    /**
+     * Callback function called when the checkbox values change.
+     */
+    onChange?: (values: TValue[]) => void;
+    /**
+     * Array of selected checkbox values.
+     */
+    value?: TValue[];
+}
+
+interface CheckboxGroupPrimitiveVm {
+    items: CheckboxItemFormatted[];
+}
+
+type CheckboxGroupPrimitiveRendererProps<TValue = any> = CheckboxGroupPrimitiveVm & {
+    changeChecked: (value: TValue) => void;
+};
+
+/**
+ * Checkbox Group Renderer
+ */
+const DecoratableCheckboxGroupPrimitiveRenderer = ({
+    items,
+    changeChecked
+}: CheckboxGroupPrimitiveRendererProps) => {
+    return (
+        <div className={cn("wby-grid wby-gap-sm-extra wby-py-xs-plus")}>
+            {items.map(item => (
+                <CheckboxPrimitiveRenderer
+                    key={item.id}
+                    {...item}
+                    changeChecked={() => changeChecked(item.value)}
+                />
+            ))}
+        </div>
+    );
+};
+const CheckboxGroupPrimitiveRenderer = makeDecoratable(
+    "CheckboxGroupPrimitiveRenderer",
+    DecoratableCheckboxGroupPrimitiveRenderer
+);
+
+/**
+ * Checkbox Group
+ */
+const DecoratableCheckboxGroupPrimitive = (props: CheckboxGroupPrimitiveProps) => {
+    const { vm, changeChecked } = useCheckboxGroup(props);
+    return <CheckboxGroupPrimitiveRenderer {...vm} changeChecked={changeChecked} />;
+};
+const CheckboxGroupPrimitive = makeDecoratable(
+    "CheckboxGroupPrimitive",
+    DecoratableCheckboxGroupPrimitive
+);
+
+export {
+    CheckboxGroupPrimitive,
+    CheckboxGroupPrimitiveRenderer,
+    type CheckboxGroupPrimitiveProps,
+    type CheckboxGroupPrimitiveRendererProps,
+    type CheckboxGroupPrimitiveVm
+};
diff --git a/packages/admin-ui/src/CheckboxGroup/primitives/index.ts b/packages/admin-ui/src/CheckboxGroup/primitives/index.ts
new file mode 100644
index 00000000000..8620476c83d
--- /dev/null
+++ b/packages/admin-ui/src/CheckboxGroup/primitives/index.ts
@@ -0,0 +1 @@
+export * from "./CheckboxGroupPrimitive";
diff --git a/packages/admin-ui/src/CheckboxGroup/primitives/presenters/CheckboxGroupPresenter.test.ts b/packages/admin-ui/src/CheckboxGroup/primitives/presenters/CheckboxGroupPresenter.test.ts
new file mode 100644
index 00000000000..9e2886c7edc
--- /dev/null
+++ b/packages/admin-ui/src/CheckboxGroup/primitives/presenters/CheckboxGroupPresenter.test.ts
@@ -0,0 +1,165 @@
+import { CheckboxGroupPresenter } from "./CheckboxGroupPresenter";
+import type { CheckboxItemDto } from "~/Checkbox/domains/CheckboxItemDto";
+
+describe("CheckboxGroupPresenter", () => {
+    let presenter: CheckboxGroupPresenter;
+    const onCheckedChange = jest.fn();
+
+    beforeEach(() => {
+        presenter = new CheckboxGroupPresenter();
+    });
+
+    it("initializes with given props", () => {
+        const mockProps = {
+            items: [
+                { value: "item1", label: "Item 1" },
+                { value: "item2", label: "Item 2" }
+            ],
+            values: ["item1"],
+            onCheckedChange
+        };
+        presenter.init(mockProps);
+
+        expect(presenter.vm.items).toEqual([
+            {
+                id: expect.any(String),
+                value: "item1",
+                label: "Item 1",
+                checked: true,
+                indeterminate: false,
+                disabled: false,
+                hasLabel: true
+            },
+            {
+                id: expect.any(String),
+                value: "item2",
+                label: "Item 2",
+                checked: false,
+                indeterminate: false,
+                disabled: false,
+                hasLabel: true
+            }
+        ]);
+    });
+
+    it("updates checked state when changeChecked is called", () => {
+        const mockProps = {
+            items: [
+                { value: "item1", label: "Item 1" },
+                { value: "item2", label: "Item 2" }
+            ],
+            values: ["item1"],
+            onCheckedChange
+        };
+        presenter.init(mockProps);
+
+        presenter.changeChecked("item2");
+
+        expect(presenter.vm.items).toEqual([
+            {
+                id: expect.any(String),
+                value: "item1",
+                label: "Item 1",
+                checked: true,
+                indeterminate: false,
+                disabled: false,
+                hasLabel: true
+            },
+            {
+                id: expect.any(String),
+                value: "item2",
+                label: "Item 2",
+                checked: true,
+                indeterminate: false,
+                disabled: false,
+                hasLabel: true
+            }
+        ]);
+        expect(mockProps.onCheckedChange).toHaveBeenCalledWith(["item1", "item2"]);
+    });
+
+    it("removes an item from checked state when changeChecked is called on an already checked item", () => {
+        const mockProps = {
+            items: [
+                {
+                    id: expect.any(String),
+                    value: "item1",
+                    label: "Item 1",
+                    checked: true,
+                    indeterminate: false,
+                    disabled: false,
+                    hasLabel: true
+                },
+                {
+                    id: expect.any(String),
+                    value: "item2",
+                    label: "Item 2",
+                    checked: true,
+                    indeterminate: false,
+                    disabled: false,
+                    hasLabel: true
+                }
+            ],
+            values: ["item1", "item2"],
+            onCheckedChange
+        };
+        presenter.init(mockProps);
+
+        presenter.changeChecked("item2");
+
+        expect(presenter.vm.items).toEqual([
+            {
+                id: expect.any(String),
+                value: "item1",
+                label: "Item 1",
+                checked: true,
+                indeterminate: false,
+                disabled: false,
+                hasLabel: true
+            },
+            {
+                id: expect.any(String),
+                value: "item2",
+                label: "Item 2",
+                checked: false,
+                indeterminate: false,
+                disabled: false,
+                hasLabel: true
+            }
+        ]);
+        expect(mockProps.onCheckedChange).toHaveBeenCalledWith(["item1"]);
+    });
+
+    it("handles items with missing values correctly", () => {
+        const mockProps = {
+            items: [
+                { value: "item1", label: "Item 1" },
+                { label: "Item 2" } // Missing `value`
+            ] as unknown as CheckboxItemDto[], // Simulate improper data
+            values: ["item1"],
+            onCheckedChange
+        };
+        presenter.init(mockProps);
+
+        expect(presenter.vm.items).toEqual([
+            {
+                id: expect.any(String),
+                value: "item1",
+                label: "Item 1",
+                checked: true,
+                indeterminate: false,
+                disabled: false,
+                hasLabel: true
+            },
+            {
+                id: expect.any(String),
+                value: undefined,
+                label: "Item 2",
+                checked: false,
+                indeterminate: false,
+                disabled: false,
+                hasLabel: true
+            }
+        ]);
+    });
+});
diff --git a/packages/admin-ui/src/CheckboxGroup/primitives/presenters/CheckboxGroupPresenter.ts b/packages/admin-ui/src/CheckboxGroup/primitives/presenters/CheckboxGroupPresenter.ts
new file mode 100644
index 00000000000..e7c2420a6b3
--- /dev/null
+++ b/packages/admin-ui/src/CheckboxGroup/primitives/presenters/CheckboxGroupPresenter.ts
@@ -0,0 +1,73 @@
+import { makeAutoObservable } from "mobx";
+import { CheckboxGroupPrimitiveVm } from "../CheckboxGroupPrimitive";
+import { CheckboxItem } from "~/Checkbox/domains/CheckboxItem";
+import { CheckboxItemMapper } from "~/Checkbox/domains/CheckboxItemMapper";
+import type { CheckboxItemDto } from "~/Checkbox/domains/CheckboxItemDto";
+
+interface CheckboxGroupPresenterParams<TValue = string | number> {
+    items: CheckboxItemDto[];
+    values: TValue[];
+    onCheckedChange?: (values: TValue[]) => void;
+}
+
+interface ICheckboxGroupPresenter<TValue = string | number> {
+    vm: CheckboxGroupPrimitiveVm;
+    init: (params: CheckboxGroupPresenterParams<TValue>) => void;
+    changeChecked: (value: TValue) => void;
+}
+
+class CheckboxGroupPresenter<TValue = string | number> implements ICheckboxGroupPresenter<TValue> {
+    private params?: CheckboxGroupPresenterParams<TValue> = undefined;
+    private items: CheckboxItem[] = [];
+
+    constructor() {
+        makeAutoObservable(this);
+    }
+
+    public init(params: CheckboxGroupPresenterParams<TValue>): void {
+        this.params = params;
+        this.items = this.getItems(params.items, params.values);
+    }
+
+    get vm(): CheckboxGroupPrimitiveVm {
+        return {
+            items: this.items.map(item => CheckboxItemMapper.toFormatted(item))
+        };
+    }
+
+    public changeChecked = (value: TValue) => {
+        if (!this.params?.items) {
+            return;
+        }
+
+        const currentValues = [...this.params.values];
+        const newValues = this.getUpdatedValues(currentValues, value);
+        this.items = this.getItems(this.params.items, newValues);
+        this.params.onCheckedChange?.(newValues);
+    };
+
+    private getUpdatedValues(currentValues: TValue[], value: TValue): TValue[] {
+        const index = currentValues.indexOf(value);
+
+        if (index > -1) {
+            return [...currentValues.slice(0, index), ...currentValues.slice(index + 1)];
+        }
+
+        return [...currentValues, value];
+    }
+
+    private getItems(items: CheckboxItemDto[], values: TValue[]): CheckboxItem[] {
+        if (!items.length) {
+            return [];
+        }
+
+        return items.map(item =>
+            CheckboxItem.create({
+                ...item,
+                checked: values.some(value => value === item.value)
+            })
+        );
+    }
+}
+
+export { CheckboxGroupPresenter, type ICheckboxGroupPresenter, type CheckboxGroupPresenterParams };
diff --git a/packages/admin-ui/src/CheckboxGroup/primitives/presenters/index.ts b/packages/admin-ui/src/CheckboxGroup/primitives/presenters/index.ts
new file mode 100644
index 00000000000..9e121f605c7
--- /dev/null
+++ b/packages/admin-ui/src/CheckboxGroup/primitives/presenters/index.ts
@@ -0,0 +1 @@
+export * from "./CheckboxGroupPresenter";
diff --git a/packages/admin-ui/src/CheckboxGroup/primitives/useCheckboxGroup.ts b/packages/admin-ui/src/CheckboxGroup/primitives/useCheckboxGroup.ts
new file mode 100644
index 00000000000..c69521d4474
--- /dev/null
+++ b/packages/admin-ui/src/CheckboxGroup/primitives/useCheckboxGroup.ts
@@ -0,0 +1,35 @@
+import { useEffect, useMemo, useState } from "react";
+import { autorun } from "mobx";
+import { CheckboxGroupPrimitiveProps } from "./CheckboxGroupPrimitive";
+import { CheckboxGroupPresenter, CheckboxGroupPresenterParams } from "./presenters";
+
+export const useCheckboxGroup = (props: CheckboxGroupPrimitiveProps) => {
+    const params: CheckboxGroupPresenterParams = useMemo(
+        () => ({
+            items: props.items,
+            values: props.value || [],
+            onCheckedChange: props.onChange
+        }),
+        [props.items, props.value, props.onChange]
+    );
+
+    const presenter = useMemo(() => {
+        const presenter = new CheckboxGroupPresenter();
+        presenter.init(params);
+        return presenter;
+    }, []);
+
+    const [vm, setVm] = useState(presenter.vm);
+
+    useEffect(() => {
+        presenter.init(params);
+    }, [params]);
+
+    useEffect(() => {
+        return autorun(() => {
+            setVm(presenter.vm);
+        });
+    }, [presenter]);
+
+    return { vm, changeChecked: presenter.changeChecked };
+};
diff --git a/packages/admin-ui/src/CodeEditor/CodeEditor.mdx b/packages/admin-ui/src/CodeEditor/CodeEditor.mdx
new file mode 100644
index 00000000000..d83d77ca870
--- /dev/null
+++ b/packages/admin-ui/src/CodeEditor/CodeEditor.mdx
@@ -0,0 +1,100 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+
+import * as CodeEditorStories from './CodeEditor.stories';
+
+<Meta of={CodeEditorStories} />
+
+# Code Editor
+
+The Code Editor component is a specialized input field that allows users to write and edit code with syntax highlighting, making it easier to work with HTML, JSON, and other code formats. It provides a more user-friendly experience for editing code compared to a standard text area.
+
+## Usage
+
+<Canvas of={CodeEditorStories.Documentation} source={ { code: `
+import React, { useState } from "react";
+import { CodeEditor } from "@webiny/admin-ui";
+
+const CodeEditorExample = () => {
+    const [code, setCode] = useState('{\\n  "name": "example",\\n  "version": "1.0.0"\\n}');
+    const [validation, setValidation] = useState({ isValid: true, message: "" });
+
+    const handleChange = (newCode: string) => {
+        setCode(newCode);
+
+        // Simple required validation
+        if (!newCode || newCode.trim() === "") {
+            setValidation({ isValid: false, message: "This field is required" });
+        } else {
+            setValidation({ isValid: true, message: "" });
+        }
+    };
+
+    return (
+        <CodeEditor
+            label="JSON Configuration"
+            description="Enter your configuration in JSON format"
+            note="Note: Make sure your JSON is valid"
+            required={true}
+            mode="json"
+            theme="github"
+            value={code}
+            onChange={handleChange}
+            validation={validation}
+        />
+    );
+};
+
+export default CodeEditorExample;
+
+` } }
+        additionalActions={[
+            {
+                title: 'Open in GitHub',
+                onClick: () => {
+                    window.open(
+                        'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/CodeEditor/CodeEditor.tsx',
+                        '_blank'
+                    );
+                },
+            }
+        ]}
+/>
+
+<Controls of={CodeEditorStories.Documentation} exclude={"onChange"}/>
+
+```tsx
+import React, { useState } from "react";
+import { CodeEditor } from "@webiny/admin-ui";
+
+const CodeEditorExample = () => {
+    const [code, setCode] = useState('{\n  "name": "example",\n  "version": "1.0.0"\n}');
+    const [validation, setValidation] = useState({ isValid: true, message: "" });
+
+    const handleChange = (newCode: string) => {
+        setCode(newCode);
+
+        // Simple required validation
+        if (!newCode || newCode.trim() === "") {
+            setValidation({ isValid: false, message: "This field is required" });
+        } else {
+            setValidation({ isValid: true, message: "" });
+        }
+    };
+
+    return (
+        <CodeEditor
+            label="JSON Configuration"
+            description="Enter your configuration in JSON format"
+            note="Note: Make sure your JSON is valid"
+            required={true}
+            mode="json"
+            theme="github"
+            value={code}
+            onChange={handleChange}
+            validation={validation}
+        />
+    );
+};
+
+export default CodeEditorExample;
+```
\ No newline at end of file
diff --git a/packages/admin-ui/src/CodeEditor/CodeEditor.stories.tsx b/packages/admin-ui/src/CodeEditor/CodeEditor.stories.tsx
new file mode 100644
index 00000000000..9565ebe52a3
--- /dev/null
+++ b/packages/admin-ui/src/CodeEditor/CodeEditor.stories.tsx
@@ -0,0 +1,181 @@
+import React, { useState, useEffect } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { CodeEditor } from "./CodeEditor";
+
+const meta: Meta<typeof CodeEditor> = {
+    title: "Components/Form/CodeEditor",
+    component: CodeEditor,
+    argTypes: {
+        onChange: { action: "onChange" },
+        disabled: {
+            control: "boolean",
+            defaultValue: false
+        }
+    },
+    parameters: {
+        layout: "padded"
+    }
+};
+
+export default meta;
+type Story = StoryObj<typeof CodeEditor>;
+
+export const Default: Story = {};
+
+export const WithLabel: Story = {
+    args: {
+        label: "Any field label"
+    }
+};
+
+export const WithLabelRequired: Story = {
+    args: {
+        ...Default.args,
+        label: "Any field label",
+        required: true
+    }
+};
+
+export const WithDescription: Story = {
+    args: {
+        ...Default.args,
+        description: "Provide the required information for processing your request."
+    }
+};
+
+export const WithNotes: Story = {
+    args: {
+        ...Default.args,
+        note: "Note: Ensure your selection or input is accurate before proceeding."
+    }
+};
+
+export const WithErrors: Story = {
+    args: {
+        ...Default.args,
+        validation: {
+            isValid: false,
+            message: "This field is required."
+        }
+    }
+};
+
+export const Disabled: Story = {
+    args: {
+        ...Default.args,
+        label: "Any field label",
+        disabled: true
+    }
+};
+
+export const FullExample: Story = {
+    args: {
+        ...Default.args,
+        label: "Any field label",
+        required: true,
+        description: "Provide the required information for processing your request.",
+        note: "Note: Ensure your selection or input is accurate before proceeding.",
+        validation: {
+            isValid: false,
+            message: "This field is required."
+        }
+    }
+};
+
+export const Documentation: Story = {
+    render: args => {
+        const [value, setValue] = useState(args.value || "");
+        const [validation, setValidation] = useState({ isValid: true, message: "" });
+
+        // Update value when args.value changes
+        useEffect(() => {
+            setValue(args.value || "");
+        }, [args.value]);
+
+        const handleChange = (newValue: string) => {
+            setValue(newValue);
+
+            // Simple required validation
+            if (args.required && (!newValue || newValue.trim() === "")) {
+                setValidation({ isValid: false, message: "This field is required" });
+            } else {
+                setValidation({ isValid: true, message: "" });
+            }
+        };
+
+        // Validate on required change or value change
+        useEffect(() => {
+            if (args.required && (!value || value.trim() === "")) {
+                setValidation({ isValid: false, message: "This field is required" });
+            } else {
+                setValidation({ isValid: true, message: "" });
+            }
+        }, [args.required, value]);
+
+        return (
+            <CodeEditor
+                {...args}
+                value={value}
+                onChange={handleChange}
+                validation={validation}
+                required={args.required}
+            />
+        );
+    },
+    args: {
+        label: "JSON Configuration",
+        required: true,
+        disabled: false,
+        description: "Enter your configuration in JSON format",
+        note: "Note: Make sure your JSON is valid",
+        mode: "json",
+        theme: "github",
+        value: '{\n  "name": "example",\n  "version": "1.0.0"\n}',
+        validation: undefined
+    },
+    argTypes: {
+        label: {
+            description: "Label text for the code editor",
+            control: "text"
+        },
+        required: {
+            description: "Makes the field required when set to true",
+            control: "boolean"
+        },
+        disabled: {
+            description: "Disables the code editor when set to true",
+            control: "boolean"
+        },
+        description: {
+            description: "Additional description text below the field",
+            control: "text"
+        },
+        note: {
+            description: "Additional note text below the field",
+            control: "text"
+        },
+        mode: {
+            description: "The language mode for syntax highlighting",
+            control: "select",
+            options: ["html", "json"]
+        },
+        theme: {
+            description: "The theme for the code editor",
+            control: "select",
+            options: ["github", "twilight", "chrome"]
+        },
+        value: {
+            description: "The code content",
+            control: "text"
+        },
+        validation: {
+            description:
+                "Object containing validation state and message. Please refer to the example code for details on usage.",
+            control: "none"
+        },
+        onChange: {
+            description: "Function called when the code changes",
+            control: "none"
+        }
+    }
+};
diff --git a/packages/admin-ui/src/CodeEditor/CodeEditor.tsx b/packages/admin-ui/src/CodeEditor/CodeEditor.tsx
new file mode 100644
index 00000000000..de1d4b59eae
--- /dev/null
+++ b/packages/admin-ui/src/CodeEditor/CodeEditor.tsx
@@ -0,0 +1,47 @@
+import React, { useMemo } from "react";
+import { makeDecoratable } from "~/utils";
+import { CodeEditorPrimitive, CodeEditorPrimitiveProps } from "./CodeEditorPrimitive";
+import {
+    FormComponentDescription,
+    FormComponentErrorMessage,
+    FormComponentLabel,
+    FormComponentNote,
+    FormComponentProps
+} from "~/FormComponent";
+
+type CodeEditorProps = CodeEditorPrimitiveProps & FormComponentProps;
+
+const DecoratableCodeEditor = ({
+    label,
+    description,
+    note,
+    required,
+    disabled,
+    validation,
+    ...props
+}: CodeEditorProps) => {
+    const { isValid: validationIsValid, message: validationMessage } = validation || {};
+    const invalid = useMemo(() => validationIsValid === false, [validationIsValid]);
+
+    return (
+        <div className={"wby-w-full"}>
+            <FormComponentLabel
+                text={label}
+                required={required}
+                disabled={disabled}
+                invalid={invalid}
+            />
+            <FormComponentDescription text={description} disabled={disabled} />
+            <CodeEditorPrimitive {...props} disabled={disabled} />
+            <FormComponentErrorMessage
+                text={validationMessage}
+                invalid={invalid}
+                disabled={disabled}
+            />
+            <FormComponentNote text={note} disabled={disabled} />
+        </div>
+    );
+};
+const CodeEditor = makeDecoratable("CodeEditor", DecoratableCodeEditor);
+
+export { CodeEditor, type CodeEditorProps };
diff --git a/packages/admin-ui/src/CodeEditor/CodeEditorPrimitive.stories.tsx b/packages/admin-ui/src/CodeEditor/CodeEditorPrimitive.stories.tsx
new file mode 100644
index 00000000000..7c95e06f30c
--- /dev/null
+++ b/packages/admin-ui/src/CodeEditor/CodeEditorPrimitive.stories.tsx
@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { CodeEditorPrimitive } from "./CodeEditorPrimitive";
+
+const meta: Meta<typeof CodeEditorPrimitive> = {
+    title: "Components/Form Primitives/CodeEditor",
+    component: CodeEditorPrimitive,
+    argTypes: {
+        onChange: { action: "onChange" }
+    },
+    parameters: {
+        layout: "padded"
+    }
+};
+
+export default meta;
+type Story = StoryObj<typeof CodeEditorPrimitive>;
+
+export const Default: Story = {};
diff --git a/packages/admin-ui/src/CodeEditor/CodeEditorPrimitive.tsx b/packages/admin-ui/src/CodeEditor/CodeEditorPrimitive.tsx
new file mode 100644
index 00000000000..b435a3ff2ee
--- /dev/null
+++ b/packages/admin-ui/src/CodeEditor/CodeEditorPrimitive.tsx
@@ -0,0 +1,43 @@
+import React from "react";
+import AceEditor from "react-ace";
+import "ace-builds/webpack-resolver";
+import { makeDecoratable } from "~/utils";
+
+// Modes
+import "ace-builds/src-noconflict/mode-html";
+import "ace-builds/src-noconflict/mode-json";
+// Extensions
+import "ace-builds/src-noconflict/ext-searchbox";
+// Themes
+import "ace-builds/src-noconflict/theme-github";
+import "ace-builds/src-noconflict/theme-twilight";
+import "ace-builds/src-noconflict/theme-chrome";
+
+interface CodeEditorPrimitiveProps extends React.ComponentProps<typeof AceEditor> {
+    mode: string;
+    disabled?: boolean;
+}
+
+const DecoratableCodeEditorPrimitive = ({
+    value,
+    theme = "github",
+    disabled,
+    ...rest
+}: CodeEditorPrimitiveProps) => {
+    return (
+        <AceEditor
+            value={value ? String(value) : ""}
+            theme={theme}
+            readOnly={disabled}
+            {...rest}
+            width="100%"
+            editorProps={{
+                $blockScrolling: Infinity // Suppresses scrolling warning in console.
+            }}
+        />
+    );
+};
+
+const CodeEditorPrimitive = makeDecoratable("CodeEditorPrimitive", DecoratableCodeEditorPrimitive);
+
+export { CodeEditorPrimitive, type CodeEditorPrimitiveProps };
diff --git a/packages/admin-ui/src/CodeEditor/index.ts b/packages/admin-ui/src/CodeEditor/index.ts
new file mode 100644
index 00000000000..21f71d801ad
--- /dev/null
+++ b/packages/admin-ui/src/CodeEditor/index.ts
@@ -0,0 +1,2 @@
+export * from "./CodeEditorPrimitive";
+export * from "./CodeEditor";
diff --git a/packages/admin-ui/src/ColorPicker/ColorPicker.mdx b/packages/admin-ui/src/ColorPicker/ColorPicker.mdx
new file mode 100644
index 00000000000..f8a9f428ad5
--- /dev/null
+++ b/packages/admin-ui/src/ColorPicker/ColorPicker.mdx
@@ -0,0 +1,94 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+
+import * as ColorPickerStories from './ColorPicker.stories';
+
+<Meta of={ColorPickerStories} />
+
+# Color Picker
+
+The Color Picker component allows users to select colors from a predefined palette or specify custom colors using various formats (hex, RGB, or named colors). It provides an intuitive interface for color selection in forms and design tools.
+
+## Usage
+
+<Canvas of={ColorPickerStories.Documentation} source={ { code: `
+import React, { useState } from "react";
+import { ColorPicker } from "@webiny/admin-ui";
+
+const ColorPickerExample = () => {
+    const [color, setColor] = useState("#4285F4");
+    const [validation, setValidation] = useState({ isValid: true, message: "" });
+
+    const handleChange = (newColor: string) => {
+        setColor(newColor);
+
+        if (!newColor) {
+            setValidation({ isValid: false, message: "Please select a color" });
+        } else {
+            setValidation({ isValid: true, message: "" });
+        }
+    };
+
+    return (
+        <ColorPicker
+            label="Brand Color"
+            description="Select your primary brand color"
+            note="Note: Choose a color that aligns with your brand identity"
+            required={true}
+            value={color}
+            onChange={handleChange}
+            validation={validation}
+        />
+    );
+};
+
+export default ColorPickerExample;
+
+` } }
+        additionalActions={[
+            {
+                title: 'Open in GitHub',
+                onClick: () => {
+                    window.open(
+                        'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/ColorPicker/ColorPicker.tsx',
+                        '_blank'
+                    );
+                },
+            }
+        ]}
+/>
+
+<Controls of={ColorPickerStories.Documentation} exclude={"onChange"}/>
+
+```tsx
+import React, { useState } from "react";
+import { ColorPicker } from "@webiny/admin-ui";
+
+const ColorPickerExample = () => {
+    const [color, setColor] = useState("#4285F4");
+    const [validation, setValidation] = useState({ isValid: true, message: "" });
+
+    const handleChange = (newColor: string) => {
+        setColor(newColor);
+
+        if (!newColor) {
+            setValidation({ isValid: false, message: "Please select a color" });
+        } else {
+            setValidation({ isValid: true, message: "" });
+        }
+    };
+
+    return (
+        <ColorPicker
+            label="Brand Color"
+            description="Select your primary brand color"
+            note="Note: Choose a color that aligns with your brand identity"
+            required={true}
+            value={color}
+            onChange={handleChange}
+            validation={validation}
+        />
+    );
+};
+
+export default ColorPickerExample;
+```
diff --git a/packages/admin-ui/src/ColorPicker/ColorPicker.stories.tsx b/packages/admin-ui/src/ColorPicker/ColorPicker.stories.tsx
new file mode 100644
index 00000000000..400ab801796
--- /dev/null
+++ b/packages/admin-ui/src/ColorPicker/ColorPicker.stories.tsx
@@ -0,0 +1,174 @@
+import React, { useState, useEffect } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { ColorPicker } from "./ColorPicker";
+
+const meta: Meta<typeof ColorPicker> = {
+    title: "Components/Form/ColorPicker",
+    component: ColorPicker,
+    argTypes: {
+        onChange: { action: "onChange" },
+        disabled: {
+            control: "boolean",
+            defaultValue: false
+        }
+    },
+    parameters: {
+        layout: "padded"
+    },
+    render: args => {
+        const [value, setValue] = useState(args.value);
+        return <ColorPicker {...args} value={value} onChange={setValue} />;
+    }
+};
+
+export default meta;
+type Story = StoryObj<typeof ColorPicker>;
+
+export const Default: Story = {};
+
+export const WithLabel: Story = {
+    args: {
+        ...Default.args,
+        label: "Any field label"
+    }
+};
+
+export const WithLabelRequired: Story = {
+    args: {
+        ...Default.args,
+        label: "Any field label",
+        required: true
+    }
+};
+
+export const WithDescription: Story = {
+    args: {
+        ...Default.args,
+        description: "Provide the required information for processing your request."
+    }
+};
+
+export const WithNotes: Story = {
+    args: {
+        ...Default.args,
+        note: "Note: Ensure your selection or input is accurate before proceeding."
+    }
+};
+
+export const WithErrors: Story = {
+    args: {
+        ...Default.args,
+        validation: {
+            isValid: false,
+            message: "This field is required."
+        }
+    }
+};
+
+export const Disabled: Story = {
+    args: {
+        ...Default.args,
+        label: "Any field label",
+        disabled: true
+    }
+};
+
+export const FullExample: Story = {
+    args: {
+        ...Default.args,
+        label: "Any field label",
+        required: true,
+        description: "Provide the required information for processing your request.",
+        note: "Note: Ensure your selection or input is accurate before proceeding.",
+        validation: {
+            isValid: false,
+            message: "This field is required."
+        }
+    }
+};
+
+export const Documentation: Story = {
+    render: args => {
+        const [value, setValue] = useState(args.value || "");
+        const [validation, setValidation] = useState({ isValid: true, message: "" });
+
+        // Update value when args.value changes
+        useEffect(() => {
+            setValue(args.value || "");
+        }, [args.value]);
+
+        const handleChange = (newValue: string) => {
+            setValue(newValue);
+
+            // Simple required validation
+            if (args.required && (!newValue || newValue.trim() === "")) {
+                setValidation({ isValid: false, message: "Please select a color" });
+            } else {
+                setValidation({ isValid: true, message: "" });
+            }
+        };
+
+        // Validate on required change or value change
+        useEffect(() => {
+            if (args.required && (!value || value.trim() === "")) {
+                setValidation({ isValid: false, message: "Please select a color" });
+            } else {
+                setValidation({ isValid: true, message: "" });
+            }
+        }, [args.required, value]);
+
+        return (
+            <ColorPicker
+                {...args}
+                value={value}
+                onChange={handleChange}
+                validation={validation}
+                required={args.required}
+            />
+        );
+    },
+    args: {
+        label: "Brand Color",
+        required: true,
+        disabled: false,
+        description: "Select your primary brand color",
+        note: "Note: Choose a color that aligns with your brand identity",
+        value: "#4285F4",
+        validation: undefined
+    },
+    argTypes: {
+        label: {
+            description: "Label text for the color picker",
+            control: "text"
+        },
+        required: {
+            description: "Makes the field required when set to true",
+            control: "boolean"
+        },
+        disabled: {
+            description: "Disables the color picker when set to true",
+            control: "boolean"
+        },
+        description: {
+            description: "Additional description text below the field",
+            control: "text"
+        },
+        note: {
+            description: "Additional note text below the field",
+            control: "text"
+        },
+        value: {
+            description: "The selected color value (hex, RGB, or named color)",
+            control: "color"
+        },
+        validation: {
+            description:
+                "Object containing validation state and message. Please refer to the example code for details on usage.",
+            control: "none"
+        },
+        onChange: {
+            description: "Function called when the color changes",
+            control: "none"
+        }
+    }
+};
diff --git a/packages/admin-ui/src/ColorPicker/ColorPicker.tsx b/packages/admin-ui/src/ColorPicker/ColorPicker.tsx
new file mode 100644
index 00000000000..082a3c77a66
--- /dev/null
+++ b/packages/admin-ui/src/ColorPicker/ColorPicker.tsx
@@ -0,0 +1,47 @@
+import React, { useMemo } from "react";
+import { makeDecoratable } from "~/utils";
+import { ColorPickerPrimitive, ColorPickerPrimitiveProps } from "./primitives";
+import {
+    FormComponentDescription,
+    FormComponentErrorMessage,
+    FormComponentLabel,
+    FormComponentNote,
+    FormComponentProps
+} from "~/FormComponent";
+
+type ColorPickerProps = ColorPickerPrimitiveProps & FormComponentProps;
+
+const DecoratableIconPicker = ({
+    label,
+    description,
+    note,
+    required,
+    disabled,
+    validation,
+    ...props
+}: ColorPickerProps) => {
+    const { isValid: validationIsValid, message: validationMessage } = validation || {};
+    const invalid = useMemo(() => validationIsValid === false, [validationIsValid]);
+
+    return (
+        <div className={"wby-w-full"}>
+            <FormComponentLabel
+                text={label}
+                required={required}
+                disabled={disabled}
+                invalid={invalid}
+            />
+            <FormComponentDescription text={description} disabled={disabled} />
+            <ColorPickerPrimitive {...props} disabled={disabled} invalid={invalid} />
+            <FormComponentErrorMessage
+                text={validationMessage}
+                invalid={invalid}
+                disabled={disabled}
+            />
+            <FormComponentNote text={note} disabled={disabled} />
+        </div>
+    );
+};
+const ColorPicker = makeDecoratable("ColorPicker", DecoratableIconPicker);
+
+export { ColorPicker, type ColorPickerProps };
diff --git a/packages/admin-ui/src/ColorPicker/index.ts b/packages/admin-ui/src/ColorPicker/index.ts
new file mode 100644
index 00000000000..6302928b186
--- /dev/null
+++ b/packages/admin-ui/src/ColorPicker/index.ts
@@ -0,0 +1,2 @@
+export * from "./ColorPicker";
+export * from "./primitives";
diff --git a/packages/admin-ui/src/ColorPicker/primitives/ColorPickerPrimitive.stories.tsx b/packages/admin-ui/src/ColorPicker/primitives/ColorPickerPrimitive.stories.tsx
new file mode 100644
index 00000000000..15d06d6334e
--- /dev/null
+++ b/packages/admin-ui/src/ColorPicker/primitives/ColorPickerPrimitive.stories.tsx
@@ -0,0 +1,139 @@
+import React, { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { ColorPickerPrimitive } from "./ColorPickerPrimitive";
+
+const meta: Meta<typeof ColorPickerPrimitive> = {
+    title: "Components/Form Primitives/ColorPicker",
+    component: ColorPickerPrimitive,
+    argTypes: {
+        onChange: { action: "onChange" },
+        onOpenChange: { action: "onOpenChange" }
+    },
+    parameters: {
+        layout: "padded"
+    },
+    render: args => {
+        const [value, setValue] = useState(args.value);
+        return (
+            <div className={"wby-w-full"}>
+                <div className={"wby-flex wby-items-center wby-justify-center wby-mb-4"}>
+                    <ColorPickerPrimitive {...args} value={value} onChange={setValue} />
+                </div>
+                <div className={"wby-text-center"}>
+                    Current selected value: <pre>{value}</pre>
+                </div>
+            </div>
+        );
+    }
+};
+
+export default meta;
+type Story = StoryObj<typeof ColorPickerPrimitive>;
+
+export const Default: Story = {};
+
+export const MediumSize: Story = {
+    args: {
+        size: "md"
+    }
+};
+
+export const LargeSize: Story = {
+    args: {
+        size: "lg"
+    }
+};
+
+export const ExtraLargeSize: Story = {
+    args: {
+        size: "xl"
+    }
+};
+
+export const PrimaryVariant: Story = {
+    args: {
+        variant: "primary"
+    }
+};
+
+export const PrimaryVariantDisabled: Story = {
+    args: {
+        ...PrimaryVariant.args,
+        disabled: true
+    }
+};
+
+export const PrimaryVariantInvalid: Story = {
+    args: {
+        ...PrimaryVariant.args,
+        invalid: true
+    }
+};
+
+export const SecondaryVariant: Story = {
+    args: {
+        variant: "secondary"
+    }
+};
+
+export const SecondaryVariantDisabled: Story = {
+    args: {
+        ...SecondaryVariant.args,
+        disabled: true
+    }
+};
+
+export const SecondaryVariantInvalid: Story = {
+    args: {
+        ...SecondaryVariant.args,
+        invalid: true
+    }
+};
+
+export const GhostVariant: Story = {
+    args: {
+        variant: "ghost"
+    }
+};
+
+export const GhostVariantDisabled: Story = {
+    args: {
+        ...GhostVariant.args,
+        disabled: true
+    }
+};
+
+export const GhostVariantInvalid: Story = {
+    args: {
+        ...GhostVariant.args,
+        invalid: true
+    }
+};
+
+export const WithDefaultValue: Story = {
+    args: {
+        ...Default.args,
+        value: "#ff0000"
+    }
+};
+
+export const WithStartAlign: Story = {
+    args: {
+        ...Default.args,
+        align: "start"
+    }
+};
+
+export const WithCenterAlign: Story = {
+    args: {
+        ...Default.args,
+        align: "center"
+    }
+};
+
+export const WithEndAlign: Story = {
+    args: {
+        ...Default.args,
+        align: "end"
+    }
+};
diff --git a/packages/admin-ui/src/ColorPicker/primitives/ColorPickerPrimitive.tsx b/packages/admin-ui/src/ColorPicker/primitives/ColorPickerPrimitive.tsx
new file mode 100644
index 00000000000..fb61ec9bc06
--- /dev/null
+++ b/packages/admin-ui/src/ColorPicker/primitives/ColorPickerPrimitive.tsx
@@ -0,0 +1,118 @@
+import React from "react";
+import { SketchPicker } from "react-color";
+import { useColorPicker } from "./useColorPicker";
+import { type InputPrimitiveProps, inputVariants } from "~/Input";
+import { PopoverPrimitive, type PopoverPrimitiveContentProps } from "~/Popover";
+import { cn, cva, makeDecoratable } from "~/utils";
+
+const colorPickerVariants = cva("wby-cursor-pointer", {
+    variants: {
+        size: {
+            md: ["wby-size-8", "wby-p-[calc(theme(padding.xs-plus)-theme(borderWidth.sm))] "],
+            lg: ["wby-size-10", "wby-p-[calc(theme(padding.sm-plus)-theme(borderWidth.sm))]"],
+            xl: ["wby-size-14", "wby-p-[calc(theme(padding.md)-theme(borderWidth.sm))]"]
+        },
+        disabled: {
+            true: "wby-pointer-events-none"
+        }
+    },
+    defaultVariants: {
+        size: "lg"
+    }
+});
+
+interface ColorPickerPrimitiveProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
+    /**
+     * Callback triggered when the open state changes.
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Callback triggered when the value changes.
+     */
+    onChange?: (value: string) => void;
+    /**
+     * Optional selected value.
+     */
+    value?: string;
+    /**
+     * If true, the color picker will be disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Popover alignment.
+     */
+    align?: PopoverPrimitiveContentProps["align"];
+    /**
+     * Size of the input field.
+     * Refer to `InputPrimitiveProps["size"]` for possible values.
+     */
+    size?: InputPrimitiveProps["size"];
+    /**
+     * Variant of the input field.
+     * Refer to `InputPrimitiveProps["variant"]` for possible values.
+     */
+    variant?: InputPrimitiveProps["variant"];
+    /**
+     * Indicates if the input field is invalid.
+     * Refer to `InputPrimitiveProps["invalid"]` for possible values.
+     */
+    invalid?: InputPrimitiveProps["invalid"];
+}
+
+const DecoratableColorPickerPrimitive = ({
+    align,
+    disabled,
+    invalid,
+    size,
+    variant,
+    value,
+    onOpenChange,
+    onChange,
+    ...props
+}: ColorPickerPrimitiveProps) => {
+    const { vm, setColor, setOpen } = useColorPicker({
+        value,
+        onOpenChange,
+        onChange
+    });
+
+    return (
+        <div {...props}>
+            <PopoverPrimitive open={vm.open}>
+                <PopoverPrimitive.Trigger asChild>
+                    <div
+                        onClick={() => setOpen(!vm.open)}
+                        data-disabled={disabled}
+                        className={cn(
+                            inputVariants({
+                                size,
+                                variant,
+                                invalid
+                            }),
+                            colorPickerVariants({ size, disabled })
+                        )}
+                    >
+                        <div
+                            className={"wby-rounded-xs wby-size-full"}
+                            style={{ backgroundColor: vm.value }}
+                        />
+                    </div>
+                </PopoverPrimitive.Trigger>
+                <PopoverPrimitive.Content
+                    align={align}
+                    onEscapeKeyDown={() => setOpen(false)}
+                    onInteractOutside={() => setOpen(false)}
+                >
+                    <SketchPicker color={vm.value} onChange={setColor} />
+                </PopoverPrimitive.Content>
+            </PopoverPrimitive>
+        </div>
+    );
+};
+
+const ColorPickerPrimitive = makeDecoratable(
+    "ColorPickerPrimitive",
+    DecoratableColorPickerPrimitive
+);
+
+export { ColorPickerPrimitive, type ColorPickerPrimitiveProps };
diff --git a/packages/admin-ui/src/ColorPicker/primitives/index.ts b/packages/admin-ui/src/ColorPicker/primitives/index.ts
new file mode 100644
index 00000000000..d65db4d85a4
--- /dev/null
+++ b/packages/admin-ui/src/ColorPicker/primitives/index.ts
@@ -0,0 +1 @@
+export * from "./ColorPickerPrimitive";
diff --git a/packages/admin-ui/src/ColorPicker/primitives/presenters/ColorPickerPresenter.test.ts b/packages/admin-ui/src/ColorPicker/primitives/presenters/ColorPickerPresenter.test.ts
new file mode 100644
index 00000000000..4eb740a0230
--- /dev/null
+++ b/packages/admin-ui/src/ColorPicker/primitives/presenters/ColorPickerPresenter.test.ts
@@ -0,0 +1,37 @@
+import { ColorState } from "react-color";
+import { ColorPickerPresenter } from "./ColorPickerPresenter";
+
+describe("ColorPickerPresenter", () => {
+    const presenter = new ColorPickerPresenter();
+    const onValueChange = jest.fn();
+
+    it("should return the compatible `vm` based on params", () => {
+        // `value`
+        {
+            presenter.init({ value: "#ff0000", onValueChange });
+            expect(presenter.vm.value).toBe("#ff0000");
+        }
+
+        {
+            // default: no params
+            presenter.init({ onValueChange });
+            expect(presenter.vm.value).toEqual("");
+            expect(presenter.vm.open).toEqual(false);
+        }
+    });
+
+    it("should set the color", () => {
+        presenter.init({ onValueChange });
+        presenter.setColor({ hex: "#ff0000" } as ColorState);
+        expect(presenter.vm.value).toBe("#ff0000");
+        expect(onValueChange).toHaveBeenCalledWith("#ff0000");
+    });
+
+    it("should set the open state", () => {
+        const onOpenChange = jest.fn();
+        presenter.init({ onValueChange, onOpenChange });
+        presenter.setOpen(true);
+        expect(presenter.vm.open).toBe(true);
+        expect(onOpenChange).toHaveBeenCalledWith(true);
+    });
+});
diff --git a/packages/admin-ui/src/ColorPicker/primitives/presenters/ColorPickerPresenter.ts b/packages/admin-ui/src/ColorPicker/primitives/presenters/ColorPickerPresenter.ts
new file mode 100644
index 00000000000..831013d7511
--- /dev/null
+++ b/packages/admin-ui/src/ColorPicker/primitives/presenters/ColorPickerPresenter.ts
@@ -0,0 +1,52 @@
+import { makeAutoObservable } from "mobx";
+import { ColorState } from "react-color";
+
+interface ColorPickerPresenterParams {
+    onOpenChange?: (open: boolean) => void;
+    onValueChange?: (value: string) => void;
+    value?: string;
+}
+
+interface IColorPickerPresenter {
+    vm: {
+        open: boolean;
+        value: string;
+    };
+    init: (params: ColorPickerPresenterParams) => void;
+    setColor: (color: ColorState) => void;
+    setOpen: (open: boolean) => void;
+}
+
+class ColorPickerPresenter implements IColorPickerPresenter {
+    private params?: ColorPickerPresenterParams = undefined;
+    private open = false;
+    private value = "";
+
+    constructor() {
+        makeAutoObservable(this);
+    }
+
+    get vm() {
+        return {
+            open: this.open,
+            value: this.value
+        };
+    }
+
+    init(params: ColorPickerPresenterParams) {
+        this.params = params;
+        this.value = params.value || "";
+    }
+
+    setColor = (color: ColorState) => {
+        this.value = color.hex;
+        this.params?.onValueChange?.(color.hex);
+    };
+
+    setOpen = (open: boolean) => {
+        this.open = open;
+        this.params?.onOpenChange?.(open);
+    };
+}
+
+export { ColorPickerPresenter, type ColorPickerPresenterParams, type IColorPickerPresenter };
diff --git a/packages/admin-ui/src/ColorPicker/primitives/presenters/index.ts b/packages/admin-ui/src/ColorPicker/primitives/presenters/index.ts
new file mode 100644
index 00000000000..5223c1ecc94
--- /dev/null
+++ b/packages/admin-ui/src/ColorPicker/primitives/presenters/index.ts
@@ -0,0 +1 @@
+export * from "./ColorPickerPresenter";
diff --git a/packages/admin-ui/src/ColorPicker/primitives/useColorPicker.ts b/packages/admin-ui/src/ColorPicker/primitives/useColorPicker.ts
new file mode 100644
index 00000000000..a6f719b10f7
--- /dev/null
+++ b/packages/admin-ui/src/ColorPicker/primitives/useColorPicker.ts
@@ -0,0 +1,39 @@
+import { useEffect, useMemo, useState } from "react";
+import { autorun } from "mobx";
+import { ColorPickerPrimitiveProps } from "./ColorPickerPrimitive";
+import { ColorPickerPresenter, ColorPickerPresenterParams } from "./presenters";
+
+export const useColorPicker = (props: ColorPickerPrimitiveProps) => {
+    const params: ColorPickerPresenterParams = useMemo(
+        () => ({
+            value: props.value,
+            onOpenChange: props.onOpenChange,
+            onValueChange: props.onChange
+        }),
+        [props.value, props.onOpenChange, props.onChange]
+    );
+
+    const presenter = useMemo(() => {
+        const presenter = new ColorPickerPresenter();
+        presenter.init(params);
+        return presenter;
+    }, []);
+
+    const [vm, setVm] = useState(presenter.vm);
+
+    useEffect(() => {
+        presenter.init(params);
+    }, [params]);
+
+    useEffect(() => {
+        return autorun(() => {
+            setVm(presenter.vm);
+        });
+    }, [presenter]);
+
+    return {
+        vm,
+        setColor: presenter.setColor,
+        setOpen: presenter.setOpen
+    };
+};
diff --git a/packages/admin-ui/src/Command/Command.tsx b/packages/admin-ui/src/Command/Command.tsx
new file mode 100644
index 00000000000..f44a144d4de
--- /dev/null
+++ b/packages/admin-ui/src/Command/Command.tsx
@@ -0,0 +1,28 @@
+import * as React from "react";
+import { Command as CommandPrimitive } from "cmdk";
+import { cn, withStaticProps } from "~/utils";
+import { Empty, Group, Input, Item, List, Loading, Separator } from "./components";
+
+type CommandProps = React.ComponentPropsWithoutRef<typeof CommandPrimitive>;
+
+const CommandBase = ({
+    className,
+    ...props
+}: React.ComponentPropsWithoutRef<typeof CommandPrimitive>) => (
+    <CommandPrimitive
+        className={cn("wby-flex wby-h-full wby-w-full wby-flex-col wby-outline-none", className)}
+        {...props}
+    />
+);
+
+const Command = withStaticProps(CommandBase, {
+    Empty,
+    Group,
+    Input,
+    Item,
+    List,
+    Loading,
+    Separator
+});
+
+export { Command, type CommandProps };
diff --git a/packages/admin-ui/src/Command/components/Empty.tsx b/packages/admin-ui/src/Command/components/Empty.tsx
new file mode 100644
index 00000000000..1c281599596
--- /dev/null
+++ b/packages/admin-ui/src/Command/components/Empty.tsx
@@ -0,0 +1,13 @@
+import * as React from "react";
+import { Command as CommandPrimitive } from "cmdk";
+
+type EmptyProps = React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>;
+
+const Empty = (props: EmptyProps) => (
+    <CommandPrimitive.Empty
+        className="wby-bg-neutral-base wby-text-neutral-strong wby-fill-neutral-xstrong wby-rounded-sm wby-p-sm wby-mx-sm wby-text-md wby-outline-none"
+        {...props}
+    />
+);
+
+export { Empty, type EmptyProps };
diff --git a/packages/admin-ui/src/Command/components/Group.tsx b/packages/admin-ui/src/Command/components/Group.tsx
new file mode 100644
index 00000000000..e52c6e5487a
--- /dev/null
+++ b/packages/admin-ui/src/Command/components/Group.tsx
@@ -0,0 +1,17 @@
+import * as React from "react";
+import { Command as CommandPrimitive } from "cmdk";
+import { cn } from "~/utils";
+
+type GroupProps = React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>;
+
+const Group = ({ className, ...props }: GroupProps) => (
+    <CommandPrimitive.Group
+        className={cn(
+            "[&_[cmdk-group-heading]]:wby-px-sm [&_[cmdk-group-heading]]:wby-py-xs-plus [&_[cmdk-group-heading]]:wby-text-sm [&_[cmdk-group-heading]]:wby-font-semibold [&_[cmdk-group-heading]]:wby-text-neutral-strong",
+            className
+        )}
+        {...props}
+    />
+);
+
+export { Group, type GroupProps };
diff --git a/packages/admin-ui/src/Command/components/Input.tsx b/packages/admin-ui/src/Command/components/Input.tsx
new file mode 100644
index 00000000000..5e0a4d08025
--- /dev/null
+++ b/packages/admin-ui/src/Command/components/Input.tsx
@@ -0,0 +1,18 @@
+import * as React from "react";
+import { Command as CommandPrimitive } from "cmdk";
+import { InputPrimitive, InputPrimitiveProps } from "~/Input";
+
+type InputProps = Omit<React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>, "size"> &
+    InputPrimitiveProps & {
+        inputElement?: React.ReactNode;
+    };
+
+const Input = ({ inputElement, size, ...props }: InputProps) => {
+    return (
+        <CommandPrimitive.Input asChild {...props}>
+            {inputElement ?? <InputPrimitive size={size} forwardEventOnChange={true} />}
+        </CommandPrimitive.Input>
+    );
+};
+
+export { Input, type InputProps };
diff --git a/packages/admin-ui/src/Command/components/Item.tsx b/packages/admin-ui/src/Command/components/Item.tsx
new file mode 100644
index 00000000000..d588254f12b
--- /dev/null
+++ b/packages/admin-ui/src/Command/components/Item.tsx
@@ -0,0 +1,37 @@
+import * as React from "react";
+import { ReactComponent as Check } from "@webiny/icons/check.svg";
+import { Command as CommandPrimitive } from "cmdk";
+import { cn, cva, type VariantProps } from "~/utils";
+
+const commandItemVariants = cva(
+    [
+        "wby-flex wby-items-center wby-justify-between wby-gap-sm-extra wby-cursor-default wby-select-none wby-rounded-sm wby-p-sm wby-mx-sm wby-text-md wby-outline-none wby-overflow-hidden",
+        "wby-bg-neutral-base wby-text-neutral-primary wby-fill-neutral-xstrong",
+        "data-[disabled=true]:wby-text-neutral-disabled data-[disabled=true]:wby-cursor-not-allowed",
+        "data-[selected=true]:wby-bg-neutral-dimmed"
+    ],
+    {
+        variants: {
+            selected: {
+                true: "wby-font-semibold wby-bg-neutral-dimmed"
+            }
+        }
+    }
+);
+
+interface ItemProps
+    extends React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>,
+        VariantProps<typeof commandItemVariants> {
+    selected?: boolean;
+}
+
+const Item = ({ className, children, selected, ...props }: ItemProps) => (
+    <CommandPrimitive.Item className={cn(commandItemVariants({ selected }), className)} {...props}>
+        <span className={"wby-w-full wby-overflow-hidden wby-truncate wby-whitespace-nowrap"}>
+            {children}
+        </span>
+        {selected ? <Check className="wby-w-md wby-h-md" /> : null}
+    </CommandPrimitive.Item>
+);
+
+export { Item, type ItemProps };
diff --git a/packages/admin-ui/src/Command/components/List.tsx b/packages/admin-ui/src/Command/components/List.tsx
new file mode 100644
index 00000000000..b68a140b9cb
--- /dev/null
+++ b/packages/admin-ui/src/Command/components/List.tsx
@@ -0,0 +1,21 @@
+import * as React from "react";
+import { Command as CommandPrimitive } from "cmdk";
+import { cn } from "~/utils";
+
+type ListProps = React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>;
+
+const List = ({ className, ...props }: ListProps) => {
+    return (
+        <CommandPrimitive.List
+            className={cn(
+                [
+                    "block wby-max-h-96 wby-w-full wby-py-sm wby-overflow-y-auto wby-overflow-x-hidden wby-bg-neutral-base wby-text-neutral-strong"
+                ],
+                className
+            )}
+            {...props}
+        />
+    );
+};
+
+export { List, type ListProps };
diff --git a/packages/admin-ui/src/Command/components/Loading.tsx b/packages/admin-ui/src/Command/components/Loading.tsx
new file mode 100644
index 00000000000..911a2f03f41
--- /dev/null
+++ b/packages/admin-ui/src/Command/components/Loading.tsx
@@ -0,0 +1,13 @@
+import * as React from "react";
+import { Command as CommandPrimitive } from "cmdk";
+
+type LoadingProps = React.ComponentPropsWithoutRef<typeof CommandPrimitive.Loading>;
+
+const Loading = (props: LoadingProps) => (
+    <CommandPrimitive.Loading
+        className="wby-bg-neutral-base wby-text-neutral-strong wby-fill-neutral-xstrong wby-rounded-sm wby-p-sm wby-mx-sm wby-text-md outline-none"
+        {...props}
+    />
+);
+
+export { Loading, type LoadingProps };
diff --git a/packages/admin-ui/src/Command/components/Separator.tsx b/packages/admin-ui/src/Command/components/Separator.tsx
new file mode 100644
index 00000000000..a484f683dc7
--- /dev/null
+++ b/packages/admin-ui/src/Command/components/Separator.tsx
@@ -0,0 +1,13 @@
+import * as React from "react";
+import { Command as CommandPrimitive } from "cmdk";
+import { Separator as SeparatorPrimitive } from "~/Separator";
+
+type SeparatorProps = React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>;
+
+const Separator = (props: SeparatorProps) => (
+    <CommandPrimitive.Separator {...props}>
+        <SeparatorPrimitive variant={"strong"} margin={"md"} />
+    </CommandPrimitive.Separator>
+);
+
+export { Separator, type SeparatorProps };
diff --git a/packages/admin-ui/src/Command/components/index.ts b/packages/admin-ui/src/Command/components/index.ts
new file mode 100644
index 00000000000..51e28ee4fa8
--- /dev/null
+++ b/packages/admin-ui/src/Command/components/index.ts
@@ -0,0 +1,7 @@
+export * from "./Empty";
+export * from "./Group";
+export * from "./Input";
+export * from "./Item";
+export * from "./List";
+export * from "./Loading";
+export * from "./Separator";
diff --git a/packages/admin-ui/src/Command/domain/CommandOption.ts b/packages/admin-ui/src/Command/domain/CommandOption.ts
new file mode 100644
index 00000000000..b8a396d8d58
--- /dev/null
+++ b/packages/admin-ui/src/Command/domain/CommandOption.ts
@@ -0,0 +1,80 @@
+import { CommandOptionDto } from "./CommandOptionDto";
+
+export class CommandOption {
+    private readonly _label: string;
+    private readonly _value: string;
+    private _disabled: boolean;
+    private readonly _separator: boolean;
+    private readonly _item: any | null;
+    private _selected: boolean;
+
+    protected constructor(data: {
+        label: string;
+        value: string;
+        disabled: boolean;
+        selected: boolean;
+        separator: boolean;
+        item: any | null;
+    }) {
+        this._label = data.label;
+        this._value = data.value;
+        this._disabled = data.disabled;
+        this._selected = data.selected;
+        this._separator = data.separator;
+        this._item = data.item;
+    }
+
+    static create(data: CommandOptionDto) {
+        return new CommandOption({
+            label: data.label,
+            value: data.value,
+            disabled: data.disabled ?? false,
+            selected: false,
+            separator: data.separator ?? false,
+            item: data.item ?? null
+        });
+    }
+
+    static createFromString(value: string) {
+        return new CommandOption({
+            label: value,
+            value: value,
+            disabled: false,
+            selected: false,
+            separator: false,
+            item: null
+        });
+    }
+
+    get label() {
+        return this._label;
+    }
+
+    get value() {
+        return this._value;
+    }
+
+    get disabled() {
+        return this._disabled;
+    }
+
+    set disabled(selected: boolean) {
+        this._disabled = selected;
+    }
+
+    get selected() {
+        return this._selected;
+    }
+
+    set selected(selected: boolean) {
+        this._selected = selected;
+    }
+
+    get separator() {
+        return this._separator;
+    }
+
+    get item() {
+        return this._item;
+    }
+}
diff --git a/packages/admin-ui/src/Command/domain/CommandOptionDto.ts b/packages/admin-ui/src/Command/domain/CommandOptionDto.ts
new file mode 100644
index 00000000000..2ee4888aa3d
--- /dev/null
+++ b/packages/admin-ui/src/Command/domain/CommandOptionDto.ts
@@ -0,0 +1,7 @@
+export interface CommandOptionDto {
+    label: string;
+    value: string;
+    disabled?: boolean;
+    separator?: boolean;
+    item?: any;
+}
diff --git a/packages/admin-ui/src/Command/domain/CommandOptionFormatted.ts b/packages/admin-ui/src/Command/domain/CommandOptionFormatted.ts
new file mode 100644
index 00000000000..b1a5a498888
--- /dev/null
+++ b/packages/admin-ui/src/Command/domain/CommandOptionFormatted.ts
@@ -0,0 +1,8 @@
+export interface CommandOptionFormatted {
+    label: string;
+    value: string;
+    disabled: boolean;
+    selected: boolean;
+    separator: boolean;
+    item: any | null;
+}
diff --git a/packages/admin-ui/src/Command/domain/CommandOptionFormatter.ts b/packages/admin-ui/src/Command/domain/CommandOptionFormatter.ts
new file mode 100644
index 00000000000..44dae193163
--- /dev/null
+++ b/packages/admin-ui/src/Command/domain/CommandOptionFormatter.ts
@@ -0,0 +1,15 @@
+import { CommandOption } from "./CommandOption";
+import { CommandOptionFormatted } from "./CommandOptionFormatted";
+
+export class CommandOptionFormatter {
+    static format(option: CommandOption): CommandOptionFormatted {
+        return {
+            label: option.label,
+            value: option.value,
+            disabled: option.disabled,
+            selected: option.selected,
+            separator: option.separator,
+            item: option.item
+        };
+    }
+}
diff --git a/packages/admin-ui/src/Command/domain/index.ts b/packages/admin-ui/src/Command/domain/index.ts
new file mode 100644
index 00000000000..4f4e3acc23b
--- /dev/null
+++ b/packages/admin-ui/src/Command/domain/index.ts
@@ -0,0 +1,4 @@
+export * from "./CommandOption";
+export * from "./CommandOptionDto";
+export * from "./CommandOptionFormatted";
+export * from "./CommandOptionFormatter";
diff --git a/packages/admin-ui/src/Command/index.ts b/packages/admin-ui/src/Command/index.ts
new file mode 100644
index 00000000000..95f2837c8c4
--- /dev/null
+++ b/packages/admin-ui/src/Command/index.ts
@@ -0,0 +1,2 @@
+export * from "./Command";
+export * from "./domain";
diff --git a/packages/admin-ui/src/DataList/DataList.tsx b/packages/admin-ui/src/DataList/DataList.tsx
new file mode 100644
index 00000000000..5dcb0fab7aa
--- /dev/null
+++ b/packages/admin-ui/src/DataList/DataList.tsx
@@ -0,0 +1,119 @@
+import React, { useMemo } from "react";
+import isEmpty from "lodash/isEmpty";
+import { Heading } from "~/Heading";
+import {
+    Filters,
+    Loader,
+    MultiSelectActions,
+    MultiSelectAll,
+    NoData,
+    Pagination,
+    RefreshButton,
+    Sorters
+} from "~/DataList/components";
+import { DataListModal } from "~/DataList/DataListModal";
+import { DataListProps } from "~/DataList/types";
+
+const defaultDataListProps = {
+    children: null,
+    title: null,
+    data: null,
+    meta: null,
+    loading: false,
+    refresh: () => {
+        return void 0;
+    },
+    setPage: null,
+    setPerPage: null,
+    perPageOptions: [10, 25, 50],
+    filters: null,
+    sorters: null,
+    setSorters: null,
+    actions: null,
+    multiSelectAll: () => {},
+    isAllMultiSelected: () => false,
+    isNoneMultiSelected: () => false,
+    loader: <Loader />,
+    noData: <NoData />,
+    showOptions: {
+        refresh: true,
+        pagination: true,
+        sorters: true,
+        filters: true
+    }
+};
+
+export const DataList = <TData,>(propsInput: DataListProps<TData>) => {
+    let render: React.ReactNode | null;
+
+    const props = useMemo(() => {
+        return {
+            ...defaultDataListProps,
+            ...propsInput
+        };
+    }, [propsInput]);
+
+    if (props.loading) {
+        render = props.loader;
+    } else if (isEmpty(props.data)) {
+        render = props.noData;
+    } else {
+        const ch = props.children;
+        render = typeof ch === "function" ? ch(props) : null;
+    }
+
+    const showOptions = props.showOptions || {};
+
+    return (
+        <div data-testid={"ui.list.data-list"}>
+            <div className={"wby-pt-md wby-pb-sm wby-pl-lg wby-pr-md wby-border"}>
+                {(props.title || props.actions) && (
+                    <div className={"wby-flex wby-justify-between wby-items-center wby-mb-xl"}>
+                        <Heading className={"wby-text-neutral-primary"} level={4}>
+                            {props.title}
+                        </Heading>
+                    </div>
+                )}
+
+                {Object.keys(showOptions).length > 0 && (
+                    <div
+                        className={"wby-flex wby-items-center wby-justify-space-between wby-gap-sm"}
+                    >
+                        <div className={"wby-flex-1"}>
+                            {props.search ? React.cloneElement(props.search, props) : null}
+                        </div>
+                        <div
+                            className={
+                                "wby-flex wby-items-center wby-justify-space-between wby-gap-xs"
+                            }
+                        >
+                            <MultiSelectAll {...props} />
+                            <MultiSelectActions {...props} />
+                            {showOptions.refresh && <RefreshButton {...props} />}
+                            {showOptions.pagination && <Pagination {...props} />}
+                            {showOptions.sorters && <Sorters {...props} />}
+                            {showOptions.filters && <Filters {...props} />}
+                            {props.modalOverlayAction && props.modalOverlay && (
+                                <DataListModal
+                                    trigger={props.modalOverlayAction}
+                                    content={props.modalOverlay}
+                                />
+                            )}
+                            {props.actions}
+                        </div>
+                    </div>
+                )}
+            </div>
+
+            <div
+                style={{ maxHeight: "calc(100vh - 165px)" }}
+                className={
+                    "wby-relative wby-overflow-auto wby-border-t-sm wby-border-t-neutral-dimmed webiny-data-list__content"
+                }
+            >
+                {props.subHeader}
+                {render}
+            </div>
+        </div>
+    );
+};
diff --git a/packages/admin-ui/src/DataList/DataListIcons.tsx b/packages/admin-ui/src/DataList/DataListIcons.tsx
new file mode 100644
index 00000000000..c82f133f84b
--- /dev/null
+++ b/packages/admin-ui/src/DataList/DataListIcons.tsx
@@ -0,0 +1,170 @@
+import React from "react";
+import { ReactComponent as AutoRenew } from "@webiny/icons/autorenew.svg";
+import { ReactComponent as Delete } from "@webiny/icons/delete.svg";
+import { ReactComponent as Edit } from "@webiny/icons/edit.svg";
+import { ReactComponent as Sort } from "@webiny/icons/sort.svg";
+import { ReactComponent as Filter } from "@webiny/icons/filter_list.svg";
+import { ReactComponent as NavigateBefore } from "@webiny/icons/chevron_left.svg";
+import { ReactComponent as NavigateAfter } from "@webiny/icons/chevron_right.svg";
+import { ReactComponent as Tune } from "@webiny/icons/tune.svg";
+import { ReactComponent as Download } from "@webiny/icons/file_download.svg";
+import { ReactComponent as Upload } from "@webiny/icons/file_upload.svg";
+import { ReactComponent as ListView } from "@webiny/icons/list.svg";
+import { ReactComponent as Clone } from "@webiny/icons/library_add.svg";
+import { ReactComponent as Login } from "@webiny/icons/login.svg";
+import { IconButton, IconButtonProps } from "~/Button";
+import { List } from "~/List";
+
+export const RefreshIcon = (props: IconButtonProps) => {
+    return (
+        <IconButton
+            icon={<List.Item.Icon icon={<AutoRenew />} label={"Refresh"} />}
+            variant={"ghost"}
+            size={"sm"}
+            {...props}
+        />
+    );
+};
+
+export const DeleteIcon = (props: IconButtonProps) => {
+    return (
+        <IconButton
+            icon={<List.Item.Icon icon={<Delete />} label={"Delete"} />}
+            variant={"ghost"}
+            size={"sm"}
+            {...props}
+        />
+    );
+};
+
+export const CreateIcon = (props: IconButtonProps) => {
+    return (
+        <IconButton
+            icon={<List.Item.Icon icon={<Edit />} label={"Create"} />}
+            variant={"ghost"}
+            size={"sm"}
+            {...props}
+        />
+    );
+};
+
+export const EditIcon = (props: IconButtonProps) => {
+    return (
+        <IconButton
+            icon={<List.Item.Icon icon={<Edit />} label={"Edit"} />}
+            variant={"ghost"}
+            size={"sm"}
+            {...props}
+        />
+    );
+};
+
+export const SortIcon = (props: IconButtonProps) => {
+    return (
+        <IconButton
+            icon={<List.Item.Icon icon={<Sort />} label={"Sort"} />}
+            variant={"ghost"}
+            size={"sm"}
+            {...props}
+        />
+    );
+};
+
+export const FilterIcon = (props: IconButtonProps) => {
+    return (
+        <IconButton
+            icon={<List.Item.Icon icon={<Filter />} label={"Filter"} />}
+            variant={"ghost"}
+            size={"sm"}
+            {...props}
+        />
+    );
+};
+
+export const PreviousPageIcon = (props: IconButtonProps) => {
+    return (
+        <IconButton
+            icon={<List.Item.Icon icon={<NavigateBefore />} label={"Previous Page"} />}
+            variant={"ghost"}
+            size={"sm"}
+            {...props}
+        />
+    );
+};
+
+export const NextPageIcon = (props: IconButtonProps) => {
+    return (
+        <IconButton
+            icon={<List.Item.Icon icon={<NavigateAfter />} label={"Next Page"} />}
+            variant={"ghost"}
+            size={"sm"}
+            {...props}
+        />
+    );
+};
+
+export const OptionsIcon = (props: IconButtonProps) => {
+    return (
+        <IconButton
+            icon={<List.Item.Icon icon={<Tune />} label={"Options"} />}
+            variant={"ghost"}
+            size={"sm"}
+            {...props}
+        />
+    );
+};
+
+export const DownloadIcon = (props: IconButtonProps) => {
+    return (
+        <IconButton
+            icon={<List.Item.Icon icon={<Download />} label={"Download"} />}
+            variant={"ghost"}
+            size={"sm"}
+            {...props}
+        />
+    );
+};
+
+export const UploadIcon = (props: IconButtonProps) => {
+    return (
+        <IconButton
+            icon={<List.Item.Icon icon={<Upload />} label={"Upload"} />}
+            variant={"ghost"}
+            size={"sm"}
+            {...props}
+        />
+    );
+};
+
+export const ListIcon = (props: IconButtonProps) => {
+    return (
+        <IconButton
+            icon={<List.Item.Icon icon={<ListView />} label={"List"} />}
+            variant={"ghost"}
+            size={"sm"}
+            {...props}
+        />
+    );
+};
+
+export const CloneIcon = (props: IconButtonProps) => {
+    return (
+        <IconButton
+            icon={<List.Item.Icon icon={<Clone />} label={"Clone"} />}
+            variant={"ghost"}
+            size={"sm"}
+            {...props}
+        />
+    );
+};
+
+export const LoginIcon = (props: IconButtonProps) => {
+    return (
+        <IconButton
+            icon={<List.Item.Icon icon={<Login />} label={"Login"} />}
+            variant={"ghost"}
+            size={"sm"}
+            {...props}
+        />
+    );
+};
diff --git a/packages/admin-ui/src/DataList/DataListModal.tsx b/packages/admin-ui/src/DataList/DataListModal.tsx
new file mode 100644
index 00000000000..9ad032de36d
--- /dev/null
+++ b/packages/admin-ui/src/DataList/DataListModal.tsx
@@ -0,0 +1,64 @@
+import React, { useState } from "react";
+import { ReactComponent as Sort } from "@webiny/icons/sort.svg";
+import { PopoverPrimitive } from "~/Popover";
+import { withStaticProps } from "~/utils";
+import { Tooltip } from "~/Tooltip";
+import { IconButton } from "~/Button";
+
+interface DataListModalContentProps {
+    children: React.ReactNode;
+}
+
+const DataListModalContent = ({ children }: DataListModalContentProps) => {
+    return <div data-testid={"data-list-modal-wrapper"}>{children}</div>;
+};
+
+interface DataListModalTriggerProps {
+    "data-testid"?: string;
+    icon?: React.ReactElement;
+}
+
+const DataListModalTrigger = ({ icon = <Sort />, ...props }: DataListModalTriggerProps) => {
+    return <IconButton icon={icon} variant={"ghost"} {...props} size={"sm"} />;
+};
+
+interface DataListModalProps {
+    trigger: React.ReactElement;
+    content: React.ReactElement;
+}
+
+const BaseDataListModal = (props: DataListModalProps) => {
+    const [open, setOpen] = useState<boolean>(false);
+
+    if (!props.content || !props.trigger) {
+        return null;
+    }
+
+    return (
+        <PopoverPrimitive open={open} onOpenChange={open => setOpen(open)}>
+            <Tooltip
+                trigger={
+                    <PopoverPrimitive.Trigger asChild>
+                        <span>{props.trigger}</span>
+                    </PopoverPrimitive.Trigger>
+                }
+                content={"Sort list"}
+            />
+            <PopoverPrimitive.Content onOpenAutoFocus={e => e.preventDefault()} align={"end"}>
+                <div className={"wby-bg-neutral-base wby-p-md"}>{props.content}</div>
+            </PopoverPrimitive.Content>
+        </PopoverPrimitive>
+    );
+};
+
+const DataListModal = withStaticProps(BaseDataListModal, {
+    Trigger: DataListModalTrigger,
+    Content: DataListModalContent
+});
+
+export {
+    DataListModal,
+    type DataListModalProps,
+    type DataListModalContentProps,
+    type DataListModalTriggerProps
+};
diff --git a/packages/admin-ui/src/DataList/DataListWithSections.tsx b/packages/admin-ui/src/DataList/DataListWithSections.tsx
new file mode 100644
index 00000000000..99736599054
--- /dev/null
+++ b/packages/admin-ui/src/DataList/DataListWithSections.tsx
@@ -0,0 +1,121 @@
+import React, { useMemo } from "react";
+import isEmpty from "lodash/isEmpty";
+import { Loader } from "~/Loader";
+import {
+    Filters,
+    MultiSelectActions,
+    MultiSelectAll,
+    NoData,
+    Pagination,
+    RefreshButton,
+    Sorters
+} from "~/DataList/components";
+import { DataListModal } from "~/DataList/DataListModal";
+import { DataListProps } from "~/DataList/types";
+import { Heading } from "~/Heading";
+
+const dataListWithSectionsDefaultProps = {
+    children: null,
+    title: null,
+    data: null,
+    meta: null,
+    loading: false,
+    refresh: () => {
+        return void 0;
+    },
+    setPage: null,
+    setPerPage: null,
+    perPageOptions: [10, 25, 50],
+    filters: null,
+    sorters: null,
+    setSorters: null,
+    actions: null,
+    multiSelectAll: () => {},
+    isAllMultiSelected: () => false,
+    isNoneMultiSelected: () => false,
+    loader: <Loader />,
+    noData: <NoData />,
+    showOptions: {
+        refresh: true,
+        pagination: true,
+        sorters: true,
+        filters: true
+    }
+};
+
+export const DataListWithSections = <TData,>(propsInput: DataListProps<TData>) => {
+    let render: React.ReactNode | null;
+
+    const props = useMemo(() => {
+        return {
+            ...dataListWithSectionsDefaultProps,
+            ...propsInput
+        };
+    }, [propsInput]);
+
+    if (props.loading) {
+        render = props.loader;
+    } else if (isEmpty(props.data)) {
+        render = props.noData;
+    } else {
+        const ch = props.children;
+        render = typeof ch === "function" ? ch(props) : null;
+    }
+
+    const showOptions = props.showOptions || {};
+
+    return (
+        <div data-testid={"ui.list.data-list"}>
+            <div className={"wby-pt-md-extra wby-pb-md wby-px-md wby-border"}>
+                {(props.title || props.actions) && (
+                    <div className={"wby-flex wby-justify-between wby-items-center"}>
+                        <Heading className={"wby-text-accent-primary"} level={4}>
+                            {props.title}
+                        </Heading>
+                        <div className={"wby-flex wby-items-center wby-justify-end wby-gap-xs"}>
+                            {props.actions}
+                        </div>
+                    </div>
+                )}
+
+                {Object.keys(showOptions).length > 0 && (
+                    <div
+                        className={"wby-flex wby-items-center wby-justify-space-between wby-gap-sm"}
+                    >
+                        <div className={"wby-flex-1"}>
+                            {props.search ? React.cloneElement(props.search, props) : null}
+                        </div>
+                        <div
+                            className={
+                                "wby-flex wby-items-center wby-justify-space-between wby-gap-xs"
+                            }
+                        >
+                            <MultiSelectAll {...props} />
+                            {showOptions.refresh && <RefreshButton {...props} />}
+                            {showOptions.pagination && <Pagination {...props} />}
+                            {showOptions.sorters && <Sorters {...props} />}
+                            {showOptions.filters && <Filters {...props} />}
+                            {props.modalOverlayAction && props.modalOverlay && (
+                                <DataListModal
+                                    trigger={props.modalOverlayAction}
+                                    content={props.modalOverlay}
+                                />
+                            )}
+                            <MultiSelectActions {...props} />
+                        </div>
+                    </div>
+                )}
+            </div>
+
+            <div
+                style={{ maxHeight: "calc(100vh - 165px)" }}
+                className={
+                    "wby-relative wby-overflow-auto wby-border-t-sm wby-border-t-neutral-dimmed webiny-data-list__content"
+                }
+            >
+                {props.subHeader}
+                {render}
+            </div>
+        </div>
+    );
+};
diff --git a/packages/admin-ui/src/DataList/components/Filters.tsx b/packages/admin-ui/src/DataList/components/Filters.tsx
new file mode 100644
index 00000000000..3f9f97f52ec
--- /dev/null
+++ b/packages/admin-ui/src/DataList/components/Filters.tsx
@@ -0,0 +1,15 @@
+import React from "react";
+import { DropdownMenu } from "~/DropdownMenu";
+import { FilterIcon } from "../DataListIcons";
+import { DataListProps } from "../types";
+
+const Filters = (props: DataListProps) => {
+    const filters = props.filters;
+    if (!filters) {
+        return null;
+    }
+
+    return <DropdownMenu trigger={<FilterIcon size={"sm"} />}>{filters}</DropdownMenu>;
+};
+
+export { Filters };
diff --git a/packages/admin-ui/src/DataList/components/Loader.tsx b/packages/admin-ui/src/DataList/components/Loader.tsx
new file mode 100644
index 00000000000..99332083311
--- /dev/null
+++ b/packages/admin-ui/src/DataList/components/Loader.tsx
@@ -0,0 +1,38 @@
+import React, { ReactElement } from "react";
+import { Skeleton } from "~/Skeleton";
+import { cn } from "~/utils";
+
+const Loader = (): ReactElement => {
+    const lines = Array.from(Array(5).keys());
+
+    return (
+        <ul className={"wby-list-none wby-p-lg"} data-testid={"default-data-list.loading"}>
+            {lines.map(line => (
+                <li
+                    key={"list-" + line}
+                    className={cn(["wby-group", line === lines.length - 1 ? "wby-last-item" : ""])}
+                >
+                    <div className="wby-flex wby-w-full wby-items-center wby-justify-start wby-gap-lg wby-mb-md group-[.wby-last-item]:wby-mb-none">
+                        <Skeleton type={"thumbnail"} size={"xxl"} />
+                        <div
+                            className={
+                                "wby-flex-1 wby-h-10 wby-flex wby-flex-col wby-justify-between"
+                            }
+                        >
+                            <Skeleton type={"text"} size={"md"} />
+                            <Skeleton type={"text"} size={"md"} />
+                        </div>
+                        <div className={"wby-justify-self-end"}>
+                            <div className={"wby-text-right wby-flex wby-justify-end wby-gap-sm"}>
+                                <Skeleton type={"thumbnail"} size={"lg"} />
+                                <Skeleton type={"thumbnail"} size={"lg"} />
+                            </div>
+                        </div>
+                    </div>
+                </li>
+            ))}
+        </ul>
+    );
+};
+
+export { Loader };
diff --git a/packages/admin-ui/src/DataList/components/MultiSelectActions.tsx b/packages/admin-ui/src/DataList/components/MultiSelectActions.tsx
new file mode 100644
index 00000000000..dd997666438
--- /dev/null
+++ b/packages/admin-ui/src/DataList/components/MultiSelectActions.tsx
@@ -0,0 +1,11 @@
+import { DataListProps } from "../types";
+
+const MultiSelectActions = (props: DataListProps) => {
+    const { multiSelectActions } = props;
+    if (!multiSelectActions) {
+        return null;
+    }
+    return multiSelectActions;
+};
+
+export { MultiSelectActions };
diff --git a/packages/admin-ui/src/DataList/components/MultiSelectAll.tsx b/packages/admin-ui/src/DataList/components/MultiSelectAll.tsx
new file mode 100644
index 00000000000..ebce53a57c6
--- /dev/null
+++ b/packages/admin-ui/src/DataList/components/MultiSelectAll.tsx
@@ -0,0 +1,33 @@
+import React from "react";
+import { CheckboxPrimitive } from "~/Checkbox";
+import { DataListProps } from "../types";
+
+const MultiSelectAll = (props: DataListProps) => {
+    const { multiSelectActions } = props;
+    if (!multiSelectActions) {
+        return null;
+    }
+    /**
+     * We can safely cast because we have defaults.
+     */
+    const { isAllMultiSelected, isNoneMultiSelected, multiSelectAll, data } =
+        props as Required<DataListProps>;
+
+    return (
+        <>
+            {typeof multiSelectAll === "function" && (
+                <div className={"wby-size-lg wby-flex wby-items-center wby-justify-center"}>
+                    <CheckboxPrimitive
+                        indeterminate={!isAllMultiSelected(data) && !isNoneMultiSelected(data)}
+                        checked={isAllMultiSelected(data)}
+                        onChange={() => {
+                            multiSelectAll(!isAllMultiSelected(data), data);
+                        }}
+                    />
+                </div>
+            )}
+        </>
+    );
+};
+
+export { MultiSelectAll };
diff --git a/packages/admin-ui/src/DataList/components/NoData.tsx b/packages/admin-ui/src/DataList/components/NoData.tsx
new file mode 100644
index 00000000000..4b68ca64f8a
--- /dev/null
+++ b/packages/admin-ui/src/DataList/components/NoData.tsx
@@ -0,0 +1,10 @@
+import React from "react";
+import { Text } from "~/Text";
+
+const NoData = () => (
+    <div className={"wby-text-center wby-p-24"}>
+        <Text>{"No records found."}</Text>
+    </div>
+);
+
+export { NoData };
diff --git a/packages/admin-ui/src/DataList/components/Pagination.tsx b/packages/admin-ui/src/DataList/components/Pagination.tsx
new file mode 100644
index 00000000000..18705a7e488
--- /dev/null
+++ b/packages/admin-ui/src/DataList/components/Pagination.tsx
@@ -0,0 +1,71 @@
+import React from "react";
+import { DropdownMenu } from "~/DropdownMenu";
+import { NextPageIcon, OptionsIcon, PreviousPageIcon } from "../DataListIcons";
+import { DataListProps } from "../types";
+import { Tooltip } from "~/Tooltip";
+
+const Pagination = (props: DataListProps) => {
+    const { pagination } = props;
+    if (!pagination) {
+        return null;
+    }
+
+    return (
+        <>
+            {pagination.setNextPage && (
+                <>
+                    <Tooltip
+                        trigger={
+                            <PreviousPageIcon
+                                onClick={() => {
+                                    if (pagination.setPreviousPage && pagination.hasPreviousPage) {
+                                        pagination.setPreviousPage();
+                                    }
+                                }}
+                                size={"sm"}
+                            />
+                        }
+                        content={"Previous page"}
+                    />
+                    <Tooltip
+                        trigger={
+                            <NextPageIcon
+                                onClick={() => {
+                                    if (pagination.setNextPage && pagination.hasNextPage) {
+                                        pagination.setNextPage();
+                                    }
+                                }}
+                                size={"sm"}
+                            />
+                        }
+                        content={"Next page"}
+                    />
+                </>
+            )}
+
+            {Array.isArray(pagination.perPageOptions) && pagination.setPerPage && (
+                <DropdownMenu
+                    trigger={
+                        <Tooltip
+                            trigger={<OptionsIcon size={"sm"} />}
+                            content={"Navigate to page"}
+                        />
+                    }
+                >
+                    {pagination.setPerPage &&
+                        pagination.perPageOptions.map(perPage => (
+                            <DropdownMenu.Item
+                                key={perPage}
+                                onClick={() =>
+                                    pagination.setPerPage && pagination.setPerPage(perPage)
+                                }
+                                text={perPage}
+                            />
+                        ))}
+                </DropdownMenu>
+            )}
+        </>
+    );
+};
+
+export { Pagination };
diff --git a/packages/admin-ui/src/DataList/components/RefreshButton.tsx b/packages/admin-ui/src/DataList/components/RefreshButton.tsx
new file mode 100644
index 00000000000..37168360d4d
--- /dev/null
+++ b/packages/admin-ui/src/DataList/components/RefreshButton.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+import { RefreshIcon } from "../DataListIcons";
+import { DataListProps } from "../types";
+import { Tooltip } from "~/Tooltip";
+
+const RefreshButton = (props: DataListProps) => {
+    const refresh = props.refresh;
+    if (!refresh) {
+        return null;
+    }
+
+    return (
+        <Tooltip
+            trigger={<RefreshIcon onClick={() => refresh()} size={"sm"} />}
+            content={"Refresh list"}
+        />
+    );
+};
+
+export { RefreshButton };
diff --git a/packages/admin-ui/src/DataList/components/Sorters.tsx b/packages/admin-ui/src/DataList/components/Sorters.tsx
new file mode 100644
index 00000000000..c96b6e6c016
--- /dev/null
+++ b/packages/admin-ui/src/DataList/components/Sorters.tsx
@@ -0,0 +1,29 @@
+import React from "react";
+import { DropdownMenu } from "~/DropdownMenu";
+import { SortIcon } from "../DataListIcons";
+import { DataListProps } from "../types";
+
+const Sorters = (props: DataListProps) => {
+    const sorters = props.sorters;
+    if (!sorters) {
+        return null;
+    }
+
+    return (
+        <DropdownMenu trigger={<SortIcon size={"sm"} />}>
+            {sorters.map(sorter => (
+                <DropdownMenu.Item
+                    key={sorter.label}
+                    onClick={() => {
+                        if (sorters && props.setSorters) {
+                            props.setSorters(sorter.value);
+                        }
+                    }}
+                    content={sorter.label}
+                />
+            ))}
+        </DropdownMenu>
+    );
+};
+
+export { Sorters };
diff --git a/packages/admin-ui/src/DataList/components/index.ts b/packages/admin-ui/src/DataList/components/index.ts
new file mode 100644
index 00000000000..bbc4f12fdb6
--- /dev/null
+++ b/packages/admin-ui/src/DataList/components/index.ts
@@ -0,0 +1,8 @@
+export * from "./Filters";
+export * from "./Loader";
+export * from "./MultiSelectAll";
+export * from "./MultiSelectActions";
+export * from "./NoData";
+export * from "./Pagination";
+export * from "./RefreshButton";
+export * from "./Sorters";
diff --git a/packages/admin-ui/src/DataList/index.ts b/packages/admin-ui/src/DataList/index.ts
new file mode 100644
index 00000000000..c5e9c6ef43b
--- /dev/null
+++ b/packages/admin-ui/src/DataList/index.ts
@@ -0,0 +1,4 @@
+export * from "./DataList";
+export * from "./DataListIcons";
+export * from "./DataListModal";
+export * from "./DataListWithSections";
diff --git a/packages/admin-ui/src/DataList/types.ts b/packages/admin-ui/src/DataList/types.ts
new file mode 100644
index 00000000000..bae60df6e7c
--- /dev/null
+++ b/packages/admin-ui/src/DataList/types.ts
@@ -0,0 +1,99 @@
+export type PaginationProp = {
+    // Triggered when a page is about to be changed.
+    setPage?: (page: number) => void;
+
+    // Triggered when previous page is requested.
+    setPreviousPage?: () => void;
+
+    // Triggered when next page is requested.
+    setNextPage?: () => void;
+
+    // Triggered internally when in need to determine if there is a next page and apply UI changes accordingly.
+    hasNextPage?: boolean;
+
+    // Triggered internally when in need to determine if there is a previous page and apply UI changes accordingly.
+    hasPreviousPage?: boolean;
+
+    // Triggered when number of entries per page has been changed.
+    setPerPage?: (amount: number) => void;
+
+    // By default, users can choose from 10, 25 or 50 entries per page.
+    perPageOptions?: number[];
+};
+
+export type SortersProp = Array<{ label: string; value: any }>;
+
+export interface DataListProps<TData = any> {
+    // Pass a function to take full control of list render.
+    children?: ((props: any) => React.ReactNode) | null;
+
+    // A title of paginated list.
+    title?: React.ReactNode;
+
+    // FormData that needs to be shown in the list.
+    data?: TData | null;
+
+    // A callback that must refresh current view by repeating the previous query.
+    refresh?: (() => void) | null;
+
+    // If true, Loader component will be shown, disallowing any interaction.
+    loading?: boolean;
+
+    // Provide a custom loader. Shown while the content is loading.
+    loader?: React.ReactNode;
+
+    // Provide a custom no data component. Shown while there is no data to be shown.
+    noData?: React.ReactNode;
+
+    // Provide all pagination data, options and callbacks here.
+    pagination?: PaginationProp;
+
+    // Triggered once a sorter has been selected.
+    setSorters?: ((sorter: any) => void) | null;
+
+    // Provide all sorters options and callbacks here.
+    sorters?: SortersProp | null;
+
+    // Provide actions that will be shown in the top right corner (eg. export or import actions).
+    actions?: React.ReactNode;
+
+    // Provide filters that will be shown in the top left corner (eg. filter by category or status).
+    filters?: React.ReactNode;
+
+    // Provide actions that can be executed on one or more multi-selected list items (eg. export or delete).
+    multiSelectActions?: React.ReactNode;
+
+    // Provide callback that will be executed once user selects all list items.
+    multiSelectAll?: (value: boolean, data: Record<string, any>[] | null) => void;
+
+    // Callback which returns true if all items were selected, otherwise returns false.
+    isAllMultiSelected?: (data: Record<string, any>[] | null) => boolean;
+
+    // Callback which returns true if none of the items were selected, otherwise returns false.
+    isNoneMultiSelected?: (data: Record<string, any>[] | null) => boolean;
+
+    showOptions?: {
+        refresh?: boolean;
+        pagination?: boolean;
+        filters?: boolean;
+        sorters?: boolean;
+        [key: string]: any;
+    };
+
+    // Provide search UI that will be shown in the top left corner.
+    search?: React.ReactElement;
+    // Provide simple modal UI that will be shown over the list content.
+    modalOverlay?: React.ReactElement;
+    // Provide an action element that handle toggling the "Modal overlay".
+    modalOverlayAction?: React.ReactElement;
+    // Provide additional UI for list sub-header.
+    subHeader?: React.ReactElement;
+
+    meta?: Record<string, any> | null;
+
+    setPage?: ((page: string) => void) | null;
+
+    setPerPage?: ((page: string) => void) | null;
+
+    perPageOptions?: number[];
+}
diff --git a/packages/admin-ui/src/DataTable/DataTable.mdx b/packages/admin-ui/src/DataTable/DataTable.mdx
new file mode 100644
index 00000000000..68865e953e7
--- /dev/null
+++ b/packages/admin-ui/src/DataTable/DataTable.mdx
@@ -0,0 +1,916 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+
+import * as DataTableStories from './DataTable.stories';
+
+<Meta of={DataTableStories} />
+
+# DataTable
+
+The DataTable component provides a powerful and flexible way to display tabular data with features like sorting, column resizing, row selection, and custom cell rendering. It's built on top of @tanstack/react-table and offers a comprehensive solution for displaying and interacting with structured data.
+
+## Usage
+
+<Canvas of={DataTableStories.Documentation} source={ { code: `
+import React, { useState } from "react";
+import { DataTable, DataTableColumns, DataTableSorting } from "@webiny/admin-ui";
+
+// Define the data structure
+interface Entry {
+    id: string;
+    name: string;
+    createdBy: string;
+    lastModified: string;
+    status: string;
+    $selectable?: boolean;
+}
+
+// Define the columns structure
+const columns: DataTableColumns\<Entry\> = {
+    name: {
+        header: "Title",
+        enableSorting: true
+    },
+    createdBy: {
+        header: "Author"
+    },
+    lastModified: {
+        header: "Last Modified",
+        enableSorting: true
+    },
+    status: {
+        header: "Status"
+    }
+};
+
+// Sample data
+const data = [
+    {
+        id: "entry-1",
+        name: "Getting Started Guide",
+        createdBy: "John Doe",
+        lastModified: "1 hour ago",
+        status: "Published"
+    },
+    {
+        id: "entry-2",
+        name: "User Documentation",
+        createdBy: "Jane Smith",
+        lastModified: "3 days ago",
+        status: "Draft"
+    },
+    {
+        id: "entry-3",
+        name: "API Reference",
+        createdBy: "John Doe",
+        lastModified: "1 week ago",
+        status: "Published"
+    }
+];
+
+const DataTableExample = () => {
+    const [selectedRows, setSelectedRows] = useState\<Entry[]\>([]);
+    const [sorting, setSorting] = useState\<DataTableSorting\>([]);
+
+    return (
+        <DataTable
+            columns={columns}
+            data={data}
+            bordered={true}
+            stickyHeader={true}
+            selectedRows={selectedRows}
+            onSelectRow={rows => setSelectedRows(rows)}
+            sorting={sorting}
+            onSortingChange={setSorting}
+        />
+    );
+};
+
+export default DataTableExample;
+
+` } }
+        additionalActions={[
+            {
+                title: 'Open in GitHub',
+                onClick: () => {
+                    window.open(
+                        'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/DataTable/DataTable.tsx',
+                        '_blank'
+                    );
+                },
+            }
+        ]}
+/>
+
+<Controls of={DataTableStories.Documentation} />
+
+```tsx
+import React, { useState } from "react";
+import { DataTable, DataTableColumns, DataTableSorting } from "@webiny/admin-ui";
+
+// Define the data structure
+interface Entry {
+    id: string;
+    name: string;
+    createdBy: string;
+    lastModified: string;
+    status: string;
+    $selectable?: boolean;
+}
+
+// Define the columns structure
+const columns: DataTableColumns<Entry> = {
+    name: {
+        header: "Title",
+        enableSorting: true
+    },
+    createdBy: {
+        header: "Author"
+    },
+    lastModified: {
+        header: "Last Modified",
+        enableSorting: true
+    },
+    status: {
+        header: "Status"
+    }
+};
+
+// Sample data
+const data = [
+    {
+        id: "entry-1",
+        name: "Getting Started Guide",
+        createdBy: "John Doe",
+        lastModified: "1 hour ago",
+        status: "Published"
+    },
+    {
+        id: "entry-2",
+        name: "User Documentation",
+        createdBy: "Jane Smith",
+        lastModified: "3 days ago",
+        status: "Draft"
+    },
+    {
+        id: "entry-3",
+        name: "API Reference",
+        createdBy: "John Doe",
+        lastModified: "1 week ago",
+        status: "Published"
+    }
+];
+
+const DataTableExample = () => {
+    const [selectedRows, setSelectedRows] = useState<Entry[]>([]);
+    const [sorting, setSorting] = useState<DataTableSorting>([]);
+
+    return (
+        <DataTable
+            columns={columns}
+            data={data}
+            bordered={true}
+            stickyHeader={true}
+            selectedRows={selectedRows}
+            onSelectRow={rows => setSelectedRows(rows)}
+            sorting={sorting}
+            onSortingChange={setSorting}
+        />
+    );
+};
+
+export default DataTableExample;
+```
+
+## Examples
+
+### Default
+
+<Canvas of={DataTableStories.Default} source={ { code: `
+
+import React from "react";
+import { DataTable, DataTableColumns } from "@webiny/admin-ui";
+
+// Define the data structure
+interface Entry {
+    id: string;
+    name: string;
+    createdBy: string;
+    lastModified: string;
+    status: string;
+}
+
+// Define the columns structure
+const columns: DataTableColumns\<Entry\> = {
+    name: {
+        header: "Title",
+        enableSorting: true
+    },
+    createdBy: {
+        header: "Author"
+    },
+    lastModified: {
+        header: "Last Modified",
+        enableSorting: true
+    },
+    status: {
+        header: "Status"
+    }
+};
+
+// Sample data
+const data = [
+    {
+        id: "entry-1",
+        name: "Getting Started Guide",
+        createdBy: "John Doe",
+        lastModified: "1 hour ago",
+        status: "Published"
+    },
+    {
+        id: "entry-2",
+        name: "User Documentation",
+        createdBy: "Jane Smith",
+        lastModified: "3 days ago",
+        status: "Draft"
+    },
+    {
+        id: "entry-3",
+        name: "API Reference",
+        createdBy: "John Doe",
+        lastModified: "1 week ago",
+        status: "Published"
+    }
+];
+
+const DataTableExample = () => {
+
+    return (
+        <DataTable
+            columns={columns}
+            data={data}
+        />
+    );
+};
+
+export default DataTableExample;
+
+` } } />
+
+### Bordered
+
+<Canvas of={DataTableStories.Bordered} source={ { code: `
+import React from "react";
+import { DataTable, DataTableColumns } from "@webiny/admin-ui";
+
+// Define the data structure
+interface Entry {
+    id: string;
+    name: string;
+    createdBy: string;
+    lastModified: string;
+    status: string;
+}
+
+// Define the columns structure
+const columns: DataTableColumns\<Entry\> = {
+    name: {
+        header: "Title",
+        enableSorting: true
+    },
+    createdBy: {
+        header: "Author"
+    },
+    lastModified: {
+        header: "Last Modified",
+        enableSorting: true
+    },
+    status: {
+        header: "Status"
+    }
+};
+
+// Sample data
+const data = [
+    {
+        id: "entry-1",
+        name: "Getting Started Guide",
+        createdBy: "John Doe",
+        lastModified: "1 hour ago",
+        status: "Published"
+    },
+    {
+        id: "entry-2",
+        name: "User Documentation",
+        createdBy: "Jane Smith",
+        lastModified: "3 days ago",
+        status: "Draft"
+    },
+    {
+        id: "entry-3",
+        name: "API Reference",
+        createdBy: "John Doe",
+        lastModified: "1 week ago",
+        status: "Published"
+    }
+];
+
+const BorderedDataTableExample = () => {
+
+    return (
+        <DataTable
+            columns={columns}
+            data={data}
+            bordered={true}
+        />
+    );
+};
+
+export default BorderedDataTableExample;
+
+` } } />
+
+### With Sticky Header
+
+<Canvas of={DataTableStories.WithStickyHeader} source={ { code: `
+import React from "react";
+import { DataTable, DataTableColumns } from "@webiny/admin-ui";
+
+// Define the data structure
+interface Entry {
+    id: string;
+    name: string;
+    createdBy: string;
+    lastModified: string;
+    status: string;
+}
+
+// Define the columns structure
+const columns: DataTableColumns\<Entry\> = {
+    name: {
+        header: "Title",
+        enableSorting: true
+    },
+    createdBy: {
+        header: "Author"
+    },
+    lastModified: {
+        header: "Last Modified",
+        enableSorting: true
+    },
+    status: {
+        header: "Status"
+    }
+};
+
+// Sample data
+const data = [
+    {
+        id: "entry-1",
+        name: "Getting Started Guide",
+        createdBy: "John Doe",
+        lastModified: "1 hour ago",
+        status: "Published"
+    },
+    {
+        id: "entry-2",
+        name: "User Documentation",
+        createdBy: "Jane Smith",
+        lastModified: "3 days ago",
+        status: "Draft"
+    },
+    {
+        id: "entry-3",
+        name: "API Reference",
+        createdBy: "John Doe",
+        lastModified: "1 week ago",
+        status: "Published"
+    }
+];
+
+const WithStickyHeaderDataTableExample = () => {
+
+    return (
+        <DataTable
+            columns={columns}
+            data={data}
+            stickyHeader={true}
+        />
+    );
+};
+
+export default WithStickyHeaderDataTableExample;
+
+` } } />
+
+### With Selectable Rows
+
+<Canvas of={DataTableStories.WithSelectableRows} source={ { code: `
+import React, { useState } from "react";
+import { DataTable, DataTableColumns, DataTableSorting } from "@webiny/admin-ui";
+
+// Define the data structure
+interface Entry {
+    id: string;
+    name: string;
+    createdBy: string;
+    lastModified: string;
+    status: string;
+    $selectable?: boolean;
+}
+
+// Define the columns structure
+const columns: DataTableColumns\<Entry\> = {
+    name: {
+        header: "Title",
+        enableSorting: true
+    },
+    createdBy: {
+        header: "Author"
+    },
+    lastModified: {
+        header: "Last Modified",
+        enableSorting: true
+    },
+    status: {
+        header: "Status"
+    }
+};
+
+// Sample data
+const data = [
+    {
+        id: "entry-1",
+        name: "Getting Started Guide",
+        createdBy: "John Doe",
+        lastModified: "1 hour ago",
+        status: "Published"
+    },
+    {
+        id: "entry-2",
+        name: "User Documentation",
+        createdBy: "Jane Smith",
+        lastModified: "3 days ago",
+        status: "Draft"
+    },
+    {
+        id: "entry-3",
+        name: "API Reference",
+        createdBy: "John Doe",
+        lastModified: "1 week ago",
+        status: "Published"
+    }
+];
+
+const WithSelectableRowsDataTableExample = () => {
+    const [selectedRows, setSelectedRows] = useState\<Entry[]\>([]);
+    const [sorting, setSorting] = useState\<DataTableSorting\>([]);
+
+    return (
+        <DataTable
+            columns={columns}
+            data={data}
+            selectedRows={selectedRows}
+            onSelectRow={rows => setSelectedRows(rows)}
+        />
+    );
+};
+
+export default WithSelectableRowsDataTableExample;
+` } } />
+
+### With Loading State
+
+To demonstrate the loading state, we will simulate a 5 seconds delay before the data is loaded.
+
+<Canvas of={DataTableStories.WithLoading} source={ { code: `
+
+import React, { useEffect, useState } from "react";
+import { DataTable, DataTableColumns } from "@webiny/admin-ui";
+
+// Define the data structure
+interface Entry {
+    id: string;
+    name: string;
+    createdBy: string;
+    lastModified: string;
+    status: string;
+}
+
+// Define the columns structure
+const columns: DataTableColumns\<Entry\> = {
+    name: {
+        header: "Title",
+        enableSorting: true
+    },
+    createdBy: {
+        header: "Author"
+    },
+    lastModified: {
+        header: "Last Modified",
+        enableSorting: true
+    },
+    status: {
+        header: "Status"
+    }
+};
+
+// Sample data
+const data: Entry[] = [
+    {
+        id: "entry-1",
+        name: "Getting Started Guide",
+        createdBy: "John Doe",
+        lastModified: "1 hour ago",
+        status: "Published"
+    },
+    {
+        id: "entry-2",
+        name: "User Documentation",
+        createdBy: "Jane Smith",
+        lastModified: "3 days ago",
+        status: "Draft"
+    },
+    {
+        id: "entry-3",
+        name: "API Reference",
+        createdBy: "John Doe",
+        lastModified: "1 week ago",
+        status: "Published"
+    }
+];
+
+const WithLoadingDataTableExample = () => {
+    const [data, setData] = useState\<Entry[]\>([]);
+    const [loading, setLoading] = useState(true);
+
+    useEffect(() => {
+        const timer = setTimeout(() => {
+            setData(data);
+            setLoading(false);
+        }, 5000); // simulate 5 seconds delay
+
+        return () => clearTimeout(timer);
+    }, []);
+
+    return (
+        <DataTable
+            columns={columns}
+            data={data}
+            loading={loading}
+        />
+    );
+};
+
+export default WithLoadingDataTableExample;
+
+` } } />
+
+### With Custom Cell Renderer
+
+<Canvas of={DataTableStories.WithCustomCellRenderer} source={ { code: `
+
+import React, { useEffect, useState } from "react";
+import { DataTable, DataTableColumns,  Avatar, Text } from "@webiny/admin-ui";
+
+// Define the data structure
+interface Entry {
+    id: string;
+    name: string;
+    createdBy: string;
+    lastModified: string;
+    status: string;
+}
+
+// Define the columns structure
+const columns: DataTableColumns\<Entry\> = {
+    name: {
+        header: "Title",
+        enableSorting: true
+    },
+    createdBy: {
+        header: "Author"
+    },
+    lastModified: {
+        header: "Last Modified",
+        enableSorting: true
+    },
+    status: {
+        header: "Status"
+    }
+};
+
+// Sample data
+const data: Entry[] = [
+    {
+        id: "entry-1",
+        name: "Getting Started Guide",
+        createdBy: "John Doe",
+        lastModified: "1 hour ago",
+        status: "Published"
+    },
+    {
+        id: "entry-2",
+        name: "User Documentation",
+        createdBy: "Jane Smith",
+        lastModified: "3 days ago",
+        status: "Draft"
+    },
+    {
+        id: "entry-3",
+        name: "API Reference",
+        createdBy: "John Doe",
+        lastModified: "1 week ago",
+        status: "Published"
+    }
+];
+
+const WithCustomCellRendererDataTableExample = () => {
+    return (
+        <DataTable
+            columns={{
+                ...columns,
+                name: {
+                    ...columns.name,
+                    cell: (entry) => {
+                        return (
+                            <div className={"wby-flex wby-items-center wby-gap-sm-extra"}>
+                                <Avatar
+                                    image={
+                                        <Avatar.Image
+                                            src="https://github.com/webiny-bot.png"
+                                            alt="@webiny"
+                                        />
+                                    }
+                                    fallback={<Avatar.Fallback>{entry.name.charAt(0)}</Avatar.Fallback>}
+                                    size={"xl"}
+                                />
+                                <div>
+                                    <Text
+                                        className={"wby-text-neutral-primary wby-font-semibold"}
+                                        as={"div"}
+                                    >
+                                        {entry.name}
+                                    </Text>
+                                    <Text
+                                        size={"sm"}
+                                        className={"wby-text-neutral-strong"}
+                                        as={"div"}
+                                    >Last updated: {entry.lastModified}</Text>
+                                </div>
+                            </div>
+                        );
+                    }
+                }
+            }}
+            data={data}
+        />
+    );
+};
+
+
+export default WithCustomCellRendererDataTableExample;
+
+
+
+` } } />
+
+### With Custom Column Size
+
+<Canvas of={DataTableStories.WithCustomColumnSize} source={ { code: `
+import React from "react";
+import { DataTable, DataTableColumns } from "@webiny/admin-ui";
+
+// Define the data structure
+interface Entry {
+    id: string;
+    name: string;
+    createdBy: string;
+    lastModified: string;
+    status: string;
+}
+
+// Define the columns structure
+const columns: DataTableColumns\<Entry\> = {
+    name: {
+        header: "Title",
+        enableSorting: true
+    },
+    createdBy: {
+        header: "Author"
+    },
+    lastModified: {
+        header: "Last Modified",
+        enableSorting: true
+    },
+    status: {
+        header: "Status"
+    }
+};
+
+// Sample data
+const data = [
+    {
+        id: "entry-1",
+        name: "Getting Started Guide",
+        createdBy: "John Doe",
+        lastModified: "1 hour ago",
+        status: "Published"
+    },
+    {
+        id: "entry-2",
+        name: "User Documentation",
+        createdBy: "Jane Smith",
+        lastModified: "3 days ago",
+        status: "Draft"
+    },
+    {
+        id: "entry-3",
+        name: "API Reference",
+        createdBy: "John Doe",
+        lastModified: "1 week ago",
+        status: "Published"
+    }
+];
+
+const WithCustomColumnSizeDataTableExample = () => {
+    return (
+        <DataTable
+            columns={{
+                ...columns,
+                name: {
+                    ...columns.name,
+                    size: 200
+                }
+            }}
+            data={data}
+        />
+    );
+};
+
+export default WithCustomColumnSize;
+` } } />
+
+### With Custom Column Class Name
+
+<Canvas of={DataTableStories.WithCustomColumnClassName} source={ { code: `
+import React from "react";
+import { DataTable, DataTableColumns } from "@webiny/admin-ui";
+
+// Define the data structure
+interface Entry {
+    id: string;
+    name: string;
+    createdBy: string;
+    lastModified: string;
+    status: string;
+}
+
+// Define the columns structure
+const columns: DataTableColumns\<Entry\> = {
+    name: {
+        header: "Title",
+        enableSorting: true
+    },
+    createdBy: {
+        header: "Author"
+    },
+    lastModified: {
+        header: "Last Modified",
+        enableSorting: true
+    },
+    status: {
+        header: "Status"
+    }
+};
+
+// Sample data
+const data = [
+    {
+        id: "entry-1",
+        name: "Getting Started Guide",
+        createdBy: "John Doe",
+        lastModified: "1 hour ago",
+        status: "Published"
+    },
+    {
+        id: "entry-2",
+        name: "User Documentation",
+        createdBy: "Jane Smith",
+        lastModified: "3 days ago",
+        status: "Draft"
+    },
+    {
+        id: "entry-3",
+        name: "API Reference",
+        createdBy: "John Doe",
+        lastModified: "1 week ago",
+        status: "Published"
+    }
+];
+
+const WithCustomColumnClassNameDataTableExample = () => {
+
+    return (
+        <DataTable
+            columns={{
+                ...columns,
+                lastModified: {
+                    ...columns.lastModified,
+                    className: "wby-bg-primary-subtle"
+                },
+                status: {
+                    ...columns.status,
+                    className: "wby-text-right"
+                }
+            }}
+            data={data}
+        />
+    );
+};
+
+export default WithCustomColumnClassNameDataTableExample;
+` } } />
+
+### With Sorting
+
+> ⚠️ Webiny’s DataTable component doesn’t perform sorting for you.
+It only provides UI state (like sort indicators, sort direction, column clicked).
+You need to sort the data manually based on the sorting state.
+
+<Canvas of={DataTableStories.WithSorting} source={ { code: `
+
+import React, { useState } from "react";
+import { DataTable, DataTableColumns, DataTableSorting } from "@webiny/admin-ui";
+
+// Define the data structure
+interface Entry {
+    id: string;
+    name: string;
+    createdBy: string;
+    lastModified: string;
+    status: string;
+}
+
+// Define the columns structure
+const columns: DataTableColumns<Entry> = {
+    name: {
+        header: "Title",
+        enableSorting: true
+    },
+    createdBy: {
+        header: "Author"
+    },
+    lastModified: {
+        header: "Last Modified",
+        enableSorting: true
+    },
+    status: {
+        header: "Status"
+    }
+};
+
+// Sample data
+const data: Entry[] = [
+    {
+        id: "entry-1",
+        name: "Getting Started Guide",
+        createdBy: "John Doe",
+        lastModified: "1 hour ago",
+        status: "Published"
+    },
+    {
+        id: "entry-2",
+        name: "User Documentation",
+        createdBy: "Jane Smith",
+        lastModified: "3 days ago",
+        status: "Draft"
+    },
+    {
+        id: "entry-3",
+        name: "API Reference",
+        createdBy: "John Doe",
+        lastModified: "1 week ago",
+        status: "Published"
+    }
+];
+
+const WithSortingDataTableExample = () => {
+    const [sorting, setSorting] = useState<DataTableSorting>([
+        {
+            id: "lastModified",
+            desc: true
+        }
+    ]);
+
+    return (
+        <DataTable
+            columns={columns}
+            data={data}
+            sorting={sorting}
+            onSortingChange={setSorting}
+        />
+    );
+};
+
+export default WithSortingDataTableExample;
+` } } />
\ No newline at end of file
diff --git a/packages/admin-ui/src/DataTable/DataTable.stories.tsx b/packages/admin-ui/src/DataTable/DataTable.stories.tsx
new file mode 100644
index 00000000000..b4f4ddb54e3
--- /dev/null
+++ b/packages/admin-ui/src/DataTable/DataTable.stories.tsx
@@ -0,0 +1,327 @@
+import React, { useState, useEffect } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { DataTableColumns, DataTable, DataTableDefaultData, DataTableSorting } from "./DataTable";
+import { Avatar } from "~/Avatar";
+import { Text } from "~/Text";
+
+const meta: Meta<typeof DataTable> = {
+    title: "Components/DataTable",
+    component: DataTable,
+    parameters: {
+        layout: "padded"
+    }
+};
+
+export default meta;
+type Story<T extends Record<string, any> & DataTableDefaultData> = StoryObj<typeof DataTable<T>>;
+
+// Declare the data structure.
+interface Entry {
+    id: string;
+    name: string;
+    createdBy: string;
+    lastModified: string;
+    status: string;
+}
+
+// Define the columns structure for the table.
+const columns: DataTableColumns<Entry> = {
+    name: {
+        header: "Title"
+    },
+    createdBy: {
+        header: "Author"
+    },
+    lastModified: {
+        header: "Last Modified"
+    },
+    status: {
+        header: "Status"
+    }
+};
+
+// Define the data to display.
+const data = [
+    {
+        id: "entry-1",
+        name: "Getting Started Guide",
+        createdBy: "John Doe",
+        lastModified: "1 hour ago",
+        status: "Published"
+    },
+    {
+        id: "entry-2",
+        name: "User Documentation",
+        createdBy: "Jane Smith",
+        lastModified: "3 days ago",
+        status: "Draft"
+    },
+    {
+        id: "entry-3",
+        name: "API Reference",
+        createdBy: "John Doe",
+        lastModified: "1 week ago",
+        status: "Published"
+    }
+];
+
+export const Default: Story<Entry> = {
+    args: {
+        data,
+        columns
+    }
+};
+
+export const Bordered: Story<Entry> = {
+    args: {
+        ...Default.args,
+        bordered: true
+    }
+};
+
+export const WithStickyHeader: Story<Entry> = {
+    args: {
+        ...Default.args,
+        stickyHeader: true
+    }
+};
+
+export const WithSelectableRows: Story<Entry> = {
+    args: Default.args,
+    render: args => {
+        const [selectedRows, setSelectedRows] = useState<Entry[]>([]);
+
+        return (
+            <DataTable
+                {...args}
+                selectedRows={selectedRows}
+                onSelectRow={rows => setSelectedRows(rows)}
+            />
+        );
+    }
+};
+
+export const WithLoading: Story<Entry> = {
+    args: {
+        columns
+    },
+    render: ({ columns }) => {
+        const [loading, setLoading] = useState(true);
+        const [tableData, setTableData] = useState<Entry[]>([]);
+
+        useEffect(() => {
+            const timer = setTimeout(() => {
+                setTableData(data); // your predefined data
+                setLoading(false);
+            }, 5000);
+
+            return () => clearTimeout(timer);
+        }, []);
+
+        return <DataTable columns={columns} data={tableData} loading={loading} />;
+    }
+};
+
+export const WithLongColumnContent: Story<Entry> = {
+    args: {
+        ...Default.args,
+        columns: {
+            ...columns,
+            name: {
+                ...columns.name,
+                header: "Name - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+            }
+        },
+        data: data.map(entry => ({
+            ...entry,
+            name: `${entry.name} - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.`
+        }))
+    }
+};
+
+export const WithCustomCellRenderer: Story<Entry> = {
+    args: {
+        ...Default.args,
+        columns: {
+            ...columns,
+            name: {
+                ...columns.name,
+                cell: (entry: Entry) => {
+                    return (
+                        <div className={"wby-flex wby-items-center wby-gap-sm-extra"}>
+                            <Avatar
+                                image={
+                                    <Avatar.Image
+                                        src="https://github.com/webiny-bot.png"
+                                        alt="@webiny"
+                                    />
+                                }
+                                fallback={<Avatar.Fallback>{entry.name.charAt(0)}</Avatar.Fallback>}
+                                size={"xl"}
+                            />
+                            <div>
+                                <Text
+                                    className={"wby-text-neutral-primary wby-font-semibold"}
+                                    as={"div"}
+                                >
+                                    {entry.name}
+                                </Text>
+                                <Text
+                                    size={"sm"}
+                                    className={"wby-text-neutral-strong"}
+                                    as={"div"}
+                                >{`Last updated: ${entry.lastModified}`}</Text>
+                            </div>
+                        </div>
+                    );
+                }
+            }
+        }
+    }
+};
+
+export const WithCustomColumnSize: Story<Entry> = {
+    args: {
+        ...Default.args,
+        columns: {
+            ...columns,
+            name: {
+                ...columns.name,
+                size: 200
+            }
+        }
+    }
+};
+
+export const WithCustomColumnClassName: Story<Entry> = {
+    args: {
+        ...Default.args,
+        columns: {
+            ...columns,
+            lastModified: {
+                ...columns.lastModified,
+                className: "wby-bg-primary-subtle"
+            },
+            status: {
+                ...columns.status,
+                className: "wby-text-right"
+            }
+        }
+    }
+};
+
+export const WithSorting: Story<Entry> = {
+    args: {
+        ...Default.args,
+        columns: {
+            ...columns,
+            name: {
+                ...columns.name,
+                enableSorting: true
+            },
+            lastModified: {
+                ...columns.lastModified,
+                enableSorting: true
+            }
+        },
+        sorting: [
+            {
+                id: "lastModified",
+                desc: true
+            }
+        ]
+    },
+    render: ({ sorting: argsSorting = [], ...args }) => {
+        const [sorting, setSorting] = useState<DataTableSorting>(argsSorting);
+        return <DataTable {...args} sorting={sorting} onSortingChange={setSorting} />;
+    }
+};
+
+// Add a Documentation story
+export const Documentation: Story<Entry> = {
+    args: {
+        bordered: true,
+        stickyHeader: true,
+        columns: {
+            name: {
+                header: "Title",
+                enableSorting: true
+            },
+            createdBy: {
+                header: "Author"
+            },
+            lastModified: {
+                header: "Last Modified",
+                enableSorting: true
+            },
+            status: {
+                header: "Status"
+            }
+        },
+        data: [
+            {
+                id: "entry-1",
+                name: "Getting Started Guide",
+                createdBy: "John Doe",
+                lastModified: "1 hour ago",
+                status: "Published"
+            },
+            {
+                id: "entry-2",
+                name: "User Documentation",
+                createdBy: "Jane Smith",
+                lastModified: "3 days ago",
+                status: "Draft"
+            },
+            {
+                id: "entry-3",
+                name: "API Reference",
+                createdBy: "John Doe",
+                lastModified: "1 week ago",
+                status: "Published"
+            }
+        ]
+    },
+    render: args => {
+        const [selectedRows, setSelectedRows] = useState<Entry[]>([]);
+        const [sorting, setSorting] = useState<DataTableSorting>([]);
+
+        return (
+            <DataTable
+                {...args}
+                selectedRows={selectedRows}
+                onSelectRow={rows => setSelectedRows(rows)}
+                sorting={sorting}
+                onSortingChange={setSorting}
+            />
+        );
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: "This example shows a DataTable with selectable rows, sorting, and a sticky header."
+            }
+        }
+    },
+    argTypes: {
+        bordered: {
+            description: "Show or hide borders.",
+            control: "boolean",
+            defaultValue: true
+        },
+        stickyHeader: {
+            description: "Enable sticky header.",
+            control: "boolean",
+            defaultValue: true
+        },
+        columns: {
+            description: "Columns definition. Please refer to the code example for details.",
+            control: false
+        },
+        data: {
+            description:
+                "Data to display into DataTable body. Please refer to the code example for details.",
+            control: false
+        }
+    }
+};
diff --git a/packages/admin-ui/src/DataTable/DataTable.tsx b/packages/admin-ui/src/DataTable/DataTable.tsx
new file mode 100644
index 00000000000..7d06e50a50d
--- /dev/null
+++ b/packages/admin-ui/src/DataTable/DataTable.tsx
@@ -0,0 +1,514 @@
+import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import {
+    Cell,
+    Column,
+    ColumnDef,
+    ColumnSort,
+    flexRender,
+    getCoreRowModel,
+    getSortedRowModel,
+    OnChangeFn,
+    Row,
+    RowSelectionState,
+    SortingState,
+    useReactTable,
+    VisibilityState
+} from "@tanstack/react-table";
+import { CheckboxPrimitive } from "~/Checkbox";
+import { Skeleton } from "~/Skeleton";
+import { Table } from "~/Table";
+import { ColumnSorter, ColumnsVisibility } from "./components";
+import { cn, makeDecoratable } from "~/utils";
+
+interface DataTableColumn<T> {
+    /*
+     * Column header component.
+     */
+    header?: string | number | JSX.Element;
+    /*
+     * Cell renderer, receives the full row and returns the value to render inside the cell.
+     */
+    cell?: (row: T) => string | number | JSX.Element | null;
+    /*
+     * Column size.
+     */
+    size?: number;
+    /*
+     * Column class names.
+     */
+    className?: string;
+    /*
+     * Enable column sorting.
+     */
+    enableSorting?: boolean;
+    /*
+     * Enable column resizing.
+     */
+    enableResizing?: boolean;
+    /*
+     * Enable column visibility toggling.
+     */
+    enableHiding?: boolean;
+}
+
+type DataTableColumns<T> = {
+    [P in keyof T]?: DataTableColumn<T>;
+};
+
+type DataTableDefaultData = {
+    id: string;
+    /*
+     * Define if a specific row can be selected.
+     */
+    $selectable?: boolean;
+};
+
+type DataTableRow<T> = Row<DataTableDefaultData & T>;
+
+type DataTableSorting = SortingState;
+
+type DataTableColumnSort = ColumnSort;
+
+type OnDataTableSortingChange = OnChangeFn<DataTableSorting>;
+
+type DataTableColumnVisibility = VisibilityState;
+
+type OnDataTableColumnVisibilityChange = OnChangeFn<DataTableColumnVisibility>;
+
+interface DataTableProps<TEntry> {
+    /**
+     * Show or hide borders.
+     */
+    bordered?: boolean;
+    /**
+     * Controls whether "select all" action is allowed.
+     */
+    canSelectAllRows?: boolean;
+    /**
+     * Columns definition.
+     */
+    columns: DataTableColumns<TEntry>;
+    /**
+     * The column visibility state.
+     */
+    columnVisibility?: DataTableColumnVisibility;
+    /**
+     * Callback that receives current column visibility state.
+     */
+    onColumnVisibilityChange?: OnDataTableColumnVisibilityChange;
+    /**
+     * Data to display into DataTable body.
+     */
+    data: TEntry[];
+    /**
+     * Callback that is called to determine if the row is selectable.
+     */
+    isRowSelectable?: (row: Row<TEntry>) => boolean;
+    /**
+     * Render the skeleton state while data are loading.
+     */
+    loading?: boolean;
+    /**
+     * Callback that receives the selected rows.
+     */
+    onSelectRow?: (rows: TEntry[]) => void;
+    /**
+     * Callback that receives the toggled row.
+     */
+    onToggleRow?: (row: TEntry) => void;
+    /**
+     * Callback that receives current sorting state.
+     */
+    onSortingChange?: OnDataTableSortingChange;
+    /**
+     * Selected rows.
+     */
+    selectedRows?: TEntry[];
+    /**
+     * Sorting state.
+     */
+    sorting?: DataTableSorting;
+    /**
+     * Initial sorting state.
+     */
+    initialSorting?: DataTableSorting;
+    /**
+     * Enable sticky header.
+     */
+    stickyHeader?: boolean;
+}
+
+interface DefineColumnsOptions<TEntry> {
+    canSelectAllRows: boolean;
+    onSelectRow?: DataTableProps<TEntry>["onSelectRow"];
+    onToggleRow: DataTableProps<TEntry>["onToggleRow"];
+    loading: DataTableProps<TEntry>["loading"];
+}
+
+const defineColumns = <T,>(
+    columns: DataTableProps<T>["columns"],
+    options: DefineColumnsOptions<T>
+): ColumnDef<T>[] => {
+    const { canSelectAllRows, onSelectRow, onToggleRow, loading } = options;
+
+    return useMemo(() => {
+        const columnsList = Object.keys(columns).map(key => ({
+            id: key,
+            ...columns[key as keyof typeof columns]
+        }));
+
+        const defaults: ColumnDef<T>[] = columnsList.map(column => {
+            const {
+                cell,
+                className,
+                enableHiding = true,
+                enableResizing = true,
+                enableSorting = false,
+                header,
+                id,
+                size = 100
+            } = column;
+
+            return {
+                id,
+                accessorKey: id,
+                header: () => header,
+                cell: props => {
+                    if (cell && typeof cell === "function") {
+                        return cell(props.row.original);
+                    } else {
+                        // Automatically convert any cell value to a string for rendering,
+                        // ensuring the table displays values correctly. This aligns with React's
+                        // rendering, which expects JSX, strings or null.
+                        // https://github.com/TanStack/table/issues/1042
+                        return props.getValue() ? String(props.getValue()) : null;
+                    }
+                },
+                enableSorting,
+                meta: {
+                    className
+                },
+                enableResizing,
+                size,
+                enableHiding
+            };
+        });
+
+        let columnsDefs = defaults;
+        const firstColumn = defaults[0];
+        const isSelectable = onToggleRow || onSelectRow;
+
+        if (isSelectable && firstColumn) {
+            columnsDefs = [
+                {
+                    ...firstColumn,
+                    accessorKey: firstColumn.id as string,
+                    header: props => {
+                        return (
+                            <div className={"wby-flex wby-items-center wby-gap-xl"}>
+                                <CheckboxPrimitive
+                                    indeterminate={props.table.getIsSomeRowsSelected()}
+                                    checked={props.table.getIsAllRowsSelected()}
+                                    onChange={props.table.toggleAllPageRowsSelected}
+                                    aria-label="Select all"
+                                    disabled={!canSelectAllRows}
+                                    onClick={e => e.stopPropagation()}
+                                />
+                                {firstColumn.header
+                                    ? React.createElement(firstColumn.header, props)
+                                    : null}
+                            </div>
+                        );
+                    },
+                    cell: props => {
+                        return (
+                            <div className={"wby-flex wby-items-center wby-gap-xl"}>
+                                <CheckboxPrimitive
+                                    checked={props.row.getIsSelected()}
+                                    onChange={value => props.row.toggleSelected(!!value)}
+                                    disabled={!props.row.getCanSelect()}
+                                    aria-label="Select row"
+                                    className={cn(!props.row.getCanSelect() ? "wby-invisible" : "")}
+                                />
+                                {firstColumn.cell
+                                    ? React.createElement(firstColumn.cell, props)
+                                    : null}
+                            </div>
+                        );
+                    }
+                },
+                ...defaults.slice(1)
+            ];
+        }
+
+        return columnsDefs.map(column => {
+            if (loading) {
+                return {
+                    ...column,
+                    cell: () => <Skeleton type={"text"} size={"md"} />
+                };
+            }
+
+            return column;
+        });
+    }, [columns, onSelectRow, onToggleRow, loading]);
+};
+
+const typedMemo: <T>(component: T) => T = memo;
+
+interface TableCellProps<T> {
+    cell: Cell<T, unknown>;
+    getColumnWidth: (column: Column<T>) => number;
+}
+
+const TableCell = <T,>({ cell, getColumnWidth }: TableCellProps<T>) => {
+    const width = getColumnWidth(cell.column);
+
+    return (
+        <Table.Cell {...cell.column.columnDef.meta} style={{ width, maxWidth: width }}>
+            {flexRender(cell.column.columnDef.cell, cell.getContext())}
+        </Table.Cell>
+    );
+};
+
+const MemoTableCell = typedMemo(TableCell);
+
+interface TableRowProps<T> {
+    selected: boolean;
+    cells: Cell<T, unknown>[];
+    getColumnWidth: (column: Column<T>) => number;
+}
+
+const TableRow = <T,>({ selected, cells, getColumnWidth }: TableRowProps<T>) => {
+    return (
+        <Table.Row selected={selected}>
+            {cells.map(cell => (
+                <MemoTableCell<T> key={cell.id} cell={cell} getColumnWidth={getColumnWidth} />
+            ))}
+        </Table.Row>
+    );
+};
+
+const MemoTableRow = typedMemo(TableRow);
+
+/**
+ * Empty array must be defined outside the React component so it does not force rerendering of the DataTable
+ */
+const emptyArray = Array(10).fill({});
+
+const DecoratableDataTable = <T extends Record<string, any> & DataTableDefaultData>({
+    bordered,
+    canSelectAllRows = true,
+    columnVisibility,
+    columns: initialColumns,
+    data: initialData,
+    initialSorting,
+    isRowSelectable,
+    loading,
+    onColumnVisibilityChange,
+    onSelectRow,
+    onSortingChange,
+    onToggleRow,
+    selectedRows = [],
+    sorting,
+    stickyHeader
+}: DataTableProps<T>) => {
+    const tableRef = useRef<HTMLDivElement>(null);
+    const [tableWidth, setTableWidth] = useState(1);
+
+    const data = loading ? emptyArray : initialData;
+
+    useEffect(() => {
+        const updateElementWidth = () => {
+            if (tableRef.current) {
+                const width = tableRef.current.clientWidth;
+                setTableWidth(width);
+            }
+        };
+
+        updateElementWidth();
+
+        window.addEventListener("resize", updateElementWidth);
+
+        return () => {
+            window.removeEventListener("resize", updateElementWidth);
+        };
+    }, [tableRef.current]);
+
+    const rowSelection = useMemo(() => {
+        return selectedRows.reduce<RowSelectionState>((acc, item) => {
+            const recordIndex = data.findIndex(rec => rec.id === item.id);
+            return { ...acc, [recordIndex]: true };
+        }, {});
+    }, [selectedRows, data]);
+
+    const onRowSelectionChange: OnChangeFn<RowSelectionState> = updater => {
+        const newSelection = typeof updater === "function" ? updater(rowSelection) : updater;
+
+        /**
+         * `@tanstack/react-table` isn't telling us what row was selected or deselected. It simply gives us
+         * the new selection state (an object with row indexes that are currently selected).
+         *
+         * To figure out what row was toggled, we need to calculate the difference between the old selection
+         * and the new selection. What we're doing here is:
+         * - find all items that were present in the previous selection, but are no longer present in the new selection
+         * - find all items that are present in the new selection, but were not present in the previous selection
+         */
+        const toggledRows = [
+            ...Object.keys(rowSelection).filter(x => !(x in newSelection)),
+            ...Object.keys(newSelection).filter(x => !(x in rowSelection))
+        ];
+
+        // If the difference is only 1 item, and `onToggleRow` is available, execute that.
+        if (toggledRows.length === 1 && typeof onToggleRow === "function") {
+            onToggleRow(data[parseInt(toggledRows[0])]);
+            return;
+        } else if (typeof onSelectRow === "function") {
+            const selection = Object.keys(newSelection).map(key => data[parseInt(key)]);
+            onSelectRow(selection);
+        }
+    };
+
+    const tableSorting = useMemo(() => {
+        if (!Array.isArray(sorting) || !sorting.length) {
+            return initialSorting;
+        }
+        return sorting;
+    }, [sorting]);
+
+    const columns = defineColumns(initialColumns, {
+        canSelectAllRows,
+        onSelectRow,
+        onToggleRow,
+        loading
+    });
+
+    const table = useReactTable<T>({
+        columnResizeMode: "onChange",
+        columns,
+        data,
+        enableColumnResizing: true,
+        enableHiding: !!onColumnVisibilityChange,
+        enableRowSelection: isRowSelectable,
+        enableSorting: !!onSortingChange,
+        enableSortingRemoval: false,
+        getCoreRowModel: getCoreRowModel(),
+        getSortedRowModel: getSortedRowModel(),
+        manualSorting: true,
+        onColumnVisibilityChange,
+        onRowSelectionChange,
+        onSortingChange,
+        state: {
+            columnVisibility,
+            rowSelection,
+            sorting: tableSorting
+        }
+    });
+
+    const getColumnWidth = useCallback(
+        (column: Column<T>): number => {
+            if (!column.getCanResize()) {
+                return column.getSize();
+            }
+
+            const tableSize = table.getTotalSize();
+            const columnSize = column.getSize();
+
+            return Math.ceil((columnSize * tableWidth) / tableSize);
+        },
+        [table, tableWidth]
+    );
+
+    /**
+     * Had to memoize the rows to avoid browser freeze.
+     */
+    const tableRows = useMemo(() => {
+        return table.getRowModel().rows;
+    }, [table, data, columns]);
+
+    return (
+        <div ref={tableRef}>
+            <Table bordered={bordered} sticky={stickyHeader}>
+                <Table.Header sticky={stickyHeader}>
+                    {table.getHeaderGroups().map(headerGroup => (
+                        <Table.Row key={headerGroup.id}>
+                            {headerGroup.headers.map((header, index) => {
+                                const isLastCell = index === headerGroup.headers.length - 1;
+                                const width = getColumnWidth(header.column);
+
+                                return (
+                                    <Table.Head
+                                        key={header.id}
+                                        {...header.column.columnDef.meta}
+                                        colSpan={header.colSpan}
+                                        style={{ width, maxWidth: width }}
+                                    >
+                                        {header.isPlaceholder ? null : (
+                                            <ColumnSorter
+                                                onClick={header.column.getToggleSortingHandler()}
+                                                sortable={header.column.getCanSort()}
+                                            >
+                                                <div className="wby-w-full wby-overflow-hidden wby-whitespace-nowrap wby-truncate">
+                                                    {flexRender(
+                                                        header.column.columnDef.header,
+                                                        header.getContext()
+                                                    )}
+                                                </div>
+                                                <Table.Direction
+                                                    direction={header.column.getIsSorted() || null}
+                                                />
+                                                {isLastCell && (
+                                                    <div className={"wby-mr-xs wby-h-md"}>
+                                                        <ColumnsVisibility
+                                                            columns={table.getAllColumns()}
+                                                        />
+                                                    </div>
+                                                )}
+                                            </ColumnSorter>
+                                        )}
+                                        {header.column.getCanResize() && (
+                                            <Table.Resizer
+                                                onMouseDown={header.getResizeHandler()}
+                                                onTouchStart={header.getResizeHandler()}
+                                                isResizing={header.column.getIsResizing()}
+                                            />
+                                        )}
+                                    </Table.Head>
+                                );
+                            })}
+                        </Table.Row>
+                    ))}
+                </Table.Header>
+                <Table.Body>
+                    {tableRows.map(row => {
+                        const id = row.original.id || row.id;
+                        return (
+                            <MemoTableRow<T>
+                                key={id}
+                                cells={row.getVisibleCells()}
+                                selected={row.getIsSelected()}
+                                getColumnWidth={getColumnWidth}
+                            />
+                        );
+                    })}
+                </Table.Body>
+            </Table>
+        </div>
+    );
+};
+
+const DataTable = makeDecoratable("DataTable", DecoratableDataTable);
+
+export {
+    DataTable,
+    type DataTableProps,
+    type DataTableColumn,
+    type DataTableColumns,
+    type DataTableDefaultData,
+    type DataTableRow,
+    type DataTableSorting,
+    type DataTableColumnSort,
+    type OnDataTableSortingChange,
+    type DataTableColumnVisibility,
+    type OnDataTableColumnVisibilityChange
+};
diff --git a/packages/admin-ui/src/DataTable/components/ColumnSorter.tsx b/packages/admin-ui/src/DataTable/components/ColumnSorter.tsx
new file mode 100644
index 00000000000..d7f9642221d
--- /dev/null
+++ b/packages/admin-ui/src/DataTable/components/ColumnSorter.tsx
@@ -0,0 +1,24 @@
+import React from "react";
+import { cn, cva, type VariantProps } from "~/utils";
+
+const columnSorterVariants = cva("wby-flex wby-items-stretch wby-gap-xxs wby-cursor-auto", {
+    variants: {
+        sortable: {
+            true: "wby-cursor-pointer"
+        }
+    }
+});
+
+interface ColumnSorterProps
+    extends React.HTMLAttributes<HTMLDivElement>,
+        VariantProps<typeof columnSorterVariants> {}
+
+const ColumnSorter = ({ className, children, sortable, ...props }: ColumnSorterProps) => {
+    return (
+        <div {...props} className={cn(columnSorterVariants({ sortable }), className)}>
+            {children}
+        </div>
+    );
+};
+
+export { ColumnSorter };
diff --git a/packages/admin-ui/src/DataTable/components/ColumnsVisibility.tsx b/packages/admin-ui/src/DataTable/components/ColumnsVisibility.tsx
new file mode 100644
index 00000000000..7ee7f951bf6
--- /dev/null
+++ b/packages/admin-ui/src/DataTable/components/ColumnsVisibility.tsx
@@ -0,0 +1,78 @@
+import React, { useCallback, useMemo } from "react";
+import { ReactComponent as SettingsIcon } from "@webiny/icons/settings.svg";
+import { Column } from "@tanstack/react-table";
+import { IconButton } from "~/Button";
+import { Checkbox } from "~/Checkbox";
+import { DropdownMenu } from "~/DropdownMenu";
+
+interface ColumnsVisibilityProps<T> {
+    columns: Column<T>[];
+}
+
+interface Option {
+    id: string;
+    header: string;
+    onChange: (value?: boolean | undefined) => void;
+    getValue: () => boolean;
+}
+
+export const ColumnsVisibility = <T,>(props: ColumnsVisibilityProps<T>) => {
+    /**
+     * `@tanstack/react-table` does not have a simple method to return the header component.
+     * The only possible way is to use `flexRenderer`, but this is not working with the current implementation
+     * since we don't have access to the header context.
+     */
+    const getHeaderName = useCallback((column: Column<T>) => {
+        const { header } = column.columnDef;
+
+        if (typeof header === "string") {
+            return header;
+        }
+
+        if (typeof header === "function") {
+            // @ts-expect-error
+            return header();
+        }
+
+        return column.id;
+    }, []);
+
+    const options: Option[] = useMemo(() => {
+        return props.columns
+            .filter(column => column.getCanHide())
+            .map(column => {
+                return {
+                    id: column.id,
+                    header: getHeaderName(column),
+                    onChange: column.toggleVisibility,
+                    getValue: column.getIsVisible
+                };
+            });
+    }, [props.columns]);
+
+    if (options.length === 0) {
+        return null;
+    }
+
+    return (
+        <DropdownMenu
+            trigger={<IconButton icon={<SettingsIcon />} variant={"ghost"} size={"xs"} />}
+        >
+            <DropdownMenu.Label text={"Display columns"} />
+            {options.map(option => {
+                return (
+                    <DropdownMenu.Item
+                        key={option.id}
+                        text={
+                            <Checkbox
+                                label={option.header}
+                                onChange={option.onChange}
+                                checked={option.getValue()}
+                            />
+                        }
+                    />
+                );
+            })}
+        </DropdownMenu>
+    );
+};
diff --git a/packages/admin-ui/src/DataTable/components/index.ts b/packages/admin-ui/src/DataTable/components/index.ts
new file mode 100644
index 00000000000..c200ea2631b
--- /dev/null
+++ b/packages/admin-ui/src/DataTable/components/index.ts
@@ -0,0 +1,2 @@
+export * from "./ColumnSorter";
+export * from "./ColumnsVisibility";
diff --git a/packages/admin-ui/src/DataTable/index.ts b/packages/admin-ui/src/DataTable/index.ts
new file mode 100644
index 00000000000..4cb9855d0f8
--- /dev/null
+++ b/packages/admin-ui/src/DataTable/index.ts
@@ -0,0 +1 @@
+export * from "./DataTable";
diff --git a/packages/ui/src/DelayedOnChange/DelayedOnChange.ts b/packages/admin-ui/src/DelayedOnChange/DelayedOnChange.ts
similarity index 100%
rename from packages/ui/src/DelayedOnChange/DelayedOnChange.ts
rename to packages/admin-ui/src/DelayedOnChange/DelayedOnChange.ts
diff --git a/packages/admin-ui/src/DelayedOnChange/index.ts b/packages/admin-ui/src/DelayedOnChange/index.ts
new file mode 100644
index 00000000000..2b44c2c57c6
--- /dev/null
+++ b/packages/admin-ui/src/DelayedOnChange/index.ts
@@ -0,0 +1 @@
+export * from "./DelayedOnChange";
diff --git a/packages/admin-ui/src/Dialog/Dialog.mdx b/packages/admin-ui/src/Dialog/Dialog.mdx
new file mode 100644
index 00000000000..65be9a704d8
--- /dev/null
+++ b/packages/admin-ui/src/Dialog/Dialog.mdx
@@ -0,0 +1,425 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+
+import * as DialogStories from './Dialog.stories';
+
+<Meta of={DialogStories} />
+
+# Dialog
+
+A Dialog is used to display content or actions in a focused, overlay window that requires user interaction before returning to the main interface. Modals are valuable for drawing attention to important information, capturing user input, and streamlining workflows without navigating away from the current page.
+
+## Usage
+
+<Canvas of={DialogStories.Documentation} source={ { code: `
+import React, { useState } from "react";
+import { Dialog, Button } from "@webiny/admin-ui";
+
+const DialogExample = () => {
+    const [open, setOpen] = useState(false);
+
+    return (
+        <>
+            <Button
+                variant="primary"
+                text="Open Dialog"
+                onClick={() => setOpen(true)}
+            />
+
+            <Dialog
+                open={open}
+                onOpenChange={open => setOpen(open)}
+                title="Dialog Title"
+                description="A short dialog description."
+                info={<>Learn more about this <a href={"#"}>here</a>.</>}
+                actions={
+                    <>
+                        <Dialog.CancelButton />
+                        <Dialog.ConfirmButton />
+                    </>
+                }
+                showCloseButton={true}
+                dismissible={true}
+            >
+                This is the dialog content area. You can place any content here including
+                forms, text, images, or other components.
+            </Dialog>
+        </>
+    );
+};
+
+export default DialogExample;
+
+` } }
+        additionalActions={[
+            {
+                title: 'Open in GitHub',
+                onClick: () => {
+                    window.open(
+                        'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Dialog/Dialog.tsx',
+                        '_blank'
+                    );
+                },
+            }
+        ]}
+/>
+
+<Controls of={DialogStories.Documentation} exclude={["onOpenChange", "trigger"]}/>
+
+```tsx
+import React, { useState } from "react";
+import { Dialog, Button } from "@webiny/admin-ui";
+
+const DialogExample = () => {
+    const [open, setOpen] = useState(false);
+
+    return (
+        <>
+            <Button
+                variant="primary"
+                text="Open Dialog"
+                onClick={() => setOpen(true)}
+            />
+
+            <Dialog
+                open={open}
+                onOpenChange={open => setOpen(open)}
+                title="Dialog Title"
+                description="A short dialog description."
+                info={<>Learn more about this <a href={"#"}>here</a>.</>}
+                actions={
+                    <>
+                        <Dialog.CancelButton />
+                        <Dialog.ConfirmButton />
+                    </>
+                }
+                showCloseButton={true}
+                dismissible={true}
+            >
+                This is the dialog content area. You can place any content here including
+                forms, text, images, or other components.
+            </Dialog>
+        </>
+    );
+};
+
+export default DialogExample;
+```
+
+## Examples
+
+### Controlled Visibility
+
+Controlled Visibility demonstrates how to manually control the open/close state of the Dialog component from the outside, using React useState. Here we are following the “controlled component” pattern, where the visibility (open state) of the Dialog is not managed internally by the component itself, but instead controlled by the parent using React state.
+
+<Canvas of={DialogStories.ControlledVisibility} source={ { code: `
+import React, { useState } from "react";
+import { Dialog, Button } from "@webiny/admin-ui";
+
+const ControlledVisibilityExample = () => {
+    const [open, setOpen] = useState(false);
+
+    return (
+        <>
+            <Button
+                variant="primary"
+                text="Open Dialog"
+                onClick={() => setOpen(true)}
+            />
+
+            <Dialog
+                open={open}
+                onOpenChange={open => {
+                    if (!open) {
+                        setOpen(false);
+                    }
+                }}
+                title="Dialog Title"
+                description="A short dialog description."
+                actions={
+                    <>
+                        <Dialog.CancelButton />
+                        <Dialog.ConfirmButton />
+                    </>
+                }
+            >
+                This dialog&apos;s visibility is controlled by the open state.
+            </Dialog>
+        </>
+    );
+};
+
+export default ControlledVisibilityExample;
+` } } />
+
+### With Dropdown Menu
+
+<Canvas of={DialogStories.WithDropdownMenu} source={ { code: `
+import React, { useState } from "react";
+import { Dialog, Button, DropdownMenu } from "@webiny/admin-ui";
+
+const WithDropdownMenuExample = () => {
+    const [open, setOpen] = useState(false);
+
+    return (
+        <>
+            <DropdownMenu trigger={<Button variant="primary" text="Open Menu" />}>
+                <DropdownMenu.Item text={"Open Dialog"} content="Open Dialog" onClick={() => setOpen(true)} />
+            </DropdownMenu>
+
+            <Dialog
+                open={open}
+                onOpenChange={() => setOpen(false)}
+                title="Dialog Title"
+                description="A short dialog description."
+                actions={
+                    <>
+                        <Dialog.CancelButton />
+                        <Dialog.ConfirmButton />
+                    </>
+                }
+            >
+                This dialog is opened from a dropdown menu item.
+            </Dialog>
+        </>
+    );
+};
+
+export default WithDropdownMenuExample;
+` } } />
+
+### Without Close Button
+
+<Canvas of={DialogStories.WithoutCloseButton} source={ { code: `
+import React, { useState } from "react";
+import { Dialog, Button } from "@webiny/admin-ui";
+
+const WithoutCloseButtonExample = () => {
+    const [open, setOpen] = useState(false);
+
+    return (
+        <>
+            <Button
+                variant="primary"
+                text="Open Dialog"
+                onClick={() => setOpen(true)}
+            />
+
+            <Dialog
+                open={open}
+                onOpenChange={open => setOpen(open)}
+                title="Dialog Title"
+                description="A short dialog description."
+                showCloseButton={false}
+                actions={
+                    <>
+                        <Dialog.CancelButton />
+                        <Dialog.ConfirmButton />
+                    </>
+                }
+            >
+                This dialog doesn&apos;st have a close button in the top-right corner.
+            </Dialog>
+        </>
+    );
+};
+
+export default WithoutCloseButtonExample;
+` } } />
+
+### Alert Dialog
+
+<Canvas of={DialogStories.AlertDialog} source={ { code: `
+import React, { useState } from "react";
+import { Dialog, Button } from "@webiny/admin-ui";
+
+const AlertDialogExample = () => {
+    const [open, setOpen] = useState(false);
+
+    return (
+        <>
+            <Button
+                variant="primary"
+                text="Open Alert Dialog"
+                onClick={() => setOpen(true)}
+            />
+
+            <Dialog
+                open={open}
+                onOpenChange={open => setOpen(open)}
+                title="Confirm Action"
+                description="Are you sure you want to delete this item?"
+                showCloseButton={false}
+                actions={
+                    <>
+                        <Dialog.CancelButton text="Cancel" />
+                        <Dialog.ConfirmButton text="Delete" />
+                    </>
+                }
+            >
+                <p>This action cannot be undone.</p>
+                <p>Deleted items cannot be recovered.</p>
+            </Dialog>
+        </>
+    );
+};
+
+export default AlertDialogExample;
+` } } />
+
+### With Icon
+
+<Canvas of={DialogStories.WithIcon} source={ { code: `
+import React, { useState } from "react";
+import { Dialog, Button } from "@webiny/admin-ui";
+import { ReactComponent as DoorbellIcon } from "@webiny/icons/ring_volume.svg";
+
+const WithIconExample = () => {
+    const [open, setOpen] = useState(false);
+
+    return (
+        <>
+            <Button
+                variant="primary"
+                text="Open Dialog with Icon"
+                onClick={() => setOpen(true)}
+            />
+
+            <Dialog
+                open={open}
+                onOpenChange={open => setOpen(open)}
+                title="Dialog with Icon"
+                description="This dialog has an icon in the header."
+                icon={<Dialog.Icon icon={<DoorbellIcon />} label="Title icon" />}
+                actions={
+                    <>
+                        <Dialog.CancelButton />
+                        <Dialog.ConfirmButton />
+                    </>
+                }
+            >
+                The icon helps to visually identify the purpose of this dialog.
+            </Dialog>
+        </>
+    );
+};
+
+export default WithIconExample;
+` } } />
+
+### Prevent Outside Dismiss
+
+<Canvas of={DialogStories.PreventOutsideDismiss} source={ { code: `
+import React, { useState } from "react";
+import { Dialog, Button } from "@webiny/admin-ui";
+
+const PreventOutsideDismissExample = () => {
+    const [open, setOpen] = useState(false);
+
+    return (
+        <>
+            <Button
+                variant="primary"
+                text="Open Modal Dialog"
+                onClick={() => setOpen(true)}
+            />
+
+            <Dialog
+                open={open}
+                onOpenChange={open => setOpen(open)}
+                title="Important Action"
+                description="This dialog requires explicit action."
+                dismissible={false}
+                actions={
+                    <>
+                        <Dialog.CancelButton />
+                        <Dialog.ConfirmButton />
+                    </>
+                }
+            >
+                This dialog cannot be dismissed by clicking outside or pressing Escape.
+                You must use one of the action buttons to close it.
+            </Dialog>
+        </>
+    );
+};
+
+export default PreventOutsideDismissExample;
+` } } />
+
+### With Tabs
+
+<Canvas of={DialogStories.WithTabs} source={ { code: `
+import React, { useState } from "react";
+import { Dialog, Button, Tabs } from "@webiny/admin-ui";
+
+const WithTabsExample = () => {
+    const [open, setOpen] = useState(false);
+
+    return (
+        <>
+            <Button
+                variant="primary"
+                text="Open Dialog with Tabs"
+                onClick={() => setOpen(true)}
+            />
+
+            <Dialog
+                open={open}
+                onOpenChange={open => setOpen(open)}
+                title="Settings"
+                description="Configure your preferences"
+                bodyPadding={false}
+                actions={
+                    <>
+                        <Dialog.CancelButton />
+                        <Dialog.ConfirmButton text="Save" />
+                    </>
+                }
+            >
+                <Tabs
+                    spacing="lg"
+                    tabs={[
+                        <Tabs.Tab
+                            key="account"
+                            value="account"
+                            trigger="Account"
+                            content="Make changes to your account here."
+                        />,
+                        <Tabs.Tab
+                            key="company"
+                            value="company"
+                            trigger="Company"
+                            content="Make changes to your company info here."
+                        />,
+                        <Tabs.Tab
+                            key="security"
+                            value="security"
+                            trigger="Security"
+                            content="Make changes to your security settings here."
+                        />,
+                        <Tabs.Tab
+                            key="development"
+                            value="development"
+                            trigger="Development"
+                            content="Make changes to your development settings here."
+                        />
+                    ]}
+                />
+            </Dialog>
+        </>
+    );
+};
+
+export default WithTabsExample;
+` } } />
+
+## Anatomy
+
+### Dialog Construction
+<img src="/images/storybook/dialog/anatomy.png" alt="Anatomy"/>
+
+### Overlay and Positioning
+<img src="/images/storybook/dialog/overlay-and-positioning.png" alt="Dialog Overlay and Positioning"/>
+
+## Usage
+<img src="/images/storybook/dialog/usage.png" alt="Usage"/>
diff --git a/packages/admin-ui/src/Dialog/Dialog.stories.tsx b/packages/admin-ui/src/Dialog/Dialog.stories.tsx
new file mode 100644
index 00000000000..e1556fda7e2
--- /dev/null
+++ b/packages/admin-ui/src/Dialog/Dialog.stories.tsx
@@ -0,0 +1,331 @@
+import React, { useState } from "react";
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { fas } from "@fortawesome/free-solid-svg-icons";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Dialog } from "./Dialog";
+import { Button } from "~/Button";
+import { DropdownMenu } from "~/DropdownMenu";
+import { ReactComponent as DoorbellIcon } from "@webiny/icons/ring_volume.svg";
+import { Tabs } from "~/Tabs";
+import { IconPicker } from "~/IconPicker";
+
+// @ts-expect-error
+library.add(fas);
+
+const meta: Meta<typeof Dialog> = {
+    title: "Components/Dialog",
+    component: Dialog,
+    argTypes: {}
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Dialog>;
+
+export const Default: Story = {
+    args: {
+        trigger: <Button variant="primary" text={"Open"} />,
+        title: "Dialog Title",
+        description: "A short dialog description.",
+        info: (
+            <>
+                Learn more about this <a href={"#"}>here</a>.
+            </>
+        ),
+        children: (
+            <>
+                The amazing, splendid, and most useful umbrella, resistant to rain and friendly to
+                winds, is something that deserves all admiration. Crafted with perfect textures, it
+                bravely withstands storms and gently shades the rays of the sun. A remarkable
+                innovation, with an ergonomically designed grip most suited to the hand, it remains
+                stable even in the fiercest weather.
+            </>
+        ),
+        onOpenChange: opened => {
+            console.log(`Dialog is ${opened ? "opened" : "closed"}.`);
+        },
+        actions: (
+            <>
+                <Dialog.CancelButton />
+                <Dialog.ConfirmButton />
+            </>
+        )
+    },
+    argTypes: {}
+};
+
+export const ControlledVisibility: Story = {
+    render: props => {
+        const [open, setOpen] = React.useState(false);
+
+        return (
+            <>
+                <Button variant="primary" text={"Open"} onClick={() => setOpen(true)} />
+                <Dialog
+                    {...props}
+                    open={open}
+                    onOpenChange={open => {
+                        if (!open) {
+                            setOpen(false);
+                        }
+                    }}
+                />
+            </>
+        );
+    },
+    args: { ...Default.args, trigger: null }
+};
+
+export const WithOpenCloseEventHandler: Story = {
+    args: {
+        ...Default.args,
+        onClose: () => {
+            console.log("onClose triggered");
+        },
+        onOpen: () => {
+            console.log("onOpen triggered");
+        }
+    }
+};
+
+export const WithDropdownMenu: Story = {
+    render: props => {
+        const [open, setOpen] = React.useState(false);
+
+        return (
+            <>
+                <DropdownMenu trigger={<Button variant="primary" text={"Open"} />}>
+                    <DropdownMenu.Item
+                        text={"Open Dialog"}
+                        content={"Open Dialog"}
+                        onClick={() => setOpen(true)}
+                    />
+                </DropdownMenu>
+
+                <Dialog {...props} open={open} onOpenChange={() => setOpen(false)} />
+            </>
+        );
+    },
+    args: { ...Default.args, trigger: null }
+};
+
+export const WithoutCloseButton: Story = {
+    args: { ...Default.args, showCloseButton: false }
+};
+
+export const AlertDialog: Story = {
+    args: {
+        ...Default.args,
+        info: null,
+        showCloseButton: false,
+        title: "Confirm Action",
+        description: "Are you sure you want to delete this item?",
+        children: (
+            <>
+                <p>This action cannot be undone.</p>
+                <p>Deleted items cannot be recovered.</p>
+            </>
+        )
+    }
+};
+
+export const DropdownMenuInDialog: Story = {
+    args: {
+        ...Default.args,
+        children: (
+            <>
+                <DropdownMenu trigger={<Button variant="primary" text={"Open"} />}>
+                    <DropdownMenu.Item content={"Billing"} />
+                    <DropdownMenu.Item content={"Settings"} />
+                    <DropdownMenu.Item content={"Keyboard shortcuts"} />
+                </DropdownMenu>
+            </>
+        )
+    }
+};
+
+export const DropdownIconPickerInDialog: Story = {
+    args: {
+        ...Default.args
+    },
+    render: args => {
+        const [value, setValue] = useState("");
+        return (
+            <Dialog {...args}>
+                <IconPicker
+                    icons={[
+                        { prefix: "fas", name: "trash-restore-alt" },
+                        { prefix: "fas", name: "trash-can-arrow-up" },
+                        { prefix: "fas", name: "naira-sign" },
+                        { prefix: "fas", name: "cart-arrow-down" },
+                        { prefix: "fas", name: "walkie-talkie" },
+                        { prefix: "fas", name: "file-edit" },
+                        { prefix: "fas", name: "file-pen" },
+                        { prefix: "fas", name: "receipt" },
+                        { prefix: "fas", name: "pen-square" },
+                        { prefix: "fas", name: "pencil-square" },
+                        { prefix: "fas", name: "square-pen" },
+                        { prefix: "fas", name: "suitcase-rolling" },
+                        { prefix: "fas", name: "person-circle-exclamation" },
+                        { prefix: "fas", name: "chevron-down" },
+                        { prefix: "fas", name: "battery" },
+                        { prefix: "fas", name: "battery-5" },
+                        { prefix: "fas", name: "battery-full" },
+                        { prefix: "fas", name: "skull-crossbones" },
+                        { prefix: "fas", name: "code-compare" },
+                        { prefix: "fas", name: "list-dots" },
+                        { prefix: "fas", name: "list-ul" },
+                        { prefix: "fas", name: "school-lock" },
+                        { prefix: "fas", name: "tower-cell" },
+                        { prefix: "fas", name: "long-arrow-alt-down" },
+                        { prefix: "fas", name: "down-long" },
+                        { prefix: "fas", name: "ranking-star" },
+                        { prefix: "fas", name: "chess-king" },
+                        { prefix: "fas", name: "person-harassing" },
+                        { prefix: "fas", name: "brazilian-real-sign" },
+                        { prefix: "fas", name: "landmark-alt" }
+                    ]}
+                    value={value}
+                    onChange={value => {
+                        console.log("Selected icon:", value);
+                        setValue(value);
+                    }}
+                />
+            </Dialog>
+        );
+    }
+};
+
+export const WithIcon: Story = {
+    args: {
+        ...Default.args,
+        icon: <Dialog.Icon icon={<DoorbellIcon />} label={"Title icon"} />
+    }
+};
+
+export const PreventOutsideDismiss: Story = {
+    args: {
+        ...Default.args,
+        dismissible: false
+    }
+};
+
+export const WithTabs: Story = {
+    args: {
+        ...Default.args,
+        bodyPadding: false,
+        children: (
+            <>
+                <Tabs
+                    spacing={"lg"}
+                    tabs={[
+                        <Tabs.Tab
+                            key={"account"}
+                            value={"account"}
+                            trigger={"Account"}
+                            content={"Make changes to your account here."}
+                        />,
+                        <Tabs.Tab
+                            key={"company"}
+                            value={"company"}
+                            trigger={"Company"}
+                            content={"Make changes to your company info here."}
+                        />,
+                        <Tabs.Tab
+                            key={"security"}
+                            value={"security"}
+                            trigger={"Security"}
+                            content={"Make changes to your security settings here."}
+                        />,
+                        <Tabs.Tab
+                            key={"development"}
+                            value={"development"}
+                            trigger={"Development"}
+                            content={"Make changes to your development settings here."}
+                        />
+                    ]}
+                />
+            </>
+        )
+    }
+};
+
+export const Documentation: Story = {
+    render: args => {
+        const [open, setOpen] = useState(false);
+
+        return (
+            <>
+                <Button variant="primary" text="Open Dialog" onClick={() => setOpen(true)} />
+
+                <Dialog {...args} open={open} onOpenChange={open => setOpen(open)} />
+            </>
+        );
+    },
+    args: {
+        title: "Dialog Title",
+        description: "A short dialog description.",
+        showCloseButton: true,
+        dismissible: true,
+        bodyPadding: true,
+        info: (
+            <>
+                Learn more about this <a href={"#"}>here</a>.
+            </>
+        ),
+        children: (
+            <>
+                This is the dialog content area. You can place any content here including forms,
+                text, images, or other components.
+            </>
+        ),
+        actions: (
+            <>
+                <Dialog.CancelButton />
+                <Dialog.ConfirmButton />
+            </>
+        )
+    },
+    argTypes: {
+        title: {
+            description: "Title displayed in the header",
+            control: "text"
+        },
+        description: {
+            description: "Description displayed below the title",
+            control: "text"
+        },
+        showCloseButton: {
+            description:
+                "Show close button, please refer to the 'Without Close Button' example below for details.",
+            control: "boolean",
+            defaultValue: true
+        },
+        dismissible: {
+            description:
+                "Allow dialog to be dismissed by clicking outside or pressing Escape, please refer to the 'Prevent Outside Dismiss' example below for details.",
+            control: "boolean",
+            defaultValue: true
+        },
+        bodyPadding: {
+            description: "Add padding to the Dialog body.",
+            control: "boolean",
+            defaultValue: true
+        },
+        info: {
+            description:
+                "Additional info displayed below the description, please refer to the example below for details.",
+            control: "none"
+        },
+        children: {
+            description:
+                "Content of the dialog, please refer to the 'With Dropdown Menu' and ''With Tabs' example below for details.",
+            control: "none"
+        },
+        actions: {
+            description:
+                "Actions displayed in the footer, please refer to the code example for details.",
+            control: "none"
+        }
+    }
+};
diff --git a/packages/admin-ui/src/Dialog/Dialog.tsx b/packages/admin-ui/src/Dialog/Dialog.tsx
new file mode 100644
index 00000000000..7857b9eecb2
--- /dev/null
+++ b/packages/admin-ui/src/Dialog/Dialog.tsx
@@ -0,0 +1,136 @@
+import * as React from "react";
+import { makeDecoratable, withStaticProps } from "~/utils";
+import { DialogContent } from "./components/DialogContent";
+import { DialogHeader } from "~/Dialog/components/DialogHeader";
+import { DialogBody } from "~/Dialog/components/DialogBody";
+import { DialogFooter } from "~/Dialog/components/DialogFooter";
+import { DialogOverlay } from "~/Dialog/components/DialogOverlay";
+import { DialogPortal } from "./components/DialogPortal";
+import { DialogRoot } from "./components/DialogRoot";
+import { DialogTrigger } from "./components/DialogTrigger";
+import { Icon } from "./components/Icon";
+import { ConfirmButton } from "./components/ConfirmButton";
+import { CancelButton } from "./components/CancelButton";
+import { DialogClose } from "~/Dialog/components/DialogClose";
+
+interface DialogProps
+    extends React.ComponentPropsWithoutRef<typeof DialogRoot>,
+        Omit<React.ComponentPropsWithoutRef<typeof DialogContent>, "title"> {
+    trigger?: React.ReactNode;
+    title?: React.ReactNode;
+    icon?: React.ReactElement;
+    showCloseButton?: boolean;
+    dismissible?: boolean;
+    bodyPadding?: boolean;
+    description?: React.ReactNode;
+    children: React.ReactNode;
+    actions?: React.ReactNode;
+    info?: React.ReactNode;
+    onClose?: () => void;
+    onOpen?: () => void;
+}
+
+const DialogBase = (props: DialogProps) => {
+    const {
+        rootProps,
+        triggerProps,
+        contentProps,
+        headerProps,
+        bodyProps,
+        footerProps,
+        closeButtonProps
+    } = React.useMemo(() => {
+        const {
+            // Root props.
+            defaultOpen,
+            open,
+            onOpenChange: originalOnOpenChange,
+            onClose,
+            onOpen,
+            modal,
+            dir,
+
+            // Trigger props.
+            trigger,
+
+            // Header props.
+            title,
+            icon,
+            description,
+
+            // Body props.
+            children,
+            bodyPadding,
+
+            // Footer props.
+            actions,
+            info,
+
+            // Close button props.
+            showCloseButton = true,
+
+            // Content props.
+            ...contentProps
+        } = props;
+
+        // Handles dialog open state changes, calling original and onClose / onOpen callbacks as needed
+        const onOpenChange = (open: boolean) => {
+            originalOnOpenChange && originalOnOpenChange(open);
+
+            if (onClose && !open) {
+                onClose();
+            }
+
+            if (onOpen && open) {
+                onOpen();
+            }
+        };
+
+        return {
+            rootProps: {
+                defaultOpen,
+                open,
+                onOpenChange,
+                modal,
+                dir
+            },
+            triggerProps: {
+                // Temporary fix. We need this because `ref` doesn't get passed to components
+                // that are decorated with `makeDecoratable`. This will be fixed in the future.
+                children: <div>{trigger}</div>
+            },
+            headerProps: { title, icon, description },
+            bodyProps: { children, bodyPadding },
+            footerProps: { info, actions },
+            closeButtonProps: { show: showCloseButton },
+            contentProps
+        };
+    }, [props]);
+
+    return (
+        <DialogRoot {...rootProps}>
+            {triggerProps.children && <DialogTrigger {...triggerProps} asChild />}
+            <DialogPortal>
+                <DialogOverlay />
+                <DialogContent {...contentProps}>
+                    <DialogHeader {...headerProps} />
+                    <DialogBody {...bodyProps} />
+                    <DialogFooter {...footerProps} />
+                    {closeButtonProps.show && <DialogClose />}
+                </DialogContent>
+            </DialogPortal>
+        </DialogRoot>
+    );
+};
+
+DialogBase.displayName = "Dialog";
+
+const DecoratableDialog = makeDecoratable("Dialog", DialogBase);
+
+const Dialog = withStaticProps(DecoratableDialog, {
+    ConfirmButton,
+    CancelButton,
+    Icon
+});
+
+export { Dialog, type DialogProps };
diff --git a/packages/admin-ui/src/Dialog/components/CancelButton.tsx b/packages/admin-ui/src/Dialog/components/CancelButton.tsx
new file mode 100644
index 00000000000..d7e4963892a
--- /dev/null
+++ b/packages/admin-ui/src/Dialog/components/CancelButton.tsx
@@ -0,0 +1,12 @@
+import * as React from "react";
+import { makeDecoratable } from "~/utils";
+import { DialogClosePrimitive } from "./DialogClose";
+import { Button, ButtonProps } from "~/Button";
+
+const CancelButtonBase = (props: ButtonProps) => (
+    <DialogClosePrimitive asChild>
+        <Button text={"Cancel"} {...props} variant="secondary" />
+    </DialogClosePrimitive>
+);
+
+export const CancelButton = makeDecoratable("CancelButton", CancelButtonBase);
diff --git a/packages/admin-ui/src/Dialog/components/ConfirmButton.tsx b/packages/admin-ui/src/Dialog/components/ConfirmButton.tsx
new file mode 100644
index 00000000000..b3668a9a8ff
--- /dev/null
+++ b/packages/admin-ui/src/Dialog/components/ConfirmButton.tsx
@@ -0,0 +1,9 @@
+import * as React from "react";
+import { makeDecoratable } from "~/utils";
+import { Button, ButtonProps } from "~/Button";
+
+const ConfirmButtonBase = (props: ButtonProps) => (
+    <Button text={"Confirm"} {...props} variant="primary" />
+);
+
+export const ConfirmButton = makeDecoratable("ConfirmButton", ConfirmButtonBase);
diff --git a/packages/admin-ui/src/Dialog/components/DialogBody.tsx b/packages/admin-ui/src/Dialog/components/DialogBody.tsx
new file mode 100644
index 00000000000..96a6892953a
--- /dev/null
+++ b/packages/admin-ui/src/Dialog/components/DialogBody.tsx
@@ -0,0 +1,9 @@
+import * as React from "react";
+import { cn } from "~/utils";
+import type { DialogProps } from "~/Dialog";
+
+export type DialogBodyProps = Pick<DialogProps, "children" | "bodyPadding">;
+
+export const DialogBody = ({ bodyPadding, children }: DialogBodyProps) => {
+    return <div className={cn({ "wby-px-lg": bodyPadding !== false })}>{children}</div>;
+};
diff --git a/packages/admin-ui/src/Dialog/components/DialogClose.tsx b/packages/admin-ui/src/Dialog/components/DialogClose.tsx
new file mode 100644
index 00000000000..899c8f049f4
--- /dev/null
+++ b/packages/admin-ui/src/Dialog/components/DialogClose.tsx
@@ -0,0 +1,16 @@
+import React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { ReactComponent as XIcon } from "@webiny/icons/close.svg";
+import { IconButton } from "~/Button";
+
+export const DialogClosePrimitive = DialogPrimitive.Close;
+
+export const DialogClose = () => {
+    return (
+        <div className={"wby-absolute wby-top-md wby-right-md"}>
+            <DialogPrimitive.Close asChild>
+                <IconButton size="md" iconSize="lg" variant={"ghost"} icon={<XIcon />} />
+            </DialogPrimitive.Close>
+        </div>
+    );
+};
diff --git a/packages/admin-ui/src/Dialog/components/DialogContent.tsx b/packages/admin-ui/src/Dialog/components/DialogContent.tsx
new file mode 100644
index 00000000000..5c4be57d3bc
--- /dev/null
+++ b/packages/admin-ui/src/Dialog/components/DialogContent.tsx
@@ -0,0 +1,53 @@
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { cn } from "~/utils";
+
+export interface DialogContentProps
+    extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
+    dismissible?: boolean;
+}
+
+const DialogContent = React.forwardRef<
+    React.ElementRef<typeof DialogPrimitive.Content>,
+    DialogContentProps
+>(({ className, dismissible, children, ...props }, ref) => {
+    const dismissibleProps = React.useMemo<
+        Pick<DialogPrimitive.DialogContentProps, "onInteractOutside" | "onEscapeKeyDown">
+    >(() => {
+        if (dismissible === false) {
+            return {
+                onInteractOutside: event => event.preventDefault(),
+                onEscapeKeyDown: event => event.preventDefault()
+            };
+        }
+
+        return {};
+    }, [dismissible]);
+
+    return (
+        <DialogPrimitive.Content
+            {...dismissibleProps}
+            {...props}
+            ref={ref}
+            className={cn(
+                "wby-fixed wby-left-[50%] wby-top-[50%] wby-z-50 wby-border wby-bg-neutral-base wby-shadow-lg focus-visible:outline-none wby-rounded-xl wby-text-md wby-text-neutral-strong wby-overflow-y-scroll wby-max-h-screen",
+                "wby-translate-x-[-50%] wby-translate-y-[-50%] wby-duration-200 data-[state=open]:wby-animate-in data-[state=closed]:wby-animate-out data-[state=closed]:wby-fade-out-0 data-[state=open]:wby-fade-in-0 data-[state=closed]:wby-zoom-out-95 data-[state=open]:wby-zoom-in-95 data-[state=closed]:wby-slide-out-to-left-1/2 data-[state=closed]:wby-slide-out-to-top-[48%] data-[state=open]:wby-slide-in-from-left-1/2 data-[state=open]:wby-slide-in-from-top-[48%]",
+                "focus:wby-outline-none focus-visible:wby-outline-none",
+                "wby-w-full wby-max-w-[480px]",
+                className
+            )}
+            // TODO: An optional accessible description to be announced when the dialog is opened. At the moment we skip this.
+            aria-describedby={undefined}
+        >
+            {/* We needed to add this wrapper so that absolute-positioned elements can be placed */}
+            {/* inside the dialog. We noticed this while showing a loader inside the dialog. */}
+            <div className={"wby-flex wby-flex-col wby-relative wby-w-full wby-max-w-full"}>
+                {children}
+            </div>
+        </DialogPrimitive.Content>
+    );
+});
+
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+export { DialogContent };
diff --git a/packages/admin-ui/src/Dialog/components/DialogDescription.tsx b/packages/admin-ui/src/Dialog/components/DialogDescription.tsx
new file mode 100644
index 00000000000..cf34c96de32
--- /dev/null
+++ b/packages/admin-ui/src/Dialog/components/DialogDescription.tsx
@@ -0,0 +1,14 @@
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { cn } from "~/utils";
+
+export type DialogDescriptionProps = React.ComponentPropsWithoutRef<
+    typeof DialogPrimitive.Description
+>;
+
+export const DialogDescription = ({ className, ...props }: DialogDescriptionProps) => (
+    <DialogPrimitive.Description
+        {...props}
+        className={cn("wby-text-sm wby-text-neutral-strong wby-text-left", className)}
+    />
+);
diff --git a/packages/admin-ui/src/Dialog/components/DialogFooter.tsx b/packages/admin-ui/src/Dialog/components/DialogFooter.tsx
new file mode 100644
index 00000000000..0c87fb935b0
--- /dev/null
+++ b/packages/admin-ui/src/Dialog/components/DialogFooter.tsx
@@ -0,0 +1,27 @@
+import * as React from "react";
+import { cn } from "~/utils";
+
+export interface DialogFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+    actions?: React.ReactNode;
+    info?: React.ReactNode;
+}
+
+export const DialogFooter = ({ actions, info, className, ...props }: DialogFooterProps) => {
+    if (!actions && !info) {
+        return null;
+    }
+
+    return (
+        <div
+            {...props}
+            className={cn("wby-flex wby-justify-between wby-p-lg wby-mt-xs", className)}
+        >
+            {info && (
+                <div className={"wby-text-sm wby-flex wby-items-center"}>
+                    <div>{info}</div>
+                </div>
+            )}
+            {actions && <div className={"wby-flex wby-gap-x-sm wby-ml-auto"}>{actions}</div>}
+        </div>
+    );
+};
diff --git a/packages/admin-ui/src/Dialog/components/DialogHeader.tsx b/packages/admin-ui/src/Dialog/components/DialogHeader.tsx
new file mode 100644
index 00000000000..8a0aee8f86e
--- /dev/null
+++ b/packages/admin-ui/src/Dialog/components/DialogHeader.tsx
@@ -0,0 +1,43 @@
+import * as React from "react";
+import { cn } from "~/utils";
+import { type DialogProps } from "../Dialog";
+import { DialogTitle } from "./DialogTitle";
+import { DialogDescription } from "./DialogDescription";
+import { useMemo } from "react";
+
+export type DialogHeaderProps = Omit<React.HTMLAttributes<HTMLDivElement>, "title"> &
+    Pick<DialogProps, "title" | "icon" | "description">;
+
+export const DialogHeader = ({
+    title,
+    icon,
+    description,
+    className,
+    ...props
+}: DialogHeaderProps) => {
+    const nothingToRender = useMemo(() => {
+        return !title && !description && !icon;
+    }, [title, description, icon]);
+
+    if (nothingToRender) {
+        return null;
+    }
+
+    return (
+        <div
+            {...props}
+            className={cn(
+                "wby-flex wby-flex-col wby-gap-sm wby-px-lg wby-pt-md wby-pb-md-extra wby-mr-xl wby-sm:text-left wby-text-neutral-primary",
+                className
+            )}
+        >
+            <DialogTitle className={"wby-flex wby-justify-between"}>
+                <div className={"wby-flex wby-gap-xs"}>
+                    {icon}
+                    {title}
+                </div>
+            </DialogTitle>
+            {description && <DialogDescription>{description}</DialogDescription>}
+        </div>
+    );
+};
diff --git a/packages/admin-ui/src/Dialog/components/DialogOverlay.tsx b/packages/admin-ui/src/Dialog/components/DialogOverlay.tsx
new file mode 100644
index 00000000000..34104986f39
--- /dev/null
+++ b/packages/admin-ui/src/Dialog/components/DialogOverlay.tsx
@@ -0,0 +1,20 @@
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { cn } from "~/utils";
+
+export const DialogOverlay = React.forwardRef<
+    React.ElementRef<typeof DialogPrimitive.Overlay>,
+    React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+    <DialogPrimitive.Overlay
+        id={"wby-admin-ui.dialog-overlay"}
+        ref={ref}
+        className={cn(
+            "wby-fixed wby-inset-0 wby-z-50 wby-bg-neutral-dark/50 data-[state=open]:wby-animate-in data-[state=closed]:wby-animate-out data-[state=closed]:wby-fade-out-0 data-[state=open]:wby-fade-in-0",
+            className
+        )}
+        {...props}
+    />
+));
+
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
diff --git a/packages/admin-ui/src/Dialog/components/DialogPortal.tsx b/packages/admin-ui/src/Dialog/components/DialogPortal.tsx
new file mode 100644
index 00000000000..52f47f4b74d
--- /dev/null
+++ b/packages/admin-ui/src/Dialog/components/DialogPortal.tsx
@@ -0,0 +1,3 @@
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+
+export const DialogPortal = DialogPrimitive.Portal;
diff --git a/packages/admin-ui/src/Dialog/components/DialogRoot.tsx b/packages/admin-ui/src/Dialog/components/DialogRoot.tsx
new file mode 100644
index 00000000000..6147e679c72
--- /dev/null
+++ b/packages/admin-ui/src/Dialog/components/DialogRoot.tsx
@@ -0,0 +1,3 @@
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+
+export const DialogRoot = DialogPrimitive.Root;
diff --git a/packages/admin-ui/src/Dialog/components/DialogTitle.tsx b/packages/admin-ui/src/Dialog/components/DialogTitle.tsx
new file mode 100644
index 00000000000..83296fbda61
--- /dev/null
+++ b/packages/admin-ui/src/Dialog/components/DialogTitle.tsx
@@ -0,0 +1,12 @@
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { cn } from "~/utils";
+
+export type DialogTitleProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>;
+
+export const DialogTitle = ({ className, ...props }: DialogTitleProps) => (
+    <DialogPrimitive.Title
+        {...props}
+        className={cn("wby-text-h4 wby-flex wby-gap-sm", className)}
+    />
+);
diff --git a/packages/admin-ui/src/Dialog/components/DialogTrigger.tsx b/packages/admin-ui/src/Dialog/components/DialogTrigger.tsx
new file mode 100644
index 00000000000..01b2d6f786d
--- /dev/null
+++ b/packages/admin-ui/src/Dialog/components/DialogTrigger.tsx
@@ -0,0 +1,3 @@
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+
+export const DialogTrigger = DialogPrimitive.Trigger;
diff --git a/packages/admin-ui/src/Dialog/components/Icon.tsx b/packages/admin-ui/src/Dialog/components/Icon.tsx
new file mode 100644
index 00000000000..cc500ff1f9e
--- /dev/null
+++ b/packages/admin-ui/src/Dialog/components/Icon.tsx
@@ -0,0 +1,18 @@
+import * as React from "react";
+import { cn, makeDecoratable } from "~/utils";
+import { Icon as IconComponent, IconProps as IconComponentProps } from "~/Icon";
+
+type IconProps = IconComponentProps;
+
+const IconBase = ({ className, ...props }: IconProps) => {
+    return (
+        <IconComponent
+            size={"lg"}
+            color={"neutral-strong"}
+            {...props}
+            className={cn("wby-pt-xs", className)}
+        />
+    );
+};
+
+export const Icon = makeDecoratable("Icon", IconBase);
diff --git a/packages/admin-ui/src/Dialog/index.ts b/packages/admin-ui/src/Dialog/index.ts
new file mode 100644
index 00000000000..24cc75a77f6
--- /dev/null
+++ b/packages/admin-ui/src/Dialog/index.ts
@@ -0,0 +1 @@
+export * from "./Dialog";
diff --git a/packages/admin-ui/src/Drawer/Drawer.mdx b/packages/admin-ui/src/Drawer/Drawer.mdx
new file mode 100644
index 00000000000..db60d9b6ac7
--- /dev/null
+++ b/packages/admin-ui/src/Drawer/Drawer.mdx
@@ -0,0 +1,477 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+
+import * as DrawerStories from './Drawer.stories';
+
+<Meta of={DrawerStories} />
+
+# Drawer
+
+A Drawer is a UI component used to display additional or expanded content options without leaving the current view. The drawer should slide in from left or right side of the screen, overlaying the main content.
+
+## Usage
+
+<Canvas of={DrawerStories.Documentation} source={ { code: `
+import React, { useState } from "react";
+import { Drawer, Button } from "@webiny/admin-ui";
+
+const DrawerExample = () => {
+    const [open, setOpen] = useState(false);
+
+    return (
+        <>
+            <Button
+                variant="primary"
+                text="Open Drawer"
+                onClick={() => setOpen(true)}
+            />
+
+            <Drawer
+                open={open}
+                onOpenChange={open => setOpen(open)}
+                title="Drawer Title"
+                description="A short drawer description."
+                info={<>Learn more about this <a href={"#"}>here</a>.</>}
+                side="right"
+                showCloseButton={true}
+                bodyPadding={true}
+                headerSeparator={true}
+                footerSeparator={true}
+                actions={
+                    <>
+                        <Drawer.CancelButton />
+                        <Drawer.ConfirmButton />
+                    </>
+                }
+            >
+                <p className={"wby-mb-md, wby-mt-md"}>
+                    This is the drawer content area. You can place any content here including
+                    forms, text, images, or other components.
+                </p>
+                <p className={"wby-mb-md"}>
+                    Drawers are useful for displaying additional information or actions
+                    without navigating away from the current page.
+                </p>
+            </Drawer>
+        </>
+    );
+};
+
+export default DrawerExample;
+
+` } }
+        additionalActions={[
+            {
+                title: 'Open in GitHub',
+                onClick: () => {
+                    window.open(
+                        'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Drawer/Drawer.tsx',
+                        '_blank'
+                    );
+                },
+            }
+        ]}
+/>
+
+<Controls of={DrawerStories.Documentation} exclude={["onOpenChange", "trigger"]}/>
+
+```tsx
+import React, { useState } from "react";
+import { Drawer, Button } from "@webiny/admin-ui";
+
+const DrawerExample = () => {
+    const [open, setOpen] = useState(false);
+
+    return (
+        <>
+            <Button
+                variant="primary"
+                text="Open Drawer"
+                onClick={() => setOpen(true)}
+            />
+
+            <Drawer
+                open={open}
+                onOpenChange={open => setOpen(open)}
+                title="Drawer Title"
+                description="A short drawer description."
+                info={<>Learn more about this <a href={"#"}>here</a>.</>}
+                side="right"
+                showCloseButton={true}
+                bodyPadding={true}
+                headerSeparator={true}
+                footerSeparator={true}
+                actions={
+                    <>
+                        <Drawer.CancelButton />
+                        <Drawer.ConfirmButton />
+                    </>
+                }
+            >
+                <p className={"wby-mb-md, wby-mt-md"}>
+                    This is the drawer content area. You can place any content here including
+                    forms, text, images, or other components.
+                </p>
+                <p className={"wby-mb-md"}>
+                    Drawers are useful for displaying additional information or actions
+                    without navigating away from the current page.
+                </p>
+            </Drawer>
+        </>
+    );
+};
+
+export default DrawerExample;
+```
+
+## Examples
+
+### Controlled Visibility
+
+Controlled Visibility demonstrates how to manually control the open state of the Drawer component from the outside, using React useState. Here we are following the “controlled component” pattern, where the visibility (open state) of the Drawer is not managed internally by the component itself, but instead controlled by the parent using React state.
+
+<Canvas of={DrawerStories.ControlledVisibility} source={ { code: `
+import React, { useState } from "react";
+import { Drawer, Button } from "@webiny/admin-ui";
+
+const ControlledVisibilityExample = () => {
+    const [open, setOpen] = useState(false);
+
+    return (
+        <>
+            <Button
+                variant="primary"
+                text="Open Drawer"
+                onClick={() => setOpen(true)}
+            />
+
+            <Drawer
+                open={open}
+                onOpenChange={open => {
+                    if (!open) {
+                        setOpen(false);
+                    }
+                }}
+                title="Drawer Title"
+                description="A short drawer description."
+                info={<>Learn more about this <a href={"#"}>here</a>.</>}
+                side="right"
+                showCloseButton={true}
+                bodyPadding={true}
+                headerSeparator={true}
+                footerSeparator={true}
+                actions={
+                    <>
+                        <Drawer.CancelButton />
+                        <Drawer.ConfirmButton />
+                    </>
+                }
+            >
+                <p className={"wby-mb-md, wby-mt-md"}>
+                  This drawer&apos;s visibility is controlled by the open state.
+                 </p>
+            </Drawer>
+        </>
+    );
+};
+
+export default ControlledVisibilityExample;
+` } } />
+
+### With Dropdown Menu
+
+<Canvas of={DrawerStories.WithDropdownMenu} source={ { code: `
+import React, { useState } from "react";
+import { Drawer, Button, DropdownMenu } from "@webiny/admin-ui";
+
+const WithDropdownMenuExample = () => {
+    const [open, setOpen] = useState(false);
+
+    return (
+        <>
+            <DropdownMenu trigger={<Button variant="primary" text="Open Menu" />}>
+                <DropdownMenu.Ite text={"Open Drawer"} content="Open Drawer" onClick={() => setOpen(true)} />
+            </DropdownMenu>
+
+            <Drawer
+                open={open}
+                onOpenChange={() => setOpen(false)}
+                title="Drawer Title"
+                description="A short drawer description."
+                info={<>Learn more about this <a href={"#"}>here</a>.</>}
+                side="right"
+                showCloseButton={true}
+                bodyPadding={true}
+                headerSeparator={true}
+                footerSeparator={true}
+                actions={
+                    <>
+                        <Drawer.CancelButton />
+                        <Drawer.ConfirmButton />
+                    </>
+                }
+            >
+                This drawer is opened from a dropdown menu item.
+            </Drawer>
+        </>
+    );
+};
+
+export default WithDropdownMenuExample;
+` } } />
+
+### Without Close Button
+
+<Canvas of={DrawerStories.WithoutCloseButton} source={ { code: `
+import React, { useState } from "react";
+import { Drawer, Button } from "@webiny/admin-ui";
+
+const WithoutCloseButtonExample = () => {
+    const [open, setOpen] = useState(false);
+
+    return (
+        <>
+            <Button
+                variant="primary"
+                text="Open Drawer"
+                onClick={() => setOpen(true)}
+            />
+
+            <Drawer
+                open={open}
+                onOpenChange={open => setOpen(open)}
+                title="Drawer Title"
+                description="A short drawer description."
+                info={<>Learn more about this <a href={"#"}>here</a>.</>}
+                side="right"
+                showCloseButton={true}
+                bodyPadding={true}
+                headerSeparator={true}
+                footerSeparator={true}
+                showCloseButton={false}
+                actions={
+                    <>
+                        <Drawer.CancelButton />
+                        <Drawer.ConfirmButton />
+                    </>
+                }
+            >
+                This drawer doesn&apos;t have a close button in the top-right corner.
+            </Drawer>
+        </>
+    );
+};
+
+export default WithoutCloseButtonExample;
+` } } />
+
+### Custom Width
+
+<Canvas of={DrawerStories.CustomWidth} source={ { code: `
+import React, { useState } from "react";
+import { Drawer, Button } from "@webiny/admin-ui";
+
+const CustomWidthExample = () => {
+    const [open, setOpen] = useState(false);
+
+    return (
+        <>
+            <Button
+                variant="primary"
+                text="Open Wide Drawer"
+                onClick={() => setOpen(true)}
+            />
+
+            <Drawer
+                open={open}
+                onOpenChange={open => setOpen(open)}
+                title="Drawer Title"
+                description="A short drawer description."
+                info={<>Learn more about this <a href={"#"}>here</a>.</>}
+                side="right"
+                showCloseButton={true}
+                bodyPadding={true}
+                headerSeparator={true}
+                footerSeparator={true}
+                width={1000}
+                actions={
+                    <>
+                        <Drawer.CancelButton />
+                        <Drawer.ConfirmButton />
+                    </>
+                }
+            >
+                This drawer has a custom width of 1000px, making it wider than the default.
+            </Drawer>
+        </>
+    );
+};
+
+export default CustomWidthExample;
+` } } />
+
+### With Tabs
+
+<Canvas of={DrawerStories.WithTabs} source={ { code: `
+import React, { useState } from "react";
+import { Drawer, Button, Tabs } from "@webiny/admin-ui";
+
+const WithTabsExample = () => {
+    const [open, setOpen] = useState(false);
+
+    return (
+        <>
+            <Button
+                variant="primary"
+                text="Open Drawer with Tabs"
+                onClick={() => setOpen(true)}
+            />
+
+            <Drawer
+                open={open}
+                onOpenChange={open => setOpen(open)}
+                title="Settings"
+                description="Configure your preferences"
+                bodyPadding={false}
+                headerSeparator={false}
+                actions={
+                    <>
+                        <Drawer.CancelButton />
+                        <Drawer.ConfirmButton text="Save" />
+                    </>
+                }
+            >
+                <Tabs
+                    spacing="lg"
+                    tabs={[
+                        <Tabs.Tab
+                            key="account"
+                            value="account"
+                            trigger="Account"
+                            content="Make changes to your account here."
+                        />,
+                        <Tabs.Tab
+                            key="company"
+                            value="company"
+                            trigger="Company"
+                            content="Make changes to your company info here."
+                        />,
+                        <Tabs.Tab
+                            key="security"
+                            value="security"
+                            trigger="Security"
+                            content="Make changes to your security settings here."
+                        />,
+                        <Tabs.Tab
+                            key="development"
+                            value="development"
+                            trigger="Development"
+                            content="Make changes to your development settings here."
+                        />
+                    ]}
+                />
+            </Drawer>
+        </>
+    );
+};
+
+export default WithTabsExample;
+` } } />
+
+### With Icon
+
+<Canvas of={DrawerStories.WithIcon} source={ { code: `
+import React, { useState } from "react";
+import { Drawer, Button } from "@webiny/admin-ui";
+import { ReactComponent as DoorbellIcon } from "@webiny/icons/ring_volume.svg";
+
+const WithIconExample = () => {
+    const [open, setOpen] = useState(false);
+
+    return (
+        <>
+            <Button
+                variant="primary"
+                text="Open Drawer with Icon"
+                onClick={() => setOpen(true)}
+            />
+
+            <Drawer
+                open={open}
+                onOpenChange={open => setOpen(open)}
+                title="Drawer with Icon"
+                description="This drawer has an icon in the header."
+                icon={<Drawer.Icon icon={<DoorbellIcon />} label="Title icon" />}
+                actions={
+                    <>
+                        <Drawer.CancelButton />
+                        <Drawer.ConfirmButton />
+                    </>
+                }
+            >
+                The icon helps to visually identify the purpose of this drawer.
+            </Drawer>
+        </>
+    );
+};
+
+export default WithIconExample;
+` } } />
+
+### As Modal
+
+<Canvas of={DrawerStories.AsModal} source={ { code: `
+import React, { useState } from "react";
+import { Drawer, Button } from "@webiny/admin-ui";
+
+const AsModalExample = () => {
+    const [open, setOpen] = useState(false);
+
+    return (
+        <>
+            <Button
+                variant="primary"
+                text="Open Modal Drawer"
+                onClick={() => setOpen(true)}
+            />
+
+            <Drawer
+                open={open}
+                onOpenChange={open => setOpen(open)}
+                title="Modal Drawer"
+                description="This drawer behaves as a modal."
+                modal={true}
+                actions={
+                    <>
+                        <Drawer.CancelButton />
+                        <Drawer.ConfirmButton />
+                    </>
+                }
+            >
+                This drawer has modal={true}, which means it will show an overlay behind it
+                and prevent interaction with the content underneath.
+            </Drawer>
+        </>
+    );
+};
+
+export default AsModalExample;
+` } } />
+
+## Anatomy
+
+### Construction
+<img src="/images/storybook/drawer/anatomy.png" alt="Anatomy"/>
+
+### Header
+
+Header needs to support multiple formation options that can be independently enabled or disabled.
+
+<img src="/images/storybook/drawer/header.png" alt="Header"/>
+
+## Usage
+
+### Positioning
+
+Drawers should slide in from either the left or right side, depending on the context. The drawer should overlay the content, and clicking outside of it should close it. There also needs to be an option to use an overlay behind the drawer.
+
+<img src="/images/storybook/drawer/positioning.png" alt="Positioning"/>
diff --git a/packages/admin-ui/src/Drawer/Drawer.stories.tsx b/packages/admin-ui/src/Drawer/Drawer.stories.tsx
new file mode 100644
index 00000000000..a48df386ebe
--- /dev/null
+++ b/packages/admin-ui/src/Drawer/Drawer.stories.tsx
@@ -0,0 +1,339 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Drawer } from "./Drawer";
+import { Button } from "~/Button";
+import { DropdownMenu } from "~/DropdownMenu";
+import { Tabs } from "~/Tabs";
+import { ReactComponent as DoorbellIcon } from "@webiny/icons/ring_volume.svg";
+
+const meta: Meta<typeof Drawer> = {
+    title: "Components/Drawer",
+    component: Drawer,
+    argTypes: {}
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Drawer>;
+
+export const Default: Story = {
+    args: {
+        trigger: <Button variant="primary" text={"Open"} />,
+        title: "Drawer Title",
+        description: "A short dialog description.",
+        info: (
+            <>
+                Learn more about this <a href={"#"}>here</a>.
+            </>
+        ),
+        children: (
+            <>
+                <p className={"wby-mb-md"}>
+                    The amazing, splendid, and most useful umbrella, resistant to rain and friendly
+                    to winds, is something that deserves all admiration. Crafted with perfect
+                    textures, it bravely withstands storms and gently shades the rays of the sun. A
+                    remarkable innovation, with an ergonomically designed grip most suited to the
+                    hand, it remains stable even in the fiercest weather.
+                </p>
+                <p className={"wby-mb-md"}>
+                    Its fabric, woven from the highest quality materials, ensures that you stay dry,
+                    no matter the intensity of the rain. With a frame engineered for strength yet
+                    lightweight enough to carry with ease, this umbrella is a marvel of modern
+                    design. Not just a shield against the elements, but a companion in your everyday
+                    journey, it provides peace of mind, knowing you’re prepared for whatever the
+                    skies may bring.
+                </p>
+                <p className={"wby-mb-md"}>
+                    The sleek, stylish design complements any outfit, making it not only a practical
+                    accessory but also a fashion statement. With its smooth opening mechanism, you
+                    can effortlessly transition from a sunny day to a rainy one without missing a
+                    beat. Whether you are navigating through a busy city street or enjoying a quiet
+                    stroll in the park, this umbrella offers unmatched comfort and protection.
+                </p>
+                <p className={"wby-mb-md"}>
+                    Indeed, it is not just an umbrella — it is an experience. One that elevates your
+                    daily routine, making every step in both sun and storm feel just a little bit
+                    brighter.
+                </p>
+            </>
+        ),
+        onOpenChange: opened => {
+            console.log(`Drawer is ${opened ? "opened" : "closed"}.`);
+        },
+        actions: (
+            <>
+                <Drawer.CancelButton />
+                <Drawer.ConfirmButton />
+            </>
+        ),
+        bodyPadding: true,
+        headerSeparator: true,
+        footerSeparator: true
+    },
+    argTypes: {}
+};
+
+export const ControlledVisibility: Story = {
+    render: props => {
+        const [open, setOpen] = React.useState(false);
+
+        return (
+            <>
+                <Button variant="primary" text={"Open"} onClick={() => setOpen(true)} />
+                <Drawer
+                    {...props}
+                    open={open}
+                    onOpenChange={open => {
+                        if (!open) {
+                            setOpen(false);
+                        }
+                    }}
+                />
+            </>
+        );
+    },
+    args: {
+        ...Default.args,
+        trigger: null,
+        children: <>This drawer&apos;s visibility is controlled by the open state.</>
+    }
+};
+
+export const WithOpenCloseEventHandler: Story = {
+    args: {
+        ...Default.args,
+        onClose: () => {
+            console.log("onClose triggered");
+        },
+        onOpen: () => {
+            console.log("onOpen triggered");
+        }
+    }
+};
+
+export const WithDropdownMenu: Story = {
+    render: props => {
+        const [open, setOpen] = React.useState(false);
+
+        return (
+            <>
+                <DropdownMenu trigger={<Button variant="primary" text={"Open"} />}>
+                    <DropdownMenu.Item
+                        text={"Open Drawer"}
+                        content={"Open Drawer"}
+                        onClick={() => setOpen(true)}
+                    />
+                </DropdownMenu>
+
+                <Drawer {...props} open={open} onOpenChange={() => setOpen(false)} />
+            </>
+        );
+    },
+    args: {
+        ...Default.args,
+        trigger: null,
+        children: <>This drawer is opened from a dropdown menu item.</>
+    }
+};
+
+export const WithoutCloseButton: Story = {
+    args: {
+        ...Default.args,
+        showCloseButton: false,
+        children: <>This drawer is opened from a dropdown menu item.</>
+    }
+};
+
+export const CustomWidth: Story = {
+    args: {
+        ...Default.args,
+        width: 1000,
+        children: <>This drawer has a custom width of 1000px, making it wider than the default.</>
+    }
+};
+
+export const WithTabs: Story = {
+    args: {
+        ...Default.args,
+        bodyPadding: false,
+        headerSeparator: false,
+        children: (
+            <>
+                <Tabs
+                    spacing={"lg"}
+                    tabs={[
+                        <Tabs.Tab
+                            key="account"
+                            value="account"
+                            trigger={"Account"}
+                            content={"Make changes to your account here."}
+                        />,
+                        <Tabs.Tab
+                            key="company"
+                            value="company"
+                            trigger={"Company"}
+                            content={"Make changes to your company info here."}
+                        />,
+                        <Tabs.Tab
+                            key="security"
+                            value="security"
+                            trigger={"Security"}
+                            content={"Make changes to your security settings here."}
+                        />,
+                        <Tabs.Tab
+                            key="development"
+                            value="development"
+                            trigger={"Development"}
+                            content={"Make changes to your development settings here."}
+                        />
+                    ]}
+                />
+            </>
+        )
+    }
+};
+
+export const DropdownMenuInDrawer: Story = {
+    args: {
+        ...Default.args,
+        children: (
+            <>
+                <DropdownMenu trigger={<Button variant="primary" text={"Open"} />}>
+                    <DropdownMenu.Item content={"Billing"} />
+                    <DropdownMenu.Item content={"Settings"} />
+                    <DropdownMenu.Item content={"Keyboard shortcuts"} />
+                </DropdownMenu>
+            </>
+        )
+    }
+};
+
+export const WithIcon: Story = {
+    args: {
+        ...Default.args,
+        icon: <Drawer.Icon icon={<DoorbellIcon />} label={"Icon label..."} />,
+        children: <>The icon helps to visually identify the purpose of this drawer.</>
+    }
+};
+
+export const AsModal: Story = {
+    args: {
+        ...Default.args,
+        modal: true,
+        children: (
+            <>
+                This drawer has modal=true, which means it will show an overlay behind it and
+                prevent interaction with the content underneath.
+            </>
+        )
+    }
+};
+
+export const Documentation: Story = {
+    render: args => {
+        const [open, setOpen] = React.useState(false);
+
+        return (
+            <>
+                <Button variant="primary" text="Open Drawer" onClick={() => setOpen(true)} />
+
+                <Drawer {...args} open={open} onOpenChange={open => setOpen(open)} />
+            </>
+        );
+    },
+    args: {
+        title: "Drawer Title",
+        description: "A short drawer description.",
+        showCloseButton: true,
+        bodyPadding: true,
+        headerSeparator: true,
+        footerSeparator: true,
+        side: "right",
+        modal: false,
+        info: (
+            <>
+                Learn more about this <a href={"#"}>here</a>.
+            </>
+        ),
+        children: (
+            <>
+                <p className={"wby-mb-md, wby-mt-md"}>
+                    This is the drawer content area. You can place any content here including forms,
+                    text, images, or other components.
+                </p>
+                <p className={"wby-mb-md"}>
+                    Drawers are useful for displaying additional information or actions without
+                    navigating away from the current page.
+                </p>
+            </>
+        ),
+        actions: (
+            <>
+                <Drawer.CancelButton />
+                <Drawer.ConfirmButton />
+            </>
+        ),
+        width: undefined
+    },
+    argTypes: {
+        title: {
+            description: "Title displayed in the header",
+            control: "text"
+        },
+        description: {
+            description: "Description displayed below the title",
+            control: "text"
+        },
+        side: {
+            description: "Side from which the drawer appears",
+            control: "select",
+            options: ["left", "right"],
+            defaultValue: "right"
+        },
+        showCloseButton: {
+            description: "Show close button in the top-right corner",
+            control: "boolean",
+            defaultValue: true
+        },
+        modal: {
+            description: "Whether the drawer should behave as a modal",
+            control: "boolean",
+            defaultValue: false
+        },
+        bodyPadding: {
+            description: "Add padding to the drawer body",
+            control: "boolean",
+            defaultValue: true
+        },
+        headerSeparator: {
+            description: "Show separator below the header",
+            control: "boolean",
+            defaultValue: true
+        },
+        footerSeparator: {
+            description: "Show separator above the footer",
+            control: "boolean",
+            defaultValue: true
+        },
+        width: {
+            description:
+                'Width defines the horizontal size of the Drawer and accepts any valid CSS width value. You can pass a number (interpreted as pixels) or a string like "80%", "50vw", "auto", etc., following React.CSSProperties["width"] types.',
+            control: "none"
+        },
+        info: {
+            description:
+                "Additional info displayed below the description, please refer to the example below for details.",
+            control: "none"
+        },
+        children: {
+            description:
+                "Content of the Drawer, please refer to the 'With Dropdown Menu' and ''With Tabs' example below for details.",
+            control: "none"
+        },
+        actions: {
+            description:
+                "Actions displayed in the footer, please refer to the code example for details.",
+            control: "none"
+        }
+    }
+};
diff --git a/packages/admin-ui/src/Drawer/Drawer.tsx b/packages/admin-ui/src/Drawer/Drawer.tsx
new file mode 100644
index 00000000000..e9f9b25b9c2
--- /dev/null
+++ b/packages/admin-ui/src/Drawer/Drawer.tsx
@@ -0,0 +1,137 @@
+import * as React from "react";
+import { makeDecoratable, withStaticProps } from "~/utils";
+import { DrawerContent } from "./components/DrawerContent";
+import { DrawerFooter } from "./components/DrawerFooter";
+import { DrawerHeader } from "./components/DrawerHeader";
+import { DrawerOverlay } from "./components/DrawerOverlay";
+import { DrawerPortal } from "./components/DrawerPortal";
+import { DrawerRoot } from "./components/DrawerRoot";
+import { DrawerTrigger } from "./components/DrawerTrigger";
+import { DrawerBody } from "~/Drawer/components/DrawerBody";
+import { Icon } from "./components/Icon";
+import { ConfirmButton } from "./components/ConfirmButton";
+import { CancelButton } from "./components/CancelButton";
+
+interface DrawerProps
+    extends React.ComponentPropsWithoutRef<typeof DrawerRoot>,
+        Omit<React.ComponentPropsWithoutRef<typeof DrawerContent>, "title"> {
+    trigger?: React.ReactNode;
+    title?: React.ReactNode;
+    icon?: React.ReactElement;
+    modal?: boolean;
+    showCloseButton?: boolean;
+    bodyPadding?: boolean;
+    headerSeparator?: boolean;
+    footerSeparator?: boolean;
+    description?: React.ReactNode;
+    children: React.ReactNode;
+    actions?: React.ReactNode;
+    info?: React.ReactNode;
+    width?: React.CSSProperties["width"];
+    onClose?: () => void;
+    onOpen?: () => void;
+}
+
+const DrawerBase = (props: DrawerProps) => {
+    const { rootProps, triggerProps, contentProps, headerProps, bodyProps, footerProps } =
+        React.useMemo(() => {
+            const {
+                // Root props.
+                defaultOpen,
+                open,
+                onOpenChange: originalOnOpenChange,
+                onClose,
+                onOpen,
+
+                // We want the drawer to always allow interaction with the outside elements.
+                modal = false,
+                dir,
+
+                // Trigger props.
+                trigger,
+
+                // Header props.
+                title,
+                icon,
+                description,
+                showCloseButton,
+                headerSeparator,
+
+                // Body props.
+                children,
+                bodyPadding,
+
+                // Footer props.
+                actions,
+                info,
+                footerSeparator,
+
+                // Content props.
+                ...rest
+            } = props;
+
+            // Handles dialog open state changes, calling original and onClose / onOpen callbacks as needed
+            const onOpenChange = (open: boolean) => {
+                originalOnOpenChange && originalOnOpenChange(open);
+
+                if (onClose && !open) {
+                    onClose();
+                }
+
+                if (onOpen && open) {
+                    onOpen();
+                }
+            };
+
+            return {
+                rootProps: {
+                    defaultOpen,
+                    open,
+                    onOpenChange,
+                    modal,
+                    dir
+                },
+                triggerProps: {
+                    // Temporary fix. We need this because `ref` doesn't get passed to components
+                    // that are decorated with `makeDecoratable`. This will be fixed in the future.
+                    children: <div>{trigger}</div>
+                },
+                headerProps: {
+                    title,
+                    icon,
+                    description,
+                    showCloseButton,
+                    separator: headerSeparator
+                },
+                bodyProps: { children, bodyPadding },
+                footerProps: { info, actions, separator: footerSeparator },
+                contentProps: rest
+            };
+        }, [props]);
+
+    return (
+        <DrawerRoot {...rootProps}>
+            {triggerProps.children && <DrawerTrigger {...triggerProps} asChild />}
+            <DrawerPortal>
+                {rootProps.modal && <DrawerOverlay />}
+                <DrawerContent {...contentProps} modal={rootProps.modal}>
+                    <DrawerHeader {...headerProps} />
+                    <DrawerBody {...bodyProps} />
+                    <DrawerFooter {...footerProps} />
+                </DrawerContent>
+            </DrawerPortal>
+        </DrawerRoot>
+    );
+};
+
+DrawerBase.displayName = "Drawer";
+
+const DecoratableDrawer = makeDecoratable("Drawer", DrawerBase);
+
+const Drawer = withStaticProps(DecoratableDrawer, {
+    ConfirmButton,
+    CancelButton,
+    Icon
+});
+
+export { Drawer, type DrawerProps };
diff --git a/packages/admin-ui/src/Drawer/components/CancelButton.tsx b/packages/admin-ui/src/Drawer/components/CancelButton.tsx
new file mode 100644
index 00000000000..203d5801385
--- /dev/null
+++ b/packages/admin-ui/src/Drawer/components/CancelButton.tsx
@@ -0,0 +1,12 @@
+import * as React from "react";
+import { makeDecoratable } from "~/utils";
+import { DrawerClose } from "./DrawerClose";
+import { Button, ButtonProps } from "~/Button";
+
+const CancelButtonBase = (props: ButtonProps) => (
+    <DrawerClose asChild>
+        <Button text={"Cancel"} {...props} variant="secondary" />
+    </DrawerClose>
+);
+
+export const CancelButton = makeDecoratable("CancelButton", CancelButtonBase);
diff --git a/packages/admin-ui/src/Drawer/components/ConfirmButton.tsx b/packages/admin-ui/src/Drawer/components/ConfirmButton.tsx
new file mode 100644
index 00000000000..b3668a9a8ff
--- /dev/null
+++ b/packages/admin-ui/src/Drawer/components/ConfirmButton.tsx
@@ -0,0 +1,9 @@
+import * as React from "react";
+import { makeDecoratable } from "~/utils";
+import { Button, ButtonProps } from "~/Button";
+
+const ConfirmButtonBase = (props: ButtonProps) => (
+    <Button text={"Confirm"} {...props} variant="primary" />
+);
+
+export const ConfirmButton = makeDecoratable("ConfirmButton", ConfirmButtonBase);
diff --git a/packages/admin-ui/src/Drawer/components/DrawerBody.tsx b/packages/admin-ui/src/Drawer/components/DrawerBody.tsx
new file mode 100644
index 00000000000..6982f4de490
--- /dev/null
+++ b/packages/admin-ui/src/Drawer/components/DrawerBody.tsx
@@ -0,0 +1,17 @@
+import * as React from "react";
+import { cn } from "~/utils";
+import type { DrawerProps } from "~/Drawer";
+
+export type DrawerBodyProps = Pick<DrawerProps, "children" | "bodyPadding">;
+
+export const DrawerBody = ({ bodyPadding, children }: DrawerBodyProps) => {
+    return (
+        <div
+            className={cn("wby-h-full wby-overflow-auto", {
+                "wby-px-lg": bodyPadding !== false
+            })}
+        >
+            {children}
+        </div>
+    );
+};
diff --git a/packages/admin-ui/src/Drawer/components/DrawerClose.tsx b/packages/admin-ui/src/Drawer/components/DrawerClose.tsx
new file mode 100644
index 00000000000..1d07636a097
--- /dev/null
+++ b/packages/admin-ui/src/Drawer/components/DrawerClose.tsx
@@ -0,0 +1,3 @@
+import * as DrawerPrimitive from "@radix-ui/react-dialog";
+
+export const DrawerClose = DrawerPrimitive.Close;
diff --git a/packages/admin-ui/src/Drawer/components/DrawerContent.tsx b/packages/admin-ui/src/Drawer/components/DrawerContent.tsx
new file mode 100644
index 00000000000..0674af1d03b
--- /dev/null
+++ b/packages/admin-ui/src/Drawer/components/DrawerContent.tsx
@@ -0,0 +1,72 @@
+import * as React from "react";
+import * as DrawerPrimitive from "@radix-ui/react-dialog";
+import { cn, cva, type VariantProps } from "~/utils";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+
+export interface DrawerContentProps
+    extends React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>,
+        VariantProps<typeof drawerVariants> {
+    width?: React.CSSProperties["width"];
+    modal?: boolean;
+}
+
+const drawerVariants = cva(
+    [
+        "wby-fixed wby-z-50 wby-gap-4 wby-bg-neutral-base wby-text-md wby-text-neutral-strong focus-visible:outline-none wby-shadow-lg",
+        "wby-transition wby-ease-in-out data-[state=open]:wby-animate-in data-[state=closed]:wby-animate-out data-[state=closed]:wby-duration-300 data-[state=open]:wby-duration-500"
+    ],
+    {
+        variants: {
+            side: {
+                left: [
+                    "wby-inset-y-0 wby-left-0 wby-h-full wby-w-[400px]",
+                    "data-[state=closed]:wby-slide-out-to-left data-[state=open]:wby-slide-in-from-left"
+                ],
+                right: [
+                    "wby-inset-y-0 wby-right-0 wby-h-full wby-w-[400px]",
+                    "data-[state=closed]:wby-slide-out-to-right data-[state=open]:wby-slide-in-from-right"
+                ]
+            }
+        },
+        defaultVariants: {
+            side: "right"
+        }
+    }
+);
+
+const DrawerContent = React.forwardRef<
+    React.ElementRef<typeof DrawerPrimitive.Content>,
+    DrawerContentProps
+>(({ side, modal, width, className, style = {}, children, ...props }, ref) => {
+    // When modal is set to false, we want to prevent the user from closing the drawer by clicking outside of it.
+    // Only by clicking on "X" icon or by pressing the escape key should the drawer be closed.
+    const modalProps = React.useMemo<
+        Pick<DialogPrimitive.DialogContentProps, "onInteractOutside">
+    >(() => {
+        if (modal === false) {
+            return {
+                onInteractOutside: event => event.preventDefault()
+            };
+        }
+
+        return {};
+    }, [modal]);
+
+    return (
+        <DrawerPrimitive.Content
+            {...modalProps}
+            {...props}
+            ref={ref}
+            className={cn(drawerVariants({ side }), className)}
+            style={{ width, ...style }}
+            // TODO: An optional accessible description to be announced when the dialog is opened. At the moment we skip this.
+            aria-describedby={undefined}
+        >
+            <div className={"wby-flex wby-flex-col wby-justify-between wby-h-full"}>{children}</div>
+        </DrawerPrimitive.Content>
+    );
+});
+
+DrawerContent.displayName = DrawerPrimitive.Content.displayName;
+
+export { DrawerContent };
diff --git a/packages/admin-ui/src/Drawer/components/DrawerDescription.tsx b/packages/admin-ui/src/Drawer/components/DrawerDescription.tsx
new file mode 100644
index 00000000000..9d799dac8e9
--- /dev/null
+++ b/packages/admin-ui/src/Drawer/components/DrawerDescription.tsx
@@ -0,0 +1,14 @@
+import * as React from "react";
+import * as DrawerPrimitive from "@radix-ui/react-dialog";
+import { cn } from "~/utils";
+
+export type DrawerDescriptionProps = React.ComponentPropsWithoutRef<
+    typeof DrawerPrimitive.Description
+>;
+
+export const DrawerDescription = ({ className, ...props }: DrawerDescriptionProps) => (
+    <DrawerPrimitive.Description
+        {...props}
+        className={cn("wby-text-sm wby-text-neutral-strong wby-text-left wby-mb-sm", className)}
+    />
+);
diff --git a/packages/admin-ui/src/Drawer/components/DrawerFooter.tsx b/packages/admin-ui/src/Drawer/components/DrawerFooter.tsx
new file mode 100644
index 00000000000..d91306dc7ae
--- /dev/null
+++ b/packages/admin-ui/src/Drawer/components/DrawerFooter.tsx
@@ -0,0 +1,39 @@
+import * as React from "react";
+import { cn } from "~/utils";
+import { Separator } from "~/Separator";
+import type { DrawerProps } from "~/Drawer";
+
+export interface DrawerFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+    actions?: React.ReactNode;
+    info?: React.ReactNode;
+    separator?: DrawerProps["footerSeparator"];
+}
+
+export const DrawerFooter = ({
+    actions,
+    info,
+    className,
+    separator,
+    ...props
+}: DrawerFooterProps) => {
+    if (!actions && !info) {
+        return null;
+    }
+
+    return (
+        <>
+            {separator && <Separator />}
+            <div
+                {...props}
+                className={cn("wby-flex wby-justify-between wby-p-lg wby-pt-md-extra", className)}
+            >
+                {info && (
+                    <div className={"wby-text-sm wby-flex wby-items-center"}>
+                        <div>{info}</div>
+                    </div>
+                )}
+                {actions && <div className={"wby-flex wby-gap-x-sm wby-ml-auto"}>{actions}</div>}
+            </div>
+        </>
+    );
+};
diff --git a/packages/admin-ui/src/Drawer/components/DrawerHeader.tsx b/packages/admin-ui/src/Drawer/components/DrawerHeader.tsx
new file mode 100644
index 00000000000..17a1376375b
--- /dev/null
+++ b/packages/admin-ui/src/Drawer/components/DrawerHeader.tsx
@@ -0,0 +1,65 @@
+import * as React from "react";
+import { cn } from "~/utils";
+import { type DrawerProps } from "../Drawer";
+import { DrawerTitle } from "./DrawerTitle";
+import { DrawerDescription } from "./DrawerDescription";
+import { ReactComponent as XIcon } from "@webiny/icons/close.svg";
+import { IconButton } from "~/Button";
+import * as DrawerPrimitive from "@radix-ui/react-dialog";
+import { useMemo } from "react";
+import { Separator } from "~/Separator";
+
+export type DrawerHeaderProps = Omit<React.HTMLAttributes<HTMLDivElement>, "title"> &
+    Pick<DrawerProps, "title" | "icon" | "description" | "showCloseButton"> & {
+        separator?: DrawerProps["headerSeparator"];
+    };
+
+export const DrawerHeader = ({
+    title,
+    icon,
+    description,
+    showCloseButton,
+    separator,
+    className,
+    ...props
+}: DrawerHeaderProps) => {
+    const nothingToRender = useMemo(() => {
+        return !title && !description && !icon && !showCloseButton;
+    }, [title, description, icon, showCloseButton]);
+
+    if (nothingToRender) {
+        return null;
+    }
+
+    return (
+        <>
+            <div
+                {...props}
+                className={cn(
+                    "wby-flex wby-flex-col wby-gap-sm wby-px-lg wby-py-md wby-text-center sm:wby-text-left wby-text-neutral-primary",
+                    className
+                )}
+            >
+                <DrawerTitle className={"wby-flex wby-justify-between"}>
+                    <div className={"wby-flex wby-gap-xs"}>
+                        {icon}
+                        {title}
+                    </div>
+
+                    {showCloseButton !== false && (
+                        <DrawerPrimitive.Close asChild>
+                            <IconButton
+                                size="md"
+                                iconSize="lg"
+                                variant={"ghost"}
+                                icon={<XIcon />}
+                            />
+                        </DrawerPrimitive.Close>
+                    )}
+                </DrawerTitle>
+                {description && <DrawerDescription>{description}</DrawerDescription>}
+            </div>
+            {separator && <Separator />}
+        </>
+    );
+};
diff --git a/packages/admin-ui/src/Drawer/components/DrawerOverlay.tsx b/packages/admin-ui/src/Drawer/components/DrawerOverlay.tsx
new file mode 100644
index 00000000000..8b4b18c2932
--- /dev/null
+++ b/packages/admin-ui/src/Drawer/components/DrawerOverlay.tsx
@@ -0,0 +1,19 @@
+import * as React from "react";
+import * as DrawerPrimitive from "@radix-ui/react-dialog";
+import { cn } from "~/utils";
+
+export const DrawerOverlay = React.forwardRef<
+    React.ElementRef<typeof DrawerPrimitive.Overlay>,
+    React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+    <DrawerPrimitive.Overlay
+        ref={ref}
+        className={cn(
+            "wby-fixed wby-inset-0 wby-z-50 wby-bg-neutral-dark/50 data-[state=open]:wby-animate-in data-[state=closed]:wby-animate-out data-[state=closed]:wby-fade-out-0 data-[state=open]:wby-fade-in-0",
+            className
+        )}
+        {...props}
+    />
+));
+
+DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName;
diff --git a/packages/admin-ui/src/Drawer/components/DrawerPortal.tsx b/packages/admin-ui/src/Drawer/components/DrawerPortal.tsx
new file mode 100644
index 00000000000..3f28042725e
--- /dev/null
+++ b/packages/admin-ui/src/Drawer/components/DrawerPortal.tsx
@@ -0,0 +1,3 @@
+import * as DrawerPrimitive from "@radix-ui/react-dialog";
+
+export const DrawerPortal = DrawerPrimitive.Portal;
diff --git a/packages/admin-ui/src/Drawer/components/DrawerRoot.tsx b/packages/admin-ui/src/Drawer/components/DrawerRoot.tsx
new file mode 100644
index 00000000000..d34bb15e82a
--- /dev/null
+++ b/packages/admin-ui/src/Drawer/components/DrawerRoot.tsx
@@ -0,0 +1,3 @@
+import * as DrawerPrimitive from "@radix-ui/react-dialog";
+
+export const DrawerRoot = DrawerPrimitive.Root;
diff --git a/packages/admin-ui/src/Drawer/components/DrawerTitle.tsx b/packages/admin-ui/src/Drawer/components/DrawerTitle.tsx
new file mode 100644
index 00000000000..bf095fb0d95
--- /dev/null
+++ b/packages/admin-ui/src/Drawer/components/DrawerTitle.tsx
@@ -0,0 +1,12 @@
+import * as React from "react";
+import * as DrawerPrimitive from "@radix-ui/react-dialog";
+import { cn } from "~/utils";
+
+export type DrawerTitleProps = React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>;
+
+export const DrawerTitle = ({ className, ...props }: DrawerTitleProps) => (
+    <DrawerPrimitive.Title
+        {...props}
+        className={cn("wby-text-h4 wby-flex wby-gap-sm", className)}
+    />
+);
diff --git a/packages/admin-ui/src/Drawer/components/DrawerTrigger.tsx b/packages/admin-ui/src/Drawer/components/DrawerTrigger.tsx
new file mode 100644
index 00000000000..e86fe9f94e7
--- /dev/null
+++ b/packages/admin-ui/src/Drawer/components/DrawerTrigger.tsx
@@ -0,0 +1,3 @@
+import * as DrawerPrimitive from "@radix-ui/react-dialog";
+
+export const DrawerTrigger = DrawerPrimitive.Trigger;
diff --git a/packages/admin-ui/src/Drawer/components/Icon.tsx b/packages/admin-ui/src/Drawer/components/Icon.tsx
new file mode 100644
index 00000000000..cc500ff1f9e
--- /dev/null
+++ b/packages/admin-ui/src/Drawer/components/Icon.tsx
@@ -0,0 +1,18 @@
+import * as React from "react";
+import { cn, makeDecoratable } from "~/utils";
+import { Icon as IconComponent, IconProps as IconComponentProps } from "~/Icon";
+
+type IconProps = IconComponentProps;
+
+const IconBase = ({ className, ...props }: IconProps) => {
+    return (
+        <IconComponent
+            size={"lg"}
+            color={"neutral-strong"}
+            {...props}
+            className={cn("wby-pt-xs", className)}
+        />
+    );
+};
+
+export const Icon = makeDecoratable("Icon", IconBase);
diff --git a/packages/admin-ui/src/Drawer/index.ts b/packages/admin-ui/src/Drawer/index.ts
new file mode 100644
index 00000000000..2ce290b60cb
--- /dev/null
+++ b/packages/admin-ui/src/Drawer/index.ts
@@ -0,0 +1 @@
+export * from "./Drawer";
diff --git a/packages/admin-ui/src/DropdownMenu/DropdownMenu.mdx b/packages/admin-ui/src/DropdownMenu/DropdownMenu.mdx
new file mode 100644
index 00000000000..e74de3838c8
--- /dev/null
+++ b/packages/admin-ui/src/DropdownMenu/DropdownMenu.mdx
@@ -0,0 +1,430 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+
+import * as DropdownMenuStories from './DropdownMenu.stories';
+
+<Meta of={DropdownMenuStories} />
+
+# Dropdown Menu
+
+The Dropdown Menu component provides a way to display a menu of options that appears when a user clicks on a trigger element. It's designed to present related actions or navigation options in a consistent and accessible format.
+
+## Usage
+
+<Canvas of={DropdownMenuStories.Documentation} source={{ code: `
+import React from "react";
+import { DropdownMenu, Button } from "@webiny/admin-ui";
+import { ReactComponent as User } from "@webiny/icons/person.svg";
+import { ReactComponent as Settings } from "@webiny/icons/settings.svg";
+import { ReactComponent as CreditCard } from "@webiny/icons/credit_score.svg";
+import { ReactComponent as Keyboard } from "@webiny/icons/keyboard.svg";
+import { ReactComponent as Users } from "@webiny/icons/people.svg";
+import { ReactComponent as UserPlus } from "@webiny/icons/person_add.svg";
+import { ReactComponent as Plus } from "@webiny/icons/add.svg";
+import { ReactComponent as LifeBuoy } from "@webiny/icons/safety_check.svg";
+import { ReactComponent as Cloud } from "@webiny/icons/cloud.svg";
+import { ReactComponent as LogOut } from "@webiny/icons/logout.svg";
+import { ReactComponent as LinkIcon } from "@webiny/icons/link.svg";
+
+const { Label, Separator, Group, Item, Link } = DropdownMenu;
+
+const DropdownMenuExample = () => {
+  return (
+    <DropdownMenu trigger={<Button variant="primary" text={"Open"} />}>
+      <Label text={"My Account"} />
+      <Item icon={<Item.Icon label={"Profile"} element={<User />} />} text={"Profile"} />
+      <Group>
+        <Item
+          icon={<Item.Icon element={<CreditCard />} label={"Billing"} />}
+          text={"Billing"}
+        />
+        <Item
+          icon={<Item.Icon element={<Settings />} label={"Settings"} />}
+          text={"Settings"}
+        />
+        <Item
+          icon={<Item.Icon element={<Keyboard />} label={"Keyboard shortcuts"} />}
+          text={"Keyboard shortcuts"}
+        />
+      </Group>
+      <Separator />
+      <Group>
+        <Item icon={<Item.Icon element={<Users />} label={"Team"} />} text={"Team"} />
+        <Item
+          icon={<Item.Icon element={<UserPlus />} label={"Invite users"} />}
+          text={"Invite users"}
+        />
+        <Item
+          icon={<Item.Icon label={"New Team"} element={<Plus />} />}
+          text={"New Team"}
+        />
+      </Group>
+      <Separator />
+      <Item
+        icon={<Item.Icon label={"Support"} element={<LifeBuoy />} />}
+        text={"Support"}
+      />
+      <Item
+        icon={<Item.Icon label={"API"} element={<Cloud />} />}
+        text={"API"}
+        disabled
+      />
+      <Separator />
+      <Item
+        icon={<Item.Icon label={"Log out"} element={<LogOut />} />}
+        text={"Log out"}
+      />
+      <Separator />
+      <Label text={"Links"} />
+      <Link
+        text={"Link 1"}
+        to={"#link-1"}
+        icon={<Link.Icon label="Link 1" element={<LinkIcon />} />}
+      />
+      <Link
+        text={"Link 2"}
+        to={"#link-2"}
+        icon={<Link.Icon label="Link 2" element={<LinkIcon />} />}
+      />
+      <Link
+        text={"Link 3"}
+        to={"#link-3"}
+        icon={<Link.Icon label="Link 3" element={<LinkIcon />} />}
+      />
+    </DropdownMenu>
+  );
+};
+
+export default DropdownMenuExample;
+
+` }}
+  additionalActions={[
+    {
+      title: 'Open in GitHub',
+      onClick: () => {
+        window.open(
+          'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/DropdownMenu/DropdownMenu.tsx',
+          '_blank'
+        );
+      },
+    }
+  ]}
+/>
+
+<Controls of={DropdownMenuStories.Documentation} />
+
+```tsx
+import React from "react";
+import { DropdownMenu, Button } from "@webiny/admin-ui";
+import { ReactComponent as User } from "@webiny/icons/person.svg";
+import { ReactComponent as Settings } from "@webiny/icons/settings.svg";
+import { ReactComponent as CreditCard } from "@webiny/icons/credit_score.svg";
+import { ReactComponent as Keyboard } from "@webiny/icons/keyboard.svg";
+import { ReactComponent as Users } from "@webiny/icons/people.svg";
+import { ReactComponent as UserPlus } from "@webiny/icons/person_add.svg";
+import { ReactComponent as Plus } from "@webiny/icons/add.svg";
+import { ReactComponent as LifeBuoy } from "@webiny/icons/safety_check.svg";
+import { ReactComponent as Cloud } from "@webiny/icons/cloud.svg";
+import { ReactComponent as LogOut } from "@webiny/icons/logout.svg";
+import { ReactComponent as LinkIcon } from "@webiny/icons/link.svg";
+
+const { Label, Separator, Group, Item, Link } = DropdownMenu;
+
+const DropdownMenuExample = () => {
+  return (
+    <DropdownMenu trigger={<Button variant="primary" text={"Open"} />}>
+      <Label text={"My Account"} />
+      <Item icon={<Item.Icon label={"Profile"} element={<User />} />} text={"Profile"} />
+      <Group>
+        <Item
+          icon={<Item.Icon element={<CreditCard />} label={"Billing"} />}
+          text={"Billing"}
+        />
+        <Item
+          icon={<Item.Icon element={<Settings />} label={"Settings"} />}
+          text={"Settings"}
+        />
+        <Item
+          icon={<Item.Icon element={<Keyboard />} label={"Keyboard shortcuts"} />}
+          text={"Keyboard shortcuts"}
+        />
+      </Group>
+      <Separator />
+      <Group>
+        <Item icon={<Item.Icon element={<Users />} label={"Team"} />} text={"Team"} />
+        <Item
+          icon={<Item.Icon element={<UserPlus />} label={"Invite users"} />}
+          text={"Invite users"}
+        />
+        <Item
+          icon={<Item.Icon label={"New Team"} element={<Plus />} />}
+          text={"New Team"}
+        />
+      </Group>
+      <Separator />
+      <Item
+        icon={<Item.Icon label={"Support"} element={<LifeBuoy />} />}
+        text={"Support"}
+      />
+      <Item
+        icon={<Item.Icon label={"API"} element={<Cloud />} />}
+        text={"API"}
+        disabled
+      />
+      <Separator />
+      <Item
+        icon={<Item.Icon label={"Log out"} element={<LogOut />} />}
+        text={"Log out"}
+      />
+      <Separator />
+      <Label text={"Links"} />
+      <Link
+        text={"Link 1"}
+        to={"#link-1"}
+        icon={<Link.Icon label="Link 1" element={<LinkIcon />} />}
+      />
+      <Link
+        text={"Link 2"}
+        to={"#link-2"}
+        icon={<Link.Icon label="Link 2" element={<LinkIcon />} />}
+      />
+      <Link
+        text={"Link 3"}
+        to={"#link-3"}
+        icon={<Link.Icon label="Link 3" element={<LinkIcon />} />}
+      />
+    </DropdownMenu>
+  );
+};
+
+export default DropdownMenuExample;
+```
+
+## Examples
+
+### Simple Menu with Icons
+
+<Canvas of={DropdownMenuStories.SimpleMenuWithIcons} source={{ code: `
+import React from "react";
+import { DropdownMenu, Button } from "@webiny/admin-ui";
+import { ReactComponent as CreditCard } from "@webiny/icons/credit_score.svg";
+import { ReactComponent as Settings } from "@webiny/icons/settings.svg";
+import { ReactComponent as Keyboard } from "@webiny/icons/keyboard.svg";
+
+const { Item } = DropdownMenu;
+
+const SimpleMenuWithIconsExample = () => {
+  return (
+    <DropdownMenu trigger={<Button variant="primary" text={"Open"} />}>
+      <Item
+        icon={<Item.Icon label={"Billing"} element={<CreditCard />} />}
+        text={"Billing"}
+      />
+      <Item
+        icon={<Item.Icon label={"Settings"} element={<Settings />} />}
+        text={"Settings"}
+      />
+      <Item
+        icon={<Item.Icon label={"Keyboard shortcuts"} element={<Keyboard />} />}
+        text={"Keyboard shortcuts"}
+      />
+    </DropdownMenu>
+  );
+};
+
+export default SimpleMenuWithIconsExample;
+` }} />
+
+### With Sub Menus
+
+<Canvas of={DropdownMenuStories.WithSubMenus} source={{ code: `
+import React from "react";
+import { DropdownMenu, Button } from "@webiny/admin-ui";
+import { ReactComponent as User } from "@webiny/icons/person.svg";
+import { ReactComponent as Settings } from "@webiny/icons/settings.svg";
+import { ReactComponent as CreditCard } from "@webiny/icons/credit_score.svg";
+import { ReactComponent as Keyboard } from "@webiny/icons/keyboard.svg";
+import { ReactComponent as Users } from "@webiny/icons/people.svg";
+import { ReactComponent as UserPlus } from "@webiny/icons/person_add.svg";
+import { ReactComponent as Plus } from "@webiny/icons/add.svg";
+import { ReactComponent as LifeBuoy } from "@webiny/icons/safety_check.svg";
+import { ReactComponent as Cloud } from "@webiny/icons/cloud.svg";
+import { ReactComponent as LogOut } from "@webiny/icons/logout.svg";
+import { ReactComponent as Mail } from "@webiny/icons/mail.svg";
+import { ReactComponent as MessageSquare } from "@webiny/icons/chat_bubble.svg";
+import { ReactComponent as PlusCircle } from "@webiny/icons/add_circle.svg";
+
+const { Label, Separator, Group, Item } = DropdownMenu;
+
+const WithSubMenusExample = () => {
+  return (
+    <DropdownMenu trigger={<Button variant="primary" text={"Open"} />}>
+      <Label text={"My Account"} />
+      <Item icon={<Item.Icon element={<User />} label={"Profile"} />} text={"Profile"} />
+      <Group>
+        <Item
+          icon={<Item.Icon label={"Billing"} element={<CreditCard />} />}
+          text={"Billing"}
+        />
+        <Item
+          icon={<Item.Icon label={"Settings"} element={<Settings />} />}
+          text={"Settings"}
+        />
+        <Item
+          icon={<Item.Icon label={"Keyboard shortcuts"} element={<Keyboard />} />}
+          text={"Keyboard shortcuts"}
+        />
+      </Group>
+      <Separator />
+      <Group>
+        <Item icon={<Item.Icon label={"Team"} element={<Users />} />} text={"Team"} />
+        <Item
+          icon={<Item.Icon label={"Invite user"} element={<UserPlus />} />}
+          text={"Invite users"}
+        >
+          <Item
+            icon={<Item.Icon label={"Email"} element={<Mail />} />}
+            text={"Email"}
+          />
+          <Item
+            icon={<Item.Icon label={"Message"} element={<MessageSquare />} />}
+            text={"Message"}
+          />
+          <Separator />
+          <Item
+            icon={<Item.Icon label={"More..."} element={<PlusCircle />} />}
+            text={"More..."}
+          >
+            <Item
+              icon={<Item.Icon label={"Email"} element={<Mail />} />}
+              text={"Email"}
+            />
+            <Item
+              icon={<Item.Icon label={"Message"} element={<MessageSquare />} />}
+              text={"Message"}
+            />
+            <Separator />
+            <Item
+              icon={<Item.Icon label={"More..."} element={<PlusCircle />} />}
+              text={"More..."}
+            />
+          </Item>
+        </Item>
+        <Item
+          icon={<Item.Icon label={"New Team"} element={<Plus />} />}
+          text={"New Team"}
+        />
+      </Group>
+      <Separator />
+      <Item
+        icon={<Item.Icon label={"Support"} element={<LifeBuoy />} />}
+        text={"Support"}
+      />
+      <Item
+        icon={<Item.Icon label={"API"} element={<Cloud />} />}
+        text={"API"}
+        disabled
+      />
+      <Separator />
+      <Item
+        icon={<Item.Icon label={"Log out"} element={<LogOut />} />}
+        text={"Log out"}
+      />
+    </DropdownMenu>
+  );
+};
+
+export default WithSubMenusExample;
+` }} />
+
+### With Checkbox Items
+
+<Canvas of={DropdownMenuStories.WithCheckboxItems} source={{ code: `
+import React from "react";
+import { DropdownMenu, Button, Text } from "@webiny/admin-ui";
+
+const TARGET_LEVELS = [
+  {
+    id: "viewer",
+    label: "Viewer",
+    description: "Can view content, but not modify it"
+  },
+  {
+    id: "editor",
+    label: "Editor",
+    description: "Can view and modify content"
+  },
+  {
+    id: "owner",
+    label: "Owner",
+    description: "Can edit and manage content permissions"
+  }
+];
+
+const WithCheckboxItemsExample = () => {
+  return (
+    <DropdownMenu trigger={<Button variant="primary" text={"Open"} />}>
+      {TARGET_LEVELS.map(level => (
+        <DropdownMenu.CheckboxItem
+          key={level.id}
+          checked={level.id === "viewer"}
+          text={
+            <div>
+              <Text as={"div"}>{level.label}</Text>
+              <Text as={"div"} size={"sm"} className={"wby-text-neutral-strong"}>
+                {level.description}
+              </Text>
+            </div>
+          }
+          onClick={() => {
+            console.log("Selected level:", level.id);
+          }}
+        />
+      ))}
+      <DropdownMenu.Separator />
+      <DropdownMenu.Item text={"Remove access"} />
+    </DropdownMenu>
+  );
+};
+
+export default WithCheckboxItemsExample;
+` }} />
+
+### With Open Change Handler
+With Open Change Handler, you can listen to the menu's open state changes.
+For this you can use the `onOpenChange` prop.
+
+<Canvas of={DropdownMenuStories.WithOnOpenChange} source={{ code: `
+import React from "react";
+import { DropdownMenu, Button } from "@webiny/admin-ui";
+import { ReactComponent as CreditCard } from "@webiny/icons/credit_score.svg";
+import { ReactComponent as Settings } from "@webiny/icons/settings.svg";
+import { ReactComponent as Keyboard } from "@webiny/icons/keyboard.svg";
+
+const { Item } = DropdownMenu;
+
+const WithOnOpenChangeExample = () => {
+  return (
+    <DropdownMenu
+      trigger={<Button variant="primary" text={"Open"} />}
+      onOpenChange={opened => {
+        console.log("On Open Change");
+      }}
+    >
+      <Item
+        icon={<Item.Icon element={<CreditCard />} label={"Billing"} />}
+        text={"Billing"}
+      />
+      <Item
+        icon={<Item.Icon element={<Settings />} label={"Settings"} />}
+        text={"Settings"}
+      />
+      <Item
+        icon={<Item.Icon element={<Keyboard />} label={"Keyboard shortcuts"} />}
+        text={"Keyboard shortcuts"}
+      />
+    </DropdownMenu>
+  );
+};
+
+export default WithOnOpenChangeExample;
+` }} />
diff --git a/packages/admin-ui/src/DropdownMenu/DropdownMenu.stories.tsx b/packages/admin-ui/src/DropdownMenu/DropdownMenu.stories.tsx
new file mode 100644
index 00000000000..fcbf4d21e85
--- /dev/null
+++ b/packages/admin-ui/src/DropdownMenu/DropdownMenu.stories.tsx
@@ -0,0 +1,390 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { DropdownMenu } from "./DropdownMenu";
+import { Button } from "~/Button";
+import { ReactComponent as Cloud } from "@webiny/icons/cloud.svg";
+import { ReactComponent as LogOut } from "@webiny/icons/logout.svg";
+import { ReactComponent as LifeBuoy } from "@webiny/icons/safety_check.svg";
+import { ReactComponent as CreditCard } from "@webiny/icons/credit_score.svg";
+import { ReactComponent as Plus } from "@webiny/icons/add.svg";
+import { ReactComponent as PlusCircle } from "@webiny/icons/add_circle.svg";
+import { ReactComponent as Settings } from "@webiny/icons/settings.svg";
+import { ReactComponent as Users } from "@webiny/icons/people.svg";
+import { ReactComponent as UserPlus } from "@webiny/icons/person_add.svg";
+import { ReactComponent as User } from "@webiny/icons/person.svg";
+import { ReactComponent as Keyboard } from "@webiny/icons/keyboard.svg";
+import { ReactComponent as Mail } from "@webiny/icons/mail.svg";
+import { ReactComponent as MessageSquare } from "@webiny/icons/chat_bubble.svg";
+import { ReactComponent as LinkIcon } from "@webiny/icons/link.svg";
+import { Text } from "~/Text";
+
+const meta: Meta<typeof DropdownMenu> = {
+    title: "Components/Dropdown Menu",
+    component: DropdownMenu,
+    argTypes: {}
+};
+
+export default meta;
+
+type Story = StoryObj<typeof DropdownMenu>;
+
+const { Label, Separator, Group, Item, Link, CheckboxItem } = DropdownMenu;
+
+export const Default: Story = {
+    args: {
+        trigger: <Button variant="primary" text={"Open"} />,
+        children: (
+            <>
+                <Label text={"My Account"} />
+                <Item icon={<Item.Icon label={"Profile"} element={<User />} />} text={"Profile"} />
+                <Group>
+                    <Item
+                        icon={<Item.Icon element={<CreditCard />} label={"Billing"} />}
+                        text={"Billing"}
+                    />
+                    <Item
+                        icon={<Item.Icon element={<Settings />} label={"Settings"} />}
+                        text={"Settings"}
+                    />
+                    <Item
+                        icon={<Item.Icon element={<Keyboard />} label={"Keyboard shortcuts"} />}
+                        text={"Keyboard shortcuts"}
+                    />
+                </Group>
+                <Separator />
+                <Group>
+                    <Item icon={<Item.Icon element={<Users />} label={"Team"} />} text={"Team"} />
+                    <Item
+                        icon={<Item.Icon element={<UserPlus />} label={"Invite users"} />}
+                        text={"Invite users"}
+                    >
+                        <Item
+                            icon={<Item.Icon element={<Mail />} label={"Email"} />}
+                            text={"Email"}
+                        />
+                        <Item
+                            icon={<Item.Icon element={<MessageSquare />} label={"Message"} />}
+                            text={"Message"}
+                        />
+                        <Separator />
+                        <Item
+                            icon={<Item.Icon label={"More..."} element={<PlusCircle />} />}
+                            text={"More..."}
+                        />
+                    </Item>
+                    <Item
+                        icon={<Item.Icon label={"New Team"} element={<Plus />} />}
+                        text={"New Team"}
+                    />
+                </Group>
+                <Separator />
+                <Item
+                    icon={<Item.Icon label={"Support"} element={<LifeBuoy />} />}
+                    text={"Support"}
+                />
+                <Item
+                    icon={<Item.Icon label={"API"} element={<Cloud />} />}
+                    text={"API"}
+                    disabled
+                />
+                <Separator />
+                <Item
+                    icon={<Item.Icon label={"Log out"} element={<LogOut />} />}
+                    text={"Log out"}
+                />
+                <Separator />
+                <Label text={"Links"} />
+                <Link
+                    text={"Link 1"}
+                    to={"#link-1"}
+                    icon={<Link.Icon label="Link 1" element={<LinkIcon />} />}
+                />
+                <Link
+                    text={"Link 2"}
+                    to={"#link-2"}
+                    icon={<Link.Icon label="Link 2" element={<LinkIcon />} />}
+                />
+                <Link
+                    text={"Link 3"}
+                    to={"#link-3"}
+                    icon={<Link.Icon label="Link 3" element={<LinkIcon />} />}
+                />
+            </>
+        )
+    },
+    argTypes: {}
+};
+
+export const SimpleMenuWithIcons: Story = {
+    args: {
+        trigger: <Button variant="primary" text={"Open"} />,
+        children: (
+            <>
+                <Item
+                    icon={<Item.Icon label={"Billing"} element={<CreditCard />} />}
+                    text={"Billing"}
+                />
+                <Item
+                    icon={<Item.Icon label={"Settings"} element={<Settings />} />}
+                    text={"Settings"}
+                />
+                <Item
+                    icon={<Item.Icon label={"Keyboard shortcuts"} element={<Keyboard />} />}
+                    text={"Keyboard shortcuts"}
+                />
+            </>
+        )
+    },
+    argTypes: {}
+};
+
+export const WithSubMenus: Story = {
+    args: {
+        trigger: <Button variant="primary" text={"Open"} />,
+        children: (
+            <>
+                <Label text={"My Account"} />
+                <Item icon={<Item.Icon element={<User />} label={"Profile"} />} text={"Profile"} />
+                <Group>
+                    <Item
+                        icon={<Item.Icon label={"Billing"} element={<CreditCard />} />}
+                        text={"Billing"}
+                    />
+                    <Item
+                        icon={<Item.Icon label={"Settings"} element={<Settings />} />}
+                        text={"Settings"}
+                    />
+                    <Item
+                        icon={<Item.Icon label={"Keyboard shortcuts"} element={<Keyboard />} />}
+                        text={"Keyboard shortcuts"}
+                    />
+                </Group>
+                <Separator />
+                <Group>
+                    <Item icon={<Item.Icon label={"Team"} element={<Users />} />} text={"Team"} />
+                    <Item
+                        icon={<Item.Icon label={"Invite user"} element={<UserPlus />} />}
+                        text={"Invite users"}
+                    >
+                        <Item
+                            icon={<Item.Icon label={"Email"} element={<Mail />} />}
+                            text={"Email"}
+                        />
+                        <Item
+                            icon={<Item.Icon label={"Message"} element={<MessageSquare />} />}
+                            text={"Message"}
+                        />
+                        <Separator />
+                        <Item
+                            icon={<Item.Icon label={"More..."} element={<PlusCircle />} />}
+                            text={"More..."}
+                        >
+                            <Item
+                                icon={<Item.Icon label={"Email"} element={<Mail />} />}
+                                text={"Email"}
+                            />
+                            <Item
+                                icon={<Item.Icon label={"Message"} element={<MessageSquare />} />}
+                                text={"Message"}
+                            />
+                            <Separator />
+                            <Item
+                                icon={<Item.Icon label={"More..."} element={<PlusCircle />} />}
+                                text={"More..."}
+                            />
+                        </Item>
+                    </Item>
+                    <Item
+                        icon={<Item.Icon label={"New Team"} element={<Plus />} />}
+                        text={"New Team"}
+                    />
+                </Group>
+                <Separator />
+                <Item
+                    icon={<Item.Icon label={"Support"} element={<LifeBuoy />} />}
+                    text={"Support"}
+                />
+                <Item
+                    icon={<Item.Icon label={"API"} element={<Cloud />} />}
+                    text={"API"}
+                    disabled
+                />
+                <Separator />
+                <Item
+                    icon={<Item.Icon label={"Log out"} element={<LogOut />} />}
+                    text={"Log out"}
+                />
+            </>
+        )
+    },
+    argTypes: {}
+};
+
+const TARGET_LEVELS = [
+    {
+        id: "viewer",
+        label: "Viewer",
+        description: "Can view content, but not modify it"
+    },
+    {
+        id: "editor",
+        label: "Editor",
+        description: "Can view and modify content"
+    },
+    {
+        id: "owner",
+        label: "Owner",
+        description: "Can edit and manage content permissions"
+    }
+];
+
+export const WithCheckboxItems: Story = {
+    args: {
+        trigger: <Button variant="primary" text={"Open"} />,
+        children: (
+            <>
+                {TARGET_LEVELS.map(level => (
+                    <CheckboxItem
+                        key={level.id}
+                        checked={level.id === "viewer"}
+                        text={
+                            <div>
+                                <Text as={"div"}>{level.label}</Text>
+                                <Text as={"div"} size={"sm"} className={"wby-text-neutral-strong"}>
+                                    {level.description}
+                                </Text>
+                            </div>
+                        }
+                        onClick={() => {
+                            console.log("Selected level:", level.id);
+                        }}
+                    />
+                ))}
+                <DropdownMenu.Separator />
+                <DropdownMenu.Item text={"Remove access"} />
+            </>
+        )
+    },
+    argTypes: {}
+};
+
+export const WithOnOpenChange: Story = {
+    args: {
+        trigger: <Button variant="primary" text={"Open"} />,
+        onOpenChange: opened => {
+            console.log(`Menu is ${opened ? "opened" : "closed"}.`);
+        },
+        children: (
+            <>
+                <Item
+                    icon={<Item.Icon element={<CreditCard />} label={"Billing"} />}
+                    text={"Billing"}
+                />
+                <Item
+                    icon={<Item.Icon element={<Settings />} label={"Settings"} />}
+                    text={"Settings"}
+                />
+                <Item
+                    icon={<Item.Icon element={<Keyboard />} label={"Keyboard shortcuts"} />}
+                    text={"Keyboard shortcuts"}
+                />
+            </>
+        )
+    },
+    argTypes: {}
+};
+
+export const Documentation: Story = {
+    args: {
+        trigger: <Button variant="primary" text={"Open"} />,
+        children: (
+            <>
+                <Label text={"My Account"} />
+                <Item icon={<Item.Icon label={"Profile"} element={<User />} />} text={"Profile"} />
+                <Group>
+                    <Item
+                        icon={<Item.Icon element={<CreditCard />} label={"Billing"} />}
+                        text={"Billing"}
+                    />
+                    <Item
+                        icon={<Item.Icon element={<Settings />} label={"Settings"} />}
+                        text={"Settings"}
+                    />
+                    <Item
+                        icon={<Item.Icon element={<Keyboard />} label={"Keyboard shortcuts"} />}
+                        text={"Keyboard shortcuts"}
+                    />
+                </Group>
+                <Separator />
+                <Group>
+                    <Item icon={<Item.Icon element={<Users />} label={"Team"} />} text={"Team"} />
+                    <Item
+                        icon={<Item.Icon element={<UserPlus />} label={"Invite users"} />}
+                        text={"Invite users"}
+                    >
+                        <Item
+                            icon={<Item.Icon element={<Mail />} label={"Email"} />}
+                            text={"Email"}
+                        />
+                        <Item
+                            icon={<Item.Icon element={<MessageSquare />} label={"Message"} />}
+                            text={"Message"}
+                        />
+                        <Separator />
+                        <Item
+                            icon={<Item.Icon label={"More..."} element={<PlusCircle />} />}
+                            text={"More..."}
+                        />
+                    </Item>
+                    <Item
+                        icon={<Item.Icon label={"New Team"} element={<Plus />} />}
+                        text={"New Team"}
+                    />
+                </Group>
+                <Separator />
+                <Item
+                    icon={<Item.Icon label={"Support"} element={<LifeBuoy />} />}
+                    text={"Support"}
+                />
+                <Item
+                    icon={<Item.Icon label={"API"} element={<Cloud />} />}
+                    text={"API"}
+                    disabled
+                />
+                <Separator />
+                <Item
+                    icon={<Item.Icon label={"Log out"} element={<LogOut />} />}
+                    text={"Log out"}
+                />
+                <Separator />
+                <Label text={"Links"} />
+                <Link
+                    text={"Link 1"}
+                    to={"#link-1"}
+                    icon={<Link.Icon label="Link 1" element={<LinkIcon />} />}
+                />
+                <Link
+                    text={"Link 2"}
+                    to={"#link-2"}
+                    icon={<Link.Icon label="Link 2" element={<LinkIcon />} />}
+                />
+                <Link
+                    text={"Link 3"}
+                    to={"#link-3"}
+                    icon={<Link.Icon label="Link 3" element={<LinkIcon />} />}
+                />
+            </>
+        )
+    },
+    argTypes: {
+        trigger: {
+            description:
+                "The trigger element that opens the menu. Please refer to the example code for details.",
+            control: "none"
+        },
+        children: {
+            description: "The content of the menu. Please refer to the example code for details.",
+            control: "none"
+        }
+    }
+};
diff --git a/packages/admin-ui/src/DropdownMenu/DropdownMenu.tsx b/packages/admin-ui/src/DropdownMenu/DropdownMenu.tsx
new file mode 100644
index 00000000000..f004daa992d
--- /dev/null
+++ b/packages/admin-ui/src/DropdownMenu/DropdownMenu.tsx
@@ -0,0 +1,82 @@
+import * as React from "react";
+import { makeDecoratable, withStaticProps } from "~/utils";
+import { DropdownMenuRoot } from "./components/DropdownMenuRoot";
+import { DropdownMenuTrigger } from "./components/DropdownMenuTrigger";
+import { DropdownMenuContent } from "./components/DropdownMenuContent";
+import { DropdownMenuSeparator } from "./components/DropdownMenuSeparator";
+import { DropdownMenuItem, type DropdownMenuItemProps } from "./components/DropdownMenuItem";
+import { DropdownMenuLink, type DropdownMenuLinkProps } from "./components/DropdownMenuLink";
+import { DropdownMenuCheckboxItem } from "./components/DropdownMenuCheckboxItem";
+import { DropdownMenuLabel } from "./components/DropdownMenuLabel";
+import { DropdownMenuGroup } from "./components/DropdownMenuGroup";
+import { DropdownMenuPortal } from "./components/DropdownMenuPortal";
+
+interface DropdownMenuProps
+    extends React.ComponentPropsWithoutRef<typeof DropdownMenuRoot>,
+        React.ComponentPropsWithoutRef<typeof DropdownMenuContent> {
+    trigger?: React.ReactNode;
+    children: React.ReactNode;
+}
+
+const DropdownMenuBase = React.forwardRef<
+    React.ElementRef<typeof DropdownMenuRoot>,
+    DropdownMenuProps
+>((props, ref) => {
+    const { rootProps, triggerProps, contentProps } = React.useMemo(() => {
+        const {
+            // Root props.
+            defaultOpen,
+            open,
+            onOpenChange,
+
+            dir,
+
+            // Trigger props.
+            trigger,
+
+            // Content props.
+            ...rest
+        } = props;
+
+        return {
+            rootProps: {
+                defaultOpen,
+                open,
+                onOpenChange,
+                dir
+            },
+            triggerProps: {
+                // Temporary fix. We need this because `ref` doesn't get passed to components
+                // that are decorated with `makeDecoratable`. This will be fixed in the future.
+                children: (
+                    <div className={"wby-inline-block wby-text-0 wby-leading-none"}>{trigger}</div>
+                )
+            },
+            contentProps: rest
+        };
+    }, [props]);
+
+    return (
+        <DropdownMenuRoot {...rootProps}>
+            {triggerProps.children && <DropdownMenuTrigger {...triggerProps} asChild />}
+            <DropdownMenuPortal>
+                <DropdownMenuContent {...contentProps} ref={ref} />
+            </DropdownMenuPortal>
+        </DropdownMenuRoot>
+    );
+});
+
+DropdownMenuBase.displayName = "DropdownMenu";
+
+const DecoratableDropdownMenu = makeDecoratable("DropdownMenu", DropdownMenuBase);
+
+const DropdownMenu = withStaticProps(DecoratableDropdownMenu, {
+    Separator: DropdownMenuSeparator,
+    Label: DropdownMenuLabel,
+    Group: DropdownMenuGroup,
+    Item: DropdownMenuItem,
+    Link: DropdownMenuLink,
+    CheckboxItem: DropdownMenuCheckboxItem
+});
+
+export { DropdownMenu, DropdownMenuItemProps, DropdownMenuLinkProps };
diff --git a/packages/admin-ui/src/DropdownMenu/components/DropdownMenuCheckboxItem.tsx b/packages/admin-ui/src/DropdownMenu/components/DropdownMenuCheckboxItem.tsx
new file mode 100644
index 00000000000..e4627d0b4fe
--- /dev/null
+++ b/packages/admin-ui/src/DropdownMenu/components/DropdownMenuCheckboxItem.tsx
@@ -0,0 +1,46 @@
+import React from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { cn, makeDecoratable } from "~/utils";
+import { ReactComponent as Check } from "@webiny/icons/check.svg";
+
+export interface DropdownMenuItemProps
+    extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem> {
+    text?: React.ReactNode;
+}
+
+const DropdownMenuCheckboxItemBase = React.forwardRef<
+    React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+    DropdownMenuItemProps
+>(({ className, text, checked, ...props }, ref) => (
+    <DropdownMenuPrimitive.CheckboxItem
+        ref={ref}
+        className={cn(
+            "wby-group wby-relative wby-cursor-default wby-select-none wby-items-center wby-rounded-sm wby-px-xs-plus wby-outline-none wby-transition-colors",
+            "[&_svg]:wby-fill-neutral-xstrong [&_svg]:wby-pointer-events-none [&_svg]:wby-size-md [&_svg]:wby-shrink-0",
+            "data-[disabled]:wby-pointer-events-none data-[disabled]:wby-text-neutral-disabled",
+            className
+        )}
+        checked={checked}
+        {...props}
+    >
+        <div
+            className={cn(
+                "wby-flex wby-min-size-md wby-px-sm wby-py-xs-plus wby-gap-sm-extra wby-items-center wby-text-md wby-rounded-sm group-focus:wby-bg-neutral-dimmed wby-transition-colors",
+                { "[&_svg]:wby-fill-neutral-disabled": props.disabled }
+            )}
+        >
+            <DropdownMenuPrimitive.ItemIndicator>
+                <Check />
+            </DropdownMenuPrimitive.ItemIndicator>
+            {!checked && <svg aria-hidden="true" />}
+            <span>{text}</span>
+        </div>
+    </DropdownMenuPrimitive.CheckboxItem>
+));
+
+DropdownMenuCheckboxItemBase.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
+
+export const DropdownMenuCheckboxItem = makeDecoratable(
+    "DropdownMenuCheckboxItem",
+    DropdownMenuCheckboxItemBase
+);
diff --git a/packages/admin-ui/src/DropdownMenu/components/DropdownMenuContent.tsx b/packages/admin-ui/src/DropdownMenu/components/DropdownMenuContent.tsx
new file mode 100644
index 00000000000..84f8f81962f
--- /dev/null
+++ b/packages/admin-ui/src/DropdownMenu/components/DropdownMenuContent.tsx
@@ -0,0 +1,22 @@
+import * as React from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { cn } from "~/utils";
+
+const DropdownMenuContent = React.forwardRef<
+    React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+    React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, collisionPadding = 8, ...props }, ref) => (
+    <DropdownMenuPrimitive.Content
+        ref={ref}
+        sideOffset={sideOffset}
+        collisionPadding={collisionPadding}
+        className={cn(
+            "wby-flex wby-flex-col wby-z-[150] wby-min-w-[8rem] wby-overflow-hidden wby-rounded-md wby-gap-xxs wby-bg-white wby-py-xs-plus wby-text-neutral-primary wby-shadow-none data-[state=open]:wby-animate-in data-[state=closed]:wby-animate-out data-[state=closed]:wby-fade-out-0 data-[state=open]:wby-fade-in-0 data-[state=closed]:wby-zoom-out-95 data-[state=open]:wby-zoom-in-95 data-[side=bottom]:wby-slide-in-from-top-2 data-[side=left]:wby-slide-in-from-right-2 data-[side=right]:wby-slide-in-from-left-2 data-[side=top]:wby-slide-in-from-bottom-2 wby-border-sm wby-border-solid wby-border-neutral-muted",
+            className
+        )}
+        {...props}
+    />
+));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+
+export { DropdownMenuContent };
diff --git a/packages/admin-ui/src/DropdownMenu/components/DropdownMenuGroup.tsx b/packages/admin-ui/src/DropdownMenu/components/DropdownMenuGroup.tsx
new file mode 100644
index 00000000000..2997b0df546
--- /dev/null
+++ b/packages/admin-ui/src/DropdownMenu/components/DropdownMenuGroup.tsx
@@ -0,0 +1,5 @@
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { makeDecoratable } from "~/utils";
+
+const DropdownMenuGroupBase = DropdownMenuPrimitive.Group;
+export const DropdownMenuGroup = makeDecoratable("DropdownMenuGroup", DropdownMenuGroupBase);
diff --git a/packages/admin-ui/src/DropdownMenu/components/DropdownMenuItem.tsx b/packages/admin-ui/src/DropdownMenu/components/DropdownMenuItem.tsx
new file mode 100644
index 00000000000..2e4ab152a5e
--- /dev/null
+++ b/packages/admin-ui/src/DropdownMenu/components/DropdownMenuItem.tsx
@@ -0,0 +1,109 @@
+import * as React from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { cn, cva, makeDecoratable } from "~/utils";
+import { DropdownMenuSubRoot } from "./DropdownMenuSubRoot";
+import { DropdownMenuSubTrigger } from "./DropdownMenuSubTrigger";
+import { DropdownMenuPortal } from "./DropdownMenuPortal";
+import { DropdownMenuSubContent } from "./DropdownMenuSubContent";
+import { DropdownMenuItemIcon, type DropdownMenuItemIconProps } from "./DropdownMenuItemIcon";
+import { Link, LinkProps, To } from "@webiny/react-router";
+
+interface DropdownMenuItemBaseProps {
+    icon?: React.ReactNode;
+    readOnly?: boolean;
+    text?: React.ReactNode;
+    disabled?: boolean;
+    onClick?: React.MouseEventHandler;
+}
+
+type DropdownMenuItemButtonProps = (DropdownMenuItemBaseProps &
+    React.HTMLAttributes<HTMLDivElement>) & { to?: never };
+type DropdownMenuItemLinkProps = (DropdownMenuItemBaseProps & LinkProps) & { to: To };
+
+type DropdownMenuItemProps = DropdownMenuItemButtonProps | DropdownMenuItemLinkProps;
+
+const variants = cva(
+    [
+        "wby-group wby-relative wby-cursor-default wby-select-none wby-items-center wby-rounded-sm",
+        "wby-text-md wby-text-neutral-primary !wby-no-underline",
+        "wby-px-xs-plus wby-outline-none wby-transition-colors",
+        "[&_svg]:wby-fill-neutral-xstrong [&_svg]:wby-pointer-events-none [&_svg]:wby-size-md [&_svg]:wby-shrink-0",
+        "data-[disabled]:wby-pointer-events-none data-[disabled]:wby-text-neutral-disabled",
+        "[&_a]:!wby-no-underline [&_a]:!wby-text-neutral-primary"
+    ],
+    {
+        variants: {
+            readOnly: {
+                true: "wby-pointer-events-none"
+            }
+        },
+        defaultVariants: {
+            readOnly: false
+        }
+    }
+);
+
+const DropdownMenuItemBase = React.forwardRef<
+    React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+    DropdownMenuItemProps
+>(({ className, icon, text, readOnly, disabled, onClick, children, ...linkProps }, ref) => {
+    if (children) {
+        return (
+            <DropdownMenuSubRoot>
+                <DropdownMenuSubTrigger>
+                    {icon}
+                    <span>{text}</span>
+                </DropdownMenuSubTrigger>
+                <DropdownMenuPortal>
+                    <DropdownMenuSubContent>{children}</DropdownMenuSubContent>
+                </DropdownMenuPortal>
+            </DropdownMenuSubRoot>
+        );
+    }
+    const sharedProps = {
+        className: cn(
+            "wby-flex wby-px-sm wby-py-xs-plus wby-gap-sm-extra wby-items-center wby-text-md wby-rounded-sm wby-transition-colors group-focus:wby-bg-neutral-dimmed",
+            {
+                "[&_svg]:!wby-fill-neutral-disabled": disabled
+            }
+        )
+    };
+
+    const content = linkProps.to ? (
+        <Link {...sharedProps} {...linkProps}>
+            {icon}
+            <span>{text}</span>
+        </Link>
+    ) : (
+        <div {...sharedProps} onClick={onClick}>
+            {icon}
+            <span>{text}</span>
+        </div>
+    );
+
+    return (
+        <DropdownMenuPrimitive.Item
+            disabled={disabled}
+            ref={ref}
+            className={cn(variants({ readOnly }), className)}
+        >
+            {content}
+        </DropdownMenuPrimitive.Item>
+    );
+});
+
+DropdownMenuItemBase.displayName = DropdownMenuPrimitive.Item.displayName;
+
+const DecoratableDropdownMenuItem = makeDecoratable("DropdownMenuItem", DropdownMenuItemBase);
+
+const DropdownMenuItem = Object.assign(DecoratableDropdownMenuItem, {
+    Icon: DropdownMenuItemIcon
+});
+
+export {
+    DropdownMenuItem,
+    type DropdownMenuItemProps,
+    type DropdownMenuItemButtonProps,
+    type DropdownMenuItemLinkProps,
+    type DropdownMenuItemIconProps
+};
diff --git a/packages/admin-ui/src/DropdownMenu/components/DropdownMenuItemIcon.tsx b/packages/admin-ui/src/DropdownMenu/components/DropdownMenuItemIcon.tsx
new file mode 100644
index 00000000000..3b404993ead
--- /dev/null
+++ b/packages/admin-ui/src/DropdownMenu/components/DropdownMenuItemIcon.tsx
@@ -0,0 +1,12 @@
+import React from "react";
+import { Icon, type IconProps } from "~/Icon";
+
+interface DropdownMenuItemIconProps extends Omit<IconProps, "icon"> {
+    element: React.ReactNode;
+}
+
+const DropdownMenuItemIcon = (props: DropdownMenuItemIconProps) => {
+    return <Icon size={"sm"} color={"neutral-light"} icon={props.element} {...props} />;
+};
+
+export { DropdownMenuItemIcon, type DropdownMenuItemIconProps };
diff --git a/packages/admin-ui/src/DropdownMenu/components/DropdownMenuLabel.tsx b/packages/admin-ui/src/DropdownMenu/components/DropdownMenuLabel.tsx
new file mode 100644
index 00000000000..e7be1e8a13f
--- /dev/null
+++ b/packages/admin-ui/src/DropdownMenu/components/DropdownMenuLabel.tsx
@@ -0,0 +1,27 @@
+import * as React from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { cn, makeDecoratable } from "~/utils";
+
+export interface DropdownMenuLabelProps
+    extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> {
+    text: React.ReactNode;
+}
+
+const DropdownMenuLabelBase = React.forwardRef<
+    React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+    DropdownMenuLabelProps
+>(({ className, text, ...props }, ref) => (
+    <DropdownMenuPrimitive.Label
+        ref={ref}
+        className={cn(
+            "wby-py-sm wby-pl-sm-extra wby-pr-md wby-text-sm wby-uppercase wby-text-neutral-strong wby-font-semibold",
+            className
+        )}
+        {...props}
+    >
+        {text}
+    </DropdownMenuPrimitive.Label>
+));
+DropdownMenuLabelBase.displayName = DropdownMenuPrimitive.Label.displayName;
+
+export const DropdownMenuLabel = makeDecoratable("DropdownMenuLabel", DropdownMenuLabelBase);
diff --git a/packages/admin-ui/src/DropdownMenu/components/DropdownMenuLink.tsx b/packages/admin-ui/src/DropdownMenu/components/DropdownMenuLink.tsx
new file mode 100644
index 00000000000..ba1f79e8b2a
--- /dev/null
+++ b/packages/admin-ui/src/DropdownMenu/components/DropdownMenuLink.tsx
@@ -0,0 +1,18 @@
+import React from "react";
+import { DropdownMenuItem, type DropdownMenuItemLinkProps } from "./DropdownMenuItem";
+import { makeDecoratable, withStaticProps } from "~/utils";
+import { DropdownMenuItemIcon, type DropdownMenuItemIconProps } from "./DropdownMenuItemIcon";
+
+export type DropdownMenuLinkProps = DropdownMenuItemLinkProps;
+
+const DropdownMenuLinkBase = (props: DropdownMenuLinkProps) => {
+    return <DropdownMenuItem {...props} />;
+};
+
+const DecoratableDropdownMenuLink = makeDecoratable("DropdownMenuLink", DropdownMenuLinkBase);
+
+const DropdownMenuLink = withStaticProps(DecoratableDropdownMenuLink, {
+    Icon: DropdownMenuItemIcon
+});
+
+export { DropdownMenuLink, type DropdownMenuItemLinkProps, type DropdownMenuItemIconProps };
diff --git a/packages/admin-ui/src/DropdownMenu/components/DropdownMenuPortal.tsx b/packages/admin-ui/src/DropdownMenu/components/DropdownMenuPortal.tsx
new file mode 100644
index 00000000000..78b9d528f17
--- /dev/null
+++ b/packages/admin-ui/src/DropdownMenu/components/DropdownMenuPortal.tsx
@@ -0,0 +1,3 @@
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+
+export const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
diff --git a/packages/admin-ui/src/DropdownMenu/components/DropdownMenuRoot.tsx b/packages/admin-ui/src/DropdownMenu/components/DropdownMenuRoot.tsx
new file mode 100644
index 00000000000..90ba57defe3
--- /dev/null
+++ b/packages/admin-ui/src/DropdownMenu/components/DropdownMenuRoot.tsx
@@ -0,0 +1,3 @@
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+
+export const DropdownMenuRoot = DropdownMenuPrimitive.Root;
diff --git a/packages/admin-ui/src/DropdownMenu/components/DropdownMenuSeparator.tsx b/packages/admin-ui/src/DropdownMenu/components/DropdownMenuSeparator.tsx
new file mode 100644
index 00000000000..6a918541817
--- /dev/null
+++ b/packages/admin-ui/src/DropdownMenu/components/DropdownMenuSeparator.tsx
@@ -0,0 +1,13 @@
+import * as React from "react";
+import { Separator, type SeparatorProps } from "~/Separator";
+import { makeDecoratable } from "~/utils";
+
+type DropdownMenuSeparatorProps = SeparatorProps;
+
+const DropdownMenuSeparatorBase = (props: DropdownMenuSeparatorProps) => {
+    return <Separator variant={"strong"} margin={"md"} {...props} />;
+};
+
+const DropdownMenuSeparator = makeDecoratable("DropdownMenuSeparator", DropdownMenuSeparatorBase);
+
+export { DropdownMenuSeparator, type DropdownMenuSeparatorProps };
diff --git a/packages/admin-ui/src/DropdownMenu/components/DropdownMenuSubContent.tsx b/packages/admin-ui/src/DropdownMenu/components/DropdownMenuSubContent.tsx
new file mode 100644
index 00000000000..dba59055cab
--- /dev/null
+++ b/packages/admin-ui/src/DropdownMenu/components/DropdownMenuSubContent.tsx
@@ -0,0 +1,25 @@
+import * as React from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { cn } from "~/utils";
+
+const DropdownMenuSubContent = React.forwardRef<
+    React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+    React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+    <DropdownMenuPrimitive.SubContent
+        ref={ref}
+        avoidCollisions={false}
+        className={cn(
+            "wby-border-sm wby-border-solid wby-border-neutral-muted wby-z-[150] wby-min-w-[8rem] wby-overflow-hidden wby-rounded-md wby-border wby-bg-white wby-py-xs-plus wby-text-neutral-primary wby-shadow-lg data-[state=open]:wby-animate-in data-[state=closed]:wby-animate-out data-[state=closed]:wby-fade-out-0 data-[state=open]:wby-fade-in-0 data-[state=closed]:wby-zoom-out-95 data-[state=open]:wby-zoom-in-95 data-[side=bottom]:wby-slide-in-from-top-2 data-[side=left]:wby-slide-in-from-right-2 data-[side=right]:wby-slide-in-from-left-2 data-[side=top]:wby-slide-in-from-bottom-2",
+            className
+        )}
+        // Added these to match alignment shown in the design.
+        sideOffset={-9}
+        alignOffset={-2}
+        {...props}
+    />
+));
+
+DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
+
+export { DropdownMenuSubContent };
diff --git a/packages/admin-ui/src/DropdownMenu/components/DropdownMenuSubRoot.tsx b/packages/admin-ui/src/DropdownMenu/components/DropdownMenuSubRoot.tsx
new file mode 100644
index 00000000000..ff5f0f72f43
--- /dev/null
+++ b/packages/admin-ui/src/DropdownMenu/components/DropdownMenuSubRoot.tsx
@@ -0,0 +1,3 @@
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+
+export const DropdownMenuSubRoot = DropdownMenuPrimitive.Sub;
diff --git a/packages/admin-ui/src/DropdownMenu/components/DropdownMenuSubTrigger.tsx b/packages/admin-ui/src/DropdownMenu/components/DropdownMenuSubTrigger.tsx
new file mode 100644
index 00000000000..6e2a750a7ef
--- /dev/null
+++ b/packages/admin-ui/src/DropdownMenu/components/DropdownMenuSubTrigger.tsx
@@ -0,0 +1,32 @@
+import * as React from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { cn } from "~/utils";
+import { ReactComponent as ChevronRight } from "@webiny/icons/chevron_right.svg";
+
+const DropdownMenuSubTrigger = React.forwardRef<
+    React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+    React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger>
+>(({ className, children, ...props }, ref) => (
+    <DropdownMenuPrimitive.SubTrigger
+        ref={ref}
+        className={cn(
+            "wby-group wby-flex wby-cursor-default wby-select-none wby-items-center wby-rounded-sm wby-px-xs-plus wby-text-md wby-outline-none",
+            className
+        )}
+        {...props}
+    >
+        <div
+            className={cn(
+                "wby-rounded-sm wby-gap-sm-extra group-focus:wby-bg-neutral-dimmed wby-flex wby-items-center wby-w-full wby-px-sm wby-py-xs-plus wby-transition-colors",
+                "[&_svg]:wby-pointer-events-none [&_svg]:wby-size-md [&_svg]:wby-shrink-0 [&_svg]:wby-fill-neutral-xstrong"
+            )}
+        >
+            {children}
+            <ChevronRight className="wby-ml-auto" />
+        </div>
+    </DropdownMenuPrimitive.SubTrigger>
+));
+
+DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
+
+export { DropdownMenuSubTrigger };
diff --git a/packages/admin-ui/src/DropdownMenu/components/DropdownMenuTrigger.tsx b/packages/admin-ui/src/DropdownMenu/components/DropdownMenuTrigger.tsx
new file mode 100644
index 00000000000..ca7fbd9f4a5
--- /dev/null
+++ b/packages/admin-ui/src/DropdownMenu/components/DropdownMenuTrigger.tsx
@@ -0,0 +1,3 @@
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+
+export const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
diff --git a/packages/admin-ui/src/DropdownMenu/index.ts b/packages/admin-ui/src/DropdownMenu/index.ts
new file mode 100644
index 00000000000..54b11fcb076
--- /dev/null
+++ b/packages/admin-ui/src/DropdownMenu/index.ts
@@ -0,0 +1 @@
+export * from "./DropdownMenu";
diff --git a/packages/admin-ui/src/DynamicFieldset/Fieldset.tsx b/packages/admin-ui/src/DynamicFieldset/Fieldset.tsx
new file mode 100644
index 00000000000..eed3252c3ef
--- /dev/null
+++ b/packages/admin-ui/src/DynamicFieldset/Fieldset.tsx
@@ -0,0 +1,138 @@
+import React from "react";
+import { FormComponentErrorMessage, FormComponentNote } from "~/FormComponent";
+
+interface ChildrenRenderPropRowCallableParams {
+    index: number;
+    data: any;
+}
+interface ChildrenRenderPropRowCallable {
+    (params: ChildrenRenderPropRowCallableParams): React.ReactNode;
+}
+
+interface ChildrenRenderPropHeaderCallable {
+    (): React.ReactNode;
+}
+interface ChildrenRenderPropEmptyCallable {
+    (): React.ReactNode;
+}
+interface ChildrenRenderProp {
+    actions: {
+        add: (index?: number) => () => void;
+        remove: (index: number) => () => void;
+    };
+    header: (cb: ChildrenRenderPropHeaderCallable) => React.ReactNode;
+    row: (cb: ChildrenRenderPropRowCallable) => React.ReactNode;
+    empty: (cb: ChildrenRenderPropEmptyCallable) => React.ReactNode;
+}
+
+interface DynamicFieldsetProps {
+    value?: any[];
+    description?: string;
+    validation?: { isValid: null | boolean; message?: string };
+    onChange: (value: any) => void;
+    children: (props: ChildrenRenderProp) => React.ReactNode;
+}
+
+class DynamicFieldset extends React.Component<DynamicFieldsetProps> {
+    static defaultProps: Partial<DynamicFieldsetProps> = {
+        value: []
+    };
+
+    header: React.ReactNode = null;
+    rows: React.ReactNode = null;
+    empty: React.ReactNode = null;
+
+    actions = {
+        add:
+            (index = -1) =>
+            () =>
+                this.addData(index),
+        remove:
+            (index = -1) =>
+            () =>
+                this.removeData(index)
+    };
+
+    removeData = (index: number) => {
+        const { value, onChange } = this.props;
+        if (!value) {
+            return;
+        }
+        onChange([...value.slice(0, index), ...value.slice(index + 1)]);
+    };
+
+    addData = (index = -1) => {
+        const { onChange } = this.props;
+        let value = this.props.value;
+        if (!value) {
+            value = [];
+        }
+        if (index < 0) {
+            onChange([...value, {}]);
+        } else {
+            onChange([...value.slice(0, index + 1), {}, ...value.slice(index + 1)]);
+        }
+    };
+
+    renderHeader = (cb: () => React.ReactNode): React.ReactNode => {
+        this.header = cb();
+        return null;
+    };
+
+    renderRow = (cb: ChildrenRenderPropRowCallable): React.ReactNode => {
+        const { value } = this.props;
+        if (!value) {
+            return null;
+        }
+        this.rows = value.map((record, index) => {
+            return <div key={index}>{cb({ data: record, index })}</div>;
+        });
+        return null;
+    };
+
+    renderEmpty = (cb: () => React.ReactNode): React.ReactNode => {
+        this.empty = cb();
+        return null;
+    };
+
+    public renderComponent(): React.ReactNode {
+        const { value } = this.props;
+        const { children } = this.props;
+
+        children({
+            actions: this.actions,
+            header: this.renderHeader,
+            row: this.renderRow,
+            empty: this.renderEmpty
+        });
+
+        if (!value || value.length === 0) {
+            return this.empty;
+        }
+
+        return (
+            <React.Fragment>
+                {this.header}
+                {this.rows}
+            </React.Fragment>
+        );
+    }
+
+    public override render() {
+        const { description, validation } = this.props;
+        const { isValid: validationIsValid, message: validationMessage } = validation || {};
+
+        return (
+            <>
+                {this.renderComponent()}
+                <FormComponentErrorMessage
+                    invalid={Boolean(validationIsValid === false)}
+                    text={validationMessage}
+                />
+                <FormComponentNote text={description} />
+            </>
+        );
+    }
+}
+
+export { DynamicFieldset, type DynamicFieldsetProps };
diff --git a/packages/admin-ui/src/DynamicFieldset/index.ts b/packages/admin-ui/src/DynamicFieldset/index.ts
new file mode 100644
index 00000000000..918d2d4da7c
--- /dev/null
+++ b/packages/admin-ui/src/DynamicFieldset/index.ts
@@ -0,0 +1 @@
+export * from "./Fieldset";
diff --git a/packages/admin-ui/src/FilePicker/FilePicker.mdx b/packages/admin-ui/src/FilePicker/FilePicker.mdx
new file mode 100644
index 00000000000..81eb87c7a48
--- /dev/null
+++ b/packages/admin-ui/src/FilePicker/FilePicker.mdx
@@ -0,0 +1,161 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+
+import * as FilePickerStories from './FilePicker.stories';
+
+<Meta of={FilePickerStories} />
+
+# File Picker
+
+The File Picker component allows users to select, preview, and manage files. It provides an intuitive interface for file uploads in forms and content management systems, with support for different file types and preview options.
+
+## Usage
+
+The FilePicker component is typically used with [Webiny's File Manager](https://www.webiny.com/enterprise-serverless-cms/file-manager) to provide a complete file selection experience.
+
+> ⚠️ **Note**: The FilePicker component is designed to work seamlessly with [Webiny's File Manager](https://www.webiny.com/enterprise-serverless-cms/file-manager).
+In the Storybook example below, we’ve used random images from Picsum for demonstration purposes.
+However, if you use this example code in a real Webiny project, the FilePicker will integrate with the actual File Manager as expected.
+
+<Canvas of={FilePickerStories.Documentation} source={ { code: `
+import React, { useState } from "react";
+import { FilePicker, type FileItemDto } from "@webiny/admin-ui";
+import { FileManager } from "@webiny/app-admin/components";
+import type { FileManagerFileItem } from "@webiny/app-admin/base/ui/FileManager";
+
+const FilePickerExample = () => {
+    const [selectedFile, setSelectedFile] = useState<FileItemDto | null>(null);
+    const [validation, setValidation] = useState({ isValid: true, message: "" });
+
+    return (
+        <FileManager
+            accept={["image/*", "application/pdf"]}
+            onChange={(file: FileManagerFileItem) => {
+                if (file) {
+                    // Convert FileManager file to the format FilePicker expects
+                    const metaItems = file.meta || [];
+                    const getName = () => {
+                        const nameItem = metaItems.find((item: { key: string }) => item.key === "name");
+                        return nameItem ? nameItem.value : "";
+                    };
+                    const getSize = () => {
+                        const sizeItem = metaItems.find((item: { key: string }) => item.key === "size");
+                        return sizeItem ? sizeItem.value : 0;
+                    };
+                    const getType = () => {
+                        const typeItem = metaItems.find((item: { key: string }) => item.key === "type");
+                        return typeItem ? typeItem.value : "";
+                    };
+
+                    setSelectedFile({
+                        id: file.id,
+                        name: getName(),
+                        size: getSize(),
+                        mimeType: getType(),
+                        url: file.src || ""
+                    });
+                    setValidation({ isValid: true, message: "" });
+                }
+            }}
+            render={({ showFileManager }) => (
+                <FilePicker
+                    label="Upload Image"
+                    description="Select a file to upload (JPG, PNG, PDF)"
+                    note="Note: Maximum file size is 5MB"
+                    type="area"
+                    required={true}
+                    value={selectedFile}
+                    onSelectItem={() => showFileManager()}
+                    onRemoveItem={() => {
+                        setSelectedFile(null);
+                        setValidation({ isValid: false, message: "Please select a file" });
+                    }}
+                    onEditItem={() => showFileManager()}
+                    validation={validation}
+                />
+            )}
+        />
+    );
+};
+
+export default FilePickerExample;
+
+` } }
+        additionalActions={[
+            {
+                title: 'Open in GitHub',
+                onClick: () => {
+                    window.open(
+                        'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/FilePicker/FilePicker.tsx',
+                        '_blank'
+                    );
+                },
+            }
+        ]}
+/>
+
+<Controls of={FilePickerStories.Documentation} />
+
+```tsx
+import React, { useState } from "react";
+import { FilePicker, type FileItemDto } from "@webiny/admin-ui";
+import { FileManager } from "@webiny/app-admin/components";
+import type { FileManagerFileItem } from "@webiny/app-admin/base/ui/FileManager";
+
+const FilePickerExample = () => {
+    const [selectedFile, setSelectedFile] = useState<FileItemDto | null>(null);
+    const [validation, setValidation] = useState({ isValid: true, message: "" });
+
+    return (
+        <FileManager
+            accept={["image/*", "application/pdf"]}
+            onChange={(file: FileManagerFileItem) => {
+                if (file) {
+                    // Convert FileManager file to the format FilePicker expects
+                    const metaItems = file.meta || [];
+                    const getName = () => {
+                        const nameItem = metaItems.find((item: { key: string }) => item.key === "name");
+                        return nameItem ? nameItem.value : "";
+                    };
+                    const getSize = () => {
+                        const sizeItem = metaItems.find((item: { key: string }) => item.key === "size");
+                        return sizeItem ? sizeItem.value : 0;
+                    };
+                    const getType = () => {
+                        const typeItem = metaItems.find((item: { key: string }) => item.key === "type");
+                        return typeItem ? typeItem.value : "";
+                    };
+
+                    setSelectedFile({
+                        id: file.id,
+                        name: getName(),
+                        size: getSize(),
+                        mimeType: getType(),
+                        url: file.src || ""
+                    });
+                    setValidation({ isValid: true, message: "" });
+                }
+            }}
+            render={({ showFileManager }) => (
+                <FilePicker
+                    label="Upload Image"
+                    description="Select a file to upload (JPG, PNG, PDF)"
+                    note="Note: Maximum file size is 5MB"
+                    type="area"
+                    required={true}
+                    value={selectedFile}
+                    onSelectItem={() => showFileManager()}
+                    onRemoveItem={() => {
+                        setSelectedFile(null);
+                        setValidation({ isValid: false, message: "Please select a file" });
+                    }}
+                    onEditItem={() => showFileManager()}
+                    validation={validation}
+                />
+            )}
+        />
+    );
+};
+
+export default FilePickerExample;
+```
+
diff --git a/packages/admin-ui/src/FilePicker/FilePicker.stories.tsx b/packages/admin-ui/src/FilePicker/FilePicker.stories.tsx
new file mode 100644
index 00000000000..0e4550bf571
--- /dev/null
+++ b/packages/admin-ui/src/FilePicker/FilePicker.stories.tsx
@@ -0,0 +1,337 @@
+import React, { useState, useEffect } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { type FileItemDto, FilePicker } from "~/FilePicker";
+import { Providers } from "~/Providers";
+
+const getRandomNumber = (min: number, max: number): number =>
+    Math.floor(Math.random() * (max - min + 1)) + min;
+
+const getFile = (): FileItemDto => {
+    const width = getRandomNumber(500, 2000); // Random width between 500 and 2000
+    const height = getRandomNumber(500, 2000); // Random height between 500 and 2000
+    const fileSize = getRandomNumber(500000, 5000000); // Random file size between 500KB and 5MB
+
+    return {
+        name: "selected-file.jpg",
+        mimeType: "image/jpeg",
+        size: fileSize,
+        url: `https://picsum.photos/${width}/${height}`
+    };
+};
+
+const meta: Meta<typeof FilePicker> = {
+    title: "Components/Form/FilePicker",
+    component: FilePicker,
+    argTypes: {
+        onSelectItem: { action: "onSelectItem" },
+        onEditItem: { action: "onEditItem" },
+        onRemoveItem: { action: "onRemoveItem" },
+        disabled: {
+            control: "boolean",
+            defaultValue: false
+        }
+    },
+    parameters: {
+        layout: "padded"
+    },
+    render: args => {
+        const [selectedFile, setSelectedFile] = useState(args.value);
+        return (
+            <Providers>
+                <FilePicker
+                    {...args}
+                    value={selectedFile}
+                    onSelectItem={() => setSelectedFile(getFile())}
+                    onRemoveItem={() => setSelectedFile(null)}
+                    onEditItem={() => alert(`Editing File`)}
+                />
+            </Providers>
+        );
+    }
+};
+
+export default meta;
+type Story = StoryObj<typeof FilePicker>;
+
+export const Default: Story = {};
+
+export const AreaType: Story = {
+    args: {
+        ...Default.args,
+        type: "area"
+    }
+};
+
+export const AreaWithLabel: Story = {
+    args: {
+        ...AreaType.args,
+        label: "Any field label"
+    }
+};
+
+export const AreaWithLabelRequired: Story = {
+    args: {
+        ...AreaType.args,
+        label: "Any field label",
+        required: true
+    }
+};
+
+export const AreaWithDescription: Story = {
+    args: {
+        ...AreaType.args,
+        description: "Provide the required information for processing your request."
+    }
+};
+
+export const AreaWithNotes: Story = {
+    args: {
+        ...AreaType.args,
+        note: "Note: Ensure your selection or input is accurate before proceeding."
+    }
+};
+
+export const AreaWithErrors: Story = {
+    args: {
+        ...AreaType.args,
+        validation: {
+            isValid: false,
+            message: "This field is required."
+        }
+    }
+};
+
+export const AreaDisabled: Story = {
+    args: {
+        ...AreaType.args,
+        label: "Any field label",
+        disabled: true
+    }
+};
+
+export const AreaWithValidateFunction: Story = {
+    args: {
+        ...AreaType.args
+    },
+    render: args => {
+        const [validation, setValidation] = useState<any>({ isValid: true, message: undefined });
+
+        const validate = async () => {
+            setValidation({ isValid: false, message: "Any custom error message." });
+        };
+
+        return <FilePicker {...args} validate={validate} validation={validation} />;
+    }
+};
+
+export const AreaFullExample: Story = {
+    args: {
+        ...AreaType.args,
+        label: "Any field label",
+        required: true,
+        description: "Provide the required information for processing your request.",
+        note: "Note: Ensure your selection or input is accurate before proceeding.",
+        validation: {
+            isValid: false,
+            message: "This field is required."
+        }
+    }
+};
+
+export const Compact: Story = {
+    args: {
+        ...Default.args,
+        type: "compact"
+    }
+};
+
+export const CompactWithLabel: Story = {
+    args: {
+        ...Compact.args,
+        label: "Any field label"
+    }
+};
+
+export const CompactWithLabelRequired: Story = {
+    args: {
+        ...Compact.args,
+        label: "Any field label",
+        required: true
+    }
+};
+
+export const CompactWithDescription: Story = {
+    args: {
+        ...Compact.args,
+        description: "Provide the required information for processing your request."
+    }
+};
+
+export const CompactWithNotes: Story = {
+    args: {
+        ...Compact.args,
+        note: "Note: Ensure your selection or input is accurate before proceeding."
+    }
+};
+
+export const CompactWithErrors: Story = {
+    args: {
+        ...Compact.args,
+        validation: {
+            isValid: false,
+            message: "This field is required."
+        }
+    }
+};
+
+export const CompactDisabled: Story = {
+    args: {
+        ...Compact.args,
+        label: "Any field label",
+        disabled: true
+    }
+};
+
+export const CompactWithValidateFunction: Story = {
+    args: {
+        ...Compact.args
+    },
+    render: args => {
+        const [validation, setValidation] = useState<any>({ isValid: true, message: undefined });
+
+        const validate = async () => {
+            setValidation({ isValid: false, message: "Any custom error message." });
+        };
+
+        return <FilePicker {...args} validate={validate} validation={validation} />;
+    }
+};
+
+export const CompactFullExample: Story = {
+    args: {
+        ...Compact.args,
+        label: "Any field label",
+        required: true,
+        description: "Provide the required information for processing your request.",
+        note: "Note: Ensure your selection or input is accurate before proceeding.",
+        validation: {
+            isValid: false,
+            message: "This field is required."
+        }
+    }
+};
+
+export const Documentation: Story = {
+    render: args => {
+        const [selectedFile, setSelectedFile] = useState(args.value);
+        const [validation, setValidation] = useState({ isValid: true, message: "" });
+
+        // Update value when args.value changes
+        useEffect(() => {
+            setSelectedFile(args.value);
+        }, [args.value]);
+
+        const handleSelect = () => {
+            setSelectedFile(getFile());
+            setValidation({ isValid: true, message: "" });
+        };
+
+        const handleEdit = (file: any) => {
+            if (file) {
+                console.log("Editing file:", file);
+                alert(`Editing File: ${file.name}`);
+            }
+        };
+
+        const handleRemove = () => {
+            setSelectedFile(null);
+
+            if (args.required) {
+                setValidation({ isValid: false, message: "Please select a file" });
+            }
+        };
+
+        // Validate on required change or value change
+        useEffect(() => {
+            if (args.required && !selectedFile) {
+                setValidation({ isValid: false, message: "Please select a file" });
+            } else {
+                setValidation({ isValid: true, message: "" });
+            }
+        }, [args.required, selectedFile]);
+
+        return (
+            <Providers>
+                <FilePicker
+                    {...args}
+                    value={selectedFile}
+                    onSelectItem={handleSelect}
+                    onRemoveItem={handleRemove}
+                    onEditItem={handleEdit}
+                    validation={validation}
+                />
+            </Providers>
+        );
+    },
+    args: {
+        label: "Upload Image",
+        required: true,
+        disabled: false,
+        description: "Select a file to upload (JPG, PNG, PDF)",
+        note: "Note: Maximum file size is 5MB",
+        type: "area",
+        value: null,
+        validation: undefined,
+        onSelectItem: undefined,
+        onEditItem: undefined,
+        onRemoveItem: undefined
+    },
+    argTypes: {
+        label: {
+            description: "Label text for the file picker",
+            control: "text"
+        },
+        required: {
+            description: "Makes the field required when set to true",
+            control: "boolean"
+        },
+        disabled: {
+            description: "Disables the file picker when set to true",
+            control: "boolean"
+        },
+        description: {
+            description: "Additional description text below the field",
+            control: "text"
+        },
+        note: {
+            description: "Additional note text below the field",
+            control: "text"
+        },
+        type: {
+            description: "The visual style of the file picker",
+            control: "radio",
+            options: ["area", "compact"]
+        },
+        value: {
+            description: "The currently selected file",
+            control: "object"
+        },
+        validation: {
+            description:
+                "Object containing validation state and message. Please refer to the example code for details on usage.",
+            control: "none"
+        },
+        onSelectItem: {
+            description: "Function called when a file is selected",
+            control: "none"
+        },
+        onEditItem: {
+            description: "Function called when a file is edited",
+            control: "none"
+        },
+        onRemoveItem: {
+            description: "Function called when a file is removed",
+            control: "none"
+        }
+    }
+};
diff --git a/packages/admin-ui/src/FilePicker/FilePicker.tsx b/packages/admin-ui/src/FilePicker/FilePicker.tsx
new file mode 100644
index 00000000000..4105d0ba788
--- /dev/null
+++ b/packages/admin-ui/src/FilePicker/FilePicker.tsx
@@ -0,0 +1,93 @@
+import React, { useCallback, useMemo } from "react";
+import { makeDecoratable, withStaticProps } from "~/utils";
+import { FilePickerPrimitive, type FilePickerPrimitiveProps } from "./primitives";
+import {
+    FormComponentErrorMessage,
+    FormComponentNote,
+    type FormComponentProps
+} from "~/FormComponent";
+import {
+    ImagePreview,
+    RichItemPreview,
+    TextOnlyPreview,
+    FormPickerLabel
+} from "~/FilePicker/primitives/components";
+
+type FilePickerProps = FilePickerPrimitiveProps & FormComponentProps;
+
+const BaseFilePicker = ({
+    label,
+    description,
+    note,
+    required,
+    disabled,
+    validation,
+    validate,
+    onBlur: originalOnBlur,
+    type = "area",
+    ...props
+}: FilePickerProps) => {
+    const { isValid: validationIsValid, message: validationMessage } = validation || {};
+    const invalid = useMemo(() => validationIsValid === false, [validationIsValid]);
+
+    const onBlur = useCallback(
+        async (e: React.FocusEvent<HTMLInputElement>) => {
+            if (validate) {
+                // Since we are accessing event in an async operation, we need to persist it.
+                // See https://reactjs.org/docs/events.html#event-pooling.
+                e.persist();
+                await validate();
+            }
+            originalOnBlur && originalOnBlur(e);
+        },
+        [validate, originalOnBlur]
+    );
+
+    return (
+        <div className={"wby-w-full"}>
+            {type !== "area" && (
+                <FormPickerLabel
+                    label={label}
+                    required={required}
+                    disabled={disabled}
+                    description={description}
+                    invalid={invalid}
+                />
+            )}
+            <FilePickerPrimitive
+                {...props}
+                label={
+                    <FormPickerLabel
+                        label={label}
+                        required={required}
+                        disabled={disabled}
+                        description={description}
+                        className={"wby-m-0"}
+                        invalid={invalid}
+                    />
+                }
+                disabled={disabled}
+                invalid={invalid}
+                onBlur={onBlur}
+                type={type}
+            />
+            <FormComponentErrorMessage
+                text={validationMessage}
+                invalid={invalid}
+                disabled={disabled}
+            />
+            <FormComponentNote text={note} disabled={disabled} />
+        </div>
+    );
+};
+
+const DecoratableFilePicker = makeDecoratable("FilePicker", BaseFilePicker);
+
+const FilePicker = withStaticProps(DecoratableFilePicker, {
+    Preview: {
+        Image: ImagePreview,
+        RichItem: RichItemPreview,
+        TextOnly: TextOnlyPreview
+    }
+});
+export { FilePicker, type FilePickerProps };
diff --git a/packages/admin-ui/src/FilePicker/domains/FileItem.ts b/packages/admin-ui/src/FilePicker/domains/FileItem.ts
new file mode 100644
index 00000000000..52a27ffc614
--- /dev/null
+++ b/packages/admin-ui/src/FilePicker/domains/FileItem.ts
@@ -0,0 +1,150 @@
+import type { FileItemDto } from "./FileItemDto";
+import { generateId } from "~/utils";
+
+export class FileItem {
+    private readonly _id: string;
+    private readonly _name: string;
+    private readonly _url: string;
+    private readonly _mimeType: string;
+    private readonly _size: number;
+
+    protected constructor(data: {
+        id: string;
+        name: string;
+        url: string;
+        mimeType: string;
+        size: number;
+    }) {
+        this._id = data.id;
+        this._name = data.name;
+        this._url = data.url;
+        this._mimeType = data.mimeType;
+        this._size = data.size;
+    }
+
+    static create(data: FileItemDto): FileItem {
+        return new FileItem({
+            id: generateId(data.id),
+            name: data.name ?? data.url,
+            url: data.url,
+            mimeType: data.mimeType ?? this.getDefaultMimeType(),
+            size: data.size ?? 0
+        });
+    }
+
+    static createFromUrl(url: string): FileItem {
+        const documentUrl = new URL(url);
+        const pathname = documentUrl.pathname;
+        const name = pathname.substring(pathname.lastIndexOf("/") + 1);
+        const extension = name.split(".").pop()?.toLowerCase() || "";
+
+        // Map extensions to mimetypes
+        const mimeTypes: Record<string, string> = {
+            // Images
+            jpg: "image/jpeg",
+            jpeg: "image/jpeg",
+            png: "image/png",
+            gif: "image/gif",
+            bmp: "image/bmp",
+            webp: "image/webp",
+            svg: "image/svg+xml",
+            ico: "image/x-icon",
+            tif: "image/tiff",
+            tiff: "image/tiff",
+
+            // Documents
+            pdf: "application/pdf",
+            txt: "text/plain",
+            csv: "text/csv",
+            json: "application/json",
+            xml: "application/xml",
+            html: "text/html",
+            xhtml: "application/xhtml+xml",
+            md: "text/markdown",
+
+            // Microsoft Office
+            doc: "application/msword",
+            docx: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+            xls: "application/vnd.ms-excel",
+            xlsx: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+            ppt: "application/vnd.ms-powerpoint",
+            pptx: "application/vnd.openxmlformats-officedocument.presentationml.presentation",
+
+            // Open Document Format
+            odt: "application/vnd.oasis.opendocument.text",
+            ods: "application/vnd.oasis.opendocument.spreadsheet",
+            odp: "application/vnd.oasis.opendocument.presentation",
+
+            // Audio
+            mp3: "audio/mpeg",
+            wav: "audio/wav",
+            ogg: "audio/ogg",
+            flac: "audio/flac",
+            aac: "audio/aac",
+            m4a: "audio/mp4",
+
+            // Video
+            mp4: "video/mp4",
+            avi: "video/x-msvideo",
+            mov: "video/quicktime",
+            mkv: "video/x-matroska",
+            webm: "video/webm",
+            flv: "video/x-flv",
+            wmv: "video/x-ms-wmv",
+
+            // Archives & Compressed
+            zip: "application/zip",
+            rar: "application/vnd.rar",
+            tar: "application/x-tar",
+            gz: "application/gzip",
+            bz2: "application/x-bzip2",
+            "7z": "application/x-7z-compressed",
+
+            // Code & Scripts
+            js: "application/javascript",
+            ts: "application/typescript",
+            css: "text/css",
+            py: "text/x-python",
+            java: "text/x-java-source",
+            c: "text/x-c",
+            cpp: "text/x-c++",
+            sh: "application/x-sh",
+            php: "application/x-httpd-php",
+            rb: "application/x-ruby",
+            go: "text/x-go",
+            swift: "text/x-swift"
+        };
+
+        return new FileItem({
+            id: generateId(),
+            name,
+            url,
+            mimeType: mimeTypes[extension] ?? this.getDefaultMimeType(),
+            size: 0
+        });
+    }
+
+    get id() {
+        return this._id;
+    }
+
+    get name() {
+        return this._name;
+    }
+
+    get url() {
+        return this._url;
+    }
+
+    get size() {
+        return this._size;
+    }
+
+    get mimeType() {
+        return this._mimeType;
+    }
+
+    private static getDefaultMimeType(): string {
+        return "application/octet-stream";
+    }
+}
diff --git a/packages/admin-ui/src/FilePicker/domains/FileItemDto.ts b/packages/admin-ui/src/FilePicker/domains/FileItemDto.ts
new file mode 100644
index 00000000000..09a750dbb5d
--- /dev/null
+++ b/packages/admin-ui/src/FilePicker/domains/FileItemDto.ts
@@ -0,0 +1,7 @@
+export interface FileItemDto {
+    id?: string;
+    name?: string;
+    url: string;
+    mimeType?: string;
+    size?: number;
+}
diff --git a/packages/admin-ui/src/FilePicker/domains/FileItemFormatted.ts b/packages/admin-ui/src/FilePicker/domains/FileItemFormatted.ts
new file mode 100644
index 00000000000..96ac40c04d3
--- /dev/null
+++ b/packages/admin-ui/src/FilePicker/domains/FileItemFormatted.ts
@@ -0,0 +1,7 @@
+export interface FileItemFormatted {
+    id: string;
+    name: string;
+    url: string;
+    mimeType: string;
+    size: number;
+}
diff --git a/packages/admin-ui/src/FilePicker/domains/FileItemFormatter.ts b/packages/admin-ui/src/FilePicker/domains/FileItemFormatter.ts
new file mode 100644
index 00000000000..29ffea1ba19
--- /dev/null
+++ b/packages/admin-ui/src/FilePicker/domains/FileItemFormatter.ts
@@ -0,0 +1,14 @@
+import { FileItem } from "./FileItem";
+import type { FileItemFormatted } from "./FileItemFormatted";
+
+export class FileItemFormatter {
+    static format(item: FileItem): FileItemFormatted {
+        return {
+            id: item.id,
+            name: item.name,
+            url: item.url,
+            mimeType: item.mimeType,
+            size: item.size
+        };
+    }
+}
diff --git a/packages/admin-ui/src/FilePicker/domains/index.ts b/packages/admin-ui/src/FilePicker/domains/index.ts
new file mode 100644
index 00000000000..142f7299c21
--- /dev/null
+++ b/packages/admin-ui/src/FilePicker/domains/index.ts
@@ -0,0 +1,4 @@
+export * from "./FileItem";
+export * from "./FileItemDto";
+export * from "./FileItemFormatted";
+export * from "./FileItemFormatter";
diff --git a/packages/admin-ui/src/FilePicker/index.ts b/packages/admin-ui/src/FilePicker/index.ts
new file mode 100644
index 00000000000..a8416213d88
--- /dev/null
+++ b/packages/admin-ui/src/FilePicker/index.ts
@@ -0,0 +1,3 @@
+export * from "./domains";
+export * from "./primitives";
+export * from "./FilePicker";
diff --git a/packages/admin-ui/src/FilePicker/primitives/FilePickerPrimitive.stories.tsx b/packages/admin-ui/src/FilePicker/primitives/FilePickerPrimitive.stories.tsx
new file mode 100644
index 00000000000..dcdcfb263db
--- /dev/null
+++ b/packages/admin-ui/src/FilePicker/primitives/FilePickerPrimitive.stories.tsx
@@ -0,0 +1,340 @@
+import React, { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { FilePickerPrimitive } from "./FilePickerPrimitive";
+import type { FileItemDto } from "~/FilePicker/";
+
+const getRandomNumber = (min: number, max: number): number =>
+    Math.floor(Math.random() * (max - min + 1)) + min;
+
+const getFile = (): FileItemDto => {
+    const width = getRandomNumber(500, 2000); // Random width between 500 and 2000
+    const height = getRandomNumber(500, 2000); // Random height between 500 and 2000
+    const fileSize = getRandomNumber(500000, 5000000); // Random file size between 500KB and 5MB
+
+    return {
+        name: "selected-file.jpg",
+        mimeType: "image/jpeg",
+        size: fileSize,
+        url: `https://picsum.photos/${width}/${height}`
+    };
+};
+
+const meta: Meta<typeof FilePickerPrimitive> = {
+    title: "Components/Form Primitives/FilePicker",
+    component: FilePickerPrimitive,
+    argTypes: {
+        onSelectItem: { action: "onSelectItem" },
+        onEditItem: { action: "onEditItem" },
+        onRemoveItem: { action: "onRemoveItem" },
+        disabled: {
+            control: "boolean",
+            defaultValue: false
+        }
+    },
+    parameters: {
+        layout: "padded"
+    },
+    render: args => {
+        const [selectedFile, setSelectedFile] = useState(args.value);
+        return (
+            <FilePickerPrimitive
+                {...args}
+                value={selectedFile}
+                onSelectItem={() => setSelectedFile(getFile())}
+                onRemoveItem={() => setSelectedFile(null)}
+                onEditItem={() => alert(`Editing File`)}
+            />
+        );
+    }
+};
+
+export default meta;
+type Story = StoryObj<typeof FilePickerPrimitive>;
+
+export const Default: Story = {
+    args: {
+        label: "Upload background image"
+    }
+};
+
+export const AreaType: Story = {
+    args: {
+        ...Default.args,
+        type: "area"
+    }
+};
+
+export const AreaPrimaryVariant: Story = {
+    args: {
+        ...AreaType.args,
+        variant: "primary"
+    }
+};
+
+export const AreaPrimaryVariantDisabled: Story = {
+    args: {
+        ...AreaPrimaryVariant.args,
+        disabled: true
+    }
+};
+
+export const AreaPrimaryVariantInvalid: Story = {
+    args: {
+        ...AreaPrimaryVariant.args,
+        invalid: true
+    }
+};
+
+export const AreaSecondaryVariant: Story = {
+    args: {
+        ...AreaType.args,
+        variant: "secondary"
+    }
+};
+
+export const AreaSecondaryVariantDisabled: Story = {
+    args: {
+        ...AreaSecondaryVariant.args,
+        disabled: true
+    }
+};
+
+export const AreaSecondaryVariantInvalid: Story = {
+    args: {
+        ...AreaSecondaryVariant.args,
+        invalid: true
+    }
+};
+
+export const AreaGhostVariant: Story = {
+    args: {
+        ...AreaType.args,
+        variant: "ghost"
+    }
+};
+
+export const AreaGhostVariantDisabled: Story = {
+    args: {
+        ...AreaGhostVariant.args,
+        disabled: true
+    }
+};
+
+export const AreaGhostVariantInvalid: Story = {
+    args: {
+        ...AreaGhostVariant.args,
+        invalid: true
+    }
+};
+
+export const AreaWithImagePreview: Story = {
+    args: {
+        ...AreaType.args,
+        renderFilePreview: props => <FilePickerPrimitive.Preview.Image {...props} />
+    }
+};
+
+export const AreaWithImagePreviewLight: Story = {
+    args: {
+        ...AreaWithImagePreview.args,
+        renderFilePreview: props => (
+            <FilePickerPrimitive.Preview.Image variant={"light"} {...props} />
+        )
+    }
+};
+
+export const AreaWithImagePreviewBase: Story = {
+    args: {
+        ...AreaWithImagePreview.args,
+        renderFilePreview: props => (
+            <FilePickerPrimitive.Preview.Image variant={"base"} {...props} />
+        )
+    }
+};
+
+export const AreaWithImagePreviewTransparent: Story = {
+    args: {
+        ...AreaWithImagePreview.args,
+        renderFilePreview: props => (
+            <FilePickerPrimitive.Preview.Image variant={"transparent"} {...props} />
+        )
+    }
+};
+
+export const AreaWithRichItemPreview: Story = {
+    args: {
+        ...AreaType.args,
+        renderFilePreview: props => <FilePickerPrimitive.Preview.RichItem {...props} />
+    }
+};
+
+export const AreaWithRichItemPreviewLight: Story = {
+    args: {
+        ...AreaWithRichItemPreview.args,
+        renderFilePreview: props => (
+            <FilePickerPrimitive.Preview.RichItem variant={"light"} {...props} />
+        )
+    }
+};
+
+export const AreaWithRichItemPreviewBase: Story = {
+    args: {
+        ...AreaWithRichItemPreview.args,
+        renderFilePreview: props => (
+            <FilePickerPrimitive.Preview.RichItem variant={"base"} {...props} />
+        )
+    }
+};
+
+export const AreaWithRichItemPreviewTransparent: Story = {
+    args: {
+        ...AreaWithRichItemPreview.args,
+        renderFilePreview: props => (
+            <FilePickerPrimitive.Preview.RichItem variant={"transparent"} {...props} />
+        )
+    }
+};
+
+export const AreaWithRichItemThumbnailPreview: Story = {
+    args: {
+        ...AreaType.args,
+        renderFilePreview: props => (
+            <FilePickerPrimitive.Preview.RichItem preview={"thumbnail"} {...props} />
+        )
+    }
+};
+
+export const AreaWithRichItemFileTypePreview: Story = {
+    args: {
+        ...AreaType.args,
+        value: {
+            name: "export.csv",
+            url: "export.csv",
+            mimeType: "text/csv",
+            size: 100000
+        },
+        renderFilePreview: props => (
+            <FilePickerPrimitive.Preview.RichItem preview={"file-type"} {...props} />
+        )
+    }
+};
+
+export const AreaWithRichItemFileTypePlaceholder: Story = {
+    args: {
+        ...AreaType.args,
+        renderFilePreview: props => (
+            <FilePickerPrimitive.Preview.RichItem preview={"placeholder"} {...props} />
+        )
+    }
+};
+
+export const AreaWithTextOnlyPreview: Story = {
+    args: {
+        ...AreaType.args,
+        renderFilePreview: props => <FilePickerPrimitive.Preview.TextOnly {...props} />
+    }
+};
+
+export const AreaWithTextOnlyPreviewLight: Story = {
+    args: {
+        ...AreaWithTextOnlyPreview.args,
+        renderFilePreview: props => (
+            <FilePickerPrimitive.Preview.TextOnly variant={"light"} {...props} />
+        )
+    }
+};
+
+export const AreaWithTextOnlyPreviewBase: Story = {
+    args: {
+        ...AreaWithTextOnlyPreview.args,
+        renderFilePreview: props => (
+            <FilePickerPrimitive.Preview.TextOnly variant={"base"} {...props} />
+        )
+    }
+};
+
+export const AreaWithTextOnlyPreviewTransparent: Story = {
+    args: {
+        ...AreaWithTextOnlyPreview.args,
+        renderFilePreview: props => (
+            <FilePickerPrimitive.Preview.TextOnly variant={"transparent"} {...props} />
+        )
+    }
+};
+
+export const CompactType: Story = {
+    args: {
+        ...Default.args,
+        type: "compact"
+    }
+};
+
+export const CompactPrimaryVariant: Story = {
+    args: {
+        ...CompactType.args,
+        variant: "primary"
+    }
+};
+
+export const CompactPrimaryVariantDisabled: Story = {
+    args: {
+        ...CompactPrimaryVariant.args,
+        disabled: true
+    }
+};
+
+export const CompactPrimaryVariantInvalid: Story = {
+    args: {
+        ...CompactPrimaryVariant.args,
+        invalid: true
+    }
+};
+
+export const CompactSecondaryVariant: Story = {
+    args: {
+        ...CompactType.args,
+        variant: "secondary"
+    }
+};
+
+export const CompactSecondaryVariantDisabled: Story = {
+    args: {
+        ...CompactSecondaryVariant.args,
+        disabled: true
+    }
+};
+
+export const CompactSecondaryVariantInvalid: Story = {
+    args: {
+        ...CompactSecondaryVariant.args,
+        invalid: true
+    }
+};
+
+export const CompactGhostVariant: Story = {
+    args: {
+        ...CompactType.args,
+        variant: "ghost"
+    }
+};
+
+export const CompactGhostVariantDisabled: Story = {
+    args: {
+        ...CompactGhostVariant.args,
+        disabled: true
+    }
+};
+
+export const CompactGhostVariantInvalid: Story = {
+    args: {
+        ...CompactGhostVariant.args,
+        invalid: true
+    }
+};
+
+export const CompactWithTextOnlyPreviewSmall: Story = {
+    args: {
+        ...CompactType.args,
+        renderFilePreview: props => <FilePickerPrimitive.Preview.TextOnly {...props} small={true} />
+    }
+};
diff --git a/packages/admin-ui/src/FilePicker/primitives/FilePickerPrimitive.tsx b/packages/admin-ui/src/FilePicker/primitives/FilePickerPrimitive.tsx
new file mode 100644
index 00000000000..3fe6b9eedb9
--- /dev/null
+++ b/packages/admin-ui/src/FilePicker/primitives/FilePickerPrimitive.tsx
@@ -0,0 +1,167 @@
+import * as React from "react";
+import { cn, cva, type VariantProps, makeDecoratable, withStaticProps } from "~/utils";
+import { FormPickerLabel, Trigger } from "./components";
+import { Label } from "~/Label";
+import { InputPrimitiveProps, inputVariants } from "~/Input";
+import { ImagePreview, RichItemPreview, TextOnlyPreview, FilePreview } from "./components";
+import { FileItem, type FileItemDto, type FileItemFormatted } from "../domains";
+import { useFilePicker } from "./useFilePicker";
+import type { FilePreviewRendererProps, TriggerRendererProps } from "./components/types";
+
+const filePickerVariants = cva(
+    [
+        "wby-w-full wby-border-sm wby-text-md wby-peer wby-rounded-md",
+        "focus-visible:wby-outline-none",
+        "data-[disabled=true]:wby-cursor-not-allowed",
+        "wby-flex wby-flex-col wby-gap-y-sm-extra"
+    ],
+    {
+        variants: {
+            type: {
+                area: [
+                    "wby-px-[calc(theme(padding.sm-extra)-theme(borderWidth.sm))] wby-py-[calc(theme(padding.sm-extra)-theme(borderWidth.sm))]"
+                ],
+                compact: [
+                    "wby-py-[calc(theme(padding.sm)-theme(borderWidth.sm))] wby-px-[calc(theme(padding.sm)-theme(borderWidth.sm))]"
+                ]
+            },
+            variant: {
+                primary: "",
+                secondary: "",
+                ghost: ["hover:wby-bg-transparent"]
+            }
+        },
+        defaultVariants: {
+            type: "area",
+            variant: "primary"
+        }
+    }
+);
+
+interface FilePickerPrimitiveProps
+    extends React.HTMLAttributes<HTMLDivElement>,
+        VariantProps<typeof filePickerVariants> {
+    /**
+     * Custom styles for the container.
+     */
+    containerStyle?: React.CSSProperties;
+    /**
+     * Indicates if the file picker is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Indicates if the input field is invalid.
+     * Refer to `InputPrimitiveProps["invalid"]` for possible values.
+     */
+    invalid?: InputPrimitiveProps["invalid"];
+    /**
+     * Label for the file picker.
+     */
+    label?: React.ReactElement<typeof Label> | React.ReactNode | string;
+    /**
+     * Callback triggered when an item is edited.
+     */
+    onEditItem?: (item: FileItemFormatted | null) => void;
+    /**
+     * Callback triggered when an item is removed.
+     */
+    onRemoveItem?: (item: FileItemFormatted | null) => void;
+    /**
+     * Callback triggered when an item is selected.
+     */
+    onSelectItem: () => void;
+    /**
+     * Placeholder text for the file picker.
+     */
+    placeholder?: string;
+    /**
+     * Custom renderer for the file preview.
+     */
+    renderFilePreview?: (props: FilePreviewRendererProps) => React.ReactElement<any>;
+    /**
+     * Custom renderer for the trigger.
+     */
+    renderTrigger?: (props: TriggerRendererProps) => React.ReactElement<any>;
+    /**
+     * Custom styles for the file picker.
+     */
+    style?: React.CSSProperties;
+    /**
+     * Value of the selected file.
+     */
+    value?: FileItemDto | string | null;
+}
+
+const BaseFilePickerPrimitive = ({
+    className,
+    containerStyle,
+    disabled,
+    invalid,
+    label,
+    onEditItem,
+    onRemoveItem,
+    onSelectItem,
+    placeholder,
+    renderFilePreview,
+    renderTrigger,
+    type = "area",
+    value,
+    variant
+}: FilePickerPrimitiveProps) => {
+    const { vm } = useFilePicker({ value });
+
+    return (
+        <div
+            data-disabled={disabled}
+            className={cn(
+                inputVariants({ variant, invalid }),
+                filePickerVariants({ type, variant }),
+                className
+            )}
+            style={containerStyle}
+        >
+            {label &&
+                type === "area" &&
+                (typeof label === "string" ? (
+                    <FormPickerLabel label={label} className={"wby-m-0"} />
+                ) : (
+                    label
+                ))}
+            {vm.file ? (
+                <FilePreview
+                    disabled={disabled}
+                    onEditItem={onEditItem ? () => onEditItem(vm.file) : undefined}
+                    onRemoveItem={onRemoveItem ? () => onRemoveItem(vm.file) : undefined}
+                    onReplaceItem={onSelectItem}
+                    renderFilePreview={renderFilePreview}
+                    type={type}
+                    value={vm.file}
+                />
+            ) : (
+                <Trigger
+                    disabled={disabled}
+                    onSelectItem={onSelectItem}
+                    renderTrigger={renderTrigger}
+                    text={placeholder}
+                    type={type}
+                    variant={variant}
+                />
+            )}
+        </div>
+    );
+};
+
+const DecoratableFilePickerPrimitive = makeDecoratable(
+    "FilePickerPrimitive",
+    BaseFilePickerPrimitive
+);
+
+const FilePickerPrimitive = withStaticProps(DecoratableFilePickerPrimitive, {
+    Preview: {
+        Image: ImagePreview,
+        RichItem: RichItemPreview,
+        TextOnly: TextOnlyPreview
+    }
+});
+
+export { FilePickerPrimitive, FileItem, type FilePickerPrimitiveProps, filePickerVariants };
diff --git a/packages/admin-ui/src/FilePicker/primitives/components/Label.tsx b/packages/admin-ui/src/FilePicker/primitives/components/Label.tsx
new file mode 100644
index 00000000000..5e37af90336
--- /dev/null
+++ b/packages/admin-ui/src/FilePicker/primitives/components/Label.tsx
@@ -0,0 +1,32 @@
+import * as React from "react";
+import { FormComponentLabel, type FormComponentProps } from "~/FormComponent";
+
+type FormPickerLabelProps = Pick<
+    FormComponentProps,
+    "label" | "description" | "disabled" | "required"
+> & {
+    invalid?: boolean;
+    className?: string;
+};
+
+const FormPickerLabel = ({
+    label,
+    description,
+    required,
+    disabled,
+    invalid,
+    className
+}: FormPickerLabelProps) => {
+    return (
+        <FormComponentLabel
+            text={label}
+            required={required}
+            disabled={disabled}
+            hint={description}
+            className={className}
+            invalid={invalid}
+        />
+    );
+};
+
+export { FormPickerLabel, type FormPickerLabelProps };
diff --git a/packages/admin-ui/src/FilePicker/primitives/components/Trigger.tsx b/packages/admin-ui/src/FilePicker/primitives/components/Trigger.tsx
new file mode 100644
index 00000000000..ee0f4ab80e8
--- /dev/null
+++ b/packages/admin-ui/src/FilePicker/primitives/components/Trigger.tsx
@@ -0,0 +1,92 @@
+import * as React from "react";
+import { ReactComponent as ImageIcon } from "@webiny/icons/image.svg";
+import { Button } from "~/Button";
+import { cn, cva, type VariantProps } from "~/utils";
+import type { TriggerDefaultProps } from "~/FilePicker/primitives/components/types";
+
+const triggerVariants = cva(["wby-flex", "data-[disabled=true]:wby-cursor-not-allowed"], {
+    variants: {
+        type: {
+            area: ["wby-justify-center", "wby-px-xl wby-py-md-extra"],
+            compact: "wby-w-full [&>span]:!wby-flex-1 [&_button]:!wby-w-full"
+        },
+        variant: {
+            primary: "",
+            secondary: "",
+            ghost: ""
+        }
+    },
+    compoundVariants: [
+        // Combination of `type = area` and different `variant`
+        {
+            type: "area",
+            variant: "primary",
+            className: [
+                "wby-bg-neutral-subtle",
+                "hover:wby-bg-neutral-light",
+                "data-[disabled=true]:wby-bg-neutral-disabled"
+            ]
+        },
+        {
+            type: "area",
+            variant: "secondary",
+            className: [
+                "wby-bg-neutral-base",
+                "hover:wby-bg-neutral-base",
+                "data-[disabled=true]:wby-bg-neutral-disabled"
+            ]
+        },
+        {
+            type: "area",
+            variant: "ghost",
+            className: [
+                "wby-bg-neutral-subtle",
+                "hover:wby-bg-neutral-light",
+                "data-[disabled=true]:wby-bg-neutral-base"
+            ]
+        }
+    ],
+    defaultVariants: {
+        type: "area",
+        variant: "primary"
+    }
+});
+
+interface TriggerProps extends TriggerDefaultProps, VariantProps<typeof triggerVariants> {
+    renderTrigger?: (props: any) => React.ReactElement<any>;
+}
+
+const Trigger = ({
+    renderTrigger,
+    type,
+    variant,
+    text,
+    className,
+    disabled,
+    onSelectItem,
+    ...props
+}: TriggerProps) => {
+    if (typeof renderTrigger === "function") {
+        return renderTrigger({ disabled, text, onSelectItem, ...props });
+    }
+
+    return (
+        <div
+            data-role={"select-image"}
+            data-disabled={disabled}
+            className={cn(triggerVariants({ type, variant }), className)}
+            {...props}
+        >
+            <Button
+                disabled={disabled}
+                icon={<ImageIcon />}
+                onClick={onSelectItem}
+                size={"sm"}
+                text={text ?? "Select from library"}
+                variant={"ghost"}
+            />
+        </div>
+    );
+};
+
+export { Trigger, type TriggerProps, triggerVariants };
diff --git a/packages/admin-ui/src/FilePicker/primitives/components/index.ts b/packages/admin-ui/src/FilePicker/primitives/components/index.ts
new file mode 100644
index 00000000000..39dc6d82e40
--- /dev/null
+++ b/packages/admin-ui/src/FilePicker/primitives/components/index.ts
@@ -0,0 +1,3 @@
+export * from "./previews";
+export * from "./Label";
+export * from "./Trigger";
diff --git a/packages/admin-ui/src/FilePicker/primitives/components/previews/FilePreview.tsx b/packages/admin-ui/src/FilePicker/primitives/components/previews/FilePreview.tsx
new file mode 100644
index 00000000000..f8731cc7d43
--- /dev/null
+++ b/packages/admin-ui/src/FilePicker/primitives/components/previews/FilePreview.tsx
@@ -0,0 +1,24 @@
+import * as React from "react";
+import { type VariantProps } from "~/utils";
+import { filePickerVariants } from "~/FilePicker";
+import { FilePreviewDefaultProps } from "../types";
+import { RichItemPreview, TextOnlyPreview } from "../previews";
+
+type FilePreviewProps = FilePreviewDefaultProps & {
+    type: VariantProps<typeof filePickerVariants>["type"];
+    renderFilePreview?: (props: any) => React.ReactElement<any>;
+};
+
+const FilePreview = ({ type, renderFilePreview, ...props }: FilePreviewProps) => {
+    if (typeof renderFilePreview === "function") {
+        return renderFilePreview(props);
+    }
+
+    if (type === "compact") {
+        return <TextOnlyPreview {...props} />;
+    }
+
+    return <RichItemPreview {...props} />;
+};
+
+export { FilePreview, type FilePreviewProps };
diff --git a/packages/admin-ui/src/FilePicker/primitives/components/previews/ImagePreview/ImagePreview.tsx b/packages/admin-ui/src/FilePicker/primitives/components/previews/ImagePreview/ImagePreview.tsx
new file mode 100644
index 00000000000..f2a14fd89c3
--- /dev/null
+++ b/packages/admin-ui/src/FilePicker/primitives/components/previews/ImagePreview/ImagePreview.tsx
@@ -0,0 +1,54 @@
+import React from "react";
+import { cn, makeDecoratable } from "~/utils";
+import { previewVariants } from "../variants";
+import type { FilePreviewDefaultProps } from "../../types";
+import { ItemActions } from "~/FilePicker/primitives/components/previews/ItemActions";
+
+type ImagePreviewProps = FilePreviewDefaultProps;
+
+const DecoratableImagePreview = ({
+    value,
+    className,
+    variant,
+    disabled,
+    onRemoveItem,
+    onReplaceItem,
+    onEditItem
+}: ImagePreviewProps) => {
+    return (
+        <div
+            className={cn(
+                "wby-flex wby-justify-center wby-items-center wby-py-sm wby-rounded-md wby-relative",
+                previewVariants({ variant }),
+                className
+            )}
+            data-testid={"image-preview"}
+        >
+            <div
+                className={
+                    "wby-cursor-pointer wby-size-[128px] wby-flex wby-justify-center wby-items-center"
+                }
+                data-role={"select-image"}
+                onClick={onReplaceItem}
+            >
+                <img
+                    src={value.url}
+                    alt={value.name}
+                    className={"wby-object-contain wby-size-full"}
+                />
+            </div>
+            <div className={"wby-absolute wby-top-1 wby-right-1.5"}>
+                <ItemActions
+                    onRemoveItem={onRemoveItem}
+                    onEditItem={onEditItem}
+                    disabled={disabled}
+                    className={"wby-flex-col"}
+                />
+            </div>
+        </div>
+    );
+};
+
+const ImagePreview = makeDecoratable("FileImagePreview", DecoratableImagePreview);
+
+export { ImagePreview, type ImagePreviewProps };
diff --git a/packages/admin-ui/src/FilePicker/primitives/components/previews/ImagePreview/index.ts b/packages/admin-ui/src/FilePicker/primitives/components/previews/ImagePreview/index.ts
new file mode 100644
index 00000000000..de42caca652
--- /dev/null
+++ b/packages/admin-ui/src/FilePicker/primitives/components/previews/ImagePreview/index.ts
@@ -0,0 +1 @@
+export * from "./ImagePreview";
diff --git a/packages/admin-ui/src/FilePicker/primitives/components/previews/ItemActions.tsx b/packages/admin-ui/src/FilePicker/primitives/components/previews/ItemActions.tsx
new file mode 100644
index 00000000000..a92e0aa0d67
--- /dev/null
+++ b/packages/admin-ui/src/FilePicker/primitives/components/previews/ItemActions.tsx
@@ -0,0 +1,91 @@
+import React from "react";
+import { ReactComponent as ReplaceIcon } from "@webiny/icons/file_upload.svg";
+import { ReactComponent as EditIcon } from "@webiny/icons/edit.svg";
+import { ReactComponent as TrashIcon } from "@webiny/icons/delete.svg";
+import { IconButton } from "~/Button";
+import { Icon } from "~/Icon";
+import { cn } from "~/utils";
+
+interface ItemActionsProps extends React.HTMLAttributes<HTMLDivElement> {
+    onRemoveItem?: () => void;
+    onEditItem?: () => void;
+    onReplaceItem?: () => void;
+    disabled?: boolean;
+    small?: boolean;
+}
+
+const ItemActions = ({
+    disabled,
+    onRemoveItem,
+    onEditItem,
+    onReplaceItem,
+    small,
+    className,
+    ...props
+}: ItemActionsProps) => {
+    const iconSize = small ? "default" : "lg";
+    const buttonSize = small ? "xs" : "sm";
+
+    return (
+        <div
+            {...props}
+            className={cn("wby-flex wby-justify-center wby-items-center wby-gap-xs", className)}
+        >
+            {small && onReplaceItem && (
+                <IconButton
+                    icon={
+                        <Icon
+                            icon={<ReplaceIcon />}
+                            label={"Replace"}
+                            size={"md"}
+                            color={"neutral-light"}
+                        />
+                    }
+                    variant={"ghost"}
+                    size={buttonSize}
+                    iconSize={iconSize}
+                    onClick={onReplaceItem}
+                    disabled={disabled}
+                />
+            )}
+
+            {onEditItem && (
+                <IconButton
+                    icon={
+                        <Icon
+                            icon={<EditIcon />}
+                            label={"Edit"}
+                            size={"md"}
+                            color={"neutral-light"}
+                        />
+                    }
+                    variant={"ghost"}
+                    size={buttonSize}
+                    iconSize={iconSize}
+                    onClick={onEditItem}
+                    disabled={disabled}
+                />
+            )}
+
+            {onRemoveItem && (
+                <IconButton
+                    icon={
+                        <Icon
+                            icon={<TrashIcon />}
+                            label={"Remove"}
+                            size={"md"}
+                            color={"neutral-light"}
+                        />
+                    }
+                    variant={"ghost"}
+                    size={buttonSize}
+                    iconSize={iconSize}
+                    onClick={onRemoveItem}
+                    disabled={disabled}
+                />
+            )}
+        </div>
+    );
+};
+
+export { ItemActions, type ItemActionsProps };
diff --git a/packages/admin-ui/src/FilePicker/primitives/components/previews/ItemDescription.tsx b/packages/admin-ui/src/FilePicker/primitives/components/previews/ItemDescription.tsx
new file mode 100644
index 00000000000..984d319fd07
--- /dev/null
+++ b/packages/admin-ui/src/FilePicker/primitives/components/previews/ItemDescription.tsx
@@ -0,0 +1,49 @@
+import React from "react";
+import bytes from "bytes";
+import { Text } from "~/Text";
+import { cn } from "~/utils";
+import type { FileItemFormatted } from "~/FilePicker";
+
+interface ItemDescriptionProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+    item: FileItemFormatted;
+    disabled?: boolean;
+    small?: boolean;
+}
+
+const ItemDescription = ({ className, disabled, item, small, ...props }: ItemDescriptionProps) => {
+    const formattedSize = item.size && bytes.format(item.size, { unitSeparator: " " });
+
+    return (
+        <div
+            className={cn(
+                "wby-flex wby-flex-col wby-gap-xxs wby-overflow-hidden wby-flex-1 wby-min-w-0",
+                className
+            )}
+            {...props}
+        >
+            <Text
+                size="sm"
+                as="div"
+                className={cn(
+                    "wby-truncate wby-overflow-hidden wby-whitespace-nowrap wby-w-full",
+                    disabled ? "wby-text-neutral-disabled" : "wby-text-neutral-primary"
+                )}
+            >
+                {item.name}
+            </Text>
+            {!small && (formattedSize || item.mimeType) && (
+                <Text
+                    size="sm"
+                    className={cn(
+                        "wby-truncate wby-overflow-hidden wby-whitespace-nowrap wby-w-full",
+                        disabled ? "wby-text-neutral-disabled" : "wby-text-neutral-muted"
+                    )}
+                >
+                    {[formattedSize, item.mimeType].filter(Boolean).join(" - ")}
+                </Text>
+            )}
+        </div>
+    );
+};
+
+export { ItemDescription, type ItemDescriptionProps };
diff --git a/packages/admin-ui/src/FilePicker/primitives/components/previews/RichItemPreview/RichItemPreview.tsx b/packages/admin-ui/src/FilePicker/primitives/components/previews/RichItemPreview/RichItemPreview.tsx
new file mode 100644
index 00000000000..8f641e577f0
--- /dev/null
+++ b/packages/admin-ui/src/FilePicker/primitives/components/previews/RichItemPreview/RichItemPreview.tsx
@@ -0,0 +1,60 @@
+import React from "react";
+import { cn, makeDecoratable } from "~/utils";
+import { RichItemThumbnail } from "./RichItemThumbnail";
+import { ItemDescription } from "../ItemDescription";
+import { ItemActions } from "~/FilePicker/primitives/components/previews/ItemActions";
+import { previewVariants } from "../variants";
+import type { FilePreviewDefaultProps } from "../../types";
+
+type RichItemPreviewProps = FilePreviewDefaultProps & {
+    preview?: "thumbnail" | "file-type" | "placeholder";
+};
+
+const DecoratableRichItemPreview = ({
+    className,
+    disabled,
+    onRemoveItem,
+    onReplaceItem,
+    onEditItem,
+    value,
+    variant,
+    preview,
+    ...props
+}: RichItemPreviewProps) => {
+    return (
+        <div
+            data-testid="image-preview"
+            className={cn(
+                "wby-w-full wby-rounded-md",
+                previewVariants({ variant, disabled }),
+                className
+            )}
+            {...props}
+        >
+            <div
+                data-role="select-image"
+                className="wby-flex wby-items-center wby-justify-between wby-gap-sm-extra wby-min-w-0"
+            >
+                <div
+                    className="wby-flex wby-items-center wby-justify-between wby-flex-1 wby-cursor-pointer wby-gap-sm-extra wby-self-stretch wby-min-w-0"
+                    onClick={onReplaceItem}
+                >
+                    <RichItemThumbnail {...value} disabled={disabled} preview={preview} />
+                    <ItemDescription item={value} disabled={disabled} />
+                </div>
+
+                <ItemActions
+                    onRemoveItem={onRemoveItem}
+                    onReplaceItem={onReplaceItem}
+                    onEditItem={onEditItem}
+                    disabled={disabled}
+                    className={"wby-pr-sm-extra"}
+                />
+            </div>
+        </div>
+    );
+};
+
+const RichItemPreview = makeDecoratable("RichItemPreview", DecoratableRichItemPreview);
+
+export { RichItemPreview, type RichItemPreviewProps };
diff --git a/packages/admin-ui/src/FilePicker/primitives/components/previews/RichItemPreview/RichItemThumbnail.tsx b/packages/admin-ui/src/FilePicker/primitives/components/previews/RichItemPreview/RichItemThumbnail.tsx
new file mode 100644
index 00000000000..9cd3492d264
--- /dev/null
+++ b/packages/admin-ui/src/FilePicker/primitives/components/previews/RichItemPreview/RichItemThumbnail.tsx
@@ -0,0 +1,111 @@
+import React from "react";
+import { ReactComponent as PlaceholderIcon } from "@webiny/icons/image.svg";
+import type { FileItemFormatted } from "~/FilePicker";
+import { Icon } from "~/Icon";
+import { cn } from "~/utils";
+import type { RichItemPreviewProps } from "~/FilePicker/primitives/components";
+
+import csvThumb from "../assets/csv.svg";
+import docThumb from "../assets/doc.svg";
+import docxThumb from "../assets/docx.svg";
+import fileThumb from "../assets/file.svg";
+import pdfThumb from "../assets/pdf.svg";
+import pptThumb from "../assets/ppt.svg";
+import pptxThumb from "../assets/pptx.svg";
+import txtThumb from "../assets/txt.svg";
+import xlsThumb from "../assets/xls.svg";
+import xlsxThumb from "../assets/xlsx.svg";
+
+type RichItemThumbnailProps = Omit<React.HTMLAttributes<HTMLDivElement>, "children"> &
+    FileItemFormatted & {
+        preview?: RichItemPreviewProps["preview"];
+        disabled?: boolean;
+    };
+
+type ThumbnailProps = Pick<FileItemFormatted, "url" | "name">;
+
+const Thumbnail = ({ url, name }: ThumbnailProps) => {
+    return (
+        <div className={"wby-size-full wby-bg-neutral-muted"}>
+            <img src={url} alt={name} className="wby-size-full wby-object-cover" />
+        </div>
+    );
+};
+
+type FileTypeProps = Pick<FileItemFormatted, "mimeType" | "name">;
+
+const FileType = ({ mimeType = "", name }: FileTypeProps) => {
+    const getMimeTypeSrc = (mimeType: string) => {
+        switch (mimeType) {
+            case "text/csv": // .csv
+                return csvThumb;
+            case "application/msword": // .doc
+                return docThumb;
+            case "application/vnd.openxmlformats-officedocument.wordprocessingml.document": // .docx
+                return docxThumb;
+            case "application/pdf": // .pdf
+                return pdfThumb;
+            case "application/vnd.ms-powerpoint": // .ppt
+                return pptThumb;
+            case "application/vnd.openxmlformats-officedocument.presentationml.presentation": // .pptx
+                return pptxThumb;
+            case "text/plain": // .txt
+                return txtThumb;
+            case "application/vnd.ms-excel": // .xls
+                return xlsThumb;
+            case "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": // .xlsx
+                return xlsxThumb;
+            default:
+                return fileThumb;
+        }
+    };
+
+    return (
+        <img src={getMimeTypeSrc(mimeType)} alt={name} className="wby-size-full wby-p-sm-extra" />
+    );
+};
+
+type PlaceholderProps = Pick<FileItemFormatted, "name">;
+
+const Placeholder = ({ name }: PlaceholderProps) => {
+    return (
+        <div
+            className={
+                "wby-size-full wby-flex wby-justify-center wby-items-center wby-bg-transparent"
+            }
+        >
+            <Icon icon={<PlaceholderIcon />} label={name} size={"lg"} color={"neutral-light"} />
+        </div>
+    );
+};
+
+const RichItemThumbnail = ({
+    url,
+    name,
+    className,
+    mimeType,
+    preview,
+    disabled
+}: RichItemThumbnailProps) => {
+    const isImage = mimeType?.startsWith("image/");
+
+    return (
+        <div
+            className={cn(
+                "wby-size-[56px] wby-m-xs wby-rounded-sm wby-overflow-hidden wby-relative",
+                disabled && "[&_img]:wby-filter [&_img]:wby-grayscale [&_img]:wby-opacity-50",
+                className
+            )}
+        >
+            {preview === "thumbnail" || isImage ? (
+                <Thumbnail url={url} name={name} />
+            ) : preview === "placeholder" ? (
+                <Placeholder name={name} />
+            ) : (
+                <FileType mimeType={mimeType} name={name} />
+            )}
+        </div>
+    );
+};
+
+export { RichItemThumbnail, type RichItemThumbnailProps };
diff --git a/packages/admin-ui/src/FilePicker/primitives/components/previews/RichItemPreview/index.ts b/packages/admin-ui/src/FilePicker/primitives/components/previews/RichItemPreview/index.ts
new file mode 100644
index 00000000000..5380708c3b9
--- /dev/null
+++ b/packages/admin-ui/src/FilePicker/primitives/components/previews/RichItemPreview/index.ts
@@ -0,0 +1 @@
+export * from "./RichItemPreview";
diff --git a/packages/admin-ui/src/FilePicker/primitives/components/previews/TextOnlyPreview/TextOnlyPreview.tsx b/packages/admin-ui/src/FilePicker/primitives/components/previews/TextOnlyPreview/TextOnlyPreview.tsx
new file mode 100644
index 00000000000..17e5a68d8f3
--- /dev/null
+++ b/packages/admin-ui/src/FilePicker/primitives/components/previews/TextOnlyPreview/TextOnlyPreview.tsx
@@ -0,0 +1,69 @@
+import React from "react";
+import { cn, cva, makeDecoratable, type VariantProps } from "~/utils";
+import { ItemDescription } from "../ItemDescription";
+import { ItemActions } from "~/FilePicker/primitives/components/previews/ItemActions";
+import type { FilePreviewDefaultProps } from "../../types";
+import { previewVariants } from "../variants";
+
+const textOnlyPreviewVariants = cva(
+    "wby-w-full wby-flex wby-items-center wby-justify-between wby-gap-sm wby-min-w-0",
+    {
+        variants: {
+            small: {
+                true: "wby-px-sm wby-py-xs wby-rounded-xs",
+                false: "wby-px-sm wby-py-xs-plus wby-rounded-md"
+            }
+        },
+        defaultVariants: {
+            small: false
+        }
+    }
+);
+
+type TextOnlyPreviewProps = FilePreviewDefaultProps &
+    React.HTMLAttributes<HTMLDivElement> &
+    VariantProps<typeof previewVariants> &
+    VariantProps<typeof textOnlyPreviewVariants>;
+
+const DecoratableTextOnlyPreview = ({
+    className,
+    disabled,
+    onRemoveItem,
+    onReplaceItem,
+    onEditItem,
+    small,
+    variant,
+    value,
+    ...props
+}: TextOnlyPreviewProps) => {
+    return (
+        <div
+            data-testid="image-preview"
+            className={cn(
+                textOnlyPreviewVariants({ small }),
+                previewVariants({ variant, disabled }),
+                className
+            )}
+            {...props}
+        >
+            <div
+                data-role="select-image"
+                onClick={onReplaceItem}
+                className={"wby-overflow-hidden wby-flex-1 wby-min-w-0 wby-cursor-pointer"}
+            >
+                <ItemDescription item={value} disabled={disabled} small={!!small} />
+            </div>
+            <ItemActions
+                onRemoveItem={onRemoveItem}
+                onReplaceItem={onReplaceItem}
+                onEditItem={onEditItem}
+                small={!!small}
+                disabled={disabled}
+            />
+        </div>
+    );
+};
+
+const TextOnlyPreview = makeDecoratable("TextOnlyPreview", DecoratableTextOnlyPreview);
+
+export { TextOnlyPreview, type TextOnlyPreviewProps };
diff --git a/packages/admin-ui/src/FilePicker/primitives/components/previews/TextOnlyPreview/index.ts b/packages/admin-ui/src/FilePicker/primitives/components/previews/TextOnlyPreview/index.ts
new file mode 100644
index 00000000000..a09ddd7c849
--- /dev/null
+++ b/packages/admin-ui/src/FilePicker/primitives/components/previews/TextOnlyPreview/index.ts
@@ -0,0 +1 @@
+export * from "./TextOnlyPreview";
diff --git a/packages/admin-ui/src/FilePicker/primitives/components/previews/assets/csv.svg b/packages/admin-ui/src/FilePicker/primitives/components/previews/assets/csv.svg
new file mode 100644
index 00000000000..6bf502125c7
--- /dev/null
+++ b/packages/admin-ui/src/FilePicker/primitives/components/previews/assets/csv.svg
@@ -0,0 +1,24 @@
+<svg width="40" height="41" viewBox="0 0 40 41" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3578_344)">
+<path d="M34.9998 8.83329V36.8761C34.9998 39.0852 33.209 40.8761 30.9998 40.8761H9C6.79086 40.8761 5 39.0852 5 36.8761V4.8761C5 2.66696 6.79086 0.876099 9 0.876099H26.3367L34.9998 8.83329Z" fill="#00C76A"/>
+<g filter="url(#filter0_d_3578_344)">
+<path d="M34.9998 8.83329H27.3367C26.7844 8.83329 26.3367 8.38557 26.3367 7.83329V0.876099L34.9998 8.83329Z" fill="#ABEFC6"/>
+</g>
+<path d="M16.2726 30.1495H14.7172C14.6888 29.9483 14.6308 29.7696 14.5432 29.6133C14.4556 29.4547 14.3432 29.3198 14.2059 29.2085C14.0686 29.0972 13.9099 29.012 13.73 28.9528C13.5525 28.8936 13.3595 28.864 13.1512 28.864C12.7748 28.864 12.4469 28.9575 12.1675 29.1446C11.8882 29.3292 11.6715 29.5991 11.5177 29.9542C11.3638 30.307 11.2868 30.7355 11.2868 31.2397C11.2868 31.7582 11.3638 32.1938 11.5177 32.5466C11.6739 32.8993 11.8917 33.1656 12.1711 33.3456C12.4504 33.5255 12.7736 33.6154 13.1405 33.6154C13.3465 33.6154 13.5371 33.5882 13.7123 33.5338C13.8898 33.4793 14.0473 33.4 14.1846 33.2958C14.3219 33.1893 14.4355 33.0603 14.5255 32.9088C14.6178 32.7573 14.6817 32.5844 14.7172 32.3903L16.2726 32.3974C16.2324 32.7312 16.1318 33.0532 15.9708 33.3633C15.8122 33.6711 15.5979 33.9469 15.328 34.1907C15.0605 34.4322 14.7409 34.624 14.3692 34.766C13.9999 34.9057 13.5821 34.9755 13.1157 34.9755C12.467 34.9755 11.887 34.8288 11.3756 34.5352C10.8666 34.2416 10.4642 33.8167 10.1682 33.2603C9.87467 32.704 9.72789 32.0305 9.72789 31.2397C9.72789 30.4466 9.87704 29.7719 10.1753 29.2156C10.4736 28.6592 10.8785 28.2355 11.3898 27.9443C11.9012 27.6507 12.4765 27.5039 13.1157 27.5039C13.5371 27.5039 13.9277 27.5631 14.2876 27.6815C14.6498 27.7999 14.9706 27.9727 15.2499 28.2C15.5293 28.4249 15.7565 28.7007 15.9317 29.0274C16.1093 29.3541 16.2229 29.7281 16.2726 30.1495ZM21.3206 29.695C21.2922 29.4085 21.1702 29.186 20.9548 29.0274C20.7394 28.8688 20.447 28.7895 20.0777 28.7895C19.8267 28.7895 19.6148 28.825 19.442 28.896C19.2692 28.9646 19.1366 29.0605 19.0443 29.1836C18.9543 29.3067 18.9094 29.4464 18.9094 29.6027C18.9046 29.7329 18.9318 29.8465 18.991 29.9436C19.0526 30.0406 19.1366 30.1247 19.2432 30.1957C19.3497 30.2644 19.4728 30.3247 19.6125 30.3768C19.7522 30.4265 19.9013 30.4691 20.0599 30.5046L20.7133 30.6609C21.0306 30.7319 21.3218 30.8266 21.5869 30.945C21.8521 31.0634 22.0817 31.209 22.2758 31.3818C22.47 31.5546 22.6203 31.7582 22.7268 31.9926C22.8357 32.227 22.8914 32.4957 22.8937 32.7987C22.8914 33.2438 22.7777 33.6296 22.5528 33.9564C22.3303 34.2807 22.0083 34.5328 21.5869 34.7127C21.1679 34.8903 20.6624 34.9791 20.0706 34.9791C19.4835 34.9791 18.9721 34.8891 18.5365 34.7092C18.1032 34.5293 17.7647 34.2629 17.5209 33.9102C17.2794 33.5551 17.1527 33.1159 17.1409 32.5927H18.6288C18.6454 32.8366 18.7152 33.0402 18.8383 33.2035C18.9638 33.3645 19.1307 33.4864 19.339 33.5693C19.5497 33.6498 19.7877 33.69 20.0528 33.69C20.3132 33.69 20.5393 33.6521 20.7311 33.5764C20.9252 33.5006 21.0756 33.3953 21.1821 33.2603C21.2886 33.1254 21.3419 32.9703 21.3419 32.7951C21.3419 32.6318 21.2934 32.4945 21.1963 32.3832C21.1016 32.2719 20.9619 32.1772 20.7773 32.0991C20.595 32.021 20.3712 31.95 20.1061 31.886L19.3142 31.6872C18.701 31.538 18.2169 31.3048 17.8618 30.9876C17.5067 30.6704 17.3303 30.243 17.3327 29.7056C17.3303 29.2653 17.4475 28.8806 17.6842 28.5515C17.9233 28.2225 18.2512 27.9656 18.6679 27.7809C19.0845 27.5963 19.558 27.5039 20.0883 27.5039C20.6281 27.5039 21.0992 27.5963 21.5017 27.7809C21.9065 27.9656 22.2214 28.2225 22.4463 28.5515C22.6712 28.8806 22.7872 29.2618 22.7943 29.695H21.3206ZM25.2419 27.6034L26.9997 33.1289H27.0672L28.8286 27.6034H30.5331L28.026 34.8761H26.0445L23.5338 27.6034H25.2419Z" fill="white"/>
+</g>
+<defs>
+<filter id="filter0_d_3578_344" x="23.3367" y="-0.123901" width="12.6631" height="11.9572" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="-1" dy="1"/>
+<feGaussianBlur stdDeviation="1"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3578_344"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3578_344" result="shape"/>
+</filter>
+<clipPath id="clip0_3578_344">
+<rect width="40" height="40" fill="white" transform="translate(0 0.876099)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/admin-ui/src/FilePicker/primitives/components/previews/assets/doc.svg b/packages/admin-ui/src/FilePicker/primitives/components/previews/assets/doc.svg
new file mode 100644
index 00000000000..bb7d6a948f1
--- /dev/null
+++ b/packages/admin-ui/src/FilePicker/primitives/components/previews/assets/doc.svg
@@ -0,0 +1,24 @@
+<svg width="40" height="41" viewBox="0 0 40 41" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3578_365)">
+<path d="M34.9998 8.83329V36.8761C34.9998 39.0852 33.209 40.8761 30.9998 40.8761H9C6.79086 40.8761 5 39.0852 5 36.8761V4.8761C5 2.66696 6.79086 0.876099 9 0.876099H26.3367L34.9998 8.83329Z" fill="#2650B1"/>
+<g filter="url(#filter0_d_3578_365)">
+<path d="M34.9998 8.83329H27.3367C26.7844 8.83329 26.3367 8.38557 26.3367 7.83329V0.876099L34.9998 8.83329Z" fill="#C7D7FE"/>
+</g>
+<path d="M12.7115 33.8761H10.3912V27.3306H12.7306C13.389 27.3306 13.9558 27.4617 14.4309 27.7238C14.9061 27.9837 15.2715 28.3576 15.5272 28.8456C15.785 29.3335 15.9139 29.9173 15.9139 30.597C15.9139 31.2788 15.785 31.8647 15.5272 32.3548C15.2715 32.8448 14.9039 33.2209 14.4245 33.483C13.9473 33.7451 13.3762 33.8761 12.7115 33.8761ZM11.775 32.6904H12.6539C13.063 32.6904 13.4071 32.6179 13.6863 32.473C13.9675 32.326 14.1784 32.0991 14.3191 31.7923C14.4618 31.4833 14.5332 31.0849 14.5332 30.597C14.5332 30.1133 14.4618 29.7181 14.3191 29.4113C14.1784 29.1044 13.9686 28.8786 13.6895 28.7337C13.4103 28.5888 13.0662 28.5164 12.6571 28.5164H11.775V32.6904ZM22.9539 30.6034C22.9539 31.3171 22.8186 31.9244 22.548 32.4251C22.2796 32.9258 21.9131 33.3083 21.4486 33.5725C20.9862 33.8346 20.4664 33.9656 19.8889 33.9656C19.3073 33.9656 18.7852 33.8335 18.3229 33.5693C17.8605 33.3051 17.4951 32.9226 17.2267 32.4219C16.9582 31.9212 16.824 31.315 16.824 30.6034C16.824 29.8896 16.9582 29.2823 17.2267 28.7816C17.4951 28.2809 17.8605 27.8995 18.3229 27.6375C18.7852 27.3733 19.3073 27.2412 19.8889 27.2412C20.4664 27.2412 20.9862 27.3733 21.4486 27.6375C21.9131 27.8995 22.2796 28.2809 22.548 28.7816C22.8186 29.2823 22.9539 29.8896 22.9539 30.6034ZM21.5509 30.6034C21.5509 30.141 21.4816 29.7511 21.3431 29.4336C21.2068 29.1162 21.0139 28.8754 20.7646 28.7113C20.5154 28.5473 20.2235 28.4652 19.8889 28.4652C19.5544 28.4652 19.2625 28.5473 19.0132 28.7113C18.7639 28.8754 18.57 29.1162 18.4316 29.4336C18.2952 29.7511 18.227 30.141 18.227 30.6034C18.227 31.0657 18.2952 31.4556 18.4316 31.7731C18.57 32.0906 18.7639 32.3314 19.0132 32.4954C19.2625 32.6595 19.5544 32.7415 19.8889 32.7415C20.2235 32.7415 20.5154 32.6595 20.7646 32.4954C21.0139 32.3314 21.2068 32.0906 21.3431 31.7731C21.4816 31.4556 21.5509 31.0657 21.5509 30.6034ZM29.7543 29.6222H28.3544C28.3288 29.4411 28.2766 29.2802 28.1978 29.1396C28.119 28.9968 28.0178 28.8754 27.8942 28.7752C27.7706 28.6751 27.6278 28.5984 27.4659 28.5451C27.3061 28.4919 27.1325 28.4652 26.945 28.4652C26.6062 28.4652 26.3111 28.5494 26.0597 28.7177C25.8082 28.8839 25.6133 29.1268 25.4748 29.4464C25.3363 29.7639 25.267 30.1495 25.267 30.6034C25.267 31.07 25.3363 31.462 25.4748 31.7795C25.6154 32.097 25.8114 32.3367 26.0629 32.4986C26.3143 32.6605 26.6051 32.7415 26.9354 32.7415C27.1207 32.7415 27.2923 32.717 27.4499 32.668C27.6097 32.619 27.7514 32.5476 27.875 32.4539C27.9986 32.358 28.1009 32.2419 28.1818 32.1055C28.2649 31.9691 28.3224 31.8136 28.3544 31.6389L29.7543 31.6453C29.718 31.9457 29.6275 32.2355 29.4826 32.5146C29.3398 32.7916 29.147 33.0398 28.9041 33.2593C28.6634 33.4766 28.3757 33.6492 28.0412 33.777C27.7088 33.9027 27.3327 33.9656 26.913 33.9656C26.3292 33.9656 25.8072 33.8335 25.3469 33.5693C24.8888 33.3051 24.5266 32.9226 24.2603 32.4219C23.9961 31.9212 23.864 31.315 23.864 30.6034C23.864 29.8896 23.9982 29.2823 24.2667 28.7816C24.5352 28.2809 24.8995 27.8995 25.3597 27.6375C25.82 27.3733 26.3377 27.2412 26.913 27.2412C27.2923 27.2412 27.6438 27.2944 27.9677 27.401C28.2937 27.5075 28.5824 27.663 28.8338 27.8676C29.0852 28.07 29.2898 28.3182 29.4474 28.6122C29.6072 28.9063 29.7095 29.2429 29.7543 29.6222Z" fill="white"/>
+</g>
+<defs>
+<filter id="filter0_d_3578_365" x="23.3367" y="-0.123901" width="12.6631" height="11.9572" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="-1" dy="1"/>
+<feGaussianBlur stdDeviation="1"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3578_365"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3578_365" result="shape"/>
+</filter>
+<clipPath id="clip0_3578_365">
+<rect width="40" height="40" fill="white" transform="translate(0 0.876099)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/admin-ui/src/FilePicker/primitives/components/previews/assets/docx.svg b/packages/admin-ui/src/FilePicker/primitives/components/previews/assets/docx.svg
new file mode 100644
index 00000000000..533b28b5570
--- /dev/null
+++ b/packages/admin-ui/src/FilePicker/primitives/components/previews/assets/docx.svg
@@ -0,0 +1,24 @@
+<svg width="40" height="41" viewBox="0 0 40 41" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3578_347)">
+<path d="M34.9998 8.83329V36.8761C34.9998 39.0852 33.209 40.8761 30.9998 40.8761H9C6.79086 40.8761 5 39.0852 5 36.8761V4.8761C5 2.66696 6.79086 0.876099 9 0.876099H26.3367L34.9998 8.83329Z" fill="#2650B1"/>
+<g filter="url(#filter0_d_3578_347)">
+<path d="M34.9998 8.83329H27.3367C26.7844 8.83329 26.3367 8.38557 26.3367 7.83329V0.876099L34.9998 8.83329Z" fill="#C7D7FE"/>
+</g>
+<path d="M9.72399 33.8761H7.50595V27.3306H9.76873C10.4186 27.3306 10.9768 27.4617 11.4434 27.7238C11.9122 27.9837 12.2723 28.3576 12.5237 28.8456C12.7751 29.3335 12.9008 29.9173 12.9008 30.597C12.9008 31.2788 12.7741 31.8647 12.5205 32.3548C12.2691 32.8448 11.9058 33.2209 11.4307 33.483C10.9577 33.7451 10.3888 33.8761 9.72399 33.8761ZM8.69167 32.8502H9.66646C10.1224 32.8502 10.5028 32.7671 10.8074 32.6009C11.1121 32.4326 11.3412 32.1822 11.4946 31.8498C11.648 31.5153 11.7247 31.0977 11.7247 30.597C11.7247 30.0963 11.648 29.6808 11.4946 29.3505C11.3412 29.0181 11.1143 28.7699 10.8138 28.6059C10.5155 28.4397 10.1448 28.3566 9.70162 28.3566H8.69167V32.8502ZM19.8762 30.6034C19.8762 31.3086 19.7441 31.9127 19.4798 32.4155C19.2178 32.9162 18.8598 33.2997 18.406 33.5661C17.9543 33.8324 17.4419 33.9656 16.8687 33.9656C16.2955 33.9656 15.782 33.8324 15.3282 33.5661C14.8765 33.2976 14.5186 32.913 14.2544 32.4123C13.9923 31.9095 13.8612 31.3065 13.8612 30.6034C13.8612 29.8981 13.9923 29.2951 14.2544 28.7944C14.5186 28.2916 14.8765 27.907 15.3282 27.6407C15.782 27.3743 16.2955 27.2412 16.8687 27.2412C17.4419 27.2412 17.9543 27.3743 18.406 27.6407C18.8598 27.907 19.2178 28.2916 19.4798 28.7944C19.7441 29.2951 19.8762 29.8981 19.8762 30.6034ZM18.684 30.6034C18.684 30.1069 18.6063 29.6882 18.4507 29.3473C18.2973 29.0043 18.0843 28.7454 17.8115 28.5707C17.5388 28.3939 17.2245 28.3054 16.8687 28.3054C16.5129 28.3054 16.1986 28.3939 15.9259 28.5707C15.6531 28.7454 15.439 29.0043 15.2835 29.3473C15.1301 29.6882 15.0534 30.1069 15.0534 30.6034C15.0534 31.0998 15.1301 31.5196 15.2835 31.8626C15.439 32.2035 15.6531 32.4624 15.9259 32.6392C16.1986 32.814 16.5129 32.9013 16.8687 32.9013C17.2245 32.9013 17.5388 32.814 17.8115 32.6392C18.0843 32.4624 18.2973 32.2035 18.4507 31.8626C18.6063 31.5196 18.684 31.0998 18.684 30.6034ZM26.5998 29.5391H25.4045C25.3704 29.3431 25.3075 29.1694 25.2159 29.0181C25.1243 28.8647 25.0103 28.7348 24.8739 28.6282C24.7376 28.5217 24.582 28.4418 24.4073 28.3885C24.2347 28.3331 24.0483 28.3054 23.848 28.3054C23.4922 28.3054 23.1768 28.3949 22.902 28.5739C22.6271 28.7507 22.4119 29.0107 22.2564 29.3537C22.1009 29.6946 22.0231 30.1112 22.0231 30.6034C22.0231 31.1041 22.1009 31.526 22.2564 31.869C22.4141 32.2099 22.6293 32.4677 22.902 32.6424C23.1768 32.815 23.4911 32.9013 23.8448 32.9013C24.0408 32.9013 24.2241 32.8757 24.3945 32.8246C24.5671 32.7713 24.7216 32.6936 24.858 32.5913C24.9964 32.489 25.1126 32.3633 25.2063 32.2142C25.3022 32.065 25.3683 31.8946 25.4045 31.7028L26.5998 31.7092C26.555 32.0203 26.4581 32.3122 26.3089 32.5849C26.1619 32.8576 25.9691 33.0984 25.7305 33.3072C25.4918 33.5139 25.2127 33.6758 24.8931 33.793C24.5735 33.9081 24.2188 33.9656 23.8288 33.9656C23.2536 33.9656 22.7401 33.8324 22.2884 33.5661C21.8366 33.2997 21.4808 32.9152 21.2209 32.4123C20.9609 31.9095 20.831 31.3065 20.831 30.6034C20.831 29.8981 20.962 29.2951 21.2241 28.7944C21.4862 28.2916 21.843 27.907 22.2947 27.6407C22.7464 27.3743 23.2578 27.2412 23.8288 27.2412C24.1932 27.2412 24.532 27.2923 24.8452 27.3946C25.1584 27.4968 25.4375 27.6471 25.6825 27.8452C25.9276 28.0412 26.1289 28.282 26.2866 28.5675C26.4464 28.8509 26.5508 29.1747 26.5998 29.5391ZM28.5621 27.3306L30.0036 29.7277H30.0547L31.5025 27.3306H32.8544L30.8377 30.6034L32.8864 33.8761H31.5121L30.0547 31.4951H30.0036L28.5462 33.8761H27.1783L29.2461 30.6034L27.2038 27.3306H28.5621Z" fill="white"/>
+</g>
+<defs>
+<filter id="filter0_d_3578_347" x="23.3367" y="-0.123901" width="12.6631" height="11.9572" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="-1" dy="1"/>
+<feGaussianBlur stdDeviation="1"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3578_347"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3578_347" result="shape"/>
+</filter>
+<clipPath id="clip0_3578_347">
+<rect width="40" height="40" fill="white" transform="translate(0 0.876099)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/admin-ui/src/FilePicker/primitives/components/previews/assets/file.svg b/packages/admin-ui/src/FilePicker/primitives/components/previews/assets/file.svg
new file mode 100644
index 00000000000..c9cab15099d
--- /dev/null
+++ b/packages/admin-ui/src/FilePicker/primitives/components/previews/assets/file.svg
@@ -0,0 +1,24 @@
+<svg width="40" height="41" viewBox="0 0 40 41" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_4234_23464)">
+<path d="M34.9998 8.83329V36.8761C34.9998 39.0852 33.209 40.8761 30.9998 40.8761H9C6.79086 40.8761 5 39.0852 5 36.8761V4.8761C5 2.66696 6.79086 0.876099 9 0.876099H26.3367L34.9998 8.83329Z" fill="#59626D"/>
+<g filter="url(#filter0_d_4234_23464)">
+<path d="M34.9998 8.83329H27.3367C26.7844 8.83329 26.3367 8.38557 26.3367 7.83329V0.876099L34.9998 8.83329Z" fill="#BEC3CC"/>
+</g>
+<path d="M11.3667 33.8761V27.3306H15.7006V28.4716H12.7506V30.0313H15.4129V31.1723H12.7506V33.8761H11.3667ZM18.0153 27.3306V33.8761H16.6314V27.3306H18.0153ZM19.1539 33.8761V27.3306H20.5377V32.7351H23.3438V33.8761H19.1539ZM24.2603 33.8761V27.3306H28.6708V28.4716H25.6442V30.0313H28.4439V31.1723H25.6442V32.7351H28.6836V33.8761H24.2603Z" fill="white"/>
+</g>
+<defs>
+<filter id="filter0_d_4234_23464" x="23.3367" y="-0.123901" width="12.6631" height="11.9572" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="-1" dy="1"/>
+<feGaussianBlur stdDeviation="1"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_4234_23464"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_4234_23464" result="shape"/>
+</filter>
+<clipPath id="clip0_4234_23464">
+<rect width="40" height="40" fill="white" transform="translate(0 0.876099)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/admin-ui/src/FilePicker/primitives/components/previews/assets/pdf.svg b/packages/admin-ui/src/FilePicker/primitives/components/previews/assets/pdf.svg
new file mode 100644
index 00000000000..472d87d22ff
--- /dev/null
+++ b/packages/admin-ui/src/FilePicker/primitives/components/previews/assets/pdf.svg
@@ -0,0 +1,24 @@
+<svg width="40" height="41" viewBox="0 0 40 41" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3578_348)">
+<path d="M34.9998 8.83329V36.8761C34.9998 39.0852 33.209 40.8761 30.9998 40.8761H9C6.79086 40.8761 5 39.0852 5 36.8761V4.8761C5 2.66696 6.79086 0.876099 9 0.876099H26.3367L34.9998 8.83329Z" fill="#E72A2A"/>
+<g filter="url(#filter0_d_3578_348)">
+<path d="M34.9998 8.83329H27.3367C26.7844 8.83329 26.3367 8.38557 26.3367 7.83329V0.876099L34.9998 8.83329Z" fill="#FECDCA"/>
+</g>
+<path d="M10.8323 34.8761V27.6034H13.7016C14.2532 27.6034 14.7232 27.7087 15.1114 27.9194C15.4997 28.1278 15.7956 28.4178 15.9992 28.7895C16.2052 29.1588 16.3082 29.5849 16.3082 30.0679C16.3082 30.5508 16.204 30.977 15.9957 31.3463C15.7873 31.7156 15.4855 32.0032 15.0901 32.2092C14.6971 32.4152 14.2213 32.5181 13.6626 32.5181H11.8337V31.2859H13.414C13.7099 31.2859 13.9537 31.235 14.1455 31.1332C14.3396 31.029 14.484 30.8858 14.5787 30.7035C14.6758 30.5189 14.7243 30.307 14.7243 30.0679C14.7243 29.8264 14.6758 29.6157 14.5787 29.4358C14.484 29.2535 14.3396 29.1126 14.1455 29.0132C13.9514 28.9114 13.7052 28.8605 13.4069 28.8605H12.3699V34.8761H10.8323ZM19.885 34.8761H17.3069V27.6034H19.9063C20.6379 27.6034 21.2676 27.749 21.7955 28.0402C22.3235 28.329 22.7295 28.7445 23.0136 29.2866C23.3 29.8288 23.4433 30.4774 23.4433 31.2326C23.4433 31.9902 23.3 32.6412 23.0136 33.1858C22.7295 33.7303 22.3211 34.1481 21.7884 34.4393C21.2581 34.7305 20.6237 34.8761 19.885 34.8761ZM18.8445 33.5586H19.8211C20.2757 33.5586 20.658 33.4781 20.9681 33.3171C21.2806 33.1538 21.515 32.9017 21.6713 32.5608C21.8299 32.2175 21.9092 31.7748 21.9092 31.2326C21.9092 30.6952 21.8299 30.2561 21.6713 29.9152C21.515 29.5743 21.2818 29.3233 20.9717 29.1623C20.6615 29.0013 20.2792 28.9208 19.8247 28.9208H18.8445V33.5586ZM24.5823 34.8761V27.6034H29.3976V28.8711H26.1199V30.6041H29.078V31.8718H26.1199V34.8761H24.5823Z" fill="white"/>
+</g>
+<defs>
+<filter id="filter0_d_3578_348" x="23.3367" y="-0.123901" width="12.6631" height="11.9572" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="-1" dy="1"/>
+<feGaussianBlur stdDeviation="1"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3578_348"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3578_348" result="shape"/>
+</filter>
+<clipPath id="clip0_3578_348">
+<rect width="40" height="40" fill="white" transform="translate(0 0.876099)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/admin-ui/src/FilePicker/primitives/components/previews/assets/ppt.svg b/packages/admin-ui/src/FilePicker/primitives/components/previews/assets/ppt.svg
new file mode 100644
index 00000000000..9cde29f8167
--- /dev/null
+++ b/packages/admin-ui/src/FilePicker/primitives/components/previews/assets/ppt.svg
@@ -0,0 +1,24 @@
+<svg width="40" height="41" viewBox="0 0 40 41" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3578_341)">
+<path d="M34.9998 8.83329V36.8761C34.9998 39.0852 33.209 40.8761 30.9998 40.8761H9C6.79086 40.8761 5 39.0852 5 36.8761V4.8761C5 2.66696 6.79086 0.876099 9 0.876099H26.3367L34.9998 8.83329Z" fill="#E24B25"/>
+<g filter="url(#filter0_d_3578_341)">
+<path d="M34.9998 8.83329H27.3367C26.7844 8.83329 26.3367 8.38557 26.3367 7.83329V0.876099L34.9998 8.83329Z" fill="#FECDCA"/>
+</g>
+<path d="M10.8176 34.8761V27.6034H13.687C14.2386 27.6034 14.7085 27.7087 15.0968 27.9194C15.485 28.1278 15.781 28.4178 15.9846 28.7895C16.1905 29.1588 16.2935 29.5849 16.2935 30.0679C16.2935 30.5508 16.1893 30.977 15.981 31.3463C15.7727 31.7156 15.4708 32.0032 15.0755 32.2092C14.6825 32.4152 14.2066 32.5181 13.6479 32.5181H11.8191V31.2859H13.3993C13.6953 31.2859 13.9391 31.235 14.1309 31.1332C14.325 31.029 14.4694 30.8858 14.5641 30.7035C14.6612 30.5189 14.7097 30.307 14.7097 30.0679C14.7097 29.8264 14.6612 29.6157 14.5641 29.4358C14.4694 29.2535 14.325 29.1126 14.1309 29.0132C13.9367 28.9114 13.6905 28.8605 13.3922 28.8605H12.3553V34.8761H10.8176ZM17.2923 34.8761V27.6034H20.1616C20.7132 27.6034 21.1831 27.7087 21.5714 27.9194C21.9596 28.1278 22.2556 28.4178 22.4592 28.7895C22.6651 29.1588 22.7681 29.5849 22.7681 30.0679C22.7681 30.5508 22.6639 30.977 22.4556 31.3463C22.2473 31.7156 21.9454 32.0032 21.5501 32.2092C21.1571 32.4152 20.6812 32.5181 20.1225 32.5181H18.2937V31.2859H19.8739C20.1699 31.2859 20.4137 31.235 20.6055 31.1332C20.7996 31.029 20.944 30.8858 21.0387 30.7035C21.1358 30.5189 21.1843 30.307 21.1843 30.0679C21.1843 29.8264 21.1358 29.6157 21.0387 29.4358C20.944 29.2535 20.7996 29.1126 20.6055 29.0132C20.4113 28.9114 20.1651 28.8605 19.8668 28.8605H18.8299V34.8761H17.2923ZM23.4899 28.8711V27.6034H29.4629V28.8711H27.2363V34.8761H25.7164V28.8711H23.4899Z" fill="white"/>
+</g>
+<defs>
+<filter id="filter0_d_3578_341" x="23.3367" y="-0.123901" width="12.6631" height="11.9572" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="-1" dy="1"/>
+<feGaussianBlur stdDeviation="1"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3578_341"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3578_341" result="shape"/>
+</filter>
+<clipPath id="clip0_3578_341">
+<rect width="40" height="40" fill="white" transform="translate(0 0.876099)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/admin-ui/src/FilePicker/primitives/components/previews/assets/pptx.svg b/packages/admin-ui/src/FilePicker/primitives/components/previews/assets/pptx.svg
new file mode 100644
index 00000000000..86ba368d4c0
--- /dev/null
+++ b/packages/admin-ui/src/FilePicker/primitives/components/previews/assets/pptx.svg
@@ -0,0 +1,24 @@
+<svg width="40" height="41" viewBox="0 0 40 41" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3578_340)">
+<path d="M34.9998 8.83329V36.8761C34.9998 39.0852 33.209 40.8761 30.9998 40.8761H9C6.79086 40.8761 5 39.0852 5 36.8761V4.8761C5 2.66696 6.79086 0.876099 9 0.876099H26.3367L34.9998 8.83329Z" fill="#E24B25"/>
+<g filter="url(#filter0_d_3578_340)">
+<path d="M34.9998 8.83329H27.3367C26.7844 8.83329 26.3367 8.38557 26.3367 7.83329V0.876099L34.9998 8.83329Z" fill="#FECDCA"/>
+</g>
+<path d="M8.51909 33.8761V27.3306H11.1015C11.5979 27.3306 12.0209 27.4255 12.3703 27.6151C12.7197 27.8026 12.9861 28.0636 13.1693 28.3981C13.3547 28.7305 13.4474 29.114 13.4474 29.5487C13.4474 29.9833 13.3536 30.3669 13.1661 30.6993C12.9786 31.0316 12.7069 31.2905 12.3511 31.4759C11.9974 31.6613 11.5692 31.7539 11.0663 31.7539H9.42037V30.6449H10.8426C11.1089 30.6449 11.3284 30.5991 11.501 30.5075C11.6757 30.4137 11.8057 30.2848 11.8909 30.1208C11.9782 29.9546 12.0219 29.7639 12.0219 29.5487C12.0219 29.3314 11.9782 29.1417 11.8909 28.9798C11.8057 28.8157 11.6757 28.689 11.501 28.5995C11.3263 28.5078 11.1047 28.462 10.8362 28.462H9.90297V33.8761H8.51909ZM14.3462 33.8761V27.3306H16.9286C17.4251 27.3306 17.848 27.4255 18.1974 27.6151C18.5469 27.8026 18.8132 28.0636 18.9964 28.3981C19.1818 28.7305 19.2745 29.114 19.2745 29.5487C19.2745 29.9833 19.1808 30.3669 18.9933 30.6993C18.8058 31.0316 18.5341 31.2905 18.1783 31.4759C17.8246 31.6613 17.3963 31.7539 16.8935 31.7539H15.2475V30.6449H16.6697C16.9361 30.6449 17.1555 30.5991 17.3281 30.5075C17.5028 30.4137 17.6328 30.2848 17.718 30.1208C17.8054 29.9546 17.8491 29.7639 17.8491 29.5487C17.8491 29.3314 17.8054 29.1417 17.718 28.9798C17.6328 28.8157 17.5028 28.689 17.3281 28.5995C17.1534 28.5078 16.9318 28.462 16.6634 28.462H15.7301V33.8761H14.3462ZM19.9241 28.4716V27.3306H25.2998V28.4716H23.2959V33.8761H21.928V28.4716H19.9241ZM27.4827 27.3306L28.8026 29.5615H28.8538L30.1801 27.3306H31.743L29.7455 30.6034L31.7877 33.8761H30.1961L28.8538 31.6421H28.8026L27.4603 33.8761H25.8751L27.9237 30.6034L25.9134 27.3306H27.4827Z" fill="white"/>
+</g>
+<defs>
+<filter id="filter0_d_3578_340" x="23.3367" y="-0.123901" width="12.6631" height="11.9572" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="-1" dy="1"/>
+<feGaussianBlur stdDeviation="1"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3578_340"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3578_340" result="shape"/>
+</filter>
+<clipPath id="clip0_3578_340">
+<rect width="40" height="40" fill="white" transform="translate(0 0.876099)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/admin-ui/src/FilePicker/primitives/components/previews/assets/txt.svg b/packages/admin-ui/src/FilePicker/primitives/components/previews/assets/txt.svg
new file mode 100644
index 00000000000..52011949ae9
--- /dev/null
+++ b/packages/admin-ui/src/FilePicker/primitives/components/previews/assets/txt.svg
@@ -0,0 +1,24 @@
+<svg width="40" height="41" viewBox="0 0 40 41" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3578_346)">
+<path d="M34.9998 8.83329V36.8761C34.9998 39.0852 33.209 40.8761 30.9998 40.8761H9C6.79086 40.8761 5 39.0852 5 36.8761V4.8761C5 2.66696 6.79086 0.876099 9 0.876099H26.3367L34.9998 8.83329Z" fill="#344054"/>
+<g filter="url(#filter0_d_3578_346)">
+<path d="M34.9998 8.83329H27.3367C26.7844 8.83329 26.3367 8.38557 26.3367 7.83329V0.876099L34.9998 8.83329Z" fill="#E4E7EC"/>
+</g>
+<path d="M10.1012 28.8711V27.6034H16.0742V28.8711H13.8477V34.8761H12.3278V28.8711H10.1012ZM18.4996 27.6034L19.9663 30.0821H20.0231L21.4968 27.6034H23.2333L21.0138 31.2397L23.283 34.8761H21.5146L20.0231 32.3939H19.9663L18.4748 34.8761H16.7134L18.9897 31.2397L16.756 27.6034H18.4996ZM23.9293 28.8711V27.6034H29.9023V28.8711H27.6758V34.8761H26.1559V28.8711H23.9293Z" fill="white"/>
+</g>
+<defs>
+<filter id="filter0_d_3578_346" x="23.3367" y="-0.123901" width="12.6631" height="11.9572" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="-1" dy="1"/>
+<feGaussianBlur stdDeviation="1"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3578_346"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3578_346" result="shape"/>
+</filter>
+<clipPath id="clip0_3578_346">
+<rect width="40" height="40" fill="white" transform="translate(0 0.876099)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/admin-ui/src/FilePicker/primitives/components/previews/assets/xls.svg b/packages/admin-ui/src/FilePicker/primitives/components/previews/assets/xls.svg
new file mode 100644
index 00000000000..995cbe729f6
--- /dev/null
+++ b/packages/admin-ui/src/FilePicker/primitives/components/previews/assets/xls.svg
@@ -0,0 +1,24 @@
+<svg width="40" height="41" viewBox="0 0 40 41" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3578_343)">
+<path d="M34.9998 8.83329V36.8761C34.9998 39.0852 33.209 40.8761 30.9998 40.8761H9C6.79086 40.8761 5 39.0852 5 36.8761V4.8761C5 2.66696 6.79086 0.876099 9 0.876099H26.3367L34.9998 8.83329Z" fill="#25953A"/>
+<g filter="url(#filter0_d_3578_343)">
+<path d="M34.9998 8.83329H27.3367C26.7844 8.83329 26.3367 8.38557 26.3367 7.83329V0.876099L34.9998 8.83329Z" fill="#ABEFC6"/>
+</g>
+<path d="M12.3864 27.6034L13.853 30.0821H13.9098L15.3835 27.6034H17.12L14.9006 31.2397L17.1697 34.8761H15.4013L13.9098 32.3939H13.853L12.3615 34.8761H10.6001L12.8764 31.2397L10.6428 27.6034H12.3864ZM18.093 34.8761V27.6034H19.6307V33.6083H22.7486V34.8761H18.093ZM27.7122 29.695C27.6838 29.4085 27.5618 29.186 27.3464 29.0274C27.131 28.8688 26.8386 28.7895 26.4693 28.7895C26.2183 28.7895 26.0065 28.825 25.8336 28.896C25.6608 28.9646 25.5282 29.0605 25.4359 29.1836C25.3459 29.3067 25.301 29.4464 25.301 29.6027C25.2962 29.7329 25.3234 29.8465 25.3826 29.9436C25.4442 30.0406 25.5282 30.1247 25.6348 30.1957C25.7413 30.2644 25.8644 30.3247 26.0041 30.3768C26.1438 30.4265 26.2929 30.4691 26.4515 30.5046L27.1049 30.6609C27.4222 30.7319 27.7134 30.8266 27.9785 30.945C28.2437 31.0634 28.4733 31.209 28.6674 31.3818C28.8616 31.5546 29.0119 31.7582 29.1184 31.9926C29.2273 32.227 29.283 32.4957 29.2853 32.7987C29.283 33.2438 29.1693 33.6296 28.9444 33.9564C28.7219 34.2807 28.3999 34.5328 27.9785 34.7127C27.5595 34.8903 27.054 34.9791 26.4622 34.9791C25.8751 34.9791 25.3637 34.8891 24.9281 34.7092C24.4949 34.5293 24.1563 34.2629 23.9125 33.9102C23.671 33.5551 23.5443 33.1159 23.5325 32.5927H25.0204C25.037 32.8366 25.1068 33.0402 25.2299 33.2035C25.3554 33.3645 25.5223 33.4864 25.7306 33.5693C25.9413 33.6498 26.1793 33.69 26.4444 33.69C26.7048 33.69 26.9309 33.6521 27.1227 33.5764C27.3168 33.5006 27.4672 33.3953 27.5737 33.2603C27.6802 33.1254 27.7335 32.9703 27.7335 32.7951C27.7335 32.6318 27.685 32.4945 27.5879 32.3832C27.4932 32.2719 27.3535 32.1772 27.1689 32.0991C26.9866 32.021 26.7628 31.95 26.4977 31.886L25.7058 31.6872C25.0926 31.538 24.6085 31.3048 24.2534 30.9876C23.8983 30.6704 23.7219 30.243 23.7243 29.7056C23.7219 29.2653 23.8391 28.8806 24.0758 28.5515C24.3149 28.2225 24.6428 27.9656 25.0595 27.7809C25.4761 27.5963 25.9496 27.5039 26.4799 27.5039C27.0197 27.5039 27.4908 27.5963 27.8933 27.7809C28.2981 27.9656 28.613 28.2225 28.8379 28.5515C29.0628 28.8806 29.1788 29.2618 29.1859 29.695H27.7122Z" fill="white"/>
+</g>
+<defs>
+<filter id="filter0_d_3578_343" x="23.3367" y="-0.123901" width="12.6631" height="11.9572" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="-1" dy="1"/>
+<feGaussianBlur stdDeviation="1"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3578_343"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3578_343" result="shape"/>
+</filter>
+<clipPath id="clip0_3578_343">
+<rect width="40" height="40" fill="white" transform="translate(0 0.876099)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/admin-ui/src/FilePicker/primitives/components/previews/assets/xlsx.svg b/packages/admin-ui/src/FilePicker/primitives/components/previews/assets/xlsx.svg
new file mode 100644
index 00000000000..5d246e78319
--- /dev/null
+++ b/packages/admin-ui/src/FilePicker/primitives/components/previews/assets/xlsx.svg
@@ -0,0 +1,24 @@
+<svg width="40" height="41" viewBox="0 0 40 41" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3578_342)">
+<path d="M34.9998 8.83329V36.8761C34.9998 39.0852 33.209 40.8761 30.9998 40.8761H9C6.79086 40.8761 5 39.0852 5 36.8761V4.8761C5 2.66696 6.79086 0.876099 9 0.876099H26.3367L34.9998 8.83329Z" fill="#25943A"/>
+<path d="M9.93093 27.3306L11.2509 29.5615H11.302L12.6284 27.3306H14.1912L12.1937 30.6034L14.236 33.8761H12.6444L11.302 31.6421H11.2509L9.90856 33.8761H8.32333L10.372 30.6034L8.36168 27.3306H9.93093ZM15.0669 33.8761V27.3306H16.4508V32.7351H19.2569V33.8761H15.0669ZM23.7242 29.2131C23.6986 28.9553 23.5889 28.755 23.395 28.6122C23.2011 28.4695 22.9379 28.3981 22.6056 28.3981C22.3797 28.3981 22.189 28.4301 22.0335 28.494C21.8779 28.5558 21.7586 28.6421 21.6755 28.7529C21.5945 28.8637 21.5541 28.9894 21.5541 29.13C21.5498 29.2472 21.5743 29.3495 21.6276 29.4368C21.683 29.5242 21.7586 29.5998 21.8545 29.6637C21.9504 29.7255 22.0612 29.7799 22.1869 29.8267C22.3126 29.8715 22.4468 29.9098 22.5896 29.9418L23.1776 30.0824C23.4632 30.1463 23.7252 30.2316 23.9639 30.3381C24.2025 30.4446 24.4092 30.5757 24.5839 30.7312C24.7586 30.8868 24.8939 31.07 24.9898 31.2809C25.0878 31.4919 25.1379 31.7337 25.14 32.0064C25.1379 32.407 25.0356 32.7543 24.8332 33.0483C24.6329 33.3402 24.3431 33.5671 23.9639 33.7291C23.5867 33.8889 23.1318 33.9688 22.5992 33.9688C22.0708 33.9688 21.6105 33.8878 21.2185 33.7259C20.8286 33.564 20.5239 33.3243 20.3044 33.0068C20.0871 32.6872 19.9731 32.2919 19.9624 31.8211H21.3016C21.3165 32.0405 21.3794 32.2238 21.4901 32.3708C21.6031 32.5157 21.7533 32.6254 21.9408 32.7C22.1304 32.7724 22.3445 32.8086 22.5832 32.8086C22.8176 32.8086 23.021 32.7745 23.1936 32.7064C23.3683 32.6382 23.5036 32.5434 23.5995 32.4219C23.6954 32.3005 23.7433 32.1609 23.7433 32.0032C23.7433 31.8562 23.6997 31.7326 23.6123 31.6325C23.5271 31.5323 23.4014 31.4471 23.2352 31.3768C23.0711 31.3065 22.8698 31.2426 22.6311 31.185L21.9184 31.0061C21.3666 30.8718 20.9308 30.662 20.6112 30.3765C20.2916 30.0909 20.1329 29.7064 20.135 29.2227C20.1329 28.8264 20.2384 28.4801 20.4514 28.184C20.6666 27.8878 20.9617 27.6566 21.3367 27.4904C21.7117 27.3243 22.1379 27.2412 22.6151 27.2412C23.1009 27.2412 23.5249 27.3243 23.8872 27.4904C24.2515 27.6566 24.5349 27.8878 24.7373 28.184C24.9397 28.4801 25.0441 28.8232 25.0505 29.2131H23.7242ZM27.3684 27.3306L28.6884 29.5615H28.7395L30.0659 27.3306H31.6287L29.6312 30.6034L31.6735 33.8761H30.0819L28.7395 31.6421H28.6884L27.3461 33.8761H25.7608L27.8095 30.6034L25.7992 27.3306H27.3684Z" fill="white"/>
+<g filter="url(#filter0_d_3578_342)">
+<path d="M34.9998 8.83329H27.3367C26.7844 8.83329 26.3367 8.38557 26.3367 7.83329V0.876099L34.9998 8.83329Z" fill="#ABEFC6"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_d_3578_342" x="23.3367" y="-0.123901" width="12.6631" height="11.9572" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="-1" dy="1"/>
+<feGaussianBlur stdDeviation="1"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3578_342"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3578_342" result="shape"/>
+</filter>
+<clipPath id="clip0_3578_342">
+<rect width="40" height="40" fill="white" transform="translate(0 0.876099)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/admin-ui/src/FilePicker/primitives/components/previews/index.ts b/packages/admin-ui/src/FilePicker/primitives/components/previews/index.ts
new file mode 100644
index 00000000000..c64ef5fe229
--- /dev/null
+++ b/packages/admin-ui/src/FilePicker/primitives/components/previews/index.ts
@@ -0,0 +1,4 @@
+export * from "./FilePreview";
+export * from "./ImagePreview";
+export * from "./RichItemPreview";
+export * from "./TextOnlyPreview";
diff --git a/packages/admin-ui/src/FilePicker/primitives/components/previews/variants.ts b/packages/admin-ui/src/FilePicker/primitives/components/previews/variants.ts
new file mode 100644
index 00000000000..7dbad4143cd
--- /dev/null
+++ b/packages/admin-ui/src/FilePicker/primitives/components/previews/variants.ts
@@ -0,0 +1,34 @@
+import { cva } from "~/utils";
+
+export const previewVariants = cva("wby-w-full", {
+    variants: {
+        variant: {
+            light: ["wby-bg-neutral-light", "hover:wby-bg-neutral-dimmed"],
+            base: ["wby-bg-neutral-base", "hover:wby-bg-neutral-subtle"],
+            transparent: ["wby-bg-transparent", "hover:wby-bg-neutral-dark/5"]
+        },
+        disabled: {
+            true: "wby-pointer-events-none"
+        }
+    },
+    compoundVariants: [
+        {
+            disabled: true,
+            variant: "light",
+            className: "wby-bg-neutral-dimmed"
+        },
+        {
+            disabled: true,
+            variant: "base",
+            className: "wby-bg-neutral-disabled"
+        },
+        {
+            disabled: true,
+            variant: "transparent",
+            className: "wby-bg-transparent"
+        }
+    ],
+    defaultVariants: {
+        variant: "light"
+    }
+});
diff --git a/packages/admin-ui/src/FilePicker/primitives/components/types.ts b/packages/admin-ui/src/FilePicker/primitives/components/types.ts
new file mode 100644
index 00000000000..5a79ac371ff
--- /dev/null
+++ b/packages/admin-ui/src/FilePicker/primitives/components/types.ts
@@ -0,0 +1,39 @@
+import type { VariantProps } from "~/utils";
+import { previewVariants } from "./previews/variants";
+import type { FileItemFormatted } from "../../domains";
+
+/**
+ * Default properties of a file preview component.
+ * They are shared between the default and custom renderers.
+ */
+export interface FilePreviewDefaultProps
+    extends Omit<React.HTMLAttributes<HTMLDivElement>, "children">,
+        VariantProps<typeof previewVariants> {
+    onReplaceItem?: () => void;
+    onRemoveItem?: () => void;
+    onEditItem?: () => void;
+    value: FileItemFormatted;
+    disabled?: boolean;
+}
+
+/**
+ * Properties that can be used to render a custom file preview component.
+ * @see `renderFilePreview` property of the FilePickerPrimitiveProps.
+ */
+export type FilePreviewRendererProps = Omit<FilePreviewDefaultProps, "type"> & Record<string, any>;
+
+/**
+ * Default properties of a trigger component.
+ * They are shared between the default and custom renderers.
+ */
+export interface TriggerDefaultProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onClick"> {
+    disabled?: boolean;
+    text?: string;
+    onSelectItem: () => void;
+}
+
+/**
+ * Properties that can be used to render a custom trigger component.
+ * @see `renderTrigger` property of the FilePickerPrimitiveProps.
+ */
+export type TriggerRendererProps = TriggerDefaultProps & Record<string, any>;
diff --git a/packages/admin-ui/src/FilePicker/primitives/index.ts b/packages/admin-ui/src/FilePicker/primitives/index.ts
new file mode 100644
index 00000000000..48bb9eb952b
--- /dev/null
+++ b/packages/admin-ui/src/FilePicker/primitives/index.ts
@@ -0,0 +1,2 @@
+export * from "./FilePickerPrimitive";
+export * from "./components";
diff --git a/packages/admin-ui/src/FilePicker/primitives/presenters/FilePickerPresenter.test.ts b/packages/admin-ui/src/FilePicker/primitives/presenters/FilePickerPresenter.test.ts
new file mode 100644
index 00000000000..02943881d88
--- /dev/null
+++ b/packages/admin-ui/src/FilePicker/primitives/presenters/FilePickerPresenter.test.ts
@@ -0,0 +1,46 @@
+import { FilePickerPresenter } from "./FilePickerPresenter";
+
+describe("FilePickerPresenter", () => {
+    const presenter = new FilePickerPresenter();
+
+    it("should initialize with null file when no value is provided", () => {
+        presenter.init({});
+        expect(presenter.vm.file).toBeNull();
+    });
+
+    it("should initialize with a file created from URL when value is a string", () => {
+        const url = "http://example.com/file.png";
+        presenter.init({ value: url });
+        expect(presenter.vm.file).toEqual({
+            id: expect.any(String),
+            name: "file.png",
+            mimeType: "image/png",
+            url,
+            size: 0
+        });
+    });
+
+    it("should initialize with a file created from URL when value is a string and the mimeType is unknown", () => {
+        const url = "http://example.com/file.unknown";
+        presenter.init({ value: url });
+        expect(presenter.vm.file).toEqual({
+            id: expect.any(String),
+            name: "file.unknown",
+            mimeType: "application/octet-stream",
+            url,
+            size: 0
+        });
+    });
+
+    it("should initialize with a file created from FileItemDto when value is an object", () => {
+        const fileItemDto = {
+            id: "1",
+            name: "file.png",
+            url: "http://example.com/file.png",
+            mimeType: "image/png",
+            size: 1000
+        };
+        presenter.init({ value: fileItemDto });
+        expect(presenter.vm.file).toEqual(fileItemDto);
+    });
+});
diff --git a/packages/admin-ui/src/FilePicker/primitives/presenters/FilePickerPresenter.ts b/packages/admin-ui/src/FilePicker/primitives/presenters/FilePickerPresenter.ts
new file mode 100644
index 00000000000..33aa29c4b51
--- /dev/null
+++ b/packages/admin-ui/src/FilePicker/primitives/presenters/FilePickerPresenter.ts
@@ -0,0 +1,50 @@
+import { makeAutoObservable } from "mobx";
+import {
+    FileItem,
+    type FileItemDto,
+    type FileItemFormatted,
+    FileItemFormatter
+} from "../../domains";
+
+interface FilePickerPresenterParams {
+    value?: FileItemDto | string | null;
+}
+
+interface IFilePickerPresenter {
+    vm: {
+        file: FileItemFormatted | null;
+    };
+    init: (params: FilePickerPresenterParams) => void;
+}
+
+class FilePickerPresenter implements IFilePickerPresenter {
+    private file: FileItem | null = null;
+
+    constructor() {
+        makeAutoObservable(this);
+    }
+
+    public init = (params: FilePickerPresenterParams) => {
+        const { value } = params;
+
+        if (!value) {
+            this.file = null;
+            return;
+        }
+
+        if (typeof value === "string") {
+            this.file = FileItem.createFromUrl(value);
+            return;
+        }
+
+        this.file = FileItem.create(value);
+    };
+
+    get vm() {
+        return {
+            file: this.file ? FileItemFormatter.format(this.file) : null
+        };
+    }
+}
+
+export { FilePickerPresenter, type FilePickerPresenterParams, type IFilePickerPresenter };
diff --git a/packages/admin-ui/src/FilePicker/primitives/presenters/index.ts b/packages/admin-ui/src/FilePicker/primitives/presenters/index.ts
new file mode 100644
index 00000000000..6a770bcc455
--- /dev/null
+++ b/packages/admin-ui/src/FilePicker/primitives/presenters/index.ts
@@ -0,0 +1 @@
+export * from "./FilePickerPresenter";
diff --git a/packages/admin-ui/src/FilePicker/primitives/useFilePicker.ts b/packages/admin-ui/src/FilePicker/primitives/useFilePicker.ts
new file mode 100644
index 00000000000..c9bafef2ec8
--- /dev/null
+++ b/packages/admin-ui/src/FilePicker/primitives/useFilePicker.ts
@@ -0,0 +1,35 @@
+import { useEffect, useMemo, useState } from "react";
+import { autorun } from "mobx";
+import { FilePickerPresenter, type FilePickerPresenterParams } from "./presenters";
+import type { FilePickerPrimitiveProps } from "~/FilePicker";
+
+type IFilePickerPrimitiveProps = Pick<FilePickerPrimitiveProps, "value">;
+
+export const useFilePicker = (props: IFilePickerPrimitiveProps) => {
+    const params: FilePickerPresenterParams = useMemo(
+        () => ({
+            value: props.value
+        }),
+        [props.value]
+    );
+
+    const presenter = useMemo(() => {
+        return new FilePickerPresenter();
+    }, []);
+
+    const [vm, setVm] = useState(presenter.vm);
+
+    useEffect(() => {
+        presenter.init(params);
+    }, [params]);
+
+    useEffect(() => {
+        return autorun(() => {
+            setVm(presenter.vm);
+        });
+    }, [presenter]);
+
+    return {
+        vm
+    };
+};
diff --git a/packages/admin-ui/src/FormComponent/Description.tsx b/packages/admin-ui/src/FormComponent/Description.tsx
new file mode 100644
index 00000000000..cc40f68b845
--- /dev/null
+++ b/packages/admin-ui/src/FormComponent/Description.tsx
@@ -0,0 +1,45 @@
+import React from "react";
+import { Text, type TextProps } from "~/Text";
+import { cn, cva, makeDecoratable, type VariantProps } from "~/utils";
+
+const formComponentDescriptionVariants = cva("wby-mb-sm wby-text-neutral-strong", {
+    variants: {
+        disabled: {
+            true: "wby-text-neutral-disabled"
+        }
+    }
+});
+
+type FormComponentDescriptionProps = TextProps &
+    VariantProps<typeof formComponentDescriptionVariants> & {
+        text?: React.ReactNode;
+    };
+
+const DecoratableFormComponentDescription = ({
+    text,
+    disabled,
+    className,
+    ...props
+}: FormComponentDescriptionProps) => {
+    if (!text) {
+        return null;
+    }
+
+    return (
+        <Text
+            {...props}
+            size={"sm"}
+            as={"div"}
+            className={cn(formComponentDescriptionVariants({ disabled }), className)}
+        >
+            {text}
+        </Text>
+    );
+};
+
+const FormComponentDescription = makeDecoratable(
+    "FormComponentDescription",
+    DecoratableFormComponentDescription
+);
+
+export { FormComponentDescription, type FormComponentDescriptionProps };
diff --git a/packages/admin-ui/src/FormComponent/ErrorMessage.tsx b/packages/admin-ui/src/FormComponent/ErrorMessage.tsx
new file mode 100644
index 00000000000..a2add4a5fc5
--- /dev/null
+++ b/packages/admin-ui/src/FormComponent/ErrorMessage.tsx
@@ -0,0 +1,50 @@
+import React from "react";
+import { Text, type TextProps } from "~/Text";
+import { cn, cva, makeDecoratable, type VariantProps } from "~/utils";
+
+const formComponentErrorMessageVariants = cva(
+    "wby-mt-xs wby-text-destructive-primary wby-font-semibold",
+    {
+        variants: {
+            disabled: {
+                true: "wby-text-destructive-muted"
+            }
+        }
+    }
+);
+
+type FormComponentErrorMessageProps = TextProps &
+    VariantProps<typeof formComponentErrorMessageVariants> & {
+        text?: React.ReactNode;
+        invalid?: boolean;
+    };
+
+const DecoratableFormComponentErrorMessage = ({
+    invalid,
+    disabled,
+    className,
+    text,
+    ...props
+}: FormComponentErrorMessageProps) => {
+    if (!invalid || !text) {
+        return null;
+    }
+
+    return (
+        <Text
+            {...props}
+            size={"sm"}
+            as={"div"}
+            className={cn(formComponentErrorMessageVariants({ disabled }), className)}
+        >
+            {text}
+        </Text>
+    );
+};
+
+const FormComponentErrorMessage = makeDecoratable(
+    "FormComponentErrorMessage",
+    DecoratableFormComponentErrorMessage
+);
+
+export { FormComponentErrorMessage, type FormComponentErrorMessageProps };
diff --git a/packages/admin-ui/src/FormComponent/FormComponent.tsx b/packages/admin-ui/src/FormComponent/FormComponent.tsx
new file mode 100644
index 00000000000..7d08e3cc0db
--- /dev/null
+++ b/packages/admin-ui/src/FormComponent/FormComponent.tsx
@@ -0,0 +1,69 @@
+import React from "react";
+import { Label } from "~/Label";
+
+interface FormComponentProps<TValue = any> {
+    /**
+     * Label for the form component, which can be a React element of type `Label` or any React node.
+     */
+    label?: React.ReactElement<typeof Label> | React.ReactNode;
+
+    /**
+     * Description providing additional context or guidance for the form component.
+     */
+    description?: React.ReactNode;
+
+    /**
+     * Note or supplementary information to display below the form component.
+     */
+    note?: React.ReactNode;
+
+    /**
+     * Indicates whether the form component is required.
+     */
+    required?: boolean;
+
+    /**
+     * Indicates whether the form component is disabled, preventing user interaction.
+     */
+    disabled?: boolean;
+
+    /**
+     * Validation state for the form component. Provides details about validity,
+     * error messages, and additional validation results.
+     */
+    validation?: {
+        /**
+         * Indicates whether the form component's value is valid.
+         * Can be `true`, `false`, or `null` if not yet validated.
+         */
+        isValid: boolean | null;
+
+        /**
+         * Error message to display when the form component's value is invalid.
+         */
+        message?: string;
+
+        /**
+         * Additional results or metadata returned by the validation logic.
+         */
+        results?: { [key: string]: any };
+    };
+
+    /**
+     * Function provided by the parent `<Form>` component to trigger validation when the form component's value changes.
+     * Returns a promise that resolves with the validation result.
+     */
+    validate?: () => Promise<boolean | any>;
+
+    /**
+     *  Form component's value.
+     */
+    value?: TValue;
+
+    /**
+     * A callback that is executed each time a value is changed.
+     */
+    onChange?: (value: TValue) => void;
+}
+
+export { type FormComponentProps };
diff --git a/packages/admin-ui/src/FormComponent/Label.tsx b/packages/admin-ui/src/FormComponent/Label.tsx
new file mode 100644
index 00000000000..4509e38a4a5
--- /dev/null
+++ b/packages/admin-ui/src/FormComponent/Label.tsx
@@ -0,0 +1,62 @@
+import React, { useMemo } from "react";
+import { cn, makeDecoratable } from "~/utils";
+import { Label, LabelProps } from "~/Label";
+
+interface FormComponentLabelProps extends React.HTMLAttributes<HTMLDivElement> {
+    text?: React.ReactElement<typeof Label> | React.ReactNode;
+    invalid?: boolean;
+    required?: boolean;
+    disabled?: boolean;
+    hint?: React.ReactNode;
+}
+
+const DecoratableFormComponentLabel = ({
+    text,
+    required,
+    disabled,
+    hint,
+    invalid,
+    className,
+    ...props
+}: FormComponentLabelProps) => {
+    // UseMemo correctly to memoize the rendered label
+    const renderLabel = useMemo(() => {
+        if (!text) {
+            return null;
+        }
+
+        if (React.isValidElement(text) && text.type === Label) {
+            return React.cloneElement(text as React.ReactElement<LabelProps>, {
+                ...text.props,
+                required: text.props.required ?? required,
+                disabled: text.props.disabled ?? disabled,
+                hint: text.props.hint ?? hint,
+                invalid: text.props.invalid ?? invalid
+            });
+        }
+
+        return (
+            <Label
+                text={text}
+                required={required}
+                disabled={disabled}
+                hint={hint}
+                invalid={invalid}
+            />
+        );
+    }, [text, required, disabled, hint, invalid]);
+
+    if (!renderLabel) {
+        return null;
+    }
+
+    return (
+        <div {...props} className={cn("wby-mb-xs", className)}>
+            {renderLabel}
+        </div>
+    );
+};
+
+const FormComponentLabel = makeDecoratable("FormComponentLabel", DecoratableFormComponentLabel);
+
+export { FormComponentLabel, type FormComponentLabelProps };
diff --git a/packages/admin-ui/src/FormComponent/Note.tsx b/packages/admin-ui/src/FormComponent/Note.tsx
new file mode 100644
index 00000000000..061b935a721
--- /dev/null
+++ b/packages/admin-ui/src/FormComponent/Note.tsx
@@ -0,0 +1,42 @@
+import React from "react";
+import { Text, type TextProps } from "~/Text";
+import { cn, cva, makeDecoratable, type VariantProps } from "~/utils";
+
+const formComponentNoteVariants = cva("wby-mt-sm wby-text-neutral-strong", {
+    variants: {
+        disabled: {
+            true: "wby-text-neutral-disabled"
+        }
+    }
+});
+
+type FormComponentNoteProps = TextProps &
+    VariantProps<typeof formComponentNoteVariants> & {
+        text?: React.ReactNode;
+    };
+
+const DecoratableFormComponentNote = ({
+    disabled,
+    text,
+    className,
+    ...props
+}: FormComponentNoteProps) => {
+    if (!text) {
+        return null;
+    }
+
+    return (
+        <Text
+            {...props}
+            size={"sm"}
+            as={"div"}
+            className={cn(formComponentNoteVariants({ disabled }), className)}
+        >
+            {text}
+        </Text>
+    );
+};
+
+const FormComponentNote = makeDecoratable("FormComponentNote", DecoratableFormComponentNote);
+
+export { FormComponentNote, type FormComponentNoteProps };
diff --git a/packages/admin-ui/src/FormComponent/index.ts b/packages/admin-ui/src/FormComponent/index.ts
new file mode 100644
index 00000000000..2443120d058
--- /dev/null
+++ b/packages/admin-ui/src/FormComponent/index.ts
@@ -0,0 +1,5 @@
+export * from "./Description";
+export * from "./ErrorMessage";
+export * from "./FormComponent";
+export * from "./Label";
+export * from "./Note";
diff --git a/packages/admin-ui/src/Grid/Grid.mdx b/packages/admin-ui/src/Grid/Grid.mdx
new file mode 100644
index 00000000000..02cb9c688ca
--- /dev/null
+++ b/packages/admin-ui/src/Grid/Grid.mdx
@@ -0,0 +1,249 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+
+import * as GridStories from './Grid.stories';
+
+<Meta of={GridStories} />
+
+# Grid
+
+Grid structures layouts with clarity and consistency, organizing content, maintaining alignment, and ensuring a seamless experience across screen sizes. Settings include column configuration, gutter spacing, and responsive behavior.
+
+<Canvas of={GridStories.Documentation}  source={ { code: `
+import React from "react";
+import { Grid } from "@webiny/admin-ui";
+
+const GridExample = () => {
+    return (
+        <Grid gap={"comfortable"} className={"wby-bg-neutral-light wby-p-4"}>
+            <Grid.Column className="wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm">
+                Col 1
+            </Grid.Column>
+            <Grid.Column span={3} className="wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm">
+                Col 2<br/>Span: 3
+            </Grid.Column>
+            <Grid.Column className="wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm">
+                Col 3
+            </Grid.Column>
+            <Grid.Column className="wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm">
+                Col 4
+            </Grid.Column>
+            <Grid.Column className="wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm">
+                Col 5
+            </Grid.Column>
+            <Grid.Column className="wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm">
+                Col 6
+            </Grid.Column>
+            <Grid.Column span={2} className="wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm">
+                Col 7<br/>Span: 2
+            </Grid.Column>
+            <Grid.Column className="wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm">
+                Col 8
+            </Grid.Column>
+            <Grid.Column className="wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm">
+                Col 9
+            </Grid.Column>
+        </Grid>
+    );
+};
+
+export default GridExample;
+
+` } }
+        additionalActions={[
+            {
+                title: 'Open in GitHub',
+                onClick: () => {
+                    window.open(
+                        'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Grid/Grid.tsx',
+                        '_blank'
+                    );
+                },
+            }
+        ]}
+/>
+
+<Controls of={GridStories.Documentation}/>
+
+## Usage
+
+```tsx
+import React from "react";
+import { Grid } from "@webiny/admin-ui";
+
+const GridExample = () => {
+    return (
+        <Grid gap={"comfortable"} className={"wby-bg-neutral-light wby-p-4"}>
+            <Grid.Column className="wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm">
+                Col 1
+            </Grid.Column>
+            <Grid.Column span={3} className="wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm">
+                Col 2<br/>Span: 3
+            </Grid.Column>
+            <Grid.Column className="wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm">
+                Col 3
+            </Grid.Column>
+            <Grid.Column className="wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm">
+                Col 4
+            </Grid.Column>
+            <Grid.Column className="wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm">
+                Col 5
+            </Grid.Column>
+            <Grid.Column className="wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm">
+                Col 6
+            </Grid.Column>
+            <Grid.Column span={2} className="wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm">
+                Col 7<br/>Span: 2
+            </Grid.Column>
+            <Grid.Column className="wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm">
+                Col 8
+            </Grid.Column>
+            <Grid.Column className="wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm">
+                Col 9
+            </Grid.Column>
+        </Grid>
+    );
+};
+
+export default GridExample;
+```
+
+## Examples
+
+### Spacious Gap
+To have more spacing between grid columns, you can use the `gap` prop and set it to `spacious`.
+
+<Canvas of={GridStories.SpaciousGap}  source={ { code: `
+import React from "react";
+import { Grid } from "@webiny/admin-ui";
+
+const GridSpaciousExample = () => {
+    return (
+        <Grid gap={"spacious"} className={"wby-bg-neutral-light wby-p-4"}>
+            <Grid.Column className="wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm">
+                Col 1
+            </Grid.Column>
+            <Grid.Column span={3} className="wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm">
+                Col 2<br/>Span: 3
+            </Grid.Column>
+            <Grid.Column className="wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm">
+                Col 3
+            </Grid.Column>
+            <Grid.Column className="wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm">
+                Col 4
+            </Grid.Column>
+            <Grid.Column className="wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm">
+                Col 5
+            </Grid.Column>
+            <Grid.Column className="wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm">
+                Col 6
+            </Grid.Column>
+            <Grid.Column span={2} className="wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm">
+                Col 7<br/>Span: 2
+            </Grid.Column>
+            <Grid.Column className="wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm">
+                Col 8
+            </Grid.Column>
+            <Grid.Column className="wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm">
+                Col 9
+            </Grid.Column>
+        </Grid>
+    );
+};
+
+    export default GridSpaciousExample;
+
+` } }
+/>
+
+### With Offset
+With Offset, you can create a grid with a specific offset. The offset is applied to columns, e.g. `<Grid.Column span={8} offset={2}/>`. Please refer to the example - click on **Show code** to see code example.
+
+<Canvas of={GridStories.WithOffset}  source={ { code: `
+import React from "react";
+import { Grid } from "@webiny/admin-ui";
+
+const GridWithOffsetExample = () => {
+    return (
+        <Grid gap={"spacious"} className={"wby-bg-neutral-light wby-p-4"}>
+
+                {/* Row 1 */}
+                <Grid.Column span={8} offset={2} className="wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm">
+                    Col 1<br/>
+                    span: 8<br/>
+                    offset: 2
+                </Grid.Column>
+                <Grid.Column span={2} />
+
+                {/* Row 2 */}
+                <Grid.Column span={8} offset={4} className="wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm">
+                    Col 1<br/>
+                    span: 8<br/>
+                    offset: 4
+                </Grid.Column>
+
+                {/* Row 3 */}
+                <Grid.Column span={10} offset={1} className="wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm">
+                    Col 1<br/>
+                    span: 8<br/>
+                    offset: 4
+                </Grid.Column>
+                <Grid.Column span={1} />
+
+                {/* Row 4 */}
+                <Grid.Column span={12} className="wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm">
+                    Col 1<br/>
+                    span: 12
+                </Grid.Column>
+            </Grid>
+        );
+    };
+
+    export default GridWithOffsetExample;
+
+` } }
+/>
+
+## Horizontal Grids
+The grids within the Webiny Design System behave as fixed and fluid elements relevant to the elements on the page.
+
+### Grid types
+Webiny Design System use two types of grids: fluid and fixed. Both grid types use breakpoints to determine whether the layout needs to change between viewport sizes.
+
+### Fluid
+The fluid grid stretches across an area to fill all available space within the screen, part of the screen or within the specific element if needed.
+
+<img src="/images/storybook/grid/fluid.png" alt="Fluid"/>
+
+<img src="/images/storybook/grid/fluid-dashboard.png" alt="Fluid Dashboard"/>
+
+
+### Fixed
+The fixed grid applies the ideal maximum width to page or page element.
+
+<img src="/images/storybook/grid/fixed.png" alt="Fixed"/>
+
+<img src="/images/storybook/grid/fixed-dashboard.png" alt="Fixed Dashboard"/>
+
+## Grid Gutter Sizes
+We considered using two main sizes for grid application, to be used dependent on the content type.
+
+### Comfortable (Default)
+<img src="/images/storybook/grid/grid-gutter-size-comfortable.png" alt="Comfortable (Default)"/>
+
+### Spacious
+<img src="/images/storybook/grid/grid-gutter-size-spacious.png" alt="Spacious"/>
+
+## Breakpoints
+A breakpoint marks the point where a website’s layout adapts to provide the best user experience. In responsive design, the range of each breakpoint defines the ideal number of columns for a given viewport size, along with the suggested widths for margins and gutters.
+
+<img src="/images/storybook/grid/breakpoints.png" alt="Breakpoints"/>
+
+## Column Spans
+Content should be distributed across a minimum of 3 columns, with the option to extend up to 12 columns. To achieve a range of layouts, vary the number of columns used, allowing for flexible design across different breakpoints.
+
+<img src="/images/storybook/grid/column-spans.png" alt="Column Spans"/>
+
+## Column Offsets
+Content isn't required to span the full 12 columns. It can cover a smaller number of columns, creating a layout where the content is centered within a 12-column grid.
+
+<img src="/images/storybook/grid/column-offsets.png" alt="Column Offsets"/>
\ No newline at end of file
diff --git a/packages/admin-ui/src/Grid/Grid.stories.tsx b/packages/admin-ui/src/Grid/Grid.stories.tsx
new file mode 100644
index 00000000000..f615de41295
--- /dev/null
+++ b/packages/admin-ui/src/Grid/Grid.stories.tsx
@@ -0,0 +1,127 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Grid } from "./Grid";
+import { StyledColumn } from "./stories/StyledColumn";
+
+const meta: Meta<typeof Grid> = {
+    title: "Components/Grid",
+    component: Grid
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Grid>;
+
+export const Default: Story = {
+    args: {
+        className: "wby-bg-neutral-light wby-p-4",
+        children: (
+            <>
+                <StyledColumn index={1} />
+                <StyledColumn index={2} span={3} />
+                <StyledColumn index={3} />
+                <StyledColumn index={4} />
+                <StyledColumn index={5} />
+                <StyledColumn index={6} />
+                <StyledColumn index={7} span={2} />
+                <StyledColumn index={8} />
+                <StyledColumn index={9} />
+            </>
+        )
+    }
+};
+
+export const SpaciousGap: Story = {
+    args: {
+        ...Default.args,
+        gap: "spacious"
+    }
+};
+
+export const WithOffset: Story = {
+    parameters: {
+        layout: "padded"
+    },
+    args: {
+        ...Default.args,
+        children: (
+            <>
+                {/* Row 1 */}
+                <StyledColumn span={8} offset={2} index={1} />
+                <Grid.Column span={2} />
+
+                {/* Row 2 */}
+                <StyledColumn span={8} offset={4} index={1} />
+
+                {/* Row 3 */}
+                <StyledColumn span={10} offset={1} index={1} />
+                <Grid.Column span={1} />
+
+                {/* Row 4 */}
+                <StyledColumn span={12} index={1} />
+            </>
+        )
+    }
+};
+
+export const Documentation: Story = {
+    render: args => {
+        return (
+            <Grid {...args}>
+                <Grid.Column className="wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm">
+                    Col 1
+                </Grid.Column>
+                <Grid.Column
+                    className="wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm"
+                    span={3}
+                >
+                    Col 2<br />
+                    Span: 3
+                </Grid.Column>
+                <Grid.Column className="wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm">
+                    Col 3
+                </Grid.Column>
+                <Grid.Column className="wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm">
+                    Col 4
+                </Grid.Column>
+                <Grid.Column className="wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm">
+                    Col 5
+                </Grid.Column>
+                <Grid.Column className="wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm">
+                    Col 6
+                </Grid.Column>
+                <Grid.Column
+                    className="wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm"
+                    span={2}
+                >
+                    Col 7<br />
+                    Span: 2
+                </Grid.Column>
+                <Grid.Column className="wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm">
+                    Col 8
+                </Grid.Column>
+                <Grid.Column className="wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm">
+                    Col 9
+                </Grid.Column>
+            </Grid>
+        );
+    },
+    args: {
+        gap: "comfortable",
+        className: "wby-bg-neutral-light wby-p-4"
+    },
+    argTypes: {
+        gap: {
+            description: "Spacing between grid columns",
+            control: "select",
+            options: ["comfortable", "spacious"],
+            defaultValue: "comfortable"
+        },
+        className: {
+            description:
+                "Additional CSS class names. You can pass multiple class names that will be applied to Grid.",
+            control: "text"
+        }
+    }
+};
diff --git a/packages/admin-ui/src/Grid/Grid.tsx b/packages/admin-ui/src/Grid/Grid.tsx
new file mode 100644
index 00000000000..0c85a2e3322
--- /dev/null
+++ b/packages/admin-ui/src/Grid/Grid.tsx
@@ -0,0 +1,93 @@
+import React from "react";
+import { cn, cva, withStaticProps, makeDecoratable, type VariantProps } from "~/utils";
+
+const columnVariants = cva("", {
+    variants: {
+        span: {
+            auto: "wby-col-auto",
+            1: "wby-col-span-1",
+            2: "wby-col-span-2",
+            3: "wby-col-span-3",
+            4: "wby-col-span-4",
+            5: "wby-col-span-5",
+            6: "wby-col-span-6",
+            7: "wby-col-span-7",
+            8: "wby-col-span-8",
+            9: "wby-col-span-9",
+            10: "wby-col-span-10",
+            11: "wby-col-span-11",
+            12: "wby-col-span-12"
+        },
+        offset: {
+            1: "wby-col-start-2",
+            2: "wby-col-start-3",
+            3: "wby-col-start-4",
+            4: "wby-col-start-5",
+            5: "wby-col-start-6",
+            6: "wby-col-start-7",
+            7: "wby-col-start-8",
+            8: "wby-col-start-9",
+            9: "wby-col-start-10",
+            10: "wby-col-start-11",
+            11: "wby-col-start-12"
+        },
+        align: {
+            top: "wby-self-start",
+            middle: "wby-self-center",
+            bottom: "wby-self-end"
+        }
+    },
+    defaultVariants: {
+        span: "auto"
+    }
+});
+
+interface ColumnProps
+    extends React.HTMLAttributes<HTMLDivElement>,
+        VariantProps<typeof columnVariants> {
+    children?: React.ReactNode;
+}
+
+const ColumnBase = ({ span, align, children, className, offset, ...props }: ColumnProps) => {
+    return (
+        <div {...props} className={cn(columnVariants({ span, offset, align }), className)}>
+            {children}
+        </div>
+    );
+};
+
+const Column = makeDecoratable("Column", ColumnBase);
+
+const gridVariants = cva("wby-grid", {
+    variants: {
+        gap: {
+            comfortable: "wby-gap-lg",
+            spacious: "wby-gap-xl"
+        }
+    },
+    defaultVariants: {
+        gap: "comfortable"
+    }
+});
+
+interface GridProps
+    extends React.HTMLAttributes<HTMLDivElement>,
+        VariantProps<typeof gridVariants> {
+    children:
+        | React.ReactElement<ColumnProps, typeof Column>
+        | Array<React.ReactElement<ColumnProps, typeof Column>>;
+}
+
+const GridBase = ({ gap, children, className, ...props }: GridProps) => {
+    return (
+        <div {...props} className={cn("wby-grid-cols-12", gridVariants({ gap }), className)}>
+            {children}
+        </div>
+    );
+};
+
+const DecoratableGrid = makeDecoratable("Grid", GridBase);
+
+const Grid = withStaticProps(DecoratableGrid, { Column });
+
+export { Grid, type GridProps, type ColumnProps };
diff --git a/packages/admin-ui/src/Grid/index.ts b/packages/admin-ui/src/Grid/index.ts
new file mode 100644
index 00000000000..f2b81475d2c
--- /dev/null
+++ b/packages/admin-ui/src/Grid/index.ts
@@ -0,0 +1 @@
+export * from "./Grid";
diff --git a/packages/admin-ui/src/Grid/stories/StyledColumn.tsx b/packages/admin-ui/src/Grid/stories/StyledColumn.tsx
new file mode 100644
index 00000000000..c62a6774e7b
--- /dev/null
+++ b/packages/admin-ui/src/Grid/stories/StyledColumn.tsx
@@ -0,0 +1,27 @@
+import React from "react";
+import { type ColumnProps, Grid } from "~/Grid";
+
+export interface StyledColumnProps extends ColumnProps {
+    index: number;
+}
+
+export const StyledColumn = (props: StyledColumnProps) => (
+    <Grid.Column
+        className="wby-bg-primary wby-text-neutral-light wby-p-2 wby-text-md wby-rounded-sm"
+        {...props}
+    >
+        Col {props.index}
+        {props.span && (
+            <>
+                <br />
+                <code>span: {props.span}</code>
+            </>
+        )}
+        {props.offset && (
+            <>
+                <br />
+                <code>offset: {props.offset}</code>
+            </>
+        )}
+    </Grid.Column>
+);
diff --git a/packages/admin-ui/src/HeaderBar/HeaderBar.mdx b/packages/admin-ui/src/HeaderBar/HeaderBar.mdx
new file mode 100644
index 00000000000..ebaaa5d9c24
--- /dev/null
+++ b/packages/admin-ui/src/HeaderBar/HeaderBar.mdx
@@ -0,0 +1,309 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+
+import * as HeaderBarStories from './HeaderBar.stories';
+
+<Meta of={HeaderBarStories} />
+
+# HeaderBar
+
+The HeaderBar component is a versatile navigation element that provides a consistent header layout across the application. It divides the header space into three sections (start, middle, and end), allowing for flexible content placement.
+
+## Usage
+
+<Canvas of={HeaderBarStories.Documentation} source={ { code: `
+import React from "react";
+import { HeaderBar, Button, IconButton, Avatar, Text } from "@webiny/admin-ui";
+import { ReactComponent as KeyboardArrowRightIcon } from "@webiny/icons/keyboard_arrow_down.svg";
+
+const HeaderBarExample = () => {
+    const StartContent = () => (
+        <Text size={"sm"} className={"wby-text-neutral-dimmed"}>
+            {"Headless CMS / Articles / The best article ever"}
+        </Text>
+    );
+
+    const MiddleContent = () => <>Content in the middle</>;
+
+    const EndContent = () => (
+        <div className={"wby-flex wby-gap-x-sm"}>
+            <Button variant={"ghost"} size={"md"} text={"Root tenant"} />
+            <div
+                className={
+                    "wby-flex wby-items-center wby-rounded-md wby-gap-xxs wby-py-xs wby-px-xs wby-bg-neutral-light"
+                }
+            >
+                <Avatar
+                    size={"sm"}
+                    variant={"strong"}
+                    image={<Avatar.Image src={"https://i.pravatar.cc/300"} />}
+                    fallback={<Avatar.Fallback delayMs={0}>W</Avatar.Fallback>}
+                />
+                <IconButton
+                    variant={"ghost"}
+                    size={"xs"}
+                    color={"neutral-strong"}
+                    icon={<KeyboardArrowRightIcon />}
+                    onClick={() => console.log("clicked")}
+                />
+            </div>
+        </div>
+    );
+
+    return (
+        <HeaderBar
+            start={<StartContent />}
+            middle={<MiddleContent />}
+            end={<EndContent />}
+        />
+    );
+};
+
+export default HeaderBarExample;
+
+` } }
+        additionalActions={[
+            {
+                title: 'Open in GitHub',
+                onClick: () => {
+                    window.open(
+                        'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/HeaderBar/HeaderBar.tsx',
+                        '_blank'
+                    );
+                },
+            }
+        ]}
+/>
+
+<Controls of={HeaderBarStories.Documentation} />
+
+```tsx
+import React from "react";
+import { HeaderBar, Button, IconButton, Avatar, Text } from "@webiny/admin-ui";
+import { ReactComponent as KeyboardArrowRightIcon } from "@webiny/icons/keyboard_arrow_down.svg";
+
+const HeaderBarExample = () => {
+    const StartContent = () => (
+        <Text size={"sm"} className={"wby-text-neutral-dimmed"}>
+            {"Headless CMS / Articles / The best article ever"}
+        </Text>
+    );
+
+    const MiddleContent = () => <>Content in the middle</>;
+
+    const EndContent = () => (
+        <div className={"wby-flex wby-gap-x-sm"}>
+            <Button variant={"ghost"} size={"md"} text={"Root tenant"} />
+            <div
+                className={
+                    "wby-flex wby-items-center wby-rounded-md " +
+"wby-gap-xxs wby-py-xs wby-px-xs wby-bg-neutral-light"
+                }
+            >
+                <Avatar
+                    size={"sm"}
+                    variant={"strong"}
+                    image={<Avatar.Image src={"https://i.pravatar.cc/300"} />}
+                    fallback={<Avatar.Fallback delayMs={0}>W</Avatar.Fallback>}
+                />
+                <IconButton
+                    variant={"ghost"}
+                    size={"xs"}
+                    color={"neutral-strong"}
+                    icon={<KeyboardArrowRightIcon />}
+                    onClick={() => console.log("clicked")}
+                />
+            </div>
+        </div>
+    );
+
+    return (
+        <HeaderBar
+            start={<StartContent />}
+            middle={<MiddleContent />}
+            end={<EndContent />}
+        />
+    );
+};
+
+export default HeaderBarExample;
+```
+
+## Examples
+
+### Start Content Only
+
+<Canvas of={HeaderBarStories.StartContentOnly} source={ { code: `
+import React from "react";
+import { HeaderBar, Text } from "@webiny/admin-ui";
+
+const StartContentOnlyExample = () => {
+    const StartContent = () => (
+        <Text size={"sm"} className={"wby-text-neutral-dimmed"}>
+            {"Headless CMS / Articles / The best article ever"}
+        </Text>
+    );
+
+    return <HeaderBar start={<StartContent />} />;
+};
+
+export default StartContentOnlyExample;
+` } } />
+
+### Middle Content Only
+
+<Canvas of={HeaderBarStories.MiddleContentOnly} source={ { code: `
+import React from "react";
+import { HeaderBar } from "@webiny/admin-ui";
+
+const MiddleContentOnlyExample = () => {
+    const MiddleContent = () => <>Content in the middle</>;
+
+    return <HeaderBar middle={<MiddleContent />} />;
+};
+
+export default MiddleContentOnlyExample;
+` } } />
+
+### End Content Only
+
+<Canvas of={HeaderBarStories.EndContentOnly} source={ { code: `
+import React from "react";
+import { HeaderBar, Button, IconButton, Avatar } from "@webiny/admin-ui";
+import { ReactComponent as KeyboardArrowRightIcon } from "@webiny/icons/keyboard_arrow_down.svg";
+
+const EndContentOnlyExample = () => {
+    const EndContent = () => (
+        <div className={"wby-flex wby-gap-x-sm"}>
+            <Button variant={"ghost"} size={"md"} text={"Root tenant"} />
+            <div
+                className={
+                    "wby-flex wby-items-center wby-rounded-md wby-gap-xxs
+                    wby-py-xs wby-px-xs wby-bg-neutral-light"
+                }
+            >
+                <Avatar
+                    size={"sm"}
+                    variant={"strong"}
+                    image={<Avatar.Image src={"https://i.pravatar.cc/300"} />}
+                    fallback={<Avatar.Fallback delayMs={0}>W</Avatar.Fallback>}
+                />
+                <IconButton
+                    variant={"ghost"}
+                    size={"xs"}
+                    color={"neutral-strong"}
+                    icon={<KeyboardArrowRightIcon />}
+                    onClick={() => console.log("clicked")}
+                />
+            </div>
+        </div>
+    );
+
+    return <HeaderBar end={<EndContent />} />;
+};
+
+export default EndContentOnlyExample;
+` } } />
+
+### Start and End Content Only
+
+<Canvas of={HeaderBarStories.StartEndContentOnly} source={ { code: `
+import React from "react";
+import { HeaderBar, Button, IconButton, Avatar, Text } from "@webiny/admin-ui";
+import { ReactComponent as KeyboardArrowRightIcon } from "@webiny/icons/keyboard_arrow_down.svg";
+
+const StartEndContentOnlyExample = () => {
+    const StartContent = () => (
+        <Text size={"sm"} className={"wby-text-neutral-dimmed"}>
+            {"Headless CMS / Articles / The best article ever"}
+        </Text>
+    );
+
+    const EndContent = () => (
+        <div className={"wby-flex wby-gap-x-sm"}>
+            <Button variant={"ghost"} size={"md"} text={"Root tenant"} />
+            <div
+                className={
+                    "wby-flex wby-items-center wby-rounded-md wby-gap-xxs wby-py-xs wby-px-xs wby-bg-neutral-light"
+                }
+            >
+                <Avatar
+                    size={"sm"}
+                    variant={"strong"}
+                    image={<Avatar.Image src={"https://i.pravatar.cc/300"} />}
+                    fallback={<Avatar.Fallback delayMs={0}>W</Avatar.Fallback>}
+                />
+                <IconButton
+                    variant={"ghost"}
+                    size={"xs"}
+                    color={"neutral-strong"}
+                    icon={<KeyboardArrowRightIcon />}
+                    onClick={() => console.log("clicked")}
+                />
+            </div>
+        </div>
+    );
+
+    return <HeaderBar start={<StartContent />} end={<EndContent />} />;
+};
+
+export default StartEndContentOnlyExample;
+` } } />
+
+### Multiple Start Content Items
+
+<Canvas of={HeaderBarStories.MoreStartContent} source={ { code: `
+import React from "react";
+import { HeaderBar, Button, IconButton, Avatar, Text } from "@webiny/admin-ui";
+import { ReactComponent as KeyboardArrowRightIcon } from "@webiny/icons/keyboard_arrow_down.svg";
+
+const MoreStartContentExample = () => {
+    const StartContent = () => (
+        <Text size={"sm"} className={"wby-text-neutral-dimmed"}>
+            {"Headless CMS / Articles / The best article ever"}
+        </Text>
+    );
+
+    const MiddleContent = () => <>Content in the middle</>;
+
+    const EndContent = () => (
+        <div className={"wby-flex wby-gap-x-sm"}>
+            <Button variant={"ghost"} size={"md"} text={"Root tenant"} />
+            <div
+                className={
+                    "wby-flex wby-items-center wby-rounded-md wby-gap-xxs wby-py-xs wby-px-xs wby-bg-neutral-light"
+                }
+            >
+                <Avatar
+                    size={"sm"}
+                    variant={"strong"}
+                    image={<Avatar.Image src={"https://i.pravatar.cc/300"} />}
+                    fallback={<Avatar.Fallback delayMs={0}>W</Avatar.Fallback>}
+                />
+                <IconButton
+                    variant={"ghost"}
+                    size={"xs"}
+                    color={"neutral-strong"}
+                    icon={<KeyboardArrowRightIcon />}
+                    onClick={() => console.log("clicked")}
+                />
+            </div>
+        </div>
+    );
+
+    return (
+        <HeaderBar
+            start={
+                <>
+                    <StartContent />
+                    <StartContent />
+                    <StartContent />
+                </>
+            }
+            middle={<MiddleContent />}
+            end={<EndContent />}
+        />
+    );
+};
+
+export default MoreStartContentExample;
+` } } />
diff --git a/packages/admin-ui/src/HeaderBar/HeaderBar.stories.tsx b/packages/admin-ui/src/HeaderBar/HeaderBar.stories.tsx
new file mode 100644
index 00000000000..aa5db04501f
--- /dev/null
+++ b/packages/admin-ui/src/HeaderBar/HeaderBar.stories.tsx
@@ -0,0 +1,125 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { ReactComponent as KeyboardArrowRightIcon } from "@webiny/icons/keyboard_arrow_down.svg";
+import { HeaderBar } from "./HeaderBar";
+import React from "react";
+import { Button, IconButton } from "~/Button";
+import { Avatar } from "~/Avatar";
+import { Text } from "~/Text";
+
+const meta: Meta<typeof HeaderBar> = {
+    title: "Components/HeaderBar",
+    component: HeaderBar,
+    decorators: [
+        Story => (
+            <div className="wby-bg-[#f4f4f4] wby-h-[500px] wby-w-[850px]  wby-rounded-[5px] wby-px-[50px] wby-content-center">
+                <Story />
+            </div>
+        )
+    ]
+};
+
+export default meta;
+
+type Story = StoryObj<typeof HeaderBar>;
+
+const StartExample = () => (
+    <Text size={"sm"} className={"wby-text-neutral-dimmed"}>
+        {"Headless CMS / Articles / The best article ever"}
+    </Text>
+);
+
+const MiddleExample = () => <>Content in the middle</>;
+
+const EndExample = () => (
+    <div className={"wby-flex wby-gap-x-sm"}>
+        <Button variant={"ghost"} size={"md"} text={"Root tenant"} />
+        <div
+            className={
+                "wby-flex wby-items-center wby-rounded-md wby-gap-xxs wby-py-xs wby-px-xs wby-bg-neutral-light"
+            }
+        >
+            <Avatar
+                size={"sm"}
+                variant={"strong"}
+                image={<Avatar.Image src={"https://i.pravatar.cc/300"} />}
+                fallback={<Avatar.Fallback delayMs={0}>W</Avatar.Fallback>}
+            />
+            <IconButton
+                variant={"ghost"}
+                size={"xs"}
+                color={"neutral-strong"}
+                icon={<KeyboardArrowRightIcon />}
+                onClick={() => console.log("clicked")}
+            />
+        </div>
+    </div>
+);
+
+export const Default: Story = {
+    args: {
+        start: <StartExample />,
+        middle: <MiddleExample />,
+        end: <EndExample />
+    }
+};
+
+export const StartContentOnly: Story = {
+    args: {
+        start: <StartExample />
+    }
+};
+
+export const MiddleContentOnly: Story = {
+    args: {
+        middle: <MiddleExample />
+    }
+};
+
+export const EndContentOnly: Story = {
+    args: {
+        end: <EndExample />
+    }
+};
+
+export const StartEndContentOnly: Story = {
+    args: {
+        start: <StartExample />,
+        end: <EndExample />
+    }
+};
+
+export const MoreStartContent: Story = {
+    args: {
+        start: (
+            <>
+                <StartExample />
+                <StartExample />
+                <StartExample />
+            </>
+        ),
+        middle: <MiddleExample />,
+        end: <EndExample />
+    }
+};
+
+export const Documentation: Story = {
+    args: {
+        start: <StartExample />,
+        middle: <MiddleExample />,
+        end: <EndExample />
+    },
+    argTypes: {
+        start: {
+            description: "Content displayed at the start of the header bar",
+            control: "none"
+        },
+        middle: {
+            description: "Content displayed in the middle of the header bar",
+            control: "none"
+        },
+        end: {
+            description: "Content displayed at the end of the header bar",
+            control: "none"
+        }
+    }
+};
diff --git a/packages/admin-ui/src/HeaderBar/HeaderBar.tsx b/packages/admin-ui/src/HeaderBar/HeaderBar.tsx
new file mode 100644
index 00000000000..ff42bb0d7de
--- /dev/null
+++ b/packages/admin-ui/src/HeaderBar/HeaderBar.tsx
@@ -0,0 +1,36 @@
+import React from "react";
+import { cn, makeDecoratable } from "~/utils";
+import { Separator } from "~/Separator";
+
+interface HeaderBarProps extends React.HTMLAttributes<HTMLDivElement> {
+    start?: React.ReactNode;
+    middle?: React.ReactNode;
+    end?: React.ReactNode;
+}
+
+const HeaderBarBase = ({ start, middle, end, className, ...props }: HeaderBarProps) => {
+    return (
+        <header>
+            <div
+                className={cn(
+                    "wby-grid wby-grid-cols-[1fr_auto_1fr] wby-w-full wby-py-xs-plus wby-px-sm wby-bg-neutral-base",
+                    className
+                )}
+                {...props}
+            >
+                <div className="wby-h-full wby-flex wby-items-center wby-justify-self-start">
+                    {start}
+                </div>
+                <div className="wby-h-full wby-flex wby-items-center">{middle}</div>
+                <div className="wby-h-full wby-flex wby-items-center wby-justify-self-end">
+                    {end}
+                </div>
+            </div>
+            <Separator />
+        </header>
+    );
+};
+
+const HeaderBar = makeDecoratable("HeaderBar", HeaderBarBase);
+
+export { HeaderBar, type HeaderBarProps };
diff --git a/packages/admin-ui/src/HeaderBar/index.ts b/packages/admin-ui/src/HeaderBar/index.ts
new file mode 100644
index 00000000000..78bd2ebaf88
--- /dev/null
+++ b/packages/admin-ui/src/HeaderBar/index.ts
@@ -0,0 +1 @@
+export * from "./HeaderBar";
diff --git a/packages/admin-ui/src/Heading/Heading.mdx b/packages/admin-ui/src/Heading/Heading.mdx
new file mode 100644
index 00000000000..493f84c7549
--- /dev/null
+++ b/packages/admin-ui/src/Heading/Heading.mdx
@@ -0,0 +1,184 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+
+import * as HeadingStories from './Heading.stories';
+
+<Meta of={HeadingStories} />
+
+# Heading
+
+The Heading component is used to display titles and section headings in the UI. It provides consistent typography and semantic HTML structure through six different heading levels (h1-h6).
+
+## Usage
+
+<Canvas of={HeadingStories.Documentation} source={ { code: `
+import React from "react";
+import { Heading } from "@webiny/admin-ui";
+
+const HeadingExample = () => {
+    return <Heading level={1}>This is a heading</Heading>;
+};
+
+export default HeadingExample;
+
+` } }
+        additionalActions={[
+            {
+                title: 'Open in GitHub',
+                onClick: () => {
+                    window.open(
+                        'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Heading/Heading.tsx',
+                        '_blank'
+                    );
+                },
+            }
+        ]}
+/>
+
+<Controls of={HeadingStories.Documentation} />
+
+```tsx
+import React from "react";
+import { Heading } from "@webiny/admin-ui";
+
+const HeadingExample = () => {
+    return <Heading level={1}>This is a heading</Heading>;
+};
+
+export default HeadingExample;
+```
+
+## Examples
+
+### Heading Level 1
+
+The largest heading, typically used for page titles.
+
+<Canvas of={HeadingStories.Heading1} source={ { code: `
+import React from "react";
+import { Heading } from "@webiny/admin-ui";
+
+const Heading1Example = () => {
+    return (
+        <Heading level={1}>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.
+        </Heading>
+    );
+};
+
+export default Heading1Example;
+` } } />
+
+
+### Heading Level 2
+
+Used for major section headings.
+
+<Canvas of={HeadingStories.Heading2} source={ { code: `
+import React from "react";
+import { Heading } from "@webiny/admin-ui";
+
+const Heading2Example = () => {
+    return (
+        <Heading level={2}>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.
+        </Heading>
+    );
+};
+
+export default Heading2Example;
+` } } />
+
+### Heading Level 3
+
+Used for subsection headings.
+
+<Canvas of={HeadingStories.Heading3} source={ { code: `
+import React from "react";
+import { Heading } from "@webiny/admin-ui";
+
+const Heading3Example = () => {
+    return (
+        <Heading level={3}>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.
+        </Heading>
+    );
+};
+
+export default Heading3Example;
+` } } />
+
+### Heading Level 4
+
+Used for minor subsection headings.
+
+<Canvas of={HeadingStories.Heading4} source={ { code: `
+import React from "react";
+import { Heading } from "@webiny/admin-ui";
+
+const Heading4Example = () => {
+    return (
+        <Heading level={4}>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.
+        </Heading>
+    );
+};
+
+export default Heading4Example;
+` } } />
+
+### Heading Level 5
+
+Used for small headings within sections.
+
+<Canvas of={HeadingStories.Heading5} source={ { code: `
+import React from "react";
+import { Heading } from "@webiny/admin-ui";
+
+const Heading5Example = () => {
+    return (
+        <Heading level={5}>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.
+        </Heading>
+    );
+};
+
+export default Heading5Example;
+` } } />
+
+### Heading Level 6
+
+The smallest heading, used for the least significant section headings.
+
+<Canvas of={HeadingStories.Heading6} source={ { code: `
+import React from "react";
+import { Heading } from "@webiny/admin-ui";
+
+const Heading6Example = () => {
+    return (
+        <Heading level={6}>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.
+        </Heading>
+    );
+};
+
+export default Heading6Example;
+` } } />
+
+### as Example
+
+`as` prop is used to change the HTML tag of the heading. This is useful when you want to maintain semantic structure but want different visual styling.
+
+<Canvas of={HeadingStories.As} source={ { code: `
+import React from "react";
+import { Heading } from "@webiny/admin-ui";
+
+const AsExample = () => {
+    return (
+        <Heading level={2} as="h1">
+            This is visually a Heading level 2, but semantically an h1
+        </Heading>
+    );
+};
+
+export default AsExample;
+` } } />
\ No newline at end of file
diff --git a/packages/admin-ui/src/Heading/Heading.stories.tsx b/packages/admin-ui/src/Heading/Heading.stories.tsx
new file mode 100644
index 00000000000..2b8a94d52be
--- /dev/null
+++ b/packages/admin-ui/src/Heading/Heading.stories.tsx
@@ -0,0 +1,107 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Heading } from "./Heading";
+
+const meta: Meta<typeof Heading> = {
+    title: "Components/Heading",
+    component: Heading,
+    argTypes: {
+        level: {
+            control: {
+                type: "number",
+                min: 1,
+                max: 6
+            }
+        }
+    }
+};
+
+export default meta;
+type Story = StoryObj<typeof Heading>;
+
+export const Heading1: Story = {
+    args: {
+        level: 1,
+        children:
+            "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus."
+    }
+};
+
+export const Heading2: Story = {
+    args: {
+        level: 2,
+        children:
+            "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus."
+    }
+};
+
+export const Heading3: Story = {
+    args: {
+        level: 3,
+        children:
+            "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus."
+    }
+};
+
+export const Heading4: Story = {
+    args: {
+        level: 4,
+        children:
+            "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus."
+    }
+};
+
+export const Heading5: Story = {
+    args: {
+        level: 5,
+        children:
+            "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus."
+    }
+};
+
+export const Heading6: Story = {
+    args: {
+        level: 6,
+        children:
+            "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus."
+    }
+};
+
+export const As: Story = {
+    args: {
+        level: 2,
+        as: "h1",
+        children: "This is visually a Heading level 2, but semantically an h1"
+    }
+};
+
+export const Documentation: Story = {
+    args: {
+        level: 1,
+        children: "This is a heading",
+        as: undefined,
+        className: undefined
+    },
+    argTypes: {
+        level: {
+            description: "The heading level (1-6) which determines the size and semantic meaning.",
+            control: "select",
+            options: [1, 2, 3, 4, 5, 6]
+        },
+        as: {
+            description:
+                "The HTML tag to render, overriding the default tag based on level. This is useful when you want to maintain semantic structure but want different visual styling.",
+            control: "select",
+            options: ["none", "h1", "h2", "h3", "h4", "h5", "h6"]
+        },
+        children: {
+            description: "The content of the heading.",
+            control: "text"
+        },
+        className: {
+            description:
+                "Additional CSS classes to apply to the heading. You can pass multiple classes, separated by commas or spaces.",
+            control: "none"
+        }
+    }
+};
diff --git a/packages/admin-ui/src/Heading/Heading.tsx b/packages/admin-ui/src/Heading/Heading.tsx
new file mode 100644
index 00000000000..14b2a12dadd
--- /dev/null
+++ b/packages/admin-ui/src/Heading/Heading.tsx
@@ -0,0 +1,55 @@
+import React from "react";
+import { cn, makeDecoratable, cva, type VariantProps } from "~/utils";
+
+export type HeadingTags = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+export type HeadingLevels = 1 | 2 | 3 | 4 | 5 | 6;
+
+// Create a mapping of variant to tag
+const TAG_MAP: Record<HeadingLevels, HeadingTags> = {
+    1: "h1",
+    2: "h2",
+    3: "h3",
+    4: "h4",
+    5: "h5",
+    6: "h6"
+};
+
+const headingVariants = cva("wby-font-sans", {
+    variants: {
+        level: {
+            1: "wby-text-h1",
+            2: "wby-text-h2",
+            3: "wby-text-h3",
+            4: "wby-text-h4",
+            5: "wby-text-h5",
+            6: "wby-text-h6"
+        }
+    },
+    defaultVariants: {
+        level: 1
+    }
+});
+
+interface HeadingProps
+    extends React.HTMLAttributes<HTMLHeadingElement>,
+        VariantProps<typeof headingVariants> {
+    as?: HeadingTags;
+}
+
+const HeadingBase = ({ children, level, className, as, ...props }: HeadingProps) => {
+    // Ensure `level` is a valid number, or fallback to a default value 1
+    const validatedLevel = level && level in TAG_MAP ? level : 1;
+
+    // Choose the tag: prefer `as`, otherwise use `TAG_MAP[validatedLevel]`
+    const Tag = as || TAG_MAP[validatedLevel];
+
+    return (
+        <Tag {...props} className={cn(headingVariants({ level }), className)}>
+            {children}
+        </Tag>
+    );
+};
+
+const Heading = makeDecoratable("Heading", HeadingBase);
+
+export { Heading, type HeadingProps };
diff --git a/packages/admin-ui/src/Heading/index.ts b/packages/admin-ui/src/Heading/index.ts
new file mode 100644
index 00000000000..8c56f4e40f7
--- /dev/null
+++ b/packages/admin-ui/src/Heading/index.ts
@@ -0,0 +1 @@
+export * from "./Heading";
diff --git a/packages/admin-ui/src/Icon/Icon.mdx b/packages/admin-ui/src/Icon/Icon.mdx
new file mode 100644
index 00000000000..0b7a1f514c0
--- /dev/null
+++ b/packages/admin-ui/src/Icon/Icon.mdx
@@ -0,0 +1,331 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+
+import * as IconStories from './Icon.stories';
+
+<Meta of={IconStories} />
+
+# Icon
+
+The Icon component is a versatile UI element used to display SVG icons with consistent styling across the application. It provides accessibility features and supports various sizes and colors to match your design system requirements.
+
+## Usage
+
+<Canvas of={IconStories.Documentation} source={ { code: `
+import React from "react";
+import { Icon } from "@webiny/admin-ui";
+import { ReactComponent as CloseIcon } from "@webiny/icons/close.svg";
+
+const IconExample = () => {
+    return (
+        <Icon
+            icon={<CloseIcon />}
+            label="Close icon"
+            size="md"
+            color="accent"
+        />
+    );
+};
+
+export default IconExample;
+
+` } }
+        additionalActions={[
+            {
+                title: 'Open in GitHub',
+                onClick: () => {
+                    window.open(
+                        'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Icon/Icon.tsx',
+                        '_blank'
+                    );
+                },
+            }
+        ]}
+/>
+
+<Controls of={IconStories.Documentation} />
+
+```tsx
+import React from "react";
+import { Icon } from "@webiny/admin-ui";
+import { ReactComponent as CloseIcon } from "@webiny/icons/close.svg";
+
+const IconExample = () => {
+    return (
+        <Icon
+            icon={<CloseIcon />}
+            label="Close icon"
+            size="md"
+            color="accent"
+        />
+    );
+};
+
+export default IconExample;
+```
+
+## Examples
+
+### Default
+
+<Canvas of={IconStories.Default} source={ { code: `
+import React from "react";
+import { Icon } from "@webiny/admin-ui";
+import { ReactComponent as CloseIcon } from "@webiny/icons/close.svg";
+
+const DefaultIconExample = () => {
+    return (
+        <Icon
+            icon={<CloseIcon />}
+            label="This is an icon"
+            size="md"
+            color="accent"
+        />
+    );
+};
+
+export default DefaultIconExample;
+` } } />
+
+### Color Variants
+
+#### Inherit Color
+
+<Canvas of={IconStories.ColorInherit} source={ { code: `
+import React from "react";
+import { Icon } from "@webiny/admin-ui";
+import { ReactComponent as CloseIcon } from "@webiny/icons/close.svg";
+
+const InheritColorIconExample = () => {
+    return (
+        <div className="wby-fill-success">
+            <Icon
+                icon={<CloseIcon />}
+                label="This is an icon"
+                size="md"
+                color="inherit"
+            />
+        </div>
+    );
+};
+
+    export default InheritColorIconExample;
+` } } />
+
+#### Accent Color
+
+<Canvas of={IconStories.ColorAccent} source={ { code: `
+import React from "react";
+import { Icon } from "@webiny/admin-ui";
+import { ReactComponent as CloseIcon } from "@webiny/icons/close.svg";
+
+const AccentIconExample = () => {
+    return (
+        <Icon
+            icon={<CloseIcon />}
+            label="This is an icon"
+            size="md"
+            color="accent"
+        />
+    );
+};
+
+export default AccentIconExample;
+` } } />
+
+#### Neutral Light Color
+
+<Canvas of={IconStories.ColorNeutralLight} source={ { code: `
+import React from "react";
+import { Icon } from "@webiny/admin-ui";
+import { ReactComponent as CloseIcon } from "@webiny/icons/close.svg";
+
+const NeutralLightIconExample = () => {
+    return (
+        <Icon
+            icon={<CloseIcon />}
+            label="This is an icon"
+            size="md"
+            color="neutral-light"
+        />
+    );
+};
+
+    export default NeutralLightIconExample;
+` } } />
+
+#### Neutral Strong Color
+
+<Canvas of={IconStories.ColorNeutralStrong} source={ { code: `
+import React from "react";
+import { Icon } from "@webiny/admin-ui";
+import { ReactComponent as CloseIcon } from "@webiny/icons/close.svg";
+
+const NeutralStrongIconExample = () => {
+    return (
+        <Icon
+            icon={<CloseIcon />}
+            label="This is an icon"
+            size="md"
+            color="neutral-strong"
+        />
+    );
+};
+
+        export default NeutralStrongIconExample;
+` } } />
+
+#### Neutral Strong Transparent Color
+
+<Canvas of={IconStories.ColorNeutralStrongTransparent} source={ { code: `
+import React from "react";
+import { Icon } from "@webiny/admin-ui";
+import { ReactComponent as CloseIcon } from "@webiny/icons/close.svg";
+
+const NeutralStrongTransparentIconExample = () => {
+    return (
+        <div className="wby-bg-neutral-disabled wby-p-3xl wby-rounded-md">
+            <Icon
+                icon={<CloseIcon />}
+                label="This is an icon"
+                size="md"
+                color="neutral-strong-transparent"
+            />
+        </div>
+    );
+};
+
+export default NeutralStrongTransparentIconExample;
+` } } />
+
+#### Neutral Base Color
+
+<Canvas of={IconStories.ColorNeutralBase} source={ { code: `
+import React from "react";
+import { Icon } from "@webiny/admin-ui";
+import { ReactComponent as CloseIcon } from "@webiny/icons/close.svg";
+
+const NeutralBaseIconExample = () => {
+    return (
+        <div className="wby-bg-neutral-dark wby-p-3xl wby-rounded-md">
+            <Icon
+                icon={<CloseIcon />}
+                label="This is an icon"
+                size="md"
+                color="neutral-base"
+            />
+        </div>
+    );
+};
+
+    export default NeutralBaseIconExample;
+` } } />
+
+#### Neutral Negative Color
+
+<Canvas of={IconStories.ColorNeutralNegative} source={ { code: `
+import React from "react";
+import { Icon } from "@webiny/admin-ui";
+import { ReactComponent as CloseIcon } from "@webiny/icons/close.svg";
+
+const NeutralNegativeIconExample = () => {
+    return (
+        <div className="wby-bg-neutral-dark wby-p-3xl wby-rounded-md">
+            <Icon
+                icon={<CloseIcon />}
+                label="This is an icon"
+                size="md"
+                color="neutral-negative"
+            />
+        </div>
+    );
+};
+
+        export default NeutralNegativeIconExample;
+` } } />
+
+### Size Variants
+
+#### Extra Small
+
+<Canvas of={IconStories.SizeXs} source={ { code: `
+import React from "react";
+import { Icon } from "@webiny/admin-ui";
+import { ReactComponent as CloseIcon } from "@webiny/icons/close.svg";
+
+const XsIconExample = () => {
+    return (
+        <Icon
+            icon={<CloseIcon />}
+            label="This is an icon"
+            size="xs"
+            color="accent"
+        />
+    );
+};
+
+export default XsIconExample;
+` } } />
+
+#### Small
+
+<Canvas of={IconStories.SizeSm} source={ { code: `
+import React from "react";
+import { Icon } from "@webiny/admin-ui";
+import { ReactComponent as CloseIcon } from "@webiny/icons/close.svg";
+
+const SmIconExample = () => {
+    return (
+        <Icon
+            icon={<CloseIcon />}
+            label="This is an icon"
+            size="sm"
+            color="accent"
+        />
+    );
+};
+
+export default SmIconExample;
+` } } />
+
+#### Medium
+
+<Canvas of={IconStories.SizeMd} source={ { code: `
+import React from "react";
+import { Icon } from "@webiny/admin-ui";
+import { ReactComponent as CloseIcon } from "@webiny/icons/close.svg";
+
+const MdIconExample = () => {
+    return (
+        <Icon
+            icon={<CloseIcon />}
+            label="This is an icon"
+            size="md"
+            color="accent"
+        />
+    );
+};
+
+export default MdIconExample;
+` } } />
+
+#### Large
+
+<Canvas of={IconStories.SizeLg} source={ { code: `
+import React from "react";
+import { Icon } from "@webiny/admin-ui";
+import { ReactComponent as CloseIcon } from "@webiny/icons/close.svg";
+
+const LgIconExample = () => {
+    return (
+        <Icon
+            icon={<CloseIcon />}
+            label="This is an icon"
+            size="lg"
+            color="accent"
+        />
+    );
+};
+
+export default LgIconExample;
+` } } />
+
diff --git a/packages/admin-ui/src/Icon/Icon.stories.tsx b/packages/admin-ui/src/Icon/Icon.stories.tsx
new file mode 100644
index 00000000000..785eb3d9dbb
--- /dev/null
+++ b/packages/admin-ui/src/Icon/Icon.stories.tsx
@@ -0,0 +1,189 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { ReactComponent as XIcon } from "@webiny/icons/close.svg";
+import { Icon } from "./Icon";
+
+const meta: Meta<typeof Icon> = {
+    title: "Components/Icon",
+    component: Icon
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Icon>;
+
+export const Default: Story = {
+    args: {
+        icon: <XIcon />,
+        label: "This is an icon",
+        size: "md",
+        color: "accent"
+    },
+    argTypes: {
+        size: {
+            control: "select",
+            options: ["xs", "sm", "md", "lg"]
+        },
+        color: {
+            control: "select",
+            options: [
+                "accent",
+                "neutral-light",
+                "neutral-strong",
+                "neutral-strong-transparent",
+                "neutral-base",
+                "neutral-negative",
+                "inherit"
+            ]
+        }
+    }
+};
+
+export const ColorInherit: Story = {
+    decorators: [
+        Story => (
+            <div className="wby-fill-success">
+                <Story />
+            </div>
+        )
+    ],
+    args: {
+        ...Default.args,
+        color: "inherit"
+    }
+};
+
+export const ColorAccent: Story = {
+    args: {
+        ...Default.args,
+        color: "accent"
+    }
+};
+
+export const ColorNeutralLight: Story = {
+    args: {
+        ...Default.args,
+        color: "neutral-light"
+    }
+};
+
+export const ColorNeutralStrong: Story = {
+    args: {
+        ...Default.args,
+        color: "neutral-strong"
+    }
+};
+
+export const ColorNeutralStrongTransparent: Story = {
+    decorators: [
+        Story => (
+            <div className="wby-bg-neutral-disabled wby-p-3xl wby-rounded-md">
+                <Story />
+            </div>
+        )
+    ],
+    args: {
+        ...Default.args,
+        color: "neutral-strong-transparent"
+    }
+};
+
+export const ColorNeutralBase: Story = {
+    decorators: [
+        Story => (
+            <div className="wby-bg-neutral-dark wby-p-3xl wby-rounded-md">
+                <Story />
+            </div>
+        )
+    ],
+    args: {
+        ...Default.args,
+        color: "neutral-base"
+    }
+};
+
+export const ColorNeutralNegative: Story = {
+    decorators: [
+        Story => (
+            <div className="wby-bg-neutral-dark wby-p-3xl wby-rounded-md">
+                <Story />
+            </div>
+        )
+    ],
+    args: {
+        ...Default.args,
+        color: "neutral-negative"
+    }
+};
+
+export const SizeXs: Story = {
+    args: {
+        ...Default.args,
+        size: "xs"
+    }
+};
+
+export const SizeSm: Story = {
+    args: {
+        ...Default.args,
+        size: "sm"
+    }
+};
+
+export const SizeMd: Story = {
+    args: {
+        ...Default.args,
+        size: "md"
+    }
+};
+
+export const SizeLg: Story = {
+    args: {
+        ...Default.args,
+        size: "lg"
+    }
+};
+
+export const Documentation: Story = {
+    args: {
+        icon: <XIcon />,
+        label: "Close icon",
+        size: "md",
+        color: "accent",
+        className: ""
+    },
+    argTypes: {
+        icon: {
+            description:
+                "The SVG icon component to be rendered. Please refer to the example code for details.",
+            control: "none"
+        },
+        label: {
+            description: "Accessible label for the icon (for screen readers)",
+            control: "text"
+        },
+        size: {
+            description: "The size of the icon",
+            control: "select",
+            options: ["xs", "sm", "md", "lg"]
+        },
+        color: {
+            description: "The color of the icon",
+            control: "select",
+            options: [
+                "inherit",
+                "accent",
+                "neutral-base",
+                "neutral-light",
+                "neutral-strong",
+                "neutral-strong-transparent",
+                "neutral-negative"
+            ]
+        },
+        className: {
+            description:
+                "Additional CSS classes to apply to the icon. You can pass multiple classes, separated by commas or spaces.",
+            control: "text"
+        }
+    }
+};
diff --git a/packages/admin-ui/src/Icon/Icon.tsx b/packages/admin-ui/src/Icon/Icon.tsx
new file mode 100644
index 00000000000..1cffe518fe4
--- /dev/null
+++ b/packages/admin-ui/src/Icon/Icon.tsx
@@ -0,0 +1,51 @@
+import React from "react";
+import * as AccessibleIcon from "@radix-ui/react-accessible-icon";
+import { cn, cva, makeDecoratable, type VariantProps } from "~/utils";
+
+const iconVariants = cva("wby-shrink-0", {
+    variants: {
+        size: {
+            xs: "wby-size-sm-extra",
+            sm: "wby-size-md",
+            md: "wby-size-md-plus",
+            lg: "wby-size-lg"
+        },
+        color: {
+            inherit: "wby-fill-inherit",
+            accent: "wby-fill-accent-default",
+            "neutral-light": "wby-fill-neutral-strong",
+            "neutral-strong": "wby-fill-neutral-xstrong",
+            "neutral-strong-transparent": "wby-fill-neutral-xstrong/30",
+            "neutral-base": "wby-fill-neutral-base",
+            "neutral-negative": "wby-fill-neutral-base/50"
+        }
+    },
+    defaultVariants: {
+        size: "md",
+        color: "inherit"
+    }
+});
+
+interface IconProps
+    extends Omit<React.HTMLAttributes<HTMLOrSVGElement>, "color">,
+        VariantProps<typeof iconVariants> {
+    label: string;
+    icon: React.ReactNode;
+}
+
+const IconBase = (props: IconProps) => {
+    const { label, icon, color, size, className, ...rest } = props;
+    return (
+        <AccessibleIcon.Root label={label}>
+            {/* @ts-expect-error */}
+            {React.cloneElement(icon, {
+                ...rest,
+                className: cn(iconVariants({ color, size }), className)
+            })}
+        </AccessibleIcon.Root>
+    );
+};
+
+const Icon = makeDecoratable("Icon", IconBase);
+
+export { Icon, type IconProps };
diff --git a/packages/admin-ui/src/Icon/index.ts b/packages/admin-ui/src/Icon/index.ts
new file mode 100644
index 00000000000..998237c44e1
--- /dev/null
+++ b/packages/admin-ui/src/Icon/index.ts
@@ -0,0 +1 @@
+export * from "./Icon";
diff --git a/packages/admin-ui/src/IconPicker/IconPicker.mdx b/packages/admin-ui/src/IconPicker/IconPicker.mdx
new file mode 100644
index 00000000000..ff197d06cc3
--- /dev/null
+++ b/packages/admin-ui/src/IconPicker/IconPicker.mdx
@@ -0,0 +1,174 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+
+import * as IconPickerStories from './IconPicker.stories';
+
+<Meta of={IconPickerStories} />
+
+# Icon Picker
+
+The Icon Picker component allows users to select icons from a predefined set of options. It provides an intuitive interface for icon selection in forms and design tools, with search functionality to quickly find specific icons.
+
+## Usage
+
+<Canvas of={IconPickerStories.Documentation} source={ { code: `
+import React, { useState } from "react";
+import { IconPicker } from "@webiny/admin-ui";
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { fas } from "@fortawesome/free-solid-svg-icons";
+
+// Initialize FontAwesome library
+library.add(fas as any);
+
+const IconPickerExample = () => {
+    const [selectedIcon, setSelectedIcon] = useState("");
+    const [validation, setValidation] = useState({ isValid: true, message: "" });
+
+    const handleChange = (newIcon: string) => {
+        setSelectedIcon(newIcon);
+
+        if (!newIcon && true) { // true represents required field
+            setValidation({ isValid: false, message: "Please select an icon" });
+        } else {
+            setValidation({ isValid: true, message: "" });
+        }
+    };
+
+    return (
+        <IconPicker
+            label="Select an Icon"
+            description="Choose an icon for your button"
+            note="Note: The selected icon will be displayed on your button"
+            required={true}
+            icons={[
+                { prefix: "fas", name: "trash-restore-alt" },
+                { prefix: "fas", name: "file-pen" },
+                { prefix: "fas", name: "receipt" },
+                { prefix: "fas", name: "user-circle" },
+                { prefix: "fas", name: "circle-user" }
+                // Add more icons as needed
+            ]}
+            value={selectedIcon}
+            onChange={handleChange}
+            validation={validation}
+        />
+    );
+};
+
+export default IconPickerExample;
+
+` } }
+        additionalActions={[
+            {
+                title: 'Open in GitHub',
+                onClick: () => {
+                    window.open(
+                        'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/IconPicker/IconPicker.tsx',
+                        '_blank'
+                    );
+                },
+            }
+        ]}
+/>
+
+<Controls of={IconPickerStories.Documentation} exclude={"onChange"} />
+
+```tsx
+import React, { useState } from "react";
+import { IconPicker } from "@webiny/admin-ui";
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { fas } from "@fortawesome/free-solid-svg-icons";
+
+// Initialize FontAwesome library
+library.add(fas as any);
+
+const IconPickerExample = () => {
+    const [selectedIcon, setSelectedIcon] = useState("");
+    const [validation, setValidation] = useState({ isValid: true, message: "" });
+
+    const handleChange = (newIcon: string) => {
+        setSelectedIcon(newIcon);
+
+        if (!newIcon && true) { // true represents required field
+            setValidation({ isValid: false, message: "Please select an icon" });
+        } else {
+            setValidation({ isValid: true, message: "" });
+        }
+    };
+
+    return (
+        <IconPicker
+            label="Select an Icon"
+            description="Choose an icon for your button"
+            note="Note: The selected icon will be displayed on your button"
+            required={true}
+            icons={[
+                { prefix: "fas", name: "trash-restore-alt" },
+                { prefix: "fas", name: "file-pen" },
+                { prefix: "fas", name: "receipt" },
+                { prefix: "fas", name: "user-circle" },
+                { prefix: "fas", name: "circle-user" }
+                // Add more icons as needed
+            ]}
+            value={selectedIcon}
+            onChange={handleChange}
+            validation={validation}
+        />
+    );
+};
+
+export default IconPickerExample;
+```
+
+## Dynamic Loading All Font Awesome Icons
+
+> ⚠️ **Note**: Importing all icons will increase your bundle size. Use this approach only when necessary, or pair it with a search interface to maintain a good user experience.
+
+To automatically load all Font Awesome icons (solid, regular, and brands) for use in the `IconPicker`, you can register them with the Font Awesome library and extract them from the internal `definitions` object. This approach provides a scalable and maintainable way to manage icon sets across your application.
+
+```tsx
+import React, { useState } from "react";
+import { IconPicker, IconPickerIconDto } from "@webiny/admin-ui";
+import { library, IconName } from "@fortawesome/fontawesome-svg-core";
+import { fas } from "@fortawesome/free-solid-svg-icons";
+import { far } from "@fortawesome/free-regular-svg-icons";
+import { fab } from "@fortawesome/free-brands-svg-icons";
+import { IconPrefix } from "@fortawesome/fontawesome-common-types";
+
+// Register all Font Awesome icons
+// Initialize FontAwesome library
+library.add(fab as any, fas as any, far as any);
+
+// Define allowed prefixes
+const validPrefixes: IconPrefix[] = ["fas", "far", "fab"];
+
+// Extract icons into { prefix, name } format
+const definitions = (library as any).definitions;
+const allIcons: IconPickerIconDto[] = [];
+
+Object.keys(definitions)
+    .filter((pack): pack is IconPrefix => validPrefixes.includes(pack as IconPrefix))
+    .forEach((prefix) => {
+        const icons = definitions[prefix];
+        Object.keys(icons).forEach((icon) => {
+            allIcons.push({
+                prefix,
+                name: icon as IconName
+            });
+        });
+    });
+```
+
+You can then pass the `allIcons` array to the `IconPicker` component:
+
+```tsx
+<IconPicker
+    label="Select an Icon"
+    description="Choose an icon for your button"
+    note="Note: The selected icon will be displayed on your button"
+    required={true}
+    icons={allIcons}
+    value={selectedIcon}
+    onChange={handleChange}
+    validation={validation}
+/>
+```
diff --git a/packages/admin-ui/src/IconPicker/IconPicker.stories.tsx b/packages/admin-ui/src/IconPicker/IconPicker.stories.tsx
new file mode 100644
index 00000000000..c365dcda917
--- /dev/null
+++ b/packages/admin-ui/src/IconPicker/IconPicker.stories.tsx
@@ -0,0 +1,245 @@
+import React, { useState, useEffect } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { fas } from "@fortawesome/free-solid-svg-icons";
+import { IconPicker } from "~/IconPicker";
+
+const meta: Meta<typeof IconPicker> = {
+    title: "Components/Form/IconPicker",
+    component: IconPicker,
+    argTypes: {
+        onChange: { action: "onChange" },
+        disabled: {
+            control: "boolean",
+            defaultValue: false
+        }
+    },
+    parameters: {
+        layout: "padded"
+    },
+    render: args => {
+        const [value, setValue] = useState(args.value);
+        return <IconPicker {...args} value={value} onChange={setValue} />;
+    }
+};
+
+// @ts-expect-error
+library.add(fas);
+
+export default meta;
+type Story = StoryObj<typeof IconPicker>;
+
+export const Default: Story = {
+    args: {
+        icons: [
+            { prefix: "fas", name: "trash-restore-alt" },
+            { prefix: "fas", name: "trash-can-arrow-up" },
+            { prefix: "fas", name: "naira-sign" },
+            { prefix: "fas", name: "cart-arrow-down" },
+            { prefix: "fas", name: "walkie-talkie" },
+            { prefix: "fas", name: "file-edit" },
+            { prefix: "fas", name: "file-pen" },
+            { prefix: "fas", name: "receipt" },
+            { prefix: "fas", name: "pen-square" },
+            { prefix: "fas", name: "pencil-square" },
+            { prefix: "fas", name: "square-pen" },
+            { prefix: "fas", name: "suitcase-rolling" },
+            { prefix: "fas", name: "person-circle-exclamation" },
+            { prefix: "fas", name: "chevron-down" },
+            { prefix: "fas", name: "battery" },
+            { prefix: "fas", name: "battery-5" },
+            { prefix: "fas", name: "battery-full" },
+            { prefix: "fas", name: "skull-crossbones" },
+            { prefix: "fas", name: "code-compare" },
+            { prefix: "fas", name: "list-dots" },
+            { prefix: "fas", name: "list-ul" },
+            { prefix: "fas", name: "school-lock" },
+            { prefix: "fas", name: "tower-cell" },
+            { prefix: "fas", name: "long-arrow-alt-down" },
+            { prefix: "fas", name: "down-long" },
+            { prefix: "fas", name: "ranking-star" },
+            { prefix: "fas", name: "chess-king" },
+            { prefix: "fas", name: "person-harassing" },
+            { prefix: "fas", name: "brazilian-real-sign" },
+            { prefix: "fas", name: "landmark-alt" },
+            { prefix: "fas", name: "landmark-dome" },
+            { prefix: "fas", name: "arrow-up" },
+            { prefix: "fas", name: "television" },
+            { prefix: "fas", name: "tv-alt" },
+            { prefix: "fas", name: "tv" },
+            { prefix: "fas", name: "shrimp" },
+            { prefix: "fas", name: "tasks" },
+            { prefix: "fas", name: "list-check" },
+            { prefix: "fas", name: "jug-detergent" },
+            { prefix: "fas", name: "user-circle" },
+            { prefix: "fas", name: "circle-user" },
+            { prefix: "fas", name: "user-shield" },
+            { prefix: "fas", name: "wind" },
+            { prefix: "fas", name: "car-crash" },
+            { prefix: "fas", name: "car-burst" },
+            { prefix: "fas", name: "y" },
+            { prefix: "fas", name: "snowboarding" },
+            { prefix: "fas", name: "person-snowboarding" },
+            { prefix: "fas", name: "shipping-fast" },
+            { prefix: "fas", name: "truck-fast" }
+        ]
+    }
+};
+
+export const WithLabel: Story = {
+    args: {
+        ...Default.args,
+        label: "Any field label"
+    }
+};
+
+export const WithLabelRequired: Story = {
+    args: {
+        ...Default.args,
+        label: "Any field label",
+        required: true
+    }
+};
+
+export const WithDescription: Story = {
+    args: {
+        ...Default.args,
+        description: "Provide the required information for processing your request."
+    }
+};
+
+export const WithNotes: Story = {
+    args: {
+        ...Default.args,
+        note: "Note: Ensure your selection or input is accurate before proceeding."
+    }
+};
+
+export const WithErrors: Story = {
+    args: {
+        ...Default.args,
+        validation: {
+            isValid: false,
+            message: "This field is required."
+        }
+    }
+};
+
+export const Disabled: Story = {
+    args: {
+        ...Default.args,
+        label: "Any field label",
+        disabled: true
+    }
+};
+
+export const FullExample: Story = {
+    args: {
+        ...Default.args,
+        label: "Any field label",
+        required: true,
+        description: "Provide the required information for processing your request.",
+        note: "Note: Ensure your selection or input is accurate before proceeding.",
+        validation: {
+            isValid: false,
+            message: "This field is required."
+        }
+    }
+};
+
+export const Documentation: Story = {
+    render: args => {
+        const [value, setValue] = useState(args.value || null);
+        const [validation, setValidation] = useState({ isValid: true, message: "" });
+
+        // Update value when args.value changes
+        useEffect(() => {
+            setValue(args.value || null);
+        }, [args.value]);
+
+        const handleChange = (newValue: any) => {
+            setValue(newValue);
+
+            // Simple required validation
+            if (args.required && !newValue) {
+                setValidation({ isValid: false, message: "Please select an icon" });
+            } else {
+                setValidation({ isValid: true, message: "" });
+            }
+        };
+
+        // Validate on required change or value change
+        useEffect(() => {
+            if (args.required && !value) {
+                setValidation({ isValid: false, message: "Please select an icon" });
+            } else {
+                setValidation({ isValid: true, message: "" });
+            }
+        }, [args.required, value]);
+
+        return (
+            <IconPicker
+                {...args}
+                value={value}
+                onChange={handleChange}
+                validation={validation}
+                required={args.required}
+            />
+        );
+    },
+    args: {
+        label: "Select an Icon",
+        required: true,
+        disabled: false,
+        description: "Choose an icon for your button",
+        note: "Note: The selected icon will be displayed on your button",
+        icons: [
+            { prefix: "fas", name: "trash-restore-alt" },
+            { prefix: "fas", name: "file-pen" },
+            { prefix: "fas", name: "receipt" },
+            { prefix: "fas", name: "user-circle" },
+            { prefix: "fas", name: "circle-user" }
+        ],
+        value: null,
+        validation: undefined
+    },
+    argTypes: {
+        label: {
+            description: "Label text for the icon picker",
+            control: "text"
+        },
+        required: {
+            description: "Makes the field required when set to true",
+            control: "boolean"
+        },
+        disabled: {
+            description: "Disables the icon picker when set to true",
+            control: "boolean"
+        },
+        description: {
+            description: "Additional description text below the field",
+            control: "text"
+        },
+        note: {
+            description: "Additional note text below the field",
+            control: "text"
+        },
+        icons: {
+            description: "Array of available icons with prefix and name properties",
+            control: "object"
+        },
+        value: {
+            description: "The selected icon value (in format 'prefix/name')",
+            control: "none"
+        },
+        validation: {
+            description:
+                "Object containing validation state and message. Please refer to the example code for details on usage.",
+            control: "none"
+        },
+        onChange: {
+            description: "Function called when an icon is selected",
+            control: "none"
+        }
+    }
+};
diff --git a/packages/admin-ui/src/IconPicker/IconPicker.tsx b/packages/admin-ui/src/IconPicker/IconPicker.tsx
new file mode 100644
index 00000000000..4147174ae33
--- /dev/null
+++ b/packages/admin-ui/src/IconPicker/IconPicker.tsx
@@ -0,0 +1,47 @@
+import React, { useMemo } from "react";
+import { makeDecoratable } from "~/utils";
+import { IconPickerPrimitive, IconPickerPrimitiveProps } from "./primitives";
+import {
+    FormComponentDescription,
+    FormComponentErrorMessage,
+    FormComponentLabel,
+    FormComponentNote,
+    FormComponentProps
+} from "~/FormComponent";
+
+type IconPickerProps = IconPickerPrimitiveProps & FormComponentProps;
+
+const DecoratableIconPicker = ({
+    label,
+    description,
+    note,
+    required,
+    disabled,
+    validation,
+    ...props
+}: IconPickerProps) => {
+    const { isValid: validationIsValid, message: validationMessage } = validation || {};
+    const invalid = useMemo(() => validationIsValid === false, [validationIsValid]);
+
+    return (
+        <div className={"wby-w-full"}>
+            <FormComponentLabel
+                text={label}
+                required={required}
+                disabled={disabled}
+                invalid={invalid}
+            />
+            <FormComponentDescription text={description} disabled={disabled} />
+            <IconPickerPrimitive {...props} disabled={disabled} invalid={invalid} />
+            <FormComponentErrorMessage
+                text={validationMessage}
+                invalid={invalid}
+                disabled={disabled}
+            />
+            <FormComponentNote text={note} disabled={disabled} />
+        </div>
+    );
+};
+const IconPicker = makeDecoratable("IconPicker", DecoratableIconPicker);
+
+export { IconPicker, type IconPickerProps };
diff --git a/packages/admin-ui/src/IconPicker/domains/IconPickerFontAwesome.ts b/packages/admin-ui/src/IconPicker/domains/IconPickerFontAwesome.ts
new file mode 100644
index 00000000000..e002520db3d
--- /dev/null
+++ b/packages/admin-ui/src/IconPicker/domains/IconPickerFontAwesome.ts
@@ -0,0 +1,6 @@
+import { IconName, IconPrefix } from "@fortawesome/fontawesome-svg-core";
+
+export interface IconPickerFontAwesome {
+    prefix: IconPrefix;
+    name: IconName;
+}
diff --git a/packages/admin-ui/src/IconPicker/domains/IconPickerIcon.tsx b/packages/admin-ui/src/IconPicker/domains/IconPickerIcon.tsx
new file mode 100644
index 00000000000..f98110d0349
--- /dev/null
+++ b/packages/admin-ui/src/IconPicker/domains/IconPickerIcon.tsx
@@ -0,0 +1,41 @@
+import { IconPickerIconDto } from "./IconPickerIconDto";
+
+export class IconPickerIcon {
+    private readonly _prefix: string;
+    private readonly _name: string;
+
+    protected constructor(data: { prefix: string; name: string }) {
+        this._prefix = data.prefix;
+        this._name = data.name;
+    }
+
+    static create(data: IconPickerIconDto) {
+        return new IconPickerIcon({
+            prefix: data.prefix,
+            name: data.name
+        });
+    }
+
+    static createFromString(value?: string) {
+        if (typeof value === "string" && value.includes("/")) {
+            const values = value.split("/");
+            return new IconPickerIcon({
+                prefix: values[0],
+                name: values[1]
+            });
+        } else {
+            return new IconPickerIcon({
+                prefix: "fas",
+                name: "star"
+            });
+        }
+    }
+
+    get prefix() {
+        return this._prefix;
+    }
+
+    get name() {
+        return this._name;
+    }
+}
diff --git a/packages/admin-ui/src/IconPicker/domains/IconPickerIconDto.tsx b/packages/admin-ui/src/IconPicker/domains/IconPickerIconDto.tsx
new file mode 100644
index 00000000000..a3b66f2738c
--- /dev/null
+++ b/packages/admin-ui/src/IconPicker/domains/IconPickerIconDto.tsx
@@ -0,0 +1,4 @@
+export interface IconPickerIconDto {
+    prefix: string;
+    name: string;
+}
diff --git a/packages/admin-ui/src/IconPicker/domains/IconPickerIconFormatter.tsx b/packages/admin-ui/src/IconPicker/domains/IconPickerIconFormatter.tsx
new file mode 100644
index 00000000000..ea1eeab6206
--- /dev/null
+++ b/packages/admin-ui/src/IconPicker/domains/IconPickerIconFormatter.tsx
@@ -0,0 +1,16 @@
+import { IconPickerIcon } from "./IconPickerIcon";
+import { IconName, IconPrefix } from "@fortawesome/fontawesome-svg-core";
+import { IconPickerFontAwesome } from "./IconPickerFontAwesome";
+
+export class IconPickerIconFormatter {
+    static formatFontAwesome(icon: IconPickerIcon): IconPickerFontAwesome {
+        return {
+            prefix: icon.prefix as IconPrefix,
+            name: icon.name as IconName
+        };
+    }
+
+    static formatStringValue(icon: IconPickerIcon | IconPickerFontAwesome) {
+        return `${icon.prefix}/${icon.name}`;
+    }
+}
diff --git a/packages/admin-ui/src/IconPicker/domains/ListCache.ts b/packages/admin-ui/src/IconPicker/domains/ListCache.ts
new file mode 100644
index 00000000000..34d99cf2639
--- /dev/null
+++ b/packages/admin-ui/src/IconPicker/domains/ListCache.ts
@@ -0,0 +1,78 @@
+import { makeAutoObservable, runInAction, toJS } from "mobx";
+
+export type Constructor<T> = new (...args: any[]) => T;
+
+export interface IListCachePredicate<T> {
+    (item: T): boolean;
+}
+
+export interface IListCacheItemUpdater<T> {
+    (item: T): T;
+}
+
+export interface IListCache<T> {
+    count(): number;
+    clear(): void;
+    hasItems(): boolean;
+    getItems(predicate?: IListCachePredicate<T>): T[];
+    getItem(predicate: IListCachePredicate<T>): T | undefined;
+    addItems(items: T[]): void;
+    updateItems(updater: IListCacheItemUpdater<T>): void;
+    removeItems(predicate: IListCachePredicate<T>): void;
+}
+
+export class ListCache<T> implements IListCache<T> {
+    private state: T[];
+
+    constructor() {
+        this.state = [];
+
+        makeAutoObservable(this);
+    }
+
+    count() {
+        return this.state.length;
+    }
+
+    clear() {
+        runInAction(() => {
+            this.state = [];
+        });
+    }
+
+    hasItems() {
+        return this.state.length > 0;
+    }
+
+    getItems(predicate?: IListCachePredicate<T>): T[] {
+        if (predicate) {
+            return [...this.state.filter(item => predicate(item)).map(item => toJS(item))];
+        }
+
+        return [...this.state.map(item => toJS(item))];
+    }
+
+    getItem(predicate: IListCachePredicate<T>): T | undefined {
+        const item = this.state.find(item => predicate(item));
+
+        return item ? toJS(item) : undefined;
+    }
+
+    addItems(items: T[]) {
+        runInAction(() => {
+            this.state = [...this.state, ...items];
+        });
+    }
+
+    updateItems(updater: IListCacheItemUpdater<T>) {
+        runInAction(() => {
+            this.state = [...this.state.map(item => updater(item))];
+        });
+    }
+
+    removeItems(predicate: IListCachePredicate<T>) {
+        runInAction(() => {
+            this.state = this.state.filter(item => !predicate(item));
+        });
+    }
+}
diff --git a/packages/admin-ui/src/IconPicker/domains/index.ts b/packages/admin-ui/src/IconPicker/domains/index.ts
new file mode 100644
index 00000000000..d7a98873f46
--- /dev/null
+++ b/packages/admin-ui/src/IconPicker/domains/index.ts
@@ -0,0 +1,5 @@
+export * from "./IconPickerIcon";
+export * from "./IconPickerIconDto";
+export * from "./IconPickerFontAwesome";
+export * from "./IconPickerIconFormatter";
+export * from "./ListCache";
diff --git a/packages/admin-ui/src/IconPicker/index.ts b/packages/admin-ui/src/IconPicker/index.ts
new file mode 100644
index 00000000000..981a1ae1873
--- /dev/null
+++ b/packages/admin-ui/src/IconPicker/index.ts
@@ -0,0 +1,2 @@
+export * from "./IconPicker";
+export type { IconPickerIconDto } from "./domains";
diff --git a/packages/admin-ui/src/IconPicker/primitives/IconPickerPrimitive.stories.tsx b/packages/admin-ui/src/IconPicker/primitives/IconPickerPrimitive.stories.tsx
new file mode 100644
index 00000000000..71a827e4568
--- /dev/null
+++ b/packages/admin-ui/src/IconPicker/primitives/IconPickerPrimitive.stories.tsx
@@ -0,0 +1,181 @@
+import React, { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { fas } from "@fortawesome/free-solid-svg-icons";
+import { IconPickerPrimitive } from "./IconPickerPrimitive";
+
+const meta: Meta<typeof IconPickerPrimitive> = {
+    title: "Components/Form Primitives/IconPicker",
+    component: IconPickerPrimitive,
+    argTypes: {
+        onChange: { action: "onChange" }
+    },
+    render: args => {
+        const [value, setValue] = useState(args.value);
+        return (
+            <div className={"wby-w-full"}>
+                <IconPickerPrimitive {...args} value={value} onChange={setValue} />
+                <div className={"wby-mt-4 wby-text-center"}>
+                    Current selected value: <pre>{value}</pre>
+                </div>
+            </div>
+        );
+    },
+    parameters: {
+        layout: "padded"
+    }
+};
+
+// @ts-expect-error
+library.add(fas);
+
+export default meta;
+type Story = StoryObj<typeof IconPickerPrimitive>;
+
+export const Default: Story = {
+    args: {
+        icons: [
+            { prefix: "fas", name: "trash-restore-alt" },
+            { prefix: "fas", name: "trash-can-arrow-up" },
+            { prefix: "fas", name: "naira-sign" },
+            { prefix: "fas", name: "cart-arrow-down" },
+            { prefix: "fas", name: "walkie-talkie" },
+            { prefix: "fas", name: "file-edit" },
+            { prefix: "fas", name: "file-pen" },
+            { prefix: "fas", name: "receipt" },
+            { prefix: "fas", name: "pen-square" },
+            { prefix: "fas", name: "pencil-square" },
+            { prefix: "fas", name: "square-pen" },
+            { prefix: "fas", name: "suitcase-rolling" },
+            { prefix: "fas", name: "person-circle-exclamation" },
+            { prefix: "fas", name: "chevron-down" },
+            { prefix: "fas", name: "battery" },
+            { prefix: "fas", name: "battery-5" },
+            { prefix: "fas", name: "battery-full" },
+            { prefix: "fas", name: "skull-crossbones" },
+            { prefix: "fas", name: "code-compare" },
+            { prefix: "fas", name: "list-dots" },
+            { prefix: "fas", name: "list-ul" },
+            { prefix: "fas", name: "school-lock" },
+            { prefix: "fas", name: "tower-cell" },
+            { prefix: "fas", name: "long-arrow-alt-down" },
+            { prefix: "fas", name: "down-long" },
+            { prefix: "fas", name: "ranking-star" },
+            { prefix: "fas", name: "chess-king" },
+            { prefix: "fas", name: "person-harassing" },
+            { prefix: "fas", name: "brazilian-real-sign" },
+            { prefix: "fas", name: "landmark-alt" },
+            { prefix: "fas", name: "landmark-dome" },
+            { prefix: "fas", name: "arrow-up" },
+            { prefix: "fas", name: "television" },
+            { prefix: "fas", name: "tv-alt" },
+            { prefix: "fas", name: "tv" },
+            { prefix: "fas", name: "shrimp" },
+            { prefix: "fas", name: "tasks" },
+            { prefix: "fas", name: "list-check" },
+            { prefix: "fas", name: "jug-detergent" },
+            { prefix: "fas", name: "user-circle" },
+            { prefix: "fas", name: "circle-user" },
+            { prefix: "fas", name: "user-shield" },
+            { prefix: "fas", name: "wind" },
+            { prefix: "fas", name: "car-crash" },
+            { prefix: "fas", name: "car-burst" },
+            { prefix: "fas", name: "y" },
+            { prefix: "fas", name: "snowboarding" },
+            { prefix: "fas", name: "person-snowboarding" },
+            { prefix: "fas", name: "shipping-fast" },
+            { prefix: "fas", name: "truck-fast" }
+        ]
+    }
+};
+
+export const WithDefaultValue: Story = {
+    args: {
+        ...Default.args,
+        value: "fas/panorama"
+    }
+};
+
+export const MediumSize: Story = {
+    args: {
+        ...Default.args,
+        size: "md"
+    }
+};
+
+export const LargeSize: Story = {
+    args: {
+        ...Default.args,
+        size: "lg"
+    }
+};
+
+export const ExtraLargeSize: Story = {
+    args: {
+        ...Default.args,
+        size: "xl"
+    }
+};
+
+export const PrimaryVariant: Story = {
+    args: {
+        ...Default.args,
+        variant: "primary"
+    }
+};
+
+export const PrimaryVariantDisabled: Story = {
+    args: {
+        ...PrimaryVariant.args,
+        disabled: true
+    }
+};
+
+export const PrimaryVariantInvalid: Story = {
+    args: {
+        ...PrimaryVariant.args,
+        invalid: true
+    }
+};
+
+export const SecondaryVariant: Story = {
+    args: {
+        ...Default.args,
+        variant: "secondary"
+    }
+};
+
+export const SecondaryVariantDisabled: Story = {
+    args: {
+        ...SecondaryVariant.args,
+        disabled: true
+    }
+};
+
+export const SecondaryVariantInvalid: Story = {
+    args: {
+        ...SecondaryVariant.args,
+        invalid: true
+    }
+};
+
+export const GhostVariant: Story = {
+    args: {
+        ...Default.args,
+        variant: "ghost"
+    }
+};
+
+export const GhostVariantDisabled: Story = {
+    args: {
+        ...GhostVariant.args,
+        disabled: true
+    }
+};
+
+export const GhostVariantInvalid: Story = {
+    args: {
+        ...GhostVariant.args,
+        invalid: true
+    }
+};
diff --git a/packages/admin-ui/src/IconPicker/primitives/IconPickerPrimitive.tsx b/packages/admin-ui/src/IconPicker/primitives/IconPickerPrimitive.tsx
new file mode 100644
index 00000000000..83534f1951c
--- /dev/null
+++ b/packages/admin-ui/src/IconPicker/primitives/IconPickerPrimitive.tsx
@@ -0,0 +1,99 @@
+import React, { useEffect, useRef } from "react";
+import { InputPrimitiveProps, inputVariants } from "~/Input";
+import { PopoverPrimitive } from "~/Popover";
+import { cn, cva, type VariantProps } from "~/utils";
+import { IconPickerGrid, IconPickerInput, IconPickerTrigger } from "./components";
+import { IconPickerIconDto } from "../domains";
+import { useIconPicker } from "./useIconPicker";
+
+const iconPickerVariants = cva("wby-cursor-pointer wby-text-neutral-strong", {
+    variants: {
+        size: {
+            md: "wby-w-16",
+            lg: "wby-w-16",
+            xl: "wby-w-20"
+        },
+        disabled: {
+            true: "wby-pointer-events-none"
+        }
+    },
+    defaultVariants: {
+        size: "lg"
+    }
+});
+
+interface IconPickerPrimitiveProps extends VariantProps<typeof iconPickerVariants> {
+    /**
+     * Indicates if the field is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Callback triggered when the value changes.
+     */
+    onChange?: (value: string) => void;
+    /**
+     * List of icons to be displayed in the icon picker.
+     */
+    icons: IconPickerIconDto[];
+    /**
+     * Indicates if the input field is invalid.
+     * Refer to `InputPrimitiveProps["invalid"]` for possible values.
+     */
+    invalid?: InputPrimitiveProps["invalid"];
+    /**
+     * Optional selected icon.
+     */
+    value?: string;
+    /**
+     * Variant of the input field.
+     * Refer to `InputPrimitiveProps["variant"]` for possible values.
+     */
+    variant?: InputPrimitiveProps["variant"];
+}
+
+const IconPickerPrimitive = (props: IconPickerPrimitiveProps) => {
+    const { vm, setListOpenState, searchIcon, setSelectedIcon } = useIconPicker(props);
+    const inputRef = useRef<HTMLInputElement>(null);
+
+    useEffect(() => {
+        setTimeout(() => {
+            if (vm.open && inputRef.current) {
+                inputRef.current.focus();
+            }
+        }, 50);
+    }, [vm.open]);
+
+    return (
+        <PopoverPrimitive open={vm.open} onOpenChange={setListOpenState}>
+            <PopoverPrimitive.Trigger asChild>
+                <button
+                    data-disabled={props.disabled}
+                    className={cn(
+                        inputVariants({
+                            size: props.size,
+                            variant: props.variant,
+                            invalid: props.invalid
+                        }),
+                        iconPickerVariants({ size: props.size, disabled: props.disabled })
+                    )}
+                >
+                    <IconPickerTrigger value={props.value} size={props.size} />
+                </button>
+            </PopoverPrimitive.Trigger>
+            <PopoverPrimitive.Content
+                align={"start"}
+                className={"wby-min-w-96"}
+                onWheel={e => e.stopPropagation()} // Wheel event should not propagate to the parent: this fixes scrolling issues when the IconPicker is placed inside a Dialog.
+            >
+                <IconPickerInput value={vm.searchQuery} onChange={searchIcon} inputRef={inputRef} />
+                <IconPickerGrid
+                    icons={vm.icons}
+                    iconsLength={vm.iconsLength}
+                    onIconSelect={setSelectedIcon}
+                />
+            </PopoverPrimitive.Content>
+        </PopoverPrimitive>
+    );
+};
+
+export { IconPickerPrimitive, type IconPickerPrimitiveProps };
diff --git a/packages/admin-ui/src/IconPicker/primitives/components/IconPickerGrid.tsx b/packages/admin-ui/src/IconPicker/primitives/components/IconPickerGrid.tsx
new file mode 100644
index 00000000000..a377d7b7608
--- /dev/null
+++ b/packages/admin-ui/src/IconPicker/primitives/components/IconPickerGrid.tsx
@@ -0,0 +1,89 @@
+import React, { useCallback } from "react";
+import { Grid, GridCellProps } from "react-virtualized";
+import { Text } from "~/Text";
+import { cn } from "~/utils";
+import { IconPickerFontAwesome, IconPickerIconFormatter } from "../../domains";
+import { IconPickerIcon } from "./IconPickerIcon";
+
+const COLUMN_COUNT = 5;
+const GRID_WIDTH = 424;
+const GRID_HEIGHT = 270;
+const COLUMN_WIDTH = 80;
+const ROW_HEIGHT = 80;
+
+interface IconPickerGridProps {
+    icons: IconPickerFontAwesome[];
+    iconsLength: number;
+    onIconSelect: (value: string) => void;
+}
+
+const IconPickerGrid = (props: IconPickerGridProps) => {
+    const renderCell = useCallback(() => {
+        return function renderCell({
+            columnIndex,
+            key,
+            rowIndex,
+            style
+        }: GridCellProps): React.ReactNode {
+            const item = props.icons[rowIndex * COLUMN_COUNT + columnIndex];
+            if (!item) {
+                return null;
+            }
+
+            return (
+                <div
+                    key={key}
+                    style={style}
+                    className={cn([
+                        "wby-flex wby-flex-col wby-justify-center wby-items-center wby-gap-sm",
+                        "wby-text-neutral-strong",
+                        "hover:wby-bg-neutral-dimmed hover:wby-text-neutral-strong",
+                        "wby-px-xs-plus wby-box-border wby-rounded-xs wby-cursor-pointer wby-overflow-hidden",
+                        "wby-transition-colors wby-duration-400 wby-ease-out"
+                    ])}
+                    onClick={() => {
+                        if (props.onIconSelect) {
+                            props.onIconSelect(IconPickerIconFormatter.formatStringValue(item));
+                        }
+                    }}
+                >
+                    <IconPickerIcon
+                        name={item.name}
+                        prefix={item.prefix}
+                        className={"wby-size-lg"}
+                    />
+                    <Text
+                        as={"div"}
+                        size={"sm"}
+                        className={"wby-w-full wby-truncate wby-text-center wby-text-neutral-muted"}
+                    >
+                        {item.name}
+                    </Text>
+                </div>
+            );
+        };
+    }, [props.icons]);
+
+    return (
+        <div>
+            {props.iconsLength === 0 ? (
+                <div className={`wby-px-sm-extra wby-py-md wby-text-neutral-strong`}>
+                    <Text>{"No results found."}</Text>
+                </div>
+            ) : (
+                <Grid
+                    className={"wby-px-sm-extra wby-py-xs-plus wby-outline-none"}
+                    cellRenderer={renderCell()}
+                    columnCount={COLUMN_COUNT}
+                    columnWidth={COLUMN_WIDTH}
+                    rowHeight={ROW_HEIGHT}
+                    width={GRID_WIDTH}
+                    height={GRID_HEIGHT}
+                    rowCount={Math.ceil(props.iconsLength / COLUMN_COUNT)}
+                />
+            )}
+        </div>
+    );
+};
+
+export { IconPickerGrid, type IconPickerGridProps };
diff --git a/packages/admin-ui/src/IconPicker/primitives/components/IconPickerIcon.tsx b/packages/admin-ui/src/IconPicker/primitives/components/IconPickerIcon.tsx
new file mode 100644
index 00000000000..b5e8a549e35
--- /dev/null
+++ b/packages/admin-ui/src/IconPicker/primitives/components/IconPickerIcon.tsx
@@ -0,0 +1,22 @@
+import React from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { IconName, IconPrefix } from "@fortawesome/fontawesome-svg-core";
+
+interface IconPickerIconProps extends React.HTMLAttributes<HTMLDivElement> {
+    name: IconName;
+    prefix: IconPrefix;
+}
+
+const IconPickerIcon = ({ name, prefix, ...props }: IconPickerIconProps) => {
+    return (
+        <div {...props}>
+            <FontAwesomeIcon
+                icon={[prefix, name]}
+                size={"2x"}
+                className={"wby-block wby-size-full"}
+            />
+        </div>
+    );
+};
+
+export { IconPickerIcon, type IconPickerIconProps };
diff --git a/packages/admin-ui/src/IconPicker/primitives/components/IconPickerInput.tsx b/packages/admin-ui/src/IconPicker/primitives/components/IconPickerInput.tsx
new file mode 100644
index 00000000000..c8ff0c5a802
--- /dev/null
+++ b/packages/admin-ui/src/IconPicker/primitives/components/IconPickerInput.tsx
@@ -0,0 +1,44 @@
+import React, { useCallback } from "react";
+import { ReactComponent as SearchIcon } from "@webiny/icons/search.svg";
+import { Input } from "~/Input";
+import { Icon } from "~/Icon";
+import { DelayedOnChange, OnChangeCallable } from "~/DelayedOnChange";
+import { cn } from "~/utils";
+
+interface IconPickerInputProps {
+    value: string;
+    onChange: (value: string) => void;
+    inputRef: React.RefObject<HTMLInputElement>;
+}
+
+const IconPickerInput = (props: IconPickerInputProps) => {
+    const onInputChange = useCallback<OnChangeCallable>(
+        (value, cb) => {
+            props.onChange(value);
+            if (cb) {
+                cb(value);
+            }
+        },
+        [props.onChange]
+    );
+
+    return (
+        <DelayedOnChange value={props.value} onChange={onInputChange}>
+            {({ value, onChange }) => (
+                <div className={cn("wby-p-xs-plus wby-pb-0")}>
+                    <Input
+                        inputRef={props.inputRef}
+                        value={value}
+                        onChange={onChange}
+                        placeholder={"Search icons..."}
+                        variant={"secondary"}
+                        size={"md"}
+                        startIcon={<Icon icon={<SearchIcon />} label={"Search icons"} />}
+                    />
+                </div>
+            )}
+        </DelayedOnChange>
+    );
+};
+
+export { IconPickerInput, type IconPickerInputProps };
diff --git a/packages/admin-ui/src/IconPicker/primitives/components/IconPickerTrigger.tsx b/packages/admin-ui/src/IconPicker/primitives/components/IconPickerTrigger.tsx
new file mode 100644
index 00000000000..0df951dabef
--- /dev/null
+++ b/packages/admin-ui/src/IconPicker/primitives/components/IconPickerTrigger.tsx
@@ -0,0 +1,47 @@
+import React, { useMemo } from "react";
+import { ReactComponent as ChevronDown } from "@webiny/icons/keyboard_arrow_down.svg";
+import { Icon as IconComponent } from "~/Icon";
+import { cn, cva, type VariantProps } from "~/utils";
+import { IconPickerIcon as IconPickerIconComponent } from "./IconPickerIcon";
+import { IconPickerIcon, IconPickerIconFormatter } from "../../domains";
+
+const iconPickerTriggerVariants = cva("wby-flex wby-items-center", {
+    variants: {
+        size: {
+            md: "wby-gap-xs",
+            lg: "wby-gap-xs",
+            xl: "wby-gap-sm"
+        }
+    },
+    defaultVariants: {
+        size: "lg"
+    }
+});
+
+interface IconPickerTriggerProps extends VariantProps<typeof iconPickerTriggerVariants> {
+    value?: string;
+}
+
+const IconPickerTrigger = ({ value, size }: IconPickerTriggerProps) => {
+    const icon = useMemo(() => {
+        const icon = IconPickerIcon.createFromString(value);
+        return IconPickerIconFormatter.formatFontAwesome(icon);
+    }, [value]);
+
+    return (
+        <div className={cn(iconPickerTriggerVariants({ size }))}>
+            <div>
+                <IconComponent
+                    size={size === "xl" ? "lg" : "md"}
+                    icon={<IconPickerIconComponent prefix={icon.prefix} name={icon.name} />}
+                    label={`Selected icon`}
+                />
+            </div>
+            <div>
+                <IconComponent size={"sm"} icon={<ChevronDown />} label={"Open list"} />
+            </div>
+        </div>
+    );
+};
+
+export { IconPickerTrigger, type IconPickerTriggerProps };
diff --git a/packages/admin-ui/src/IconPicker/primitives/components/index.ts b/packages/admin-ui/src/IconPicker/primitives/components/index.ts
new file mode 100644
index 00000000000..8879ccfc718
--- /dev/null
+++ b/packages/admin-ui/src/IconPicker/primitives/components/index.ts
@@ -0,0 +1,4 @@
+export * from "./IconPickerGrid";
+export * from "./IconPickerIcon";
+export * from "./IconPickerInput";
+export * from "./IconPickerTrigger";
diff --git a/packages/admin-ui/src/IconPicker/primitives/index.ts b/packages/admin-ui/src/IconPicker/primitives/index.ts
new file mode 100644
index 00000000000..3a7cc475366
--- /dev/null
+++ b/packages/admin-ui/src/IconPicker/primitives/index.ts
@@ -0,0 +1 @@
+export * from "./IconPickerPrimitive";
diff --git a/packages/admin-ui/src/IconPicker/primitives/presenters/IconPickerPresenter.ts b/packages/admin-ui/src/IconPicker/primitives/presenters/IconPickerPresenter.ts
new file mode 100644
index 00000000000..e257df5eb37
--- /dev/null
+++ b/packages/admin-ui/src/IconPicker/primitives/presenters/IconPickerPresenter.ts
@@ -0,0 +1,75 @@
+import { makeAutoObservable } from "mobx";
+import {
+    IconPickerIcon,
+    IconPickerIconDto,
+    IconPickerFontAwesome,
+    IconPickerIconFormatter,
+    ListCache
+} from "../../domains";
+
+interface IconPickerParams {
+    icons: IconPickerIconDto[];
+    onChange?: (value: string) => void;
+}
+
+interface IIconPickerPresenter {
+    vm: {
+        open: boolean;
+        icons: IconPickerFontAwesome[];
+        iconsLength: number;
+        searchQuery: string;
+    };
+    init: (params: IconPickerParams) => void;
+    setListOpenState: (open: boolean) => void;
+    searchIcon: (value: string) => void;
+    setSelectedIcon: (icon: string) => void;
+}
+
+class IconPickerPresenter implements IIconPickerPresenter {
+    private open = false;
+    private icons = new ListCache<IconPickerIcon>();
+    private searchQuery = "";
+    private params?: IconPickerParams = undefined;
+
+    constructor() {
+        makeAutoObservable(this);
+    }
+
+    public init = (params: IconPickerParams) => {
+        this.params = params;
+        this.icons.clear();
+        this.icons.addItems(params.icons.map(icon => IconPickerIcon.create(icon)));
+    };
+
+    get vm() {
+        return {
+            open: this.open,
+            searchQuery: this.searchQuery,
+            icons: this.getIcons().map(icon => IconPickerIconFormatter.formatFontAwesome(icon)),
+            iconsLength: this.getIcons().length || 0
+        };
+    }
+
+    public setListOpenState = (open: boolean) => {
+        this.open = open;
+    };
+
+    public searchIcon = (value: string) => {
+        this.searchQuery = value;
+    };
+
+    public setSelectedIcon = (icon: string) => {
+        this.setListOpenState(false);
+        this.params?.onChange?.(icon);
+    };
+
+    private getIcons = () => {
+        if (this.searchQuery) {
+            return this.icons.getItems(icon => icon.name.includes(this.searchQuery));
+        }
+
+        return this.icons.getItems();
+    };
+}
+
+export { IconPickerPresenter, type IIconPickerPresenter, type IconPickerParams };
diff --git a/packages/admin-ui/src/IconPicker/primitives/presenters/index.ts b/packages/admin-ui/src/IconPicker/primitives/presenters/index.ts
new file mode 100644
index 00000000000..d564f818dc8
--- /dev/null
+++ b/packages/admin-ui/src/IconPicker/primitives/presenters/index.ts
@@ -0,0 +1 @@
+export * from "./IconPickerPresenter";
diff --git a/packages/admin-ui/src/IconPicker/primitives/useIconPicker.ts b/packages/admin-ui/src/IconPicker/primitives/useIconPicker.ts
new file mode 100644
index 00000000000..580df9529ec
--- /dev/null
+++ b/packages/admin-ui/src/IconPicker/primitives/useIconPicker.ts
@@ -0,0 +1,37 @@
+import { useEffect, useMemo, useState } from "react";
+import { autorun } from "mobx";
+import { IconPickerParams, IconPickerPresenter } from "./presenters";
+import { IconPickerPrimitiveProps } from "./IconPickerPrimitive";
+
+export const useIconPicker = (props: IconPickerPrimitiveProps) => {
+    const params: IconPickerParams = useMemo(
+        () => ({
+            icons: props.icons,
+            onChange: props.onChange
+        }),
+        [props.icons, props.onChange]
+    );
+
+    const presenter = useMemo(() => {
+        return new IconPickerPresenter();
+    }, []);
+
+    const [vm, setVm] = useState(presenter.vm);
+
+    useEffect(() => {
+        presenter.init(params);
+    }, [params, presenter]);
+
+    useEffect(() => {
+        return autorun(() => {
+            setVm(presenter.vm);
+        });
+    }, [presenter]);
+
+    return {
+        vm,
+        setListOpenState: presenter.setListOpenState,
+        searchIcon: presenter.searchIcon,
+        setSelectedIcon: presenter.setSelectedIcon
+    };
+};
diff --git a/packages/ui/src/Image/Image.tsx b/packages/admin-ui/src/Image/Image.tsx
similarity index 83%
rename from packages/ui/src/Image/Image.tsx
rename to packages/admin-ui/src/Image/Image.tsx
index 0527ddc5d06..28928f763e1 100644
--- a/packages/ui/src/Image/Image.tsx
+++ b/packages/admin-ui/src/Image/Image.tsx
@@ -1,12 +1,12 @@
 import React from "react";
 
 // Accepts all props that a normal <img> element would accept.
-interface Props
+interface ImageProps
     extends React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement> {
     [key: string]: any;
 }
 
-const Image = ({ ...rest }: Props) => {
+const Image = ({ ...rest }: ImageProps) => {
     const finalProps = { ...rest };
     const srcSet = finalProps.srcSet;
     if (srcSet && typeof srcSet === "object") {
@@ -18,4 +18,4 @@ const Image = ({ ...rest }: Props) => {
     return <img {...finalProps} />;
 };
 
-export { Image };
+export { Image, type ImageProps };
diff --git a/packages/admin-ui/src/Image/index.ts b/packages/admin-ui/src/Image/index.ts
new file mode 100644
index 00000000000..321f81e82aa
--- /dev/null
+++ b/packages/admin-ui/src/Image/index.ts
@@ -0,0 +1 @@
+export * from "./Image";
diff --git a/packages/admin-ui/src/Input/Input.mdx b/packages/admin-ui/src/Input/Input.mdx
new file mode 100644
index 00000000000..9c03bdfbbad
--- /dev/null
+++ b/packages/admin-ui/src/Input/Input.mdx
@@ -0,0 +1,178 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+
+import * as InputStories from './Input.stories';
+
+<Meta of={InputStories} />
+
+# Input
+
+The Input component is a form control that allows users to enter and edit text. It supports various types of input (text, number, email, etc.), can be customized with icons, and includes built-in validation support.
+
+## Usage
+
+<Canvas of={InputStories.Documentation} source={ { code: `
+import React, { useState } from "react";
+
+import { Input } from "@webiny/admin-ui";
+
+const InputExample = () => {
+    const [value, setValue] = useState("");
+    const [validation, setValidation] = useState({ isValid: true, message: "" });
+
+    const handleValidation = () => {
+        if (!value.trim()) {
+            setValidation({ isValid: false, message: "This field is required" });
+        } else if (value.trim().length < 3) {
+            setValidation({ isValid: false, message: "Must be at least 3 characters long" });
+        } else {
+            setValidation({ isValid: true, message: "" });
+        }
+    };
+
+    return (
+        <div>
+            <Input
+                type="text"
+                label="Full Name"
+                description="Enter your full name as it appears on your ID"
+                note="This will be used for official documentation"
+                placeholder="Enter your full name"
+                required={true}
+                value={value}
+                validation={validation}
+                onChange={newValue => setValue(newValue)}
+                onBlur={handleValidation}
+                onEnter={handleValidation}
+            />
+        </div>
+    );
+};
+
+export default InputExample;
+
+` } }
+    additionalActions={[
+        {
+            title: 'Open in GitHub',
+            onClick: () => {
+                window.open(
+                    'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Input/Input.tsx',
+                    '_blank'
+                );
+            },
+        }
+    ]}
+/>
+
+<Controls of={InputStories.Documentation}/>
+
+```jsx
+import React, { useState } from "react";
+
+import { Input } from "@webiny/admin-ui";
+
+const InputExample = () => {
+    const [value, setValue] = useState("");
+    const [validation, setValidation] = useState({ isValid: true, message: "" });
+
+    const handleValidation = () => {
+        if (!value.trim()) {
+            setValidation({ isValid: false, message: "This field is required" });
+        } else if (value.trim().length < 3) {
+            setValidation({ isValid: false, message: "Must be at least 3 characters long" });
+        } else {
+            setValidation({ isValid: true, message: "" });
+        }
+    };
+
+    return (
+        <div>
+            <Input
+                type="text"
+                label="Full Name"
+                description="Enter your full name as it appears on your ID"
+                note="This will be used for official documentation"
+                placeholder="Enter your full name"
+                required={true}
+                value={value}
+                validation={validation}
+                onChange={newValue => setValue(newValue)}
+                onBlur={handleValidation}
+                onEnter={handleValidation}
+            />
+        </div>
+    );
+};
+
+export default InputExample;
+```
+
+## Examples
+
+### With Validate Function
+The Input component supports validation using the validation prop, as shown in the example above.
+For more complex or reusable validation scenarios, you can use the validate prop, which accepts a custom validation function.
+Try entering **exists@** in the input box to see it in action, and click on **Show code** to view the validation function.
+
+<Canvas of={InputStories.WithValidateFunction} source={ { code: `
+import React, { useState } from "react";
+
+import { Input } from "@webiny/admin-ui";
+
+const EmailInput = () => {
+    const [value, setValue] = useState("");
+    const [validation, setValidation] = useState({ isValid: true, message: undefined });
+
+    const validate = async () => {
+        // Simulate API call delay
+        await new Promise(resolve => setTimeout(resolve, 500));
+
+        // Example validation: check if email already exists
+        if (value.includes("exists@")) {
+            setValidation({ isValid: false, message: "This email is already registered" });
+        } else {
+            setValidation({ isValid: true, message: undefined });
+        }
+    };
+
+    return (
+        <Input
+            type="email"
+            label="Email"
+            placeholder="Enter your email"
+            value={value}
+            onChange={newValue => setValue(newValue)}
+            validate={validate}
+            validation={validation}
+        />
+    );
+};` } }
+/>
+
+## Anatomy
+
+### Input Anatomy
+<img src="/images/storybook/input/anatomy.png" alt="Input Anatomy"/>
+
+### Styles
+<img src="/images/storybook/input/styles.png" alt="Styles"/>
+
+### Field Size
+<img src="/images/storybook/input/field-size.png" alt="Field Size"/>
+
+### States and Styles
+<img src="/images/storybook/input/states-and-styles.png" alt="States and Styles"/>
+
+### Label Anatomy
+<img src="/images/storybook/input/label-anatomy.png" alt="Label Anatomy"/>
+
+### Label Properties
+<img src="/images/storybook/input/label-properties.png" alt="Label Properties"/>
+
+### Label Options
+<img src="/images/storybook/input/label-options.png" alt="Label Options"/>
+
+## Usage
+
+### Used in forms
+<img src="/images/storybook/input/used-in-forms.png" alt="Used in forms"/>
diff --git a/packages/admin-ui/src/Input/Input.stories.tsx b/packages/admin-ui/src/Input/Input.stories.tsx
new file mode 100644
index 00000000000..3ee6358bed9
--- /dev/null
+++ b/packages/admin-ui/src/Input/Input.stories.tsx
@@ -0,0 +1,289 @@
+import React, { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Input } from "~/Input";
+
+const meta: Meta<typeof Input> = {
+    title: "Components/Form/Input",
+    component: Input,
+    argTypes: {
+        onChange: { action: "onChange" },
+        type: {
+            control: "select",
+            options: [
+                "text",
+                "number",
+                "email",
+                "password",
+                "tel",
+                "url",
+                "search",
+                "date",
+                "datetime-local",
+                "month",
+                "week",
+                "time",
+                "color",
+                "file",
+                "checkbox",
+                "radio",
+                "range",
+                "hidden",
+                "button",
+                "submit",
+                "reset",
+                "image"
+            ],
+            defaultValue: "text"
+        },
+        disabled: {
+            control: "boolean",
+            defaultValue: false
+        }
+    },
+    parameters: {
+        layout: "padded"
+    }
+};
+
+export default meta;
+type Story = StoryObj<typeof Input>;
+
+export const Default: Story = {};
+
+export const WithLabel: Story = {
+    args: {
+        label: "Any field label"
+    }
+};
+
+export const WithLabelRequired: Story = {
+    args: {
+        label: "Any field label",
+        required: true
+    }
+};
+
+export const WithDescription: Story = {
+    args: {
+        description: "Provide the required information for processing your request."
+    }
+};
+
+export const WithNotes: Story = {
+    args: {
+        note: "Note: Ensure your selection or input is accurate before proceeding."
+    }
+};
+
+export const WithErrors: Story = {
+    args: {
+        validation: {
+            isValid: false,
+            message: "This field is required."
+        }
+    }
+};
+
+export const Disabled: Story = {
+    args: {
+        label: "Any field label",
+        disabled: true
+    }
+};
+
+export const WithValidateFunction: Story = {
+    render: args => {
+        const [value, setValue] = useState("");
+        const [validation, setValidation] = useState<any>({ isValid: true, message: undefined });
+
+        const validate = async () => {
+            // Simulate API call delay
+            await new Promise(resolve => setTimeout(resolve, 500));
+
+            // Example validation: check if email already exists
+            if (value.includes("exists@")) {
+                setValidation({ isValid: false, message: "This email is already registered" });
+            } else {
+                setValidation({ isValid: true, message: undefined });
+            }
+        };
+
+        return (
+            <Input
+                {...args}
+                type="email"
+                label="Email"
+                placeholder="Enter your email"
+                value={value}
+                onChange={newValue => setValue(newValue)}
+                validate={validate}
+                validation={validation}
+            />
+        );
+    }
+};
+
+export const FullExample: Story = {
+    args: {
+        ...Default.args,
+        label: "Any field label",
+        required: true,
+        description: "Provide the required information for processing your request.",
+        note: "Note: Ensure your selection or input is accurate before proceeding.",
+        validation: {
+            isValid: false,
+            message: "This field is required."
+        }
+    }
+};
+
+export const Documentation: Story = {
+    render: args => {
+        const [value, setValue] = useState("");
+        const [validation, setValidation] = useState({ isValid: true, message: "" });
+
+        const handleValidation = () => {
+            if (args.required && !value.trim()) {
+                setValidation({ isValid: false, message: "This field is required" });
+            } else if (args.minLength && value.trim().length < args.minLength) {
+                setValidation({
+                    isValid: false,
+                    message: `Must be at least ${args.minLength} characters long`
+                });
+            } else {
+                setValidation({ isValid: true, message: "" });
+            }
+        };
+
+        return (
+            <Input
+                {...args}
+                value={value}
+                onChange={newValue => setValue(newValue)}
+                validation={validation}
+                onBlur={handleValidation}
+                onEnter={handleValidation}
+            />
+        );
+    },
+    args: {
+        type: "text",
+        size: "lg",
+        variant: "primary",
+        label: "Full Name",
+        description: "Enter your full name as it appears on your ID",
+        note: "This will be used for official documentation",
+        placeholder: "Enter your full name",
+        required: true,
+        disabled: false,
+        startIcon: undefined,
+        endIcon: undefined,
+        minLength: 3,
+        maxLength: undefined,
+        onChange: undefined,
+        onBlur: undefined,
+        onEnter: undefined,
+        validation: undefined,
+        validate: undefined
+    },
+    argTypes: {
+        type: {
+            description: "HTML input type attribute",
+            control: "select",
+            options: [
+                "text",
+                "number",
+                "email",
+                "password",
+                "tel",
+                "url",
+                "search",
+                "date",
+                "datetime-local",
+                "month",
+                "week",
+                "time",
+                "color",
+                "file"
+            ],
+            defaultValue: "text"
+        },
+        size: {
+            description: "Input field size",
+            control: "select",
+            options: ["md", "lg", "xl"],
+            defaultValue: "lg"
+        },
+        variant: {
+            description: "Input field style variant",
+            control: "select",
+            options: ["primary", "secondary", "ghost"],
+            defaultValue: "primary"
+        },
+        label: {
+            description: "Label text displayed above the input",
+            control: "text"
+        },
+        description: {
+            description: "Helper text displayed below the label",
+            control: "text"
+        },
+        note: {
+            description: "Additional note displayed below the input",
+            control: "text"
+        },
+        placeholder: {
+            description: "Placeholder text shown when input is empty",
+            control: "text"
+        },
+        required: {
+            description: "Makes the input field required",
+            control: "boolean",
+            defaultValue: true
+        },
+        disabled: {
+            description: "Disables the input field",
+            control: "boolean",
+            defaultValue: false
+        },
+        startIcon: {
+            description: "Icon displayed at the start of the input",
+            control: "none"
+        },
+        endIcon: {
+            description: "Icon displayed at the end of the input",
+            control: "none"
+        },
+        minLength: {
+            description: "Minimum number of characters required",
+            control: "number",
+            defaultValue: 3
+        },
+        maxLength: {
+            description:
+                "Maximum number of characters allowed. To apply this maxLength, update the code similarly to how it's done for minLength. Refer to the minLength example above for guidance.",
+            control: "number"
+        },
+        validation: {
+            description:
+                "Validation state and error message. Please refer to the example code for details on usage.",
+            control: "none"
+        },
+        validate: {
+            description: "Custom validation function",
+            control: "none"
+        },
+        onChange: {
+            description: "Callback function when input value changes",
+            control: "none"
+        },
+        onBlur: {
+            description: "Callback function when input loses focus",
+            control: "none"
+        },
+        onEnter: {
+            description: "Callback function when Enter key is pressed",
+            control: "none"
+        }
+    } // Removed forwardEventOnChange and inputRef
+};
diff --git a/packages/admin-ui/src/Input/Input.tsx b/packages/admin-ui/src/Input/Input.tsx
new file mode 100644
index 00000000000..7f705cbcbee
--- /dev/null
+++ b/packages/admin-ui/src/Input/Input.tsx
@@ -0,0 +1,62 @@
+import React, { useCallback, useMemo } from "react";
+import { makeDecoratable } from "~/utils";
+import { InputPrimitive, type InputPrimitiveProps } from "./InputPrimitive";
+import {
+    FormComponentDescription,
+    FormComponentErrorMessage,
+    FormComponentLabel,
+    FormComponentNote,
+    type FormComponentProps
+} from "~/FormComponent";
+
+type InputProps = InputPrimitiveProps & FormComponentProps;
+
+const DecoratableInput = ({
+    label,
+    description,
+    note,
+    required,
+    disabled,
+    validation,
+    validate,
+    onBlur: originalOnBlur,
+    ...props
+}: InputProps) => {
+    const { isValid: validationIsValid, message: validationMessage } = validation || {};
+    const invalid = useMemo(() => validationIsValid === false, [validationIsValid]);
+
+    const onBlur = useCallback(
+        async (e: React.FocusEvent<HTMLInputElement>) => {
+            if (validate) {
+                // Since we are accessing event in an async operation, we need to persist it.
+                // See https://reactjs.org/docs/events.html#event-pooling.
+                e.persist();
+                await validate();
+            }
+            originalOnBlur && originalOnBlur(e);
+        },
+        [validate, originalOnBlur]
+    );
+
+    return (
+        <div className={"wby-w-full"}>
+            <FormComponentLabel
+                text={label}
+                required={required}
+                disabled={disabled}
+                invalid={invalid}
+            />
+            <FormComponentDescription text={description} disabled={disabled} />
+            <InputPrimitive {...props} disabled={disabled} invalid={invalid} onBlur={onBlur} />
+            <FormComponentErrorMessage
+                text={validationMessage}
+                invalid={invalid}
+                disabled={disabled}
+            />
+            <FormComponentNote text={note} disabled={disabled} />
+        </div>
+    );
+};
+const Input = makeDecoratable("Input", DecoratableInput);
+
+export { Input, type InputProps };
diff --git a/packages/admin-ui/src/Input/InputPrimitive.stories.tsx b/packages/admin-ui/src/Input/InputPrimitive.stories.tsx
new file mode 100644
index 00000000000..d7f5ae67924
--- /dev/null
+++ b/packages/admin-ui/src/Input/InputPrimitive.stories.tsx
@@ -0,0 +1,166 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { ReactComponent as NotificationsIcon } from "@webiny/icons/notifications.svg";
+import { ReactComponent as CalendarIcon } from "@webiny/icons/calendar_month.svg";
+
+import { InputPrimitive } from "./InputPrimitive";
+import { Icon } from "~/Icon";
+
+const meta: Meta<typeof InputPrimitive> = {
+    title: "Components/Form Primitives/Input",
+    component: InputPrimitive,
+    argTypes: {
+        onChange: { action: "onChange" },
+        onEnter: { action: "onEnter" },
+        onKeyDown: { action: "onKeyDown" },
+        type: {
+            control: "select",
+            options: [
+                "text",
+                "number",
+                "email",
+                "password",
+                "tel",
+                "url",
+                "search",
+                "date",
+                "datetime-local",
+                "month",
+                "week",
+                "time",
+                "color",
+                "file",
+                "checkbox",
+                "radio",
+                "range",
+                "hidden",
+                "button",
+                "submit",
+                "reset",
+                "image"
+            ],
+            defaultValue: "text"
+        }
+    },
+    parameters: {
+        layout: "padded"
+    }
+};
+
+export default meta;
+type Story = StoryObj<typeof InputPrimitive>;
+
+export const Default: Story = {};
+
+export const MediumSize: Story = {
+    args: {
+        placeholder: "Custom placeholder",
+        size: "md"
+    }
+};
+
+export const LargeSize: Story = {
+    args: {
+        placeholder: "Custom placeholder",
+        size: "lg"
+    }
+};
+
+export const ExtraLargeSize: Story = {
+    args: {
+        placeholder: "Custom placeholder",
+        size: "xl"
+    }
+};
+
+export const WithStartIcon: Story = {
+    args: {
+        placeholder: "Custom placeholder",
+        startIcon: <Icon label={"Bell"} icon={<NotificationsIcon />} />
+    }
+};
+
+export const WithEndIcon: Story = {
+    args: {
+        placeholder: "Custom placeholder",
+        endIcon: <Icon label={"Calendar"} icon={<CalendarIcon />} />
+    }
+};
+
+export const WithStartAndEndIcons: Story = {
+    args: {
+        placeholder: "Custom placeholder",
+        startIcon: <Icon label={"Bell"} icon={<NotificationsIcon />} />,
+        endIcon: <Icon label={"Calendar"} icon={<CalendarIcon />} />
+    }
+};
+
+export const PrimaryVariant: Story = {
+    args: {
+        variant: "primary",
+        placeholder: "Custom placeholder"
+    }
+};
+
+export const PrimaryVariantDisabled: Story = {
+    args: {
+        ...PrimaryVariant.args,
+        disabled: true
+    }
+};
+
+export const PrimaryVariantInvalid: Story = {
+    args: {
+        ...PrimaryVariant.args,
+        invalid: true
+    }
+};
+
+export const SecondaryVariant: Story = {
+    args: {
+        variant: "secondary",
+        placeholder: "Custom placeholder"
+    }
+};
+
+export const SecondaryVariantDisabled: Story = {
+    args: {
+        ...SecondaryVariant.args,
+        disabled: true
+    }
+};
+
+export const SecondaryVariantInvalid: Story = {
+    args: {
+        ...SecondaryVariant.args,
+        invalid: true
+    }
+};
+
+export const GhostVariant: Story = {
+    args: {
+        variant: "ghost",
+        placeholder: "Custom placeholder"
+    }
+};
+
+export const GhostVariantDisabled: Story = {
+    args: {
+        ...GhostVariant.args,
+        disabled: true
+    }
+};
+
+export const GhostVariantInvalid: Story = {
+    args: {
+        ...GhostVariant.args,
+        invalid: true
+    }
+};
+
+export const WithForwardEventOnChange: Story = {
+    args: {
+        ...Default.args,
+        forwardEventOnChange: true
+    }
+};
diff --git a/packages/admin-ui/src/Input/InputPrimitive.tsx b/packages/admin-ui/src/Input/InputPrimitive.tsx
new file mode 100644
index 00000000000..05afc068d61
--- /dev/null
+++ b/packages/admin-ui/src/Input/InputPrimitive.tsx
@@ -0,0 +1,342 @@
+import * as React from "react";
+import { Icon as BaseIcon } from "~/Icon";
+import { cn, cva, type VariantProps, makeDecoratable } from "~/utils";
+
+/**
+ * Icon
+ */
+const inputIconVariants = cva("wby-absolute wby-fill-neutral-xstrong", {
+    variants: {
+        // Define dummy variants to be used in combination with `compoundVariants` below.
+        inputSize: {
+            md: "wby-top-sm",
+            lg: "wby-top-sm-extra",
+            xl: "wby-top-md"
+        },
+        position: {
+            start: "",
+            end: ""
+        },
+        disabled: {
+            true: "wby-fill-neutral-disabled"
+        }
+    },
+    defaultVariants: {
+        inputSize: "lg",
+        position: "start"
+    },
+    compoundVariants: [
+        // The icon position is `absolute` and is adjusted horizontally across its parent using left and right.
+        {
+            inputSize: "md",
+            position: "start",
+            class: "wby-left-[calc(theme(spacing.sm-plus)-theme(borderWidth.sm))]"
+        },
+        {
+            inputSize: "md",
+            position: "end",
+            class: "wby-right-[calc(theme(spacing.sm-plus)-theme(borderWidth.sm))]"
+        },
+        {
+            inputSize: "lg",
+            position: "start",
+            class: "wby-left-[calc(theme(spacing.sm-plus)-theme(borderWidth.sm))]"
+        },
+        {
+            inputSize: "lg",
+            position: "end",
+            class: "wby-right-[calc(theme(spacing.sm-plus)-theme(borderWidth.sm))]"
+        },
+        {
+            inputSize: "xl",
+            position: "start",
+            class: "wby-left-[calc(theme(spacing.md)-theme(borderWidth.sm))]"
+        },
+        {
+            inputSize: "xl",
+            position: "end",
+            class: "wby-right-[calc(theme(spacing.md)-theme(borderWidth.sm))]"
+        }
+    ]
+});
+
+interface InputIconProps
+    extends React.HTMLAttributes<HTMLDivElement>,
+        VariantProps<typeof inputIconVariants> {
+    icon: React.ReactElement;
+}
+
+const InputIcon = ({ icon, disabled, position, inputSize, className }: InputIconProps) => {
+    return (
+        <div className={cn(inputIconVariants({ position, disabled, inputSize }), className)}>
+            {React.cloneElement(icon, {
+                ...icon.props,
+                size: inputSize === "xl" ? "lg" : "sm" // Map icon size based on the input size.
+            })}
+        </div>
+    );
+};
+
+/**
+ * Input
+ *
+ * We support both `disabled` and `data-disabled` as well as `focused` and `data-focused` variants
+ * because these variants can be used by both input and div elements. The last one is used by `MultiAutocomplete` component,
+ * where the `inputVariants` is used to style a div that wraps multiple elements (input, Tags, icons, etc.)
+ */
+const inputVariants = cva(
+    [
+        "wby-w-full wby-border-sm wby-text-md wby-peer",
+        "focus-visible:wby-outline-none",
+        "disabled:wby-cursor-not-allowed data-[disabled=true]:wby-cursor-not-allowed",
+        "file:wby-bg-transparent file:wby-border-none file:wby-text-sm file:wby-font-semibold"
+    ],
+    {
+        variants: {
+            size: {
+                md: [
+                    "wby-rounded-md",
+                    "wby-py-[calc(theme(padding.xs-plus)-theme(borderWidth.sm))] wby-px-[calc(theme(padding.sm-extra)-theme(borderWidth.sm))]"
+                ],
+                lg: [
+                    "wby-rounded-md",
+                    "wby-py-[calc(theme(padding.sm-plus)-theme(borderWidth.sm))] wby-px-[calc(theme(padding.sm-extra)-theme(borderWidth.sm))]"
+                ],
+                xl: [
+                    "wby-rounded-lg wby-leading-6",
+                    "wby-py-[calc(theme(padding.md)-theme(borderWidth.sm))] wby-px-[calc(theme(padding.md)-theme(borderWidth.sm))]"
+                ]
+            },
+            variant: {
+                primary: [
+                    "wby-bg-neutral-base wby-border-neutral-muted wby-text-neutral-strong placeholder:wby-text-neutral-dimmed",
+                    "hover:wby-border-neutral-strong",
+                    "focus:wby-border-neutral-black",
+                    "data-[focused=true]:wby-border-neutral-black",
+                    "disabled:wby-bg-neutral-disabled disabled:wby-border-neutral-dimmed disabled:wby-text-neutral-disabled disabled:placeholder:wby-text-neutral-disabled",
+                    "data-[disabled=true]:wby-bg-neutral-disabled data-[disabled=true]:wby-border-neutral-dimmed data-[disabled=true]:wby-text-neutral-disabled data-[disabled=true]:placeholder:wby-text-neutral-disabled"
+                ],
+                secondary: [
+                    "wby-bg-neutral-light wby-border-neutral-subtle wby-text-neutral-strong placeholder:wby-text-neutral-dimmed",
+                    "hover:wby-bg-neutral-dimmed",
+                    "focus:wby-bg-neutral-base focus:wby-border-neutral-black",
+                    "data-[focused=true]:wby-bg-neutral-base data-[focused=true]:wby-border-neutral-black",
+                    "disabled:wby-bg-neutral-disabled disabled:wby-text-neutral-disabled disabled:placeholder:wby-text-neutral-disabled",
+                    "data-[disabled=true]:wby-bg-neutral-disabled data-[disabled=true]:wby-text-neutral-disabled data-[disabled=true]:placeholder:wby-text-neutral-disabled"
+                ],
+                ghost: [
+                    "wby-bg-transparent wby-border-transparent wby-text-neutral-strong placeholder:wby-text-neutral-dimmed",
+                    "hover:wby-bg-neutral-dark/5",
+                    "focus:wby-bg-neutral-dark/5",
+                    "data-[focused=true]:wby-bg-neutral-dark/5",
+                    "disabled:wby-bg-transparent disabled:wby-text-neutral-disabled disabled:placeholder:wby-text-neutral-disabled",
+                    "data-[disabled=true]:wby-bg-transparent data-[disabled=true]:wby-text-neutral-disabled data-[disabled=true]:placeholder:wby-text-neutral-disabled"
+                ]
+            },
+            iconPosition: {
+                start: "wby-pl-[calc(theme(padding.xl)-theme(borderWidth.sm))]",
+                end: "wby-pr-[calc(theme(padding.xl)-theme(borderWidth.sm))]",
+                both: [
+                    "wby-pl-[calc(theme(padding.xl)-theme(borderWidth.sm))]",
+                    "wby-pr-[calc(theme(padding.xl)-theme(borderWidth.sm))]"
+                ]
+            },
+            invalid: {
+                true: ""
+            }
+        },
+        compoundVariants: [
+            // Prevent text overlap with icons, add extra padding for icons.
+            {
+                size: "lg",
+                iconPosition: "start",
+                class: "wby-pl-[calc(theme(padding.xl)-theme(borderWidth.sm))]"
+            },
+            {
+                size: "lg",
+                iconPosition: "end",
+                class: "wby-pr-[calc(theme(padding.xl)-theme(borderWidth.sm))]"
+            },
+            {
+                size: "lg",
+                iconPosition: "both",
+                class: [
+                    "wby-pl-[calc(theme(padding.xl)-theme(borderWidth.sm))]",
+                    "wby-pr-[calc(theme(padding.xl)-theme(borderWidth.sm))]"
+                ]
+            },
+            {
+                size: "xl",
+                iconPosition: "start",
+                class: "wby-pl-[calc(theme(padding.xxl)+theme(padding.xs)-theme(borderWidth.sm))]"
+            },
+            {
+                size: "xl",
+                iconPosition: "end",
+                class: "wby-pr-[calc(theme(padding.xxl)+theme(padding.xs)-theme(borderWidth.sm))]"
+            },
+            {
+                size: "xl",
+                iconPosition: "both",
+                class: [
+                    "wby-pl-[calc(theme(padding.xxl)+theme(padding.xs)-theme(borderWidth.sm))]",
+                    "wby-pr-[calc(theme(padding.xxl)+theme(padding.xs)-theme(borderWidth.sm))]"
+                ]
+            },
+            // Add specific classNames in case of invalid inputs: note the difference between the ghost and the other variants.
+            {
+                variant: "primary",
+                invalid: true,
+                class: "!wby-border-destructive-default"
+            },
+            {
+                variant: "secondary",
+                invalid: true,
+                class: "!wby-border-destructive-default"
+            },
+            {
+                variant: "ghost",
+                invalid: true,
+                class: "!wby-border-destructive-subtle !wby-bg-destructive-subtle"
+            }
+        ],
+        defaultVariants: {
+            size: "lg",
+            variant: "primary"
+        }
+    }
+);
+
+type InputPrimitiveProps<TValue = any> = Omit<
+    React.InputHTMLAttributes<HTMLInputElement>,
+    "size" | "onChange"
+> &
+    VariantProps<typeof inputVariants> & {
+        /**
+         * Icon to be displayed at the start of the input field.
+         */
+        startIcon?: React.ReactElement<typeof BaseIcon> | React.ReactElement;
+        /**
+         * Icon to be displayed at the end of the input field.
+         */
+        endIcon?: React.ReactElement<typeof BaseIcon> | React.ReactElement;
+        /**
+         * Maximum length of the input field.
+         */
+        maxLength?: React.InputHTMLAttributes<HTMLInputElement>["size"];
+        /**
+         * Reference to the input element.
+         */
+        inputRef?: React.Ref<HTMLInputElement>;
+        /**
+         * If true, it will pass the native `event` to the `onChange` callback
+         */
+        forwardEventOnChange?: boolean;
+        /**
+         * Callback function to be called when the Enter key is pressed.
+         */
+        onEnter?: () => void;
+        /**
+         * A callback that is executed each time a value is changed.
+         */
+        onChange?: (value: TValue) => void;
+    };
+
+const getIconPosition = (
+    startIcon?: InputPrimitiveProps["startIcon"],
+    endIcon?: InputPrimitiveProps["endIcon"]
+): "start" | "end" | "both" | undefined => {
+    if (startIcon && endIcon) {
+        return "both";
+    }
+    if (startIcon) {
+        return "start";
+    }
+    if (endIcon) {
+        return "end";
+    }
+    return;
+};
+
+const DecoratableInputPrimitive = ({
+    className,
+    disabled,
+    endIcon,
+    forwardEventOnChange,
+    inputRef,
+    invalid,
+    maxLength,
+    onChange: originalOnChange,
+    onEnter,
+    onKeyDown: originalOnKeyDown,
+    size,
+    startIcon,
+    value,
+    variant,
+    ...props
+}: InputPrimitiveProps) => {
+    const iconPosition = getIconPosition(startIcon, endIcon);
+
+    const onChange = React.useCallback(
+        (event: React.SyntheticEvent<HTMLInputElement>) => {
+            if (!originalOnChange) {
+                return;
+            }
+
+            // @ts-expect-error
+            originalOnChange(forwardEventOnChange ? event : event.target.value);
+        },
+        [forwardEventOnChange, originalOnChange]
+    );
+
+    const onKeyDown = React.useCallback(
+        (e: React.KeyboardEvent<HTMLInputElement>) => {
+            if (typeof onEnter === "function" && e.key === "Enter") {
+                onEnter();
+            }
+
+            if (typeof originalOnKeyDown === "function") {
+                return originalOnKeyDown(e);
+            }
+        },
+        [originalOnKeyDown, onEnter]
+    );
+
+    return (
+        <div className={cn("wby-relative wby-flex wby-items-center wby-w-full", className)}>
+            {startIcon && (
+                <InputIcon
+                    disabled={disabled}
+                    icon={startIcon}
+                    inputSize={size}
+                    position={"start"}
+                />
+            )}
+            <input
+                {...props}
+                ref={inputRef}
+                className={cn(inputVariants({ variant, size, iconPosition, invalid }))}
+                disabled={disabled}
+                size={maxLength}
+                onChange={onChange}
+                onKeyDown={onKeyDown}
+                value={value ?? ""}
+            />
+            {endIcon && (
+                <InputIcon disabled={disabled} icon={endIcon} inputSize={size} position={"end"} />
+            )}
+        </div>
+    );
+};
+
+const InputPrimitive = makeDecoratable("InputPrimitive", DecoratableInputPrimitive);
+
+export {
+    InputIcon,
+    InputPrimitive,
+    getIconPosition,
+    inputVariants,
+    inputIconVariants,
+    type InputIconProps,
+    type InputPrimitiveProps
+};
diff --git a/packages/admin-ui/src/Input/index.ts b/packages/admin-ui/src/Input/index.ts
new file mode 100644
index 00000000000..d23d7dc8a18
--- /dev/null
+++ b/packages/admin-ui/src/Input/index.ts
@@ -0,0 +1,2 @@
+export * from "./Input";
+export * from "./InputPrimitive";
diff --git a/packages/admin-ui/src/Label/Label.mdx b/packages/admin-ui/src/Label/Label.mdx
new file mode 100644
index 00000000000..d135a1118e8
--- /dev/null
+++ b/packages/admin-ui/src/Label/Label.mdx
@@ -0,0 +1,105 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+
+import * as LabelStories from './Label.stories';
+
+<Meta of={LabelStories} />
+
+# Label
+
+The Label component is a fundamental UI element used to provide clear text descriptions for form controls.
+**While most form components accept a `label` prop, there are cases where you may need more flexibility or control — in such scenarios, you can use the Label component directly.**
+
+It enhances usability by clearly identifying input fields and improves accessibility by properly associating labels with their corresponding form elements using htmlFor.
+The component supports a range of customization options, including descriptions, hints, required indicators, disabled and invalid states, and visual weight variants.
+
+
+## Usage
+
+<Canvas of={LabelStories.Documentation} source={ { code: `
+import React, { useState } from "react";
+import { Label, Input } from "@webiny/admin-ui";
+
+const LabelExample = () => {
+    const [value, setValue] = useState("");
+
+    return (
+        <div className="wby-mb-4 wby-space-y-2">
+            <Label
+                id="full-name-label"
+                htmlFor="full-name"
+                text="Full Name"
+                description="As shown on your government-issued ID"
+                hint="Include middle name if applicable"
+                required={true}
+                value="Label value will be shown here"
+                weight="strong"
+                invalid={false}
+                disabled={false}
+            />
+
+            <Input
+                id="full-name"
+                type="text"
+                placeholder="e.g. John Michael Doe"
+                required={true}
+                value={value}
+                onChange={(e) => setValue(e.target.value)}
+            />
+        </div>
+    );
+};
+
+export default LabelExample;
+
+` } }
+        additionalActions={[
+            {
+                title: 'Open in GitHub',
+                onClick: () => {
+                    window.open(
+                        'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Label/Label.tsx',
+                        '_blank'
+                    );
+                },
+            }
+        ]}
+/>
+
+<Controls of={LabelStories.Documentation} />
+
+```tsx
+import React, { useState } from "react";
+import { Label, Input } from "@webiny/admin-ui";
+
+const LabelExample = () => {
+    const [value, setValue] = useState("");
+
+    return (
+        <div className="wby-mb-4 wby-space-y-2">
+            <Label
+                id="full-name-label"
+                htmlFor="full-name"
+                text="Full Name"
+                description="As shown on your government-issued ID"
+                hint="Include middle name if applicable"
+                required={true}
+                value="Label value will be shown here"
+                weight="strong"
+                invalid={false}
+                disabled={false}
+            />
+
+            <Input
+                id="full-name"
+                type="text"
+                placeholder="e.g. John Michael Doe"
+                required={true}
+                value={value}
+                onChange={(e) => setValue(e.target.value)}
+            />
+        </div>
+    );
+};
+
+export default LabelExample;
+```
diff --git a/packages/admin-ui/src/Label/Label.stories.tsx b/packages/admin-ui/src/Label/Label.stories.tsx
new file mode 100644
index 00000000000..ce38c6b205a
--- /dev/null
+++ b/packages/admin-ui/src/Label/Label.stories.tsx
@@ -0,0 +1,164 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Label } from "./Label";
+import { Tooltip } from "~/Tooltip";
+import { Input } from "~/Input";
+
+const meta: Meta<typeof Label> = {
+    title: "Components/Form/Label",
+    component: Label,
+    parameters: {
+        layout: "padded"
+    },
+    decorators: [
+        Story => (
+            <Tooltip.Provider>
+                <Story />
+            </Tooltip.Provider>
+        )
+    ]
+};
+
+export default meta;
+type Story = StoryObj<typeof Label>;
+
+export const Documentation: Story = {
+    render: args => {
+        const [value, setValue] = React.useState("");
+
+        return (
+            <div className="wby-mb-4 wby-space-y-2">
+                <Label {...args} />
+                <Input
+                    id={args.htmlFor}
+                    type="text"
+                    placeholder="e.g. John Michael Doe"
+                    required={args.required}
+                    value={value}
+                    onChange={e => setValue(e.target.value)}
+                />
+            </div>
+        );
+    },
+    args: {
+        text: "Full Name",
+        htmlFor: "full-name",
+        description: "As shown on your government-issued ID",
+        hint: "Include middle name if applicable",
+        required: true,
+        disabled: false,
+        weight: "strong",
+        value: "Label value will be shown here",
+        invalid: false
+    },
+    argTypes: {
+        text: {
+            description: "The text content of the label",
+            control: "text"
+        },
+        htmlFor: {
+            description: "The ID of the form element this label is associated with",
+            control: "text"
+        },
+        description: {
+            description: "Additional descriptive text shown next to the label",
+            control: "text"
+        },
+        hint: {
+            description: "Tooltip hint text that appears on hover",
+            control: "text"
+        },
+        required: {
+            description: "Whether the associated form field is required",
+            control: "boolean"
+        },
+        disabled: {
+            description: "Whether the label should appear disabled",
+            control: "boolean"
+        },
+        weight: {
+            description: "The font weight of the label text",
+            control: "select",
+            options: ["strong", "light"]
+        },
+        value: {
+            description: "Optional value to display on the right side of the label",
+            control: "text"
+        },
+        invalid: {
+            description: "Whether the label should appear in an invalid state",
+            control: "boolean"
+        }
+    }
+};
+
+export const Default: Story = {
+    args: {
+        text: "Test label",
+        htmlFor: "test-field"
+    },
+    render: args => (
+        <>
+            <input type="checkbox" id={args.htmlFor} />
+            <Label {...args} />
+        </>
+    )
+};
+
+export const LightWeight: Story = {
+    args: {
+        ...Default.args,
+        weight: "light"
+    }
+};
+
+export const Required: Story = {
+    args: {
+        ...Default.args,
+        required: true
+    }
+};
+
+export const WithDescription: Story = {
+    args: {
+        ...Default.args,
+        description: "(description)"
+    }
+};
+
+export const WithHint: Story = {
+    args: {
+        ...Default.args,
+        hint: "This is an additional message in case context to this label needs to be added"
+    }
+};
+
+export const WithValue: Story = {
+    args: {
+        ...Default.args,
+        value: 24
+    },
+    render: args => (
+        <div className="wby-w-64">
+            <Label {...args} />
+        </div>
+    )
+};
+
+export const Disabled: Story = {
+    args: {
+        htmlFor: "test-field-disabled",
+        text: "Test label",
+        description: "(description)",
+        hint: "This is an additional message in case context to this label needs to be added",
+        required: true,
+        disabled: true,
+        value: 24
+    },
+    render: args => (
+        <div className="wby-w-64">
+            <Label {...args} />
+        </div>
+    )
+};
diff --git a/packages/admin-ui/src/Label/Label.tsx b/packages/admin-ui/src/Label/Label.tsx
new file mode 100644
index 00000000000..06696274b80
--- /dev/null
+++ b/packages/admin-ui/src/Label/Label.tsx
@@ -0,0 +1,80 @@
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { cn, makeDecoratable, cva, type VariantProps } from "~/utils";
+import { LabelDescription, LabelHint, LabelRequired, LabelValue } from "./components";
+
+const labelVariants = cva(
+    [
+        "wby-inline-flex wby-items-center wby-justify-between wby-w-full wby-text-sm",
+        "wby-text-neutral-primary wby-whitespace-nowrap",
+        "peer-disabled:wby-text-neutral-disabled peer-disabled:wby-cursor-not-allowed"
+    ],
+    {
+        variants: {
+            weight: {
+                strong: "wby-font-semibold",
+                light: "wby-font-regular"
+            },
+            disabled: {
+                true: "wby-text-neutral-disabled wby-cursor-not-allowed"
+            },
+            invalid: {
+                true: "webiny_label-invalid"
+            }
+        },
+        defaultVariants: {
+            weight: "strong"
+        }
+    }
+);
+
+interface LabelProps
+    extends Omit<React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>, "children">,
+        VariantProps<typeof labelVariants> {
+    text: React.ReactNode;
+    value?: React.ReactNode;
+    description?: React.ReactNode;
+    hint?: React.ReactNode;
+    required?: boolean;
+    disabled?: boolean;
+}
+
+const LabelBase = ({
+    className,
+    disabled,
+    description,
+    hint,
+    required,
+    value,
+    text,
+    weight,
+    invalid,
+    id,
+    ...props
+}: LabelProps) => {
+    if (!text) {
+        return null;
+    }
+
+    return (
+        <LabelPrimitive.Root
+            className={cn(labelVariants({ weight, disabled, invalid }), className)}
+            htmlFor={id}
+            {...props}
+        >
+            <span>
+                <span className={"wby-flex wby-items-center wby-gap-xxs"}>
+                    <span className={"webiny_label-text"}>{text}</span>
+                    {description && <LabelDescription content={description} disabled={disabled} />}
+                    {hint && <LabelHint content={hint} />}
+                    {required && <LabelRequired disabled={disabled} />}
+                </span>
+            </span>
+            {value && <LabelValue value={value} weight={weight} disabled={disabled} />}
+        </LabelPrimitive.Root>
+    );
+};
+
+const Label = makeDecoratable("Label", LabelBase);
+
+export { Label, type LabelProps };
diff --git a/packages/admin-ui/src/Label/components/LabelDescription.tsx b/packages/admin-ui/src/Label/components/LabelDescription.tsx
new file mode 100644
index 00000000000..b4a51bd1216
--- /dev/null
+++ b/packages/admin-ui/src/Label/components/LabelDescription.tsx
@@ -0,0 +1,23 @@
+import * as React from "react";
+import { cn, cva, type VariantProps } from "~/utils";
+import { Text } from "~/Text";
+
+const labelDescriptionVariants = cva("wby-font-normal wby-text-neutral-strong", {
+    variants: {
+        disabled: {
+            true: "wby-text-neutral-disabled"
+        }
+    }
+});
+
+interface LabelDescriptionProps extends VariantProps<typeof labelDescriptionVariants> {
+    content: React.ReactNode;
+}
+
+const LabelDescription = ({ content, disabled }: LabelDescriptionProps) => (
+    <Text className={cn(labelDescriptionVariants({ disabled }))} size={"sm"}>
+        {content}
+    </Text>
+);
+
+export { LabelDescription, type LabelDescriptionProps };
diff --git a/packages/admin-ui/src/Label/components/LabelHint.tsx b/packages/admin-ui/src/Label/components/LabelHint.tsx
new file mode 100644
index 00000000000..c0cece8ec53
--- /dev/null
+++ b/packages/admin-ui/src/Label/components/LabelHint.tsx
@@ -0,0 +1,24 @@
+import * as React from "react";
+import { ReactComponent as InfoIcon } from "@webiny/icons/info.svg";
+import { Tooltip } from "~/Tooltip";
+import { Icon } from "~/Icon";
+
+interface LabelHintProps {
+    content: React.ReactNode;
+}
+
+const LabelHint = ({ content }: LabelHintProps) => (
+    <Tooltip
+        content={content}
+        trigger={
+            <Icon
+                icon={<InfoIcon />}
+                size="xs"
+                label={"More information"}
+                color={"neutral-light"}
+            />
+        }
+    />
+);
+
+export { LabelHint, type LabelHintProps };
diff --git a/packages/admin-ui/src/Label/components/LabelRequired.tsx b/packages/admin-ui/src/Label/components/LabelRequired.tsx
new file mode 100644
index 00000000000..c0e48559b01
--- /dev/null
+++ b/packages/admin-ui/src/Label/components/LabelRequired.tsx
@@ -0,0 +1,18 @@
+import * as React from "react";
+import { cn, cva, type VariantProps } from "~/utils";
+
+const labelRequiredVariants = cva("wby-text-destructive-primary", {
+    variants: {
+        disabled: {
+            true: "wby-text-destructive-muted"
+        }
+    }
+});
+
+type LabelRequiredProps = VariantProps<typeof labelRequiredVariants>;
+
+const LabelRequired = ({ disabled }: LabelRequiredProps) => (
+    <span className={cn(labelRequiredVariants({ disabled }))}>{"*"}</span>
+);
+
+export { LabelRequired, type LabelRequiredProps };
diff --git a/packages/admin-ui/src/Label/components/LabelValue.tsx b/packages/admin-ui/src/Label/components/LabelValue.tsx
new file mode 100644
index 00000000000..9deaca65fdf
--- /dev/null
+++ b/packages/admin-ui/src/Label/components/LabelValue.tsx
@@ -0,0 +1,30 @@
+import * as React from "react";
+import { cn, cva, type VariantProps } from "~/utils";
+import { Text } from "~/Text";
+
+const labelValueVariants = cva("wby-text-neutral-strong", {
+    variants: {
+        weight: {
+            strong: "wby-font-semibold",
+            light: "wby-font-regular"
+        },
+        disabled: {
+            true: "wby-text-neutral-disabled"
+        }
+    },
+    defaultVariants: {
+        weight: "strong"
+    }
+});
+
+interface LabelValueProps extends VariantProps<typeof labelValueVariants> {
+    value: React.ReactNode;
+}
+
+const LabelValue = ({ value, weight, disabled }: LabelValueProps) => (
+    <Text size="sm" className={cn(labelValueVariants({ weight, disabled }))}>
+        {value}
+    </Text>
+);
+
+export { LabelValue, type LabelValueProps };
diff --git a/packages/admin-ui/src/Label/components/index.ts b/packages/admin-ui/src/Label/components/index.ts
new file mode 100644
index 00000000000..3b588bd17c1
--- /dev/null
+++ b/packages/admin-ui/src/Label/components/index.ts
@@ -0,0 +1,4 @@
+export * from "./LabelRequired";
+export * from "./LabelDescription";
+export * from "./LabelHint";
+export * from "./LabelValue";
diff --git a/packages/admin-ui/src/Label/index.ts b/packages/admin-ui/src/Label/index.ts
new file mode 100644
index 00000000000..e0a468a2d25
--- /dev/null
+++ b/packages/admin-ui/src/Label/index.ts
@@ -0,0 +1 @@
+export * from "./Label";
diff --git a/packages/admin-ui/src/Link/Link.mdx b/packages/admin-ui/src/Link/Link.mdx
new file mode 100644
index 00000000000..f0ac77162bb
--- /dev/null
+++ b/packages/admin-ui/src/Link/Link.mdx
@@ -0,0 +1,264 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+
+import * as LinkStories from './Link.stories';
+
+<Meta of={LinkStories} />
+
+# Link
+
+The purpose of the Link component is to enable seamless navigation by connecting users to other pages, sections, or resources. It provides a consistent, accessible, and visually recognizable way to interact with content, ensuring clarity and usability while maintaining the design system's cohesion.
+
+## Usage
+
+<Canvas of={LinkStories.Documentation} source={ { code: `
+import React from "react";
+import { Link } from "@webiny/admin-ui";
+
+const LinkExample = () => {
+    return (
+        <div>
+            <p>
+                This is a paragraph with a <Link to="/dashboard">link to the dashboard</Link> in it.
+            </p>
+            <p>
+                <Link to="/settings" variant="secondary" size="lg">
+                    This is a large secondary link
+                </Link>
+            </p>
+            <p>
+                <Link to="/help" underline={true}>
+                    This link is underlined by default
+                </Link>
+            </p>
+        </div>
+    );
+};
+
+export default LinkExample;
+
+` } }
+        additionalActions={[
+            {
+                title: 'Open in GitHub',
+                onClick: () => {
+                    window.open(
+                        'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Link/Link.tsx',
+                        '_blank'
+                    );
+                },
+            }
+        ]}
+/>
+
+<Controls of={LinkStories.Documentation} />
+
+```tsx
+import React from "react";
+import { Link } from "@webiny/admin-ui";
+
+const LinkExample = () => {
+    return (
+        <div>
+            <p>
+                This is a paragraph with a <Link to="/dashboard">link to the dashboard</Link> in it.
+            </p>
+            <p>
+                <Link to="/settings" variant="secondary" size="lg">
+                    This is a large secondary link
+                </Link>
+            </p>
+            <p>
+                <Link to="/help" underline={true}>
+                    This link is underlined by default
+                </Link>
+            </p>
+        </div>
+    );
+};
+
+export default LinkExample;
+```
+
+## Examples
+
+### Default
+
+<Canvas of={LinkStories.Default} source={ { code: `
+import React from "react";
+import { Link } from "@webiny/admin-ui";
+
+const DefaultLinkExample = () => {
+    return (
+        <Link to="#">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.
+        </Link>
+    );
+};
+
+export default DefaultLinkExample;
+` } } />
+
+### Size Variants
+
+#### Extra Large (XL)
+
+<Canvas of={LinkStories.LinkXl} source={ { code: `
+import React from "react";
+import { Link } from "@webiny/admin-ui";
+
+const XlLinkExample = () => {
+    return (
+        <Link to="#" size="xl">
+            Extra large link
+        </Link>
+    );
+};
+
+export default XlLinkExample;
+` } } />
+
+#### Large (LG)
+
+<Canvas of={LinkStories.LinkLg} source={ { code: `
+import React from "react";
+import { Link } from "@webiny/admin-ui";
+
+const LgLinkExample = () => {
+    return (
+        <Link to="#" size="lg">
+            Large link
+        </Link>
+    );
+};
+
+export default LgLinkExample;
+` } } />
+
+#### Medium (MD)
+
+<Canvas of={LinkStories.LinkMd} source={ { code: `
+import React from "react";
+import { Link } from "@webiny/admin-ui";
+
+const MdLinkExample = () => {
+    return (
+        <Link to="#" size="md">
+            Medium link
+        </Link>
+    );
+};
+
+export default MdLinkExample;
+` } } />
+
+#### Small (SM)
+
+<Canvas of={LinkStories.LinkSm} source={ { code: `
+import React from "react";
+import { Link } from "@webiny/admin-ui";
+
+const SmLinkExample = () => {
+    return (
+        <Link to="#" size="sm">
+            Small link
+        </Link>
+    );
+};
+
+export default SmLinkExample;
+` } } />
+
+### Inherited Size
+
+<Canvas of={LinkStories.InheritedSize} source={ { code: `
+import React from "react";
+import { Link, Text } from "@webiny/admin-ui";
+
+const InheritedSizeLinkExample = () => {
+    return (
+        <Text>
+            <Text size="lg">
+                Size of this text is set to large, so,&nbsp;
+                <Link to="#">this link's</Link> size is also automatically set to large.
+            </Text>
+        </Text>
+    );
+};
+
+export default InheritedSizeLinkExample;
+` } } />
+
+### With Underline
+
+<Canvas of={LinkStories.WithUnderline} source={ { code: `
+import React from "react";
+import { Link } from "@webiny/admin-ui";
+
+const UnderlinedLinkExample = () => {
+    return (
+        <Link to="#" underline={true}>
+            This link is underlined by default
+        </Link>
+    );
+};
+
+export default UnderlinedLinkExample;
+` } } />
+
+### Primary Negative
+
+<Canvas of={LinkStories.PrimaryNegative} source={ { code: `
+import React from "react";
+import { Link, Text } from "@webiny/admin-ui";
+
+const PrimaryNegativeLinkExample = () => {
+    return (
+        <div className="wby-bg-[#25292e] wby-p-[300px] wby-rounded-[5px] wby-text-neutral-dimmed">
+            <Text>
+                Lorem <Link to="#" variant="primary-negative">ipsum dolor sit amet</Link>, consectetur adipiscing elit.
+                Fusce tempus tortor eu sapien interdum rhoncus.
+            </Text>
+        </div>
+    );
+};
+
+export default PrimaryNegativeLinkExample;
+` } } />
+
+### Secondary Negative
+
+<Canvas of={LinkStories.SecondaryNegative} source={ { code: `
+import React from "react";
+import { Link, Text } from "@webiny/admin-ui";
+
+const SecondaryNegativeLinkExample = () => {
+    return (
+        <div className="wby-bg-[#25292e] wby-p-[300px] wby-rounded-[5px] wby-text-neutral-dimmed">
+            <Text>
+                Lorem <Link to="#" variant="secondary-negative">ipsum dolor sit amet</Link>, consectetur adipiscing elit.
+                Fusce tempus tortor eu sapien interdum rhoncus.
+            </Text>
+        </div>
+    );
+};
+
+export default SecondaryNegativeLinkExample;
+` } } />
+
+## Anatomy
+
+### Primary
+<img src="/images/storybook/link/primary.png" alt="Primary"/>
+
+### Secondary
+<img src="/images/storybook/link/secondary.png" alt="Secondary"/>
+
+### Sizing
+Links inherit font styles of surrounding text.
+<img src="/images/storybook/link/sizing.png" alt="Sizing"/>
+
+### State
+<img src="/images/storybook/link/states.png" alt="State"/>
+
+## Usage
+<img src="/images/storybook/link/usage.png" alt="Usage"/>
\ No newline at end of file
diff --git a/packages/admin-ui/src/Link/Link.stories.tsx b/packages/admin-ui/src/Link/Link.stories.tsx
new file mode 100644
index 00000000000..2d5d69ee8af
--- /dev/null
+++ b/packages/admin-ui/src/Link/Link.stories.tsx
@@ -0,0 +1,188 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { BrowserRouter } from "@webiny/react-router";
+import { Link } from "./Link";
+import { Text } from "~/Text";
+
+const meta: Meta<typeof Link> = {
+    title: "Components/Link",
+    component: Link,
+    decorators: [
+        (Story: React.ComponentType) => (
+            <BrowserRouter>
+                <Story />
+            </BrowserRouter>
+        )
+    ],
+    argTypes: {
+        size: { control: "select", options: ["sm", "md", "lg", "xl"] },
+        variant: { control: "select", options: ["primary", "secondary"] }
+    }
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Link>;
+
+export const Default: Story = {
+    args: {
+        to: "#",
+        children:
+            "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus."
+    }
+};
+
+export const LinkXl: Story = {
+    args: {
+        size: "xl",
+        to: "#",
+        children:
+            "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus."
+    }
+};
+
+export const LinkLg: Story = {
+    args: {
+        size: "lg",
+        to: "#",
+        children:
+            "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus."
+    }
+};
+
+export const LinkMd: Story = {
+    args: {
+        size: "md",
+        to: "#",
+        children:
+            "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus."
+    }
+};
+
+export const LinkSm: Story = {
+    args: {
+        size: "sm",
+        to: "#",
+        children:
+            "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus."
+    }
+};
+
+export const InheritedSize: Story = {
+    name: "Link with inherited size",
+    render: linkProps => {
+        return (
+            <Text>
+                <Text size="lg">
+                    Size of this text is set to large, so,&nbsp;
+                    <Link {...linkProps}>this link&apos;s</Link> size is also automatically set to
+                    large.
+                </Text>
+            </Text>
+        );
+    },
+    args: {
+        to: "#",
+        children:
+            "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus."
+    }
+};
+
+export const WithUnderline: Story = {
+    args: {
+        underline: true,
+        to: "#",
+        children:
+            "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus."
+    }
+};
+
+export const PrimaryNegative: Story = {
+    decorators: [
+        Story => (
+            <div className="wby-bg-[#25292e] wby-p-[300px] wby-rounded-[5px] wby-text-neutral-dimmed">
+                <Story />
+            </div>
+        )
+    ],
+    render: args => {
+        return (
+            <Text>
+                Lorem <Link {...args}>ipsum dolor sit amet</Link>, consectetur adipiscing elit.
+                Fusce tempus tortor eu sapien interdum rhoncus.
+            </Text>
+        );
+    },
+    args: {
+        ...Default.args,
+        variant: "primary-negative"
+    }
+};
+
+export const SecondaryNegative: Story = {
+    decorators: [
+        Story => (
+            <div className="wby-bg-[#25292e] wby-p-[300px] wby-rounded-[5px] wby-text-neutral-dimmed">
+                <Story />
+            </div>
+        )
+    ],
+    render: args => {
+        return (
+            <Text>
+                Lorem <Link {...args}>ipsum dolor sit amet</Link>, consectetur adipiscing elit.
+                Fusce tempus tortor eu sapien interdum rhoncus.
+            </Text>
+        );
+    },
+    args: {
+        ...Default.args,
+        variant: "secondary-negative"
+    }
+};
+
+export const Documentation: Story = {
+    args: {
+        to: "#",
+        variant: "primary",
+        size: "md",
+        underline: false,
+        disabled: false,
+        children: "This is a link"
+    },
+    argTypes: {
+        to: {
+            description:
+                "The URL or path the link points to. If it’s a relative path, you can pass it as-is—it will automatically resolve based on the parent route. For a full URL, be sure to pass the complete address starting with `https://...`",
+            control: "text",
+            defaultValue: "#"
+        },
+        variant: {
+            description: "Visual style of the link",
+            control: "select",
+            options: ["primary", "secondary", "primary-negative", "secondary-negative"],
+            defaultValue: "primary"
+        },
+        size: {
+            description: "Size of the link text",
+            control: "select",
+            options: ["inherit", "sm", "md", "lg", "xl"],
+            defaultValue: "inherit"
+        },
+        underline: {
+            description: "Whether the link should be underlined by default",
+            control: "boolean",
+            defaultValue: false
+        },
+        disabled: {
+            description: "Whether the link is disabled",
+            control: "boolean",
+            defaultValue: false
+        },
+        children: {
+            description: "The content of the link. It can be any valid React node.",
+            control: "text",
+            defaultValue: "This is a link"
+        }
+    }
+};
diff --git a/packages/admin-ui/src/Link/Link.tsx b/packages/admin-ui/src/Link/Link.tsx
new file mode 100644
index 00000000000..53e3047764a
--- /dev/null
+++ b/packages/admin-ui/src/Link/Link.tsx
@@ -0,0 +1,64 @@
+import React from "react";
+import { cva, type VariantProps, makeDecoratable, cn } from "~/utils";
+import {
+    Link as WebinyReactRouterLink,
+    type LinkProps as WebinyReactRouterLinkProps
+} from "@webiny/react-router";
+
+const linkVariants = cva("wby-font-sans wby-rounded-xs", {
+    variants: {
+        size: {
+            inherit: "[font-size:inherit]",
+            sm: "wby-text-sm",
+            md: "wby-text-md",
+            lg: "wby-text-lg",
+            xl: "wby-text-xl"
+        },
+        variant: {
+            primary: [
+                "wby-text-accent-primary",
+                "focus-visible:wby-outline-none focus-visible:wby-ring-[2px] focus-visible:wby-ring-primary-dimmed"
+            ],
+            secondary: [
+                "wby-text-neutral-primary",
+                "focus-visible:wby-outline-none focus-visible:wby-ring-[2px] focus-visible:wby-ring-primary-dimmed"
+            ],
+            "primary-negative": [
+                "wby-text-accent-primary",
+                "focus-visible:wby-outline-none focus-visible:wby-ring-[2px] focus-visible:wby-ring-primary-strong"
+            ],
+            "secondary-negative": [
+                "wby-text-neutral-light",
+                "focus-visible:wby-outline-none focus-visible:wby-ring-[2px] focus-visible:wby-ring-primary-strong"
+            ]
+        },
+        underline: {
+            true: "wby-underline hover:wby-no-underline",
+            false: "hover:wby-underline"
+        }
+    },
+    defaultVariants: {
+        size: "inherit",
+        variant: "primary",
+        underline: false
+    }
+});
+
+interface LinkProps extends WebinyReactRouterLinkProps, VariantProps<typeof linkVariants> {
+    disabled?: boolean;
+}
+
+const LinkBase = ({ size, variant, underline, className, children, ...rest }: LinkProps) => {
+    return (
+        <WebinyReactRouterLink
+            {...rest}
+            className={cn(linkVariants({ size, variant, underline }), className)}
+        >
+            {children}
+        </WebinyReactRouterLink>
+    );
+};
+
+const Link = makeDecoratable("link", LinkBase);
+
+export { Link, type LinkProps };
diff --git a/packages/admin-ui/src/Link/index.ts b/packages/admin-ui/src/Link/index.ts
new file mode 100644
index 00000000000..3b40a46d8b6
--- /dev/null
+++ b/packages/admin-ui/src/Link/index.ts
@@ -0,0 +1 @@
+export * from "./Link";
diff --git a/packages/admin-ui/src/List/List.mdx b/packages/admin-ui/src/List/List.mdx
new file mode 100644
index 00000000000..821be39d1f4
--- /dev/null
+++ b/packages/admin-ui/src/List/List.mdx
@@ -0,0 +1,590 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+
+import * as ListStories from './List.stories';
+
+<Meta of={ListStories} />
+
+# List
+
+The List component provides a way to display a collection of items. It's designed to present related content in a consistent and accessible format, with support for various styling options and interactive behaviors.
+
+## Usage
+
+<Canvas of={ListStories.Documentation} source={ { code: `
+import React from "react";
+import { List } from "@webiny/admin-ui";
+import { ReactComponent as UserIcon } from "@webiny/icons/person.svg";
+import { ReactComponent as SettingsIcon } from "@webiny/icons/settings.svg";
+import { ReactComponent as HelpIcon } from "@webiny/icons/help.svg";
+
+const ListExample = () => {
+    return (
+        <List variant="underline" background="base">
+            <List.Item
+                icon={<UserIcon />}
+                title="User Profile"
+                description="View and edit your profile information"
+                onClick={() => console.log("User Profile clicked")}
+            />
+            <List.Item
+                icon={<SettingsIcon />}
+                title="Settings"
+                description="Configure application settings"
+                onClick={() => console.log("Settings clicked")}
+            />
+            <List.Item
+                icon={<HelpIcon />}
+                title="Help & Support"
+                description="Get assistance and view documentation"
+                onClick={() => console.log("Help & Support clicked")}
+            />
+        </List>
+    );
+};
+
+export default ListExample;
+
+` } }
+        additionalActions={[
+            {
+                title: 'Open in GitHub',
+                onClick: () => {
+                    window.open(
+                        'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/List/List.tsx',
+                        '_blank'
+                    );
+                },
+            }
+        ]}
+/>
+
+<Controls of={ListStories.Documentation} />
+
+```tsx
+import React from "react";
+import { List } from "@webiny/admin-ui";
+import { ReactComponent as UserIcon } from "@webiny/icons/person.svg";
+import { ReactComponent as SettingsIcon } from "@webiny/icons/settings.svg";
+import { ReactComponent as HelpIcon } from "@webiny/icons/help.svg";
+
+const ListExample = () => {
+    return (
+        <List variant="underline" background="base">
+            <List.Item
+                icon={<UserIcon />}
+                title="User Profile"
+                description="View and edit your profile information"
+                onClick={() => console.log("User Profile clicked")}
+            />
+            <List.Item
+                icon={<SettingsIcon />}
+                title="Settings"
+                description="Configure application settings"
+                onClick={() => console.log("Settings clicked")}
+            />
+            <List.Item
+                icon={<HelpIcon />}
+                title="Help & Support"
+                description="Get assistance and view documentation"
+                onClick={() => console.log("Help & Support clicked")}
+            />
+        </List>
+    );
+};
+
+export default ListExample;
+```
+
+## Examples
+
+### Default
+
+<Canvas of={ListStories.Default} source={ { code: `
+import React from "react";
+import { List } from "@webiny/admin-ui";
+
+const DefaultListExample = () => {
+    return (
+        <List>
+            <List.Item title="Item 1" />
+            <List.Item title="Item 2" />
+            <List.Item title="Item 3" />
+        </List>
+    );
+};
+
+export default DefaultListExample;
+` } } />
+
+### With Icons
+
+<Canvas of={ListStories.WithIcon} source={ { code: `
+import React from "react";
+import { List } from "@webiny/admin-ui";
+import { ReactComponent as UserIcon } from "@webiny/icons/person.svg";
+import { ReactComponent as SettingsIcon } from "@webiny/icons/settings.svg";
+import { ReactComponent as HelpIcon } from "@webiny/icons/help.svg";
+
+const WithIconsExample = () => {
+    return (
+        <List>
+            <List.Item icon={<UserIcon />} title="User Profile" />
+            <List.Item icon={<SettingsIcon />} title="Settings" />
+            <List.Item icon={<HelpIcon />} title="Help & Support" />
+        </List>
+    );
+};
+
+export default WithIconsExample;
+` } } />
+
+### With Descriptions
+
+<Canvas of={ListStories.WithDescription} source={ { code: `
+import React from "react";
+import { List } from "@webiny/admin-ui";
+
+const WithDescriptionsExample = () => {
+    return (
+        <List>
+            <List.Item
+                title="User Profile"
+                description="View and edit your profile information"
+            />
+            <List.Item
+                title="Settings"
+                description="Configure application settings"
+            />
+            <List.Item
+                title="Help & Support"
+                description="Get assistance and view documentation"
+            />
+        </List>
+    );
+};
+
+export default WithDescriptionsExample;
+` } } />
+
+### With Icons and Descriptions
+
+<Canvas of={ListStories.WithIconsAndDescriptions} source={ { code: `
+import React from "react";
+import { List } from "@webiny/admin-ui";
+import { ReactComponent as UserIcon } from "@webiny/icons/person.svg";
+import { ReactComponent as SettingsIcon } from "@webiny/icons/settings.svg";
+import { ReactComponent as HelpIcon } from "@webiny/icons/help.svg";
+
+const WithIconsAndDescriptionsExample = () => {
+    return (
+        <List>
+            <List.Item
+                icon={<UserIcon />}
+                title="User Profile"
+                description="View and edit your profile information"
+            />
+            <List.Item
+                icon={<SettingsIcon />}
+                title="Settings"
+                description="Configure application settings"
+            />
+            <List.Item
+                icon={<HelpIcon />}
+                title="Help & Support"
+                description="Get assistance and view documentation"
+            />
+        </List>
+    );
+};
+
+export default WithIconsAndDescriptionsExample;
+` } } />
+
+### Container Variant
+
+<Canvas of={ListStories.WithContainerVariant} source={ { code: `
+import React from "react";
+import { List } from "@webiny/admin-ui";
+import { ReactComponent as UserIcon } from "@webiny/icons/person.svg";
+import { ReactComponent as SettingsIcon } from "@webiny/icons/settings.svg";
+import { ReactComponent as HelpIcon } from "@webiny/icons/help.svg";
+
+const ContainerVariantExample = () => {
+    return (
+        <List variant="container">
+            <List.Item
+                icon={<UserIcon />}
+                title="User Profile"
+                description="View and edit your profile information"
+            />
+            <List.Item
+                icon={<SettingsIcon />}
+                title="Settings"
+                description="Configure application settings"
+            />
+            <List.Item
+                icon={<HelpIcon />}
+                title="Help & Support"
+                description="Get assistance and view documentation"
+            />
+        </List>
+    );
+};
+
+export default ContainerVariantExample;
+` } } />
+
+### Light Background
+
+<Canvas of={ListStories.WithLightBackground} source={ { code: `
+import React from "react";
+import { List } from "@webiny/admin-ui";
+import { ReactComponent as UserIcon } from "@webiny/icons/person.svg";
+import { ReactComponent as SettingsIcon } from "@webiny/icons/settings.svg";
+import { ReactComponent as HelpIcon } from "@webiny/icons/help.svg";
+
+const LightBackgroundExample = () => {
+    return (
+        <List background="light">
+            <List.Item
+                icon={<UserIcon />}
+                title="User Profile"
+                description="View and edit your profile information"
+            />
+            <List.Item
+                icon={<SettingsIcon />}
+                title="Settings"
+                description="Configure application settings"
+            />
+            <List.Item
+                icon={<HelpIcon />}
+                title="Help & Support"
+                description="Get assistance and view documentation"
+            />
+        </List>
+    );
+};
+
+export default LightBackgroundExample;
+` } } />
+
+### Transparent Background
+
+<Canvas of={ListStories.WithTransparentBackground} source={ { code: `
+import React from "react";
+import { List } from "@webiny/admin-ui";
+import { ReactComponent as UserIcon } from "@webiny/icons/person.svg";
+import { ReactComponent as SettingsIcon } from "@webiny/icons/settings.svg";
+import { ReactComponent as HelpIcon } from "@webiny/icons/help.svg";
+
+const TransparentBackgroundExample = () => {
+    return (
+        <div className="wby-bg-neutral-light wby-p-md">
+            <List background="transparent">
+                <List.Item
+                    icon={<UserIcon />}
+                    title="User Profile"
+                    description="View and edit your profile information"
+                />
+                <List.Item
+                    icon={<SettingsIcon />}
+                    title="Settings"
+                    description="Configure application settings"
+                />
+                <List.Item
+                    icon={<HelpIcon />}
+                    title="Help & Support"
+                    description="Get assistance and view documentation"
+                />
+            </List>
+        </div>
+    );
+};
+
+export default TransparentBackgroundExample;
+` } } />
+
+### With Click Handlers
+
+<Canvas of={ListStories.WithClickHandlers} source={ { code: `
+import React from "react";
+import { List } from "@webiny/admin-ui";
+
+const WithClickHandlersExample = () => {
+    return (
+        <List>
+            <List.Item
+                title="User Profile"
+                description="View and edit your profile information"
+                onClick={() => alert("User Profile clicked")}
+            />
+            <List.Item
+                title="Settings"
+                description="Configure application settings"
+                onClick={() => alert("Settings clicked")}
+            />
+            <List.Item
+                title="Help & Support"
+                description="Get assistance and view documentation"
+                onClick={() => alert("Help & Support clicked")}
+            />
+        </List>
+    );
+};
+
+export default WithClickHandlersExample;
+` } } />
+
+### With Selected Item
+
+<Canvas of={ListStories.WithSelectedItem} source={ { code: `
+import React, { useState } from "react";
+import { List } from "@webiny/admin-ui";
+
+const WithSelectedItemExample = () => {
+    const [selectedIndex, setSelectedIndex] = useState(0);
+
+    return (
+        <List>
+            <List.Item
+                title="User Profile"
+                description="View and edit your profile information"
+                selected={selectedIndex === 0}
+                onClick={() => setSelectedIndex(0)}
+            />
+            <List.Item
+                title="Settings"
+                description="Configure application settings"
+                selected={selectedIndex === 1}
+                onClick={() => setSelectedIndex(1)}
+            />
+            <List.Item
+                title="Help & Support"
+                description="Get assistance and view documentation"
+                selected={selectedIndex === 2}
+                onClick={() => setSelectedIndex(2)}
+            />
+        </List>
+    );
+};
+
+export default WithSelectedItemExample;
+` } } />
+
+### With Disabled Item
+
+<Canvas of={ListStories.WithDisabled} source={ { code: `
+import React from "react";
+import { List } from "@webiny/admin-ui";
+
+const WithDisabledItemExample = () => {
+    return (
+        <List>
+            <List.Item
+                title="User Profile"
+                description="View and edit your profile information"
+                onClick={() => alert("User Profile clicked")}
+            />
+            <List.Item
+                title="Settings"
+                description="Configure application settings"
+                disabled={true}
+                onClick={() => alert("This alert won't show because the item is disabled")}
+            />
+            <List.Item
+                title="Help & Support"
+                description="Get assistance and view documentation"
+                onClick={() => alert("Help & Support clicked")}
+            />
+        </List>
+    );
+};
+
+export default WithDisabledItemExample;
+` } } />
+
+### With Activated Item
+
+<Canvas of={ListStories.WithActivated} source={ { code: `
+import React from "react";
+import { List } from "@webiny/admin-ui";
+
+const WithActivatedItemExample = () => {
+    return (
+        <List>
+            <List.Item
+                title="User Profile"
+                description="View and edit your profile information"
+                activated={true}
+                onClick={() => console.log("User Profile clicked")}
+            />
+            <List.Item
+                title="Settings"
+                description="Configure application settings"
+                onClick={() => console.log("Settings clicked")}
+            />
+            <List.Item
+                title="Help & Support"
+                description="Get assistance and view documentation"
+                onClick={() => console.log("Help & Support clicked")}
+            />
+        </List>
+    );
+};
+
+export default WithActivatedItemExample;
+` } } />
+
+### With Avatar
+
+<Canvas of={ListStories.WithAvatar} source={ { code: `
+import React from "react";
+import { List } from "@webiny/admin-ui";
+import { Avatar } from "@webiny/admin-ui";
+
+const WithAvatarExample = () => {
+    return (
+        <List>
+            <List.Item
+                title="List item 1"
+                description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                icon={
+                    <Avatar
+                        image={
+                            <Avatar.Image src="https://i.pravatar.cc/300?img=1" alt="@webiny" />
+                        }
+                        fallback={<Avatar.Fallback>W</Avatar.Fallback>}
+                    />
+                }
+            />
+            <List.Item
+                title="List item 2"
+                description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                icon={
+                    <Avatar
+                        image={
+                            <Avatar.Image src="https://i.pravatar.cc/300?img=2" alt="@webiny" />
+                        }
+                        fallback={<Avatar.Fallback>W</Avatar.Fallback>}
+                    />
+                }
+            />
+        </List>
+    );
+};
+
+export default WithAvatarExample;
+` } } />
+
+### With Handle
+
+<Canvas of={ListStories.WithHandle} source={ { code: `
+import React from "react";
+import { List } from "@webiny/admin-ui";
+
+const WithHandleExample = () => {
+    return (
+        <List>
+            <List.Item
+                title="List Item 1"
+                description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                handle={<List.Item.Handle />}
+            />
+            <List.Item
+                title="List Item 2"
+                description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                handle={<List.Item.Handle />}
+            />
+        </List>
+    );
+};
+
+export default WithHandleExample;
+` } } />
+
+### With Actions
+
+<Canvas of={ListStories.WithActions} source={ { code: `
+import React from "react";
+import { List } from "@webiny/admin-ui";
+import { ReactComponent as EditIcon } from "@webiny/icons/edit.svg";
+import { ReactComponent as TrashIcon } from "@webiny/icons/delete.svg";
+import { ReactComponent as OpenIcon } from "@webiny/icons/visibility.svg";
+import { ReactComponent as MoreIcon } from "@webiny/icons/more_vert.svg";
+import { ReactComponent as ChartIcon } from "@webiny/icons/insert_chart.svg";
+
+const WithActionsExample = () => {
+    return (
+        <List>
+            <List.Item
+                title="List Item 1"
+                description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                icon={<List.Item.Icon icon={<ChartIcon />} label={"Chart"} />}
+                actions={
+                    <>
+                        <List.Item.Action icon={<EditIcon />} />
+                        <List.Item.Action icon={<TrashIcon />} />
+                        <List.Item.Action.Separator />
+                        <List.Item.Action icon={<OpenIcon />} />
+                        <List.Item.Action icon={<MoreIcon />} />
+                    </>
+                }
+            />
+            <List.Item
+                title="List Item 2"
+                description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                icon={<List.Item.Icon icon={<ChartIcon />} label={"Chart"} />}
+                actions={
+                    <>
+                        <List.Item.Action icon={<EditIcon />} />
+                        <List.Item.Action icon={<TrashIcon />} />
+                        <List.Item.Action.Separator />
+                        <List.Item.Action icon={<OpenIcon />} />
+                        <List.Item.Action icon={<MoreIcon />} />
+                    </>
+                }
+            />
+        </List>
+    );
+};
+
+export default WithActionsExample;
+` } } />
+
+### With Base Background
+
+<Canvas of={ListStories.WithBaseBackground} source={ { code: `
+import React from "react";
+import { List } from "@webiny/admin-ui";
+
+const WithBaseBackgroundExample = () => {
+    return (
+        <List background="base">
+            <List.Item title="List Item 1" />
+            <List.Item title="List Item 2" />
+            <List.Item title="List Item 3" />
+        </List>
+    );
+};
+
+export default WithBaseBackgroundExample;
+` } } />
+
+### With Underline Variant
+
+<Canvas of={ListStories.WithUnderlineVariant} source={ { code: `
+import React from "react";
+import { List } from "@webiny/admin-ui";
+
+const WithUnderlineVariantExample = () => {
+    return (
+        <List variant="underline">
+            <List.Item title="List Item 1" />
+            <List.Item title="List Item 2" />
+            <List.Item title="List Item 3" />
+        </List>
+    );
+};
+
+export default WithUnderlineVariantExample;
+` } } />
diff --git a/packages/admin-ui/src/List/List.stories.tsx b/packages/admin-ui/src/List/List.stories.tsx
new file mode 100644
index 00000000000..da43f6cc85f
--- /dev/null
+++ b/packages/admin-ui/src/List/List.stories.tsx
@@ -0,0 +1,449 @@
+import React from "react";
+import { ReactComponent as ChartIcon } from "@webiny/icons/insert_chart.svg";
+import { ReactComponent as MoreIcon } from "@webiny/icons/more_vert.svg";
+import { ReactComponent as OpenIcon } from "@webiny/icons/visibility.svg";
+import { ReactComponent as EditIcon } from "@webiny/icons/edit.svg";
+import { ReactComponent as TrashIcon } from "@webiny/icons/delete.svg";
+import { ReactComponent as UserIcon } from "@webiny/icons/person.svg";
+import { ReactComponent as SettingsIcon } from "@webiny/icons/settings.svg";
+import { ReactComponent as HelpIcon } from "@webiny/icons/help.svg";
+import type { Meta, StoryObj } from "@storybook/react";
+import { List, type ListItemProps as BaseListItemProps } from "./List";
+import { Avatar } from "~/Avatar";
+
+const meta: Meta<typeof List> = {
+    title: "Components/List",
+    component: List,
+    parameters: {
+        layout: "padded"
+    }
+};
+
+export default meta;
+
+type Story = StoryObj<typeof List>;
+
+interface ListItemProps extends Omit<BaseListItemProps, "title"> {
+    index: number;
+}
+
+const ListItem = (props: ListItemProps) => {
+    return <List.Item title={`List item ${props.index}`} {...props} />;
+};
+
+export const Default: Story = {
+    args: {
+        children: (
+            <>
+                <ListItem index={1} />
+                <ListItem index={2} />
+                <ListItem index={3} />
+            </>
+        )
+    }
+};
+
+export const WithTransparentBackground: Story = {
+    args: {
+        background: "transparent",
+        children: (
+            <>
+                <List.Item
+                    icon={<UserIcon />}
+                    title="User Profile"
+                    description="View and edit your profile information"
+                />
+                <List.Item
+                    icon={<SettingsIcon />}
+                    title="Settings"
+                    description="Configure application settings"
+                />
+                <List.Item
+                    icon={<HelpIcon />}
+                    title="Help & Support"
+                    description="Get assistance and view documentation"
+                />
+            </>
+        )
+    },
+    decorators: [
+        Story => (
+            <div className="wby-bg-neutral-light wby-p-md">
+                <Story />
+            </div>
+        )
+    ]
+};
+
+export const WithBaseBackground: Story = {
+    args: {
+        ...Default.args,
+        background: "base"
+    }
+};
+
+export const WithLightBackground: Story = {
+    args: {
+        background: "light",
+        children: (
+            <>
+                <List.Item
+                    icon={<UserIcon />}
+                    title="User Profile"
+                    description="View and edit your profile information"
+                />
+                <List.Item
+                    icon={<SettingsIcon />}
+                    title="Settings"
+                    description="Configure application settings"
+                />
+                <List.Item
+                    icon={<HelpIcon />}
+                    title="Help & Support"
+                    description="Get assistance and view documentation"
+                />
+            </>
+        )
+    }
+};
+
+export const WithUnderlineVariant: Story = {
+    args: {
+        ...Default.args,
+        variant: "underline"
+    }
+};
+
+export const WithContainerVariant: Story = {
+    args: {
+        variant: "container",
+        children: (
+            <>
+                <List.Item
+                    icon={<UserIcon />}
+                    title="User Profile"
+                    description="View and edit your profile information"
+                />
+                <List.Item
+                    icon={<SettingsIcon />}
+                    title="Settings"
+                    description="Configure application settings"
+                />
+                <List.Item
+                    icon={<HelpIcon />}
+                    title="Help & Support"
+                    description="Get assistance and view documentation"
+                />
+            </>
+        )
+    },
+    decorators: [
+        Story => (
+            <div className="wby-bg-neutral-light wby-p-md">
+                <Story />
+            </div>
+        )
+    ]
+};
+
+export const WithDescription: Story = {
+    args: {
+        children: (
+            <>
+                <List.Item
+                    title="User Profile"
+                    description="View and edit your profile information"
+                />
+                <List.Item title="Settings" description="Configure application settings" />
+                <List.Item
+                    title="Help & Support"
+                    description="Get assistance and view documentation"
+                />
+            </>
+        )
+    }
+};
+
+export const WithIcon: Story = {
+    args: {
+        children: (
+            <>
+                <List.Item icon={<UserIcon />} title="User Profile" />
+                <List.Item icon={<SettingsIcon />} title="Settings" />
+                <List.Item icon={<HelpIcon />} title="Help & Support" />
+            </>
+        )
+    }
+};
+
+export const WithIconsAndDescriptions: Story = {
+    args: {
+        children: (
+            <>
+                <List.Item
+                    icon={<UserIcon />}
+                    title="User Profile"
+                    description="View and edit your profile information"
+                />
+                <List.Item
+                    icon={<SettingsIcon />}
+                    title="Settings"
+                    description="Configure application settings"
+                />
+                <List.Item
+                    icon={<HelpIcon />}
+                    title="Help & Support"
+                    description="Get assistance and view documentation"
+                />
+            </>
+        )
+    }
+};
+
+export const WithAvatar: Story = {
+    args: {
+        ...Default.args,
+        children: (
+            <>
+                <ListItem
+                    index={1}
+                    description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                    icon={
+                        <Avatar
+                            image={
+                                <Avatar.Image src="https://i.pravatar.cc/300?img=1" alt="@webiny" />
+                            }
+                            fallback={<Avatar.Fallback>W</Avatar.Fallback>}
+                        />
+                    }
+                />
+                <ListItem
+                    index={2}
+                    description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                    icon={
+                        <Avatar
+                            image={
+                                <Avatar.Image src="https://i.pravatar.cc/300?img=2" alt="@webiny" />
+                            }
+                            fallback={<Avatar.Fallback>W</Avatar.Fallback>}
+                        />
+                    }
+                />
+            </>
+        )
+    }
+};
+
+export const WithHandle: Story = {
+    args: {
+        ...Default.args,
+        children: (
+            <>
+                <ListItem
+                    index={1}
+                    description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                    handle={<List.Item.Handle />}
+                />
+                <ListItem
+                    index={2}
+                    description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                    handle={<List.Item.Handle />}
+                />
+            </>
+        )
+    }
+};
+
+export const WithActions: Story = {
+    ...Default,
+    args: {
+        children: (
+            <>
+                <ListItem
+                    index={1}
+                    description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                    icon={<List.Item.Icon icon={<ChartIcon />} label={"Chart"} />}
+                    actions={
+                        <>
+                            <List.Item.Action icon={<EditIcon />} />
+                            <List.Item.Action icon={<TrashIcon />} />
+                            <List.Item.Action.Separator />
+                            <List.Item.Action icon={<OpenIcon />} />
+                            <List.Item.Action icon={<MoreIcon />} />
+                        </>
+                    }
+                />
+                <ListItem
+                    index={2}
+                    description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                    icon={<List.Item.Icon icon={<ChartIcon />} label={"Chart"} />}
+                    actions={
+                        <>
+                            <List.Item.Action icon={<EditIcon />} />
+                            <List.Item.Action icon={<TrashIcon />} />
+                            <List.Item.Action.Separator />
+                            <List.Item.Action icon={<OpenIcon />} />
+                            <List.Item.Action icon={<MoreIcon />} />
+                        </>
+                    }
+                />
+            </>
+        )
+    }
+};
+
+export const WithDisabled: Story = {
+    args: {
+        children: (
+            <>
+                <List.Item
+                    title="User Profile"
+                    description="View and edit your profile information"
+                    onClick={() => alert("User Profile clicked")}
+                />
+                <List.Item
+                    title="Settings"
+                    description="Configure application settings"
+                    disabled={true}
+                    onClick={() => alert("This alert won't show because the item is disabled")}
+                />
+                <List.Item
+                    title="Help & Support"
+                    description="Get assistance and view documentation"
+                    onClick={() => alert("Help & Support clicked")}
+                />
+            </>
+        )
+    }
+};
+
+export const WithActivated: Story = {
+    args: {
+        children: (
+            <>
+                <List.Item
+                    title="User Profile"
+                    description="View and edit your profile information"
+                    activated={true}
+                    onClick={() => console.log("User Profile clicked")}
+                />
+                <List.Item
+                    title="Settings"
+                    description="Configure application settings"
+                    onClick={() => console.log("Settings clicked")}
+                />
+                <List.Item
+                    title="Help & Support"
+                    description="Get assistance and view documentation"
+                    onClick={() => console.log("Help & Support clicked")}
+                />
+            </>
+        )
+    }
+};
+
+export const WithClickHandlers: Story = {
+    args: {
+        children: (
+            <>
+                <List.Item
+                    title="User Profile"
+                    description="View and edit your profile information"
+                    onClick={() => alert("User Profile clicked")}
+                />
+                <List.Item
+                    title="Settings"
+                    description="Configure application settings"
+                    onClick={() => alert("Settings clicked")}
+                />
+                <List.Item
+                    title="Help & Support"
+                    description="Get assistance and view documentation"
+                    onClick={() => alert("Help & Support clicked")}
+                />
+            </>
+        )
+    }
+};
+
+export const WithSelectedItem: Story = {
+    render: () => {
+        // Using render function to handle state
+        const [selectedIndex, setSelectedIndex] = React.useState(0);
+
+        return (
+            <List>
+                <List.Item
+                    title="User Profile"
+                    description="View and edit your profile information"
+                    selected={selectedIndex === 0}
+                    onClick={() => setSelectedIndex(0)}
+                />
+                <List.Item
+                    title="Settings"
+                    description="Configure application settings"
+                    selected={selectedIndex === 1}
+                    onClick={() => setSelectedIndex(1)}
+                />
+                <List.Item
+                    title="Help & Support"
+                    description="Get assistance and view documentation"
+                    selected={selectedIndex === 2}
+                    onClick={() => setSelectedIndex(2)}
+                />
+            </List>
+        );
+    }
+};
+
+export const Documentation: Story = {
+    args: {
+        variant: "underline",
+        background: "base",
+        children: (
+            <>
+                <List.Item
+                    icon={<UserIcon />}
+                    title="User Profile"
+                    description="View and edit your profile information"
+                    onClick={() => console.log("User Profile clicked")}
+                />
+                <List.Item
+                    icon={<SettingsIcon />}
+                    title="Settings"
+                    description="Configure application settings"
+                    onClick={() => console.log("Settings clicked")}
+                />
+                <List.Item
+                    icon={<HelpIcon />}
+                    title="Help & Support"
+                    description="Get assistance and view documentation"
+                    onClick={() => console.log("Help & Support clicked")}
+                />
+            </>
+        )
+    },
+    argTypes: {
+        variant: {
+            control: "select",
+            options: ["underline", "container"],
+            description: "The visual style of the list"
+        },
+        background: {
+            control: "select",
+            options: ["base", "light", "transparent"],
+            description: "The background color of the list"
+        },
+        children: {
+            description: "The content of the list. Please refer to the example code for details.",
+            control: "none"
+        }
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: "This example shows a List with icons, titles, descriptions, and click handlers."
+            }
+        }
+    }
+};
diff --git a/packages/admin-ui/src/List/List.tsx b/packages/admin-ui/src/List/List.tsx
new file mode 100644
index 00000000000..c5c2f6d56a3
--- /dev/null
+++ b/packages/admin-ui/src/List/List.tsx
@@ -0,0 +1,41 @@
+import * as React from "react";
+import { makeDecoratable, withStaticProps, cva, type VariantProps, cn } from "~/utils";
+import { ListItem, type ListItemProps } from "./components";
+
+const listVariants = cva("wby-group wby-w-full", {
+    variants: {
+        variant: {
+            container: "wby-list-variant-container",
+            underline: "wby-list-variant-underline"
+        },
+        background: {
+            base: "wby-list-background-base",
+            light: "wby-list-background-light",
+            transparent: "wby-list-background-transparent"
+        }
+    },
+    defaultVariants: {
+        variant: "underline",
+        background: "base"
+    }
+});
+
+interface ListProps
+    extends VariantProps<typeof listVariants>,
+        Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+    children: React.ReactNode;
+}
+
+const DecoratableList = ({ children, variant, background, className, ...props }: ListProps) => {
+    return (
+        <div {...props} className={cn(listVariants({ variant, background }), className)}>
+            {children}
+        </div>
+    );
+};
+
+const List = withStaticProps(makeDecoratable("List", DecoratableList), {
+    Item: ListItem
+});
+
+export { List, type ListProps, type ListItemProps };
diff --git a/packages/admin-ui/src/List/components/ListItem.tsx b/packages/admin-ui/src/List/components/ListItem.tsx
new file mode 100644
index 00000000000..d5564fc12c4
--- /dev/null
+++ b/packages/admin-ui/src/List/components/ListItem.tsx
@@ -0,0 +1,110 @@
+import * as React from "react";
+import { cn, cva, makeDecoratable, withStaticProps, type VariantProps } from "~/utils";
+import { Text } from "~/Text";
+import { ListItemAction } from "./ListItemAction";
+import { ListItemHandle } from "./ListItemHandle";
+import { ListItemIcon } from "./ListItemIcon";
+
+const listItemVariant = cva(
+    [
+        "wby-w-full wby-flex wby-items-center",
+        "group-[.wby-list-background-base]:wby-bg-neutral-base",
+        "group-[.wby-list-background-light]:wby-bg-neutral-light",
+        "group-[.wby-list-variant-container]:wby-rounded-sm",
+        "group-[.wby-list-variant-underline]:wby-border-b-sm group-[.wby-list-variant-underline]:wby-border-b-neutral-dimmed",
+        "hover:!wby-bg-neutral-dimmed",
+        "focus-visible:wby-outline-none focus-visible:wby-ring-sm focus-visible:wby-ring-inset focus-visible:wby-ring-primary-dimmed"
+    ],
+    {
+        variants: {
+            disabled: {
+                true: "wby-pointer-events-none wby-opacity-50"
+            },
+            activated: {
+                true: "!wby-bg-neutral-light"
+            },
+            selected: {
+                true: "!wby-bg-neutral-light"
+            },
+            clickable: {
+                true: "wby-cursor-pointer"
+            }
+        }
+    }
+);
+
+interface ListItemProps
+    extends Omit<React.HTMLAttributes<HTMLDivElement>, "title">,
+        VariantProps<typeof listItemVariant> {
+    title: React.ReactNode;
+    actions?: React.ReactNode;
+    description?: React.ReactNode;
+    handle?: React.ReactNode;
+    icon?: React.ReactNode;
+}
+
+const DecoratableListItem = ({
+    actions,
+    children,
+    className,
+    description,
+    activated,
+    disabled,
+    selected,
+    handle,
+    icon,
+    onClick,
+    title,
+    ...props
+}: ListItemProps) => {
+    return (
+        <div
+            {...props}
+            tabIndex={0}
+            className={cn(
+                listItemVariant({ disabled, activated, selected, clickable: Boolean(onClick) }),
+                className
+            )}
+        >
+            {handle}
+            <div
+                className={
+                    "wby-w-full wby-flex wby-justify-between wby-items-center wby-pl-lg wby-pr-md wby-py-sm-extra"
+                }
+            >
+                <div
+                    className={"wby-w-full wby-flex wby-items-center wby-gap-md"}
+                    onClick={onClick}
+                >
+                    {icon && <div>{icon}</div>}
+                    <div
+                        className={"wby-flex wby-flex-col wby-gap-xxs wby-flex-grow wby-text-left"}
+                    >
+                        <Text
+                            size={"md"}
+                            as={"div"}
+                            className={"wby-font-semibold wby-text-neutral-primary"}
+                        >
+                            {title}
+                        </Text>
+                        <Text size={"sm"} as={"div"} className={"wby-text-neutral-strong"}>
+                            {description}
+                        </Text>
+                    </div>
+                </div>
+                {actions && (
+                    <div className={"wby-flex wby-items-center wby-gap-xs-plus"}>{actions}</div>
+                )}
+            </div>
+            {children}
+        </div>
+    );
+};
+
+const ListItem = withStaticProps(makeDecoratable("ListItem", DecoratableListItem), {
+    Action: ListItemAction,
+    Handle: ListItemHandle,
+    Icon: ListItemIcon
+});
+
+export { ListItem, type ListItemProps };
diff --git a/packages/admin-ui/src/List/components/ListItemAction.tsx b/packages/admin-ui/src/List/components/ListItemAction.tsx
new file mode 100644
index 00000000000..0ff00b59063
--- /dev/null
+++ b/packages/admin-ui/src/List/components/ListItemAction.tsx
@@ -0,0 +1,19 @@
+import * as React from "react";
+import { makeDecoratable, withStaticProps } from "~/utils";
+import { IconButton, IconButtonProps as IconButtonProps } from "~/Button";
+import { ListItemSeparator } from "./ListItemSeparator";
+
+type ListItemActionProps = IconButtonProps;
+
+const DecoratableListItemAction = (props: ListItemActionProps) => {
+    return <IconButton variant={"ghost"} size={"sm"} {...props} />;
+};
+
+const ListItemAction = withStaticProps(
+    makeDecoratable("ListItemAction", DecoratableListItemAction),
+    {
+        Separator: ListItemSeparator
+    }
+);
+
+export { ListItemAction, type ListItemActionProps };
diff --git a/packages/admin-ui/src/List/components/ListItemHandle.tsx b/packages/admin-ui/src/List/components/ListItemHandle.tsx
new file mode 100644
index 00000000000..d814fd87307
--- /dev/null
+++ b/packages/admin-ui/src/List/components/ListItemHandle.tsx
@@ -0,0 +1,26 @@
+import * as React from "react";
+import { ReactComponent as DragHandleIcon } from "@webiny/icons/drag_indicator.svg";
+import { makeDecoratable } from "~/utils";
+import { Icon, IconProps as IconProps } from "~/Icon";
+
+interface ListItemHandleProps extends Omit<IconProps, "icon" | "label"> {
+    icon?: React.ReactElement;
+    label?: string;
+}
+
+const DecoratableListItemHandle = (props: ListItemHandleProps) => {
+    return (
+        <Icon
+            size={"md"}
+            color={"neutral-light"}
+            className={"wby-mx-xxs wby-cursor-grab"}
+            icon={<DragHandleIcon />}
+            label={"Drag handle"}
+            {...props}
+        />
+    );
+};
+
+const ListItemHandle = makeDecoratable("ListItemHandle", DecoratableListItemHandle);
+
+export { ListItemHandle, type ListItemHandleProps };
diff --git a/packages/admin-ui/src/List/components/ListItemIcon.tsx b/packages/admin-ui/src/List/components/ListItemIcon.tsx
new file mode 100644
index 00000000000..3b6203ea862
--- /dev/null
+++ b/packages/admin-ui/src/List/components/ListItemIcon.tsx
@@ -0,0 +1,11 @@
+import * as React from "react";
+import { makeDecoratable } from "~/utils";
+import { Icon as IconComponent, IconProps as IconComponentProps } from "~/Icon";
+
+type ListItemIconProps = IconComponentProps;
+
+const DecoratableListItemIcon = (props: ListItemIconProps) => {
+    return <IconComponent size={"md"} color={"inherit"} {...props} />;
+};
+
+export const ListItemIcon = makeDecoratable("ListItemIcon", DecoratableListItemIcon);
diff --git a/packages/admin-ui/src/List/components/ListItemSeparator.tsx b/packages/admin-ui/src/List/components/ListItemSeparator.tsx
new file mode 100644
index 00000000000..5318768e49c
--- /dev/null
+++ b/packages/admin-ui/src/List/components/ListItemSeparator.tsx
@@ -0,0 +1,13 @@
+import * as React from "react";
+import { makeDecoratable } from "~/utils";
+import { Separator, type SeparatorProps } from "~/Separator";
+
+type ListItemSeparatorProps = SeparatorProps;
+
+const DecoratableListItemSeparator = (props: ListItemSeparatorProps) => {
+    return <Separator orientation={"vertical"} className={"wby-h-lg wby-mx-sm-plus"} {...props} />;
+};
+
+const ListItemSeparator = makeDecoratable("ListItemSeparator", DecoratableListItemSeparator);
+
+export { ListItemSeparator, type ListItemSeparatorProps };
diff --git a/packages/admin-ui/src/List/components/index.ts b/packages/admin-ui/src/List/components/index.ts
new file mode 100644
index 00000000000..f86a2929642
--- /dev/null
+++ b/packages/admin-ui/src/List/components/index.ts
@@ -0,0 +1 @@
+export * from "./ListItem";
diff --git a/packages/admin-ui/src/List/index.ts b/packages/admin-ui/src/List/index.ts
new file mode 100644
index 00000000000..870e1dcb494
--- /dev/null
+++ b/packages/admin-ui/src/List/index.ts
@@ -0,0 +1 @@
+export * from "./List";
diff --git a/packages/admin-ui/src/Loader/Loader.mdx b/packages/admin-ui/src/Loader/Loader.mdx
new file mode 100644
index 00000000000..0898ada1a7c
--- /dev/null
+++ b/packages/admin-ui/src/Loader/Loader.mdx
@@ -0,0 +1,326 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+
+import * as LoaderStories from './Loader.stories';
+import * as OverlayLoaderStories from './OverlayLoader.stories';
+
+<Meta title="Components/Loader" />
+
+# Loader
+
+The Loader components provide visual feedback to users when content is loading or an operation is in progress.
+Webiny offers two loader components:
+
+1. -  **Loader** - A standalone circular progress indicator.
+2. -  **OverlayLoader** - The OverlayLoader covers its parent container with a semi-transparent overlay, typically used to indicate a loading state while keeping the background content visible but inactive. Please refer below for more examples.
+
+## Loader
+
+The Loader component displays a circular progress indicator that can be used to show loading states or progress of operations.
+
+<Canvas of={LoaderStories.Documentation} source={ { code: `
+import React from "react";
+import { Loader } from "@webiny/admin-ui";
+
+const LoaderExample = () => {
+    return (
+        <div className="wby-flex wby-flex-col wby-items-center wby-gap-4">
+            <Loader
+                size="md"
+                variant="accent"
+                indeterminate={true}
+                text="Loading..."
+            />
+        </div>
+    );
+};
+
+export default LoaderExample;
+
+` } }
+    additionalActions={[
+        {
+            title: 'Open in GitHub',
+            onClick: () => {
+                window.open(
+                    'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Loader/Loader.tsx',
+                    '_blank'
+                );
+            },
+        }
+    ]}
+/>
+
+<Controls of={LoaderStories.Documentation} />
+
+```tsx
+import React from "react";
+import { Loader } from "@webiny/admin-ui";
+
+const LoaderExample = () => {
+    return (
+        <div className="wby-flex wby-flex-col wby-items-center wby-gap-4">
+            <Loader
+                size="md"
+                variant="accent"
+                indeterminate={true}
+                text="Loading..."
+            />
+        </div>
+    );
+};
+
+export default LoaderExample;
+```
+
+### Loader Sizes
+
+The Loader component supports four different sizes: xs, sm, md, and lg.
+
+<Canvas of={LoaderStories.ExtraSmall} source={ { code: `
+import React from "react";
+import { Loader } from "@webiny/admin-ui";
+
+const ExtraSmallLoaderExample = () => (
+    <Loader size="xs" />
+);
+
+export default ExtraSmallLoaderExample;
+` } } />
+
+<Canvas of={LoaderStories.Small} source={ { code: `
+import React from "react";
+import { Loader } from "@webiny/admin-ui";
+
+const SmallLoaderExample = () => (
+    <Loader size="sm" />
+);
+
+export default SmallLoaderExample;
+` } } />
+
+<Canvas of={LoaderStories.Medium} source={ { code: `
+import React from "react";
+import { Loader } from "@webiny/admin-ui";
+
+const MediumLoaderExample = () => (
+    <Loader size="md" />
+);
+
+export default MediumLoaderExample;
+` } } />
+
+<Canvas of={LoaderStories.Large} source={ { code: `
+import React from "react";
+import { Loader } from "@webiny/admin-ui";
+
+const LargeLoaderExample = () => (
+    <Loader size="lg" />
+);
+
+export default LargeLoaderExample;
+` } } />
+
+### Loader Variants
+
+The Loader component supports three different visual variants: accent, subtle, and negative.
+
+<Canvas of={LoaderStories.Accent} source={ { code: `
+import React from "react";
+import { Loader } from "@webiny/admin-ui";
+
+const AccentLoaderExample = () => (
+    <Loader variant="accent" />
+);
+
+export default AccentLoaderExample;
+` } } />
+
+<Canvas of={LoaderStories.Subtle} source={ { code: `
+import React from "react";
+import { Loader } from "@webiny/admin-ui";
+
+const SubtleLoaderExample = () => (
+    <Loader variant="subtle" />
+);
+
+export default SubtleLoaderExample;
+` } } />
+
+<Canvas of={LoaderStories.Negative} source={ { code: `
+import React from "react";
+import { Loader } from "@webiny/admin-ui";
+
+const NegativeLoaderExample = () => (
+    <div className="wby-bg-primary wby-p-md wby-rounded-md">
+        <Loader variant="negative" />
+    </div>
+);
+
+export default NegativeLoaderExample;
+` } } />
+
+### Controlled Progress
+
+You can use the Loader component to display determinate progress by setting the `indeterminate` prop to `false` and providing a `value`.
+
+<Canvas of={LoaderStories.WithControlledValue} source={ { code: `
+import React, { useState, useEffect } from "react";
+import { Loader } from "@webiny/admin-ui";
+
+const ControlledProgressExample = () => {
+    const [value, setValue] = useState(0);
+
+    useEffect(() => {
+        const interval = setInterval(() => {
+            setValue((prevValue = 0) => {
+                if (prevValue === 100) {
+                    return prevValue;
+                }
+                return prevValue + 5;
+            });
+        }, 50);
+
+        return () => clearInterval(interval);
+    }, []);
+
+    return (
+        <Loader
+            value={value}
+            indeterminate={false}
+            text={"Loading " + value + "%"}
+        />
+    );
+};
+
+export default ControlledProgressExample;
+` } } />
+
+### Loader with Text
+
+You can add descriptive text below the loader using the `text` prop.
+
+<Canvas of={LoaderStories.WithText} source={ { code: `
+import React from "react";
+import { Loader } from "@webiny/admin-ui";
+
+const LoaderWithTextExample = () => (
+    <Loader text="Loading..." />
+);
+
+export default LoaderWithTextExample;
+` } } />
+
+## OverlayLoader
+
+The OverlayLoader component displays a loader on top of its parent container with a semi-transparent overlay. It's useful for indicating loading states for specific sections of your UI.
+
+<Canvas of={OverlayLoaderStories.Documentation} source={ { code: `
+import React from "react";
+import { OverlayLoader } from "@webiny/admin-ui";
+
+const OverlayLoaderExample = () => {
+    return (
+        <div className="wby-relative wby-h-64 wby-w-full wby-bg-neutral-light wby-rounded-md wby-p-4">
+            <OverlayLoader
+                size="lg"
+                variant="accent"
+                text="Loading content..."
+            />
+            <div className="wby-h-full wby-flex wby-items-center wby-justify-center">
+                <p className="wby-text-neutral-strong">Content is loading...</p>
+            </div>
+        </div>
+    );
+};
+
+export default OverlayLoaderExample;
+
+` } }
+    additionalActions={[
+        {
+            title: 'Open in GitHub',
+            onClick: () => {
+                window.open(
+                    'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Loader/OverlayLoader.tsx',
+                    '_blank'
+                );
+            },
+        }
+    ]}
+/>
+
+<Controls of={OverlayLoaderStories.Documentation} />
+
+```tsx
+import React from "react";
+import { OverlayLoader } from "@webiny/admin-ui";
+
+const DefaultOverlayLoaderExample = () => (
+    <div>
+        <OverlayLoader />
+        The OverlayLoader component covers its parent container with a semi-transparent overlay, typically used to indicate a loading state while keeping the background content visible but inactive.
+    </div>
+);
+
+export default DefaultOverlayLoaderExample;
+```
+
+### Default OverlayLoader
+
+<Canvas of={OverlayLoaderStories.Default} source={ { code: `
+import React from "react";
+import { OverlayLoader } from "@webiny/admin-ui";
+
+const DefaultOverlayLoaderExample = () => (
+    <div>
+        <OverlayLoader />
+        The OverlayLoader component covers its parent container with a semi-transparent overlay, typically used to indicate a loading state while keeping the background content visible but inactive.
+    </div>
+);
+
+export default DefaultOverlayLoaderExample;
+` } } />
+
+### OverlayLoader with Text
+
+<Canvas of={OverlayLoaderStories.CircularProgressWithText} source={ { code: `
+import React from "react";
+import { OverlayLoader } from "@webiny/admin-ui";
+
+const OverlayLoaderWithTextExample = () => (
+    <div>
+        <OverlayLoader text="Loading..." />
+         The OverlayLoader component covers its parent container with a semi-transparent overlay, typically used to indicate a loading state while keeping the background content visible but inactive.
+    </div>
+);
+
+export default OverlayLoaderWithTextExample;
+` } } />
+
+## Anatomy
+
+### Construction
+<img src="/images/storybook/loader/construction.png" alt="Construction"/>
+
+### Style
+<img src="/images/storybook/loader/style.png" alt="Style"/>
+
+### Type
+
+A **determinate** circular loader visually represents progress with a circular arc that fills proportionally based on the completed percentage, providing users with a clear indication of task completion.
+
+An **indeterminate loader** does not display exact progress but continuously animates, signaling that a process is ongoing without a known completion time.
+
+<img src="/images/storybook/loader/type.png" alt="Type"/>
+
+### Size
+<img src="/images/storybook/loader/size.png" alt="Size"/>
+
+### Background Overlay
+<img src="/images/storybook/loader/background-overlay.png" alt="Background Overlay"/>
+
+## Usage
+
+<img src="/images/storybook/loader/usage-1.png" alt="Usage"/>
+
+<img src="/images/storybook/loader/usage-2.png" alt="Usage"/>
\ No newline at end of file
diff --git a/packages/admin-ui/src/Loader/Loader.stories.tsx b/packages/admin-ui/src/Loader/Loader.stories.tsx
new file mode 100644
index 00000000000..7988184b6c8
--- /dev/null
+++ b/packages/admin-ui/src/Loader/Loader.stories.tsx
@@ -0,0 +1,146 @@
+import React, { useState, useEffect } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Loader } from "./Loader";
+
+const meta: Meta<typeof Loader> = {
+    title: "Components/Loader",
+    component: Loader,
+    parameters: {
+        layout: "padded"
+    }
+};
+
+export default meta;
+type Story = StoryObj<typeof Loader>;
+
+export const Documentation: Story = {
+    args: {
+        size: "md",
+        variant: "accent",
+        indeterminate: true,
+        value: 66,
+        min: 0,
+        max: 100,
+        text: "Loading...",
+        className: undefined
+    },
+    argTypes: {
+        size: {
+            description: "Size of the loader",
+            control: "select",
+            options: ["xs", "sm", "md", "lg"]
+        },
+        variant: {
+            description: "Visual style variant of the loader",
+            control: "select",
+            options: ["accent", "subtle", "negative"]
+        },
+        indeterminate: {
+            description: "Whether the loader should show indeterminate progress",
+            control: "boolean"
+        },
+        value: {
+            description: "Current progress value (when not indeterminate)",
+            control: { type: "number", min: 0, max: 100 }
+        },
+        min: {
+            description: "Minimum value for progress calculation",
+            control: "number"
+        },
+        max: {
+            description: "Maximum value for progress calculation",
+            control: "number"
+        },
+        text: {
+            description: "Optional text to display below the loader",
+            control: "text"
+        },
+        className: {
+            description:
+                "Additional CSS class names. You can pass multiple class names, separated by commas or spaces.",
+            control: "none"
+        }
+    }
+};
+
+export const Default: Story = {};
+
+export const ExtraSmall: Story = {
+    args: {
+        size: "xs"
+    }
+};
+
+export const Small: Story = {
+    args: {
+        size: "sm"
+    }
+};
+
+export const Medium: Story = {
+    args: {
+        size: "md"
+    }
+};
+
+export const Large: Story = {
+    args: {
+        size: "lg"
+    }
+};
+
+export const Accent: Story = {
+    args: {
+        variant: "accent"
+    }
+};
+
+export const Subtle: Story = {
+    args: {
+        variant: "subtle"
+    }
+};
+
+export const Negative: Story = {
+    args: {
+        variant: "negative"
+    },
+    decorators: [
+        Story => (
+            <div className="wby-bg-primary wby-p-md wby-rounded-md">
+                <Story />
+            </div>
+        )
+    ]
+};
+
+export const WithControlledValue: Story = {
+    args: {
+        value: 0,
+        indeterminate: false
+    },
+    render: args => {
+        const [value, setValue] = useState(args.value);
+
+        useEffect(() => {
+            const interval = setInterval(() => {
+                setValue((prevValue = 0) => {
+                    if (prevValue === 100) {
+                        return prevValue;
+                    }
+                    return prevValue + 5;
+                });
+            }, 50);
+
+            return () => clearInterval(interval);
+        }, []);
+
+        return <Loader {...args} value={value} text={`Loading ${value}%`} />;
+    }
+};
+
+export const WithText: Story = {
+    args: {
+        text: "Loading..."
+    }
+};
diff --git a/packages/admin-ui/src/Loader/Loader.tsx b/packages/admin-ui/src/Loader/Loader.tsx
new file mode 100644
index 00000000000..67015f8f21c
--- /dev/null
+++ b/packages/admin-ui/src/Loader/Loader.tsx
@@ -0,0 +1,139 @@
+import React, { useState, useEffect } from "react";
+import { Text } from "~/Text";
+import { cn, cva, makeDecoratable, type VariantProps } from "~/utils";
+
+const loaderVariants = cva("wby-relative wby-translate", {
+    variants: {
+        size: {
+            xs: "wby-size-[16px]",
+            sm: "wby-size-[20px]",
+            md: "wby-size-[24px]",
+            lg: "wby-size-[40px]"
+        }
+    },
+    defaultVariants: {
+        size: "md"
+    }
+});
+
+const loaderBaseVariant = cva("wby-stroke ", {
+    variants: {
+        variant: {
+            accent: "wby-opacity-10 wby-text-neutral-primary",
+            subtle: "wby-opacity-10 wby-text-neutral-primary",
+            negative: "wby-opacity-20 wby-text-neutral-light"
+        }
+    },
+    defaultVariants: {
+        variant: "accent"
+    }
+});
+
+const loaderActiveVariant = cva("wby-opacity-100", {
+    variants: {
+        variant: {
+            accent: "wby-text-accent-primary",
+            subtle: "wby-opacity-50 wby-text-neutral-primary",
+            negative: "wby-text-neutral-light"
+        }
+    },
+    defaultVariants: {
+        variant: "accent"
+    }
+});
+
+interface LoaderProps
+    extends React.HTMLAttributes<HTMLDivElement>,
+        VariantProps<typeof loaderVariants>,
+        VariantProps<typeof loaderBaseVariant> {
+    max?: number;
+    value?: number;
+    min?: number;
+    className?: string;
+    indeterminate?: boolean;
+    text?: React.ReactNode;
+}
+
+const DecoratableLoader = ({
+    max = 100,
+    min = 0,
+    value = 66,
+    indeterminate = true,
+    className,
+    size,
+    variant,
+    text,
+    ...props
+}: LoaderProps) => {
+    const circumference = 2 * Math.PI * 45;
+    const percentPx = circumference / 100;
+    const currentPercent = Math.round(((value - min) / (max - min)) * 100);
+
+    const [rotation, setRotation] = useState(0);
+    useEffect(() => {
+        let interval: ReturnType<typeof setInterval>;
+        if (indeterminate) {
+            // Rotate the loader by 10 degrees every 30ms when indeterminate
+            interval = setInterval(() => {
+                setRotation(prev => (prev + 10) % 360);
+            }, 30);
+        } else {
+            setRotation(0);
+        }
+        return () => clearInterval(interval);
+    }, [indeterminate]);
+
+    return (
+        <div {...props} className={"wby-text-center wby-flex wby-flex-col wby-items-center"}>
+            <div className={cn(loaderVariants({ size }), className)}>
+                <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    fill="none"
+                    className="wby-size-full wby-stroke-current"
+                    strokeWidth="12"
+                    viewBox="0 0 100 100"
+                >
+                    <circle
+                        cx="50"
+                        cy="50"
+                        r="44"
+                        strokeDashoffset="0"
+                        className={cn(loaderBaseVariant({ variant }))}
+                        style={{
+                            strokeDasharray: `${circumference}px ${circumference}px`,
+                            transition: "all 1s ease 0s",
+                            transformOrigin: "50px 50px"
+                        }}
+                    />
+                    <circle
+                        cx="50"
+                        cy="50"
+                        r="44"
+                        strokeDashoffset="0"
+                        className={cn(loaderActiveVariant({ variant }))}
+                        style={{
+                            strokeDasharray: `${currentPercent * percentPx}px ${circumference}px`,
+                            transition: indeterminate ? "none" : "500ms ease 0s",
+                            transitionProperty: indeterminate
+                                ? "transform"
+                                : "stroke-dasharray, transform",
+                            transform: indeterminate
+                                ? `rotate(${rotation}deg)` // Rotate when indeterminate
+                                : "rotate(-90deg)",
+                            transformOrigin: "50px 50px"
+                        }}
+                    />
+                </svg>
+            </div>
+            {text && (
+                <Text as={"div"} className={"wby-text-neutral-strong wby-w-full wby-pt-sm-plus"}>
+                    {text}
+                </Text>
+            )}
+        </div>
+    );
+};
+
+const Loader = makeDecoratable("Loader", DecoratableLoader);
+
+export { Loader, type LoaderProps };
diff --git a/packages/admin-ui/src/Loader/OverlayLoader.stories.tsx b/packages/admin-ui/src/Loader/OverlayLoader.stories.tsx
new file mode 100644
index 00000000000..e0149721282
--- /dev/null
+++ b/packages/admin-ui/src/Loader/OverlayLoader.stories.tsx
@@ -0,0 +1,83 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { OverlayLoader } from "./OverlayLoader";
+
+const meta: Meta<typeof OverlayLoader> = {
+    title: "Components/Overlay Loader",
+    component: OverlayLoader,
+    parameters: {
+        layout: "padded"
+    },
+    decorators: [
+        Story => (
+            <div>
+                <Story />
+                The OverlayLoader component covers its parent container with a semi-transparent
+                overlay, typically used to indicate a loading state while keeping the background
+                content visible but inactive.
+            </div>
+        )
+    ]
+};
+
+export default meta;
+type Story = StoryObj<typeof OverlayLoader>;
+
+export const Documentation: Story = {
+    args: {
+        size: "lg",
+        variant: "accent",
+        indeterminate: true,
+        value: 66,
+        min: 0,
+        max: 100,
+        text: "Loading...",
+        className: undefined
+    },
+    argTypes: {
+        size: {
+            description: "Size of the loader",
+            control: "select",
+            options: ["xs", "sm", "md", "lg"]
+        },
+        variant: {
+            description: "Visual style variant of the loader",
+            control: "select",
+            options: ["accent", "subtle", "negative"]
+        },
+        indeterminate: {
+            description: "Whether the loader should show indeterminate progress",
+            control: "boolean"
+        },
+        value: {
+            description: "Current progress value (when not indeterminate)",
+            control: { type: "number", min: 0, max: 100 }
+        },
+        min: {
+            description: "Minimum value for progress calculation",
+            control: "number"
+        },
+        max: {
+            description: "Maximum value for progress calculation",
+            control: "number"
+        },
+        text: {
+            description: "Optional text to display below the loader",
+            control: "text"
+        },
+        className: {
+            description:
+                "Additional CSS class names. You can pass multiple class names, separated by commas or spaces.",
+            control: "none"
+        }
+    }
+};
+
+export const Default: Story = {};
+
+export const CircularProgressWithText: Story = {
+    name: "With text",
+    args: {
+        text: "Loading..."
+    }
+};
diff --git a/packages/admin-ui/src/Loader/OverlayLoader.tsx b/packages/admin-ui/src/Loader/OverlayLoader.tsx
new file mode 100644
index 00000000000..c823201ff84
--- /dev/null
+++ b/packages/admin-ui/src/Loader/OverlayLoader.tsx
@@ -0,0 +1,22 @@
+import React from "react";
+import { Loader, LoaderProps } from "./Loader";
+import { cn, makeDecoratable } from "~/utils";
+
+type OverlayLoaderProps = LoaderProps;
+
+const DecoratableOverlayLoader = ({ className, size = "lg", ...props }: OverlayLoaderProps) => {
+    return (
+        <div
+            className={cn(
+                "wby-w-full wby-h-full wby-absolute wby-inset-0 wby-bg-neutral-base/80 wby-flex wby-items-center wby-justify-center wby-z-30",
+                className
+            )}
+        >
+            <Loader {...props} size={size} />
+        </div>
+    );
+};
+
+const OverlayLoader = makeDecoratable("OverlayLoader", DecoratableOverlayLoader);
+
+export { OverlayLoader, type OverlayLoaderProps };
diff --git a/packages/admin-ui/src/Loader/index.ts b/packages/admin-ui/src/Loader/index.ts
new file mode 100644
index 00000000000..e5bcbbc95fe
--- /dev/null
+++ b/packages/admin-ui/src/Loader/index.ts
@@ -0,0 +1,2 @@
+export * from "./Loader";
+export * from "./OverlayLoader";
diff --git a/packages/admin-ui/src/MultiAutoComplete/MultiAutoComplete.mdx b/packages/admin-ui/src/MultiAutoComplete/MultiAutoComplete.mdx
new file mode 100644
index 00000000000..95cfdd17df9
--- /dev/null
+++ b/packages/admin-ui/src/MultiAutoComplete/MultiAutoComplete.mdx
@@ -0,0 +1,121 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+
+import * as MultiAutoCompleteStories from './MultiAutoComplete.stories';
+
+<Meta of={MultiAutoCompleteStories} />
+
+# MultiAutoComplete
+
+The MultiAutoComplete component is a form control that allows users to select multiple values from a dropdown list of options. It supports both selecting from predefined options and adding custom values, making it ideal for tags, categories, or any scenario where multiple selections are needed.
+
+<Canvas of={MultiAutoCompleteStories.Documentation} source={ { code: `
+
+import React, { useState } from "react";
+import { MultiAutoComplete } from "@webiny/admin-ui";
+
+const MultiAutoCompleteExample = () => {
+const [values, setValues] = useState<string[]>([]);
+const [validation, setValidation] = useState({ isValid: true, message: "" });
+
+    const handleValidation = () => {
+        if (values.length === 0) {
+            setValidation({ isValid: false, message: "Please select at least one option" });
+        } else {
+            setValidation({ isValid: true, message: "" });
+        }
+    };
+
+    const timeZones = [
+        "Eastern Standard Time (EST)",
+        "Central Standard Time (CST)",
+        "Pacific Standard Time (PST)",
+        "Greenwich Mean Time (GMT)",
+    ];
+
+    return (
+        <div>
+            <MultiAutoComplete
+                label="Time Zones"
+                description="Select one or more time zones"
+                placeholder="Search or select time zones"
+                options={timeZones}
+                values={values}
+                onValuesChange={newValues => {
+                    setValues(newValues);
+                    handleValidation();
+                }}
+                validation={validation}
+                allowFreeInput={true}
+                required={true}
+                note="You can add custom time zones if needed"
+            />
+        </div>
+    );
+};
+
+export default MultiAutoCompleteExample;
+
+` } }
+    additionalActions={[
+        {
+            title: 'Open in GitHub',
+            onClick: () => {
+                window.open(
+                    'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/MultiAutoComplete/MultiAutoComplete.tsx',
+                    '_blank'
+                );
+            },
+        }
+    ]}
+/>
+
+<Controls of={MultiAutoCompleteStories.Documentation}/>
+
+## Usage
+
+```tsx
+import React, { useState } from "react";
+import { MultiAutoComplete } from "@webiny/admin-ui";
+
+const MultiAutoCompleteExample = () => {
+const [values, setValues] = useState<string[]>([]);
+const [validation, setValidation] = useState({ isValid: true, message: "" });
+
+    const handleValidation = () => {
+        if (values.length === 0) {
+            setValidation({ isValid: false, message: "Please select at least one option" });
+        } else {
+            setValidation({ isValid: true, message: "" });
+        }
+    };
+
+    const timeZones = [
+        "Eastern Standard Time (EST)",
+        "Central Standard Time (CST)",
+        "Pacific Standard Time (PST)",
+        "Greenwich Mean Time (GMT)"
+    ];
+
+    return (
+        <div>
+            <MultiAutoComplete
+                label="Time Zones"
+                description="Select one or more time zones"
+                placeholder="Search or select time zones"
+                options={timeZones}
+                values={values}
+                onValuesChange={newValues => {
+                    setValues(newValues);
+                    handleValidation();
+                }}
+                validation={validation}
+                allowFreeInput={true}
+                required={true}
+                note="You can add custom time zones if needed"
+            />
+        </div>
+    );
+};
+
+export default MultiAutoCompleteExample;
+```
\ No newline at end of file
diff --git a/packages/admin-ui/src/MultiAutoComplete/MultiAutoComplete.stories.tsx b/packages/admin-ui/src/MultiAutoComplete/MultiAutoComplete.stories.tsx
new file mode 100644
index 00000000000..3b389a3519a
--- /dev/null
+++ b/packages/admin-ui/src/MultiAutoComplete/MultiAutoComplete.stories.tsx
@@ -0,0 +1,205 @@
+import React, { useState, useEffect } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { MultiAutoComplete } from "./MultiAutoComplete";
+
+const meta: Meta<typeof MultiAutoComplete> = {
+    title: "Components/Form/Multi AutoComplete",
+    component: MultiAutoComplete,
+    argTypes: {
+        onValuesChange: { action: "onValuesChange" },
+        onOpenChange: { action: "onOpenChange" },
+        disabled: {
+            control: "boolean",
+            defaultValue: false
+        }
+    },
+    parameters: {
+        layout: "padded"
+    },
+    render: args => {
+        const [values, setValues] = useState(args.values);
+        return <MultiAutoComplete {...args} values={values} onValuesChange={setValues} />;
+    }
+};
+
+export default meta;
+type Story = StoryObj<typeof MultiAutoComplete>;
+
+export const Default: Story = {
+    args: {
+        options: [
+            "Eastern Standard Time (EST)",
+            "Central Standard Time (CST)",
+            "Pacific Standard Time (PST)",
+            "Greenwich Mean Time (GMT)",
+            "Central European Time (CET)",
+            "Central Africa Time (CAT)",
+            "India Standard Time (IST)",
+            "China Standard Time (CST)",
+            "Japan Standard Time (JST)",
+            "Australian Western Standard Time (AWST)",
+            "New Zealand Standard Time (NZST)",
+            "Fiji Time (FJT)",
+            "Argentina Time (ART)",
+            "Bolivia Time (BOT)",
+            "Brasilia Time (BRT)"
+        ]
+    }
+};
+
+export const WithLabel: Story = {
+    args: {
+        ...Default.args,
+        label: "Any field label"
+    }
+};
+
+export const WithRequiredLabel: Story = {
+    args: {
+        ...Default.args,
+        label: "Any field label",
+        required: true
+    }
+};
+
+export const WithDescription: Story = {
+    args: {
+        ...Default.args,
+        description: "Provide the required information for processing your request."
+    }
+};
+
+export const WithNotes: Story = {
+    args: {
+        ...Default.args,
+        note: "Note: Ensure your selection or input is accurate before proceeding."
+    }
+};
+
+export const WithErrors: Story = {
+    args: {
+        ...Default.args,
+        validation: {
+            isValid: false,
+            message: "This field is required."
+        }
+    }
+};
+
+export const Disabled: Story = {
+    args: {
+        ...Default.args,
+        label: "Any field label",
+        disabled: true
+    }
+};
+
+export const FullExample: Story = {
+    args: {
+        ...Default.args,
+        label: "Any field label",
+        required: true,
+        description: "Provide the required information for processing your request.",
+        note: "Note: Ensure your selection or input is accurate before proceeding.",
+        validation: {
+            isValid: false,
+            message: "This field is required."
+        }
+    }
+};
+
+export const Documentation: Story = {
+    render: args => {
+        const [values, setValues] = useState(args.values || []);
+        const [validation, setValidation] = useState({ isValid: true, message: "" });
+
+        // Update validation when values change
+        useEffect(() => {
+            if (args.required && (!values || values.length === 0)) {
+                setValidation({ isValid: false, message: "Please select at least one option" });
+            } else {
+                setValidation({ isValid: true, message: "" });
+            }
+        }, [values, args.required]);
+
+        return (
+            <MultiAutoComplete
+                {...args}
+                values={values}
+                onValuesChange={setValues}
+                validation={validation}
+            />
+        );
+    },
+    args: {
+        label: "Time Zones",
+        description: "Select one or more time zones",
+        placeholder: "Search or select time zones",
+        required: true,
+        allowFreeInput: true,
+        note: "You can add custom time zones if needed",
+        options: [
+            "Eastern Standard Time (EST)",
+            "Central Standard Time (CST)",
+            "Pacific Standard Time (PST)",
+            "Greenwich Mean Time (GMT)"
+        ],
+        values: [],
+        onValuesChange: undefined,
+        disabled: false,
+        validation: undefined,
+        onOpenChange: undefined
+    },
+    argTypes: {
+        label: {
+            description: "Label text for the component",
+            control: "text"
+        },
+        description: {
+            description: "Additional description text displayed below the label",
+            control: "text"
+        },
+        placeholder: {
+            description: "Placeholder text for the input",
+            control: "text"
+        },
+        required: {
+            description: "Marks the field as required when true",
+            control: "boolean"
+        },
+        disabled: {
+            description: "Disables the component when set to true",
+            control: "boolean"
+        },
+        allowFreeInput: {
+            description: "Allows users to add custom values not in the options list",
+            control: "boolean"
+        },
+        note: {
+            description: "Additional note text displayed below the component",
+            control: "text"
+        },
+        options: {
+            description: "Array of options to display in the dropdown",
+            control: "object"
+        },
+        values: {
+            description: "Array of currently selected values",
+            control: "object"
+        },
+        onValuesChange: {
+            description: "Callback fired when selected values change",
+            control: "none"
+        },
+        validation: {
+            description:
+                "Object containing validation state and message. Please refer to the example code for details on usage.",
+            control: "none"
+        },
+        onOpenChange: {
+            description:
+                "Callback triggered when the dropdown opens or closes, allowing you to respond to changes in its open state.",
+            control: "none"
+        }
+    }
+};
diff --git a/packages/admin-ui/src/MultiAutoComplete/MultiAutoComplete.tsx b/packages/admin-ui/src/MultiAutoComplete/MultiAutoComplete.tsx
new file mode 100644
index 00000000000..5dd79158cf9
--- /dev/null
+++ b/packages/admin-ui/src/MultiAutoComplete/MultiAutoComplete.tsx
@@ -0,0 +1,53 @@
+import React, { useMemo } from "react";
+import { makeDecoratable } from "~/utils";
+import { MultiAutoCompletePrimitive, MultiAutoCompletePrimitiveProps } from "./primitives";
+import {
+    FormComponentDescription,
+    FormComponentErrorMessage,
+    FormComponentLabel,
+    FormComponentNote,
+    FormComponentProps
+} from "~/FormComponent";
+
+type MultiAutoCompleteProps = MultiAutoCompletePrimitiveProps & FormComponentProps;
+
+const DecoratableMultiAutoComplete = ({
+    label,
+    description,
+    note,
+    required,
+    disabled,
+    validation,
+    ...props
+}: MultiAutoCompleteProps) => {
+    const { isValid: validationIsValid, message: validationMessage } = validation || {};
+    const invalid = useMemo(() => validationIsValid === false, [validationIsValid]);
+
+    return (
+        <div className={"wby-w-full"}>
+            <FormComponentLabel
+                text={label}
+                required={required}
+                disabled={disabled}
+                invalid={invalid}
+            />
+            <FormComponentDescription text={description} disabled={disabled} />
+            <MultiAutoCompletePrimitive
+                {...props}
+                label={label}
+                disabled={disabled}
+                invalid={invalid}
+            />
+            <FormComponentErrorMessage
+                text={validationMessage}
+                invalid={invalid}
+                disabled={disabled}
+            />
+            <FormComponentNote text={note} disabled={disabled} />
+        </div>
+    );
+};
+
+const MultiAutoComplete = makeDecoratable("MultiAutoComplete", DecoratableMultiAutoComplete);
+
+export { MultiAutoComplete };
diff --git a/packages/admin-ui/src/MultiAutoComplete/domains/ListCache.ts b/packages/admin-ui/src/MultiAutoComplete/domains/ListCache.ts
new file mode 100644
index 00000000000..34d99cf2639
--- /dev/null
+++ b/packages/admin-ui/src/MultiAutoComplete/domains/ListCache.ts
@@ -0,0 +1,78 @@
+import { makeAutoObservable, runInAction, toJS } from "mobx";
+
+export type Constructor<T> = new (...args: any[]) => T;
+
+export interface IListCachePredicate<T> {
+    (item: T): boolean;
+}
+
+export interface IListCacheItemUpdater<T> {
+    (item: T): T;
+}
+
+export interface IListCache<T> {
+    count(): number;
+    clear(): void;
+    hasItems(): boolean;
+    getItems(predicate?: IListCachePredicate<T>): T[];
+    getItem(predicate: IListCachePredicate<T>): T | undefined;
+    addItems(items: T[]): void;
+    updateItems(updater: IListCacheItemUpdater<T>): void;
+    removeItems(predicate: IListCachePredicate<T>): void;
+}
+
+export class ListCache<T> implements IListCache<T> {
+    private state: T[];
+
+    constructor() {
+        this.state = [];
+
+        makeAutoObservable(this);
+    }
+
+    count() {
+        return this.state.length;
+    }
+
+    clear() {
+        runInAction(() => {
+            this.state = [];
+        });
+    }
+
+    hasItems() {
+        return this.state.length > 0;
+    }
+
+    getItems(predicate?: IListCachePredicate<T>): T[] {
+        if (predicate) {
+            return [...this.state.filter(item => predicate(item)).map(item => toJS(item))];
+        }
+
+        return [...this.state.map(item => toJS(item))];
+    }
+
+    getItem(predicate: IListCachePredicate<T>): T | undefined {
+        const item = this.state.find(item => predicate(item));
+
+        return item ? toJS(item) : undefined;
+    }
+
+    addItems(items: T[]) {
+        runInAction(() => {
+            this.state = [...this.state, ...items];
+        });
+    }
+
+    updateItems(updater: IListCacheItemUpdater<T>) {
+        runInAction(() => {
+            this.state = [...this.state.map(item => updater(item))];
+        });
+    }
+
+    removeItems(predicate: IListCachePredicate<T>) {
+        runInAction(() => {
+            this.state = this.state.filter(item => !predicate(item));
+        });
+    }
+}
diff --git a/packages/admin-ui/src/MultiAutoComplete/domains/MultiAutoCompleteOption.ts b/packages/admin-ui/src/MultiAutoComplete/domains/MultiAutoCompleteOption.ts
new file mode 100644
index 00000000000..3cf3c829c36
--- /dev/null
+++ b/packages/admin-ui/src/MultiAutoComplete/domains/MultiAutoCompleteOption.ts
@@ -0,0 +1,3 @@
+import { MultiAutoCompleteOptionDto } from "./MultiAutoCompleteOptionDto";
+
+export type MultiAutoCompleteOption = MultiAutoCompleteOptionDto | string;
diff --git a/packages/admin-ui/src/MultiAutoComplete/domains/MultiAutoCompleteOptionDto.ts b/packages/admin-ui/src/MultiAutoComplete/domains/MultiAutoCompleteOptionDto.ts
new file mode 100644
index 00000000000..175eba24bd6
--- /dev/null
+++ b/packages/admin-ui/src/MultiAutoComplete/domains/MultiAutoCompleteOptionDto.ts
@@ -0,0 +1,3 @@
+import { CommandOptionDto } from "~/Command";
+
+export type MultiAutoCompleteOptionDto = CommandOptionDto;
diff --git a/packages/admin-ui/src/MultiAutoComplete/domains/index.ts b/packages/admin-ui/src/MultiAutoComplete/domains/index.ts
new file mode 100644
index 00000000000..2a8a1c6d902
--- /dev/null
+++ b/packages/admin-ui/src/MultiAutoComplete/domains/index.ts
@@ -0,0 +1,3 @@
+export * from "./ListCache";
+export * from "./MultiAutoCompleteOption";
+export * from "./MultiAutoCompleteOptionDto";
diff --git a/packages/admin-ui/src/MultiAutoComplete/index.ts b/packages/admin-ui/src/MultiAutoComplete/index.ts
new file mode 100644
index 00000000000..311a209cede
--- /dev/null
+++ b/packages/admin-ui/src/MultiAutoComplete/index.ts
@@ -0,0 +1 @@
+export * from "./MultiAutoComplete";
diff --git a/packages/admin-ui/src/MultiAutoComplete/primitives/MultiAutoCompletePrimitive.stories.tsx b/packages/admin-ui/src/MultiAutoComplete/primitives/MultiAutoCompletePrimitive.stories.tsx
new file mode 100644
index 00000000000..f13f656dbfc
--- /dev/null
+++ b/packages/admin-ui/src/MultiAutoComplete/primitives/MultiAutoCompletePrimitive.stories.tsx
@@ -0,0 +1,517 @@
+import React, { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { ReactComponent as SearchIcon } from "@webiny/icons/search.svg";
+import { MultiAutoCompletePrimitive } from "./MultiAutoCompletePrimitive";
+import { Button } from "~/Button";
+import { Icon } from "~/Icon";
+import { Tag } from "~/Tag";
+
+const meta: Meta<typeof MultiAutoCompletePrimitive> = {
+    title: "Components/Form Primitives/Multi Autocomplete",
+    component: MultiAutoCompletePrimitive,
+    parameters: {
+        layout: "padded"
+    },
+    argTypes: {
+        onValuesChange: { action: "onValuesChange" },
+        onOpenChange: { action: "onOpenChange" },
+        disabled: {
+            control: {
+                type: "boolean"
+            }
+        }
+    },
+    render: args => {
+        const [values, setValues] = useState(args.values);
+        return (
+            <div className={"wby-w-full"}>
+                <MultiAutoCompletePrimitive {...args} values={values} onValuesChange={setValues} />
+                <div className={"wby-mt-4 wby-text-center"}>Current selected values: {values}</div>
+            </div>
+        );
+    }
+};
+
+export default meta;
+
+type Story = StoryObj<typeof MultiAutoCompletePrimitive>;
+
+export const Default: Story = {
+    args: {
+        options: [
+            "Eastern Standard Time (EST)",
+            "Central Standard Time (CST)",
+            "Pacific Standard Time (PST)",
+            "Greenwich Mean Time (GMT)",
+            "Central European Time (CET)",
+            "Central Africa Time (CAT)",
+            "India Standard Time (IST)",
+            "China Standard Time (CST)",
+            "Japan Standard Time (JST)",
+            "Australian Western Standard Time (AWST)",
+            "New Zealand Standard Time (NZST)",
+            "Fiji Time (FJT)",
+            "Argentina Time (ART)",
+            "Bolivia Time (BOT)",
+            "Brasilia Time (BRT)"
+        ]
+    }
+};
+
+export const MediumSize: Story = {
+    args: {
+        ...Default.args,
+        size: "md"
+    }
+};
+
+export const LargeSize: Story = {
+    args: {
+        ...Default.args,
+        size: "lg"
+    }
+};
+
+export const ExtraLargeSize: Story = {
+    args: {
+        ...Default.args,
+        size: "xl"
+    }
+};
+
+export const WithStartIcon: Story = {
+    args: {
+        ...Default.args,
+        startIcon: <Icon label={"Search"} icon={<SearchIcon />} />
+    }
+};
+
+export const WithLoading: Story = {
+    args: {
+        ...Default.args,
+        loading: true
+    }
+};
+
+export const WithoutResetAction: Story = {
+    args: {
+        ...Default.args,
+        displayResetAction: false
+    }
+};
+
+export const PrimaryVariant: Story = {
+    args: {
+        ...Default.args,
+        variant: "primary"
+    }
+};
+
+export const PrimaryVariantDisabled: Story = {
+    args: {
+        ...PrimaryVariant.args,
+        disabled: true
+    }
+};
+
+export const PrimaryVariantInvalid: Story = {
+    args: {
+        ...PrimaryVariant.args,
+        invalid: true
+    }
+};
+
+export const SecondaryVariant: Story = {
+    args: {
+        variant: "secondary",
+        placeholder: "Custom placeholder"
+    }
+};
+
+export const SecondaryVariantDisabled: Story = {
+    args: {
+        ...SecondaryVariant.args,
+        disabled: true
+    }
+};
+
+export const SecondaryVariantInvalid: Story = {
+    args: {
+        ...SecondaryVariant.args,
+        invalid: true
+    }
+};
+
+export const GhostVariant: Story = {
+    args: {
+        variant: "ghost",
+        placeholder: "Custom placeholder"
+    }
+};
+
+export const GhostVariantDisabled: Story = {
+    args: {
+        ...GhostVariant.args,
+        disabled: true
+    }
+};
+
+export const GhostVariantInvalid: Story = {
+    args: {
+        ...GhostVariant.args,
+        invalid: true
+    }
+};
+
+export const WithPredefinedValue: Story = {
+    args: {
+        ...Default.args,
+        values: ["Eastern Standard Time (EST)"]
+    }
+};
+
+export const WithCustomPlaceholder: Story = {
+    args: {
+        ...Default.args,
+        placeholder: "Custom placeholder"
+    }
+};
+
+export const WithCustomEmptyMessage: Story = {
+    args: {
+        ...Default.args,
+        emptyMessage: "Custom empty message"
+    }
+};
+
+export const WithCustomInitialMessage: Story = {
+    args: {
+        ...Default.args,
+        initialMessage: "Custom initial message.",
+        options: []
+    }
+};
+
+export const WithAllowFreeInput: Story = {
+    args: {
+        ...Default.args,
+        allowFreeInput: true
+    }
+};
+
+export const WithUniqueValues: Story = {
+    args: {
+        ...Default.args,
+        uniqueValues: true,
+        options: [
+            { label: "Eastern Standard Time (EST)", value: "est" },
+            { label: "Central Standard Time (CST)", value: "cst" },
+            { label: "Pacific Standard Time (PST)", value: "pst" }
+        ]
+    }
+};
+
+export const WithFormattedOptions: Story = {
+    args: {
+        ...Default.args,
+        options: [
+            { label: "Eastern Standard Time (EST)", value: "est" },
+            { label: "Central Standard Time (CST)", value: "cst" },
+            { label: "Pacific Standard Time (PST)", value: "pst" },
+            { label: "Greenwich Mean Time (GMT)", value: "gmt" },
+            { label: "Central European Time (CET)", value: "cet" },
+            { label: "Central Africa Time (CAT)", value: "cat" },
+            { label: "India Standard Time (IST)", value: "ist" },
+            { label: "China Standard Time (CST)", value: "cst_china" },
+            { label: "Japan Standard Time (JST)", value: "jst" },
+            { label: "Australian Western Standard Time (AWST)", value: "awst" },
+            { label: "New Zealand Standard Time (NZST)", value: "nzst" },
+            { label: "Fiji Time (FJT)", value: "fjt" },
+            { label: "Argentina Time (ART)", value: "art" },
+            { label: "Bolivia Time (BOT)", value: "bot" },
+            { label: "Brasilia Time (BRT)", value: "brt" }
+        ]
+    }
+};
+
+export const WithCustomOptionRenderer: Story = {
+    args: {
+        ...Default.args,
+        options: [
+            {
+                label: "Eastern Standard Time (EST)",
+                value: "est",
+                item: {
+                    name: "Eastern Standard Time (EST)",
+                    time_difference: "-5:00",
+                    flag: "🇺🇸",
+                    value: "est"
+                }
+            },
+            {
+                label: "Central Standard Time (CST)",
+                value: "cst",
+                item: {
+                    name: "Central Standard Time (CST)",
+                    time_difference: "-6:00",
+                    flag: "🇺🇸",
+                    value: "cst"
+                }
+            },
+            {
+                label: "Pacific Standard Time (PST)",
+                value: "pst",
+                item: {
+                    name: "Pacific Standard Time (PST)",
+                    time_difference: "-8:00",
+                    flag: "🇺🇸",
+                    value: "pst"
+                }
+            },
+            {
+                label: "Greenwich Mean Time (GMT)",
+                value: "gmt",
+                item: {
+                    name: "Greenwich Mean Time (GMT)",
+                    time_difference: "±0:00",
+                    flag: "🇬🇧",
+                    value: "gmt"
+                }
+            },
+            {
+                label: "Central European Time (CET)",
+                value: "cet",
+                item: {
+                    name: "Central European Time (CET)",
+                    time_difference: "+1:00",
+                    flag: "🇪🇺",
+                    value: "cet"
+                }
+            },
+            {
+                label: "Central Africa Time (CAT)",
+                value: "cat",
+                item: {
+                    name: "Central Africa Time (CAT)",
+                    time_difference: "+2:00",
+                    flag: "🇿🇦",
+                    value: "cat"
+                }
+            },
+            {
+                label: "India Standard Time (IST)",
+                value: "ist",
+                item: {
+                    name: "India Standard Time (IST)",
+                    time_difference: "+5:30",
+                    flag: "🇮🇳",
+                    value: "ist"
+                }
+            },
+            {
+                label: "China Standard Time (CST)",
+                value: "cst_china",
+                item: {
+                    name: "China Standard Time (CST)",
+                    time_difference: "+8:00",
+                    flag: "🇨🇳",
+                    value: "cst_china"
+                }
+            },
+            {
+                label: "Japan Standard Time (JST)",
+                value: "jst",
+                item: {
+                    name: "Japan Standard Time (JST)",
+                    time_difference: "+9:00",
+                    flag: "🇯🇵",
+                    value: "jst"
+                }
+            },
+            {
+                label: "Australian Western Standard Time (AWST)",
+                value: "awst",
+                item: {
+                    name: "Australian Western Standard Time (AWST)",
+                    time_difference: "+8:00",
+                    flag: "🇦🇺",
+                    value: "awst"
+                }
+            },
+            {
+                label: "New Zealand Standard Time (NZST)",
+                value: "nzst",
+                item: {
+                    name: "New Zealand Standard Time (NZST)",
+                    time_difference: "+12:00",
+                    flag: "🇳🇿",
+                    value: "nzst"
+                }
+            },
+            {
+                label: "Fiji Time (FJT)",
+                value: "fjt",
+                item: {
+                    name: "Fiji Time (FJT)",
+                    time_difference: "+12:00",
+                    flag: "🇫🇯",
+                    value: "fjt"
+                }
+            },
+            {
+                label: "Argentina Time (ART)",
+                value: "art",
+                item: {
+                    name: "Argentina Time (ART)",
+                    time_difference: "-3:00",
+                    flag: "🇦🇷",
+                    value: "art"
+                }
+            },
+            {
+                label: "Bolivia Time (BOT)",
+                value: "bot",
+                item: {
+                    name: "Bolivia Time (BOT)",
+                    time_difference: "-4:00",
+                    flag: "🇧🇴",
+                    value: "bot"
+                }
+            },
+            {
+                label: "Brasilia Time (BRT)",
+                value: "brt",
+                item: {
+                    name: "Brasilia Time (BRT)",
+                    time_difference: "-3:00",
+                    flag: "🇧🇷",
+                    value: "brt"
+                }
+            }
+        ],
+        optionRenderer: item => {
+            return (
+                <div className={"wby-w-full wby-flex wby-justify-between wby-align-middle"}>
+                    <div>
+                        <span className={"wby-mr-sm"}>{item.flag}</span>
+                        {item.name}
+                    </div>
+                    <div className={"wby-text-sm"}>{item.time_difference}</div>
+                </div>
+            );
+        }
+    }
+};
+
+export const WithCustomSelectedOptionRenderer: Story = {
+    args: {
+        ...WithCustomOptionRenderer.args
+    },
+    render: args => {
+        const [values, setValues] = useState(args.values || []);
+        const selectedOptionRenderer = (item: any) => {
+            return (
+                <Tag
+                    variant={"neutral-base"}
+                    content={
+                        <>
+                            {item.flag} {item.name}
+                        </>
+                    }
+                    onDismiss={() => setValues(values.filter(value => value !== item.value))}
+                />
+            );
+        };
+        return (
+            <div className={"wby-w-full"}>
+                <MultiAutoCompletePrimitive
+                    {...args}
+                    values={values}
+                    onValuesChange={setValues}
+                    selectedOptionRenderer={selectedOptionRenderer}
+                />
+                <div className={"wby-mt-4 wby-text-center"}>Current selected values: {values}</div>
+            </div>
+        );
+    }
+};
+
+export const WithSeparators: Story = {
+    args: {
+        ...Default.args,
+        options: [
+            { label: "Eastern Standard Time (EST)", value: "est" },
+            { label: "Central Standard Time (CST)", value: "cst" },
+            { label: "Pacific Standard Time (PST)", value: "pst", separator: true },
+            { label: "Greenwich Mean Time (GMT)", value: "gmt" },
+            { label: "Central European Time (CET)", value: "cet" },
+            { label: "Central Africa Time (CAT)", value: "cat", separator: true },
+            { label: "India Standard Time (IST)", value: "ist" },
+            { label: "China Standard Time (CST)", value: "cst_china" },
+            { label: "Japan Standard Time (JST)", value: "jst", separator: true },
+            { label: "Australian Western Standard Time (AWST)", value: "awst" },
+            { label: "New Zealand Standard Time (NZST)", value: "nzst" },
+            { label: "Fiji Time (FJT)", value: "fjt", separator: true },
+            { label: "Argentina Time (ART)", value: "art" },
+            { label: "Bolivia Time (BOT)", value: "bot" },
+            { label: "Brasilia Time (BRT)", value: "brt" }
+        ]
+    }
+};
+
+export const WithDisabledOptions: Story = {
+    args: {
+        options: [
+            { label: "Eastern Standard Time (EST)", value: "est", disabled: true },
+            { label: "Central Standard Time (CST)", value: "cst", disabled: true },
+            { label: "Pacific Standard Time (PST)", value: "pst", disabled: true },
+            { label: "Greenwich Mean Time (GMT)", value: "gmt" },
+            { label: "Central European Time (CET)", value: "cet" },
+            { label: "Central Africa Time (CAT)", value: "cat" },
+            { label: "India Standard Time (IST)", value: "ist" },
+            { label: "China Standard Time (CST)", value: "cst_china" },
+            { label: "Japan Standard Time (JST)", value: "jst" },
+            { label: "Australian Western Standard Time (AWST)", value: "awst" },
+            { label: "New Zealand Standard Time (NZST)", value: "nzst" },
+            { label: "Fiji Time (FJT)", value: "fjt" },
+            { label: "Argentina Time (ART)", value: "art" },
+            { label: "Bolivia Time (BOT)", value: "bot" },
+            { label: "Brasilia Time (BRT)", value: "brt" }
+        ]
+    }
+};
+
+export const WithExternalValueControl: Story = {
+    args: {
+        ...Default.args,
+        options: [
+            { label: "Eastern Standard Time (EST)", value: "est" },
+            { label: "Central Standard Time (CST)", value: "cst" },
+            { label: "Pacific Standard Time (PST)", value: "pst" },
+            { label: "Greenwich Mean Time (GMT)", value: "gmt" },
+            { label: "Central European Time (CET)", value: "cet" },
+            { label: "Central Africa Time (CAT)", value: "cat" },
+            { label: "India Standard Time (IST)", value: "ist" },
+            { label: "China Standard Time (CST)", value: "cst_china" },
+            { label: "Japan Standard Time (JST)", value: "jst" },
+            { label: "Australian Western Standard Time (AWST)", value: "awst" },
+            { label: "New Zealand Standard Time (NZST)", value: "nzst" },
+            { label: "Fiji Time (FJT)", value: "fjt" },
+            { label: "Argentina Time (ART)", value: "art" },
+            { label: "Bolivia Time (BOT)", value: "bot" },
+            { label: "Brasilia Time (BRT)", value: "brt" }
+        ]
+    },
+    render: args => {
+        const [values, setValues] = useState(args.values);
+        return (
+            <div className={"wby-w-full"}>
+                <MultiAutoCompletePrimitive {...args} values={values} onValuesChange={setValues} />
+                <div className={"wby-mt-4 wby-text-center"}>
+                    <Button text={"Reset"} onClick={() => setValues(args.values)} />
+                </div>
+                <div className={"wby-mt-4 wby-text-center"}>Current selected values: {values}</div>
+            </div>
+        );
+    }
+};
diff --git a/packages/admin-ui/src/MultiAutoComplete/primitives/MultiAutoCompletePrimitive.tsx b/packages/admin-ui/src/MultiAutoComplete/primitives/MultiAutoCompletePrimitive.tsx
new file mode 100644
index 00000000000..cc4e7f034ff
--- /dev/null
+++ b/packages/admin-ui/src/MultiAutoComplete/primitives/MultiAutoCompletePrimitive.tsx
@@ -0,0 +1,214 @@
+import React, { KeyboardEvent } from "react";
+import { Command } from "~/Command";
+import { PopoverPrimitive } from "~/Popover";
+import { InputPrimitiveProps } from "~/Input";
+import { makeDecoratable } from "~/utils";
+import { useMultiAutoComplete } from "./useMultiAutoComplete";
+import {
+    MultiAutoCompleteInput,
+    MultiAutoCompleteInputIcons,
+    MultiAutoCompleteList
+} from "./components";
+import { MultiAutoCompleteOption } from "../domains";
+import { Icon } from "~/Icon";
+
+interface MultiAutoCompletePrimitiveProps {
+    /**
+     * Allows free input of values not present in the options.
+     */
+    allowFreeInput?: boolean;
+    /**
+     * Indicates if the reset action should be displayed.
+     */
+    displayResetAction?: boolean;
+    /**
+     * Indicates if the field is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Message to display when there are no options.
+     */
+    emptyMessage?: React.ReactNode;
+    /**
+     * Indicates if the input field is invalid.
+     * Refer to `InputPrimitiveProps["invalid"]` for possible values.
+     */
+    invalid?: InputPrimitiveProps["invalid"];
+    /**
+     * Message to display when there are no options loaded or selected.
+     * Use it to invite the user to interact with the autocomplete by typing a value.
+     */
+    initialMessage?: React.ReactNode;
+    /**
+     * Accessible label for the command menu. Not shown visibly.
+     */
+    label?: React.ReactNode;
+    /**
+     * Indicates if the autocomplete is loading options.
+     */
+    loading?: boolean;
+    /**
+     * Message to display while loading options.
+     */
+    loadingMessage?: React.ReactNode;
+    /**
+     * Callback triggered when the open state changes.
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Callback triggered when a value has been searched by the user.
+     */
+    onValueSearch?: (value: string) => void;
+    /**
+     * Callback triggered when the values change.
+     */
+    onValuesChange: (values: string[]) => void;
+    /**
+     * Callback triggered to reset the values.
+     */
+    onValuesReset?: () => void;
+    /**
+     * List of options for the autocomplete.
+     */
+    options?: MultiAutoCompleteOption[];
+    /**
+     * Custom renderer for the options.
+     */
+    optionRenderer?: (item: any, index: number) => React.ReactNode;
+    /**
+     * Placeholder text for the input field.
+     */
+    placeholder?: string;
+    /**
+     * Size of the input field.
+     * Refer to `InputPrimitiveProps["size"]` for possible values.
+     */
+    size?: InputPrimitiveProps["size"];
+    /**
+     * Custom renderer for the selected options.
+     */
+    selectedOptionRenderer?: (item: any, index: number) => React.ReactNode;
+    /**
+     * Icon to be displayed at the start of the input field.
+     */
+    startIcon?: React.ReactElement<typeof Icon> | React.ReactElement;
+    /**
+     * Ensures that each value is unique.
+     */
+    uniqueValues?: boolean;
+    /**
+     * Variant of the input field.
+     * Refer to `InputPrimitiveProps["variant"]` for possible values.
+     */
+    variant?: InputPrimitiveProps["variant"];
+    /**
+     * Optional selected items.
+     */
+    values?: string[];
+}
+
+const DecoratableMultiAutoCompletePrimitive = (props: MultiAutoCompletePrimitiveProps) => {
+    const {
+        vm,
+        setListOpenState,
+        setSelectedOption,
+        searchOption,
+        removeSelectedOption,
+        resetSelectedOptions,
+        createOption
+    } = useMultiAutoComplete(props);
+
+    const handleKeyDown = React.useCallback(
+        (event: KeyboardEvent<HTMLDivElement>) => {
+            if (props.disabled) {
+                return;
+            }
+
+            if (!vm.optionsListVm.open) {
+                setListOpenState(true);
+            }
+
+            if (event.key.toLowerCase() === "escape") {
+                setListOpenState(false);
+            }
+        },
+        [props.disabled, setListOpenState, setSelectedOption, vm.optionsListVm.open]
+    );
+
+    const handleSelectOption = React.useCallback(
+        (value: string) => {
+            setSelectedOption(value);
+            setListOpenState(false);
+        },
+        [setSelectedOption, setListOpenState]
+    );
+
+    const handleCreateOption = React.useCallback(
+        (value: string) => {
+            createOption(value);
+            setListOpenState(false);
+        },
+        [createOption, setListOpenState]
+    );
+
+    return (
+        <PopoverPrimitive open={vm.optionsListVm.open} onOpenChange={() => setListOpenState(true)}>
+            <Command label={String(props.label)} onKeyDown={handleKeyDown}>
+                <PopoverPrimitive.Trigger asChild>
+                    <span>
+                        <MultiAutoCompleteInput
+                            value={vm.inputVm.value}
+                            placeholder={vm.inputVm.placeholder}
+                            changeValue={searchOption}
+                            closeList={() => setListOpenState(false)}
+                            openList={() => setListOpenState(true)}
+                            variant={props.variant}
+                            size={props.size}
+                            invalid={props.invalid}
+                            removeSelectedOption={removeSelectedOption}
+                            selectedOptionRenderer={props.selectedOptionRenderer}
+                            selectedOptions={vm.selectedOptionsVm.options}
+                            disabled={props.disabled}
+                            startIcon={props.startIcon}
+                            endIcon={
+                                <MultiAutoCompleteInputIcons
+                                    inputSize={props.size}
+                                    displayResetAction={
+                                        !vm.selectedOptionsVm.empty && vm.inputVm.displayResetAction
+                                    }
+                                    disabled={props.disabled}
+                                    loading={props.loading}
+                                    onResetValue={resetSelectedOptions}
+                                    onOpenChange={() => setListOpenState(!vm.optionsListVm.open)}
+                                />
+                            }
+                        />
+                    </span>
+                </PopoverPrimitive.Trigger>
+                <PopoverPrimitive.Content
+                    style={{ width: "var(--radix-popover-trigger-width)" }}
+                    onOpenAutoFocus={e => e.preventDefault()}
+                >
+                    <MultiAutoCompleteList
+                        emptyMessage={vm.optionsListVm.emptyMessage}
+                        empty={vm.optionsListVm.empty}
+                        loading={props.loading}
+                        loadingMessage={vm.optionsListVm.loadingMessage}
+                        onOptionCreate={handleCreateOption}
+                        onOptionSelect={handleSelectOption}
+                        optionRenderer={props.optionRenderer}
+                        options={vm.optionsListVm.options}
+                        temporaryOption={vm.temporaryOptionVm.option}
+                    />
+                </PopoverPrimitive.Content>
+            </Command>
+        </PopoverPrimitive>
+    );
+};
+
+const MultiAutoCompletePrimitive = makeDecoratable(
+    "MultiAutoCompletePrimitive",
+    DecoratableMultiAutoCompletePrimitive
+);
+
+export { MultiAutoCompletePrimitive, type MultiAutoCompletePrimitiveProps };
diff --git a/packages/admin-ui/src/MultiAutoComplete/primitives/components/MultiAutoCompleteInput.tsx b/packages/admin-ui/src/MultiAutoComplete/primitives/components/MultiAutoCompleteInput.tsx
new file mode 100644
index 00000000000..d478ad0689c
--- /dev/null
+++ b/packages/admin-ui/src/MultiAutoComplete/primitives/components/MultiAutoCompleteInput.tsx
@@ -0,0 +1,136 @@
+import React from "react";
+import { getIconPosition, InputIcon, InputPrimitiveProps, inputVariants } from "~/Input";
+import { Command, CommandOptionFormatted } from "~/Command";
+import { Tag } from "~/Tag";
+import { cn, cva, type VariantProps } from "~/utils";
+
+const multiAutoCompleteInputVariants = cva("wby-relative placeholder:wby-text-neutral-dimmed", {
+    variants: {
+        disabled: {
+            true: "wby-cursor-not-allowed disabled:wby-text-neutral-disabled disabled:placeholder:wby-text-neutral-disabled"
+        }
+    }
+});
+
+type MultiAutoCompleteInputProps = VariantProps<typeof multiAutoCompleteInputVariants> &
+    InputPrimitiveProps & {
+        changeValue: (value: string) => void;
+        closeList: () => void;
+        openList: () => void;
+        placeholder: string;
+        removeSelectedOption: (value: string) => void;
+        selectedOptionRenderer?: (item: any, index: number) => React.ReactNode;
+        selectedOptions: CommandOptionFormatted[];
+        value: string;
+    };
+
+const MultiAutoCompleteInput = ({
+    changeValue,
+    closeList,
+    disabled,
+    endIcon,
+    invalid,
+    openList,
+    placeholder,
+    removeSelectedOption,
+    selectedOptionRenderer,
+    selectedOptions,
+    size,
+    startIcon,
+    value,
+    variant,
+    className,
+    ...props
+}: MultiAutoCompleteInputProps) => {
+    const [focused, setFocused] = React.useState<boolean>(false);
+    const inputRef = React.useRef<HTMLInputElement>(null);
+    const iconPosition = getIconPosition(startIcon, endIcon);
+
+    const renderSelectedOptions = React.useCallback(
+        (options: CommandOptionFormatted[]) => {
+            return options.map((option, index) => {
+                if (selectedOptionRenderer) {
+                    if (!option.item) {
+                        return null;
+                    }
+                    return selectedOptionRenderer.call(this, option.item, index);
+                }
+
+                return (
+                    <Tag
+                        key={`tag-${option.value}-${index}`}
+                        variant={"neutral-light"}
+                        content={option.label}
+                        onDismiss={() => removeSelectedOption(option.value)}
+                    />
+                );
+            });
+        },
+        [selectedOptionRenderer, removeSelectedOption]
+    );
+
+    return (
+        <div
+            {...props}
+            className={cn(
+                inputVariants({
+                    variant,
+                    size,
+                    iconPosition,
+                    invalid
+                }),
+                multiAutoCompleteInputVariants({ disabled }),
+                className
+            )}
+            aria-disabled={disabled}
+            onClick={() => {
+                if (disabled) {
+                    return;
+                }
+                inputRef?.current?.focus();
+                setFocused(true);
+            }}
+            data-disabled={disabled}
+            data-focused={focused}
+        >
+            {startIcon && (
+                <InputIcon
+                    disabled={disabled}
+                    icon={startIcon}
+                    inputSize={size}
+                    position={"start"}
+                />
+            )}
+            <div className="wby-relative wby-flex wby-flex-wrap wby-gap-xs">
+                {renderSelectedOptions(selectedOptions)}
+                <Command.Input
+                    className={"wby-flex-1 wby-bg-transparent wby-border-none wby-outline-none"}
+                    value={value}
+                    onValueChange={changeValue}
+                    placeholder={placeholder}
+                    disabled={disabled}
+                    onBlur={() => {
+                        setFocused(false);
+                        closeList();
+                    }}
+                    onFocus={() => {
+                        setFocused(true);
+                        openList();
+                    }}
+                    inputElement={
+                        <input
+                            type="text"
+                            ref={inputRef}
+                            className={cn(multiAutoCompleteInputVariants({ disabled }))}
+                        />
+                    }
+                />
+            </div>
+            {endIcon && (
+                <InputIcon disabled={disabled} icon={endIcon} inputSize={size} position={"end"} />
+            )}
+        </div>
+    );
+};
+
+export { MultiAutoCompleteInput, type MultiAutoCompleteInputProps };
diff --git a/packages/admin-ui/src/MultiAutoComplete/primitives/components/MultiAutoCompleteInputIcons.tsx b/packages/admin-ui/src/MultiAutoComplete/primitives/components/MultiAutoCompleteInputIcons.tsx
new file mode 100644
index 00000000000..a9459766638
--- /dev/null
+++ b/packages/admin-ui/src/MultiAutoComplete/primitives/components/MultiAutoCompleteInputIcons.tsx
@@ -0,0 +1,44 @@
+import React from "react";
+import { ReactComponent as Close } from "@webiny/icons/close.svg";
+import { ReactComponent as ChevronDown } from "@webiny/icons/keyboard_arrow_down.svg";
+import { IconButton } from "~/Button";
+import { Icon } from "~/Icon";
+import { Loader } from "~/Loader";
+
+interface MultiAutoCompleteInputIconsProps {
+    displayResetAction: boolean;
+    inputSize?: "md" | "lg" | "xl" | null;
+    loading?: boolean;
+    disabled?: boolean;
+    onOpenChange: (open: boolean) => void;
+    onResetValue: () => void;
+}
+
+export const MultiAutoCompleteInputIcons = (props: MultiAutoCompleteInputIconsProps) => {
+    return (
+        <div className={"wby-flex wby-items-center wby-gap-sm"}>
+            {props.loading && <Loader size={props.inputSize === "xl" ? "sm" : "xs"} />}
+            {props.displayResetAction && (
+                <IconButton
+                    size={props.inputSize === "xl" ? "sm" : "xs"} // Map button size based on the input size.
+                    variant={"secondary"}
+                    icon={<Icon icon={<Close />} label={"Reset"} />}
+                    disabled={props.disabled}
+                    onClick={event => {
+                        event.stopPropagation();
+                        props.onResetValue();
+                    }}
+                />
+            )}
+            <Icon
+                size={props.inputSize === "xl" ? "lg" : "sm"} // Map icon size based on the input size.
+                icon={<ChevronDown />}
+                label={"Open list"}
+                onClick={event => {
+                    event.stopPropagation();
+                    props.onOpenChange(true);
+                }}
+            />
+        </div>
+    );
+};
diff --git a/packages/admin-ui/src/MultiAutoComplete/primitives/components/MultiAutoCompleteList.tsx b/packages/admin-ui/src/MultiAutoComplete/primitives/components/MultiAutoCompleteList.tsx
new file mode 100644
index 00000000000..1169881a629
--- /dev/null
+++ b/packages/admin-ui/src/MultiAutoComplete/primitives/components/MultiAutoCompleteList.tsx
@@ -0,0 +1,93 @@
+import React from "react";
+import { CommandOptionFormatted } from "~/Command/domain/CommandOptionFormatted";
+import { Command } from "~/Command";
+
+interface MultiAutoCompleteListProps extends React.ComponentPropsWithoutRef<typeof Command.List> {
+    emptyMessage?: React.ReactNode;
+    empty?: boolean;
+    loading?: boolean;
+    loadingMessage?: React.ReactNode;
+    onOptionCreate?: (value: string) => void;
+    onOptionSelect: (value: string) => void;
+    optionRenderer?: (item: any, index: number) => React.ReactNode;
+    options: CommandOptionFormatted[];
+    temporaryOption?: CommandOptionFormatted;
+}
+
+export const MultiAutoCompleteList = ({
+    emptyMessage,
+    empty,
+    loading,
+    loadingMessage,
+    onOptionCreate,
+    onOptionSelect,
+    optionRenderer,
+    options,
+    temporaryOption,
+    ...props
+}: MultiAutoCompleteListProps) => {
+    const renderOptions = React.useCallback(
+        (items: CommandOptionFormatted[]) => {
+            if (empty && !temporaryOption) {
+                return null;
+            }
+
+            const elements = [
+                <Command.Item key={"dummy-element"} value="-" className="wby-hidden" />
+            ];
+
+            const renderedItems = items.reduce((acc, item, currentIndex) => {
+                acc.push(
+                    <Command.Item
+                        key={`item-${item.value}-${currentIndex}`}
+                        value={item.value}
+                        keywords={[item.label]}
+                        disabled={item.disabled}
+                        selected={item.selected}
+                        onSelect={() => onOptionSelect(item.value)}
+                        onMouseDown={event => event.preventDefault()}
+                    >
+                        {optionRenderer && item.item
+                            ? optionRenderer.call(this, item.item, currentIndex)
+                            : item.label}
+                    </Command.Item>
+                );
+
+                // Conditionally render the separator if `separator` is true
+                if (item.separator) {
+                    acc.push(<Command.Separator key={`separator-${item.value ?? currentIndex}`} />);
+                }
+
+                return acc;
+            }, elements);
+
+            if (temporaryOption?.value) {
+                renderedItems.push(
+                    <Command.Item
+                        key={`temporary-${temporaryOption.value}`}
+                        value={temporaryOption.value}
+                        keywords={[temporaryOption.label]}
+                        disabled={temporaryOption.disabled}
+                        selected={temporaryOption.selected}
+                        onSelect={() => {
+                            onOptionCreate && onOptionCreate(temporaryOption.value);
+                        }}
+                        onMouseDown={event => event.preventDefault()}
+                    >
+                        {`Add "${temporaryOption.label}" as new option`}
+                    </Command.Item>
+                );
+            }
+
+            return renderedItems;
+        },
+        [onOptionSelect, temporaryOption, onOptionCreate, empty, optionRenderer]
+    );
+
+    return (
+        <Command.List {...props}>
+            {loading ? <Command.Loading>{loadingMessage}</Command.Loading> : renderOptions(options)}
+            {!loading && <Command.Empty>{emptyMessage}</Command.Empty>}
+        </Command.List>
+    );
+};
diff --git a/packages/admin-ui/src/MultiAutoComplete/primitives/components/index.ts b/packages/admin-ui/src/MultiAutoComplete/primitives/components/index.ts
new file mode 100644
index 00000000000..dbcd82369d5
--- /dev/null
+++ b/packages/admin-ui/src/MultiAutoComplete/primitives/components/index.ts
@@ -0,0 +1,3 @@
+export * from "./MultiAutoCompleteInput";
+export * from "./MultiAutoCompleteInputIcons";
+export * from "./MultiAutoCompleteList";
diff --git a/packages/admin-ui/src/MultiAutoComplete/primitives/index.ts b/packages/admin-ui/src/MultiAutoComplete/primitives/index.ts
new file mode 100644
index 00000000000..726b0979c3e
--- /dev/null
+++ b/packages/admin-ui/src/MultiAutoComplete/primitives/index.ts
@@ -0,0 +1 @@
+export * from "./MultiAutoCompletePrimitive";
diff --git a/packages/admin-ui/src/MultiAutoComplete/primitives/presenters/MultiAutoCompleteInputPresenter.ts b/packages/admin-ui/src/MultiAutoComplete/primitives/presenters/MultiAutoCompleteInputPresenter.ts
new file mode 100644
index 00000000000..281a0c632ff
--- /dev/null
+++ b/packages/admin-ui/src/MultiAutoComplete/primitives/presenters/MultiAutoCompleteInputPresenter.ts
@@ -0,0 +1,48 @@
+import { makeAutoObservable } from "mobx";
+
+export interface MultiAutoCompleteInputPresenterParams {
+    placeholder?: string;
+    displayResetAction?: boolean;
+}
+
+export interface IMultiAutoCompleteInputPresenter {
+    vm: {
+        placeholder: string;
+        value: string;
+        displayResetAction: boolean;
+    };
+    init: (params: MultiAutoCompleteInputPresenterParams) => void;
+    setValue: (query: string) => void;
+    resetValue: () => void;
+}
+
+export class MultiAutoCompleteInputPresenter implements IMultiAutoCompleteInputPresenter {
+    private searchQuery?: string = undefined;
+    private placeholder?: string = undefined;
+    private displayResetAction = true;
+
+    constructor() {
+        makeAutoObservable(this);
+    }
+
+    init(params?: MultiAutoCompleteInputPresenterParams) {
+        this.placeholder = params?.placeholder;
+        this.displayResetAction = params?.displayResetAction ?? true;
+    }
+
+    get vm() {
+        return {
+            placeholder: this.placeholder || "Start typing or select",
+            value: this.searchQuery || "",
+            displayResetAction: this.displayResetAction
+        };
+    }
+
+    public setValue = (value: string) => {
+        this.searchQuery = value;
+    };
+
+    public resetValue = () => {
+        this.searchQuery = undefined;
+    };
+}
diff --git a/packages/admin-ui/src/MultiAutoComplete/primitives/presenters/MultiAutoCompleteListOptionsPresenter.ts b/packages/admin-ui/src/MultiAutoComplete/primitives/presenters/MultiAutoCompleteListOptionsPresenter.ts
new file mode 100644
index 00000000000..86540474e44
--- /dev/null
+++ b/packages/admin-ui/src/MultiAutoComplete/primitives/presenters/MultiAutoCompleteListOptionsPresenter.ts
@@ -0,0 +1,101 @@
+import { makeAutoObservable } from "mobx";
+import { CommandOption } from "~/Command/domain/CommandOption";
+import { CommandOptionFormatted } from "~/Command/domain/CommandOptionFormatted";
+import { CommandOptionFormatter } from "~/Command/domain/CommandOptionFormatter";
+import { ListCache } from "../../domains";
+
+export interface IMultiAutoCompleteListOptionsPresenterParams {
+    options?: CommandOption[];
+    emptyMessage?: any;
+    loadingMessage?: any;
+    initialMessage?: any;
+}
+
+export interface IMultiAutoCompleteListOptionsPresenter {
+    vm: {
+        options: CommandOptionFormatted[];
+        emptyMessage: any;
+        loadingMessage: any;
+        open: boolean;
+        empty: boolean;
+    };
+    init: (params: IMultiAutoCompleteListOptionsPresenterParams) => void;
+    setListOpenState: (open: boolean) => void;
+    setLoadedOptions: (loaded: boolean) => void;
+    addOption: (option: CommandOption) => void;
+    setSelectedOption: (value: string) => void;
+    removeSelectedOption: (value: string) => void;
+    resetSelectedOptions: () => void;
+}
+
+export class MultiAutoCompleteListOptionsPresenter
+    implements IMultiAutoCompleteListOptionsPresenter
+{
+    private open = false;
+    private loadedOptions = false;
+    private emptyMessage = "No results.";
+    private loadingMessage = "Loading...";
+    private initialMessage = "Start typing to find an option.";
+    private options = new ListCache<CommandOption>();
+
+    constructor() {
+        makeAutoObservable(this);
+    }
+
+    init(params: IMultiAutoCompleteListOptionsPresenterParams) {
+        this.options.clear();
+        params.options && this.options.addItems(params.options);
+        this.emptyMessage = params.emptyMessage || this.emptyMessage;
+        this.loadingMessage = params.loadingMessage || this.loadingMessage;
+        this.initialMessage = params.initialMessage || this.initialMessage;
+    }
+
+    get vm() {
+        return {
+            options: this.options.getItems().map(option => CommandOptionFormatter.format(option)),
+            emptyMessage: this.loadedOptions ? this.emptyMessage : this.initialMessage,
+            loadingMessage: this.loadingMessage,
+            open: this.open,
+            empty: !this.options.hasItems()
+        };
+    }
+
+    setListOpenState = (open: boolean) => {
+        this.open = open;
+    };
+
+    setLoadedOptions = (loaded: boolean) => {
+        this.loadedOptions = loaded;
+    };
+
+    setSelectedOption = (value: string) => {
+        this.options.updateItems(option => {
+            if (option.value === value) {
+                option.selected = true;
+            }
+
+            return option;
+        });
+    };
+
+    removeSelectedOption = (value: string) => {
+        this.options.updateItems(option => {
+            if (option.value === value) {
+                option.selected = false;
+            }
+
+            return option;
+        });
+    };
+
+    resetSelectedOptions = () => {
+        this.options.updateItems(option => {
+            option.selected = false;
+            return option;
+        });
+    };
+
+    addOption = (option: CommandOption) => {
+        this.options.addItems([option]);
+    };
+}
diff --git a/packages/admin-ui/src/MultiAutoComplete/primitives/presenters/MultiAutoCompleteListOptionsPresenterWithUniqueValues.ts b/packages/admin-ui/src/MultiAutoComplete/primitives/presenters/MultiAutoCompleteListOptionsPresenterWithUniqueValues.ts
new file mode 100644
index 00000000000..5f418ec60ea
--- /dev/null
+++ b/packages/admin-ui/src/MultiAutoComplete/primitives/presenters/MultiAutoCompleteListOptionsPresenterWithUniqueValues.ts
@@ -0,0 +1,51 @@
+import { CommandOption } from "~/Command/domain/CommandOption";
+import {
+    IMultiAutoCompleteListOptionsPresenter,
+    IMultiAutoCompleteListOptionsPresenterParams
+} from "./MultiAutoCompleteListOptionsPresenter";
+
+export class MultiAutoCompleteListOptionsPresenterWithUniqueValues
+    implements IMultiAutoCompleteListOptionsPresenter
+{
+    private decoretee: IMultiAutoCompleteListOptionsPresenter;
+
+    constructor(decoretee: IMultiAutoCompleteListOptionsPresenter) {
+        this.decoretee = decoretee;
+    }
+
+    init(params: IMultiAutoCompleteListOptionsPresenterParams) {
+        const options = params.options?.filter(option => !option.selected);
+        this.decoretee.init({
+            ...params,
+            options
+        });
+    }
+
+    get vm() {
+        return this.decoretee.vm;
+    }
+
+    setListOpenState = (open: boolean) => {
+        this.decoretee.setListOpenState(open);
+    };
+
+    setLoadedOptions = (loaded: boolean) => {
+        this.decoretee.setLoadedOptions(loaded);
+    };
+
+    setSelectedOption = (value: string) => {
+        this.decoretee.setSelectedOption(value);
+    };
+
+    removeSelectedOption = (value: string) => {
+        this.decoretee.removeSelectedOption(value);
+    };
+
+    resetSelectedOptions = () => {
+        this.decoretee.resetSelectedOptions();
+    };
+
+    addOption = (option: CommandOption) => {
+        this.decoretee.addOption(option);
+    };
+}
diff --git a/packages/admin-ui/src/MultiAutoComplete/primitives/presenters/MultiAutoCompletePresenter.test.ts b/packages/admin-ui/src/MultiAutoComplete/primitives/presenters/MultiAutoCompletePresenter.test.ts
new file mode 100644
index 00000000000..77c5df5635a
--- /dev/null
+++ b/packages/admin-ui/src/MultiAutoComplete/primitives/presenters/MultiAutoCompletePresenter.test.ts
@@ -0,0 +1,650 @@
+import {
+    IMultiAutoCompletePresenter,
+    MultiAutoCompletePresenter
+} from "./MultiAutoCompletePresenter";
+import { MultiAutoCompleteInputPresenter } from "./MultiAutoCompleteInputPresenter";
+import { MultiAutoCompleteSelectedOptionPresenter } from "./MultiAutoCompleteSelectedOptionsPresenter";
+import { MultiAutoCompleteListOptionsPresenter } from "./MultiAutoCompleteListOptionsPresenter";
+
+describe("MultiAutoCompletePresenter", () => {
+    let presenter: IMultiAutoCompletePresenter;
+    const onValuesChange = jest.fn();
+    const onOpenChange = jest.fn();
+    const onValuesReset = jest.fn();
+
+    beforeEach(() => {
+        const inputPresenter = new MultiAutoCompleteInputPresenter();
+        const selectedOptionsPresenter = new MultiAutoCompleteSelectedOptionPresenter();
+        const optionsListPresenter = new MultiAutoCompleteListOptionsPresenter();
+
+        presenter = new MultiAutoCompletePresenter(
+            inputPresenter,
+            selectedOptionsPresenter,
+            optionsListPresenter
+        );
+    });
+
+    it("should return the compatible `vm.inputVm` based on params", () => {
+        // `placeholder`
+        {
+            presenter.init({ placeholder: "Custom placeholder", onValuesChange });
+            expect(presenter.vm.inputVm.placeholder).toEqual("Custom placeholder");
+        }
+
+        {
+            // default: no params
+            presenter.init({ onValuesChange });
+            expect(presenter.vm.inputVm.placeholder).toEqual("Start typing or select");
+            expect(presenter.vm.inputVm.displayResetAction).toEqual(true);
+        }
+    });
+
+    it("should return the compatible `vm.selectedOptionsVm` based on params", () => {
+        presenter.init({
+            options: ["Option 1", "Option 2", "Option 3"],
+            values: ["Option 1", "Option 2"],
+            onValuesChange
+        });
+        expect(presenter.vm.selectedOptionsVm.options).toEqual([
+            {
+                value: "Option 1",
+                label: "Option 1",
+                disabled: false,
+                selected: true,
+                separator: false,
+                item: null
+            },
+            {
+                value: "Option 2",
+                label: "Option 2",
+                disabled: false,
+                selected: true,
+                separator: false,
+                item: null
+            }
+        ]);
+    });
+
+    it("should return the compatible `vm.selectedOptionsVm` with  no params", () => {
+        presenter.init({ options: ["Option 1", "Option 2"], onValuesChange });
+        expect(presenter.vm.selectedOptionsVm.options).toEqual([]);
+    });
+
+    it("should return the compatible `vm.optionsListVm` based on params", () => {
+        // with `options` as string
+        {
+            presenter.init({ options: ["Option 1", "Option 2"], onValuesChange });
+            expect(presenter.vm.optionsListVm.options).toEqual([
+                {
+                    value: "Option 1",
+                    label: "Option 1",
+                    disabled: false,
+                    selected: false,
+                    separator: false,
+                    item: null
+                },
+                {
+                    value: "Option 2",
+                    label: "Option 2",
+                    disabled: false,
+                    selected: false,
+                    separator: false,
+                    item: null
+                }
+            ]);
+            expect(presenter.vm.optionsListVm.empty).toEqual(false);
+        }
+
+        // with `options` as formatted options
+        {
+            presenter.init({
+                onValuesChange,
+                options: [
+                    {
+                        value: "option-1",
+                        label: "Option 1"
+                    },
+                    {
+                        value: "option-2",
+                        label: "Option 2"
+                    },
+                    {
+                        value: "option-3",
+                        label: "Option 3",
+                        disabled: true
+                    },
+                    {
+                        value: "option-4",
+                        label: "Option 4",
+                        separator: true
+                    },
+                    {
+                        value: "option-5",
+                        label: "Option 5",
+                        item: {
+                            anyKey1: "custom-value",
+                            anyKey2: 2
+                        }
+                    }
+                ]
+            });
+
+            expect(presenter.vm.optionsListVm.options).toEqual([
+                {
+                    value: "option-1",
+                    label: "Option 1",
+                    disabled: false,
+                    selected: false,
+                    separator: false,
+                    item: null
+                },
+                {
+                    value: "option-2",
+                    label: "Option 2",
+                    disabled: false,
+                    selected: false, // `selected` is overwritten by the presenter
+                    separator: false,
+                    item: null
+                },
+                {
+                    value: "option-3",
+                    label: "Option 3",
+                    disabled: true,
+                    selected: false,
+                    separator: false,
+                    item: null
+                },
+                {
+                    value: "option-4",
+                    label: "Option 4",
+                    disabled: false,
+                    selected: false,
+                    separator: true,
+                    item: null
+                },
+                {
+                    value: "option-5",
+                    label: "Option 5",
+                    disabled: false,
+                    selected: false,
+                    separator: false,
+                    item: {
+                        anyKey1: "custom-value",
+                        anyKey2: 2
+                    }
+                }
+            ]);
+            expect(presenter.vm.optionsListVm.empty).toEqual(false);
+        }
+
+        // with `options` and `value`
+        {
+            presenter.init({
+                onValuesChange,
+                options: ["Option 1", "Option 2"],
+                values: ["Option 1"]
+            });
+            expect(presenter.vm.optionsListVm.options).toEqual([
+                {
+                    value: "Option 1",
+                    label: "Option 1",
+                    disabled: false,
+                    selected: true,
+                    separator: false,
+                    item: null
+                },
+                {
+                    value: "Option 2",
+                    label: "Option 2",
+                    disabled: false,
+                    selected: false,
+                    separator: false,
+                    item: null
+                }
+            ]);
+            expect(presenter.vm.optionsListVm.empty).toEqual(false);
+        }
+
+        {
+            // default: no params
+            presenter.init({ onValuesChange });
+            expect(presenter.vm.optionsListVm.options).toEqual([]);
+            expect(presenter.vm.optionsListVm.emptyMessage).toEqual(
+                "Start typing to find an option."
+            );
+            expect(presenter.vm.optionsListVm.loadingMessage).toEqual("Loading...");
+            expect(presenter.vm.optionsListVm.open).toEqual(false);
+            expect(presenter.vm.optionsListVm.empty).toEqual(true);
+        }
+    });
+
+    it("should change the `optionsListVm` and `selectedOptionsVm` when `setSelectedOption` is called", () => {
+        presenter.init({
+            onValuesChange,
+            options: [
+                {
+                    label: "Option 1",
+                    value: "option-1"
+                },
+                {
+                    label: "Option 2",
+                    value: "option-2"
+                }
+            ]
+        });
+
+        expect(presenter.vm.optionsListVm.options).toEqual([
+            {
+                label: "Option 1",
+                value: "option-1",
+                disabled: false,
+                selected: false,
+                separator: false,
+                item: null
+            },
+            {
+                label: "Option 2",
+                value: "option-2",
+                disabled: false,
+                selected: false,
+                separator: false,
+                item: null
+            }
+        ]);
+
+        presenter.setSelectedOption("option-2");
+        expect(onValuesChange).toHaveBeenCalledWith(["option-2"]);
+        expect(presenter.vm.optionsListVm.options).toEqual([
+            {
+                label: "Option 1",
+                value: "option-1",
+                disabled: false,
+                selected: false,
+                separator: false,
+                item: null
+            },
+            {
+                label: "Option 2",
+                value: "option-2",
+                disabled: false,
+                selected: true,
+                separator: false,
+                item: null
+            }
+        ]);
+        expect(presenter.vm.selectedOptionsVm.options).toEqual([
+            {
+                label: "Option 2",
+                value: "option-2",
+                disabled: false,
+                selected: true,
+                separator: false,
+                item: null
+            }
+        ]);
+
+        presenter.setSelectedOption("option-1");
+        expect(onValuesChange).toHaveBeenCalledWith(["option-2", "option-1"]);
+        expect(presenter.vm.optionsListVm.options).toEqual([
+            {
+                label: "Option 1",
+                value: "option-1",
+                disabled: false,
+                selected: true,
+                separator: false,
+                item: null
+            },
+            {
+                label: "Option 2",
+                value: "option-2",
+                disabled: false,
+                selected: true,
+                separator: false,
+                item: null
+            }
+        ]);
+
+        expect(presenter.vm.selectedOptionsVm.options).toEqual([
+            {
+                label: "Option 2",
+                value: "option-2",
+                disabled: false,
+                selected: true,
+                separator: false,
+                item: null
+            },
+            {
+                label: "Option 1",
+                value: "option-1",
+                disabled: false,
+                selected: true,
+                separator: false,
+                item: null
+            }
+        ]);
+    });
+
+    it("should change the `optionsListVm` and `selectedOptionsVm` when `removeSelectedOption` is called", () => {
+        presenter.init({
+            onValuesChange,
+            options: [
+                {
+                    label: "Option 1",
+                    value: "option-1"
+                },
+                {
+                    label: "Option 2",
+                    value: "option-2"
+                }
+            ],
+            values: ["option-2", "option-1"]
+        });
+
+        expect(presenter.vm.optionsListVm.options).toEqual([
+            {
+                label: "Option 1",
+                value: "option-1",
+                disabled: false,
+                selected: true,
+                separator: false,
+                item: null
+            },
+            {
+                label: "Option 2",
+                value: "option-2",
+                disabled: false,
+                selected: true,
+                separator: false,
+                item: null
+            }
+        ]);
+
+        expect(presenter.vm.selectedOptionsVm.options).toEqual([
+            {
+                label: "Option 2",
+                value: "option-2",
+                disabled: false,
+                selected: true,
+                separator: false,
+                item: null
+            },
+            {
+                label: "Option 1",
+                value: "option-1",
+                disabled: false,
+                selected: true,
+                separator: false,
+                item: null
+            }
+        ]);
+
+        presenter.removeSelectedOption("option-2");
+        expect(onValuesChange).toHaveBeenCalledWith(["option-2"]);
+        expect(presenter.vm.optionsListVm.options).toEqual([
+            {
+                label: "Option 1",
+                value: "option-1",
+                disabled: false,
+                selected: true,
+                separator: false,
+                item: null
+            },
+            {
+                label: "Option 2",
+                value: "option-2",
+                disabled: false,
+                selected: false,
+                separator: false,
+                item: null
+            }
+        ]);
+        expect(presenter.vm.selectedOptionsVm.options).toEqual([
+            {
+                label: "Option 1",
+                value: "option-1",
+                disabled: false,
+                selected: true,
+                separator: false,
+                item: null
+            }
+        ]);
+
+        presenter.removeSelectedOption("option-1");
+        expect(onValuesChange).toHaveBeenCalledWith([]);
+        expect(presenter.vm.optionsListVm.options).toEqual([
+            {
+                label: "Option 1",
+                value: "option-1",
+                disabled: false,
+                selected: false,
+                separator: false,
+                item: null
+            },
+            {
+                label: "Option 2",
+                value: "option-2",
+                disabled: false,
+                selected: false,
+                separator: false,
+                item: null
+            }
+        ]);
+        expect(presenter.vm.selectedOptionsVm.options).toEqual([]);
+    });
+
+    it("should set the internal `inputValue` when `setInputValue` is called", () => {
+        presenter.init({ onValuesChange });
+
+        presenter.searchOption("value");
+        expect(presenter.vm.inputVm.value).toEqual("value");
+    });
+
+    it("should set the option as `selected` when the presenter is initialized with a value", () => {
+        presenter.init({
+            onValuesChange,
+            values: ["option-1"],
+            options: [
+                {
+                    label: "Option 1",
+                    value: "option-1"
+                },
+                {
+                    label: "Option 2",
+                    value: "option-2"
+                }
+            ]
+        });
+
+        expect(presenter.vm.optionsListVm.options).toEqual([
+            {
+                label: "Option 1",
+                value: "option-1",
+                disabled: false,
+                selected: true,
+                separator: false,
+                item: null
+            },
+            {
+                label: "Option 2",
+                value: "option-2",
+                disabled: false,
+                selected: false,
+                separator: false,
+                item: null
+            }
+        ]);
+        expect(presenter.vm.selectedOptionsVm.options).toEqual([
+            {
+                label: "Option 1",
+                value: "option-1",
+                disabled: false,
+                selected: true,
+                separator: false,
+                item: null
+            }
+        ]);
+    });
+
+    it("should change the `optionListVm` and `selectedOptionsVm` when `resetSelectedOptions` is called", () => {
+        presenter.init({
+            onValuesChange,
+            onValuesReset,
+            options: [
+                {
+                    label: "Option 1",
+                    value: "option-1"
+                },
+                {
+                    label: "Option 2",
+                    value: "option-2"
+                }
+            ]
+        });
+
+        expect(presenter.vm.optionsListVm.options).toEqual([
+            {
+                label: "Option 1",
+                value: "option-1",
+                disabled: false,
+                selected: false,
+                separator: false,
+                item: null
+            },
+            {
+                label: "Option 2",
+                value: "option-2",
+                disabled: false,
+                selected: false,
+                separator: false,
+                item: null
+            }
+        ]);
+
+        presenter.setSelectedOption("option-1");
+        expect(presenter.vm.optionsListVm.options).toEqual([
+            {
+                label: "Option 1",
+                value: "option-1",
+                disabled: false,
+                selected: true,
+                separator: false,
+                item: null
+            },
+            {
+                label: "Option 2",
+                value: "option-2",
+                disabled: false,
+                selected: false,
+                separator: false,
+                item: null
+            }
+        ]);
+        expect(presenter.vm.selectedOptionsVm.options).toEqual([
+            {
+                label: "Option 1",
+                value: "option-1",
+                disabled: false,
+                selected: true,
+                separator: false,
+                item: null
+            }
+        ]);
+
+        presenter.resetSelectedOptions();
+        expect(presenter.vm.optionsListVm.options).toEqual([
+            {
+                label: "Option 1",
+                value: "option-1",
+                disabled: false,
+                selected: false,
+                separator: false,
+                item: null
+            },
+            {
+                label: "Option 2",
+                value: "option-2",
+                disabled: false,
+                selected: false,
+                separator: false,
+                item: null
+            }
+        ]);
+        expect(presenter.vm.inputVm.value).toEqual("");
+        expect(presenter.vm.selectedOptionsVm.options).toEqual([]);
+
+        expect(onValuesChange).toHaveBeenCalledWith([]);
+        expect(onValuesReset).toHaveBeenCalled();
+    });
+
+    it("should change `listVm` and call `onOpenChange` when `setListOpenState` is called", () => {
+        // let's open it
+        presenter.init({ onValuesChange, onOpenChange });
+        presenter.setListOpenState(true);
+        expect(presenter.vm.optionsListVm.open).toBe(true);
+        expect(onOpenChange).toHaveBeenCalledWith(true);
+
+        // let's close it
+        presenter.setListOpenState(false);
+        expect(presenter.vm.optionsListVm.open).toBe(false);
+        expect(onOpenChange).toHaveBeenCalledWith(false);
+    });
+
+    it("should be able to create new options if `allowFreeInput` is set to true", () => {
+        // This feature is disabled by default
+        presenter.init({ onValuesChange });
+        presenter.searchOption("New Option 1");
+        presenter.createOption("New Option 1");
+        expect(presenter.vm.selectedOptionsVm.empty).toEqual(true);
+        expect(presenter.vm.selectedOptionsVm.options).toEqual([]);
+    });
+
+    it("should not display the reset action if `displayResetAction` is set to `false` and option is selected", () => {
+        presenter.init({
+            onValuesChange,
+            options: [
+                {
+                    label: "Option 1",
+                    value: "option-1"
+                },
+                {
+                    label: "Option 2",
+                    value: "option-2"
+                }
+            ],
+            displayResetAction: false
+        });
+
+        presenter.setSelectedOption("option-2");
+        expect(onValuesChange).toHaveBeenCalledWith(["option-2"]);
+        // `displayResetAction` is set to `false` and option is selected
+        expect(presenter.vm.inputVm.displayResetAction).toEqual(false);
+        expect(presenter.vm.optionsListVm.options).toEqual([
+            {
+                label: "Option 1",
+                value: "option-1",
+                disabled: false,
+                selected: false,
+                separator: false,
+                item: null
+            },
+            {
+                label: "Option 2",
+                value: "option-2",
+                disabled: false,
+                selected: true,
+                separator: false,
+                item: null
+            }
+        ]);
+        expect(presenter.vm.selectedOptionsVm.options).toEqual([
+            {
+                label: "Option 2",
+                value: "option-2",
+                disabled: false,
+                selected: true,
+                separator: false,
+                item: null
+            }
+        ]);
+    });
+});
diff --git a/packages/admin-ui/src/MultiAutoComplete/primitives/presenters/MultiAutoCompletePresenter.ts b/packages/admin-ui/src/MultiAutoComplete/primitives/presenters/MultiAutoCompletePresenter.ts
new file mode 100644
index 00000000000..ee60b0993be
--- /dev/null
+++ b/packages/admin-ui/src/MultiAutoComplete/primitives/presenters/MultiAutoCompletePresenter.ts
@@ -0,0 +1,175 @@
+import { makeAutoObservable } from "mobx";
+import { CommandOption } from "~/Command/domain/CommandOption";
+import { MultiAutoCompleteOption } from "../../domains";
+import { IMultiAutoCompleteInputPresenter } from "./MultiAutoCompleteInputPresenter";
+import { IMultiAutoCompleteSelectedOptionsPresenter } from "./MultiAutoCompleteSelectedOptionsPresenter";
+import { IMultiAutoCompleteListOptionsPresenter } from "./MultiAutoCompleteListOptionsPresenter";
+import { IMultiAutoCompleteTemporaryOptionPresenter } from "./MultiAutoCompleteTemporaryOptionPresenter";
+
+interface MultiAutoCompletePresenterParams {
+    allowFreeInput?: boolean;
+    displayResetAction?: boolean;
+    emptyMessage?: any;
+    loadingMessage?: any;
+    initialMessage?: any;
+    options?: MultiAutoCompleteOption[];
+    placeholder?: string;
+    values?: string[];
+    onValueSearch?: (value: string) => void;
+    onValuesReset?: () => void;
+    onValuesChange: (values: string[]) => void;
+    onOpenChange?: (open: boolean) => void;
+}
+
+interface IMultiAutoCompletePresenter {
+    vm: {
+        inputVm: IMultiAutoCompleteInputPresenter["vm"];
+        selectedOptionsVm: IMultiAutoCompleteSelectedOptionsPresenter["vm"];
+        optionsListVm: IMultiAutoCompleteListOptionsPresenter["vm"];
+        temporaryOptionVm: IMultiAutoCompleteTemporaryOptionPresenter["vm"];
+    };
+    init: (params: MultiAutoCompletePresenterParams) => void;
+    setListOpenState: (open: boolean) => void;
+    searchOption: (value: string) => void;
+    setSelectedOption: (value: string) => void;
+    removeSelectedOption: (value: string) => void;
+    resetSelectedOptions: () => void;
+    createOption: (value: string) => void;
+}
+
+class MultiAutoCompletePresenter implements IMultiAutoCompletePresenter {
+    private params?: MultiAutoCompletePresenterParams = undefined;
+    private inputPresenter: IMultiAutoCompleteInputPresenter;
+    private selectedOptionsPresenter: IMultiAutoCompleteSelectedOptionsPresenter;
+    private optionsListPresenter: IMultiAutoCompleteListOptionsPresenter;
+
+    constructor(
+        inputPresenter: IMultiAutoCompleteInputPresenter,
+        selectedOptionsPresenter: IMultiAutoCompleteSelectedOptionsPresenter,
+        optionsListPresenter: IMultiAutoCompleteListOptionsPresenter
+    ) {
+        this.inputPresenter = inputPresenter;
+        this.selectedOptionsPresenter = selectedOptionsPresenter;
+        this.optionsListPresenter = optionsListPresenter;
+        makeAutoObservable(this);
+    }
+
+    init(params: MultiAutoCompletePresenterParams) {
+        this.params = params;
+
+        this.inputPresenter.init({
+            placeholder: params.placeholder,
+            displayResetAction: params.displayResetAction
+        });
+
+        const listOptions = this.getListOptions(params.options, params.values);
+        this.optionsListPresenter.init({
+            options: listOptions,
+            emptyMessage: params.emptyMessage,
+            loadingMessage: params.loadingMessage,
+            initialMessage: params.initialMessage
+        });
+        this.selectedOptionsPresenter.init({
+            options: this.getSelectedOptions(listOptions, params.values)
+        });
+    }
+
+    get vm() {
+        return {
+            inputVm: this.inputPresenter.vm,
+            selectedOptionsVm: this.selectedOptionsPresenter.vm,
+            optionsListVm: this.optionsListPresenter.vm,
+            temporaryOptionVm: {
+                option: undefined
+            }
+        };
+    }
+
+    setListOpenState = (open: boolean) => {
+        this.optionsListPresenter.setListOpenState(open);
+        this.params?.onOpenChange?.(open);
+    };
+
+    public searchOption = (value: string) => {
+        this.inputPresenter.setValue(value);
+        this.optionsListPresenter.setLoadedOptions(true);
+        this.params?.onValueSearch?.(value);
+    };
+
+    public setSelectedOption = (value: string) => {
+        this.inputPresenter.resetValue();
+        this.optionsListPresenter.setSelectedOption(value);
+
+        const option = this.vm.optionsListVm.options.find(option => option.value === value);
+
+        const commandOption = option
+            ? CommandOption.create(option)
+            : CommandOption.createFromString(value);
+
+        commandOption.selected = true;
+        this.selectedOptionsPresenter.addOption(commandOption);
+
+        this.params?.onValuesChange(this.getSelectedValues());
+    };
+
+    public removeSelectedOption = (value: string) => {
+        this.optionsListPresenter.removeSelectedOption(value);
+        this.selectedOptionsPresenter.removeOption(value);
+
+        this.params?.onValuesChange(this.getSelectedValues());
+    };
+
+    public resetSelectedOptions = () => {
+        this.optionsListPresenter.resetSelectedOptions();
+        this.selectedOptionsPresenter.resetOptions();
+        this.inputPresenter.resetValue();
+
+        this.params?.onValuesChange(this.getSelectedValues());
+        this.params?.onValuesReset?.();
+    };
+
+    public createOption = () => {
+        return;
+    };
+
+    private getListOptions(
+        options: MultiAutoCompleteOption[] = [],
+        values: string[] = []
+    ): CommandOption[] {
+        return options.map(option => {
+            const commandOption =
+                typeof option === "string"
+                    ? CommandOption.createFromString(option)
+                    : CommandOption.create(option);
+
+            commandOption.selected = values.includes(commandOption.value);
+
+            return commandOption;
+        });
+    }
+
+    private getSelectedOptions(
+        commandOptions: CommandOption[],
+        values: string[] = []
+    ): CommandOption[] {
+        return values.map(value => {
+            const option = commandOptions.find(option => option.value === value);
+
+            if (!option) {
+                return CommandOption.createFromString(value);
+            }
+
+            return option;
+        });
+    }
+
+    private getSelectedValues() {
+        return this.selectedOptionsPresenter.vm.options.map(option => option.value);
+    }
+}
+
+export {
+    MultiAutoCompletePresenter,
+    type IMultiAutoCompletePresenter,
+    type MultiAutoCompletePresenterParams
+};
diff --git a/packages/admin-ui/src/MultiAutoComplete/primitives/presenters/MultiAutoCompletePresenterWithFreeInput.test.ts b/packages/admin-ui/src/MultiAutoComplete/primitives/presenters/MultiAutoCompletePresenterWithFreeInput.test.ts
new file mode 100644
index 00000000000..4ab6dd72ef8
--- /dev/null
+++ b/packages/admin-ui/src/MultiAutoComplete/primitives/presenters/MultiAutoCompletePresenterWithFreeInput.test.ts
@@ -0,0 +1,83 @@
+import {
+    IMultiAutoCompletePresenter,
+    MultiAutoCompletePresenter
+} from "./MultiAutoCompletePresenter";
+import { MultiAutoCompleteInputPresenter } from "./MultiAutoCompleteInputPresenter";
+import { MultiAutoCompleteSelectedOptionPresenter } from "./MultiAutoCompleteSelectedOptionsPresenter";
+import { MultiAutoCompleteListOptionsPresenter } from "./MultiAutoCompleteListOptionsPresenter";
+import { MultiAutoCompleteTemporaryOptionPresenter } from "~/MultiAutoComplete/primitives/presenters/MultiAutoCompleteTemporaryOptionPresenter";
+import { MultiAutoCompletePresenterWithFreeInput } from "~/MultiAutoComplete/primitives/presenters/MultiAutoCompletePresenterWithFreeInput";
+
+describe("MultiAutoCompletePresenterWithFreeInput", () => {
+    let presenter: IMultiAutoCompletePresenter;
+    const onValuesChange = jest.fn();
+
+    beforeEach(() => {
+        const inputPresenter = new MultiAutoCompleteInputPresenter();
+        const selectedOptionsPresenter = new MultiAutoCompleteSelectedOptionPresenter();
+        const optionsListPresenter = new MultiAutoCompleteListOptionsPresenter();
+        const temporaryOptionPresenter = new MultiAutoCompleteTemporaryOptionPresenter();
+
+        const decoretee = new MultiAutoCompletePresenter(
+            inputPresenter,
+            selectedOptionsPresenter,
+            optionsListPresenter
+        );
+        presenter = new MultiAutoCompletePresenterWithFreeInput(
+            temporaryOptionPresenter,
+            decoretee
+        );
+    });
+
+    it("should return the compatible `vm.temporaryOptionVm` based on params", () => {
+        // default: no params
+        presenter.init({ onValuesChange });
+        expect(presenter.vm.temporaryOptionVm.option).toEqual(undefined);
+    });
+
+    it("should be able to create new options", () => {
+        presenter.init({ onValuesChange });
+
+        // Let's create the first option
+        presenter.searchOption("New Option 1");
+        presenter.createOption("New Option 1");
+        expect(presenter.vm.selectedOptionsVm.empty).toEqual(false);
+        expect(presenter.vm.selectedOptionsVm.options).toEqual([
+            {
+                label: "New Option 1",
+                value: "New Option 1",
+                disabled: false,
+                selected: true,
+                separator: false,
+                item: null
+            }
+        ]);
+        expect(onValuesChange).toHaveBeenCalledWith(["New Option 1"]);
+        expect(presenter.vm.inputVm.value).toEqual("");
+
+        // Let's create the second option
+        presenter.searchOption("New Option 2");
+        presenter.createOption("New Option 2");
+        expect(presenter.vm.selectedOptionsVm.empty).toEqual(false);
+        expect(presenter.vm.selectedOptionsVm.options).toEqual([
+            {
+                label: "New Option 1",
+                value: "New Option 1",
+                disabled: false,
+                selected: true,
+                separator: false,
+                item: null
+            },
+            {
+                label: "New Option 2",
+                value: "New Option 2",
+                disabled: false,
+                selected: true,
+                separator: false,
+                item: null
+            }
+        ]);
+        expect(onValuesChange).toHaveBeenCalledWith(["New Option 1", "New Option 2"]);
+        expect(presenter.vm.inputVm.value).toEqual("");
+    });
+});
diff --git a/packages/admin-ui/src/MultiAutoComplete/primitives/presenters/MultiAutoCompletePresenterWithFreeInput.ts b/packages/admin-ui/src/MultiAutoComplete/primitives/presenters/MultiAutoCompletePresenterWithFreeInput.ts
new file mode 100644
index 00000000000..6875bf93859
--- /dev/null
+++ b/packages/admin-ui/src/MultiAutoComplete/primitives/presenters/MultiAutoCompletePresenterWithFreeInput.ts
@@ -0,0 +1,64 @@
+import { makeAutoObservable } from "mobx";
+import { IMultiAutoCompleteTemporaryOptionPresenter } from "./MultiAutoCompleteTemporaryOptionPresenter";
+import {
+    IMultiAutoCompletePresenter,
+    MultiAutoCompletePresenterParams
+} from "./MultiAutoCompletePresenter";
+
+class MultiAutoCompletePresenterWithFreeInput implements IMultiAutoCompletePresenter {
+    private temporaryOptionPresenter: IMultiAutoCompleteTemporaryOptionPresenter;
+    private multiAutoCompletePresenter: IMultiAutoCompletePresenter;
+
+    constructor(
+        temporaryOptionPresenter: IMultiAutoCompleteTemporaryOptionPresenter,
+        multiAutoCompletePresenter: IMultiAutoCompletePresenter
+    ) {
+        this.temporaryOptionPresenter = temporaryOptionPresenter;
+        this.multiAutoCompletePresenter = multiAutoCompletePresenter;
+        makeAutoObservable(this);
+    }
+
+    init(params: MultiAutoCompletePresenterParams) {
+        this.multiAutoCompletePresenter.init(params);
+        this.temporaryOptionPresenter.init();
+    }
+
+    get vm() {
+        return {
+            ...this.multiAutoCompletePresenter.vm,
+            temporaryOptionVm: this.temporaryOptionPresenter.vm
+        };
+    }
+
+    setListOpenState = (open: boolean) => {
+        this.multiAutoCompletePresenter.setListOpenState(open);
+    };
+
+    public searchOption = (value: string) => {
+        this.multiAutoCompletePresenter.searchOption(value);
+        this.temporaryOptionPresenter.setOption(value);
+    };
+
+    public setSelectedOption = (value: string) => {
+        this.multiAutoCompletePresenter.setSelectedOption(value);
+    };
+
+    public removeSelectedOption = (value: string) => {
+        this.multiAutoCompletePresenter.removeSelectedOption(value);
+        this.temporaryOptionPresenter.resetOption();
+    };
+
+    public resetSelectedOptions = () => {
+        this.multiAutoCompletePresenter.resetSelectedOptions();
+        this.temporaryOptionPresenter.resetOption();
+    };
+
+    public createOption = (value: string) => {
+        this.multiAutoCompletePresenter.createOption(value);
+        this.multiAutoCompletePresenter.searchOption("");
+        this.multiAutoCompletePresenter.setSelectedOption(value);
+        this.temporaryOptionPresenter.resetOption();
+    };
+}
+
+export { MultiAutoCompletePresenterWithFreeInput };
diff --git a/packages/admin-ui/src/MultiAutoComplete/primitives/presenters/MultiAutoCompleteSelectedOptionsPresenter.ts b/packages/admin-ui/src/MultiAutoComplete/primitives/presenters/MultiAutoCompleteSelectedOptionsPresenter.ts
new file mode 100644
index 00000000000..d5b61eb71c2
--- /dev/null
+++ b/packages/admin-ui/src/MultiAutoComplete/primitives/presenters/MultiAutoCompleteSelectedOptionsPresenter.ts
@@ -0,0 +1,65 @@
+import { makeAutoObservable } from "mobx";
+import { CommandOptionFormatted } from "~/Command/domain/CommandOptionFormatted";
+import { CommandOptionFormatter } from "~/Command/domain/CommandOptionFormatter";
+import { CommandOption } from "~/Command/domain/CommandOption";
+import { ListCache } from "../../domains";
+
+interface MultiAutoCompleteSelectedOptionsParams {
+    options?: CommandOption[];
+}
+
+interface IMultiAutoCompleteSelectedOptionsPresenter {
+    vm: {
+        options: CommandOptionFormatted[];
+        empty: boolean;
+    };
+    init: (params: MultiAutoCompleteSelectedOptionsParams) => void;
+    addOption: (option: CommandOption) => void;
+    removeOption: (value: string) => void;
+    resetOptions: () => void;
+}
+
+class MultiAutoCompleteSelectedOptionPresenter
+    implements IMultiAutoCompleteSelectedOptionsPresenter
+{
+    private options = new ListCache<CommandOption>();
+
+    constructor() {
+        makeAutoObservable(this);
+    }
+
+    init(params: MultiAutoCompleteSelectedOptionsParams) {
+        if (params.options) {
+            for (const option of params.options) {
+                if (!this.options.getItem(o => o.value === option.value)) {
+                    this.options.addItems([option]);
+                }
+            }
+        }
+    }
+
+    get vm() {
+        return {
+            options: this.options.getItems().map(option => CommandOptionFormatter.format(option)),
+            empty: !this.options.hasItems()
+        };
+    }
+
+    public addOption = (option: CommandOption) => {
+        this.options.addItems([option]);
+    };
+
+    public removeOption = (value: string) => {
+        this.options.removeItems(option => option.value === value);
+    };
+
+    public resetOptions = () => {
+        this.options.clear();
+    };
+}
+
+export {
+    MultiAutoCompleteSelectedOptionPresenter,
+    type IMultiAutoCompleteSelectedOptionsPresenter,
+    type MultiAutoCompleteSelectedOptionsParams
+};
diff --git a/packages/admin-ui/src/MultiAutoComplete/primitives/presenters/MultiAutoCompleteTemporaryOptionPresenter.ts b/packages/admin-ui/src/MultiAutoComplete/primitives/presenters/MultiAutoCompleteTemporaryOptionPresenter.ts
new file mode 100644
index 00000000000..d5f661cfb1e
--- /dev/null
+++ b/packages/admin-ui/src/MultiAutoComplete/primitives/presenters/MultiAutoCompleteTemporaryOptionPresenter.ts
@@ -0,0 +1,41 @@
+import { makeAutoObservable } from "mobx";
+import { CommandOption } from "~/Command/domain/CommandOption";
+import { CommandOptionFormatted } from "~/Command/domain/CommandOptionFormatted";
+import { CommandOptionFormatter } from "~/Command/domain/CommandOptionFormatter";
+
+export interface IMultiAutoCompleteTemporaryOptionPresenter {
+    vm: {
+        option?: CommandOptionFormatted;
+    };
+    init: () => void;
+    setOption: (value: string) => void;
+    resetOption: () => void;
+}
+
+export class MultiAutoCompleteTemporaryOptionPresenter
+    implements IMultiAutoCompleteTemporaryOptionPresenter
+{
+    private option?: CommandOption = undefined;
+
+    constructor() {
+        makeAutoObservable(this);
+    }
+
+    init() {
+        return;
+    }
+
+    get vm() {
+        return {
+            option: this.option ? CommandOptionFormatter.format(this.option) : undefined
+        };
+    }
+
+    public setOption = (value: string) => {
+        this.option = CommandOption.createFromString(value);
+    };
+
+    public resetOption = () => {
+        this.option = undefined;
+    };
+}
diff --git a/packages/admin-ui/src/MultiAutoComplete/primitives/presenters/index.ts b/packages/admin-ui/src/MultiAutoComplete/primitives/presenters/index.ts
new file mode 100644
index 00000000000..4ecd12bda21
--- /dev/null
+++ b/packages/admin-ui/src/MultiAutoComplete/primitives/presenters/index.ts
@@ -0,0 +1,7 @@
+export * from "./MultiAutoCompletePresenter";
+export * from "./MultiAutoCompletePresenterWithFreeInput";
+export * from "./MultiAutoCompleteInputPresenter";
+export * from "./MultiAutoCompleteListOptionsPresenter";
+export * from "./MultiAutoCompleteListOptionsPresenterWithUniqueValues";
+export * from "./MultiAutoCompleteSelectedOptionsPresenter";
+export * from "./MultiAutoCompleteTemporaryOptionPresenter";
diff --git a/packages/admin-ui/src/MultiAutoComplete/primitives/useMultiAutoComplete.ts b/packages/admin-ui/src/MultiAutoComplete/primitives/useMultiAutoComplete.ts
new file mode 100644
index 00000000000..20664c6f756
--- /dev/null
+++ b/packages/admin-ui/src/MultiAutoComplete/primitives/useMultiAutoComplete.ts
@@ -0,0 +1,102 @@
+import { useEffect, useMemo, useState } from "react";
+import { autorun } from "mobx";
+import { MultiAutoCompletePrimitiveProps } from "./MultiAutoCompletePrimitive";
+import {
+    MultiAutoCompleteInputPresenter,
+    MultiAutoCompleteListOptionsPresenter,
+    MultiAutoCompleteListOptionsPresenterWithUniqueValues,
+    MultiAutoCompletePresenter,
+    MultiAutoCompletePresenterParams,
+    MultiAutoCompletePresenterWithFreeInput,
+    MultiAutoCompleteSelectedOptionPresenter
+} from "./presenters";
+import { MultiAutoCompleteTemporaryOptionPresenter } from "~/MultiAutoComplete/primitives/presenters/MultiAutoCompleteTemporaryOptionPresenter";
+
+export const useMultiAutoComplete = (props: MultiAutoCompletePrimitiveProps) => {
+    const params: MultiAutoCompletePresenterParams = useMemo(
+        () => ({
+            displayResetAction: props.displayResetAction,
+            emptyMessage: props.emptyMessage,
+            loadingMessage: props.loadingMessage,
+            initialMessage: props.initialMessage,
+            onOpenChange: props.onOpenChange,
+            onValueSearch: props.onValueSearch,
+            onValuesChange: props.onValuesChange,
+            onValuesReset: props.onValuesReset,
+            options: props.options,
+            placeholder: props.placeholder,
+            values: props.values
+        }),
+        [
+            props.displayResetAction,
+            props.emptyMessage,
+            props.loadingMessage,
+            props.initialMessage,
+            props.onOpenChange,
+            props.onValueSearch,
+            props.onValuesChange,
+            props.onValuesReset,
+            props.options,
+            props.placeholder,
+            props.values
+        ]
+    );
+
+    const presenter = useMemo(() => {
+        const optionsListPresenter = new MultiAutoCompleteListOptionsPresenter();
+        const optionsListWithUniqueValues =
+            new MultiAutoCompleteListOptionsPresenterWithUniqueValues(optionsListPresenter);
+
+        const inputPresenter = new MultiAutoCompleteInputPresenter();
+        const selectedOptionsPresenter = new MultiAutoCompleteSelectedOptionPresenter();
+
+        let presenter = new MultiAutoCompletePresenter(
+            inputPresenter,
+            selectedOptionsPresenter,
+            optionsListPresenter
+        );
+
+        if (props?.uniqueValues) {
+            presenter = new MultiAutoCompletePresenter(
+                inputPresenter,
+                selectedOptionsPresenter,
+                optionsListWithUniqueValues
+            );
+        }
+
+        if (props?.allowFreeInput) {
+            const temporaryOptionsPresenter = new MultiAutoCompleteTemporaryOptionPresenter();
+            const withFreeInputPresenter = new MultiAutoCompletePresenterWithFreeInput(
+                temporaryOptionsPresenter,
+                presenter
+            );
+            withFreeInputPresenter.init(params);
+            return withFreeInputPresenter;
+        } else {
+            presenter.init(params);
+            return presenter;
+        }
+    }, [props.allowFreeInput, props.uniqueValues]);
+
+    const [vm, setVm] = useState(presenter.vm);
+
+    useEffect(() => {
+        presenter.init(params);
+    }, [params, presenter]);
+
+    useEffect(() => {
+        return autorun(() => {
+            setVm(presenter.vm);
+        });
+    }, [presenter]);
+
+    return {
+        vm,
+        setSelectedOption: presenter.setSelectedOption,
+        removeSelectedOption: presenter.removeSelectedOption,
+        searchOption: presenter.searchOption,
+        resetSelectedOptions: presenter.resetSelectedOptions,
+        setListOpenState: presenter.setListOpenState,
+        createOption: presenter.createOption
+    };
+};
diff --git a/packages/admin-ui/src/MultiFilePicker/MultiFilePicker.mdx b/packages/admin-ui/src/MultiFilePicker/MultiFilePicker.mdx
new file mode 100644
index 00000000000..9579eaebc88
--- /dev/null
+++ b/packages/admin-ui/src/MultiFilePicker/MultiFilePicker.mdx
@@ -0,0 +1,190 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+
+import * as MultiFilePickerStories from './MultiFilePicker.stories';
+
+<Meta of={MultiFilePickerStories} />
+
+# Multi File Picker
+
+The Multi File Picker component allows users to select, preview, and manage multiple files. It provides an intuitive interface for file uploads in forms and content management systems, with support for different file types and preview options.
+
+## Usage
+
+The MultiFilePicker component is typically used with [Webiny's File Manager](https://www.webiny.com/enterprise-serverless-cms/file-manager) to provide a complete file selection experience.
+
+> ⚠️ **Note**: The MultiFilePicker component is designed to work seamlessly with [Webiny's File Manager](https://www.webiny.com/enterprise-serverless-cms/file-manager).
+In the Storybook example below, we've used random images from Picsum for demonstration purposes.
+However, if you use this example code in a real Webiny project, the MultiFilePicker will integrate with the actual File Manager as expected.
+
+<Canvas of={MultiFilePickerStories.Documentation} source={ { code: `
+import React, { useState } from "react";
+import { MultiFilePicker, type FileItemDto } from "@webiny/admin-ui";
+import { FileManager } from "@webiny/app-admin/components";
+import type { FileManagerFileItem } from "@webiny/app-admin/base/ui/FileManager";
+
+const MultiFilePickerExample = () => {
+    const [selectedFiles, setSelectedFiles] = useState<FileItemDto[]>([]);
+    const [validation, setValidation] = useState({ isValid: true, message: "" });
+
+        const formatFile = (file: FileManagerFileItem): FileItemDto => {
+            const metaItems = file.meta || [];
+
+            const getValue = (key: string) =>
+                metaItems.find((item: { key: string }) => item.key === key)?.value;
+
+            return {
+                id: file.id,
+                name: getValue("name") || "",
+                size: getValue("size") || 0,
+                mimeType: getValue("type") || "",
+                url: file.src || ""
+            };
+        };
+
+        return (
+            <div>
+                <FileManager
+                    accept={["image/*", "application/pdf"]}
+                    multiple={true}
+                    render={({ showFileManager }) => (
+                        <MultiFilePicker
+                            label="Upload Images"
+                            description="Select files to upload (JPG, PNG, PDF)"
+                            note="Note: Maximum file size is 5MB per file"
+                            type="area"
+                            required={true}
+                            values={selectedFiles}
+                            validation={validation}
+                            onSelectItem={() => {
+                                showFileManager(files => {
+                                    if (files && Array.isArray(files) && files.length > 0) {
+                                        const formatted = files.map(formatFile);
+                                        setSelectedFiles(prev => [...prev, ...formatted]);
+                                        setValidation({ isValid: true, message: "" });
+                                    }
+                                });
+                            }}
+                            onReplaceItem={(_, index) => {
+                                // For replacing, we'll use the first file from the selection
+                                showFileManager(files => {
+                                    if (files && Array.isArray(files) && files.length > 0) {
+                                        const updated = [...selectedFiles];
+                                        updated[index] = formatFile(files[0]);
+                                        setSelectedFiles(updated);
+                                    }
+                                });
+                            }}
+                            onRemoveItem={(_, index) => {
+                                const updated = [...selectedFiles];
+                                updated.splice(index, 1);
+                                if (updated.length === 0) {
+                                    setValidation({ isValid: false, message: "Please select at least one file" });
+                                }
+                                setSelectedFiles(updated);
+                            }}
+                            onEditItem={(file, index) => {
+                                alert(\`Editing: \${file?.name} at index \${index}\`);
+                        }}
+                    />
+                )}
+            />
+        </div>
+    );
+};
+
+    export default MultiFilePickerExample;
+
+` } }
+        additionalActions={[
+            {
+                title: 'Open in GitHub',
+                onClick: () => {
+                    window.open(
+                        'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/MultiFilePicker/MultiFilePicker.tsx',
+                        '_blank'
+                    );
+                },
+            }
+        ]}
+/>
+
+<Controls of={MultiFilePickerStories.Documentation} />
+
+```tsx
+import React, { useState } from "react";
+import { MultiFilePicker, type FileItemDto } from "@webiny/admin-ui";
+import { FileManager } from "@webiny/app-admin/components";
+import type { FileManagerFileItem } from "@webiny/app-admin/base/ui/FileManager";
+
+const MultiFilePickerExample = () => {
+    const [selectedFiles, setSelectedFiles] = useState<FileItemDto[]>([]);
+    const [validation, setValidation] = useState({ isValid: true, message: "" });
+
+    const formatFile = (file: FileManagerFileItem): FileItemDto => {
+        const metaItems = file.meta || [];
+
+        const getValue = (key: string) =>
+            metaItems.find((item: { key: string }) => item.key === key)?.value;
+
+        return {
+            id: file.id,
+            name: getValue("name") || "",
+            size: getValue("size") || 0,
+            mimeType: getValue("type") || "",
+            url: file.src || ""
+        };
+    };
+
+    return (
+        <div>
+            <FileManager
+                accept={["image/*", "application/pdf"]}
+                multiple={true}
+                render={({ showFileManager }) => (
+                    <MultiFilePicker
+                        label="Upload Images"
+                        description="Select files to upload (JPG, PNG, PDF)"
+                        note="Note: Maximum file size is 5MB per file"
+                        type="area"
+                        required={true}
+                        values={selectedFiles}
+                        validation={validation}
+                        onSelectItem={() => {
+                            showFileManager(files => {
+                                if (files && Array.isArray(files) && files.length > 0) {
+                                    const formatted = files.map(formatFile);
+                                    setSelectedFiles(prev => [...prev, ...formatted]);
+                                    setValidation({ isValid: true, message: "" });
+                                }
+                            });
+                        }}
+                        onReplaceItem={(_, index) => {
+                            // For replacing, we'll use the first file from the selection
+                            showFileManager(files => {
+                                if (files && Array.isArray(files) && files.length > 0) {
+                                    const updated = [...selectedFiles];
+                                    updated[index] = formatFile(files[0]);
+                                    setSelectedFiles(updated);
+                                }
+                            });
+                        }}
+                        onRemoveItem={(_, index) => {
+                            const updated = [...selectedFiles];
+                            updated.splice(index, 1);
+                            if (updated.length === 0) {
+                                setValidation({ isValid: false, message: "Please select at least one file" });
+                            }
+                            setSelectedFiles(updated);
+                        }}
+                        onEditItem={(file, index) => {
+                            alert(`Editing: ${file?.name} at index ${index}`);
+                        }}
+                    />
+                )}
+            />
+        </div>
+    );
+};
+
+export default MultiFilePickerExample;
+```
diff --git a/packages/admin-ui/src/MultiFilePicker/MultiFilePicker.stories.tsx b/packages/admin-ui/src/MultiFilePicker/MultiFilePicker.stories.tsx
new file mode 100644
index 00000000000..1f91c477b02
--- /dev/null
+++ b/packages/admin-ui/src/MultiFilePicker/MultiFilePicker.stories.tsx
@@ -0,0 +1,405 @@
+import React, { useState, useEffect } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { type FileItemDto, MultiFilePicker } from "~/MultiFilePicker";
+import { Providers } from "~/Providers";
+
+const getRandomNumber = (min: number, max: number): number =>
+    Math.floor(Math.random() * (max - min + 1)) + min;
+
+const createFileList = (size: number = 10): FileItemDto[] => {
+    return Array.from({ length: size }, (_, index) => {
+        const width = getRandomNumber(500, 2000); // Random width between 500 and 2000
+        const height = getRandomNumber(500, 2000); // Random height between 500 and 2000
+        const fileSize = getRandomNumber(500000, 5000000); // Random file size between 500KB and 5MB
+
+        return {
+            name: `file-${index + 1}.jpg`,
+            mimeType: "image/jpeg",
+            size: fileSize,
+            url: `https://picsum.photos/${width}/${height}`
+        };
+    });
+};
+
+const meta: Meta<typeof MultiFilePicker> = {
+    title: "Components/Form/Multi FilePicker",
+    component: MultiFilePicker,
+    argTypes: {
+        onSelectItem: { action: "onSelectItem" },
+        onEditItem: { action: "onEditItem" },
+        onRemoveItem: { action: "onRemoveItem" },
+        disabled: {
+            control: "boolean",
+            defaultValue: false
+        }
+    },
+    parameters: {
+        layout: "padded"
+    },
+    render: args => {
+        const [selectedFiles, setSelectedFiles] = useState<FileItemDto[]>([]);
+        return (
+            <Providers>
+                <MultiFilePicker
+                    {...args}
+                    values={selectedFiles}
+                    onSelectItem={() => setSelectedFiles(createFileList())}
+                    onReplaceItem={(_, index) =>
+                        setSelectedFiles(prevState => {
+                            if (!prevState) {
+                                return [];
+                            }
+
+                            return [
+                                ...prevState.slice(0, index),
+                                ...createFileList(1),
+                                ...prevState.slice(index + 1)
+                            ];
+                        })
+                    }
+                    onRemoveItem={item =>
+                        setSelectedFiles(prevState =>
+                            prevState?.filter(value => value.name !== item?.name)
+                        )
+                    }
+                    onEditItem={(item, i) => alert(`Editing ${item?.name} at position ${i}`)}
+                />
+            </Providers>
+        );
+    }
+};
+
+export default meta;
+type Story = StoryObj<typeof MultiFilePicker>;
+
+export const Default: Story = {};
+
+export const AreaType: Story = {
+    args: {
+        ...Default.args,
+        type: "area"
+    }
+};
+
+export const AreaWithLabel: Story = {
+    args: {
+        ...AreaType.args,
+        label: "Any field label"
+    }
+};
+
+export const AreaWithLabelRequired: Story = {
+    args: {
+        ...AreaType.args,
+        label: "Any field label",
+        required: true
+    }
+};
+
+export const AreaWithDescription: Story = {
+    args: {
+        ...AreaType.args,
+        description: "Provide the required information for processing your request."
+    }
+};
+
+export const AreaWithNotes: Story = {
+    args: {
+        ...AreaType.args,
+        note: "Note: Ensure your selection or input is accurate before proceeding."
+    }
+};
+
+export const AreaWithErrors: Story = {
+    args: {
+        ...AreaType.args,
+        validation: {
+            isValid: false,
+            message: "This field is required."
+        }
+    }
+};
+
+export const AreaDisabled: Story = {
+    args: {
+        ...AreaType.args,
+        label: "Any field label",
+        disabled: true
+    }
+};
+
+export const AreaWithValidateFunction: Story = {
+    args: {
+        ...AreaType.args
+    },
+    render: args => {
+        const [validation, setValidation] = useState<any>({ isValid: true, message: undefined });
+
+        const validate = async () => {
+            setValidation({ isValid: false, message: "Any custom error message." });
+        };
+
+        return <MultiFilePicker {...args} validate={validate} validation={validation} />;
+    }
+};
+
+export const AreaFullExample: Story = {
+    args: {
+        ...AreaType.args,
+        label: "Any field label",
+        required: true,
+        description: "Provide the required information for processing your request.",
+        note: "Note: Ensure your selection or input is accurate before proceeding.",
+        validation: {
+            isValid: false,
+            message: "This field is required."
+        }
+    }
+};
+
+export const Compact: Story = {
+    args: {
+        ...Default.args,
+        type: "compact"
+    }
+};
+
+export const CompactWithLabel: Story = {
+    args: {
+        ...Compact.args,
+        label: "Any field label"
+    }
+};
+
+export const CompactWithLabelRequired: Story = {
+    args: {
+        ...Compact.args,
+        label: "Any field label",
+        required: true
+    }
+};
+
+export const CompactWithDescription: Story = {
+    args: {
+        ...Compact.args,
+        description: "Provide the required information for processing your request."
+    }
+};
+
+export const CompactWithNotes: Story = {
+    args: {
+        ...Compact.args,
+        note: "Note: Ensure your selection or input is accurate before proceeding."
+    }
+};
+
+export const CompactWithErrors: Story = {
+    args: {
+        ...Compact.args,
+        validation: {
+            isValid: false,
+            message: "This field is required."
+        }
+    }
+};
+
+export const CompactDisabled: Story = {
+    args: {
+        ...Compact.args,
+        label: "Any field label",
+        disabled: true
+    }
+};
+
+export const CompactWithValidateFunction: Story = {
+    args: {
+        ...Compact.args
+    },
+    render: args => {
+        const [validation, setValidation] = useState<any>({ isValid: true, message: undefined });
+
+        const validate = async () => {
+            setValidation({ isValid: false, message: "Any custom error message." });
+        };
+
+        return <MultiFilePicker {...args} validate={validate} validation={validation} />;
+    }
+};
+
+export const CompactFullExample: Story = {
+    args: {
+        ...Compact.args,
+        label: "Any field label",
+        required: true,
+        description: "Provide the required information for processing your request.",
+        note: "Note: Ensure your selection or input is accurate before proceeding.",
+        validation: {
+            isValid: false,
+            message: "This field is required."
+        }
+    }
+};
+
+export const Documentation: Story = {
+    render: args => {
+        const [selectedFiles, setSelectedFiles] = useState<FileItemDto[]>([]);
+        const [validation, setValidation] = useState({ isValid: true, message: "" });
+
+        // Update value when args.values changes
+        useEffect(() => {
+            if (!args.values) {
+                setSelectedFiles([]);
+            } else if (Array.isArray(args.values)) {
+                // Convert any string values to FileItemDto format
+                const formattedValues = args.values.map(value => {
+                    if (typeof value === "string") {
+                        return {
+                            name: value.split("/").pop() || "file",
+                            mimeType: "image/jpeg", // Default mime type
+                            size: 0,
+                            url: value
+                        };
+                    }
+                    return value as FileItemDto;
+                });
+                setSelectedFiles(formattedValues);
+            }
+        }, [args.values]);
+
+        const handleSelect = () => {
+            setSelectedFiles(createFileList(3));
+            setValidation({ isValid: true, message: "" });
+        };
+
+        const handleReplace = (_: any, index: number) => {
+            setSelectedFiles(prevState => {
+                if (!prevState) {
+                    return [];
+                }
+
+                return [
+                    ...prevState.slice(0, index),
+                    ...createFileList(1),
+                    ...prevState.slice(index + 1)
+                ];
+            });
+            setValidation({ isValid: true, message: "" });
+        };
+
+        const handleEdit = (file: any, index: number) => {
+            if (file) {
+                console.log("Editing file:", file, "at index:", index);
+                alert(`Editing File: ${file.name} at position ${index}`);
+            }
+        };
+
+        const handleRemove = (file: any, index: number) => {
+            setSelectedFiles(prevState => prevState?.filter((_, i) => i !== index));
+
+            if (args.required && (!selectedFiles || selectedFiles.length <= 1)) {
+                setValidation({ isValid: false, message: "Please select at least one file" });
+            }
+        };
+
+        // Validate on required change or value change
+        useEffect(() => {
+            if (args.required && (!selectedFiles || selectedFiles.length === 0)) {
+                setValidation({ isValid: false, message: "Please select at least one file" });
+            } else {
+                setValidation({ isValid: true, message: "" });
+            }
+        }, [args.required, selectedFiles]);
+
+        return (
+            <Providers>
+                <MultiFilePicker
+                    {...args}
+                    values={selectedFiles}
+                    onSelectItem={handleSelect}
+                    onReplaceItem={handleReplace}
+                    onRemoveItem={handleRemove}
+                    onEditItem={handleEdit}
+                    validation={validation}
+                />
+            </Providers>
+        );
+    },
+    args: {
+        label: "Upload Images",
+        required: true,
+        disabled: false,
+        description: "Select files to upload (JPG, PNG, PDF)",
+        note: "Note: Maximum file size is 5MB per file",
+        type: "area",
+        values: [],
+        validation: undefined,
+        onSelectItem: undefined,
+        onReplaceItem: undefined,
+        onEditItem: undefined,
+        onRemoveItem: undefined
+    },
+    argTypes: {
+        label: {
+            description: "Label text for the file picker",
+            control: "text",
+            defaultValue: "Upload Images"
+        },
+        type: {
+            description: "The type of file picker to display",
+            control: "select",
+            options: ["area", "compact"],
+            defaultValue: "area"
+        },
+        required: {
+            description: "Makes the field required when set to true",
+            control: "boolean",
+            defaultValue: true
+        },
+        disabled: {
+            description: "Disables the field when set to true",
+            control: "boolean",
+            defaultValue: false
+        },
+        description: {
+            description: "Additional description text below the field",
+            control: "text"
+        },
+        note: {
+            description: "Additional note text below the field",
+            control: "text"
+        },
+        values: {
+            description: "Array of selected files",
+            control: "object"
+        },
+        validation: {
+            description:
+                "Validation state and message. Please refer to the example code for details on usage.",
+            control: "none"
+        },
+        onSelectItem: {
+            description:
+                "Callback when user selects files - Please refer to the example code for details on usage.",
+            action: "onSelectItem",
+            control: "none"
+        },
+        onReplaceItem: {
+            description:
+                "Callback when user replaces a file - Please refer to the example code for details on usage.",
+            action: "onReplaceItem",
+            control: "none"
+        },
+        onEditItem: {
+            description:
+                "Callback when user edits a file - Please refer to the example code for details on usage.",
+            action: "onEditItem",
+            control: "none"
+        },
+        onRemoveItem: {
+            description:
+                "Callback when user removes a file - Please refer to the example code for details on usage.",
+            action: "onRemoveItem",
+            control: "none"
+        }
+    }
+};
diff --git a/packages/admin-ui/src/MultiFilePicker/MultiFilePicker.tsx b/packages/admin-ui/src/MultiFilePicker/MultiFilePicker.tsx
new file mode 100644
index 00000000000..121d789d322
--- /dev/null
+++ b/packages/admin-ui/src/MultiFilePicker/MultiFilePicker.tsx
@@ -0,0 +1,93 @@
+import React, { useCallback, useMemo } from "react";
+import { makeDecoratable, withStaticProps } from "~/utils";
+import { MultiFilePickerPrimitive, type MultiFilePickerPrimitiveProps } from "./primitives";
+import {
+    FormComponentErrorMessage,
+    FormComponentNote,
+    type FormComponentProps
+} from "~/FormComponent";
+import {
+    FormPickerLabel,
+    ImagePreview,
+    RichItemPreview,
+    TextOnlyPreview
+} from "~/FilePicker/primitives/components";
+
+type MultiFilePickerProps = MultiFilePickerPrimitiveProps & FormComponentProps;
+
+const BaseMultiFilePicker = ({
+    label,
+    description,
+    note,
+    required,
+    disabled,
+    validation,
+    validate,
+    onBlur: originalOnBlur,
+    type = "area",
+    ...props
+}: MultiFilePickerProps) => {
+    const { isValid: validationIsValid, message: validationMessage } = validation || {};
+    const invalid = useMemo(() => validationIsValid === false, [validationIsValid]);
+
+    const onBlur = useCallback(
+        async (e: React.FocusEvent<HTMLInputElement>) => {
+            if (validate) {
+                // Since we are accessing event in an async operation, we need to persist it.
+                // See https://reactjs.org/docs/events.html#event-pooling.
+                e.persist();
+                await validate();
+            }
+            originalOnBlur && originalOnBlur(e);
+        },
+        [validate, originalOnBlur]
+    );
+
+    return (
+        <div className={"wby-w-full"}>
+            {type !== "area" && (
+                <FormPickerLabel
+                    label={label}
+                    required={required}
+                    disabled={disabled}
+                    description={description}
+                    invalid={invalid}
+                />
+            )}
+            <MultiFilePickerPrimitive
+                {...props}
+                label={
+                    <FormPickerLabel
+                        label={label}
+                        required={required}
+                        disabled={disabled}
+                        description={description}
+                        invalid={invalid}
+                        className={"wby-m-0"}
+                    />
+                }
+                disabled={disabled}
+                invalid={invalid}
+                onBlur={onBlur}
+                type={type}
+            />
+            <FormComponentErrorMessage
+                text={validationMessage}
+                invalid={invalid}
+                disabled={disabled}
+            />
+            <FormComponentNote text={note} disabled={disabled} />
+        </div>
+    );
+};
+
+const DecoratableMultiFilePicker = makeDecoratable("MultiFilePicker", BaseMultiFilePicker);
+
+const MultiFilePicker = withStaticProps(DecoratableMultiFilePicker, {
+    Preview: {
+        Image: ImagePreview,
+        RichItem: RichItemPreview,
+        TextOnly: TextOnlyPreview
+    }
+});
+export { MultiFilePicker, type MultiFilePickerProps };
diff --git a/packages/admin-ui/src/MultiFilePicker/index.ts b/packages/admin-ui/src/MultiFilePicker/index.ts
new file mode 100644
index 00000000000..757b65c73c6
--- /dev/null
+++ b/packages/admin-ui/src/MultiFilePicker/index.ts
@@ -0,0 +1,2 @@
+export * from "./MultiFilePicker";
+export * from "./primitives";
diff --git a/packages/admin-ui/src/MultiFilePicker/primitives/MultiFilePickerPrimitive.stories.tsx b/packages/admin-ui/src/MultiFilePicker/primitives/MultiFilePickerPrimitive.stories.tsx
new file mode 100644
index 00000000000..37045e1ea46
--- /dev/null
+++ b/packages/admin-ui/src/MultiFilePicker/primitives/MultiFilePickerPrimitive.stories.tsx
@@ -0,0 +1,364 @@
+import React, { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { MultiFilePickerPrimitive, type FileItemDto } from "./MultiFilePickerPrimitive";
+
+const getRandomNumber = (min: number, max: number): number =>
+    Math.floor(Math.random() * (max - min + 1)) + min;
+
+const createFileList = (size: number = 10): FileItemDto[] => {
+    return Array.from({ length: size }, (_, index) => {
+        const width = getRandomNumber(500, 2000); // Random width between 500 and 2000
+        const height = getRandomNumber(500, 2000); // Random height between 500 and 2000
+        const fileSize = getRandomNumber(500000, 5000000); // Random file size between 500KB and 5MB
+
+        return {
+            name: `file-${index + 1}.jpg`,
+            mimeType: "image/jpeg",
+            size: fileSize,
+            url: `https://picsum.photos/${width}/${height}`
+        };
+    });
+};
+
+const meta: Meta<typeof MultiFilePickerPrimitive> = {
+    title: "Components/Form Primitives/Multi FilePicker",
+    component: MultiFilePickerPrimitive,
+    argTypes: {
+        onSelectItem: { action: "onSelectItem" },
+        onReplaceItem: { action: "onReplaceItem" },
+        onEditItem: { action: "onEditItem" },
+        onRemoveItem: { action: "onRemoveItem" },
+        disabled: {
+            control: "boolean",
+            defaultValue: false
+        }
+    },
+    parameters: {
+        layout: "padded"
+    },
+    render: args => {
+        const [selectedFiles, setSelectedFiles] = useState<FileItemDto[]>([]);
+        return (
+            <MultiFilePickerPrimitive
+                {...args}
+                values={selectedFiles}
+                onSelectItem={() => setSelectedFiles(createFileList())}
+                onReplaceItem={(_, index) =>
+                    setSelectedFiles(prevState => {
+                        if (!prevState) {
+                            return [];
+                        }
+
+                        return [
+                            ...prevState.slice(0, index),
+                            ...createFileList(1),
+                            ...prevState.slice(index + 1)
+                        ];
+                    })
+                }
+                onRemoveItem={item =>
+                    setSelectedFiles(prevState =>
+                        prevState?.filter(value => value.name !== item?.name)
+                    )
+                }
+                onEditItem={(item, i) => alert(`Editing ${item?.name} at position ${i}`)}
+            />
+        );
+    }
+};
+
+export default meta;
+type Story = StoryObj<typeof MultiFilePickerPrimitive>;
+
+export const Default: Story = {
+    args: {
+        label: "Add gallery files"
+    }
+};
+
+export const AreaType: Story = {
+    args: {
+        ...Default.args,
+        type: "area"
+    }
+};
+
+export const AreaPrimaryVariant: Story = {
+    args: {
+        ...AreaType.args,
+        variant: "primary"
+    }
+};
+
+export const AreaPrimaryVariantDisabled: Story = {
+    args: {
+        ...AreaPrimaryVariant.args,
+        disabled: true
+    }
+};
+
+export const AreaPrimaryVariantInvalid: Story = {
+    args: {
+        ...AreaPrimaryVariant.args,
+        invalid: true
+    }
+};
+
+export const AreaSecondaryVariant: Story = {
+    args: {
+        ...AreaType.args,
+        variant: "secondary"
+    }
+};
+
+export const AreaSecondaryVariantDisabled: Story = {
+    args: {
+        ...AreaSecondaryVariant.args,
+        disabled: true
+    }
+};
+
+export const AreaSecondaryVariantInvalid: Story = {
+    args: {
+        ...AreaSecondaryVariant.args,
+        invalid: true
+    }
+};
+
+export const AreaGhostVariant: Story = {
+    args: {
+        ...AreaType.args,
+        variant: "ghost"
+    }
+};
+
+export const AreaGhostVariantDisabled: Story = {
+    args: {
+        ...AreaGhostVariant.args,
+        disabled: true
+    }
+};
+
+export const AreaGhostVariantInvalid: Story = {
+    args: {
+        ...AreaGhostVariant.args,
+        invalid: true
+    }
+};
+
+export const AreaWithImagePreview: Story = {
+    args: {
+        ...AreaType.args,
+        renderFilePreview: props => <MultiFilePickerPrimitive.Preview.Image {...props} />
+    }
+};
+
+export const AreaWithImagePreviewLight: Story = {
+    args: {
+        ...AreaWithImagePreview.args,
+        renderFilePreview: props => (
+            <MultiFilePickerPrimitive.Preview.Image variant={"light"} {...props} />
+        )
+    }
+};
+
+export const AreaWithImagePreviewBase: Story = {
+    args: {
+        ...AreaWithImagePreview.args,
+        renderFilePreview: props => (
+            <MultiFilePickerPrimitive.Preview.Image variant={"base"} {...props} />
+        )
+    }
+};
+
+export const AreaWithImagePreviewTransparent: Story = {
+    args: {
+        ...AreaWithImagePreview.args,
+        renderFilePreview: props => (
+            <MultiFilePickerPrimitive.Preview.Image variant={"transparent"} {...props} />
+        )
+    }
+};
+
+export const AreaWithRichItemPreview: Story = {
+    args: {
+        ...AreaType.args,
+        renderFilePreview: props => <MultiFilePickerPrimitive.Preview.RichItem {...props} />
+    }
+};
+
+export const AreaWithRichItemPreviewLight: Story = {
+    args: {
+        ...AreaWithRichItemPreview.args,
+        renderFilePreview: props => (
+            <MultiFilePickerPrimitive.Preview.RichItem variant={"light"} {...props} />
+        )
+    }
+};
+
+export const AreaWithRichItemPreviewBase: Story = {
+    args: {
+        ...AreaWithRichItemPreview.args,
+        renderFilePreview: props => (
+            <MultiFilePickerPrimitive.Preview.RichItem variant={"base"} {...props} />
+        )
+    }
+};
+
+export const AreaWithRichItemPreviewTransparent: Story = {
+    args: {
+        ...AreaWithRichItemPreview.args,
+        renderFilePreview: props => (
+            <MultiFilePickerPrimitive.Preview.RichItem variant={"transparent"} {...props} />
+        )
+    }
+};
+
+export const AreaWithRichItemThumbnailPreview: Story = {
+    args: {
+        ...AreaType.args,
+        renderFilePreview: props => (
+            <MultiFilePickerPrimitive.Preview.RichItem preview={"thumbnail"} {...props} />
+        )
+    }
+};
+
+export const AreaWithRichItemFileTypePreview: Story = {
+    args: {
+        ...AreaType.args,
+        values: [
+            {
+                name: "export.csv",
+                url: "export.csv",
+                mimeType: "text/csv",
+                size: 100000
+            }
+        ],
+        renderFilePreview: props => (
+            <MultiFilePickerPrimitive.Preview.RichItem preview={"file-type"} {...props} />
+        )
+    }
+};
+
+export const AreaWithRichItemFileTypePlaceholder: Story = {
+    args: {
+        ...AreaType.args,
+        renderFilePreview: props => (
+            <MultiFilePickerPrimitive.Preview.RichItem preview={"placeholder"} {...props} />
+        )
+    }
+};
+
+export const AreaWithTextOnlyPreview: Story = {
+    args: {
+        ...AreaType.args,
+        renderFilePreview: props => <MultiFilePickerPrimitive.Preview.TextOnly {...props} />
+    }
+};
+
+export const AreaWithTextOnlyPreviewLight: Story = {
+    args: {
+        ...AreaWithTextOnlyPreview.args,
+        renderFilePreview: props => (
+            <MultiFilePickerPrimitive.Preview.TextOnly variant={"light"} {...props} />
+        )
+    }
+};
+
+export const AreaWithTextOnlyPreviewBase: Story = {
+    args: {
+        ...AreaWithTextOnlyPreview.args,
+        renderFilePreview: props => (
+            <MultiFilePickerPrimitive.Preview.TextOnly variant={"base"} {...props} />
+        )
+    }
+};
+
+export const AreaWithTextOnlyPreviewTransparent: Story = {
+    args: {
+        ...AreaWithTextOnlyPreview.args,
+        renderFilePreview: props => (
+            <MultiFilePickerPrimitive.Preview.TextOnly variant={"transparent"} {...props} />
+        )
+    }
+};
+
+export const CompactType: Story = {
+    args: {
+        ...Default.args,
+        type: "compact"
+    }
+};
+
+export const CompactPrimaryVariant: Story = {
+    args: {
+        ...CompactType.args,
+        variant: "primary"
+    }
+};
+
+export const CompactPrimaryVariantDisabled: Story = {
+    args: {
+        ...CompactPrimaryVariant.args,
+        disabled: true
+    }
+};
+
+export const CompactPrimaryVariantInvalid: Story = {
+    args: {
+        ...CompactPrimaryVariant.args,
+        invalid: true
+    }
+};
+
+export const CompactSecondaryVariant: Story = {
+    args: {
+        ...CompactType.args,
+        variant: "secondary"
+    }
+};
+
+export const CompactSecondaryVariantDisabled: Story = {
+    args: {
+        ...CompactSecondaryVariant.args,
+        disabled: true
+    }
+};
+
+export const CompactSecondaryVariantInvalid: Story = {
+    args: {
+        ...CompactSecondaryVariant.args,
+        invalid: true
+    }
+};
+
+export const CompactGhostVariant: Story = {
+    args: {
+        ...CompactType.args,
+        variant: "ghost"
+    }
+};
+
+export const CompactGhostVariantDisabled: Story = {
+    args: {
+        ...CompactGhostVariant.args,
+        disabled: true
+    }
+};
+
+export const CompactGhostVariantInvalid: Story = {
+    args: {
+        ...CompactGhostVariant.args,
+        invalid: true
+    }
+};
+
+export const CompactWithTextOnlyPreviewSmall: Story = {
+    args: {
+        ...CompactType.args,
+        values: createFileList(50),
+        renderFilePreview: props => (
+            <MultiFilePickerPrimitive.Preview.TextOnly {...props} small={true} />
+        )
+    }
+};
diff --git a/packages/admin-ui/src/MultiFilePicker/primitives/MultiFilePickerPrimitive.tsx b/packages/admin-ui/src/MultiFilePicker/primitives/MultiFilePickerPrimitive.tsx
new file mode 100644
index 00000000000..f10625f514b
--- /dev/null
+++ b/packages/admin-ui/src/MultiFilePicker/primitives/MultiFilePickerPrimitive.tsx
@@ -0,0 +1,137 @@
+import React from "react";
+import {
+    type FileItemDto,
+    type FileItemFormatted,
+    type FilePickerPrimitiveProps,
+    filePickerVariants,
+    FilePreview,
+    FormPickerLabel,
+    ImagePreview,
+    RichItemPreview,
+    TextOnlyPreview,
+    Trigger
+} from "~/FilePicker";
+import { cn, makeDecoratable, withStaticProps } from "~/utils";
+import { Button } from "~/Button";
+import { inputVariants } from "~/Input";
+import { useMultiFilePicker } from "~/MultiFilePicker/primitives/useMultiFilePicker";
+
+interface MultiFilePickerPrimitiveProps
+    extends Omit<FilePickerPrimitiveProps, "value" | "onEditItem" | "onRemoveItem"> {
+    /**
+     * The list of file items or file paths.
+     */
+    values?: FileItemDto[] | string[] | null;
+    /**
+     * Placeholder text for the button that allows users to select a file.
+     */
+    buttonPlaceholder?: string;
+    /**
+     * Callback function to replace an item.
+     */
+    onReplaceItem: (item: FileItemFormatted | null, index: number) => void;
+    /**
+     * Optional callback function to edit an item.
+     */
+    onEditItem?: (item: FileItemFormatted | null, index: number) => void;
+    /**
+     * Optional callback function to remove an item.
+     */
+    onRemoveItem?: (item: FileItemFormatted | null, index: number) => void;
+}
+
+const BaseMultiFilePickerPrimitive = ({
+    className,
+    buttonPlaceholder,
+    containerStyle,
+    disabled,
+    invalid,
+    label,
+    onEditItem,
+    onRemoveItem,
+    onReplaceItem,
+    onSelectItem,
+    placeholder,
+    renderFilePreview,
+    renderTrigger,
+    type = "area",
+    values = [],
+    variant
+}: MultiFilePickerPrimitiveProps) => {
+    const { vm } = useMultiFilePicker({ values });
+
+    return (
+        <div
+            data-disabled={disabled}
+            className={cn(
+                inputVariants({ variant, invalid }),
+                filePickerVariants({ type, variant }),
+                "wby-max-h-[280px]",
+                className
+            )}
+            style={containerStyle}
+        >
+            {label && type === "area" && (
+                <div className={"wby-flex wby-justify-between"}>
+                    {typeof label === "string" ? (
+                        <FormPickerLabel label={label} className={"wby-m-0"} />
+                    ) : (
+                        label
+                    )}
+                    <Button
+                        text={buttonPlaceholder ?? "Select a file"}
+                        variant={"ghost"}
+                        onClick={onSelectItem}
+                        size={"sm"}
+                        disabled={disabled}
+                    />
+                </div>
+            )}
+            {vm.hasFiles ? (
+                <div className="wby-overflow-y-scroll wby-flex wby-flex-col wby-gap-xs">
+                    {vm.files.map((file, i) => (
+                        <FilePreview
+                            key={`file-preview-${i}`}
+                            disabled={disabled}
+                            onEditItem={onEditItem ? () => onEditItem(file, i) : undefined}
+                            onRemoveItem={onRemoveItem ? () => onRemoveItem(file, i) : undefined}
+                            onReplaceItem={onReplaceItem ? () => onReplaceItem(file, i) : undefined}
+                            renderFilePreview={renderFilePreview}
+                            type={type}
+                            value={file}
+                        />
+                    ))}
+                </div>
+            ) : (
+                <Trigger
+                    disabled={disabled}
+                    onSelectItem={onSelectItem}
+                    renderTrigger={renderTrigger}
+                    text={placeholder}
+                    type={type}
+                    variant={variant}
+                />
+            )}
+        </div>
+    );
+};
+
+const DecoratableMultiFilePickerPrimitive = makeDecoratable(
+    "MultiFilePickerPrimitive",
+    BaseMultiFilePickerPrimitive
+);
+
+const MultiFilePickerPrimitive = withStaticProps(DecoratableMultiFilePickerPrimitive, {
+    Preview: {
+        Image: ImagePreview,
+        RichItem: RichItemPreview,
+        TextOnly: TextOnlyPreview
+    }
+});
+
+export {
+    MultiFilePickerPrimitive,
+    type FileItemFormatted,
+    type FileItemDto,
+    type MultiFilePickerPrimitiveProps
+};
diff --git a/packages/admin-ui/src/MultiFilePicker/primitives/index.ts b/packages/admin-ui/src/MultiFilePicker/primitives/index.ts
new file mode 100644
index 00000000000..b338072f958
--- /dev/null
+++ b/packages/admin-ui/src/MultiFilePicker/primitives/index.ts
@@ -0,0 +1 @@
+export * from "./MultiFilePickerPrimitive";
diff --git a/packages/admin-ui/src/MultiFilePicker/primitives/presenters/MultiFilePickerPresenter.test.ts b/packages/admin-ui/src/MultiFilePicker/primitives/presenters/MultiFilePickerPresenter.test.ts
new file mode 100644
index 00000000000..2e60f0cb9af
--- /dev/null
+++ b/packages/admin-ui/src/MultiFilePicker/primitives/presenters/MultiFilePickerPresenter.test.ts
@@ -0,0 +1,54 @@
+import { MultiFilePickerPresenter } from "./MultiFilePickerPresenter";
+
+describe("MultiFilePickerPresenter", () => {
+    const presenter = new MultiFilePickerPresenter();
+
+    it("should initialize with an empty array when no value is provided", () => {
+        presenter.init({});
+        expect(presenter.vm.files).toEqual([]);
+        expect(presenter.vm.hasFiles).toBeFalsy();
+    });
+
+    it("should initialize with a files created from URL when values is an array of string", () => {
+        const url = "http://example.com/file.png";
+        presenter.init({ values: [url] });
+        expect(presenter.vm.files).toEqual([
+            {
+                id: expect.any(String),
+                name: "file.png",
+                mimeType: "image/png",
+                url,
+                size: 0
+            }
+        ]);
+        expect(presenter.vm.hasFiles).toBeTruthy();
+    });
+
+    it("should initialize with a file created from URL when value is a string and the mimeType is unknown", () => {
+        const url = "http://example.com/file.unknown";
+        presenter.init({ values: [url] });
+        expect(presenter.vm.files).toEqual([
+            {
+                id: expect.any(String),
+                name: "file.unknown",
+                mimeType: "application/octet-stream",
+                url,
+                size: 0
+            }
+        ]);
+        expect(presenter.vm.hasFiles).toBeTruthy();
+    });
+
+    it("should initialize with a file created from FileItemDto when value is an object", () => {
+        const fileItemDto = {
+            id: "1",
+            name: "file.png",
+            url: "http://example.com/file.png",
+            mimeType: "image/png",
+            size: 1000
+        };
+        presenter.init({ values: [fileItemDto] });
+        expect(presenter.vm.files).toEqual([fileItemDto]);
+        expect(presenter.vm.hasFiles).toBeTruthy();
+    });
+});
diff --git a/packages/admin-ui/src/MultiFilePicker/primitives/presenters/MultiFilePickerPresenter.ts b/packages/admin-ui/src/MultiFilePicker/primitives/presenters/MultiFilePickerPresenter.ts
new file mode 100644
index 00000000000..2b317ac56ef
--- /dev/null
+++ b/packages/admin-ui/src/MultiFilePicker/primitives/presenters/MultiFilePickerPresenter.ts
@@ -0,0 +1,59 @@
+import { makeAutoObservable } from "mobx";
+import {
+    FileItem,
+    type FileItemDto,
+    type FileItemFormatted,
+    FileItemFormatter
+} from "../../../FilePicker/domains";
+
+interface MultiFilePickerPresenterParams {
+    values?: FileItemDto[] | string[] | null;
+}
+
+interface IMultiFilePickerPresenter {
+    vm: {
+        files: FileItemFormatted[];
+        hasFiles: boolean;
+    };
+    init: (params: MultiFilePickerPresenterParams) => void;
+}
+
+class MultiFilePickerPresenter implements IMultiFilePickerPresenter {
+    private files: FileItem[] = [];
+
+    constructor() {
+        makeAutoObservable(this);
+    }
+
+    public init = (params: MultiFilePickerPresenterParams) => {
+        const { values } = params;
+        this.files = this.getFiles(values);
+    };
+
+    get vm() {
+        return {
+            files: this.files?.map(file => FileItemFormatter.format(file)),
+            hasFiles: !!this.files.length
+        };
+    }
+
+    private getFiles = (values: FileItemDto[] | string[] | null | undefined): FileItem[] => {
+        if (!values || !values?.length) {
+            return [];
+        }
+
+        return values.map(value => {
+            if (typeof value === "string") {
+                return FileItem.createFromUrl(value);
+            }
+
+            return FileItem.create(value);
+        });
+    };
+}
+
+export {
+    MultiFilePickerPresenter,
+    type MultiFilePickerPresenterParams,
+    type IMultiFilePickerPresenter
+};
diff --git a/packages/admin-ui/src/MultiFilePicker/primitives/presenters/index.ts b/packages/admin-ui/src/MultiFilePicker/primitives/presenters/index.ts
new file mode 100644
index 00000000000..0cc94080705
--- /dev/null
+++ b/packages/admin-ui/src/MultiFilePicker/primitives/presenters/index.ts
@@ -0,0 +1 @@
+export * from "./MultiFilePickerPresenter";
diff --git a/packages/admin-ui/src/MultiFilePicker/primitives/useMultiFilePicker.ts b/packages/admin-ui/src/MultiFilePicker/primitives/useMultiFilePicker.ts
new file mode 100644
index 00000000000..bb5f7ffe323
--- /dev/null
+++ b/packages/admin-ui/src/MultiFilePicker/primitives/useMultiFilePicker.ts
@@ -0,0 +1,38 @@
+import { useEffect, useMemo, useState } from "react";
+import { autorun } from "mobx";
+import {
+    MultiFilePickerPresenter,
+    type MultiFilePickerPresenterParams
+} from "./presenters/MultiFilePickerPresenter";
+import type { MultiFilePickerPrimitiveProps } from "~/MultiFilePicker";
+
+type IMultiFilePickerPrimitiveProps = Pick<MultiFilePickerPrimitiveProps, "values">;
+
+export const useMultiFilePicker = (props: IMultiFilePickerPrimitiveProps) => {
+    const params: MultiFilePickerPresenterParams = useMemo(
+        () => ({
+            values: props.values
+        }),
+        [props.values]
+    );
+
+    const presenter = useMemo(() => {
+        return new MultiFilePickerPresenter();
+    }, []);
+
+    const [vm, setVm] = useState(presenter.vm);
+
+    useEffect(() => {
+        presenter.init(params);
+    }, [params]);
+
+    useEffect(() => {
+        return autorun(() => {
+            setVm(presenter.vm);
+        });
+    }, [presenter]);
+
+    return {
+        vm
+    };
+};
diff --git a/packages/admin-ui/src/Popover/Popover.mdx b/packages/admin-ui/src/Popover/Popover.mdx
new file mode 100644
index 00000000000..d077cb32bcb
--- /dev/null
+++ b/packages/admin-ui/src/Popover/Popover.mdx
@@ -0,0 +1,204 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+
+import * as PopoverStories from './Popover.stories';
+
+<Meta of={PopoverStories} />
+
+# Popover
+
+The Popover component is a UI element that displays floating content when a trigger element is clicked. It's commonly used for contextual information, additional options, or interactive forms that don't require a full modal dialog.
+
+## Usage
+
+<Canvas of={PopoverStories.Documentation} source={ { code: `
+import React from "react";
+import { Popover } from "@webiny/admin-ui";
+
+const PopoverExample = () => {
+    return (
+        <div className="wby-bg-[#f4f4f4] wby-flex wby-items-center wby-justify-center wby-w-full wby-h-[300px]">
+            <Popover
+                trigger={<p>Popover trigger</p>}
+                content={
+                    <div className={"wby-w-[260px]"}>
+                        <strong>Lorem ipsum dolor sit amet</strong>, consectetur adipiscing elit. Morbi
+                        lectus leo, dapibus vitae mollis dictum, vulputate eget lorem. Aliquam rutrum auctor
+                        tempus.
+                    </div>
+                }
+                align="center"
+                side="bottom"
+                variant="subtle"
+                arrow={false}
+                close={false}
+            />
+        </div>
+    );
+};
+
+export default PopoverExample;
+
+` } }
+        additionalActions={[
+            {
+                title: 'Open in GitHub',
+                onClick: () => {
+                    window.open(
+                        'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Popover/Popover.tsx',
+                        '_blank'
+                    );
+                },
+            }
+        ]}
+/>
+
+<Controls of={PopoverStories.Documentation} />
+
+```tsx
+import React from "react";
+import { Popover } from "@webiny/admin-ui";
+
+const PopoverExample = () => {
+    return (
+        <div className="wby-bg-[#f4f4f4] wby-flex wby-items-center wby-justify-center wby-w-full wby-h-[300px]">
+            <Popover
+                trigger={<p>Popover trigger</p>}
+                content={
+                    <div className={"wby-w-[260px]"}>
+                        <strong>Lorem ipsum dolor sit amet</strong>, consectetur adipiscing elit. Morbi
+                        lectus leo, dapibus vitae mollis dictum, vulputate eget lorem. Aliquam rutrum auctor
+                        tempus.
+                    </div>
+                }
+                align="center"
+                side="bottom"
+                variant="subtle"
+                arrow={false}
+                close={false}
+            />
+        </div>
+    );
+};
+
+export default PopoverExample;
+```
+
+## Examples
+
+### Accent Variant
+
+A popover with the accent color variant for higher contrast.
+
+<Canvas of={PopoverStories.AccentVariant} source={ { code: `
+import React from "react";
+import { Popover } from "@webiny/admin-ui";
+
+const AccentVariantExample = () => {
+    return (
+        <div className="wby-bg-[#f4f4f4] wby-flex wby-items-center wby-justify-center wby-w-full wby-h-[300px]">
+            <Popover
+                trigger={<p>Popover trigger</p>}
+                content={
+                    <div className={"wby-w-[260px]"}>
+                        <strong>Lorem ipsum dolor sit amet</strong>, consectetur adipiscing elit. Morbi
+                        lectus leo, dapibus vitae mollis dictum, vulputate eget lorem. Aliquam rutrum auctor
+                        tempus.
+                    </div>
+                }
+                variant="accent"
+            />
+        </div>
+    );
+};
+
+export default AccentVariantExample;
+` } } />
+
+### With Arrow (Accent Variant)
+
+A popover with an arrow pointing to the trigger element.
+
+<Canvas of={PopoverStories.WithArrowAccentVariant} source={ { code: `
+import React from "react";
+import { Popover } from "@webiny/admin-ui";
+
+const WithArrowAccentExample = () => {
+    return (
+        <div className="wby-bg-[#f4f4f4] wby-flex wby-items-center wby-justify-center wby-w-full wby-h-[300px]">
+            <Popover
+                trigger={<p>Popover trigger</p>}
+                content={
+                    <div className={"wby-w-[260px]"}>
+                        <strong>Lorem ipsum dolor sit amet</strong>, consectetur adipiscing elit. Morbi
+                        lectus leo, dapibus vitae mollis dictum, vulputate eget lorem. Aliquam rutrum auctor
+                        tempus.
+                    </div>
+                }
+                variant="accent"
+                arrow={true}
+            />
+        </div>
+    );
+};
+
+export default WithArrowAccentExample;
+` } } />
+
+### Subtle Variant
+
+A popover with the subtle variant, which is the default style.
+
+<Canvas of={PopoverStories.SubtleVariant} source={ { code: `
+import React from "react";
+import { Popover } from "@webiny/admin-ui";
+
+const SubtleVariantExample = () => {
+    return (
+        <div className="wby-flex wby-items-center wby-justify-center wby-bg-neutral-dark wby-text-neutral-light wby-w-full wby-h-[300px]">
+            <Popover
+                trigger={<p>Popover trigger</p>}
+                content={
+                    <div className={"wby-w-[260px]"}>
+                        <strong>Lorem ipsum dolor sit amet</strong>, consectetur adipiscing elit. Morbi
+                        lectus leo, dapibus vitae mollis dictum, vulputate eget lorem. Aliquam rutrum auctor
+                        tempus.
+                    </div>
+                }
+                variant="subtle"
+            />
+        </div>
+    );
+};
+
+export default SubtleVariantExample;
+` } } />
+
+### With Arrow (Subtle Variant)
+
+A subtle variant popover with an arrow pointing to the trigger element.
+
+<Canvas of={PopoverStories.WithArrowSubtleVariant} source={ { code: `
+import React from "react";
+import { Popover } from "@webiny/admin-ui";
+
+const WithArrowSubtleExample = () => {
+    return (
+        <div className="wby-flex wby-items-center wby-justify-center wby-bg-neutral-dark wby-text-neutral-light wby-w-full wby-h-[300px]">
+            <Popover
+                trigger={<p>Popover trigger</p>}
+                content={
+                    <div className={"wby-w-[260px]"}>
+                        <strong>Lorem ipsum dolor sit amet</strong>, consectetur adipiscing elit. Morbi
+                        lectus leo, dapibus vitae mollis dictum, vulputate eget lorem. Aliquam rutrum auctor
+                        tempus.
+                    </div>
+                }
+                variant="subtle"
+                arrow={true}
+            />
+        </div>
+    );
+};
+
+export default WithArrowSubtleExample;
+` } } />
diff --git a/packages/admin-ui/src/Popover/Popover.stories.tsx b/packages/admin-ui/src/Popover/Popover.stories.tsx
new file mode 100644
index 00000000000..e6ed2d8d6d4
--- /dev/null
+++ b/packages/admin-ui/src/Popover/Popover.stories.tsx
@@ -0,0 +1,142 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Popover } from "./Popover";
+
+const meta: Meta<typeof Popover> = {
+    title: "Components/Popover",
+    component: Popover,
+    parameters: {
+        layout: "padded"
+    },
+    argTypes: {
+        align: {
+            control: "select",
+            options: ["start", "center", "end"]
+        },
+        side: {
+            control: "select",
+            options: ["top", "bottom", "left", "right"]
+        }
+    },
+    decorators: [
+        Story => (
+            <div className="wby-bg-[#f4f4f4] wby-flex wby-items-center wby-justify-center wby-w-full wby-h-[300px]">
+                <Story />
+            </div>
+        )
+    ]
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Popover>;
+
+export const Default: Story = {
+    args: {
+        trigger: <p>Popover trigger</p>,
+        content: (
+            <div className={"wby-w-[260px]"}>
+                <strong>Lorem ipsum dolor sit amet</strong>, consectetur adipiscing elit. Morbi
+                lectus leo, dapibus vitae mollis dictum, vulputate eget lorem. Aliquam rutrum auctor
+                tempus.
+            </div>
+        )
+    }
+};
+
+export const AccentVariant: Story = {
+    args: {
+        ...Default.args,
+        variant: "accent"
+    }
+};
+
+export const WithArrowAccentVariant: Story = {
+    args: {
+        ...AccentVariant.args,
+        arrow: true
+    }
+};
+
+export const SubtleVariant: Story = {
+    args: {
+        ...Default.args,
+        variant: "subtle"
+    },
+    decorators: [
+        Story => (
+            <div className="wby-flex wby-items-center wby-justify-center wby-bg-neutral-dark wby-text-neutral-light wby-w-full wby-h-[300px]">
+                <Story />
+            </div>
+        )
+    ]
+};
+
+export const WithArrowSubtleVariant: Story = {
+    args: {
+        variant: "subtle",
+        trigger: <p>Popover trigger</p>,
+        arrow: true,
+        content: (
+            <div className={"wby-w-[260px]"}>
+                <strong>Lorem ipsum dolor sit amet</strong>, consectetur adipiscing elit. Morbi
+                lectus leo, dapibus vitae mollis dictum, vulputate eget lorem. Aliquam rutrum auctor
+                tempus.
+            </div>
+        )
+    },
+    decorators: SubtleVariant.decorators
+};
+
+export const Documentation: Story = {
+    args: {
+        align: "center",
+        side: "bottom",
+        variant: "subtle",
+        arrow: false,
+        close: false,
+        trigger: <p>Popover trigger</p>,
+        content: (
+            <div className={"wby-w-[260px]"}>
+                <strong>Lorem ipsum dolor sit amet</strong>, consectetur adipiscing elit. Morbi
+                lectus leo, dapibus vitae mollis dictum, vulputate eget lorem. Aliquam rutrum auctor
+                tempus.
+            </div>
+        )
+    },
+    argTypes: {
+        trigger: {
+            description:
+                "The element that triggers the popover when clicked. Please refer to the example code for details.",
+            control: "none"
+        },
+        content: {
+            description:
+                "The content to display inside the popover. Please refer to the example code for details.",
+            control: "none"
+        },
+        side: {
+            description: "The side of the trigger where the popover appears.",
+            control: "select",
+            options: ["top", "right", "bottom", "left"]
+        },
+        align: {
+            description: "The alignment of the popover relative to the trigger.",
+            control: "select",
+            options: ["start", "center", "end"]
+        },
+        variant: {
+            description: "The visual style variant of the popover.",
+            control: "select",
+            options: ["accent", "subtle"]
+        },
+        arrow: {
+            description: "Whether to show an arrow pointing to the trigger.",
+            control: "boolean"
+        },
+        close: {
+            description: "Whether to show a close button inside the popover.",
+            control: "boolean"
+        }
+    }
+};
diff --git a/packages/admin-ui/src/Popover/Popover.tsx b/packages/admin-ui/src/Popover/Popover.tsx
new file mode 100644
index 00000000000..ce482773397
--- /dev/null
+++ b/packages/admin-ui/src/Popover/Popover.tsx
@@ -0,0 +1,47 @@
+import * as React from "react";
+import {
+    PopoverPrimitive,
+    type PopoverPrimitiveProps,
+    type PopoverPrimitiveContentProps
+} from "./primitives";
+import { makeDecoratable } from "~/utils";
+
+interface PopoverProps extends PopoverPrimitiveProps, Omit<PopoverPrimitiveProps, "children"> {
+    align?: PopoverPrimitiveContentProps["align"];
+    content: React.ReactNode;
+    arrow?: boolean;
+    close?: boolean;
+    side?: PopoverPrimitiveContentProps["side"];
+    trigger: React.ReactNode;
+    variant?: PopoverPrimitiveContentProps["variant"];
+}
+
+const DecoratablePopover = ({
+    align,
+    arrow,
+    close,
+    content,
+    side,
+    trigger,
+    variant,
+    ...props
+}: PopoverProps) => (
+    <PopoverPrimitive {...props}>
+        <PopoverPrimitive.Trigger asChild>{trigger}</PopoverPrimitive.Trigger>
+        <PopoverPrimitive.Content
+            align={align}
+            className={"wby-px-sm-extra wby-py-sm"}
+            arrow={arrow}
+            side={side}
+            variant={variant}
+        >
+            {close && <PopoverPrimitive.Close />}
+            {content}
+            {arrow && <PopoverPrimitive.Arrow variant={variant} />}
+        </PopoverPrimitive.Content>
+    </PopoverPrimitive>
+);
+
+const Popover = makeDecoratable("Popover", DecoratablePopover);
+
+export { Popover, type PopoverProps };
diff --git a/packages/admin-ui/src/Popover/index.ts b/packages/admin-ui/src/Popover/index.ts
new file mode 100644
index 00000000000..235b337c8c4
--- /dev/null
+++ b/packages/admin-ui/src/Popover/index.ts
@@ -0,0 +1,2 @@
+export * from "./Popover";
+export * from "./primitives";
diff --git a/packages/admin-ui/src/Popover/primitives/PopoverPrimitive.tsx b/packages/admin-ui/src/Popover/primitives/PopoverPrimitive.tsx
new file mode 100644
index 00000000000..1bc861eb36a
--- /dev/null
+++ b/packages/admin-ui/src/Popover/primitives/PopoverPrimitive.tsx
@@ -0,0 +1,30 @@
+import * as Popover from "@radix-ui/react-popover";
+import {
+    PopoverArrow,
+    PopoverContent,
+    type PopoverArrowProps as PopoverPrimitiveArrowProps,
+    type PopoverContentProps as PopoverPrimitiveContentProps
+} from "./components";
+import { withStaticProps } from "~/utils";
+
+const PopoverRoot = Popover.Root;
+const PopoverAnchor = Popover.Anchor;
+const PopoverTrigger = Popover.Trigger;
+const PopoverClose = Popover.Close;
+
+type PopoverPrimitiveProps = Popover.PopoverProps;
+
+const PopoverPrimitive = withStaticProps(PopoverRoot, {
+    Anchor: PopoverAnchor,
+    Arrow: PopoverArrow,
+    Close: PopoverClose,
+    Content: PopoverContent,
+    Trigger: PopoverTrigger
+});
+
+export {
+    PopoverPrimitive,
+    type PopoverPrimitiveProps,
+    type PopoverPrimitiveArrowProps,
+    type PopoverPrimitiveContentProps
+};
diff --git a/packages/admin-ui/src/Popover/primitives/components/PopoverArrow.tsx b/packages/admin-ui/src/Popover/primitives/components/PopoverArrow.tsx
new file mode 100644
index 00000000000..a2393ccaed3
--- /dev/null
+++ b/packages/admin-ui/src/Popover/primitives/components/PopoverArrow.tsx
@@ -0,0 +1,29 @@
+import * as React from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { cn, cva, type VariantProps } from "~/utils";
+
+const popoverArrowVariants = cva("", {
+    variants: {
+        variant: {
+            accent: "wby-border-neutral-black",
+            subtle: "wby-fill-neutral-base"
+        }
+    },
+    defaultVariants: {
+        variant: "subtle"
+    }
+});
+
+type PopoverArrowProps = PopoverPrimitive.PopoverArrowProps &
+    VariantProps<typeof popoverArrowVariants>;
+
+const PopoverArrow = ({ variant, className, ...props }: PopoverArrowProps) => (
+    <PopoverPrimitive.Arrow
+        {...props}
+        width={12}
+        height={6}
+        className={cn(popoverArrowVariants({ variant }), className)}
+    />
+);
+
+export { PopoverArrow, type PopoverArrowProps };
diff --git a/packages/admin-ui/src/Popover/primitives/components/PopoverContent.tsx b/packages/admin-ui/src/Popover/primitives/components/PopoverContent.tsx
new file mode 100644
index 00000000000..a9ae585c7f8
--- /dev/null
+++ b/packages/admin-ui/src/Popover/primitives/components/PopoverContent.tsx
@@ -0,0 +1,56 @@
+import * as React from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { cn, cva, type VariantProps } from "~/utils";
+
+const popoverContentVariants = cva(
+    [
+        "wby-z-50 wby-bg-neutral-base wby-rounded-sm wby-shadow-md wby-overflow-hidden wby-outline-none",
+        "data-[state=open]:wby-animate-in data-[state=closed]:wby-animate-out data-[state=closed]:wby-fade-out-0 data-[state=open]:wby-fade-in-0 data-[state=closed]:wby-zoom-out-95 data-[state=open]:wby-zoom-in-95",
+        "data-[side=bottom]:wby-slide-in-from-top-2 data-[side=left]:wby-slide-in-from-right-2 data-[side=right]:wby-slide-in-from-left-2 data-[side=top]:wby-slide-in-from-bottom-2"
+    ],
+    {
+        variants: {
+            variant: {
+                accent: "wby-bg-neutral-dark wby-text-neutral-light wby-border-neutral-black",
+                subtle: "wby-bg-neutral-base wby-text-neutral-primary wby-border-neutral-muted"
+            },
+            arrow: {
+                true: [
+                    "data-[side=top]:wby-mb-xs-plus",
+                    "data-[side=bottom]:wby-mt-xs-plus",
+                    "data-[side=left]:wby-mr-xs-plus",
+                    "data-[side=right]:wby-ml-xs-plus"
+                ],
+                false: ["wby-border-sm"]
+            }
+        },
+        defaultVariants: {
+            variant: "subtle"
+        }
+    }
+);
+
+type PopoverContentProps = PopoverPrimitive.PopoverContentProps &
+    VariantProps<typeof popoverContentVariants>;
+
+const PopoverContent = ({
+    className,
+    variant,
+    arrow = false,
+    align = "center",
+    sideOffset = 6,
+    collisionPadding = 8,
+    ...props
+}: PopoverContentProps) => (
+    <PopoverPrimitive.Portal>
+        <PopoverPrimitive.Content
+            align={align}
+            sideOffset={sideOffset}
+            collisionPadding={collisionPadding}
+            className={cn(popoverContentVariants({ variant, arrow }), className)}
+            {...props}
+        />
+    </PopoverPrimitive.Portal>
+);
+
+export { PopoverContent, type PopoverContentProps };
diff --git a/packages/admin-ui/src/Popover/primitives/components/index.ts b/packages/admin-ui/src/Popover/primitives/components/index.ts
new file mode 100644
index 00000000000..706121ee890
--- /dev/null
+++ b/packages/admin-ui/src/Popover/primitives/components/index.ts
@@ -0,0 +1,2 @@
+export * from "./PopoverArrow";
+export * from "./PopoverContent";
diff --git a/packages/admin-ui/src/Popover/primitives/index.ts b/packages/admin-ui/src/Popover/primitives/index.ts
new file mode 100644
index 00000000000..92a8b754ed7
--- /dev/null
+++ b/packages/admin-ui/src/Popover/primitives/index.ts
@@ -0,0 +1 @@
+export * from "./PopoverPrimitive";
diff --git a/packages/admin-ui/src/ProgressBar/ProgressBar.stories.tsx b/packages/admin-ui/src/ProgressBar/ProgressBar.stories.tsx
new file mode 100644
index 00000000000..3408a3f4923
--- /dev/null
+++ b/packages/admin-ui/src/ProgressBar/ProgressBar.stories.tsx
@@ -0,0 +1,110 @@
+import React, { useState, useEffect } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { ProgressBar } from "./ProgressBar";
+
+const meta: Meta<typeof ProgressBar> = {
+    title: "Components/ProgressBar",
+    component: ProgressBar,
+    parameters: {
+        layout: "padded"
+    }
+};
+
+export const Documentation: Story = {
+    args: {
+        value: 50
+    },
+    argTypes: {
+        value: {
+            description: "Current progress value (0-100)",
+            control: { type: "number", min: 0, max: 100 }
+        },
+        max: {
+            description: "Maximum value for the progress bar. Defaults to 100.",
+            control: { type: "number", min: 1 }
+        },
+        valuePosition: {
+            description:
+                "Position of the value label relative to the progress bar. Can be 'start', 'end',  or 'both'. Defaults to 'undefined'.",
+            control: {
+                type: "select",
+                options: ["start", "end", "both"]
+            }
+        },
+        getValueLabel: {
+            description:
+                "Function to format the value label. Receives the current value and returns a string.",
+            control: { type: "function" }
+        }
+    }
+};
+
+export default meta;
+type Story = StoryObj<typeof ProgressBar>;
+
+export const Default: Story = {
+    args: {
+        value: 50
+    }
+};
+
+export const WithCustomMaxValue: Story = {
+    args: {
+        ...Default.args,
+        max: 200
+    }
+};
+
+export const WithValuePositionStart: Story = {
+    args: {
+        ...Default.args,
+        valuePosition: "start"
+    }
+};
+
+export const WithValuePositionEnd: Story = {
+    args: {
+        ...Default.args,
+        valuePosition: "end"
+    }
+};
+
+export const WithValuePositionBoth: Story = {
+    args: {
+        ...Default.args,
+        valuePosition: "both"
+    }
+};
+
+export const WithGetValueLabel: Story = {
+    args: {
+        ...Default.args,
+        getValueLabel: (value: number) => `${value} mb`
+    }
+};
+
+export const WithControlledValue: Story = {
+    args: {
+        value: 0
+    },
+    render: args => {
+        const [value, setValue] = useState(args.value);
+
+        useEffect(() => {
+            const interval = setInterval(() => {
+                setValue((prevValue = 0) => {
+                    const value = Number(prevValue);
+
+                    if (value === 100) {
+                        return value;
+                    }
+                    return value + 5;
+                });
+            }, 100);
+
+            return () => clearInterval(interval);
+        }, []);
+
+        return <ProgressBar {...args} value={value} />;
+    }
+};
diff --git a/packages/admin-ui/src/ProgressBar/ProgressBar.tsx b/packages/admin-ui/src/ProgressBar/ProgressBar.tsx
new file mode 100644
index 00000000000..501fc5a6fa4
--- /dev/null
+++ b/packages/admin-ui/src/ProgressBar/ProgressBar.tsx
@@ -0,0 +1,33 @@
+import * as React from "react";
+import {
+    ProgressIndicator,
+    ProgressRoot,
+    type ProgressRootProps,
+    ProgressValue
+} from "./components";
+import { useProgressBar } from "./useProgressBar";
+import { cn, makeDecoratable } from "~/utils";
+
+interface ProgressBarProps extends ProgressRootProps {
+    valuePosition?: "start" | "end" | "both";
+}
+
+const DecoratableProgressBar = ({ valuePosition, className, ...props }: ProgressBarProps) => {
+    const { vm } = useProgressBar(props);
+
+    return (
+        <div className={cn("wby-w-full wby-flex wby-items-center wby-gap-sm wby-py-xs", className)}>
+            {valuePosition && valuePosition !== "end" && (
+                <ProgressValue value={valuePosition === "start" ? vm.textValue : vm.textMin} />
+            )}
+            <ProgressRoot {...props}>
+                <ProgressIndicator value={vm.value} />
+            </ProgressRoot>
+            {valuePosition && valuePosition !== "start" && <ProgressValue value={vm.textValue} />}
+        </div>
+    );
+};
+
+const ProgressBar = makeDecoratable("ProgressBar", DecoratableProgressBar);
+
+export { ProgressBar, type ProgressBarProps };
diff --git a/packages/admin-ui/src/ProgressBar/components/ProgressIndicator.tsx b/packages/admin-ui/src/ProgressBar/components/ProgressIndicator.tsx
new file mode 100644
index 00000000000..4e71e467d2e
--- /dev/null
+++ b/packages/admin-ui/src/ProgressBar/components/ProgressIndicator.tsx
@@ -0,0 +1,18 @@
+import React from "react";
+import * as ProgressPrimitive from "@radix-ui/react-progress";
+
+interface ProgressIndicatorProps {
+    value?: number | null;
+}
+
+const ProgressIndicator = ({ value = 0 }: ProgressIndicatorProps) => {
+    return (
+        <ProgressPrimitive.Indicator
+            data-slot="progress-indicator"
+            className="wby-bg-primary-default wby-h-full wby-w-full wby-flex-1 wby-rounded-full wby-transition-all"
+            style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+        />
+    );
+};
+
+export { ProgressIndicator, type ProgressIndicatorProps };
diff --git a/packages/admin-ui/src/ProgressBar/components/ProgressRoot.tsx b/packages/admin-ui/src/ProgressBar/components/ProgressRoot.tsx
new file mode 100644
index 00000000000..86cb5520b9f
--- /dev/null
+++ b/packages/admin-ui/src/ProgressBar/components/ProgressRoot.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+import * as ProgressPrimitive from "@radix-ui/react-progress";
+import { cn } from "~/utils";
+
+type ProgressRootProps = ProgressPrimitive.ProgressProps;
+
+const ProgressRoot = ({ className, ...props }: ProgressRootProps) => {
+    return (
+        <ProgressPrimitive.Root
+            data-slot="progress"
+            className={cn(
+                "wby-bg-neutral-muted wby-relative wby-h-xs-plus wby-w-full wby-overflow-hidden wby-rounded-full",
+                className
+            )}
+            {...props}
+        />
+    );
+};
+
+export { ProgressRoot, type ProgressRootProps };
diff --git a/packages/admin-ui/src/ProgressBar/components/ProgressValue.tsx b/packages/admin-ui/src/ProgressBar/components/ProgressValue.tsx
new file mode 100644
index 00000000000..b50ec3b72af
--- /dev/null
+++ b/packages/admin-ui/src/ProgressBar/components/ProgressValue.tsx
@@ -0,0 +1,16 @@
+import React from "react";
+import { Text } from "~/Text";
+
+interface ProgressBarProps {
+    value: string;
+}
+
+const ProgressValue = ({ value }: ProgressBarProps) => {
+    return (
+        <Text size={"sm"} className={"wby-leading-none wby-shrink-0"}>
+            {value}
+        </Text>
+    );
+};
+
+export { ProgressValue, type ProgressBarProps };
diff --git a/packages/admin-ui/src/ProgressBar/components/index.ts b/packages/admin-ui/src/ProgressBar/components/index.ts
new file mode 100644
index 00000000000..2469b1c5f8a
--- /dev/null
+++ b/packages/admin-ui/src/ProgressBar/components/index.ts
@@ -0,0 +1,3 @@
+export * from "./ProgressIndicator";
+export * from "./ProgressRoot";
+export * from "./ProgressValue";
diff --git a/packages/admin-ui/src/ProgressBar/index.ts b/packages/admin-ui/src/ProgressBar/index.ts
new file mode 100644
index 00000000000..a550d58d84d
--- /dev/null
+++ b/packages/admin-ui/src/ProgressBar/index.ts
@@ -0,0 +1 @@
+export * from "./ProgressBar";
diff --git a/packages/admin-ui/src/ProgressBar/presenters/ProgressBarPresenter.test.ts b/packages/admin-ui/src/ProgressBar/presenters/ProgressBarPresenter.test.ts
new file mode 100644
index 00000000000..75710a75983
--- /dev/null
+++ b/packages/admin-ui/src/ProgressBar/presenters/ProgressBarPresenter.test.ts
@@ -0,0 +1,36 @@
+import { ProgressBarPresenter } from "./ProgressBarPresenter";
+
+describe("ProgressBarPresenter", () => {
+    const presenter = new ProgressBarPresenter();
+
+    it("should initialize with default values", () => {
+        presenter.init({});
+        expect(presenter.vm.value).toBe(0);
+        expect(presenter.vm.textValue).toBe("0%");
+        expect(presenter.vm.min).toBe(0);
+        expect(presenter.vm.textMin).toBe("0");
+        expect(presenter.vm.max).toBe(100);
+        expect(presenter.vm.textMax).toBe("100");
+    });
+
+    it("should initialize with custom values", () => {
+        presenter.init({ value: 50, max: 200 });
+        expect(presenter.vm.value).toBe(50);
+        expect(presenter.vm.textValue).toBe("25%");
+        expect(presenter.vm.max).toBe(200);
+        expect(presenter.vm.textMax).toBe("200");
+    });
+
+    it("should use custom getValueLabel function", () => {
+        const getValueLabel = (value: number, max: number) => `${value}/${max}`;
+        presenter.init({ value: 30, max: 150, getValueLabel });
+        expect(presenter.vm.textValue).toBe("30/150");
+    });
+
+    it("should handle null and undefined values gracefully", () => {
+        presenter.init({ value: null, max: undefined });
+        expect(presenter.vm.value).toBe(0);
+        expect(presenter.vm.max).toBe(100);
+        expect(presenter.vm.textValue).toBe("0%");
+    });
+});
diff --git a/packages/admin-ui/src/ProgressBar/presenters/ProgressBarPresenter.ts b/packages/admin-ui/src/ProgressBar/presenters/ProgressBarPresenter.ts
new file mode 100644
index 00000000000..d67096f94c8
--- /dev/null
+++ b/packages/admin-ui/src/ProgressBar/presenters/ProgressBarPresenter.ts
@@ -0,0 +1,65 @@
+import { makeAutoObservable } from "mobx";
+
+interface ProgressBarPresenterParams {
+    value?: number | null;
+    max?: number;
+    getValueLabel?: (value: number, max: number) => string;
+}
+
+interface ProgressBarVm {
+    value: number;
+    textValue: string;
+    min: number;
+    textMin: string;
+    max: number;
+    textMax: string;
+}
+
+interface IProgressBarPresenter {
+    get vm(): ProgressBarVm;
+    init: (params: ProgressBarPresenterParams) => void;
+}
+
+class ProgressBarPresenter implements IProgressBarPresenter {
+    private params?: ProgressBarPresenterParams = undefined;
+
+    constructor() {
+        makeAutoObservable(this);
+    }
+
+    init(params: ProgressBarPresenterParams) {
+        this.params = params;
+    }
+
+    get vm(): ProgressBarVm {
+        return {
+            value: this.value,
+            textValue: this.getValueLabel(this.value, this.max),
+            min: this.min,
+            textMin: String(this.min),
+            max: this.max,
+            textMax: String(this.max)
+        };
+    }
+
+    private get value(): number {
+        return this.params?.value ?? 0;
+    }
+
+    private get min(): number {
+        return 0;
+    }
+
+    private get max(): number {
+        return this.params?.max ?? 100;
+    }
+
+    private getValueLabel(value: number, max: number): string {
+        if (this.params?.getValueLabel) {
+            return this.params.getValueLabel(value, max);
+        }
+        return `${Math.round((value / max) * 100)}%`;
+    }
+}
+
+export { ProgressBarPresenter, type ProgressBarVm, type ProgressBarPresenterParams };
diff --git a/packages/admin-ui/src/ProgressBar/presenters/index.ts b/packages/admin-ui/src/ProgressBar/presenters/index.ts
new file mode 100644
index 00000000000..0164e717393
--- /dev/null
+++ b/packages/admin-ui/src/ProgressBar/presenters/index.ts
@@ -0,0 +1 @@
+export * from "./ProgressBarPresenter";
diff --git a/packages/admin-ui/src/ProgressBar/useProgressBar.ts b/packages/admin-ui/src/ProgressBar/useProgressBar.ts
new file mode 100644
index 00000000000..5aa4d3b4e42
--- /dev/null
+++ b/packages/admin-ui/src/ProgressBar/useProgressBar.ts
@@ -0,0 +1,35 @@
+import { useEffect, useMemo, useState } from "react";
+import { autorun } from "mobx";
+import type { ProgressBarProps } from "./ProgressBar";
+import { ProgressBarPresenter, type ProgressBarPresenterParams } from "./presenters";
+
+export const useProgressBar = (props: ProgressBarProps) => {
+    const params: ProgressBarPresenterParams = useMemo(
+        () => ({
+            value: props.value,
+            max: props.max,
+            getValueLabel: props.getValueLabel
+        }),
+        [props.value, props.max, props.getValueLabel]
+    );
+
+    const presenter = useMemo(() => {
+        return new ProgressBarPresenter();
+    }, []);
+
+    const [vm, setVm] = useState(presenter.vm);
+
+    useEffect(() => {
+        presenter.init(params);
+    }, [params]);
+
+    useEffect(() => {
+        return autorun(() => {
+            setVm(presenter.vm);
+        });
+    }, [presenter]);
+
+    return {
+        vm
+    };
+};
diff --git a/packages/admin-ui/src/Providers/Providers.tsx b/packages/admin-ui/src/Providers/Providers.tsx
new file mode 100644
index 00000000000..c4703088117
--- /dev/null
+++ b/packages/admin-ui/src/Providers/Providers.tsx
@@ -0,0 +1,16 @@
+import React from "react";
+import { Toast } from "~/Toast";
+import { Tooltip } from "~/Tooltip";
+
+export interface ProvidersProps {
+    children?: React.ReactNode;
+}
+
+export const Providers = ({ children }: ProvidersProps) => {
+    return (
+        <>
+            <Tooltip.Provider>{children}</Tooltip.Provider>
+            <Toast.Provider />
+        </>
+    );
+};
diff --git a/packages/admin-ui/src/Providers/index.ts b/packages/admin-ui/src/Providers/index.ts
new file mode 100644
index 00000000000..5dfd111bbd6
--- /dev/null
+++ b/packages/admin-ui/src/Providers/index.ts
@@ -0,0 +1 @@
+export * from "./Providers";
diff --git a/packages/admin-ui/src/RadioGroup/RadioGroup.mdx b/packages/admin-ui/src/RadioGroup/RadioGroup.mdx
new file mode 100644
index 00000000000..0ce96f37bf6
--- /dev/null
+++ b/packages/admin-ui/src/RadioGroup/RadioGroup.mdx
@@ -0,0 +1,148 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+
+import * as RadioGroupStories from './RadioGroup.stories';
+
+<Meta of={RadioGroupStories} />
+
+# Radio Group
+
+Radio buttons allow users to select only one option from a set of mutually exclusive choices. A radio group is a collection of radio buttons that are related to each other, ensuring that only one option can be selected at a time.
+
+## Usage
+
+<Canvas of={RadioGroupStories.Documentation} source={ { code: `
+import React, { useState } from "react";
+
+import { RadioGroup } from "@webiny/admin-ui";
+
+const RadioGroupExample = () => {
+    const [value, setValue] = useState("");
+    const [validation, setValidation] = useState({ isValid: true, message: "" });
+
+    const handleValidation = () => {
+        if (!value) {
+            setValidation({ isValid: false, message: "This field is required" });
+        } else {
+            setValidation({ isValid: true, message: "" });
+        }
+    };
+
+    return (
+        <RadioGroup
+            label="Deployment Option"
+            description="Choose your preferred deployment method"
+            note="This setting will determine how your application is deployed"
+            required={true}
+            items={[
+                {
+                    label: "Automatic Deployment",
+                    value: "automatic"
+                },
+                {
+                    label: "Manual Deployment",
+                    value: "manual"
+                },
+                {
+                    label: "Scheduled Deployment",
+                    value: "scheduled"
+                }
+            ]}
+            value={value}
+            validation={validation}
+            onChange={newValue => setValue(newValue)}
+            onBlur={handleValidation}
+        />
+    );
+};
+
+export default RadioGroupExample;
+
+`} }
+    additionalActions={[
+        {
+            title: 'Open in GitHub',
+            onClick: () => {
+                window.open(
+                    'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/RadioGroup/RadioGroup.tsx',
+                    '_blank'
+                );
+            },
+        }
+    ]}
+/>
+
+<Controls of={RadioGroupStories.Documentation} />
+
+> **Note:** While the `required` prop will show the required indicator (*) next to the label, you need to implement the validation logic using the `validation` and `onBlur` props to handle the actual validation behavior.
+
+```jsx
+import React, { useState } from "react";
+
+import { RadioGroup } from "@webiny/admin-ui";
+
+const RadioGroupExample = () => {
+    const [value, setValue] = useState("");
+    const [validation, setValidation] = useState({ isValid: true, message: "" });
+
+    const handleValidation = () => {
+        if (!value) {
+            setValidation({ isValid: false, message: "This field is required" });
+        } else {
+            setValidation({ isValid: true, message: "" });
+        }
+    };
+
+    return (
+        <RadioGroup
+            label="Deployment Option"
+            description="Choose your preferred deployment method"
+            note="This setting will determine how your application is deployed"
+            required={true}
+            items={[
+                {
+                    label: "Automatic Deployment",
+                    value: "automatic"
+                },
+                {
+                    label: "Manual Deployment",
+                    value: "manual"
+                },
+                {
+                    label: "Scheduled Deployment",
+                    value: "scheduled"
+                }
+            ]}
+            value={value}
+            validation={validation}
+            onChange={newValue => setValue(newValue)}
+            onBlur={handleValidation}
+        />
+    );
+};
+
+export default RadioGroupExample;
+```
+
+## Anatomy
+
+### General
+Radio input enable users to select a single item from a list of offered choices. A radio input group organizes related radio input options together for better clarity and functionality.
+
+<img src="/images/storybook/radio-group/anatomy.png" alt="Anatomy"/>
+
+### Radio input options
+Radio inputs can exist in two different states: Selected and Not Selected. When a radio input is used for bulk selection, all other options must be excluded since the very purpose of a radio input is to provide only one selectable option.
+<img src="/images/storybook/radio-group/options.png" alt="Radio input options"/>
+
+### States
+<img src="/images/storybook/radio-group/states.png" alt="States"/>
+
+## Usage
+
+### Text overflow
+When the radio item text content is too long for the horizontal space available, the content should wrap to form another line aligning the text and checkbox on top.
+
+<img src="/images/storybook/radio-group/text-overflow.png" alt="Text overflow"/>
+
+
+
diff --git a/packages/admin-ui/src/RadioGroup/RadioGroup.stories.tsx b/packages/admin-ui/src/RadioGroup/RadioGroup.stories.tsx
new file mode 100644
index 00000000000..696ecc0722c
--- /dev/null
+++ b/packages/admin-ui/src/RadioGroup/RadioGroup.stories.tsx
@@ -0,0 +1,168 @@
+import React, { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { RadioGroup } from "./RadioGroup";
+
+const meta: Meta<typeof RadioGroup> = {
+    title: "Components/Form/RadioGroup",
+    component: RadioGroup,
+    argTypes: {
+        disabled: {
+            control: "boolean",
+            defaultValue: false
+        }
+    },
+    parameters: {
+        layout: "padded"
+    },
+    render: args => {
+        const [value, setValue] = useState(args.value);
+        return <RadioGroup {...args} value={value} onChange={value => setValue(value)} />;
+    }
+};
+
+export default meta;
+type Story = StoryObj<typeof RadioGroup>;
+
+export const Default: Story = {
+    args: {
+        items: [
+            {
+                label: "Value 1",
+                value: "value-1"
+            },
+            {
+                label: "Value 2",
+                value: "value-2"
+            },
+            {
+                label: "Value 3",
+                value: "value-3"
+            }
+        ]
+    }
+};
+
+export const WithLabel: Story = {
+    args: {
+        ...Default.args,
+        label: "Any field label"
+    }
+};
+
+export const WithRequiredLabel: Story = {
+    args: {
+        ...Default.args,
+        label: "Any field label",
+        required: true
+    }
+};
+
+export const WithDescription: Story = {
+    args: {
+        ...Default.args,
+        description: "Provide the required information for processing your request."
+    }
+};
+
+export const WithNotes: Story = {
+    args: {
+        ...Default.args,
+        note: "Note: Ensure your selection or input is accurate before proceeding."
+    }
+};
+
+export const WithErrors: Story = {
+    args: {
+        ...Default.args,
+        validation: {
+            isValid: false,
+            message: "This field is required."
+        }
+    }
+};
+
+export const Disabled: Story = {
+    args: {
+        ...Default.args,
+        label: "Any field label",
+        disabled: true,
+        items: [
+            {
+                label: "Value 1",
+                value: "value-1",
+                disabled: true
+            },
+            {
+                label: "Value 2",
+                value: "value-2",
+                disabled: true
+            },
+            {
+                label: "Value 3",
+                value: "value-3",
+                disabled: true
+            }
+        ]
+    }
+};
+
+export const FullExample: Story = {
+    args: {
+        ...Default.args,
+        label: "Select which deploy option do you prefer",
+        required: true,
+        description:
+            "Deployment option is simply a way of parsing the data based on your database settings.",
+        note: "Note: Ensure your selection or input is accurate before proceeding.",
+        validation: {
+            isValid: false,
+            message: "You must select at least one option!"
+        }
+    }
+};
+
+export const Documentation: Story = {
+    render: args => {
+        const [value, setValue] = useState("");
+        const [validation, setValidation] = useState({ isValid: true, message: "" });
+
+        const handleValidation = () => {
+            if (args.required && !value) {
+                setValidation({ isValid: false, message: "This field is required" });
+            } else {
+                setValidation({ isValid: true, message: "" });
+            }
+        };
+
+        return (
+            <RadioGroup
+                {...args}
+                value={value}
+                validation={validation}
+                onChange={newValue => setValue(newValue)}
+                onBlur={handleValidation}
+            />
+        );
+    },
+    args: {
+        label: "Deployment Option",
+        description: "Choose your preferred deployment method",
+        note: "This setting will determine how your application is deployed",
+        required: true,
+        disabled: false,
+        items: [
+            {
+                label: "Automatic Deployment",
+                value: "automatic"
+            },
+            {
+                label: "Manual Deployment",
+                value: "manual"
+            },
+            {
+                label: "Scheduled Deployment",
+                value: "scheduled"
+            }
+        ]
+    }
+};
diff --git a/packages/admin-ui/src/RadioGroup/RadioGroup.tsx b/packages/admin-ui/src/RadioGroup/RadioGroup.tsx
new file mode 100644
index 00000000000..5d3ef4458dd
--- /dev/null
+++ b/packages/admin-ui/src/RadioGroup/RadioGroup.tsx
@@ -0,0 +1,52 @@
+import React, { useMemo } from "react";
+import { makeDecoratable } from "~/utils";
+import { RadioGroupPrimitive, RadioGroupPrimitiveProps } from "./primitives";
+import {
+    FormComponentDescription,
+    FormComponentErrorMessage,
+    FormComponentLabel,
+    FormComponentNote,
+    FormComponentProps
+} from "~/FormComponent";
+
+type RadioGroupProps = RadioGroupPrimitiveProps & FormComponentProps;
+
+const DecoratableRadioGroup = ({
+    label,
+    description,
+    note,
+    required,
+    disabled,
+    validation,
+    ...props
+}: RadioGroupProps) => {
+    const { isValid: validationIsValid, message: validationMessage } = validation || {};
+    const invalid = useMemo(() => validationIsValid === false, [validationIsValid]);
+
+    return (
+        <div className={"wby-w-full"}>
+            <FormComponentLabel
+                text={label}
+                required={required}
+                disabled={disabled}
+                invalid={invalid}
+            />
+            <FormComponentDescription
+                text={description}
+                disabled={disabled}
+                className={"wby-mb-xs-plus"}
+            />
+            <FormComponentErrorMessage
+                text={validationMessage}
+                invalid={invalid}
+                disabled={disabled}
+                className={"wby-mt-none wby-mb-xs-plus"}
+            />
+            <RadioGroupPrimitive {...props} />
+            <FormComponentNote text={note} disabled={disabled} />
+        </div>
+    );
+};
+const RadioGroup = makeDecoratable("RadioGroup", DecoratableRadioGroup);
+
+export { RadioGroup };
diff --git a/packages/admin-ui/src/RadioGroup/domains/RadioItem.ts b/packages/admin-ui/src/RadioGroup/domains/RadioItem.ts
new file mode 100644
index 00000000000..afb744153de
--- /dev/null
+++ b/packages/admin-ui/src/RadioGroup/domains/RadioItem.ts
@@ -0,0 +1,46 @@
+import { RadioItemParams } from "./RadioItemParams";
+import { generateId } from "~/utils";
+
+export class RadioItem {
+    private readonly _id: string;
+    private readonly _label: any;
+    private readonly _value: string | number;
+    private readonly _disabled: boolean;
+
+    protected constructor(data: {
+        id: string;
+        label: any;
+        value: string | number;
+        disabled: boolean;
+    }) {
+        this._id = data.id;
+        this._label = data.label;
+        this._value = data.value;
+        this._disabled = data.disabled;
+    }
+
+    static create(data: RadioItemParams) {
+        return new RadioItem({
+            id: generateId(data.id),
+            label: data.label,
+            value: data.value,
+            disabled: data.disabled ?? false
+        });
+    }
+
+    get id() {
+        return this._id;
+    }
+
+    get label() {
+        return this._label;
+    }
+
+    get value() {
+        return this._value;
+    }
+
+    get disabled() {
+        return this._disabled;
+    }
+}
diff --git a/packages/admin-ui/src/RadioGroup/domains/RadioItemFormatted.ts b/packages/admin-ui/src/RadioGroup/domains/RadioItemFormatted.ts
new file mode 100644
index 00000000000..c33db823be7
--- /dev/null
+++ b/packages/admin-ui/src/RadioGroup/domains/RadioItemFormatted.ts
@@ -0,0 +1,8 @@
+import React from "react";
+
+export interface RadioItemFormatted {
+    id: string;
+    label: string | React.ReactNode;
+    value: string;
+    disabled: boolean;
+}
diff --git a/packages/admin-ui/src/RadioGroup/domains/RadioItemFormatter.ts b/packages/admin-ui/src/RadioGroup/domains/RadioItemFormatter.ts
new file mode 100644
index 00000000000..b8e2cd1f4a1
--- /dev/null
+++ b/packages/admin-ui/src/RadioGroup/domains/RadioItemFormatter.ts
@@ -0,0 +1,13 @@
+import { RadioItemFormatted } from "./RadioItemFormatted";
+import { RadioItem } from "./RadioItem";
+
+export class RadioItemFormatter {
+    static format(item: RadioItem): RadioItemFormatted {
+        return {
+            id: item.id,
+            label: item.label,
+            value: String(item.value),
+            disabled: item.disabled
+        };
+    }
+}
diff --git a/packages/admin-ui/src/RadioGroup/domains/RadioItemParams.ts b/packages/admin-ui/src/RadioGroup/domains/RadioItemParams.ts
new file mode 100644
index 00000000000..d043675800e
--- /dev/null
+++ b/packages/admin-ui/src/RadioGroup/domains/RadioItemParams.ts
@@ -0,0 +1,8 @@
+import React from "react";
+
+export interface RadioItemParams {
+    id?: string;
+    label: string | React.ReactNode;
+    value: string | number;
+    disabled?: boolean;
+}
diff --git a/packages/admin-ui/src/RadioGroup/domains/index.ts b/packages/admin-ui/src/RadioGroup/domains/index.ts
new file mode 100644
index 00000000000..54f530b2f67
--- /dev/null
+++ b/packages/admin-ui/src/RadioGroup/domains/index.ts
@@ -0,0 +1,4 @@
+export * from "./RadioItem";
+export * from "./RadioItemFormatted";
+export * from "./RadioItemFormatter";
+export * from "./RadioItemParams";
diff --git a/packages/admin-ui/src/RadioGroup/index.ts b/packages/admin-ui/src/RadioGroup/index.ts
new file mode 100644
index 00000000000..7cdf8dbac36
--- /dev/null
+++ b/packages/admin-ui/src/RadioGroup/index.ts
@@ -0,0 +1,2 @@
+export * from "./primitives";
+export * from "./RadioGroup";
diff --git a/packages/admin-ui/src/RadioGroup/primitives/Radio.tsx b/packages/admin-ui/src/RadioGroup/primitives/Radio.tsx
new file mode 100644
index 00000000000..9a3100a06f1
--- /dev/null
+++ b/packages/admin-ui/src/RadioGroup/primitives/Radio.tsx
@@ -0,0 +1,46 @@
+import * as React from "react";
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import { cn, makeDecoratable } from "~/utils";
+import { Label } from "~/Label";
+
+/**
+ * RadioItem
+ */
+interface RadioProps extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item> {
+    label: string | React.ReactNode;
+    id: string;
+}
+
+const DecoratableRadio = ({ className, label, id, ...props }: RadioProps) => {
+    return (
+        <div className="wby-flex wby-items-start wby-space-x-sm-extra">
+            <RadioGroupPrimitive.Item
+                id={id}
+                className={cn(
+                    [
+                        "wby-group wby-peer wby-aspect-square wby-h-md wby-w-md wby-rounded-xl wby-mt-xxs",
+                        "wby-bg-neutral-base wby-border-sm wby-border-neutral-muted wby-ring-offset-background",
+                        "focus:wby-outline-none focus-visible:wby-border-accent-default focus-visible:wby-ring-lg focus-visible:wby-ring-primary-dimmed focus-visible:wby-ring-offset-0",
+                        "disabled:wby-cursor-not-allowed disabled:wby-border-neutral-muted disabled:wby-bg-neutral-disabled"
+                    ],
+                    className
+                )}
+                {...props}
+            >
+                <RadioGroupPrimitive.Indicator className="wby-flex wby-items-center wby-justify-center">
+                    <span
+                        className={cn([
+                            "wby-h-sm wby-w-sm wby-rounded-xl",
+                            "wby-bg-primary-default",
+                            "group-disabled:wby-bg-neutral-strong"
+                        ])}
+                    />
+                </RadioGroupPrimitive.Indicator>
+            </RadioGroupPrimitive.Item>
+            <Label id={id} text={label} weight={"light"} className={"wby-text-md"} />
+        </div>
+    );
+};
+const Radio = makeDecoratable("Radio", DecoratableRadio);
+
+export { Radio, type RadioProps };
diff --git a/packages/admin-ui/src/RadioGroup/primitives/RadioGroupPrimitive.stories.tsx b/packages/admin-ui/src/RadioGroup/primitives/RadioGroupPrimitive.stories.tsx
new file mode 100644
index 00000000000..ebcbfe98638
--- /dev/null
+++ b/packages/admin-ui/src/RadioGroup/primitives/RadioGroupPrimitive.stories.tsx
@@ -0,0 +1,218 @@
+import React, { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { RadioGroupPrimitive } from "./RadioGroupPrimitive";
+import { Text } from "~/Text";
+import { Button } from "~/Button";
+
+const meta: Meta<typeof RadioGroupPrimitive> = {
+    title: "Components/Form Primitives/RadioGroup",
+    component: RadioGroupPrimitive,
+    parameters: {
+        layout: "padded"
+    },
+    render: args => {
+        const [value, setValue] = useState(args.value);
+        return (
+            <div className={"wby-w-full"}>
+                <RadioGroupPrimitive {...args} value={value} onChange={value => setValue(value)} />
+                <div className={"wby-mt-4 wby-text-center"}>
+                    Current selected value: <pre>{value}</pre>
+                </div>
+            </div>
+        );
+    }
+};
+
+export default meta;
+
+type Story = StoryObj<typeof RadioGroupPrimitive>;
+
+export const Default: Story = {
+    args: {
+        items: [
+            {
+                value: "value-1",
+                label: "Value 1"
+            },
+            {
+                value: "value-2",
+                label: "Value 2"
+            },
+            {
+                value: "value-3",
+                label: "Value 3"
+            }
+        ]
+    }
+};
+
+export const Disabled: Story = {
+    args: {
+        ...Default.args,
+        value: "value-2",
+        disabled: true,
+        items: [
+            {
+                value: "value-1",
+                label: "Value 1"
+            },
+            {
+                value: "value-2",
+                label: "Value 2"
+            },
+            {
+                value: "value-3",
+                label: "Value 3"
+            }
+        ]
+    }
+};
+
+export const WithDefaultOption: Story = {
+    args: {
+        ...Default.args,
+        value: "value-2"
+    }
+};
+
+export const WithDisabledOption: Story = {
+    args: {
+        ...Default.args,
+        items: [
+            {
+                value: "value-1",
+                label: "Value 1"
+            },
+            {
+                value: "value-2",
+                label: "Value 2",
+                disabled: true
+            },
+            {
+                value: "value-3",
+                label: "Value 3"
+            }
+        ]
+    }
+};
+
+export const WithDefaultDisabledOption: Story = {
+    args: {
+        ...Default.args,
+        value: "value-2",
+        items: [
+            {
+                value: "value-1",
+                label: "Value 1"
+            },
+            {
+                value: "value-2",
+                label: "Value 2",
+                disabled: true
+            },
+            {
+                value: "value-3",
+                label: "Value 3"
+            }
+        ]
+    }
+};
+
+export const WithLongOption: Story = {
+    args: {
+        ...Default.args,
+        items: [
+            {
+                value: "value-1",
+                label: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer fringilla magna vel massa suscipit mollis. Nunc dui felis, iaculis id tortor ut, hendrerit pulvinar felis."
+            },
+            {
+                value: "value-2",
+                label: " Pellentesque erat ipsum, posuere dapibus diam id, accumsan sagittis mi. In eu nibh ut nunc ultricies placerat.",
+                disabled: true
+            },
+            {
+                value: "value-3",
+                label: "Integer a hendrerit dui. Sed tincidunt vel nibh a finibus."
+            }
+        ]
+    }
+};
+
+export const WithComplexOptions: Story = {
+    args: {
+        ...Default.args,
+        items: [
+            {
+                id: "value-1",
+                value: "value-1",
+                label: (
+                    <div>
+                        <div>{"Value 1"}</div>
+                        <Text size={"sm"}>{"Option description 1"}</Text>
+                    </div>
+                )
+            },
+            {
+                id: "value-2",
+                value: "value-2",
+                label: (
+                    <div>
+                        <div>{"Value 2"}</div>
+                        <Text size={"sm"}>{"Option description 2"}</Text>
+                    </div>
+                )
+            },
+            {
+                id: "value-3",
+                value: "value-3",
+                label: (
+                    <div>
+                        <div>{"Value 3"}</div>
+                        <Text size={"sm"}>{"Option description 3"}</Text>
+                    </div>
+                )
+            }
+        ]
+    }
+};
+
+export const WithExternalValueControl: Story = {
+    args: {
+        value: "value-2",
+        items: [
+            {
+                value: "value-1",
+                label: "Value 1"
+            },
+            {
+                value: "value-2",
+                label: "Value 2"
+            },
+            {
+                value: "value-3",
+                label: "Value 3"
+            }
+        ]
+    },
+    render: args => {
+        const [value, setValue] = useState(args.value);
+        return (
+            <div className={"wby-w-full"}>
+                <div>
+                    <RadioGroupPrimitive
+                        {...args}
+                        value={value}
+                        onChange={value => setValue(value)}
+                    />
+                </div>
+                <div className={"wby-mt-4 wby-text-center"}>
+                    <Button onClick={() => setValue(args.value)} text={"Reset"} />
+                </div>
+                <div className={"wby-mt-4 wby-text-center"}>
+                    Current selected value: <pre>{value}</pre>
+                </div>
+            </div>
+        );
+    }
+};
diff --git a/packages/admin-ui/src/RadioGroup/primitives/RadioGroupPrimitive.tsx b/packages/admin-ui/src/RadioGroup/primitives/RadioGroupPrimitive.tsx
new file mode 100644
index 00000000000..b79d2f34155
--- /dev/null
+++ b/packages/admin-ui/src/RadioGroup/primitives/RadioGroupPrimitive.tsx
@@ -0,0 +1,90 @@
+import * as React from "react";
+import * as RadioGroupPrimitives from "@radix-ui/react-radio-group";
+import { cn } from "~/utils";
+import { Radio } from "./Radio";
+import { RadioItemParams, RadioItemFormatted } from "../domains";
+import { useRadioGroup } from "./useRadioGroup";
+
+/**
+ * Radio Group Root
+ */
+const RadioGroupRoot = ({ className, ...props }: RadioGroupPrimitives.RadioGroupProps) => {
+    return (
+        <RadioGroupPrimitives.Root
+            className={cn("wby-grid wby-gap-sm-extra wby-py-xs-plus", className)}
+            {...props}
+        />
+    );
+};
+
+/**
+ * Radio Group Renderer
+ */
+interface RadioGroupPrimitiveProps
+    extends Omit<
+        RadioGroupPrimitives.RadioGroupProps,
+        "defaultValue" | "onChange" | "onValueChange" | "value"
+    > {
+    items: RadioItemParams[];
+    /**
+     * Callback triggered when the selected value changes.
+     */
+    onChange?: (value: string) => void;
+    /**
+     * Optional selected item.
+     */
+    value?: string;
+}
+
+interface RadioGroupVm {
+    items: RadioItemFormatted[];
+}
+
+interface RadioGroupRendererProps extends Omit<RadioGroupPrimitiveProps, "onChange"> {
+    items: RadioItemFormatted[];
+    changeValue: (value: string) => void;
+}
+
+const RadioGroupRenderer = ({ items, changeValue, value, disabled }: RadioGroupRendererProps) => {
+    return (
+        <RadioGroupRoot
+            value={value}
+            onValueChange={value => changeValue(value)}
+            disabled={disabled}
+        >
+            {items.map(item => (
+                <Radio
+                    id={item.id}
+                    value={item.value}
+                    key={item.id}
+                    label={item.label}
+                    disabled={item.disabled}
+                />
+            ))}
+        </RadioGroupRoot>
+    );
+};
+
+/**
+ * Radio Group Primitive
+ */
+const RadioGroupPrimitive = (props: RadioGroupPrimitiveProps) => {
+    const { vm, changeValue } = useRadioGroup(props);
+    return <RadioGroupRenderer {...props} items={vm.items} changeValue={changeValue} />;
+};
+
+/**
+ * @deprecated
+ * This component is retained in @webiny/admin-ui and used in  @webiny/ui solely as a compatibility layer.
+ * It is marked as deprecated because nesting `Radio` components inside `RadioGroup` is no longer the recommended approach.
+ * Instead, we now pass an array of `RadioItemDto` directly to `RadioGroup` for better maintainability.
+ */
+const DeprecatedRadioGroup = RadioGroupRoot;
+
+export {
+    RadioGroupPrimitive,
+    RadioGroupRenderer,
+    DeprecatedRadioGroup,
+    type RadioGroupPrimitiveProps,
+    type RadioGroupVm
+};
diff --git a/packages/admin-ui/src/RadioGroup/primitives/index.ts b/packages/admin-ui/src/RadioGroup/primitives/index.ts
new file mode 100644
index 00000000000..a37d8c3d123
--- /dev/null
+++ b/packages/admin-ui/src/RadioGroup/primitives/index.ts
@@ -0,0 +1,2 @@
+export * from "./RadioGroupPrimitive";
+export * from "./Radio";
diff --git a/packages/admin-ui/src/RadioGroup/primitives/presenters/RadioGroupPresenter.test.ts b/packages/admin-ui/src/RadioGroup/primitives/presenters/RadioGroupPresenter.test.ts
new file mode 100644
index 00000000000..c44c2d68c30
--- /dev/null
+++ b/packages/admin-ui/src/RadioGroup/primitives/presenters/RadioGroupPresenter.test.ts
@@ -0,0 +1,58 @@
+import { RadioGroupPresenter } from "./RadioGroupPresenter";
+
+describe("RadioGroupPresenter", () => {
+    const onValueChange = jest.fn();
+
+    it("should return the compatible `vm` based on props", () => {
+        // `items`
+        {
+            const presenter = new RadioGroupPresenter();
+            presenter.init({
+                onValueChange,
+                items: [
+                    {
+                        value: "value-1",
+                        label: "Value 1"
+                    },
+                    {
+                        value: "value-2",
+                        label: "Value 2"
+                    }
+                ]
+            });
+            expect(presenter.vm.items).toEqual([
+                {
+                    id: expect.any(String),
+                    value: "value-1",
+                    label: "Value 1",
+                    disabled: false
+                },
+                {
+                    id: expect.any(String),
+                    value: "value-2",
+                    label: "Value 2",
+                    disabled: false
+                }
+            ]);
+        }
+    });
+
+    it("should call `onValueChange` callback when `changeValue` is called", () => {
+        const presenter = new RadioGroupPresenter();
+        presenter.init({
+            onValueChange,
+            items: [
+                {
+                    value: "value-1",
+                    label: "Value 1"
+                },
+                {
+                    value: "value-2",
+                    label: "Value 2"
+                }
+            ]
+        });
+        presenter.changeValue("value-2");
+        expect(onValueChange).toHaveBeenCalledWith("value-2");
+    });
+});
diff --git a/packages/admin-ui/src/RadioGroup/primitives/presenters/RadioGroupPresenter.ts b/packages/admin-ui/src/RadioGroup/primitives/presenters/RadioGroupPresenter.ts
new file mode 100644
index 00000000000..8cf45b74b5a
--- /dev/null
+++ b/packages/admin-ui/src/RadioGroup/primitives/presenters/RadioGroupPresenter.ts
@@ -0,0 +1,48 @@
+import { makeAutoObservable } from "mobx";
+import { RadioGroupVm } from "../RadioGroupPrimitive";
+import { RadioItem } from "~/RadioGroup/domains/RadioItem";
+import { RadioItemFormatter } from "~/RadioGroup/domains/RadioItemFormatter";
+import { RadioItemParams } from "~/RadioGroup/domains/RadioItemParams";
+
+interface RadioGroupPresenterParams<TValue = string> {
+    items: RadioItemParams[];
+    onValueChange?: (value: TValue) => void;
+}
+
+interface IRadioGroupPresenter<TValue = string> {
+    vm: RadioGroupVm;
+    init: (props: RadioGroupPresenterParams<TValue>) => void;
+    changeValue: (value: TValue) => void;
+}
+
+class RadioGroupPresenter<TValue = string> implements IRadioGroupPresenter<TValue> {
+    private params?: RadioGroupPresenterParams<TValue> = undefined;
+
+    constructor() {
+        makeAutoObservable(this);
+    }
+
+    public init = (params: RadioGroupPresenterParams<TValue>) => {
+        this.params = params;
+    };
+
+    get vm() {
+        return {
+            items: this.getRadioItems().map(item => RadioItemFormatter.format(item))
+        };
+    }
+
+    public changeValue = (value: TValue) => {
+        this.params?.onValueChange?.(value);
+    };
+
+    private getRadioItems() {
+        if (!this.params?.items) {
+            return [];
+        }
+
+        return this.params.items.map(item => RadioItem.create(item));
+    }
+}
+
+export { RadioGroupPresenter, type RadioGroupPresenterParams, type IRadioGroupPresenter };
diff --git a/packages/admin-ui/src/RadioGroup/primitives/presenters/index.ts b/packages/admin-ui/src/RadioGroup/primitives/presenters/index.ts
new file mode 100644
index 00000000000..763288e0bee
--- /dev/null
+++ b/packages/admin-ui/src/RadioGroup/primitives/presenters/index.ts
@@ -0,0 +1 @@
+export * from "./RadioGroupPresenter";
diff --git a/packages/admin-ui/src/RadioGroup/primitives/useRadioGroup.ts b/packages/admin-ui/src/RadioGroup/primitives/useRadioGroup.ts
new file mode 100644
index 00000000000..6fa3b272543
--- /dev/null
+++ b/packages/admin-ui/src/RadioGroup/primitives/useRadioGroup.ts
@@ -0,0 +1,32 @@
+import { useEffect, useMemo, useState } from "react";
+import { autorun } from "mobx";
+import { RadioGroupPrimitiveProps } from "./RadioGroupPrimitive";
+import { RadioGroupPresenter, RadioGroupPresenterParams } from "./presenters/RadioGroupPresenter";
+
+export const useRadioGroup = (props: RadioGroupPrimitiveProps) => {
+    const params: RadioGroupPresenterParams = useMemo(
+        () => ({
+            items: props.items,
+            onValueChange: props.onChange
+        }),
+        [props.items, props.onChange]
+    );
+
+    const presenter = useMemo(() => {
+        return new RadioGroupPresenter();
+    }, []);
+
+    useEffect(() => {
+        presenter.init(params);
+    }, [params]);
+
+    const [vm, setVm] = useState(presenter.vm);
+
+    useEffect(() => {
+        return autorun(() => {
+            setVm(presenter.vm);
+        });
+    }, [presenter]);
+
+    return { vm, changeValue: presenter.changeValue };
+};
diff --git a/packages/admin-ui/src/RangeSlider/RangeSlider.mdx b/packages/admin-ui/src/RangeSlider/RangeSlider.mdx
new file mode 100644
index 00000000000..6217e0ee61a
--- /dev/null
+++ b/packages/admin-ui/src/RangeSlider/RangeSlider.mdx
@@ -0,0 +1,108 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+
+import * as RangeSliderStories from './RangeSlider.stories';
+
+<Meta of={RangeSliderStories} />
+
+# Range Slider
+
+The Range Slider component is an interactive input control that allows users to select a range of values by moving two thumbs along a track. It provides a visual and intuitive way for users to define minimum and maximum values within a predefined range.
+
+## Usage
+
+<Canvas of={RangeSliderStories.Documentation} source={ { code: `
+import React, { useState } from "react";
+import { RangeSlider } from "@webiny/admin-ui";
+
+const RangeSliderExample = () => {
+    const [values, setValues] = useState([25, 75]);
+    const [validation, setValidation] = useState({ isValid: true, message: "" });
+
+    const handleChange = (newValues: number[]) => {
+        setValues(newValues);
+
+        if (newValues[0] === 0 && newValues[1] === 0) {
+            setValidation({ isValid: false, message: "Please select a range" });
+        } else {
+            setValidation({ isValid: true, message: "" });
+        }
+    };
+
+    return (
+        <div>
+            <RangeSlider
+                label="Price Range"
+                description="Select the minimum and maximum price range"
+                note="Note: The selected range will filter available products"
+                min={0}
+                max={100}
+                step={1}
+                values={values}
+                required={true}
+                onValuesChange={handleChange}
+                showTooltip={true}
+                transformValue={(value) => \`$\${value}\`}
+                validation={validation}
+            />
+        </div>
+    );
+};
+
+export default RangeSliderExample;
+
+` } }
+        additionalActions={[
+            {
+                title: 'Open in GitHub',
+                onClick: () => {
+                    window.open(
+                        'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/RangeSlider/RangeSlider.tsx',
+                        '_blank'
+                    );
+                },
+            }
+        ]}
+/>
+
+<Controls of={RangeSliderStories.Documentation} exclude={["onValuesChange", "onValuesCommit"]}/>
+
+```tsx
+import React, { useState } from "react";
+import { RangeSlider } from "@webiny/admin-ui";
+
+const RangeSliderExample = () => {
+    const [values, setValues] = useState([25, 75]);
+    const [validation, setValidation] = useState({ isValid: true, message: "" });
+
+    const handleChange = (newValues: number[]) => {
+        setValues(newValues);
+
+        if (newValues[0] === 0 && newValues[1] === 0) {
+            setValidation({ isValid: false, message: "Please select a range" });
+        } else {
+            setValidation({ isValid: true, message: "" });
+        }
+    };
+
+    return (
+        <div>
+            <RangeSlider
+                label="Price Range"
+                description="Select the minimum and maximum price range"
+                note="Note: The selected range will filter available products"
+                min={0}
+                max={100}
+                step={1}
+                values={values}
+                required={true}
+                onValuesChange={handleChange}
+                showTooltip={true}
+                transformValue={(value) => `$${value}`}
+                validation={validation}
+            />
+        </div>
+    );
+};
+
+export default RangeSliderExample;
+```
\ No newline at end of file
diff --git a/packages/admin-ui/src/RangeSlider/RangeSlider.stories.tsx b/packages/admin-ui/src/RangeSlider/RangeSlider.stories.tsx
new file mode 100644
index 00000000000..f57fcb68cdd
--- /dev/null
+++ b/packages/admin-ui/src/RangeSlider/RangeSlider.stories.tsx
@@ -0,0 +1,201 @@
+import React, { useState, useEffect } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { RangeSlider } from "./RangeSlider";
+
+const meta: Meta<typeof RangeSlider> = {
+    title: "Components/Form/RangeSlider",
+    component: RangeSlider,
+    argTypes: {
+        onValuesChange: { action: "onValuesChange" },
+        onValuesCommit: { action: "onValuesCommit" },
+        disabled: {
+            control: "boolean",
+            defaultValue: false
+        }
+    },
+    parameters: {
+        layout: "padded"
+    },
+    render: args => {
+        const [values, setValues] = useState(args.values);
+        return (
+            <RangeSlider {...args} values={values} onValuesChange={values => setValues(values)} />
+        );
+    }
+};
+
+export default meta;
+type Story = StoryObj<typeof RangeSlider>;
+
+export const Default: Story = {
+    args: {
+        label: "Any field label"
+    }
+};
+
+export const WithLabelRequired: Story = {
+    args: {
+        ...Default.args,
+        required: true
+    }
+};
+
+export const WithDescription: Story = {
+    args: {
+        description: "Provide the required information for processing your request."
+    }
+};
+
+export const WithNotes: Story = {
+    args: {
+        note: "Note: Ensure your selection or input is accurate before proceeding."
+    }
+};
+
+export const WithErrors: Story = {
+    args: {
+        validation: {
+            isValid: false,
+            message: "This field is required."
+        }
+    }
+};
+
+export const Disabled: Story = {
+    args: {
+        label: "Any field label",
+        disabled: true
+    }
+};
+
+export const FullExample: Story = {
+    args: {
+        ...Default.args,
+        label: "Any field label",
+        required: true,
+        description: "Provide the required information for processing your request.",
+        note: "Note: Ensure your selection or input is accurate before proceeding.",
+        validation: {
+            isValid: false,
+            message: "This field is required."
+        }
+    }
+};
+
+export const Documentation: Story = {
+    render: args => {
+        const [values, setValues] = useState(args.values || [25, 75]);
+        const [validation, setValidation] = useState({ isValid: true, message: "" });
+
+        // Update values when args.values changes
+        useEffect(() => {
+            setValues(args.values || [25, 75]);
+        }, [args.values]);
+
+        const handleChange = (newValues: number[]) => {
+            setValues(newValues);
+
+            if (args.required && newValues[0] === 0 && newValues[1] === 0) {
+                setValidation({ isValid: false, message: "Please select a range" });
+            } else {
+                setValidation({ isValid: true, message: "" });
+            }
+        };
+
+        // Validate on required change or values change
+        useEffect(() => {
+            if (args.required && values[0] === 0 && values[1] === 0) {
+                setValidation({ isValid: false, message: "Please select a range" });
+            } else {
+                setValidation({ isValid: true, message: "" });
+            }
+        }, [args.required, values]);
+
+        return (
+            <RangeSlider
+                {...args}
+                values={values}
+                onValuesChange={handleChange}
+                validation={validation}
+                required={args.required}
+                showTooltip={args.showTooltip}
+                transformValue={args.transformValue}
+            />
+        );
+    },
+    args: {
+        label: "Price Range",
+        required: true,
+        disabled: false,
+        description: "Select the minimum and maximum price range",
+        note: "Note: The selected range will filter available products",
+        min: 0,
+        max: 100,
+        step: 1,
+        values: [25, 75],
+        showTooltip: true,
+        transformValue: (value: number) => `$${value}`,
+        validation: undefined
+    },
+    argTypes: {
+        label: {
+            description: "Label text for the range slider",
+            control: "text"
+        },
+        required: {
+            description: "Makes the field required when set to true",
+            control: "boolean"
+        },
+        disabled: {
+            description: "Disables the range slider when set to true",
+            control: "boolean"
+        },
+        description: {
+            description: "Additional description text below the field",
+            control: "text"
+        },
+        note: {
+            description: "Additional note text below the field",
+            control: "text"
+        },
+        min: {
+            description: "Minimum value for the range slider",
+            control: "number"
+        },
+        max: {
+            description: "Maximum value for the range slider",
+            control: "number"
+        },
+        step: {
+            description: "Step increment for the range slider",
+            control: "number"
+        },
+        values: {
+            description: "Current values of the range slider [min, max]",
+            control: "object"
+        },
+        showTooltip: {
+            description: "Whether to show tooltips with the current values",
+            control: "boolean",
+            defaultValue: true
+        },
+        transformValue: {
+            description:
+                "Function to transform the numeric values to display text. Please refer to the example code for details on usage.",
+            control: "none"
+        },
+        validation: {
+            description:
+                "Object containing validation state and message. Please refer to the example code for details on usage.",
+            control: "none"
+        },
+        onValuesChange: {
+            description: "Function called when the range slider values change",
+            control: "none"
+        },
+        onValuesCommit: {
+            description: "Function called when the range slider values are committed (on release)",
+            control: "none"
+        }
+    }
+};
diff --git a/packages/admin-ui/src/RangeSlider/RangeSlider.tsx b/packages/admin-ui/src/RangeSlider/RangeSlider.tsx
new file mode 100644
index 00000000000..e88c1903b87
--- /dev/null
+++ b/packages/admin-ui/src/RangeSlider/RangeSlider.tsx
@@ -0,0 +1,70 @@
+import * as React from "react";
+import { makeDecoratable } from "~/utils";
+import {
+    RangeSliderPrimitiveProps,
+    RangeSliderPrimitiveRenderer,
+    RangeSliderValue,
+    useRangeSlider
+} from "./primitives";
+import {
+    FormComponentDescription,
+    FormComponentErrorMessage,
+    FormComponentLabel,
+    FormComponentNote,
+    FormComponentProps
+} from "~/FormComponent";
+
+type RangeSliderProps = RangeSliderPrimitiveProps &
+    FormComponentProps & {
+        label: React.ReactNode;
+        valueConverter?: (value: number) => string;
+    };
+
+const DecoratableRangeSlider = ({ description, note, validation, ...props }: RangeSliderProps) => {
+    const { isValid: validationIsValid, message: validationMessage } = validation || {};
+    const invalid = React.useMemo(() => validationIsValid === false, [validationIsValid]);
+    const { onValuesChange, onValuesCommit, ...restProps } = props;
+    const { vm, changeValues, commitValues } = useRangeSlider({
+        ...restProps,
+        onValuesChange,
+        onValuesCommit
+    });
+
+    return (
+        <div className={"wby-w-full"}>
+            <FormComponentLabel
+                text={props.label}
+                required={props.required}
+                disabled={props.disabled}
+                invalid={invalid}
+            />
+            <FormComponentDescription text={description} disabled={props.disabled} />
+            <div className={"wby-flex wby-flex-row wby-items-center wby-justify-between"}>
+                <div className={"wby-basis-1/12 wby-pr-xxs"}>
+                    <RangeSliderValue value={vm.textValues[0]} disabled={props.disabled} />
+                </div>
+                <div className={"wby-basis-10/12"}>
+                    <RangeSliderPrimitiveRenderer
+                        {...restProps}
+                        {...vm}
+                        onValueChange={changeValues}
+                        onValueCommit={commitValues}
+                    />
+                </div>
+                <div className={"wby-basis-1/12 wby-pl-xxs wby-text-right"}>
+                    <RangeSliderValue value={vm.textValues[1]} disabled={props.disabled} />
+                </div>
+            </div>
+            <FormComponentErrorMessage
+                text={validationMessage}
+                invalid={invalid}
+                disabled={props.disabled}
+            />
+            <FormComponentNote text={note} disabled={props.disabled} />
+        </div>
+    );
+};
+
+const RangeSlider = makeDecoratable("RangeSlider", DecoratableRangeSlider);
+
+export { RangeSlider, type RangeSliderProps };
diff --git a/packages/admin-ui/src/RangeSlider/index.ts b/packages/admin-ui/src/RangeSlider/index.ts
new file mode 100644
index 00000000000..b0aab7599e3
--- /dev/null
+++ b/packages/admin-ui/src/RangeSlider/index.ts
@@ -0,0 +1,2 @@
+export * from "./RangeSlider";
+export * from "./primitives/RangeSliderPrimitive";
diff --git a/packages/admin-ui/src/RangeSlider/primitives/RangeSliderPrimitive.stories.tsx b/packages/admin-ui/src/RangeSlider/primitives/RangeSliderPrimitive.stories.tsx
new file mode 100644
index 00000000000..35f7ad23633
--- /dev/null
+++ b/packages/admin-ui/src/RangeSlider/primitives/RangeSliderPrimitive.stories.tsx
@@ -0,0 +1,109 @@
+import React, { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { RangeSliderPrimitive } from "./RangeSliderPrimitive";
+import { Button } from "~/Button";
+
+const meta: Meta<typeof RangeSliderPrimitive> = {
+    title: "Components/Form Primitives/RangeSlider",
+    component: RangeSliderPrimitive,
+    argTypes: {
+        onValuesChange: { action: "onValuesChange" },
+        onValuesCommit: { action: "onValuesCommit" }
+    },
+    parameters: {
+        layout: "padded"
+    },
+    render: args => {
+        const [values, setValues] = useState(args.values);
+        return (
+            <RangeSliderPrimitive
+                {...args}
+                values={values}
+                onValuesChange={values => setValues(values)}
+            />
+        );
+    }
+};
+
+export default meta;
+type Story = StoryObj<typeof RangeSliderPrimitive>;
+
+export const Default: Story = {};
+
+export const WithDefaultValues: Story = {
+    args: {
+        values: [25, 75]
+    }
+};
+
+export const WithMinAndMaxValues: Story = {
+    args: {
+        min: 25,
+        max: 75
+    }
+};
+
+export const WithSteps: Story = {
+    args: {
+        step: 10
+    }
+};
+
+export const Disabled: Story = {
+    args: {
+        disabled: true,
+        values: [25, 75]
+    }
+};
+
+export const WithTooltip: Story = {
+    args: {
+        showTooltip: true
+    }
+};
+
+export const WithTooltipSideTop: Story = {
+    args: {
+        showTooltip: true,
+        tooltipSide: "top"
+    }
+};
+
+export const WithTooltipAndCustomValueTransformer: Story = {
+    args: {
+        showTooltip: true,
+        transformValue: (value: number) => {
+            return `${Math.round(value)}%`;
+        }
+    }
+};
+
+export const WithExternalValueControl: Story = {
+    args: {
+        showTooltip: true,
+        transformValue: (value: number) => {
+            return `${Math.round(value)}%`;
+        }
+    },
+    render: args => {
+        const defaultValues = args.values ?? [25, 75];
+        const [values, setValues] = useState(defaultValues);
+        return (
+            <div className={"wby-w-full"}>
+                <div>
+                    <RangeSliderPrimitive
+                        {...args}
+                        values={values}
+                        onValuesChange={values => setValues(values)}
+                    />
+                </div>
+                <div className={"wby-mt-4 wby-text-center"}>
+                    <Button text={"Reset"} onClick={() => setValues(defaultValues)} />
+                </div>
+                <div className={"wby-mt-4 wby-text-center"}>
+                    Current value: <code>{values.toString()}</code>
+                </div>
+            </div>
+        );
+    }
+};
diff --git a/packages/admin-ui/src/RangeSlider/primitives/RangeSliderPrimitive.tsx b/packages/admin-ui/src/RangeSlider/primitives/RangeSliderPrimitive.tsx
new file mode 100644
index 00000000000..30ec19709d0
--- /dev/null
+++ b/packages/admin-ui/src/RangeSlider/primitives/RangeSliderPrimitive.tsx
@@ -0,0 +1,102 @@
+import * as React from "react";
+import * as SliderPrimitives from "@radix-ui/react-slider";
+import { SliderRoot, SliderThumb, type SliderThumbProps, SliderTrack } from "~/Slider";
+import { useRangeSlider } from "./useRangeSlider";
+
+interface RangeSliderPrimitiveRootProps
+    extends Omit<SliderPrimitives.SliderProps, "min" | "max" | "value"> {
+    /**
+     * Array of numbers representing the current values of the range slider.
+     */
+    values: number[];
+    /**
+     * Minimum value of the range slider.
+     */
+    min: number;
+    /**
+     * Maximum value of the range slider.
+     */
+    max: number;
+}
+
+interface RangeSliderPrimitiveThumbProps extends Omit<SliderThumbProps, "labelValue"> {
+    textValues: string[];
+}
+
+interface RangeSliderPrimitiveVm
+    extends RangeSliderPrimitiveRootProps,
+        Omit<RangeSliderPrimitiveThumbProps, "textValue"> {
+    textValues: string[];
+}
+
+/**
+ * RangeSliderRenderer
+ */
+
+const RangeSliderPrimitiveRenderer = ({
+    tooltipSide,
+    textValues,
+    showTooltip,
+    values,
+    ...sliderProps
+}: RangeSliderPrimitiveVm) => {
+    return (
+        <div className={"wby-flex wby-h-md wby-w-full"}>
+            <SliderRoot {...sliderProps} value={values}>
+                <SliderTrack />
+                <SliderThumb
+                    showTooltip={showTooltip}
+                    tooltipSide={tooltipSide}
+                    textValue={textValues[0]}
+                />
+                <SliderThumb
+                    showTooltip={showTooltip}
+                    tooltipSide={tooltipSide}
+                    textValue={textValues[1]}
+                />
+            </SliderRoot>
+        </div>
+    );
+};
+
+/**
+ * RangeSlider
+ */
+interface RangeSliderPrimitiveProps
+    extends Omit<
+        SliderPrimitives.SliderProps,
+        "defaultValue" | "value" | "onValueChange" | "onValueCommit"
+    > {
+    onValuesChange: (values: number[]) => void;
+    onValuesCommit?: (values: number[]) => void;
+    showTooltip?: boolean;
+    tooltipSide?: "top" | "bottom";
+    transformValue?: (value: number) => string;
+    values?: number[];
+}
+
+const RangeSliderPrimitive = (props: RangeSliderPrimitiveProps) => {
+    const { transformValue, onValuesChange, onValuesCommit, ...restProps } = props; // Rename transformValue to _ to avoid ESLint warning
+    const { vm, changeValues, commitValues } = useRangeSlider({
+        ...restProps,
+        transformValue,
+        onValuesChange,
+        onValuesCommit
+    });
+
+    return (
+        <RangeSliderPrimitiveRenderer
+            {...restProps}
+            {...vm}
+            onValueChange={changeValues}
+            onValueCommit={commitValues}
+        />
+    );
+};
+
+export {
+    RangeSliderPrimitive,
+    RangeSliderPrimitiveRenderer,
+    type RangeSliderPrimitiveProps,
+    type RangeSliderPrimitiveVm
+};
diff --git a/packages/admin-ui/src/RangeSlider/primitives/components/RangeSliderValue.tsx b/packages/admin-ui/src/RangeSlider/primitives/components/RangeSliderValue.tsx
new file mode 100644
index 00000000000..8735589aefb
--- /dev/null
+++ b/packages/admin-ui/src/RangeSlider/primitives/components/RangeSliderValue.tsx
@@ -0,0 +1,25 @@
+import * as React from "react";
+import { cn, cva, type VariantProps } from "~/utils";
+
+const rangeSliderValueVariants = cva("wby-font-normal wby-text-sm wby-leading-none", {
+    variants: {
+        disabled: {
+            true: "wby-text-neutral-disabled wby-cursor-not-allowed"
+        }
+    }
+});
+
+interface RangeSliderValueProps
+    extends React.HTMLAttributes<HTMLSpanElement>,
+        VariantProps<typeof rangeSliderValueVariants> {
+    value: string;
+}
+
+const RangeSliderValue = ({ value, disabled, className }: RangeSliderValueProps) => {
+    if (!value) {
+        return null;
+    }
+    return <span className={cn(rangeSliderValueVariants({ disabled }), className)}>{value}</span>;
+};
+
+export { RangeSliderValue, type RangeSliderValueProps };
diff --git a/packages/admin-ui/src/RangeSlider/primitives/components/index.ts b/packages/admin-ui/src/RangeSlider/primitives/components/index.ts
new file mode 100644
index 00000000000..2365b43f56b
--- /dev/null
+++ b/packages/admin-ui/src/RangeSlider/primitives/components/index.ts
@@ -0,0 +1 @@
+export * from "./RangeSliderValue";
diff --git a/packages/admin-ui/src/RangeSlider/primitives/index.ts b/packages/admin-ui/src/RangeSlider/primitives/index.ts
new file mode 100644
index 00000000000..607643f9c64
--- /dev/null
+++ b/packages/admin-ui/src/RangeSlider/primitives/index.ts
@@ -0,0 +1,3 @@
+export * from "./RangeSliderPrimitive";
+export * from "./components";
+export * from "./useRangeSlider";
diff --git a/packages/admin-ui/src/RangeSlider/primitives/presenters/RangeSliderPresenter.test.ts b/packages/admin-ui/src/RangeSlider/primitives/presenters/RangeSliderPresenter.test.ts
new file mode 100644
index 00000000000..47b726c517d
--- /dev/null
+++ b/packages/admin-ui/src/RangeSlider/primitives/presenters/RangeSliderPresenter.test.ts
@@ -0,0 +1,87 @@
+import { RangeSliderPresenter } from "./RangeSliderPresenter";
+
+describe("RangeSliderPresenter", () => {
+    const onValuesChange = jest.fn();
+    const presenter = new RangeSliderPresenter();
+
+    it("should return the compatible `vm` based on params", () => {
+        // `value`
+        {
+            presenter.init({ onValuesChange, values: [10, 90] });
+            expect(presenter.vm.values).toEqual([10, 90]);
+            expect(presenter.vm.textValues).toEqual(["10", "90"]);
+        }
+
+        {
+            // `min` and `max`
+            const presenter = new RangeSliderPresenter();
+            presenter.init({ onValuesChange, min: 20, max: 80 });
+            expect(presenter.vm.min).toEqual(20);
+            expect(presenter.vm.max).toEqual(80);
+            expect(presenter.vm.textValues).toEqual(["20", "80"]);
+        }
+
+        // `min`
+        {
+            presenter.init({ onValuesChange, min: 25 });
+            expect(presenter.vm.min).toEqual(25);
+        }
+
+        // `max`
+        {
+            presenter.init({ onValuesChange, max: 75 });
+            expect(presenter.vm.max).toEqual(75);
+        }
+
+        {
+            // `showTooltip`
+            const presenter = new RangeSliderPresenter();
+            presenter.init({ onValuesChange, showTooltip: true });
+            expect(presenter.vm.showTooltip).toEqual(false);
+        }
+
+        {
+            // default: no params
+            const presenter = new RangeSliderPresenter();
+            presenter.init({ onValuesChange });
+            expect(presenter.vm.values).toEqual([0, 100]);
+            expect(presenter.vm.textValues).toEqual(["0", "100"]);
+            expect(presenter.vm.min).toEqual(0); // `min` should default to 0
+            expect(presenter.vm.max).toEqual(100); // `min` should default to 100
+            expect(presenter.vm.showTooltip).toEqual(false);
+        }
+    });
+
+    it("should apply `transformValue` function if provided", () => {
+        const transformValue = (value: number) => `${value} units`;
+        presenter.init({ onValuesChange, values: [40, 60], transformValue });
+        expect(presenter.vm.textValues).toEqual(["40 units", "60 units"]);
+    });
+
+    it("should fall back to string representation if `transformValue` is undefined", () => {
+        presenter.init({ onValuesChange, values: [45, 75] });
+        expect(presenter.vm.textValues).toEqual(["45", "75"]);
+    });
+
+    it("should call `onValueChange` callback when `changeValue` is called", () => {
+        presenter.init({ onValuesChange, values: [10, 90] });
+        presenter.changeValues([20, 80]);
+        expect(onValuesChange).toHaveBeenCalledWith([20, 80]);
+    });
+
+    it("should correctly handle edge cases with negative values", () => {
+        presenter.init({ onValuesChange, values: [-10, 10] });
+        presenter.changeValues([-20, 20]);
+        expect(onValuesChange).toHaveBeenCalledWith([-20, 20]);
+    });
+
+    it("should toggle `showTooltip` based on actions", () => {
+        presenter.init({ onValuesChange, showTooltip: true });
+
+        presenter.changeValues([10, 90]);
+        expect(presenter.vm.showTooltip).toBeTruthy();
+
+        presenter.commitValues([10, 90]);
+        expect(presenter.vm.showTooltip).toBeFalsy();
+    });
+});
diff --git a/packages/admin-ui/src/RangeSlider/primitives/presenters/RangeSliderPresenter.ts b/packages/admin-ui/src/RangeSlider/primitives/presenters/RangeSliderPresenter.ts
new file mode 100644
index 00000000000..4200a1cacd8
--- /dev/null
+++ b/packages/admin-ui/src/RangeSlider/primitives/presenters/RangeSliderPresenter.ts
@@ -0,0 +1,72 @@
+import { makeAutoObservable } from "mobx";
+import { RangeSliderPrimitiveVm } from "../RangeSliderPrimitive";
+
+interface RangeSliderPresenterParams {
+    min?: number;
+    max?: number;
+    onValuesChange: (values: number[]) => void;
+    onValuesCommit?: (values: number[]) => void;
+    showTooltip?: boolean;
+    transformValue?: (values: number) => string;
+    values?: number[];
+}
+
+interface IRangeSliderPresenter {
+    get vm(): RangeSliderPrimitiveVm;
+    init: (params: RangeSliderPresenterParams) => void;
+    changeValues: (values: number[]) => void;
+    commitValues: (values: number[]) => void;
+}
+
+class RangeSliderPresenter implements IRangeSliderPresenter {
+    private params?: RangeSliderPresenterParams = undefined;
+    private showTooltip = false;
+
+    constructor() {
+        makeAutoObservable(this);
+    }
+
+    init(params: RangeSliderPresenterParams) {
+        this.params = params;
+    }
+
+    get vm() {
+        return {
+            min: this.min,
+            max: this.max,
+            values: this.values,
+            textValues: this.transformToLabelValues(this.values),
+            showTooltip: this.showTooltip
+        };
+    }
+
+    public changeValues = (values: number[]) => {
+        this.showTooltip = !!this.params?.showTooltip;
+        this.params?.onValuesChange?.(values);
+    };
+
+    public commitValues = (values: number[]) => {
+        this.showTooltip = false;
+        this.params?.onValuesCommit?.(values);
+    };
+
+    private get min() {
+        return this.params?.min ?? 0;
+    }
+
+    private get max() {
+        return this.params?.max ?? 100;
+    }
+
+    private get values() {
+        return this.params?.values ?? [this.min, this.max];
+    }
+
+    private transformToLabelValues(values: number[]) {
+        return values.map(value =>
+            this.params?.transformValue ? this.params.transformValue(value) : String(value)
+        );
+    }
+}
+
+export { RangeSliderPresenter, type IRangeSliderPresenter, type RangeSliderPresenterParams };
diff --git a/packages/admin-ui/src/RangeSlider/primitives/presenters/index.ts b/packages/admin-ui/src/RangeSlider/primitives/presenters/index.ts
new file mode 100644
index 00000000000..056989c4069
--- /dev/null
+++ b/packages/admin-ui/src/RangeSlider/primitives/presenters/index.ts
@@ -0,0 +1 @@
+export * from "./RangeSliderPresenter";
diff --git a/packages/admin-ui/src/RangeSlider/primitives/useRangeSlider.ts b/packages/admin-ui/src/RangeSlider/primitives/useRangeSlider.ts
new file mode 100644
index 00000000000..eff18799242
--- /dev/null
+++ b/packages/admin-ui/src/RangeSlider/primitives/useRangeSlider.ts
@@ -0,0 +1,50 @@
+import { useEffect, useMemo, useState } from "react";
+import { autorun } from "mobx";
+import { RangeSliderPrimitiveProps } from "./RangeSliderPrimitive";
+import {
+    RangeSliderPresenter,
+    RangeSliderPresenterParams
+} from "./presenters/RangeSliderPresenter";
+
+export const useRangeSlider = (props: RangeSliderPrimitiveProps) => {
+    const params: RangeSliderPresenterParams = useMemo(
+        () => ({
+            min: props.min,
+            max: props.max,
+            onValuesChange: props.onValuesChange,
+            onValuesCommit: props.onValuesCommit,
+            showTooltip: props.showTooltip,
+            transformValue: props.transformValue,
+            values: props.values
+        }),
+        [
+            props.min,
+            props.max,
+            props.onValuesChange,
+            props.onValuesCommit,
+            props.showTooltip,
+            props.transformValue,
+            props.values
+        ]
+    );
+
+    const presenter = useMemo(() => {
+        const presenter = new RangeSliderPresenter();
+        presenter.init(params);
+        return presenter;
+    }, []);
+
+    const [vm, setVm] = useState(presenter.vm);
+
+    useEffect(() => {
+        presenter.init(params);
+    }, [params]);
+
+    useEffect(() => {
+        return autorun(() => {
+            setVm(presenter.vm);
+        });
+    }, [presenter]);
+
+    return { vm, changeValues: presenter.changeValues, commitValues: presenter.commitValues };
+};
diff --git a/packages/admin-ui/src/RichTextEditor/RichTextEditor.mdx b/packages/admin-ui/src/RichTextEditor/RichTextEditor.mdx
new file mode 100644
index 00000000000..cbfd603cffe
--- /dev/null
+++ b/packages/admin-ui/src/RichTextEditor/RichTextEditor.mdx
@@ -0,0 +1,96 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+
+import * as RichTextEditorStories from './RichTextEditor.stories';
+
+<Meta of={RichTextEditorStories} />
+
+# Rich Text Editor
+
+The Rich Text Editor component provides a user-friendly interface for creating and editing formatted text content. It allows users to apply various formatting options, insert media, and structure content with headings, lists, and other elements.
+
+## Usage
+
+<Canvas of={RichTextEditorStories.Documentation} source={ { code: `
+import React, { useState, useEffect } from "react";
+import { RichTextEditor, type RichTextEditorValue } from "@webiny/admin-ui";
+
+const RichTextEditorExample = () => {
+    const [content, setContent] = useState<RichTextEditorValue | undefined>(undefined);
+    const [validation, setValidation] = useState({ isValid: true, message: "" });
+
+    const handleChange = (newContent: RichTextEditorValue) => {
+        setContent(newContent);
+
+        // Simple required validation
+        if (!newContent || newContent.length === 0) {
+            setValidation({ isValid: false, message: "This field is required" });
+        } else {
+            setValidation({ isValid: true, message: "" });
+        }
+    };
+
+    return (
+        <RichTextEditor
+            label="Content Editor"
+            description="Enter the content for your page or post"
+            note="Use the toolbar to format your text and add media"
+            required={true}
+            value={content}
+            onChange={handleChange}
+            validation={validation}
+        />
+    );
+};
+
+export default RichTextEditorExample;
+
+` } }
+        additionalActions={[
+            {
+                title: 'Open in GitHub',
+                onClick: () => {
+                    window.open(
+                        'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/RichTextEditor/RichTextEditor.tsx',
+                        '_blank'
+                    );
+                },
+            }
+        ]}
+/>
+
+<Controls of={RichTextEditorStories.Documentation} />
+
+```tsx
+import React, { useState } from "react";
+import { RichTextEditor, type RichTextEditorValue } from "@webiny/admin-ui";
+
+const RichTextEditorExample = () => {
+    const [content, setContent] = useState<RichTextEditorValue | undefined>(undefined);
+    const [validation, setValidation] = useState({ isValid: true, message: "" });
+
+    const handleChange = (newContent: RichTextEditorValue) => {
+        setContent(newContent);
+
+        // Simple required validation
+        if (!newContent || newContent.length === 0) {
+            setValidation({ isValid: false, message: "This field is required" });
+        } else {
+            setValidation({ isValid: true, message: "" });
+        }
+    };
+
+    return (
+        <RichTextEditor
+            label="Content Editor"
+            description="Enter the content for your page or post"
+            note="Use the toolbar to format your text and add media"
+            required={true}
+            value={content}
+            onChange={handleChange}
+            validation={validation}
+        />
+    );
+};
+
+export default RichTextEditorExample;
+```
\ No newline at end of file
diff --git a/packages/admin-ui/src/RichTextEditor/RichTextEditor.stories.tsx b/packages/admin-ui/src/RichTextEditor/RichTextEditor.stories.tsx
new file mode 100644
index 00000000000..83ae43ac9f0
--- /dev/null
+++ b/packages/admin-ui/src/RichTextEditor/RichTextEditor.stories.tsx
@@ -0,0 +1,176 @@
+import React, { useState, useEffect } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { RichTextEditor } from "./RichTextEditor";
+import { type RichTextEditorValue } from "./RichTextEditorPrimitive";
+
+const meta: Meta<typeof RichTextEditor> = {
+    title: "Components/Form/RichTextEditor",
+    component: RichTextEditor,
+    argTypes: {
+        onChange: { action: "onChange" },
+        onReady: { action: "onReady" },
+        disabled: {
+            control: "boolean",
+            defaultValue: false
+        }
+    },
+    parameters: {
+        layout: "padded"
+    }
+};
+
+export default meta;
+type Story = StoryObj<typeof RichTextEditor>;
+
+export const Default: Story = {};
+
+export const WithLabel: Story = {
+    args: {
+        label: "Any field label"
+    }
+};
+
+export const WithLabelRequired: Story = {
+    args: {
+        ...Default.args,
+        label: "Any field label",
+        required: true
+    }
+};
+
+export const WithDescription: Story = {
+    args: {
+        ...Default.args,
+        description: "Provide the required information for processing your request."
+    }
+};
+
+export const WithNotes: Story = {
+    args: {
+        ...Default.args,
+        note: "Note: Ensure your selection or input is accurate before proceeding."
+    }
+};
+
+export const WithErrors: Story = {
+    args: {
+        ...Default.args,
+        validation: {
+            isValid: false,
+            message: "This field is required."
+        }
+    }
+};
+
+export const Disabled: Story = {
+    args: {
+        ...Default.args,
+        label: "Any field label",
+        disabled: true
+    }
+};
+
+export const FullExample: Story = {
+    args: {
+        ...Default.args,
+        label: "Any field label",
+        required: true,
+        description: "Provide the required information for processing your request.",
+        note: "Note: Ensure your selection or input is accurate before proceeding.",
+        validation: {
+            isValid: false,
+            message: "This field is required."
+        }
+    }
+};
+
+export const Documentation: Story = {
+    render: args => {
+        const [value, setValue] = useState<RichTextEditorValue | undefined>(args.value);
+        const [validation, setValidation] = useState({ isValid: true, message: "" });
+
+        // Update value when args.value changes
+        useEffect(() => {
+            setValue(args.value);
+        }, [args.value]);
+
+        const handleChange = (newValue: RichTextEditorValue) => {
+            setValue(newValue);
+
+            // Simple required validation
+            if (args.required && (!newValue || newValue.length === 0)) {
+                setValidation({ isValid: false, message: "This field is required" });
+            } else {
+                setValidation({ isValid: true, message: "" });
+            }
+        };
+
+        // Validate on required change or value change
+        useEffect(() => {
+            if (args.required && (!value || value.length === 0)) {
+                setValidation({ isValid: false, message: "This field is required" });
+            } else {
+                setValidation({ isValid: true, message: "" });
+            }
+        }, [args.required, value]);
+
+        return (
+            <RichTextEditor
+                {...args}
+                value={value}
+                onChange={handleChange}
+                validation={validation}
+                required={args.required}
+            />
+        );
+    },
+    args: {
+        label: "Content Editor",
+        required: true,
+        disabled: false,
+        description: "Enter the content for your page or post",
+        note: "Use the toolbar to format your text and add media",
+        validation: undefined,
+        value: undefined,
+        onChange: undefined,
+        onReady: undefined
+    },
+    argTypes: {
+        label: {
+            description: "Label text for the rich text editor",
+            control: "text"
+        },
+        required: {
+            description: "Makes the field required when set to true",
+            control: "boolean"
+        },
+        disabled: {
+            description: "Disables the rich text editor when set to true",
+            control: "boolean"
+        },
+        description: {
+            description: "Additional description text below the field",
+            control: "text"
+        },
+        note: {
+            description: "Additional note text below the field",
+            control: "text"
+        },
+        value: {
+            description: "The editor content",
+            control: "object"
+        },
+        validation: {
+            description: "Object containing validation state and message",
+            control: "object"
+        },
+        onChange: {
+            description: "Function called when the content changes",
+            control: "none"
+        },
+        onReady: {
+            description: "Function called when the editor is ready",
+            control: "none"
+        }
+    }
+};
diff --git a/packages/admin-ui/src/RichTextEditor/RichTextEditor.tsx b/packages/admin-ui/src/RichTextEditor/RichTextEditor.tsx
new file mode 100644
index 00000000000..867cfff0345
--- /dev/null
+++ b/packages/admin-ui/src/RichTextEditor/RichTextEditor.tsx
@@ -0,0 +1,47 @@
+import React, { useMemo } from "react";
+import { makeDecoratable } from "~/utils";
+import { RichTextEditorPrimitive, RichTextEditorPrimitiveProps } from "./RichTextEditorPrimitive";
+import {
+    FormComponentDescription,
+    FormComponentErrorMessage,
+    FormComponentLabel,
+    FormComponentNote,
+    FormComponentProps
+} from "~/FormComponent";
+
+type RichTextEditorProps = RichTextEditorPrimitiveProps & FormComponentProps;
+
+const DecoratableRichTextEditor = ({
+    label,
+    description,
+    note,
+    required,
+    disabled,
+    validation,
+    ...props
+}: RichTextEditorProps) => {
+    const { isValid: validationIsValid, message: validationMessage } = validation || {};
+    const invalid = useMemo(() => validationIsValid === false, [validationIsValid]);
+
+    return (
+        <div className={"wby-w-full"}>
+            <FormComponentLabel
+                text={label}
+                required={required}
+                disabled={disabled}
+                invalid={invalid}
+            />
+            <FormComponentDescription text={description} disabled={disabled} />
+            <RichTextEditorPrimitive {...props} disabled={disabled} invalid={invalid} />
+            <FormComponentErrorMessage
+                text={validationMessage}
+                invalid={invalid}
+                disabled={disabled}
+            />
+            <FormComponentNote text={note} disabled={disabled} />
+        </div>
+    );
+};
+const RichTextEditor = makeDecoratable("RichTextEditor", DecoratableRichTextEditor);
+
+export { RichTextEditor, type RichTextEditorProps };
diff --git a/packages/admin-ui/src/RichTextEditor/RichTextEditorPrimitive.stories.tsx b/packages/admin-ui/src/RichTextEditor/RichTextEditorPrimitive.stories.tsx
new file mode 100644
index 00000000000..b12261b72b5
--- /dev/null
+++ b/packages/admin-ui/src/RichTextEditor/RichTextEditorPrimitive.stories.tsx
@@ -0,0 +1,115 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { RichTextEditorPrimitive } from "./RichTextEditorPrimitive";
+
+const meta: Meta<typeof RichTextEditorPrimitive> = {
+    title: "Components/Form Primitives/RichTextEditor",
+    component: RichTextEditorPrimitive,
+    argTypes: {
+        onChange: { action: "onChange" },
+        onReady: { action: "onReady" }
+    },
+    parameters: {
+        layout: "padded"
+    }
+};
+
+export default meta;
+type Story = StoryObj<typeof RichTextEditorPrimitive>;
+
+export const Default: Story = {};
+
+export const MediumSize: Story = {
+    args: {
+        placeholder: "Custom placeholder",
+        size: "md"
+    }
+};
+
+export const LargeSize: Story = {
+    args: {
+        placeholder: "Custom placeholder",
+        size: "lg"
+    }
+};
+
+export const ExtraLargeSize: Story = {
+    args: {
+        placeholder: "Custom placeholder",
+        size: "xl"
+    }
+};
+
+export const PrimaryVariant: Story = {
+    args: {
+        variant: "primary",
+        placeholder: "Custom placeholder"
+    }
+};
+
+export const PrimaryVariantDisabled: Story = {
+    args: {
+        ...PrimaryVariant.args,
+        disabled: true
+    }
+};
+
+export const PrimaryVariantInvalid: Story = {
+    args: {
+        ...PrimaryVariant.args,
+        invalid: true
+    }
+};
+
+export const SecondaryVariant: Story = {
+    args: {
+        variant: "secondary",
+        placeholder: "Custom placeholder"
+    }
+};
+
+export const SecondaryVariantDisabled: Story = {
+    args: {
+        ...SecondaryVariant.args,
+        disabled: true
+    }
+};
+
+export const SecondaryVariantInvalid: Story = {
+    args: {
+        ...SecondaryVariant.args,
+        invalid: true
+    }
+};
+
+export const GhostVariant: Story = {
+    args: {
+        variant: "ghost",
+        placeholder: "Custom placeholder"
+    }
+};
+
+export const GhostVariantDisabled: Story = {
+    args: {
+        ...GhostVariant.args,
+        disabled: true
+    }
+};
+
+export const GhostVariantInvalid: Story = {
+    args: {
+        ...GhostVariant.args,
+        invalid: true
+    }
+};
+
+export const WithCustomValue: Story = {
+    args: {
+        ...Default.args,
+        value: [
+            {
+                type: "paragraph",
+                data: { text: "Custom value", id: "any-custom-id", type: "paragraph" }
+            }
+        ]
+    }
+};
diff --git a/packages/admin-ui/src/RichTextEditor/RichTextEditorPrimitive.tsx b/packages/admin-ui/src/RichTextEditor/RichTextEditorPrimitive.tsx
new file mode 100644
index 00000000000..5c1b94542b3
--- /dev/null
+++ b/packages/admin-ui/src/RichTextEditor/RichTextEditorPrimitive.tsx
@@ -0,0 +1,254 @@
+import React, { useEffect, useRef } from "react";
+import EditorJS, {
+    LogLevels,
+    OutputBlockData,
+    OutputData,
+    SanitizerConfig,
+    ToolSettings
+} from "@editorjs/editorjs";
+import { cn, cva, generateId, type VariantProps } from "~/utils";
+
+const richTextEditorVariants = cva(
+    [
+        "wby-min-h-[80px] wby-w-full wby-border-sm wby-text-md focus-visible:wby-outline-none disabled:wby-cursor-not-allowed"
+    ],
+    {
+        variants: {
+            variant: {
+                primary: [
+                    "wby-bg-neutral-base wby-border-neutral-muted wby-text-neutral-strong placeholder:wby-text-neutral-dimmed",
+                    "hover:wby-border-neutral-strong",
+                    "focus:wby-border-neutral-black"
+                ],
+                secondary: [
+                    "wby-bg-neutral-light wby-border-neutral-subtle wby-text-neutral-strong placeholder:wby-text-neutral-dimmed",
+                    "hover:wby-bg-neutral-dimmed",
+                    "focus:wby-bg-neutral-base focus:wby-border-neutral-black"
+                ],
+                ghost: [
+                    "wby-bg-transparent wby-border-transparent wby-text-neutral-strong placeholder:wby-text-neutral-dimmed",
+                    "hover:wby-bg-neutral-dark/5",
+                    "focus:wby-bg-neutral-dark/5"
+                ]
+            },
+            size: {
+                md: ["wby-px-sm-extra wby-py-xs-plus wby-rounded-md"],
+                lg: ["wby-px-sm-extra wby-py-sm-plus wby-rounded-md"],
+                xl: ["wby-px-md-extra wby-p-md wby-rounded-lg"]
+            },
+            invalid: {
+                true: ""
+            },
+            disabled: {
+                true: "wby-pointer-events-none"
+            }
+        },
+        compoundVariants: [
+            {
+                variant: "primary",
+                invalid: true,
+                class: "!wby-border-destructive-default"
+            },
+            {
+                variant: "secondary",
+                invalid: true,
+                class: "!wby-border-destructive-default"
+            },
+            {
+                variant: "ghost",
+                invalid: true,
+                class: "!wby-border-destructive-subtle !wby-bg-destructive-subtle"
+            },
+            {
+                variant: "primary",
+                disabled: true,
+                class: "wby-bg-neutral-disabled wby-border-neutral-dimmed wby-text-neutral-disabled placeholder:wby-text-neutral-disabled"
+            },
+            {
+                variant: "secondary",
+                disabled: true,
+                class: "wby-bg-neutral-disabled wby-text-neutral-disabled placeholder:wby-text-neutral-disabled"
+            },
+            {
+                variant: "ghost",
+                disabled: true,
+                class: "wby-bg-transparent wby-text-neutral-disabled placeholder:wby-text-neutral-disabled"
+            }
+        ],
+        defaultVariants: {
+            variant: "primary",
+            size: "lg"
+        }
+    }
+);
+
+interface EditorJSType {
+    destroy?: () => void;
+    save: () => Promise<any>;
+}
+
+interface OnReadyParams {
+    editor: any;
+    initialData: OutputData;
+}
+
+type RichTextEditorValue = OutputBlockData[];
+
+interface RichTextEditorPrimitiveProps
+    extends Omit<React.ComponentProps<"div">, "onChange">,
+        VariantProps<typeof richTextEditorVariants> {
+    /**
+     * If true, the editor will automatically focus when mounted.
+     */
+    autofocus?: boolean;
+    /**
+     * Additional class names to apply to the editor container.
+     */
+    className?: string;
+    /**
+     * Context object to pass to the editor tools.
+     */
+    context?: { [key: string]: any };
+    /**
+     * If true, the editor will be disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Log level for the editor (e.g., "ERROR", "WARN").
+     */
+    logLevel?: string;
+    /**
+     * Minimum height of the editor in pixels.
+     */
+    minHeight?: number;
+    /**
+     * Callback function to handle changes in the editor content.
+     */
+    onChange?: (data: RichTextEditorValue) => void;
+    /**
+     * Callback function to handle the editor's readiness state.
+     */
+    onReady?: (params: OnReadyParams) => void;
+    /**
+     * Placeholder text to display when the editor is empty.
+     */
+    placeholder?: string;
+    /**
+     * Configuration for sanitizing the editor content.
+     */
+    sanitizer?: SanitizerConfig;
+    /**
+     * Configuration for the editor tools.
+     */
+    tools?: {
+        [toolName: string]: ToolSettings;
+    };
+    /**
+     * Initial value of the editor content.
+     */
+    value?: RichTextEditorValue;
+}
+
+const waitForDom = (id: string, callback: () => void) => {
+    let timeSpent = 0;
+    const interval = setInterval(() => {
+        if (timeSpent > 1000) {
+            clearInterval(interval);
+            return;
+        }
+
+        const dom = document.querySelector(`#${id}`);
+        if (!dom) {
+            timeSpent += 10;
+            return;
+        }
+
+        clearInterval(interval);
+        callback();
+    }, 10);
+
+    return () => {
+        clearInterval(interval);
+    };
+};
+
+const RichTextEditorPrimitive = ({
+    disabled,
+    size,
+    className,
+    variant,
+    invalid,
+    ...props
+}: RichTextEditorPrimitiveProps) => {
+    const elementId = useRef("rte-" + generateId());
+    const editorRef = useRef<EditorJSType>();
+
+    useEffect(() => {
+        const { value, context, onReady, ...nativeProps } = props;
+
+        const initialData = value ? { blocks: value } : { blocks: [] };
+
+        const clearWait = waitForDom(elementId.current, () => {
+            editorRef.current = new EditorJS({
+                ...nativeProps,
+                holder: elementId.current,
+                logLevel: "ERROR" as LogLevels.ERROR,
+                data: initialData,
+                onChange: async () => {
+                    if (!editorRef.current) {
+                        return;
+                    }
+                    const { blocks: data } = await editorRef.current.save();
+                    if (!props.onChange) {
+                        return;
+                    }
+                    props.onChange(data);
+                },
+                onReady() {
+                    if (typeof onReady !== "function") {
+                        return;
+                    }
+                    onReady({ editor: editorRef.current, initialData });
+                },
+                tools: Object.keys(props.tools || {}).reduce((tools, name) => {
+                    const tool = props.tools ? props.tools[name] : null;
+                    if (!tool) {
+                        return tools;
+                    }
+                    tools[name] = tool;
+                    if (!tool.config) {
+                        tool.config = { context };
+                    } else if (typeof tool.config === "function") {
+                        tool.config = tool.config();
+                    } else {
+                        tool.config = { ...tool.config, context };
+                    }
+                    return tools;
+                }, {} as Record<string, ToolSettings>)
+            });
+        });
+
+        return () => {
+            clearWait();
+            if (!editorRef.current || typeof editorRef.current.destroy !== "function") {
+                return;
+            }
+
+            editorRef.current.destroy();
+        };
+    }, []);
+
+    return (
+        <div
+            id={elementId.current}
+            className={cn(richTextEditorVariants({ variant, invalid, size, disabled }), className)}
+        />
+    );
+};
+
+export {
+    RichTextEditorPrimitive,
+    type RichTextEditorPrimitiveProps,
+    type RichTextEditorValue,
+    type OnReadyParams
+};
diff --git a/packages/ui/src/RichTextEditor/createPropsFromConfig.ts b/packages/admin-ui/src/RichTextEditor/createPropsFromConfig.ts
similarity index 90%
rename from packages/ui/src/RichTextEditor/createPropsFromConfig.ts
rename to packages/admin-ui/src/RichTextEditor/createPropsFromConfig.ts
index 7aa9d63264e..fe42ca926ed 100644
--- a/packages/ui/src/RichTextEditor/createPropsFromConfig.ts
+++ b/packages/admin-ui/src/RichTextEditor/createPropsFromConfig.ts
@@ -1,6 +1,7 @@
 import { RichTextEditorProps } from "./RichTextEditor";
 import { ToolSettings } from "@editorjs/editorjs";
 import { OutputData } from "@editorjs/editorjs/types";
+import { type RichTextEditorPrimitiveProps } from "./RichTextEditorPrimitive";
 
 interface CreatePropsFromConfigResult {
     onReady: (editor: any) => void;
@@ -19,7 +20,7 @@ interface OnReadyParams {
  * TODO: figure out types for editor and return type of the function.
  */
 export const createPropsFromConfig = (
-    config: RichTextEditorProps[]
+    config: RichTextEditorPrimitiveProps[]
 ): CreatePropsFromConfigResult => {
     const configs = (Array.isArray(config) ? config : [config]) as RichTextEditorProps[];
 
diff --git a/packages/admin-ui/src/RichTextEditor/index.ts b/packages/admin-ui/src/RichTextEditor/index.ts
new file mode 100644
index 00000000000..b9cb8023202
--- /dev/null
+++ b/packages/admin-ui/src/RichTextEditor/index.ts
@@ -0,0 +1,3 @@
+export * from "./RichTextEditor";
+export * from "./RichTextEditorPrimitive";
+export { createPropsFromConfig } from "./createPropsFromConfig";
diff --git a/packages/admin-ui/src/Scrollbar/Scrollbar.tsx b/packages/admin-ui/src/Scrollbar/Scrollbar.tsx
new file mode 100644
index 00000000000..5f2d87bc188
--- /dev/null
+++ b/packages/admin-ui/src/Scrollbar/Scrollbar.tsx
@@ -0,0 +1,16 @@
+import React from "react";
+import {
+    type ScrollbarProps as ReactCustomScrollbarProps,
+    Scrollbars
+} from "react-custom-scrollbars";
+
+interface ScrollbarProps extends ReactCustomScrollbarProps {
+    style?: React.CSSProperties;
+    [key: string]: any;
+}
+
+const Scrollbar = (props: ScrollbarProps) => {
+    return <Scrollbars {...props} />;
+};
+
+export { Scrollbar, type ScrollbarProps };
diff --git a/packages/admin-ui/src/Scrollbar/index.ts b/packages/admin-ui/src/Scrollbar/index.ts
new file mode 100644
index 00000000000..2a7d3a6a891
--- /dev/null
+++ b/packages/admin-ui/src/Scrollbar/index.ts
@@ -0,0 +1 @@
+export * from "./Scrollbar";
diff --git a/packages/admin-ui/src/Select/Select.mdx b/packages/admin-ui/src/Select/Select.mdx
new file mode 100644
index 00000000000..3b28b5ede7d
--- /dev/null
+++ b/packages/admin-ui/src/Select/Select.mdx
@@ -0,0 +1,116 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+
+import * as SelectStories from './Select.stories';
+
+<Meta of={SelectStories} />
+
+# Select
+
+The Select component is a user interface element that allows users to choose one or multiple options from a predefined list. It simplifies data input by presenting a structured selection, reducing errors, and improving usability.
+
+## Usage
+
+<Canvas of={SelectStories.Documentation} source={ { code: `
+import React, { useState } from "react";
+
+import { Select } from "@webiny/admin-ui";
+
+const SelectExample = () => {
+    const [value, setValue] = useState("");
+
+    return (
+        <Select
+            label="Time Zone"
+            description="Select your preferred time zone"
+            note="This setting will affect how times are displayed throughout the application"
+            required={true}
+            options={[
+                { value: "EST", label: "Eastern Standard Time (UTC-5)" },
+                { value: "CST", label: "Central Standard Time (UTC-6)" },
+                { value: "PST", label: "Pacific Standard Time (UTC-8)" },
+                { value: "GMT", label: "Greenwich Mean Time (UTC+0)" },
+                { value: "CET", label: "Central European Time (UTC+1)" },
+                { value: "IST", label: "India Standard Time (UTC+5:30)" }
+            ]}
+            value={value}
+            onChange={setValue}
+        />
+    );
+};
+
+export default SelectExample;
+
+`} }
+    additionalActions={[
+        {
+            title: 'Open in GitHub',
+            onClick: () => {
+                window.open(
+                    'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Select/Select.tsx',
+                    '_blank'
+                );
+            },
+        }
+    ]}
+/>
+
+<Controls of={SelectStories.Documentation} exclude={["onChange", "onOpenChange"]}/>
+
+```jsx
+import React, { useState } from "react";
+
+import { Select } from "@webiny/admin-ui";
+
+const SelectExample = () => {
+    const [value, setValue] = useState("");
+
+    return (
+        <Select
+            label="Time Zone"
+            description="Select your preferred time zone"
+            note="This setting will affect how times are displayed throughout the application"
+            required={true}
+            options={[
+                { value: "EST", label: "Eastern Standard Time (UTC-5)" },
+                { value: "CST", label: "Central Standard Time (UTC-6)" },
+                { value: "PST", label: "Pacific Standard Time (UTC-8)" },
+                { value: "GMT", label: "Greenwich Mean Time (UTC+0)" },
+                { value: "CET", label: "Central European Time (UTC+1)" },
+                { value: "IST", label: "India Standard Time (UTC+5:30)" }
+            ]}
+            value={value}
+            onChange={setValue}
+        />
+    );
+};
+
+export default SelectExample;
+```
+
+## Anatomy
+
+### Select Anatomy
+<img src="/images/storybook/select/anatomy.png" alt="Select Anatomy"/>
+
+### Styles
+<img src="/images/storybook/select/styles.png" alt="Styles"/>
+
+### Options
+<img src="/images/storybook/select/options.png" alt="Options"/>
+
+### States and Styles
+<img src="/images/storybook/select/states-and-styles.png" alt="States and Styles"/>
+
+### Label Anatomy
+<img src="/images/storybook/select/label-anatomy.png" alt="Label Anatomy"/>
+
+### Label Properties
+<img src="/images/storybook/select/label-properties.png" alt="Label Properties"/>
+
+### Label Options
+<img src="/images/storybook/select/label-options.png" alt="Label Options"/>
+
+## Usage
+
+### Used in forms
+<img src="/images/storybook/select/used-in-forms.png" alt="Used in forms"/>
diff --git a/packages/admin-ui/src/Select/Select.stories.tsx b/packages/admin-ui/src/Select/Select.stories.tsx
new file mode 100644
index 00000000000..2e728d318af
--- /dev/null
+++ b/packages/admin-ui/src/Select/Select.stories.tsx
@@ -0,0 +1,132 @@
+import React, { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Select } from "~/Select";
+
+const meta: Meta<typeof Select> = {
+    title: "Components/Form/Select",
+    component: Select,
+    argTypes: {
+        onChange: { action: "onChange" },
+        onOpenChange: { action: "onOpenChange" },
+        disabled: {
+            control: "boolean",
+            defaultValue: false
+        }
+    },
+    parameters: {
+        layout: "padded"
+    },
+    render: args => {
+        const [value, setValue] = useState(args.value);
+        return <Select {...args} value={value} onChange={setValue} />;
+    }
+};
+
+export default meta;
+type Story = StoryObj<typeof Select>;
+
+export const Default: Story = {
+    args: {
+        options: [
+            { value: "EST", label: "Eastern Standard Time (UTC-5)" },
+            { value: "CST", label: "Central Standard Time (UTC-6)" },
+            { value: "PST", label: "Pacific Standard Time (UTC-8)" },
+            { value: "GMT", label: "Greenwich Mean Time (UTC+0)" },
+            { value: "CET", label: "Central European Time (UTC+1)" },
+            { value: "CAT", label: "Central Africa Time (UTC+2)" },
+            { value: "IST", label: "India Standard Time (UTC+5:30)" },
+            { value: "CST_CHINA", label: "China Standard Time (UTC+8)" },
+            { value: "JST", label: "Japan Standard Time (UTC+9)" },
+            { value: "AWST", label: "Australian Western Standard Time (UTC+8)" },
+            { value: "NZST", label: "New Zealand Standard Time (UTC+12)" },
+            { value: "FJT", label: "Fiji Time (UTC+12)" },
+            { value: "ART", label: "Argentina Time (UTC-3)" },
+            { value: "BOT", label: "Bolivia Time (UTC-4)" },
+            { value: "BRT", label: "Brasilia Time (UTC-3)" }
+        ]
+    }
+};
+
+export const WithLabel: Story = {
+    args: {
+        ...Default.args,
+        label: "Any field label"
+    }
+};
+
+export const WithRequiredLabel: Story = {
+    args: {
+        ...Default.args,
+        label: "Any field label",
+        required: true
+    }
+};
+
+export const WithDescription: Story = {
+    args: {
+        ...Default.args,
+        description: "Provide the required information for processing your request."
+    }
+};
+
+export const WithNotes: Story = {
+    args: {
+        ...Default.args,
+        note: "Note: Ensure your selection or input is accurate before proceeding."
+    }
+};
+
+export const WithErrors: Story = {
+    args: {
+        ...Default.args,
+        validation: {
+            isValid: false,
+            message: "This field is required."
+        }
+    }
+};
+
+export const Disabled: Story = {
+    args: {
+        ...Default.args,
+        label: "Any field label",
+        disabled: true
+    }
+};
+
+export const FullExample: Story = {
+    args: {
+        ...Default.args,
+        label: "Any field label",
+        required: true,
+        description: "Provide the required information for processing your request.",
+        note: "Note: Ensure your selection or input is accurate before proceeding.",
+        validation: {
+            isValid: false,
+            message: "This field is required."
+        }
+    }
+};
+
+export const Documentation: Story = {
+    render: args => {
+        const [value, setValue] = useState("");
+
+        return <Select {...args} value={value} onChange={newValue => setValue(newValue)} />;
+    },
+    args: {
+        label: "Time Zone",
+        description: "Select your preferred time zone",
+        note: "This setting will affect how times are displayed throughout the application",
+        required: true,
+        disabled: false,
+        options: [
+            { value: "EST", label: "Eastern Standard Time (UTC-5)" },
+            { value: "CST", label: "Central Standard Time (UTC-6)" },
+            { value: "PST", label: "Pacific Standard Time (UTC-8)" },
+            { value: "GMT", label: "Greenwich Mean Time (UTC+0)" },
+            { value: "CET", label: "Central European Time (UTC+1)" },
+            { value: "IST", label: "India Standard Time (UTC+5:30)" }
+        ]
+    }
+};
diff --git a/packages/admin-ui/src/Select/Select.tsx b/packages/admin-ui/src/Select/Select.tsx
new file mode 100644
index 00000000000..97b8e34099b
--- /dev/null
+++ b/packages/admin-ui/src/Select/Select.tsx
@@ -0,0 +1,47 @@
+import React, { useMemo } from "react";
+import { makeDecoratable } from "~/utils";
+import { SelectPrimitive, SelectPrimitiveProps } from "./primitives";
+import {
+    FormComponentDescription,
+    FormComponentErrorMessage,
+    FormComponentLabel,
+    FormComponentNote,
+    FormComponentProps
+} from "~/FormComponent";
+
+type SelectProps = SelectPrimitiveProps & FormComponentProps;
+
+const DecoratableSelect = ({
+    label,
+    description,
+    note,
+    required,
+    disabled,
+    validation,
+    ...props
+}: SelectProps) => {
+    const { isValid: validationIsValid, message: validationMessage } = validation || {};
+    const invalid = useMemo(() => validationIsValid === false, [validationIsValid]);
+
+    return (
+        <div className={"wby-w-full"}>
+            <FormComponentLabel
+                text={label}
+                required={required}
+                disabled={disabled}
+                invalid={invalid}
+            />
+            <FormComponentDescription text={description} disabled={disabled} />
+            <SelectPrimitive {...props} disabled={disabled} invalid={invalid} />
+            <FormComponentErrorMessage
+                text={validationMessage}
+                invalid={invalid}
+                disabled={disabled}
+            />
+            <FormComponentNote text={note} disabled={disabled} />
+        </div>
+    );
+};
+const Select = makeDecoratable("Select", DecoratableSelect);
+
+export { Select, type SelectProps };
diff --git a/packages/admin-ui/src/Select/domains/SelectOption.ts b/packages/admin-ui/src/Select/domains/SelectOption.ts
new file mode 100644
index 00000000000..d18f862c15b
--- /dev/null
+++ b/packages/admin-ui/src/Select/domains/SelectOption.ts
@@ -0,0 +1,63 @@
+import { SelectOptionDto } from "./SelectOptionDto";
+
+export class SelectOption {
+    private readonly _label: string;
+    private readonly _value: string | null;
+    private readonly _options: SelectOption[];
+    private readonly _disabled: boolean;
+    private readonly _separator: boolean;
+
+    protected constructor(data: {
+        label: string;
+        value: string | null;
+        options: SelectOptionDto[];
+        disabled: boolean;
+        separator: boolean;
+    }) {
+        this._label = data.label;
+        this._value = data.value;
+        this._options = data.options.map(option => SelectOption.create(option));
+        this._disabled = data.disabled;
+        this._separator = data.separator;
+    }
+
+    static create(data: SelectOptionDto) {
+        return new SelectOption({
+            label: data.label,
+            value: data.value ?? null,
+            options: data.options ?? [],
+            disabled: data.disabled ?? false,
+            separator: data.separator ?? false
+        });
+    }
+
+    static createFromString(value: string) {
+        return new SelectOption({
+            label: value,
+            value: value,
+            options: [],
+            disabled: false,
+            separator: false
+        });
+    }
+
+    get label() {
+        return this._label;
+    }
+
+    get value() {
+        return this._value;
+    }
+
+    get options() {
+        return this._options;
+    }
+
+    get disabled() {
+        return this._disabled;
+    }
+
+    get separator() {
+        return this._separator;
+    }
+}
diff --git a/packages/admin-ui/src/Select/domains/SelectOptionDto.ts b/packages/admin-ui/src/Select/domains/SelectOptionDto.ts
new file mode 100644
index 00000000000..b1ae4c83aed
--- /dev/null
+++ b/packages/admin-ui/src/Select/domains/SelectOptionDto.ts
@@ -0,0 +1,7 @@
+export interface SelectOptionDto {
+    label: string;
+    value?: string;
+    options?: SelectOptionDto[];
+    disabled?: boolean;
+    separator?: boolean;
+}
diff --git a/packages/admin-ui/src/Select/domains/SelectOptionFormatted.ts b/packages/admin-ui/src/Select/domains/SelectOptionFormatted.ts
new file mode 100644
index 00000000000..d4b4d062039
--- /dev/null
+++ b/packages/admin-ui/src/Select/domains/SelectOptionFormatted.ts
@@ -0,0 +1,7 @@
+export interface SelectOptionFormatted {
+    label: string;
+    value: string | null;
+    options: SelectOptionFormatted[];
+    disabled: boolean;
+    separator: boolean;
+}
diff --git a/packages/admin-ui/src/Select/domains/SelectOptionMapper.ts b/packages/admin-ui/src/Select/domains/SelectOptionMapper.ts
new file mode 100644
index 00000000000..45bbfbf278d
--- /dev/null
+++ b/packages/admin-ui/src/Select/domains/SelectOptionMapper.ts
@@ -0,0 +1,14 @@
+import { SelectOption } from "./SelectOption";
+import { SelectOptionFormatted } from "./SelectOptionFormatted";
+
+export class SelectOptionMapper {
+    static toFormatted(option: SelectOption): SelectOptionFormatted {
+        return {
+            label: option.label,
+            value: option.value,
+            disabled: option.disabled,
+            separator: option.separator,
+            options: option.options.map(option => SelectOptionMapper.toFormatted(option))
+        };
+    }
+}
diff --git a/packages/admin-ui/src/Select/domains/index.ts b/packages/admin-ui/src/Select/domains/index.ts
new file mode 100644
index 00000000000..1ed76be0d9f
--- /dev/null
+++ b/packages/admin-ui/src/Select/domains/index.ts
@@ -0,0 +1,4 @@
+export * from "./SelectOption";
+export * from "./SelectOptionDto";
+export * from "./SelectOptionFormatted";
+export * from "./SelectOptionMapper";
diff --git a/packages/admin-ui/src/Select/index.ts b/packages/admin-ui/src/Select/index.ts
new file mode 100644
index 00000000000..6e6ad73f58b
--- /dev/null
+++ b/packages/admin-ui/src/Select/index.ts
@@ -0,0 +1,3 @@
+export { type SelectOptionDto, type SelectOptionFormatted, SelectOptionMapper } from "./domains";
+export * from "./Select";
+export * from "./primitives/SelectPrimitive";
diff --git a/packages/admin-ui/src/Select/primitives/SelectPrimitive.stories.tsx b/packages/admin-ui/src/Select/primitives/SelectPrimitive.stories.tsx
new file mode 100644
index 00000000000..1e5ffb8a0ad
--- /dev/null
+++ b/packages/admin-ui/src/Select/primitives/SelectPrimitive.stories.tsx
@@ -0,0 +1,334 @@
+import React, { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { ReactComponent as SearchIcon } from "@webiny/icons/search.svg";
+import { ReactComponent as ChevronRight } from "@webiny/icons/chevron_right.svg";
+import { SelectPrimitive } from "./SelectPrimitive";
+import { Button } from "~/Button";
+
+const meta: Meta<typeof SelectPrimitive> = {
+    title: "Components/Form Primitives/Select",
+    component: SelectPrimitive,
+    argTypes: {
+        onChange: { action: "onChange" },
+        onOpenChange: { action: "onOpenChange" },
+        variant: { control: "select", options: ["primary", "secondary", "ghost"] },
+        size: { control: "select", options: ["md", "lg", "xl"] },
+        disabled: { control: "boolean" },
+        invalid: { control: "boolean" }
+    },
+    parameters: {
+        layout: "padded"
+    },
+    render: args => {
+        const [value, setValue] = useState(args.value);
+        return (
+            <div className={"wby-w-full"}>
+                <SelectPrimitive {...args} value={value} onChange={setValue} />
+                <div className={"wby-mt-4 wby-text-center"}>
+                    Current selected value: <pre>{value}</pre>
+                </div>
+            </div>
+        );
+    }
+};
+
+export default meta;
+
+type Story = StoryObj<typeof SelectPrimitive>;
+
+export const Default: Story = {
+    args: {
+        options: [
+            "Eastern Standard Time (EST)",
+            "Central Standard Time (CST)",
+            "Pacific Standard Time (PST)",
+            "Greenwich Mean Time (GMT)",
+            "Central European Time (CET)",
+            "Central Africa Time (CAT)",
+            "India Standard Time (IST)",
+            "China Standard Time (CST)",
+            "Japan Standard Time (JST)",
+            "Australian Western Standard Time (AWST)",
+            "New Zealand Standard Time (NZST)",
+            "Fiji Time (FJT)",
+            "Argentina Time (ART)",
+            "Bolivia Time (BOT)",
+            "Brasilia Time (BRT)"
+        ]
+    }
+};
+
+export const MediumSize: Story = {
+    args: {
+        ...Default.args,
+        size: "md"
+    }
+};
+
+export const LargeSize: Story = {
+    args: {
+        ...Default.args,
+        size: "lg"
+    }
+};
+
+export const ExtraLargeSize: Story = {
+    args: {
+        ...Default.args,
+        size: "xl"
+    }
+};
+
+export const WithCustomPlaceholder: Story = {
+    args: {
+        ...Default.args,
+        placeholder: "Custom placeholder"
+    }
+};
+
+export const WithStartIcon: Story = {
+    args: {
+        ...Default.args,
+        startIcon: <SearchIcon />
+    }
+};
+
+export const WithEndIconIcon: Story = {
+    args: {
+        ...Default.args,
+        endIcon: <SearchIcon />
+    }
+};
+
+export const WithStartAndEndIcons: Story = {
+    args: {
+        ...Default.args,
+        startIcon: <SearchIcon />,
+        endIcon: <ChevronRight />
+    }
+};
+
+export const WithoutResetAction: Story = {
+    args: {
+        ...Default.args,
+        displayResetAction: false
+    }
+};
+
+export const PrimaryVariant: Story = {
+    args: {
+        ...Default.args,
+        variant: "primary"
+    }
+};
+
+export const PrimaryVariantDisabled: Story = {
+    args: {
+        ...PrimaryVariant.args,
+        disabled: true
+    }
+};
+
+export const PrimaryVariantInvalid: Story = {
+    args: {
+        ...PrimaryVariant.args,
+        invalid: true
+    }
+};
+
+export const SecondaryVariant: Story = {
+    args: {
+        ...Default.args,
+        variant: "secondary"
+    }
+};
+
+export const SecondaryVariantDisabled: Story = {
+    args: {
+        ...SecondaryVariant.args,
+        disabled: true
+    }
+};
+
+export const SecondaryVariantInvalid: Story = {
+    args: {
+        ...SecondaryVariant.args,
+        invalid: true
+    }
+};
+
+export const GhostVariant: Story = {
+    args: {
+        ...Default.args,
+        variant: "ghost"
+    }
+};
+
+export const GhostVariantDisabled: Story = {
+    args: {
+        ...GhostVariant.args,
+        disabled: true
+    }
+};
+
+export const GhostVariantInvalid: Story = {
+    args: {
+        ...GhostVariant.args,
+        invalid: true
+    }
+};
+
+export const WithFormattedOptions: Story = {
+    args: {
+        ...Default.args,
+        options: [
+            { label: "Eastern Standard Time (EST)", value: "est" },
+            { label: "Central Standard Time (CST)", value: "cst" },
+            { label: "Pacific Standard Time (PST)", value: "pst" },
+            { label: "Greenwich Mean Time (GMT)", value: "gmt" },
+            { label: "Central European Time (CET)", value: "cet" },
+            { label: "Central Africa Time (CAT)", value: "cat" },
+            { label: "India Standard Time (IST)", value: "ist" },
+            { label: "China Standard Time (CST)", value: "cst_china" },
+            { label: "Japan Standard Time (JST)", value: "jst" },
+            { label: "Australian Western Standard Time (AWST)", value: "awst" },
+            { label: "New Zealand Standard Time (NZST)", value: "nzst" },
+            { label: "Fiji Time (FJT)", value: "fjt" },
+            { label: "Argentina Time (ART)", value: "art" },
+            { label: "Bolivia Time (BOT)", value: "bot" },
+            { label: "Brasilia Time (BRT)", value: "brt" }
+        ]
+    }
+};
+
+export const WithOptionGroups: Story = {
+    args: {
+        ...Default.args,
+        options: [
+            {
+                label: "North America",
+                options: [
+                    { label: "Eastern Standard Time (EST)", value: "est" },
+                    { label: "Central Standard Time (CST)", value: "cst" },
+                    { label: "Pacific Standard Time (PST)", value: "pst" }
+                ]
+            },
+            {
+                label: "Europe & Africa",
+                options: [
+                    { label: "Greenwich Mean Time (GMT)", value: "gmt" },
+                    { label: "Central European Time (CET)", value: "cet" },
+                    { label: "Central Africa Time (CAT)", value: "cat" }
+                ]
+            },
+            {
+                label: "Asia",
+                options: [
+                    { label: "India Standard Time (IST)", value: "ist" },
+                    { label: "China Standard Time (CST)", value: "cst_china" },
+                    { label: "Japan Standard Time (JST)", value: "jst" }
+                ]
+            },
+            {
+                label: "Australia & Pacific",
+                options: [
+                    { label: "Australian Western Standard Time (AWST)", value: "awst" },
+                    { label: "New Zealand Standard Time (NZST)", value: "nzst" },
+                    { label: "Fiji Time (FJT)", value: "fjt" }
+                ]
+            },
+            {
+                label: "South America",
+                options: [
+                    { label: "Argentina Time (ART)", value: "art" },
+                    { label: "Bolivia Time (BOT)", value: "bot" },
+                    { label: "Brasilia Time (BRT)", value: "brt" }
+                ]
+            }
+        ]
+    }
+};
+
+export const WithSeparators: Story = {
+    args: {
+        ...Default.args,
+        options: [
+            { label: "Eastern Standard Time (EST)", value: "est" },
+            { label: "Central Standard Time (CST)", value: "cst" },
+            { label: "Pacific Standard Time (PST)", value: "pst", separator: true },
+            { label: "Greenwich Mean Time (GMT)", value: "gmt" },
+            { label: "Central European Time (CET)", value: "cet" },
+            { label: "Central Africa Time (CAT)", value: "cat", separator: true },
+            { label: "India Standard Time (IST)", value: "ist" },
+            { label: "China Standard Time (CST)", value: "cst_china" },
+            { label: "Japan Standard Time (JST)", value: "jst", separator: true },
+            { label: "Australian Western Standard Time (AWST)", value: "awst" },
+            { label: "New Zealand Standard Time (NZST)", value: "nzst" },
+            { label: "Fiji Time (FJT)", value: "fjt", separator: true },
+            { label: "Argentina Time (ART)", value: "art" },
+            { label: "Bolivia Time (BOT)", value: "bot" },
+            { label: "Brasilia Time (BRT)", value: "brt" }
+        ]
+    }
+};
+
+export const WithDisabledOptions: Story = {
+    args: {
+        options: [
+            { label: "Eastern Standard Time (EST)", value: "est", disabled: true },
+            { label: "Central Standard Time (CST)", value: "cst", disabled: true },
+            { label: "Pacific Standard Time (PST)", value: "pst", disabled: true },
+            { label: "Greenwich Mean Time (GMT)", value: "gmt" },
+            { label: "Central European Time (CET)", value: "cet" },
+            { label: "Central Africa Time (CAT)", value: "cat" },
+            { label: "India Standard Time (IST)", value: "ist" },
+            { label: "China Standard Time (CST)", value: "cst_china" },
+            { label: "Japan Standard Time (JST)", value: "jst" },
+            { label: "Australian Western Standard Time (AWST)", value: "awst" },
+            { label: "New Zealand Standard Time (NZST)", value: "nzst" },
+            { label: "Fiji Time (FJT)", value: "fjt" },
+            { label: "Argentina Time (ART)", value: "art" },
+            { label: "Bolivia Time (BOT)", value: "bot" },
+            { label: "Brasilia Time (BRT)", value: "brt" }
+        ]
+    }
+};
+
+export const WithExternalValueControl: Story = {
+    args: {
+        ...Default.args,
+        options: [
+            "Eastern Standard Time (EST)",
+            "Central Standard Time (CST)",
+            "Pacific Standard Time (PST)",
+            "Greenwich Mean Time (GMT)",
+            "Central European Time (CET)",
+            "Central Africa Time (CAT)",
+            "India Standard Time (IST)",
+            "China Standard Time (CST)",
+            "Japan Standard Time (JST)",
+            "Australian Western Standard Time (AWST)",
+            "New Zealand Standard Time (NZST)",
+            "Fiji Time (FJT)",
+            "Argentina Time (ART)",
+            "Bolivia Time (BOT)",
+            "Brasilia Time (BRT)"
+        ]
+    },
+    render: args => {
+        const [value, setValue] = useState(args.value);
+        return (
+            <div className={"wby-w-full"}>
+                <div>
+                    <SelectPrimitive {...args} value={value} onChange={value => setValue(value)} />
+                </div>
+                <div className={"wby-mt-4 wby-text-center"}>
+                    <Button text={"Reset"} onClick={() => setValue("")} />
+                </div>
+                <div className={"wby-mt-4 wby-text-center"}>
+                    Current selected value: <pre>{value}</pre>
+                </div>
+            </div>
+        );
+    }
+};
diff --git a/packages/admin-ui/src/Select/primitives/SelectPrimitive.tsx b/packages/admin-ui/src/Select/primitives/SelectPrimitive.tsx
new file mode 100644
index 00000000000..c3025a513c4
--- /dev/null
+++ b/packages/admin-ui/src/Select/primitives/SelectPrimitive.tsx
@@ -0,0 +1,262 @@
+import * as React from "react";
+import { ReactComponent as Close } from "@webiny/icons/close.svg";
+import * as SelectPrimitives from "@radix-ui/react-select";
+import { type VariantProps } from "~/utils";
+import { useSelect } from "./useSelect";
+import { SelectOptionDto, SelectOptionFormatted } from "../domains";
+import { IconButton } from "~/Button";
+import { Icon } from "~/Icon";
+import {
+    SelectContent,
+    SelectItem,
+    SelectLabel,
+    SelectSeparator,
+    SelectTrigger,
+    selectTriggerVariants
+} from "./components";
+
+const SelectRoot = SelectPrimitives.Root;
+
+const SelectGroup = SelectPrimitives.Group;
+
+const SelectValue = SelectPrimitives.Value;
+
+/**
+ * Trigger
+ */
+type SelectTriggerVm = {
+    placeholder: string;
+    hasValue: boolean;
+    displayResetAction: boolean;
+};
+
+type SelectTriggerProps = SelectPrimitives.SelectValueProps &
+    SelectTriggerVm & {
+        size: VariantProps<typeof selectTriggerVariants>["size"];
+        variant: VariantProps<typeof selectTriggerVariants>["variant"];
+        invalid: VariantProps<typeof selectTriggerVariants>["invalid"];
+        startIcon?: React.ReactElement;
+        endIcon?: React.ReactElement;
+        onValueReset: () => void;
+        disabled?: boolean;
+    };
+
+const Trigger = ({
+    hasValue,
+    size,
+    variant,
+    startIcon,
+    endIcon,
+    invalid,
+    onValueReset,
+    disabled,
+    displayResetAction,
+    ...props
+}: SelectTriggerProps) => {
+    const resetButton = React.useMemo(() => {
+        if (!hasValue || !displayResetAction) {
+            return undefined;
+        }
+
+        return (
+            <IconButton
+                onPointerDown={event => {
+                    event.stopPropagation();
+                    onValueReset();
+                }}
+                icon={
+                    <span>
+                        <Icon icon={<Close />} label={"Reset"} />
+                    </span>
+                }
+                size={"xs"}
+                variant={"secondary"}
+                disabled={disabled}
+                asChild
+            />
+        );
+    }, [hasValue, onValueReset, disabled]);
+
+    return (
+        <SelectTrigger
+            size={size}
+            variant={variant}
+            invalid={invalid}
+            startIcon={startIcon}
+            endIcon={endIcon}
+            resetButton={resetButton}
+        >
+            <div className={"wby-flex-1 wby-text-left wby-truncate"}>
+                <SelectValue {...props} />
+            </div>
+        </SelectTrigger>
+    );
+};
+
+/**
+ * SelectOptions
+ */
+type SelectOptionsVm = {
+    options: SelectOptionFormatted[];
+};
+
+type SelectOptionsProps = SelectOptionsVm;
+
+const SelectOptions = (props: SelectOptionsProps) => {
+    const renderOptions = React.useCallback((items: SelectOptionFormatted[]) => {
+        return items.map((item, index) => {
+            const elements = [];
+
+            if (item.options.length > 0) {
+                // Render as a group if there are nested options
+                elements.push(
+                    <SelectGroup key={`group-${index}`}>
+                        <SelectLabel>{item.label}</SelectLabel>
+                        {renderOptions(item.options)}
+                    </SelectGroup>
+                );
+            }
+
+            if (item.value) {
+                // Render as a select item if there are no nested options
+                elements.push(
+                    <SelectItem
+                        key={`item-${item.value}`}
+                        value={item.value}
+                        disabled={item.disabled}
+                    >
+                        {item.label}
+                    </SelectItem>
+                );
+            }
+
+            // Conditionally render the separator if hasSeparator is true
+            if (item.separator) {
+                elements.push(<SelectSeparator key={`separator-${item.value ?? index}`} />);
+            }
+
+            return elements;
+        });
+    }, []);
+
+    return <SelectContent>{renderOptions(props.options)}</SelectContent>;
+};
+
+/**
+ * SelectRenderer
+ */
+type SelectRootProps = SelectPrimitives.SelectProps;
+
+type SelectRendererProps = {
+    selectRootProps: Omit<SelectRootProps, "onValueChange">;
+    selectTriggerProps: Omit<SelectTriggerProps, "onValueReset">;
+    selectOptionsProps: SelectOptionsProps;
+    onValueChange: (value: string) => void;
+    onValueReset: () => void;
+};
+
+const SelectPrimitiveRenderer = ({
+    selectRootProps,
+    selectTriggerProps,
+    selectOptionsProps,
+    onValueChange,
+    onValueReset
+}: SelectRendererProps) => {
+    return (
+        <SelectRoot {...selectRootProps} onValueChange={onValueChange}>
+            <Trigger {...selectTriggerProps} onValueReset={onValueReset} />
+            <SelectOptions {...selectOptionsProps} />
+        </SelectRoot>
+    );
+};
+
+/**
+ * Select
+ */
+type SelectOption = SelectOptionDto | string;
+
+interface SelectPrimitiveProps {
+    /**
+     * Whether to display the reset action button.
+     */
+    displayResetAction?: boolean;
+    /**
+     * Indicates if the field is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Icon to display at the end of the select trigger.
+     */
+    endIcon?: React.ReactElement;
+    /**
+     * Whether the select input is invalid.
+     */
+    invalid?: VariantProps<typeof selectTriggerVariants>["invalid"];
+    /**
+     * Callback function called when the value changes.
+     */
+    onChange?: (value: string) => void;
+    /**
+     * Callback function called when the open state changes.
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Callback function called when the value is reset.
+     */
+    onValueReset?: () => void;
+    /**
+     * Array of options to display in the select dropdown.
+     */
+    options?: SelectOption[];
+    /**
+     * Placeholder text to display when no value is selected.
+     */
+    placeholder?: string;
+    /**
+     * Size variant of the select trigger.
+     */
+    size?: VariantProps<typeof selectTriggerVariants>["size"];
+    /**
+     * Icon to display at the start of the select trigger.
+     */
+    startIcon?: React.ReactElement;
+    /**
+     * The value of the select input.
+     */
+    value?: string;
+    /**
+     * Style variant of the select trigger.
+     */
+    variant?: VariantProps<typeof selectTriggerVariants>["variant"];
+}
+
+const SelectPrimitive = (props: SelectPrimitiveProps) => {
+    const { vm, changeValue, resetValue } = useSelect(props);
+    const { size, variant, startIcon, endIcon, invalid, disabled, ...selectRootProps } = props;
+
+    return (
+        <SelectPrimitiveRenderer
+            selectRootProps={{ ...selectRootProps, disabled }}
+            selectTriggerProps={{
+                ...vm.selectTrigger,
+                size,
+                variant,
+                startIcon,
+                endIcon,
+                invalid,
+                disabled
+            }}
+            selectOptionsProps={vm.selectOptions}
+            onValueChange={changeValue}
+            onValueReset={resetValue}
+        />
+    );
+};
+
+export {
+    SelectPrimitive,
+    type SelectPrimitiveProps,
+    type SelectOptionsVm,
+    type SelectTriggerVm,
+    type SelectOption
+};
diff --git a/packages/admin-ui/src/Select/primitives/components/SelectContent.tsx b/packages/admin-ui/src/Select/primitives/components/SelectContent.tsx
new file mode 100644
index 00000000000..f88754de939
--- /dev/null
+++ b/packages/admin-ui/src/Select/primitives/components/SelectContent.tsx
@@ -0,0 +1,37 @@
+import * as React from "react";
+import * as SelectPrimitives from "@radix-ui/react-select";
+import { cn } from "~/utils";
+import { SelectScrollUpButton } from "./SelectScrollUpButton";
+import { SelectScrollDownButton } from "./SelectScrollDownButton";
+
+type SelectContentProps = SelectPrimitives.SelectContentProps;
+
+const SelectContent = ({ className, children, ...props }: SelectContentProps) => (
+    <SelectPrimitives.Portal>
+        <SelectPrimitives.Content
+            className={cn(
+                [
+                    "wby-relative wby-z-50 wby-max-h-96 wby-min-w-56 wby-shadow-lg wby-py-sm wby-overflow-hidden wby-rounded-sm wby-border-sm wby-border-neutral-muted wby-bg-neutral-base wby-text-neutral-strong",
+                    "data-[state=open]:wby-animate-in data-[state=closed]:wby-animate-out data-[state=closed]:wby-fade-out-0 data-[state=open]:wby-fade-in-0 data-[state=closed]:wby-zoom-out-95 data-[state=open]:wby-zoom-in-95 data-[side=bottom]:wby-slide-in-from-top-2 data-[side=left]:wby-slide-in-from-right-2 data-[side=right]:wby-slide-in-from-left-2 data-[side=top]:wby-slide-in-from-bottom-2",
+                    "data-[side=bottom]:wby-translate-y-1 data-[side=left]:wby--translate-x-1 data-[side=right]:wby-translate-x-1 data-[side=top]:wby--translate-y-1"
+                ],
+                className
+            )}
+            position={"popper"}
+            {...props}
+        >
+            <SelectScrollUpButton />
+            <SelectPrimitives.Viewport
+                className={cn([
+                    "wby-py-xs",
+                    "wby-h-[var(--radix-select-trigger-height)] wby-w-full wby-min-w-[var(--radix-select-trigger-width)]"
+                ])}
+            >
+                {children}
+            </SelectPrimitives.Viewport>
+            <SelectScrollDownButton />
+        </SelectPrimitives.Content>
+    </SelectPrimitives.Portal>
+);
+
+export { SelectContent, type SelectContentProps };
diff --git a/packages/admin-ui/src/Select/primitives/components/SelectIcon.tsx b/packages/admin-ui/src/Select/primitives/components/SelectIcon.tsx
new file mode 100644
index 00000000000..d5c2ade0ef5
--- /dev/null
+++ b/packages/admin-ui/src/Select/primitives/components/SelectIcon.tsx
@@ -0,0 +1,16 @@
+import * as React from "react";
+import * as SelectPrimitives from "@radix-ui/react-select";
+
+type SelectIconProps = {
+    icon: React.ReactElement;
+};
+
+const SelectIcon = ({ icon }: SelectIconProps) => {
+    return (
+        <SelectPrimitives.Icon asChild className={"wby-h-md wby-w-md"}>
+            {React.cloneElement(icon)}
+        </SelectPrimitives.Icon>
+    );
+};
+
+export { SelectIcon, type SelectIconProps };
diff --git a/packages/admin-ui/src/Select/primitives/components/SelectItem.tsx b/packages/admin-ui/src/Select/primitives/components/SelectItem.tsx
new file mode 100644
index 00000000000..416e8596d32
--- /dev/null
+++ b/packages/admin-ui/src/Select/primitives/components/SelectItem.tsx
@@ -0,0 +1,29 @@
+import * as React from "react";
+import { ReactComponent as Check } from "@webiny/icons/check.svg";
+import * as SelectPrimitives from "@radix-ui/react-select";
+import { cn } from "~/utils";
+
+type SelectItemProps = SelectPrimitives.SelectItemProps;
+
+const SelectItem = ({ className, children, ...props }: SelectPrimitives.SelectItemProps) => (
+    <SelectPrimitives.Item
+        className={cn(
+            [
+                "wby-flex wby-items-center wby-justify-between wby-gap-sm-extra wby-cursor-default wby-select-none wby-rounded-sm wby-p-sm wby-mx-sm wby-text-md wby-outline-none",
+                "wby-bg-neutral-base wby-text-neutral-primary wby-fill-neutral-xstrong",
+                "focus:wby-bg-neutral-dimmed",
+                "data-[disabled]:wby-text-neutral-disabled data-[disabled]:wby-cursor-not-allowed",
+                "data-[state=checked]:wby-font-semibold"
+            ],
+            className
+        )}
+        {...props}
+    >
+        <SelectPrimitives.ItemText>{children}</SelectPrimitives.ItemText>
+        <SelectPrimitives.ItemIndicator>
+            <Check className="wby-h-md wby-w-h-md" />
+        </SelectPrimitives.ItemIndicator>
+    </SelectPrimitives.Item>
+);
+
+export { SelectItem, type SelectItemProps };
diff --git a/packages/admin-ui/src/Select/primitives/components/SelectLabel.tsx b/packages/admin-ui/src/Select/primitives/components/SelectLabel.tsx
new file mode 100644
index 00000000000..f0fd03b885d
--- /dev/null
+++ b/packages/admin-ui/src/Select/primitives/components/SelectLabel.tsx
@@ -0,0 +1,17 @@
+import * as React from "react";
+import * as SelectPrimitives from "@radix-ui/react-select";
+import { cn } from "~/utils";
+
+type SelectLabelProps = SelectPrimitives.SelectLabelProps;
+
+const SelectLabel = ({ className, ...props }: SelectPrimitives.SelectLabelProps) => (
+    <SelectPrimitives.Label
+        className={cn(
+            "wby-py-sm wby-px-md wby-text-neutral-strong wby-text-sm wby-font-semibold wby-uppercase",
+            className
+        )}
+        {...props}
+    />
+);
+
+export { SelectLabel, type SelectLabelProps };
diff --git a/packages/admin-ui/src/Select/primitives/components/SelectScrollDownButton.tsx b/packages/admin-ui/src/Select/primitives/components/SelectScrollDownButton.tsx
new file mode 100644
index 00000000000..b5483abefcc
--- /dev/null
+++ b/packages/admin-ui/src/Select/primitives/components/SelectScrollDownButton.tsx
@@ -0,0 +1,20 @@
+import * as React from "react";
+import { ReactComponent as ChevronDown } from "@webiny/icons/keyboard_arrow_down.svg";
+import * as SelectPrimitives from "@radix-ui/react-select";
+import { cn } from "~/utils";
+
+type SelectScrollDownButtonProps = SelectPrimitives.SelectScrollDownButtonProps;
+
+const SelectScrollDownButton = ({ className, ...props }: SelectScrollDownButtonProps) => (
+    <SelectPrimitives.ScrollDownButton
+        className={cn(
+            "wby-flex wby-cursor-default wby-items-center wby-justify-center wby-pt-sm wby-fill-neutral-xstrong",
+            className
+        )}
+        {...props}
+    >
+        <ChevronDown className="wby-h-md wby-w-md" />
+    </SelectPrimitives.ScrollDownButton>
+);
+
+export { SelectScrollDownButton, type SelectScrollDownButtonProps };
diff --git a/packages/admin-ui/src/Select/primitives/components/SelectScrollUpButton.tsx b/packages/admin-ui/src/Select/primitives/components/SelectScrollUpButton.tsx
new file mode 100644
index 00000000000..6efa77034ce
--- /dev/null
+++ b/packages/admin-ui/src/Select/primitives/components/SelectScrollUpButton.tsx
@@ -0,0 +1,20 @@
+import * as React from "react";
+import { ReactComponent as ChevronUp } from "@webiny/icons/keyboard_arrow_up.svg";
+import * as SelectPrimitives from "@radix-ui/react-select";
+import { cn } from "~/utils";
+
+type SelectScrollUpButtonProps = SelectPrimitives.SelectScrollUpButtonProps;
+
+const SelectScrollUpButton = ({ className, ...props }: SelectScrollUpButtonProps) => (
+    <SelectPrimitives.ScrollUpButton
+        className={cn(
+            "wby-flex wby-cursor-default wby-items-center wby-justify-center wby-pb-sm wby-fill-neutral-xstrong",
+            className
+        )}
+        {...props}
+    >
+        <ChevronUp className="wby-h-md wby-w-md" />
+    </SelectPrimitives.ScrollUpButton>
+);
+
+export { SelectScrollUpButton, type SelectScrollUpButtonProps };
diff --git a/packages/admin-ui/src/Select/primitives/components/SelectSeparator.tsx b/packages/admin-ui/src/Select/primitives/components/SelectSeparator.tsx
new file mode 100644
index 00000000000..728e1f0e4cd
--- /dev/null
+++ b/packages/admin-ui/src/Select/primitives/components/SelectSeparator.tsx
@@ -0,0 +1,13 @@
+import * as React from "react";
+import * as SelectPrimitives from "@radix-ui/react-select";
+import { cn } from "~/utils";
+
+type SelectSeparatorProps = SelectPrimitives.SelectSeparatorProps;
+
+const SelectSeparator = ({ className, ...props }: SelectSeparatorProps) => (
+    <SelectPrimitives.Separator
+        className={cn("wby--mx-sm wby-my-sm wby-h-px wby-bg-neutral-strong", className)}
+        {...props}
+    />
+);
+export { SelectSeparator, type SelectSeparatorProps };
diff --git a/packages/admin-ui/src/Select/primitives/components/SelectTrigger.tsx b/packages/admin-ui/src/Select/primitives/components/SelectTrigger.tsx
new file mode 100644
index 00000000000..c313573f802
--- /dev/null
+++ b/packages/admin-ui/src/Select/primitives/components/SelectTrigger.tsx
@@ -0,0 +1,112 @@
+import * as React from "react";
+import { ReactComponent as ChevronDown } from "@webiny/icons/keyboard_arrow_down.svg";
+import * as SelectPrimitives from "@radix-ui/react-select";
+import { cn, cva, type VariantProps } from "~/utils";
+import { SelectIcon } from "./SelectIcon";
+
+const selectTriggerVariants = cva(
+    [
+        "wby-w-full wby-flex wby-items-center wby-justify-between wby-gap-sm wby-border-sm wby-text-md wby-relative",
+        "focus:wby-outline-none",
+        "disabled:wby-pointer-events-none"
+    ],
+    {
+        variants: {
+            variant: {
+                primary: [
+                    "wby-bg-neutral-base wby-border-neutral-muted wby-text-neutral-strong placeholder:wby-text-neutral-dimmed wby-fill-neutral-xstrong",
+                    "hover:wby-border-neutral-strong",
+                    "focus:wby-border-neutral-black",
+                    "data-[state=open]:wby-border-neutral-black",
+                    "disabled:wby-bg-neutral-disabled disabled:wby-border-neutral-dimmed disabled:wby-text-neutral-disabled disabled:placeholder:wby-text-neutral-disabled disabled:wby-fill-neutral-disabled"
+                ],
+                secondary: [
+                    "wby-bg-neutral-light wby-border-neutral-subtle wby-text-neutral-strong placeholder:wby-text-neutral-muted wby-fill-neutral-xstrong",
+                    "hover:wby-bg-neutral-dimmed",
+                    "focus:wby-border-neutral-black focus:wby-bg-neutral-base",
+                    "data-[state=open]:wby-border-neutral-black data-[state=open]:wby-bg-neutral-base",
+                    "disabled:wby-bg-neutral-disabled disabled:wby-border-neutral-dimmed disabled:wby-text-neutral-disabled disabled:placeholder:wby-text-neutral-disabled disabled:wby-fill-neutral-disabled"
+                ],
+                ghost: [
+                    "wby-bg-neutral-base wby-border-transparent wby-text-neutral-strong placeholder:wby-text-neutral-dimmed",
+                    "hover:wby-bg-neutral-dark/5",
+                    "focus:wby-bg-neutral-dark/5",
+                    "data-[state=open]:wby-bg-neutral-dark/5",
+                    "disabled:wby-bg-neutral-disabled disabled:wby-border-neutral-dimmed disabled:wby-text-neutral-disabled disabled:placeholder:wby-text-neutral-disabled disabled:wby-fill-neutral-disabled"
+                ]
+            },
+            size: {
+                md: [
+                    "wby-rounded-md",
+                    "wby-py-[calc(theme(padding.xs-plus)-theme(borderWidth.sm))] wby-px-[calc(theme(padding.sm-extra)-theme(borderWidth.sm))]"
+                ],
+                lg: [
+                    "wby-rounded-md",
+                    "wby-py-[calc(theme(padding.sm-plus)-theme(borderWidth.sm))] wby-px-[calc(theme(padding.sm-extra)-theme(borderWidth.sm))]"
+                ],
+                xl: [
+                    "wby-rounded-lg wby-leading-6",
+                    "wby-py-[calc(theme(padding.md)-theme(borderWidth.sm))] wby-px-[calc(theme(padding.md)-theme(borderWidth.sm))]"
+                ]
+            },
+            invalid: {
+                true: ""
+            }
+        },
+        compoundVariants: [
+            {
+                variant: "primary",
+                invalid: true,
+                class: "!wby-border-destructive-default"
+            },
+            {
+                variant: "secondary",
+                invalid: true,
+                class: "!wby-border-destructive-default"
+            },
+            {
+                variant: "ghost",
+                invalid: true,
+                class: "!wby-border-destructive-subtle !wby-bg-destructive-subtle"
+            }
+        ],
+        defaultVariants: {
+            variant: "primary",
+            size: "lg"
+        }
+    }
+);
+
+interface SelectTriggerProps
+    extends SelectPrimitives.SelectTriggerProps,
+        VariantProps<typeof selectTriggerVariants> {
+    startIcon?: React.ReactElement;
+    endIcon?: React.ReactElement;
+    resetButton?: React.ReactElement;
+}
+
+const SelectTrigger = ({
+    className,
+    children,
+    size,
+    variant,
+    startIcon,
+    endIcon = <ChevronDown />,
+    resetButton,
+    disabled,
+    invalid,
+    ...props
+}: SelectTriggerProps) => (
+    <SelectPrimitives.Trigger
+        className={cn(selectTriggerVariants({ variant, size, invalid }), className)}
+        disabled={disabled}
+        {...props}
+    >
+        {startIcon && <SelectIcon icon={startIcon} />}
+        {children}
+        {resetButton}
+        <SelectIcon icon={endIcon} />
+    </SelectPrimitives.Trigger>
+);
+
+export { SelectTrigger, selectTriggerVariants };
diff --git a/packages/admin-ui/src/Select/primitives/components/index.ts b/packages/admin-ui/src/Select/primitives/components/index.ts
new file mode 100644
index 00000000000..65182f48608
--- /dev/null
+++ b/packages/admin-ui/src/Select/primitives/components/index.ts
@@ -0,0 +1,8 @@
+export * from "./SelectContent";
+export * from "./SelectIcon";
+export * from "./SelectItem";
+export * from "./SelectLabel";
+export * from "./SelectScrollDownButton";
+export * from "./SelectScrollUpButton";
+export * from "./SelectSeparator";
+export * from "./SelectTrigger";
diff --git a/packages/admin-ui/src/Select/primitives/index.ts b/packages/admin-ui/src/Select/primitives/index.ts
new file mode 100644
index 00000000000..2d925296a75
--- /dev/null
+++ b/packages/admin-ui/src/Select/primitives/index.ts
@@ -0,0 +1 @@
+export * from "./SelectPrimitive";
diff --git a/packages/admin-ui/src/Select/primitives/presenters/SelectPresenter.test.ts b/packages/admin-ui/src/Select/primitives/presenters/SelectPresenter.test.ts
new file mode 100644
index 00000000000..af7015e7c55
--- /dev/null
+++ b/packages/admin-ui/src/Select/primitives/presenters/SelectPresenter.test.ts
@@ -0,0 +1,152 @@
+import { SelectPresenter } from "./SelectPresenter";
+
+describe("SelectPresenter", () => {
+    const onValueChange = jest.fn();
+
+    it("should return the compatible `vm.selectTrigger` based on props", () => {
+        const onValueChange = jest.fn();
+
+        // `placeholder`
+        {
+            const presenter = new SelectPresenter();
+            presenter.init({ onValueChange, placeholder: "Custom placeholder" });
+            expect(presenter.vm.selectTrigger.placeholder).toEqual("Custom placeholder");
+        }
+
+        // `displayResetAction`
+        {
+            const presenter = new SelectPresenter();
+            presenter.init({ onValueChange, displayResetAction: false });
+            expect(presenter.vm.selectTrigger.displayResetAction).toEqual(false);
+        }
+
+        {
+            // default: no props
+            const presenter = new SelectPresenter();
+            presenter.init({ onValueChange });
+            expect(presenter.vm.selectTrigger.placeholder).toEqual("Select an option");
+            expect(presenter.vm.selectTrigger.hasValue).toEqual(false);
+        }
+    });
+
+    it("should return the compatible `vm.selectOptions` based on props", () => {
+        // with `options` as string
+        {
+            const presenter = new SelectPresenter();
+            presenter.init({ onValueChange, options: ["Option 1", "Option 2"] });
+            expect(presenter.vm.selectOptions.options).toEqual([
+                {
+                    value: "Option 1",
+                    label: "Option 1",
+                    options: [],
+                    disabled: false,
+                    separator: false
+                },
+                {
+                    value: "Option 2",
+                    label: "Option 2",
+                    options: [],
+                    disabled: false,
+                    separator: false
+                }
+            ]);
+        }
+
+        // with `options` as formatted options
+        {
+            const presenter = new SelectPresenter();
+            presenter.init({
+                onValueChange,
+                options: [
+                    {
+                        value: "option-1",
+                        label: "Option 1"
+                    },
+                    {
+                        value: "option-2",
+                        label: "Option 2",
+                        options: [
+                            {
+                                value: "option-3",
+                                label: "Option 3",
+                                options: [{ value: "option-4", label: "Option 4" }]
+                            }
+                        ]
+                    },
+                    {
+                        value: "option-5",
+                        label: "Option 5",
+                        disabled: true
+                    },
+                    {
+                        value: "option-6",
+                        label: "Option 6",
+                        separator: true
+                    }
+                ]
+            });
+            expect(presenter.vm.selectOptions.options).toEqual([
+                {
+                    value: "option-1",
+                    label: "Option 1",
+                    options: [],
+                    disabled: false,
+                    separator: false
+                },
+                {
+                    value: "option-2",
+                    label: "Option 2",
+                    options: [
+                        {
+                            value: "option-3",
+                            label: "Option 3",
+                            options: [
+                                {
+                                    value: "option-4",
+                                    label: "Option 4",
+                                    options: [],
+                                    disabled: false,
+                                    separator: false
+                                }
+                            ],
+                            disabled: false,
+                            separator: false
+                        }
+                    ],
+                    disabled: false,
+                    separator: false
+                },
+                {
+                    value: "option-5",
+                    label: "Option 5",
+                    options: [],
+                    disabled: true,
+                    separator: false
+                },
+                {
+                    value: "option-6",
+                    label: "Option 6",
+                    options: [],
+                    disabled: false,
+                    separator: true
+                }
+            ]);
+        }
+    });
+
+    it("should call `onValueChange` callback when `changeValue` is called", () => {
+        const presenter = new SelectPresenter();
+        presenter.init({ onValueChange, value: "value" });
+        presenter.changeValue("value-2");
+        expect(onValueChange).toHaveBeenCalledWith("value-2");
+    });
+
+    it("should call `onValueChange` and `onValueReset` callbacks when `resetValue` is called", () => {
+        const onValueReset = jest.fn();
+        const presenter = new SelectPresenter();
+        presenter.init({ onValueChange, onValueReset, value: "value" });
+        presenter.resetValue();
+        expect(onValueChange).toHaveBeenCalledWith("");
+        expect(onValueReset).toHaveBeenCalled();
+    });
+});
diff --git a/packages/admin-ui/src/Select/primitives/presenters/SelectPresenter.ts b/packages/admin-ui/src/Select/primitives/presenters/SelectPresenter.ts
new file mode 100644
index 00000000000..acacded4263
--- /dev/null
+++ b/packages/admin-ui/src/Select/primitives/presenters/SelectPresenter.ts
@@ -0,0 +1,80 @@
+import { makeAutoObservable } from "mobx";
+import {
+    SelectOptionsVm,
+    SelectTriggerVm,
+    SelectOption as SelectOptionParams
+} from "../SelectPrimitive";
+import { SelectOption, SelectOptionMapper } from "../../domains";
+
+interface SelectPresenterParams {
+    options?: SelectOptionParams[];
+    value?: string;
+    placeholder?: string;
+    displayResetAction?: boolean;
+    onValueChange?: (value: string) => void;
+    onValueReset?: () => void;
+}
+
+interface ISelectPresenter<TParams extends SelectPresenterParams = SelectPresenterParams> {
+    vm: {
+        selectTrigger: SelectTriggerVm;
+        selectOptions: SelectOptionsVm;
+    };
+    init: (params: TParams) => void;
+    changeValue: (value: string) => void;
+    resetValue: () => void;
+}
+
+class SelectPresenter implements ISelectPresenter {
+    private params?: SelectPresenterParams;
+    private options?: SelectOption[];
+    private displayResetAction = true;
+
+    constructor() {
+        this.params = undefined;
+        makeAutoObservable(this);
+    }
+
+    init(params: SelectPresenterParams) {
+        this.params = params;
+        this.options = this.transformOptions(params.options);
+        this.displayResetAction = params?.displayResetAction ?? true;
+    }
+
+    get vm() {
+        return {
+            selectTrigger: {
+                placeholder: this.params?.placeholder || "Select an option",
+                hasValue: !!this.params?.value,
+                displayResetAction: this.displayResetAction
+            },
+            selectOptions: {
+                options: this.options?.map(option => SelectOptionMapper.toFormatted(option)) ?? []
+            }
+        };
+    }
+
+    public changeValue = (value: string) => {
+        this.params?.onValueChange?.(value);
+    };
+
+    public resetValue = () => {
+        this.params?.onValueChange?.("");
+        this.params?.onValueReset?.();
+    };
+
+    private transformOptions(options: SelectPresenterParams["options"]): SelectOption[] {
+        if (!options) {
+            return [];
+        }
+
+        return options.map(option => {
+            if (typeof option === "string") {
+                return SelectOption.createFromString(option);
+            }
+            return SelectOption.create(option);
+        });
+    }
+}
+
+export { SelectPresenter, type ISelectPresenter, type SelectPresenterParams };
diff --git a/packages/admin-ui/src/Select/primitives/presenters/index.ts b/packages/admin-ui/src/Select/primitives/presenters/index.ts
new file mode 100644
index 00000000000..cfb07c9c28e
--- /dev/null
+++ b/packages/admin-ui/src/Select/primitives/presenters/index.ts
@@ -0,0 +1 @@
+export * from "./SelectPresenter";
diff --git a/packages/admin-ui/src/Select/primitives/useSelect.ts b/packages/admin-ui/src/Select/primitives/useSelect.ts
new file mode 100644
index 00000000000..202ad812b26
--- /dev/null
+++ b/packages/admin-ui/src/Select/primitives/useSelect.ts
@@ -0,0 +1,47 @@
+import { useEffect, useMemo, useState } from "react";
+import { autorun } from "mobx";
+import { SelectPresenter, SelectPresenterParams } from "./presenters/SelectPresenter";
+import { SelectPrimitiveProps } from "./SelectPrimitive";
+
+export const useSelect = (props: SelectPrimitiveProps) => {
+    const params: SelectPresenterParams = useMemo(
+        () => ({
+            options: props.options,
+            value: props.value,
+            placeholder: props.placeholder,
+            displayResetAction: props.displayResetAction,
+            onValueChange: props.onChange,
+            onValueReset: props.onValueReset
+        }),
+        [
+            props.options,
+            props.value,
+            props.placeholder,
+            props.displayResetAction,
+            props.onChange,
+            props.onValueReset
+        ]
+    );
+
+    const presenter = useMemo(() => {
+        return new SelectPresenter();
+    }, []);
+
+    const [vm, setVm] = useState(presenter.vm);
+
+    useEffect(() => {
+        presenter.init(params);
+    }, [params, presenter]);
+
+    useEffect(() => {
+        return autorun(() => {
+            setVm(presenter.vm);
+        });
+    }, [presenter]);
+
+    return {
+        vm,
+        changeValue: presenter.changeValue,
+        resetValue: presenter.resetValue
+    };
+};
diff --git a/packages/admin-ui/src/Separator/Separator.mdx b/packages/admin-ui/src/Separator/Separator.mdx
new file mode 100644
index 00000000000..5b4a1712010
--- /dev/null
+++ b/packages/admin-ui/src/Separator/Separator.mdx
@@ -0,0 +1,262 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+
+import * as SeparatorStories from './Separator.stories';
+
+<Meta of={SeparatorStories} />
+
+# Separator
+
+The Separator component is a visual divider that creates a clear distinction between different sections of content. It helps organize and structure information, making interfaces more scannable and easier to navigate.
+
+## Usage
+
+<Canvas of={SeparatorStories.Documentation} source={ { code: `
+import React from "react";
+import { Separator, Heading, Text } from "@webiny/admin-ui";
+
+const SeparatorExample = () => {
+    return (
+        <div>
+            <div className="wby-space-y-1">
+                <Heading level={6}>{"This is a heading."}</Heading>
+                <Text size="sm" className={"wby-text-neutral-strong"}>
+                    {"This is a short description here"}
+                </Text>
+            </div>
+            <Separator
+                margin="lg"
+                variant="subtle"
+                orientation="horizontal"
+                decorative={true}
+            />
+            <div className="wby-flex wby-items-center wby-h-6 wby-text-sm">
+                <Text>{"This is text 1."}</Text>
+            </div>
+        </div>
+    );
+};
+
+export default SeparatorExample;
+
+` } }
+        additionalActions={[
+            {
+                title: 'Open in GitHub',
+                onClick: () => {
+                    window.open(
+                        'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Separator/Separator.tsx',
+                        '_blank'
+                    );
+                },
+            }
+        ]}
+/>
+
+<Controls of={SeparatorStories.Documentation} />
+
+```tsx
+import React from "react";
+import { Separator, Heading, Text } from "@webiny/admin-ui";
+
+const SeparatorExample = () => {
+    return (
+        <div>
+            <div className="wby-space-y-1">
+                <Heading level={6}>{"This is a heading."}</Heading>
+                <Text size="sm" className={"wby-text-neutral-strong"}>
+                    {"This is a short description here"}
+                </Text>
+            </div>
+            <Separator
+                margin="lg"
+                variant="subtle"
+                orientation="horizontal"
+                decorative={true}
+            />
+            <div className="wby-flex wby-items-center wby-h-6 wby-text-sm">
+                <Text>{"This is text 1."}</Text>
+            </div>
+        </div>
+    );
+};
+
+export default SeparatorExample;
+```
+
+
+## Examples
+
+### Default
+
+A basic horizontal separator with subtle styling and large margin.
+
+<Canvas of={SeparatorStories.Default} source={ { code: `
+import React from "react";
+import { Separator, Heading, Text } from "@webiny/admin-ui";
+
+const DefaultSeparatorExample = () => {
+    return (
+        <div>
+            <div className="wby-space-y-1">
+                <Heading level={6}>{"This is a heading."}</Heading>
+                <Text size="sm" className={"wby-text-neutral-strong"}>
+                    {"This is a short description here"}
+                </Text>
+            </div>
+            <Separator margin="lg" variant="subtle" />
+            <div className="wby-flex wby-items-center wby-h-6 wby-text-sm">
+                <Text>{"This is text 1."}</Text>
+            </div>
+        </div>
+    );
+};
+
+export default DefaultSeparatorExample;
+` } } />
+
+### Vertical and Horizontal
+
+Using both vertical and horizontal separators to create a structured layout.
+
+<Canvas of={SeparatorStories.VerticalAndHorizontal} source={ { code: `
+import React from "react";
+import { Separator, Heading, Text } from "@webiny/admin-ui";
+
+const VerticalAndHorizontalExample = () => {
+    return (
+        <div>
+            <div className="wby-space-y-1">
+                <Heading level={6}>{"This is a heading."}</Heading>
+                <Text size="sm" className={"wby-text-neutral-strong"}>
+                    {"This is a short description here"}
+                </Text>
+            </div>
+            <Separator margin={"lg"} />
+            <div className="wby-flex wby-items-center wby-h-6 wby-text-sm">
+                <Text>{"This is text 1."}</Text>
+                <Separator orientation="vertical" margin={"lg"} />
+                <Text>{"This is text 2."}</Text>
+                <Separator orientation="vertical" margin={"lg"} />
+                <Text>{"This is text 3."}</Text>
+            </div>
+        </div>
+    );
+};
+
+export default VerticalAndHorizontalExample;
+` } } />
+
+### Horizontal Orientation
+
+A separator with horizontal orientation, which is the default.
+
+<Canvas of={SeparatorStories.HorizontalOrientation} source={ { code: `
+import React from "react";
+import { Separator, Heading, Text } from "@webiny/admin-ui";
+
+const HorizontalOrientationExample = () => {
+    return (
+        <div>
+            <div className="wby-space-y-1">
+                <Heading level={6}>{"This is a heading."}</Heading>
+                <Text size="sm" className={"wby-text-neutral-strong"}>
+                    {"This is a short description here"}
+                </Text>
+            </div>
+            <Separator margin={"lg"} orientation="horizontal" />
+            <div className="wby-flex wby-items-center wby-h-6 wby-text-sm">
+                <Text>{"This is text 1."}</Text>
+            </div>
+        </div>
+    );
+};
+
+export default HorizontalOrientationExample;
+` } } />
+
+### Vertical Orientation
+
+A separator with vertical orientation, useful for creating columns or dividing inline elements.
+
+<Canvas of={SeparatorStories.VerticalOrientation} source={ { code: `
+import React from "react";
+import { Separator, Text } from "@webiny/admin-ui";
+
+const VerticalOrientationExample = () => {
+    return (
+        <div className="wby-flex wby-justify-center wby-h-6 wby-text-sm">
+            <Text>{"This is text 1."}</Text>
+            <Separator orientation="vertical" margin={"lg"} />
+            <Text>{"This is text 2."}</Text>
+            <Separator orientation="vertical" margin={"lg"} />
+            <Text>{"This is text 3."}</Text>
+        </div>
+    );
+};
+
+export default VerticalOrientationExample;
+` } } />
+
+### Less Margin
+
+A separator with medium margin, creating a tighter layout.
+
+<Canvas of={SeparatorStories.LessMargin} source={ { code: `
+import React from "react";
+import { Separator, Heading, Text } from "@webiny/admin-ui";
+
+const LessMarginExample = () => {
+    return (
+        <div>
+            <div className="wby-space-y-1">
+                <Heading level={6}>{"This is a heading."}</Heading>
+                <Text size="sm" className={"wby-text-neutral-strong"}>
+                    {"This is a short description here"}
+                </Text>
+            </div>
+            <Separator margin={"md"} />
+            <div className="wby-flex wby-items-center wby-h-6 wby-text-sm">
+                <Text>{"This is text 1."}</Text>
+                <Separator orientation="vertical" margin={"md"} />
+                <Text>{"This is text 2."}</Text>
+                <Separator orientation="vertical" margin={"md"} />
+                <Text>{"This is text 3."}</Text>
+            </div>
+        </div>
+    );
+};
+
+export default LessMarginExample;
+` } } />
+
+### More Margin
+
+A separator with extra large margin, creating more space between sections.
+
+<Canvas of={SeparatorStories.MoreMargin} source={ { code: `
+import React from "react";
+import { Separator, Heading, Text } from "@webiny/admin-ui";
+
+const MoreMarginExample = () => {
+    return (
+        <div>
+            <div className="wby-space-y-1">
+                <Heading level={6}>{"This is a heading."}</Heading>
+                <Text size="sm" className={"wby-text-neutral-strong"}>
+                    {"This is a short description here"}
+                </Text>
+            </div>
+            <Separator margin={"xl"} />
+            <div className="wby-flex wby-items-center wby-h-6 wby-text-sm">
+                <Text>{"This is text 1."}</Text>
+                <Separator orientation="vertical" margin={"xl"} />
+                <Text>{"This is text 2."}</Text>
+                <Separator orientation="vertical" margin={"xl"} />
+                <Text>{"This is text 3."}</Text>
+            </div>
+        </div>
+    );
+};
+
+export default MoreMarginExample;
+` } } />
diff --git a/packages/admin-ui/src/Separator/Separator.stories.tsx b/packages/admin-ui/src/Separator/Separator.stories.tsx
new file mode 100644
index 00000000000..73ac01f1add
--- /dev/null
+++ b/packages/admin-ui/src/Separator/Separator.stories.tsx
@@ -0,0 +1,215 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Separator } from "./Separator";
+import React from "react";
+import { Heading } from "~/Heading";
+import { Text } from "~/Text";
+
+const meta: Meta<typeof Separator> = {
+    title: "Components/Separator",
+    component: Separator,
+    argTypes: {},
+    decorators: [
+        Story => (
+            <div className="wby-w-[700px]">
+                <Story />
+            </div>
+        )
+    ]
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Separator>;
+
+export const Documentation: Story = {
+    args: {
+        variant: "dimmed",
+        margin: "none",
+        orientation: "horizontal",
+        decorative: true
+    },
+    argTypes: {
+        margin: {
+            description: "The margin around the separator.",
+            control: "select",
+            options: ["none", "xs", "sm", "md", "lg", "xl"]
+        },
+        variant: {
+            description: "The visual style variant of the separator.",
+            control: "select",
+            options: ["transparent", "base", "dimmed", "muted", "strong"]
+        },
+        orientation: {
+            description: "The orientation of the separator.",
+            control: "select",
+            options: ["horizontal", "vertical"]
+        },
+        decorative: {
+            description:
+                "Whether the separator is purely decorative and should be hidden from screen readers.",
+            control: "boolean"
+        }
+    },
+    render: props => {
+        return (
+            <div>
+                <div className="wby-space-y-1">
+                    <Heading level={6}>{"This is a heading."}</Heading>
+                    <Text size="sm" className={"wby-text-neutral-strong"}>
+                        {"This is a short description here"}
+                    </Text>
+                </div>
+                <Separator
+                    margin={props.margin}
+                    variant={props.variant}
+                    orientation={props.orientation}
+                    decorative={props.decorative}
+                />
+                <div className="wby-flex wby-items-center wby-h-6 wby-text-sm">
+                    <Text>{"This is text 1."}</Text>
+                </div>
+            </div>
+        );
+    }
+};
+
+export const Default: Story = {
+    args: {
+        variant: "dimmed",
+        margin: "lg"
+    },
+    render: props => {
+        return (
+            <div>
+                <div className="wby-space-y-1">
+                    <Heading level={6}>{"This is a heading."}</Heading>
+                    <Text size="sm" className={"wby-text-neutral-strong"}>
+                        {"This is a short description here"}
+                    </Text>
+                </div>
+                <Separator margin={props.margin} variant={props.variant} />
+                <div className="wby-flex wby-items-center wby-h-6 wby-text-sm">
+                    <Text>{"This is text 1."}</Text>
+                </div>
+            </div>
+        );
+    },
+    argTypes: {
+        margin: {
+            control: "select",
+            options: ["xs", "sm", "md", "lg", "xl"]
+        },
+        variant: {
+            control: "select",
+            options: ["transparent", "base", "dimmed", "muted", "strong"]
+        }
+    }
+};
+
+export const VerticalAndHorizontal: Story = {
+    render: () => {
+        return (
+            <div>
+                <div className="wby-space-y-1">
+                    <Heading level={6}>{"This is a heading."}</Heading>
+                    <Text size="sm" className={"wby-text-neutral-strong"}>
+                        {"This is a short description here"}
+                    </Text>
+                </div>
+                <Separator margin={"lg"} />
+                <div className="wby-flex wby-items-center wby-h-6 wby-text-sm">
+                    <Text>{"This is text 1."}</Text>
+                    <Separator orientation="vertical" margin={"lg"} />
+                    <Text>{"This is text 2."}</Text>
+                    <Separator orientation="vertical" margin={"lg"} />
+                    <Text>{"This is text 3."}</Text>
+                </div>
+            </div>
+        );
+    }
+};
+
+export const HorizontalOrientation: Story = {
+    args: {
+        orientation: "horizontal"
+    },
+    render: () => {
+        return (
+            <div>
+                <div className="wby-space-y-1">
+                    <Heading level={6}>{"This is a heading."}</Heading>
+                    <Text size="sm" className={"wby-text-neutral-strong"}>
+                        {"This is a short description here"}
+                    </Text>
+                </div>
+                <Separator margin={"lg"} />
+                <div className="wby-flex wby-items-center wby-h-6 wby-text-sm">
+                    <Text>{"This is text 1."}</Text>
+                </div>
+            </div>
+        );
+    }
+};
+
+export const VerticalOrientation: Story = {
+    args: {
+        orientation: "vertical"
+    },
+    render: () => {
+        return (
+            <div className="wby-flex wby-justify-center wby-h-6 wby-text-sm">
+                <Text>{"This is text 1."}</Text>
+                <Separator orientation="vertical" margin={"lg"} />
+                <Text>{"This is text 2."}</Text>
+                <Separator orientation="vertical" margin={"lg"} />
+                <Text>{"This is text 3."}</Text>
+            </div>
+        );
+    }
+};
+
+export const LessMargin: Story = {
+    render: () => {
+        return (
+            <div>
+                <div className="wby-space-y-1">
+                    <Heading level={6}>{"This is a heading."}</Heading>
+                    <Text size="sm" className={"wby-text-neutral-strong"}>
+                        {"This is a short description here"}
+                    </Text>
+                </div>
+                <Separator margin={"md"} />
+                <div className="wby-flex wby-items-center wby-h-6 wby-text-sm">
+                    <Text>{"This is text 1."}</Text>
+                    <Separator orientation="vertical" margin={"md"} />
+                    <Text>{"This is text 2."}</Text>
+                    <Separator orientation="vertical" margin={"md"} />
+                    <Text>{"This is text 3."}</Text>
+                </div>
+            </div>
+        );
+    }
+};
+
+export const MoreMargin: Story = {
+    render: () => {
+        return (
+            <div>
+                <div className="wby-space-y-1">
+                    <Heading level={6}>{"This is a heading."}</Heading>
+                    <Text size="sm" className={"wby-text-neutral-strong"}>
+                        {"This is a short description here"}
+                    </Text>
+                </div>
+                <Separator margin={"xl"} />
+                <div className="wby-flex wby-items-center wby-h-6 wby-text-sm">
+                    <Text>{"This is text 1."}</Text>
+                    <Separator orientation="vertical" margin={"xl"} />
+                    <Text>{"This is text 2."}</Text>
+                    <Separator orientation="vertical" margin={"xl"} />
+                    <Text>{"This is text 3."}</Text>
+                </div>
+            </div>
+        );
+    }
+};
diff --git a/packages/admin-ui/src/Separator/Separator.tsx b/packages/admin-ui/src/Separator/Separator.tsx
new file mode 100644
index 00000000000..e203701468a
--- /dev/null
+++ b/packages/admin-ui/src/Separator/Separator.tsx
@@ -0,0 +1,66 @@
+import * as React from "react";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import { cva, type VariantProps, makeDecoratable } from "~/utils";
+
+const separatorVariants = cva("wby-shrink-0", {
+    variants: {
+        margin: {
+            none: "",
+            xs: "",
+            sm: "",
+            md: "",
+            lg: "",
+            xl: ""
+        },
+        orientation: {
+            horizontal: "wby-h-px wby-w-full",
+            vertical: "wby-h-full wby-w-px"
+        },
+        variant: {
+            transparent: "wby-transparent",
+            base: "wby-bg-white",
+            dimmed: "wby-bg-neutral-dimmed",
+            muted: "wby-bg-neutral-muted",
+            strong: "wby-bg-neutral-strong"
+        }
+    },
+    compoundVariants: [
+        { orientation: "horizontal", margin: "xs", className: "wby-my-px" },
+        { orientation: "horizontal", margin: "sm", className: "wby-my-xxs" },
+        { orientation: "horizontal", margin: "md", className: "wby-my-xs" },
+        { orientation: "horizontal", margin: "lg", className: "wby-my-sm" },
+        { orientation: "horizontal", margin: "xl", className: "wby-my-md" },
+        { orientation: "vertical", margin: "xs", className: "wby-mx-px" },
+        { orientation: "vertical", margin: "sm", className: "wby-mx-xxs" },
+        { orientation: "vertical", margin: "md", className: "wby-mx-xs" },
+        { orientation: "vertical", margin: "lg", className: "wby-mx-sm" },
+        { orientation: "vertical", margin: "xl", className: "wby-mx-md" }
+    ],
+    defaultVariants: {
+        orientation: "horizontal",
+        variant: "dimmed",
+        margin: "none"
+    }
+});
+
+type SeparatorProps = SeparatorPrimitive.SeparatorProps & VariantProps<typeof separatorVariants>;
+
+const SeparatorBase = ({
+    className,
+    orientation,
+    margin,
+    variant,
+    decorative = true,
+    ...props
+}: SeparatorProps) => (
+    <SeparatorPrimitive.Root
+        decorative={decorative}
+        orientation={orientation}
+        className={separatorVariants({ orientation, margin, variant, className })}
+        {...props}
+    />
+);
+
+const Separator = makeDecoratable("Separator", SeparatorBase);
+
+export { Separator, type SeparatorProps };
diff --git a/packages/admin-ui/src/Separator/index.ts b/packages/admin-ui/src/Separator/index.ts
new file mode 100644
index 00000000000..4060cb5ecdd
--- /dev/null
+++ b/packages/admin-ui/src/Separator/index.ts
@@ -0,0 +1 @@
+export * from "./Separator";
diff --git a/packages/admin-ui/src/Sidebar/Sidebar.mdx b/packages/admin-ui/src/Sidebar/Sidebar.mdx
new file mode 100644
index 00000000000..05d5c9361c8
--- /dev/null
+++ b/packages/admin-ui/src/Sidebar/Sidebar.mdx
@@ -0,0 +1,210 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+
+import * as SidebarStories from './Sidebar.stories';
+
+<Meta of={SidebarStories} />
+
+# Sidebar
+
+The Sidebar component is a navigation element that provides a collapsible and expandable menu structure for application navigation. It supports nested menu items, links, groups, and icons, making it ideal for organizing complex navigation hierarchies.
+
+## Usage
+
+<Canvas of={SidebarStories.MainMenu} source={ { code: `
+import React from "react";
+import { Sidebar, SidebarProvider } from "@webiny/admin-ui";
+import { ReactComponent as CmsIcon } from "@webiny/icons/web.svg";
+import { ReactComponent as PageBuilderIcon } from "@webiny/icons/table_chart.svg";
+
+const SidebarExample = () => {
+    return (
+        <SidebarProvider>
+            <Sidebar
+                title={"Webiny"}
+                icon={
+                    <Sidebar.Icon
+                        element={<img src="/logo.png" alt="Webiny" />}
+                        label={"Webiny"}
+                    />
+                }
+            >
+                <Sidebar.Link
+                    text={"Headless CMS"}
+                    to={"/cms"}
+                    icon={<Sidebar.Item.Icon label="Headless CMS" element={<CmsIcon />} />}
+                />
+                <Sidebar.Item
+                    text={"Page Builder"}
+                    icon={<Sidebar.Item.Icon label="Page Builder" element={<PageBuilderIcon />} />}
+                >
+                    <Sidebar.Group text={"Pages"} />
+                    <Sidebar.Link
+                        to={"/page-builder/pages"}
+                        text={"Pages"}
+                    />
+                    <Sidebar.Link
+                        to={"/page-builder/templates"}
+                        text={"Templates"}
+                    />
+                </Sidebar.Item>
+            </Sidebar>
+        </SidebarProvider>
+    );
+};
+
+export default SidebarExample;
+
+` } }
+        additionalActions={[
+            {
+                title: 'Open in GitHub',
+                onClick: () => {
+                    window.open(
+                        'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Sidebar/Sidebar.tsx',
+                        '_blank'
+                    );
+                },
+            }
+        ]}
+/>
+
+```tsx
+import React from "react";
+import { Sidebar, SidebarProvider } from "@webiny/admin-ui";
+import { ReactComponent as CmsIcon } from "@webiny/icons/web.svg";
+import { ReactComponent as PageBuilderIcon } from "@webiny/icons/table_chart.svg";
+
+const SidebarExample = () => {
+    return (
+        <SidebarProvider>
+            <Sidebar
+                title={"Webiny"}
+                icon={
+                    <Sidebar.Icon
+                        element={<img src="/logo.png" alt="Webiny" />}
+                        label={"Webiny"}
+                    />
+                }
+            >
+                <Sidebar.Link
+                    text={"Headless CMS"}
+                    to={"/cms"}
+                    icon={<Sidebar.Item.Icon label="Headless CMS" element={<CmsIcon />} />}
+                />
+                <Sidebar.Item
+                    text={"Page Builder"}
+                    icon={<Sidebar.Item.Icon label="Page Builder" element={<PageBuilderIcon />} />}
+                >
+                    <Sidebar.Group text={"Pages"} />
+                    <Sidebar.Link
+                        to={"/page-builder/pages"}
+                        text={"Pages"}
+                    />
+                    <Sidebar.Link
+                        to={"/page-builder/templates"}
+                        text={"Templates"}
+                    />
+                </Sidebar.Item>
+            </Sidebar>
+        </SidebarProvider>
+    );
+};
+
+export default SidebarExample;
+```
+
+## Components
+
+The Sidebar component is composed of several subcomponents that work together to create a complete navigation experience:
+
+### Sidebar
+
+The main container component that holds the entire sidebar structure.
+
+```jsx
+<Sidebar
+    title="Application Title"
+    icon={<Sidebar.Icon element={<Logo />} label="Logo" />}
+    footer={<FooterContent />}
+>
+    {/* Menu items */}
+</Sidebar>
+```
+
+### Sidebar.Item
+
+Used to create menu items that can either be clickable or serve as containers for nested items.
+
+```jsx
+// Clickable item
+<Sidebar.Item
+    text="Settings"
+    icon={<Sidebar.Item.Icon label="Settings" element={<SettingsIcon />} />}
+    onClick={() => handleClick()}
+/>
+
+// Container for nested items
+<Sidebar.Item
+    text="Content"
+    icon={<Sidebar.Item.Icon label="Content" element={<ContentIcon />} />}
+>
+    {/* Nested items */}
+</Sidebar.Item>
+```
+
+### Sidebar.Link
+
+Used to create menu items that link to different routes in the application.
+
+```jsx
+<Sidebar.Link
+    text="Dashboard"
+    to="/dashboard"
+    icon={<Sidebar.Item.Icon label="Dashboard" element={<DashboardIcon />} />}
+    active={currentPath === "/dashboard"}
+/>
+```
+
+### Sidebar.Group
+
+Used to create group labels for organizing related menu items.
+
+```jsx
+<Sidebar.Group text="Settings" />
+<Sidebar.Link text="General" to="/settings/general" />
+<Sidebar.Link text="Security" to="/settings/security" />
+```
+
+### Sidebar.Icon
+
+Used to create icons for the sidebar header or menu items.
+
+```jsx
+<Sidebar.Icon element={<Logo />} label="Application Logo" />
+```
+
+## Features
+
+### Collapsible/Expandable
+
+The sidebar can be collapsed to save space or expanded to show full menu text. It automatically collapses when the mouse leaves and expands when the mouse enters.
+
+### Pinnable
+
+Users can pin the sidebar to keep it expanded permanently, which is useful for frequent navigation.
+
+### Nested Navigation
+
+Support for nested menu items allows for organizing complex navigation hierarchies.
+
+### Active State
+
+Menu items can be marked as active to indicate the current location in the application.
+
+### Disabled State
+
+Menu items can be disabled to indicate that they are not currently available.
+
+### Footer Content
+
+The sidebar supports footer content, which is useful for displaying additional information or actions at the bottom of the sidebar.
diff --git a/packages/admin-ui/src/Sidebar/Sidebar.stories.tsx b/packages/admin-ui/src/Sidebar/Sidebar.stories.tsx
new file mode 100644
index 00000000000..77224373e0f
--- /dev/null
+++ b/packages/admin-ui/src/Sidebar/Sidebar.stories.tsx
@@ -0,0 +1,182 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { BrowserRouter, Route, Routes, useLocation } from "@webiny/react-router";
+import { ReactComponent as AuditLogsIcon } from "@webiny/icons/assignment.svg";
+import { ReactComponent as FormBuilderIcon } from "@webiny/icons/check_box.svg";
+import { ReactComponent as CmsIcon } from "@webiny/icons/web.svg";
+import { ReactComponent as PageBuilderIcon } from "@webiny/icons/table_chart.svg";
+import { ReactComponent as InfoIcon } from "@webiny/icons/info.svg";
+import { ReactComponent as ChatIcon } from "@webiny/icons/chat.svg";
+import { ReactComponent as GithubIcon } from "@webiny/icons/gite.svg";
+import { ReactComponent as DocsIcon } from "@webiny/icons/summarize.svg";
+import { ReactComponent as ApiPlaygroundIcon } from "@webiny/icons/swap_horiz.svg";
+import { ReactComponent as MoreVertIcon } from "@webiny/icons/more_vert.svg";
+import { ReactComponent as FileManagerIcon } from "@webiny/icons/insert_drive_file.svg";
+import { Sidebar } from "./Sidebar";
+import { SidebarProvider } from "~/Sidebar/components/SidebarProvider";
+import { DropdownMenu } from "~/DropdownMenu";
+import { Tag } from "~/Tag";
+import { Tooltip } from "~/Tooltip";
+
+const meta: Meta<typeof Sidebar> = {
+    title: "Components/Sidebar",
+    component: Sidebar,
+
+    parameters: {
+        layout: "fullscreen"
+    },
+
+    // We removed this because in the "all stories" view, the menu gets visually
+    // broken because of the fixed positioning of the sidebar. This is not a problem
+    // when the story is viewed in isolation.
+    // tags: ["autodocs"],
+
+    argTypes: {},
+    decorators: [
+        Story => (
+            <Tooltip.Provider>
+                <Story />
+            </Tooltip.Provider>
+        )
+    ]
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Sidebar>;
+
+export const MainMenu: Story = {
+    render: () => (
+        <BrowserRouter>
+            <Routes>
+                <Route path={"*"} element={<SidebarComponent />} />
+            </Routes>
+        </BrowserRouter>
+    )
+};
+
+const SidebarComponent = () => {
+    const { hash } = useLocation();
+
+    return (
+        <SidebarProvider>
+            <Sidebar
+                title={"Webiny"}
+                icon={
+                    <Sidebar.Icon
+                        element={<img src="/images/wby-logo.png" alt="Webiny" />}
+                        label={"Webiny"}
+                    />
+                }
+                footer={
+                    <DropdownMenu
+                        trigger={
+                            <Sidebar.Item
+                                icon={<Sidebar.Item.Icon label="Settings" element={<InfoIcon />} />}
+                                text={"Support"}
+                                action={<Sidebar.Item.Action element={<MoreVertIcon />} />}
+                            />
+                        }
+                        className={"wby-w-[225px]"}
+                    >
+                        <DropdownMenu.Item
+                            content={"API Playground"}
+                            icon={<ApiPlaygroundIcon />}
+                        />
+                        <DropdownMenu.Item content={"Documentation"} icon={<DocsIcon />} />
+                        <DropdownMenu.Item content={"GitHub"} icon={<GithubIcon />} />
+                        <DropdownMenu.Item content={"Slack"} icon={<ChatIcon />} />
+                        <DropdownMenu.Separator />
+                        <DropdownMenu.Item
+                            text={
+                                <div className={"flex wby-items-center"}>
+                                    Webiny 5.43.0
+                                    <Tag
+                                        variant={"accent"}
+                                        content={"WCP "}
+                                        className={"wby-ml-sm-extra"}
+                                    />
+                                </div>
+                            }
+                        />
+                    </DropdownMenu>
+                }
+            >
+                <Sidebar.Link
+                    text={"Audit Logs"}
+                    to={"#audit-logs"}
+                    active={hash === "#audit-logs"}
+                    icon={<Sidebar.Item.Icon label="Audit Logs" element={<AuditLogsIcon />} />}
+                />
+                <Sidebar.Link
+                    text={"Form Builder"}
+                    to={"#form-builder"}
+                    active={hash === "#form-builder"}
+                    icon={<Sidebar.Item.Icon label="Form Builder" element={<FormBuilderIcon />} />}
+                />
+                <Sidebar.Item
+                    text={"File Manager"}
+                    onClick={() => {
+                        alert("File Manager clicked");
+                    }}
+                    icon={<Sidebar.Item.Icon label="File Manager" element={<FileManagerIcon />} />}
+                />
+                <Sidebar.Item
+                    text={"Headless CMS"}
+                    icon={<Sidebar.Item.Icon label="Headless CMS" element={<CmsIcon />} />}
+                >
+                    <Sidebar.Group text={"Content Models"} />
+                    <Sidebar.Link
+                        text={"Groups"}
+                        to={"#cms-groups"}
+                        active={hash === "#cms-groups"}
+                    />
+                    <Sidebar.Link
+                        text={"Models"}
+                        to={"#cms-models"}
+                        active={hash === "#cms-models"}
+                    />
+                </Sidebar.Item>
+                <Sidebar.Item
+                    text={"Page Builder"}
+                    icon={<Sidebar.Item.Icon label="Page Builder" element={<PageBuilderIcon />} />}
+                >
+                    <Sidebar.Group text={"Blocks"} />
+                    <Sidebar.Link
+                        text={"Blocks"}
+                        to={"#pb-blocks"}
+                        active={hash === "#pb-blocks"}
+                    />
+                    <Sidebar.Link
+                        text={"Categories"}
+                        to={"#pb-blocks-categories"}
+                        active={hash === "#pb-blocks-categories"}
+                    />
+
+                    <Sidebar.Group text={"Pages"} active={hash === `#pb-pages`} />
+                    <Sidebar.Link
+                        to={"#pb-pages-categories"}
+                        text={"Categories"}
+                        active={hash === `#pb-pages-categories`}
+                    />
+                    <Sidebar.Link
+                        to={"#pb-pages-menus"}
+                        text={"Menus"}
+                        active={hash === `#pb-pages-menus`}
+                    />
+                    <Sidebar.Link
+                        to={"#pb-pages-pages"}
+                        text={"Pages"}
+                        active={hash === `#pb-pages-pages`}
+                    />
+                    <Sidebar.Link
+                        to={"#pb-pages-templates"}
+                        text={"Templates"}
+                        disabled={true}
+                        active={hash === `#pb-pages-templates`}
+                    />
+                </Sidebar.Item>
+            </Sidebar>
+        </SidebarProvider>
+    );
+};
diff --git a/packages/admin-ui/src/Sidebar/Sidebar.tsx b/packages/admin-ui/src/Sidebar/Sidebar.tsx
new file mode 100644
index 00000000000..0349ff52ab3
--- /dev/null
+++ b/packages/admin-ui/src/Sidebar/Sidebar.tsx
@@ -0,0 +1,76 @@
+import * as React from "react";
+import { makeDecoratable, withStaticProps } from "~/utils";
+import { SidebarRoot } from "./components/SidebarRoot";
+import { SidebarHeader } from "./components/SidebarHeader";
+import { SidebarContent } from "./components/SidebarContent";
+import { SidebarIcon } from "./components/SidebarIcon";
+import { SidebarFooter } from "./components/SidebarFooter";
+import { SidebarMenuItem } from "./components/items/SidebarMenuItem";
+import { SidebarMenuLink } from "./components/items/SidebarMenuLink";
+import { SidebarMenuRoot } from "./components/items/SidebarMenuRoot";
+import { SidebarMenuGroup } from "~/Sidebar/components/items/SidebarMenuGroup";
+
+interface SidebarProps
+    extends Omit<React.ComponentPropsWithoutRef<typeof SidebarRoot>, "title">,
+        Omit<React.ComponentPropsWithoutRef<typeof SidebarContent>, "title"> {
+    title?: React.ReactNode;
+    icon?: React.ReactNode;
+    children: React.ReactNode;
+    footer?: React.ReactNode;
+}
+
+const SidebarBase = (props: SidebarProps) => {
+    const { headerProps, rootProps, footerProps, contentProps } = React.useMemo(() => {
+        const {
+            // Header props.
+            title,
+            icon,
+
+            // Root props.
+            side,
+
+            // Footer props.
+            footer,
+
+            // Content props.
+            ...rest
+        } = props;
+
+        return {
+            headerProps: {
+                title,
+                icon
+            },
+            rootProps: {
+                side
+            },
+            footerProps: {
+                footer
+            },
+            contentProps: rest
+        };
+    }, [props]);
+
+    return (
+        <SidebarRoot {...rootProps}>
+            <SidebarHeader {...headerProps} />
+            <SidebarContent {...contentProps}>
+                <SidebarMenuRoot>{props.children}</SidebarMenuRoot>
+            </SidebarContent>
+            <SidebarFooter>
+                <SidebarMenuRoot>{footerProps.footer}</SidebarMenuRoot>
+            </SidebarFooter>
+        </SidebarRoot>
+    );
+};
+
+const DecoratableSidebar = makeDecoratable("Sidebar", SidebarBase);
+
+const Sidebar = withStaticProps(DecoratableSidebar, {
+    Item: SidebarMenuItem,
+    Link: SidebarMenuLink,
+    Group: SidebarMenuGroup,
+    Icon: SidebarIcon
+});
+
+export { Sidebar };
diff --git a/packages/admin-ui/src/Sidebar/components/SidebarCache.ts b/packages/admin-ui/src/Sidebar/components/SidebarCache.ts
new file mode 100644
index 00000000000..3ad97faf3b6
--- /dev/null
+++ b/packages/admin-ui/src/Sidebar/components/SidebarCache.ts
@@ -0,0 +1,30 @@
+import { SIDEBAR_LS_KEY } from "./constants";
+
+type CachedSidebarState = {
+    pinned: boolean;
+    expandedSections: string[];
+};
+
+const DEFAULT_CACHED_STATE: CachedSidebarState = {
+    pinned: false,
+    expandedSections: []
+};
+
+export class SidebarCache {
+    static get(): CachedSidebarState {
+        const item = window.localStorage.getItem(SIDEBAR_LS_KEY);
+        if (!item) {
+            return DEFAULT_CACHED_STATE;
+        }
+
+        try {
+            return JSON.parse(item) || DEFAULT_CACHED_STATE;
+        } catch {
+            return DEFAULT_CACHED_STATE;
+        }
+    }
+
+    static set(state: CachedSidebarState) {
+        window.localStorage.setItem(SIDEBAR_LS_KEY, JSON.stringify(state));
+    }
+}
diff --git a/packages/admin-ui/src/Sidebar/components/SidebarContent.tsx b/packages/admin-ui/src/Sidebar/components/SidebarContent.tsx
new file mode 100644
index 00000000000..5899e2ba636
--- /dev/null
+++ b/packages/admin-ui/src/Sidebar/components/SidebarContent.tsx
@@ -0,0 +1,17 @@
+import React from "react";
+import { cn } from "~/utils";
+
+const SidebarContent = ({ className, ...props }: React.ComponentProps<"div">) => {
+    return (
+        <div
+            {...props}
+            data-sidebar="content"
+            className={cn(
+                "wby-flex wby-text-neutral-primary wby-min-h-0 wby-flex-1 wby-flex-col wby-gap-2 wby-overflow-y-auto wby-overflow-x-hidden group-data-[state=collapsed]:wby-overflow-hidden",
+                className
+            )}
+        />
+    );
+};
+
+export { SidebarContent };
diff --git a/packages/admin-ui/src/Sidebar/components/SidebarFooter.tsx b/packages/admin-ui/src/Sidebar/components/SidebarFooter.tsx
new file mode 100644
index 00000000000..2956c1fda73
--- /dev/null
+++ b/packages/admin-ui/src/Sidebar/components/SidebarFooter.tsx
@@ -0,0 +1,15 @@
+import React from "react";
+import { Separator } from "~/Separator";
+
+const SidebarFooter = ({ children, ...props }: React.HTMLAttributes<HTMLDivElement>) => {
+    return (
+        <div data-sidebar="footer" {...props}>
+            <div className={"wby-px-sm wby-pb-xs"}>
+                <Separator className={"wby-mb-px"} />
+            </div>
+            {children}
+        </div>
+    );
+};
+
+export { SidebarFooter };
diff --git a/packages/admin-ui/src/Sidebar/components/SidebarHeader.tsx b/packages/admin-ui/src/Sidebar/components/SidebarHeader.tsx
new file mode 100644
index 00000000000..e4dad8a3a76
--- /dev/null
+++ b/packages/admin-ui/src/Sidebar/components/SidebarHeader.tsx
@@ -0,0 +1,64 @@
+import React from "react";
+import { Separator } from "~/Separator";
+import { IconButton } from "~/Button";
+import { useSidebar } from "./SidebarProvider";
+import { ReactComponent as PinSidebarIcon } from "@webiny/icons/chrome_reader_mode.svg";
+import { ReactComponent as UnpinSidebarIcon } from "@webiny/icons/width_full.svg";
+import { Tooltip } from "~/Tooltip";
+
+interface SidebarHeaderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+    icon?: React.ReactNode;
+    title?: React.ReactNode;
+}
+
+const SidebarHeader = ({ title, icon }: SidebarHeaderProps) => {
+    const { togglePinned, expanded, pinned } = useSidebar();
+
+    return (
+        <>
+            <div className={"wby-px-xs-plus"}>
+                <div
+                    data-sidebar="header"
+                    className={
+                        "wby-flex wby-justify-between wby-items-center wby-gap-sm wby-py-xs-plus wby-px-xs wby-overflow-x-hidden"
+                    }
+                >
+                    <div
+                        className={
+                            "wby-flex wby-items-center wby-gap-x-sm [&_a]:!wby-no-underline [&_a]:!wby-text-neutral-primary wby-truncate"
+                        }
+                    >
+                        <div className={"wby-flex wby-flex-shrink-0"}>{icon}</div>
+
+                        <span className={"wby-text-md wby-font-semibold wby-truncate"}>
+                            {title}
+                        </span>
+                    </div>
+
+                    {expanded && (
+                        <div className={"wby-size-md"}>
+                            <Tooltip
+                                side={"right"}
+                                trigger={
+                                    <IconButton
+                                        icon={pinned ? <UnpinSidebarIcon /> : <PinSidebarIcon />}
+                                        data-sidebar="trigger"
+                                        size="xs"
+                                        variant={"ghost"}
+                                        onClick={togglePinned}
+                                    />
+                                }
+                                content={pinned ? "Unlock sidebar" : "Lock sidebar open"}
+                            />
+                        </div>
+                    )}
+                </div>
+            </div>
+            <div className={"wby-px-sm wby-py-xs"}>
+                <Separator className={"wby-mb-px"} />
+            </div>
+        </>
+    );
+};
+
+export { SidebarHeader, type SidebarHeaderProps };
diff --git a/packages/admin-ui/src/Sidebar/components/SidebarIcon.tsx b/packages/admin-ui/src/Sidebar/components/SidebarIcon.tsx
new file mode 100644
index 00000000000..8e10463e99d
--- /dev/null
+++ b/packages/admin-ui/src/Sidebar/components/SidebarIcon.tsx
@@ -0,0 +1,15 @@
+import React from "react";
+import { Icon, type IconProps } from "~/Icon";
+import { makeDecoratable } from "@webiny/react-composition";
+
+interface SidebarIconProps extends Omit<IconProps, "icon"> {
+    element?: React.ReactNode;
+}
+
+const SidebarIconBase = ({ element, ...props }: SidebarIconProps) => {
+    return <Icon icon={element} size={"lg"} {...props} />;
+};
+
+const SidebarIcon = makeDecoratable("SidebarIcon", SidebarIconBase);
+
+export { SidebarIcon, type SidebarIconProps };
diff --git a/packages/admin-ui/src/Sidebar/components/SidebarProvider.tsx b/packages/admin-ui/src/Sidebar/components/SidebarProvider.tsx
new file mode 100644
index 00000000000..708daa5640e
--- /dev/null
+++ b/packages/admin-ui/src/Sidebar/components/SidebarProvider.tsx
@@ -0,0 +1,175 @@
+import React from "react";
+import { cn } from "~/utils";
+import { SIDEBAR_TRANSITION_DURATION } from "./constants";
+import { SidebarCache } from "./SidebarCache";
+
+type SidebarContext = {
+    state: "expanded" | "collapsed";
+    expanded: boolean;
+    expandedSections: string[];
+    pinned: boolean;
+    transition: null | "expanding" | "collapsing";
+    setExpanded: (expanded: boolean) => void;
+    toggleExpanded: () => void;
+    togglePinned: () => void;
+    toggleSectionExpanded: (sectionId: string) => void;
+    isSectionExpanded: (sectionId: string) => boolean;
+};
+
+const SidebarContext = React.createContext<SidebarContext | null>(null);
+
+function useSidebar() {
+    const context = React.useContext(SidebarContext);
+    if (!context) {
+        throw new Error("useSidebar must be used within a SidebarProvider.");
+    }
+
+    return context;
+}
+
+type SidebarProviderProps = React.HTMLAttributes<HTMLDivElement>;
+
+interface SidebarState {
+    expanded: boolean;
+    transition: null | "expanding" | "collapsing";
+    pinned: boolean;
+    expandedSections: string[];
+}
+
+const createInitialSidebarState = (): SidebarState => {
+    const { pinned, expandedSections } = SidebarCache.get();
+    return {
+        expanded: pinned, // If pinned, we want the sidebar to be open by default.
+        pinned,
+        expandedSections,
+        transition: null
+    };
+};
+
+const SidebarProvider = ({ className, children, ...props }: SidebarProviderProps) => {
+    const [sidebarState, setSidebarState] = React.useState<SidebarState>(createInitialSidebarState);
+
+    // With this timeout, we prevent the sidebar glitching (quickly opening/closing) during mouse enter/leave events.
+    const timeoutRef = React.useRef<number | null>(null);
+
+    const { expanded, transition, pinned, expandedSections } = sidebarState;
+
+    const setExpanded = React.useCallback(
+        (value: boolean | ((value: boolean) => boolean)) => {
+            const newValue = typeof value === "function" ? value(expanded) : value;
+            setSidebarState(state => ({
+                ...state,
+                expanded: newValue,
+                transition: newValue ? "expanding" : "collapsing"
+            }));
+
+            if (timeoutRef.current) {
+                window.clearTimeout(timeoutRef.current);
+                timeoutRef.current = null;
+            }
+
+            timeoutRef.current = window.setTimeout(() => {
+                setSidebarState(state => ({
+                    ...state,
+                    transition: null
+                }));
+            }, SIDEBAR_TRANSITION_DURATION);
+        },
+        [expanded]
+    );
+
+    const setPinned = React.useCallback(
+        (value: boolean | ((value: boolean) => boolean)) => {
+            const newValue = typeof value === "function" ? value(pinned) : value;
+            setSidebarState(state => ({
+                ...state,
+                pinned: newValue
+            }));
+
+            SidebarCache.set({ pinned: newValue, expandedSections });
+        },
+        [pinned]
+    );
+
+    const toggleExpanded = React.useCallback(() => {
+        return setExpanded(prev => !prev);
+    }, [setExpanded]); // Helper to toggle the sidebar.
+
+    const togglePinned = React.useCallback(() => {
+        return setPinned(prev => !prev);
+    }, [setPinned]);
+
+    const toggleSectionExpanded = React.useCallback(
+        (sectionId: string) => {
+            setSidebarState(state => {
+                const expandedSections = state.expandedSections.includes(sectionId)
+                    ? state.expandedSections.filter(id => id !== sectionId)
+                    : [...state.expandedSections, sectionId];
+
+                SidebarCache.set({ pinned: state.pinned, expandedSections });
+
+                return {
+                    ...state,
+                    expandedSections
+                };
+            });
+        },
+        [setSidebarState]
+    );
+
+    const isSectionExpanded = React.useCallback(
+        (sectionId: string) => {
+            return expandedSections.includes(sectionId);
+        },
+        [expandedSections]
+    );
+
+    // We add a state so that we can do data-state="expanded" or "collapsed".
+    // This makes it easier to style the sidebar with Tailwind classes.
+    const state = expanded ? "expanded" : "collapsed";
+
+    const contextValue = React.useMemo<SidebarContext>(
+        () => ({
+            state,
+            transition,
+            expanded,
+            expandedSections,
+            pinned,
+            setExpanded,
+            toggleExpanded,
+            toggleSectionExpanded,
+            setPinned,
+            togglePinned,
+            isSectionExpanded
+        }),
+        [
+            state,
+            transition,
+            expanded,
+            expandedSections,
+            pinned,
+            setExpanded,
+            setPinned,
+            toggleExpanded,
+            togglePinned
+        ]
+    );
+
+    return (
+        <SidebarContext.Provider value={contextValue}>
+            <div
+                data-sidebar={"provider"}
+                {...props}
+                className={cn(
+                    "wby-group/sidebar-wrapper wby-flex wby-min-h-svh wby-w-full",
+                    className
+                )}
+            >
+                {children}
+            </div>
+        </SidebarContext.Provider>
+    );
+};
+SidebarProvider.displayName = "SidebarProvider";
+
+export { SidebarProvider, useSidebar };
diff --git a/packages/admin-ui/src/Sidebar/components/SidebarRoot.tsx b/packages/admin-ui/src/Sidebar/components/SidebarRoot.tsx
new file mode 100644
index 00000000000..ba9338bd55f
--- /dev/null
+++ b/packages/admin-ui/src/Sidebar/components/SidebarRoot.tsx
@@ -0,0 +1,97 @@
+import React, { useCallback, useRef } from "react";
+import { cn, cva } from "~/utils";
+import { useSidebar } from "./SidebarProvider";
+
+interface SidebarRootProps extends React.ComponentProps<"div"> {
+    side?: "left" | "right";
+}
+
+const variants = cva(
+    "wby-group wby-peer wby-block wby-border-r-sm wby-border-neutral-dimmed wby-bg-neutral-light",
+    {
+        variants: {
+            pinned: {
+                false: "wby-fixed wby-top-0 wby-z-10 "
+            }
+        }
+    }
+);
+
+const SidebarRoot = ({ side = "left", className, children, ...props }: SidebarRootProps) => {
+    const { state, setExpanded, pinned } = useSidebar();
+
+    const elementRef = useRef<HTMLDivElement>(null);
+
+    // With this timeout, we prevent the sidebar glitching (quickly opening/closing) during mouse enter/leave events.
+    const timeoutRef = useRef<number | null>(null);
+
+    const onMouseEnter = useCallback<React.MouseEventHandler<HTMLDivElement>>(() => {
+        // If the sidebar is pinned, we don't want to open the sidebar on mouse enter.
+        if (pinned) {
+            return;
+        }
+
+        if (timeoutRef.current) {
+            window.clearTimeout(timeoutRef.current);
+            timeoutRef.current = null;
+        }
+
+        setExpanded(true);
+    }, [pinned, setExpanded]);
+
+    const onMouseLeave = useCallback<React.MouseEventHandler<HTMLDivElement>>(() => {
+        // If the sidebar is pinned, we don't want to close the sidebar on mouse leave.
+        if (pinned) {
+            return;
+        }
+
+        // With this timeout, we prevent the sidebar glitching (quickly opening/closing) during mouse enter/leave events.
+        timeoutRef.current = window.setTimeout(() => {
+            setExpanded(false);
+        }, 50);
+    }, [pinned, setExpanded]);
+
+    return (
+        <div
+            onMouseEnter={onMouseEnter}
+            onMouseLeave={onMouseLeave}
+            ref={elementRef}
+            data-state={state}
+            data-sidebar={"root"}
+            data-side={side}
+            className={variants({ pinned })}
+        >
+            <div
+                className={cn(
+                    "wby-duration-175 wby-relative wby-h-svh wby-w-sidebar-expanded wby-bg-transparent wby-transition-[width] wby-ease-linear wby-duration-175",
+                    "group-data-[side=right]:wby-rotate-180",
+                    "group-data-[state=collapsed]:wby-w-sidebar-collapsed"
+                )}
+            />
+            <div
+                className={cn(
+                    "wby-duration-175 wby-fixed wby-inset-y-0 wby-z-10 wby-h-svh wby-w-sidebar-expanded wby-transition-[width] wby-ease-linear md:wby-flex",
+                    side === "left" ? "wby-left-0" : "wby-right-0",
+                    "group-data-[state=collapsed]:wby-w-sidebar-collapsed group-data-[side=left]:wby-border-r-px group-data-[side=right]:wby-border-l-px",
+                    className
+                )}
+                {...props}
+            >
+                <div
+                    data-sidebar="sidebar"
+                    className="wby-flex wby-h-full wby-w-full wby-py-xs wby-flex-col"
+                >
+                    {children}
+                </div>
+            </div>
+            <div
+                data-sidebar={"extra-hover-area"}
+                className={
+                    "wby-absolute wby-top-0 wby-left-[theme(spacing.sidebar-collapsed)] wby-h-full wby-w-xl wby-hidden group-data-[state=collapsed]:wby-block"
+                }
+            />
+        </div>
+    );
+};
+
+export { SidebarRoot, type SidebarRootProps };
diff --git a/packages/admin-ui/src/Sidebar/components/constants.ts b/packages/admin-ui/src/Sidebar/components/constants.ts
new file mode 100644
index 00000000000..0fe6cf7d653
--- /dev/null
+++ b/packages/admin-ui/src/Sidebar/components/constants.ts
@@ -0,0 +1,2 @@
+export const SIDEBAR_TRANSITION_DURATION = 175;
+export const SIDEBAR_LS_KEY = "webiny_sidebar_state";
diff --git a/packages/admin-ui/src/Sidebar/components/items/DivButton.tsx b/packages/admin-ui/src/Sidebar/components/items/DivButton.tsx
new file mode 100644
index 00000000000..fe16f16bf0f
--- /dev/null
+++ b/packages/admin-ui/src/Sidebar/components/items/DivButton.tsx
@@ -0,0 +1,29 @@
+import React, { useMemo } from "react";
+
+interface DivButtonProps extends React.HTMLAttributes<HTMLDivElement> {
+    disabled?: boolean;
+}
+
+const DivButton = ({ tabIndex, disabled, ...props }: DivButtonProps) => {
+    const divAsButtonProps = useMemo<React.HTMLAttributes<HTMLDivElement>>(() => {
+        let tabIndexToUse = typeof tabIndex === "number" ? tabIndex : 0;
+        if (disabled) {
+            tabIndexToUse = -1;
+        }
+
+        return {
+            role: "button",
+            tabIndex: tabIndexToUse,
+            onKeyDown: e => {
+                if (e.key === "Enter" || e.key === " ") {
+                    e.preventDefault();
+                    e.currentTarget.click();
+                }
+            }
+        };
+    }, [disabled, tabIndex]);
+
+    return <div {...props} {...divAsButtonProps} />;
+};
+
+export { DivButton, type DivButtonProps };
diff --git a/packages/admin-ui/src/Sidebar/components/items/SidebarMenuGroup.tsx b/packages/admin-ui/src/Sidebar/components/items/SidebarMenuGroup.tsx
new file mode 100644
index 00000000000..02686d73853
--- /dev/null
+++ b/packages/admin-ui/src/Sidebar/components/items/SidebarMenuGroup.tsx
@@ -0,0 +1,29 @@
+import React from "react";
+import { SidebarMenuItem, type SidebarMenuItemGroupProps } from "./SidebarMenuItem";
+import { makeDecoratable, withStaticProps } from "~/utils";
+import {
+    SidebarMenuItemIcon,
+    type SidebarMenuItemIconProps
+} from "~/Sidebar/components/items/SidebarMenuItemIcon";
+import {
+    SidebarMenuItemAction,
+    type SidebarMenuItemActionProps
+} from "~/Sidebar/components/items/SidebarMenuItemAction";
+
+const SidebarMenuGroupBase = (props: SidebarMenuItemGroupProps) => {
+    return <SidebarMenuItem variant={"group-label"} {...props} />;
+};
+
+const DecoratableSidebarMenuGroup = makeDecoratable("SidebarMenuGroup", SidebarMenuGroupBase);
+
+const SidebarMenuGroup = withStaticProps(DecoratableSidebarMenuGroup, {
+    Icon: SidebarMenuItemIcon,
+    Action: SidebarMenuItemAction
+});
+
+export {
+    SidebarMenuGroup,
+    type SidebarMenuItemGroupProps,
+    type SidebarMenuItemIconProps,
+    type SidebarMenuItemActionProps
+};
diff --git a/packages/admin-ui/src/Sidebar/components/items/SidebarMenuItem.tsx b/packages/admin-ui/src/Sidebar/components/items/SidebarMenuItem.tsx
new file mode 100644
index 00000000000..73b11440dea
--- /dev/null
+++ b/packages/admin-ui/src/Sidebar/components/items/SidebarMenuItem.tsx
@@ -0,0 +1,53 @@
+import React from "react";
+import { makeDecoratable, withStaticProps } from "~/utils";
+import { SidebarMenuItemIcon, type SidebarMenuItemIconProps } from "./SidebarMenuItemIcon";
+import { SidebarMenuItemAction, type SidebarMenuItemActionProps } from "./SidebarMenuItemAction";
+import { SidebarMenuSubItem } from "./SidebarMenuSubItem";
+import { useSidebarMenu } from "./SidebarMenuProvider";
+import { LinkProps, To } from "@webiny/react-router";
+import { SidebarMenuRootItem } from "~/Sidebar/components/items/SidebarMenuRootItem";
+
+export interface SidebarMenuItemBaseProps {
+    text: React.ReactNode;
+    className?: string;
+    children?: React.ReactNode;
+    onClick?: React.MouseEventHandler;
+    icon?: React.ReactNode;
+    action?: React.ReactNode;
+    variant?: "group-label";
+    active?: boolean;
+    disabled?: boolean;
+}
+
+type SidebarMenuItemButtonProps = SidebarMenuItemBaseProps & { to?: never };
+type SidebarMenuItemGroupProps = SidebarMenuItemButtonProps;
+type SidebarMenuItemLinkProps = SidebarMenuItemBaseProps & LinkProps & { to: To };
+
+type SidebarMenuItemProps = SidebarMenuItemButtonProps | SidebarMenuItemLinkProps;
+
+const SidebarMenuItemBase = (props: SidebarMenuItemProps) => {
+    const { currentLevel } = useSidebarMenu();
+
+    if (currentLevel === 0) {
+        return <SidebarMenuRootItem {...props} />;
+    }
+
+    return <SidebarMenuSubItem {...props} />;
+};
+
+const DecoratableSidebarMenuItem = makeDecoratable("SidebarMenuItem", SidebarMenuItemBase);
+
+const SidebarMenuItem = withStaticProps(DecoratableSidebarMenuItem, {
+    Icon: SidebarMenuItemIcon,
+    Action: SidebarMenuItemAction
+});
+
+export {
+    SidebarMenuItem,
+    type SidebarMenuItemProps,
+    type SidebarMenuItemButtonProps,
+    type SidebarMenuItemLinkProps,
+    type SidebarMenuItemGroupProps,
+    type SidebarMenuItemIconProps,
+    type SidebarMenuItemActionProps
+};
diff --git a/packages/admin-ui/src/Sidebar/components/items/SidebarMenuItemAction.tsx b/packages/admin-ui/src/Sidebar/components/items/SidebarMenuItemAction.tsx
new file mode 100644
index 00000000000..92e70902fcd
--- /dev/null
+++ b/packages/admin-ui/src/Sidebar/components/items/SidebarMenuItemAction.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+import { IconButton, type IconButtonProps } from "~/Button/IconButton";
+
+interface SidebarMenuItemActionProps extends Omit<IconButtonProps, "icon"> {
+    element?: React.ReactNode;
+}
+
+const SidebarMenuItemAction = ({ element, ...props }: SidebarMenuItemActionProps) => {
+    return (
+        <IconButton
+            icon={element}
+            size={"xs"}
+            variant={"ghost"}
+            className={"wby-ml-auto group-data-[state=collapsed]:wby-hidden"}
+            {...props}
+        />
+    );
+};
+
+export { SidebarMenuItemAction, type SidebarMenuItemActionProps };
diff --git a/packages/admin-ui/src/Sidebar/components/items/SidebarMenuItemIcon.tsx b/packages/admin-ui/src/Sidebar/components/items/SidebarMenuItemIcon.tsx
new file mode 100644
index 00000000000..abd5f3aba45
--- /dev/null
+++ b/packages/admin-ui/src/Sidebar/components/items/SidebarMenuItemIcon.tsx
@@ -0,0 +1,15 @@
+import React from "react";
+import { Icon, type IconProps } from "~/Icon";
+import { makeDecoratable } from "@webiny/react-composition";
+
+interface SidebarMenuItemIconProps extends Omit<IconProps, "icon"> {
+    element?: React.ReactNode;
+}
+
+const SidebarMenuItemIconBase = ({ element, ...props }: SidebarMenuItemIconProps) => {
+    return <Icon icon={element} size={"sm"} color={"neutral-light"} {...props} />;
+};
+
+const SidebarMenuItemIcon = makeDecoratable("SidebarMenuItemIcon", SidebarMenuItemIconBase);
+
+export { SidebarMenuItemIcon, type SidebarMenuItemIconProps };
diff --git a/packages/admin-ui/src/Sidebar/components/items/SidebarMenuLink.tsx b/packages/admin-ui/src/Sidebar/components/items/SidebarMenuLink.tsx
new file mode 100644
index 00000000000..b586c8b888d
--- /dev/null
+++ b/packages/admin-ui/src/Sidebar/components/items/SidebarMenuLink.tsx
@@ -0,0 +1,29 @@
+import React from "react";
+import { SidebarMenuItem, type SidebarMenuItemLinkProps } from "./SidebarMenuItem";
+import { makeDecoratable, withStaticProps } from "~/utils";
+import {
+    SidebarMenuItemIcon,
+    type SidebarMenuItemIconProps
+} from "~/Sidebar/components/items/SidebarMenuItemIcon";
+import {
+    SidebarMenuItemAction,
+    type SidebarMenuItemActionProps
+} from "~/Sidebar/components/items/SidebarMenuItemAction";
+
+const SidebarMenuLinkBase = (props: SidebarMenuItemLinkProps) => {
+    return <SidebarMenuItem {...props} />;
+};
+
+const DecoratableSidebarMenuLink = makeDecoratable("SidebarMenuLink", SidebarMenuLinkBase);
+
+const SidebarMenuLink = withStaticProps(DecoratableSidebarMenuLink, {
+    Icon: SidebarMenuItemIcon,
+    Action: SidebarMenuItemAction
+});
+
+export {
+    SidebarMenuLink,
+    type SidebarMenuItemLinkProps,
+    type SidebarMenuItemIconProps,
+    type SidebarMenuItemActionProps
+};
diff --git a/packages/admin-ui/src/Sidebar/components/items/SidebarMenuProvider.tsx b/packages/admin-ui/src/Sidebar/components/items/SidebarMenuProvider.tsx
new file mode 100644
index 00000000000..42e30b333ad
--- /dev/null
+++ b/packages/admin-ui/src/Sidebar/components/items/SidebarMenuProvider.tsx
@@ -0,0 +1,37 @@
+import React from "react";
+
+interface SidebarMenuContext {
+    currentLevel: number;
+    nextLevel: number;
+}
+
+interface SidebarMenuProviderProps {
+    level?: number;
+    children: React.ReactNode;
+}
+
+const SidebarMenuContext = React.createContext<SidebarMenuContext>({
+    currentLevel: 0,
+    nextLevel: 1
+});
+
+function useSidebarMenu() {
+    const context = React.useContext(SidebarMenuContext);
+    if (!context) {
+        throw new Error("useSidebarItem must be used within a SidebarMenuProvider.");
+    }
+
+    return context;
+}
+
+const SidebarMenuProvider = ({ level = 0, children }: SidebarMenuProviderProps) => {
+    return (
+        <SidebarMenuContext.Provider value={{ currentLevel: level, nextLevel: level + 1 }}>
+            {children}
+        </SidebarMenuContext.Provider>
+    );
+};
+
+SidebarMenuProvider.displayName = "SidebarMenuProvider";
+
+export { SidebarMenuProvider, useSidebarMenu };
diff --git a/packages/admin-ui/src/Sidebar/components/items/SidebarMenuRoot.tsx b/packages/admin-ui/src/Sidebar/components/items/SidebarMenuRoot.tsx
new file mode 100644
index 00000000000..6e789c76f44
--- /dev/null
+++ b/packages/admin-ui/src/Sidebar/components/items/SidebarMenuRoot.tsx
@@ -0,0 +1,18 @@
+import React from "react";
+import { SidebarMenuProvider } from "./SidebarMenuProvider";
+
+interface SidebarMenuProps {
+    children: React.ReactNode;
+}
+
+const SidebarMenuRoot = (props: SidebarMenuProps) => (
+    <SidebarMenuProvider>
+        <ul
+            data-sidebar="menu"
+            className={"wby-flex wby-w-full wby-min-w-0 wby-flex-col wby-gap-y-xs"}
+            {...props}
+        />
+    </SidebarMenuProvider>
+);
+
+export { SidebarMenuRoot, type SidebarMenuProps };
diff --git a/packages/admin-ui/src/Sidebar/components/items/SidebarMenuRootButton.tsx b/packages/admin-ui/src/Sidebar/components/items/SidebarMenuRootButton.tsx
new file mode 100644
index 00000000000..d9df59218ea
--- /dev/null
+++ b/packages/admin-ui/src/Sidebar/components/items/SidebarMenuRootButton.tsx
@@ -0,0 +1,76 @@
+import React from "react";
+import { cn, cva } from "~/utils";
+import { Link } from "@webiny/react-router";
+import type { SidebarMenuItemProps } from "./SidebarMenuRootItem";
+import { DivButton } from "./DivButton";
+
+const variants = cva(
+    [
+        "wby-flex wby-w-full wby-items-center wby-gap-sm wby-rounded-md",
+        "!wby-no-underline wby-text-neutral-primary wby-cursor-pointer wby-px-sm wby-py-xs-plus wby-text-left",
+        "wby-text-md wby-outline-none wby-transition-[width,height,padding]",
+        "wby-whitespace-nowrap wby-overflow-hidden",
+        "hover:wby-bg-neutral-dark/5",
+        "focus:wby-bg-neutral-dark/5 focus:wby-ring-none focus:wby-ring-transparent",
+        "data-[active=true]:wby-bg-neutral-dark/5 data-[active=true]:wby-font-semibold data-[active=true]:wby-pointer-events-none",
+        "group-data-[state=open]/menu-item-collapsible:!wby-font-semibold"
+    ],
+    {
+        variants: {
+            variant: {
+                "group-label": "!wby-text-neutral-muted wby-uppercase"
+            },
+            disabled: {
+                true: "wby-pointer-events-none !wby-text-neutral-disabled"
+            }
+        }
+    }
+);
+
+type SidebarMenuButtonBaseProps = Omit<SidebarMenuItemProps, "children">;
+
+const SidebarMenuRootButton = ({
+    className,
+    onClick,
+    variant,
+    active,
+    disabled,
+    icon,
+    action,
+    text,
+    to,
+    ...linkProps
+}: SidebarMenuButtonBaseProps) => {
+    const sharedProps = {
+        "data-sidebar": "menu-button",
+        "data-active": active,
+        className: variants({ variant, disabled }),
+        onClick
+    };
+
+    const chevron = action ? (
+        <div className="wby-flex wby-absolute wby-right-sm-plus">{action}</div>
+    ) : null;
+
+    const content = to ? (
+        <Link {...sharedProps} to={to} {...linkProps}>
+            {icon}
+            {text}
+            {chevron}
+        </Link>
+    ) : (
+        <DivButton
+            {...sharedProps}
+            disabled={disabled}
+            tabIndex={variant === "group-label" ? -1 : undefined}
+        >
+            {icon}
+            {text}
+            {chevron}
+        </DivButton>
+    );
+
+    return <div className={cn("wby-flex wby-items-center wby-w-full", className)}>{content}</div>;
+};
+
+export { SidebarMenuRootButton };
diff --git a/packages/admin-ui/src/Sidebar/components/items/SidebarMenuRootItem.tsx b/packages/admin-ui/src/Sidebar/components/items/SidebarMenuRootItem.tsx
new file mode 100644
index 00000000000..bd8778f2e29
--- /dev/null
+++ b/packages/admin-ui/src/Sidebar/components/items/SidebarMenuRootItem.tsx
@@ -0,0 +1,92 @@
+import React, { useCallback, useMemo } from "react";
+import { cn, makeDecoratable, withStaticProps } from "~/utils";
+import { SidebarMenuRootButton } from "./SidebarMenuRootButton";
+import { SidebarMenuItemIcon } from "./SidebarMenuItemIcon";
+import { SidebarMenuItemAction } from "./SidebarMenuItemAction";
+import { SidebarMenuSub } from "./SidebarMenuSub";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@radix-ui/react-collapsible";
+import { Icon } from "~/Icon";
+import { ReactComponent as KeyboardArrowRightIcon } from "@webiny/icons/keyboard_arrow_down.svg";
+import { type SidebarMenuItemProps } from "./SidebarMenuItem";
+import { useSidebarMenu } from "~/Sidebar/components/items/SidebarMenuProvider";
+import { useSidebar } from "~/Sidebar";
+
+const SidebarMenuItemBase = ({ children, className, ...buttonProps }: SidebarMenuItemProps) => {
+    const { currentLevel } = useSidebarMenu();
+    const sidebar = useSidebar();
+
+    const menuItemId = useMemo(() => {
+        return btoa(`sidebar-item-${currentLevel}-${buttonProps.text}`);
+    }, [buttonProps.text, currentLevel]);
+
+    const isSectionExpanded = useMemo(() => {
+        return sidebar.isSectionExpanded(menuItemId);
+    }, [sidebar.expandedSections]);
+
+    const toggleSectionExpanded = useCallback(() => {
+        sidebar.toggleSectionExpanded(menuItemId);
+    }, [isSectionExpanded]);
+
+    const sidebarMenuButton = useMemo(() => {
+        if (!children) {
+            return <SidebarMenuRootButton {...buttonProps} />;
+        }
+
+        const chevron = (
+            <Icon
+                label={"Expand / Collapse"}
+                size={"sm"}
+                className={
+                    "wby-ml-auto wby-transition-transform wby-duration-175 group-data-[state=open]/menu-item-collapsible:wby-rotate-180 group-data-[state=collapsed]:wby-hidden"
+                }
+                color={"neutral-strong"}
+                data-sidebar={"menu-item-expanded-indicator"}
+                icon={<KeyboardArrowRightIcon />}
+            />
+        );
+
+        return (
+            <Collapsible
+                className={cn("wby-w-full wby-group/menu-item-collapsible")}
+                open={isSectionExpanded}
+                onOpenChange={toggleSectionExpanded}
+            >
+                <CollapsibleTrigger asChild>
+                    <SidebarMenuRootButton {...buttonProps} action={chevron} />
+                </CollapsibleTrigger>
+                <CollapsibleContent
+                    forceMount
+                    className={"wby-hidden data-[state=open]:!wby-block"}
+                >
+                    <SidebarMenuSub>{children}</SidebarMenuSub>
+                </CollapsibleContent>
+            </Collapsible>
+        );
+    }, [children, buttonProps, menuItemId, isSectionExpanded, toggleSectionExpanded]);
+
+    return (
+        <li
+            data-sidebar="menu-item"
+            className={cn(
+                "wby-group/menu-item wby-relative wby-px-xs-plus",
+
+                // When the sidebar is collapsed, this ensures that the sidebar menu item is highlighted
+                // if it contains an active child (no matter how deep in the hierarchy).
+                "group-data-[state=collapsed]:[&:has([data-active=true])_[data-sidebar=menu-button]_svg]:!wby-fill-neutral-xstrong",
+                "group-data-[state=collapsed]:[&:has([data-active=true])_[data-sidebar=menu-button]]:!wby-bg-neutral-dark/5",
+                className
+            )}
+        >
+            {sidebarMenuButton}
+        </li>
+    );
+};
+
+const DecoratableSidebarMenuItem = makeDecoratable("SidebarMenuItem", SidebarMenuItemBase);
+
+const SidebarMenuRootItem = withStaticProps(DecoratableSidebarMenuItem, {
+    Icon: SidebarMenuItemIcon,
+    Action: SidebarMenuItemAction
+});
+
+export { SidebarMenuRootItem, type SidebarMenuItemProps };
diff --git a/packages/admin-ui/src/Sidebar/components/items/SidebarMenuSub.tsx b/packages/admin-ui/src/Sidebar/components/items/SidebarMenuSub.tsx
new file mode 100644
index 00000000000..d384548f120
--- /dev/null
+++ b/packages/admin-ui/src/Sidebar/components/items/SidebarMenuSub.tsx
@@ -0,0 +1,23 @@
+import React from "react";
+import { cn } from "~/utils";
+import { SidebarMenuProvider, useSidebarMenu } from "./SidebarMenuProvider";
+
+const SidebarMenuSub = ({ className, ...props }: React.HTMLAttributes<HTMLUListElement>) => {
+    const parentSidebarMenu = useSidebarMenu();
+
+    return (
+        <SidebarMenuProvider level={parentSidebarMenu.nextLevel}>
+            <ul
+                data-sidebar="menu-sub"
+                className={cn(
+                    "wby-flex wby-min-w-0 wby-flex-col wby-gap-y-xs wby-pt-xs",
+                    "group-data-[state=collapsed]:wby-hidden",
+                    className
+                )}
+                {...props}
+            />
+        </SidebarMenuProvider>
+    );
+};
+
+export { SidebarMenuSub };
diff --git a/packages/admin-ui/src/Sidebar/components/items/SidebarMenuSubButton.tsx b/packages/admin-ui/src/Sidebar/components/items/SidebarMenuSubButton.tsx
new file mode 100644
index 00000000000..7a88a48a4a9
--- /dev/null
+++ b/packages/admin-ui/src/Sidebar/components/items/SidebarMenuSubButton.tsx
@@ -0,0 +1,80 @@
+import React from "react";
+import { Link } from "@webiny/react-router";
+import { cva } from "~/utils";
+import type { SidebarMenuItemProps } from "./SidebarMenuRootItem";
+import { DivButton } from "./DivButton";
+
+const variants = cva(
+    [
+        "wby-flex wby-w-full wby-cursor-pointer wby-items-center wby-gap-sm",
+        "wby-text-md wby-text-neutral-primary !wby-no-underline",
+        "wby-rounded-md wby-p-xs-plus wby-pr-sm wby-outline-none",
+        "wby-whitespace-nowrap wby-overflow-hidden",
+        "hover:wby-bg-neutral-dark/5",
+        "focus:wby-bg-neutral-dark/5 focus:wby-ring-none focus:wby-ring-transparent",
+        "data-[active=true]:wby-bg-neutral-dark/5 data-[active=true]:wby-font-semibold data-[active=true]:wby-pointer-events-none",
+        "group-data-[state=collapsed]:wby-hidden",
+        "group-data-[state=open]/menu-sub-item-collapsible:!wby-font-semibold"
+    ],
+    {
+        variants: {
+            variant: {
+                "group-label": [
+                    "wby-uppercase wby-font-semibold !wby-text-neutral-muted wby-text-sm",
+                    "wby-pt-md wby-pb-xs-plus wby-pointer-events-none"
+                ]
+            },
+            disabled: {
+                true: "wby-pointer-events-none !wby-text-neutral-disabled"
+            }
+        }
+    }
+);
+
+type SidebarMenuSubButtonProps = Omit<SidebarMenuItemProps, "className" | "children">;
+
+const SidebarMenuSubButton = ({
+    onClick,
+    variant,
+    active,
+    disabled,
+    icon,
+    action,
+    text,
+    to,
+    ...linkProps
+}: SidebarMenuSubButtonProps) => {
+    const sharedProps = {
+        "data-sidebar": "menu-button",
+        "data-active": active,
+        className: variants({ variant, disabled }),
+        onClick
+    };
+
+    const content = to ? (
+        <Link {...sharedProps} to={to} {...linkProps}>
+            {icon}
+            {text}
+        </Link>
+    ) : (
+        <DivButton
+            {...sharedProps}
+            disabled={disabled}
+            tabIndex={variant === "group-label" ? -1 : undefined}
+        >
+            {icon}
+            {text}
+        </DivButton>
+    );
+
+    // We can't use the default button element here because the content of the button
+    // can also contain a button, which is not allowed in HTML.
+    return (
+        <div className={"wby-flex wby-items-center wby-w-full"}>
+            {content}
+            <div className={"wby-flex wby-absolute wby-right-[10px]"}>{action}</div>
+        </div>
+    );
+};
+
+export { SidebarMenuSubButton };
diff --git a/packages/admin-ui/src/Sidebar/components/items/SidebarMenuSubItem.tsx b/packages/admin-ui/src/Sidebar/components/items/SidebarMenuSubItem.tsx
new file mode 100644
index 00000000000..9348226bdfe
--- /dev/null
+++ b/packages/admin-ui/src/Sidebar/components/items/SidebarMenuSubItem.tsx
@@ -0,0 +1,83 @@
+import React, { useCallback, useMemo } from "react";
+import { cn } from "~/utils";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@radix-ui/react-collapsible";
+import { SidebarMenuSubButton } from "./SidebarMenuSubButton";
+import { SidebarMenuSubItemIndentation } from "./SidebarMenuSubItemIndentation";
+import { SidebarMenuSub } from "./SidebarMenuSub";
+import { IconButton } from "~/Button";
+import { ReactComponent as KeyboardArrowRightIcon } from "@webiny/icons/keyboard_arrow_down.svg";
+import { useSidebarMenu } from "./SidebarMenuProvider";
+import { type SidebarMenuItemProps } from "./SidebarMenuItem";
+import { useSidebar } from "~/Sidebar";
+
+const SidebarMenuSubItem = ({ children, className, ...buttonProps }: SidebarMenuItemProps) => {
+    const { currentLevel } = useSidebarMenu();
+    const sidebar = useSidebar();
+
+    const menuItemId = useMemo(() => {
+        return btoa(`sidebar-item-${currentLevel}-${buttonProps.text}`);
+    }, [buttonProps.text, currentLevel]);
+
+    const isSectionExpanded = useMemo(() => {
+        return sidebar.isSectionExpanded(menuItemId);
+    }, [sidebar.expandedSections]);
+
+    const toggleSectionExpanded = useCallback(() => {
+        sidebar.toggleSectionExpanded(menuItemId);
+    }, [isSectionExpanded]);
+
+    const sidebarMenuSubButton = useMemo(() => {
+        if (!children) {
+            return (
+                <>
+                    <SidebarMenuSubItemIndentation
+                        lvl={currentLevel}
+                        variant={buttonProps.variant}
+                    />
+                    <SidebarMenuSubButton {...buttonProps} />
+                </>
+            );
+        }
+
+        const chevron = (
+            <IconButton
+                variant={"ghost"}
+                size={"xs"}
+                className={
+                    "wby-ml-auto wby-transition-transform wby-duration-175 group-data-[state=open]/menu-sub-item-collapsible:wby-rotate-180 group-data-[state=collapsed]:wby-hidden"
+                }
+                color={"neutral-strong"}
+                data-sidebar={"menu-item-expanded-indicator"}
+                icon={<KeyboardArrowRightIcon />}
+            />
+        );
+
+        return (
+            <Collapsible className="wby-w-full wby-group/menu-sub-item-collapsible">
+                <div className={"wby-flex wby-items-center"}>
+                    <SidebarMenuSubItemIndentation
+                        lvl={currentLevel}
+                        variant={buttonProps.variant}
+                    />
+                    <CollapsibleTrigger asChild>
+                        <SidebarMenuSubButton {...buttonProps} action={chevron} />
+                    </CollapsibleTrigger>
+                </div>
+                <CollapsibleContent>
+                    <SidebarMenuSub>{children}</SidebarMenuSub>
+                </CollapsibleContent>
+            </Collapsible>
+        );
+    }, [children, buttonProps, currentLevel, menuItemId, isSectionExpanded, toggleSectionExpanded]);
+
+    return (
+        <li
+            data-sidebar="menu-sub-item"
+            className={cn("wby-group/menu-sub-item wby-relative wby-flex", className)}
+        >
+            {sidebarMenuSubButton}
+        </li>
+    );
+};
+
+export { SidebarMenuSubItem };
diff --git a/packages/admin-ui/src/Sidebar/components/items/SidebarMenuSubItemIndentation.tsx b/packages/admin-ui/src/Sidebar/components/items/SidebarMenuSubItemIndentation.tsx
new file mode 100644
index 00000000000..6d74bd0e18c
--- /dev/null
+++ b/packages/admin-ui/src/Sidebar/components/items/SidebarMenuSubItemIndentation.tsx
@@ -0,0 +1,37 @@
+import React from "react";
+import { Separator } from "~/Separator";
+
+import { cva, type VariantProps } from "~/utils";
+
+const separatorVariants = cva(["wby-h-xl wby-ml-px"], {
+    variants: {
+        variant: {
+            "group-label": "!wby-h-[38px]"
+        }
+    }
+});
+
+export interface SidebarMenuSubItemIndentationProps
+    extends Omit<React.HTMLAttributes<HTMLLIElement>, "content">,
+        VariantProps<typeof separatorVariants> {
+    lvl: number;
+}
+
+const SidebarMenuSubItemIndentation = ({ lvl, variant }: SidebarMenuSubItemIndentationProps) => {
+    return (
+        <div data-sidebar="indentation" className={"wby-gap-x-xs wby-flex wby-mr-sm"}>
+            {Array.from({ length: lvl }, (_, index) => (
+                <div data-sidebar={"indentation-element"} className={"wby-ml-md"} key={lvl + index}>
+                    <Separator
+                        orientation={"vertical"}
+                        margin={"none"}
+                        variant={"strong"}
+                        className={separatorVariants({ variant })}
+                    />
+                </div>
+            ))}
+        </div>
+    );
+};
+
+export { SidebarMenuSubItemIndentation };
diff --git a/packages/admin-ui/src/Sidebar/index.ts b/packages/admin-ui/src/Sidebar/index.ts
new file mode 100644
index 00000000000..11c19da5b28
--- /dev/null
+++ b/packages/admin-ui/src/Sidebar/index.ts
@@ -0,0 +1,2 @@
+export * from "./Sidebar";
+export * from "./components/SidebarProvider";
diff --git a/packages/admin-ui/src/Sidebar/stories/wby-logo.png b/packages/admin-ui/src/Sidebar/stories/wby-logo.png
new file mode 100644
index 00000000000..ee207a1d70d
Binary files /dev/null and b/packages/admin-ui/src/Sidebar/stories/wby-logo.png differ
diff --git a/packages/admin-ui/src/Skeleton/Skeleton.mdx b/packages/admin-ui/src/Skeleton/Skeleton.mdx
new file mode 100644
index 00000000000..c6c0774cdc9
--- /dev/null
+++ b/packages/admin-ui/src/Skeleton/Skeleton.mdx
@@ -0,0 +1,219 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+
+import * as SkeletonStories from './Skeleton.stories';
+
+<Meta of={SkeletonStories} />
+
+# Skeleton
+
+The Skeleton component is a placeholder UI element used to indicate that content is loading. It provides a visual representation of the content's structure before the actual content is loaded, improving the perceived performance and user experience during loading states.
+
+## Usage
+
+<Canvas of={SkeletonStories.Documentation} source={ { code: `
+import React from "react";
+import { Skeleton } from "@webiny/admin-ui";
+
+const SkeletonExample = () => {
+    return <Skeleton />;
+};
+
+export default SkeletonExample;
+
+` } }
+        additionalActions={[
+            {
+                title: 'Open in GitHub',
+                onClick: () => {
+                    window.open(
+                        'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Skeleton/Skeleton.tsx',
+                        '_blank'
+                    );
+                },
+            }
+        ]}
+/>
+
+<Controls of={SkeletonStories.Documentation} />
+
+```tsx
+import React from "react";
+import { Skeleton } from "@webiny/admin-ui";
+
+const SkeletonExample = () => {
+    return <Skeleton />;
+};
+
+export default SkeletonExample;
+```
+
+## Examples
+
+### Types
+
+The Skeleton component supports three different types: `area`, `text`, and `thumbnail`.
+
+#### Area
+
+The default type, used for general content areas.
+
+<Canvas of={SkeletonStories.Area} source={ { code: `
+import React from "react";
+import { Skeleton } from "@webiny/admin-ui";
+
+const AreaSkeletonExample = () => {
+    return <Skeleton type="area" className="wby-w-1/2 wby-h-32" />;
+};
+
+export default AreaSkeletonExample;
+` } } />
+
+#### Text
+
+Used for text content, spans the full width of its container.
+
+<Canvas of={SkeletonStories.Text} source={ { code: `
+import React from "react";
+import { Skeleton } from "@webiny/admin-ui";
+
+const TextSkeletonExample = () => {
+    return <Skeleton type="text" />;
+};
+
+export default TextSkeletonExample;
+` } } />
+
+#### Thumbnail
+
+Used for square-shaped content like images or avatars.
+
+<Canvas of={SkeletonStories.Thumbnail} source={ { code: `
+import React from "react";
+import { Skeleton } from "@webiny/admin-ui";
+
+const ThumbnailSkeletonExample = () => {
+    return <Skeleton type="thumbnail" />;
+};
+
+export default ThumbnailSkeletonExample;
+` } } />
+
+### Sizes
+
+The Skeleton component comes in various sizes to match different content dimensions.
+
+#### Extra Small (XS)
+
+<Canvas of={SkeletonStories.ExtraSmall} source={ { code: `
+import React from "react";
+import { Skeleton } from "@webiny/admin-ui";
+
+const XsSkeletonExample = () => {
+    return <Skeleton size="xs" />;
+};
+
+export default XsSkeletonExample;
+` } } />
+
+#### Small (SM)
+
+<Canvas of={SkeletonStories.Small} source={ { code: `
+import React from "react";
+import { Skeleton } from "@webiny/admin-ui";
+
+const SmSkeletonExample = () => {
+    return <Skeleton size="sm" />;
+};
+
+export default SmSkeletonExample;
+` } } />
+
+#### Medium (MD)
+
+<Canvas of={SkeletonStories.Medium} source={ { code: `
+import React from "react";
+import { Skeleton } from "@webiny/admin-ui";
+
+const MdSkeletonExample = () => {
+    return <Skeleton size="md" />;
+};
+
+export default MdSkeletonExample;
+` } } />
+
+#### Large (LG)
+
+<Canvas of={SkeletonStories.Large} source={ { code: `
+import React from "react";
+import { Skeleton } from "@webiny/admin-ui";
+
+const LgSkeletonExample = () => {
+    return <Skeleton size="lg" />;
+};
+
+export default LgSkeletonExample;
+` } } />
+
+#### Extra Large (XL)
+
+<Canvas of={SkeletonStories.ExtraLarge} source={ { code: `
+import React from "react";
+import { Skeleton } from "@webiny/admin-ui";
+
+const XlSkeletonExample = () => {
+    return <Skeleton size="xl" />;
+};
+
+export default XlSkeletonExample;
+` } } />
+
+#### Double Extra Large (XXL)
+
+<Canvas of={SkeletonStories.DoubleExtraLarge} source={ { code: `
+import React from "react";
+import { Skeleton } from "@webiny/admin-ui";
+
+const XxlSkeletonExample = () => {
+    return <Skeleton size="xxl" />;
+};
+
+export default XxlSkeletonExample;
+` } } />
+
+#### Triple Extra Large (3XL)
+
+<Canvas of={SkeletonStories.TripleExtraLarge} source={ { code: `
+import React from "react";
+import { Skeleton } from "@webiny/admin-ui";
+
+const ThreeXlSkeletonExample = () => {
+    return <Skeleton size="3xl" />;
+};
+
+export default ThreeXlSkeletonExample;
+` } } />
+
+### Complex Layouts
+
+You can combine multiple Skeleton components to create more complex loading states.
+
+<Canvas of={SkeletonStories.MultipleAreas} source={ { code: `
+import React from "react";
+import { Skeleton } from "@webiny/admin-ui";
+
+const MultipleAreasExample = () => {
+    return (
+        <div className="wby-flex wby-gap-md">
+            <div className="wby-flex wby-flex-col wby-gap-md">
+                <Skeleton type="area" className={"wby-w-32 wby-h-32"} />
+                <Skeleton type="area" className={"wby-w-32 wby-h-32"} />
+            </div>
+            <div>
+                <Skeleton type="area" className="wby-w-32 wby-h-full" />
+            </div>
+        </div>
+    );
+};
+
+export default MultipleAreasExample;
+` } } />
diff --git a/packages/admin-ui/src/Skeleton/Skeleton.stories.tsx b/packages/admin-ui/src/Skeleton/Skeleton.stories.tsx
new file mode 100644
index 00000000000..18c9b92bd68
--- /dev/null
+++ b/packages/admin-ui/src/Skeleton/Skeleton.stories.tsx
@@ -0,0 +1,121 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Skeleton } from "./Skeleton";
+
+const meta: Meta<typeof Skeleton> = {
+    title: "Components/Skeleton",
+    component: Skeleton,
+    parameters: {
+        layout: "padded"
+    },
+    argTypes: {
+        type: {
+            control: "select",
+            options: ["text", "thumbnail", "area"]
+        },
+        size: {
+            control: "select",
+            options: ["xs", "sm", "md", "lg", "xl", "xxl", "3xl"]
+        }
+    }
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Skeleton>;
+
+export const Default: Story = {};
+
+export const Text: Story = {
+    args: {
+        type: "text"
+    }
+};
+
+export const Thumbnail: Story = {
+    args: {
+        type: "thumbnail"
+    }
+};
+
+export const Area: Story = {
+    args: {
+        type: "area",
+        className: "wby-w-1/2 wby-h-32"
+    }
+};
+
+export const MultipleAreas: Story = {
+    render: () => (
+        <div className="wby-flex wby-gap-md">
+            <div className="wby-flex wby-flex-col wby-gap-md">
+                <Skeleton type="area" className={"wby-w-32 wby-h-32"} />
+                <Skeleton type="area" className={"wby-w-32 wby-h-32"} />
+            </div>
+            <div>
+                <Skeleton type="area" className="wby-w-32 wby-h-full" />
+            </div>
+        </div>
+    )
+};
+
+export const ExtraSmall: Story = {
+    args: {
+        size: "xs"
+    }
+};
+
+export const Small: Story = {
+    args: {
+        size: "sm"
+    }
+};
+
+export const Medium: Story = {
+    args: {
+        size: "md"
+    }
+};
+
+export const Large: Story = {
+    args: {
+        size: "lg"
+    }
+};
+
+export const ExtraLarge: Story = {
+    args: {
+        size: "xl"
+    }
+};
+
+export const DoubleExtraLarge: Story = {
+    args: {
+        size: "xxl"
+    }
+};
+
+export const TripleExtraLarge: Story = {
+    args: {
+        size: "3xl"
+    }
+};
+
+export const Documentation: Story = {
+    args: {
+        type: "area",
+        size: "lg"
+    },
+    argTypes: {
+        type: {
+            control: "select",
+            description: "The type of skeleton to display",
+            options: ["text", "thumbnail", "area"]
+        },
+        size: {
+            control: "select",
+            description: "The size of the skeleton",
+            options: ["xs", "sm", "md", "lg", "xl", "xxl", "3xl"]
+        }
+    }
+};
diff --git a/packages/admin-ui/src/Skeleton/Skeleton.tsx b/packages/admin-ui/src/Skeleton/Skeleton.tsx
new file mode 100644
index 00000000000..a15d1774287
--- /dev/null
+++ b/packages/admin-ui/src/Skeleton/Skeleton.tsx
@@ -0,0 +1,50 @@
+import React from "react";
+import { cn, cva, type VariantProps, makeDecoratable } from "~/utils";
+
+const skeletonVariants = cva("wby-animate-skeleton-pulse wby-rounded-sm", {
+    variants: {
+        type: {
+            text: "wby-w-full",
+            thumbnail: "wby-aspect-square",
+            area: "wby-size-full"
+        },
+        size: {
+            xs: "wby-h-[8px]",
+            sm: "wby-h-[12px]",
+            md: "wby-h-[16px]",
+            lg: "wby-h-[24px]",
+            xl: "wby-h-[32px]",
+            xxl: "wby-h-[40px]",
+            "3xl": "wby-h-[48px]"
+        }
+    },
+    compoundVariants: [
+        // The following compound variants are not supported by the current version of the design system.
+        {
+            type: "thumbnail",
+            size: "xs",
+            class: "!wby-hidden"
+        },
+        {
+            type: "text",
+            size: "3xl",
+            class: "!wby-hidden"
+        }
+    ],
+    defaultVariants: {
+        type: "area",
+        size: "lg"
+    }
+});
+
+interface SkeletonProps
+    extends React.HTMLAttributes<HTMLDivElement>,
+        VariantProps<typeof skeletonVariants> {}
+
+const DecoratableSkeleton = ({ size, type, className, ...props }: SkeletonProps) => {
+    return <div className={cn(skeletonVariants({ size, type }), className)} {...props} />;
+};
+
+const Skeleton = makeDecoratable("Skeleton", DecoratableSkeleton);
+
+export { Skeleton, type SkeletonProps };
diff --git a/packages/admin-ui/src/Skeleton/index.ts b/packages/admin-ui/src/Skeleton/index.ts
new file mode 100644
index 00000000000..55879b8439f
--- /dev/null
+++ b/packages/admin-ui/src/Skeleton/index.ts
@@ -0,0 +1 @@
+export * from "./Skeleton";
diff --git a/packages/admin-ui/src/Slider/Slider.mdx b/packages/admin-ui/src/Slider/Slider.mdx
new file mode 100644
index 00000000000..71058ae6aee
--- /dev/null
+++ b/packages/admin-ui/src/Slider/Slider.mdx
@@ -0,0 +1,108 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+
+import * as SliderStories from './Slider.stories';
+
+<Meta of={SliderStories} />
+
+# Slider
+
+The Slider component is an interactive input control that allows users to select a value from a range by moving a thumb along a track. It provides a visual and intuitive way for users to adjust numeric values within a predefined range.
+
+## Usage
+
+<Canvas of={SliderStories.Documentation} source={ { code: `
+import React, { useState } from "react";
+import { Slider } from "@webiny/admin-ui";
+
+const SliderExample = () => {
+    const [value, setValue] = useState(50);
+    const [validation, setValidation] = useState({ isValid: true, message: "" });
+
+    const handleChange = (newValue: number) => {
+        setValue(newValue);
+
+        if (newValue === 0) {
+            setValidation({ isValid: false, message: "Please select a value" });
+        } else {
+            setValidation({ isValid: true, message: "" });
+        }
+    };
+
+    return (
+        <div>
+            <Slider
+                label="Volume Level"
+                description="Adjust the volume level of your device"
+                note="Note: Higher values may cause distortion on some devices"
+                min={0}
+                max={100}
+                step={1}
+                value={value}
+                required={true}
+                onValueChange={handleChange}
+                showTooltip={true}
+                transformValue={(value) => \`\${value}%\`}
+                validation={validation}
+            />
+        </div>
+    );
+};
+
+export default SliderExample;
+
+` } }
+        additionalActions={[
+            {
+                title: 'Open in GitHub',
+                onClick: () => {
+                    window.open(
+                        'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Slider/Slider.tsx',
+                        '_blank'
+                    );
+                },
+            }
+        ]}
+/>
+
+<Controls of={SliderStories.Documentation} exclude={["onValueChange", "onValueCommit"]}/>
+
+```tsx
+import React, { useState } from "react";
+import { Slider } from "@webiny/admin-ui";
+
+const SliderExample = () => {
+    const [value, setValue] = useState(50);
+    const [validation, setValidation] = useState({ isValid: true, message: "" });
+
+    const handleChange = (newValue: number) => {
+        setValue(newValue);
+
+        if (newValue === 0) {
+            setValidation({ isValid: false, message: "Please select a value" });
+        } else {
+            setValidation({ isValid: true, message: "" });
+        }
+    };
+
+    return (
+        <div>
+            <Slider
+                label="Volume Level"
+                description="Adjust the volume level of your device"
+                note="Note: Higher values may cause distortion on some devices"
+                min={0}
+                max={100}
+                step={1}
+                value={value}
+                required={true}
+                onValueChange={handleChange}
+                showTooltip={true}
+                transformValue={(value) => `${value}%`}
+                validation={validation}
+            />
+        </div>
+    );
+};
+
+export default SliderExample;
+```
\ No newline at end of file
diff --git a/packages/admin-ui/src/Slider/Slider.stories.tsx b/packages/admin-ui/src/Slider/Slider.stories.tsx
new file mode 100644
index 00000000000..dbc35d4ed60
--- /dev/null
+++ b/packages/admin-ui/src/Slider/Slider.stories.tsx
@@ -0,0 +1,272 @@
+import React, { useState, useEffect } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Slider } from "./Slider";
+
+const meta: Meta<typeof Slider> = {
+    title: "Components/Form/Slider",
+    component: Slider,
+    argTypes: {
+        onValueChange: { action: "onValueChange" },
+        onValueCommit: { action: "onValueCommit" },
+        disabled: {
+            control: "boolean",
+            defaultValue: false
+        }
+    },
+    parameters: {
+        layout: "padded"
+    },
+    render: args => {
+        const [value, setValue] = useState(args.value);
+        return <Slider {...args} value={value} onValueChange={value => setValue(value)} />;
+    }
+};
+
+export default meta;
+type Story = StoryObj<typeof Slider>;
+
+export const Default: Story = {};
+
+export const WithLabel: Story = {
+    args: {
+        ...Default.args,
+        label: "Any field label"
+    }
+};
+
+export const WithLabelRequired: Story = {
+    args: {
+        ...Default.args,
+        label: "Any field label",
+        required: true
+    }
+};
+
+export const WithDescription: Story = {
+    args: {
+        ...Default.args,
+        description: "Provide the required information for processing your request."
+    }
+};
+
+export const WithNotes: Story = {
+    args: {
+        ...Default.args,
+        note: "Note: Ensure your selection or input is accurate before proceeding."
+    }
+};
+
+export const WithErrors: Story = {
+    args: {
+        ...Default.args,
+        validation: {
+            isValid: false,
+            message: "This field is required."
+        }
+    }
+};
+
+export const Disabled: Story = {
+    args: {
+        ...Default.args,
+        label: "Any field label",
+        disabled: true
+    }
+};
+
+export const FullExample: Story = {
+    args: {
+        ...Default.args,
+        label: "Any field label",
+        required: true,
+        description: "Provide the required information for processing your request.",
+        note: "Note: Ensure your selection or input is accurate before proceeding.",
+        validation: {
+            isValid: false,
+            message: "This field is required."
+        }
+    }
+};
+
+export const WithSideLabel: Story = {
+    args: {
+        ...Default.args,
+        label: "Any field label",
+        labelPosition: "side"
+    }
+};
+
+export const WithSideLabelRequired: Story = {
+    args: {
+        ...WithSideLabel.args,
+        required: true
+    }
+};
+
+export const WithSideLabelAndDescription: Story = {
+    args: {
+        ...WithSideLabel.args,
+        description: "Provide the required information for processing your request."
+    }
+};
+
+export const WithSideLabelAndNotes: Story = {
+    args: {
+        ...WithSideLabel.args,
+        note: "Note: Ensure your selection or input is accurate before proceeding."
+    }
+};
+
+export const WithSideLabelAndErrors: Story = {
+    args: {
+        ...WithSideLabel.args,
+        validation: {
+            isValid: false,
+            message: "This field is required."
+        }
+    }
+};
+
+export const WithSideLabelDisabled: Story = {
+    args: {
+        ...WithSideLabel.args,
+        label: "Any field label",
+        disabled: true
+    }
+};
+
+export const WithSideLabelFullExample: Story = {
+    args: {
+        ...WithSideLabel.args,
+        label: "Any field label",
+        required: true,
+        description: "Provide the required information for processing your request.",
+        note: "Note: Ensure your selection or input is accurate before proceeding.",
+        validation: {
+            isValid: false,
+            message: "This field is required."
+        }
+    }
+};
+
+export const Documentation: Story = {
+    render: args => {
+        const [value, setValue] = useState(args.value || 50);
+        const [validation, setValidation] = useState({ isValid: true, message: "" });
+
+        // Update value when args.value changes
+        useEffect(() => {
+            setValue(args.value ?? 50);
+        }, [args.value]);
+
+        const handleChange = (newValue: number) => {
+            setValue(newValue);
+
+            if (args.required && newValue === 0) {
+                setValidation({ isValid: false, message: "Please select a value" });
+            } else {
+                setValidation({ isValid: true, message: "" });
+            }
+        };
+
+        // Validate on required change or value change
+        useEffect(() => {
+            if (args.required && value === 0) {
+                setValidation({ isValid: false, message: "Please select a value" });
+            } else {
+                setValidation({ isValid: true, message: "" });
+            }
+        }, [args.required, value]);
+
+        return (
+            <Slider
+                {...args}
+                value={value}
+                onValueChange={handleChange}
+                validation={validation}
+                required={args.required}
+                showTooltip={args.showTooltip}
+                transformValue={args.transformValue}
+            />
+        );
+    },
+    args: {
+        label: "Volume Level",
+        required: true,
+        disabled: false,
+        description: "Adjust the volume level of your device",
+        note: "Note: Higher values may cause distortion on some devices",
+        min: 0,
+        max: 100,
+        step: 1,
+        value: 50,
+        showTooltip: true,
+        transformValue: (value: number) => `${value}%`,
+        validation: undefined
+    },
+    argTypes: {
+        label: {
+            description: "Label text for the slider",
+            control: "text"
+        },
+        required: {
+            description: "Makes the field required when set to true",
+            control: "boolean"
+        },
+        disabled: {
+            description: "Disables the slider when set to true",
+            control: "boolean"
+        },
+        description: {
+            description: "Additional description text below the field",
+            control: "text"
+        },
+        note: {
+            description: "Additional note text below the field",
+            control: "text"
+        },
+        min: {
+            description: "Minimum value for the slider",
+            control: "number"
+        },
+        max: {
+            description: "Maximum value for the slider",
+            control: "number"
+        },
+        step: {
+            description: "Step increment for the slider",
+            control: "number"
+        },
+        value: {
+            description: "Current value of the slider",
+            control: "number"
+        },
+        showTooltip: {
+            description: "Whether to show a tooltip with the current value",
+            control: "boolean",
+            defaultValue: true
+        },
+        transformValue: {
+            description: "Function to transform the numeric value to display text",
+            control: "none"
+        },
+        labelPosition: {
+            description: "Position of the label relative to the slider",
+            control: "radio",
+            options: ["top", "side"]
+        },
+        validation: {
+            description:
+                "Object containing validation state and message. Please refer to the example code for details on usage.",
+            control: "none"
+        },
+        onValueChange: {
+            description: "Function called when the slider value changes",
+            control: "none"
+        },
+        onValueCommit: {
+            description: "Function called when the slider value is committed (on release)",
+            control: "none"
+        }
+    }
+};
diff --git a/packages/admin-ui/src/Slider/Slider.tsx b/packages/admin-ui/src/Slider/Slider.tsx
new file mode 100644
index 00000000000..3942f4ae796
--- /dev/null
+++ b/packages/admin-ui/src/Slider/Slider.tsx
@@ -0,0 +1,117 @@
+import * as React from "react";
+import { Label } from "~/Label";
+import { makeDecoratable } from "~/utils";
+import {
+    SliderPrimitiveRenderer,
+    SliderPrimitiveProps,
+    SliderPrimitiveRendererProps,
+    useSlider,
+    SliderValue
+} from "./primitives";
+import {
+    FormComponentDescription,
+    FormComponentErrorMessage,
+    FormComponentLabel,
+    FormComponentNote,
+    FormComponentProps
+} from "~/FormComponent";
+
+/**
+ * Slider Renderer with side label
+ */
+interface SliderRendererWithSideValueProps extends SliderPrimitiveRendererProps {
+    label?: React.ReactNode;
+    invalid?: boolean;
+    required?: boolean;
+}
+
+const SliderRendererWithSideValue = (props: SliderRendererWithSideValueProps) => {
+    return (
+        <div className={"wby-w-full wby-flex wby-flex-row wby-items-center wby-justify-between"}>
+            <div className={"wby-basis-2/12 wby-pr-sm"}>
+                <Label
+                    text={props.label}
+                    required={props.required}
+                    disabled={props.disabled}
+                    invalid={props.invalid}
+                    weight={"light"}
+                />
+            </div>
+            <div className={"wby-basis-9/12"}>
+                <SliderPrimitiveRenderer {...props} />
+            </div>
+            <div className={"wby-basis-1/12 wby-pl-sm wby-text-right"}>
+                <SliderValue value={props.textValue} disabled={props.disabled} />
+            </div>
+        </div>
+    );
+};
+
+/**
+ * Slider
+ */
+type SliderProps = FormComponentProps &
+    SliderPrimitiveProps & {
+        labelPosition?: "top" | "side";
+    };
+
+const DecoratableSlider = ({
+    description,
+    note,
+    validation,
+    labelPosition,
+    ...props
+}: SliderProps) => {
+    const { isValid: validationIsValid, message: validationMessage } = validation || {};
+    const invalid = validationIsValid === false;
+
+    const { vm, changeValue, commitValue } = useSlider(props);
+
+    if (labelPosition === "side") {
+        return (
+            <div className={"wby-w-full"}>
+                <FormComponentDescription text={description} disabled={props.disabled} />
+                <SliderRendererWithSideValue
+                    {...props}
+                    {...vm}
+                    invalid={invalid}
+                    onValueChange={changeValue}
+                    onValueCommit={commitValue}
+                />
+                <FormComponentErrorMessage
+                    text={validationMessage}
+                    invalid={invalid}
+                    disabled={props.disabled}
+                />
+                <FormComponentNote text={note} disabled={props.disabled} />
+            </div>
+        );
+    }
+
+    return (
+        <div className={"wby-w-full"}>
+            <FormComponentLabel
+                text={<Label text={props.label} value={vm.textValue} />}
+                disabled={props.disabled}
+                required={props.required}
+                invalid={invalid}
+            />
+            <FormComponentDescription text={description} disabled={props.disabled} />
+            <SliderPrimitiveRenderer
+                {...props}
+                {...vm}
+                onValueChange={changeValue}
+                onValueCommit={commitValue}
+            />
+            <FormComponentErrorMessage
+                text={validationMessage}
+                invalid={invalid}
+                disabled={props.disabled}
+            />
+            <FormComponentNote text={note} disabled={props.disabled} />
+        </div>
+    );
+};
+const Slider = makeDecoratable("Slider", DecoratableSlider);
+
+export { Slider, type SliderProps };
diff --git a/packages/admin-ui/src/Slider/index.ts b/packages/admin-ui/src/Slider/index.ts
new file mode 100644
index 00000000000..75ac67a2050
--- /dev/null
+++ b/packages/admin-ui/src/Slider/index.ts
@@ -0,0 +1,2 @@
+export * from "./Slider";
+export * from "./primitives";
diff --git a/packages/admin-ui/src/Slider/primitives/SliderPrimitive.stories.tsx b/packages/admin-ui/src/Slider/primitives/SliderPrimitive.stories.tsx
new file mode 100644
index 00000000000..49ced055489
--- /dev/null
+++ b/packages/admin-ui/src/Slider/primitives/SliderPrimitive.stories.tsx
@@ -0,0 +1,111 @@
+import React, { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { SliderPrimitive } from "./SliderPrimitive";
+import { Button } from "~/Button";
+
+const meta: Meta<typeof SliderPrimitive> = {
+    title: "Components/Form Primitives/Slider",
+    component: SliderPrimitive,
+    argTypes: {
+        onValueChange: { action: "onValueChange" },
+        onValueCommit: { action: "onValueCommit" }
+    },
+    parameters: {
+        layout: "padded"
+    },
+    render: args => {
+        const [value, setValue] = useState(args.value);
+        return <SliderPrimitive {...args} value={value} onValueChange={value => setValue(value)} />;
+    }
+};
+
+export default meta;
+type Story = StoryObj<typeof SliderPrimitive>;
+
+export const Default: Story = {};
+
+export const WithDefaultValue: Story = {
+    args: {
+        value: 50
+    }
+};
+
+export const WithMinAndMaxValues: Story = {
+    args: {
+        min: 10,
+        max: 20
+    }
+};
+
+export const WithNegativeMinValue: Story = {
+    args: {
+        min: -100,
+        max: 100,
+        value: 0
+    }
+};
+
+export const WithSteps: Story = {
+    args: {
+        step: 10
+    }
+};
+
+export const Disabled: Story = {
+    args: {
+        disabled: true,
+        value: 50
+    }
+};
+
+export const WithTooltip: Story = {
+    args: {
+        showTooltip: true
+    }
+};
+
+export const WithTooltipSideTop: Story = {
+    args: {
+        showTooltip: true,
+        tooltipSide: "top"
+    }
+};
+
+export const WithTooltipAndCustomValueTransformer: Story = {
+    args: {
+        showTooltip: true,
+        transformValue: (value: number) => {
+            return `${Math.round(value)}%`;
+        }
+    }
+};
+
+export const WithExternalValueControl: Story = {
+    args: {
+        showTooltip: true,
+        transformValue: (value: number) => {
+            return `${Math.round(value)}%`;
+        }
+    },
+    render: args => {
+        const defaultValue = 50;
+        const [value, setValue] = useState(defaultValue);
+        return (
+            <div className={"wby-w-full"}>
+                <div>
+                    <SliderPrimitive
+                        {...args}
+                        value={value}
+                        onValueChange={value => setValue(value)}
+                    />
+                </div>
+                <div className={"wby-mt-4 wby-text-center"}>
+                    <Button text={"Reset"} onClick={() => setValue(defaultValue)} />
+                </div>
+                <div className={"wby-mt-4 wby-text-center"}>
+                    Current value: <code>{value}</code>
+                </div>
+            </div>
+        );
+    }
+};
diff --git a/packages/admin-ui/src/Slider/primitives/SliderPrimitive.tsx b/packages/admin-ui/src/Slider/primitives/SliderPrimitive.tsx
new file mode 100644
index 00000000000..d8603b009e5
--- /dev/null
+++ b/packages/admin-ui/src/Slider/primitives/SliderPrimitive.tsx
@@ -0,0 +1,67 @@
+import * as React from "react";
+import * as SliderPrimitives from "@radix-ui/react-slider";
+import { useSlider } from "./useSlider";
+import { SliderRoot, SliderThumb, SliderTrack, type SliderThumbProps } from "./components";
+
+type SliderRootProps = Omit<SliderPrimitives.SliderProps, "min"> & {
+    min: number;
+};
+
+type SliderPrimitiveRendererProps = SliderRootProps & SliderThumbProps;
+
+const SliderPrimitiveRenderer = ({
+    tooltipSide,
+    textValue,
+    showTooltip,
+    ...sliderProps
+}: SliderPrimitiveVm) => {
+    return (
+        <div className={"wby-flex wby-h-md wby-w-full"}>
+            <SliderRoot {...sliderProps}>
+                <SliderTrack />
+                <SliderThumb
+                    textValue={textValue}
+                    showTooltip={showTooltip}
+                    tooltipSide={tooltipSide}
+                />
+            </SliderRoot>
+        </div>
+    );
+};
+
+interface SliderPrimitiveProps
+    extends Omit<
+        SliderPrimitives.SliderProps,
+        "defaultValue" | "value" | "onValueChange" | "onValueCommit"
+    > {
+    onValueChange: (value: number) => void;
+    onValueCommit?: (value: number) => void;
+    showTooltip?: boolean;
+    tooltipSide?: "top" | "bottom";
+    transformValue?: (value: number) => string;
+    value?: number;
+}
+
+type SliderPrimitiveVm = SliderRootProps & SliderThumbProps;
+
+const SliderPrimitive = (props: SliderPrimitiveProps) => {
+    const { transformValue, ...restProps } = props;
+    const { vm, changeValue, commitValue } = useSlider({ ...restProps, transformValue });
+
+    return (
+        <SliderPrimitiveRenderer
+            {...restProps}
+            {...vm}
+            onValueChange={changeValue}
+            onValueCommit={commitValue}
+        />
+    );
+};
+
+export {
+    SliderPrimitive,
+    SliderPrimitiveRenderer,
+    type SliderPrimitiveVm,
+    type SliderPrimitiveProps,
+    type SliderPrimitiveRendererProps
+};
diff --git a/packages/admin-ui/src/Slider/primitives/components/SliderRoot.tsx b/packages/admin-ui/src/Slider/primitives/components/SliderRoot.tsx
new file mode 100644
index 00000000000..4f351650c7b
--- /dev/null
+++ b/packages/admin-ui/src/Slider/primitives/components/SliderRoot.tsx
@@ -0,0 +1,18 @@
+import * as React from "react";
+import * as SliderPrimitives from "@radix-ui/react-slider";
+import { cn } from "~/utils";
+
+const SliderRoot = ({ className, ...props }: SliderPrimitives.SliderProps) => (
+    <SliderPrimitives.Root
+        className={cn(
+            [
+                "wby-relative wby-flex wby-w-full wby-touch-none wby-select-none wby-items-center wby-cursor-pointer",
+                "data-[disabled]:wby-cursor-not-allowed"
+            ],
+            className
+        )}
+        {...props}
+    />
+);
+
+export { SliderRoot };
diff --git a/packages/admin-ui/src/Slider/primitives/components/SliderSideValue.tsx b/packages/admin-ui/src/Slider/primitives/components/SliderSideValue.tsx
new file mode 100644
index 00000000000..90af01b5bbe
--- /dev/null
+++ b/packages/admin-ui/src/Slider/primitives/components/SliderSideValue.tsx
@@ -0,0 +1,25 @@
+import * as React from "react";
+import { cn, cva, type VariantProps } from "~/utils";
+
+const sliderValueVariants = cva("wby-font-normal wby-text-sm wby-leading-none", {
+    variants: {
+        disabled: {
+            true: "wby-text-neutral-disabled wby-cursor-not-allowed"
+        }
+    }
+});
+
+interface SliderValueProps
+    extends React.HTMLAttributes<HTMLSpanElement>,
+        VariantProps<typeof sliderValueVariants> {
+    value?: string;
+}
+
+const SliderValue = ({ value, disabled, className }: SliderValueProps) => {
+    if (!value) {
+        return null;
+    }
+    return <span className={cn(sliderValueVariants({ disabled }), className)}>{value}</span>;
+};
+
+export { SliderValue, type SliderValueProps };
diff --git a/packages/admin-ui/src/Slider/primitives/components/SliderThumb.tsx b/packages/admin-ui/src/Slider/primitives/components/SliderThumb.tsx
new file mode 100644
index 00000000000..6a565bbe846
--- /dev/null
+++ b/packages/admin-ui/src/Slider/primitives/components/SliderThumb.tsx
@@ -0,0 +1,22 @@
+import * as React from "react";
+import * as SliderPrimitives from "@radix-ui/react-slider";
+import { cn } from "~/utils";
+import { SliderTooltip, SliderTooltipProps } from "./SliderTooltip";
+
+type SliderThumbProps = SliderTooltipProps;
+
+const SliderThumb = ({ textValue, showTooltip, tooltipSide }: SliderThumbProps) => (
+    <SliderPrimitives.Thumb
+        className={cn(
+            "wby-inline-block wby-w-md wby-h-md wby-mt-xs-plus wby-rounded-xxl wby-border-md wby-transition-colors wby-outline-none",
+            "wby-bg-primary-default wby-border-white",
+            "hover:wby-bg-primary-strong",
+            "active:wby-bg-primary-default",
+            "data-[disabled]:wby-pointer-events-none data-[disabled]:wby-bg-primary-disabled"
+        )}
+    >
+        <SliderTooltip showTooltip={showTooltip} textValue={textValue} tooltipSide={tooltipSide} />
+    </SliderPrimitives.Thumb>
+);
+
+export { SliderThumb, type SliderThumbProps };
diff --git a/packages/admin-ui/src/Slider/primitives/components/SliderTooltip.tsx b/packages/admin-ui/src/Slider/primitives/components/SliderTooltip.tsx
new file mode 100644
index 00000000000..9293e40c2c1
--- /dev/null
+++ b/packages/admin-ui/src/Slider/primitives/components/SliderTooltip.tsx
@@ -0,0 +1,43 @@
+import * as React from "react";
+import { cn, cva, type VariantProps } from "~/utils";
+import { Text } from "~/Text";
+
+const sliderTooltipVariants = cva(
+    [
+        "wby-px-xs-plus wby-py-xxs wby-rounded-sm wby-absolute wby-left-1/2 -wby-translate-x-1/2",
+        "wby-bg-neutral-muted"
+    ],
+    {
+        variants: {
+            side: {
+                top: "wby-bottom-8",
+                bottom: "wby-top-8"
+            }
+        },
+        defaultVariants: {
+            side: "bottom"
+        }
+    }
+);
+
+type SliderTooltipProps = VariantProps<typeof sliderTooltipVariants> & {
+    textValue: string;
+    showTooltip?: boolean;
+    tooltipSide?: "top" | "bottom";
+};
+
+const SliderTooltip = ({ textValue, showTooltip, tooltipSide }: SliderTooltipProps) => {
+    if (!textValue || !showTooltip) {
+        return null;
+    }
+
+    return (
+        <div className={cn(sliderTooltipVariants({ side: tooltipSide }))}>
+            <Text size={"sm"} as={"div"}>
+                {textValue}
+            </Text>
+        </div>
+    );
+};
+
+export { SliderTooltip, type SliderTooltipProps };
diff --git a/packages/admin-ui/src/Slider/primitives/components/SliderTrack.tsx b/packages/admin-ui/src/Slider/primitives/components/SliderTrack.tsx
new file mode 100644
index 00000000000..918c68d05e2
--- /dev/null
+++ b/packages/admin-ui/src/Slider/primitives/components/SliderTrack.tsx
@@ -0,0 +1,23 @@
+import * as React from "react";
+import * as SliderPrimitives from "@radix-ui/react-slider";
+import { cn } from "~/utils";
+
+const SliderTrack = () => (
+    <SliderPrimitives.Track
+        className={cn(
+            "wby-relative wby-h-xxs wby-w-full wby-grow wby-overflow-hidden wby-rounded-full",
+            "wby-bg-neutral-strong",
+            "data-[disabled]:wby-bg-neutral-muted"
+        )}
+    >
+        <SliderPrimitives.Range
+            className={cn([
+                "wby-absolute wby-h-full",
+                "wby-bg-primary-default",
+                "data-[disabled]:wby-bg-primary-disabled"
+            ])}
+        />
+    </SliderPrimitives.Track>
+);
+
+export { SliderTrack };
diff --git a/packages/admin-ui/src/Slider/primitives/components/index.ts b/packages/admin-ui/src/Slider/primitives/components/index.ts
new file mode 100644
index 00000000000..5d7d2a96660
--- /dev/null
+++ b/packages/admin-ui/src/Slider/primitives/components/index.ts
@@ -0,0 +1,5 @@
+export * from "./SliderRoot";
+export * from "./SliderSideValue";
+export * from "./SliderThumb";
+export * from "./SliderTooltip";
+export * from "./SliderTrack";
diff --git a/packages/admin-ui/src/Slider/primitives/index.ts b/packages/admin-ui/src/Slider/primitives/index.ts
new file mode 100644
index 00000000000..f5d92bb6d7c
--- /dev/null
+++ b/packages/admin-ui/src/Slider/primitives/index.ts
@@ -0,0 +1,3 @@
+export * from "./SliderPrimitive";
+export * from "./useSlider";
+export * from "./components";
diff --git a/packages/admin-ui/src/Slider/primitives/presenters/SliderPresenter.test.ts b/packages/admin-ui/src/Slider/primitives/presenters/SliderPresenter.test.ts
new file mode 100644
index 00000000000..6776aa4430b
--- /dev/null
+++ b/packages/admin-ui/src/Slider/primitives/presenters/SliderPresenter.test.ts
@@ -0,0 +1,77 @@
+import { SliderPresenter } from "./SliderPresenter";
+
+describe("SliderPresenter", () => {
+    const onValueChange = jest.fn();
+    const presenter = new SliderPresenter();
+
+    it("should return the compatible `vm` based on params", () => {
+        // `value`
+        {
+            presenter.init({ onValueChange, value: 50 });
+            expect(presenter.vm.value).toEqual([50]);
+            expect(presenter.vm.textValue).toEqual("50");
+        }
+
+        // `min`
+        {
+            presenter.init({ onValueChange, min: 25 });
+            expect(presenter.vm.min).toEqual(25);
+            expect(presenter.vm.textValue).toEqual("25");
+        }
+
+        {
+            // default: no optional params
+            presenter.init({ onValueChange });
+            expect(presenter.vm.value).toEqual(undefined);
+            expect(presenter.vm.min).toEqual(0); // `min` should default to 0
+            expect(presenter.vm.textValue).toEqual("0");
+            expect(presenter.vm.showTooltip).toEqual(false);
+        }
+    });
+
+    it("should apply `transformValue` function if provided", () => {
+        const transformValue = (value: number) => `${value} units`;
+        const presenter = new SliderPresenter();
+        presenter.init({ onValueChange, value: 30, transformValue });
+        expect(presenter.vm.textValue).toEqual("30 units");
+    });
+
+    it("should fall back to `value` as a string if `transformValue` is undefined", () => {
+        const presenter = new SliderPresenter();
+        presenter.init({ onValueChange, value: 45 });
+        expect(presenter.vm.textValue).toEqual("45");
+    });
+
+    it("should call `onValueChange` callback when `changeValue` is called", () => {
+        const presenter = new SliderPresenter();
+        presenter.init({ onValueChange, value: 20 });
+        presenter.changeValue([40]);
+        expect(onValueChange).toHaveBeenCalledWith(40);
+    });
+
+    it("should call `onValueCommit` callback when `commitValue` is called", () => {
+        const onValueCommit = jest.fn();
+        const presenter = new SliderPresenter();
+        presenter.init({ onValueChange, value: 20, onValueCommit });
+        presenter.commitValue([40]);
+        expect(onValueCommit).toHaveBeenCalledWith(40);
+    });
+
+    it("should handle negative values correctly", () => {
+        const presenter = new SliderPresenter();
+        presenter.init({ onValueChange, value: -10 });
+        expect(presenter.vm.value).toEqual([-10]);
+        expect(presenter.vm.textValue).toEqual("-10");
+    });
+
+    it("should toggle `showTooltip` based on actions", () => {
+        const presenter = new SliderPresenter();
+        presenter.init({ onValueChange, showTooltip: true });
+
+        presenter.changeValue([30]);
+        expect(presenter.vm.showTooltip).toBeTruthy();
+
+        presenter.commitValue([30]);
+        expect(presenter.vm.showTooltip).toBeFalsy();
+    });
+});
diff --git a/packages/admin-ui/src/Slider/primitives/presenters/SliderPresenter.ts b/packages/admin-ui/src/Slider/primitives/presenters/SliderPresenter.ts
new file mode 100644
index 00000000000..ab882f11a76
--- /dev/null
+++ b/packages/admin-ui/src/Slider/primitives/presenters/SliderPresenter.ts
@@ -0,0 +1,66 @@
+import { makeAutoObservable } from "mobx";
+import { SliderPrimitiveVm } from "../SliderPrimitive";
+
+interface SliderPresenterParams {
+    min?: number;
+    onValueChange: (value: number) => void;
+    onValueCommit?: (value: number) => void;
+    showTooltip?: boolean;
+    transformValue?: (value: number) => string;
+    value?: number;
+}
+
+interface ISliderPresenter {
+    get vm(): SliderPrimitiveVm;
+    init: (params: SliderPresenterParams) => void;
+    changeValue: (values: number[]) => void;
+    commitValue: (values: number[]) => void;
+}
+
+class SliderPresenter implements ISliderPresenter {
+    private params?: SliderPresenterParams = undefined;
+    private showTooltip = false;
+
+    constructor() {
+        makeAutoObservable(this);
+    }
+
+    init(params: SliderPresenterParams) {
+        this.params = params;
+    }
+
+    get vm() {
+        return {
+            value: this.value,
+            min: this.min,
+            textValue: this.transformToLabelValue(this.value?.[0] || this.min),
+            showTooltip: this.showTooltip
+        };
+    }
+
+    public changeValue = (values: number[]) => {
+        const [newValue] = values;
+        this.showTooltip = !!this.params?.showTooltip;
+        this.params?.onValueChange(newValue);
+    };
+
+    public commitValue = (values: number[]) => {
+        const [newValue] = values;
+        this.showTooltip = false;
+        this.params?.onValueCommit?.(newValue);
+    };
+
+    private get value() {
+        return this.params?.value !== undefined ? [this.params.value] : undefined;
+    }
+
+    private get min() {
+        return this.params?.min ?? 0;
+    }
+
+    private transformToLabelValue(value: number) {
+        return this.params?.transformValue ? this.params.transformValue(value) : String(value);
+    }
+}
+
+export { SliderPresenter, type ISliderPresenter, type SliderPresenterParams };
diff --git a/packages/admin-ui/src/Slider/primitives/presenters/index.ts b/packages/admin-ui/src/Slider/primitives/presenters/index.ts
new file mode 100644
index 00000000000..14d6f82b6db
--- /dev/null
+++ b/packages/admin-ui/src/Slider/primitives/presenters/index.ts
@@ -0,0 +1 @@
+export * from "./SliderPresenter";
diff --git a/packages/admin-ui/src/Slider/primitives/useSlider.ts b/packages/admin-ui/src/Slider/primitives/useSlider.ts
new file mode 100644
index 00000000000..6383a0cf2cc
--- /dev/null
+++ b/packages/admin-ui/src/Slider/primitives/useSlider.ts
@@ -0,0 +1,45 @@
+import { useEffect, useMemo, useState } from "react";
+import { autorun } from "mobx";
+import { SliderPrimitiveProps } from "./SliderPrimitive";
+import { SliderPresenter, SliderPresenterParams } from "./presenters/SliderPresenter";
+
+export const useSlider = (props: SliderPrimitiveProps) => {
+    const params: SliderPresenterParams = useMemo(
+        () => ({
+            min: props.min,
+            onValueChange: props.onValueChange,
+            onValueCommit: props.onValueCommit,
+            showTooltip: props.showTooltip,
+            transformValue: props.transformValue,
+            value: props.value
+        }),
+        [
+            props.min,
+            props.onValueChange,
+            props.onValueCommit,
+            props.showTooltip,
+            props.transformValue,
+            props.value
+        ]
+    );
+
+    const presenter = useMemo(() => {
+        const presenter = new SliderPresenter();
+        presenter.init(params);
+        return presenter;
+    }, []);
+
+    const [vm, setVm] = useState(presenter.vm);
+
+    useEffect(() => {
+        presenter.init(params);
+    }, [params]);
+
+    useEffect(() => {
+        return autorun(() => {
+            setVm(presenter.vm);
+        });
+    }, [presenter]);
+
+    return { vm, changeValue: presenter.changeValue, commitValue: presenter.commitValue };
+};
diff --git a/packages/admin-ui/src/Switch/Switch.mdx b/packages/admin-ui/src/Switch/Switch.mdx
new file mode 100644
index 00000000000..0481dc1bd8e
--- /dev/null
+++ b/packages/admin-ui/src/Switch/Switch.mdx
@@ -0,0 +1,98 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+
+import * as SwitchStories from './Switch.stories';
+
+<Meta of={SwitchStories} />
+
+# Switch
+
+The Switch component is a user interface control that allows users to toggle between two states: on and off. It provides a visual representation of a setting that can be enabled or disabled, similar to a physical switch.
+
+## Usage
+
+<Canvas of={SwitchStories.Documentation} source={ { code: `
+import React, { useState } from "react";
+import { Switch } from "@webiny/admin-ui";
+
+const SwitchExample = () => {
+    const [isChecked, setIsChecked] = useState(false);
+    const [validation, setValidation] = useState({ isValid: true, message: "" });
+
+    const handleChange = (checked: boolean) => {
+        setIsChecked(checked);
+
+        if (!checked && true) { // true represents required field
+            setValidation({ isValid: false, message: "This field is required" });
+        } else {
+            setValidation({ isValid: true, message: "" });
+        }
+    };
+
+    return (
+        <div>
+            <Switch
+                label="Enable feature"
+                description="Enabling this feature will activate additional functionality."
+                note="Note: This setting can be changed at any time."
+                checked={isChecked}
+                required={true}
+                onChange={handleChange}
+                validation={validation}
+            />
+        </div>
+    );
+};
+
+export default SwitchExample;
+
+` } }
+        additionalActions={[
+            {
+                title: 'Open in GitHub',
+                onClick: () => {
+                    window.open(
+                        'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Switch/Switch.tsx',
+                        '_blank'
+                    );
+                },
+            }
+        ]}
+/>
+
+<Controls of={SwitchStories.Documentation} exclude={"onChange"}/>
+
+```tsx
+import React, { useState } from "react";
+import { Switch } from "@webiny/admin-ui";
+
+const SwitchExample = () => {
+    const [isChecked, setIsChecked] = useState(false);
+    const [validation, setValidation] = useState({ isValid: true, message: "" });
+
+    const handleChange = (checked: boolean) => {
+        setIsChecked(checked);
+
+        if (!checked && true) { // true represents required field
+            setValidation({ isValid: false, message: "This field is required" });
+        } else {
+            setValidation({ isValid: true, message: "" });
+        }
+    };
+
+    return (
+        <div>
+            <Switch
+                label="Enable feature"
+                description="Enabling this feature will activate additional functionality."
+                note="Note: This setting can be changed at any time."
+                checked={isChecked}
+                required={true}
+                onChange={handleChange}
+                validation={validation}
+            />
+        </div>
+    );
+};
+
+export default SwitchExample;
+```
\ No newline at end of file
diff --git a/packages/admin-ui/src/Switch/Switch.stories.tsx b/packages/admin-ui/src/Switch/Switch.stories.tsx
new file mode 100644
index 00000000000..f8a785fb2d7
--- /dev/null
+++ b/packages/admin-ui/src/Switch/Switch.stories.tsx
@@ -0,0 +1,176 @@
+import React, { useState, useEffect } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Switch } from "~/Switch";
+import { Tooltip } from "~/Tooltip";
+
+const meta: Meta<typeof Switch> = {
+    title: "Components/Form/Switch",
+    component: Switch,
+    parameters: {
+        layout: "padded"
+    },
+    argTypes: {
+        disabled: {
+            control: "boolean",
+            defaultValue: false
+        }
+    },
+    decorators: [
+        Story => (
+            <Tooltip.Provider>
+                <Story />
+            </Tooltip.Provider>
+        )
+    ],
+    render: args => {
+        const [checked, setChecked] = useState(args.checked);
+        return <Switch {...args} checked={checked} onChange={value => setChecked(value)} />;
+    }
+};
+
+export default meta;
+type Story = StoryObj<typeof Switch>;
+
+export const Default: Story = {
+    args: {
+        label: "Any field label"
+    }
+};
+
+export const WithLabelRequired: Story = {
+    args: {
+        label: "Any field label",
+        required: true
+    }
+};
+
+export const WithDescription: Story = {
+    args: {
+        ...Default.args,
+        description: "Provide the required information for processing your request."
+    }
+};
+
+export const WithNotes: Story = {
+    args: {
+        ...Default.args,
+        note: "Note: Ensure your selection or input is accurate before proceeding."
+    }
+};
+
+export const WithErrors: Story = {
+    args: {
+        ...Default.args,
+        validation: {
+            isValid: false,
+            message: "This field is required."
+        }
+    }
+};
+
+export const Disabled: Story = {
+    args: {
+        ...Default.args,
+        disabled: true
+    }
+};
+
+export const FullExample: Story = {
+    args: {
+        ...Default.args,
+        label: "Any field label",
+        required: true,
+        description: "Provide the required information for processing your request.",
+        note: "Note: Ensure your selection or input is accurate before proceeding.",
+        validation: {
+            isValid: false,
+            message: "This field is required."
+        }
+    }
+};
+
+export const Documentation: Story = {
+    render: args => {
+        const [checked, setChecked] = useState(args.checked || false);
+        const [validation, setValidation] = useState({ isValid: true, message: "" });
+
+        // Update checked state when args.checked changes
+        useEffect(() => {
+            setChecked(args.checked || false);
+        }, [args.checked]);
+
+        const handleChange = (isChecked: boolean) => {
+            setChecked(isChecked);
+
+            // Simple required validation
+            if (args.required && !isChecked) {
+                setValidation({ isValid: false, message: "This field is required" });
+            } else {
+                setValidation({ isValid: true, message: "" });
+            }
+        };
+
+        // Validate on required change
+        useEffect(() => {
+            if (args.required && !checked) {
+                setValidation({ isValid: false, message: "This field is required" });
+            } else {
+                setValidation({ isValid: true, message: "" });
+            }
+        }, [args.required, checked]);
+
+        return (
+            <Switch
+                {...args}
+                checked={checked}
+                onChange={handleChange}
+                validation={validation}
+                required={args.required}
+            />
+        );
+    },
+    args: {
+        label: "Enable feature",
+        checked: false,
+        disabled: false,
+        required: true,
+        description: "Enabling this feature will activate additional functionality.",
+        note: "Note: This setting can be changed at any time.",
+        validation: undefined
+    },
+    argTypes: {
+        label: {
+            description: "Label text for the switch",
+            control: "text"
+        },
+        checked: {
+            description: "Determines if the switch is checked",
+            control: "boolean"
+        },
+        disabled: {
+            description: "Disables the switch when set to true",
+            control: "boolean"
+        },
+        required: {
+            description: "Makes the switch required when set to true",
+            control: "boolean"
+        },
+        description: {
+            description: "Additional description text below the switch",
+            control: "text"
+        },
+        note: {
+            description: "Additional note text below the switch",
+            control: "text"
+        },
+        validation: {
+            description:
+                "Object containing validation state and message. Please refer to the example code for details on usage.",
+            control: "none"
+        },
+        onChange: {
+            description: "Function called when the switch state changes",
+            control: "none"
+        }
+    }
+};
diff --git a/packages/admin-ui/src/Switch/Switch.tsx b/packages/admin-ui/src/Switch/Switch.tsx
new file mode 100644
index 00000000000..1e41e97b015
--- /dev/null
+++ b/packages/admin-ui/src/Switch/Switch.tsx
@@ -0,0 +1,27 @@
+import React, { useMemo } from "react";
+import { makeDecoratable } from "~/utils";
+import { SwitchPrimitive, SwitchPrimitiveProps } from "./primitives";
+import { FormComponentErrorMessage, FormComponentNote, FormComponentProps } from "~/FormComponent";
+
+type SwitchProps = SwitchPrimitiveProps & FormComponentProps;
+
+const DecoratableSwitch = ({ note, validation, ...props }: SwitchProps) => {
+    const { isValid: validationIsValid, message: validationMessage } = validation || {};
+    const invalid = useMemo(() => validationIsValid === false, [validationIsValid]);
+
+    return (
+        <div className={"wby-w-full"}>
+            <SwitchPrimitive {...props} disabled={props.disabled} />
+            <FormComponentErrorMessage
+                text={validationMessage}
+                invalid={invalid}
+                disabled={props.disabled}
+            />
+            <FormComponentNote text={note} disabled={props.disabled} />
+        </div>
+    );
+};
+
+const Switch = makeDecoratable("Switch", DecoratableSwitch);
+
+export { Switch };
diff --git a/packages/admin-ui/src/Switch/domains/SwitchItem.ts b/packages/admin-ui/src/Switch/domains/SwitchItem.ts
new file mode 100644
index 00000000000..fba82ec09bb
--- /dev/null
+++ b/packages/admin-ui/src/Switch/domains/SwitchItem.ts
@@ -0,0 +1,54 @@
+import { SwitchItemDto } from "./SwitchItemDto";
+import { generateId } from "~/utils";
+
+export class SwitchItem {
+    private readonly _id: string;
+    private readonly _label: any;
+    private readonly _value: string | number;
+    private readonly _checked: boolean;
+    private readonly _disabled: boolean;
+
+    protected constructor(data: {
+        id: string;
+        label: any;
+        value: any;
+        checked: boolean;
+        disabled: boolean;
+    }) {
+        this._id = data.id;
+        this._label = data.label;
+        this._value = data.value;
+        this._checked = data.checked;
+        this._disabled = data.disabled;
+    }
+
+    static create(data: SwitchItemDto): SwitchItem {
+        return new SwitchItem({
+            id: generateId(data.id),
+            label: data.label,
+            value: data.value,
+            checked: data.checked ?? Boolean(data.value),
+            disabled: data.disabled ?? false
+        });
+    }
+
+    get id() {
+        return this._id;
+    }
+
+    get label() {
+        return this._label;
+    }
+
+    get value() {
+        return this._value;
+    }
+
+    get checked() {
+        return this._checked;
+    }
+
+    get disabled() {
+        return this._disabled;
+    }
+}
diff --git a/packages/admin-ui/src/Switch/domains/SwitchItemDto.ts b/packages/admin-ui/src/Switch/domains/SwitchItemDto.ts
new file mode 100644
index 00000000000..2099c627788
--- /dev/null
+++ b/packages/admin-ui/src/Switch/domains/SwitchItemDto.ts
@@ -0,0 +1,9 @@
+import React from "react";
+
+export interface SwitchItemDto {
+    id?: string;
+    label: React.ReactNode;
+    value?: number | string;
+    checked?: boolean;
+    disabled?: boolean;
+}
diff --git a/packages/admin-ui/src/Switch/domains/SwitchItemFormatted.ts b/packages/admin-ui/src/Switch/domains/SwitchItemFormatted.ts
new file mode 100644
index 00000000000..ae5e778692a
--- /dev/null
+++ b/packages/admin-ui/src/Switch/domains/SwitchItemFormatted.ts
@@ -0,0 +1,9 @@
+import React from "react";
+
+export interface SwitchItemFormatted {
+    id: string;
+    label: string | React.ReactNode;
+    value: string | number;
+    checked: boolean;
+    disabled: boolean;
+}
diff --git a/packages/admin-ui/src/Switch/domains/SwitchItemMapper.ts b/packages/admin-ui/src/Switch/domains/SwitchItemMapper.ts
new file mode 100644
index 00000000000..e7dc84e4534
--- /dev/null
+++ b/packages/admin-ui/src/Switch/domains/SwitchItemMapper.ts
@@ -0,0 +1,14 @@
+import { SwitchItemFormatted } from "./SwitchItemFormatted";
+import { SwitchItem } from "./SwitchItem";
+
+export class SwitchItemMapper {
+    static toFormatted(item: SwitchItem): SwitchItemFormatted {
+        return {
+            id: item.id,
+            label: item.label,
+            value: item.value,
+            checked: item.checked,
+            disabled: item.disabled
+        };
+    }
+}
diff --git a/packages/admin-ui/src/Switch/domains/index.ts b/packages/admin-ui/src/Switch/domains/index.ts
new file mode 100644
index 00000000000..29520347126
--- /dev/null
+++ b/packages/admin-ui/src/Switch/domains/index.ts
@@ -0,0 +1,4 @@
+export * from "./SwitchItem";
+export * from "./SwitchItemDto";
+export * from "./SwitchItemFormatted";
+export * from "./SwitchItemMapper";
diff --git a/packages/admin-ui/src/Switch/index.ts b/packages/admin-ui/src/Switch/index.ts
new file mode 100644
index 00000000000..c62a6bd9395
--- /dev/null
+++ b/packages/admin-ui/src/Switch/index.ts
@@ -0,0 +1,2 @@
+export * from "./Switch";
+export * from "./primitives";
diff --git a/packages/admin-ui/src/Switch/primitives/SwitchPrimitive.stories.tsx b/packages/admin-ui/src/Switch/primitives/SwitchPrimitive.stories.tsx
new file mode 100644
index 00000000000..d6aa3aa7198
--- /dev/null
+++ b/packages/admin-ui/src/Switch/primitives/SwitchPrimitive.stories.tsx
@@ -0,0 +1,67 @@
+import React, { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { SwitchPrimitive } from "./SwitchPrimitive";
+
+const meta: Meta<typeof SwitchPrimitive> = {
+    title: "Components/Form Primitives/Switch",
+    component: SwitchPrimitive,
+    parameters: {
+        layout: "padded"
+    },
+    render: args => {
+        const [checked, setChecked] = useState(args.checked);
+        return (
+            <SwitchPrimitive {...args} checked={checked} onChange={value => setChecked(value)} />
+        );
+    }
+};
+
+export default meta;
+type Story = StoryObj<typeof SwitchPrimitive>;
+
+export const Default: Story = {
+    args: {
+        label: "Label"
+    }
+};
+
+export const WithLeadingLabel: Story = {
+    args: {
+        label: "Leading label",
+        labelPosition: "start"
+    }
+};
+
+export const WithLongLeadingLabel: Story = {
+    args: {
+        label: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eu aliquam lacus. Morbi eleifend, eros et vestibulum lobortis, mi elit scelerisque neque, sit amet dictum orci sem ac ante. In hac habitasse platea dictumst. Pellentesque molestie nisl tortor, eu dictum velit mollis vitae. Maecenas nec risus sit amet ante efficitur venenatis id eget eros. Aenean mollis vel dolor vitae vestibulum. Integer consectetur id diam eget iaculis. Praesent egestas ullamcorper libero vel eleifend.",
+        labelPosition: "start"
+    }
+};
+
+export const WithTrailingLabel: Story = {
+    args: {
+        label: "Trailing label",
+        labelPosition: "end"
+    }
+};
+
+export const WithLongTrailingLabel: Story = {
+    args: {
+        label: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eu aliquam lacus. Morbi eleifend, eros et vestibulum lobortis, mi elit scelerisque neque, sit amet dictum orci sem ac ante. In hac habitasse platea dictumst. Pellentesque molestie nisl tortor, eu dictum velit mollis vitae. Maecenas nec risus sit amet ante efficitur venenatis id eget eros. Aenean mollis vel dolor vitae vestibulum. Integer consectetur id diam eget iaculis. Praesent egestas ullamcorper libero vel eleifend.",
+        labelPosition: "end"
+    }
+};
+
+export const Checked: Story = {
+    args: {
+        checked: true
+    }
+};
+
+export const Disabled: Story = {
+    args: {
+        label: "Label",
+        disabled: true
+    }
+};
diff --git a/packages/admin-ui/src/Switch/primitives/SwitchPrimitive.tsx b/packages/admin-ui/src/Switch/primitives/SwitchPrimitive.tsx
new file mode 100644
index 00000000000..e8a3d4f6003
--- /dev/null
+++ b/packages/admin-ui/src/Switch/primitives/SwitchPrimitive.tsx
@@ -0,0 +1,101 @@
+import * as React from "react";
+import * as SwitchPrimitives from "@radix-ui/react-switch";
+import { cn, cva, makeDecoratable, type VariantProps } from "~/utils";
+import { Label } from "~/Label";
+import { useSwitch } from "./useSwitch";
+import { SwitchItemDto, SwitchItemFormatted } from "../domains";
+
+/**
+ * Switch Renderer
+ */
+
+const switchVariants = cva("wby-inline-flex wby-items-start wby-space-x-sm", {
+    variants: {
+        labelPosition: {
+            start: "",
+            end: "wby-flex-row-reverse wby-space-x-sm-extra wby-space-x-reverse"
+        }
+    },
+    defaultVariants: {
+        labelPosition: "start"
+    }
+});
+
+type SwitchPrimitiveProps = Omit<
+    SwitchPrimitives.SwitchProps,
+    "defaultChecked" | "onCheckedChange" | "onChange"
+> &
+    VariantProps<typeof switchVariants> &
+    SwitchItemDto & {
+        onChange?: (checked: boolean) => void;
+    };
+
+type SwitchPrimitivVm = {
+    item?: SwitchItemFormatted;
+};
+
+type SwitchRendererProps = Omit<SwitchPrimitiveProps, "onCheckedChange"> &
+    NonNullable<SwitchPrimitivVm["item"]> & {
+        changeChecked: (checked: boolean) => void;
+        description?: React.ReactNode;
+    };
+
+const SwitchRenderer = ({
+    id,
+    label,
+    changeChecked,
+    description,
+    className,
+    labelPosition,
+    disabled,
+    required,
+    checked
+}: SwitchRendererProps) => {
+    return (
+        <div className={cn(switchVariants({ labelPosition }), className)}>
+            <Label
+                id={id}
+                text={label}
+                disabled={disabled}
+                required={required}
+                hint={description}
+                weight={"light"}
+                className={"wby-text-md"}
+            />
+            <SwitchPrimitives.Root
+                id={id}
+                checked={checked}
+                className={cn([
+                    "wby-peer wby-inline-flex wby-h-md wby-w-[26px] wby-mt-xxs wby-shrink-0 wby-cursor-pointer wby-items-center wby-rounded-xxl wby-border-sm wby-transition-colors",
+                    "wby-border-transparent data-[state=checked]:wby-bg-secondary-default data-[state=unchecked]:wby-bg-neutral-strong",
+                    "focus-visible:wby-outline-none focus-visible:wby-border-success-default focus-visible:wby-ring-lg focus-visible:wby-ring-primary-dimmed",
+                    "disabled:wby-cursor-not-allowed disabled:wby-bg-neutral-muted disabled:data-[state=checked]:wby-bg-neutral-muted"
+                ])}
+                disabled={disabled}
+                onCheckedChange={changeChecked}
+            >
+                <SwitchPrimitives.Thumb
+                    className={cn(
+                        "wby-pointer-events-none wby-block wby-h-sm-plus wby-w-sm-plus wby-rounded-xxl wby-bg-neutral-base wby-shadow-lg wby-ring-0 wby-transition-transform data-[state=checked]:wby-translate-x-sm-extra data-[state=unchecked]:wby-translate-x-xxs"
+                    )}
+                />
+            </SwitchPrimitives.Root>
+        </div>
+    );
+};
+
+/**
+ * Switch
+ */
+const DecoratableSwitchPrimitive = (props: SwitchPrimitiveProps) => {
+    const { vm, changeChecked } = useSwitch(props);
+
+    if (!vm.item) {
+        return null;
+    }
+
+    return <SwitchRenderer {...props} {...vm.item} changeChecked={changeChecked} />;
+};
+const SwitchPrimitive = makeDecoratable("SwitchPrimitive", DecoratableSwitchPrimitive);
+
+export { SwitchPrimitive, type SwitchPrimitiveProps, type SwitchPrimitivVm };
diff --git a/packages/admin-ui/src/Switch/primitives/index.ts b/packages/admin-ui/src/Switch/primitives/index.ts
new file mode 100644
index 00000000000..5b092b783a9
--- /dev/null
+++ b/packages/admin-ui/src/Switch/primitives/index.ts
@@ -0,0 +1 @@
+export * from "./SwitchPrimitive";
diff --git a/packages/admin-ui/src/Switch/primitives/presenters/SwitchPresenter.test.ts b/packages/admin-ui/src/Switch/primitives/presenters/SwitchPresenter.test.ts
new file mode 100644
index 00000000000..c5ad2dd26ae
--- /dev/null
+++ b/packages/admin-ui/src/Switch/primitives/presenters/SwitchPresenter.test.ts
@@ -0,0 +1,52 @@
+import { SwitchPresenter } from "./SwitchPresenter";
+
+describe("SwitchPresenter", () => {
+    const onChange = jest.fn();
+
+    it("should return the compatible `switchVm` based on props", () => {
+        const presenter = new SwitchPresenter();
+
+        // `label`
+        {
+            presenter.init({ onChange, label: "Label" });
+            expect(presenter.vm.item?.label).toEqual("Label");
+        }
+
+        // `checked`
+        {
+            presenter.init({ onChange, label: "Label", checked: true });
+            expect(presenter.vm.item?.checked).toEqual(true);
+        }
+
+        // `value`
+        {
+            presenter.init({ onChange, label: "Label", value: "any" });
+            expect(presenter.vm.item?.value).toEqual("any");
+            expect(presenter.vm.item?.checked).toEqual(true);
+        }
+
+        // `disabled`
+        {
+            presenter.init({ onChange, label: "Label", disabled: true });
+            expect(presenter.vm.item?.disabled).toEqual(true);
+        }
+
+        // default: only mandatory props
+        {
+            presenter.init({ onChange, label: "Label" });
+            expect(presenter.vm.item).toEqual({
+                id: expect.any(String),
+                label: "Label",
+                checked: false,
+                disabled: false
+            });
+        }
+    });
+
+    it("should call `onChange` callback when `changeValue` is called", () => {
+        const presenter = new SwitchPresenter();
+        presenter.init({ onChange, label: "Label" });
+        presenter.changeChecked(true);
+        expect(onChange).toHaveBeenCalledWith(true);
+    });
+});
diff --git a/packages/admin-ui/src/Switch/primitives/presenters/SwitchPresenter.ts b/packages/admin-ui/src/Switch/primitives/presenters/SwitchPresenter.ts
new file mode 100644
index 00000000000..5a4e4509ec8
--- /dev/null
+++ b/packages/admin-ui/src/Switch/primitives/presenters/SwitchPresenter.ts
@@ -0,0 +1,45 @@
+import { makeAutoObservable } from "mobx";
+import { SwitchPrimitivVm } from "../SwitchPrimitive";
+import { SwitchItem, SwitchItemDto, SwitchItemMapper } from "../../domains";
+
+type SwitchPresenterParams = SwitchItemDto & {
+    onChange?: (checked: boolean) => void;
+};
+
+interface ISwitchPresenter<TParams extends SwitchPresenterParams = SwitchPresenterParams> {
+    vm: SwitchPrimitivVm;
+    init: (params: TParams) => void;
+    changeChecked: (checked: boolean) => void;
+}
+
+class SwitchPresenter implements ISwitchPresenter {
+    private params?: SwitchPresenterParams = undefined;
+    private item?: SwitchItem = undefined;
+
+    constructor() {
+        makeAutoObservable(this);
+    }
+
+    public init = (params: SwitchPresenterParams) => {
+        this.params = params;
+        this.item = SwitchItem.create({
+            id: params.id,
+            label: params.label,
+            value: params.value,
+            checked: params.checked,
+            disabled: params.disabled
+        });
+    };
+
+    get vm() {
+        return {
+            item: this.item ? SwitchItemMapper.toFormatted(this.item) : undefined
+        };
+    }
+
+    public changeChecked = (checked: boolean) => {
+        this.params?.onChange?.(checked);
+    };
+}
+
+export { SwitchPresenter, type SwitchPresenterParams, type ISwitchPresenter };
diff --git a/packages/admin-ui/src/Switch/primitives/presenters/index.ts b/packages/admin-ui/src/Switch/primitives/presenters/index.ts
new file mode 100644
index 00000000000..96b4910221f
--- /dev/null
+++ b/packages/admin-ui/src/Switch/primitives/presenters/index.ts
@@ -0,0 +1 @@
+export * from "./SwitchPresenter";
diff --git a/packages/admin-ui/src/Switch/primitives/useSwitch.ts b/packages/admin-ui/src/Switch/primitives/useSwitch.ts
new file mode 100644
index 00000000000..62e1f972afe
--- /dev/null
+++ b/packages/admin-ui/src/Switch/primitives/useSwitch.ts
@@ -0,0 +1,38 @@
+import { useEffect, useMemo, useState } from "react";
+import { autorun } from "mobx";
+import { SwitchPrimitiveProps } from "./SwitchPrimitive";
+import { SwitchPresenter, SwitchPresenterParams } from "./presenters/SwitchPresenter";
+
+export const useSwitch = (props: SwitchPrimitiveProps) => {
+    const params: SwitchPresenterParams = useMemo(
+        () => ({
+            id: props.id,
+            label: props.label,
+            value: props.value,
+            checked: props.checked,
+            disabled: props.disabled,
+            onChange: props.onChange
+        }),
+        [props.id, props.label, props.value, props.checked, props.disabled, props.onChange]
+    );
+
+    const presenter = useMemo(() => {
+        const presenter = new SwitchPresenter();
+        presenter.init(params);
+        return presenter;
+    }, []);
+
+    const [vm, setVm] = useState(presenter.vm);
+
+    useEffect(() => {
+        presenter.init(params);
+    }, [params]);
+
+    useEffect(() => {
+        return autorun(() => {
+            setVm(presenter.vm);
+        });
+    }, [presenter]);
+
+    return { vm, changeChecked: presenter.changeChecked };
+};
diff --git a/packages/admin-ui/src/Table/Table.tsx b/packages/admin-ui/src/Table/Table.tsx
new file mode 100644
index 00000000000..b0e6cb6ab92
--- /dev/null
+++ b/packages/admin-ui/src/Table/Table.tsx
@@ -0,0 +1,55 @@
+import * as React from "react";
+import { cn, cva, type VariantProps, withStaticProps } from "~/utils";
+import {
+    Body,
+    Caption,
+    Cell,
+    Direction,
+    Footer,
+    Head,
+    Header,
+    Resizer,
+    Row
+} from "~/Table/components";
+
+const tableWrapperVariants = cva("wby-relative wby-w-full wby-overflow-auto", {
+    variants: {
+        sticky: {
+            true: "wby-overflow-clip"
+        }
+    }
+});
+
+const tableVariants = cva("wby-w-full wby-caption-bottom wby-text-sm wby-bg-white", {
+    variants: {
+        bordered: {
+            true: "wby-border-neutral-dimmed wby-border-solid wby-border-sm"
+        }
+    }
+});
+
+interface TableProps
+    extends React.HTMLAttributes<HTMLTableElement>,
+        VariantProps<typeof tableVariants> {
+    sticky?: boolean;
+}
+
+const BaseTable = ({ className, bordered, sticky, ...props }: TableProps) => (
+    <div className={cn(tableWrapperVariants({ sticky }))}>
+        <table className={cn(tableVariants({ bordered }), className)} {...props} />
+    </div>
+);
+
+const Table = withStaticProps(BaseTable, {
+    Body,
+    Caption,
+    Cell,
+    Direction,
+    Footer,
+    Head,
+    Header,
+    Resizer,
+    Row
+});
+
+export { Table, type TableProps };
diff --git a/packages/admin-ui/src/Table/components/Body.tsx b/packages/admin-ui/src/Table/components/Body.tsx
new file mode 100644
index 00000000000..4917f565ff9
--- /dev/null
+++ b/packages/admin-ui/src/Table/components/Body.tsx
@@ -0,0 +1,8 @@
+import * as React from "react";
+import { cn } from "~/utils";
+
+const Body = ({ className, ...props }: React.HTMLAttributes<HTMLTableSectionElement>) => (
+    <tbody className={cn("[&_tr:last-child]:wby-border-none", className)} {...props} />
+);
+
+export { Body };
diff --git a/packages/admin-ui/src/Table/components/Caption.tsx b/packages/admin-ui/src/Table/components/Caption.tsx
new file mode 100644
index 00000000000..ae62ca622f3
--- /dev/null
+++ b/packages/admin-ui/src/Table/components/Caption.tsx
@@ -0,0 +1,11 @@
+import * as React from "react";
+import { cn } from "~/utils";
+
+const Caption = ({ className, ...props }: React.HTMLAttributes<HTMLTableCaptionElement>) => (
+    <caption
+        className={cn("wby-mt-4 wby-text-sm wby-text-muted-foreground", className)}
+        {...props}
+    />
+);
+
+export { Caption };
diff --git a/packages/admin-ui/src/Table/components/Cell.tsx b/packages/admin-ui/src/Table/components/Cell.tsx
new file mode 100644
index 00000000000..0123c9441b7
--- /dev/null
+++ b/packages/admin-ui/src/Table/components/Cell.tsx
@@ -0,0 +1,19 @@
+import * as React from "react";
+import { cn } from "~/utils";
+
+const Cell = ({ className, ...props }: React.TdHTMLAttributes<HTMLTableCellElement>) => (
+    <td
+        className={cn(
+            [
+                "wby-box-border wby-px-md wby-py-sm-extra wby-text-md wby-text-left wby-align-middle wby-text-neutral-primary",
+                "wby-overflow-hidden wby-whitespace-nowrap wby-truncate",
+                "[&:has([role=checkbox])]:wby-pl-lg",
+                "wby-text-0 wby-leading-none"
+            ],
+            className
+        )}
+        {...props}
+    />
+);
+
+export { Cell };
diff --git a/packages/admin-ui/src/Table/components/Direction.tsx b/packages/admin-ui/src/Table/components/Direction.tsx
new file mode 100644
index 00000000000..633afef8fd0
--- /dev/null
+++ b/packages/admin-ui/src/Table/components/Direction.tsx
@@ -0,0 +1,35 @@
+import React from "react";
+import { ReactComponent as ArrowDown } from "@webiny/icons/keyboard_arrow_up.svg";
+import { Icon } from "~/Icon";
+import { cn, cva, type VariantProps } from "~/utils";
+
+const directionVariants = cva("wby-inline", {
+    variants: {
+        direction: {
+            asc: "wby-rotate-0",
+            desc: "wby-rotate-180"
+        }
+    }
+});
+
+interface DirectionProps
+    extends React.HTMLAttributes<HTMLSpanElement>,
+        VariantProps<typeof directionVariants> {}
+
+const Direction = ({ className, direction }: DirectionProps) => {
+    if (!direction) {
+        return null;
+    }
+
+    return (
+        <Icon
+            className={cn(directionVariants({ direction }), className)}
+            size="sm"
+            icon={<ArrowDown />}
+            label={"Sort column"}
+            color={"neutral-strong"}
+        />
+    );
+};
+
+export { Direction, type DirectionProps };
diff --git a/packages/admin-ui/src/Table/components/Footer.tsx b/packages/admin-ui/src/Table/components/Footer.tsx
new file mode 100644
index 00000000000..9076957a3f3
--- /dev/null
+++ b/packages/admin-ui/src/Table/components/Footer.tsx
@@ -0,0 +1,14 @@
+import * as React from "react";
+import { cn } from "~/utils";
+
+const Footer = ({ className, ...props }: React.HTMLAttributes<HTMLTableSectionElement>) => (
+    <tfoot
+        className={cn(
+            "wby-border-t wby-bg-muted/50 wby-font-medium [&>tr]:last:wby-border-b-0",
+            className
+        )}
+        {...props}
+    />
+);
+
+export { Footer };
diff --git a/packages/admin-ui/src/Table/components/Head.tsx b/packages/admin-ui/src/Table/components/Head.tsx
new file mode 100644
index 00000000000..7698b6d7613
--- /dev/null
+++ b/packages/admin-ui/src/Table/components/Head.tsx
@@ -0,0 +1,22 @@
+import * as React from "react";
+import { cn } from "~/utils";
+
+const Head = ({ className, children, ...props }: React.ThHTMLAttributes<HTMLTableCellElement>) => (
+    <th
+        className={cn(
+            [
+                "wby-box-border wby-relative wby-px-md wby-py-sm wby-text-sm wby-text-left wby-align-middle wby-font-normal wby-text-neutral-strong wby-fill-neutral-xstrong",
+                "hover:wby-bg-neutral-subtle",
+                "wby-overflow-hidden wby-whitespace-nowrap wby-truncate",
+                "[&:has([role=checkbox])]:wby-pl-lg",
+                "wby-text-0 wby-leading-none"
+            ],
+            className
+        )}
+        {...props}
+    >
+        {children}
+    </th>
+);
+
+export { Head };
diff --git a/packages/admin-ui/src/Table/components/Header.tsx b/packages/admin-ui/src/Table/components/Header.tsx
new file mode 100644
index 00000000000..45886c22a58
--- /dev/null
+++ b/packages/admin-ui/src/Table/components/Header.tsx
@@ -0,0 +1,20 @@
+import * as React from "react";
+import { cn, cva, type VariantProps } from "~/utils";
+
+const headerVariants = cva("[&_tr]:hover:wby-bg-transparent", {
+    variants: {
+        sticky: {
+            true: "[&_tr]:wby-bg-white [&_tr]:hover:wby-bg-white wby-sticky wby-top-0"
+        }
+    }
+});
+
+interface HeaderProps
+    extends React.HTMLAttributes<HTMLTableSectionElement>,
+        VariantProps<typeof headerVariants> {}
+
+const Header = ({ className, sticky, ...props }: HeaderProps) => (
+    <thead className={cn(headerVariants({ sticky }), className)} {...props} />
+);
+
+export { Header, type HeaderProps };
diff --git a/packages/admin-ui/src/Table/components/Resizer.tsx b/packages/admin-ui/src/Table/components/Resizer.tsx
new file mode 100644
index 00000000000..c2e3ed497a7
--- /dev/null
+++ b/packages/admin-ui/src/Table/components/Resizer.tsx
@@ -0,0 +1,27 @@
+import React from "react";
+import { cn, cva, type VariantProps } from "~/utils";
+
+const resizerVariants = cva(
+    [
+        "wby-absolute wby-right-0 wby-top-0 wby-w-md wby-h-full wby-border-r-md wby-border-r-accent-default wby-cursor-col-resize wby-select-none wby-touch-none",
+        "wby-opacity-0 wby-bg-transparent",
+        "hover:wby-opacity-100"
+    ],
+    {
+        variants: {
+            isResizing: {
+                true: "wby-opacity-100"
+            }
+        }
+    }
+);
+
+interface ResizerProps
+    extends React.HTMLAttributes<HTMLDivElement>,
+        VariantProps<typeof resizerVariants> {}
+
+const Resizer = ({ className, isResizing, ...props }: ResizerProps) => (
+    <div className={cn(resizerVariants({ isResizing }), className)} {...props} />
+);
+
+export { Resizer, type ResizerProps };
diff --git a/packages/admin-ui/src/Table/components/Row.tsx b/packages/admin-ui/src/Table/components/Row.tsx
new file mode 100644
index 00000000000..14f30bb80f0
--- /dev/null
+++ b/packages/admin-ui/src/Table/components/Row.tsx
@@ -0,0 +1,23 @@
+import * as React from "react";
+import { cn, cva, type VariantProps } from "~/utils";
+
+const rowVariants = cva(
+    "wby-border-neutral-dimmed wby-border-solid wby-border-b-sm wby-transition-colors hover:wby-bg-neutral-subtle",
+    {
+        variants: {
+            selected: {
+                true: "wby-bg-neutral-light"
+            }
+        }
+    }
+);
+
+interface RowProps
+    extends React.HTMLAttributes<HTMLTableRowElement>,
+        VariantProps<typeof rowVariants> {}
+
+const Row = ({ className, selected, ...props }: RowProps) => (
+    <tr className={cn(rowVariants({ selected }), className)} {...props} />
+);
+
+export { Row, type RowProps };
diff --git a/packages/admin-ui/src/Table/components/index.ts b/packages/admin-ui/src/Table/components/index.ts
new file mode 100644
index 00000000000..96142386b44
--- /dev/null
+++ b/packages/admin-ui/src/Table/components/index.ts
@@ -0,0 +1,9 @@
+export * from "./Body";
+export * from "./Caption";
+export * from "./Cell";
+export * from "./Direction";
+export * from "./Footer";
+export * from "./Head";
+export * from "./Header";
+export * from "./Resizer";
+export * from "./Row";
diff --git a/packages/admin-ui/src/Table/index.ts b/packages/admin-ui/src/Table/index.ts
new file mode 100644
index 00000000000..e40efa4761d
--- /dev/null
+++ b/packages/admin-ui/src/Table/index.ts
@@ -0,0 +1 @@
+export * from "./Table";
diff --git a/packages/admin-ui/src/Tabs/Tabs.mdx b/packages/admin-ui/src/Tabs/Tabs.mdx
new file mode 100644
index 00000000000..24e9019d835
--- /dev/null
+++ b/packages/admin-ui/src/Tabs/Tabs.mdx
@@ -0,0 +1,495 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+
+import * as Tabs from './Tabs.stories';
+
+<Meta of={Tabs} />
+
+# Tabs
+
+A tab component organizes content into multiple sections, enabling users to seamlessly switch between views without page reloads, enhancing navigation and user experience.
+
+## Usage
+
+<Canvas of={Tabs.Documentation} source={ { code: `
+import React from "react";
+import { Tabs } from "@webiny/admin-ui";
+
+const TabsExample = () => {
+    return (
+        <Tabs
+            size="md"
+            spacing="lg"
+            separator={true}
+            tabs={[
+                <Tabs.Tab
+                    key="account"
+                    value="account"
+                    trigger="Account"
+                    content="Account settings and personal information"
+                />,
+                <Tabs.Tab
+                    key="security"
+                    value="security"
+                    trigger="Security"
+                    content="Security settings and password management"
+                />,
+                <Tabs.Tab
+                    key="preferences"
+                    value="preferences"
+                    trigger="Preferences"
+                    content="User interface preferences and customization"
+                />
+            ]}
+        />
+    );
+};
+
+export default TabsExample;
+
+` } }
+        additionalActions={[
+            {
+                title: 'Open in GitHub',
+                onClick: () => {
+                    window.open(
+                        'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Tabs/Tabs.tsx',
+                        '_blank'
+                    );
+                },
+            }
+        ]}
+/>
+
+<Controls of={Tabs.Documentation} />
+
+```tsx
+import React from "react";
+import { Tabs } from "@webiny/admin-ui";
+
+const TabsExample = () => {
+    return (
+        <Tabs
+            size="md"
+            spacing="lg"
+            separator={true}
+            tabs={[
+                <Tabs.Tab
+                    key="account"
+                    value="account"
+                    trigger="Account"
+                    content="Account settings and personal information"
+                />,
+                <Tabs.Tab
+                    key="security"
+                    value="security"
+                    trigger="Security"
+                    content="Security settings and password management"
+                />,
+                <Tabs.Tab
+                    key="preferences"
+                    value="preferences"
+                    trigger="Preferences"
+                    content="User interface preferences and customization"
+                />
+            ]}
+        />
+    );
+};
+
+export default TabsExample;
+```
+
+## Examples
+
+### Default
+
+<Canvas of={Tabs.Default} source={ { code: `
+import React from "react";
+import { Tabs } from "@webiny/admin-ui";
+
+const DefaultTabsExample = () => {
+    return (
+        <Tabs
+            tabs={[
+                <Tabs.Tab
+                    key="account"
+                    value="account"
+                    trigger="Account"
+                    content="Account content - Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                />,
+                <Tabs.Tab
+                    key="password"
+                    value="password"
+                    trigger="Password"
+                    content="Password content - Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                />
+            ]}
+        />
+    );
+};
+
+export default DefaultTabsExample;
+` } } />
+
+### Size Variants
+
+#### Small (SM)
+
+<Canvas of={Tabs.SizeSmall} source={ { code: `
+import React from "react";
+import { Tabs } from "@webiny/admin-ui";
+
+const SmallTabsExample = () => {
+    return (
+        <Tabs
+            size="sm"
+            tabs={[
+                <Tabs.Tab
+                    key="account"
+                    value="account"
+                    trigger="Account"
+                    content="Account content - Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                />,
+                <Tabs.Tab
+                    key="password"
+                    value="password"
+                    trigger="Password"
+                    content="Password content - Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                />
+            ]}
+        />
+    );
+};
+
+export default SmallTabsExample;
+` } } />
+
+#### Medium (MD)
+
+<Canvas of={Tabs.SizeMedium} source={ { code: `
+import React from "react";
+import { Tabs } from "@webiny/admin-ui";
+
+const MediumTabsExample = () => {
+    return (
+        <Tabs
+            size="md"
+            tabs={[
+                <Tabs.Tab
+                    key="account"
+                    value="account"
+                    trigger="Account"
+                    content="Account content - Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                />,
+                <Tabs.Tab
+                    key="password"
+                    value="password"
+                    trigger="Password"
+                    content="Password content - Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                />
+            ]}
+        />
+    );
+};
+
+export default MediumTabsExample;
+` } } />
+
+#### Large (LG)
+
+<Canvas of={Tabs.SizeLarge} source={ { code: `
+import React from "react";
+import { Tabs } from "@webiny/admin-ui";
+
+const LargeTabsExample = () => {
+    return (
+        <Tabs
+            size="lg"
+            tabs={[
+                <Tabs.Tab
+                    key="account"
+                    value="account"
+                    trigger="Account"
+                    content="Account content - Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                />,
+                <Tabs.Tab
+                    key="password"
+                    value="password"
+                    trigger="Password"
+                    content="Password content - Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                />
+            ]}
+        />
+    );
+};
+
+export default LargeTabsExample;
+` } } />
+
+#### Extra Large (XL)
+
+<Canvas of={Tabs.SizeExtraLarge} source={ { code: `
+import React from "react";
+import { Tabs } from "@webiny/admin-ui";
+
+const ExtraLargeTabsExample = () => {
+    return (
+        <Tabs
+            size="xl"
+            tabs={[
+                <Tabs.Tab
+                    key="account"
+                    value="account"
+                    trigger="Account"
+                    content="Account content - Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                />,
+                <Tabs.Tab
+                    key="password"
+                    value="password"
+                    trigger="Password"
+                    content="Password content - Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                />
+            ]}
+        />
+    );
+};
+
+export default ExtraLargeTabsExample;
+` } } />
+
+### Spacing Variants
+
+<Canvas of={Tabs.SpacingMedium} source={ { code: `
+import React from "react";
+import { Tabs } from "@webiny/admin-ui";
+
+const SpacingMediumExample = () => {
+    return (
+        <Tabs
+            spacing="md"
+            tabs={[
+                <Tabs.Tab
+                    key="account"
+                    value="account"
+                    trigger="Account"
+                    content="Account content - Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                />,
+                <Tabs.Tab
+                    key="password"
+                    value="password"
+                    trigger="Password"
+                    content="Password content - Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                />
+            ]}
+        />
+    );
+};
+
+export default SpacingMediumExample;
+` } } />
+
+### With Separator
+
+<Canvas of={Tabs.WithSeparator} source={ { code: `
+import React from "react";
+import { Tabs } from "@webiny/admin-ui";
+
+const WithSeparatorExample = () => {
+    return (
+        <Tabs
+            separator={true}
+            tabs={[
+                <Tabs.Tab
+                    key="account"
+                    value="account"
+                    trigger="Account"
+                    content="Account content - Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                />,
+                <Tabs.Tab
+                    key="password"
+                    value="password"
+                    trigger="Password"
+                    content="Password content - Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                />
+            ]}
+        />
+    );
+};
+
+export default WithSeparatorExample;
+` } } />
+
+### With Default Value
+
+<Canvas of={Tabs.WithDefaultValue} source={ { code: `
+import React from "react";
+import { Tabs } from "@webiny/admin-ui";
+
+const WithDefaultValueExample = () => {
+    return (
+        <Tabs
+            defaultValue="password"
+            tabs={[
+                <Tabs.Tab
+                    key="account"
+                    value="account"
+                    trigger="Account"
+                    content="Account content - Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                />,
+                <Tabs.Tab
+                    key="password"
+                    value="password"
+                    trigger="Password"
+                    content="Password content - Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                />
+            ]}
+        />
+    );
+};
+
+export default WithDefaultValueExample;
+` } } />
+
+### With Controlled Value
+
+<Canvas of={Tabs.WithControlledValue} source={ { code: `
+import React, { useState } from "react";
+import { Tabs } from "@webiny/admin-ui";
+
+const WithControlledValueExample = () => {
+    const [value, setValue] = useState("password");
+
+    return (
+        <Tabs
+            value={value}
+            onValueChange={setValue}
+            tabs={[
+                <Tabs.Tab
+                    key="account"
+                    value="account"
+                    trigger="Account"
+                    content="Account content - Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                />,
+                <Tabs.Tab
+                    key="password"
+                    value="password"
+                    trigger="Password"
+                    content="Password content - Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                />
+            ]}
+        />
+    );
+};
+
+export default WithControlledValueExample;
+` } } />
+
+### With Icons
+
+<Canvas of={Tabs.WithIcons} source={ { code: `
+import React from "react";
+import { Tabs } from "@webiny/admin-ui";
+import { ReactComponent as PersonIcon } from "@webiny/icons/person.svg";
+import { ReactComponent as LockIcon } from "@webiny/icons/lock.svg";
+
+const WithIconsExample = () => {
+    return (
+        <Tabs
+            tabs={[
+                <Tabs.Tab
+                    key="account"
+                    value="account"
+                    trigger="Account"
+                    icon={<PersonIcon />}
+                    content="Account content - Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                />,
+                <Tabs.Tab
+                    key="password"
+                    value="password"
+                    trigger="Password"
+                    icon={<LockIcon />}
+                    content="Password content - Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                />
+            ]}
+        />
+    );
+};
+
+export default WithIconsExample;
+` } } />
+
+### With Disabled Tab
+
+<Canvas of={Tabs.WithDisabledTab} source={ { code: `
+import React from "react";
+import { Tabs } from "@webiny/admin-ui";
+
+const WithDisabledTabExample = () => {
+    return (
+        <Tabs
+            tabs={[
+                <Tabs.Tab
+                    key="account"
+                    value="account"
+                    trigger="Account"
+                    content="Account content - Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                    disabled={true}
+                />,
+                <Tabs.Tab
+                    key="password"
+                    value="password"
+                    trigger="Password"
+                    content="Password content - Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                />
+            ]}
+        />
+    );
+};
+
+export default WithDisabledTabExample;
+` } } />
+
+### With Hidden Tab
+
+<Canvas of={Tabs.WithHiddenTab} source={ { code: `
+import React from "react";
+import { Tabs } from "@webiny/admin-ui";
+
+const WithHiddenTabExample = () => {
+    return (
+        <Tabs
+            tabs={[
+                <Tabs.Tab
+                    key="account"
+                    value="account"
+                    trigger="Account"
+                    content="Account content - Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                    visible={false}
+                />,
+                <Tabs.Tab
+                    key="password"
+                    value="password"
+                    trigger="Password"
+                    content="Password content - Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                />
+            ]}
+        />
+    );
+};
+
+export default WithHiddenTabExample;
+` } } />
+
+## Anatomy
+
+### Construction
+<img src="/images/storybook/tabs/construction.png" alt="Construction"/>
+
+### Size & States
+<img src="/images/storybook/tabs/size-and-states.png" alt="Size & States"/>
+
+### Tab Group
+<img src="/images/storybook/tabs/tab-group.png" alt="Tab Group"/>
+
+## Usage
+<img src="/images/storybook/tabs/usage.png" alt="Usage"/>
\ No newline at end of file
diff --git a/packages/admin-ui/src/Tabs/Tabs.stories.tsx b/packages/admin-ui/src/Tabs/Tabs.stories.tsx
new file mode 100644
index 00000000000..17c7dc745a4
--- /dev/null
+++ b/packages/admin-ui/src/Tabs/Tabs.stories.tsx
@@ -0,0 +1,284 @@
+import React, { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { ReactComponent as PersonIcon } from "@webiny/icons/person.svg";
+import { ReactComponent as LockIcon } from "@webiny/icons/lock.svg";
+import { Tabs } from "./Tabs";
+
+const meta: Meta<typeof Tabs> = {
+    title: "Components/Tabs",
+    component: Tabs,
+    parameters: {
+        layout: "padded"
+    }
+};
+
+export default meta;
+type Story = StoryObj<typeof Tabs>;
+
+export const Default: Story = {
+    args: {
+        tabs: [
+            <Tabs.Tab
+                key={"account"}
+                value={"account"}
+                trigger={"Account"}
+                content={
+                    "Account content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum."
+                }
+            />,
+            <Tabs.Tab
+                key={"password"}
+                value={"password"}
+                trigger={"Password"}
+                content={
+                    "Password content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. "
+                }
+            />
+        ]
+    }
+};
+
+export const SizeSmall: Story = {
+    args: {
+        ...Default.args,
+        size: "sm"
+    }
+};
+
+export const SizeMedium: Story = {
+    args: {
+        ...Default.args,
+        size: "md"
+    }
+};
+
+export const SizeLarge: Story = {
+    args: {
+        ...Default.args,
+        size: "lg"
+    }
+};
+
+export const SizeExtraLarge: Story = {
+    args: {
+        ...Default.args,
+        size: "xl"
+    }
+};
+
+export const SpacingExtraSmall: Story = {
+    args: {
+        ...Default.args,
+        spacing: "xs"
+    }
+};
+
+export const SpacingSmall: Story = {
+    args: {
+        ...Default.args,
+        spacing: "sm"
+    }
+};
+
+export const SpacingMedium: Story = {
+    args: {
+        ...Default.args,
+        spacing: "md"
+    }
+};
+
+export const SpacingLarge: Story = {
+    args: {
+        ...Default.args,
+        spacing: "lg"
+    }
+};
+
+export const SpacingExtraLarge: Story = {
+    args: {
+        ...Default.args,
+        spacing: "xl"
+    }
+};
+
+export const SpacingDoubleExtraLarge: Story = {
+    args: {
+        ...Default.args,
+        spacing: "xxl"
+    }
+};
+
+export const WithSeparator: Story = {
+    args: {
+        ...Default.args,
+        separator: true
+    }
+};
+
+export const WithDefaultValue: Story = {
+    args: {
+        ...Default.args,
+        defaultValue: "password"
+    }
+};
+
+export const WithControlledValue: Story = {
+    args: {
+        ...Default.args,
+        value: "password"
+    },
+    render: args => {
+        const [value, setValue] = useState(args.value);
+        return <Tabs {...args} value={value} onValueChange={setValue} />;
+    }
+};
+
+export const WithIcons: Story = {
+    args: {
+        ...Default.args,
+        tabs: [
+            <Tabs.Tab
+                key={"account"}
+                value={"account"}
+                trigger={"Account"}
+                content={
+                    "Account content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum."
+                }
+                icon={<PersonIcon />}
+            />,
+            <Tabs.Tab
+                key={"password"}
+                value={"password"}
+                trigger={"Password"}
+                content={
+                    "Password content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. "
+                }
+                icon={<LockIcon />}
+            />
+        ]
+    }
+};
+
+export const WithDisabledTab: Story = {
+    args: {
+        ...Default.args,
+        tabs: [
+            <Tabs.Tab
+                key={"account"}
+                value={"account"}
+                trigger={"Account"}
+                content={
+                    "Account content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum."
+                }
+                disabled={true}
+            />,
+            <Tabs.Tab
+                key={"password"}
+                value={"password"}
+                trigger={"Password"}
+                content={
+                    "Password content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. "
+                }
+            />
+        ]
+    }
+};
+
+export const WithHiddenTab: Story = {
+    args: {
+        ...Default.args,
+        tabs: [
+            <Tabs.Tab
+                key={"account"}
+                value={"account"}
+                trigger={"Account"}
+                content={
+                    "Account content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum."
+                }
+                visible={false}
+            />,
+            <Tabs.Tab
+                key={"password"}
+                value={"password"}
+                trigger={"Password"}
+                content={
+                    "Password content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. "
+                }
+            />
+        ]
+    }
+};
+
+// Update the Documentation story to properly handle control changes
+export const Documentation: Story = {
+    render: args => {
+        // Force re-render when args change by using a key
+        return <Tabs key={JSON.stringify(args)} {...args} />;
+    },
+    args: {
+        size: "md",
+        spacing: "lg",
+        separator: true,
+        defaultValue: "account",
+        tabs: [
+            <Tabs.Tab
+                key={"account"}
+                value={"account"}
+                trigger={"Account"}
+                content={
+                    "Account content - This tab contains account settings and personal information. Users can update their profile details, change email address, and manage notification preferences."
+                }
+            />,
+            <Tabs.Tab
+                key={"security"}
+                value={"security"}
+                trigger={"Security"}
+                content={
+                    "Security content - This tab contains security settings. Users can change their password, enable two-factor authentication, and review recent account activity."
+                }
+            />,
+            <Tabs.Tab
+                key={"preferences"}
+                value={"preferences"}
+                trigger={"Preferences"}
+                content={
+                    "Preferences content - This tab contains user preferences. Users can customize the interface, set language preferences, and configure other application settings."
+                }
+            />
+        ],
+        value: undefined
+    },
+    argTypes: {
+        size: {
+            description: "Size of the tabs",
+            control: "select",
+            options: ["sm", "md", "lg", "xl"],
+            defaultValue: "md"
+        },
+        spacing: {
+            description: "Spacing around the tabs and content",
+            control: "select",
+            options: ["xs", "sm", "md", "lg", "xl", "xxl"],
+            defaultValue: "lg"
+        },
+        separator: {
+            description:
+                "Whether to show a separator line below the tabs, by default it's `false`.",
+            control: "boolean",
+            defaultValue: false
+        },
+        defaultValue: {
+            description: "The value of the tab that should be active by default",
+            control: "text"
+        },
+        value: {
+            description:
+                "The controlled value of the active tab, please refer to the example code for details.",
+            control: "none"
+        },
+        tabs: {
+            description: "The tabs to render, please refer to the example code for details.",
+            control: "none"
+        }
+    }
+};
diff --git a/packages/admin-ui/src/Tabs/Tabs.tsx b/packages/admin-ui/src/Tabs/Tabs.tsx
new file mode 100644
index 00000000000..3b2c8209f0f
--- /dev/null
+++ b/packages/admin-ui/src/Tabs/Tabs.tsx
@@ -0,0 +1,115 @@
+import React, { useMemo, useState } from "react";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import { makeDecoratable, type VariantProps, withStaticProps } from "~/utils";
+import {
+    Content,
+    ITabsContext,
+    List,
+    Tab,
+    TabItem,
+    TabProps,
+    TabsContext,
+    Trigger,
+    tabListVariants
+} from "./components";
+
+const Root = TabsPrimitive.Root;
+
+interface TabsProps extends Omit<TabsPrimitive.TabsProps, "children"> {
+    tabs: React.ReactElement<TabProps>[];
+    size?: VariantProps<typeof tabListVariants>["size"];
+    spacing?: VariantProps<typeof tabListVariants>["spacing"];
+    separator?: VariantProps<typeof tabListVariants>["separator"];
+}
+
+const DecoratableTabs = ({
+    defaultValue: initialValue,
+    size,
+    spacing,
+    separator,
+    tabs: tabComponents,
+    ...props
+}: TabsProps) => {
+    const [tabs, setTabs] = useState<TabItem[]>([]);
+
+    const defaultValue = useMemo(() => {
+        // `defaultValue` prop works only at first render so we need to use the `tabComponents` instead of the `TabItems`
+        return (
+            initialValue ||
+            tabComponents.find(tab => !tab.props.disabled && tab.props.visible !== false)?.props
+                .value
+        );
+    }, [initialValue, tabComponents]);
+
+    const triggers = useMemo(
+        () => (
+            // We need to generate a key like this to trigger a proper component re-render when child tabs change.
+            <List
+                key={tabs.map(tab => tab.id).join(";")}
+                size={size}
+                spacing={spacing}
+                separator={separator}
+            >
+                {tabs.map(tab => (
+                    <Trigger
+                        data-testid={tab["data-testid"]}
+                        disabled={tab.disabled}
+                        icon={tab.icon}
+                        key={tab.id}
+                        size={size}
+                        text={tab.trigger}
+                        value={tab.value}
+                        visible={tab.visible}
+                    />
+                ))}
+            </List>
+        ),
+        [tabs, size, spacing]
+    );
+
+    const contents = useMemo(
+        () =>
+            tabs.map(tab => (
+                <Content key={tab.id} value={tab.value} content={tab.content} spacing={spacing} />
+            )),
+        [tabs, spacing]
+    );
+
+    const context: ITabsContext = useMemo(
+        () => ({
+            addTab(props) {
+                setTabs(tabs => {
+                    const existingIndex = tabs.findIndex(tab => tab.value === props.value);
+                    if (existingIndex > -1) {
+                        return [
+                            ...tabs.slice(0, existingIndex),
+                            props,
+                            ...tabs.slice(existingIndex + 1)
+                        ];
+                    }
+                    return [...tabs, props];
+                });
+            },
+            removeTab(id) {
+                setTabs(tabs => tabs.filter(tab => tab.id === id));
+            }
+        }),
+        [setTabs]
+    );
+
+    return (
+        <Root {...props} defaultValue={defaultValue}>
+            {triggers}
+            {contents}
+            <TabsContext.Provider value={context}>{tabComponents}</TabsContext.Provider>
+        </Root>
+    );
+};
+
+const BaseTabs = makeDecoratable("Tabs", DecoratableTabs);
+
+const Tabs = withStaticProps(BaseTabs, {
+    Tab
+});
+
+export { Tabs, type TabsProps };
diff --git a/packages/admin-ui/src/Tabs/components/Content.tsx b/packages/admin-ui/src/Tabs/components/Content.tsx
new file mode 100644
index 00000000000..9399ab78a08
--- /dev/null
+++ b/packages/admin-ui/src/Tabs/components/Content.tsx
@@ -0,0 +1,43 @@
+import * as React from "react";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import { cn, cva, type VariantProps } from "~/utils";
+
+const tabContentVariants = cva(
+    [
+        "wby-bg-transparent",
+        "focus-visible:wby-outline-none focus-visible:wby-ring-lg focus-visible:wby-ring-primary-dimmed",
+        // By default, the inner content is removed by the DOM when the tab becomes inactive.
+        // This is a problem when we need to keep track of the state inside a tab content, such as forms.
+        //  We are force-mounting the tab content and this class ensures the content is hidden, but not removed from the DOM.
+        "data-[state=inactive]:wby-hidden"
+    ],
+    {
+        variants: {
+            spacing: {
+                xs: "wby-p-xs",
+                sm: "wby-p-sm",
+                md: "wby-p-md",
+                lg: "wby-p-lg",
+                xl: "wby-p-xl",
+                xxl: "wby-p-xxl"
+            }
+        }
+    }
+);
+
+type ContentProps = Omit<TabsPrimitive.TabsContentProps, "children" | "content"> &
+    VariantProps<typeof tabContentVariants> & {
+        content: React.ReactNode;
+    };
+
+const Content = ({ className, content, spacing, ...props }: ContentProps) => (
+    <TabsPrimitive.Content
+        className={cn(tabContentVariants({ spacing }), className)}
+        forceMount={true}
+        {...props}
+    >
+        {content}
+    </TabsPrimitive.Content>
+);
+
+export { Content, type ContentProps };
diff --git a/packages/admin-ui/src/Tabs/components/Context.tsx b/packages/admin-ui/src/Tabs/components/Context.tsx
new file mode 100644
index 00000000000..ed5257d024f
--- /dev/null
+++ b/packages/admin-ui/src/Tabs/components/Context.tsx
@@ -0,0 +1,11 @@
+import { createContext } from "react";
+import { TabItem } from "./Tab";
+
+interface ITabsContext {
+    addTab(props: TabItem): void;
+    removeTab(id: string): void;
+}
+
+const TabsContext = createContext<ITabsContext | undefined>(undefined);
+
+export { TabsContext, type ITabsContext };
diff --git a/packages/admin-ui/src/Tabs/components/List.tsx b/packages/admin-ui/src/Tabs/components/List.tsx
new file mode 100644
index 00000000000..46d44a75e08
--- /dev/null
+++ b/packages/admin-ui/src/Tabs/components/List.tsx
@@ -0,0 +1,39 @@
+import * as React from "react";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import { cn, cva, type VariantProps } from "~/utils";
+
+const tabListVariants = cva("wby-w-full wby-inline-flex wby-items-center wby-justify-start", {
+    variants: {
+        size: {
+            sm: "wby-gap-sm",
+            md: "wby-gap-sm",
+            lg: "wby-gap-sm-extra",
+            xl: "wby-gap-md"
+        },
+        spacing: {
+            xs: "wby-px-xs",
+            sm: "wby-px-sm",
+            md: "wby-px-md",
+            lg: "wby-px-lg",
+            xl: "wby-px-xl",
+            xxl: "wby-px-xxl"
+        },
+        separator: {
+            true: "wby-border-solid wby-border-b-sm wby-border-neutral-dimmed"
+        }
+    },
+    defaultVariants: {
+        size: "sm"
+    }
+});
+
+type ListProps = TabsPrimitive.TabsListProps & VariantProps<typeof tabListVariants>;
+
+const List = ({ className, spacing, size, separator, ...props }: ListProps) => (
+    <TabsPrimitive.List
+        className={cn(tabListVariants({ spacing, size, separator }), className)}
+        {...props}
+    />
+);
+
+export { List, type ListProps, tabListVariants };
diff --git a/packages/admin-ui/src/Tabs/components/Tab.tsx b/packages/admin-ui/src/Tabs/components/Tab.tsx
new file mode 100644
index 00000000000..6ee0cc3bffc
--- /dev/null
+++ b/packages/admin-ui/src/Tabs/components/Tab.tsx
@@ -0,0 +1,38 @@
+import React, { useContext, useEffect, useRef } from "react";
+import { makeDecoratable, generateId } from "~/utils";
+import { TabsContext } from "./Context";
+
+interface TabProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "content"> {
+    value: string;
+    trigger: React.ReactNode;
+    content: React.ReactNode;
+    icon?: React.ReactElement;
+    disabled?: boolean;
+    visible?: boolean;
+    "data-testid"?: string;
+}
+
+interface TabItem extends TabProps {
+    id: string;
+}
+
+const DecoratableTab = (props: TabProps) => {
+    const tabsContext = useContext(TabsContext);
+    const idRef = useRef(generateId());
+
+    useEffect(() => {
+        tabsContext!.addTab({ ...props, id: idRef.current, visible: props.visible ?? true });
+    }, [props]);
+
+    useEffect(() => {
+        return () => {
+            return tabsContext!.removeTab(idRef.current);
+        };
+    }, []);
+
+    return null;
+};
+
+const Tab = makeDecoratable("Tab", DecoratableTab);
+
+export { Tab, type TabProps, type TabItem };
diff --git a/packages/admin-ui/src/Tabs/components/Trigger.tsx b/packages/admin-ui/src/Tabs/components/Trigger.tsx
new file mode 100644
index 00000000000..1443eb8e76d
--- /dev/null
+++ b/packages/admin-ui/src/Tabs/components/Trigger.tsx
@@ -0,0 +1,72 @@
+import * as React from "react";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import { cn, cva, type VariantProps } from "~/utils";
+import { Icon } from "~/Icon";
+
+const tabTriggerVariants = cva(
+    [
+        "wby-group wby-inline-flex wby-items-center wby-justify-center wby-whitespace-nowrap wby-outline-none wby-transition-all",
+        "wby-text-neutral-strong hover:text-neutral-primary",
+        "wby-border-b-md wby-border-transparent wby-border-solid",
+        "data-[state=active]:wby-border-accent-default data-[state=active]:wby-text-neutral-primary",
+        "disabled:wby-pointer-events-none disabled:!wby-text-neutral-disabled disabled:!wby-fill-neutral-disabled disabled:!wby-border-transparent"
+    ],
+    {
+        variants: {
+            size: {
+                sm: "wby-text-sm wby-h-[40px]",
+                md: "wby-text-md wby-h-[48px]",
+                lg: "wby-text-lg wby-h-[56px]",
+                xl: "wby-text-xl wby-h-[64px]"
+            },
+            visible: {
+                false: "wby-hidden"
+            }
+        },
+        defaultVariants: {
+            size: "sm"
+        }
+    }
+);
+
+const innerTabTriggerVariants = cva(
+    [
+        "wby-inline-flex wby-items-center wby-justify-start wby-gap-xs",
+        "group-hover:wby-bg-neutral-dimmed",
+        "group-focus-visible:wby-ring-lg group-focus-visible:wby-ring-primary-dimmed"
+    ],
+    {
+        variants: {
+            size: {
+                sm: "wby-rounded-sm wby-p-xs",
+                md: "wby-rounded-sm wby-px-xs wby-py-xs-plus",
+                lg: "wby-rounded-sm wby-px-xs-plus wby-py-sm-plus",
+                xl: "wby-rounded-lg wby-px-sm wby-py-sm-plus"
+            }
+        },
+        defaultVariants: {
+            size: "sm"
+        }
+    }
+);
+
+type TriggerProps = Omit<TabsPrimitive.TabsTriggerProps, "children"> &
+    VariantProps<typeof tabTriggerVariants> & {
+        text: React.ReactNode;
+        icon?: React.ReactElement;
+        "data-testid"?: string;
+    };
+
+const Trigger = ({ className, size, icon, text, visible, ...props }: TriggerProps) => (
+    <TabsPrimitive.Trigger
+        className={cn(tabTriggerVariants({ size, visible }), className)}
+        {...props}
+    >
+        <div className={cn(innerTabTriggerVariants({ size }))}>
+            {icon && <Icon icon={icon} size={"sm"} label={String(text)} color={"neutral-light"} />}
+            {text}
+        </div>
+    </TabsPrimitive.Trigger>
+);
+
+export { Trigger, type TriggerProps };
diff --git a/packages/admin-ui/src/Tabs/components/index.ts b/packages/admin-ui/src/Tabs/components/index.ts
new file mode 100644
index 00000000000..b673c343863
--- /dev/null
+++ b/packages/admin-ui/src/Tabs/components/index.ts
@@ -0,0 +1,5 @@
+export * from "./Content";
+export * from "./Context";
+export * from "./List";
+export * from "./Tab";
+export * from "./Trigger";
diff --git a/packages/admin-ui/src/Tabs/index.ts b/packages/admin-ui/src/Tabs/index.ts
new file mode 100644
index 00000000000..5de2df695e9
--- /dev/null
+++ b/packages/admin-ui/src/Tabs/index.ts
@@ -0,0 +1 @@
+export * from "./Tabs";
diff --git a/packages/admin-ui/src/Tag/Tag.mdx b/packages/admin-ui/src/Tag/Tag.mdx
new file mode 100644
index 00000000000..634e84b2d77
--- /dev/null
+++ b/packages/admin-ui/src/Tag/Tag.mdx
@@ -0,0 +1,203 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+
+import * as TagStories from './Tag.stories';
+
+<Meta of={TagStories} />
+
+# Tag
+
+The Tag component is a visual element used to display brief, contextual information or status, such as counts, labels, or indicators. It enhances UI clarity by drawing attention to critical updates (e.g., notifications), item counts, or states (e.g., "new," "active").
+
+## Usage
+
+<Canvas of={TagStories.Documentation} source={ { code: `
+import React from "react";
+import { Tag } from "@webiny/admin-ui";
+
+const TagExample = () => {
+    return <Tag content="Label" />;
+};
+
+export default TagExample;
+
+` } }
+        additionalActions={[
+            {
+                title: 'Open in GitHub',
+                onClick: () => {
+                    window.open(
+                        'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Tag/Tag.tsx',
+                        '_blank'
+                    );
+                },
+            }
+        ]}
+/>
+
+<Controls of={TagStories.Documentation} />
+
+```jsx
+import React from "react";
+import { Tag } from "@webiny/admin-ui";
+
+const TagExample = () => {
+    return <Tag content="Label" />;
+};
+
+export default TagExample;
+```
+
+## Examples
+
+### Basic Tag
+
+A basic tag displays a simple label without any interaction.
+
+<Canvas of={TagStories.Default} source={ { code: `
+import React from "react";
+import { Tag } from "@webiny/admin-ui";
+
+const BasicTagExample = () => {
+    return <Tag content="Label" />;
+};
+
+export default BasicTagExample;
+` } } />
+
+### Interactive Tag
+
+Tags can be made interactive by adding an onClick handler.
+
+<Canvas of={TagStories.WithOnClickCallback} source={ { code: `
+import React from "react";
+import { Tag } from "@webiny/admin-ui";
+
+const InteractiveTagExample = () => {
+    return <Tag
+        content="Click me"
+        onClick={evt => {
+            console.log("Tag clicked", evt);
+        }}
+    />;
+};
+
+export default InteractiveTagExample;
+` } } />
+
+### Dismissible Tag
+
+Tags can include a dismiss button by providing an onDismiss handler.
+
+<Canvas of={TagStories.WithOnDismissCallback} source={ { code: `
+import React from "react";
+import { Tag } from "@webiny/admin-ui";
+
+const DismissibleTagExample = () => {
+    return <Tag
+        content="Dismissible"
+        onDismiss={evt => {
+            console.log("Tag dismissed", evt);
+        }}
+    />;
+};
+
+export default DismissibleTagExample;
+` } } />
+
+### Custom Dismiss Icon
+
+You can customize the dismiss icon by providing a custom icon element.
+
+<Canvas of={TagStories.WithCustomDismissIconElement} source={ { code: `
+import React from "react";
+import { Tag } from "@webiny/admin-ui";
+import { ReactComponent as AddIcon } from "@webiny/icons/add.svg";
+
+const CustomDismissIconExample = () => {
+    return <Tag
+        content="Custom Icon"
+        onDismiss={evt => {
+            console.log("Tag dismissed", evt);
+        }}
+        dismissIconElement={<AddIcon />}
+        dismissIconLabel="Custom dismiss label"
+    />;
+};
+
+export default CustomDismissIconExample;
+` } } />
+
+### Variants
+
+Tags come in various color variants to represent different states or categories.
+
+<Canvas of={TagStories.FullExample} source={ { code: `
+import React from "react";
+import { Tag } from "@webiny/admin-ui";
+
+const TagVariantsExample = () => {
+    return (
+        <div className={"wby-flex wby-gap-sm"}>
+            <Tag content={"Neutral base"} variant={"neutral-base"} onDismiss={() => {}} />
+            <Tag content={"Neutral base outline"} variant={"neutral-base-outline"} onDismiss={() => {}} />
+            <Tag content={"Neutral light"} variant={"neutral-light"} onDismiss={() => {}} />
+            <Tag content={"Neutral muted"} variant={"neutral-muted"} onDismiss={() => {}} />
+            <Tag content={"Neutral strong"} variant={"neutral-strong"} onDismiss={() => {}} />
+            <Tag content={"Neutral xstrong"} variant={"neutral-xstrong"} onDismiss={() => {}} />
+            <Tag content={"Neutral dark"} variant={"neutral-dark"} onDismiss={() => {}} />
+            <Tag content={"Success"} variant={"success"} onDismiss={() => {}} />
+            <Tag content={"Success light"} variant={"success-light"} onDismiss={() => {}} />
+            <Tag content={"Warning"} variant={"warning"} onDismiss={() => {}} />
+            <Tag content={"Destructive"} variant={"destructive"} onDismiss={() => {}} />
+            <Tag content={"Accent"} variant={"accent"} onDismiss={() => {}} />
+            <Tag content={"Accent light"} variant={"accent-light"} onDismiss={() => {}} />
+        </div>
+    );
+};
+
+export default TagVariantsExample;
+` } } />
+
+### Disabled Tags
+
+Tags can be disabled to indicate that they are not interactive.
+
+<Canvas of={TagStories.NeutralBaseDisabled} source={ { code: `
+import React from "react";
+import { Tag } from "@webiny/admin-ui";
+
+const DisabledTagExample = () => {
+    return <Tag
+        content="Disabled"
+        variant="neutral-base"
+        onDismiss={() => {}}
+        disabled={true}
+    />;
+};
+
+export default DisabledTagExample;
+` } } />
+
+## Anatomy
+
+### Construction
+<img src="/images/storybook/tag/construction.png" alt="Construction"/>
+
+### Style
+<img src="/images/storybook/tag/style.png" alt="Style"/>
+
+### States
+<img src="/images/storybook/tag/states.png" alt="States"/>
+
+## Usage Guidelines
+<img src="/images/storybook/tag/usage.png" alt="Usage"/>
+
+## Best Practices
+
+- Use tags to categorize content or indicate status
+- Keep tag content concise and clear
+- Choose appropriate color variants to convey meaning
+- Use dismissible tags when users need to remove or filter items
+- Consider using interactive tags for filtering or navigation
+- Ensure sufficient contrast between tag text and background
+- Maintain consistent spacing when displaying multiple tags
diff --git a/packages/admin-ui/src/Tag/Tag.stories.tsx b/packages/admin-ui/src/Tag/Tag.stories.tsx
new file mode 100644
index 00000000000..cc7fbb15e26
--- /dev/null
+++ b/packages/admin-ui/src/Tag/Tag.stories.tsx
@@ -0,0 +1,307 @@
+import React from "react";
+import { ReactComponent as AddIcon } from "@webiny/icons/add.svg";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Tag } from "./Tag";
+
+const meta: Meta<typeof Tag> = {
+    title: "Components/Tag",
+    component: Tag,
+    parameters: {
+        layout: "padded"
+    }
+};
+
+export default meta;
+type Story = StoryObj<typeof Tag>;
+
+export const Default: Story = {
+    args: {
+        content: "Label"
+    }
+};
+
+export const WithOnClickCallback: Story = {
+    args: {
+        ...Default.args,
+        onClick: evt => {
+            console.log("onClick", evt);
+        }
+    }
+};
+
+export const WithOnDismissCallback: Story = {
+    args: {
+        ...Default.args,
+        onDismiss: evt => {
+            console.log("onDismiss", evt);
+        }
+    }
+};
+
+export const WithCustomDismissIconElement: Story = {
+    args: {
+        ...WithOnDismissCallback.args,
+        dismissIconElement: <AddIcon />,
+        dismissIconLabel: "Custom dismiss label"
+    }
+};
+
+export const NeutralBase: Story = {
+    args: {
+        ...WithOnDismissCallback.args,
+        variant: "neutral-base"
+    }
+};
+
+export const NeutralBaseDisabled: Story = {
+    args: {
+        ...NeutralBase.args,
+        disabled: true
+    }
+};
+
+export const NeutralBaseOutline: Story = {
+    args: {
+        ...WithOnDismissCallback.args,
+        variant: "neutral-base-outline"
+    }
+};
+
+export const NeutralBaseOutlineDisabled: Story = {
+    args: {
+        ...NeutralBaseOutline.args,
+        disabled: true
+    }
+};
+
+export const NeutralLight: Story = {
+    args: {
+        ...WithOnDismissCallback.args,
+        variant: "neutral-light"
+    }
+};
+
+export const NeutralLightDisabled: Story = {
+    args: {
+        ...NeutralLight.args,
+        disabled: true
+    }
+};
+
+export const NeutralMuted: Story = {
+    args: {
+        ...WithOnDismissCallback.args,
+        variant: "neutral-muted"
+    }
+};
+
+export const NeutralMutedDisabled: Story = {
+    args: {
+        ...NeutralMuted.args,
+        disabled: true
+    }
+};
+
+export const NeutralStrong: Story = {
+    args: {
+        ...WithOnDismissCallback.args,
+        variant: "neutral-strong"
+    }
+};
+
+export const NeutralStrongDisabled: Story = {
+    args: {
+        ...NeutralStrong.args,
+        disabled: true
+    }
+};
+
+export const NeutralXStrong: Story = {
+    args: {
+        ...WithOnDismissCallback.args,
+        variant: "neutral-xstrong"
+    }
+};
+
+export const NeutralXStrongDisabled: Story = {
+    args: {
+        ...NeutralXStrong.args,
+        disabled: true
+    }
+};
+
+export const NeutralDark: Story = {
+    args: {
+        ...WithOnDismissCallback.args,
+        variant: "neutral-dark"
+    }
+};
+
+export const NeutralDarkDisabled: Story = {
+    args: {
+        ...NeutralDark.args,
+        disabled: true
+    }
+};
+
+export const Accent: Story = {
+    args: {
+        ...WithOnDismissCallback.args,
+        variant: "accent"
+    }
+};
+
+export const AccentDisabled: Story = {
+    args: {
+        ...Accent.args,
+        disabled: true
+    }
+};
+
+export const AccentLight: Story = {
+    args: {
+        ...WithOnDismissCallback.args,
+        variant: "accent-light"
+    }
+};
+
+export const AccentLightDisabled: Story = {
+    args: {
+        ...AccentLight.args,
+        disabled: true
+    }
+};
+
+export const Success: Story = {
+    args: {
+        ...WithOnDismissCallback.args,
+        variant: "success"
+    }
+};
+
+export const SuccessDisabled: Story = {
+    args: {
+        ...Success.args,
+        disabled: true
+    }
+};
+
+export const SuccessLight: Story = {
+    args: {
+        ...WithOnDismissCallback.args,
+        variant: "success-light"
+    }
+};
+
+export const SuccessLightDisabled: Story = {
+    args: {
+        ...SuccessLight.args,
+        disabled: true
+    }
+};
+
+export const Warning: Story = {
+    args: {
+        ...WithOnDismissCallback.args,
+        variant: "warning"
+    }
+};
+
+export const WarningDisabled: Story = {
+    args: {
+        ...Warning.args,
+        disabled: true
+    }
+};
+
+export const Destructive: Story = {
+    args: {
+        ...WithOnDismissCallback.args,
+        variant: "destructive"
+    }
+};
+
+export const DestructiveDisabled: Story = {
+    args: {
+        ...Destructive.args,
+        disabled: true
+    }
+};
+
+export const FullExample: Story = {
+    args: WithOnDismissCallback.args,
+    render: args => {
+        return (
+            <div className={"wby-flex wby-gap-sm"}>
+                <Tag {...args} content={"Neutral base"} variant={"neutral-base"} />
+                <Tag {...args} content={"Neutral base outline"} variant={"neutral-base-outline"} />
+                <Tag {...args} content={"Neutral light"} variant={"neutral-light"} />
+                <Tag {...args} content={"Neutral muted"} variant={"neutral-muted"} />
+                <Tag {...args} content={"Neutral strong"} variant={"neutral-strong"} />
+                <Tag {...args} content={"Neutral xstrong"} variant={"neutral-xstrong"} />
+                <Tag {...args} content={"Neutral dark"} variant={"neutral-dark"} />
+                <Tag {...args} content={"Success"} variant={"success"} />
+                <Tag {...args} content={"Success light"} variant={"success-light"} />
+                <Tag {...args} content={"Warning"} variant={"warning"} />
+                <Tag {...args} content={"Destructive"} variant={"destructive"} />
+                <Tag {...args} content={"Accent"} variant={"accent"} />
+                <Tag {...args} content={"Accent light"} variant={"accent-light"} />
+            </div>
+        );
+    }
+};
+
+export const Documentation: Story = {
+    args: {
+        content: "Label",
+        variant: "neutral-base",
+        disabled: false,
+        onDismiss: undefined,
+        dismissIconElement: undefined,
+        dismissIconLabel: undefined
+    },
+    argTypes: {
+        content: {
+            description: "The content of the tag. Please refer to the example code for details.",
+            control: "text"
+        },
+        variant: {
+            description: "The color variant of the tag.",
+            control: "select",
+            options: [
+                "neutral-base",
+                "neutral-base-outline",
+                "neutral-light",
+                "neutral-muted",
+                "neutral-strong",
+                "neutral-xstrong",
+                "neutral-dark",
+                "success",
+                "success-light",
+                "warning",
+                "destructive",
+                "accent",
+                "accent-light"
+            ]
+        },
+        disabled: {
+            description: "Whether the tag is disabled.",
+            control: "boolean"
+        },
+        onDismiss: {
+            description:
+                "Callback function when the tag is dismissed. Please refer to the 'Dismissible Tag' example code for details.",
+            control: "none"
+        },
+        dismissIconElement: {
+            description:
+                "Custom dismiss icon element. Please refer to the 'Custom Dismiss Icon' example code for details.",
+            control: "none"
+        },
+        dismissIconLabel: {
+            description:
+                "Custom dismiss icon label. Please refer to the 'Custom Dismiss Icon' example code for details.",
+            control: "none"
+        }
+    }
+};
diff --git a/packages/admin-ui/src/Tag/Tag.tsx b/packages/admin-ui/src/Tag/Tag.tsx
new file mode 100644
index 00000000000..887d8fe8ee0
--- /dev/null
+++ b/packages/admin-ui/src/Tag/Tag.tsx
@@ -0,0 +1,204 @@
+import * as React from "react";
+import { ReactComponent as Close } from "@webiny/icons/close.svg";
+import { cn, cva, makeDecoratable, type VariantProps } from "~/utils";
+import { Icon, type IconProps } from "~/Icon";
+import { IconButton, iconButtonVariants } from "~/Button";
+
+const tagVariants = cva(
+    [
+        "wby-inline-flex wby-items-center wby-gap-xxs wby-rounded-sm wby-text-sm wby-text-regular wby-transition-colors wby-overflow-hidden",
+        "focus:outline-none"
+    ],
+    {
+        variants: {
+            isInteractive: {
+                true: "wby-cursor-pointer"
+            },
+            isDismissible: {
+                true: "wby-pl-xs-plus wby-pt-xxs wby-pb-xxs wby-pr-xs",
+                false: "wby-px-xs-plus wby-py-xxs"
+            },
+            isDisabled: {
+                true: "wby-cursor-not-allowed wby-pointer-events-none"
+            },
+            variant: {
+                "neutral-base": [
+                    "wby-bg-transparent wby-text-neutral-primary",
+                    "hover:wby-bg-neutral-light",
+                    "aria-disabled:wby-bg-transparent aria-disabled:wby-text-neutral-disabled"
+                ],
+                "neutral-base-outline": [
+                    "wby-border-sm wby-border-solid wby-px-[calc(theme(padding.xs-plus)-theme(borderWidth.sm))] wby-py-[calc(theme(padding.xxs)-theme(borderWidth.sm))]",
+                    "wby-bg-transparent wby-border-neutral-muted wby-text-neutral-primary",
+                    "hover:wby-bg-neutral-light",
+                    "aria-disabled:wby-bg-transparent aria-disabled:wby-border-neutral-dimmed aria-disabled:wby-text-neutral-disabled"
+                ],
+                "neutral-light": [
+                    "wby-bg-neutral-light wby-text-neutral-primary",
+                    "hover:wby-bg-neutral-muted",
+                    "aria-disabled:wby-bg-neutral-light aria-disabled:wby-text-neutral-muted"
+                ],
+                "neutral-muted": [
+                    "wby-bg-neutral-muted wby-text-neutral-primary",
+                    "hover:wby-bg-neutral-strong",
+                    "aria-disabled:wby-bg-neutral-muted aria-disabled:wby-text-neutral-muted"
+                ],
+                "neutral-strong": [
+                    "wby-bg-neutral-strong wby-text-neutral-light",
+                    "hover:wby-bg-neutral-xstrong",
+                    "aria-disabled:wby-bg-neutral-muted"
+                ],
+                "neutral-xstrong": [
+                    "wby-bg-neutral-xstrong wby-text-neutral-light",
+                    "hover:wby-bg-neutral-dark",
+                    "aria-disabled:wby-bg-neutral-strong"
+                ],
+                "neutral-dark": [
+                    "wby-bg-neutral-dark wby-text-neutral-light",
+                    "hover:wby-bg-neutral-xstrong",
+                    "aria-disabled:wby-bg-neutral-strong"
+                ],
+                accent: [
+                    "wby-bg-primary-default wby-text-neutral-light",
+                    "hover:wby-bg-primary-strong",
+                    "aria-disabled:wby-bg-primary-disabled"
+                ],
+                "accent-light": [
+                    "wby-bg-primary-subtle wby-text-neutral-primary",
+                    "hover:wby-bg-primary-muted",
+                    "aria-disabled:wby-bg-primary-subtle aria-disabled:wby-text-neutral-muted"
+                ],
+                success: [
+                    "wby-bg-success-default wby-text-neutral-light",
+                    "hover:wby-bg-success-strong",
+                    "aria-disabled:wby-bg-success-disabled"
+                ],
+                "success-light": [
+                    "wby-bg-success-subtle wby-text-neutral-primary",
+                    "hover:wby-bg-success-muted",
+                    "aria-disabled:wby-bg-success-subtle aria-disabled:wby-text-neutral-muted"
+                ],
+                warning: [
+                    "wby-bg-warning-muted wby-text-neutral-primary",
+                    "hover:wby-bg-warning-default",
+                    "aria-disabled:wby-bg-warning-disabled aria-disabled:wby-text-neutral-disabled"
+                ],
+                destructive: [
+                    "wby-bg-destructive-default wby-text-neutral-light",
+                    "hover:wby-bg-destructive-strong",
+                    "aria-disabled:wby-bg-destructive-disabled"
+                ]
+            }
+        },
+        defaultVariants: {
+            variant: "neutral-base"
+        }
+    }
+);
+
+export interface TagProps
+    extends Omit<React.HTMLAttributes<HTMLSpanElement>, "children" | "content">,
+        VariantProps<typeof tagVariants> {
+    content: React.ReactNode;
+    onDismiss?: (event: React.SyntheticEvent<HTMLSpanElement>) => void;
+    dismissIconElement?: React.ReactElement;
+    dismissIconLabel?: string;
+    disabled?: boolean;
+}
+
+const DecoratableTag = ({
+    className,
+    variant,
+    content,
+    onClick,
+    onDismiss,
+    dismissIconElement = <Close />,
+    dismissIconLabel = "Close",
+    disabled,
+    ...props
+}: TagProps) => {
+    const dismissButtonVariant = React.useMemo((): VariantProps<
+        typeof iconButtonVariants
+    >["variant"] => {
+        if (
+            variant &&
+            [
+                "neutral-strong",
+                "neutral-xstrong",
+                "neutral-dark",
+                "success",
+                "accent",
+                "destructive"
+            ].includes(variant)
+        ) {
+            return "ghost-negative";
+        }
+
+        return "ghost";
+    }, [variant]);
+
+    const dismissIconColor: IconProps["color"] = React.useMemo(() => {
+        if (
+            variant &&
+            [
+                "neutral-strong",
+                "neutral-xstrong",
+                "neutral-dark",
+                "accent",
+                "success",
+                "destructive"
+            ].includes(variant)
+        ) {
+            return "neutral-negative";
+        }
+
+        if (variant && ["warning"].includes(variant)) {
+            return "neutral-strong";
+        }
+
+        return "neutral-strong-transparent";
+    }, [variant]);
+
+    return (
+        <span
+            {...props}
+            onClick={onClick}
+            className={cn(
+                tagVariants({
+                    variant,
+                    isDismissible: Boolean(onDismiss),
+                    isInteractive: Boolean(onClick),
+                    isDisabled: Boolean(disabled)
+                }),
+                className
+            )}
+            aria-disabled={disabled}
+        >
+            <span className={"wby-overflow-hidden wby-truncate wby-whitespace-nowrap"}>
+                {content}
+            </span>
+            {onDismiss && (
+                <IconButton
+                    icon={
+                        <Icon
+                            icon={dismissIconElement}
+                            label={dismissIconLabel}
+                            color={dismissIconColor}
+                            size={"sm"}
+                        />
+                    }
+                    size={"xxs"}
+                    variant={dismissButtonVariant}
+                    disabled={disabled}
+                    onClick={event => {
+                        event.stopPropagation();
+                        onDismiss(event);
+                    }}
+                />
+            )}
+        </span>
+    );
+};
+const Tag = makeDecoratable("Tag", DecoratableTag);
+
+export { Tag };
diff --git a/packages/admin-ui/src/Tag/index.ts b/packages/admin-ui/src/Tag/index.ts
new file mode 100644
index 00000000000..5b4c58bcebc
--- /dev/null
+++ b/packages/admin-ui/src/Tag/index.ts
@@ -0,0 +1 @@
+export * from "./Tag";
diff --git a/packages/admin-ui/src/Text/Text.mdx b/packages/admin-ui/src/Text/Text.mdx
new file mode 100644
index 00000000000..0c9f20654f9
--- /dev/null
+++ b/packages/admin-ui/src/Text/Text.mdx
@@ -0,0 +1,141 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+
+import * as TextStories from './Text.stories';
+
+<Meta of={TextStories} />
+
+# Text
+
+The Text component is a fundamental UI element used for displaying text content with consistent styling across the application. It provides a standardized way to render text with different sizes while maintaining the design system's typography guidelines. The component is designed to be flexible, allowing it to be rendered as different HTML elements while preserving consistent styling.
+
+## Usage
+
+<Canvas of={TextStories.Documentation} source={ { code: `
+import React from "react";
+import { Text } from "@webiny/admin-ui";
+
+const TextExample = () => {
+    return <Text size="md">Text component example</Text>;
+};
+
+export default TextExample;
+
+` } }
+        additionalActions={[
+            {
+                title: 'Open in GitHub',
+                onClick: () => {
+                    window.open(
+                        'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Text/Text.tsx',
+                        '_blank'
+                    );
+                },
+            }
+        ]}
+/>
+
+<Controls of={TextStories.Documentation} />
+
+```tsx
+import React from "react";
+import { Text } from "@webiny/admin-ui";
+
+const TextExample = () => {
+    return <Text size="md">Text component example</Text>;
+};
+
+export default TextExample;
+```
+
+## Examples
+
+### Extra Large Text
+
+<Canvas of={TextStories.TextXl} source={ { code: `
+import React from "react";
+import { Text } from "@webiny/admin-ui";
+
+const TextXlExample = () => {
+    return (
+        <Text size="xl">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.
+        </Text>
+    );
+};
+
+export default TextXlExample;
+` } } />
+
+### Large Text
+
+<Canvas of={TextStories.TextLg} source={ { code: `
+import React from "react";
+import { Text } from "@webiny/admin-ui";
+
+const TextLgExample = () => {
+    return (
+        <Text size="lg">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.
+        </Text>
+    );
+};
+
+export default TextLgExample;
+` } } />
+
+### Medium Text
+
+<Canvas of={TextStories.TextMd} source={ { code: `
+import React from "react";
+import { Text } from "@webiny/admin-ui";
+
+const TextMdExample = () => {
+    return (
+        <Text size="md">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.
+        </Text>
+    );
+};
+
+export default TextMdExample;
+` } } />
+
+### Small Text
+
+<Canvas of={TextStories.TextSm} source={ { code: `
+import React from "react";
+import { Text } from "@webiny/admin-ui";
+
+const TextSmExample = () => {
+    return (
+        <Text size="sm">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.
+        </Text>
+    );
+};
+
+export default TextSmExample;
+` } } />
+
+### Using Different HTML Elements
+
+The Text component can be rendered as different HTML elements using the `as` prop. This is useful when you want to maintain semantic structure but want different visual styling.
+
+```tsx
+import React from "react";
+import { Text } from "@webiny/admin-ui";
+
+const TextAsExample = () => {
+    return (
+        <>
+            {/* Render as a div element */}
+            <Text as="div" size="md">This text is rendered as a div</Text>
+
+            {/* Default is span */}
+            <Text size="md">This text is rendered as a span</Text>
+        </>
+    );
+};
+
+export default TextAsExample;
+```
\ No newline at end of file
diff --git a/packages/admin-ui/src/Text/Text.stories.tsx b/packages/admin-ui/src/Text/Text.stories.tsx
new file mode 100644
index 00000000000..25557fdda9f
--- /dev/null
+++ b/packages/admin-ui/src/Text/Text.stories.tsx
@@ -0,0 +1,64 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Text } from "./Text";
+
+const meta: Meta<typeof Text> = {
+    title: "Components/Text",
+    component: Text,
+    argTypes: {
+        size: { control: "select", options: ["sm", "md", "lg", "xl"] }
+    }
+};
+
+export default meta;
+type Story = StoryObj<typeof Text>;
+
+export const TextXl: Story = {
+    args: {
+        size: "xl",
+        children:
+            "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus."
+    }
+};
+
+export const TextLg: Story = {
+    args: {
+        size: "lg",
+        children:
+            "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus."
+    }
+};
+
+export const TextMd: Story = {
+    args: {
+        size: "md",
+        children:
+            "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus."
+    }
+};
+
+export const TextSm: Story = {
+    args: {
+        size: "sm",
+        children:
+            "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus."
+    }
+};
+
+export const Documentation: Story = {
+    args: {
+        size: "md",
+        children: "Text component example"
+    },
+    argTypes: {
+        size: {
+            description: "The size of the text",
+            control: "select",
+            options: ["sm", "md", "lg", "xl"]
+        },
+        children: {
+            description: "The content of the text",
+            control: "text"
+        }
+    }
+};
diff --git a/packages/admin-ui/src/Text/Text.tsx b/packages/admin-ui/src/Text/Text.tsx
new file mode 100644
index 00000000000..1d8899ffb4c
--- /dev/null
+++ b/packages/admin-ui/src/Text/Text.tsx
@@ -0,0 +1,34 @@
+import React from "react";
+import { cn, cva, makeDecoratable, type VariantProps } from "~/utils";
+
+type TextTags = "span" | "div";
+
+const textVariants = cva("wby-font-sans", {
+    variants: {
+        size: {
+            xl: "wby-text-xl",
+            lg: "wby-text-lg",
+            md: "wby-text-md",
+            sm: "wby-text-sm"
+        }
+    },
+    defaultVariants: {
+        size: "md"
+    }
+});
+
+interface TextProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof textVariants> {
+    as?: TextTags;
+}
+
+const TextBase = ({ children, size, className, as: Tag = "span", ...props }: TextProps) => {
+    return (
+        <Tag {...props} className={cn(textVariants({ size }), className)}>
+            {children}
+        </Tag>
+    );
+};
+
+const Text = makeDecoratable("Text", TextBase);
+
+export { Text, type TextProps, type TextTags };
diff --git a/packages/admin-ui/src/Text/index.ts b/packages/admin-ui/src/Text/index.ts
new file mode 100644
index 00000000000..22e10b67503
--- /dev/null
+++ b/packages/admin-ui/src/Text/index.ts
@@ -0,0 +1 @@
+export * from "./Text";
diff --git a/packages/admin-ui/src/Textarea/Textarea.mdx b/packages/admin-ui/src/Textarea/Textarea.mdx
new file mode 100644
index 00000000000..57017562430
--- /dev/null
+++ b/packages/admin-ui/src/Textarea/Textarea.mdx
@@ -0,0 +1,143 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+
+import * as TextareaStories from './Textarea.stories';
+
+<Meta of={TextareaStories} />
+
+# Textarea
+
+The Textarea component is a multi-line text input field that enables users to enter longer text content. It's ideal for collecting detailed information, feedback, comments, or any content that requires multiple lines of text.
+
+## Usage
+
+<Canvas of={TextareaStories.Documentation} source={ { code: `
+import React, { useState } from "react";
+
+import { Textarea } from "@webiny/admin-ui";
+
+const TextareaExample = () => {
+    const [value, setValue] = useState("");
+
+    return (
+        <Textarea
+            label="Message"
+            description="Enter your feedback or message"
+            note="Please be specific and provide relevant details"
+            placeholder="Type your message here..."
+            required={true}
+            value={value}
+            onChange={newValue => setValue(newValue)}
+        />
+    );
+};
+
+export default TextareaExample;
+
+`} }
+    additionalActions={[
+        {
+            title: 'Open in GitHub',
+            onClick: () => {
+                window.open(
+                    'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Textarea/Textarea.tsx',
+                    '_blank'
+                );
+            },
+        }
+    ]}
+/>
+
+<Controls of={TextareaStories.Documentation}/>
+
+```jsx
+import React, { useState } from "react";
+
+import { Textarea } from "@webiny/admin-ui";
+
+const TextareaExample = () => {
+    const [value, setValue] = useState("");
+
+    return (
+        <Textarea
+            label="Message"
+            description="Enter your feedback or message"
+            note="Please be specific and provide relevant details"
+            placeholder="Type your message here..."
+            required={true}
+            value={value}
+            onChange={newValue => setValue(newValue)}
+        />
+    );
+};
+
+export default TextareaExample;
+```
+
+## Examples
+
+### With Validate Function
+The Textarea component supports validation using the validation prop, as shown in the example above.
+For more complex or reusable validation scenarios, you can use the validate prop, which accepts a custom validation function.
+Try entering less than 10 characters to see it in action, and click on **Show code** to view the validation function.
+
+<Canvas of={TextareaStories.WithValidateFunction} source={ { code: `
+import React, { useState } from "react";
+
+import { Textarea } from "@webiny/admin-ui";
+
+const MessageTextarea = () => {
+    const [value, setValue] = useState("");
+    const [validation, setValidation] = useState({ isValid: true, message: "" });
+
+    const validate = async () => {
+        if (!value.trim()) {
+            setValidation({ isValid: false, message: "This field is required" });
+        } else if (value.length < 10) {
+            setValidation({ isValid: false, message: "Message must be at least 10 characters long" });
+        } else {
+            setValidation({ isValid: true, message: "" });
+        }
+    };
+
+    return (
+        <Textarea
+            label="Message"
+            description="Enter a message (minimum 10 characters)"
+            required={true}
+            value={value}
+            onChange={newValue => setValue(newValue)}
+            validate={validate}
+            validation={validation}
+        />
+    );
+};` } }
+/>
+
+
+## Anatomy
+
+### Textarea
+<img src="/images/storybook/textarea/anatomy.png" alt="Textarea Anatomy"/>
+
+### Styles
+<img src="/images/storybook/textarea/styles.png" alt="Styles"/>
+
+### Field Size
+<img src="/images/storybook/textarea/field-size.png" alt="Field Size"/>
+
+### States and Styles
+<img src="/images/storybook/textarea/states-and-styles.png" alt="States and Styles"/>
+
+### Label Anatomy
+<img src="/images/storybook/textarea/label-anatomy.png" alt="Label Anatomy"/>
+
+### Label Properties
+<img src="/images/storybook/textarea/label-properties.png" alt="Label Properties"/>
+
+### Label Options
+<img src="/images/storybook/textarea/label-options.png" alt="Label Options"/>
+
+## Usage
+
+### Used in forms
+<img src="/images/storybook/textarea/used-in-forms.png" alt="Used in forms"/>
diff --git a/packages/admin-ui/src/Textarea/Textarea.stories.tsx b/packages/admin-ui/src/Textarea/Textarea.stories.tsx
new file mode 100644
index 00000000000..0b83987d898
--- /dev/null
+++ b/packages/admin-ui/src/Textarea/Textarea.stories.tsx
@@ -0,0 +1,185 @@
+import React, { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Textarea } from "~/Textarea";
+
+const meta: Meta<typeof Textarea> = {
+    title: "Components/Form/Textarea",
+    component: Textarea,
+    argTypes: {
+        onChange: { action: "onChange" },
+        disabled: {
+            control: "boolean",
+            defaultValue: false
+        }
+    },
+    parameters: {
+        layout: "padded"
+    }
+};
+
+export default meta;
+type Story = StoryObj<typeof Textarea>;
+
+export const Documentation: Story = {
+    render: args => {
+        const [value, setValue] = useState("");
+
+        return <Textarea {...args} value={value} onChange={newValue => setValue(newValue)} />;
+    },
+    args: {
+        label: "Message",
+        description: "Enter your feedback or message",
+        note: "Please be specific and provide relevant details",
+        placeholder: "Type your message here...",
+        required: true,
+        disabled: false,
+        onChange: undefined,
+        validation: {
+            isValid: true,
+            message: ""
+        },
+        value: "",
+        validate: undefined
+    },
+    argTypes: {
+        label: {
+            description: "Label text for the textarea",
+            control: "text"
+        },
+        description: {
+            description: "Additional description text below the textarea",
+            control: "text"
+        },
+        note: {
+            description: "Additional note text below the textarea",
+            control: "text"
+        },
+        placeholder: {
+            description: "Placeholder text shown when the textarea is empty",
+            control: "text"
+        },
+        required: {
+            description: "Makes the textarea required when set to true",
+            control: "boolean"
+        },
+        disabled: {
+            description: "Disables the textarea when set to true",
+            control: "boolean"
+        },
+        validation: {
+            description: "Object containing validation state and message",
+            control: "object"
+        },
+        value: {
+            description: "The current value of the textarea",
+            control: "text"
+        },
+        onChange: {
+            description: "Function called when the textarea value changes",
+            control: "none"
+        },
+        validate: {
+            description:
+                "Custom validation function, please refer to **With Validate Function** section below.",
+            control: "none"
+        }
+    }
+};
+
+export const Default: Story = {};
+
+export const WithLabel: Story = {
+    args: {
+        label: "Message"
+    }
+};
+
+export const WithLabelRequired: Story = {
+    args: {
+        ...Default.args,
+        label: "Message",
+        required: true
+    }
+};
+
+export const WithDescription: Story = {
+    args: {
+        ...Default.args,
+        description: "Enter your feedback or message in detail"
+    }
+};
+
+export const WithNotes: Story = {
+    args: {
+        ...Default.args,
+        note: "All messages are reviewed within 24 hours"
+    }
+};
+
+export const WithErrors: Story = {
+    args: {
+        ...Default.args,
+        validation: {
+            isValid: false,
+            message: "This field is required."
+        }
+    }
+};
+
+export const Disabled: Story = {
+    args: {
+        ...Default.args,
+        label: "Message",
+        disabled: true
+    }
+};
+
+export const WithValidateFunction: Story = {
+    render: args => {
+        const [value, setValue] = useState("");
+        const [validation, setValidation] = useState({ isValid: true, message: "" });
+
+        const validate = async () => {
+            if (!value.trim()) {
+                setValidation({ isValid: false, message: "This field is required" });
+            } else if (value.length < 10) {
+                setValidation({
+                    isValid: false,
+                    message: "Message must be at least 10 characters long"
+                });
+            } else {
+                setValidation({ isValid: true, message: "" });
+            }
+        };
+
+        return (
+            <Textarea
+                {...args}
+                value={value}
+                onChange={newValue => setValue(newValue)}
+                validate={validate}
+                validation={validation}
+            />
+        );
+    },
+    args: {
+        ...Default.args,
+        label: "Message",
+        required: true,
+        description: "Enter a message (minimum 10 characters)"
+    }
+};
+
+export const FullExample: Story = {
+    args: {
+        ...Default.args,
+        label: "Message",
+        required: true,
+        description: "Provide the required information for processing your request.",
+        note: "Note: Ensure your message is accurate before proceeding.",
+        validation: {
+            isValid: false,
+            message: "This field is required."
+        }
+    }
+};
diff --git a/packages/admin-ui/src/Textarea/Textarea.tsx b/packages/admin-ui/src/Textarea/Textarea.tsx
new file mode 100644
index 00000000000..08a8cb2f0e2
--- /dev/null
+++ b/packages/admin-ui/src/Textarea/Textarea.tsx
@@ -0,0 +1,62 @@
+import React, { useCallback, useMemo } from "react";
+import { makeDecoratable } from "~/utils";
+import { TextareaPrimitive, TextareaPrimitiveProps } from "./TextareaPrimitive";
+import {
+    FormComponentDescription,
+    FormComponentErrorMessage,
+    FormComponentLabel,
+    FormComponentNote,
+    FormComponentProps
+} from "~/FormComponent";
+
+type TextareaGroupProps = TextareaPrimitiveProps & FormComponentProps;
+
+const DecoratableTextarea = ({
+    label,
+    description,
+    note,
+    required,
+    disabled,
+    validation,
+    validate,
+    onBlur: originalOnBlur,
+    ...props
+}: TextareaGroupProps) => {
+    const { isValid: validationIsValid, message: validationMessage } = validation || {};
+    const invalid = useMemo(() => validationIsValid === false, [validationIsValid]);
+
+    const onBlur = useCallback(
+        async (e: React.FocusEvent<HTMLTextAreaElement>) => {
+            if (validate) {
+                // Since we are accessing event in an async operation, we need to persist it.
+                // See https://reactjs.org/docs/events.html#event-pooling.
+                e.persist();
+                await validate();
+            }
+            originalOnBlur && originalOnBlur(e);
+        },
+        [validate, originalOnBlur]
+    );
+
+    return (
+        <div className={"wby-w-full"}>
+            <FormComponentLabel
+                text={label}
+                required={required}
+                disabled={disabled}
+                invalid={invalid}
+            />
+            <FormComponentDescription text={description} disabled={disabled} />
+            <TextareaPrimitive {...props} disabled={disabled} invalid={invalid} onBlur={onBlur} />
+            <FormComponentErrorMessage
+                text={validationMessage}
+                invalid={invalid}
+                disabled={disabled}
+            />
+            <FormComponentNote text={note} disabled={disabled} />
+        </div>
+    );
+};
+const Textarea = makeDecoratable("Textarea", DecoratableTextarea);
+
+export { Textarea };
diff --git a/packages/admin-ui/src/Textarea/TextareaPrimitive.stories.tsx b/packages/admin-ui/src/Textarea/TextareaPrimitive.stories.tsx
new file mode 100644
index 00000000000..a9e0e2fb259
--- /dev/null
+++ b/packages/admin-ui/src/Textarea/TextareaPrimitive.stories.tsx
@@ -0,0 +1,116 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { TextareaPrimitive } from "./TextareaPrimitive";
+
+const meta: Meta<typeof TextareaPrimitive> = {
+    title: "Components/Form Primitives/Textarea",
+    component: TextareaPrimitive,
+    argTypes: {
+        onChange: { action: "onChange" },
+        onEnter: { action: "onEnter" },
+        onKeyDown: { action: "onKeyDown" },
+        rows: {
+            control: {
+                type: "number"
+            }
+        }
+    },
+    parameters: {
+        layout: "padded"
+    }
+};
+
+export default meta;
+type Story = StoryObj<typeof TextareaPrimitive>;
+
+export const Default: Story = {};
+
+export const MediumSize: Story = {
+    args: {
+        placeholder: "Custom placeholder",
+        size: "md"
+    }
+};
+
+export const LargeSize: Story = {
+    args: {
+        placeholder: "Custom placeholder",
+        size: "lg"
+    }
+};
+
+export const ExtraLargeSize: Story = {
+    args: {
+        placeholder: "Custom placeholder",
+        size: "xl"
+    }
+};
+
+export const PrimaryVariant: Story = {
+    args: {
+        variant: "primary",
+        placeholder: "Custom placeholder"
+    }
+};
+
+export const PrimaryVariantDisabled: Story = {
+    args: {
+        ...PrimaryVariant.args,
+        disabled: true
+    }
+};
+
+export const PrimaryVariantInvalid: Story = {
+    args: {
+        ...PrimaryVariant.args,
+        invalid: true
+    }
+};
+
+export const SecondaryVariant: Story = {
+    args: {
+        variant: "secondary",
+        placeholder: "Custom placeholder"
+    }
+};
+
+export const SecondaryVariantDisabled: Story = {
+    args: {
+        ...SecondaryVariant.args,
+        disabled: true
+    }
+};
+
+export const SecondaryVariantInvalid: Story = {
+    args: {
+        ...SecondaryVariant.args,
+        invalid: true
+    }
+};
+
+export const GhostVariant: Story = {
+    args: {
+        variant: "ghost",
+        placeholder: "Custom placeholder"
+    }
+};
+
+export const GhostVariantDisabled: Story = {
+    args: {
+        ...GhostVariant.args,
+        disabled: true
+    }
+};
+
+export const GhostVariantInvalid: Story = {
+    args: {
+        ...GhostVariant.args,
+        invalid: true
+    }
+};
+
+export const WithForwardEventOnChange: Story = {
+    args: {
+        ...Default.args,
+        forwardEventOnChange: true
+    }
+};
diff --git a/packages/admin-ui/src/Textarea/TextareaPrimitive.tsx b/packages/admin-ui/src/Textarea/TextareaPrimitive.tsx
new file mode 100644
index 00000000000..4c9be656110
--- /dev/null
+++ b/packages/admin-ui/src/Textarea/TextareaPrimitive.tsx
@@ -0,0 +1,134 @@
+import * as React from "react";
+import { cn, cva, makeDecoratable, type VariantProps } from "~/utils";
+
+const textareaVariants = cva(
+    [
+        "wby-flex wby-min-h-[80px] wby-w-full wby-border-sm wby-text-md focus-visible:wby-outline-none disabled:wby-cursor-not-allowed"
+    ],
+    {
+        variants: {
+            variant: {
+                primary: [
+                    "wby-bg-neutral-base wby-border-neutral-muted wby-text-neutral-strong placeholder:wby-text-neutral-dimmed",
+                    "hover:wby-border-neutral-strong",
+                    "focus:wby-border-neutral-black",
+                    "disabled:wby-bg-neutral-disabled disabled:wby-border-neutral-dimmed disabled:wby-text-neutral-disabled disabled:placeholder:wby-text-neutral-disabled"
+                ],
+                secondary: [
+                    "wby-bg-neutral-light wby-border-neutral-subtle wby-text-neutral-strong placeholder:wby-text-neutral-dimmed",
+                    "hover:wby-bg-neutral-dimmed",
+                    "focus:wby-bg-neutral-base focus:wby-border-neutral-black",
+                    "disabled:wby-bg-neutral-disabled disabled:wby-text-neutral-disabled disabled:placeholder:wby-text-neutral-disabled"
+                ],
+                ghost: [
+                    "wby-bg-transparent wby-border-transparent wby-text-neutral-strong placeholder:wby-text-neutral-dimmed",
+                    "hover:wby-bg-neutral-dark/5",
+                    "focus:wby-bg-neutral-dark/5",
+                    "disabled:wby-bg-transparent disabled:wby-text-neutral-disabled disabled:placeholder:wby-text-neutral-disabled"
+                ]
+            },
+            size: {
+                md: ["wby-px-sm-extra wby-py-xs-plus wby-rounded-md"],
+                lg: ["wby-px-sm-extra wby-py-sm-plus wby-rounded-md"],
+                xl: ["wby-px-md-extra wby-p-md wby-rounded-lg"]
+            },
+            invalid: {
+                true: ""
+            }
+        },
+        compoundVariants: [
+            {
+                variant: "primary",
+                invalid: true,
+                class: "!wby-border-destructive-default"
+            },
+            {
+                variant: "secondary",
+                invalid: true,
+                class: "!wby-border-destructive-default"
+            },
+            {
+                variant: "ghost",
+                invalid: true,
+                class: "!wby-border-destructive-subtle !wby-bg-destructive-subtle"
+            }
+        ],
+        defaultVariants: {
+            variant: "primary",
+            size: "lg"
+        }
+    }
+);
+
+interface TextareaPrimitiveProps
+    extends React.ComponentProps<"textarea">,
+        VariantProps<typeof textareaVariants> {
+    /**
+     * Reference to the textarea element.
+     */
+    textareaRef?: React.Ref<HTMLTextAreaElement>;
+
+    /**
+     * If true, it will pass the native `event` to the `onChange` callback
+     */
+    forwardEventOnChange?: boolean;
+
+    /**
+     * Callback function to be called when the Enter key is pressed.
+     */
+    onEnter?: () => void;
+}
+
+const DecoratableTextareaPrimitive = ({
+    className,
+    variant,
+    invalid,
+    size,
+    textareaRef,
+    forwardEventOnChange,
+    onChange: originalOnChange,
+    onEnter,
+    onKeyDown: originalOnKeyDown,
+    value,
+    ...props
+}: TextareaPrimitiveProps) => {
+    const onChange = React.useCallback(
+        (event: React.SyntheticEvent<HTMLTextAreaElement>) => {
+            if (!originalOnChange) {
+                return;
+            }
+
+            // @ts-expect-error
+            originalOnChange(forwardEventOnChange ? event : event.target.value);
+        },
+        [forwardEventOnChange, originalOnChange]
+    );
+
+    const onKeyDown = React.useCallback(
+        (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+            if (typeof onEnter === "function" && e.key === "Enter") {
+                onEnter();
+            }
+
+            if (typeof originalOnKeyDown === "function") {
+                return originalOnKeyDown(e);
+            }
+        },
+        [originalOnKeyDown, onEnter]
+    );
+
+    return (
+        <textarea
+            {...props}
+            ref={textareaRef}
+            className={cn(textareaVariants({ variant, invalid, size }), className)}
+            onChange={onChange}
+            onKeyDown={onKeyDown}
+            value={value ?? ""}
+        />
+    );
+};
+
+const TextareaPrimitive = makeDecoratable("TextareaPrimitive", DecoratableTextareaPrimitive);
+
+export { TextareaPrimitive, type TextareaPrimitiveProps };
diff --git a/packages/admin-ui/src/Textarea/index.ts b/packages/admin-ui/src/Textarea/index.ts
new file mode 100644
index 00000000000..46b61eff5c9
--- /dev/null
+++ b/packages/admin-ui/src/Textarea/index.ts
@@ -0,0 +1,2 @@
+export * from "./Textarea";
+export * from "./TextareaPrimitive";
diff --git a/packages/admin-ui/src/TimeAgo/index.ts b/packages/admin-ui/src/TimeAgo/index.ts
new file mode 100644
index 00000000000..60c745d4535
--- /dev/null
+++ b/packages/admin-ui/src/TimeAgo/index.ts
@@ -0,0 +1,5 @@
+import TimeAgo from "timeago-react";
+
+export type { TimeAgoProps, Opts, TDate } from "timeago-react";
+
+export { TimeAgo };
diff --git a/packages/admin-ui/src/Toast/Toast.mdx b/packages/admin-ui/src/Toast/Toast.mdx
new file mode 100644
index 00000000000..84d760a32a7
--- /dev/null
+++ b/packages/admin-ui/src/Toast/Toast.mdx
@@ -0,0 +1,467 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+
+import * as ToastStories from './useToast.stories';
+
+<Meta of={ToastStories} />
+
+# Toast
+
+The Toast component is a non-intrusive notification element that appears temporarily to provide feedback, confirmation, or important information to users. Toasts are displayed in a consistent location (typically top-right) and automatically disappear after a set duration, making them ideal for transient messages that don't require user action.
+
+## Usage
+
+<Canvas of={ToastStories.Documentation} source={ { code: `
+import React, { useState } from "react";
+import { useToast, Toast, Button } from "@webiny/admin-ui";
+
+const ToastExample = () => {
+    const [lastToast, setLastToast] = useState<string | number>("");
+    const { showToast, hideToast, hideAllToasts } = useToast();
+
+        const handleShowToast = () => {
+            const toast = showToast({
+                title: "New entry created"
+            });
+            setLastToast(toast);
+        };
+
+        return (
+            <>
+                <Button text="Show Toast" onClick={handleShowToast} />
+                <Button text="Hide latest toast" onClick={() => hideToast(lastToast)} />
+                <Button text="Hide all toasts" onClick={() => hideAllToasts()} />
+                <Toast.Provider />
+            </>
+        );
+    };
+
+    export default ToastExample;
+
+` } }
+        additionalActions={[
+            {
+                title: 'Open in GitHub',
+                onClick: () => {
+                    window.open(
+                        'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Toast/Toast.tsx',
+                        '_blank'
+                    );
+                },
+            }
+        ]}
+/>
+
+<Controls of={ToastStories.Documentation} />
+
+```tsx
+import React, { useState } from "react";
+import { useToast, Toast, Button } from "@webiny/admin-ui";
+
+const ToastExample = () => {
+    const [lastToast, setLastToast] = useState<string | number>("");
+    const { showToast, hideToast, hideAllToasts } = useToast();
+
+    const handleShowToast = () => {
+        const toast = showToast({
+            title: "New entry created"
+        });
+        setLastToast(toast);
+    };
+
+    return (
+        <>
+            <Button text="Show Toast" onClick={handleShowToast} />
+            <Button text="Hide latest toast" onClick={() => hideToast(lastToast)} />
+            <Button text="Hide all toasts" onClick={() => hideAllToasts()} />
+            <Toast.Provider />
+        </>
+    );
+};
+
+export default ToastExample;
+```
+
+## Examples
+
+### Basic Toast
+
+The simplest form of toast with just a title.
+
+<Canvas of={ToastStories.Default} source={ { code: `
+import React, { useState } from "react";
+import { useToast, Toast, Button } from "@webiny/admin-ui";
+
+const BasicToastExample = () => {
+    const [lastToast, setLastToast] = useState<string | number>("");
+    const { showToast, hideToast, hideAllToasts } = useToast();
+
+    return (
+        <>
+            <Button
+                text="Show Toast"
+                onClick={() => {
+                    const toast = showToast({
+                        title: "New entry created"
+                    });
+                    setLastToast(toast);
+                }}
+            />
+            <Button text="Hide latest toast" onClick={() => hideToast(lastToast)} />
+            <Button text="Hide all toasts" onClick={() => hideAllToasts()} />
+            <Toast.Provider />
+        </>
+    );
+};
+
+export default BasicToastExample;
+` } } />
+
+### Subtle Variant
+
+A more subtle toast style with a light background.
+
+<Canvas of={ToastStories.SubtleVariant} source={ { code: `
+import React, { useState } from "react";
+import { useToast, Toast, Button } from "@webiny/admin-ui";
+
+const SubtleToastExample = () => {
+    const [lastToast, setLastToast] = useState<string | number>("");
+    const { showToast, hideToast, hideAllToasts } = useToast();
+
+    return (
+        <>
+            <Button
+                text="Show Subtle Toast"
+                onClick={() => {
+                    const toast = showToast({
+                        title: "New entry created",
+                        variant: "subtle"
+                    });
+                    setLastToast(toast);
+                }}
+            />
+            <Button text="Hide latest toast" onClick={() => hideToast(lastToast)} />
+            <Button text="Hide all toasts" onClick={() => hideAllToasts()} />
+            <Toast.Provider />
+        </>
+    );
+};
+
+export default SubtleToastExample;
+` } } />
+
+### With Description
+
+Add more context with a description.
+
+<Canvas of={ToastStories.WithDescription} source={ { code: `
+import React, { useState } from "react";
+import { useToast, Toast, Button } from "@webiny/admin-ui";
+
+const ToastWithDescriptionExample = () => {
+    const [lastToast, setLastToast] = useState<string | number>("");
+    const { showToast, hideToast, hideAllToasts } = useToast();
+
+    return (
+        <>
+            <Button
+                text="Show Toast with Description"
+                onClick={() => {
+                    const toast = showToast({
+                        title: "New entry created",
+                        description: 'Entry "Article One" has been successfully created'
+                    });
+                    setLastToast(toast);
+                }}
+            />
+            <Button text="Hide latest toast" onClick={() => hideToast(lastToast)} />
+            <Button text="Hide all toasts" onClick={() => hideAllToasts()} />
+            <Toast.Provider />
+        </>
+    );
+};
+
+export default ToastWithDescriptionExample;
+` } } />
+
+### With Component Elements
+
+Use the component versions of title and description for more control.
+
+<Canvas of={ToastStories.WithDescriptionComponent} source={ { code: `
+import React, { useState } from "react";
+import { useToast, Toast, Button } from "@webiny/admin-ui";
+
+const ToastWithComponentsExample = () => {
+    const [lastToast, setLastToast] = useState<string | number>("");
+    const { showToast, hideToast, hideAllToasts } = useToast();
+
+    return (
+        <>
+            <Button
+                text="Show Toast with Components"
+                onClick={() => {
+                    const toast = showToast({
+                        title: <Toast.Title text={"New entry created"} />,
+                        description: (
+                            <Toast.Description text={'Entry "Article One" has been successfully created'} />
+                        )
+                    });
+                    setLastToast(toast);
+                }}
+            />
+            <Button text="Hide latest toast" onClick={() => hideToast(lastToast)} />
+            <Button text="Hide all toasts" onClick={() => hideAllToasts()} />
+            <Toast.Provider />
+        </>
+    );
+};
+
+export default ToastWithComponentsExample;
+` } } />
+
+### With Actions
+
+Add action buttons to the toast for user interaction.
+
+<Canvas of={ToastStories.WithActions} source={ { code: `
+import React, { useState } from "react";
+import { useToast, Toast, Button } from "@webiny/admin-ui";
+
+const ToastWithActionsExample = () => {
+    const [lastToast, setLastToast] = useState<string | number>("");
+    const { showToast, hideToast, hideAllToasts } = useToast();
+
+    return (
+        <>
+            <Button
+                text="Show Toast with Actions"
+                onClick={() => {
+                    const toast = showToast({
+                        title: "New entry created",
+                        actions: (
+                            <Toast.Actions>
+                                <Button
+                                    key={"action-1"}
+                                    text={"Do the action"}
+                                    onClick={() => console.log("doTheAction")}
+                                />
+                                <Button
+                                    key={"action-2"}
+                                    text={"Dismiss"}
+                                    onClick={() => console.log("dismiss")}
+                                    variant={"secondary"}
+                                />
+                            </Toast.Actions>
+                        )
+                    });
+                    setLastToast(toast);
+                }}
+            />
+            <Button text="Hide latest toast" onClick={() => hideToast(lastToast)} />
+            <Button text="Hide all toasts" onClick={() => hideAllToasts()} />
+            <Toast.Provider />
+        </>
+    );
+};
+
+export default ToastWithActionsExample;
+` } } />
+
+### With Description and Actions
+
+Combine description and actions for a comprehensive toast.
+
+<Canvas of={ToastStories.WithDescriptionAndActions} source={ { code: `
+import React, { useState } from "react";
+import { useToast, Toast, Button } from "@webiny/admin-ui";
+
+const ToastWithDescriptionAndActionsExample = () => {
+    const [lastToast, setLastToast] = useState<string | number>("");
+    const { showToast, hideToast, hideAllToasts } = useToast();
+
+    return (
+        <>
+            <Button
+                text="Show Complete Toast"
+                onClick={() => {
+                    const toast = showToast({
+                        title: "New entry created",
+                        description: (
+                            <Toast.Description text={'Entry "Article One" has been successfully created'} />
+                        ),
+                        actions: (
+                            <Toast.Actions>
+                                <Button
+                                    key={"action-1"}
+                                    text={"Do the action"}
+                                    onClick={() => console.log("doTheAction")}
+                                />
+                                <Button
+                                    key={"action-2"}
+                                    text={"Dismiss"}
+                                    onClick={() => console.log("dismiss")}
+                                    variant={"secondary"}
+                                />
+                            </Toast.Actions>
+                        )
+                    });
+                    setLastToast(toast);
+                }}
+            />
+            <Button text="Hide latest toast" onClick={() => hideToast(lastToast)} />
+            <Button text="Hide all toasts" onClick={() => hideAllToasts()} />
+            <Toast.Provider />
+        </>
+    );
+};
+
+export default ToastWithDescriptionAndActionsExample;
+` } } />
+
+### With Custom Icon
+
+Customize the icon to match the context of your notification.
+
+<Canvas of={ToastStories.WithCustomIcon} source={ { code: `
+import React, { useState } from "react";
+import { useToast, Toast, Button, Icon } from "@webiny/admin-ui";
+import { ReactComponent as SettingsIcon } from "@webiny/icons/settings.svg";
+
+const ToastWithCustomIconExample = () => {
+    const [lastToast, setLastToast] = useState<string | number>("");
+    const { showToast, hideToast, hideAllToasts } = useToast();
+
+    return (
+        <>
+            <Button
+                text="Show Toast with Custom Icon"
+                onClick={() => {
+                    const toast = showToast({
+                        title: "New entry created",
+                        icon: <Icon icon={<SettingsIcon />} label={"Settings"} />
+                    });
+                    setLastToast(toast);
+                }}
+            />
+            <Button text="Hide latest toast" onClick={() => hideToast(lastToast)} />
+            <Button text="Hide all toasts" onClick={() => hideAllToasts()} />
+            <Toast.Provider />
+        </>
+    );
+};
+
+export default ToastWithCustomIconExample;
+` } } />
+
+### With Infinite Duration
+
+Create a toast that doesn't automatically dismiss.
+
+<Canvas of={ToastStories.WithInfiniteDuration} source={ { code: `
+import React, { useState } from "react";
+import { useToast, Toast, Button } from "@webiny/admin-ui";
+
+const ToastWithInfiniteDurationExample = () => {
+    const [lastToast, setLastToast] = useState<string | number>("");
+    const { showToast, hideToast, hideAllToasts } = useToast();
+
+    return (
+        <>
+            <Button
+                text="Show Persistent Toast"
+                onClick={() => {
+                    const toast = showToast({
+                        title: "New entry created",
+                        duration: Infinity
+                    });
+                    setLastToast(toast);
+                }}
+            />
+            <Button text="Hide latest toast" onClick={() => hideToast(lastToast)} />
+            <Button text="Hide all toasts" onClick={() => hideAllToasts()} />
+            <Toast.Provider />
+        </>
+    );
+};
+
+export default ToastWithInfiniteDurationExample;
+` } } />
+
+### Not Dismissible
+
+Create a toast that can't be manually dismissed.
+
+<Canvas of={ToastStories.NotDismissible} source={ { code: `
+import React, { useState } from "react";
+import { useToast, Toast, Button } from "@webiny/admin-ui";
+
+const ToastNotDismissibleExample = () => {
+    const [lastToast, setLastToast] = useState<string | number>("");
+    const { showToast, hideToast, hideAllToasts } = useToast();
+
+    return (
+        <>
+            <Button
+                text="Show Non-Dismissible Toast"
+                onClick={() => {
+                    const toast = showToast({
+                        title: "New entry created",
+                        dismissible: false
+                    });
+                    setLastToast(toast);
+                }}
+            />
+            <Button text="Hide latest toast" onClick={() => hideToast(lastToast)} />
+            <Button text="Hide all toasts" onClick={() => hideAllToasts()} />
+            <Toast.Provider />
+        </>
+    );
+};
+
+export default ToastNotDismissibleExample;
+` } } />
+
+### Custom Position
+
+Change the position where toasts appear on the screen.
+
+<Canvas of={ToastStories.withCustomPosition} source={ { code: `
+import React, { useState } from "react";
+import { useToast, Toast, Button } from "@webiny/admin-ui";
+
+const ToastWithCustomPositionExample = () => {
+    const [lastToast, setLastToast] = useState<string | number>("");
+    const { showToast, hideToast, hideAllToasts } = useToast();
+
+    return (
+        <>
+            <Button
+                text="Show Bottom-Right Toast"
+                onClick={() => {
+                    const toast = showToast({
+                        title: "New entry created",
+                        position: "bottom-right"
+                    });
+                    setLastToast(toast);
+                }}
+            />
+            <Button text="Hide latest toast" onClick={() => hideToast(lastToast)} />
+            <Button text="Hide all toasts" onClick={() => hideAllToasts()} />
+            <Toast.Provider />
+        </>
+    );
+};
+
+export default ToastWithCustomPositionExample;
+` } } />
+
+## API
+
+### useToast Hook
+
+The `useToast` hook provides the following methods:
+
+- `showToast(params)`: Displays a toast with the specified parameters and returns a toast ID
+- `hideToast(id)`: Hides a specific toast by its ID
+- `hideAllToasts()`: Hides all currently displayed toasts
diff --git a/packages/admin-ui/src/Toast/Toast.tsx b/packages/admin-ui/src/Toast/Toast.tsx
new file mode 100644
index 00000000000..1f088bb9a1c
--- /dev/null
+++ b/packages/admin-ui/src/Toast/Toast.tsx
@@ -0,0 +1,65 @@
+import * as React from "react";
+import { Toaster, type ToasterProps } from "sonner";
+import { makeDecoratable, withStaticProps } from "~/utils";
+import { type IconButtonProps } from "~/Button";
+import { Icon as BaseIcon } from "~/Icon";
+import {
+    ToastActions,
+    ToastClose,
+    ToastDescription,
+    ToastIcon,
+    ToastRoot,
+    ToastTitle,
+    type ToastRootProps
+} from "./components";
+
+interface ToastProps extends Omit<ToastRootProps, "title" | "content" | "children"> {
+    title: React.ReactElement<typeof ToastTitle>;
+    description?: React.ReactElement<typeof ToastDescription>;
+    icon?: React.ReactElement<typeof BaseIcon>;
+    actions?: React.ReactElement<typeof ToastActions>;
+    onCloseClick: () => void;
+    dismissible?: boolean;
+}
+
+const DecoratableToast = ({
+    title,
+    description,
+    icon,
+    actions,
+    onCloseClick,
+    dismissible = true,
+    ...props
+}: ToastProps) => {
+    return (
+        <ToastRoot hasDescription={!!description || !!actions} {...props}>
+            <ToastIcon icon={icon} />
+            <div className="wby-w-64">
+                {title}
+                {description && description}
+                {actions && actions}
+            </div>
+            {dismissible && (
+                <ToastClose
+                    onClick={onCloseClick}
+                    variant={
+                        props.variant === "subtle"
+                            ? ("subtle" as IconButtonProps["variant"])
+                            : ("ghost-negative" as IconButtonProps["variant"])
+                    }
+                />
+            )}
+        </ToastRoot>
+    );
+};
+
+const Toast = withStaticProps(makeDecoratable("Toast", DecoratableToast), {
+    Title: ToastTitle,
+    Description: ToastDescription,
+    Actions: ToastActions,
+    Provider: (props: ToasterProps) => (
+        <Toaster expand={true} duration={6000} position={"top-right"} {...props} />
+    )
+});
+
+export { Toast, type ToastProps };
diff --git a/packages/admin-ui/src/Toast/components/ToastActions.tsx b/packages/admin-ui/src/Toast/components/ToastActions.tsx
new file mode 100644
index 00000000000..4227edc8a77
--- /dev/null
+++ b/packages/admin-ui/src/Toast/components/ToastActions.tsx
@@ -0,0 +1,22 @@
+import React from "react";
+import { cn, makeDecoratable } from "~/utils";
+
+const DecoratableToastActions = ({
+    children,
+    className,
+    ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+    <div
+        {...props}
+        className={cn(
+            "wby-flex wby-w-full wby-items-center wby-justify-start wby-gap-sm wby-mt-md",
+            className
+        )}
+    >
+        {children}
+    </div>
+);
+
+const ToastActions = makeDecoratable("ToastActions", DecoratableToastActions);
+
+export { ToastActions };
diff --git a/packages/admin-ui/src/Toast/components/ToastClose.tsx b/packages/admin-ui/src/Toast/components/ToastClose.tsx
new file mode 100644
index 00000000000..93b643014b7
--- /dev/null
+++ b/packages/admin-ui/src/Toast/components/ToastClose.tsx
@@ -0,0 +1,17 @@
+import React from "react";
+import { ReactComponent as CloseIcon } from "@webiny/icons/close.svg";
+import { IconButton, type IconButtonProps } from "~/Button";
+import { Icon } from "~/Icon";
+
+type ToastCloseProps = IconButtonProps;
+
+const ToastClose = (props: ToastCloseProps) => (
+    <IconButton
+        icon={<Icon label={"Close"} icon={<CloseIcon />} />}
+        size={"sm"}
+        iconSize={"lg"}
+        {...props}
+    />
+);
+
+export { ToastClose, type ToastCloseProps };
diff --git a/packages/admin-ui/src/Toast/components/ToastDescription.tsx b/packages/admin-ui/src/Toast/components/ToastDescription.tsx
new file mode 100644
index 00000000000..8103455a92a
--- /dev/null
+++ b/packages/admin-ui/src/Toast/components/ToastDescription.tsx
@@ -0,0 +1,25 @@
+import React from "react";
+import { cn, makeDecoratable } from "~/utils";
+import { Text } from "~/Text";
+
+type DescriptionProps = Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & {
+    text: React.ReactNode;
+};
+
+const DecoratableToastDescription = ({ text, className, ...props }: DescriptionProps) => (
+    <div
+        {...props}
+        className={cn(
+            "wby-mt-xs-plus group-[.wby-default-variant]:wby-text-neutral-dimmed group-[.wby-subtle-variant]:wby-text-neutral-strong",
+            className
+        )}
+    >
+        <Text as={"div"} size={"md"} className={"wby-text-neutral-dimmed"}>
+            {text}
+        </Text>
+    </div>
+);
+
+const ToastDescription = makeDecoratable("ToastDescription", DecoratableToastDescription);
+
+export { ToastDescription, type DescriptionProps };
diff --git a/packages/admin-ui/src/Toast/components/ToastIcon.tsx b/packages/admin-ui/src/Toast/components/ToastIcon.tsx
new file mode 100644
index 00000000000..4fc6a414d7d
--- /dev/null
+++ b/packages/admin-ui/src/Toast/components/ToastIcon.tsx
@@ -0,0 +1,28 @@
+import React from "react";
+import { ReactComponent as NotificationsIconActive } from "@webiny/icons/notifications_active.svg";
+import { Icon as BaseIcon } from "~/Icon";
+
+const ToastNotificationIcon = (
+    <BaseIcon
+        icon={<NotificationsIconActive />}
+        label={"Notification"}
+        size={"md"}
+        color={"accent"}
+    />
+);
+
+type ToastIconProps = {
+    icon?: React.ReactElement<typeof BaseIcon>;
+};
+
+const ToastIcon = ({ icon }: ToastIconProps) => {
+    return (
+        <span>
+            {React.isValidElement(icon)
+                ? React.cloneElement(icon, { ...ToastNotificationIcon.props, ...icon.props })
+                : React.cloneElement(ToastNotificationIcon)}
+        </span>
+    );
+};
+
+export { ToastIcon, type ToastIconProps };
diff --git a/packages/admin-ui/src/Toast/components/ToastRoot.tsx b/packages/admin-ui/src/Toast/components/ToastRoot.tsx
new file mode 100644
index 00000000000..c9b0c52e109
--- /dev/null
+++ b/packages/admin-ui/src/Toast/components/ToastRoot.tsx
@@ -0,0 +1,32 @@
+import React from "react";
+import { cn, cva, type VariantProps } from "~/utils";
+
+const toastRootVariants = cva(
+    "wby-group wby-pointer-events-auto wby-relative wby-flex wby-w-full wby-items-center wby-justify-start wby-p-md wby-gap-sm-extra wby-self-stretch wby-overflow-hidden wby-rounded-md wby-border-sm wby-border-neutral-dimmed wby-shadow-lg",
+    {
+        variants: {
+            variant: {
+                default: "wby-default-variant wby-bg-neutral-dark",
+                subtle: "wby-subtle-variant wby-bg-white"
+            },
+            hasDescription: {
+                true: "wby-has-description wby-items-start wby-justify-start"
+            }
+        },
+        defaultVariants: {
+            variant: "default"
+        }
+    }
+);
+
+type ToastRootProps = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof toastRootVariants>;
+
+const ToastRoot = ({ className, hasDescription, variant, children, ...props }: ToastRootProps) => {
+    return (
+        <div className={cn(toastRootVariants({ variant, hasDescription }), className)} {...props}>
+            {children}
+        </div>
+    );
+};
+
+export { ToastRoot, type ToastRootProps, toastRootVariants };
diff --git a/packages/admin-ui/src/Toast/components/ToastTitle.tsx b/packages/admin-ui/src/Toast/components/ToastTitle.tsx
new file mode 100644
index 00000000000..87b8c53b40f
--- /dev/null
+++ b/packages/admin-ui/src/Toast/components/ToastTitle.tsx
@@ -0,0 +1,23 @@
+import React from "react";
+import { cn, makeDecoratable } from "~/utils";
+import { Heading } from "~/Heading";
+
+type ToastTitleProps = Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & {
+    text: React.ReactNode;
+};
+
+const DecoratableToastTitle = ({ text, className, ...props }: ToastTitleProps) => (
+    <div
+        {...props}
+        className={cn(
+            "group-[.wby-default-variant]:wby-text-neutral-light group-[.wby-subtle-variant]:wby-text-neutral-primary wby-font-normal group-[.wby-has-description]:wby-font-semibold",
+            className
+        )}
+    >
+        <Heading level={6}>{text}</Heading>
+    </div>
+);
+
+const ToastTitle = makeDecoratable("ToastTitle", DecoratableToastTitle);
+
+export { ToastTitle, type ToastTitleProps };
diff --git a/packages/admin-ui/src/Toast/components/index.ts b/packages/admin-ui/src/Toast/components/index.ts
new file mode 100644
index 00000000000..739528b8e50
--- /dev/null
+++ b/packages/admin-ui/src/Toast/components/index.ts
@@ -0,0 +1,6 @@
+export * from "./ToastActions";
+export * from "./ToastClose";
+export * from "./ToastDescription";
+export * from "./ToastIcon";
+export * from "./ToastRoot";
+export * from "./ToastTitle";
diff --git a/packages/admin-ui/src/Toast/index.ts b/packages/admin-ui/src/Toast/index.ts
new file mode 100644
index 00000000000..e768b190d6b
--- /dev/null
+++ b/packages/admin-ui/src/Toast/index.ts
@@ -0,0 +1,2 @@
+export * from "./Toast";
+export * from "./useToast";
diff --git a/packages/admin-ui/src/Toast/useToast.stories.tsx b/packages/admin-ui/src/Toast/useToast.stories.tsx
new file mode 100644
index 00000000000..56a7b3e30ae
--- /dev/null
+++ b/packages/admin-ui/src/Toast/useToast.stories.tsx
@@ -0,0 +1,210 @@
+import React, { useState } from "react";
+import { ReactComponent as SettingsIcon } from "@webiny/icons/settings.svg";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Toast } from "./Toast";
+import { useToast, type ShowToastParams } from "./useToast";
+import { Button } from "~/Button";
+import { Icon } from "~/Icon";
+
+const ToastComponent = (props: ShowToastParams) => {
+    const [lastToast, setLastToast] = useState<string | number>("");
+    const { showToast, hideToast, hideAllToasts } = useToast();
+    return (
+        <>
+            <Button
+                text={"Show Toast"}
+                onClick={() => {
+                    const toast = showToast(props);
+                    setLastToast(toast);
+                }}
+            />
+            <Button text={"Hide latest toast"} onClick={() => hideToast(lastToast)} />
+            <Button text={"Hide all toasts"} onClick={() => hideAllToasts()} />
+        </>
+    );
+};
+
+const meta: Meta<ShowToastParams> = {
+    title: "Components/Toast",
+    component: ToastComponent,
+    parameters: {
+        layout: "fullscreen"
+    },
+    argTypes: {
+        variant: { control: "select", options: ["default", "subtle"] }
+    },
+    decorators: [
+        Story => (
+            <div className="wby-w-full wby-h-64 wby-flex wby-justify-center wby-items-center wby-gap-sm">
+                <Story />
+                <Toast.Provider />
+            </div>
+        )
+    ]
+};
+
+export default meta;
+
+type Story = StoryObj<ShowToastParams>;
+
+export const Default: Story = {
+    args: {
+        title: "New entry created"
+    }
+};
+
+export const SubtleVariant: Story = {
+    args: {
+        ...Default.args,
+        variant: "subtle"
+    }
+};
+
+export const WithTitleComponent: Story = {
+    args: {
+        title: <Toast.Title text={"New entry created"} />
+    }
+};
+
+export const WithDescription: Story = {
+    args: {
+        ...Default.args,
+        description: 'Entry "Article One" has been successfully created'
+    }
+};
+
+export const WithDescriptionComponent: Story = {
+    args: {
+        ...Default.args,
+        description: (
+            <Toast.Description text={'Entry "Article One" has been successfully created'} />
+        )
+    }
+};
+
+export const WithActions: Story = {
+    args: {
+        ...Default.args,
+        actions: (
+            <Toast.Actions>
+                <Button
+                    key={"action-1"}
+                    text={"Do the action"}
+                    onClick={() => console.log("doTheAction")}
+                />
+                <Button
+                    key={"action-2"}
+                    text={"Dismiss"}
+                    onClick={() => console.log("dismiss")}
+                    variant={"secondary"}
+                />
+            </Toast.Actions>
+        )
+    }
+};
+
+export const WithDescriptionAndActions: Story = {
+    args: {
+        ...Default.args,
+        description: (
+            <Toast.Description text={'Entry "Article One" has been successfully created'} />
+        ),
+        actions: (
+            <Toast.Actions>
+                <Button
+                    key={"action-1"}
+                    text={"Do the action"}
+                    onClick={() => console.log("doTheAction")}
+                />
+                <Button
+                    key={"action-2"}
+                    text={"Dismiss"}
+                    onClick={() => console.log("dismiss")}
+                    variant={"secondary"}
+                />
+            </Toast.Actions>
+        )
+    }
+};
+
+export const WithCustomIcon: Story = {
+    args: {
+        ...Default.args,
+        icon: <Icon icon={<SettingsIcon />} label={"Settings"} />
+    }
+};
+
+export const WithInfiniteDuration: Story = {
+    args: {
+        ...Default.args,
+        duration: Infinity
+    }
+};
+
+export const NotDismissible: Story = {
+    args: {
+        ...Default.args,
+        dismissible: false
+    }
+};
+
+export const withCustomPosition: Story = {
+    args: {
+        ...Default.args,
+        position: "bottom-right"
+    }
+};
+
+export const Documentation: Story = {
+    args: {
+        title: "New entry created",
+        description: "Entry has been successfully created",
+        variant: "default",
+        position: "top-right",
+        duration: 6000,
+        dismissible: true,
+        actions: undefined,
+        icon: undefined
+    },
+    argTypes: {
+        title: {
+            description: "Please refer to the 'With Title Component' example below for details."
+        },
+        description: {
+            description:
+                "Please refer to the 'With Description' and 'With Description Component' examples below for details."
+        },
+        variant: {
+            description: "Variant of the toast."
+        },
+        actions: {
+            description: "Please refer to the 'With Actions' example below for details.",
+            control: "none"
+        },
+        icon: {
+            description: "Please refer to the 'With Custom Icon' example below for details.",
+            control: "none"
+        },
+        duration: {
+            description:
+                "Duration in milliseconds before the toast auto-dismisses. Please refer to the 'With Infinite Duration' example below for details.",
+            control: "number"
+        },
+        dismissible: {
+            description: "Please refer to the 'Not Dismissible' example below for details.",
+            control: "none"
+        },
+        position: {
+            description: "Please refer to the 'With Custom Position' example below for details.",
+            control: "select",
+            options: [
+                "top-left",
+                "top-right",
+                "bottom-left",
+                "bottom-right",
+                "top-center",
+                "bottom-center"
+            ]
+        }
+    }
+};
diff --git a/packages/admin-ui/src/Toast/useToast.tsx b/packages/admin-ui/src/Toast/useToast.tsx
new file mode 100644
index 00000000000..2528eb31537
--- /dev/null
+++ b/packages/admin-ui/src/Toast/useToast.tsx
@@ -0,0 +1,106 @@
+import * as React from "react";
+import { toast as sonnerToast, type ToasterProps as SonnerToasterProps } from "sonner";
+import { ToastActions, ToastDescription, ToastTitle, type ToastRootProps } from "./components";
+import { Toast } from "./Toast";
+import { Icon } from "~/Icon";
+import { generateId } from "~/utils";
+
+type ShowToastParams = {
+    title: React.ReactElement<typeof ToastTitle> | string;
+    description?: React.ReactElement<typeof ToastDescription> | string;
+    icon?: React.ReactElement<typeof Icon>;
+    actions?: React.ReactElement<typeof ToastActions>;
+    dismissible?: boolean;
+    duration?: number;
+    position?: SonnerToasterProps["position"];
+    variant?: ToastRootProps["variant"];
+};
+
+const useToast = () => {
+    const getTitle = React.useCallback((title: React.ReactElement<typeof ToastTitle> | string) => {
+        return typeof title === "string" ? <ToastTitle text={title} /> : title;
+    }, []);
+
+    const getDescription = React.useCallback(
+        (description: React.ReactElement<typeof ToastDescription> | string | undefined) => {
+            return typeof description === "string" ? (
+                <ToastDescription text={description} />
+            ) : (
+                description
+            );
+        },
+        []
+    );
+
+    const showToast = React.useCallback(
+        (params: ShowToastParams) => {
+            const {
+                title,
+                description,
+                icon,
+                actions,
+                variant,
+                dismissible,
+                duration = 6000,
+                position = "top-right"
+            } = params;
+
+            const id = generateId();
+
+            return sonnerToast.custom(
+                toast => (
+                    <Toast
+                        title={getTitle(title)}
+                        description={getDescription(description)}
+                        icon={icon}
+                        actions={actions}
+                        variant={variant}
+                        onCloseClick={() => sonnerToast.dismiss(toast)}
+                        dismissible={dismissible}
+                    />
+                ),
+                {
+                    id,
+                    duration,
+                    dismissible,
+                    position
+                }
+            );
+        },
+        [getTitle, getDescription, sonnerToast]
+    );
+
+    const hideToast = React.useCallback(
+        (id: number | string) => {
+            return sonnerToast.dismiss(id);
+        },
+        [sonnerToast]
+    );
+
+    const hideAllToasts = React.useCallback(() => {
+        const toastIds = sonnerToast.getToasts().map(toast => toast.id);
+
+        if (toastIds.length === 0) {
+            return;
+        }
+
+        // Dismiss each toast with a small delay between them
+        // This helps ensure each dismissal is processed properly
+        toastIds.forEach((id, index) => {
+            setTimeout(() => {
+                sonnerToast.dismiss(id);
+            }, index * 50);
+        });
+    }, [sonnerToast]);
+
+    return React.useMemo(
+        () => ({
+            showToast,
+            hideToast,
+            hideAllToasts
+        }),
+        [showToast, hideToast, hideAllToasts]
+    );
+};
+
+export { useToast, type ShowToastParams };
diff --git a/packages/admin-ui/src/Tooltip/Tooltip.mdx b/packages/admin-ui/src/Tooltip/Tooltip.mdx
new file mode 100644
index 00000000000..adc353a37bd
--- /dev/null
+++ b/packages/admin-ui/src/Tooltip/Tooltip.mdx
@@ -0,0 +1,364 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+
+import * as TooltipStories from './Tooltip.stories';
+
+<Meta of={TooltipStories} />
+
+# Tooltip
+
+The Tooltip component is a UI element that displays informative text when users hover over, focus on, or tap an element. Tooltips are useful for providing additional context, explanations, or guidance without cluttering the interface.
+
+## Usage
+
+<Canvas of={TooltipStories.Documentation} source={ { code: `
+import React from "react";
+import { Tooltip } from "@webiny/admin-ui";
+
+const TooltipExample = () => {
+    return (
+        <Tooltip.Provider>
+            <Tooltip
+                trigger={<p>Tooltip trigger</p>}
+                content={
+                    <>
+                        <strong>Lorem ipsum dolor sit amet</strong>, consectetur adipiscing elit. Donec
+                        viverra sit amet massa sagittis sollicitudin.
+                    </>
+                }
+                align="center"
+                side="top"
+                variant="accent"
+                showArrow={true}
+            />
+        </Tooltip.Provider>
+    );
+};
+
+export default TooltipExample;
+
+` } }
+        additionalActions={[
+            {
+                title: 'Open in GitHub',
+                onClick: () => {
+                    window.open(
+                        'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Tooltip/Tooltip.tsx',
+                        '_blank'
+                    );
+                },
+            }
+        ]}
+/>
+
+<Controls of={TooltipStories.Documentation} />
+
+```tsx
+import React from "react";
+import { Tooltip } from "@webiny/admin-ui";
+
+const TooltipExample = () => {
+    return (
+        <Tooltip.Provider>
+            <Tooltip
+                trigger={<p>Tooltip trigger</p>}
+                content={
+                    <>
+                        <strong>Lorem ipsum dolor sit amet</strong>, consectetur adipiscing elit. Donec
+                        viverra sit amet massa sagittis sollicitudin.
+                    </>
+                }
+                align="center"
+                side="top"
+                variant="accent"
+                showArrow={true}
+            />
+        </Tooltip.Provider>
+    );
+};
+
+export default TooltipExample;
+```
+
+## Examples
+
+### Basic Tooltip
+
+A basic tooltip with default styling.
+
+<Canvas of={TooltipStories.Default} source={ { code: `
+import React from "react";
+import { Tooltip } from "@webiny/admin-ui";
+
+const BasicTooltipExample = () => {
+    return (
+        <Tooltip.Provider>
+            <Tooltip
+                trigger={<p>Tooltip trigger</p>}
+                content={
+                    <>
+                        <strong>Lorem ipsum dolor sit amet</strong>, consectetur adipiscing elit. Donec
+                        viverra sit amet massa sagittis sollicitudin.
+                    </>
+                }
+            />
+        </Tooltip.Provider>
+    );
+};
+
+export default BasicTooltipExample;
+` } } />
+
+### Accent Variant
+
+A tooltip with the accent color variant for higher contrast.
+
+<Canvas of={TooltipStories.AccentVariant} source={ { code: `
+import React from "react";
+import { Tooltip } from "@webiny/admin-ui";
+
+const AccentVariantExample = () => {
+    return (
+        <Tooltip.Provider>
+            <Tooltip
+                trigger={<p>Tooltip trigger</p>}
+                content={
+                    <>
+                        <strong>Lorem ipsum dolor sit amet</strong>, consectetur adipiscing elit. Donec
+                        viverra sit amet massa sagittis sollicitudin.
+                    </>
+                }
+                variant="accent"
+            />
+        </Tooltip.Provider>
+    );
+};
+
+export default AccentVariantExample;
+` } } />
+
+### Subtle Variant
+
+A tooltip with the subtle variant, which is useful on dark backgrounds.
+
+<Canvas of={TooltipStories.SubtleVariant} source={ { code: `
+import React from "react";
+import { Tooltip } from "@webiny/admin-ui";
+
+const SubtleVariantExample = () => {
+    return (
+        <Tooltip.Provider>
+            <Tooltip
+                trigger={<p>Tooltip trigger</p>}
+                content={
+                    <>
+                        <strong>Lorem ipsum dolor sit amet</strong>, consectetur adipiscing elit. Donec
+                        viverra sit amet massa sagittis sollicitudin.
+                    </>
+                }
+                variant="subtle"
+            />
+        </Tooltip.Provider>
+    );
+};
+
+export default SubtleVariantExample;
+` } } />
+
+### Without Arrow
+
+A tooltip without the pointing arrow.
+
+<Canvas of={TooltipStories.WithoutArrow} source={ { code: `
+import React from "react";
+import { Tooltip } from "@webiny/admin-ui";
+
+const WithoutArrowExample = () => {
+    return (
+        <Tooltip.Provider>
+            <Tooltip
+                trigger={<p>Tooltip trigger</p>}
+                content={
+                    <>
+                        <strong>Lorem ipsum dolor sit amet</strong>, consectetur adipiscing elit. Donec
+                        viverra sit amet massa sagittis sollicitudin.
+                    </>
+                }
+                showArrow={false}
+            />
+        </Tooltip.Provider>
+    );
+};
+
+export default WithoutArrowExample;
+` } } />
+
+### With Icon Trigger
+
+Tooltips are commonly used with icon buttons to provide context about the icon's function.
+
+<Canvas of={TooltipStories.WithIconTrigger} source={ { code: `
+import React from "react";
+import { Tooltip, Icon } from "@webiny/admin-ui";
+import { ReactComponent as InfoIcon } from "@webiny/icons/info.svg";
+
+const WithIconTriggerExample = () => {
+    return (
+        <Tooltip.Provider>
+            <Tooltip
+                trigger={<Icon icon={<InfoIcon />} label="Information" />}
+                content="This is a helpful tooltip"
+            />
+        </Tooltip.Provider>
+    );
+};
+
+export default WithIconTriggerExample;
+` } } />
+
+### Positioning
+
+Tooltips can be positioned in different ways relative to the trigger element.
+
+<Canvas of={TooltipStories.Positioning} source={ { code: `
+import React from "react";
+import { Tooltip } from "@webiny/admin-ui";
+
+const PositioningExample = () => {
+    return (
+        <Tooltip.Provider>
+            <div className="wby-flex wby-justify-center wby-items-center wby-h-48">
+                <Tooltip
+                    trigger={<p>&nbsp;&nbsp;Top&nbsp;&nbsp;</p>}
+                    content={<div>Tooltip on top</div>}
+                    side="top"
+                />
+                <Tooltip
+                    trigger={<p>&nbsp;&nbsp;Right&nbsp;&nbsp;</p>}
+                    content={<div>Tooltip on right</div>}
+                    side="right"
+                />
+                <Tooltip
+                    trigger={<p>&nbsp;&nbsp;Bottom&nbsp;&nbsp;</p>}
+                    content={<div>Tooltip on bottom</div>}
+                    side="bottom"
+                />
+                <Tooltip
+                    trigger={<p>&nbsp;&nbsp;Left&nbsp;&nbsp;</p>}
+                    content={<div>Tooltip on left</div>}
+                    side="left"
+                />
+            </div>
+        </Tooltip.Provider>
+    );
+};
+
+export default PositioningExample;
+` } } />
+
+### Alignment
+
+Tooltips can be aligned differently relative to the trigger element.
+
+<Canvas of={TooltipStories.Alignment} source={ { code: `
+import React from "react";
+import { Tooltip } from "@webiny/admin-ui";
+
+const AlignmentExample = () => {
+    return (
+        <Tooltip.Provider>
+            <div className="wby-flex wby-justify-center wby-items-center wby-h-48">
+                <Tooltip
+                    trigger={<p>&nbsp;&nbsp;Start&nbsp;&nbsp;</p>}
+                    content={<div>Aligned to start</div>}
+                    align="start"
+                />
+                <Tooltip
+                    trigger={<p>&nbsp;&nbsp;Center&nbsp;&nbsp;</p>}
+                    content={<div>Aligned to center</div>}
+                    align="center"
+                />
+                <Tooltip
+                    trigger={<p>&nbsp;&nbsp;End&nbsp;&nbsp;</p>}
+                    content={<div>Aligned to end</div>}
+                    align="end"
+                />
+            </div>
+        </Tooltip.Provider>
+    );
+};
+
+export default AlignmentExample;
+` } } />
+
+### With Button Trigger
+
+Tooltips can be used with buttons to provide additional information about the button's action.
+
+<Canvas of={TooltipStories.WithButtonTrigger} source={ { code: `
+import React from "react";
+import { Tooltip, Button } from "@webiny/admin-ui";
+
+const WithButtonTriggerExample = () => {
+    return (
+        <Tooltip.Provider>
+            <Tooltip
+                trigger={<Button text="Hover me" />}
+                content="This tooltip is triggered by a button"
+            />
+        </Tooltip.Provider>
+    );
+};
+
+export default WithButtonTriggerExample;
+` } } />
+
+### With Formatted Content
+
+Tooltips can contain rich, formatted content with multiple elements.
+
+<Canvas of={TooltipStories.WithFormattedContent} source={ { code: `
+import React from "react";
+import { Tooltip, Text } from "@webiny/admin-ui";
+
+const WithFormattedContentExample = () => {
+    return (
+        <Tooltip.Provider>
+            <Tooltip
+                trigger={<p>Hover for more info</p>}
+                content={
+                    <div className="wby-flex wby-flex-col wby-gap-xs">
+                        <Text size="sm" className="wby-font-bold">Important Information</Text>
+                        <Text size="sm">This tooltip contains formatted content with multiple paragraphs.</Text>
+                        <Text size="sm">You can include various elements inside tooltips.</Text>
+                    </div>
+                }
+            />
+        </Tooltip.Provider>
+    );
+};
+
+export default WithFormattedContentExample;
+` } } />
+
+### With Help Icon
+
+A common pattern is to use tooltips with help icons to provide contextual help.
+
+<Canvas of={TooltipStories.WithHelpIcon} source={ { code: `
+import React from "react";
+import { Tooltip, Icon } from "@webiny/admin-ui";
+import { ReactComponent as HelpIcon } from "@webiny/icons/help.svg";
+
+const WithHelpIconExample = () => {
+    return (
+        <Tooltip.Provider>
+            <Tooltip
+                trigger={<Icon icon={<HelpIcon />} label="Help" />}
+                content="Need help? Contact support at support@example.com"
+            />
+        </Tooltip.Provider>
+    );
+};
+
+export default WithHelpIconExample;
+` } } />
diff --git a/packages/admin-ui/src/Tooltip/Tooltip.stories.tsx b/packages/admin-ui/src/Tooltip/Tooltip.stories.tsx
new file mode 100644
index 00000000000..e54c48392f8
--- /dev/null
+++ b/packages/admin-ui/src/Tooltip/Tooltip.stories.tsx
@@ -0,0 +1,200 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Tooltip } from "~/Tooltip";
+import { Button } from "~/Button";
+import { Text } from "~/Text";
+import { Icon } from "~/Icon";
+
+import { ReactComponent as InfoIcon } from "@webiny/icons/info.svg";
+import { ReactComponent as HelpIcon } from "@webiny/icons/help.svg";
+
+const meta: Meta<typeof Tooltip> = {
+    title: "Components/Tooltip",
+    component: Tooltip,
+    parameters: {
+        layout: "padded"
+    },
+    argTypes: {
+        variant: {
+            control: "select",
+            options: ["accent", "subtle"]
+        },
+        align: {
+            control: "select",
+            options: ["start", "center", "end"]
+        },
+        side: {
+            control: "select",
+            options: ["top", "right", "bottom", "left"]
+        },
+        showArrow: {
+            control: "boolean",
+            defaultValue: true
+        }
+    },
+    decorators: [
+        Story => (
+            <Tooltip.Provider>
+                <div className="wby-flex wby-justify-center wby-items-center wby-h-48">
+                    <Story />
+                </div>
+            </Tooltip.Provider>
+        )
+    ]
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Tooltip>;
+
+export const Default: Story = {
+    args: {
+        trigger: <p>Tooltip trigger</p>,
+        content: (
+            <>
+                <strong>Lorem ipsum dolor sit amet</strong>, consectetur adipiscing elit. Donec
+                viverra sit amet massa sagittis sollicitudin.
+            </>
+        )
+    }
+};
+
+export const AccentVariant: Story = {
+    args: {
+        ...Default.args,
+        variant: "accent"
+    }
+};
+
+export const SubtleVariant: Story = {
+    args: {
+        ...Default.args,
+        variant: "subtle"
+    },
+    decorators: [
+        Story => (
+            <Tooltip.Provider>
+                <div className="wby-flex wby-justify-center wby-items-center wby-bg-neutral-dark wby-text-neutral-light wby-w-full wby-h-48">
+                    <Story />
+                </div>
+            </Tooltip.Provider>
+        )
+    ]
+};
+
+export const WithoutArrow: Story = {
+    args: {
+        ...Default.args,
+        showArrow: false
+    }
+};
+
+export const WithIconTrigger: Story = {
+    args: {
+        trigger: <Icon icon={<InfoIcon />} label="Information" />,
+        content: "This is a helpful tooltip"
+    }
+};
+
+export const Documentation: Story = {
+    args: {
+        align: "center",
+        side: "top",
+        variant: "accent",
+        showArrow: true,
+        trigger: <p>Tooltip trigger</p>,
+        content: (
+            <>
+                <strong>Lorem ipsum dolor sit amet</strong>, consectetur adipiscing elit. Donec
+                viverra sit amet massa sagittis sollicitudin.
+            </>
+        )
+    },
+    argTypes: {
+        trigger: {
+            description:
+                "The element that triggers the tooltip when hovered. Please refer to the example code for details.",
+            control: "none"
+        },
+        content: {
+            description:
+                "The content to display inside the tooltip. Please refer to the example code for details.",
+            control: "none"
+        },
+        side: {
+            description: "The side of the trigger where the tooltip appears.",
+            control: "select",
+            options: ["top", "right", "bottom", "left"]
+        },
+        align: {
+            description: "The alignment of the tooltip relative to the trigger.",
+            control: "select",
+            options: ["start", "center", "end"]
+        },
+        variant: {
+            description: "The visual style variant of the tooltip.",
+            control: "select",
+            options: ["accent", "subtle"]
+        },
+        showArrow: {
+            description: "Whether to show an arrow pointing to the trigger.",
+            control: "boolean"
+        }
+    }
+};
+
+export const Positioning: Story = {
+    render: () => (
+        <div className="wby-flex wby-gap-md">
+            <Tooltip trigger={<p>Top</p>} content={<div>Tooltip on top</div>} side="top" />
+            <Tooltip trigger={<p>Right</p>} content={<div>Tooltip on right</div>} side="right" />
+            <Tooltip trigger={<p>Bottom</p>} content={<div>Tooltip on bottom</div>} side="bottom" />
+            <Tooltip trigger={<p>Left</p>} content={<div>Tooltip on left</div>} side="left" />
+        </div>
+    )
+};
+
+export const Alignment: Story = {
+    render: () => (
+        <div className="wby-flex wby-gap-md">
+            <Tooltip trigger={<p>Start</p>} content={<div>Aligned to start</div>} align="start" />
+            <Tooltip
+                trigger={<p>Center</p>}
+                content={<div>Aligned to center</div>}
+                align="center"
+            />
+            <Tooltip trigger={<p>End</p>} content={<div>Aligned to end</div>} align="end" />
+        </div>
+    )
+};
+
+export const WithButtonTrigger: Story = {
+    args: {
+        trigger: <Button text="Hover me" />,
+        content: "This tooltip is triggered by a button"
+    }
+};
+
+export const WithFormattedContent: Story = {
+    args: {
+        trigger: <p>Hover for more info</p>,
+        content: (
+            <div className="wby-flex wby-flex-col wby-gap-xs">
+                <Text size="sm" className="wby-font-bold">
+                    Important Information
+                </Text>
+                <Text size="sm">
+                    This tooltip contains formatted content with multiple paragraphs.
+                </Text>
+                <Text size="sm">You can include various elements inside tooltips.</Text>
+            </div>
+        )
+    }
+};
+
+export const WithHelpIcon: Story = {
+    args: {
+        trigger: <Icon icon={<HelpIcon />} label="Help" />,
+        content: "Need help? Contact support at support@example.com"
+    }
+};
diff --git a/packages/admin-ui/src/Tooltip/Tooltip.tsx b/packages/admin-ui/src/Tooltip/Tooltip.tsx
new file mode 100644
index 00000000000..33babfbacec
--- /dev/null
+++ b/packages/admin-ui/src/Tooltip/Tooltip.tsx
@@ -0,0 +1,56 @@
+import * as React from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { withStaticProps, makeDecoratable } from "~/utils";
+import { TooltipArrow, TooltipContent, TooltipContentProps } from "./components";
+
+const TooltipProvider = TooltipPrimitive.Provider;
+
+const TooltipRoot = TooltipPrimitive.Root;
+
+const TooltipTrigger = TooltipPrimitive.Trigger;
+
+interface TooltipProps extends Omit<TooltipPrimitive.TooltipContentProps, "content" | "children"> {
+    align?: TooltipPrimitive.TooltipContentProps["align"];
+    content: React.ReactNode;
+    onOpenChange?: TooltipPrimitive.TooltipProps["onOpenChange"];
+    showArrow?: boolean;
+    side?: TooltipPrimitive.TooltipContentProps["side"];
+    variant?: TooltipContentProps["variant"];
+    trigger: React.ReactNode;
+}
+
+const DecoratableTooltip = ({
+    align,
+    content,
+    onOpenChange,
+    showArrow = true,
+    side,
+    variant,
+    trigger,
+    ...props
+}: TooltipProps) => {
+    return (
+        <TooltipRoot delayDuration={500} onOpenChange={onOpenChange}>
+            <TooltipTrigger asChild>
+                <span className={"wby-inline-block wby-text-0 wby-leading-none"}>{trigger}</span>
+            </TooltipTrigger>
+            <TooltipContent
+                side={side}
+                align={align}
+                sideOffset={4}
+                variant={variant}
+                hiddenArrow={!showArrow}
+                {...props}
+            >
+                {content}
+                {showArrow && <TooltipArrow variant={variant} />}
+            </TooltipContent>
+        </TooltipRoot>
+    );
+};
+
+const Tooltip = withStaticProps(makeDecoratable("Tooltip", DecoratableTooltip), {
+    Provider: TooltipProvider
+});
+
+export { Tooltip, type TooltipProps };
diff --git a/packages/admin-ui/src/Tooltip/components/TooltipArrow.tsx b/packages/admin-ui/src/Tooltip/components/TooltipArrow.tsx
new file mode 100644
index 00000000000..cea889760d9
--- /dev/null
+++ b/packages/admin-ui/src/Tooltip/components/TooltipArrow.tsx
@@ -0,0 +1,29 @@
+import * as React from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { cn, cva, type VariantProps } from "~/utils";
+
+const tooltipArrowVariants = cva("", {
+    variants: {
+        variant: {
+            accent: "wby-fill-bg-neutral-dark",
+            subtle: "wby-fill-neutral-base"
+        }
+    },
+    defaultVariants: {
+        variant: "accent"
+    }
+});
+
+type TooltipArrowProps = TooltipPrimitive.TooltipArrowProps &
+    VariantProps<typeof tooltipArrowVariants>;
+
+const TooltipArrow = ({ variant, className, ...props }: TooltipArrowProps) => (
+    <TooltipPrimitive.Arrow
+        {...props}
+        width={12}
+        height={6}
+        className={cn(tooltipArrowVariants({ variant }), className)}
+    />
+);
+
+export { TooltipArrow, type TooltipArrowProps };
diff --git a/packages/admin-ui/src/Tooltip/components/TooltipContent.tsx b/packages/admin-ui/src/Tooltip/components/TooltipContent.tsx
new file mode 100644
index 00000000000..875a06abee3
--- /dev/null
+++ b/packages/admin-ui/src/Tooltip/components/TooltipContent.tsx
@@ -0,0 +1,46 @@
+import * as React from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { cn, cva, type VariantProps } from "~/utils";
+
+const tooltipContentVariants = cva(
+    [
+        "wby-z-50 wby-px-sm-extra wby-py-sm wby-max-w-64 wby-rounded-md wby-text-sm wby-font-normal wby-animate-in wby-fade-in-0 wby-zoom-in-95",
+        "data-[state=closed]:wby-animate-out data-[state=closed]:wby-fade-out-0 data-[state=closed]:wby-zoom-out-95",
+        "data-[side=bottom]:wby-slide-in-from-top-2 data-[side=left]:wby-slide-in-from-right-2 data-[side=right]:wby-slide-in-from-left-2 data-[side=top]:wby-slide-in-from-bottom-2"
+    ],
+    {
+        variants: {
+            variant: {
+                accent: "wby-bg-neutral-dark wby-text-neutral-light",
+                subtle: "wby-bg-neutral-base wby-text-neutral-primary wby-shadow-md"
+            },
+            hiddenArrow: {
+                true: [
+                    "data-[side=top]:wby-mb-xs-plus",
+                    "data-[side=bottom]:wby-mt-xs-plus",
+                    "data-[side=left]:wby-mr-xs-plus",
+                    "data-[side=right]:wby-ml-xs-plus"
+                ]
+            }
+        },
+        defaultVariants: {
+            variant: "accent"
+        }
+    }
+);
+
+type TooltipContentProps = TooltipPrimitive.TooltipContentProps &
+    VariantProps<typeof tooltipContentVariants>;
+
+const TooltipContent = ({ className, variant, hiddenArrow, ...props }: TooltipContentProps) => (
+    <TooltipPrimitive.Portal>
+        <TooltipPrimitive.Content
+            collisionPadding={8}
+            sideOffset={4}
+            className={cn(tooltipContentVariants({ variant, hiddenArrow }), className)}
+            {...props}
+        />
+    </TooltipPrimitive.Portal>
+);
+
+export { TooltipContent, type TooltipContentProps };
diff --git a/packages/admin-ui/src/Tooltip/components/index.tsx b/packages/admin-ui/src/Tooltip/components/index.tsx
new file mode 100644
index 00000000000..0712db632ef
--- /dev/null
+++ b/packages/admin-ui/src/Tooltip/components/index.tsx
@@ -0,0 +1,2 @@
+export * from "./TooltipArrow";
+export * from "./TooltipContent";
diff --git a/packages/admin-ui/src/Tooltip/index.ts b/packages/admin-ui/src/Tooltip/index.ts
new file mode 100644
index 00000000000..46bb2f24722
--- /dev/null
+++ b/packages/admin-ui/src/Tooltip/index.ts
@@ -0,0 +1 @@
+export * from "./Tooltip";
diff --git a/packages/admin-ui/src/hooks/useIsMobile.ts b/packages/admin-ui/src/hooks/useIsMobile.ts
new file mode 100644
index 00000000000..f7cc1f59a78
--- /dev/null
+++ b/packages/admin-ui/src/hooks/useIsMobile.ts
@@ -0,0 +1,19 @@
+import * as React from "react";
+
+const MOBILE_BREAKPOINT = 768;
+
+export function useIsMobile() {
+    const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined);
+
+    React.useEffect(() => {
+        const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+        const onChange = () => {
+            setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+        };
+        mql.addEventListener("change", onChange);
+        setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+        return () => mql.removeEventListener("change", onChange);
+    }, []);
+
+    return !!isMobile;
+}
diff --git a/packages/admin-ui/src/index.ts b/packages/admin-ui/src/index.ts
new file mode 100644
index 00000000000..c17daf33c77
--- /dev/null
+++ b/packages/admin-ui/src/index.ts
@@ -0,0 +1,55 @@
+export * from "./Accordion";
+export * from "./Alert";
+export * from "./AutoComplete";
+export * from "./Avatar";
+export * from "./Button";
+export * from "./Card";
+export * from "./Checkbox";
+export * from "./CheckboxGroup";
+export * from "./CodeEditor";
+export * from "./ColorPicker";
+export * from "./DataList";
+export * from "./DataTable";
+export * from "./DelayedOnChange";
+export * from "./Dialog";
+export * from "./Drawer";
+export * from "./DropdownMenu";
+export * from "./DynamicFieldset";
+export * from "./FilePicker";
+export * from "./FormComponent";
+export * from "./Grid";
+export * from "./HeaderBar";
+export * from "./Heading";
+export * from "./Icon";
+export * from "./IconPicker";
+export * from "./Image";
+export * from "./Input";
+export * from "./Label";
+export * from "./Link";
+export * from "./List";
+export * from "./Loader";
+export * from "./MultiAutoComplete";
+export * from "./MultiFilePicker";
+export * from "./Popover";
+export * from "./HeaderBar";
+export * from "./ProgressBar";
+export * from "./Providers";
+export * from "./RadioGroup";
+export * from "./RangeSlider";
+export * from "./RichTextEditor";
+export * from "./Scrollbar";
+export * from "./Select";
+export * from "./Separator";
+export * from "./Sidebar";
+export * from "./Skeleton";
+export * from "./Slider";
+export * from "./Switch";
+export * from "./Table";
+export * from "./Tabs";
+export * from "./Tag";
+export * from "./Text";
+export * from "./Textarea";
+export * from "./TimeAgo";
+export * from "./Toast";
+export * from "./Tooltip";
+export * from "./utils";
diff --git a/packages/admin-ui/src/theme.scss b/packages/admin-ui/src/theme.scss
new file mode 100644
index 00000000000..4cdddd78f40
--- /dev/null
+++ b/packages/admin-ui/src/theme.scss
@@ -0,0 +1,338 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap");
+
+@layer base {
+  :root {
+    // Colors.
+    --color-warning-900: 45 96.6% 11.6%;
+    --color-warning-800: 45 98.2% 21.6%;
+    --color-warning-700: 45 100% 37.3%;
+    --color-warning-600: 45 100% 42.5%;
+    --color-warning-500: 45 95.7% 63.7%;
+    --color-warning-400: 45 95.7% 63.7%;
+    --color-warning-300: 45 95.1% 75.9%;
+    --color-warning-200: 45 96.9% 87.5%;
+    --color-warning-100: 43 100% 96.5%;
+
+    --color-success-900: 160 100% 14.5%;
+    --color-success-800: 160 100% 19.6%;
+    --color-success-700: 165 100% 28.6%;
+    --color-success-600: 168 100% 34.7%;
+    --color-success-500: 170 100% 37.5%;
+    --color-success-400: 169 59.8% 64.9%;
+    --color-success-300: 168 58.1% 79.4%;
+    --color-success-200: 170 57.1% 91.8%;
+    --color-success-100: 168 50% 96.1%;
+
+    --color-secondary-900: 160 100% 14.5%;
+    --color-secondary-800: 160 100% 19.6%;
+    --color-secondary-700: 165 100% 28.6%;
+    --color-secondary-600: 168 100% 34.7%;
+    --color-secondary-500: 170 100% 37.5%;
+    --color-secondary-400: 169 59.8% 64.9%;
+    --color-secondary-300: 168 58.1% 79.4%;
+    --color-secondary-200: 170 57.1% 91.8%;
+    --color-secondary-100: 168 50% 96.1%;
+
+    --color-primary-900: 14 100% 25.5%;
+    --color-primary-800: 14 100% 32.2%;
+    --color-primary-700: 14 94.1% 40%;
+    --color-primary-600: 14 81.4% 48.4%;
+    --color-primary-500: 15 95.6% 55.9%;
+    --color-primary-400: 15 100% 63.5%;
+    --color-primary-300: 14 94.7% 77.8%;
+    --color-primary-200: 15 94.2% 86.5%;
+    --color-primary-100: 5 100% 97.5%;
+
+    --color-neutral-900: 214 12.3% 11.2%;
+    --color-neutral-800: 215 11.1% 21.2%;
+    --color-neutral-700: 213 10.1% 38.8%;
+    --color-neutral-600: 215 9.6% 51%;
+    --color-neutral-500: 218 10.7% 65.3%;
+    --color-neutral-50: 180 11.1% 98.2%;
+    --color-neutral-400: 219 12.1% 77.3%;
+    --color-neutral-300: 225 16.7% 90.6%;
+    --color-neutral-200: 220 11.1% 94.7%;
+    --color-neutral-100: 210 14.3% 97.3%;
+    --color-neutral-0: 0 0% 100%;
+
+    --color-destructive-900: 359 81.6% 17.1%;
+    --color-destructive-800: 0 83.6% 21.6%;
+    --color-destructive-700: 359 72.8% 28.8%;
+    --color-destructive-600: 0 76.4% 38.2%;
+    --color-destructive-500: 0 71% 48.6%;
+    --color-destructive-400: 0 66.3% 62.7%;
+    --color-destructive-300: 1 83.2% 76.7%;
+    --color-destructive-200: 0 96.4% 89.2%;
+    --color-destructive-100: 0 100% 96.9%;
+
+    // Background colors.
+    --bg-destructive-default: var(--color-destructive-500);
+    --bg-destructive-disabled: var(--color-destructive-300);
+    --bg-destructive-muted: var(--color-destructive-400);
+    --bg-destructive-strong: var(--color-destructive-600);
+    --bg-destructive-subtle: var(--color-destructive-100);
+    --bg-destructive-xstrong: var(--color-destructive-800);
+
+    --bg-neutral-base: var(--color-neutral-0);
+    --bg-neutral-dark: var(--color-neutral-900);
+    --bg-neutral-dimmed: var(--color-neutral-200);
+    --bg-neutral-disabled: var(--color-neutral-200);
+    --bg-neutral-light: var(--color-neutral-100);
+    --bg-neutral-muted: var(--color-neutral-300);
+    --bg-neutral-strong: var(--color-neutral-400);
+    --bg-neutral-subtle: var(--color-neutral-50);
+    --bg-neutral-xstrong: var(--color-neutral-700);
+
+    --bg-primary-default: var(--color-primary-500);
+    --bg-primary-disabled: var(--color-primary-300);
+    --bg-primary-muted: var(--color-primary-300);
+    --bg-primary-strong: var(--color-primary-700);
+    --bg-primary-subtle: var(--color-primary-100);
+    --bg-primary-xstrong: var(--color-primary-900);
+
+    --bg-secondary-default: var(--color-success-500);
+    --bg-secondary-disabled: var(--color-success-400);
+    --bg-secondary-muted: var(--color-success-400);
+    --bg-secondary-strong: var(--color-success-700);
+    --bg-secondary-subtle: var(--color-success-200);
+    --bg-secondary-xstrong: var(--color-success-900);
+
+    --bg-success-default: var(--color-success-500);
+    --bg-success-disabled: var(--color-success-300);
+    --bg-success-muted: var(--color-success-400);
+    --bg-success-strong: var(--color-secondary-700);
+    --bg-success-subtle: var(--color-success-200);
+    --bg-success-xstrong: var(--color-secondary-900);
+
+    --bg-warning-default: var(--color-warning-500);
+    --bg-warning-disabled: var(--color-warning-200);
+    --bg-warning-muted: var(--color-warning-300);
+    --bg-warning-strong: var(--color-warning-700);
+    --bg-warning-subtle: var(--color-warning-100);
+    --bg-warning-xstrong: var(--color-warning-800);
+
+    // Border color.
+    --border-accent-default: var(--color-primary-500);
+    --border-accent-dimmed: var(--color-primary-200);
+    --border-accent-subtle: var(--color-primary-100);
+
+    --border-destructive-default: var(--color-destructive-500);
+    --border-destructive-subtle: var(--color-destructive-100);
+
+    --border-neutral-base: var(--color-neutral-0);
+    --border-neutral-black: var(--color-neutral-900);
+    --border-neutral-dark: var(--color-neutral-600);
+    --border-neutral-dimmed: var(--color-neutral-200);
+    --border-neutral-dimmed-darker: var(--color-neutral-300);
+    --border-neutral-muted: var(--color-neutral-400);
+    --border-neutral-strong: var(--color-neutral-500);
+    --border-neutral-subtle: var(--color-neutral-100);
+
+    --border-success-default: var(--color-success-500);
+    --border-success-subtle: var(--color-success-200);
+
+    // Border radius.
+    --radius-3Xl: 36px;
+    --radius-lg: 8px;
+    --radius-md: 6px;
+    --radius-sm: 4px;
+    --radius-xl: 16px;
+    --radius-xs: 2px;
+    --radius-xxl: 24px;
+
+    // Border width.
+    --border-width-md: 2px;
+    --border-width-none: 0px;
+    --border-width-sm: 1px;
+
+    // Fill.
+    --fill-accent-default: var(--color-primary-500);
+
+    --fill-destructive: var(--color-destructive-500);
+
+    --fill-neutral-base: var(--color-neutral-0);
+    --fill-neutral-dark: var(--color-neutral-800);
+    --fill-neutral-disabled: var(--color-neutral-400);
+    --fill-neutral-strong: var(--color-neutral-500);
+    --fill-neutral-xstrong: var(--color-neutral-700);
+
+    --fill-success: var(--color-success-500);
+
+    --fill-warning: var(--color-warning-500);
+
+    // Font.
+    --font-sans: "Inter", sans-serif;
+
+    // Font weight.
+    --font-weight-regular: 400;
+    --font-weight-semibold: 600;
+
+    // Margin.
+    --margin-lg: 24px;
+    --margin-md: 16px;
+    --margin-md-plus: 20px;
+    --margin-none: 0px;
+    --margin-sm: 8px;
+    --margin-sm-extra: 12px;
+    --margin-sm-plus: 10px;
+    --margin-xl: 32px;
+    --margin-xs: 4px;
+    --margin-xs-plus: 6px;
+    --margin-xxl: 48px;
+    --margin-xxs: 2px;
+
+    // Padding.
+    --padding-lg: 24px;
+    --padding-md: 16px;
+    --padding-md-extra: 20px;
+    --padding-none: 0px;
+    --padding-sm: 8px;
+    --padding-sm-extra: 12px;
+    --padding-sm-plus: 10px;
+    --padding-xl: 32px;
+    --padding-xs: 4px;
+    --padding-xs-plus: 6px;
+    --padding-xxl: 48px;
+    --padding-xxs: 2px;
+
+    // Ring color.
+    --ring-primary-dimmed: var(--color-primary-200);
+    --ring-primary-strong: var(--color-primary-500);
+    --ring-primary-subtle: var(--color-primary-100);
+
+    --ring-success-dimmed: var(--color-success-200);
+    --ring-success-strong: var(--color-success-500);
+    --ring-success-subtle: var(--color-success-100);
+
+    // Ring width.
+    --ring-width-lg: 4px;
+    --ring-width-md: 2px;
+    --ring-width-sm: 1px;
+
+    // Shadow.
+    --shadow-flat: 0px;
+    --shadow-lg: 16px;
+    --shadow-md: 8px;
+    --shadow-sm: 4px;
+    --shadow-xl: 24px;
+    --shadow-xxl: 48px;
+
+    // Spacing.
+    --spacing-3xl: 64px;
+    --spacing-lg: 24px;
+    --spacing-md: 16px;
+    --spacing-md-plus: 20px;
+    --spacing-none: 0px;
+    --spacing-sm: 8px;
+    --spacing-sm-extra: 12px;
+    --spacing-sm-plus: 10px;
+    --spacing-xl: 32px;
+    --spacing-xs: 4px;
+    --spacing-xs-plus: 6px;
+    --spacing-xxl: 48px;
+    --spacing-xxs: 2px;
+    --spacing-sidebar-collapsed: 44px;
+    --spacing-sidebar-expanded: 256px;
+    --spacing-main-content: calc(100vh - 45px);
+
+    // Text color.
+    --text-accent-muted: var(--color-primary-300);
+    --text-accent-primary: var(--color-primary-500);
+    --text-accent-subtle: var(--color-primary-100);
+
+    --text-destructive-muted: var(--color-destructive-300);
+    --text-destructive-primary: var(--color-destructive-500);
+    --text-destructive-subtle: var(--color-destructive-100);
+
+    --text-neutral-dimmed: var(--color-neutral-400);
+    --text-neutral-disabled: var(--color-neutral-400);
+    --text-neutral-light: var(--color-neutral-0);
+    --text-neutral-muted: var(--color-neutral-500);
+    --text-neutral-primary: var(--color-neutral-900);
+    --text-neutral-strong: var(--color-neutral-700);
+
+    --text-success-muted: var(--color-success-400);
+    --text-success-primary: var(--color-success-500);
+    --text-success-subtle: var(--color-success-200);
+
+    // Text size.
+    --text-h1: var(--text-4xl);
+    --text-h1-leading: var(--text-4xl-leading);
+    --text-h1-tracking: var(--text-4xl-tracking);
+    --text-h1-weight: var(--font-weight-semibold);
+    --text-h2: var(--text-3xl);
+    --text-h2-leading: var(--text-3xl-leading);
+    --text-h2-tracking: var(--text-3xl-tracking);
+    --text-h2-weight: var(--font-weight-semibold);
+    --text-h3: var(--text-xxl);
+    --text-h3-leading: var(--text-xxl-leading);
+    --text-h3-tracking: var(--text-xxl-tracking);
+    --text-h3-weight: var(--font-weight-semibold);
+    --text-h4: var(--text-xl);
+    --text-h4-leading: var(--text-xl-leading);
+    --text-h4-tracking: initial;
+    --text-h4-weight: var(--font-weight-semibold);
+    --text-h5: var(--text-lg);
+    --text-h5-leading: var(--text-lg-leading);
+    --text-h5-tracking: initial;
+    --text-h5-weight: var(--font-weight-semibold);
+    --text-h6: var(--text-md);
+    --text-h6-leading: var(--text-md-leading);
+    --text-h6-tracking: initial;
+    --text-h6-weight: var(--font-weight-semibold);
+    --text-sm: 12px;
+    --text-sm-leading: 16px;
+    --text-sm-tracking: initial;
+    --text-sm-weight: normal;
+    --text-md: 14px;
+    --text-md-leading: 20px;
+    --text-md-tracking: initial;
+    --text-md-weight: normal;
+    --text-lg: 16px;
+    --text-lg-leading: 24px;
+    --text-lg-tracking: initial;
+    --text-lg-weight: normal;
+    --text-xl: 20px;
+    --text-xl-leading: 32px;
+    --text-xl-tracking: initial;
+    --text-xl-weight: normal;
+    --text-xxl: 30px;
+    --text-xxl-leading: 38px;
+    --text-xxl-tracking: initial;
+    --text-xxl-weight: normal;
+    --text-3xl: 36px;
+    --text-3xl-leading: 44px;
+    --text-3xl-tracking: initial;
+    --text-3xl-weight: normal;
+    --text-4xl: 48px;
+    --text-4xl-leading: 60px;
+    --text-4xl-tracking: initial;
+    --text-4xl-weight: normal;
+  }
+}
+
+@layer base {
+  body {
+    // Styles all text that was not rendered via the Text component.
+    @apply wby-font-sans wby-antialiased wby-text-md wby-text-neutral-primary;
+  }
+
+  a {
+    // Styles all links that were not rendered via the Link component.
+    @apply wby-text-accent-primary hover:wby-underline focus-visible:wby-outline-none focus-visible:wby-ring-lg focus-visible:wby-ring-primary-dimmed wby-rounded-xs;
+  }
+
+  b,
+  strong {
+    @apply wby-font-semibold;
+  }
+
+  i,
+  em {
+    @apply wby-italic;
+  }
+}
diff --git a/packages/admin-ui/src/utils.ts b/packages/admin-ui/src/utils.ts
new file mode 100644
index 00000000000..0db3d12bb58
--- /dev/null
+++ b/packages/admin-ui/src/utils.ts
@@ -0,0 +1,135 @@
+import React from "react";
+import { clsx, type ClassValue } from "clsx";
+import { generateId as baseGenerateId } from "@webiny/utils/generateId";
+import { extendTailwindMerge } from "tailwind-merge";
+import { cva, type VariantProps } from "class-variance-authority";
+export { makeDecoratable } from "@webiny/react-composition";
+
+const twMerge = extendTailwindMerge({
+    prefix: "wby-",
+    override: {
+        theme: {
+            borderWidth: ["sm", "md", "none"]
+        },
+        classGroups: {
+            "border-color": [
+                "border-transparent",
+                "border-white",
+                "border-accent",
+                "border-accent-default",
+                "border-accent-dimmed",
+                "border-accent-subtle",
+                "border-destructive",
+                "border-destructive-default",
+                "border-destructive-subtle",
+                "border-neutral",
+                "border-neutral-base",
+                "border-neutral-black",
+                "border-neutral-dark",
+                "border-neutral-dimmed",
+                "border-neutral-muted",
+                "border-neutral-strong",
+                "border-neutral-subtle",
+                "border-success",
+                "border-success-default",
+                "border-success-subtle"
+            ],
+            "border-style": ["border-solid", "border-dashed", "border-dotted"],
+            "ring-color": [
+                "ring-primary",
+                "ring-primary-dimmed",
+                "ring-primary-strong",
+                "ring-primary-subtle",
+                "ring-success",
+                "ring-success-dimmed",
+                "ring-success-strong",
+                "ring-success-subtle"
+            ],
+            "ring-w": ["ring-sm", "ring-md", "ring-lg"],
+            "font-size": [
+                "text-h1",
+                "text-h2",
+                "text-h3",
+                "text-h4",
+                "text-h5",
+                "text-h6",
+                "text-sm",
+                "text-md",
+                "text-lg",
+                "text-xl",
+                "text-xxl",
+                "text-3xl",
+                "text-4xl"
+            ]
+        }
+    },
+    extend: {
+        theme: {
+            padding: [
+                "lg",
+                "md",
+                "md-extra",
+                "none",
+                "sm",
+                "sm-extra",
+                "sm-plus",
+                "xl",
+                "xs",
+                "xs-plus",
+                "xxl",
+                "xxs"
+            ],
+            margin: [
+                "lg",
+                "md",
+                "md-plus",
+                "none",
+                "sm",
+                "sm-extra",
+                "sm-plus",
+                "xl",
+                "xs",
+                "xs-plus",
+                "xxl",
+                "xxs"
+            ],
+            spacing: [
+                "3xl",
+                "lg",
+                "md",
+                "md-plus",
+                "none",
+                "sm",
+                "sm-extra",
+                "sm-plus",
+                "xl",
+                "xs",
+                "xs-plus",
+                "xxl",
+                "xxs",
+                "sidebar-collapsed",
+                "sidebar-expanded"
+            ]
+        }
+    }
+});
+
+export function cn(...inputs: ClassValue[]) {
+    return twMerge(clsx(inputs));
+}
+
+export const generateId = (initialId?: string) => {
+    if (initialId) {
+        return initialId;
+    }
+    return "wby-" + baseGenerateId(4);
+};
+
+export const withStaticProps = <TComponent extends React.ComponentType<any>, TProps>(
+    component: TComponent,
+    props: TProps
+) => {
+    return Object.assign(component, props) as TComponent & TProps;
+};
+
+export { cva, type VariantProps };
diff --git a/packages/admin-ui/tailwind.config.js b/packages/admin-ui/tailwind.config.js
new file mode 100644
index 00000000000..446b5a85375
--- /dev/null
+++ b/packages/admin-ui/tailwind.config.js
@@ -0,0 +1,75 @@
+const { fontFamily } = require("tailwindcss/defaultTheme");
+const { getProject } = require("@webiny/cli/utils");
+const project = getProject();
+const webinyPackagesGlob = `${project.root}/node_modules/@webiny/app*/**/*.{js,ts,tsx}`;
+const webinyAdminUiPackageGlob = `${project.root}/node_modules/@webiny/admin-ui/**/*.{js,ts,tsx}`;
+const webinyUiPackageGlob = `${project.root}/node_modules/@webiny/ui/**/*.{js,ts,tsx}`;
+const adminAppSourceGlob = `${project.root}/apps/admin`;
+const {
+    animation,
+    backgroundColor,
+    borderColor,
+    borderRadius,
+    borderWidth,
+    fill,
+    fontSize,
+    keyframes,
+    margin,
+    padding,
+    ringColor,
+    ringWidth,
+    shadow,
+    spacing,
+    textColor,
+    zIndex
+} = require("./tailwind.config.theme");
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+    prefix: "wby-",
+    darkMode: ["class"],
+    content: [
+        webinyPackagesGlob,
+        webinyAdminUiPackageGlob,
+        webinyUiPackageGlob,
+        adminAppSourceGlob
+    ],
+    theme: {
+        container: {
+            center: true,
+            padding: padding.xxl,
+            screens: {
+                "2xl": "1200px",
+                xl: "1200px"
+            }
+        },
+
+        backgroundColor,
+        borderColor,
+        borderWidth,
+        fill,
+        fontSize,
+        ringColor,
+        ringWidth,
+        shadow,
+        textColor,
+
+        fontFamily: {
+            sans: ["var(--font-sans)", ...fontFamily.sans],
+            serif: ["var(--font-serif)", ...fontFamily.serif],
+            mono: ["var(--font-mono)", ...fontFamily.mono]
+        },
+
+        extend: {
+            animation,
+            borderRadius,
+            keyframes,
+            margin,
+            padding,
+            spacing,
+            zIndex
+        }
+    },
+
+    plugins: [require("tailwindcss-animate")]
+};
diff --git a/packages/admin-ui/tailwind.config.theme.js b/packages/admin-ui/tailwind.config.theme.js
new file mode 100644
index 00000000000..17476ce5337
--- /dev/null
+++ b/packages/admin-ui/tailwind.config.theme.js
@@ -0,0 +1,401 @@
+module.exports = {
+    animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+        "collapsible-down": "collapsible-down 0.2s ease-out",
+        "collapsible-up": "collapsible-up 0.2s ease-out",
+        "skeleton-pulse": "skeleton-pulse 1400ms ease-in-out infinite"
+    },
+    backgroundColor: {
+        transparent: "transparent",
+        white: "white",
+        destructive: {
+            DEFAULT: "hsl(var(--bg-destructive-default))",
+            default: "hsl(var(--bg-destructive-default))",
+            disabled: "hsl(var(--bg-destructive-disabled))",
+            muted: "hsl(var(--bg-destructive-muted))",
+            strong: "hsl(var(--bg-destructive-strong))",
+            subtle: "hsl(var(--bg-destructive-subtle))",
+            xstrong: "hsl(var(--bg-destructive-xstrong))"
+        },
+        neutral: {
+            DEFAULT: "hsl(var(--bg-neutral-default))",
+            base: "hsl(var(--bg-neutral-base))",
+            dark: "hsl(var(--bg-neutral-dark))",
+            dimmed: "hsl(var(--bg-neutral-dimmed))",
+            disabled: "hsl(var(--bg-neutral-disabled))",
+            light: "hsl(var(--bg-neutral-light))",
+            muted: "hsl(var(--bg-neutral-muted))",
+            strong: "hsl(var(--bg-neutral-strong))",
+            subtle: "hsl(var(--bg-neutral-subtle))",
+            xstrong: "hsl(var(--bg-neutral-xstrong))"
+        },
+        primary: {
+            DEFAULT: "hsl(var(--bg-primary-default))",
+            default: "hsl(var(--bg-primary-default))",
+            disabled: "hsl(var(--bg-primary-disabled))",
+            muted: "hsl(var(--bg-primary-muted))",
+            strong: "hsl(var(--bg-primary-strong))",
+            subtle: "hsl(var(--bg-primary-subtle))",
+            xstrong: "hsl(var(--bg-primary-xstrong))"
+        },
+        secondary: {
+            DEFAULT: "hsl(var(--bg-secondary-default))",
+            default: "hsl(var(--bg-secondary-default))",
+            disabled: "hsl(var(--bg-secondary-disabled))",
+            muted: "hsl(var(--bg-secondary-muted))",
+            strong: "hsl(var(--bg-secondary-strong))",
+            subtle: "hsl(var(--bg-secondary-subtle))",
+            xstrong: "hsl(var(--bg-secondary-xstrong))"
+        },
+        success: {
+            DEFAULT: "hsl(var(--bg-success-default))",
+            default: "hsl(var(--bg-success-default))",
+            disabled: "hsl(var(--bg-success-disabled))",
+            muted: "hsl(var(--bg-success-muted))",
+            strong: "hsl(var(--bg-success-strong))",
+            subtle: "hsl(var(--bg-success-subtle))",
+            xstrong: "hsl(var(--bg-success-xstrong))"
+        },
+        warning: {
+            DEFAULT: "hsl(var(--bg-warning-default))",
+            default: "hsl(var(--bg-warning-default))",
+            disabled: "hsl(var(--bg-warning-disabled))",
+            muted: "hsl(var(--bg-warning-muted))",
+            strong: "hsl(var(--bg-warning-strong))",
+            subtle: "hsl(var(--bg-warning-subtle))",
+            xstrong: "hsl(var(--bg-warning-xstrong))"
+        }
+    },
+    borderColor: {
+        transparent: "transparent",
+        white: "white",
+        accent: {
+            DEFAULT: "hsl(var(--border-accent-default))",
+            default: "hsl(var(--border-accent-default))",
+            dimmed: "hsl(var(--border-accent-dimmed))",
+            subtle: "hsl(var(--border-accent-subtle))"
+        },
+        destructive: {
+            DEFAULT: "hsl(var(--border-destructive-default))",
+            default: "hsl(var(--border-destructive-default))",
+            subtle: "hsl(var(--border-destructive-subtle))"
+        },
+        neutral: {
+            DEFAULT: "hsl(var(--border-neutral-default))",
+            base: "hsl(var(--border-neutral-base))",
+            black: "hsl(var(--border-neutral-black))",
+            dark: "hsl(var(--border-neutral-dark))",
+            dimmed: "hsl(var(--border-neutral-dimmed))",
+            "dimmed-darker": "hsl(var(--border-neutral-dimmed-darker))",
+            muted: "hsl(var(--border-neutral-muted))",
+            strong: "hsl(var(--border-neutral-strong))",
+            subtle: "hsl(var(--border-neutral-subtle))"
+        },
+        success: {
+            DEFAULT: "hsl(var(--border-success-default))",
+            default: "hsl(var(--border-success-default))",
+            subtle: "hsl(var(--border-success-subtle))"
+        }
+    },
+    borderRadius: {
+        "3Xl": "var(--radius-3Xl)",
+        lg: "var(--radius-lg)",
+        md: "var(--radius-md)",
+        sm: "var(--radius-sm)",
+        xl: "var(--radius-xl)",
+        xs: "var(--radius-xs)",
+        xxl: "var(--radius-xxl)"
+    },
+    borderWidth: {
+        md: "var(--border-width-md)",
+        none: "var(--border-width-none)",
+        sm: "var(--border-width-sm)"
+    },
+    fill: {
+        transparent: "transparent",
+        white: "white",
+        accent: {
+            DEFAULT: "hsl(var(--fill-accent))",
+            default: "hsl(var(--fill-accent-default))"
+        },
+        destructive: {
+            DEFAULT: "hsl(var(--fill-destructive))",
+            destructive: "hsl(var(--fill-destructive))"
+        },
+        neutral: {
+            DEFAULT: "hsl(var(--fill-neutral))",
+            base: "hsl(var(--fill-neutral-base))",
+            dark: "hsl(var(--fill-neutral-dark))",
+            disabled: "hsl(var(--fill-neutral-disabled))",
+            strong: "hsl(var(--fill-neutral-strong))",
+            xstrong: "hsl(var(--fill-neutral-xstrong))"
+        },
+        success: {
+            DEFAULT: "hsl(var(--fill-success))",
+            success: "hsl(var(--fill-success))"
+        },
+        warning: {
+            DEFAULT: "hsl(var(--fill-warning))",
+            warning: "hsl(var(--fill-warning))"
+        }
+    },
+    fontSize: {
+        h1: [
+            "var(--text-h1)",
+            {
+                lineHeight: "var(--text-h1-leading)",
+                letterSpacing: "var(--text-h1-tracking)",
+                fontWeight: "var(--text-h1-weight)"
+            }
+        ],
+        h2: [
+            "var(--text-h2)",
+            {
+                lineHeight: "var(--text-h2-leading)",
+                letterSpacing: "var(--text-h2-tracking)",
+                fontWeight: "var(--text-h2-weight)"
+            }
+        ],
+        h3: [
+            "var(--text-h3)",
+            {
+                lineHeight: "var(--text-h3-leading)",
+                letterSpacing: "var(--text-h3-tracking)",
+                fontWeight: "var(--text-h3-weight)"
+            }
+        ],
+        h4: [
+            "var(--text-h4)",
+            {
+                lineHeight: "var(--text-h4-leading)",
+                letterSpacing: "var(--text-h4-tracking)",
+                fontWeight: "var(--text-h4-weight)"
+            }
+        ],
+        h5: [
+            "var(--text-h5)",
+            {
+                lineHeight: "var(--text-h5-leading)",
+                letterSpacing: "var(--text-h5-tracking)",
+                fontWeight: "var(--text-h5-weight)"
+            }
+        ],
+        h6: [
+            "var(--text-h6)",
+            {
+                lineHeight: "var(--text-h6-leading)",
+                letterSpacing: "var(--text-h6-tracking)",
+                fontWeight: "var(--text-h6-weight)"
+            }
+        ],
+        "3xl": [
+            "var(--text-3xl)",
+            {
+                lineHeight: "var(--text-3xl-leading)",
+                letterSpacing: "var(--text-3xl-tracking)"
+            }
+        ],
+        "4xl": [
+            "var(--text-4xl)",
+            {
+                lineHeight: "var(--text-4xl-leading)",
+                letterSpacing: "var(--text-4xl-tracking)"
+            }
+        ],
+        lg: [
+            "var(--text-lg)",
+            {
+                lineHeight: "var(--text-lg-leading)",
+                letterSpacing: "var(--text-lg-tracking)"
+            }
+        ],
+        md: [
+            "var(--text-md)",
+            {
+                lineHeight: "var(--text-md-leading)",
+                letterSpacing: "var(--text-md-tracking)"
+            }
+        ],
+        sm: [
+            "var(--text-sm)",
+            {
+                lineHeight: "var(--text-sm-leading)",
+                letterSpacing: "var(--text-sm-tracking)"
+            }
+        ],
+        xl: [
+            "var(--text-xl)",
+            {
+                lineHeight: "var(--text-xl-leading)",
+                letterSpacing: "var(--text-xl-tracking)"
+            }
+        ],
+        xxl: [
+            "var(--text-xxl)",
+            {
+                lineHeight: "var(--text-xxl-leading)",
+                letterSpacing: "var(--text-xxl-tracking)"
+            }
+        ]
+    },
+    fontWeight: {
+        regular: "var(--font-weight-regular)",
+        semibold: "var(--font-weight-semibold)"
+    },
+    keyframes: {
+        "accordion-down": {
+            from: {
+                height: "0"
+            },
+            to: {
+                height: "var(--radix-accordion-content-height)"
+            }
+        },
+        "accordion-up": {
+            from: {
+                height: "var(--radix-accordion-content-height)"
+            },
+            to: {
+                height: "0"
+            }
+        },
+        "collapsible-down": {
+            from: {
+                height: "0"
+            },
+            to: {
+                height: "var(--radix-collapsible-content-height)"
+            }
+        },
+        "collapsible-up": {
+            from: {
+                height: "var(--radix-collapsible-content-height)"
+            },
+            to: {
+                height: "0"
+            }
+        },
+        "skeleton-pulse": {
+            "0%, 100%": {
+                backgroundColor: "hsl(var(--bg-neutral-dimmed))"
+            },
+            "50%": {
+                backgroundColor: "hsl(var(--bg-neutral-muted))"
+            }
+        }
+    },
+    margin: {
+        lg: "var(--margin-lg)",
+        md: "var(--margin-md)",
+        "md-plus": "var(--margin-md-plus)",
+        none: "var(--margin-none)",
+        sm: "var(--margin-sm)",
+        "sm-extra": "var(--margin-sm-extra)",
+        "sm-plus": "var(--margin-sm-plus)",
+        xl: "var(--margin-xl)",
+        xs: "var(--margin-xs)",
+        "xs-plus": "var(--margin-xs-plus)",
+        xxl: "var(--margin-xxl)",
+        xxs: "var(--margin-xxs)"
+    },
+    padding: {
+        lg: "var(--padding-lg)",
+        md: "var(--padding-md)",
+        "md-extra": "var(--padding-md-extra)",
+        none: "var(--padding-none)",
+        sm: "var(--padding-sm)",
+        "sm-extra": "var(--padding-sm-extra)",
+        "sm-plus": "var(--padding-sm-plus)",
+        xl: "var(--padding-xl)",
+        xs: "var(--padding-xs)",
+        "xs-plus": "var(--padding-xs-plus)",
+        xxl: "var(--padding-xxl)",
+        xxs: "var(--padding-xxs)"
+    },
+    ringColor: {
+        transparent: "transparent",
+        white: "white",
+        primary: {
+            DEFAULT: "hsl(var(--ring-primary-default))",
+            dimmed: "hsl(var(--ring-primary-dimmed))",
+            strong: "hsl(var(--ring-primary-strong))",
+            subtle: "hsl(var(--ring-primary-subtle))"
+        },
+        success: {
+            DEFAULT: "hsl(var(--ring-success-default))",
+            dimmed: "hsl(var(--ring-success-dimmed))",
+            strong: "hsl(var(--ring-success-strong))",
+            subtle: "hsl(var(--ring-success-subtle))"
+        }
+    },
+    ringWidth: {
+        lg: "var(--ring-width-lg)",
+        md: "var(--ring-width-md)",
+        sm: "var(--ring-width-sm)"
+    },
+    shadow: {
+        flat: "var(--shadow-flat)",
+        lg: "var(--shadow-lg)",
+        md: "var(--shadow-md)",
+        sm: "var(--shadow-sm)",
+        xl: "var(--shadow-xl)",
+        xxl: "var(--shadow-xxl)"
+    },
+    spacing: {
+        "sidebar-collapsed": "var(--spacing-sidebar-collapsed)",
+        "sidebar-expanded": "var(--spacing-sidebar-expanded)",
+        "main-content": "var(--spacing-main-content)",
+        "3xl": "var(--spacing-3xl)",
+        lg: "var(--spacing-lg)",
+        md: "var(--spacing-md)",
+        "md-plus": "var(--spacing-md-plus)",
+        none: "var(--spacing-none)",
+        sm: "var(--spacing-sm)",
+        "sm-extra": "var(--spacing-sm-extra)",
+        "sm-plus": "var(--spacing-sm-plus)",
+        xl: "var(--spacing-xl)",
+        xs: "var(--spacing-xs)",
+        "xs-plus": "var(--spacing-xs-plus)",
+        xxl: "var(--spacing-xxl)",
+        xxs: "var(--spacing-xxs)"
+    },
+    textColor: {
+        transparent: "transparent",
+        white: "white",
+        accent: {
+            DEFAULT: "hsl(var(--text-accent-default))",
+            muted: "hsl(var(--text-accent-muted))",
+            primary: "hsl(var(--text-accent-primary))",
+            subtle: "hsl(var(--text-accent-subtle))"
+        },
+        destructive: {
+            DEFAULT: "hsl(var(--text-destructive-default))",
+            muted: "hsl(var(--text-destructive-muted))",
+            primary: "hsl(var(--text-destructive-primary))",
+            subtle: "hsl(var(--text-destructive-subtle))"
+        },
+        neutral: {
+            DEFAULT: "hsl(var(--text-neutral-default))",
+            dimmed: "hsl(var(--text-neutral-dimmed))",
+            disabled: "hsl(var(--text-neutral-disabled))",
+            light: "hsl(var(--text-neutral-light))",
+            muted: "hsl(var(--text-neutral-muted))",
+            primary: "hsl(var(--text-neutral-primary))",
+            strong: "hsl(var(--text-neutral-strong))"
+        },
+        success: {
+            DEFAULT: "hsl(var(--text-success-default))",
+            muted: "hsl(var(--text-success-muted))",
+            primary: "hsl(var(--text-success-primary))",
+            subtle: "hsl(var(--text-success-subtle))"
+        }
+    },
+    zIndex: {
+        5: 5,
+        15: 15,
+        25: 25,
+        35: 35,
+        45: 45
+    }
+};
diff --git a/packages/admin-ui/tsconfig.build.json b/packages/admin-ui/tsconfig.build.json
new file mode 100644
index 00000000000..8ea59ab6a0b
--- /dev/null
+++ b/packages/admin-ui/tsconfig.build.json
@@ -0,0 +1,16 @@
+{
+  "extends": "../../tsconfig.build.json",
+  "include": ["src"],
+  "references": [
+    { "path": "../react-composition/tsconfig.build.json" },
+    { "path": "../react-router/tsconfig.build.json" },
+    { "path": "../utils/tsconfig.build.json" }
+  ],
+  "compilerOptions": {
+    "rootDir": "./src",
+    "outDir": "./dist",
+    "declarationDir": "./dist",
+    "paths": { "~/*": ["./src/*"], "~tests/*": ["./__tests__/*"] },
+    "baseUrl": "."
+  }
+}
diff --git a/packages/admin-ui/tsconfig.json b/packages/admin-ui/tsconfig.json
new file mode 100644
index 00000000000..4311ec5052d
--- /dev/null
+++ b/packages/admin-ui/tsconfig.json
@@ -0,0 +1,25 @@
+{
+  "extends": "../../tsconfig.json",
+  "include": ["src", "__tests__"],
+  "references": [
+    { "path": "../react-composition" },
+    { "path": "../react-router" },
+    { "path": "../utils" }
+  ],
+  "compilerOptions": {
+    "rootDirs": ["./src", "./__tests__"],
+    "outDir": "./dist",
+    "declarationDir": "./dist",
+    "paths": {
+      "~/*": ["./src/*"],
+      "~tests/*": ["./__tests__/*"],
+      "@webiny/react-composition/*": ["../react-composition/src/*"],
+      "@webiny/react-composition": ["../react-composition/src"],
+      "@webiny/react-router/*": ["../react-router/src/*"],
+      "@webiny/react-router": ["../react-router/src"],
+      "@webiny/utils/*": ["../utils/src/*"],
+      "@webiny/utils": ["../utils/src"]
+    },
+    "baseUrl": "."
+  }
+}
diff --git a/packages/admin-ui/webiny.config.js b/packages/admin-ui/webiny.config.js
new file mode 100644
index 00000000000..b7d13bb2255
--- /dev/null
+++ b/packages/admin-ui/webiny.config.js
@@ -0,0 +1,22 @@
+const { createWatchPackage, createBuildPackage } = require("@webiny/project-utils");
+const path = require("path");
+const fs = require("node:fs");
+
+module.exports = {
+    commands: {
+        build: async (options, context) => {
+            await createBuildPackage({ cwd: __dirname })(options, context);
+            {
+                const from = path.join(__dirname, "tailwind.config.js");
+                const to = path.join(__dirname, "dist/tailwind.config.js");
+                fs.cpSync(from, to);
+            }
+            {
+                const from = path.join(__dirname, "tailwind.config.theme.js");
+                const to = path.join(__dirname, "dist/tailwind.config.theme.js");
+                fs.cpSync(from, to);
+            }
+        },
+        watch: createWatchPackage({ cwd: __dirname })
+    }
+};
diff --git a/packages/api-aco/__tests__/defaultPermissionsMerger.test.ts b/packages/api-aco/__tests__/defaultPermissionsMerger.test.ts
new file mode 100644
index 00000000000..dd87efd5f80
--- /dev/null
+++ b/packages/api-aco/__tests__/defaultPermissionsMerger.test.ts
@@ -0,0 +1,181 @@
+import { DefaultPermissionsMerger } from "~/flp/FolderLevelPermissions/useCases/GetDefaultPermissions/DefaultPermissionsMerger";
+import { createIdentity } from "./utils/identity";
+import { SecurityPermission } from "@webiny/api-security/types";
+import { FolderPermission } from "~/flp/flp.types";
+
+const identity1 = createIdentity({ id: "1", type: "admin", displayName: "Identity 1" });
+
+const merge = (
+    folderPermissions: FolderPermission[],
+    userPermissions: SecurityPermission[] = []
+) => {
+    return DefaultPermissionsMerger.merge(identity1, userPermissions, folderPermissions);
+};
+
+const expectMergeToEqual = (permissions: FolderPermission[], result: FolderPermission[]) => {
+    const merged = merge(permissions);
+    expect(merged).toEqual(result);
+};
+
+describe("DefaultPermissionsMerger", () => {
+    it("when comparing different permissions, the most permissive one wins", async () => {
+        // This is just a basic test that ensures the following: no-access > owner > editor > viewer.
+        expectMergeToEqual(
+            [
+                { target: "admin:1", level: "no-access" },
+                { target: "admin:1", level: "viewer" },
+                { target: "admin:1", level: "editor" }
+            ],
+            [{ level: "no-access", target: "admin:1" }]
+        );
+
+        expectMergeToEqual(
+            [
+                { target: "admin:1", level: "no-access" },
+                { target: "admin:1", level: "viewer" },
+                { target: "admin:1", level: "editor" },
+                { target: "admin:1", level: "owner" }
+            ],
+            [{ level: "no-access", target: "admin:1" }]
+        );
+
+        expectMergeToEqual(
+            [
+                { target: "admin:1", level: "viewer" },
+                { target: "admin:1", level: "editor" }
+            ],
+            [{ level: "editor", target: "admin:1" }]
+        );
+
+        expectMergeToEqual(
+            [
+                { target: "admin:1", level: "editor" },
+                { target: "admin:1", level: "owner" }
+            ],
+            [{ level: "owner", target: "admin:1" }]
+        );
+    });
+
+    it("no-access permission cannot be overridden", async () => {
+        expectMergeToEqual(
+            [
+                { target: "admin:1", level: "no-access" },
+                { target: "admin:1", level: "viewer" },
+                { target: "admin:2", level: "owner" }
+            ],
+            [
+                { level: "owner", target: "admin:2" },
+                { level: "no-access", target: "admin:1" }
+            ]
+        );
+
+        expectMergeToEqual(
+            [
+                { target: "admin:1", level: "no-access" },
+                { target: "admin:1", level: "editor" },
+                { target: "admin:2", level: "owner" }
+            ],
+            [
+                { level: "owner", target: "admin:2" },
+                { level: "no-access", target: "admin:1" }
+            ]
+        );
+
+        expectMergeToEqual(
+            [
+                { target: "admin:1", level: "no-access" },
+                { target: "admin:1", level: "owner" },
+                { target: "admin:2", level: "owner" }
+            ],
+            [
+                { level: "owner", target: "admin:2" },
+                { level: "no-access", target: "admin:1" }
+            ]
+        );
+
+        // parent-inherited `no-access` permission also cannot be overridden.
+        expectMergeToEqual(
+            [
+                { target: "admin:1", level: "no-access", inheritedFrom: "parent:xyz" },
+                { target: "admin:1", level: "viewer" },
+                { target: "admin:2", level: "owner" }
+            ],
+            [
+                { level: "owner", target: "admin:2" },
+                { level: "no-access", target: "admin:1", inheritedFrom: "parent:xyz" }
+            ]
+        );
+
+        expectMergeToEqual(
+            [
+                { target: "admin:1", level: "no-access", inheritedFrom: "parent:xyz" },
+                { target: "admin:1", level: "owner" },
+                { target: "admin:2", level: "owner" }
+            ],
+            [
+                { level: "owner", target: "admin:2" },
+                { level: "no-access", target: "admin:1", inheritedFrom: "parent:xyz" }
+            ]
+        );
+    });
+
+    it("permissions inherited from parent can be overridden by new permissions", async () => {
+        expectMergeToEqual(
+            [
+                { target: "admin:1", level: "editor", inheritedFrom: "parent:xyz" },
+                { target: "admin:1", level: "viewer" },
+                { target: "admin:2", level: "owner" }
+            ],
+            [
+                { level: "viewer", target: "admin:1" },
+                { level: "owner", target: "admin:2" }
+            ]
+        );
+
+        expectMergeToEqual(
+            [
+                { target: "admin:1", level: "viewer", inheritedFrom: "parent:xyz" },
+                { target: "admin:1", level: "editor" },
+                { target: "admin:2", level: "owner" }
+            ],
+            [
+                { level: "editor", target: "admin:1" },
+                { level: "owner", target: "admin:2" }
+            ]
+        );
+    });
+
+    it("parent-inherited `owner` permission can be overridden", async () => {
+        expectMergeToEqual(
+            [
+                { target: "admin:1", level: "owner", inheritedFrom: "parent:xyz" },
+                { target: "admin:1", level: "no-access" },
+                { target: "admin:2", level: "owner" }
+            ],
+            [
+                { level: "owner", target: "admin:2" },
+                { level: "no-access", target: "admin:1" }
+            ]
+        );
+    });
+
+    it("if a u user has `full-access` permission, then they're an `owner` of all folders", async () => {
+        const result = merge(
+            [
+                { target: "admin:1", level: "no-access" },
+                { target: "admin:1", level: "viewer" },
+                { target: "admin:2", level: "owner" }
+            ],
+            [{ name: "*" }]
+        );
+
+        expect(result).toEqual([
+            {
+                inheritedFrom: "role:full-access",
+                level: "owner",
+                target: "admin:1"
+            },
+            { level: "owner", target: "admin:2" }
+        ]);
+    });
+});
diff --git a/packages/api-aco/__tests__/flp.cms.test.ts b/packages/api-aco/__tests__/flp.cms.test.ts
index c6da4803a32..076fb5f2db8 100644
--- a/packages/api-aco/__tests__/flp.cms.test.ts
+++ b/packages/api-aco/__tests__/flp.cms.test.ts
@@ -6,7 +6,7 @@ const identityA: SecurityIdentity = { id: "1", type: "admin", displayName: "A" }
 const identityB: SecurityIdentity = { id: "2", type: "admin", displayName: "B" };
 const identityC: SecurityIdentity = { id: "3", type: "admin", displayName: "C" };
 
-describe("Folder Level Permissions - File Manager GraphQL API", () => {
+describe("Folder Level Permissions - CMS GraphQL API", () => {
     const gqlIdentityA = useGraphQlHandler({ identity: identityA });
 
     test.todo("as a user without FM permissions, I should not be able to CRUD content");
@@ -304,6 +304,137 @@ describe("Folder Level Permissions - File Manager GraphQL API", () => {
         }
     });
 
+    test("as a user, I should not be able to CRUD content in an inaccessible folder (no-access level)", async () => {
+        const gqlIdentityA = useGraphQlHandler({ identity: identityA });
+        const gqlIdentityB = useGraphQlHandler({
+            identity: identityB,
+            permissions: [{ name: "cms.*" }]
+        });
+        const modelGroup = await gqlIdentityA.cms.createTestModelGroup();
+        const model = await gqlIdentityA.cms.createBasicModel({ modelGroup: modelGroup.id });
+
+        const folder = await gqlIdentityA.aco
+            .createFolder({
+                data: {
+                    title: "Folder A",
+                    slug: "folder-a",
+                    type: `cms:${model.modelId}`
+                }
+            })
+            .then(([response]) => {
+                return response.data.aco.createFolder.data;
+            });
+
+        const entries = [];
+        for (let i = 1; i <= 4; i++) {
+            entries.push(
+                await gqlIdentityA.cms
+                    .createEntry(model, {
+                        data: {
+                            title: `Test-${i}`,
+                            wbyAco_location: {
+                                folderId: folder.id
+                            }
+                        }
+                    })
+                    .then(([response]) => {
+                        return response.data.createBasicTestModel.data;
+                    })
+            );
+        }
+
+        // Identity B (role `no-access`) cannot access the folder or CRUD entries inside it.
+        await gqlIdentityA.aco.updateFolder({
+            id: folder.id,
+            data: {
+                permissions: [
+                    {
+                        target: `admin:${identityB.id}`,
+                        level: "no-access"
+                    }
+                ]
+            }
+        });
+
+        // Getting content in the folder should be forbidden for identity B.
+        for (let i = 0; i < entries.length; i++) {
+            const createdEntry = entries[i];
+            await expectNotAuthorized(
+                gqlIdentityB.cms
+                    .getEntry(model, { revision: createdEntry.id })
+                    .then(([response]) => {
+                        return response.data.getBasicTestModel;
+                    })
+            );
+        }
+
+        // Listing content in the folder should be forbidden for identity B.
+        await expect(
+            gqlIdentityB.cms
+                .listEntries(model, {
+                    where: {
+                        wbyAco_location: {
+                            folderId: folder.id
+                        }
+                    }
+                })
+                .then(([response]) => {
+                    return response.data.listBasicTestModels;
+                })
+        ).resolves.toEqual({
+            data: [],
+            error: null,
+            meta: {
+                cursor: null,
+                hasMoreItems: false,
+                totalCount: 0
+            }
+        });
+
+        // Creating content in the folder should be forbidden for identity B.
+        await expectNotAuthorized(
+            gqlIdentityB.cms
+                .createEntry(model, {
+                    data: {
+                        title: `Test-5`,
+                        wbyAco_location: {
+                            folderId: folder.id
+                        }
+                    }
+                })
+                .then(([response]) => {
+                    return response.data.createBasicTestModel;
+                })
+        );
+
+        // Updating content in the folder should be forbidden for identity B.
+        for (let i = 0; i < entries.length; i++) {
+            const createdEntry = entries[i];
+            await expectNotAuthorized(
+                gqlIdentityB.cms
+                    .updateEntry(model, {
+                        revision: createdEntry.id,
+                        data: { title: createdEntry.title + "-update" }
+                    })
+                    .then(([response]) => {
+                        return response.data.updateBasicTestModel;
+                    })
+            );
+        }
+
+        // Deleting a file in the folder should be forbidden for identity C.
+        for (let i = 0; i < entries.length; i++) {
+            const createdEntry = entries[i];
+            await expectNotAuthorized(
+                gqlIdentityB.cms
+                    .deleteEntry(model, { revision: createdEntry.id })
+                    .then(([response]) => {
+                        return response.data.deleteBasicTestModel;
+                    })
+            );
+        }
+    });
+
     it("as a user with 'viewer' access to a folder, I should not be able to create, update, or delete content in it", async () => {
         const gqlIdentityA = useGraphQlHandler({ identity: identityA });
         const gqlIdentityC = useGraphQlHandler({
diff --git a/packages/api-aco/__tests__/flp.fm.test.ts b/packages/api-aco/__tests__/flp.fm.test.ts
index 480cc1c79c8..0409c188d38 100644
--- a/packages/api-aco/__tests__/flp.fm.test.ts
+++ b/packages/api-aco/__tests__/flp.fm.test.ts
@@ -289,6 +289,111 @@ describe("Folder Level Permissions - File Manager GraphQL API", () => {
         }
     });
 
+    test("as a user, I should not be able to CRUD files in an inaccessible folder (no-access level)", async () => {
+        const folder = await gqlIdentityA.aco
+            .createFolder({
+                data: {
+                    title: "Folder A",
+                    slug: "folder-a",
+                    type: FOLDER_TYPE
+                }
+            })
+            .then(([response]) => {
+                return response.data.aco.createFolder.data;
+            });
+
+        const createdFiles = [];
+        for (let i = 1; i <= 4; i++) {
+            createdFiles.push(
+                await gqlIdentityA.fm
+                    .createFile({
+                        data: createSampleFileData({
+                            location: { folderId: folder.id }
+                        })
+                    })
+                    .then(([response]) => {
+                        return response.data.fileManager.createFile.data;
+                    })
+            );
+        }
+
+        // Let's update the folder: identity A assigns `no-access` level to identity B
+        await gqlIdentityA.aco.updateFolder({
+            id: folder.id,
+            data: {
+                permissions: [
+                    {
+                        target: `admin:${identityB.id}`,
+                        level: "no-access"
+                    }
+                ]
+            }
+        });
+
+        // Getting files in the folder should be forbidden for identity B.
+        for (let i = 0; i < createdFiles.length; i++) {
+            const createdFile = createdFiles[i];
+            await expectNotAuthorized(
+                gqlIdentityB.fm.getFile({ id: createdFile.id }).then(([response]) => {
+                    return response.data.fileManager.getFile;
+                })
+            );
+        }
+
+        // Listing files in the folder should be forbidden for identity B.
+        await expect(
+            gqlIdentityB.fm.listFiles().then(([response]) => {
+                return response.data.fileManager.listFiles;
+            })
+        ).resolves.toEqual({
+            data: [],
+            error: null,
+            meta: {
+                cursor: null,
+                hasMoreItems: false,
+                totalCount: 0
+            }
+        });
+
+        // Creating a file in the folder should be forbidden for identity B.
+        await expectNotAuthorized(
+            gqlIdentityB.fm
+                .createFile({
+                    data: createSampleFileData({
+                        location: { folderId: folder.id }
+                    })
+                })
+                .then(([response]) => {
+                    return response.data.fileManager.createFile;
+                })
+        );
+
+        // Updating a file in the folder should be forbidden for identity B.
+        for (let i = 0; i < createdFiles.length; i++) {
+            const createdFile = createdFiles[i];
+            await expectNotAuthorized(
+                gqlIdentityB.fm
+                    .updateFile({
+                        id: createdFile.id,
+                        data: { name: createdFile.name + "-update" }
+                    })
+                    .then(([response]) => {
+                        return response.data.fileManager.updateFile;
+                    })
+            );
+        }
+
+        // Deleting a file in the folder should be forbidden for identity B.
+        for (let i = 0; i < createdFiles.length; i++) {
+            const createdFile = createdFiles[i];
+            await expectNotAuthorized(
+                gqlIdentityB.fm.deleteFile({ id: createdFile.id }).then(([response]) => {
+                    return response.data.fileManager.deleteFile;
+                })
+            );
+        }
+    });
+
     test("as a user, I should not be able to delete folders that have content they cannot see", async () => {
         const folderA = await gqlIdentityA.aco
             .createFolder({
diff --git a/packages/api-aco/__tests__/flp.tasks.test.ts b/packages/api-aco/__tests__/flp.tasks.test.ts
new file mode 100644
index 00000000000..670925f46af
--- /dev/null
+++ b/packages/api-aco/__tests__/flp.tasks.test.ts
@@ -0,0 +1,902 @@
+import { CreateFlp, DeleteFlp } from "~/flp/useCases";
+import { useHandler } from "~tests/utils/useHandler";
+import type { Folder } from "~/folder/folder.types";
+import { ROOT_FOLDER } from "~/constants";
+
+describe("Folder Level Permissions -  CREATE FLP", () => {
+    const { handler } = useHandler();
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
+
+    it("should create an FLP record without a parent folder", async () => {
+        const context = await handler();
+
+        const folder = await context.aco.folder.create({
+            title: "Folder 1",
+            type: "type1",
+            slug: "folder1",
+            parentId: null
+        });
+
+        const flp = await context.aco.flp.get(folder.id);
+
+        expect(flp).toMatchObject({
+            id: folder.id,
+            type: "type1",
+            slug: "folder1",
+            parentId: ROOT_FOLDER,
+            path: `${ROOT_FOLDER}/folder1`,
+            permissions: []
+        });
+    });
+
+    it("should create an FLP record with a parent folder", async () => {
+        const context = await handler();
+
+        const folder1 = await context.aco.folder.create({
+            title: "Folder 1",
+            type: "type1",
+            slug: "folder1",
+            parentId: null
+        });
+
+        await context.aco.folder.update(folder1.id, {
+            permissions: [
+                {
+                    target: "admin:1234",
+                    level: "viewer"
+                }
+            ]
+        });
+
+        const folder2 = await context.aco.folder.create({
+            title: "Folder 2",
+            type: "type1",
+            slug: "folder2",
+            parentId: folder1.id
+        });
+
+        const flp = await context.aco.flp.get(folder2.id);
+
+        expect(flp).toMatchObject({
+            id: folder2.id,
+            type: "type1",
+            slug: "folder2",
+            parentId: folder1.id,
+            path: `${ROOT_FOLDER}/folder1/folder2`,
+            permissions: [
+                {
+                    target: "admin:1234",
+                    level: "viewer",
+                    inheritedFrom: `parent:${folder1.id}`
+                }
+            ]
+        });
+    });
+
+    it("should throw an error if the folder is not provided", async () => {
+        const context = await handler();
+        const createFlp = new CreateFlp(context);
+
+        await expect(createFlp.execute(undefined as never)).rejects.toThrow(
+            "Missing `folder`, I can't create a new record into the FLP catalog."
+        );
+    });
+
+    it("should throw an error if the parent FLP is not found", async () => {
+        const context = await handler();
+
+        const parentFolder = {
+            title: "Parent Folder",
+            type: "type1",
+            slug: "parent-folder",
+            parentId: null
+        };
+
+        // Let's create the parent folder first
+        const parentFolderResponse = await context.aco.folder.create(parentFolder);
+
+        // Let's delete the parent folder FLP record, this should not happen in real life.
+        await context.aco.flp.delete(parentFolderResponse.id);
+
+        const folder = {
+            title: "Folder",
+            type: "type1",
+            slug: "folder-id",
+            parentId: parentFolderResponse.id
+        };
+
+        await expect(context.aco.folder.create(folder)).rejects.toThrow(
+            "Parent folder level permission not found. Unable to create a new record in the FLP catalog."
+        );
+    });
+});
+
+describe("Folder Level Permissions -  DELETE FLP", () => {
+    const { handler } = useHandler();
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
+
+    it("should throw an error if the folder is not provided", async () => {
+        const context = await handler();
+        const deleteFlp = new DeleteFlp(context);
+
+        await expect(deleteFlp.execute(undefined as unknown as Folder)).rejects.toThrow(
+            "Missing `folder` from the task input, I can't delete the record from the FLP catalog."
+        );
+    });
+
+    it("should delete an FLP record successfully", async () => {
+        const context = await handler();
+
+        const folder = await context.aco.folder.create({
+            title: "Folder 1",
+            type: "type1",
+            slug: "folder1",
+            parentId: null
+        });
+
+        const flp = await context.aco.flp.get(folder.id);
+
+        expect(flp).toMatchObject({
+            id: folder.id,
+            type: "type1",
+            slug: "folder1",
+            parentId: ROOT_FOLDER,
+            path: `${ROOT_FOLDER}/folder1`,
+            permissions: []
+        });
+
+        await context.aco.flp.delete(folder.id);
+
+        const deletedFlp = await context.aco.flp.get(folder.id);
+
+        await expect(deletedFlp).toBeNull();
+    });
+});
+
+describe("Folder Level Permissions -  UPDATE FLP - Simple", () => {
+    const { handler } = useHandler();
+    const type = "type";
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
+
+    it("should update a root folder's permissions", async () => {
+        const context = await handler();
+
+        const folder = await context.aco.folder.create({
+            type,
+            title: "Main folder",
+            slug: "main-folder",
+            parentId: null
+        });
+
+        await context.aco.folder.update(folder.id, {
+            permissions: [
+                {
+                    target: "admin:1234",
+                    level: "viewer"
+                }
+            ]
+        });
+
+        const flp = await context.aco.flp.get(folder.id);
+        expect(flp).toMatchObject({
+            id: folder.id,
+            type,
+            slug: folder.slug,
+            parentId: ROOT_FOLDER,
+            path: `${ROOT_FOLDER}/${folder.slug}`,
+            permissions: [
+                {
+                    target: "admin:1234",
+                    level: "viewer"
+                }
+            ]
+        });
+    });
+
+    it("should update a folder's slug and path", async () => {
+        const context = await handler();
+
+        const folder = await context.aco.folder.create({
+            type,
+            title: "Folder 1",
+            slug: "folder-1",
+            parentId: null
+        });
+
+        const updatedFolder = await context.aco.folder.update(folder.id, {
+            slug: "folder-1-updated"
+        });
+
+        const flp = await context.aco.flp.get(folder.id);
+        expect(flp).toMatchObject({
+            id: folder.id,
+            type,
+            slug: updatedFolder.slug,
+            parentId: ROOT_FOLDER,
+            path: `${ROOT_FOLDER}/${updatedFolder.slug}`,
+            permissions: []
+        });
+    });
+
+    it("should update a folder's parent and path", async () => {
+        const context = await handler();
+
+        // Create parent folder
+        const parentFolder = await context.aco.folder.create({
+            type,
+            title: "Parent folder",
+            slug: "parent-folder",
+            parentId: null
+        });
+
+        // Create child folder
+        const childFolder = await context.aco.folder.create({
+            type,
+            title: "Child folder",
+            slug: "child-folder",
+            parentId: null
+        });
+
+        // Update child folder to be under parent
+        await context.aco.folder.update(childFolder.id, {
+            parentId: parentFolder.id
+        });
+
+        const flp = await context.aco.flp.get(childFolder.id);
+        expect(flp).toMatchObject({
+            id: childFolder.id,
+            type,
+            slug: childFolder.slug,
+            parentId: parentFolder.id,
+            path: `${ROOT_FOLDER}/${parentFolder.slug}/${childFolder.slug}`,
+            permissions: []
+        });
+    });
+
+    it("should update a folder's permissions and propagate to direct child", async () => {
+        const context = await handler();
+
+        // Create parent folder
+        const parentFolder = await context.aco.folder.create({
+            type,
+            title: "Parent folder",
+            slug: "parent-folder",
+            parentId: null
+        });
+
+        // Create child folder
+        const childFolder = await context.aco.folder.create({
+            type,
+            title: "Child folder",
+            slug: "child-folder",
+            parentId: parentFolder.id
+        });
+
+        // Update parent folder with new permissions
+        await context.aco.folder.update(parentFolder.id, {
+            permissions: [
+                {
+                    target: "admin:1234",
+                    level: "viewer"
+                }
+            ]
+        });
+
+        // Check parent folder
+        const parentFlp = await context.aco.flp.get(parentFolder.id);
+        expect(parentFlp).toMatchObject({
+            id: parentFolder.id,
+            type,
+            slug: parentFolder.slug,
+            parentId: ROOT_FOLDER,
+            path: `${ROOT_FOLDER}/${parentFolder.slug}`,
+            permissions: [
+                {
+                    target: "admin:1234",
+                    level: "viewer"
+                }
+            ]
+        });
+
+        // Check child folder
+        const childFlp = await context.aco.flp.get(childFolder.id);
+        expect(childFlp).toMatchObject({
+            id: childFolder.id,
+            type,
+            slug: childFolder.slug,
+            parentId: parentFolder.id,
+            path: `${ROOT_FOLDER}/${parentFolder.slug}/${childFolder.slug}`,
+            permissions: [
+                {
+                    target: "admin:1234",
+                    level: "viewer",
+                    inheritedFrom: `parent:${parentFolder.id}`
+                }
+            ]
+        });
+
+        // Update child folder with its own permissions
+        await context.aco.folder.update(childFolder.id, {
+            permissions: [
+                {
+                    target: "admin:5678",
+                    level: "editor"
+                }
+            ]
+        });
+
+        {
+            // Check child folder
+            const updatedChildFlp = await context.aco.flp.get(childFolder.id);
+            expect(updatedChildFlp).toMatchObject({
+                id: childFolder.id,
+                type,
+                slug: childFolder.slug,
+                parentId: parentFolder.id,
+                permissions: [
+                    {
+                        target: "admin:5678",
+                        level: "editor"
+                    },
+                    {
+                        target: "admin:1234",
+                        level: "viewer",
+                        inheritedFrom: `parent:${parentFolder.id}`
+                    }
+                ]
+            });
+        }
+
+        // Update the parent folder removing all permissions
+        await context.aco.folder.update(parentFolder.id, {
+            permissions: []
+        });
+
+        // Check parent folder
+        const updatedParentFlp = await context.aco.flp.get(parentFolder.id);
+        expect(updatedParentFlp).toMatchObject({
+            id: parentFolder.id,
+            type,
+            slug: parentFolder.slug,
+            parentId: ROOT_FOLDER,
+            permissions: []
+        });
+
+        {
+            // Check child folder
+            const updatedChildFlp = await context.aco.flp.get(childFolder.id);
+            expect(updatedChildFlp).toMatchObject({
+                id: childFolder.id,
+                type,
+                slug: childFolder.slug,
+                parentId: parentFolder.id,
+                permissions: [
+                    {
+                        target: "admin:5678",
+                        level: "editor"
+                    }
+                ]
+            });
+        }
+    });
+});
+
+/**
+ * Folder Structures Used in Tests:
+ *
+ * 1. Multi-branch Structure:
+ *    main
+ *    ├── branch1
+ *    │   └── branch1-sub
+ *    └── branch2
+ *        └── branch2-sub
+ *
+ * 2. Deep Nested Structure:
+ *    level1
+ *    └── level2
+ *        └── level3
+ *            └── level4
+ *
+ * 3. Moving Branch Structure:
+ *    main1    main2
+ *    └── branch
+ *        └── subfolder
+ *
+ * Permission Inheritance Flow:
+ * - Main folder permissions flow down to all children
+ * - Branch permissions are added to inherited permissions
+ * - Moving a branch updates all paths and permissions
+ */
+
+describe("Folder Level Permissions -  UPDATE FLP - Complex", () => {
+    const { handler } = useHandler();
+    const type = "type";
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
+
+    it("should handle multi-branch updates with different permissions", async () => {
+        const context = await handler();
+
+        // Create main folder
+        const mainFolder = await context.aco.folder.create({
+            type,
+            title: "Main",
+            slug: "main",
+            parentId: null
+        });
+
+        // Create two branches under main
+        const branch1 = await context.aco.folder.create({
+            type,
+            title: "Branch 1",
+            slug: "branch1",
+            parentId: mainFolder.id
+        });
+
+        const branch2 = await context.aco.folder.create({
+            type,
+            title: "Branch 2",
+            slug: "branch2",
+            parentId: mainFolder.id
+        });
+
+        // Create subfolders in each branch
+        const branch1Subfolder = await context.aco.folder.create({
+            type,
+            title: "Branch 1 - Sub",
+            slug: "branch1-sub",
+            parentId: branch1.id
+        });
+
+        const branch2Subfolder = await context.aco.folder.create({
+            type,
+            title: "Branch 2 - Sub",
+            slug: "branch2-sub",
+            parentId: branch2.id
+        });
+
+        // Update main with permissions
+        await context.aco.folder.update(mainFolder.id, {
+            permissions: [
+                {
+                    target: "admin:user1",
+                    level: "viewer"
+                }
+            ]
+        });
+
+        // Verify all folders have inherited main permissions
+        // Verify main folder has its own permissions
+        const mainFlp = await context.aco.flp.get(mainFolder.id);
+        expect(mainFlp).toMatchObject({
+            permissions: [
+                {
+                    target: "admin:user1",
+                    level: "viewer"
+                }
+            ]
+        });
+
+        // Verify branch1 inherited permissions from main
+        const branch1Flp1 = await context.aco.flp.get(branch1.id);
+        expect(branch1Flp1).toMatchObject({
+            permissions: [
+                {
+                    target: "admin:user1",
+                    level: "viewer",
+                    inheritedFrom: `parent:${mainFolder.id}`
+                }
+            ]
+        });
+
+        // Verify branch2 inherited permissions from main
+        const branch2Flp1 = await context.aco.flp.get(branch2.id);
+        expect(branch2Flp1).toMatchObject({
+            permissions: [
+                {
+                    target: "admin:user1",
+                    level: "viewer",
+                    inheritedFrom: `parent:${mainFolder.id}`
+                }
+            ]
+        });
+
+        // Verify branch1 subfolder inherited permissions from branch1
+        const branch1SubFlp1 = await context.aco.flp.get(branch1Subfolder.id);
+        expect(branch1SubFlp1).toMatchObject({
+            permissions: [
+                {
+                    target: "admin:user1",
+                    level: "viewer",
+                    inheritedFrom: `parent:${branch1.id}`
+                }
+            ]
+        });
+
+        // Verify branch2 subfolder inherited permissions from branch2
+        const branch2SubFlp1 = await context.aco.flp.get(branch2Subfolder.id);
+        expect(branch2SubFlp1).toMatchObject({
+            permissions: [
+                {
+                    target: "admin:user1",
+                    level: "viewer",
+                    inheritedFrom: `parent:${branch2.id}`
+                }
+            ]
+        });
+
+        // Update branch1 with its own permissions
+        await context.aco.folder.update(branch1.id, {
+            permissions: [
+                {
+                    target: "admin:user2",
+                    level: "editor"
+                }
+            ]
+        });
+
+        // Verify branch1 and its subfolder have both permissions
+        const branch1Flp2 = await context.aco.flp.get(branch1.id);
+        expect(branch1Flp2).toMatchObject({
+            id: branch1.id,
+            type,
+            slug: branch1.slug,
+            parentId: mainFolder.id,
+            path: `${ROOT_FOLDER}/${mainFolder.slug}/${branch1.slug}`,
+            permissions: [
+                {
+                    target: "admin:user2",
+                    level: "editor"
+                },
+                {
+                    target: "admin:user1",
+                    level: "viewer",
+                    inheritedFrom: `parent:${mainFolder.id}`
+                }
+            ]
+        });
+
+        const branch1SubFlp2 = await context.aco.flp.get(branch1Subfolder.id);
+        expect(branch1SubFlp2).toMatchObject({
+            id: branch1Subfolder.id,
+            type,
+            slug: branch1Subfolder.slug,
+            parentId: branch1.id,
+            path: `${ROOT_FOLDER}/${mainFolder.slug}/${branch1.slug}/${branch1Subfolder.slug}`,
+            permissions: [
+                {
+                    target: "admin:user2",
+                    level: "editor",
+                    inheritedFrom: `parent:${branch1.id}`
+                },
+                {
+                    target: "admin:user1",
+                    level: "viewer",
+                    inheritedFrom: `parent:${branch1.id}`
+                }
+            ]
+        });
+
+        // Verify branch2 and its subfolder still only have main permissions
+        const branch2Flp2 = await context.aco.flp.get(branch2.id);
+        expect(branch2Flp2).toMatchObject({
+            id: branch2.id,
+            type,
+            slug: branch2.slug,
+            parentId: mainFolder.id,
+            path: `${ROOT_FOLDER}/${mainFolder.slug}/${branch2.slug}`,
+            permissions: [
+                {
+                    target: "admin:user1",
+                    level: "viewer",
+                    inheritedFrom: `parent:${mainFolder.id}`
+                }
+            ]
+        });
+
+        const branch2SubFlp2 = await context.aco.flp.get(branch2Subfolder.id);
+        expect(branch2SubFlp2).toMatchObject({
+            id: branch2Subfolder.id,
+            type,
+            slug: branch2Subfolder.slug,
+            parentId: branch2.id,
+            path: `${ROOT_FOLDER}/${mainFolder.slug}/${branch2.slug}/${branch2Subfolder.slug}`,
+            permissions: [
+                {
+                    target: "admin:user1",
+                    level: "viewer",
+                    inheritedFrom: `parent:${branch2.id}`
+                }
+            ]
+        });
+    });
+
+    it("should handle deep nested folder updates", async () => {
+        const context = await handler();
+
+        // Create a deep folder structure
+        const level1 = await context.aco.folder.create({
+            type,
+            title: "Level 1",
+            slug: "level1",
+            parentId: null
+        });
+
+        const level2 = await context.aco.folder.create({
+            type,
+            title: "Level 2",
+            slug: "level2",
+            parentId: level1.id
+        });
+
+        const level3 = await context.aco.folder.create({
+            type,
+            title: "Level 3",
+            slug: "level3",
+            parentId: level2.id
+        });
+
+        const level4 = await context.aco.folder.create({
+            type,
+            title: "Level 4",
+            slug: "level4",
+            parentId: level3.id
+        });
+
+        const folders = [level1, level2, level3, level4];
+
+        // Update level1 with permissions
+        await context.aco.folder.update(level1.id, {
+            permissions: [
+                {
+                    target: "admin:user1",
+                    level: "viewer"
+                }
+            ]
+        });
+
+        // Verify all levels have inherited permissions
+        for (let i = 0; i < folders.length; i++) {
+            const folder = folders[i];
+            const flp = await context.aco.flp.get(folder.id);
+
+            const expectedPath = folders
+                .slice(0, i + 1)
+                .map(f => f.slug)
+                .join("/");
+
+            if (i === 0) {
+                expect(flp).toMatchObject({
+                    id: folder.id,
+                    type,
+                    slug: folder.slug,
+                    parentId: ROOT_FOLDER,
+                    path: `${ROOT_FOLDER}/${expectedPath}`,
+                    permissions: [
+                        {
+                            target: "admin:user1",
+                            level: "viewer"
+                        }
+                    ]
+                });
+            } else {
+                expect(flp).toMatchObject({
+                    id: folder.id,
+                    type,
+                    slug: folder.slug,
+                    parentId: folders[i - 1].id,
+                    path: `${ROOT_FOLDER}/${expectedPath}`,
+                    permissions: [
+                        {
+                            target: "admin:user1",
+                            level: "viewer",
+                            inheritedFrom: `parent:${folders[i - 1].id}`
+                        }
+                    ]
+                });
+            }
+        }
+
+        // Update level2 with its empty permissions: it should always inherit permissions from level1 and propagate them down
+        await context.aco.folder.update(level2.id, {
+            permissions: []
+        });
+
+        // Verify level2 has no permissions
+        for (let i = 0; i < folders.length; i++) {
+            const folder = folders[i];
+            const flp = await context.aco.flp.get(folder.id);
+
+            const expectedPath = folders
+                .slice(0, i + 1)
+                .map(f => f.slug)
+                .join("/");
+
+            if (i === 0) {
+                expect(flp).toMatchObject({
+                    id: folder.id,
+                    type,
+                    slug: folder.slug,
+                    parentId: ROOT_FOLDER,
+                    path: `${ROOT_FOLDER}/${expectedPath}`,
+                    permissions: [
+                        {
+                            target: "admin:user1",
+                            level: "viewer"
+                        }
+                    ]
+                });
+            } else {
+                expect(flp).toMatchObject({
+                    id: folder.id,
+                    type,
+                    slug: folder.slug,
+                    parentId: folders[i - 1].id,
+                    path: `${ROOT_FOLDER}/${expectedPath}`,
+                    permissions: [
+                        {
+                            target: "admin:user1",
+                            level: "viewer",
+                            inheritedFrom: `parent:${folders[i - 1].id}`
+                        }
+                    ]
+                });
+            }
+        }
+
+        // Update level3 with its own permissions
+        await context.aco.folder.update(level3.id, {
+            permissions: [
+                {
+                    target: "admin:user2",
+                    level: "editor"
+                }
+            ]
+        });
+
+        // Verify level3 and level4 have both permissions
+        const level3Flp = await context.aco.flp.get(level3.id);
+
+        expect(level3Flp).toMatchObject({
+            id: level3.id,
+            type,
+            slug: level3.slug,
+            parentId: level2.id,
+            path: `${ROOT_FOLDER}/${level1.slug}/${level2.slug}/${level3.slug}`,
+            permissions: [
+                {
+                    target: "admin:user2",
+                    level: "editor"
+                },
+                {
+                    target: "admin:user1",
+                    level: "viewer",
+                    inheritedFrom: `parent:${level2.id}`
+                }
+            ]
+        });
+
+        const level4Flp = await context.aco.flp.get(level4.id);
+        expect(level4Flp).toMatchObject({
+            id: level4.id,
+            type,
+            slug: level4.slug,
+            parentId: level3.id,
+            path: `${ROOT_FOLDER}/${level1.slug}/${level2.slug}/${level3.slug}/${level4.slug}`,
+            permissions: [
+                {
+                    target: "admin:user2",
+                    level: "editor",
+                    inheritedFrom: `parent:${level3.id}`
+                },
+                {
+                    target: "admin:user1",
+                    level: "viewer",
+                    inheritedFrom: `parent:${level3.id}`
+                }
+            ]
+        });
+    });
+
+    it("should handle moving a branch to a different parent", async () => {
+        const context = await handler();
+
+        // Create two main folders
+        const main1 = await context.aco.folder.create({
+            type,
+            title: "Main 1",
+            slug: "main1",
+            parentId: null
+        });
+
+        await context.aco.folder.update(main1.id, {
+            permissions: [
+                {
+                    target: "admin:user1",
+                    level: "viewer"
+                }
+            ]
+        });
+
+        const main2 = await context.aco.folder.create({
+            type,
+            title: "Main 2",
+            slug: "main2",
+            parentId: null
+        });
+
+        await context.aco.folder.update(main2.id, {
+            permissions: [
+                {
+                    target: "admin:user2",
+                    level: "editor"
+                }
+            ]
+        });
+
+        // Create a branch under main1
+        const branch = await context.aco.folder.create({
+            type,
+            title: "Branch",
+            slug: "branch",
+            parentId: main1.id
+        });
+
+        // Create a subfolder in the branch
+        const subfolder = await context.aco.folder.create({
+            type,
+            title: "Subfolder",
+            slug: "subfolder",
+            parentId: branch.id
+        });
+
+        // Move the branch to main2
+        await context.aco.folder.update(branch.id, {
+            parentId: main2.id
+        });
+
+        // Verify branch and subfolder have correct paths and permissions
+        const branchFlp = await context.aco.flp.get(branch.id);
+        expect(branchFlp).toMatchObject({
+            id: branch.id,
+            type,
+            slug: branch.slug,
+            parentId: main2.id,
+            path: `${ROOT_FOLDER}/${main2.slug}/${branch.slug}`,
+            permissions: [
+                {
+                    target: "admin:user2",
+                    level: "editor",
+                    inheritedFrom: `parent:${main2.id}`
+                }
+            ]
+        });
+
+        const subfolderFlp = await context.aco.flp.get(subfolder.id);
+        expect(subfolderFlp).toMatchObject({
+            id: subfolder.id,
+            type,
+            slug: subfolder.slug,
+            parentId: branch.id,
+            path: `${ROOT_FOLDER}/${main2.slug}/${branch.slug}/${subfolder.slug}`,
+            permissions: [
+                {
+                    target: "admin:user2",
+                    level: "editor",
+                    inheritedFrom: `parent:${branch.id}`
+                }
+            ]
+        });
+    });
+});
diff --git a/packages/api-aco/__tests__/folder.flp.crud.test.ts b/packages/api-aco/__tests__/folder.flp.crud.test.ts
index e8da5557503..5f24be98aa0 100644
--- a/packages/api-aco/__tests__/folder.flp.crud.test.ts
+++ b/packages/api-aco/__tests__/folder.flp.crud.test.ts
@@ -47,7 +47,7 @@ describe("Folder Level Permissions", () => {
             parentId: folderA.id,
             permissions: [
                 {
-                    inheritedFrom: `parent:${folderA.id}`,
+                    inheritedFrom: "role:full-access",
                     level: "owner",
                     target: "admin:12345678"
                 }
@@ -103,7 +103,7 @@ describe("Folder Level Permissions", () => {
             parentId: folderA.id,
             permissions: [
                 {
-                    inheritedFrom: `parent:${folderA.id}`,
+                    inheritedFrom: "role:full-access",
                     level: "owner",
                     target: "admin:12345678"
                 }
@@ -162,7 +162,7 @@ describe("Folder Level Permissions", () => {
             parentId: folderA.id,
             permissions: [
                 {
-                    inheritedFrom: `parent:${folderA.id}`,
+                    inheritedFrom: "role:full-access",
                     level: "owner",
                     target: "admin:12345678"
                 }
@@ -220,7 +220,7 @@ describe("Folder Level Permissions", () => {
                 parentId: folderA.id,
                 permissions: [
                     {
-                        inheritedFrom: `parent:${folderA.id}`,
+                        inheritedFrom: "role:full-access",
                         level: "owner",
                         target: "admin:12345678"
                     }
@@ -392,7 +392,7 @@ describe("Folder Level Permissions", () => {
                 parentId: folderA.id,
                 permissions: [
                     {
-                        inheritedFrom: `parent:${folderA.id}`,
+                        inheritedFrom: "role:full-access",
                         level: "owner",
                         target: "admin:12345678"
                     },
@@ -407,7 +407,7 @@ describe("Folder Level Permissions", () => {
                 parentId: folderB.id,
                 permissions: [
                     {
-                        inheritedFrom: `parent:${folderB.id}`,
+                        inheritedFrom: "role:full-access",
                         level: "owner",
                         target: "admin:12345678"
                     },
@@ -424,7 +424,7 @@ describe("Folder Level Permissions", () => {
                 parentId: folderC.id,
                 permissions: [
                     {
-                        inheritedFrom: `parent:${folderC.id}`,
+                        inheritedFrom: "role:full-access",
                         level: "owner",
                         target: "admin:12345678"
                     },
@@ -503,7 +503,7 @@ describe("Folder Level Permissions", () => {
                 parentId: folderA.id,
                 permissions: [
                     {
-                        inheritedFrom: `parent:${folderA.id}`,
+                        inheritedFrom: "role:full-access",
                         level: "owner",
                         target: `admin:${identityA.id}`
                     }
@@ -540,7 +540,7 @@ describe("Folder Level Permissions", () => {
                     {
                         target: "admin:2",
                         level: "public",
-                        inheritedFrom: `parent:${folderA.id}`
+                        inheritedFrom: "public"
                     }
                 ],
                 hasNonInheritedPermissions: false,
@@ -586,35 +586,35 @@ describe("Folder Level Permissions", () => {
             }
         });
 
-        await expect(listFolders({ limit: 6 })).resolves.toMatchObject({
+        const listResult1 = await listFolders({ limit: 6 });
+        expect(listResult1).toMatchObject({
             meta: {
-                cursor: createdFolders[5].id,
+                cursor: expect.any(String),
                 hasMoreItems: true,
                 totalCount: 20
             }
         });
 
-        await expect(listFolders({ limit: 6, after: createdFolders[5].id })).resolves.toMatchObject(
-            {
-                meta: {
-                    cursor: createdFolders[11].id,
-                    hasMoreItems: true,
-                    totalCount: 20
-                }
+        const listResult2 = await listFolders({ limit: 6, after: listResult1.meta.cursor });
+        expect(listResult2).toMatchObject({
+            meta: {
+                cursor: expect.any(String),
+                hasMoreItems: true,
+                totalCount: 20
             }
-        );
+        });
 
-        await expect(
-            listFolders({ limit: 6, after: createdFolders[11].id })
-        ).resolves.toMatchObject({
+        const listResult3 = await listFolders({ limit: 6, after: listResult2.meta.cursor });
+
+        expect(listResult3).toMatchObject({
             meta: {
-                cursor: createdFolders[17].id,
+                cursor: expect.any(String),
                 hasMoreItems: true,
                 totalCount: 20
             }
         });
 
-        const lastPageResult = await listFolders({ limit: 6, after: createdFolders[17].id });
+        const lastPageResult = await listFolders({ limit: 6, after: listResult3.meta.cursor });
 
         expect(lastPageResult).toMatchObject({
             data: [{ slug: "folder-18" }, { slug: "folder-19" }],
diff --git a/packages/api-aco/__tests__/folder.flp.inheritance.test.ts b/packages/api-aco/__tests__/folder.flp.inheritance.test.ts
new file mode 100644
index 00000000000..c3fce30046e
--- /dev/null
+++ b/packages/api-aco/__tests__/folder.flp.inheritance.test.ts
@@ -0,0 +1,462 @@
+import { useGraphQlHandler } from "./utils/useGraphQlHandler";
+import { SecurityIdentity } from "@webiny/api-security/types";
+import { createSecurityTeamPlugin } from "@webiny/api-security";
+
+const FOLDER_TYPE = "test-folders";
+
+const identityA: SecurityIdentity = { id: "1", type: "admin", displayName: "A" };
+
+describe("Folder Level Permissions - Inheritance", () => {
+    const { aco } = useGraphQlHandler({
+        identity: identityA,
+        plugins: [
+            createSecurityTeamPlugin({
+                id: "test-team-1",
+                name: "Test Team 1",
+                description: "",
+                roles: ["test-role"]
+            }),
+            createSecurityTeamPlugin({
+                id: "test-team-2",
+                name: "Test Team 2",
+                description: "",
+                roles: ["test-role"]
+            })
+        ]
+    });
+
+    it("child folders should inherit parent permissions", async () => {
+        const folderA = await aco
+            .createFolder({
+                data: {
+                    title: "Folder A",
+                    slug: "folder-a",
+                    type: FOLDER_TYPE,
+                    permissions: [
+                        { level: "viewer", target: `admin:2` },
+                        { level: "viewer", target: `team:test-team-1` },
+                        { level: "editor", target: `team:test-team-2` }
+                    ]
+                }
+            })
+            .then(([response]) => {
+                return response.data.aco.createFolder.data;
+            });
+
+        const refetchedFolderA = await aco.getFolder({ id: folderA.id }).then(([response]) => {
+            return response.data.aco.getFolder.data;
+        });
+
+        expect(refetchedFolderA).toMatchObject({
+            slug: "folder-a",
+            permissions: [
+                { target: "admin:1", level: "owner", inheritedFrom: "role:full-access" },
+                { target: "admin:2", level: "viewer", inheritedFrom: null },
+                { target: "team:test-team-1", level: "viewer", inheritedFrom: null },
+                { target: "team:test-team-2", level: "editor", inheritedFrom: null }
+            ]
+        });
+
+        const folderB = await aco
+            .createFolder({
+                data: {
+                    title: "Folder B",
+                    slug: "folder-b",
+                    type: FOLDER_TYPE,
+                    parentId: folderA.id
+                }
+            })
+            .then(([response]) => {
+                return response.data.aco.createFolder.data;
+            });
+
+        const refetchedFolderB = await aco.getFolder({ id: folderB.id }).then(([response]) => {
+            return response.data.aco.getFolder.data;
+        });
+
+        const folderC = await aco
+            .createFolder({
+                data: {
+                    title: "Folder C",
+                    slug: "folder-c",
+                    type: FOLDER_TYPE,
+                    parentId: folderB.id
+                }
+            })
+            .then(([response]) => {
+                return response.data.aco.createFolder.data;
+            });
+
+        const refetchedFolderC = await aco.getFolder({ id: folderC.id }).then(([response]) => {
+            return response.data.aco.getFolder.data;
+        });
+
+        expect(refetchedFolderB).toMatchObject({
+            slug: "folder-b",
+            permissions: [
+                {
+                    target: "admin:1",
+                    level: "owner",
+                    inheritedFrom: "role:full-access"
+                },
+                {
+                    target: "admin:2",
+                    level: "viewer",
+                    inheritedFrom: `parent:${folderA.id}`
+                },
+                {
+                    target: "team:test-team-1",
+                    level: "viewer",
+                    inheritedFrom: `parent:${folderA.id}`
+                },
+                {
+                    target: "team:test-team-2",
+                    level: "editor",
+                    inheritedFrom: `parent:${folderA.id}`
+                }
+            ]
+        });
+
+        expect(refetchedFolderC).toMatchObject({
+            slug: "folder-c",
+            permissions: [
+                {
+                    target: "admin:1",
+                    level: "owner",
+                    inheritedFrom: "role:full-access"
+                },
+                {
+                    target: "admin:2",
+                    level: "viewer",
+                    inheritedFrom: `parent:${folderB.id}`
+                },
+                {
+                    target: "team:test-team-1",
+                    level: "viewer",
+                    inheritedFrom: `parent:${folderB.id}`
+                },
+                {
+                    target: "team:test-team-2",
+                    level: "editor",
+                    inheritedFrom: `parent:${folderB.id}`
+                }
+            ]
+        });
+    });
+
+    it("overriding inherited permissions must be possible", async () => {
+        const folderA = await aco
+            .createFolder({
+                data: {
+                    title: "Folder A",
+                    slug: "folder-a",
+                    type: FOLDER_TYPE,
+                    permissions: [
+                        { level: "viewer", target: `team:test-team-1` },
+                        { level: "editor", target: `team:test-team-2` }
+                    ]
+                }
+            })
+            .then(([response]) => {
+                return response.data.aco.createFolder.data;
+            });
+
+        const folderB = await aco
+            .createFolder({
+                data: {
+                    title: "Folder B",
+                    slug: "folder-b",
+                    type: FOLDER_TYPE,
+                    parentId: folderA.id,
+                    permissions: [{ level: "viewer", target: `team:test-team-2` }]
+                }
+            })
+            .then(([response]) => {
+                return response.data.aco.createFolder.data;
+            });
+
+        const refetchedFolderB = await aco.getFolder({ id: folderB.id }).then(([response]) => {
+            return response.data.aco.getFolder.data;
+        });
+
+        expect(refetchedFolderB).toMatchObject({
+            slug: "folder-b",
+            permissions: [
+                {
+                    target: "admin:1",
+                    level: "owner",
+                    inheritedFrom: "role:full-access"
+                },
+                {
+                    target: "team:test-team-2",
+                    level: "viewer",
+                    inheritedFrom: null
+                },
+                {
+                    target: "team:test-team-1",
+                    level: "viewer",
+                    inheritedFrom: `parent:${folderA.id}`
+                }
+            ]
+        });
+    });
+
+    it("overriding `no-access` permissions must not be possible", async () => {
+        const folderA = await aco
+            .createFolder({
+                data: {
+                    title: "Folder A",
+                    slug: "folder-a",
+                    type: FOLDER_TYPE,
+                    permissions: [
+                        { level: "viewer", target: `team:test-team-1` },
+                        { level: "editor", target: `team:test-team-2` }
+                    ]
+                }
+            })
+            .then(([response]) => {
+                return response.data.aco.createFolder.data;
+            });
+
+        const folderB = await aco
+            .createFolder({
+                data: {
+                    title: "Folder B",
+                    slug: "folder-b",
+                    type: FOLDER_TYPE,
+                    parentId: folderA.id,
+                    permissions: []
+                }
+            })
+            .then(([response]) => {
+                return response.data.aco.createFolder.data;
+            });
+
+        const folderC = await aco
+            .createFolder({
+                data: {
+                    title: "Folder C",
+                    slug: "folder-c",
+                    type: FOLDER_TYPE,
+                    parentId: folderB.id,
+                    permissions: [{ level: "owner", target: `team:test-team-2` }]
+                }
+            })
+            .then(([response]) => {
+                return response.data.aco.createFolder.data;
+            });
+
+        let refetchedFolderC = await aco.getFolder({ id: folderC.id }).then(([response]) => {
+            return response.data.aco.getFolder.data;
+        });
+
+        expect(refetchedFolderC).toMatchObject({
+            slug: "folder-c",
+            permissions: [
+                {
+                    target: "admin:1",
+                    level: "owner",
+                    inheritedFrom: "role:full-access"
+                },
+                {
+                    target: "team:test-team-2",
+                    level: "owner",
+                    inheritedFrom: null
+                },
+                {
+                    target: "team:test-team-1",
+                    level: "viewer",
+                    inheritedFrom: `parent:${folderB.id}`
+                }
+            ]
+        });
+
+        await aco.updateFolder({
+            id: folderB.id,
+            data: {
+                permissions: [{ level: "no-access", target: `team:test-team-2` }]
+            }
+        });
+
+        refetchedFolderC = await aco.getFolder({ id: folderC.id }).then(([response]) => {
+            return response.data.aco.getFolder.data;
+        });
+
+        expect(refetchedFolderC).toMatchObject({
+            slug: "folder-c",
+            permissions: [
+                {
+                    target: "admin:1",
+                    level: "owner",
+                    inheritedFrom: "role:full-access"
+                },
+                {
+                    target: "team:test-team-2",
+                    level: "no-access",
+                    inheritedFrom: `parent:${folderB.id}`
+                },
+                {
+                    target: "team:test-team-1",
+                    level: "viewer",
+                    inheritedFrom: `parent:${folderB.id}`
+                }
+            ]
+        });
+    });
+
+    it("removing parent permissions should be reflected in child folders", async () => {
+        const folderA = await aco
+            .createFolder({
+                data: {
+                    title: "Folder A",
+                    slug: "folder-a",
+                    type: FOLDER_TYPE,
+                    permissions: [
+                        { level: "viewer", target: `team:test-team-1` },
+                        { level: "editor", target: `team:test-team-2` }
+                    ]
+                }
+            })
+            .then(([response]) => {
+                return response.data.aco.createFolder.data;
+            });
+
+        const folderB = await aco
+            .createFolder({
+                data: {
+                    title: "Folder B",
+                    slug: "folder-b",
+                    type: FOLDER_TYPE,
+                    parentId: folderA.id,
+                    permissions: [
+                        { level: "viewer", target: `team:test-team-2` },
+                        { level: "editor", target: `team:test-team-1` }
+                    ]
+                }
+            })
+            .then(([response]) => {
+                return response.data.aco.createFolder.data;
+            });
+
+        const folderC = await aco
+            .createFolder({
+                data: {
+                    title: "Folder C",
+                    slug: "folder-c",
+                    type: FOLDER_TYPE,
+                    parentId: folderB.id,
+                    permissions: [{ level: "owner", target: `team:test-team-2` }]
+                }
+            })
+            .then(([response]) => {
+                return response.data.aco.createFolder.data;
+            });
+
+        let refetchedFolderC = await aco.getFolder({ id: folderC.id }).then(([response]) => {
+            return response.data.aco.getFolder.data;
+        });
+
+        expect(refetchedFolderC).toMatchObject({
+            permissions: [
+                {
+                    target: "admin:1",
+                    level: "owner",
+                    inheritedFrom: "role:full-access"
+                },
+                {
+                    target: "team:test-team-2",
+                    level: "owner",
+                    inheritedFrom: null
+                },
+                {
+                    target: "team:test-team-1",
+                    level: "editor",
+                    inheritedFrom: `parent:${folderB.id}`
+                }
+            ]
+        });
+
+        await aco.updateFolder({
+            id: folderC.id,
+            data: {
+                permissions: []
+            }
+        });
+
+        refetchedFolderC = await aco.getFolder({ id: folderC.id }).then(([response]) => {
+            return response.data.aco.getFolder.data;
+        });
+
+        expect(refetchedFolderC).toMatchObject({
+            permissions: [
+                {
+                    target: "admin:1",
+                    level: "owner",
+                    inheritedFrom: "role:full-access"
+                },
+                {
+                    target: "team:test-team-2",
+                    level: "viewer",
+                    inheritedFrom: `parent:${folderB.id}`
+                },
+                {
+                    target: "team:test-team-1",
+                    level: "editor",
+                    inheritedFrom: `parent:${folderB.id}`
+                }
+            ]
+        });
+
+        await aco.updateFolder({
+            id: folderB.id,
+            data: {
+                permissions: []
+            }
+        });
+
+        refetchedFolderC = await aco.getFolder({ id: folderC.id }).then(([response]) => {
+            return response.data.aco.getFolder.data;
+        });
+
+        expect(refetchedFolderC).toMatchObject({
+            permissions: [
+                {
+                    target: "admin:1",
+                    level: "owner",
+                    inheritedFrom: "role:full-access"
+                },
+                {
+                    target: "team:test-team-1",
+                    level: "viewer",
+                    inheritedFrom: `parent:${folderB.id}`
+                },
+                {
+                    target: "team:test-team-2",
+                    level: "editor",
+                    inheritedFrom: `parent:${folderB.id}`
+                }
+            ]
+        });
+
+        await aco.updateFolder({
+            id: folderA.id,
+            data: {
+                permissions: []
+            }
+        });
+
+        refetchedFolderC = await aco.getFolder({ id: folderC.id }).then(([response]) => {
+            return response.data.aco.getFolder.data;
+        });
+
+        expect(refetchedFolderC).toMatchObject({
+            permissions: [
+                {
+                    target: "admin:1",
+                    level: "owner",
+                    inheritedFrom: "role:full-access"
+                }
+            ]
+        });
+    });
+});
diff --git a/packages/api-aco/__tests__/folder.flp.security.test.ts b/packages/api-aco/__tests__/folder.flp.security.test.ts
index 3e7159abaa4..5689042157f 100644
--- a/packages/api-aco/__tests__/folder.flp.security.test.ts
+++ b/packages/api-aco/__tests__/folder.flp.security.test.ts
@@ -1,5 +1,6 @@
 import { useGraphQlHandler } from "./utils/useGraphQlHandler";
 import { SecurityIdentity } from "@webiny/api-security/types";
+import { expectNotAuthorized } from "~tests/utils/expectNotAuthorized";
 
 const FOLDER_TYPE = "test-folders";
 
@@ -673,4 +674,129 @@ describe("Folder Level Permissions - Security Checks", () => {
             }
         });
     });
+
+    it("as a `no-access` user, it should not be able to access the folder", async () => {
+        // Let's create a couple folder.
+        const folderA = await acoIdentityA
+            .createFolder({
+                data: {
+                    title: "Folder A",
+                    slug: "folder-a",
+                    type: FOLDER_TYPE
+                }
+            })
+            .then(([response]) => {
+                return response.data.aco.createFolder.data;
+            });
+
+        const folderB = await acoIdentityA
+            .createFolder({
+                data: {
+                    title: "Folder B",
+                    slug: "folder-b",
+                    type: FOLDER_TYPE
+                }
+            })
+            .then(([response]) => {
+                return response.data.aco.createFolder.data;
+            });
+
+        // Let's update it and assign the `no-access` permission to one of the users.
+        await expect(
+            acoIdentityA
+                .updateFolder({
+                    id: folderA.id,
+                    data: {
+                        permissions: [
+                            {
+                                target: `admin:${identityB.id}`,
+                                level: "no-access"
+                            }
+                        ]
+                    }
+                })
+                .then(([result]) => {
+                    return result.data.aco.updateFolder.data;
+                })
+        ).resolves.toMatchObject({
+            id: folderA.id,
+            parentId: null,
+            permissions: [
+                {
+                    inheritedFrom: "role:full-access",
+                    level: "owner",
+                    target: `admin:${identityA.id}`
+                },
+                {
+                    inheritedFrom: null,
+                    level: "no-access",
+                    target: `admin:${identityB.id}`
+                }
+            ]
+        });
+
+        // The owner user should be able to see the newly created folder, together with the `no-access` permission.
+        await expect(
+            acoIdentityA.getFolder({ id: folderA.id }).then(([result]) => {
+                return result.data.aco.getFolder.data;
+            })
+        ).resolves.toMatchObject({
+            id: folderA.id,
+            parentId: null,
+            permissions: [
+                {
+                    inheritedFrom: "role:full-access",
+                    level: "owner",
+                    target: `admin:${identityA.id}`
+                },
+                {
+                    inheritedFrom: null,
+                    level: "no-access",
+                    target: `admin:${identityB.id}`
+                }
+            ]
+        });
+
+        // The user with `no-access` level should not be able to get the folder with `no-access` permission.
+        await expectNotAuthorized(
+            acoIdentityB.getFolder({ id: folderA.id }).then(([result]) => {
+                return result.data.aco.getFolder;
+            })
+        );
+
+        // But should be able to get or list other folders.
+        await expect(
+            acoIdentityB.getFolder({ id: folderB.id }).then(([result]) => {
+                return result.data.aco.getFolder.data;
+            })
+        ).resolves.toMatchObject({
+            id: folderB.id,
+            parentId: null,
+            permissions: [
+                {
+                    inheritedFrom: "public",
+                    level: "public",
+                    target: `admin:${identityB.id}`
+                }
+            ]
+        });
+
+        await expect(
+            acoIdentityB.listFolders({ where: { type: FOLDER_TYPE } }).then(([result]) => {
+                return result.data.aco.listFolders.data;
+            })
+        ).resolves.toMatchObject([
+            {
+                id: folderB.id,
+                parentId: null,
+                permissions: [
+                    {
+                        inheritedFrom: "public",
+                        level: "public",
+                        target: `admin:${identityB.id}`
+                    }
+                ]
+            }
+        ]);
+    });
 });
diff --git a/packages/api-aco/__tests__/folder.so.test.ts b/packages/api-aco/__tests__/folder.so.test.ts
index dfc5ff0b9cd..de4c476ece7 100644
--- a/packages/api-aco/__tests__/folder.so.test.ts
+++ b/packages/api-aco/__tests__/folder.so.test.ts
@@ -2,6 +2,7 @@ import { mdbid } from "@webiny/utils";
 import { folderMocks } from "./mocks/folder.mock";
 import { useGraphQlHandler } from "./utils/useGraphQlHandler";
 import { userMock } from "~tests/mocks/user.mock";
+import { ROOT_FOLDER } from "~/constants";
 
 const createSampleFileData = (overrides: Record<string, any> = {}) => {
     const id = mdbid();
@@ -65,6 +66,7 @@ describe("`folder` CRUD", () => {
         expect(folderA).toMatchObject({
             id: folderA.id,
             parentId: null,
+            path: `${ROOT_FOLDER}/${folderMocks.folderA.slug}`,
             createdBy: userMock,
             ...folderMocks.folderA
         });
@@ -78,7 +80,8 @@ describe("`folder` CRUD", () => {
             id: folderB.id,
             createdBy: userMock,
             ...folderMocks.folderB,
-            parentId: folder1.id
+            parentId: folder1.id,
+            path: `${ROOT_FOLDER}/${folder1.slug}/${folderMocks.folderB.slug}`
         });
 
         const [responseC] = await aco.createFolder({ data: folderMocks.folderC });
@@ -86,6 +89,7 @@ describe("`folder` CRUD", () => {
         expect(folderC).toMatchObject({
             id: folderC.id,
             parentId: null,
+            path: `${ROOT_FOLDER}/${folderMocks.folderC.slug}`,
             createdBy: userMock,
             ...folderMocks.folderC
         });
@@ -98,7 +102,8 @@ describe("`folder` CRUD", () => {
             id: folderD.id,
             createdBy: userMock,
             ...folderMocks.folderD,
-            parentId: folder2.id
+            parentId: folder2.id,
+            path: `${ROOT_FOLDER}/${folder2.slug}/${folderMocks.folderD.slug}`
         });
 
         // Let's check whether both of the folder exists, listing them by `type`.
@@ -107,16 +112,19 @@ describe("`folder` CRUD", () => {
             data: [
                 {
                     parentId: null,
+                    path: `${ROOT_FOLDER}/${folderMocks.folderA.slug}`,
                     slug: "folder-a",
                     type: "page"
                 },
                 {
                     parentId: folder1.id,
+                    path: `${ROOT_FOLDER}/${folder1.slug}/${folderMocks.folderB.slug}`,
                     slug: "folder-b",
                     type: "page"
                 },
                 {
                     parentId: null,
+                    path: `${ROOT_FOLDER}/${folderMocks.folderC.slug}`,
                     slug: "folder-c",
                     type: "page"
                 }
@@ -171,7 +179,8 @@ describe("`folder` CRUD", () => {
         const update = {
             title: "Folder B - updated",
             slug: "folder-b-updated",
-            parentId: folder2.id
+            parentId: folder2.id,
+            path: `${ROOT_FOLDER}/${folder2.slug}/folder-b-updated`
         };
 
         const [updateB] = await aco.updateFolder({
@@ -244,6 +253,313 @@ describe("`folder` CRUD", () => {
         });
     });
 
+    it("should update folder `path` to both parent and child folders", async () => {
+        const [folderAResponse] = await aco.createFolder({ data: folderMocks.folderA });
+        const folderA = folderAResponse.data.aco.createFolder.data;
+
+        const [folderBResponse] = await aco.createFolder({
+            data: {
+                ...folderMocks.folderB,
+                parentId: folderA.id
+            }
+        });
+        const folderB = folderBResponse.data.aco.createFolder.data;
+
+        const [folderCResponse] = await aco.createFolder({
+            data: {
+                ...folderMocks.folderC,
+                parentId: folderB.id
+            }
+        });
+        const folderC = folderCResponse.data.aco.createFolder.data;
+
+        // Let's check whether the folders exist, listing them by `type`.
+        {
+            const [listResponse] = await aco.listFolders({ where: { type: "page" } });
+            expect(listResponse.data.aco.listFolders.data).toMatchObject([
+                {
+                    parentId: null,
+                    path: `${ROOT_FOLDER}/${folderA.slug}`,
+                    slug: folderA.slug
+                },
+                {
+                    parentId: folderA.id,
+                    path: `${ROOT_FOLDER}/${folderA.slug}/${folderB.slug}`,
+                    slug: folderB.slug
+                },
+                {
+                    parentId: folderB.id,
+                    path: `${ROOT_FOLDER}/${folderA.slug}/${folderB.slug}/${folderC.slug}`,
+                    slug: folderC.slug
+                }
+            ]);
+        }
+
+        const folderASlugUpdated = folderA.slug + "-updated";
+
+        {
+            // Let's update the "folder-a" slug.
+            await aco.updateFolder({
+                id: folderA.id,
+                data: {
+                    slug: folderASlugUpdated
+                }
+            });
+
+            const [listResponse] = await aco.listFolders({ where: { type: "page" } });
+            expect(listResponse.data.aco.listFolders.data).toMatchObject([
+                {
+                    parentId: null,
+                    path: `${ROOT_FOLDER}/${folderASlugUpdated}`,
+                    slug: folderASlugUpdated
+                },
+                {
+                    parentId: folderA.id,
+                    path: `${ROOT_FOLDER}/${folderASlugUpdated}/${folderB.slug}`,
+                    slug: folderB.slug
+                },
+                {
+                    parentId: folderB.id,
+                    path: `${ROOT_FOLDER}/${folderASlugUpdated}/${folderB.slug}/${folderC.slug}`,
+                    slug: folderC.slug
+                }
+            ]);
+        }
+
+        {
+            // Let's move the "folder-b" to the "root" level.
+            await aco.updateFolder({
+                id: folderB.id,
+                data: {
+                    parentId: null
+                }
+            });
+
+            const [listResponse] = await aco.listFolders({ where: { type: "page" } });
+            expect(listResponse.data.aco.listFolders.data).toMatchObject([
+                {
+                    parentId: null,
+                    path: `${ROOT_FOLDER}/${folderASlugUpdated}`,
+                    slug: folderASlugUpdated
+                },
+                {
+                    parentId: null,
+                    path: `${ROOT_FOLDER}/${folderB.slug}`,
+                    slug: folderB.slug
+                },
+                {
+                    parentId: folderB.id,
+                    path: `${ROOT_FOLDER}/${folderB.slug}/${folderC.slug}`,
+                    slug: folderC.slug
+                }
+            ]);
+        }
+
+        {
+            // Let's move the "folder-a" under "folder-c".
+            await aco.updateFolder({
+                id: folderA.id,
+                data: {
+                    parentId: folderC.id
+                }
+            });
+
+            const [listResponse] = await aco.listFolders({ where: { type: "page" } });
+            expect(listResponse.data.aco.listFolders.data).toMatchObject([
+                {
+                    parentId: folderC.id,
+                    path: `${ROOT_FOLDER}/${folderB.slug}/${folderC.slug}/${folderASlugUpdated}`,
+                    slug: folderASlugUpdated
+                },
+                {
+                    parentId: null,
+                    path: `${ROOT_FOLDER}/${folderB.slug}`,
+                    slug: folderB.slug
+                },
+                {
+                    parentId: folderB.id,
+                    path: `${ROOT_FOLDER}/${folderB.slug}/${folderC.slug}`,
+                    slug: folderC.slug
+                }
+            ]);
+        }
+    });
+
+    it("should be able to list folders with `path` filter", async () => {
+        const type = "page";
+
+        const [folderAResponse] = await aco.createFolder({ data: folderMocks.folderA });
+        const folderA = folderAResponse.data.aco.createFolder.data;
+
+        const [folderBResponse] = await aco.createFolder({
+            data: {
+                ...folderMocks.folderB,
+                parentId: folderA.id
+            }
+        });
+        const folderB = folderBResponse.data.aco.createFolder.data;
+
+        const [folderCResponse] = await aco.createFolder({
+            data: {
+                ...folderMocks.folderC,
+                parentId: folderB.id
+            }
+        });
+        const folderC = folderCResponse.data.aco.createFolder.data;
+
+        // Let's query the folder using the exact `path` filter.
+        {
+            const [listResponse] = await aco.listFolders({
+                where: { type, path: `${ROOT_FOLDER}/${folderA.slug}` }
+            });
+            expect(listResponse.data.aco.listFolders.data).toMatchObject([
+                {
+                    parentId: null,
+                    path: `${ROOT_FOLDER}/${folderA.slug}`,
+                    slug: folderA.slug
+                }
+            ]);
+        }
+
+        // Let's query the folder using the `path_not` filter.
+        {
+            const [listResponse] = await aco.listFolders({
+                where: { type, path_not: `${ROOT_FOLDER}/${folderA.slug}` }
+            });
+            expect(listResponse.data.aco.listFolders.data).toMatchObject([
+                {
+                    parentId: folderA.id,
+                    path: `${ROOT_FOLDER}/${folderA.slug}/${folderB.slug}`,
+                    slug: folderB.slug
+                },
+                {
+                    parentId: folderB.id,
+                    path: `${ROOT_FOLDER}/${folderA.slug}/${folderB.slug}/${folderC.slug}`,
+                    slug: folderC.slug
+                }
+            ]);
+        }
+
+        // Let's query the folder using the `path_contains` filter.
+        {
+            const [listResponse] = await aco.listFolders({
+                where: { type, path_contains: `${folderA.slug}` }
+            });
+            expect(listResponse.data.aco.listFolders.data).toMatchObject([
+                {
+                    parentId: null,
+                    path: `${ROOT_FOLDER}/${folderA.slug}`,
+                    slug: folderA.slug
+                },
+                {
+                    parentId: folderA.id,
+                    path: `${ROOT_FOLDER}/${folderA.slug}/${folderB.slug}`,
+                    slug: folderB.slug
+                },
+                {
+                    parentId: folderB.id,
+                    path: `${ROOT_FOLDER}/${folderA.slug}/${folderB.slug}/${folderC.slug}`,
+                    slug: folderC.slug
+                }
+            ]);
+        }
+
+        // Let's query the folder using the `path_not_contains` filter.
+        {
+            const [listResponse] = await aco.listFolders({
+                where: { type, path_not_contains: `${folderB.slug}` }
+            });
+            expect(listResponse.data.aco.listFolders.data).toMatchObject([
+                {
+                    parentId: null,
+                    path: `${ROOT_FOLDER}/${folderA.slug}`,
+                    slug: folderA.slug
+                }
+            ]);
+        }
+
+        // Let's query the folder using the `path_in` filter.
+        {
+            const [listResponse] = await aco.listFolders({
+                where: {
+                    type,
+                    path_in: [
+                        `${ROOT_FOLDER}/${folderA.slug}/${folderB.slug}`,
+                        `${ROOT_FOLDER}/${folderA.slug}`
+                    ]
+                }
+            });
+            expect(listResponse.data.aco.listFolders.data).toMatchObject([
+                {
+                    parentId: null,
+                    path: `${ROOT_FOLDER}/${folderA.slug}`,
+                    slug: folderA.slug
+                },
+                {
+                    parentId: folderA.id,
+                    path: `${ROOT_FOLDER}/${folderA.slug}/${folderB.slug}`,
+                    slug: folderB.slug
+                }
+            ]);
+        }
+
+        // Let's query the folder using the `path_not_in` filter.
+        {
+            const [listResponse] = await aco.listFolders({
+                where: {
+                    type,
+                    path_not_in: [
+                        `${ROOT_FOLDER}/${folderA.slug}/${folderB.slug}`,
+                        `${ROOT_FOLDER}/${folderA.slug}`
+                    ]
+                }
+            });
+            expect(listResponse.data.aco.listFolders.data).toMatchObject([
+                {
+                    parentId: folderB.id,
+                    path: `${ROOT_FOLDER}/${folderA.slug}/${folderB.slug}/${folderC.slug}`,
+                    slug: folderC.slug
+                }
+            ]);
+        }
+
+        // Let's query the folder using the `path_startsWith` filter.
+        {
+            const [listResponse] = await aco.listFolders({
+                where: { type, path_startsWith: `${ROOT_FOLDER}/${folderA.slug}/${folderB.slug}` }
+            });
+            expect(listResponse.data.aco.listFolders.data).toMatchObject([
+                {
+                    parentId: folderA.id,
+                    path: `${ROOT_FOLDER}/${folderA.slug}/${folderB.slug}`,
+                    slug: folderB.slug
+                },
+                {
+                    parentId: folderB.id,
+                    path: `${ROOT_FOLDER}/${folderA.slug}/${folderB.slug}/${folderC.slug}`,
+                    slug: folderC.slug
+                }
+            ]);
+        }
+
+        // Let's query the folder using the `path_not_startsWith` filter.
+        {
+            const [listResponse] = await aco.listFolders({
+                where: {
+                    type,
+                    path_not_startsWith: `${ROOT_FOLDER}/${folderA.slug}/${folderB.slug}`
+                }
+            });
+            expect(listResponse.data.aco.listFolders.data).toMatchObject([
+                {
+                    parentId: null,
+                    path: `${ROOT_FOLDER}/${folderA.slug}`,
+                    slug: folderA.slug
+                }
+            ]);
+        }
+    });
+
     it("should NOT delete folder in case has child folders", async () => {
         // Let's create a parent folders.
         const [parentResponse] = await aco.createFolder({ data: folderMocks.folderA });
diff --git a/packages/api-aco/__tests__/graphql/folder.gql.ts b/packages/api-aco/__tests__/graphql/folder.gql.ts
index 5102a9b1c98..e80a8fc049c 100644
--- a/packages/api-aco/__tests__/graphql/folder.gql.ts
+++ b/packages/api-aco/__tests__/graphql/folder.gql.ts
@@ -6,6 +6,7 @@ const DATA_FIELD = (fields: string[] = []) => {
             slug
             type
             parentId
+            path
             permissions {
                 target
                 level
diff --git a/packages/api-aco/__tests__/utils/identity.ts b/packages/api-aco/__tests__/utils/identity.ts
index 224a2f58796..ff8f310945a 100644
--- a/packages/api-aco/__tests__/utils/identity.ts
+++ b/packages/api-aco/__tests__/utils/identity.ts
@@ -1,9 +1,10 @@
 import { SecurityIdentity } from "@webiny/api-security/types";
 
-export const createIdentity = (): SecurityIdentity => {
+export const createIdentity = (identity: Partial<SecurityIdentity> = {}): SecurityIdentity => {
     return {
         id: "12345678",
         type: "admin",
-        displayName: "John Doe"
+        displayName: "John Doe",
+        ...identity
     };
 };
diff --git a/packages/api-aco/__tests__/utils/useGraphQlHandler.ts b/packages/api-aco/__tests__/utils/useGraphQlHandler.ts
index 43a14486c1a..7a0e616781e 100644
--- a/packages/api-aco/__tests__/utils/useGraphQlHandler.ts
+++ b/packages/api-aco/__tests__/utils/useGraphQlHandler.ts
@@ -68,6 +68,7 @@ import createAdminUsersApp from "@webiny/api-admin-users";
 import { createWcpContext } from "@webiny/api-wcp";
 import { createTestWcpLicense } from "@webiny/wcp/testing/createTestWcpLicense";
 import { AdminUsersStorageOperations } from "@webiny/api-admin-users/types";
+import { getDocumentClient } from "@webiny/project-utils/testing/dynamodb";
 
 export interface UseGQLHandlerParams {
     permissions?: SecurityPermission[];
@@ -89,6 +90,7 @@ interface InvokeParams {
 }
 
 export const useGraphQlHandler = (params: UseGQLHandlerParams = {}) => {
+    const documentClient = getDocumentClient();
     const { permissions, identity, plugins = [] } = params;
 
     const cmsStorage = getStorageOps<HeadlessCmsStorageOperations>("cms");
@@ -131,7 +133,7 @@ export const useGraphQlHandler = (params: UseGQLHandlerParams = {}) => {
                 delete: async () => {}
             }),
             createHeadlessCmsGraphQL(),
-            createAco(),
+            createAco({ documentClient }),
             plugins
         ],
         debug: false
diff --git a/packages/api-aco/__tests__/utils/useHandler.ts b/packages/api-aco/__tests__/utils/useHandler.ts
index 41566482493..8f033264a1d 100644
--- a/packages/api-aco/__tests__/utils/useHandler.ts
+++ b/packages/api-aco/__tests__/utils/useHandler.ts
@@ -12,6 +12,7 @@ import { createIdentity } from "./identity";
 import { getStorageOps } from "@webiny/project-utils/testing/environment";
 import { HeadlessCmsStorageOperations } from "@webiny/api-headless-cms/types";
 import { APIGatewayEvent, LambdaContext } from "@webiny/handler-aws/types";
+import { getDocumentClient } from "@webiny/project-utils/testing/dynamodb";
 
 export interface UseHandlerParams {
     permissions?: SecurityPermission[];
@@ -20,6 +21,7 @@ export interface UseHandlerParams {
 }
 
 export const useHandler = (params: UseHandlerParams = {}) => {
+    const documentClient = getDocumentClient();
     const { permissions, identity, plugins = [] } = params;
 
     const cmsStorage = getStorageOps<HeadlessCmsStorageOperations>("cms");
@@ -37,7 +39,7 @@ export const useHandler = (params: UseHandlerParams = {}) => {
                 storageOperations: cmsStorage.storageOperations
             }),
             createHeadlessCmsGraphQL(),
-            createAco(),
+            createAco({ documentClient }),
             createEventHandler<any, AcoContext, AcoContext>(async ({ context }) => {
                 return context;
             }),
diff --git a/packages/api-aco/package.json b/packages/api-aco/package.json
index 6bbda9b179d..6e891894e45 100644
--- a/packages/api-aco/package.json
+++ b/packages/api-aco/package.json
@@ -28,10 +28,14 @@
     "@webiny/api-i18n": "0.0.0",
     "@webiny/api-security": "0.0.0",
     "@webiny/api-tenancy": "0.0.0",
+    "@webiny/aws-sdk": "0.0.0",
+    "@webiny/db-dynamodb": "0.0.0",
     "@webiny/error": "0.0.0",
     "@webiny/handler": "0.0.0",
     "@webiny/handler-graphql": "0.0.0",
     "@webiny/pubsub": "0.0.0",
+    "@webiny/shared-aco": "0.0.0",
+    "@webiny/tasks": "0.0.0",
     "@webiny/utils": "0.0.0",
     "@webiny/validation": "0.0.0",
     "lodash": "^4.17.21"
diff --git a/packages/api-aco/src/apps/AcoApp.ts b/packages/api-aco/src/apps/AcoApp.ts
index 7c00677b7f6..54339d283fc 100644
--- a/packages/api-aco/src/apps/AcoApp.ts
+++ b/packages/api-aco/src/apps/AcoApp.ts
@@ -44,7 +44,7 @@ export class AcoApp implements IAcoApp {
                 if (!this.onEntry) {
                     return result;
                 }
-                return (await this.onEntry(result)) as SearchRecord<TData>;
+                return (await this.onEntry(result, this.context)) as SearchRecord<TData>;
             },
             update: async <TData extends GenericSearchData = GenericSearchData>(
                 id: string,
@@ -59,7 +59,7 @@ export class AcoApp implements IAcoApp {
                 if (!this.onEntry) {
                     return result;
                 }
-                return (await this.onEntry(result)) as SearchRecord<TData>;
+                return (await this.onEntry(result, this.context)) as SearchRecord<TData>;
             },
             move: async (id: string, folderId?: string) => {
                 await this.execOnAnyRequest("move");
@@ -71,7 +71,7 @@ export class AcoApp implements IAcoApp {
                 if (!result || !this.onEntry) {
                     return result;
                 }
-                return (await this.onEntry(result)) as SearchRecord<TData>;
+                return (await this.onEntry(result, this.context)) as SearchRecord<TData>;
             },
             list: async <TData extends GenericSearchData = GenericSearchData>(
                 params: ListSearchRecordsParams
@@ -83,7 +83,7 @@ export class AcoApp implements IAcoApp {
                     return result;
                 }
                 const [entries, meta] = result;
-                const items = (await onEntryList(entries)) as SearchRecord<TData>[];
+                const items = (await onEntryList(entries, this.context)) as SearchRecord<TData>[];
                 return [items, meta];
             },
             delete: async (id: string): Promise<boolean> => {
diff --git a/packages/api-aco/src/constants.ts b/packages/api-aco/src/constants.ts
new file mode 100644
index 00000000000..a9077a96e8c
--- /dev/null
+++ b/packages/api-aco/src/constants.ts
@@ -0,0 +1,3 @@
+export * from "@webiny/shared-aco";
+export const PB_PAGE_TYPE = "PbPage";
+export const FM_FILE_TYPE = "FmFile";
diff --git a/packages/api-aco/src/createAcoContext.ts b/packages/api-aco/src/createAcoContext.ts
index 9a20048edcd..7d7f01294cb 100644
--- a/packages/api-aco/src/createAcoContext.ts
+++ b/packages/api-aco/src/createAcoContext.ts
@@ -3,29 +3,22 @@ import { ContextPlugin } from "@webiny/api";
 import { I18NLocale } from "@webiny/api-i18n/types";
 import { Tenant } from "@webiny/api-tenancy/types";
 import { isHeadlessCmsReady } from "@webiny/api-headless-cms";
+import { DynamoDBDocument } from "@webiny/aws-sdk/client-dynamodb";
 import { createAcoHooks } from "~/createAcoHooks";
 import { createAcoStorageOperations } from "~/createAcoStorageOperations";
-import {
-    AcoContext,
-    CreateAcoParams,
-    Folder,
-    IAcoAppRegisterParams,
-    ListFoldersParams
-} from "~/types";
+import { AcoContext, CreateAcoParams, IAcoAppRegisterParams } from "~/types";
 import { createFolderCrudMethods } from "~/folder/folder.crud";
 import { createSearchRecordCrudMethods } from "~/record/record.crud";
 import { AcoApps } from "./apps";
 import { SEARCH_RECORD_MODEL_ID } from "~/record/record.model";
 import { AcoAppRegisterPlugin } from "~/plugins";
-import { FolderLevelPermissions } from "~/utils/FolderLevelPermissions";
 import { CmsEntriesCrudDecorators } from "~/utils/decorators/CmsEntriesCrudDecorators";
-import { FOLDER_MODEL_ID } from "~/folder/folder.model";
-import { createOperationsWrapper } from "~/utils/createOperationsWrapper";
-import { pickEntryFieldValues } from "~/utils/pickEntryFieldValues";
 import { createFilterCrudMethods } from "~/filter/filter.crud";
+import { createFlpCrudMethods, FolderLevelPermissions } from "~/flp";
 
 interface CreateAcoContextParams {
     useFolderLevelPermissions?: boolean;
+    documentClient: DynamoDBDocument;
 }
 
 const setupAcoContext = async (
@@ -59,96 +52,18 @@ const setupAcoContext = async (
          * TODO: This is required for "entryFieldFromStorageTransform" which access plugins from context.
          */
         getCmsContext: () => context,
+        documentClient: setupAcoContextParams.documentClient,
         security
     });
 
-    const folderLevelPermissions = new FolderLevelPermissions({
-        getIdentity: () => security.getIdentity(),
-        listIdentityTeams: async () => {
-            return security.withoutAuthorization(async () => {
-                const identity = security.getIdentity();
-                if (!identity) {
-                    return [];
-                }
-
-                const adminUser = await context.adminUsers.getUser({ where: { id: identity.id } });
-                if (!adminUser) {
-                    return [];
-                }
-
-                const hasTeams = adminUser.teams && adminUser.teams.length > 0;
-                if (hasTeams) {
-                    return context.security.listTeams({ where: { id_in: adminUser.teams } });
-                }
-
-                return [];
-            });
-        },
-        listPermissions: () => security.listPermissions(),
-        listAllFolders: (params: ListFoldersParams) => {
-            // When retrieving a list of all folders, we want to do it in the
-            // fastest way and that is by directly using CMS's storage operations.
-            const { withModel } = createOperationsWrapper({
-                modelName: FOLDER_MODEL_ID,
-                cms: context.cms,
-                getCmsContext: () => context,
-                security
-            });
-
-            return withModel(async model => {
-                try {
-                    const response = await context.cms.storageOperations.entries.list(model, {
-                        limit: 10_000,
-                        where: {
-                            ...params.where,
-
-                            // Folders always work with latest entries. We never publish them.
-                            latest: true
-                        },
-                        after: params.after,
-                        sort: ["title_ASC"]
-                    });
-
-                    return [
-                        response.items.map(pickEntryFieldValues<Folder>),
-                        {
-                            cursor: response.cursor,
-                            totalCount: response.totalCount,
-                            hasMoreItems: response.hasMoreItems
-                        }
-                    ];
-                } catch (ex) {
-                    /**
-                     * Skip throwing an error if the error is related to the search phase execution.
-                     * This is a temporary solution to avoid breaking the entire system when no entries were ever inserted in the index.
-                     *
-                     * TODO: figure out better way to handle this.
-                     */
-                    if (ex.message === "search_phase_execution_exception") {
-                        return [
-                            [],
-                            {
-                                cursor: null,
-                                totalCount: 0,
-                                hasMoreItems: false
-                            }
-                        ];
-                    }
-                    throw ex;
-                }
-            });
-        },
-        canUseTeams: () => context.wcp.canUseTeams(),
-        canUseFolderLevelPermissions: () => {
-            if (setupAcoContextParams.useFolderLevelPermissions === false) {
-                return false;
-            }
-
-            return context.wcp.canUseFolderLevelPermissions();
-        },
-        isAuthorizationEnabled: () => context.security.isAuthorizationEnabled()
+    const flpCrudMethods = createFlpCrudMethods({
+        getLocale,
+        getTenant,
+        storageOperations
     });
 
+    const folderLevelPermissions = new FolderLevelPermissions({ context, crud: flpCrudMethods });
+
     const params: CreateAcoParams = {
         getLocale,
         getTenant,
@@ -176,26 +91,15 @@ const setupAcoContext = async (
         });
     }
 
-    const listAdminUsers = () => {
-        return security.withoutAuthorization(async () => {
-            return context.adminUsers.listUsers();
-        });
-    };
-    const listTeams = () => {
-        return security.withoutAuthorization(async () => {
-            return context.security.listTeams();
-        });
-    };
-
     context.aco = {
         folder: createFolderCrudMethods({
             ...params,
-            listAdminUsers,
-            listTeams
+            context
         }),
         search: createSearchRecordCrudMethods(params),
         folderLevelPermissions,
         filter: createFilterCrudMethods(params),
+        flp: flpCrudMethods,
         apps,
         getApp: (name: string) => apps.get(name),
         listApps: () => apps.list(),
@@ -215,7 +119,7 @@ const setupAcoContext = async (
     }
 };
 
-export const createAcoContext = (params: CreateAcoContextParams = {}) => {
+export const createAcoContext = (params: CreateAcoContextParams) => {
     const plugin = new ContextPlugin<AcoContext>(async context => {
         /**
          * We can skip the ACO initialization if the installation is pending.
diff --git a/packages/api-aco/src/createAcoHooks.ts b/packages/api-aco/src/createAcoHooks.ts
index e8160de5c08..7e40a869911 100644
--- a/packages/api-aco/src/createAcoHooks.ts
+++ b/packages/api-aco/src/createAcoHooks.ts
@@ -1,6 +1,7 @@
 import { onFolderBeforeDeleteAcoHook } from "~/folder/onFolderBeforeDeleteAco.hook";
 import { onFolderBeforeDeleteHcmsHook } from "~/folder/onFolderBeforeDeleteHcms.hook";
 import { onFolderBeforeDeleteFmHook } from "~/folder/onFolderBeforeDeleteFm.hook";
+import { createFlpHooks } from "~/flp";
 
 import { AcoContext } from "~/types";
 
@@ -8,4 +9,6 @@ export const createAcoHooks = (context: AcoContext) => {
     onFolderBeforeDeleteAcoHook(context);
     onFolderBeforeDeleteHcmsHook(context);
     onFolderBeforeDeleteFmHook(context);
+
+    createFlpHooks(context);
 };
diff --git a/packages/api-aco/src/createAcoStorageOperations.ts b/packages/api-aco/src/createAcoStorageOperations.ts
index d55ced7dd61..446ab4dab2c 100644
--- a/packages/api-aco/src/createAcoStorageOperations.ts
+++ b/packages/api-aco/src/createAcoStorageOperations.ts
@@ -1,5 +1,6 @@
 import { CmsContext, HeadlessCms } from "@webiny/api-headless-cms/types";
 import { Security } from "@webiny/api-security/types";
+import { DynamoDBDocument } from "@webiny/aws-sdk/client-dynamodb";
 
 import { createFilterOperations } from "~/filter/filter.so";
 import { createFolderOperations } from "~/folder/folder.so";
@@ -7,11 +8,13 @@ import { createSearchRecordOperations } from "~/record/record.so";
 import { createAcoModels } from "~/createAcoModels";
 
 import { AcoStorageOperations } from "~/types";
+import { createFlpOperations } from "~/flp";
 
 export interface CreateAcoStorageOperationsParams {
     cms: HeadlessCms;
     security: Security;
     getCmsContext: () => CmsContext;
+    documentClient: DynamoDBDocument;
 }
 
 export const createAcoStorageOperations = async (
@@ -22,8 +25,9 @@ export const createAcoStorageOperations = async (
     await createAcoModels(context);
 
     return {
-        ...createFolderOperations(params),
-        ...createSearchRecordOperations(params),
-        ...createFilterOperations(params)
+        folder: createFolderOperations(params),
+        search: createSearchRecordOperations(params),
+        filter: createFilterOperations(params),
+        flp: createFlpOperations(params)
     };
 };
diff --git a/packages/api-aco/src/createAcoTasks.ts b/packages/api-aco/src/createAcoTasks.ts
new file mode 100644
index 00000000000..db2da0c0e02
--- /dev/null
+++ b/packages/api-aco/src/createAcoTasks.ts
@@ -0,0 +1,5 @@
+import { flpTasks } from "~/flp";
+
+export const createAcoTasks = () => {
+    return [...flpTasks()];
+};
diff --git a/packages/api-aco/src/filter/filter.crud.ts b/packages/api-aco/src/filter/filter.crud.ts
index b41b0263626..21a66af4a6a 100644
--- a/packages/api-aco/src/filter/filter.crud.ts
+++ b/packages/api-aco/src/filter/filter.crud.ts
@@ -42,28 +42,28 @@ export const createFilterCrudMethods = ({ storageOperations }: CreateAcoParams):
         onFilterBeforeDelete,
         onFilterAfterDelete,
         async get(id) {
-            return storageOperations.getFilter({ id });
+            return storageOperations.filter.getFilter({ id });
         },
         async list(params) {
-            return storageOperations.listFilters(params);
+            return storageOperations.filter.listFilters(params);
         },
         async create(data) {
             await onFilterBeforeCreate.publish({ input: data });
-            const filter = await storageOperations.createFilter({ data });
+            const filter = await storageOperations.filter.createFilter({ data });
             await onFilterAfterCreate.publish({ filter });
             return filter;
         },
         async update(id, data) {
-            const original = await storageOperations.getFilter({ id });
+            const original = await storageOperations.filter.getFilter({ id });
             await onFilterBeforeUpdate.publish({ original, input: { id, data } });
-            const filter = await storageOperations.updateFilter({ id, data });
+            const filter = await storageOperations.filter.updateFilter({ id, data });
             await onFilterAfterUpdate.publish({ original, input: { id, data }, filter });
             return filter;
         },
         async delete(id: string) {
-            const filter = await storageOperations.getFilter({ id });
+            const filter = await storageOperations.filter.getFilter({ id });
             await onFilterBeforeDelete.publish({ filter });
-            await storageOperations.deleteFilter({ id });
+            await storageOperations.filter.deleteFilter({ id });
             await onFilterAfterDelete.publish({ filter });
             return true;
         }
diff --git a/packages/api-aco/src/flp/FolderLevelPermissions/gateways/GetIdentityGateway/GetIdentityGatewayFromContext.ts b/packages/api-aco/src/flp/FolderLevelPermissions/gateways/GetIdentityGateway/GetIdentityGatewayFromContext.ts
new file mode 100644
index 00000000000..1eda5440da9
--- /dev/null
+++ b/packages/api-aco/src/flp/FolderLevelPermissions/gateways/GetIdentityGateway/GetIdentityGatewayFromContext.ts
@@ -0,0 +1,14 @@
+import type { IGetIdentityGateway } from "./IGetIdentityGateway";
+import type { AcoContext } from "~/types";
+
+export class GetIdentityGatewayFromContext implements IGetIdentityGateway {
+    private context: AcoContext;
+
+    constructor(context: AcoContext) {
+        this.context = context;
+    }
+
+    execute() {
+        return this.context.security.getIdentity();
+    }
+}
diff --git a/packages/api-aco/src/flp/FolderLevelPermissions/gateways/GetIdentityGateway/IGetIdentityGateway.ts b/packages/api-aco/src/flp/FolderLevelPermissions/gateways/GetIdentityGateway/IGetIdentityGateway.ts
new file mode 100644
index 00000000000..0ba8a17f331
--- /dev/null
+++ b/packages/api-aco/src/flp/FolderLevelPermissions/gateways/GetIdentityGateway/IGetIdentityGateway.ts
@@ -0,0 +1,5 @@
+import type { Identity } from "@webiny/api-authentication/types";
+
+export interface IGetIdentityGateway<TIdentity = Identity> {
+    execute: () => TIdentity;
+}
diff --git a/packages/api-aco/src/flp/FolderLevelPermissions/gateways/GetIdentityGateway/index.ts b/packages/api-aco/src/flp/FolderLevelPermissions/gateways/GetIdentityGateway/index.ts
new file mode 100644
index 00000000000..bda1cdb3dea
--- /dev/null
+++ b/packages/api-aco/src/flp/FolderLevelPermissions/gateways/GetIdentityGateway/index.ts
@@ -0,0 +1,2 @@
+export * from "./IGetIdentityGateway";
+export * from "./GetIdentityGatewayFromContext";
diff --git a/packages/api-aco/src/flp/FolderLevelPermissions/gateways/GetWcpGateway/GetWcpGatewayFromContext.ts b/packages/api-aco/src/flp/FolderLevelPermissions/gateways/GetWcpGateway/GetWcpGatewayFromContext.ts
new file mode 100644
index 00000000000..422ca97cfde
--- /dev/null
+++ b/packages/api-aco/src/flp/FolderLevelPermissions/gateways/GetWcpGateway/GetWcpGatewayFromContext.ts
@@ -0,0 +1,14 @@
+import type { IGetWcpGateway } from "./IGetWcpGateway";
+import type { AcoContext } from "~/types";
+
+export class GetWcpGatewayFromContext implements IGetWcpGateway {
+    private context: AcoContext;
+
+    constructor(context: AcoContext) {
+        this.context = context;
+    }
+
+    execute() {
+        return this.context.wcp;
+    }
+}
diff --git a/packages/api-aco/src/flp/FolderLevelPermissions/gateways/GetWcpGateway/IGetWcpGateway.ts b/packages/api-aco/src/flp/FolderLevelPermissions/gateways/GetWcpGateway/IGetWcpGateway.ts
new file mode 100644
index 00000000000..b081be17f67
--- /dev/null
+++ b/packages/api-aco/src/flp/FolderLevelPermissions/gateways/GetWcpGateway/IGetWcpGateway.ts
@@ -0,0 +1,5 @@
+import type { WcpContextObject } from "@webiny/api-wcp/types";
+
+export interface IGetWcpGateway {
+    execute: () => WcpContextObject;
+}
diff --git a/packages/api-aco/src/flp/FolderLevelPermissions/gateways/GetWcpGateway/index.ts b/packages/api-aco/src/flp/FolderLevelPermissions/gateways/GetWcpGateway/index.ts
new file mode 100644
index 00000000000..0b3990630d3
--- /dev/null
+++ b/packages/api-aco/src/flp/FolderLevelPermissions/gateways/GetWcpGateway/index.ts
@@ -0,0 +1,2 @@
+export * from "./IGetWcpGateway";
+export * from "./GetWcpGatewayFromContext";
diff --git a/packages/api-aco/src/flp/FolderLevelPermissions/gateways/IsAuthorizationEnabled/IIsAuthorizationEnabledGateway.ts b/packages/api-aco/src/flp/FolderLevelPermissions/gateways/IsAuthorizationEnabled/IIsAuthorizationEnabledGateway.ts
new file mode 100644
index 00000000000..0af3bd65201
--- /dev/null
+++ b/packages/api-aco/src/flp/FolderLevelPermissions/gateways/IsAuthorizationEnabled/IIsAuthorizationEnabledGateway.ts
@@ -0,0 +1,3 @@
+export interface IIsAuthorizationEnabledGateway {
+    execute: () => boolean;
+}
diff --git a/packages/api-aco/src/flp/FolderLevelPermissions/gateways/IsAuthorizationEnabled/IsAuthorizationEnabledGatewayFromContext.ts b/packages/api-aco/src/flp/FolderLevelPermissions/gateways/IsAuthorizationEnabled/IsAuthorizationEnabledGatewayFromContext.ts
new file mode 100644
index 00000000000..3fde048ce62
--- /dev/null
+++ b/packages/api-aco/src/flp/FolderLevelPermissions/gateways/IsAuthorizationEnabled/IsAuthorizationEnabledGatewayFromContext.ts
@@ -0,0 +1,14 @@
+import type { IIsAuthorizationEnabledGateway } from "./IIsAuthorizationEnabledGateway";
+import type { AcoContext } from "~/types";
+
+export class IsAuthorizationEnabledGatewayFromContext implements IIsAuthorizationEnabledGateway {
+    private context: AcoContext;
+
+    constructor(context: AcoContext) {
+        this.context = context;
+    }
+
+    execute() {
+        return this.context.security.isAuthorizationEnabled();
+    }
+}
diff --git a/packages/api-aco/src/flp/FolderLevelPermissions/gateways/IsAuthorizationEnabled/index.ts b/packages/api-aco/src/flp/FolderLevelPermissions/gateways/IsAuthorizationEnabled/index.ts
new file mode 100644
index 00000000000..edb959599b2
--- /dev/null
+++ b/packages/api-aco/src/flp/FolderLevelPermissions/gateways/IsAuthorizationEnabled/index.ts
@@ -0,0 +1,2 @@
+export * from "./IsAuthorizationEnabledGatewayFromContext";
+export * from "./IIsAuthorizationEnabledGateway";
diff --git a/packages/api-aco/src/flp/FolderLevelPermissions/gateways/ListIdentityTeamsGateway/IListIdentityTeamsGateway.ts b/packages/api-aco/src/flp/FolderLevelPermissions/gateways/ListIdentityTeamsGateway/IListIdentityTeamsGateway.ts
new file mode 100644
index 00000000000..aac468ad68b
--- /dev/null
+++ b/packages/api-aco/src/flp/FolderLevelPermissions/gateways/ListIdentityTeamsGateway/IListIdentityTeamsGateway.ts
@@ -0,0 +1,5 @@
+import type { Team } from "@webiny/api-security/types";
+
+export interface IListIdentityTeamsGateway {
+    execute: () => Promise<Team[]>;
+}
diff --git a/packages/api-aco/src/flp/FolderLevelPermissions/gateways/ListIdentityTeamsGateway/ListIdentityTeamsGatewayFromContext.ts b/packages/api-aco/src/flp/FolderLevelPermissions/gateways/ListIdentityTeamsGateway/ListIdentityTeamsGatewayFromContext.ts
new file mode 100644
index 00000000000..e8769a2ecd8
--- /dev/null
+++ b/packages/api-aco/src/flp/FolderLevelPermissions/gateways/ListIdentityTeamsGateway/ListIdentityTeamsGatewayFromContext.ts
@@ -0,0 +1,35 @@
+import type { AcoContext } from "~/types";
+import type { IListIdentityTeamsGateway } from "./IListIdentityTeamsGateway";
+
+export class ListIdentityTeamsGatewayFromContext implements IListIdentityTeamsGateway {
+    private context: AcoContext;
+
+    constructor(context: AcoContext) {
+        this.context = context;
+    }
+
+    async execute() {
+        return this.context.security.withoutAuthorization(async () => {
+            const identity = this.context.security.getIdentity();
+            if (!identity) {
+                return [];
+            }
+
+            const adminUser = await this.context.adminUsers.getUser({
+                where: { id: identity.id }
+            });
+            if (!adminUser) {
+                return [];
+            }
+
+            const hasTeams = adminUser.teams && adminUser.teams.length > 0;
+            if (hasTeams) {
+                return this.context.security.listTeams({
+                    where: { id_in: adminUser.teams }
+                });
+            }
+
+            return [];
+        });
+    }
+}
diff --git a/packages/api-aco/src/flp/FolderLevelPermissions/gateways/ListIdentityTeamsGateway/index.ts b/packages/api-aco/src/flp/FolderLevelPermissions/gateways/ListIdentityTeamsGateway/index.ts
new file mode 100644
index 00000000000..3bc18fdb708
--- /dev/null
+++ b/packages/api-aco/src/flp/FolderLevelPermissions/gateways/ListIdentityTeamsGateway/index.ts
@@ -0,0 +1,2 @@
+export * from "./IListIdentityTeamsGateway";
+export * from "./ListIdentityTeamsGatewayFromContext";
diff --git a/packages/api-aco/src/flp/FolderLevelPermissions/gateways/ListPermissionsGateway/IListPermissionsGateway.ts b/packages/api-aco/src/flp/FolderLevelPermissions/gateways/ListPermissionsGateway/IListPermissionsGateway.ts
new file mode 100644
index 00000000000..5a971eafa98
--- /dev/null
+++ b/packages/api-aco/src/flp/FolderLevelPermissions/gateways/ListPermissionsGateway/IListPermissionsGateway.ts
@@ -0,0 +1,5 @@
+import type { SecurityPermission } from "@webiny/api-security/types";
+
+export interface IListPermissionsGateway {
+    execute: () => Promise<SecurityPermission[]>;
+}
diff --git a/packages/api-aco/src/flp/FolderLevelPermissions/gateways/ListPermissionsGateway/ListPermissionsGatewayFromContext.ts b/packages/api-aco/src/flp/FolderLevelPermissions/gateways/ListPermissionsGateway/ListPermissionsGatewayFromContext.ts
new file mode 100644
index 00000000000..e83cdb135ca
--- /dev/null
+++ b/packages/api-aco/src/flp/FolderLevelPermissions/gateways/ListPermissionsGateway/ListPermissionsGatewayFromContext.ts
@@ -0,0 +1,14 @@
+import type { IListPermissionsGateway } from "./IListPermissionsGateway";
+import type { AcoContext } from "~/types";
+
+export class ListPermissionsGatewayFromContext implements IListPermissionsGateway {
+    private context: AcoContext;
+
+    constructor(context: AcoContext) {
+        this.context = context;
+    }
+
+    execute() {
+        return this.context.security.listPermissions();
+    }
+}
diff --git a/packages/api-aco/src/flp/FolderLevelPermissions/gateways/ListPermissionsGateway/index.ts b/packages/api-aco/src/flp/FolderLevelPermissions/gateways/ListPermissionsGateway/index.ts
new file mode 100644
index 00000000000..671b1b8d80a
--- /dev/null
+++ b/packages/api-aco/src/flp/FolderLevelPermissions/gateways/ListPermissionsGateway/index.ts
@@ -0,0 +1,2 @@
+export * from "./IListPermissionsGateway";
+export * from "./ListPermissionsGatewayFromContext";
diff --git a/packages/api-aco/src/flp/FolderLevelPermissions/gateways/index.ts b/packages/api-aco/src/flp/FolderLevelPermissions/gateways/index.ts
new file mode 100644
index 00000000000..62329d78f0a
--- /dev/null
+++ b/packages/api-aco/src/flp/FolderLevelPermissions/gateways/index.ts
@@ -0,0 +1,5 @@
+export * from "./GetIdentityGateway";
+export * from "./GetWcpGateway";
+export * from "./ListIdentityTeamsGateway";
+export * from "./ListPermissionsGateway";
+export * from "./IsAuthorizationEnabled";
diff --git a/packages/api-aco/src/flp/FolderLevelPermissions/index.ts b/packages/api-aco/src/flp/FolderLevelPermissions/index.ts
new file mode 100644
index 00000000000..5320c110623
--- /dev/null
+++ b/packages/api-aco/src/flp/FolderLevelPermissions/index.ts
@@ -0,0 +1,184 @@
+import { NotAuthorizedError } from "@webiny/api-security";
+import {
+    CanAccessFolder,
+    CanAccessFolderContent,
+    type CanAccessFolderContentParams,
+    type CanAccessFolderParams,
+    CanCreateFolderInRoot,
+    CanUseFolderLevelPermissions,
+    CanUseTeams,
+    CheckNotInheritedPermissions,
+    GetDefaultPermissions,
+    GetDefaultPermissionsWithTeams,
+    GetFolderPermission,
+    ListFolderPermissions
+} from "./useCases";
+import type {
+    AcoContext,
+    AcoFolderLevelPermissionsCrud,
+    FolderLevelPermission,
+    FolderPermission,
+    ListFlpsParams
+} from "~/types";
+import {
+    GetIdentityGatewayFromContext,
+    GetWcpGatewayFromContext,
+    type IGetIdentityGateway,
+    type IGetWcpGateway,
+    type IIsAuthorizationEnabledGateway,
+    type IListIdentityTeamsGateway,
+    type IListPermissionsGateway,
+    IsAuthorizationEnabledGatewayFromContext,
+    ListIdentityTeamsGatewayFromContext,
+    ListPermissionsGatewayFromContext
+} from "./gateways";
+
+interface CreateFolderLevelPermissionsParams {
+    context: AcoContext;
+    crud: AcoFolderLevelPermissionsCrud;
+}
+
+export class FolderLevelPermissions {
+    private crud: AcoFolderLevelPermissionsCrud;
+
+    private readonly getWcpGateway: IGetWcpGateway;
+    private readonly getIdentityGateway: IGetIdentityGateway;
+    private readonly listPermissionsGateway: IListPermissionsGateway;
+    private readonly listIdentityTeamsGateway: IListIdentityTeamsGateway;
+    private readonly isAuthorizationEnabledGateway: IIsAuthorizationEnabledGateway;
+
+    constructor(params: CreateFolderLevelPermissionsParams) {
+        this.crud = params.crud;
+        this.getWcpGateway = new GetWcpGatewayFromContext(params.context);
+        this.getIdentityGateway = new GetIdentityGatewayFromContext(params.context);
+        this.listPermissionsGateway = new ListPermissionsGatewayFromContext(params.context);
+        this.listIdentityTeamsGateway = new ListIdentityTeamsGatewayFromContext(params.context);
+        this.isAuthorizationEnabledGateway = new IsAuthorizationEnabledGatewayFromContext(
+            params.context
+        );
+    }
+
+    public canUseFolderLevelPermissions(enabled?: boolean) {
+        const canUseFolderLevelPermissionsUseCase = new CanUseFolderLevelPermissions(
+            this.getWcpGateway,
+            this.getIdentityGateway
+        );
+        return canUseFolderLevelPermissionsUseCase.execute(enabled);
+    }
+
+    public canUseTeams() {
+        const canUseTeamsUseCase = new CanUseTeams(this.getWcpGateway);
+        return canUseTeamsUseCase.execute();
+    }
+
+    public canCreateFolderInRoot() {
+        const canCreateFolderInRootUseCase = new CanCreateFolderInRoot();
+        return canCreateFolderInRootUseCase.execute();
+    }
+
+    public permissionsIncludeNonInheritedPermissions(permissions?: FolderPermission[]) {
+        const checkNotInheritedPermissionsUseCase = new CheckNotInheritedPermissions();
+        return checkNotInheritedPermissionsUseCase.execute(permissions);
+    }
+
+    public async canAccessFolder(params: CanAccessFolderParams) {
+        if (!this.canUseFolderLevelPermissions() || !this.isAuthorizationEnabledGateway.execute()) {
+            return true;
+        }
+
+        const canAccessFolderUseCase = new CanAccessFolder(this.getIdentityGateway);
+        return await canAccessFolderUseCase.execute(params);
+    }
+
+    public async canAccessFolderContent(params: CanAccessFolderContentParams) {
+        if (!this.canUseFolderLevelPermissions() || !this.isAuthorizationEnabledGateway.execute()) {
+            return true;
+        }
+
+        const canAccessFolderContentUseCase = new CanAccessFolderContent(this.getIdentityGateway);
+        return await canAccessFolderContentUseCase.execute(params);
+    }
+
+    public async ensureCanAccessFolder(params: CanAccessFolderParams) {
+        const result = await this.canAccessFolder(params);
+        if (!result) {
+            throw new NotAuthorizedError();
+        }
+    }
+
+    public async ensureCanAccessFolderContent(params: CanAccessFolderContentParams) {
+        const result = await this.canAccessFolderContent(params);
+        if (!result) {
+            throw new NotAuthorizedError();
+        }
+    }
+
+    public async canManageFolderContent(flp: FolderLevelPermission) {
+        if (!this.canUseFolderLevelPermissions() || !this.isAuthorizationEnabledGateway.execute()) {
+            return true;
+        }
+
+        return await this.canAccessFolderContent({ permissions: flp.permissions, rwd: "w" });
+    }
+
+    public async canManageFolderStructure(flp: FolderLevelPermission) {
+        if (!this.canUseFolderLevelPermissions() || !this.isAuthorizationEnabledGateway.execute()) {
+            return true;
+        }
+
+        return await this.canAccessFolder({ permissions: flp.permissions, rwd: "w" });
+    }
+
+    public async canManageFolderPermissions(flp: FolderLevelPermission) {
+        if (!this.canUseFolderLevelPermissions()) {
+            return false;
+        }
+
+        if (!this.isAuthorizationEnabledGateway.execute()) {
+            return true;
+        }
+
+        return await this.canAccessFolder({
+            permissions: flp.permissions,
+            rwd: "w",
+            managePermissions: true
+        });
+    }
+
+    public getDefaultPermissions(permissions: FolderPermission[]) {
+        const getDefaultPermissionsUseCase = new GetDefaultPermissions(
+            this.getIdentityGateway,
+            this.listPermissionsGateway
+        );
+
+        if (this.canUseTeams()) {
+            const getDefaultPermissionsWithTeams = new GetDefaultPermissionsWithTeams(
+                this.getIdentityGateway,
+                this.listIdentityTeamsGateway,
+                getDefaultPermissionsUseCase
+            );
+
+            return getDefaultPermissionsWithTeams.execute(permissions);
+        }
+
+        return getDefaultPermissionsUseCase.execute(permissions);
+    }
+
+    public async listFolderLevelPermissions(params: ListFlpsParams) {
+        const listFolderLevelPermissionsUseCase = new ListFolderPermissions(this.crud.list);
+        const flps = await listFolderLevelPermissionsUseCase.execute(params);
+
+        return Promise.all(
+            flps.map(async flp => ({
+                id: flp.id,
+                permissions: await this.getDefaultPermissions(flp.permissions)
+            }))
+        );
+    }
+
+    public async getFolderLevelPermissions(id: string) {
+        const getFolderLevelPermissionUseCase = new GetFolderPermission(this.crud.get);
+        const flp = await getFolderLevelPermissionUseCase.execute(id);
+        return await this.getDefaultPermissions(flp?.permissions ?? []);
+    }
+}
diff --git a/packages/api-aco/src/flp/FolderLevelPermissions/useCases/CanAccessFolder/CanAccessFolder.ts b/packages/api-aco/src/flp/FolderLevelPermissions/useCases/CanAccessFolder/CanAccessFolder.ts
new file mode 100644
index 00000000000..b754b02ca97
--- /dev/null
+++ b/packages/api-aco/src/flp/FolderLevelPermissions/useCases/CanAccessFolder/CanAccessFolder.ts
@@ -0,0 +1,44 @@
+import type { CanAccessFolderParams, ICanAccessFolder } from "./ICanAccessFolder";
+import type { IGetIdentityGateway } from "../../gateways";
+
+export class CanAccessFolder implements ICanAccessFolder {
+    private getIdentityGateway: IGetIdentityGateway;
+
+    constructor(getIdentityGateway: IGetIdentityGateway) {
+        this.getIdentityGateway = getIdentityGateway;
+    }
+
+    async execute({ permissions = [], rwd, managePermissions }: CanAccessFolderParams) {
+        if (!permissions.length) {
+            return true;
+        }
+
+        const identity = this.getIdentityGateway.execute();
+        const currentIdentityPermission = permissions.find(p => {
+            return p.target === `admin:${identity.id}`;
+        });
+
+        if (!currentIdentityPermission) {
+            return false;
+        }
+
+        const { level } = currentIdentityPermission;
+
+        if (managePermissions) {
+            return level === "owner";
+        }
+
+        // If the user has a `no-access` level, they are explicitly denied access to the current folder.
+        if (level === "no-access") {
+            return false;
+        }
+
+        // Checking for "write" or "delete" access. Allow only if the
+        // user is has `owner` or `editor` level or the folder is public (no FLP assigned).
+        if (rwd !== "r") {
+            return level === "owner" || level === "editor" || level === "public";
+        }
+
+        return true;
+    }
+}
diff --git a/packages/api-aco/src/flp/FolderLevelPermissions/useCases/CanAccessFolder/ICanAccessFolder.ts b/packages/api-aco/src/flp/FolderLevelPermissions/useCases/CanAccessFolder/ICanAccessFolder.ts
new file mode 100644
index 00000000000..a8cb3c63ea3
--- /dev/null
+++ b/packages/api-aco/src/flp/FolderLevelPermissions/useCases/CanAccessFolder/ICanAccessFolder.ts
@@ -0,0 +1,11 @@
+import type { FolderPermission } from "~/flp/flp.types";
+
+export interface CanAccessFolderParams {
+    permissions?: FolderPermission[];
+    rwd?: "r" | "w" | "d";
+    managePermissions?: boolean;
+}
+
+export interface ICanAccessFolder {
+    execute: (params: CanAccessFolderParams) => Promise<boolean>;
+}
diff --git a/packages/api-aco/src/flp/FolderLevelPermissions/useCases/CanAccessFolder/index.ts b/packages/api-aco/src/flp/FolderLevelPermissions/useCases/CanAccessFolder/index.ts
new file mode 100644
index 00000000000..48242dde93c
--- /dev/null
+++ b/packages/api-aco/src/flp/FolderLevelPermissions/useCases/CanAccessFolder/index.ts
@@ -0,0 +1,2 @@
+export * from "./CanAccessFolder";
+export * from "./ICanAccessFolder";
diff --git a/packages/api-aco/src/flp/FolderLevelPermissions/useCases/CanAccessFolderContent/CanAccessFolderContent.ts b/packages/api-aco/src/flp/FolderLevelPermissions/useCases/CanAccessFolderContent/CanAccessFolderContent.ts
new file mode 100644
index 00000000000..793ad6c6964
--- /dev/null
+++ b/packages/api-aco/src/flp/FolderLevelPermissions/useCases/CanAccessFolderContent/CanAccessFolderContent.ts
@@ -0,0 +1,40 @@
+import type {
+    CanAccessFolderContentParams,
+    ICanAccessFolderContent
+} from "./ICanAccessFolderContent";
+import type { IGetIdentityGateway } from "../../gateways";
+
+export class CanAccessFolderContent implements ICanAccessFolderContent {
+    private getIdentityGateway: IGetIdentityGateway;
+
+    constructor(getIdentityGateway: IGetIdentityGateway) {
+        this.getIdentityGateway = getIdentityGateway;
+    }
+
+    async execute({ permissions = [], rwd }: CanAccessFolderContentParams) {
+        const identity = this.getIdentityGateway.execute();
+
+        const currentIdentityPermission = permissions.find(p => {
+            return p.target === `admin:${identity.id}`;
+        });
+
+        if (!currentIdentityPermission) {
+            return false;
+        }
+
+        const { level } = currentIdentityPermission;
+
+        // If the user has a `no-access` level, they are explicitly denied access to the current folder.
+        if (level === "no-access") {
+            return false;
+        }
+
+        // If the user is not an owner and we're checking for "write" or
+        // "delete" access, then we can immediately return false.
+        if (rwd !== "r") {
+            return level !== "viewer";
+        }
+
+        return true;
+    }
+}
diff --git a/packages/api-aco/src/flp/FolderLevelPermissions/useCases/CanAccessFolderContent/ICanAccessFolderContent.ts b/packages/api-aco/src/flp/FolderLevelPermissions/useCases/CanAccessFolderContent/ICanAccessFolderContent.ts
new file mode 100644
index 00000000000..4e25f61b438
--- /dev/null
+++ b/packages/api-aco/src/flp/FolderLevelPermissions/useCases/CanAccessFolderContent/ICanAccessFolderContent.ts
@@ -0,0 +1,10 @@
+import type { FolderPermission } from "~/flp/flp.types";
+
+export interface CanAccessFolderContentParams {
+    permissions?: FolderPermission[];
+    rwd?: "r" | "w" | "d";
+}
+
+export interface ICanAccessFolderContent {
+    execute: (params: CanAccessFolderContentParams) => Promise<boolean>;
+}
diff --git a/packages/api-aco/src/flp/FolderLevelPermissions/useCases/CanAccessFolderContent/index.ts b/packages/api-aco/src/flp/FolderLevelPermissions/useCases/CanAccessFolderContent/index.ts
new file mode 100644
index 00000000000..94da4228e52
--- /dev/null
+++ b/packages/api-aco/src/flp/FolderLevelPermissions/useCases/CanAccessFolderContent/index.ts
@@ -0,0 +1,2 @@
+export * from "./CanAccessFolderContent";
+export * from "./ICanAccessFolderContent";
diff --git a/packages/api-aco/src/flp/FolderLevelPermissions/useCases/CanCreateFolderInRoot/CanCreateFolderInRoot.ts b/packages/api-aco/src/flp/FolderLevelPermissions/useCases/CanCreateFolderInRoot/CanCreateFolderInRoot.ts
new file mode 100644
index 00000000000..33a66d3b4d6
--- /dev/null
+++ b/packages/api-aco/src/flp/FolderLevelPermissions/useCases/CanCreateFolderInRoot/CanCreateFolderInRoot.ts
@@ -0,0 +1,7 @@
+import type { ICanCreateFolderInRoot } from "./ICanCreateFolderInRoot";
+
+export class CanCreateFolderInRoot implements ICanCreateFolderInRoot {
+    execute() {
+        return true;
+    }
+}
diff --git a/packages/api-aco/src/flp/FolderLevelPermissions/useCases/CanCreateFolderInRoot/ICanCreateFolderInRoot.ts b/packages/api-aco/src/flp/FolderLevelPermissions/useCases/CanCreateFolderInRoot/ICanCreateFolderInRoot.ts
new file mode 100644
index 00000000000..e156f7e3056
--- /dev/null
+++ b/packages/api-aco/src/flp/FolderLevelPermissions/useCases/CanCreateFolderInRoot/ICanCreateFolderInRoot.ts
@@ -0,0 +1,3 @@
+export interface ICanCreateFolderInRoot {
+    execute: () => boolean;
+}
diff --git a/packages/api-aco/src/flp/FolderLevelPermissions/useCases/CanCreateFolderInRoot/index.ts b/packages/api-aco/src/flp/FolderLevelPermissions/useCases/CanCreateFolderInRoot/index.ts
new file mode 100644
index 00000000000..7b2c39d492d
--- /dev/null
+++ b/packages/api-aco/src/flp/FolderLevelPermissions/useCases/CanCreateFolderInRoot/index.ts
@@ -0,0 +1,2 @@
+export * from "./CanCreateFolderInRoot";
+export * from "./ICanCreateFolderInRoot";
diff --git a/packages/api-aco/src/flp/FolderLevelPermissions/useCases/CanUseFolderLevelPermissions/CanUseFolderLevelPermissions.ts b/packages/api-aco/src/flp/FolderLevelPermissions/useCases/CanUseFolderLevelPermissions/CanUseFolderLevelPermissions.ts
new file mode 100644
index 00000000000..e5ebb92c51c
--- /dev/null
+++ b/packages/api-aco/src/flp/FolderLevelPermissions/useCases/CanUseFolderLevelPermissions/CanUseFolderLevelPermissions.ts
@@ -0,0 +1,35 @@
+import type { ICanUseFolderLevelPermissions } from "./ICanUseFolderPermissions";
+import type { IGetIdentityGateway } from "~/flp/FolderLevelPermissions/gateways";
+import type { IGetWcpGateway } from "~/flp/FolderLevelPermissions/gateways/GetWcpGateway";
+
+export class CanUseFolderLevelPermissions implements ICanUseFolderLevelPermissions {
+    private getWcpGateway: IGetWcpGateway;
+    private readonly getIdentityGateway: IGetIdentityGateway;
+
+    constructor(getWcpGateway: IGetWcpGateway, getIdentityGateway: IGetIdentityGateway) {
+        this.getWcpGateway = getWcpGateway;
+        this.getIdentityGateway = getIdentityGateway;
+    }
+
+    execute(enabled?: boolean) {
+        if (enabled === false) {
+            return false;
+        }
+
+        const identity = this.getIdentityGateway.execute();
+
+        // FLPs only work with authenticated identities (logged-in users).
+        if (!identity) {
+            return false;
+        }
+
+        // At the moment, we only want FLP to be used with identities of type "admin".
+        // This temporarily addresses the issue of API keys not being able to access content, because
+        // FLPs doesn't work with them. Once we start adding FLPs to API keys, we can remove this check.
+        if (identity.type !== "admin") {
+            return false;
+        }
+
+        return this.getWcpGateway.execute().canUseFolderLevelPermissions();
+    }
+}
diff --git a/packages/api-aco/src/flp/FolderLevelPermissions/useCases/CanUseFolderLevelPermissions/ICanUseFolderPermissions.ts b/packages/api-aco/src/flp/FolderLevelPermissions/useCases/CanUseFolderLevelPermissions/ICanUseFolderPermissions.ts
new file mode 100644
index 00000000000..90fd8a3ac84
--- /dev/null
+++ b/packages/api-aco/src/flp/FolderLevelPermissions/useCases/CanUseFolderLevelPermissions/ICanUseFolderPermissions.ts
@@ -0,0 +1,3 @@
+export interface ICanUseFolderLevelPermissions {
+    execute: (enabled?: boolean) => boolean;
+}
diff --git a/packages/api-aco/src/flp/FolderLevelPermissions/useCases/CanUseFolderLevelPermissions/index.ts b/packages/api-aco/src/flp/FolderLevelPermissions/useCases/CanUseFolderLevelPermissions/index.ts
new file mode 100644
index 00000000000..e375e015841
--- /dev/null
+++ b/packages/api-aco/src/flp/FolderLevelPermissions/useCases/CanUseFolderLevelPermissions/index.ts
@@ -0,0 +1,2 @@
+export * from "./CanUseFolderLevelPermissions";
+export * from "./ICanUseFolderPermissions";
diff --git a/packages/api-aco/src/flp/FolderLevelPermissions/useCases/CanUseTeams/CanUseTeams.ts b/packages/api-aco/src/flp/FolderLevelPermissions/useCases/CanUseTeams/CanUseTeams.ts
new file mode 100644
index 00000000000..53def48c76a
--- /dev/null
+++ b/packages/api-aco/src/flp/FolderLevelPermissions/useCases/CanUseTeams/CanUseTeams.ts
@@ -0,0 +1,14 @@
+import type { ICanUseTeams } from "./ICanUseTeams";
+import type { IGetWcpGateway } from "~/flp/FolderLevelPermissions/gateways/GetWcpGateway";
+
+export class CanUseTeams implements ICanUseTeams {
+    private getWcpGateway: IGetWcpGateway;
+
+    constructor(getWcpGateway: IGetWcpGateway) {
+        this.getWcpGateway = getWcpGateway;
+    }
+
+    execute() {
+        return this.getWcpGateway.execute().canUseTeams();
+    }
+}
diff --git a/packages/api-aco/src/flp/FolderLevelPermissions/useCases/CanUseTeams/ICanUseTeams.ts b/packages/api-aco/src/flp/FolderLevelPermissions/useCases/CanUseTeams/ICanUseTeams.ts
new file mode 100644
index 00000000000..de4cab97309
--- /dev/null
+++ b/packages/api-aco/src/flp/FolderLevelPermissions/useCases/CanUseTeams/ICanUseTeams.ts
@@ -0,0 +1,3 @@
+export interface ICanUseTeams {
+    execute: () => boolean;
+}
diff --git a/packages/api-aco/src/flp/FolderLevelPermissions/useCases/CanUseTeams/index.ts b/packages/api-aco/src/flp/FolderLevelPermissions/useCases/CanUseTeams/index.ts
new file mode 100644
index 00000000000..91bca9a073e
--- /dev/null
+++ b/packages/api-aco/src/flp/FolderLevelPermissions/useCases/CanUseTeams/index.ts
@@ -0,0 +1,2 @@
+export * from "./CanUseTeams";
+export * from "./ICanUseTeams";
diff --git a/packages/api-aco/src/flp/FolderLevelPermissions/useCases/CheckNotInheritedPermissions/CheckNotInheritedPermissions.ts b/packages/api-aco/src/flp/FolderLevelPermissions/useCases/CheckNotInheritedPermissions/CheckNotInheritedPermissions.ts
new file mode 100644
index 00000000000..5ec76cb3d2f
--- /dev/null
+++ b/packages/api-aco/src/flp/FolderLevelPermissions/useCases/CheckNotInheritedPermissions/CheckNotInheritedPermissions.ts
@@ -0,0 +1,8 @@
+import type { ICheckNotInheritedPermissions } from "./ICheckNotInheritedPermissions";
+import type { FolderPermission } from "~/flp/flp.types";
+
+export class CheckNotInheritedPermissions implements ICheckNotInheritedPermissions {
+    execute(permissions?: FolderPermission[]) {
+        return permissions?.some(p => !p.inheritedFrom);
+    }
+}
diff --git a/packages/api-aco/src/flp/FolderLevelPermissions/useCases/CheckNotInheritedPermissions/ICheckNotInheritedPermissions.ts b/packages/api-aco/src/flp/FolderLevelPermissions/useCases/CheckNotInheritedPermissions/ICheckNotInheritedPermissions.ts
new file mode 100644
index 00000000000..ed40ce93c93
--- /dev/null
+++ b/packages/api-aco/src/flp/FolderLevelPermissions/useCases/CheckNotInheritedPermissions/ICheckNotInheritedPermissions.ts
@@ -0,0 +1,5 @@
+import type { FolderPermission } from "~/flp/flp.types";
+
+export interface ICheckNotInheritedPermissions {
+    execute: (permissions?: FolderPermission[]) => boolean | undefined;
+}
diff --git a/packages/api-aco/src/flp/FolderLevelPermissions/useCases/CheckNotInheritedPermissions/index.ts b/packages/api-aco/src/flp/FolderLevelPermissions/useCases/CheckNotInheritedPermissions/index.ts
new file mode 100644
index 00000000000..f6cbb1bee7d
--- /dev/null
+++ b/packages/api-aco/src/flp/FolderLevelPermissions/useCases/CheckNotInheritedPermissions/index.ts
@@ -0,0 +1,2 @@
+export * from "./ICheckNotInheritedPermissions";
+export * from "./CheckNotInheritedPermissions";
diff --git a/packages/api-aco/src/flp/FolderLevelPermissions/useCases/GetDefaultPermissions/DefaultPermissionsMerger.ts b/packages/api-aco/src/flp/FolderLevelPermissions/useCases/GetDefaultPermissions/DefaultPermissionsMerger.ts
new file mode 100644
index 00000000000..a5555b88d75
--- /dev/null
+++ b/packages/api-aco/src/flp/FolderLevelPermissions/useCases/GetDefaultPermissions/DefaultPermissionsMerger.ts
@@ -0,0 +1,100 @@
+import type { FolderAccessLevel, FolderPermission } from "~/flp/flp.types";
+import { Identity } from "@webiny/api-authentication/types";
+import { SecurityPermission } from "@webiny/api-security/types";
+
+export class DefaultPermissionsMerger {
+    static merge(
+        identity: Identity,
+        identityPermissions: SecurityPermission[],
+        folderPermissions: FolderPermission[]
+    ): FolderPermission[] {
+        // If the user has full access permission, add a specific "owner" permission to the list.
+        // This ensures the user has complete control over the folder.
+        const hasFullAccess = identityPermissions.some(p => p.name === "*");
+        if (hasFullAccess) {
+            return [
+                {
+                    target: `admin:${identity.id}`,
+                    level: "owner" as FolderAccessLevel,
+                    inheritedFrom: "role:full-access"
+                },
+
+                // Remove any permissions related to the full access user,
+                // as these are always superseded by the "owner" permission defined above.
+                ...folderPermissions.filter(p => p.target !== `admin:${identity.id}`)
+            ];
+        }
+
+        if (folderPermissions.length === 0) {
+            // No permissions provided. This means the folder is public.
+            // Add a specific "public" permission to the list to ensure the folder is accessible to everyone.
+            return [
+                {
+                    target: `admin:${identity.id}`,
+                    level: "public" as FolderAccessLevel,
+                    inheritedFrom: "public"
+                }
+            ];
+        }
+
+        // If there are multiple `admin:${identity.id}` permissions in the array,
+        // we need to pick the one with the highest access level. We also remove
+        // other permissions for the same identity.
+
+        // Get permissions related to the current identity (admin).
+        const currentAdminPermissions = folderPermissions.filter(
+            p => p.target === `admin:${identity.id}`
+        );
+
+        if (currentAdminPermissions.length === 0) {
+            return folderPermissions;
+        }
+
+        const noAccessPermission = currentAdminPermissions.find(
+            p => p.level === "no-access" && p.target === `admin:${identity.id}`
+        );
+
+        if (noAccessPermission) {
+            // If one of the permissions is `no-access`, then we can immediately return it. This is
+            // because `no-access` is the ultimate level of access, and no other permission can override it.
+            // Remove all permissions for the current identity and add the winning one.
+            const filteredPermissions = folderPermissions.filter(
+                p => p.target !== `admin:${identity.id}`
+            );
+
+            return [...filteredPermissions, noAccessPermission];
+        }
+
+        const [firstAdminPermission, ...restAdminPermissions] = currentAdminPermissions;
+
+        const resultPermission = restAdminPermissions.reduce((winner, current) => {
+            const winnerInherits = winner.inheritedFrom?.startsWith("parent:");
+            const currentInherits = current.inheritedFrom?.startsWith("parent:");
+
+            if (winnerInherits && !currentInherits) {
+                return current;
+            }
+            if (currentInherits && !winnerInherits) {
+                return winner;
+            }
+
+            // At this point, we're either comparing two permissions with `inheritedFrom` or two without it.
+            // In other words, we're now at a point where we start comparing the levels (owner > editor > viewer).
+            if (current.level === "owner") {
+                return current;
+            }
+
+            if (current.level === "editor" && winner.level === "viewer") {
+                return current;
+            }
+
+            return winner;
+        }, firstAdminPermission);
+
+        // Remove all permissions for the current identity and add the winning one.
+        return [
+            resultPermission,
+            ...folderPermissions.filter(p => p.target !== `admin:${identity.id}`)
+        ];
+    }
+}
diff --git a/packages/api-aco/src/flp/FolderLevelPermissions/useCases/GetDefaultPermissions/GetDefaultPermissions.ts b/packages/api-aco/src/flp/FolderLevelPermissions/useCases/GetDefaultPermissions/GetDefaultPermissions.ts
new file mode 100644
index 00000000000..15b18bf080b
--- /dev/null
+++ b/packages/api-aco/src/flp/FolderLevelPermissions/useCases/GetDefaultPermissions/GetDefaultPermissions.ts
@@ -0,0 +1,24 @@
+import type { IGetDefaultPermissions } from "./IGetDefaultPermissions";
+import type { IGetIdentityGateway, IListPermissionsGateway } from "../../gateways";
+import type { FolderPermission } from "~/flp/flp.types";
+import { DefaultPermissionsMerger } from "./DefaultPermissionsMerger";
+
+export class GetDefaultPermissions implements IGetDefaultPermissions {
+    private getIdentityGateway: IGetIdentityGateway;
+    private listPermissionsGateway: IListPermissionsGateway;
+
+    constructor(
+        getIdentityGateway: IGetIdentityGateway,
+        listPermissionsGateway: IListPermissionsGateway
+    ) {
+        this.getIdentityGateway = getIdentityGateway;
+        this.listPermissionsGateway = listPermissionsGateway;
+    }
+
+    async execute(permissions: FolderPermission[]) {
+        const identity = this.getIdentityGateway.execute();
+        const identityPermissions = await this.listPermissionsGateway.execute();
+
+        return DefaultPermissionsMerger.merge(identity, identityPermissions, permissions);
+    }
+}
diff --git a/packages/api-aco/src/flp/FolderLevelPermissions/useCases/GetDefaultPermissions/GetDefaultPermissionsWithTeams.ts b/packages/api-aco/src/flp/FolderLevelPermissions/useCases/GetDefaultPermissions/GetDefaultPermissionsWithTeams.ts
new file mode 100644
index 00000000000..e2aae0a4bd8
--- /dev/null
+++ b/packages/api-aco/src/flp/FolderLevelPermissions/useCases/GetDefaultPermissions/GetDefaultPermissionsWithTeams.ts
@@ -0,0 +1,55 @@
+import type { IGetDefaultPermissions } from "./IGetDefaultPermissions";
+import type {
+    IGetIdentityGateway,
+    IListIdentityTeamsGateway
+} from "~/flp/FolderLevelPermissions/gateways";
+import type { FolderPermission } from "~/flp/flp.types";
+import { Team } from "@webiny/api-security/types";
+
+export class GetDefaultPermissionsWithTeams implements IGetDefaultPermissions {
+    private getIdentityGateway: IGetIdentityGateway;
+    private listIdentityTeamsGateway: IListIdentityTeamsGateway;
+    private decoretee: IGetDefaultPermissions;
+
+    constructor(
+        getIdentityGateway: IGetIdentityGateway,
+        listIdentityTeamsGateway: IListIdentityTeamsGateway,
+        decoretee: IGetDefaultPermissions
+    ) {
+        this.getIdentityGateway = getIdentityGateway;
+        this.listIdentityTeamsGateway = listIdentityTeamsGateway;
+        this.decoretee = decoretee;
+    }
+
+    async execute(originalPermissions: FolderPermission[]) {
+        /**
+         * Retrieves the list of teams the current identity belongs to and checks if any of these teams
+         * have permissions for the folder. If a team has permissions, the current identity is granted
+         * the same permissions, inheriting them from the team.
+         */
+        const identity = this.getIdentityGateway.execute();
+        const identityTeams: Team[] = (await this.listIdentityTeamsGateway.execute()) ?? [];
+
+        const permissions = [...originalPermissions]; // Clone the original permissions to avoid mutation.
+
+        if (identityTeams.length) {
+            for (const identityTeam of identityTeams) {
+                // Check if the team has permissions for the folder.
+                const teamPermission = permissions.find(
+                    p => p.target === `team:${identityTeam.id}`
+                );
+
+                if (teamPermission) {
+                    // Grant the current identity the same permissions as the team, marking them as inherited.
+                    permissions.push({
+                        target: `admin:${identity.id}`,
+                        level: teamPermission.level,
+                        inheritedFrom: "team:" + identityTeam.id
+                    });
+                }
+            }
+        }
+
+        return await this.decoretee.execute(permissions);
+    }
+}
diff --git a/packages/api-aco/src/flp/FolderLevelPermissions/useCases/GetDefaultPermissions/IGetDefaultPermissions.ts b/packages/api-aco/src/flp/FolderLevelPermissions/useCases/GetDefaultPermissions/IGetDefaultPermissions.ts
new file mode 100644
index 00000000000..45309dc70d8
--- /dev/null
+++ b/packages/api-aco/src/flp/FolderLevelPermissions/useCases/GetDefaultPermissions/IGetDefaultPermissions.ts
@@ -0,0 +1,5 @@
+import type { FolderPermission } from "~/flp/flp.types";
+
+export interface IGetDefaultPermissions {
+    execute: (permissions: FolderPermission[]) => Promise<FolderPermission[]>;
+}
diff --git a/packages/api-aco/src/flp/FolderLevelPermissions/useCases/GetDefaultPermissions/index.ts b/packages/api-aco/src/flp/FolderLevelPermissions/useCases/GetDefaultPermissions/index.ts
new file mode 100644
index 00000000000..a741ab52e64
--- /dev/null
+++ b/packages/api-aco/src/flp/FolderLevelPermissions/useCases/GetDefaultPermissions/index.ts
@@ -0,0 +1,3 @@
+export * from "./IGetDefaultPermissions";
+export * from "./GetDefaultPermissions";
+export * from "./GetDefaultPermissionsWithTeams";
diff --git a/packages/api-aco/src/flp/FolderLevelPermissions/useCases/GetFolderPermission/GetFolderPermission.ts b/packages/api-aco/src/flp/FolderLevelPermissions/useCases/GetFolderPermission/GetFolderPermission.ts
new file mode 100644
index 00000000000..a67e35ef543
--- /dev/null
+++ b/packages/api-aco/src/flp/FolderLevelPermissions/useCases/GetFolderPermission/GetFolderPermission.ts
@@ -0,0 +1,14 @@
+import type { AcoFolderLevelPermissionsCrud } from "~/flp/flp.types";
+import type { IGetFolderPermission } from "./IGetFolderPermission";
+
+export class GetFolderPermission implements IGetFolderPermission {
+    private readonly crud: AcoFolderLevelPermissionsCrud["get"];
+
+    constructor(crud: AcoFolderLevelPermissionsCrud["get"]) {
+        this.crud = crud;
+    }
+
+    public async execute(id: string) {
+        return this.crud(id);
+    }
+}
diff --git a/packages/api-aco/src/flp/FolderLevelPermissions/useCases/GetFolderPermission/IGetFolderPermission.ts b/packages/api-aco/src/flp/FolderLevelPermissions/useCases/GetFolderPermission/IGetFolderPermission.ts
new file mode 100644
index 00000000000..628593641ce
--- /dev/null
+++ b/packages/api-aco/src/flp/FolderLevelPermissions/useCases/GetFolderPermission/IGetFolderPermission.ts
@@ -0,0 +1,5 @@
+import type { FolderLevelPermission } from "~/flp/flp.types";
+
+export interface IGetFolderPermission {
+    execute: (id: string) => Promise<FolderLevelPermission | null>;
+}
diff --git a/packages/api-aco/src/flp/FolderLevelPermissions/useCases/GetFolderPermission/index.ts b/packages/api-aco/src/flp/FolderLevelPermissions/useCases/GetFolderPermission/index.ts
new file mode 100644
index 00000000000..854c280e12c
--- /dev/null
+++ b/packages/api-aco/src/flp/FolderLevelPermissions/useCases/GetFolderPermission/index.ts
@@ -0,0 +1,2 @@
+export * from "./GetFolderPermission";
+export * from "./IGetFolderPermission";
diff --git a/packages/api-aco/src/flp/FolderLevelPermissions/useCases/ListFolderPermissions/IListFolderPermissions.ts b/packages/api-aco/src/flp/FolderLevelPermissions/useCases/ListFolderPermissions/IListFolderPermissions.ts
new file mode 100644
index 00000000000..77cdd97e8d7
--- /dev/null
+++ b/packages/api-aco/src/flp/FolderLevelPermissions/useCases/ListFolderPermissions/IListFolderPermissions.ts
@@ -0,0 +1,5 @@
+import type { FolderLevelPermission, ListFlpsParams } from "~/types";
+
+export interface IListFolderPermissions {
+    execute: (params: ListFlpsParams) => Promise<FolderLevelPermission[]>;
+}
diff --git a/packages/api-aco/src/flp/FolderLevelPermissions/useCases/ListFolderPermissions/ListFolderPermissions.ts b/packages/api-aco/src/flp/FolderLevelPermissions/useCases/ListFolderPermissions/ListFolderPermissions.ts
new file mode 100644
index 00000000000..64dad91e037
--- /dev/null
+++ b/packages/api-aco/src/flp/FolderLevelPermissions/useCases/ListFolderPermissions/ListFolderPermissions.ts
@@ -0,0 +1,14 @@
+import type { IListFolderPermissions } from "./IListFolderPermissions";
+import type { AcoFolderLevelPermissionsCrud, ListFlpsParams } from "~/flp/flp.types";
+
+export class ListFolderPermissions implements IListFolderPermissions {
+    private readonly crud: AcoFolderLevelPermissionsCrud["list"];
+
+    constructor(crud: AcoFolderLevelPermissionsCrud["list"]) {
+        this.crud = crud;
+    }
+
+    async execute(params: ListFlpsParams) {
+        return this.crud(params);
+    }
+}
diff --git a/packages/api-aco/src/flp/FolderLevelPermissions/useCases/ListFolderPermissions/index.ts b/packages/api-aco/src/flp/FolderLevelPermissions/useCases/ListFolderPermissions/index.ts
new file mode 100644
index 00000000000..46b0143a288
--- /dev/null
+++ b/packages/api-aco/src/flp/FolderLevelPermissions/useCases/ListFolderPermissions/index.ts
@@ -0,0 +1,2 @@
+export * from "./ListFolderPermissions";
+export * from "./ListFolderPermissions";
diff --git a/packages/api-aco/src/flp/FolderLevelPermissions/useCases/index.ts b/packages/api-aco/src/flp/FolderLevelPermissions/useCases/index.ts
new file mode 100644
index 00000000000..f5c79179e9b
--- /dev/null
+++ b/packages/api-aco/src/flp/FolderLevelPermissions/useCases/index.ts
@@ -0,0 +1,9 @@
+export * from "./CanAccessFolder";
+export * from "./CanAccessFolderContent";
+export * from "./CanCreateFolderInRoot";
+export * from "./CanUseFolderLevelPermissions";
+export * from "./CanUseTeams";
+export * from "./CheckNotInheritedPermissions";
+export * from "./GetDefaultPermissions";
+export * from "./GetFolderPermission";
+export * from "./ListFolderPermissions";
diff --git a/packages/api-aco/src/flp/flp.crud.ts b/packages/api-aco/src/flp/flp.crud.ts
new file mode 100644
index 00000000000..12b4bd2d97e
--- /dev/null
+++ b/packages/api-aco/src/flp/flp.crud.ts
@@ -0,0 +1,173 @@
+import { I18NLocale } from "@webiny/api-i18n/types";
+import { Tenant } from "@webiny/api-tenancy/types";
+import { createTopic } from "@webiny/pubsub";
+import {
+    type AcoFolderLevelPermissionsCrud,
+    type AcoStorageOperations,
+    type CreateFlpParams,
+    type OnFlpAfterCreateTopicParams,
+    type OnFlpAfterDeleteTopicParams,
+    type OnFlpAfterUpdateTopicParams,
+    type OnFlpBeforeCreateTopicParams,
+    type OnFlpBeforeDeleteTopicParams,
+    type OnFlpBeforeUpdateTopicParams,
+    type OnFlpBatchBeforeUpdateTopicParams,
+    type OnFlpBatchAfterUpdateTopicParams,
+    type UpdateFlpParams
+} from "~/types";
+import { WebinyError } from "@webiny/error";
+
+export interface CreateFlpCrudMethodsParams {
+    getLocale: () => I18NLocale;
+    getTenant: () => Tenant;
+    storageOperations: AcoStorageOperations;
+}
+
+export const createFlpCrudMethods = ({
+    storageOperations,
+    getTenant,
+    getLocale
+}: CreateFlpCrudMethodsParams): AcoFolderLevelPermissionsCrud => {
+    // create
+    const onFlpBeforeCreate = createTopic<OnFlpBeforeCreateTopicParams>("aco.onFlpBeforeCreate");
+    const onFlpAfterCreate = createTopic<OnFlpAfterCreateTopicParams>("aco.onFlpAfterCreate");
+    // update
+    const onFlpBeforeUpdate = createTopic<OnFlpBeforeUpdateTopicParams>("aco.onFlpBeforeUpdate");
+    const onFlpAfterUpdate = createTopic<OnFlpAfterUpdateTopicParams>("aco.onFlpAfterUpdate");
+    // delete
+    const onFlpBeforeDelete = createTopic<OnFlpBeforeDeleteTopicParams>("aco.onFlpBeforeDelete");
+    const onFlpAfterDelete = createTopic<OnFlpAfterDeleteTopicParams>("aco.onFlpAfterDelete");
+    // batch update
+    const onFlpBatchBeforeUpdate = createTopic<OnFlpBatchBeforeUpdateTopicParams>(
+        "aco.onFlpBatchBeforeUpdate"
+    );
+    const onFlpBatchAfterUpdate = createTopic<OnFlpBatchAfterUpdateTopicParams>(
+        "aco.onFlpBatchAfterUpdate"
+    );
+
+    return {
+        onFlpBeforeCreate,
+        onFlpAfterCreate,
+        onFlpBeforeUpdate,
+        onFlpAfterUpdate,
+        onFlpBeforeDelete,
+        onFlpAfterDelete,
+        onFlpBatchBeforeUpdate,
+        onFlpBatchAfterUpdate,
+        async create(params: CreateFlpParams) {
+            await onFlpBeforeCreate.publish({ input: params });
+            const flp = await storageOperations.flp.create({
+                data: { ...params, tenant: getTenant().id, locale: getLocale().code }
+            });
+            await onFlpAfterCreate.publish({ flp });
+            return flp;
+        },
+        async update(id: string, data: UpdateFlpParams) {
+            const original = await this.get(id);
+            if (!original) {
+                throw new WebinyError(
+                    `Folder level permission with id "${id}" not found.`,
+                    "GET_ITEM_UPDATE_FLP_ERROR",
+                    {
+                        id,
+                        data
+                    }
+                );
+            }
+            await onFlpBeforeUpdate.publish({ original, input: { id, data } });
+            const flp = await storageOperations.flp.update({
+                original,
+                data: {
+                    ...data,
+                    tenant: getTenant().id,
+                    locale: getLocale().code
+                }
+            });
+            await onFlpAfterUpdate.publish({ original, input: { id, data }, flp });
+            return flp;
+        },
+        async batchUpdate(items: Array<{ id: string; data: UpdateFlpParams }>) {
+            const batchItems = (
+                await Promise.all(
+                    items.map(async ({ id, data }) => {
+                        const original = await this.get(id);
+                        if (!original) {
+                            return null;
+                        }
+                        return {
+                            original,
+                            data: {
+                                ...data,
+                                tenant: getTenant().id,
+                                locale: getLocale().code
+                            }
+                        };
+                    })
+                )
+            ).filter((item): item is NonNullable<typeof item> => item !== null);
+
+            if (batchItems.length === 0) {
+                return [];
+            }
+
+            await onFlpBatchBeforeUpdate.publish({
+                items: batchItems.map(({ original, data }) => ({
+                    original,
+                    input: data
+                }))
+            });
+
+            const updatedItems = await storageOperations.flp.batchUpdate({
+                items: batchItems
+            });
+
+            await onFlpBatchAfterUpdate.publish({
+                items: batchItems.map(({ original }, index) => ({
+                    original,
+                    flp: updatedItems[index],
+                    input: items[index].data
+                }))
+            });
+
+            return updatedItems;
+        },
+        async delete(id: string) {
+            const flp = await this.get(id);
+            if (!flp) {
+                throw new WebinyError(
+                    `Folder level permission with id "${id}" not found.`,
+                    "GET_ITEM_DELETE_FLP_ERROR",
+                    {
+                        id
+                    }
+                );
+            }
+            await onFlpBeforeDelete.publish({ flp });
+            await storageOperations.flp.delete({
+                flp: {
+                    ...flp,
+                    tenant: getTenant().id,
+                    locale: getLocale().code
+                }
+            });
+            await onFlpAfterDelete.publish({ flp });
+            return true;
+        },
+        async get(id: string) {
+            return await storageOperations.flp.get({
+                id,
+                tenant: getTenant().id,
+                locale: getLocale().code
+            });
+        },
+        async list({ where }) {
+            return await storageOperations.flp.list({
+                where: {
+                    ...where,
+                    tenant: getTenant().id,
+                    locale: getLocale().code
+                }
+            });
+        }
+    };
+};
diff --git a/packages/api-aco/src/flp/flp.so.ts b/packages/api-aco/src/flp/flp.so.ts
new file mode 100644
index 00000000000..1885935a93f
--- /dev/null
+++ b/packages/api-aco/src/flp/flp.so.ts
@@ -0,0 +1,322 @@
+import { Entity, Table } from "@webiny/db-dynamodb/toolbox";
+import { DynamoDBDocument } from "@webiny/aws-sdk/client-dynamodb";
+import { deleteItem, getClean, put, queryAllClean } from "@webiny/db-dynamodb";
+import { createEntityWriteBatch } from "@webiny/db-dynamodb/utils/entity/EntityWriteBatch";
+
+import { WebinyError } from "@webiny/error";
+import type {
+    AcoFolderLevelPermissionsStorageOperations as IAcoFolderLevelPermissionsStorageOperations,
+    FolderLevelPermission,
+    StorageOperationsCreateFlpParams,
+    StorageOperationsDeleteFlpParams,
+    StorageOperationsGetFlpParams,
+    StorageOperationsListFlpsParams,
+    StorageOperationsUpdateFlpParams,
+    StorageOperationsBatchUpdateFlpParams
+} from "~/flp/flp.types";
+import { executeWithRetry } from "@webiny/utils";
+
+interface StorageOperationsConfig {
+    documentClient: DynamoDBDocument;
+}
+
+export interface CreateTableParams {
+    name?: string;
+    documentClient: DynamoDBDocument;
+}
+
+interface CreateEntityParams {
+    table: Table<string, string, string>;
+    name: string;
+}
+
+interface CreateKeysParams {
+    tenant: string;
+    locale: string;
+    id: string;
+}
+
+interface CreateGsiKeysParams {
+    tenant: string;
+    locale: string;
+    id: string;
+    type: string;
+    path: string;
+    parentId: string;
+}
+
+class FolderLevelPermissionsStorageOperations
+    implements IAcoFolderLevelPermissionsStorageOperations
+{
+    private readonly entity: Entity<any>;
+    private readonly table: Table<string, string, string>;
+
+    constructor({ documentClient }: StorageOperationsConfig) {
+        this.table = this.createTable({ documentClient });
+
+        this.entity = this.createEntity({
+            table: this.table,
+            name: "ACO.flp"
+        });
+    }
+
+    async list({
+        where: { tenant, locale, type, path_startsWith, parentId }
+    }: StorageOperationsListFlpsParams): Promise<FolderLevelPermission[]> {
+        try {
+            if (parentId) {
+                const entries = await queryAllClean<{ data: FolderLevelPermission }>({
+                    entity: this.entity,
+                    partitionKey: `T#${tenant}#L#${locale}#FLP`,
+                    options: {
+                        index: "GSI2",
+                        eq: parentId
+                    }
+                });
+                return entries.map(entry => entry.data);
+            }
+
+            if (path_startsWith) {
+                const entries = await queryAllClean<{ data: FolderLevelPermission }>({
+                    entity: this.entity,
+                    partitionKey: `T#${tenant}#L#${locale}#AT#${type}#FLP`,
+                    options: {
+                        index: "GSI1",
+                        beginsWith: path_startsWith
+                    }
+                });
+                return entries.map(entry => entry.data);
+            }
+
+            throw new WebinyError("Missing required parameters.", "LIST_FLP_MISSING_PARAMETERS", {
+                tenant,
+                locale,
+                type,
+                path_startsWith,
+                parentId
+            });
+        } catch (err) {
+            throw WebinyError.from(err, {
+                message: "Could not list folder level permissions.",
+                code: "LIST_FLP_ERROR"
+            });
+        }
+    }
+
+    async get({
+        tenant,
+        locale,
+        id
+    }: StorageOperationsGetFlpParams): Promise<FolderLevelPermission | null> {
+        try {
+            const entry = await getClean<{ data: FolderLevelPermission }>({
+                entity: this.entity,
+                keys: this.createKeys({ tenant, locale, id })
+            });
+
+            if (!entry) {
+                return null;
+            }
+
+            return entry.data;
+        } catch (err) {
+            throw WebinyError.from(err, {
+                message: "Could not load folder level permission.",
+                code: "GET_FLP_ERROR",
+                data: { tenant, locale, id }
+            });
+        }
+    }
+
+    async create({ data }: StorageOperationsCreateFlpParams): Promise<FolderLevelPermission> {
+        const keys = {
+            ...this.createKeys(data),
+            ...this.createGsiKeys(data)
+        };
+
+        try {
+            await put({
+                entity: this.entity,
+                item: {
+                    ...keys,
+                    data
+                }
+            });
+
+            return data;
+        } catch (err) {
+            throw WebinyError.from(err, {
+                message: "Could not create folder level permission.",
+                code: "CREATE_FLP_ERROR",
+                data: { keys, data }
+            });
+        }
+    }
+
+    async update({
+        data: inputData,
+        original
+    }: StorageOperationsUpdateFlpParams): Promise<FolderLevelPermission> {
+        try {
+            const data = {
+                ...original,
+                ...inputData
+            };
+
+            const keys = {
+                ...this.createKeys(data),
+                ...this.createGsiKeys(data)
+            };
+
+            await put({
+                entity: this.entity,
+                item: {
+                    ...keys,
+                    data
+                }
+            });
+
+            return data;
+        } catch (err) {
+            throw WebinyError.from(err, {
+                message: "Could not update folder level permission.",
+                code: "UPDATE_FLP_ERROR",
+                data: { inputData, original }
+            });
+        }
+    }
+
+    async delete({ flp }: StorageOperationsDeleteFlpParams): Promise<void> {
+        const keys = this.createKeys(flp);
+
+        try {
+            await deleteItem({
+                entity: this.entity,
+                keys
+            });
+        } catch (err) {
+            throw WebinyError.from(err, {
+                message: "Could not delete folder level permission.",
+                code: "DELETE_FLP_ERROR",
+                data: { keys, flp }
+            });
+        }
+    }
+
+    async batchUpdate({
+        items
+    }: StorageOperationsBatchUpdateFlpParams): Promise<FolderLevelPermission[]> {
+        try {
+            const batch = createEntityWriteBatch({
+                entity: this.entity
+            });
+
+            const updatedItems: FolderLevelPermission[] = [];
+
+            for (const { original, data: inputData } of items) {
+                const data = {
+                    ...original,
+                    ...inputData
+                };
+
+                const keys = {
+                    ...this.createKeys(data),
+                    ...this.createGsiKeys(data)
+                };
+
+                batch.put({
+                    ...keys,
+                    data
+                });
+
+                updatedItems.push(data);
+            }
+
+            await executeWithRetry(async () => {
+                return await batch.execute();
+            });
+
+            return updatedItems;
+        } catch (err) {
+            throw WebinyError.from(err, {
+                message: "Could not batch update folder level permissions.",
+                code: "BATCH_UPDATE_FLP_ERROR",
+                data: { items }
+            });
+        }
+    }
+
+    private createEntity = (params: CreateEntityParams): Entity<any> => {
+        return new Entity({
+            name: params.name,
+            table: params.table,
+            attributes: {
+                PK: {
+                    partitionKey: true
+                },
+                SK: {
+                    sortKey: true
+                },
+                GSI1_PK: {
+                    type: "string",
+                    required: true
+                },
+                GSI1_SK: {
+                    type: "string",
+                    required: true
+                },
+                GSI2_PK: {
+                    type: "string",
+                    required: true
+                },
+                GSI2_SK: {
+                    type: "string",
+                    required: true
+                },
+                TYPE: {
+                    type: "string"
+                },
+                data: {
+                    type: "map"
+                }
+            }
+        });
+    };
+
+    private createTable = ({ name, documentClient }: CreateTableParams) => {
+        return new Table({
+            name: name || String(process.env.DB_TABLE),
+            partitionKey: "PK",
+            sortKey: "SK",
+            DocumentClient: documentClient,
+            indexes: {
+                GSI1: {
+                    partitionKey: "GSI1_PK",
+                    sortKey: "GSI1_SK"
+                },
+                GSI2: {
+                    partitionKey: "GSI2_PK",
+                    sortKey: "GSI2_SK"
+                }
+            },
+            autoExecute: true,
+            autoParse: true
+        });
+    };
+
+    private createKeys = ({ id, tenant, locale }: CreateKeysParams) => ({
+        PK: `T#${tenant}#L#${locale}#FLP#${id}`,
+        SK: `A`
+    });
+
+    private createGsiKeys = ({ tenant, locale, type, path, parentId }: CreateGsiKeysParams) => ({
+        GSI1_PK: `T#${tenant}#L#${locale}#AT#${type}#FLP`,
+        GSI1_SK: path,
+        GSI2_PK: `T#${tenant}#L#${locale}#FLP`,
+        GSI2_SK: parentId
+    });
+}
+
+export const createFlpOperations = (params: StorageOperationsConfig) => {
+    return new FolderLevelPermissionsStorageOperations(params);
+};
diff --git a/packages/api-aco/src/flp/flp.types.ts b/packages/api-aco/src/flp/flp.types.ts
new file mode 100644
index 00000000000..96b8c4da6d3
--- /dev/null
+++ b/packages/api-aco/src/flp/flp.types.ts
@@ -0,0 +1,180 @@
+import { Topic } from "@webiny/pubsub/types";
+import { ITaskRunParams } from "@webiny/tasks/types";
+import { type AcoContext, type Folder } from "~/types";
+import type { FolderLevelPermission, FolderPermission } from "@webiny/shared-aco/flp/flp.types";
+
+export * from "@webiny/shared-aco/flp/flp.types";
+
+/********
+ * CRUD operations
+ *******/
+
+export interface ListFlpsParams {
+    where: {
+        path_startsWith?: string;
+        parentId?: string;
+        type: string;
+    };
+}
+
+export type CreateFlpParams = Pick<
+    FolderLevelPermission,
+    "id" | "type" | "permissions" | "path" | "parentId" | "slug"
+>;
+
+export interface UpdateFlpParams {
+    parentId?: string;
+    slug?: string;
+    path?: string;
+    permissions?: FolderPermission[];
+    type?: string;
+}
+
+export interface OnFlpBeforeCreateTopicParams {
+    input: CreateFlpParams;
+}
+
+export interface OnFlpAfterCreateTopicParams {
+    flp: FolderLevelPermission;
+}
+
+export interface OnFlpBeforeUpdateTopicParams {
+    original: FolderLevelPermission;
+    input: Record<string, any>;
+}
+
+export interface OnFlpAfterUpdateTopicParams {
+    original: FolderLevelPermission;
+    flp: FolderLevelPermission;
+    input: Record<string, any>;
+}
+
+export interface OnFlpBeforeDeleteTopicParams {
+    flp: FolderLevelPermission;
+}
+
+export interface OnFlpAfterDeleteTopicParams {
+    flp: FolderLevelPermission;
+}
+
+export interface OnFlpBatchBeforeUpdateTopicParams {
+    items: Array<{
+        original: FolderLevelPermission;
+        input: UpdateFlpParams;
+    }>;
+}
+
+export interface OnFlpBatchAfterUpdateTopicParams {
+    items: Array<{
+        original: FolderLevelPermission;
+        flp: FolderLevelPermission;
+        input: UpdateFlpParams;
+    }>;
+}
+
+export interface AcoFolderLevelPermissionsCrud {
+    list(params: ListFlpsParams): Promise<FolderLevelPermission[]>;
+    get(id: string): Promise<FolderLevelPermission | null>;
+    create(params: CreateFlpParams): Promise<FolderLevelPermission>;
+    update(id: string, data: UpdateFlpParams): Promise<FolderLevelPermission>;
+    delete(id: string): Promise<boolean>;
+    batchUpdate(
+        items: Array<{ id: string; data: UpdateFlpParams }>
+    ): Promise<FolderLevelPermission[]>;
+    onFlpBeforeCreate: Topic<OnFlpBeforeCreateTopicParams>;
+    onFlpAfterCreate: Topic<OnFlpAfterCreateTopicParams>;
+    onFlpBeforeUpdate: Topic<OnFlpBeforeUpdateTopicParams>;
+    onFlpAfterUpdate: Topic<OnFlpAfterUpdateTopicParams>;
+    onFlpBeforeDelete: Topic<OnFlpBeforeDeleteTopicParams>;
+    onFlpAfterDelete: Topic<OnFlpAfterDeleteTopicParams>;
+    onFlpBatchBeforeUpdate: Topic<OnFlpBatchBeforeUpdateTopicParams>;
+    onFlpBatchAfterUpdate: Topic<OnFlpBatchAfterUpdateTopicParams>;
+}
+
+/********
+ * Storage operations
+ *******/
+
+export interface StorageOperationsListFlpsParams {
+    where: ListFlpsParams["where"] & {
+        tenant: string;
+        locale: string;
+    };
+}
+
+export interface StorageOperationsGetFlpParams {
+    id: string;
+    tenant: string;
+    locale: string;
+}
+
+export type StorageOperationsCreateFlpParams = {
+    data: FolderLevelPermission & {
+        tenant: string;
+        locale: string;
+    };
+};
+
+export type StorageOperationsUpdateFlpParams = {
+    original: FolderLevelPermission;
+    data: UpdateFlpParams & {
+        tenant: string;
+        locale: string;
+    };
+};
+
+export type StorageOperationsDeleteFlpParams = {
+    flp: FolderLevelPermission & {
+        tenant: string;
+        locale: string;
+    };
+};
+
+export interface StorageOperationsBatchUpdateFlpParams {
+    items: Array<{
+        original: FolderLevelPermission;
+        data: UpdateFlpParams & {
+            tenant: string;
+            locale: string;
+        };
+    }>;
+}
+
+export interface AcoFolderLevelPermissionsStorageOperations {
+    list(params: StorageOperationsListFlpsParams): Promise<FolderLevelPermission[]>;
+    get(params: StorageOperationsGetFlpParams): Promise<FolderLevelPermission | null>;
+    create(params: StorageOperationsCreateFlpParams): Promise<FolderLevelPermission>;
+    update(params: StorageOperationsUpdateFlpParams): Promise<FolderLevelPermission>;
+    delete(params: StorageOperationsDeleteFlpParams): Promise<void>;
+    batchUpdate(params: StorageOperationsBatchUpdateFlpParams): Promise<FolderLevelPermission[]>;
+}
+
+/********
+ *  Background Tasks
+ *******/
+
+export interface ICreateFlpTaskInput {
+    folder: Folder;
+}
+
+export type ICreateFlpTaskParams = ITaskRunParams<AcoContext, ICreateFlpTaskInput>;
+
+export interface IUpdateFlpTaskInput {
+    folder: Folder;
+    queued?: string[];
+}
+
+export type IUpdateFlpTaskParams = ITaskRunParams<AcoContext, IUpdateFlpTaskInput>;
+
+export interface IDeleteFlpTaskInput {
+    folder: Folder;
+}
+
+export type IDeleteFlpTaskParams = ITaskRunParams<AcoContext, IDeleteFlpTaskInput>;
+
+export interface ISyncFlpTaskInput {
+    type?: string;
+    folderId?: string;
+}
+
+export type ISyncFlpTaskParams = ITaskRunParams<AcoContext, ISyncFlpTaskInput>;
diff --git a/packages/api-aco/src/flp/hooks/index.ts b/packages/api-aco/src/flp/hooks/index.ts
new file mode 100644
index 00000000000..062c0fde6ef
--- /dev/null
+++ b/packages/api-aco/src/flp/hooks/index.ts
@@ -0,0 +1,10 @@
+import { onFolderAfterCreateFlpHook } from "./onFolderAfterCreateFlp.hook";
+import { onFolderAfterDeleteFlpHook } from "./onFolderAfterDeleteFlp.hook";
+import { onFolderAfterUpdateFlpHook } from "./onFolderAfterUpdateFlp.hook";
+import { AcoContext } from "~/types";
+
+export const createFlpHooks = (context: AcoContext) => {
+    onFolderAfterCreateFlpHook(context);
+    onFolderAfterDeleteFlpHook(context);
+    onFolderAfterUpdateFlpHook(context);
+};
diff --git a/packages/api-aco/src/flp/hooks/onFolderAfterCreateFlp.hook.ts b/packages/api-aco/src/flp/hooks/onFolderAfterCreateFlp.hook.ts
new file mode 100644
index 00000000000..2ab8944ac2a
--- /dev/null
+++ b/packages/api-aco/src/flp/hooks/onFolderAfterCreateFlp.hook.ts
@@ -0,0 +1,28 @@
+import WebinyError from "@webiny/error";
+import { AcoContext, type ICreateFlpTaskInput } from "~/types";
+import { CREATE_FLP_TASK_ID } from "../tasks";
+import { CreateFlp } from "~/flp/useCases";
+
+export const onFolderAfterCreateFlpHook = (context: AcoContext) => {
+    context.aco.folder.onFolderAfterCreate.subscribe(async ({ folder }) => {
+        try {
+            if (!context.tasks) {
+                const useCase = new CreateFlp(context);
+                await useCase.execute(folder);
+                return;
+            }
+
+            await context.tasks.trigger<ICreateFlpTaskInput>({
+                definition: CREATE_FLP_TASK_ID,
+                input: {
+                    folder
+                }
+            });
+        } catch (error) {
+            throw WebinyError.from(error, {
+                message: "Error while executing onFolderAfterCreateFlpHook hook.",
+                code: "ACO_AFTER_FOLDER_CREATE_FLP_HOOK"
+            });
+        }
+    });
+};
diff --git a/packages/api-aco/src/flp/hooks/onFolderAfterDeleteFlp.hook.ts b/packages/api-aco/src/flp/hooks/onFolderAfterDeleteFlp.hook.ts
new file mode 100644
index 00000000000..e1518bcac50
--- /dev/null
+++ b/packages/api-aco/src/flp/hooks/onFolderAfterDeleteFlp.hook.ts
@@ -0,0 +1,28 @@
+import WebinyError from "@webiny/error";
+import { AcoContext, type IDeleteFlpTaskInput } from "~/types";
+import { DELETE_FLP_TASK_ID } from "../tasks";
+import { DeleteFlp } from "~/flp/useCases";
+
+export const onFolderAfterDeleteFlpHook = (context: AcoContext) => {
+    context.aco.folder.onFolderAfterDelete.subscribe(async ({ folder }) => {
+        try {
+            if (!context.tasks) {
+                const useCase = new DeleteFlp(context);
+                await useCase.execute(folder);
+                return;
+            }
+
+            await context.tasks.trigger<IDeleteFlpTaskInput>({
+                definition: DELETE_FLP_TASK_ID,
+                input: {
+                    folder
+                }
+            });
+        } catch (error) {
+            throw WebinyError.from(error, {
+                message: "Error while executing onFolderAfterDeleteFlpHook hook.",
+                code: "ACO_AFTER_FOLDER_DELETE_FLP_HOOK"
+            });
+        }
+    });
+};
diff --git a/packages/api-aco/src/flp/hooks/onFolderAfterUpdateFlp.hook.ts b/packages/api-aco/src/flp/hooks/onFolderAfterUpdateFlp.hook.ts
new file mode 100644
index 00000000000..2c5eb6fc458
--- /dev/null
+++ b/packages/api-aco/src/flp/hooks/onFolderAfterUpdateFlp.hook.ts
@@ -0,0 +1,28 @@
+import WebinyError from "@webiny/error";
+import { AcoContext, type IUpdateFlpTaskInput } from "~/types";
+import { UPDATE_FLP_TASK_ID } from "../tasks";
+import { UpdateFlp } from "~/flp/useCases";
+
+export const onFolderAfterUpdateFlpHook = (context: AcoContext) => {
+    context.aco.folder.onFolderAfterUpdate.subscribe(async ({ folder }) => {
+        try {
+            if (!context.tasks) {
+                const useCase = new UpdateFlp({ context });
+                await useCase.execute(folder);
+                return;
+            }
+
+            await context.tasks.trigger<IUpdateFlpTaskInput>({
+                definition: UPDATE_FLP_TASK_ID,
+                input: {
+                    folder
+                }
+            });
+        } catch (error) {
+            throw WebinyError.from(error, {
+                message: "Error while executing onFolderAfterUpdateFlpHook hook.",
+                code: "ACO_AFTER_FOLDER_UPDATE_FLP_HOOK"
+            });
+        }
+    });
+};
diff --git a/packages/api-aco/src/flp/index.ts b/packages/api-aco/src/flp/index.ts
new file mode 100644
index 00000000000..4d817f2ec55
--- /dev/null
+++ b/packages/api-aco/src/flp/index.ts
@@ -0,0 +1,5 @@
+export * from "./FolderLevelPermissions";
+export * from "./flp.crud";
+export * from "./flp.so";
+export * from "./hooks";
+export * from "./tasks";
diff --git a/packages/api-aco/src/flp/tasks/createFlp.task.ts b/packages/api-aco/src/flp/tasks/createFlp.task.ts
new file mode 100644
index 00000000000..9bd85c6b4e2
--- /dev/null
+++ b/packages/api-aco/src/flp/tasks/createFlp.task.ts
@@ -0,0 +1,43 @@
+import { createPrivateTaskDefinition } from "@webiny/tasks";
+import { CREATE_FLP_TASK_ID } from "~/flp/tasks";
+import { type AcoContext, type ICreateFlpTaskInput, type ICreateFlpTaskParams } from "~/types";
+
+class CreateFlpTask {
+    public init = () => {
+        return createPrivateTaskDefinition<AcoContext, ICreateFlpTaskInput>({
+            id: CREATE_FLP_TASK_ID,
+            title: "ACO - Create FLP record",
+            description:
+                "Synchronizes the FLP catalog by creating the FLP record based on the provided folder.",
+            disableDatabaseLogs: true,
+            run: async (params: ICreateFlpTaskParams) => {
+                const { response, isAborted, input, context, isCloseToTimeout } = params;
+
+                const { CreateFlp } = await import(
+                    /* webpackChunkName: "CreateFlp" */ "../useCases/CreateFlp"
+                );
+
+                const useCase = new CreateFlp(context);
+
+                try {
+                    if (isAborted()) {
+                        return response.aborted();
+                    } else if (isCloseToTimeout()) {
+                        return response.continue(input);
+                    }
+
+                    await useCase.execute(input.folder);
+
+                    return response.done("Task done: FLP record created.");
+                } catch (error) {
+                    return response.error(error);
+                }
+            }
+        });
+    };
+}
+
+export const createFlpTask = () => {
+    const task = new CreateFlpTask();
+    return task.init();
+};
diff --git a/packages/api-aco/src/flp/tasks/deleteFlp.task.ts b/packages/api-aco/src/flp/tasks/deleteFlp.task.ts
new file mode 100644
index 00000000000..b524e01c300
--- /dev/null
+++ b/packages/api-aco/src/flp/tasks/deleteFlp.task.ts
@@ -0,0 +1,43 @@
+import { createPrivateTaskDefinition } from "@webiny/tasks";
+import { DELETE_FLP_TASK_ID } from "~/flp/tasks";
+import { type AcoContext, type IDeleteFlpTaskInput, type IDeleteFlpTaskParams } from "~/types";
+
+class DeleteFlpTask {
+    public init = () => {
+        return createPrivateTaskDefinition<AcoContext, IDeleteFlpTaskInput>({
+            id: DELETE_FLP_TASK_ID,
+            title: "ACO - Delete FLP record",
+            description:
+                "Synchronizes the FLP catalog by deleting the FLP record based on the provided folder.",
+            disableDatabaseLogs: true,
+            run: async (params: IDeleteFlpTaskParams) => {
+                const { response, isAborted, input, context, isCloseToTimeout } = params;
+
+                const { DeleteFlp } = await import(
+                    /* webpackChunkName: "DeleteFlp" */ "../useCases/DeleteFlp"
+                );
+
+                const useCase = new DeleteFlp(context);
+
+                try {
+                    if (isAborted()) {
+                        return response.aborted();
+                    } else if (isCloseToTimeout()) {
+                        return response.continue(input);
+                    }
+
+                    await useCase.execute(input.folder);
+
+                    return response.done("Task done: FLP record deleted.");
+                } catch (error) {
+                    return response.error(error);
+                }
+            }
+        });
+    };
+}
+
+export const deleteFlpTask = () => {
+    const task = new DeleteFlpTask();
+    return task.init();
+};
diff --git a/packages/api-aco/src/flp/tasks/index.ts b/packages/api-aco/src/flp/tasks/index.ts
new file mode 100644
index 00000000000..d660d0a0d3b
--- /dev/null
+++ b/packages/api-aco/src/flp/tasks/index.ts
@@ -0,0 +1,13 @@
+import { createFlpTask } from "./createFlp.task";
+import { updateFlpTask } from "./updateFlp.task";
+import { deleteFlpTask } from "./deleteFlp.task";
+import { syncFlpTask } from "./syncFlp.task";
+
+export const CREATE_FLP_TASK_ID = "acoCreateFlp";
+export const DELETE_FLP_TASK_ID = "acoDeleteFlp";
+export const UPDATE_FLP_TASK_ID = "acoUpdateFlp";
+export const SYNC_FLP_TASK_ID = "acoSyncFlp";
+
+export const flpTasks = () => {
+    return [createFlpTask(), updateFlpTask(), deleteFlpTask(), syncFlpTask()];
+};
diff --git a/packages/api-aco/src/flp/tasks/syncFlp.task.ts b/packages/api-aco/src/flp/tasks/syncFlp.task.ts
new file mode 100644
index 00000000000..b5e646e4c80
--- /dev/null
+++ b/packages/api-aco/src/flp/tasks/syncFlp.task.ts
@@ -0,0 +1,139 @@
+import { createTaskDefinition } from "@webiny/tasks";
+import { SYNC_FLP_TASK_ID, UPDATE_FLP_TASK_ID } from "~/flp/tasks";
+import {
+    type AcoContext,
+    type ISyncFlpTaskInput,
+    type ISyncFlpTaskParams,
+    type IUpdateFlpTaskInput
+} from "~/types";
+import { PB_PAGE_TYPE, FM_FILE_TYPE } from "~/constants";
+
+class SyncFlpTask {
+    public init = () => {
+        return createTaskDefinition<AcoContext, ISyncFlpTaskInput>({
+            id: SYNC_FLP_TASK_ID,
+            title: "ACO - Sync FLP record",
+            description:
+                "Synchronizes the FLP catalog by updating the FLP record and its descendants.",
+            disableDatabaseLogs: true,
+            run: async (params: ISyncFlpTaskParams) => {
+                const { response, isAborted, input, context, store } = params;
+                try {
+                    if (isAborted()) {
+                        return response.aborted();
+                    }
+
+                    /**
+                     * `folderId` provided in the task input. We need to:
+                     *
+                     * - update the FLP records for the found folder and all its descendants.
+                     */
+                    if (input.folderId) {
+                        const folder = await context.aco.folder.get(input.folderId, true);
+                        await context.tasks.trigger<IUpdateFlpTaskInput>({
+                            definition: UPDATE_FLP_TASK_ID,
+                            input: {
+                                folder
+                            }
+                        });
+
+                        return response.done(
+                            `Task completed successfully: all FLP records for folderId "${input.folderId}" and its children have been queued to be synchronized.`
+                        );
+                    }
+
+                    /**
+                     *  Full update required. We need to:
+                     *
+                     *  - list cms models to collect their types, together with the default ones [PB_PAGE_TYPE, FM_FILE_TYPE]
+                     *  - list all root folders
+                     *  - update the FLP records for the found folders and all its descendants.
+                     */
+                    if (input.type && input.type === "*") {
+                        // Some folder types are fixed: pages and files.
+                        const folderTypes = [PB_PAGE_TYPE, FM_FILE_TYPE];
+
+                        // List all non-private models for the current locale.
+                        const models = await context.security.withoutAuthorization(
+                            async () => await context.cms.listModels()
+                        );
+
+                        for (const model of models) {
+                            folderTypes.push(`cms:${model.modelId}`);
+                        }
+
+                        for (const folderType of folderTypes) {
+                            const [folders] = await context.aco.folder.list({
+                                where: {
+                                    type: folderType,
+                                    parentId: null
+                                },
+                                disablePermissions: true
+                            });
+
+                            for (const folder of folders) {
+                                await context.tasks.trigger<IUpdateFlpTaskInput>({
+                                    definition: UPDATE_FLP_TASK_ID,
+                                    input: {
+                                        folder
+                                    }
+                                });
+                            }
+
+                            await store.addInfoLog({
+                                message: `FLP Update task triggered for type ${folderType}`,
+                                data: {
+                                    type: folderType
+                                }
+                            });
+                        }
+
+                        return response.done(
+                            `Task completed successfully: all FLP records have been queued to be synchronized.`
+                        );
+                    }
+
+                    /**
+                     * `type` provided in the task input. We need to:
+                     *
+                     * - list all root folders for the provided type
+                     * - update the FLP records for the found folders and all its descendants.
+                     */
+                    if (input.type) {
+                        const [folders] = await context.aco.folder.list({
+                            where: {
+                                type: input.type,
+                                parentId: null
+                            },
+                            disablePermissions: true
+                        });
+
+                        for (const folder of folders) {
+                            await context.tasks.trigger<IUpdateFlpTaskInput>({
+                                definition: UPDATE_FLP_TASK_ID,
+                                input: {
+                                    folder
+                                }
+                            });
+                        }
+
+                        return response.done(
+                            `Task completed successfully: all FLP records for type "${input.type}" have been queued to be synchronized.`
+                        );
+                    }
+
+                    return response.error(
+                        "Invalid input: please provide either `type` or `folderId`."
+                    );
+                } catch (error) {
+                    return response.error(error);
+                }
+            }
+        });
+    };
+}
+
+export const syncFlpTask = () => {
+    const task = new SyncFlpTask();
+    return task.init();
+};
diff --git a/packages/api-aco/src/flp/tasks/updateFlp.task.ts b/packages/api-aco/src/flp/tasks/updateFlp.task.ts
new file mode 100644
index 00000000000..7236d636b43
--- /dev/null
+++ b/packages/api-aco/src/flp/tasks/updateFlp.task.ts
@@ -0,0 +1,44 @@
+import { createPrivateTaskDefinition } from "@webiny/tasks";
+import { UPDATE_FLP_TASK_ID } from "~/flp/tasks";
+import { type AcoContext, type IUpdateFlpTaskInput, type IUpdateFlpTaskParams } from "~/types";
+
+class UpdateFlpTask {
+    public init = () => {
+        return createPrivateTaskDefinition<AcoContext, IUpdateFlpTaskInput>({
+            id: UPDATE_FLP_TASK_ID,
+            title: "ACO - Update FLP record",
+            description:
+                "Synchronizes the FLP catalog by updating the FLP record and its descendants based on the provided folder.",
+            disableDatabaseLogs: true,
+            run: async (params: IUpdateFlpTaskParams) => {
+                const { response, isAborted, input, context, isCloseToTimeout } = params;
+
+                const { UpdateFlp } = await import(
+                    /* webpackChunkName: "UpdateFlp" */ "../useCases/UpdateFlp"
+                );
+
+                const useCase = new UpdateFlp({
+                    context,
+                    queued: input.queued,
+                    isCloseToTimeout: isCloseToTimeout,
+                    handleTimeout: (queued: string[]) => response.continue({ ...input, queued })
+                });
+
+                try {
+                    if (isAborted()) {
+                        return response.aborted();
+                    }
+                    await useCase.execute(input.folder);
+                    return response.done("Task done: FLP record updated.");
+                } catch (error) {
+                    return response.error(error);
+                }
+            }
+        });
+    };
+}
+
+export const updateFlpTask = () => {
+    const task = new UpdateFlpTask();
+    return task.init();
+};
diff --git a/packages/api-aco/src/flp/useCases/CreateFlp.ts b/packages/api-aco/src/flp/useCases/CreateFlp.ts
new file mode 100644
index 00000000000..822cbbb9a61
--- /dev/null
+++ b/packages/api-aco/src/flp/useCases/CreateFlp.ts
@@ -0,0 +1,53 @@
+import { WebinyError } from "@webiny/error";
+import { Path } from "~/utils/Path";
+import { Permissions, ROOT_FOLDER } from "@webiny/shared-aco";
+import type { FolderLevelPermission as IFolderLevelPermission } from "~/flp/flp.types";
+import type { Folder } from "~/folder/folder.types";
+import type { AcoContext } from "~/types";
+
+export class CreateFlp {
+    private context: AcoContext;
+
+    constructor(context: AcoContext) {
+        this.context = context;
+    }
+
+    async execute(folder: Folder) {
+        try {
+            if (!folder) {
+                throw new WebinyError(
+                    "Missing `folder`, I can't create a new record into the FLP catalog.",
+                    "ERROR_CREATE_FLP_USE_CASE_FOLDER_NOT_PROVIDED"
+                );
+            }
+
+            const { id, type, slug, parentId, permissions } = folder;
+            let parentFlp: IFolderLevelPermission | null = null;
+
+            if (parentId) {
+                parentFlp = await this.context.aco.flp.get(parentId);
+
+                if (!parentFlp) {
+                    throw new WebinyError(
+                        "Parent folder level permission not found. Unable to create a new record in the FLP catalog.",
+                        "ERROR_CREATE_FLP_USE_CASE_PARENT_FLP_NOT_FOUND"
+                    );
+                }
+            }
+
+            await this.context.aco.flp.create({
+                id,
+                type,
+                slug,
+                parentId: parentId ?? ROOT_FOLDER,
+                path: Path.create(slug, parentFlp?.path),
+                permissions: Permissions.create(permissions, parentFlp)
+            });
+        } catch (error) {
+            throw WebinyError.from(error, {
+                message: "Error while creating FLP",
+                code: "ERROR_CREATE_FLP_USE_CASE"
+            });
+        }
+    }
+}
diff --git a/packages/api-aco/src/flp/useCases/DeleteFlp.ts b/packages/api-aco/src/flp/useCases/DeleteFlp.ts
new file mode 100644
index 00000000000..29016f22c87
--- /dev/null
+++ b/packages/api-aco/src/flp/useCases/DeleteFlp.ts
@@ -0,0 +1,28 @@
+import { WebinyError } from "@webiny/error";
+import type { AcoContext, Folder } from "~/types";
+
+export class DeleteFlp {
+    private context: AcoContext;
+
+    constructor(context: AcoContext) {
+        this.context = context;
+    }
+
+    async execute(folder: Folder) {
+        try {
+            if (!folder) {
+                throw new WebinyError(
+                    "Missing `folder` from the task input, I can't delete the record from the FLP catalog.",
+                    "ERROR_DELETE_FLP_USE_CASE_FOLDER_NOT_PROVIDED",
+                    { folder }
+                );
+            }
+            await this.context.aco.flp.delete(folder.id);
+        } catch (error) {
+            throw WebinyError.from(error, {
+                message: "Error while deleting FLP",
+                code: "ERROR_DELETE_FLP_USE_CASE"
+            });
+        }
+    }
+}
diff --git a/packages/api-aco/src/flp/useCases/UpdateFlp.ts b/packages/api-aco/src/flp/useCases/UpdateFlp.ts
new file mode 100644
index 00000000000..d1c099d91d5
--- /dev/null
+++ b/packages/api-aco/src/flp/useCases/UpdateFlp.ts
@@ -0,0 +1,219 @@
+import { WebinyError } from "@webiny/error";
+import { Path } from "~/utils/Path";
+import { Permissions, ROOT_FOLDER } from "@webiny/shared-aco";
+import type { AcoContext, Folder, FolderLevelPermission, FolderPermission } from "~/types";
+import { FOLDER_MODEL_ID } from "~/folder/folder.model";
+
+interface UpdateFlpParams {
+    context: AcoContext;
+    queued?: string[];
+    isCloseToTimeout?: () => boolean;
+    handleTimeout?: (queued: string[]) => void;
+}
+
+interface FlpUpdateData {
+    parentId: string;
+    slug: string;
+    path: string;
+    permissions: FolderPermission[];
+}
+
+export class UpdateFlp {
+    private context: AcoContext;
+    private readonly isCloseToTimeout?: () => boolean;
+    private readonly handleTimeout?: (updated: string[]) => void;
+
+    private readonly queued: Set<string> = new Set();
+    private readonly flpsToUpdate: Map<string, FlpUpdateData> = new Map();
+
+    constructor(params: UpdateFlpParams) {
+        this.context = params.context;
+        this.queued = new Set(params.queued);
+        this.isCloseToTimeout = params.isCloseToTimeout;
+        this.handleTimeout = params.handleTimeout;
+    }
+
+    async execute(folder: Folder) {
+        try {
+            if (!folder) {
+                throw new WebinyError(
+                    "Missing `folder`, I can't update the FLP record.",
+                    "ERROR_UPDATING_FLP_USE_CASE_FOLDER_NOT_PROVIDED",
+                    { folder }
+                );
+            }
+
+            const flp = await this.getFlp(folder);
+            const parentFlp = folder.parentId
+                ? await this.context.aco.flp.get(folder.parentId)
+                : null;
+
+            // Add the root folder to the update collection
+            this.flpsToUpdate.set(folder.id, {
+                slug: folder.slug,
+                parentId: folder.parentId ?? ROOT_FOLDER,
+                path: Path.create(folder.slug, parentFlp?.path),
+                permissions: Permissions.create(folder.permissions, parentFlp)
+            });
+
+            // Let's set the FLP as in queue
+            this.setQueued(flp.id);
+
+            // Get direct children and process each branch completely
+            const directChildren = await this.listDirectChildren(flp);
+
+            for (const child of directChildren) {
+                if (this.isCloseToTimeout?.()) {
+                    await this.executeBatchUpdate();
+                    this.handleTimeout?.(this.getQueuedList());
+                    return;
+                }
+                await this.collectBranchForUpdate(child, flp);
+            }
+
+            // Execute batch update
+            await this.executeBatchUpdate();
+        } catch (error) {
+            // Clear the update collection in case of error
+            this.flpsToUpdate.clear();
+            this.queued.clear();
+            throw WebinyError.from(error, {
+                message: "Error while updating FLP",
+                code: "ERROR_UPDATING_FLP_USE_CASE"
+            });
+        }
+    }
+
+    private async collectBranchForUpdate(
+        flp: FolderLevelPermission,
+        parentFlp: FolderLevelPermission
+    ) {
+        if (this.isQueued(flp.id)) {
+            return;
+        }
+
+        // Get the parent's permissions from the update collection if available
+        const parentFlpData = this.flpsToUpdate.get(parentFlp.id);
+        const currentParentFlp = {
+            ...parentFlp,
+            ...(parentFlpData && { ...parentFlpData })
+        };
+
+        // Add the FLP to the update collection with inherited permissions
+        this.flpsToUpdate.set(flp.id, {
+            slug: flp.slug,
+            parentId: flp.parentId,
+            path: Path.create(flp.slug, currentParentFlp.path),
+            permissions: Permissions.create(flp.permissions, currentParentFlp)
+        });
+
+        // Add the FLP to the queue list so we don't fetch it again
+        this.setQueued(flp.id);
+
+        // Process all children of this folder before moving to siblings
+        const children = await this.listDirectChildren(flp);
+
+        for (const child of children) {
+            if (this.isCloseToTimeout?.()) {
+                await this.executeBatchUpdate();
+                this.handleTimeout?.(this.getQueuedList());
+                return;
+            }
+            // Pass the current FLP as the parent for the child
+            await this.collectBranchForUpdate(child, flp);
+        }
+    }
+
+    private async executeBatchUpdate() {
+        try {
+            const items = Array.from(this.flpsToUpdate.entries()).map(
+                ([id, { slug, parentId, path, permissions }]) => {
+                    return {
+                        id,
+                        data: {
+                            slug,
+                            parentId,
+                            path,
+                            permissions
+                        }
+                    };
+                }
+            );
+
+            await this.context.aco.flp.batchUpdate(items);
+
+            // Update all folders with the new path
+            const folderModel = await this.getFolderModel();
+            for (const item of items) {
+                const { id, data } = item;
+                // Directly update the folder in CMS storage to bypass any folder update event triggers.
+                await this.context.cms.updateEntry(folderModel, id, { path: data.path });
+            }
+        } catch (error) {
+            throw WebinyError.from(error, {
+                message: "Error while executing batch update of FLPs",
+                code: "BATCH_UPDATE_FLP_ERROR",
+                data: {
+                    items: Array.from(this.flpsToUpdate.keys())
+                }
+            });
+        } finally {
+            // Clear the update collection after the batch update
+            this.flpsToUpdate.clear();
+
+            //Let's remove all the updated FLPs ids from the queue cache
+            this.clearQueuedList();
+        }
+    }
+
+    private getQueuedList() {
+        return Array.from(this.queued);
+    }
+
+    private setQueued(id: string) {
+        this.queued.add(id);
+    }
+
+    private isQueued(id: string) {
+        return this.queued.has(id);
+    }
+
+    private clearQueuedList() {
+        return this.queued.clear();
+    }
+
+    private async listDirectChildren(flp: FolderLevelPermission): Promise<FolderLevelPermission[]> {
+        const [folders] = await this.context.aco.folder.listAll({
+            where: {
+                type: flp.type,
+                parentId: flp.id
+            },
+            disablePermissions: true
+        });
+
+        return await Promise.all(folders.map(folder => this.getFlp(folder)));
+    }
+
+    private async getFlp({ id, type, parentId, slug, permissions }: Folder) {
+        const flp = await this.context.aco.flp.get(id);
+
+        if (!flp) {
+            const parentFlp = parentId ? await this.context.aco.flp.get(parentId) : null;
+
+            return await this.context.aco.flp.create({
+                id,
+                type,
+                slug,
+                parentId: parentId ?? ROOT_FOLDER,
+                path: Path.create(slug, parentFlp?.path),
+                permissions: Permissions.create(permissions, parentFlp)
+            });
+        }
+
+        return flp;
+    }
+
+    private async getFolderModel() {
+        return await this.context.cms.getModel(FOLDER_MODEL_ID);
+    }
+}
diff --git a/packages/api-aco/src/flp/useCases/index.ts b/packages/api-aco/src/flp/useCases/index.ts
new file mode 100644
index 00000000000..d41e96fb03a
--- /dev/null
+++ b/packages/api-aco/src/flp/useCases/index.ts
@@ -0,0 +1,3 @@
+export * from "./CreateFlp";
+export * from "./DeleteFlp";
+export * from "./UpdateFlp";
diff --git a/packages/api-aco/src/folder/createFolderTypeDefs.ts b/packages/api-aco/src/folder/createFolderTypeDefs.ts
index d6586a5bc34..9d4600a8703 100644
--- a/packages/api-aco/src/folder/createFolderTypeDefs.ts
+++ b/packages/api-aco/src/folder/createFolderTypeDefs.ts
@@ -84,6 +84,9 @@ export const createFolderTypeDefs = (params: CreateFolderTypeDefsParams): string
         ${inputCreateFields.map(f => f.typeDefs).join("\n")}
         
         input FolderCreateInput {
+             # Pass an ID if you want to create a folder with a specific ID.
+             id: ID  
+             
              ${inputCreateFields.map(f => f.fields).join("\n")}
         }
                 
@@ -93,7 +96,16 @@ export const createFolderTypeDefs = (params: CreateFolderTypeDefsParams): string
         
         input FoldersListWhereInput {
             type: String!
-            parentId: String
+            parentId: ID
+            parentId_in: [ID]
+            path: String
+            path_not: String
+            path_contains: String
+            path_not_contains: String
+            path_in: [String]
+            path_not_in: [String]
+            path_startsWith: String
+            path_not_startsWith: String
             createdBy: ID
         }
         
@@ -112,6 +124,16 @@ export const createFolderTypeDefs = (params: CreateFolderTypeDefsParams): string
             data: CompressedResponse
             error: AcoError
         }
+        
+        type FoldersHierarchyData {
+            parents: [Folder]
+            siblings: [Folder]
+        }
+
+        type FoldersHierarchyResponse {
+            data: FoldersHierarchyData
+            error: AcoError
+        }
 
         type FolderLevelPermissionsTarget {
             id: ID!
@@ -151,7 +173,7 @@ export const createFolderTypeDefs = (params: CreateFolderTypeDefsParams): string
                 after: String
                 sort: AcoSort
             ): FoldersListCompressedResponse
-
+            getFolderHierarchy(type: String!, id: ID!): FoldersHierarchyResponse
             listFolderLevelPermissionsTargets: FolderLevelPermissionsTargetsListResponse
         }
 
diff --git a/packages/api-aco/src/folder/folder.crud.ts b/packages/api-aco/src/folder/folder.crud.ts
index b18c20cf21d..bec48401d00 100644
--- a/packages/api-aco/src/folder/folder.crud.ts
+++ b/packages/api-aco/src/folder/folder.crud.ts
@@ -1,8 +1,7 @@
 import { createTopic } from "@webiny/pubsub";
-import { validation } from "@webiny/validation";
-import { CreateAcoParams, Folder } from "~/types";
 import {
     AcoFolderCrud,
+    type ListFoldersParams,
     OnFolderAfterCreateTopicParams,
     OnFolderAfterDeleteTopicParams,
     OnFolderAfterUpdateTopicParams,
@@ -10,25 +9,28 @@ import {
     OnFolderBeforeDeleteTopicParams,
     OnFolderBeforeUpdateTopicParams
 } from "./folder.types";
-
-import { getFolderAndItsAncestors } from "~/utils/getFolderAndItsAncestors";
-import NotAuthorizedError from "@webiny/api-security/NotAuthorizedError";
-import { AdminUser } from "@webiny/api-admin-users/types";
-import { Team } from "@webiny/api-security/types";
-import WError from "@webiny/error";
+import {
+    getCreateFolderUseCases,
+    getDeleteFolderUseCases,
+    getGetAncestors,
+    getGetFolderUseCase,
+    getListFolderLevelPermissionsTargets,
+    getListFoldersUseCases,
+    getUpdateFolderUseCase,
+    getGetFolderHierarchyUseCases
+} from "~/folder/useCases";
+import { type AcoContext, CreateAcoParams, Folder } from "~/types";
 
 const FIXED_FOLDER_LISTING_LIMIT = 10_000;
 
 interface CreateFolderCrudMethodsParams extends CreateAcoParams {
-    listAdminUsers: () => Promise<AdminUser[]>;
-    listTeams: () => Promise<Team[]>;
+    context: AcoContext;
 }
 
 export const createFolderCrudMethods = ({
     storageOperations,
     folderLevelPermissions,
-    listAdminUsers,
-    listTeams
+    context
 }: CreateFolderCrudMethodsParams): AcoFolderCrud => {
     // create
     const onFolderBeforeCreate = createTopic<OnFolderBeforeCreateTopicParams>(
@@ -49,6 +51,59 @@ export const createFolderCrudMethods = ({
     const onFolderAfterDelete =
         createTopic<OnFolderAfterDeleteTopicParams>("aco.onFolderAfterDelete");
 
+    const { getFolderUseCase, getFolderUseCaseWithoutPermissions } = getGetFolderUseCase({
+        getOperation: storageOperations.folder.getFolder,
+        folderLevelPermissions
+    });
+
+    const { listFoldersUseCase, listFoldersUseCaseWithoutPermissions } = getListFoldersUseCases({
+        listOperation: storageOperations.folder.listFolders,
+        folderLevelPermissions
+    });
+
+    const { getFolderHierarchyUseCase } = getGetFolderHierarchyUseCases({
+        listOperation: storageOperations.folder.listFolders,
+        getOperation: storageOperations.folder.getFolder,
+        folderLevelPermissions
+    });
+
+    const { createFolderUseCase } = getCreateFolderUseCases({
+        createOperation: storageOperations.folder.createFolder,
+        folderLevelPermissions,
+        topics: {
+            onFolderAfterCreate,
+            onFolderBeforeCreate
+        }
+    });
+
+    const { updateFolderUseCase } = getUpdateFolderUseCase({
+        updateOperation: storageOperations.folder.updateFolder,
+        getOperation: storageOperations.folder.getFolder,
+        folderLevelPermissions,
+        topics: {
+            onFolderAfterUpdate,
+            onFolderBeforeUpdate
+        }
+    });
+
+    const { deleteFolderUseCase } = getDeleteFolderUseCases({
+        deleteOperation: storageOperations.folder.deleteFolder,
+        getOperation: storageOperations.folder.getFolder,
+        folderLevelPermissions,
+        topics: {
+            onFolderBeforeDelete,
+            onFolderAfterDelete
+        }
+    });
+
+    const { getAncestorsUseCase } = getGetAncestors({
+        listFoldersUseCase: listFoldersUseCase
+    });
+
+    const { listFolderLevelPermissionsTargetsUseCase } = getListFolderLevelPermissionsTargets({
+        context
+    });
+
     return {
         /**
          * Lifecycle events
@@ -60,196 +115,47 @@ export const createFolderCrudMethods = ({
         onFolderBeforeDelete,
         onFolderAfterDelete,
 
-        async get(id) {
-            const folder = await storageOperations.getFolder({ id });
-
-            await folderLevelPermissions.ensureCanAccessFolder({
-                folder,
-                rwd: "r"
-            });
-
-            await folderLevelPermissions.assignFolderPermissions(folder);
-            return folder;
-        },
-        async list(params) {
-            // No matter what was the limit set in the params, initially, we always retrieve
-            // all folders. The limit is then applied with the filtered folders list below.
-            const filteredFolders = await folderLevelPermissions
-                .listAllFoldersWithPermissions(params.where.type)
-                .then(filteredFolders => {
-                    // If `parentId` was included in the `where` clause, we need to filter the folders.
-                    // TODO: we might want to incorporate this into the `listAllFoldersWithPermissions` method.
-                    if (params.where.parentId) {
-                        // Filter by parent ID.
-                        return filteredFolders.filter(
-                            folder => folder.parentId === params.where.parentId
-                        );
-                    }
-                    return filteredFolders;
-                });
-
-            const totalCount = filteredFolders.length;
-            let hasMoreItems = false;
-            let cursor: string | null = null;
-
-            // Apply cursor/limit params.
-            if (params.after) {
-                const afterListItemIndex = filteredFolders.findIndex(
-                    folder => folder.id === params.after
-                );
-                if (afterListItemIndex >= 0) {
-                    // Remove all items below the "after" item.
-                    filteredFolders.splice(0, afterListItemIndex + 1);
-                }
+        async get(id, disablePermissions) {
+            // If permissions are disabled, execute the use case without applying folder-level permissions logic, returning the raw folder data from the database.
+            if (disablePermissions) {
+                return await getFolderUseCaseWithoutPermissions.execute({ id });
             }
+            return await getFolderUseCase.execute({ id });
+        },
 
-            hasMoreItems = !!params.limit && filteredFolders.length > params.limit;
-
-            if (hasMoreItems) {
-                cursor = filteredFolders[params.limit! - 1]?.id || null;
-                filteredFolders.splice(params.limit!);
+        async list({ disablePermissions, ...params }: ListFoldersParams) {
+            // If permissions are disabled, execute the use case without applying folder-level permissions logic, returning the raw folder data from the database.
+            if (disablePermissions) {
+                return await listFoldersUseCaseWithoutPermissions.execute(params);
             }
-
-            return [filteredFolders, { totalCount, hasMoreItems, cursor }];
+            return await listFoldersUseCase.execute(params);
         },
 
         async listAll(params) {
-            return this.list({ ...params, limit: FIXED_FOLDER_LISTING_LIMIT });
+            return await this.list({
+                ...params,
+                limit: FIXED_FOLDER_LISTING_LIMIT
+            });
         },
 
-        async create(data) {
-            let canCreateFolder = false;
-            if (data.parentId) {
-                const parentFolder = await storageOperations.getFolder({ id: data.parentId });
-                canCreateFolder = await folderLevelPermissions.canAccessFolder({
-                    folder: parentFolder,
-                    rwd: "w"
-                });
-            } else {
-                canCreateFolder = await folderLevelPermissions.canCreateFolderInRoot();
-            }
-
-            if (!canCreateFolder) {
-                throw new NotAuthorizedError();
-            }
-
-            await onFolderBeforeCreate.publish({ input: data });
-            const folder = await storageOperations.createFolder({ data });
-
-            // We need to add the newly created folder to FLP's internal cache. Note that we're also
-            // invalidating the permissions list cache for the folder type. We cannot rely on the cache
-            // to check if the user has access, because the cache is no longer up to date.
-            folderLevelPermissions.invalidateFoldersPermissionsListCache(folder.type);
-            folderLevelPermissions.addFolderToCache(folder.type, folder);
-
-            // With caches updated and invalidated, we can now assign correct permissions to the folder.
-            await folderLevelPermissions.assignFolderPermissions(folder);
-
-            await onFolderAfterCreate.publish({ folder });
-
-            return folder;
+        async getFolderHierarchy(params) {
+            return await getFolderHierarchyUseCase.execute(params);
         },
 
-        async update(id, data) {
-            const original = await storageOperations.getFolder({ id });
-
-            const canUpdateFolder = await folderLevelPermissions.canAccessFolder({
-                folder: original,
-                rwd: "w"
-            });
-
-            if (!canUpdateFolder) {
-                throw new NotAuthorizedError();
-            }
-
-            // Validate data.
-            if (Array.isArray(data.permissions)) {
-                data.permissions.forEach(permission => {
-                    const targetIsValid =
-                        permission.target.startsWith("admin:") ||
-                        permission.target.startsWith("team:");
-                    if (!targetIsValid) {
-                        throw new Error(`Permission target "${permission.target}" is not valid.`);
-                    }
-
-                    if (permission.inheritedFrom) {
-                        throw new Error(`Permission "inheritedFrom" cannot be set manually.`);
-                    }
-                });
-            }
-
-            // Parent change is not allowed if the user doesn't have access to the new parent.
-            if (data.parentId && data.parentId !== original.parentId) {
-                try {
-                    // Getting the parent folder will throw an error if the user doesn't have access.
-                    await this.get(data.parentId);
-                } catch (e) {
-                    if (e instanceof NotAuthorizedError) {
-                        throw new WError(
-                            `Cannot move folder to a new parent because you don't have access to the new parent.`,
-                            "CANNOT_MOVE_FOLDER_TO_NEW_PARENT"
-                        );
-                    }
-
-                    // If we didn't receive the expected error, we still want to throw it.
-                    throw e;
-                }
-            }
-
-            // Finally, we check if the user would lose access to the folder by making the update.
-            // In order to do this, we need to make a couple of steps. First, we're updating FLP's
-            // internal cache with new folder data. Then, we're invalidating the permissions list
-            // cache for the folder type. We cannot rely on the cache to check if the user still
-            // has access, because the cache might no longer be up-to-date.
-            folderLevelPermissions.updateFoldersCache(original.type, cachedFolder => {
-                if (cachedFolder.id !== id) {
-                    return cachedFolder;
-                }
-                return { ...cachedFolder, ...data };
-            });
-            folderLevelPermissions.invalidateFoldersPermissionsListCache(original.type);
-
-            // With caches updated and invalidated, we can now check if the user still
-            // has access to the folder.
-            const stillHasAccess = await folderLevelPermissions.canAccessFolder({
-                folder: { id, type: original.type },
-                rwd: "w"
-            });
-
-            if (!stillHasAccess) {
-                throw new WError(
-                    `Cannot continue because you would loose access to this folder.`,
-                    "CANNOT_LOOSE_FOLDER_ACCESS"
-                );
-            }
-
-            await onFolderBeforeUpdate.publish({ original, input: { id, data } });
-
-            const folder = await storageOperations.updateFolder({ id, data });
-            await folderLevelPermissions.assignFolderPermissions(folder);
-
-            await onFolderAfterUpdate.publish({ original, input: { id, data }, folder });
-
-            return folder;
+        async create(data) {
+            return await createFolderUseCase.execute(data);
         },
 
-        async delete(id: string) {
-            const folder = await storageOperations.getFolder({ id });
-
-            await folderLevelPermissions.ensureCanAccessFolder({
-                folder,
-                rwd: "d"
-            });
+        async delete(id) {
+            return await deleteFolderUseCase.execute({ id });
+        },
 
-            await onFolderBeforeDelete.publish({ folder });
-            await storageOperations.deleteFolder({ id });
-            await onFolderAfterDelete.publish({ folder });
-            return true;
+        async update(id, data) {
+            return await updateFolderUseCase.execute(id, data);
         },
 
         async getAncestors(folder: Folder) {
-            const [folders] = await this.listAll({ where: { type: folder.type } });
-            return getFolderAndItsAncestors({ folder, folders });
+            return getAncestorsUseCase.execute({ folder });
         },
 
         /**
@@ -261,52 +167,7 @@ export const createFolderCrudMethods = ({
         },
 
         async listFolderLevelPermissionsTargets() {
-            const adminUsers = await listAdminUsers();
-            const teams = await listTeams();
-
-            const teamTargets = teams.map(team => ({
-                id: team.id,
-                type: "team",
-                target: `team:${team.id}`,
-                name: team.name || "",
-                meta: {}
-            }));
-
-            const adminUserTargets = adminUsers.map(user => {
-                let name = user.displayName;
-                if (!name) {
-                    // For backwards compatibility, we also want to try concatenating first and last name.
-                    name = [user.firstName, user.lastName].filter(Boolean).join(" ");
-                }
-
-                // We're doing the validation because, with non-Cognito IdPs (Okta, Auth0), the email
-                // field might actually contain a non-email value: `id:${IdP_Identity_ID}`. In that case,
-                // let's not assign anything to the `email` field.
-                let email: string | null = user.email;
-                try {
-                    validation.validateSync(email, "email");
-                } catch {
-                    email = null;
-                }
-
-                const image = user.avatar?.src || null;
-
-                return {
-                    id: user.id,
-                    type: "admin",
-                    target: `admin:${user.id}`,
-                    name,
-                    meta: {
-                        email,
-                        image
-                    }
-                };
-            });
-
-            const results = [...teamTargets, ...adminUserTargets];
-            const meta = { totalCount: results.length };
-
-            return [results, meta];
+            return await listFolderLevelPermissionsTargetsUseCase.execute();
         }
     };
 };
diff --git a/packages/api-aco/src/folder/folder.gql.ts b/packages/api-aco/src/folder/folder.gql.ts
index ee33f5217e6..b3b23bc25c4 100644
--- a/packages/api-aco/src/folder/folder.gql.ts
+++ b/packages/api-aco/src/folder/folder.gql.ts
@@ -7,6 +7,7 @@ import { resolve } from "~/utils/resolve";
 import { compress } from "~/utils/compress";
 
 import { AcoContext, Folder } from "~/types";
+import type { FolderLevelPermission } from "~/flp/flp.types";
 import { FOLDER_MODEL_ID } from "~/folder/folder.model";
 
 export const createFoldersSchema = (params: CreateFolderTypeDefsParams) => {
@@ -53,27 +54,60 @@ export const createFoldersSchema = (params: CreateFolderTypeDefsParams) => {
                 },
                 listFoldersCompressed: async (_, args: any, context) => {
                     return resolve(async () => {
+                        ensureAuthentication(context);
+
                         const [entries] = await context.aco.folder.list(args);
+                        const foldersPromises = entries.map(folder => {
+                            const { folderLevelPermissions: flp } = context.aco;
 
-                        const folders = entries.map(folder => ({
-                            ...folder,
-                            hasNonInheritedPermissions:
-                                context.aco.folderLevelPermissions.permissionsIncludeNonInheritedPermissions(
-                                    folder.permissions
-                                ),
-                            canManageStructure:
-                                context.aco.folderLevelPermissions.canManageFolderStructure(folder),
-                            canManagePermissions:
-                                context.aco.folderLevelPermissions.canManageFolderPermissions(
-                                    folder
-                                ),
-                            canManageContent:
-                                context.aco.folderLevelPermissions.canManageFolderContent(folder)
-                        }));
+                            const canManageStructure = flp.canManageFolderStructure(
+                                folder as unknown as FolderLevelPermission
+                            );
+                            const canManagePermissions = flp.canManageFolderPermissions(
+                                folder as unknown as FolderLevelPermission
+                            );
+                            const canManageContent = flp.canManageFolderContent(
+                                folder as unknown as FolderLevelPermission
+                            );
+                            const hasNonInheritedPermissions =
+                                flp.permissionsIncludeNonInheritedPermissions(folder.permissions);
 
-                        return compress(folders);
+                            return Promise.all([
+                                canManageStructure,
+                                canManagePermissions,
+                                canManageContent,
+                                hasNonInheritedPermissions
+                            ]).then(
+                                ([
+                                    canManageStructure,
+                                    canManagePermissions,
+                                    canManageContent,
+                                    hasNonInheritedPermissions
+                                ]) => {
+                                    return {
+                                        ...folder,
+                                        canManageStructure,
+                                        canManagePermissions,
+                                        canManageContent,
+                                        hasNonInheritedPermissions
+                                    };
+                                }
+                            );
+                        });
+
+                        return Promise.all(foldersPromises).then(compress);
                     });
                 },
+                getFolderHierarchy: async (_, args: any, context) => {
+                    try {
+                        return resolve(() => {
+                            ensureAuthentication(context);
+                            return context.aco.folder.getFolderHierarchy(args);
+                        });
+                    } catch (e) {
+                        return new ErrorResponse(e);
+                    }
+                },
                 listFolderLevelPermissionsTargets: async (_, args: any, context) => {
                     try {
                         ensureAuthentication(context);
diff --git a/packages/api-aco/src/folder/folder.model.ts b/packages/api-aco/src/folder/folder.model.ts
index 073b7837eb6..0b828712f8b 100644
--- a/packages/api-aco/src/folder/folder.model.ts
+++ b/packages/api-aco/src/folder/folder.model.ts
@@ -52,6 +52,12 @@ const parentIdField = () =>
         type: "text"
     });
 
+const pathField = () =>
+    createModelField({
+        label: "Path",
+        type: "text"
+    });
+
 const permissionsField = () =>
     createModelField({
         label: "Permissions",
@@ -104,6 +110,10 @@ const permissionsField = () =>
                             {
                                 label: "Public",
                                 value: "public"
+                            },
+                            {
+                                label: "No Access",
+                                value: "no-access"
                             }
                         ]
                     }
@@ -113,6 +123,17 @@ const permissionsField = () =>
         }
     });
 
+const extensionsField = () =>
+    createModelField({
+        label: "Extensions",
+        fieldId: "extensions",
+        type: "object",
+        settings: {
+            layout: [],
+            fields: []
+        }
+    });
+
 export const FOLDER_MODEL_ID = "acoFolder";
 
 export const createFolderModel = () => {
@@ -127,6 +148,14 @@ export const createFolderModel = () => {
             // flp: true
         },
         titleFieldId: "title",
-        fields: [titleField(), slugField(), typeField(), parentIdField(), permissionsField()]
+        fields: [
+            titleField(),
+            slugField(),
+            typeField(),
+            parentIdField(),
+            pathField(),
+            permissionsField(),
+            extensionsField()
+        ]
     });
 };
diff --git a/packages/api-aco/src/folder/folder.so.ts b/packages/api-aco/src/folder/folder.so.ts
index 266c49298fd..c02db7e6ef9 100644
--- a/packages/api-aco/src/folder/folder.so.ts
+++ b/packages/api-aco/src/folder/folder.so.ts
@@ -5,8 +5,10 @@ import { CreateAcoStorageOperationsParams } from "~/createAcoStorageOperations";
 import { createListSort } from "~/utils/createListSort";
 import { createOperationsWrapper } from "~/utils/createOperationsWrapper";
 import { pickEntryFieldValues } from "~/utils/pickEntryFieldValues";
+import { Path } from "~/utils/Path";
 import { AcoFolderStorageOperations, Folder } from "./folder.types";
 import { ENTRY_META_FIELDS } from "@webiny/api-headless-cms/constants";
+import { ListSort } from "~/types";
 
 interface AcoCheckExistingFolderParams {
     params: {
@@ -86,15 +88,41 @@ export const createFolderOperations = (
         });
     };
 
+    const createFolderPath = async ({
+        slug,
+        parentId
+    }: Pick<Folder, "slug" | "parentId">): Promise<string> => {
+        let parentFolder: Folder | null = null;
+
+        if (parentId) {
+            parentFolder = await getFolder({ id: parentId });
+
+            if (!parentFolder) {
+                throw new WebinyError(
+                    "Parent folder not found. Unable to create the folder `path`",
+                    "ERROR_CREATE_FOLDER_PATH_PARENT_FOLDER_NOT_FOUND"
+                );
+            }
+        }
+
+        return Path.create(slug, parentFolder?.path);
+    };
+
     return {
         getFolder,
         listFolders(params) {
             return withModel(async model => {
                 const { sort, where } = params;
 
+                const listSort =
+                    sort ||
+                    ({
+                        title: "ASC"
+                    } as unknown as ListSort);
+
                 const [entries, meta] = await cms.listLatestEntries(model, {
                     ...params,
-                    sort: createListSort(sort),
+                    sort: createListSort(listSort),
                     where: {
                         ...(where || {})
                     }
@@ -115,7 +143,8 @@ export const createFolderOperations = (
 
                 const entry = await cms.createEntry(model, {
                     ...data,
-                    parentId: data.parentId || null
+                    parentId: data.parentId || null,
+                    path: await createFolderPath(data)
                 });
 
                 return pickEntryFieldValues(entry);
@@ -142,7 +171,11 @@ export const createFolderOperations = (
                      *  we don't want to override them with the ones coming from the `original` entry.
                      */
                     ...omit(original, ENTRY_META_FIELDS),
-                    ...data
+                    ...data,
+                    path: await createFolderPath({
+                        slug: slug || original.slug,
+                        parentId: parentId !== undefined ? parentId : original.parentId // parentId can be `null`
+                    })
                 };
 
                 const entry = await cms.updateEntry(model, id, input);
diff --git a/packages/api-aco/src/folder/folder.types.ts b/packages/api-aco/src/folder/folder.types.ts
index bb2d4744d94..fa871c35c78 100644
--- a/packages/api-aco/src/folder/folder.types.ts
+++ b/packages/api-aco/src/folder/folder.types.ts
@@ -1,6 +1,5 @@
-import { ListMeta, ListSort, User } from "~/types";
+import { type FolderPermission, ListMeta, ListSort, User } from "~/types";
 import { Topic } from "@webiny/pubsub/types";
-import { FolderPermission } from "~/utils/FolderLevelPermissions";
 
 export interface Folder {
     id: string;
@@ -16,12 +15,23 @@ export interface Folder {
     permissions?: FolderPermission[];
     type: string;
     parentId?: string | null;
+    path: string;
     extensions?: Record<string, any>;
 }
 
 export interface ListFoldersWhere {
     type: string;
+    id_not_in?: string[];
     parentId?: string | null;
+    parentId_in?: string[];
+    path?: string;
+    path_not?: string;
+    path_contains?: string;
+    path_not_contains?: string;
+    path_in?: string[];
+    path_not_in?: string[];
+    path_startsWith?: string;
+    path_not_startsWith?: string;
 }
 
 export interface ListFoldersParams {
@@ -29,10 +39,21 @@ export interface ListFoldersParams {
     sort?: ListSort;
     limit?: number;
     after?: string | null;
+    disablePermissions?: boolean;
 }
 
 export type ListAllFoldersParams = Omit<ListFoldersParams, "limit" | "after">;
 
+export interface GetFolderHierarchyParams {
+    type: string;
+    id: string;
+}
+
+export interface GetFolderHierarchyResponse {
+    parents: Folder[];
+    siblings: Folder[];
+}
+
 export type CreateFolderParams = Pick<Folder, "title" | "slug" | "type" | "parentId">;
 
 export interface UpdateFolderParams {
@@ -65,6 +86,10 @@ export interface StorageOperationsGetFolderParams {
     parentId?: string | null;
 }
 
+export interface GetFolderParams {
+    id: string;
+}
+
 export type StorageOperationsListFoldersParams = ListFoldersParams;
 
 export interface StorageOperationsCreateFolderParams {
@@ -106,7 +131,7 @@ export interface OnFolderAfterDeleteTopicParams {
 }
 
 export interface AcoFolderCrud {
-    get(id: string): Promise<Folder>;
+    get(id: string, disablePermissions?: boolean): Promise<Folder>;
 
     list(params: ListFoldersParams): Promise<[Folder[], ListMeta]>;
 
@@ -124,6 +149,8 @@ export interface AcoFolderCrud {
 
     getAncestors(folder: Folder): Promise<Folder[]>;
 
+    getFolderHierarchy(params: GetFolderHierarchyParams): Promise<GetFolderHierarchyResponse>;
+
     /**
      * @deprecated use `getAncestors` instead
      */
diff --git a/packages/api-aco/src/folder/useCases/CreateFolder/CreateFolder.ts b/packages/api-aco/src/folder/useCases/CreateFolder/CreateFolder.ts
new file mode 100644
index 00000000000..0851750502a
--- /dev/null
+++ b/packages/api-aco/src/folder/useCases/CreateFolder/CreateFolder.ts
@@ -0,0 +1,14 @@
+import type { ICreateFolder } from "./ICreateFolder";
+import type { AcoFolderStorageOperations, CreateFolderParams } from "~/folder/folder.types";
+
+export class CreateFolder implements ICreateFolder {
+    private readonly createOperation: AcoFolderStorageOperations["createFolder"];
+
+    constructor(createOperation: AcoFolderStorageOperations["createFolder"]) {
+        this.createOperation = createOperation;
+    }
+
+    async execute(params: CreateFolderParams) {
+        return await this.createOperation({ data: params });
+    }
+}
diff --git a/packages/api-aco/src/folder/useCases/CreateFolder/CreateFolderWithEvents.ts b/packages/api-aco/src/folder/useCases/CreateFolder/CreateFolderWithEvents.ts
new file mode 100644
index 00000000000..9fc4b06e6a1
--- /dev/null
+++ b/packages/api-aco/src/folder/useCases/CreateFolder/CreateFolderWithEvents.ts
@@ -0,0 +1,20 @@
+import type { ICreateFolder } from "./ICreateFolder";
+import type { CreateFolderUseCasesTopics } from "./index";
+import type { CreateFolderParams } from "~/folder/folder.types";
+
+export class CreateFolderWithEvents implements ICreateFolder {
+    private topics: CreateFolderUseCasesTopics;
+    private readonly decoretee: ICreateFolder;
+
+    constructor(topics: CreateFolderUseCasesTopics, decoretee: ICreateFolder) {
+        this.topics = topics;
+        this.decoretee = decoretee;
+    }
+
+    async execute(params: CreateFolderParams) {
+        await this.topics.onFolderBeforeCreate.publish({ input: params });
+        const folder = await this.decoretee.execute(params);
+        await this.topics.onFolderAfterCreate.publish({ folder });
+        return folder;
+    }
+}
diff --git a/packages/api-aco/src/folder/useCases/CreateFolder/CreateFolderWithFolderLevelPermissions.ts b/packages/api-aco/src/folder/useCases/CreateFolder/CreateFolderWithFolderLevelPermissions.ts
new file mode 100644
index 00000000000..6c143b00de0
--- /dev/null
+++ b/packages/api-aco/src/folder/useCases/CreateFolder/CreateFolderWithFolderLevelPermissions.ts
@@ -0,0 +1,45 @@
+import type { ICreateFolder } from "./ICreateFolder";
+import type { CreateFolderParams } from "~/folder/folder.types";
+import { NotAuthorizedError } from "@webiny/api-security";
+import { FolderLevelPermissions } from "~/flp";
+
+export class CreateFolderWithFolderLevelPermissions implements ICreateFolder {
+    private folderLevelPermissions: FolderLevelPermissions;
+    private readonly decoretee: ICreateFolder;
+
+    constructor(folderLevelPermissions: FolderLevelPermissions, decoretee: ICreateFolder) {
+        this.folderLevelPermissions = folderLevelPermissions;
+        this.decoretee = decoretee;
+    }
+
+    async execute(params: CreateFolderParams) {
+        let canCreateFolder: boolean;
+        if (params.parentId) {
+            const permissions = await this.folderLevelPermissions.getFolderLevelPermissions(
+                params.parentId
+            );
+            canCreateFolder = await this.folderLevelPermissions.canAccessFolder({
+                permissions,
+                rwd: "w"
+            });
+        } else {
+            canCreateFolder = this.folderLevelPermissions.canCreateFolderInRoot();
+        }
+
+        if (!canCreateFolder) {
+            throw new NotAuthorizedError();
+        }
+
+        const folder = await this.decoretee.execute(params);
+
+        // Let's set default permissions based on the current user.
+        const permissionsWithDefaults = await this.folderLevelPermissions.getDefaultPermissions(
+            folder?.permissions ?? []
+        );
+
+        return {
+            ...folder,
+            permissions: permissionsWithDefaults
+        };
+    }
+}
diff --git a/packages/api-aco/src/folder/useCases/CreateFolder/ICreateFolder.ts b/packages/api-aco/src/folder/useCases/CreateFolder/ICreateFolder.ts
new file mode 100644
index 00000000000..e99ddec6b29
--- /dev/null
+++ b/packages/api-aco/src/folder/useCases/CreateFolder/ICreateFolder.ts
@@ -0,0 +1,5 @@
+import type { CreateFolderParams, Folder } from "~/folder/folder.types";
+
+export interface ICreateFolder {
+    execute: (params: CreateFolderParams) => Promise<Folder>;
+}
diff --git a/packages/api-aco/src/folder/useCases/CreateFolder/index.ts b/packages/api-aco/src/folder/useCases/CreateFolder/index.ts
new file mode 100644
index 00000000000..83befceade5
--- /dev/null
+++ b/packages/api-aco/src/folder/useCases/CreateFolder/index.ts
@@ -0,0 +1,34 @@
+import { Topic } from "@webiny/pubsub/types";
+import {
+    type AcoFolderStorageOperations,
+    type OnFolderAfterCreateTopicParams,
+    type OnFolderBeforeCreateTopicParams
+} from "~/folder/folder.types";
+import { CreateFolder } from "./CreateFolder";
+import { CreateFolderWithEvents } from "./CreateFolderWithEvents";
+import { CreateFolderWithFolderLevelPermissions } from "./CreateFolderWithFolderLevelPermissions";
+import { FolderLevelPermissions } from "~/flp";
+
+export interface CreateFolderUseCasesTopics {
+    onFolderBeforeCreate: Topic<OnFolderBeforeCreateTopicParams>;
+    onFolderAfterCreate: Topic<OnFolderAfterCreateTopicParams>;
+}
+
+interface CreateFolderUseCasesParams {
+    createOperation: AcoFolderStorageOperations["createFolder"];
+    folderLevelPermissions: FolderLevelPermissions;
+    topics: CreateFolderUseCasesTopics;
+}
+
+export const getCreateFolderUseCases = (params: CreateFolderUseCasesParams) => {
+    const createFolder = new CreateFolder(params.createOperation);
+    const createFolderUseCaseWithEvents = new CreateFolderWithEvents(params.topics, createFolder);
+    const createFolderUseCase = new CreateFolderWithFolderLevelPermissions(
+        params.folderLevelPermissions,
+        createFolderUseCaseWithEvents
+    );
+
+    return {
+        createFolderUseCase
+    };
+};
diff --git a/packages/api-aco/src/folder/useCases/DeleteFolder/DeleteFolder.ts b/packages/api-aco/src/folder/useCases/DeleteFolder/DeleteFolder.ts
new file mode 100644
index 00000000000..2535ae89665
--- /dev/null
+++ b/packages/api-aco/src/folder/useCases/DeleteFolder/DeleteFolder.ts
@@ -0,0 +1,15 @@
+import type { IDeleteFolder } from "./IDeleteFolder";
+import type { AcoFolderStorageOperations, DeleteFolderParams } from "~/folder/folder.types";
+
+export class DeleteFolder implements IDeleteFolder {
+    private readonly deleteOperation: AcoFolderStorageOperations["deleteFolder"];
+
+    constructor(deleteOperation: AcoFolderStorageOperations["deleteFolder"]) {
+        this.deleteOperation = deleteOperation;
+    }
+
+    async execute(params: DeleteFolderParams): Promise<boolean> {
+        await this.deleteOperation(params);
+        return true;
+    }
+}
diff --git a/packages/api-aco/src/folder/useCases/DeleteFolder/DeleteFolderWithEvents.ts b/packages/api-aco/src/folder/useCases/DeleteFolder/DeleteFolderWithEvents.ts
new file mode 100644
index 00000000000..e74af5d8cb2
--- /dev/null
+++ b/packages/api-aco/src/folder/useCases/DeleteFolder/DeleteFolderWithEvents.ts
@@ -0,0 +1,27 @@
+import type { DeleteFolderUseCasesTopics } from "./index";
+import type { AcoFolderStorageOperations, DeleteFolderParams } from "~/folder/folder.types";
+import type { IDeleteFolder } from "~/folder/useCases/DeleteFolder/IDeleteFolder";
+
+export class DeleteFolderWithEvents implements IDeleteFolder {
+    private topics: DeleteFolderUseCasesTopics;
+    private readonly getOperation: AcoFolderStorageOperations["getFolder"];
+    private readonly decoretee: IDeleteFolder;
+
+    constructor(
+        topics: DeleteFolderUseCasesTopics,
+        getOperation: AcoFolderStorageOperations["getFolder"],
+        decoretee: IDeleteFolder
+    ) {
+        this.topics = topics;
+        this.getOperation = getOperation;
+        this.decoretee = decoretee;
+    }
+
+    async execute(params: DeleteFolderParams) {
+        const folder = await this.getOperation({ id: params.id });
+        await this.topics.onFolderBeforeDelete.publish({ folder });
+        await this.decoretee.execute(params);
+        await this.topics.onFolderAfterDelete.publish({ folder });
+        return true;
+    }
+}
diff --git a/packages/api-aco/src/folder/useCases/DeleteFolder/DeleteFolderWithFolderLevelPermissions.ts b/packages/api-aco/src/folder/useCases/DeleteFolder/DeleteFolderWithFolderLevelPermissions.ts
new file mode 100644
index 00000000000..26fc1eaa21d
--- /dev/null
+++ b/packages/api-aco/src/folder/useCases/DeleteFolder/DeleteFolderWithFolderLevelPermissions.ts
@@ -0,0 +1,23 @@
+import { FolderLevelPermissions } from "~/flp";
+import type { IDeleteFolder } from "./IDeleteFolder";
+import type { DeleteFolderParams } from "~/folder/folder.types";
+
+export class DeleteFolderWithFolderLevelPermissions implements IDeleteFolder {
+    private folderLevelPermissions: FolderLevelPermissions;
+    private readonly decoretee: IDeleteFolder;
+
+    constructor(folderLevelPermissions: FolderLevelPermissions, decoretee: IDeleteFolder) {
+        this.folderLevelPermissions = folderLevelPermissions;
+        this.decoretee = decoretee;
+    }
+
+    async execute(params: DeleteFolderParams) {
+        const permissions = await this.folderLevelPermissions.getFolderLevelPermissions(params.id);
+        await this.folderLevelPermissions.ensureCanAccessFolder({
+            permissions,
+            rwd: "d"
+        });
+        await this.decoretee.execute(params);
+        return true;
+    }
+}
diff --git a/packages/api-aco/src/folder/useCases/DeleteFolder/IDeleteFolder.ts b/packages/api-aco/src/folder/useCases/DeleteFolder/IDeleteFolder.ts
new file mode 100644
index 00000000000..a17b23d2bd4
--- /dev/null
+++ b/packages/api-aco/src/folder/useCases/DeleteFolder/IDeleteFolder.ts
@@ -0,0 +1,5 @@
+import type { DeleteFolderParams } from "~/folder/folder.types";
+
+export interface IDeleteFolder {
+    execute: (params: DeleteFolderParams) => Promise<boolean>;
+}
diff --git a/packages/api-aco/src/folder/useCases/DeleteFolder/index.ts b/packages/api-aco/src/folder/useCases/DeleteFolder/index.ts
new file mode 100644
index 00000000000..1623d5d713d
--- /dev/null
+++ b/packages/api-aco/src/folder/useCases/DeleteFolder/index.ts
@@ -0,0 +1,39 @@
+import { Topic } from "@webiny/pubsub/types";
+import {
+    type AcoFolderStorageOperations,
+    type OnFolderAfterDeleteTopicParams,
+    type OnFolderBeforeDeleteTopicParams
+} from "~/folder/folder.types";
+import { DeleteFolder } from "./DeleteFolder";
+import { DeleteFolderWithEvents } from "./DeleteFolderWithEvents";
+import { DeleteFolderWithFolderLevelPermissions } from "./DeleteFolderWithFolderLevelPermissions";
+import { FolderLevelPermissions } from "~/flp";
+
+export interface DeleteFolderUseCasesTopics {
+    onFolderBeforeDelete: Topic<OnFolderBeforeDeleteTopicParams>;
+    onFolderAfterDelete: Topic<OnFolderAfterDeleteTopicParams>;
+}
+
+interface DeleteFolderUseCasesParams {
+    deleteOperation: AcoFolderStorageOperations["deleteFolder"];
+    getOperation: AcoFolderStorageOperations["getFolder"];
+    folderLevelPermissions: FolderLevelPermissions;
+    topics: DeleteFolderUseCasesTopics;
+}
+
+export const getDeleteFolderUseCases = (params: DeleteFolderUseCasesParams) => {
+    const deleteFolder = new DeleteFolder(params.deleteOperation);
+    const deleteFolderUseCaseWithEvents = new DeleteFolderWithEvents(
+        params.topics,
+        params.getOperation,
+        deleteFolder
+    );
+    const deleteFolderUseCase = new DeleteFolderWithFolderLevelPermissions(
+        params.folderLevelPermissions,
+        deleteFolderUseCaseWithEvents
+    );
+
+    return {
+        deleteFolderUseCase
+    };
+};
diff --git a/packages/api-aco/src/folder/useCases/GetAncestors/GetAncestors.ts b/packages/api-aco/src/folder/useCases/GetAncestors/GetAncestors.ts
new file mode 100644
index 00000000000..6408d43c0d8
--- /dev/null
+++ b/packages/api-aco/src/folder/useCases/GetAncestors/GetAncestors.ts
@@ -0,0 +1,78 @@
+import type { GetAncestorsParams, IGetAncestors } from "./IGetAncestors";
+import type { Folder } from "~/folder/folder.types";
+import type { IListFolders } from "~/folder/useCases/ListFolders/IListFolders";
+import { ROOT_FOLDER } from "~/constants";
+
+export class GetAncestors implements IGetAncestors {
+    private listFoldersUseCase: IListFolders;
+
+    constructor(listFoldersUseCase: IListFolders) {
+        this.listFoldersUseCase = listFoldersUseCase;
+    }
+
+    public async execute(params: GetAncestorsParams) {
+        const { folder } = params;
+
+        const folders = await this.listFolders(folder);
+
+        // Create a Map with folders, using folder.id as key
+        const folderMap = new Map<string, Folder>();
+        folders.forEach(folder => folderMap.set(folder.id, folder));
+
+        const findParents = (next: Folder[], current: Folder): Folder[] => {
+            // No folder found: return the result
+            if (!current) {
+                return next;
+            }
+
+            // Push the current folder into the accumulator array
+            next.push(current);
+
+            // No parentId found: return the result
+            if (!current.parentId) {
+                return next;
+            }
+
+            const parent = folderMap.get(current.parentId);
+
+            // No parent found: return the result
+            if (!parent) {
+                return next;
+            }
+
+            // Go ahead and find parent for the current parent
+            return findParents(next, parent);
+        };
+
+        // No folder found: return an empty array
+        if (!folder) {
+            return [];
+        }
+
+        // The folder has no parent (it's at root level): return an array with the folder
+        if (!folder.parentId) {
+            return [folder];
+        }
+
+        // Recursively find parents for a given folder id
+        return findParents([], folder);
+    }
+
+    private async listFolders(folder: Folder) {
+        // Construct paths for all ancestors of the folder
+        const parts = folder.path.split("/").slice(1);
+        const paths = parts.map((_, index) => {
+            return [ROOT_FOLDER, ...parts.slice(0, index + 1)].join("/");
+        });
+
+        // Retrieve all folders that match the specified type and any of the constructed paths
+        const [folders] = await this.listFoldersUseCase.execute({
+            where: {
+                type: folder.type,
+                path_in: paths
+            }
+        });
+
+        return folders;
+    }
+}
diff --git a/packages/api-aco/src/folder/useCases/GetAncestors/IGetAncestors.ts b/packages/api-aco/src/folder/useCases/GetAncestors/IGetAncestors.ts
new file mode 100644
index 00000000000..36aedff00cb
--- /dev/null
+++ b/packages/api-aco/src/folder/useCases/GetAncestors/IGetAncestors.ts
@@ -0,0 +1,9 @@
+import { Folder } from "~/folder/folder.types";
+
+export interface GetAncestorsParams {
+    folder: Folder;
+}
+
+export interface IGetAncestors {
+    execute: (params: GetAncestorsParams) => Promise<Folder[]>;
+}
diff --git a/packages/api-aco/src/folder/useCases/GetAncestors/index.ts b/packages/api-aco/src/folder/useCases/GetAncestors/index.ts
new file mode 100644
index 00000000000..14e40216a95
--- /dev/null
+++ b/packages/api-aco/src/folder/useCases/GetAncestors/index.ts
@@ -0,0 +1,14 @@
+import { GetAncestors } from "./GetAncestors";
+import type { IListFolders } from "~/folder/useCases/ListFolders/IListFolders";
+
+interface GetAncestorsUseCasesParams {
+    listFoldersUseCase: IListFolders;
+}
+
+export const getGetAncestors = (params: GetAncestorsUseCasesParams) => {
+    const getAncestorsUseCase = new GetAncestors(params.listFoldersUseCase);
+
+    return {
+        getAncestorsUseCase
+    };
+};
diff --git a/packages/api-aco/src/folder/useCases/GetFolder/GetFolder.ts b/packages/api-aco/src/folder/useCases/GetFolder/GetFolder.ts
new file mode 100644
index 00000000000..80a6ec12397
--- /dev/null
+++ b/packages/api-aco/src/folder/useCases/GetFolder/GetFolder.ts
@@ -0,0 +1,14 @@
+import type { IGetFolder } from "./IGetFolder";
+import type { AcoFolderStorageOperations, Folder, GetFolderParams } from "~/folder/folder.types";
+
+export class GetFolder implements IGetFolder {
+    private readonly getOperation: AcoFolderStorageOperations["getFolder"];
+
+    constructor(getOperation: AcoFolderStorageOperations["getFolder"]) {
+        this.getOperation = getOperation;
+    }
+
+    async execute(params: GetFolderParams): Promise<Folder> {
+        return await this.getOperation(params);
+    }
+}
diff --git a/packages/api-aco/src/folder/useCases/GetFolder/GetFolderWithFolderLevelPermissions.ts b/packages/api-aco/src/folder/useCases/GetFolder/GetFolderWithFolderLevelPermissions.ts
new file mode 100644
index 00000000000..f69d75d0ca1
--- /dev/null
+++ b/packages/api-aco/src/folder/useCases/GetFolder/GetFolderWithFolderLevelPermissions.ts
@@ -0,0 +1,34 @@
+import { NotAuthorizedError } from "@webiny/api-security";
+import type { IGetFolder } from "./IGetFolder";
+import { FolderLevelPermissions } from "~/flp";
+import type { GetFolderParams } from "~/folder/folder.types";
+
+export class GetFolderWithFolderLevelPermissions implements IGetFolder {
+    private folderLevelPermissions: FolderLevelPermissions;
+    private readonly decoretee: IGetFolder;
+
+    constructor(folderLevelPermissions: FolderLevelPermissions, decoretee: IGetFolder) {
+        this.folderLevelPermissions = folderLevelPermissions;
+        this.decoretee = decoretee;
+    }
+
+    async execute(params: GetFolderParams) {
+        const folder = await this.decoretee.execute(params);
+        const permissions = await this.folderLevelPermissions.getFolderLevelPermissions(folder.id);
+
+        // Let's check if the current user has read access level.
+        const canAccessFolder = await this.folderLevelPermissions.canAccessFolder({
+            permissions,
+            rwd: "r"
+        });
+
+        if (!canAccessFolder) {
+            throw new NotAuthorizedError();
+        }
+
+        return {
+            ...folder,
+            permissions
+        };
+    }
+}
diff --git a/packages/api-aco/src/folder/useCases/GetFolder/IGetFolder.ts b/packages/api-aco/src/folder/useCases/GetFolder/IGetFolder.ts
new file mode 100644
index 00000000000..6a4f0fd02ea
--- /dev/null
+++ b/packages/api-aco/src/folder/useCases/GetFolder/IGetFolder.ts
@@ -0,0 +1,5 @@
+import type { Folder, GetFolderParams } from "~/folder/folder.types";
+
+export interface IGetFolder {
+    execute: (params: GetFolderParams) => Promise<Folder>;
+}
diff --git a/packages/api-aco/src/folder/useCases/GetFolder/index.ts b/packages/api-aco/src/folder/useCases/GetFolder/index.ts
new file mode 100644
index 00000000000..d21a88315d7
--- /dev/null
+++ b/packages/api-aco/src/folder/useCases/GetFolder/index.ts
@@ -0,0 +1,22 @@
+import type { AcoFolderStorageOperations } from "~/folder/folder.types";
+import { GetFolder } from "./GetFolder";
+import { GetFolderWithFolderLevelPermissions } from "./GetFolderWithFolderLevelPermissions";
+import { FolderLevelPermissions } from "~/flp";
+
+interface GetFolderUseCasesParams {
+    getOperation: AcoFolderStorageOperations["getFolder"];
+    folderLevelPermissions: FolderLevelPermissions;
+}
+
+export const getGetFolderUseCase = (params: GetFolderUseCasesParams) => {
+    const getFolder = new GetFolder(params.getOperation);
+    const getFolderUseCase = new GetFolderWithFolderLevelPermissions(
+        params.folderLevelPermissions,
+        getFolder
+    );
+
+    return {
+        getFolderUseCase,
+        getFolderUseCaseWithoutPermissions: getFolder
+    };
+};
diff --git a/packages/api-aco/src/folder/useCases/GetFolderHierarchy/GetFolderHierarchy.ts b/packages/api-aco/src/folder/useCases/GetFolderHierarchy/GetFolderHierarchy.ts
new file mode 100644
index 00000000000..2942dc79889
--- /dev/null
+++ b/packages/api-aco/src/folder/useCases/GetFolderHierarchy/GetFolderHierarchy.ts
@@ -0,0 +1,68 @@
+import type { IGetFolderHierarchy } from "./IGetFolderHierarchy";
+import { ROOT_FOLDER } from "~/constants";
+import type {
+    AcoFolderStorageOperations,
+    Folder,
+    GetFolderHierarchyParams
+} from "~/folder/folder.types";
+
+const FIXED_FOLDER_LISTING_LIMIT = 10_000;
+
+export class GetFolderHierarchy implements IGetFolderHierarchy {
+    private readonly listOperation: AcoFolderStorageOperations["listFolders"];
+    private readonly getOperation: AcoFolderStorageOperations["getFolder"];
+
+    constructor(
+        listOperation: AcoFolderStorageOperations["listFolders"],
+        getOperation: AcoFolderStorageOperations["getFolder"]
+    ) {
+        this.listOperation = listOperation;
+        this.getOperation = getOperation;
+    }
+
+    async execute(params: GetFolderHierarchyParams) {
+        const parents: Folder[] = [];
+        const siblings: Folder[] = [];
+
+        const [rootFolders] = await this.listOperation({
+            where: { type: params.type, parentId: null },
+            limit: FIXED_FOLDER_LISTING_LIMIT
+        });
+
+        siblings.push(...rootFolders);
+
+        if (params.id === ROOT_FOLDER) {
+            return {
+                parents,
+                siblings
+            };
+        }
+
+        const folder = await this.getOperation({ id: params.id });
+        parents.push(folder);
+
+        const getFolderParent = async (folder: Folder) => {
+            while (folder.parentId) {
+                const parentFolder = await this.getOperation({ id: folder.parentId });
+                parents.push(parentFolder);
+                folder = parentFolder;
+            }
+        };
+
+        await getFolderParent(folder);
+
+        const parentIds = parents.map(folder => folder.id);
+
+        const [childFolders] = await this.listOperation({
+            where: { type: folder.type, parentId_in: parentIds, id_not_in: parentIds },
+            limit: FIXED_FOLDER_LISTING_LIMIT
+        });
+
+        siblings.push(...childFolders);
+
+        return {
+            parents,
+            siblings
+        };
+    }
+}
diff --git a/packages/api-aco/src/folder/useCases/GetFolderHierarchy/GetFolderHierarchyWithFolderLevelPermissions.ts b/packages/api-aco/src/folder/useCases/GetFolderHierarchy/GetFolderHierarchyWithFolderLevelPermissions.ts
new file mode 100644
index 00000000000..3ef9e09c008
--- /dev/null
+++ b/packages/api-aco/src/folder/useCases/GetFolderHierarchy/GetFolderHierarchyWithFolderLevelPermissions.ts
@@ -0,0 +1,67 @@
+import type { FolderPermission } from "~/flp/flp.types";
+import { FolderLevelPermissions } from "~/flp";
+import type { IGetFolderHierarchy } from "./IGetFolderHierarchy";
+import type { Folder, GetFolderHierarchyParams } from "~/folder/folder.types";
+
+export class GetFolderHierarchyWithFolderLevelPermissions implements IGetFolderHierarchy {
+    private flpCatalog: Map<string, FolderPermission[]> = new Map();
+    private folderLevelPermissions: FolderLevelPermissions;
+    private readonly decoretee: IGetFolderHierarchy;
+
+    constructor(folderLevelPermissions: FolderLevelPermissions, decoretee: IGetFolderHierarchy) {
+        this.folderLevelPermissions = folderLevelPermissions;
+        this.decoretee = decoretee;
+    }
+
+    async execute(params: GetFolderHierarchyParams) {
+        const { siblings, parents } = await this.decoretee.execute(params);
+        const folders = [...parents, ...siblings];
+
+        await Promise.all(
+            folders.map(async folder => {
+                if (!this.hasFlp(folder.id)) {
+                    const permissions = await this.folderLevelPermissions.getFolderLevelPermissions(
+                        folder.id
+                    );
+                    this.setFlp(folder.id, permissions);
+                }
+            })
+        );
+
+        return {
+            parents: await this.filterAccessibleFolders(parents),
+            siblings: await this.filterAccessibleFolders(siblings)
+        };
+    }
+
+    private async filterAccessibleFolders(folders: Folder[]) {
+        const results = await Promise.all(
+            folders.map(async folder => {
+                const permissions = this.getFlp(folder.id);
+                if (!permissions) {
+                    return folder;
+                }
+
+                const canAccess = await this.folderLevelPermissions.canAccessFolder({
+                    permissions,
+                    rwd: "r"
+                });
+
+                return canAccess ? { ...folder, permissions } : null;
+            })
+        );
+        return results.filter((folder): folder is Folder => folder !== null);
+    }
+
+    private hasFlp(id: string) {
+        return this.flpCatalog.has(id);
+    }
+
+    private getFlp(id: string) {
+        return this.flpCatalog.get(id);
+    }
+
+    private setFlp(id: string, permissions: FolderPermission[]) {
+        this.flpCatalog.set(id, permissions);
+    }
+}
diff --git a/packages/api-aco/src/folder/useCases/GetFolderHierarchy/IGetFolderHierarchy.ts b/packages/api-aco/src/folder/useCases/GetFolderHierarchy/IGetFolderHierarchy.ts
new file mode 100644
index 00000000000..a702f31e992
--- /dev/null
+++ b/packages/api-aco/src/folder/useCases/GetFolderHierarchy/IGetFolderHierarchy.ts
@@ -0,0 +1,5 @@
+import type { GetFolderHierarchyParams, GetFolderHierarchyResponse } from "~/folder/folder.types";
+
+export interface IGetFolderHierarchy {
+    execute: (params: GetFolderHierarchyParams) => Promise<GetFolderHierarchyResponse>;
+}
diff --git a/packages/api-aco/src/folder/useCases/GetFolderHierarchy/index.ts b/packages/api-aco/src/folder/useCases/GetFolderHierarchy/index.ts
new file mode 100644
index 00000000000..aa76e497355
--- /dev/null
+++ b/packages/api-aco/src/folder/useCases/GetFolderHierarchy/index.ts
@@ -0,0 +1,22 @@
+import { GetFolderHierarchy } from "./GetFolderHierarchy";
+import { GetFolderHierarchyWithFolderLevelPermissions } from "./GetFolderHierarchyWithFolderLevelPermissions";
+import type { AcoFolderStorageOperations } from "~/folder/folder.types";
+import { FolderLevelPermissions } from "~/flp";
+
+interface GetFolderHierarchyUseCasesParams {
+    listOperation: AcoFolderStorageOperations["listFolders"];
+    getOperation: AcoFolderStorageOperations["getFolder"];
+    folderLevelPermissions: FolderLevelPermissions;
+}
+
+export const getGetFolderHierarchyUseCases = (params: GetFolderHierarchyUseCasesParams) => {
+    const getFolderHierarchy = new GetFolderHierarchy(params.listOperation, params.getOperation);
+    const getFolderHierarchyUseCase = new GetFolderHierarchyWithFolderLevelPermissions(
+        params.folderLevelPermissions,
+        getFolderHierarchy
+    );
+
+    return {
+        getFolderHierarchyUseCase
+    };
+};
diff --git a/packages/api-aco/src/folder/useCases/ListFolderLevelPermissionsTargets/IListAdminUsersGateway.ts b/packages/api-aco/src/folder/useCases/ListFolderLevelPermissionsTargets/IListAdminUsersGateway.ts
new file mode 100644
index 00000000000..21170172776
--- /dev/null
+++ b/packages/api-aco/src/folder/useCases/ListFolderLevelPermissionsTargets/IListAdminUsersGateway.ts
@@ -0,0 +1,5 @@
+import type { AdminUser } from "@webiny/api-admin-users/types";
+
+export interface IListAdminUsersGateway {
+    execute: () => Promise<AdminUser[]>;
+}
diff --git a/packages/api-aco/src/folder/useCases/ListFolderLevelPermissionsTargets/IListFolderLevelPermissionsTargets.ts b/packages/api-aco/src/folder/useCases/ListFolderLevelPermissionsTargets/IListFolderLevelPermissionsTargets.ts
new file mode 100644
index 00000000000..7f17b451d5c
--- /dev/null
+++ b/packages/api-aco/src/folder/useCases/ListFolderLevelPermissionsTargets/IListFolderLevelPermissionsTargets.ts
@@ -0,0 +1,8 @@
+import type {
+    FolderLevelPermissionsTarget,
+    FolderLevelPermissionsTargetListMeta
+} from "~/folder/folder.types";
+
+export interface IListFolderLevelPermissionsTargets {
+    execute: () => Promise<[FolderLevelPermissionsTarget[], FolderLevelPermissionsTargetListMeta]>;
+}
diff --git a/packages/api-aco/src/folder/useCases/ListFolderLevelPermissionsTargets/IListTeamsGateway.ts b/packages/api-aco/src/folder/useCases/ListFolderLevelPermissionsTargets/IListTeamsGateway.ts
new file mode 100644
index 00000000000..b42cf114b75
--- /dev/null
+++ b/packages/api-aco/src/folder/useCases/ListFolderLevelPermissionsTargets/IListTeamsGateway.ts
@@ -0,0 +1,5 @@
+import type { Team } from "@webiny/api-security/types";
+
+export interface IListTeamsGateway {
+    execute: () => Promise<Team[]>;
+}
diff --git a/packages/api-aco/src/folder/useCases/ListFolderLevelPermissionsTargets/ListAdminUsersGatewayFromContext.ts b/packages/api-aco/src/folder/useCases/ListFolderLevelPermissionsTargets/ListAdminUsersGatewayFromContext.ts
new file mode 100644
index 00000000000..02c2e5bf8c2
--- /dev/null
+++ b/packages/api-aco/src/folder/useCases/ListFolderLevelPermissionsTargets/ListAdminUsersGatewayFromContext.ts
@@ -0,0 +1,18 @@
+import type { IListAdminUsersGateway } from "./IListAdminUsersGateway";
+import type { AcoContext } from "~/types";
+
+export class ListAdminUsersGatewayFromContext implements IListAdminUsersGateway {
+    private context: AcoContext;
+
+    constructor(context: AcoContext) {
+        this.context = context;
+    }
+
+    public async execute() {
+        const { security, adminUsers } = this.context;
+
+        return security.withoutAuthorization(async () => {
+            return adminUsers.listUsers();
+        });
+    }
+}
diff --git a/packages/api-aco/src/folder/useCases/ListFolderLevelPermissionsTargets/ListFolderLevelPermissionsTargets.ts b/packages/api-aco/src/folder/useCases/ListFolderLevelPermissionsTargets/ListFolderLevelPermissionsTargets.ts
new file mode 100644
index 00000000000..a6236d6a6ce
--- /dev/null
+++ b/packages/api-aco/src/folder/useCases/ListFolderLevelPermissionsTargets/ListFolderLevelPermissionsTargets.ts
@@ -0,0 +1,72 @@
+import type { IListFolderLevelPermissionsTargets } from "./IListFolderLevelPermissionsTargets";
+import type { IListAdminUsersGateway } from "./IListAdminUsersGateway";
+import type { IListTeamsGateway } from "./IListTeamsGateway";
+import { validation } from "@webiny/validation";
+import type {
+    FolderLevelPermissionsTarget,
+    FolderLevelPermissionsTargetListMeta
+} from "~/folder/folder.types";
+
+export class ListFolderLevelPermissionsTargets implements IListFolderLevelPermissionsTargets {
+    private listAdminUsersGateway: IListAdminUsersGateway;
+    private listTeamsGateway: IListTeamsGateway;
+
+    constructor(
+        listAdminUsersGateway: IListAdminUsersGateway,
+        listTeamsGateway: IListTeamsGateway
+    ) {
+        this.listAdminUsersGateway = listAdminUsersGateway;
+        this.listTeamsGateway = listTeamsGateway;
+    }
+
+    public async execute(): Promise<
+        [FolderLevelPermissionsTarget[], FolderLevelPermissionsTargetListMeta]
+    > {
+        const adminUsers = await this.listAdminUsersGateway.execute();
+        const teams = await this.listTeamsGateway.execute();
+
+        const teamTargets = teams.map(team => ({
+            id: team.id,
+            type: "team",
+            target: `team:${team.id}`,
+            name: team.name || "",
+            meta: {}
+        }));
+
+        const adminUserTargets = adminUsers.map(user => {
+            let name = user.displayName;
+            if (!name) {
+                // For backwards compatibility, we also want to try concatenating first and last name.
+                name = [user.firstName, user.lastName].filter(Boolean).join(" ");
+            }
+
+            // We're doing the validation because, with non-Cognito IdPs (Okta, Auth0), the email
+            // field might actually contain a non-email value: `id:${IdP_Identity_ID}`. In that case,
+            // let's not assign anything to the `email` field.
+            let email: string | null = user.email;
+            try {
+                validation.validateSync(email, "email");
+            } catch {
+                email = null;
+            }
+
+            const image = user.avatar?.src || null;
+
+            return {
+                id: user.id,
+                type: "admin",
+                target: `admin:${user.id}`,
+                name,
+                meta: {
+                    email,
+                    image
+                }
+            };
+        });
+
+        const results = [...teamTargets, ...adminUserTargets];
+        const meta = { totalCount: results.length };
+
+        return [results, meta];
+    }
+}
diff --git a/packages/api-aco/src/folder/useCases/ListFolderLevelPermissionsTargets/ListTeamsGatewayFromContext.ts b/packages/api-aco/src/folder/useCases/ListFolderLevelPermissionsTargets/ListTeamsGatewayFromContext.ts
new file mode 100644
index 00000000000..a9825fd6e8e
--- /dev/null
+++ b/packages/api-aco/src/folder/useCases/ListFolderLevelPermissionsTargets/ListTeamsGatewayFromContext.ts
@@ -0,0 +1,18 @@
+import type { AcoContext } from "~/types";
+import type { IListTeamsGateway } from "./IListTeamsGateway";
+
+export class ListTeamsGatewayFromContext implements IListTeamsGateway {
+    private context: AcoContext;
+
+    constructor(context: AcoContext) {
+        this.context = context;
+    }
+
+    public async execute() {
+        const { security } = this.context;
+
+        return security.withoutAuthorization(async () => {
+            return security.listTeams();
+        });
+    }
+}
diff --git a/packages/api-aco/src/folder/useCases/ListFolderLevelPermissionsTargets/index.ts b/packages/api-aco/src/folder/useCases/ListFolderLevelPermissionsTargets/index.ts
new file mode 100644
index 00000000000..ab75336c4bc
--- /dev/null
+++ b/packages/api-aco/src/folder/useCases/ListFolderLevelPermissionsTargets/index.ts
@@ -0,0 +1,24 @@
+import { ListAdminUsersGatewayFromContext } from "./ListAdminUsersGatewayFromContext";
+import { ListTeamsGatewayFromContext } from "./ListTeamsGatewayFromContext";
+import { ListFolderLevelPermissionsTargets } from "./ListFolderLevelPermissionsTargets";
+import type { AcoContext } from "~/types";
+
+interface GetListFolderLevelPermissionsTargetsParams {
+    context: AcoContext;
+}
+
+export const getListFolderLevelPermissionsTargets = (
+    params: GetListFolderLevelPermissionsTargetsParams
+) => {
+    const listAdminUsersGateway = new ListAdminUsersGatewayFromContext(params.context);
+    const listTeamsGateway = new ListTeamsGatewayFromContext(params.context);
+
+    const listFolderLevelPermissionsTargetsUseCase = new ListFolderLevelPermissionsTargets(
+        listAdminUsersGateway,
+        listTeamsGateway
+    );
+
+    return {
+        listFolderLevelPermissionsTargetsUseCase
+    };
+};
diff --git a/packages/api-aco/src/folder/useCases/ListFolders/IListFolders.ts b/packages/api-aco/src/folder/useCases/ListFolders/IListFolders.ts
new file mode 100644
index 00000000000..1b4f6ba886b
--- /dev/null
+++ b/packages/api-aco/src/folder/useCases/ListFolders/IListFolders.ts
@@ -0,0 +1,6 @@
+import type { Folder, ListFoldersParams } from "~/folder/folder.types";
+import { ListMeta } from "~/types";
+
+export interface IListFolders {
+    execute: (params: ListFoldersParams) => Promise<[Folder[], ListMeta]>;
+}
diff --git a/packages/api-aco/src/folder/useCases/ListFolders/ListFolders.ts b/packages/api-aco/src/folder/useCases/ListFolders/ListFolders.ts
new file mode 100644
index 00000000000..c8cfddf0866
--- /dev/null
+++ b/packages/api-aco/src/folder/useCases/ListFolders/ListFolders.ts
@@ -0,0 +1,15 @@
+import type { IListFolders } from "./IListFolders";
+import type { AcoFolderStorageOperations, Folder, ListFoldersParams } from "~/folder/folder.types";
+import { ListMeta } from "~/types";
+
+export class ListFolders implements IListFolders {
+    private readonly listOperation: AcoFolderStorageOperations["listFolders"];
+
+    constructor(listOperation: AcoFolderStorageOperations["listFolders"]) {
+        this.listOperation = listOperation;
+    }
+
+    async execute(params: ListFoldersParams): Promise<[Folder[], ListMeta]> {
+        return await this.listOperation(params);
+    }
+}
diff --git a/packages/api-aco/src/folder/useCases/ListFolders/ListFoldersWithFolderLevelPermissions.ts b/packages/api-aco/src/folder/useCases/ListFolders/ListFoldersWithFolderLevelPermissions.ts
new file mode 100644
index 00000000000..37b2be232ee
--- /dev/null
+++ b/packages/api-aco/src/folder/useCases/ListFolders/ListFoldersWithFolderLevelPermissions.ts
@@ -0,0 +1,79 @@
+import type { Folder, ListFoldersParams } from "~/folder/folder.types";
+import type { IListFolders } from "./IListFolders";
+import { FolderLevelPermissions } from "~/flp";
+import type { FolderPermission } from "~/flp/flp.types";
+import { ROOT_FOLDER } from "~/constants";
+import type { ListMeta } from "~/types";
+
+export class ListFoldersWithFolderLevelPermissions implements IListFolders {
+    private flpCatalog: Map<string, FolderPermission[]> = new Map();
+    private folderLevelPermissions: FolderLevelPermissions;
+    private readonly decoretee: IListFolders;
+
+    constructor(folderLevelPermissions: FolderLevelPermissions, decoretee: IListFolders) {
+        this.folderLevelPermissions = folderLevelPermissions;
+        this.decoretee = decoretee;
+    }
+
+    async execute(params: ListFoldersParams): Promise<[Folder[], ListMeta]> {
+        const [folders, meta] = await this.decoretee.execute(params);
+
+        // Fetch FLP records for ROOT folders and populate the catalog.
+        const rootFlps = await this.folderLevelPermissions.listFolderLevelPermissions({
+            where: {
+                type: params.where.type,
+                parentId: ROOT_FOLDER
+            }
+        });
+
+        rootFlps.forEach(flp => this.setFlp(flp.id, flp.permissions));
+
+        // Fetch FLP for folders not already in the catalog.
+        await Promise.all(
+            folders.map(async folder => {
+                if (!this.hasFlp(folder.id)) {
+                    const permissions = await this.folderLevelPermissions.getFolderLevelPermissions(
+                        folder.id
+                    );
+                    this.setFlp(folder.id, permissions);
+                }
+            })
+        );
+
+        // Filter folders based on permissions.
+        const foldersWithPermissions = await Promise.all(
+            folders.map(async folder => {
+                const permissions = this.getFlp(folder.id);
+                if (!permissions) {
+                    return null;
+                }
+
+                const canAccessFolder = await this.folderLevelPermissions.canAccessFolder({
+                    permissions,
+                    rwd: "r"
+                });
+
+                if (!canAccessFolder) {
+                    return null;
+                }
+
+                const folderWithFlp = { ...folder, permissions };
+                return canAccessFolder ? folderWithFlp : null;
+            })
+        );
+
+        return [foldersWithPermissions.filter(Boolean) as Folder[], meta];
+    }
+
+    private hasFlp(id: string) {
+        return this.flpCatalog.has(id);
+    }
+
+    private getFlp(id: string) {
+        return this.flpCatalog.get(id);
+    }
+
+    private setFlp(id: string, permissions: FolderPermission[]) {
+        this.flpCatalog.set(id, permissions);
+    }
+}
diff --git a/packages/api-aco/src/folder/useCases/ListFolders/index.ts b/packages/api-aco/src/folder/useCases/ListFolders/index.ts
new file mode 100644
index 00000000000..9c5928cb312
--- /dev/null
+++ b/packages/api-aco/src/folder/useCases/ListFolders/index.ts
@@ -0,0 +1,22 @@
+import type { AcoFolderStorageOperations } from "~/folder/folder.types";
+import { ListFolders } from "./ListFolders";
+import { ListFoldersWithFolderLevelPermissions } from "./ListFoldersWithFolderLevelPermissions";
+import { FolderLevelPermissions } from "~/flp";
+
+interface ListFoldersUseCasesParams {
+    listOperation: AcoFolderStorageOperations["listFolders"];
+    folderLevelPermissions: FolderLevelPermissions;
+}
+
+export const getListFoldersUseCases = (params: ListFoldersUseCasesParams) => {
+    const listFolders = new ListFolders(params.listOperation);
+    const listFoldersUseCase = new ListFoldersWithFolderLevelPermissions(
+        params.folderLevelPermissions,
+        listFolders
+    );
+
+    return {
+        listFoldersUseCase,
+        listFoldersUseCaseWithoutPermissions: listFolders
+    };
+};
diff --git a/packages/api-aco/src/folder/useCases/UpdateFolder/IUpdateFolder.ts b/packages/api-aco/src/folder/useCases/UpdateFolder/IUpdateFolder.ts
new file mode 100644
index 00000000000..8bd869b5d65
--- /dev/null
+++ b/packages/api-aco/src/folder/useCases/UpdateFolder/IUpdateFolder.ts
@@ -0,0 +1,5 @@
+import type { Folder, UpdateFolderParams } from "~/folder/folder.types";
+
+export interface IUpdateFolder {
+    execute: (id: string, data: UpdateFolderParams) => Promise<Folder>;
+}
diff --git a/packages/api-aco/src/folder/useCases/UpdateFolder/UpdateFolder.ts b/packages/api-aco/src/folder/useCases/UpdateFolder/UpdateFolder.ts
new file mode 100644
index 00000000000..d1f82704670
--- /dev/null
+++ b/packages/api-aco/src/folder/useCases/UpdateFolder/UpdateFolder.ts
@@ -0,0 +1,14 @@
+import type { IUpdateFolder } from "./IUpdateFolder";
+import type { AcoFolderStorageOperations, Folder, UpdateFolderParams } from "~/folder/folder.types";
+
+export class UpdateFolder implements IUpdateFolder {
+    private readonly updateOperation: AcoFolderStorageOperations["updateFolder"];
+
+    constructor(updateOperation: AcoFolderStorageOperations["updateFolder"]) {
+        this.updateOperation = updateOperation;
+    }
+
+    async execute(id: string, params: UpdateFolderParams): Promise<Folder> {
+        return await this.updateOperation({ id, data: params });
+    }
+}
diff --git a/packages/api-aco/src/folder/useCases/UpdateFolder/UpdateFolderWithEvents.ts b/packages/api-aco/src/folder/useCases/UpdateFolder/UpdateFolderWithEvents.ts
new file mode 100644
index 00000000000..5ccc57cf37c
--- /dev/null
+++ b/packages/api-aco/src/folder/useCases/UpdateFolder/UpdateFolderWithEvents.ts
@@ -0,0 +1,31 @@
+import type { UpdateFolderUseCasesTopics } from "./index";
+import type { AcoFolderStorageOperations, Folder, UpdateFolderParams } from "~/folder/folder.types";
+import type { IUpdateFolder } from "~/folder/useCases/UpdateFolder/IUpdateFolder";
+
+export class UpdateFolderWithEvents implements IUpdateFolder {
+    private topics: UpdateFolderUseCasesTopics;
+    private readonly getOperation: AcoFolderStorageOperations["getFolder"];
+    private readonly decoretee: IUpdateFolder;
+
+    constructor(
+        topics: UpdateFolderUseCasesTopics,
+        getOperation: AcoFolderStorageOperations["getFolder"],
+        decoretee: IUpdateFolder
+    ) {
+        this.topics = topics;
+        this.getOperation = getOperation;
+        this.decoretee = decoretee;
+    }
+
+    async execute(id: string, params: UpdateFolderParams): Promise<Folder> {
+        const original = await this.getOperation({ id });
+        await this.topics.onFolderBeforeUpdate.publish({ original, input: { id, data: params } });
+        const folder = await this.decoretee.execute(id, params);
+        await this.topics.onFolderAfterUpdate.publish({
+            original,
+            input: { id, data: params },
+            folder
+        });
+        return folder;
+    }
+}
diff --git a/packages/api-aco/src/folder/useCases/UpdateFolder/UpdateFolderWithFolderLevelPermissions.ts b/packages/api-aco/src/folder/useCases/UpdateFolder/UpdateFolderWithFolderLevelPermissions.ts
new file mode 100644
index 00000000000..6145b482e28
--- /dev/null
+++ b/packages/api-aco/src/folder/useCases/UpdateFolder/UpdateFolderWithFolderLevelPermissions.ts
@@ -0,0 +1,95 @@
+import { NotAuthorizedError } from "@webiny/api-security";
+import WError from "@webiny/error";
+import type { AcoFolderStorageOperations, UpdateFolderParams } from "~/folder/folder.types";
+import type { IUpdateFolder } from "./IUpdateFolder";
+import { FolderLevelPermissions } from "~/flp";
+
+export class UpdateFolderWithFolderLevelPermissions implements IUpdateFolder {
+    private folderLevelPermissions: FolderLevelPermissions;
+    private readonly getOperation: AcoFolderStorageOperations["getFolder"];
+    private readonly decoretee: IUpdateFolder;
+
+    constructor(
+        folderLevelPermissions: FolderLevelPermissions,
+        getOperation: AcoFolderStorageOperations["getFolder"],
+        decoretee: IUpdateFolder
+    ) {
+        this.folderLevelPermissions = folderLevelPermissions;
+        this.getOperation = getOperation;
+        this.decoretee = decoretee;
+    }
+
+    async execute(id: string, params: UpdateFolderParams) {
+        const original = await this.getOperation({ id });
+        const originalPermissions = await this.folderLevelPermissions.getFolderLevelPermissions(id);
+
+        // Let's ensure current identity's permission allows the update operation.
+        await this.folderLevelPermissions.ensureCanAccessFolder({
+            permissions: originalPermissions,
+            rwd: "w"
+        });
+
+        const permissions = await this.folderLevelPermissions.getDefaultPermissions(
+            params.permissions ?? []
+        );
+
+        // Check if the user still has access to the folder with the provided permissions.
+        const stillHasAccess = await this.folderLevelPermissions.canAccessFolder({
+            permissions,
+            rwd: "w"
+        });
+
+        if (!stillHasAccess) {
+            throw new WError(
+                `Cannot continue because you would loose access to this folder.`,
+                "CANNOT_LOOSE_FOLDER_ACCESS"
+            );
+        }
+
+        // Validate data.
+        if (Array.isArray(params.permissions)) {
+            params.permissions.forEach(permission => {
+                const targetIsValid =
+                    permission.target.startsWith("admin:") || permission.target.startsWith("team:");
+                if (!targetIsValid) {
+                    throw new Error(`Permission target "${permission.target}" is not valid.`);
+                }
+
+                if (permission.inheritedFrom) {
+                    throw new Error(`Permission "inheritedFrom" cannot be set manually.`);
+                }
+            });
+        }
+
+        // Parent change is not allowed if the user doesn't have access to the new parent.
+        if (params.parentId && params.parentId !== original.parentId) {
+            try {
+                // Getting the parent folder permissions will throw an error if the user doesn't have access.
+                const parentPermissions =
+                    await this.folderLevelPermissions.getFolderLevelPermissions(params.parentId);
+
+                await this.folderLevelPermissions.ensureCanAccessFolder({
+                    permissions: parentPermissions,
+                    rwd: "r"
+                });
+            } catch (e) {
+                if (e instanceof NotAuthorizedError) {
+                    throw new WError(
+                        `Cannot move folder to a new parent because you don't have access to the new parent.`,
+                        "CANNOT_MOVE_FOLDER_TO_NEW_PARENT"
+                    );
+                }
+
+                // If we didn't receive the expected error, we still want to throw it.
+                throw e;
+            }
+        }
+
+        const folder = await this.decoretee.execute(id, params);
+
+        return {
+            ...folder,
+            permissions
+        };
+    }
+}
diff --git a/packages/api-aco/src/folder/useCases/UpdateFolder/index.ts b/packages/api-aco/src/folder/useCases/UpdateFolder/index.ts
new file mode 100644
index 00000000000..ac3d6e05166
--- /dev/null
+++ b/packages/api-aco/src/folder/useCases/UpdateFolder/index.ts
@@ -0,0 +1,40 @@
+import { Topic } from "@webiny/pubsub/types";
+import type {
+    AcoFolderStorageOperations,
+    OnFolderAfterUpdateTopicParams,
+    OnFolderBeforeUpdateTopicParams
+} from "~/folder/folder.types";
+import { UpdateFolder } from "./UpdateFolder";
+import { UpdateFolderWithEvents } from "./UpdateFolderWithEvents";
+import { UpdateFolderWithFolderLevelPermissions } from "./UpdateFolderWithFolderLevelPermissions";
+import { FolderLevelPermissions } from "~/flp";
+
+export interface UpdateFolderUseCasesTopics {
+    onFolderBeforeUpdate: Topic<OnFolderBeforeUpdateTopicParams>;
+    onFolderAfterUpdate: Topic<OnFolderAfterUpdateTopicParams>;
+}
+
+interface UpdateFolderUseCasesParams {
+    updateOperation: AcoFolderStorageOperations["updateFolder"];
+    getOperation: AcoFolderStorageOperations["getFolder"];
+    folderLevelPermissions: FolderLevelPermissions;
+    topics: UpdateFolderUseCasesTopics;
+}
+
+export const getUpdateFolderUseCase = (params: UpdateFolderUseCasesParams) => {
+    const updateFolder = new UpdateFolder(params.updateOperation);
+    const updateFolderUseCaseWithEvents = new UpdateFolderWithEvents(
+        params.topics,
+        params.getOperation,
+        updateFolder
+    );
+    const updateFolderUseCase = new UpdateFolderWithFolderLevelPermissions(
+        params.folderLevelPermissions,
+        params.getOperation,
+        updateFolderUseCaseWithEvents
+    );
+
+    return {
+        updateFolderUseCase
+    };
+};
diff --git a/packages/api-aco/src/folder/useCases/index.ts b/packages/api-aco/src/folder/useCases/index.ts
new file mode 100644
index 00000000000..7572e71320d
--- /dev/null
+++ b/packages/api-aco/src/folder/useCases/index.ts
@@ -0,0 +1,8 @@
+export * from "./CreateFolder";
+export * from "./DeleteFolder";
+export * from "./GetAncestors";
+export * from "./GetFolder";
+export * from "./GetFolderHierarchy";
+export * from "./ListFolderLevelPermissionsTargets";
+export * from "./ListFolders";
+export * from "./UpdateFolder";
diff --git a/packages/api-aco/src/index.ts b/packages/api-aco/src/index.ts
index 7fdf46fc5e7..c5243b6cb94 100644
--- a/packages/api-aco/src/index.ts
+++ b/packages/api-aco/src/index.ts
@@ -1,5 +1,7 @@
 import { createAcoContext } from "~/createAcoContext";
 import { createAcoGraphQL } from "~/createAcoGraphQL";
+import { DynamoDBDocument } from "@webiny/aws-sdk/client-dynamodb";
+import { createAcoTasks } from "~/createAcoTasks";
 
 export { SEARCH_RECORD_MODEL_ID } from "./record/record.model";
 export { FOLDER_MODEL_ID } from "./folder/folder.model";
@@ -8,11 +10,12 @@ export * from "./apps";
 export * from "./plugins";
 
 export interface CreateAcoParams {
+    documentClient: DynamoDBDocument;
     useFolderLevelPermissions?: boolean;
 }
 
-export const createAco = (params: CreateAcoParams = {}) => {
-    return [createAcoContext(params), ...createAcoGraphQL()];
+export const createAco = (params: CreateAcoParams) => {
+    return [createAcoContext(params), ...createAcoGraphQL(), ...createAcoTasks()];
 };
 
 export * from "./folder/createFolderModelModifier";
diff --git a/packages/api-aco/src/record/record.crud.ts b/packages/api-aco/src/record/record.crud.ts
index e878e9f4892..934c4d039fd 100644
--- a/packages/api-aco/src/record/record.crud.ts
+++ b/packages/api-aco/src/record/record.crud.ts
@@ -59,21 +59,21 @@ export const createSearchRecordCrudMethods = ({
         onSearchRecordBeforeDelete,
         onSearchRecordAfterDelete,
         async get(model, id) {
-            return storageOperations.getRecord(model, { id });
+            return storageOperations.search.getRecord(model, { id });
         },
         async list(model, params) {
-            return storageOperations.listRecords(model, params);
+            return storageOperations.search.listRecords(model, params);
         },
         async create(model, data) {
             await onSearchRecordBeforeCreate.publish({ model, input: data });
-            const record = await storageOperations.createRecord(model, { data });
+            const record = await storageOperations.search.createRecord(model, { data });
             await onSearchRecordAfterCreate.publish({ model, record });
             return record;
         },
         async update(model, id, data) {
-            const original = await storageOperations.getRecord(model, { id });
+            const original = await storageOperations.search.getRecord(model, { id });
             await onSearchRecordBeforeUpdate.publish({ model, original, input: { id, data } });
-            const record = await storageOperations.updateRecord(model, { id, data });
+            const record = await storageOperations.search.updateRecord(model, { id, data });
             await onSearchRecordAfterUpdate.publish({
                 model,
                 original,
@@ -83,9 +83,9 @@ export const createSearchRecordCrudMethods = ({
             return record;
         },
         async move(model, id, folderId) {
-            const original = await storageOperations.getRecord(model, { id });
+            const original = await storageOperations.search.getRecord(model, { id });
             await onSearchRecordBeforeMove.publish({ model, original, folderId });
-            const result = await storageOperations.moveRecord(model, {
+            const result = await storageOperations.search.moveRecord(model, {
                 id,
                 folderId
             });
@@ -97,14 +97,14 @@ export const createSearchRecordCrudMethods = ({
             return result;
         },
         async delete(model, id: string) {
-            const record = await storageOperations.getRecord(model, { id });
+            const record = await storageOperations.search.getRecord(model, { id });
             await onSearchRecordBeforeDelete.publish({ model, record });
-            await storageOperations.deleteRecord(model, { id });
+            await storageOperations.search.deleteRecord(model, { id });
             await onSearchRecordAfterDelete.publish({ model, record });
             return true;
         },
         async listTags(model, params) {
-            return storageOperations.listTags(model, params);
+            return storageOperations.search.listTags(model, params);
         }
     };
 };
diff --git a/packages/api-aco/src/record/record.so.ts b/packages/api-aco/src/record/record.so.ts
index 62923a98a2a..e325b5e8bff 100644
--- a/packages/api-aco/src/record/record.so.ts
+++ b/packages/api-aco/src/record/record.so.ts
@@ -6,7 +6,7 @@ import { AcoSearchRecordStorageOperations, SearchRecord } from "./record.types";
 import { CmsModel, UpdateCmsEntryInput } from "@webiny/api-headless-cms/types";
 import { attachAcoRecordPrefix } from "~/utils/acoRecordId";
 import { SEARCH_RECORD_MODEL_ID } from "~/record/record.model";
-import { ENTRY_META_FIELDS } from "@webiny/api-headless-cms/constants";
+import { ENTRY_META_FIELDS, pickEntryMetaFields } from "@webiny/api-headless-cms/constants";
 
 export const createSearchRecordOperations = (
     params: CreateAcoStorageOperationsParams
@@ -46,7 +46,9 @@ export const createSearchRecordOperations = (
                 }
             });
 
-            return [entries.map(pickEntryFieldValues<SearchRecord<any>>), meta];
+            const items = entries.map(pickEntryFieldValues<SearchRecord<any>>);
+
+            return [items, meta];
         },
         async listTags(model, params) {
             const { where } = params;
@@ -73,12 +75,30 @@ export const createSearchRecordOperations = (
 
             return [tags, meta];
         },
-        async createRecord(model, { data: SearchRecordData }) {
-            const { tags = [], data = {}, ...rest } = SearchRecordData;
+        async createRecord(model, { data: searchRecordData }) {
+            const { tags = [], data = {}, ...rest } = searchRecordData;
+
+            // We added this so that if the main record has its meta fields set with
+            // custom values, we can propagate them to the search record as well.
+            const { createdBy, createdOn, modifiedBy, modifiedOn, savedBy, savedOn } =
+                pickEntryMetaFields(data);
+
             const entry = await cms.createEntry(model, {
                 tags,
                 data,
                 ...rest,
+                createdBy,
+                createdOn,
+                modifiedBy,
+                modifiedOn,
+                savedBy,
+                savedOn,
+                revisionCreatedBy: createdBy,
+                revisionCreatedOn: createdOn,
+                revisionModifiedBy: modifiedBy,
+                revisionModifiedOn: modifiedOn,
+                revisionSavedBy: savedBy,
+                revisionSavedOn: savedOn,
                 id: attachAcoRecordPrefix(rest.id)
             });
 
diff --git a/packages/api-aco/src/types.ts b/packages/api-aco/src/types.ts
index 88f614e0aa4..fd98fea75fc 100644
--- a/packages/api-aco/src/types.ts
+++ b/packages/api-aco/src/types.ts
@@ -4,21 +4,27 @@ import { I18NContext, I18NLocale } from "@webiny/api-i18n/types";
 import { SecurityContext } from "@webiny/api-security/types";
 import { AdminUsersContext } from "@webiny/api-admin-users/types";
 import { FileManagerContext } from "@webiny/api-file-manager/types";
+import { Context as TasksContext } from "@webiny/tasks/types";
 import { CmsContext, CmsModel, CmsModelField } from "@webiny/api-headless-cms/types";
-import {
+import type {
     AcoSearchRecordCrud,
     AcoSearchRecordCrudBase,
     AcoSearchRecordStorageOperations,
     GenericSearchData,
     SearchRecord
 } from "~/record/record.types";
-import { AcoFolderCrud, AcoFolderStorageOperations } from "~/folder/folder.types";
-import { AcoFilterCrud, AcoFilterStorageOperations } from "~/filter/filter.types";
-import { FolderLevelPermissions } from "~/utils/FolderLevelPermissions";
+import type { AcoFolderCrud, AcoFolderStorageOperations } from "~/folder/folder.types";
+import type { AcoFilterCrud, AcoFilterStorageOperations } from "~/filter/filter.types";
+import type {
+    AcoFolderLevelPermissionsCrud,
+    AcoFolderLevelPermissionsStorageOperations
+} from "~/flp/flp.types";
+import { FolderLevelPermissions } from "~/flp";
 
 export * from "./filter/filter.types";
 export * from "./folder/folder.types";
 export * from "./record/record.types";
+export * from "./flp/flp.types";
 
 export interface User {
     id: string;
@@ -54,6 +60,7 @@ export interface AdvancedContentOrganisation {
     folder: AcoFolderCrud;
     search: AcoSearchRecordCrud;
     filter: AcoFilterCrud;
+    flp: AcoFolderLevelPermissionsCrud;
     folderLevelPermissions: FolderLevelPermissions;
     apps: IAcoApps;
     registerApp: (params: IAcoAppRegisterParams) => Promise<IAcoApp>;
@@ -68,9 +75,12 @@ export interface CreateAcoParams {
     folderLevelPermissions: FolderLevelPermissions;
 }
 
-export type AcoStorageOperations = AcoFolderStorageOperations &
-    AcoSearchRecordStorageOperations &
-    AcoFilterStorageOperations;
+export interface AcoStorageOperations {
+    folder: AcoFolderStorageOperations;
+    search: AcoSearchRecordStorageOperations;
+    filter: AcoFilterStorageOperations;
+    flp: AcoFolderLevelPermissionsStorageOperations;
+}
 
 export interface AcoContext
     extends BaseContext,
@@ -79,7 +89,8 @@ export interface AcoContext
         SecurityContext,
         AdminUsersContext,
         CmsContext,
-        FileManagerContext {
+        FileManagerContext,
+        TasksContext {
     aco: AdvancedContentOrganisation;
 }
 
@@ -120,10 +131,12 @@ export interface IAcoApp {
 }
 // TODO: determine correct type
 export type IAcoAppOnEntry<T extends GenericSearchData = GenericSearchData> = (
-    entry: SearchRecord<T>
+    entry: SearchRecord<T>,
+    context: AcoContext
 ) => Promise<SearchRecord<T>>;
 export type IAcoAppOnEntryList<T extends GenericSearchData = GenericSearchData> = (
-    entry: SearchRecord<T>[]
+    entries: SearchRecord<T>[],
+    context: AcoContext
 ) => Promise<SearchRecord<T>[]>;
 export type AcoRequestAction = "create" | "update" | "delete" | "move" | "fetch";
 export type IAcoAppOnAnyRequest = (context: AcoContext, action: AcoRequestAction) => Promise<void>;
diff --git a/packages/api-aco/src/utils/FolderLevelPermissions.ts b/packages/api-aco/src/utils/FolderLevelPermissions.ts
deleted file mode 100644
index d306a992bd7..00000000000
--- a/packages/api-aco/src/utils/FolderLevelPermissions.ts
+++ /dev/null
@@ -1,501 +0,0 @@
-import { Authentication } from "@webiny/api-authentication/types";
-import { SecurityPermission, Team } from "@webiny/api-security/types";
-import { Folder, ListFoldersParams } from "~/folder/folder.types";
-import { NotAuthorizedError } from "@webiny/api-security";
-import { ListFoldersRepository } from "~/utils/ListFoldersRepository";
-import { ListMeta } from "~/types";
-import { folderCacheFactory } from "~/utils/FoldersCacheFactory";
-
-export type FolderAccessLevel = "owner" | "viewer" | "editor" | "public";
-
-export interface FolderPermission {
-    target: string;
-    level: FolderAccessLevel;
-    inheritedFrom?: string;
-}
-
-export interface FolderPermissionsListItem {
-    folderId: string;
-    permissions: FolderPermission[];
-}
-
-export type FolderPermissionsList = FolderPermissionsListItem[];
-
-export interface CanAccessFolderContentParams {
-    folder: Pick<Folder, "id" | "type" | "parentId">;
-    rwd?: "r" | "w" | "d";
-    foldersList?: Folder[];
-}
-
-export interface CanAccessFolderParams extends CanAccessFolderContentParams {
-    managePermissions?: boolean;
-}
-
-interface FilterFoldersParams {
-    folders: Array<Folder>;
-    rwd?: "r" | "w" | "d";
-}
-
-interface GetFolderPermissionsParams {
-    folder: Pick<Folder, "id" | "type">;
-    foldersList?: Folder[];
-}
-
-interface ListFolderPermissionsParams {
-    folderType: string;
-    foldersList?: Folder[];
-}
-
-export interface FolderLevelPermissionsParams {
-    getIdentity: Authentication["getIdentity"];
-    listIdentityTeams: () => Promise<Team[]>;
-    listPermissions: () => Promise<SecurityPermission[]>;
-    listAllFolders: (params: ListFoldersParams) => Promise<[Folder[], ListMeta]>;
-    canUseTeams: () => boolean;
-    canUseFolderLevelPermissions: () => boolean;
-    isAuthorizationEnabled: () => boolean;
-}
-
-export class FolderLevelPermissions {
-    canUseFolderLevelPermissions: () => boolean;
-
-    private readonly getIdentity: Authentication["getIdentity"];
-    private readonly listIdentityTeams: () => Promise<Team[]>;
-    private readonly listPermissions: () => Promise<SecurityPermission[]>;
-    private readonly canUseTeams: () => boolean;
-    private readonly isAuthorizationEnabled: () => boolean;
-    private foldersPermissionsLists: Record<string, Promise<FolderPermissionsList> | null> = {};
-    private foldersLoader: ListFoldersRepository;
-
-    constructor(params: FolderLevelPermissionsParams) {
-        this.getIdentity = params.getIdentity;
-        this.listIdentityTeams = params.listIdentityTeams;
-        this.listPermissions = params.listPermissions;
-        this.canUseTeams = params.canUseTeams;
-        this.canUseFolderLevelPermissions = () => {
-            const identity = this.getIdentity();
-
-            // FLPs only work with authenticated identities (logged-in users).
-            if (!identity) {
-                return false;
-            }
-
-            // At the moment, we only want FLP to be used with identities of type "admin".
-            // This temporarily addresses the issue of API keys not being able to access content, because
-            // FLPs doesn't work with them. Once we start adding FLPs to API keys, we can remove this check.
-            if (identity.type !== "admin") {
-                return false;
-            }
-
-            return params.canUseFolderLevelPermissions();
-        };
-
-        this.isAuthorizationEnabled = params.isAuthorizationEnabled;
-
-        // Delete the cache on constructor to avoid duplicated permissions lists,
-        // especially when calculating permissions based on folder parents.
-        folderCacheFactory.deleteCache();
-        this.foldersLoader = new ListFoldersRepository({
-            gateway: params.listAllFolders
-        });
-    }
-
-    async listAllFolders(folderType: string): Promise<Folder[]> {
-        return await this.foldersLoader.execute(folderType);
-    }
-
-    async listAllFoldersWithPermissions(folderType: string) {
-        const folders = await this.listAllFolders(folderType);
-
-        // Filter folders based on permissions and assign permissions to each folder.
-        const filteredFoldersWithPermissions = await this.filterFolders({
-            folders,
-            rwd: "r"
-        });
-
-        await this.assignFolderPermissions(filteredFoldersWithPermissions);
-
-        return filteredFoldersWithPermissions;
-    }
-
-    invalidateFoldersCache(folderType?: string) {
-        if (folderType) {
-            folderCacheFactory.getCache(folderType).clear();
-        } else {
-            folderCacheFactory.deleteCache();
-        }
-    }
-
-    invalidateFoldersPermissionsListCache(folderType?: string) {
-        if (folderType) {
-            if (folderType in this.foldersPermissionsLists) {
-                delete this.foldersPermissionsLists[folderType];
-            }
-        } else {
-            folderCacheFactory.deleteCache();
-        }
-    }
-
-    addFolderToCache(folderType: string, folder: Folder) {
-        folderCacheFactory.getCache(folderType).addItems([folder]);
-    }
-
-    updateFoldersCache(folderType: string, modifier: (folder: Folder) => Folder) {
-        folderCacheFactory.getCache(folderType).updateItems(modifier);
-    }
-
-    async listFoldersPermissions(
-        params: ListFolderPermissionsParams
-    ): Promise<FolderPermissionsList> {
-        const existingFoldersPermissionsList = this.foldersPermissionsLists[params.folderType];
-        if (existingFoldersPermissionsList) {
-            return existingFoldersPermissionsList;
-        }
-
-        this.foldersPermissionsLists[params.folderType] = new Promise(async resolve => {
-            if (!this.canUseFolderLevelPermissions() || !this.isAuthorizationEnabled()) {
-                resolve([]);
-                return;
-            }
-
-            const { folderType, foldersList } = params;
-
-            const allFolders = foldersList || (await this.listAllFolders(folderType));
-            const identity = this.getIdentity();
-            const permissions = await this.listPermissions();
-
-            let identityTeams: Team[];
-            if (this.canUseTeams()) {
-                identityTeams = await this.listIdentityTeams();
-            }
-
-            const processedFolderPermissions: FolderPermissionsListItem[] = [];
-
-            const processFolderPermissions = (folder: Folder) => {
-                if (processedFolderPermissions.some(fp => fp.folderId === folder.id)) {
-                    return;
-                }
-
-                // Copy permissions, so we don't modify the original object.
-                const currentFolderPermissions: FolderPermissionsListItem = {
-                    folderId: folder.id,
-                    // On new folders, permissions can be `null`. Guard against that.
-                    permissions: folder.permissions?.map(permission => ({ ...permission })) || []
-                };
-
-                // Check for permissions inherited from parent folder.
-                if (folder.parentId) {
-                    const parentFolder = allFolders!.find(f => f.id === folder.parentId)!;
-                    if (parentFolder) {
-                        // First check if the parent folder has already been processed.
-                        let processedParentFolderPermissions = processedFolderPermissions.find(
-                            fp => fp.folderId === parentFolder.id
-                        );
-
-                        // If not, process the parent folder.
-                        if (!processedParentFolderPermissions) {
-                            processFolderPermissions(parentFolder);
-                            processedParentFolderPermissions = processedFolderPermissions.find(
-                                fp => fp.folderId === folder.parentId
-                            );
-                        }
-
-                        // If the parent folder has permissions, let's add them to the current folder.
-                        if (processedParentFolderPermissions) {
-                            const isPublicParentFolder =
-                                processedParentFolderPermissions.permissions.some(
-                                    p => p.level === "public"
-                                );
-
-                            // We inherit parent permissions if:
-                            // 1. the parent folder is not public or...
-                            // 2. ...the parent folder is public, but the current folder doesn't have any permissions set
-                            const mustInherit =
-                                !isPublicParentFolder ||
-                                currentFolderPermissions.permissions.length === 0;
-
-                            if (mustInherit) {
-                                const inheritedPermissions =
-                                    processedParentFolderPermissions.permissions.map(p => {
-                                        return {
-                                            ...p,
-                                            inheritedFrom:
-                                                "parent:" +
-                                                processedParentFolderPermissions!.folderId
-                                        };
-                                    });
-
-                                currentFolderPermissions.permissions.push(...inheritedPermissions);
-                            }
-                        }
-                    }
-                }
-
-                // Let's ensure current identity's permission is included in the permissions array.
-                // We first check if the current identity is already included in the permissions array.
-                // If not, we check if the user has full access or if the team user belongs to has access.
-                const currentIdentityIncludedInPermissions =
-                    currentFolderPermissions.permissions.some(
-                        p => p.target === `admin:${identity.id}`
-                    );
-
-                const hasFullAccess = permissions.some(p => p.name === "*");
-
-                if (currentIdentityIncludedInPermissions) {
-                    // 1. Ensure existing identity permission is always the first one in the array.
-                    const currentIdentityPermissionIndex =
-                        currentFolderPermissions.permissions.findIndex(
-                            p => p.target === `admin:${identity.id}`
-                        );
-
-                    if (currentIdentityPermissionIndex > 0) {
-                        const [currentIdentityPermission] =
-                            currentFolderPermissions.permissions.splice(
-                                currentIdentityPermissionIndex,
-                                1
-                            );
-                        currentFolderPermissions.permissions.unshift(currentIdentityPermission);
-                    }
-
-                    // 2. We must ensure current identity has the "owner" level if they possess full access
-                    // based on security permissions. This protects us from non-full-access users restricting
-                    // access to full-access users. This should not happen. Full-access users should always
-                    // be in control of the permissions for a folder.
-                    if (hasFullAccess) {
-                        const accessInheritedFrom =
-                            currentFolderPermissions.permissions[0].inheritedFrom;
-
-                        // Why are we checking for non-existence of `accessInheritedFrom`?
-                        // Because if it doesn't exist, it means the permission is not inherited from
-                        // a parent folder, which means it's a direct permission set on the folder.
-                        // In this case, we must ensure the permission is set to "owner".
-                        if (!accessInheritedFrom) {
-                            currentFolderPermissions.permissions[0] = {
-                                target: `admin:${identity.id}`,
-                                level: "owner",
-                                inheritedFrom: "role:full-access"
-                            };
-                        }
-                    }
-                } else {
-                    // Current identity not included in permissions? Let's add it.
-                    let currentIdentityPermission: FolderPermission | null = null;
-
-                    // 1. Check if the user has full access.
-                    if (hasFullAccess) {
-                        currentIdentityPermission = {
-                            target: `admin:${identity.id}`,
-                            level: "owner",
-                            inheritedFrom: "role:full-access"
-                        };
-                    } else if (identityTeams.length) {
-                        // 2. Check the teams user belongs to and that grant access to the folder.
-                        for (const identityTeam of identityTeams) {
-                            const teamPermission = currentFolderPermissions.permissions.find(
-                                p => p.target === `team:${identityTeam!.id}`
-                            );
-
-                            if (teamPermission) {
-                                currentIdentityPermission = {
-                                    target: `admin:${identity.id}`,
-                                    level: teamPermission.level,
-                                    inheritedFrom: "team:" + identityTeam!.id
-                                };
-                            }
-                        }
-                    }
-
-                    if (currentIdentityPermission) {
-                        // If permission is found, let's add it to the beginning of the array.
-                        // We're doing this just because it looks nicer in the UI.
-                        currentFolderPermissions.permissions.unshift(currentIdentityPermission);
-                    }
-                }
-
-                // Note that this can only happen with root folders. All other (child) folders will
-                // always have at least one permission (inherited from parent).
-                const mustAddPublicPermission = currentFolderPermissions.permissions.length === 0;
-                if (mustAddPublicPermission) {
-                    currentFolderPermissions.permissions = [
-                        {
-                            target: `admin:${identity.id}`,
-                            level: "public",
-                            inheritedFrom: "public"
-                        }
-                    ];
-                }
-
-                processedFolderPermissions.push(currentFolderPermissions);
-            };
-
-            for (let i = 0; i < allFolders!.length; i++) {
-                const folder = allFolders![i];
-                processFolderPermissions(folder);
-            }
-
-            resolve(processedFolderPermissions);
-            return;
-            //return processedFolderPermissions;
-        });
-
-        return this.foldersPermissionsLists[params.folderType]!;
-    }
-
-    async getFolderPermissions(
-        params: GetFolderPermissionsParams
-    ): Promise<FolderPermissionsListItem | undefined> {
-        const { folder, foldersList } = params;
-        const folderPermissionsList = await this.listFoldersPermissions({
-            folderType: folder.type,
-            foldersList
-        });
-
-        return folderPermissionsList.find(fp => fp.folderId === folder.id);
-    }
-
-    async canAccessFolder(params: CanAccessFolderParams) {
-        if (!this.canUseFolderLevelPermissions() || !this.isAuthorizationEnabled()) {
-            return true;
-        }
-
-        const { folder } = params;
-
-        const folderPermissions = await this.getFolderPermissions({
-            folder,
-            foldersList: params.foldersList
-        });
-
-        const identity = this.getIdentity();
-        const currentIdentityPermission = folderPermissions?.permissions.find(p => {
-            return p.target === `admin:${identity.id}`;
-        });
-
-        if (!currentIdentityPermission) {
-            return false;
-        }
-
-        const { level } = currentIdentityPermission;
-
-        if (params.managePermissions) {
-            return level === "owner";
-        }
-
-        // Checking for "write" or "delete" access. Allow only if the
-        // user is an owner or the folder is public (no FLP assigned).
-        if (params.rwd !== "r") {
-            return level === "owner" || level === "public";
-        }
-
-        return true;
-    }
-
-    async ensureCanAccessFolder(params: CanAccessFolderParams) {
-        const canAccessFolder = await this.canAccessFolder(params);
-        if (!canAccessFolder) {
-            throw new NotAuthorizedError();
-        }
-    }
-
-    canManageFolderPermissions(folder: Folder) {
-        if (!this.canUseFolderLevelPermissions()) {
-            return false;
-        }
-
-        if (!this.isAuthorizationEnabled()) {
-            return true;
-        }
-
-        return this.canAccessFolder({ folder, rwd: "w", managePermissions: true });
-    }
-
-    canManageFolderStructure(folder: Folder) {
-        if (!this.canUseFolderLevelPermissions() || !this.isAuthorizationEnabled()) {
-            return true;
-        }
-
-        return this.canAccessFolder({ folder, rwd: "w" });
-    }
-
-    canManageFolderContent(folder: Folder) {
-        if (!this.canUseFolderLevelPermissions() || !this.isAuthorizationEnabled()) {
-            return true;
-        }
-
-        return this.canAccessFolderContent({ folder, rwd: "w" });
-    }
-
-    async canAccessFolderContent(params: CanAccessFolderContentParams) {
-        if (!this.canUseFolderLevelPermissions() || !this.isAuthorizationEnabled()) {
-            return true;
-        }
-
-        const { folder, foldersList } = params;
-
-        const folderPermissions = await this.getFolderPermissions({
-            folder,
-            foldersList
-        });
-
-        const identity = this.getIdentity();
-        const currentIdentityPermission = folderPermissions?.permissions.find(p => {
-            return p.target === `admin:${identity.id}`;
-        });
-
-        if (!currentIdentityPermission) {
-            return false;
-        }
-
-        // If the user is not an owner and we're checking for "write" or
-        // "delete" access, then we can immediately return false.
-        if (params.rwd !== "r") {
-            const { level } = currentIdentityPermission;
-            return level !== "viewer";
-        }
-
-        return true;
-    }
-
-    async ensureCanAccessFolderContent(params: CanAccessFolderContentParams) {
-        const canAccessFolderContent = await this.canAccessFolderContent(params);
-        if (!canAccessFolderContent) {
-            throw new NotAuthorizedError();
-        }
-    }
-
-    async canCreateFolderInRoot() {
-        return true;
-    }
-
-    async filterFolders(params: FilterFoldersParams) {
-        const filteredFolders: Folder[] = [];
-
-        const { folders, rwd } = params;
-        for (let i = 0; i < folders.length; i++) {
-            const folder = folders[i];
-            const canAccessFolder = await this.canAccessFolder({ folder, rwd });
-            if (canAccessFolder) {
-                filteredFolders.push(folder);
-            }
-        }
-
-        return filteredFolders;
-    }
-
-    async assignFolderPermissions(folder: Folder | Folder[]) {
-        const folders = Array.isArray(folder) ? folder : [folder];
-
-        for (let i = 0; i < folders.length; i++) {
-            const folder = folders[i];
-            const folderPermissions = await this.getFolderPermissions({ folder });
-            if (folderPermissions) {
-                folder.permissions = folderPermissions.permissions;
-            } else {
-                folder.permissions = [];
-            }
-        }
-    }
-
-    permissionsIncludeNonInheritedPermissions(folderPermissionsList?: FolderPermission[]) {
-        return folderPermissionsList?.some(p => !p.inheritedFrom);
-    }
-}
diff --git a/packages/api-aco/src/utils/Path.ts b/packages/api-aco/src/utils/Path.ts
new file mode 100644
index 00000000000..6075963b22b
--- /dev/null
+++ b/packages/api-aco/src/utils/Path.ts
@@ -0,0 +1,11 @@
+import { ROOT_FOLDER } from "~/constants";
+
+export class Path {
+    static create(slug: string, parentPath?: string) {
+        if (parentPath) {
+            return `${parentPath}/${slug}`;
+        }
+
+        return `${ROOT_FOLDER}/${slug}`;
+    }
+}
diff --git a/packages/api-aco/src/utils/decorators/CmsEntriesCrudDecorators.ts b/packages/api-aco/src/utils/decorators/CmsEntriesCrudDecorators.ts
index 4f9764a8793..a9419217a33 100644
--- a/packages/api-aco/src/utils/decorators/CmsEntriesCrudDecorators.ts
+++ b/packages/api-aco/src/utils/decorators/CmsEntriesCrudDecorators.ts
@@ -1,8 +1,7 @@
 import { AcoContext } from "~/types";
-import { createWhere } from "./where";
-import { ROOT_FOLDER } from "./constants";
-import { filterEntriesByFolderFactory } from "./filterEntriesByFolderFactory";
-import { createFolderType } from "./createFolderType";
+import { ROOT_FOLDER } from "~/constants";
+import { ListEntriesFactory } from "./ListEntriesFactory";
+import { FilterEntriesByFolderFactory } from "./FilterEntriesByFolderFactory";
 import { decorateIfModelAuthorizationEnabled } from "./decorateIfModelAuthorizationEnabled";
 
 type Context = Pick<AcoContext, "aco" | "cms">;
@@ -22,43 +21,20 @@ export class CmsEntriesCrudDecorators {
         const context = this.context;
         const folderLevelPermissions = context.aco.folderLevelPermissions;
 
-        const filterEntriesByFolder = filterEntriesByFolderFactory(context, folderLevelPermissions);
+        const filterEntriesByFolder = new FilterEntriesByFolderFactory(folderLevelPermissions);
+        const listEntriesHandler = new ListEntriesFactory(folderLevelPermissions);
 
         decorateIfModelAuthorizationEnabled(context.cms, "listEntries", async (...allParams) => {
-            const [decoratee, model, params] = allParams;
-            const folderType = createFolderType(model);
-            const folders = await folderLevelPermissions.listAllFoldersWithPermissions(folderType);
-
-            const where = createWhere({
-                model,
-                where: params.where,
-                folders
-            });
-            return decoratee(model, {
-                ...params,
-                where
-            });
+            const [decoratee, model, initialParams] = allParams;
+            return await listEntriesHandler.execute({ decoratee, model, initialParams });
         });
 
         decorateIfModelAuthorizationEnabled(
             context.cms,
             "listLatestEntries",
             async (...allParams) => {
-                const [decoratee, model, params] = allParams;
-                const folderType = createFolderType(model);
-                const folders = await folderLevelPermissions.listAllFoldersWithPermissions(
-                    folderType
-                );
-
-                const where = createWhere({
-                    model,
-                    where: params?.where || {},
-                    folders
-                });
-                return decoratee(model, {
-                    ...params,
-                    where
-                });
+                const [decoratee, model, initialParams] = allParams;
+                return await listEntriesHandler.execute({ decoratee, model, initialParams });
             }
         );
 
@@ -66,21 +42,8 @@ export class CmsEntriesCrudDecorators {
             context.cms,
             "listPublishedEntries",
             async (...allParams) => {
-                const [decoratee, model, params] = allParams;
-                const folderType = createFolderType(model);
-                const folders = await folderLevelPermissions.listAllFoldersWithPermissions(
-                    folderType
-                );
-
-                const where = createWhere({
-                    model,
-                    where: params?.where || {},
-                    folders
-                });
-                return decoratee(model, {
-                    ...params,
-                    where
-                });
+                const [decoratee, model, initialParams] = allParams;
+                return await listEntriesHandler.execute({ decoratee, model, initialParams });
             }
         );
 
@@ -88,21 +51,8 @@ export class CmsEntriesCrudDecorators {
             context.cms,
             "listDeletedEntries",
             async (...allParams) => {
-                const [decoratee, model, params] = allParams;
-                const folderType = createFolderType(model);
-                const folders = await folderLevelPermissions.listAllFoldersWithPermissions(
-                    folderType
-                );
-
-                const where = createWhere({
-                    model,
-                    where: params?.where || {},
-                    folders
-                });
-                return decoratee(model, {
-                    ...params,
-                    where
-                });
+                const [decoratee, model, initialParams] = allParams;
+                return await listEntriesHandler.execute({ decoratee, model, initialParams });
             }
         );
 
@@ -115,9 +65,9 @@ export class CmsEntriesCrudDecorators {
                 return entry;
             }
 
-            const folder = await context.aco.folder.get(folderId);
+            const permissions = await folderLevelPermissions.getFolderLevelPermissions(folderId);
             await folderLevelPermissions.ensureCanAccessFolderContent({
-                folder,
+                permissions,
                 rwd: "r"
             });
 
@@ -132,9 +82,9 @@ export class CmsEntriesCrudDecorators {
             if (!folderId || folderId === ROOT_FOLDER) {
                 return entry;
             }
-            const folder = await context.aco.folder.get(folderId);
+            const permissions = await folderLevelPermissions.getFolderLevelPermissions(folderId);
             await folderLevelPermissions.ensureCanAccessFolderContent({
-                folder,
+                permissions,
                 rwd: "r"
             });
             return entry;
@@ -148,7 +98,7 @@ export class CmsEntriesCrudDecorators {
 
                 const entries = await decoratee(model, ids);
 
-                return filterEntriesByFolder(model, entries);
+                return filterEntriesByFolder.execute(entries);
             }
         );
 
@@ -159,22 +109,21 @@ export class CmsEntriesCrudDecorators {
                 const [decoratee, model, ids] = allParams;
 
                 const entries = await decoratee(model, ids);
-                return filterEntriesByFolder(model, entries);
+                return filterEntriesByFolder.execute(entries);
             }
         );
 
         decorateIfModelAuthorizationEnabled(context.cms, "createEntry", async (...allParams) => {
             const [decoratee, model, params, options] = allParams;
-
             const folderId = params.wbyAco_location?.folderId || params.location?.folderId;
 
             if (!folderId || folderId === ROOT_FOLDER) {
                 return decoratee(model, params, options);
             }
 
-            const folder = await context.aco.folder.get(folderId);
+            const permissions = await folderLevelPermissions.getFolderLevelPermissions(folderId);
             await folderLevelPermissions.ensureCanAccessFolderContent({
-                folder,
+                permissions,
                 rwd: "w"
             });
 
@@ -196,9 +145,11 @@ export class CmsEntriesCrudDecorators {
                     return decoratee(model, id, input, options);
                 }
 
-                const folder = await context.aco.folder.get(folderId);
+                const permissions = await folderLevelPermissions.getFolderLevelPermissions(
+                    folderId
+                );
                 await folderLevelPermissions.ensureCanAccessFolderContent({
-                    folder,
+                    permissions,
                     rwd: "w"
                 });
 
@@ -217,9 +168,9 @@ export class CmsEntriesCrudDecorators {
                 return decoratee(model, id, input, meta, options);
             }
 
-            const folder = await context.aco.folder.get(folderId);
+            const permissions = await folderLevelPermissions.getFolderLevelPermissions(folderId);
             await folderLevelPermissions.ensureCanAccessFolderContent({
-                folder,
+                permissions,
                 rwd: "w"
             });
 
@@ -241,9 +192,9 @@ export class CmsEntriesCrudDecorators {
                 return decoratee(model, id, options);
             }
 
-            const folder = await context.aco.folder.get(folderId);
+            const permissions = await folderLevelPermissions.getFolderLevelPermissions(folderId);
             await folderLevelPermissions.ensureCanAccessFolderContent({
-                folder,
+                permissions,
                 rwd: "d"
             });
 
@@ -265,9 +216,11 @@ export class CmsEntriesCrudDecorators {
                     return decoratee(model, id);
                 }
 
-                const folder = await context.aco.folder.get(folderId);
+                const permissions = await folderLevelPermissions.getFolderLevelPermissions(
+                    folderId
+                );
                 await folderLevelPermissions.ensureCanAccessFolderContent({
-                    folder,
+                    permissions,
                     rwd: "d"
                 });
 
@@ -295,9 +248,11 @@ export class CmsEntriesCrudDecorators {
                 /**
                  * If entry current folder is not a root, check for access
                  */
-                const folder = await context.aco.folder.get(folderId);
+                const permissions = await folderLevelPermissions.getFolderLevelPermissions(
+                    folderId
+                );
                 await folderLevelPermissions.ensureCanAccessFolderContent({
-                    folder,
+                    permissions,
                     rwd: "w"
                 });
             }
@@ -305,9 +260,11 @@ export class CmsEntriesCrudDecorators {
              * If target folder is not a ROOT_FOLDER, check for access.
              */
             if (targetFolderId !== ROOT_FOLDER) {
-                const folder = await context.aco.folder.get(targetFolderId);
+                const permissions = await folderLevelPermissions.getFolderLevelPermissions(
+                    folderId
+                );
                 await folderLevelPermissions.ensureCanAccessFolderContent({
-                    folder,
+                    permissions,
                     rwd: "w"
                 });
             }
diff --git a/packages/api-aco/src/utils/decorators/FilterEntriesByFolderFactory.ts b/packages/api-aco/src/utils/decorators/FilterEntriesByFolderFactory.ts
new file mode 100644
index 00000000000..00d3a3ece22
--- /dev/null
+++ b/packages/api-aco/src/utils/decorators/FilterEntriesByFolderFactory.ts
@@ -0,0 +1,34 @@
+import { FolderLevelPermissions } from "~/flp";
+import { CmsEntry } from "@webiny/api-headless-cms/types";
+import { ROOT_FOLDER } from "~/constants";
+
+export class FilterEntriesByFolderFactory {
+    private readonly folderLevelPermissions: FolderLevelPermissions;
+
+    constructor(folderLevelPermissions: FolderLevelPermissions) {
+        this.folderLevelPermissions = folderLevelPermissions;
+    }
+
+    public async execute(entries: CmsEntry[]): Promise<CmsEntry[]> {
+        const results = await Promise.all(
+            entries.map(async entry => {
+                const folderId = entry.location?.folderId;
+                if (!folderId || folderId === ROOT_FOLDER) {
+                    return entry;
+                }
+
+                const permissions = await this.folderLevelPermissions.getFolderLevelPermissions(
+                    folderId
+                );
+                const canAccessFolderContent =
+                    await this.folderLevelPermissions.canAccessFolderContent({
+                        permissions,
+                        rwd: "r"
+                    });
+                return canAccessFolderContent ? entry : null;
+            })
+        );
+
+        return results.filter((entry): entry is CmsEntry => !!entry);
+    }
+}
diff --git a/packages/api-aco/src/utils/decorators/ListEntriesFactory.ts b/packages/api-aco/src/utils/decorators/ListEntriesFactory.ts
new file mode 100644
index 00000000000..77627736e9a
--- /dev/null
+++ b/packages/api-aco/src/utils/decorators/ListEntriesFactory.ts
@@ -0,0 +1,116 @@
+import { FolderLevelPermissions } from "~/flp";
+import {
+    CmsEntry,
+    CmsEntryListParams,
+    CmsEntryMeta,
+    CmsEntryValues,
+    type CmsModel
+} from "@webiny/api-headless-cms/types";
+import { hasRootFolderId } from "~/utils/decorators/hasRootFolderId";
+import type { FolderPermission } from "~/flp/flp.types";
+
+interface ListEntriesFactoryCallbackParams {
+    decoratee: <T extends CmsEntryValues = CmsEntryValues>(
+        model: CmsModel,
+        params: CmsEntryListParams
+    ) => Promise<[CmsEntry<T>[], CmsEntryMeta]>;
+    model: CmsModel;
+    initialParams?: CmsEntryListParams;
+}
+
+export class ListEntriesFactory {
+    private readonly folderLevelPermissions: FolderLevelPermissions;
+    private readonly permissionsCache: Map<string, FolderPermission[]>;
+
+    constructor(folderLevelPermissions: FolderLevelPermissions) {
+        this.folderLevelPermissions = folderLevelPermissions;
+        this.permissionsCache = new Map();
+    }
+
+    public async execute({
+        decoratee,
+        model,
+        initialParams = {}
+    }: ListEntriesFactoryCallbackParams): Promise<[CmsEntry[], CmsEntryMeta]> {
+        const limit = initialParams?.limit || 50;
+        const where = initialParams?.where;
+        const params = { ...initialParams, limit };
+        const hasRootFolder = hasRootFolderId({ model, where });
+
+        // If we're querying the root folder, skip permission checks
+        if (hasRootFolder) {
+            return await decoratee(model, params);
+        }
+
+        const resultEntries: CmsEntry[] = [];
+        let totalCount = 0;
+        let hasMoreItems = true;
+        let cursor: string | null = null;
+        let fetchedAll = false;
+        let afterCursor = params.after;
+
+        // Process entries in batches until we have enough results or reach the end
+        while (!fetchedAll) {
+            const queryParams: CmsEntryListParams = { ...params, after: afterCursor };
+            const [entries, currentMeta] = await decoratee(model, queryParams);
+
+            if (totalCount === 0) {
+                totalCount = currentMeta.totalCount;
+            }
+
+            // Process each entry and check folder permissions
+            for (const entry of entries) {
+                const folderId = entry.values?.location?.folderId || entry.location?.folderId;
+
+                // If entry has no folderId, it's not using ACO folders system
+                // Include it in results as it's not subject to folder permissions
+                if (!folderId) {
+                    resultEntries.push(entry);
+                    continue;
+                }
+
+                const permissions = await this.getPermissions(folderId);
+
+                // If no FLP exists for the folder, the entry is accessible
+                // This means the folder doesn't have any permission restrictions
+                if (!permissions.length) {
+                    resultEntries.push(entry);
+                    continue;
+                }
+
+                // Check if user has read permission for the folder
+                if (
+                    await this.folderLevelPermissions.canAccessFolderContent({
+                        permissions,
+                        rwd: "r"
+                    })
+                ) {
+                    resultEntries.push(entry);
+                } else {
+                    totalCount--;
+                }
+            }
+
+            // Determine if we need to fetch more entries
+            if (!currentMeta.hasMoreItems || resultEntries.length >= limit) {
+                fetchedAll = true;
+                hasMoreItems = currentMeta.hasMoreItems;
+                cursor = currentMeta.cursor;
+            } else {
+                afterCursor = currentMeta.cursor;
+            }
+        }
+
+        return [resultEntries, { totalCount, hasMoreItems, cursor } as CmsEntryMeta];
+    }
+
+    private async getPermissions(folderId: string): Promise<FolderPermission[]> {
+        if (this.permissionsCache.has(folderId)) {
+            return this.permissionsCache.get(folderId) ?? [];
+        }
+
+        const permissions = await this.folderLevelPermissions.getFolderLevelPermissions(folderId);
+        this.permissionsCache.set(folderId, permissions);
+        return permissions;
+    }
+}
diff --git a/packages/api-aco/src/utils/decorators/createFolderType.ts b/packages/api-aco/src/utils/decorators/createFolderType.ts
deleted file mode 100644
index 14b7f7ad5c0..00000000000
--- a/packages/api-aco/src/utils/decorators/createFolderType.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { CmsModel } from "@webiny/api-headless-cms/types";
-import { isPageModel } from "./isPageModel";
-
-export const createFolderType = (model: CmsModel): "FmFile" | "PbPage" | `cms:${string}` => {
-    if (model.modelId === "fmFile") {
-        return "FmFile";
-    } else if (isPageModel(model)) {
-        return "PbPage";
-    }
-    return `cms:${model.modelId}`;
-};
diff --git a/packages/api-aco/src/utils/decorators/decorateIfModelAuthorizationEnabled.ts b/packages/api-aco/src/utils/decorators/decorateIfModelAuthorizationEnabled.ts
index 0e44f25d5f3..3dbc3f9e641 100644
--- a/packages/api-aco/src/utils/decorators/decorateIfModelAuthorizationEnabled.ts
+++ b/packages/api-aco/src/utils/decorators/decorateIfModelAuthorizationEnabled.ts
@@ -1,4 +1,5 @@
 import { CmsModel, HeadlessCms } from "@webiny/api-headless-cms/types";
+import { FOLDER_MODEL_ID } from "~/folder/folder.model";
 
 /**
  * This type matches any function that has a CmsModel as the first parameter.
@@ -32,6 +33,10 @@ const modelAuthorizationDisabled = (model: CmsModel) => {
     return model.authorization === false;
 };
 
+const isFolderModel = (model: CmsModel) => {
+    return model.modelId === FOLDER_MODEL_ID;
+};
+
 export const decorateIfModelAuthorizationEnabled = <
     /**
      * This allows us to only have an auto-complete of `ModelCallable` methods.
@@ -50,6 +55,10 @@ export const decorateIfModelAuthorizationEnabled = <
     const decoratee = root[method].bind(root) as ModelCallable;
     root[method] = ((...params: Parameters<ModelMethods<HeadlessCms>[M]>) => {
         const [model, ...rest] = params;
+        if (isFolderModel(model)) {
+            return decoratee(model, ...rest);
+        }
+
         if (modelAuthorizationDisabled(model)) {
             return decoratee(model, ...rest);
         }
diff --git a/packages/api-aco/src/utils/decorators/filterEntriesByFolderFactory.ts b/packages/api-aco/src/utils/decorators/filterEntriesByFolderFactory.ts
deleted file mode 100644
index 9dc5db3349c..00000000000
--- a/packages/api-aco/src/utils/decorators/filterEntriesByFolderFactory.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import { AcoContext } from "~/types";
-import { CmsEntry, CmsModel } from "@webiny/api-headless-cms/types";
-import { NotFoundError } from "@webiny/handler-graphql";
-import { FolderLevelPermissions } from "~/utils/FolderLevelPermissions";
-import { ROOT_FOLDER } from "./constants";
-
-type Context = Pick<AcoContext, "aco" | "cms">;
-
-import { createFolderType } from "./createFolderType";
-
-export const filterEntriesByFolderFactory = (
-    context: Context,
-    permissions: FolderLevelPermissions
-) => {
-    return async (model: CmsModel, entries: CmsEntry[]) => {
-        const [folders] = await context.aco.folder.listAll({
-            where: {
-                type: createFolderType(model)
-            }
-        });
-
-        const results = await Promise.all(
-            entries.map(async entry => {
-                const folderId = entry.location?.folderId;
-                if (!folderId || folderId === ROOT_FOLDER) {
-                    return entry;
-                }
-
-                const folder = folders.find(folder => folder.id === folderId);
-                if (!folder) {
-                    throw new NotFoundError(`Folder "${folderId}" not found.`);
-                }
-                const result = await permissions.canAccessFolderContent({
-                    folder,
-                    rwd: "r"
-                });
-                return result ? entry : null;
-            })
-        );
-
-        return results.filter((entry): entry is CmsEntry => !!entry);
-    };
-};
diff --git a/packages/api-aco/src/utils/decorators/hasRootFolderId.ts b/packages/api-aco/src/utils/decorators/hasRootFolderId.ts
new file mode 100644
index 00000000000..5481009ab7f
--- /dev/null
+++ b/packages/api-aco/src/utils/decorators/hasRootFolderId.ts
@@ -0,0 +1,24 @@
+import isPlainObject from "lodash/isPlainObject";
+import { isPageModel } from "~/utils/decorators/isPageModel";
+import { CmsEntryListWhere, CmsModel } from "@webiny/api-headless-cms/types";
+import { ROOT_FOLDER } from "~/constants";
+
+interface Params {
+    model: CmsModel;
+    where: CmsEntryListWhere | undefined;
+}
+
+export const hasRootFolderId = ({ model, where }: Params): boolean => {
+    if (!where) {
+        return false;
+    }
+
+    const key = isPageModel(model) ? "location" : "wbyAco_location";
+    const location = where[key];
+
+    if (typeof location === "object" && location !== null && isPlainObject(location)) {
+        return (location as Record<string, any>).folderId === ROOT_FOLDER;
+    }
+
+    return false;
+};
diff --git a/packages/api-aco/src/utils/decorators/where.ts b/packages/api-aco/src/utils/decorators/where.ts
deleted file mode 100644
index 65f76a51c3f..00000000000
--- a/packages/api-aco/src/utils/decorators/where.ts
+++ /dev/null
@@ -1,65 +0,0 @@
-import { CmsEntryListWhere, CmsModel } from "@webiny/api-headless-cms/types";
-import { Folder } from "~/folder/folder.types";
-import { ROOT_FOLDER } from "./constants";
-import { isPageModel } from "~/utils/decorators/isPageModel";
-
-interface Params {
-    model: CmsModel;
-    where: CmsEntryListWhere | undefined;
-    folders: Folder[];
-}
-
-/**
- * There are multiple cases that we need to handle:
- * * existing location with no AND conditional
- * * existing location with AND conditional
- * * no existing location with no AND conditional + with AND conditional
- */
-export const createWhere = (params: Params): CmsEntryListWhere | undefined => {
-    const { model, where, folders } = params;
-
-    // Once we migrate PB to HCMS, we can remove this check and always use `wbAco_location`.
-    const locationFieldName = isPageModel(model) ? "location" : "wbyAco_location";
-
-    const whereLocation = {
-        [locationFieldName]: {
-            // At the moment, all users can access entries in the root folder.
-            // Root folder level permissions cannot be set yet.
-            folderId_in: [ROOT_FOLDER, ...folders.map(folder => folder.id)]
-        }
-    };
-
-    if (!where) {
-        // If no `where` condition is present, that means we're performing a query
-        // across all folders. Still, with FLP enabled, we need to filter out
-        // folders to which the user does not have access.
-        return whereLocation;
-    }
-
-    const whereAnd = where.AND;
-    if (where[locationFieldName] && !whereAnd) {
-        return {
-            ...where,
-            AND: [
-                {
-                    ...whereLocation
-                }
-            ]
-        };
-    } else if (where[locationFieldName] && whereAnd) {
-        return {
-            ...where,
-            AND: [
-                {
-                    ...whereLocation
-                },
-                ...whereAnd
-            ]
-        };
-    }
-
-    return {
-        ...where,
-        ...whereLocation
-    };
-};
diff --git a/packages/api-aco/src/utils/getFolderAndItsAncestors.ts b/packages/api-aco/src/utils/getFolderAndItsAncestors.ts
deleted file mode 100644
index ea5f27d2183..00000000000
--- a/packages/api-aco/src/utils/getFolderAndItsAncestors.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-import { Folder } from "~/folder/folder.types";
-
-interface GetFolderAndItsAncestorsParams {
-    folder: Folder;
-    folders: Folder[];
-}
-
-export const getFolderAndItsAncestors = ({
-    folder,
-    folders
-}: GetFolderAndItsAncestorsParams): Folder[] => {
-    // Create a Map with folders, using folder.id as key
-    const folderMap = new Map<string, Folder>();
-    folders.forEach(folder => folderMap.set(folder.id, folder));
-
-    const findParents = (next: Folder[], current: Folder): Folder[] => {
-        // No folder found: return the result
-        if (!current) {
-            return next;
-        }
-
-        // Push the current folder into the accumulator array
-        next.push(current);
-
-        // No parentId found: return the result
-        if (!current.parentId) {
-            return next;
-        }
-
-        const parent = folderMap.get(current.parentId);
-
-        // No parent found: return the result
-        if (!parent) {
-            return next;
-        }
-
-        // Go ahead and find parent for the current parent
-        return findParents(next, parent);
-    };
-
-    // No folder found: return an empty array
-    if (!folder) {
-        return [];
-    }
-
-    // The folder has no parent (it's at root level): return an array with the folder
-    if (!folder.parentId) {
-        return [folder];
-    }
-
-    // Recursively find parents for a given folder id
-    return findParents([], folder);
-};
diff --git a/packages/api-aco/src/utils/pickEntryFieldValues.ts b/packages/api-aco/src/utils/pickEntryFieldValues.ts
index 805f1af3d72..82e06e9d8ef 100644
--- a/packages/api-aco/src/utils/pickEntryFieldValues.ts
+++ b/packages/api-aco/src/utils/pickEntryFieldValues.ts
@@ -3,7 +3,8 @@ import { CmsEntry } from "@webiny/api-headless-cms/types";
 export const baseFields = [
     // Entry ID is mapped to "id" (we don't use revisions with ACO entities).
     "id",
-
+    "tenant",
+    "locale",
     "createdOn",
     "modifiedOn",
     "savedOn",
diff --git a/packages/api-aco/tsconfig.build.json b/packages/api-aco/tsconfig.build.json
index 39857343434..387590d45eb 100644
--- a/packages/api-aco/tsconfig.build.json
+++ b/packages/api-aco/tsconfig.build.json
@@ -8,10 +8,14 @@
     { "path": "../api-i18n/tsconfig.build.json" },
     { "path": "../api-security/tsconfig.build.json" },
     { "path": "../api-tenancy/tsconfig.build.json" },
+    { "path": "../aws-sdk/tsconfig.build.json" },
+    { "path": "../db-dynamodb/tsconfig.build.json" },
     { "path": "../error/tsconfig.build.json" },
     { "path": "../handler/tsconfig.build.json" },
     { "path": "../handler-graphql/tsconfig.build.json" },
     { "path": "../pubsub/tsconfig.build.json" },
+    { "path": "../shared-aco/tsconfig.build.json" },
+    { "path": "../tasks/tsconfig.build.json" },
     { "path": "../utils/tsconfig.build.json" },
     { "path": "../validation/tsconfig.build.json" },
     { "path": "../api-admin-users/tsconfig.build.json" },
diff --git a/packages/api-aco/tsconfig.json b/packages/api-aco/tsconfig.json
index c2926205ad2..a7be807b666 100644
--- a/packages/api-aco/tsconfig.json
+++ b/packages/api-aco/tsconfig.json
@@ -8,10 +8,14 @@
     { "path": "../api-i18n" },
     { "path": "../api-security" },
     { "path": "../api-tenancy" },
+    { "path": "../aws-sdk" },
+    { "path": "../db-dynamodb" },
     { "path": "../error" },
     { "path": "../handler" },
     { "path": "../handler-graphql" },
     { "path": "../pubsub" },
+    { "path": "../shared-aco" },
+    { "path": "../tasks" },
     { "path": "../utils" },
     { "path": "../validation" },
     { "path": "../api-admin-users" },
@@ -43,6 +47,10 @@
       "@webiny/api-security": ["../api-security/src"],
       "@webiny/api-tenancy/*": ["../api-tenancy/src/*"],
       "@webiny/api-tenancy": ["../api-tenancy/src"],
+      "@webiny/aws-sdk/*": ["../aws-sdk/src/*"],
+      "@webiny/aws-sdk": ["../aws-sdk/src"],
+      "@webiny/db-dynamodb/*": ["../db-dynamodb/src/*"],
+      "@webiny/db-dynamodb": ["../db-dynamodb/src"],
       "@webiny/error/*": ["../error/src/*"],
       "@webiny/error": ["../error/src"],
       "@webiny/handler/*": ["../handler/src/*"],
@@ -51,6 +59,10 @@
       "@webiny/handler-graphql": ["../handler-graphql/src"],
       "@webiny/pubsub/*": ["../pubsub/src/*"],
       "@webiny/pubsub": ["../pubsub/src"],
+      "@webiny/shared-aco/*": ["../shared-aco/src/*"],
+      "@webiny/shared-aco": ["../shared-aco/src"],
+      "@webiny/tasks/*": ["../tasks/src/*"],
+      "@webiny/tasks": ["../tasks/src"],
       "@webiny/utils/*": ["../utils/src/*"],
       "@webiny/utils": ["../utils/src"],
       "@webiny/validation/*": ["../validation/src/*"],
diff --git a/packages/api-audit-logs/__tests__/createAuditLog.test.ts b/packages/api-audit-logs/__tests__/createAuditLog.test.ts
index 2d9b1dfa28c..fc5145690db 100644
--- a/packages/api-audit-logs/__tests__/createAuditLog.test.ts
+++ b/packages/api-audit-logs/__tests__/createAuditLog.test.ts
@@ -3,9 +3,12 @@ import { AuditAction } from "~/types";
 import { useHandler } from "./helpers/useHandler";
 import { ActionType } from "~/config";
 import { AUDIT_LOGS_TYPE } from "~/app/contants";
-import { compressor } from "~/utils/compressor";
+import { getDocumentClient } from "@webiny/project-utils/testing/dynamodb/index";
+import { parseIdentifier } from "@webiny/utils/parseIdentifier";
 
 describe("create audit log", () => {
+    const client = getDocumentClient();
+
     const audit: AuditAction = {
         app: {
             app: "cms",
@@ -37,6 +40,8 @@ describe("create audit log", () => {
     };
 
     it("should create a new audit log", async () => {
+        expect.assertions(3);
+
         const createAuditLog = getAuditConfig(audit);
 
         const { handler } = useHandler();
@@ -66,7 +71,7 @@ describe("create audit log", () => {
                 timestamp: expect.any(Date),
                 entityId,
                 message,
-                data: await compressor.compress(JSON.stringify(data))
+                data: JSON.stringify(data)
             },
             location: {
                 folderId: "root"
@@ -74,9 +79,32 @@ describe("create audit log", () => {
             tags: [],
             type: "AuditLogs"
         });
+
+        // @ts-expect-error
+        const partitionKey = `#CME#wby-aco-${result!.id}`;
+
+        const scanned = await client.scan({
+            TableName: process.env.DB_TABLE
+        });
+
+        for (const item of scanned.Items || []) {
+            if (item.PK.includes(partitionKey) === false) {
+                continue;
+            }
+            expect(item).toMatchObject({
+                PK: expect.stringContaining(partitionKey),
+                values: {
+                    "object@data": {
+                        "text@data": expect.stringMatching(`{"compression":"gzip","value":`)
+                    }
+                }
+            });
+        }
     });
 
     it("should list created logs", async () => {
+        expect.assertions(3);
+
         const createAuditLog = getAuditConfig(audit);
 
         const { handler } = useHandler();
@@ -117,5 +145,25 @@ describe("create audit log", () => {
             tags: [],
             type: "AuditLogs"
         });
+
+        const { id: partitionKey } = parseIdentifier(`${result!.id}`);
+
+        const scanned = await client.scan({
+            TableName: process.env.DB_TABLE
+        });
+
+        for (const item of scanned.Items || []) {
+            if (item.PK.includes(partitionKey) === false) {
+                continue;
+            }
+            expect(item).toMatchObject({
+                PK: expect.stringContaining(partitionKey),
+                values: {
+                    "object@data": {
+                        "text@data": expect.stringMatching(`{"compression":"gzip","value":`)
+                    }
+                }
+            });
+        }
     });
 });
diff --git a/packages/api-audit-logs/__tests__/helpers/handlerCore.ts b/packages/api-audit-logs/__tests__/helpers/handlerCore.ts
index 1603f6bf6bf..e9ba41a5301 100644
--- a/packages/api-audit-logs/__tests__/helpers/handlerCore.ts
+++ b/packages/api-audit-logs/__tests__/helpers/handlerCore.ts
@@ -28,6 +28,7 @@ import { AdminUsersStorageOperations } from "@webiny/api-admin-users/types";
 import createAdminUsersApp from "@webiny/api-admin-users";
 import { createMailerContext } from "@webiny/api-mailer";
 import { NullLicense } from "@webiny/wcp";
+import { getDocumentClient } from "@webiny/project-utils/testing/dynamodb";
 import { createAcoAuditLogsContext } from "~/app";
 
 export interface CreateHandlerCoreParams {
@@ -55,6 +56,7 @@ export const createHandlerCore = (params?: CreateHandlerCoreParams) => {
         setupTenancyAndSecurityGraphQL
     } = params || {};
 
+    const documentClient = getDocumentClient();
     const i18nStorage = getStorageOps("i18n");
     const fileManagerStorage = getStorageOps<FileManagerStorageOperations>("fileManager");
     const pageBuilderStorage = getStorageOps<PageBuilderStorageOperations>("pageBuilder");
@@ -152,7 +154,7 @@ export const createHandlerCore = (params?: CreateHandlerCoreParams) => {
                 storageOperations: formBuilderStorage.storageOperations
             }),
             createHeadlessCmsGraphQL(),
-            createAco(),
+            createAco({ documentClient }),
             createAuditLogs(),
             createAcoAuditLogsContext(),
             plugins,
diff --git a/packages/api-audit-logs/src/app/app.ts b/packages/api-audit-logs/src/app/app.ts
index 9666b47ae20..cc06f8f707c 100644
--- a/packages/api-audit-logs/src/app/app.ts
+++ b/packages/api-audit-logs/src/app/app.ts
@@ -1,6 +1,6 @@
+import type { AcoContext } from "@webiny/api-aco/types";
 import { IAcoAppRegisterParams, SearchRecord } from "@webiny/api-aco/types";
 import { AUDIT_LOGS_TYPE } from "./contants";
-import { compressor } from "~/utils/compressor";
 import { NotAuthorizedError } from "@webiny/api-security";
 
 const toDate = (value: string | Date) => {
@@ -14,16 +14,20 @@ const toDate = (value: string | Date) => {
     }
 };
 
-const decompressData = (entry: SearchRecord<any>): SearchRecord<any> => {
+const decompressData = async (
+    entry: SearchRecord<any>,
+    context: Pick<AcoContext, "compressor">
+): Promise<SearchRecord<any>> => {
     if (!entry.data?.data) {
         return entry;
     }
+
     return {
         ...entry,
         data: {
             ...entry.data,
             timestamp: toDate(entry.data.timestamp),
-            data: compressor.decompress(entry.data.data)
+            data: await context.compressor.decompress(JSON.parse(entry.data.data))
         }
     };
 };
@@ -100,13 +104,13 @@ export const createApp = (): IAcoAppRegisterParams => {
                 label: "Initiator"
             }
         ],
-        onEntry: async entry => {
-            return decompressData(entry);
+        onEntry: async (entry, context) => {
+            return decompressData(entry, context);
         },
-        onEntryList: async entries => {
-            return Promise.all(
-                entries.map(entry => {
-                    return decompressData(entry);
+        onEntryList: async (entries, context) => {
+            return await Promise.all(
+                entries.map(async entry => {
+                    return decompressData(entry, context);
                 })
             );
         },
diff --git a/packages/api-audit-logs/src/utils/compressor.ts b/packages/api-audit-logs/src/utils/compressor.ts
deleted file mode 100644
index c970427d26e..00000000000
--- a/packages/api-audit-logs/src/utils/compressor.ts
+++ /dev/null
@@ -1,125 +0,0 @@
-import { compress as gzip, decompress as ungzip } from "@webiny/utils/compression/gzip";
-
-const GZIP = "gzip";
-const TO_STORAGE_ENCODING = "base64";
-const FROM_STORAGE_ENCODING = "utf8";
-
-const convertToBuffer = (value: string | Buffer) => {
-    if (typeof value === "string") {
-        return Buffer.from(value, TO_STORAGE_ENCODING);
-    }
-    return value;
-};
-
-export interface OriginalData {
-    [key: string]: any;
-}
-
-export interface Compressor {
-    canCompress(data: any): boolean;
-    compress(data: any): Promise<string>;
-    canDecompress(data: string): boolean;
-    decompress(data: string): Promise<OriginalData | null>;
-}
-
-class GzipCompression implements Compressor {
-    public canCompress(data: any): boolean {
-        let compression: string | undefined;
-        try {
-            const result = JSON.parse(data);
-            if (!result?.compression) {
-                return false;
-            }
-            compression = result.compression;
-        } catch {
-            return false;
-        }
-        /**
-         * If already compressed, skip this.
-         */
-        if (compression) {
-            if (compression !== "GZIP") {
-                console.log(`Data is compressed with "${compression}". Cannot compress again.`);
-            }
-            return false;
-        }
-        return true;
-    }
-    public async compress(data: any) {
-        try {
-            const value = await gzip(JSON.stringify(data));
-
-            return JSON.stringify({
-                compression: GZIP,
-                value: value.toString(TO_STORAGE_ENCODING)
-            });
-        } catch (ex) {
-            console.log(`Could not compress given data.`, ex.message);
-            return data;
-        }
-    }
-
-    public canDecompress(data: string): boolean {
-        let compression: string;
-        try {
-            const result = JSON.parse(data);
-            if (!result?.compression) {
-                return false;
-            }
-            compression = result.compression;
-        } catch {
-            return false;
-        }
-        if (compression !== GZIP) {
-            console.log(
-                `Could not decompress given data since its compression is not "${GZIP}". It is "${compression}".`
-            );
-            return false;
-        }
-        return true;
-    }
-
-    public async decompress(data: string): Promise<OriginalData | null> {
-        let compressedValue: string;
-        try {
-            const result = JSON.parse(data);
-            if (!result.value) {
-                return null;
-            }
-            compressedValue = result.value;
-        } catch {
-            return null;
-        }
-        try {
-            const buf = await ungzip(convertToBuffer(compressedValue));
-            const value = buf.toString(FROM_STORAGE_ENCODING);
-            return JSON.parse(value);
-        } catch (ex) {
-            console.log(`Could not decompress given data.`, ex.message);
-            return null;
-        }
-    }
-}
-
-const createCompressor = (): Pick<Compressor, "compress" | "decompress"> => {
-    const instance = new GzipCompression();
-
-    return {
-        compress: async (data: any) => {
-            if (!instance.canCompress(data)) {
-                return data;
-            }
-            return instance.compress(data);
-        },
-        decompress(data: any) {
-            if (!instance.canDecompress(data)) {
-                return data;
-            }
-            return instance.decompress(data);
-        }
-    };
-};
-
-const compressor = createCompressor();
-
-export { compressor };
diff --git a/packages/api-audit-logs/src/utils/getAuditConfig.ts b/packages/api-audit-logs/src/utils/getAuditConfig.ts
index dfd73fd6113..e08680c2657 100644
--- a/packages/api-audit-logs/src/utils/getAuditConfig.ts
+++ b/packages/api-audit-logs/src/utils/getAuditConfig.ts
@@ -2,7 +2,7 @@ import WebinyError from "@webiny/error";
 import { mdbid } from "@webiny/utils";
 import { IAcoApp } from "@webiny/api-aco/types";
 import { AuditAction, AuditLog, AuditLogsContext } from "~/types";
-import { compressor } from "~/utils/compressor";
+import type { GenericRecord } from "@webiny/api/types";
 
 interface AuditLogPayload extends Omit<AuditLog, "id" | "data"> {
     data: Record<string, any>;
@@ -16,6 +16,8 @@ interface CreateAuditLogParams {
 const createAuditLog = async (params: CreateAuditLogParams) => {
     const { app, payload } = params;
 
+    const compressor = app.context.compressor;
+
     const payloadData = JSON.stringify(payload.data);
 
     try {
@@ -31,11 +33,12 @@ const createAuditLog = async (params: CreateAuditLogParams) => {
                 data: payloadData
             }
         };
+        const data = await compressor.compress(entry.data.data);
         await app.search.create({
             ...entry,
             data: {
                 ...entry.data,
-                data: await compressor.compress(entry.data.data)
+                data: JSON.stringify(data)
             }
         });
         return entry;
@@ -55,6 +58,8 @@ interface CreateOrMergeAuditLogParams {
 
 const createOrMergeAuditLog = async (params: CreateOrMergeAuditLogParams) => {
     const { app, payload, delay } = params;
+
+    const compressor = app.context.compressor;
     // Get the latest audit log of this entry.
     const [records] = await app.search.list({
         where: {
@@ -74,9 +79,9 @@ const createOrMergeAuditLog = async (params: CreateOrMergeAuditLogParams) => {
 
         // Check if the latest audit log is saved within delay range.
         if (newLogDate - existingLogDate < delay * 1000) {
-            const existingLogData = await compressor.decompress(
-                existingLog.data as unknown as string
-            );
+            const existingLogData = (await compressor.decompress(
+                existingLog.data
+            )) as unknown as GenericRecord;
             // Update latest audit log with new "after" payload.
             const beforePayloadData = JSON.parse(existingLogData?.data.data)?.before;
             const afterPayloadData = payload.data?.after;
diff --git a/packages/api-dynamodb-to-elasticsearch/__tests__/Decompressor.test.ts b/packages/api-dynamodb-to-elasticsearch/__tests__/Decompressor.test.ts
deleted file mode 100644
index 32cea0106bc..00000000000
--- a/packages/api-dynamodb-to-elasticsearch/__tests__/Decompressor.test.ts
+++ /dev/null
@@ -1,65 +0,0 @@
-import { createGzipCompression } from "@webiny/api-elasticsearch";
-import { Decompressor } from "~/Decompressor";
-import { createPlugins } from "~tests/plugins";
-import { FaultyDecompressorPlugin } from "~tests/mocks/FaultyDecompressorPlugin";
-import { PluginsContainer } from "@webiny/plugins";
-
-const compressor = createGzipCompression();
-
-describe("Decompressor", () => {
-    it("should not do anything with the data because it is not compressed", async () => {
-        const decompressor = new Decompressor({
-            plugins: createPlugins()
-        });
-
-        const data = {
-            title: "Hello World"
-        };
-
-        const result = await decompressor.decompress(data);
-        expect(result).toEqual(data);
-    });
-
-    it("should decompress the data", async () => {
-        const decompressor = new Decompressor({
-            plugins: createPlugins()
-        });
-
-        const input = Object.freeze({
-            title: "Hello World"
-        });
-
-        const data = Object.freeze(await compressor.compress(input));
-
-        const result = await decompressor.decompress(data);
-        expect(result).toEqual(input);
-    });
-
-    it("should return null because something is wrong with the compressed data", async () => {
-        const decompressor = new Decompressor({
-            plugins: createPlugins()
-        });
-
-        const data = {
-            value: "some wrong value which cannot be decompressed",
-            compression: "gzip"
-        };
-
-        const result = await decompressor.decompress(data);
-        expect(result).toEqual(null);
-    });
-
-    it("should return null even if decompress throws an error", async () => {
-        const decompressor = new Decompressor({
-            plugins: new PluginsContainer([new FaultyDecompressorPlugin()])
-        });
-
-        const data = {
-            value: "some wrong value which cannot be decompressed",
-            compression: "gzip"
-        };
-
-        const result = await decompressor.decompress(data);
-        expect(result).toEqual(null);
-    });
-});
diff --git a/packages/api-dynamodb-to-elasticsearch/__tests__/OperationsBuilder.test.ts b/packages/api-dynamodb-to-elasticsearch/__tests__/OperationsBuilder.test.ts
index 89ecf5755df..2a3f459e322 100644
--- a/packages/api-dynamodb-to-elasticsearch/__tests__/OperationsBuilder.test.ts
+++ b/packages/api-dynamodb-to-elasticsearch/__tests__/OperationsBuilder.test.ts
@@ -1,18 +1,18 @@
 import { OperationsBuilder } from "~/OperationsBuilder";
-import { Decompressor } from "~/Decompressor";
-import { createPlugins } from "~tests/plugins";
+import { createDefaultCompressor } from "@webiny/utils/compression";
 import { DynamoDBRecord } from "@webiny/handler-aws/types";
 import { marshall } from "~/marshall";
 import { OperationType } from "~/Operations";
+import { PluginsContainer } from "@webiny/plugins";
 
 describe("OperationsBuilder", () => {
-    const decompressor = new Decompressor({
-        plugins: createPlugins()
+    const compressor = createDefaultCompressor({
+        plugins: new PluginsContainer()
     });
 
     it("should build an insert operation", async () => {
         const builder = new OperationsBuilder({
-            decompressor
+            compressor
         });
 
         const records: DynamoDBRecord[] = [
@@ -56,7 +56,7 @@ describe("OperationsBuilder", () => {
 
     it("should build a delete operation", async () => {
         const builder = new OperationsBuilder({
-            decompressor
+            compressor
         });
 
         const records: DynamoDBRecord[] = [
@@ -92,7 +92,7 @@ describe("OperationsBuilder", () => {
 
     it("should skip record if there are no keys", async () => {
         const builder = new OperationsBuilder({
-            decompressor
+            compressor
         });
 
         const records: DynamoDBRecord[] = [
@@ -121,7 +121,7 @@ describe("OperationsBuilder", () => {
 
     it("should skip record if there is a missing dynamodb property", async () => {
         const builder = new OperationsBuilder({
-            decompressor
+            compressor
         });
 
         const records: DynamoDBRecord[] = [
@@ -141,7 +141,7 @@ describe("OperationsBuilder", () => {
 
     it("should skip record if newImage is marked as ignored", async () => {
         const builder = new OperationsBuilder({
-            decompressor
+            compressor
         });
 
         const records: DynamoDBRecord[] = [
@@ -170,7 +170,7 @@ describe("OperationsBuilder", () => {
 
     it("should skip record if there is nothing in the newImage", async () => {
         const builder = new OperationsBuilder({
-            decompressor
+            compressor
         });
 
         const records: DynamoDBRecord[] = [
@@ -209,7 +209,7 @@ describe("OperationsBuilder", () => {
 
     it("should skip record if there is no data in the newImage.data", async () => {
         const builder = new OperationsBuilder({
-            decompressor
+            compressor
         });
 
         const records: DynamoDBRecord[] = [
@@ -238,7 +238,7 @@ describe("OperationsBuilder", () => {
 
     it("should skip record if there is no index in the oldImage", async () => {
         const builder = new OperationsBuilder({
-            decompressor
+            compressor
         });
 
         const records: DynamoDBRecord[] = [
diff --git a/packages/api-dynamodb-to-elasticsearch/__tests__/mocks/FaultyDecompressorPlugin.ts b/packages/api-dynamodb-to-elasticsearch/__tests__/mocks/FaultyDecompressorPlugin.ts
deleted file mode 100644
index 86f151f1492..00000000000
--- a/packages/api-dynamodb-to-elasticsearch/__tests__/mocks/FaultyDecompressorPlugin.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { CompressionPlugin } from "@webiny/api-elasticsearch";
-
-export class FaultyDecompressorPlugin extends CompressionPlugin {
-    public canCompress(): boolean {
-        return true;
-    }
-    public compress(): Promise<any> {
-        throw new Error("Throwing an error on purpose - compress.");
-    }
-    public canDecompress(): boolean {
-        return true;
-    }
-    public decompress(): Promise<any> {
-        throw new Error("Throwing an error on purpose - decompress.");
-    }
-}
diff --git a/packages/api-dynamodb-to-elasticsearch/__tests__/mocks/context.ts b/packages/api-dynamodb-to-elasticsearch/__tests__/mocks/context.ts
new file mode 100644
index 00000000000..e7f61c7ae1a
--- /dev/null
+++ b/packages/api-dynamodb-to-elasticsearch/__tests__/mocks/context.ts
@@ -0,0 +1,33 @@
+import { Context as BaseContext } from "@webiny/api";
+import { Context } from "@webiny/handler/types";
+import { PluginsContainer } from "@webiny/plugins";
+import type { Client } from "@webiny/project-utils/testing/elasticsearch/createClient.js";
+import type { ElasticsearchContext } from "@webiny/api-elasticsearch/types.js";
+import type { ILogger } from "@webiny/api-log/types.js";
+import { Reply, Request } from "@webiny/handler-aws/types.js";
+
+export interface ICreateMockContextParams {
+    plugins?: PluginsContainer;
+    elasticsearch: Client;
+    logger: ILogger;
+}
+
+export const createMockContext = (
+    params: ICreateMockContextParams
+): ElasticsearchContext & Context => {
+    const context = new BaseContext({
+        plugins: params.plugins || new PluginsContainer(),
+        WEBINY_VERSION: "0.0.0"
+    });
+
+    // @ts-expect-error
+    context.elasticsearch = params.elasticsearch;
+    // @ts-expect-error
+    context.logger = params.logger;
+    // @ts-expect-error
+    context.reply = {} as Reply;
+    // @ts-expect-error
+    context.request = {} as Request;
+
+    return context as unknown as Context & ElasticsearchContext;
+};
diff --git a/packages/api-dynamodb-to-elasticsearch/__tests__/plugins.ts b/packages/api-dynamodb-to-elasticsearch/__tests__/plugins.ts
deleted file mode 100644
index bd941b6ca73..00000000000
--- a/packages/api-dynamodb-to-elasticsearch/__tests__/plugins.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { PluginsContainer } from "@webiny/plugins";
-import { createGzipCompression } from "@webiny/api-elasticsearch";
-
-export const createPlugins = () => {
-    return new PluginsContainer([createGzipCompression()]);
-};
diff --git a/packages/api-dynamodb-to-elasticsearch/__tests__/transfer.test.ts b/packages/api-dynamodb-to-elasticsearch/__tests__/transfer.test.ts
index 244ed7c6d51..3cc09d1aa3f 100644
--- a/packages/api-dynamodb-to-elasticsearch/__tests__/transfer.test.ts
+++ b/packages/api-dynamodb-to-elasticsearch/__tests__/transfer.test.ts
@@ -2,10 +2,9 @@ import { createEventHandler, OperationType } from "~/index";
 import { createElasticsearchClient } from "@webiny/project-utils/testing/elasticsearch/createClient";
 // @ts-expect-error
 import { createMockApiLog } from "@webiny/project-utils/testing/mockApiLog";
-import { ElasticsearchContext } from "@webiny/api-elasticsearch/types";
-import { Context, LambdaContext, Reply, Request } from "@webiny/handler-aws/types";
+import { LambdaContext, Reply, Request } from "@webiny/handler-aws/types";
 import { marshall } from "@webiny/aws-sdk/client-dynamodb";
-import { PluginsContainer } from "@webiny/plugins";
+import { createMockContext } from "~tests/mocks/context";
 
 describe("transfer data", () => {
     it("should transfer data from event to elasticsearch", async () => {
@@ -13,11 +12,11 @@ describe("transfer data", () => {
 
         const elasticsearch = createElasticsearchClient();
 
-        const context = {
+        const context = createMockContext({
             elasticsearch,
-            logger: createMockApiLog(),
-            plugins: new PluginsContainer()
-        } as unknown as ElasticsearchContext & Context;
+            logger: createMockApiLog()
+        });
+
         /**
          * Register index which is going to get created, so it can be deleted after the test.
          */
diff --git a/packages/api-dynamodb-to-elasticsearch/package.json b/packages/api-dynamodb-to-elasticsearch/package.json
index 72158223112..e3c76642c34 100644
--- a/packages/api-dynamodb-to-elasticsearch/package.json
+++ b/packages/api-dynamodb-to-elasticsearch/package.json
@@ -17,6 +17,7 @@
     "@webiny/aws-sdk": "0.0.0",
     "@webiny/error": "0.0.0",
     "@webiny/handler-aws": "0.0.0",
+    "@webiny/utils": "0.0.0",
     "p-retry": "^4.6.2"
   },
   "devDependencies": {
diff --git a/packages/api-dynamodb-to-elasticsearch/src/Decompressor.ts b/packages/api-dynamodb-to-elasticsearch/src/Decompressor.ts
deleted file mode 100644
index 719d79a3ed2..00000000000
--- a/packages/api-dynamodb-to-elasticsearch/src/Decompressor.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { IDecompressor } from "./types";
-import { decompress } from "@webiny/api-elasticsearch";
-import { GenericRecord } from "@webiny/api/types";
-import { PluginsContainer } from "@webiny/plugins";
-
-export interface IDecompressorParams {
-    plugins: PluginsContainer;
-}
-
-export class Decompressor implements IDecompressor {
-    private readonly plugins: PluginsContainer;
-
-    public constructor(params: IDecompressorParams) {
-        this.plugins = params.plugins;
-    }
-
-    public async decompress(data: GenericRecord): Promise<GenericRecord | null> {
-        try {
-            return await decompress(this.plugins, data);
-        } catch (ex) {
-            return null;
-        }
-    }
-}
diff --git a/packages/api-dynamodb-to-elasticsearch/src/OperationsBuilder.ts b/packages/api-dynamodb-to-elasticsearch/src/OperationsBuilder.ts
index 69be6e36a56..0b38ae87164 100644
--- a/packages/api-dynamodb-to-elasticsearch/src/OperationsBuilder.ts
+++ b/packages/api-dynamodb-to-elasticsearch/src/OperationsBuilder.ts
@@ -1,14 +1,13 @@
-import {
-    IDecompressor,
-    IOperations,
-    IOperationsBuilder,
-    IOperationsBuilderBuildParams
-} from "./types";
+import { IOperations, IOperationsBuilder, IOperationsBuilderBuildParams } from "./types";
 import { Operations, OperationType } from "~/Operations";
 import { unmarshall } from "~/marshall";
+import { ICompressor } from "@webiny/utils/compression/Compressor";
 
 interface RecordDynamoDbImage {
-    data: Record<string, any>;
+    data: {
+        compression: string;
+        value: string;
+    };
     ignore?: boolean;
     index: string;
 }
@@ -19,14 +18,14 @@ interface RecordDynamoDbKeys {
 }
 
 export interface IOperationsBuilderParams {
-    decompressor: IDecompressor;
+    compressor: ICompressor;
 }
 
 export class OperationsBuilder implements IOperationsBuilder {
-    private readonly decompressor: IDecompressor;
+    private readonly compressor: ICompressor;
 
     public constructor(params: IOperationsBuilderParams) {
-        this.decompressor = params.decompressor;
+        this.compressor = params.compressor;
     }
 
     public async build(params: IOperationsBuilderBuildParams): Promise<IOperations> {
@@ -94,7 +93,7 @@ export class OperationsBuilder implements IOperationsBuilder {
                 /**
                  * We must decompress the data that is going into the Elasticsearch.
                  */
-                const data = await this.decompressor.decompress(newImage.data);
+                const data = await this.compressor.decompress(newImage.data);
                 /**
                  * No point in writing null or undefined data into the Elasticsearch.
                  * This might happen on some error while decompressing. We will log it.
diff --git a/packages/api-dynamodb-to-elasticsearch/src/eventHandler.ts b/packages/api-dynamodb-to-elasticsearch/src/eventHandler.ts
index c683a72c9a6..70ae41df6fa 100644
--- a/packages/api-dynamodb-to-elasticsearch/src/eventHandler.ts
+++ b/packages/api-dynamodb-to-elasticsearch/src/eventHandler.ts
@@ -1,6 +1,5 @@
 import { createDynamoDBEventHandler, timerFactory } from "@webiny/handler-aws";
 import { Context } from "~/types";
-import { Decompressor } from "~/Decompressor";
 import { OperationsBuilder } from "~/OperationsBuilder";
 import { executeWithRetry } from "~/executeWithRetry";
 
@@ -20,12 +19,8 @@ export const createEventHandler = () => {
             return null;
         }
 
-        const decompressor = new Decompressor({
-            plugins: context.plugins
-        });
-
         const builder = new OperationsBuilder({
-            decompressor
+            compressor: context.compressor
         });
 
         const operations = await builder.build({
diff --git a/packages/api-dynamodb-to-elasticsearch/src/index.ts b/packages/api-dynamodb-to-elasticsearch/src/index.ts
index 9c6d27a1d8b..d4e401808ef 100644
--- a/packages/api-dynamodb-to-elasticsearch/src/index.ts
+++ b/packages/api-dynamodb-to-elasticsearch/src/index.ts
@@ -1,4 +1,3 @@
-export * from "./Decompressor";
 export * from "./eventHandler";
 export * from "./execute";
 export * from "./executeWithRetry";
diff --git a/packages/api-dynamodb-to-elasticsearch/src/types.ts b/packages/api-dynamodb-to-elasticsearch/src/types.ts
index 09f9aedb55b..353734fa36c 100644
--- a/packages/api-dynamodb-to-elasticsearch/src/types.ts
+++ b/packages/api-dynamodb-to-elasticsearch/src/types.ts
@@ -33,8 +33,4 @@ export interface IOperations {
     delete(params: IDeleteOperationParams): void;
 }
 
-export interface IDecompressor {
-    decompress(data: GenericRecord): Promise<GenericRecord | null>;
-}
-
 export interface Context extends ElasticsearchContext, Pick<LoggerContext, "logger"> {}
diff --git a/packages/api-dynamodb-to-elasticsearch/tsconfig.build.json b/packages/api-dynamodb-to-elasticsearch/tsconfig.build.json
index 8faba1f3919..3ed5961d22d 100644
--- a/packages/api-dynamodb-to-elasticsearch/tsconfig.build.json
+++ b/packages/api-dynamodb-to-elasticsearch/tsconfig.build.json
@@ -8,6 +8,7 @@
     { "path": "../aws-sdk/tsconfig.build.json" },
     { "path": "../error/tsconfig.build.json" },
     { "path": "../handler-aws/tsconfig.build.json" },
+    { "path": "../utils/tsconfig.build.json" },
     { "path": "../plugins/tsconfig.build.json" }
   ],
   "compilerOptions": {
diff --git a/packages/api-dynamodb-to-elasticsearch/tsconfig.json b/packages/api-dynamodb-to-elasticsearch/tsconfig.json
index 7e05392fdec..e77b95262cc 100644
--- a/packages/api-dynamodb-to-elasticsearch/tsconfig.json
+++ b/packages/api-dynamodb-to-elasticsearch/tsconfig.json
@@ -8,6 +8,7 @@
     { "path": "../aws-sdk" },
     { "path": "../error" },
     { "path": "../handler-aws" },
+    { "path": "../utils" },
     { "path": "../plugins" }
   ],
   "compilerOptions": {
@@ -29,6 +30,8 @@
       "@webiny/error": ["../error/src"],
       "@webiny/handler-aws/*": ["../handler-aws/src/*"],
       "@webiny/handler-aws": ["../handler-aws/src"],
+      "@webiny/utils/*": ["../utils/src/*"],
+      "@webiny/utils": ["../utils/src"],
       "@webiny/plugins/*": ["../plugins/src/*"],
       "@webiny/plugins": ["../plugins/src"]
     },
diff --git a/packages/api-elasticsearch/__tests__/plugins/GzipCompression.test.ts b/packages/api-elasticsearch/__tests__/plugins/GzipCompression.test.ts
deleted file mode 100644
index cca43e3574e..00000000000
--- a/packages/api-elasticsearch/__tests__/plugins/GzipCompression.test.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { createGzipCompression } from "~/plugins/GzipCompression";
-import { CompressionPlugin } from "~/plugins/definition/CompressionPlugin";
-
-const text = "Regular text that we will test in the compress and decompress.";
-
-describe("gzip compression", () => {
-    let plugin: CompressionPlugin;
-
-    beforeEach(() => {
-        plugin = createGzipCompression();
-    });
-
-    it("should compress and decompress given text value", async () => {
-        const compressed = await plugin.compress(text);
-
-        expect(compressed).toEqual({
-            compression: "gzip",
-            value: expect.any(String)
-        });
-
-        const decompressed = await plugin.decompress(compressed);
-
-        expect(decompressed).toEqual(text);
-    });
-});
diff --git a/packages/api-elasticsearch/package.json b/packages/api-elasticsearch/package.json
index 738206f30b4..54d72743e8e 100644
--- a/packages/api-elasticsearch/package.json
+++ b/packages/api-elasticsearch/package.json
@@ -16,7 +16,6 @@
     "@webiny/api": "0.0.0",
     "@webiny/error": "0.0.0",
     "@webiny/plugins": "0.0.0",
-    "@webiny/utils": "0.0.0",
     "aws-elasticsearch-connector": "patch:aws-elasticsearch-connector@npm%3A9.2.0#~/.yarn/patches/aws-elasticsearch-connector-npm-9.2.0-e1245671b1.patch",
     "elastic-ts": "^0.12.0"
   },
diff --git a/packages/api-elasticsearch/src/compression.ts b/packages/api-elasticsearch/src/compression.ts
index 56cd9301029..a8ed5f04208 100644
--- a/packages/api-elasticsearch/src/compression.ts
+++ b/packages/api-elasticsearch/src/compression.ts
@@ -1,12 +1,6 @@
-import { CompressionPlugin } from "~/plugins/definition/CompressionPlugin";
-import { PluginsContainer } from "@webiny/plugins";
+import type { PluginsContainer } from "@webiny/plugins";
+import { CompressorPlugin } from "@webiny/api";
 
-/**
- * Get the compression plugins, in reverse order, because we want to use the last one added - first.
- */
-const getCompressionPlugins = (plugins: PluginsContainer): CompressionPlugin[] => {
-    return plugins.byType<CompressionPlugin>(CompressionPlugin.type).reverse();
-};
 /**
  * Method to compress the elasticsearch data that is going to be stored into the DynamoDB table that is meant for elasticsearch.
  */
@@ -14,38 +8,24 @@ export const compress = async (
     pluginsContainer: PluginsContainer,
     data: Record<string, any>
 ): Promise<Record<string, any>> => {
-    const plugins = getCompressionPlugins(pluginsContainer);
-    if (plugins.length === 0) {
+    let plugin: CompressorPlugin;
+    try {
+        plugin = pluginsContainer.oneByType<CompressorPlugin>(CompressorPlugin.type);
+    } catch (ex) {
         return data;
     }
-    for (const plugin of plugins) {
-        if (plugin.canCompress(data) === false) {
-            continue;
-        }
-        return await plugin.compress(data);
-    }
-    /**
-     * Possibly no plugins that can compress, just return the data.
-     */
-    return data;
+    return plugin.getCompressor().compress(data);
 };
 
 export const decompress = async (
     pluginsContainer: PluginsContainer,
     data: Record<string, any>
 ): Promise<Record<string, any>> => {
-    const plugins = getCompressionPlugins(pluginsContainer);
-    if (plugins.length === 0) {
+    let plugin: CompressorPlugin;
+    try {
+        plugin = pluginsContainer.oneByType<CompressorPlugin>(CompressorPlugin.type);
+    } catch (ex) {
         return data;
     }
-    for (const plugin of plugins) {
-        if (plugin.canDecompress(data) === false) {
-            continue;
-        }
-        return await plugin.decompress(data);
-    }
-    /**
-     * Possibly no plugins that can decompress, just return the data.
-     */
-    return data;
+    return plugin.getCompressor().decompress(data);
 };
diff --git a/packages/api-elasticsearch/src/index.ts b/packages/api-elasticsearch/src/index.ts
index 78c4bfcc6a7..20cbdf86ae7 100644
--- a/packages/api-elasticsearch/src/index.ts
+++ b/packages/api-elasticsearch/src/index.ts
@@ -23,7 +23,6 @@ export * from "./utils";
 export * from "./operations";
 export * from "./sharedIndex";
 export * from "./indexPrefix";
-export { createGzipCompression } from "./plugins/GzipCompression";
 
 /**
  * We must accept either Elasticsearch client or options that create the client.
diff --git a/packages/api-elasticsearch/src/plugins/GzipCompression.ts b/packages/api-elasticsearch/src/plugins/GzipCompression.ts
deleted file mode 100644
index dffe586e28b..00000000000
--- a/packages/api-elasticsearch/src/plugins/GzipCompression.ts
+++ /dev/null
@@ -1,78 +0,0 @@
-import { CompressionPlugin } from "~/plugins/definition/CompressionPlugin";
-import { compress as gzip, decompress as ungzip } from "@webiny/utils/compression/gzip";
-
-const GZIP = "gzip";
-const TO_STORAGE_ENCODING = "base64";
-const FROM_STORAGE_ENCODING = "utf8";
-
-const convertToBuffer = (value: string | Buffer) => {
-    if (typeof value === "string") {
-        return Buffer.from(value, TO_STORAGE_ENCODING);
-    }
-    return value;
-};
-
-export interface CompressedData {
-    compression: string;
-    value: string;
-}
-
-export interface OriginalData {
-    [key: string]: any;
-}
-
-class GzipCompression extends CompressionPlugin {
-    public canCompress(data: any): boolean {
-        /**
-         * If already compressed, skip this.
-         */
-        if (data.compression) {
-            if (data.compression !== "GZIP") {
-                console.log(`Data is already compressed with "${data.compression}".`);
-            }
-            return false;
-        }
-        return true;
-    }
-    public async compress(data: any) {
-        const value = await gzip(JSON.stringify(data));
-
-        return {
-            compression: GZIP,
-            value: value.toString(TO_STORAGE_ENCODING)
-        };
-    }
-
-    public canDecompress(data: CompressedData | Record<string, any>): boolean {
-        if (!data || !data.compression) {
-            return false;
-        } else if (data.compression !== GZIP) {
-            console.log(
-                `Could not decompress given data since its compression is not "${GZIP}". It is "${data.compression}".`
-            );
-            return false;
-        }
-        return true;
-    }
-
-    public async decompress(data: CompressedData): Promise<OriginalData | null> {
-        try {
-            const buf = await ungzip(convertToBuffer(data.value));
-            const value = buf.toString(FROM_STORAGE_ENCODING);
-            return JSON.parse(value);
-        } catch (ex) {
-            return null;
-        }
-    }
-}
-
-export const createGzipCompression = () => {
-    return new GzipCompression();
-};
-/**
- * Left due to backward compatibility with older systems.
- * Remove when upgraded the system to run from @webiny/api-serverless-cms-aws
- */
-export default () => {
-    return createGzipCompression();
-};
diff --git a/packages/api-elasticsearch/src/plugins/definition/CompressionPlugin.ts b/packages/api-elasticsearch/src/plugins/definition/CompressionPlugin.ts
deleted file mode 100644
index e9892a9f80a..00000000000
--- a/packages/api-elasticsearch/src/plugins/definition/CompressionPlugin.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { Plugin } from "@webiny/plugins";
-
-export abstract class CompressionPlugin extends Plugin {
-    public static override readonly type: string = "elasticsearch.compression";
-    /**
-     * Check if data can be compressed.
-     */
-    public abstract canCompress(data: any): boolean;
-    /**
-     * Pass the data to get the compressed one back.
-     */
-    public abstract compress(data: any): Promise<any>;
-    /**
-     * Check if data can be decompressed.
-     */
-    public abstract canDecompress(data: any): boolean;
-    /**
-     * Passed the compressed data to get the original data back.
-     */
-    public abstract decompress(data: any): Promise<any>;
-}
diff --git a/packages/api-elasticsearch/src/plugins/definition/index.ts b/packages/api-elasticsearch/src/plugins/definition/index.ts
index 0e600d28c2d..b870eb017fb 100644
--- a/packages/api-elasticsearch/src/plugins/definition/index.ts
+++ b/packages/api-elasticsearch/src/plugins/definition/index.ts
@@ -1,4 +1,3 @@
-export * from "./CompressionPlugin";
 export * from "./ElasticsearchBodyModifierPlugin";
 export * from "./ElasticsearchFieldPlugin";
 export * from "./ElasticsearchIndexPlugin";
diff --git a/packages/api-elasticsearch/tsconfig.build.json b/packages/api-elasticsearch/tsconfig.build.json
index c45bbb1b178..1feddfad025 100644
--- a/packages/api-elasticsearch/tsconfig.build.json
+++ b/packages/api-elasticsearch/tsconfig.build.json
@@ -4,8 +4,7 @@
   "references": [
     { "path": "../api/tsconfig.build.json" },
     { "path": "../error/tsconfig.build.json" },
-    { "path": "../plugins/tsconfig.build.json" },
-    { "path": "../utils/tsconfig.build.json" }
+    { "path": "../plugins/tsconfig.build.json" }
   ],
   "compilerOptions": {
     "rootDir": "./src",
diff --git a/packages/api-elasticsearch/tsconfig.json b/packages/api-elasticsearch/tsconfig.json
index 554f3cbbfdc..66f6a82670f 100644
--- a/packages/api-elasticsearch/tsconfig.json
+++ b/packages/api-elasticsearch/tsconfig.json
@@ -1,12 +1,7 @@
 {
   "extends": "../../tsconfig.json",
   "include": ["src", "__tests__"],
-  "references": [
-    { "path": "../api" },
-    { "path": "../error" },
-    { "path": "../plugins" },
-    { "path": "../utils" }
-  ],
+  "references": [{ "path": "../api" }, { "path": "../error" }, { "path": "../plugins" }],
   "compilerOptions": {
     "rootDirs": ["./src", "./__tests__"],
     "outDir": "./dist",
@@ -19,9 +14,7 @@
       "@webiny/error/*": ["../error/src/*"],
       "@webiny/error": ["../error/src"],
       "@webiny/plugins/*": ["../plugins/src/*"],
-      "@webiny/plugins": ["../plugins/src"],
-      "@webiny/utils/*": ["../utils/src/*"],
-      "@webiny/utils": ["../utils/src"]
+      "@webiny/plugins": ["../plugins/src"]
     },
     "baseUrl": "."
   }
diff --git a/packages/api-file-manager-aco/__tests__/utils/useGraphQlHandler.ts b/packages/api-file-manager-aco/__tests__/utils/useGraphQlHandler.ts
index d2ce8176495..d341d2aa6b4 100644
--- a/packages/api-file-manager-aco/__tests__/utils/useGraphQlHandler.ts
+++ b/packages/api-file-manager-aco/__tests__/utils/useGraphQlHandler.ts
@@ -23,6 +23,7 @@ import createAdminUsersApp from "@webiny/api-admin-users";
 import { createTestWcpLicense } from "@webiny/wcp/testing/createTestWcpLicense";
 import { createWcpContext } from "@webiny/api-wcp";
 import { AdminUsersStorageOperations } from "@webiny/api-admin-users/types";
+import { getDocumentClient } from "@webiny/project-utils/testing/dynamodb";
 
 export interface UseGQLHandlerParams {
     permissions?: SecurityPermission[];
@@ -50,6 +51,7 @@ const defaultIdentity: SecurityIdentity = {
 export const useGraphQlHandler = (params: UseGQLHandlerParams = {}) => {
     const { permissions, identity, plugins = [] } = params;
 
+    const documentClient = getDocumentClient();
     const i18nStorage = getStorageOps<any[]>("i18n");
     const cmsStorage = getStorageOps<HeadlessCmsStorageOperations>("cms");
     const adminUsersStorage = getStorageOps<AdminUsersStorageOperations>("adminUsers");
@@ -76,7 +78,7 @@ export const useGraphQlHandler = (params: UseGQLHandlerParams = {}) => {
             }),
             createHeadlessCmsContext({ storageOperations: cmsStorage.storageOperations }),
             createHeadlessCmsGraphQL(),
-            createAco(),
+            createAco({ documentClient }),
             plugins
         ],
         debug: false
diff --git a/packages/api-file-manager-aco/package.json b/packages/api-file-manager-aco/package.json
index 6cc91365cba..fba15929365 100644
--- a/packages/api-file-manager-aco/package.json
+++ b/packages/api-file-manager-aco/package.json
@@ -40,6 +40,6 @@
     "@webiny/wcp": "0.0.0",
     "graphql": "^15.9.0",
     "ttypescript": "^1.5.15",
-    "typescript": "4.9.5"
+    "typescript": "5.3.3"
   }
 }
diff --git a/packages/api-file-manager-ddb/package.json b/packages/api-file-manager-ddb/package.json
index f1a0bef36a7..3dc5e01145d 100644
--- a/packages/api-file-manager-ddb/package.json
+++ b/packages/api-file-manager-ddb/package.json
@@ -20,6 +20,7 @@
   ],
   "license": "MIT",
   "dependencies": {
+    "@webiny/api": "0.0.0",
     "@webiny/api-file-manager": "0.0.0",
     "@webiny/aws-sdk": "0.0.0",
     "@webiny/db-dynamodb": "0.0.0",
diff --git a/packages/api-file-manager-ddb/src/index.ts b/packages/api-file-manager-ddb/src/index.ts
index b9724915ad6..2e669ede4a7 100644
--- a/packages/api-file-manager-ddb/src/index.ts
+++ b/packages/api-file-manager-ddb/src/index.ts
@@ -8,6 +8,7 @@ import { SettingsStorageOperations } from "~/operations/SettingsStorageOperation
 import { SystemStorageOperations } from "~/operations/SystemStorageOperations";
 import { SettingsAttributePlugin, SystemAttributePlugin } from "./plugins";
 import { AliasesStorageOperations } from "~/operations/AliasesStorageOperations";
+import { CompressorPlugin } from "@webiny/api";
 
 export interface StorageOperationsConfig {
     documentClient: DynamoDBDocument;
@@ -28,7 +29,11 @@ export const createFileManagerStorageOperations = ({
 
     return {
         beforeInit: async context => {
-            const types: string[] = [SettingsAttributePlugin.type, SystemAttributePlugin.type];
+            const types: string[] = [
+                SettingsAttributePlugin.type,
+                SystemAttributePlugin.type,
+                CompressorPlugin.type
+            ];
             for (const type of types) {
                 plugins.mergeByType(context.plugins, type);
             }
diff --git a/packages/api-file-manager-ddb/tsconfig.build.json b/packages/api-file-manager-ddb/tsconfig.build.json
index 14e55eb7808..6d27d0b385e 100644
--- a/packages/api-file-manager-ddb/tsconfig.build.json
+++ b/packages/api-file-manager-ddb/tsconfig.build.json
@@ -2,6 +2,7 @@
   "extends": "../../tsconfig.build.json",
   "include": ["src"],
   "references": [
+    { "path": "../api/tsconfig.build.json" },
     { "path": "../api-file-manager/tsconfig.build.json" },
     { "path": "../aws-sdk/tsconfig.build.json" },
     { "path": "../db-dynamodb/tsconfig.build.json" },
diff --git a/packages/api-file-manager-ddb/tsconfig.json b/packages/api-file-manager-ddb/tsconfig.json
index 5ad04b29f25..48b914cf0c1 100644
--- a/packages/api-file-manager-ddb/tsconfig.json
+++ b/packages/api-file-manager-ddb/tsconfig.json
@@ -2,6 +2,7 @@
   "extends": "../../tsconfig.json",
   "include": ["src", "__tests__"],
   "references": [
+    { "path": "../api" },
     { "path": "../api-file-manager" },
     { "path": "../aws-sdk" },
     { "path": "../db-dynamodb" },
@@ -15,6 +16,8 @@
     "paths": {
       "~/*": ["./src/*"],
       "~tests/*": ["./__tests__/*"],
+      "@webiny/api/*": ["../api/src/*"],
+      "@webiny/api": ["../api/src"],
       "@webiny/api-file-manager/*": ["../api-file-manager/src/*"],
       "@webiny/api-file-manager": ["../api-file-manager/src"],
       "@webiny/aws-sdk/*": ["../aws-sdk/src/*"],
diff --git a/packages/api-file-manager-s3/src/plugins/graphqlFileStorageS3.ts b/packages/api-file-manager-s3/src/plugins/graphqlFileStorageS3.ts
index 43ffb13fc85..80fba5e9171 100644
--- a/packages/api-file-manager-s3/src/plugins/graphqlFileStorageS3.ts
+++ b/packages/api-file-manager-s3/src/plugins/graphqlFileStorageS3.ts
@@ -25,6 +25,7 @@ const plugin: GraphQLSchemaPlugin<FileManagerContext> = {
             }
 
             input PreSignedPostPayloadInput {
+                id: ID
                 name: String!
                 type: String!
                 size: Long!
diff --git a/packages/api-file-manager/README.md b/packages/api-file-manager/README.md
index 0d05bb3a3fb..b82a9260aff 100644
--- a/packages/api-file-manager/README.md
+++ b/packages/api-file-manager/README.md
@@ -4,7 +4,7 @@
 [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
 [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
 
-The API for Webiny Admin's ([@webiny/admin](../app-admin)) File Manager.
+The API for Webiny Admin's ([@webiny/app-admin](../app-admin)) File Manager.
 
 ## Install
 ```
diff --git a/packages/api-file-manager/src/FileManagerContextSetup.ts b/packages/api-file-manager/src/FileManagerContextSetup.ts
index 981408b56c7..70df538db7b 100644
--- a/packages/api-file-manager/src/FileManagerContextSetup.ts
+++ b/packages/api-file-manager/src/FileManagerContextSetup.ts
@@ -1,5 +1,11 @@
-import { FileManagerAliasesStorageOperations, FileManagerContext } from "~/types";
-import { createFileManager, FileManagerConfig } from "~/createFileManager";
+import {
+    FileManagerAliasesStorageOperations,
+    type FileManagerContext,
+    FilePermission,
+    type SettingsPermission
+} from "~/types";
+import type { FileManagerConfig } from "~/createFileManager/types";
+import { createFileManager } from "~/createFileManager";
 import { FileStorage } from "~/storage/FileStorage";
 import WebinyError from "@webiny/error";
 import { SecurityPermission } from "@webiny/api-security/types";
@@ -8,6 +14,7 @@ import { CmsFilesStorage } from "~/cmsFileStorage/CmsFilesStorage";
 import { CmsModelModifierPlugin } from "~/modelModifier/CmsModelModifier";
 import { CmsModelPlugin, isHeadlessCmsReady } from "@webiny/api-headless-cms";
 import { FilesPermissions } from "~/createFileManager/permissions/FilesPermissions";
+import { SettingsPermissions } from "~/createFileManager/permissions/SettingsPermissions";
 
 export class FileManagerContextSetup {
     private readonly context: FileManagerContext;
@@ -31,13 +38,21 @@ export class FileManagerContextSetup {
 
         const filesPermissions = new FilesPermissions({
             getIdentity: this.context.security.getIdentity,
-            getPermissions: () => this.context.security.getPermissions("fm.file"),
+            getPermissions: () => this.context.security.getPermissions<FilePermission>("fm.file"),
+            fullAccessPermissionName: "fm.*"
+        });
+
+        const settingsPermissions = new SettingsPermissions({
+            getIdentity: this.context.security.getIdentity,
+            getPermissions: () =>
+                this.context.security.getPermissions<SettingsPermission>("fm.settings"),
             fullAccessPermissionName: "fm.*"
         });
 
         return createFileManager({
             storageOperations,
             filesPermissions,
+            settingsPermissions,
             getTenantId: this.getTenantId.bind(this),
             getLocaleCode: this.getLocaleCode.bind(this),
             getIdentity: this.getIdentity.bind(this),
diff --git a/packages/api-file-manager/src/createFileManager/files.crud.ts b/packages/api-file-manager/src/createFileManager/files.crud.ts
index fa80ffb8853..696f95469ac 100644
--- a/packages/api-file-manager/src/createFileManager/files.crud.ts
+++ b/packages/api-file-manager/src/createFileManager/files.crud.ts
@@ -1,21 +1,31 @@
 import { NotFoundError } from "@webiny/handler-graphql";
 import { createTopic } from "@webiny/pubsub";
 import WebinyError from "@webiny/error";
-import {
+import type {
     File,
     FileManagerFilesStorageOperationsListParamsWhere,
     FileManagerFilesStorageOperationsTagsParamsWhere,
     FilesCRUD,
     FilesListOpts
 } from "~/types";
-import { FileManagerConfig } from "~/createFileManager/index";
+import { FileManagerConfig } from "~/createFileManager/types";
 import { ROOT_FOLDER } from "~/contants";
 import { NotAuthorizedError } from "@webiny/api-security";
 import { getDate } from "@webiny/api-headless-cms/utils/date";
 import { getIdentity as utilsGetIdentity } from "@webiny/api-headless-cms/utils/identity";
 import { CmsEntryListSort } from "@webiny/api-headless-cms/types";
 
-export const createFilesCrud = (config: FileManagerConfig): FilesCRUD => {
+export const createFilesCrud = (
+    config: Pick<
+        FileManagerConfig,
+        | "storageOperations"
+        | "filesPermissions"
+        | "getLocaleCode"
+        | "getTenantId"
+        | "getIdentity"
+        | "WEBINY_VERSION"
+    >
+): FilesCRUD => {
     const {
         storageOperations,
         filesPermissions,
diff --git a/packages/api-file-manager/src/createFileManager/index.ts b/packages/api-file-manager/src/createFileManager/index.ts
index a8a1972a9e3..2e540d64621 100644
--- a/packages/api-file-manager/src/createFileManager/index.ts
+++ b/packages/api-file-manager/src/createFileManager/index.ts
@@ -1,21 +1,8 @@
-import { FileManagerContextObject, FileManagerStorageOperations } from "~/types";
-import { GetPermissions, SecurityIdentity } from "@webiny/api-security/types";
+import type { FileManagerContextObject } from "~/types";
 import { createFilesCrud } from "~/createFileManager/files.crud";
-import { FileStorage } from "~/storage/FileStorage";
 import { createSettingsCrud } from "~/createFileManager/settings.crud";
 import { createSystemCrud } from "~/createFileManager/system.crud";
-import { FilesPermissions } from "~/createFileManager/permissions/FilesPermissions";
-
-export interface FileManagerConfig {
-    storageOperations: FileManagerStorageOperations;
-    filesPermissions: FilesPermissions;
-    getTenantId: () => string;
-    getLocaleCode: () => string;
-    getIdentity: () => SecurityIdentity;
-    getPermissions: GetPermissions;
-    storage: FileStorage;
-    WEBINY_VERSION: string;
-}
+import type { FileManagerConfig } from "~/createFileManager/types";
 
 export const createFileManager = (config: FileManagerConfig): FileManagerContextObject => {
     const filesCrud = createFilesCrud(config);
diff --git a/packages/api-file-manager/src/createFileManager/permissions/SettingsPermissions.ts b/packages/api-file-manager/src/createFileManager/permissions/SettingsPermissions.ts
new file mode 100644
index 00000000000..e81db04726c
--- /dev/null
+++ b/packages/api-file-manager/src/createFileManager/permissions/SettingsPermissions.ts
@@ -0,0 +1,4 @@
+import { AppPermissions } from "@webiny/api-security/utils/AppPermissions";
+import type { SettingsPermission } from "~/types";
+
+export class SettingsPermissions extends AppPermissions<SettingsPermission> {}
diff --git a/packages/api-file-manager/src/createFileManager/settings.crud.ts b/packages/api-file-manager/src/createFileManager/settings.crud.ts
index 82d92bd4753..80742b45ac0 100644
--- a/packages/api-file-manager/src/createFileManager/settings.crud.ts
+++ b/packages/api-file-manager/src/createFileManager/settings.crud.ts
@@ -1,6 +1,6 @@
 import { createTopic } from "@webiny/pubsub";
-import { FileManagerSettings, SettingsCRUD } from "~/types";
-import { FileManagerConfig } from "~/createFileManager/index";
+import type { FileManagerSettings, SettingsCRUD } from "~/types";
+import type { FileManagerConfig } from "./types";
 import zod from "zod";
 import { createZodError } from "@webiny/utils";
 
@@ -51,8 +51,12 @@ const updateDataModelValidation = zod.object({
 
 export const createSettingsCrud = ({
     storageOperations,
-    getTenantId
-}: FileManagerConfig): SettingsCRUD => {
+    getTenantId,
+    settingsPermissions
+}: Pick<
+    FileManagerConfig,
+    "storageOperations" | "getTenantId" | "settingsPermissions"
+>): SettingsCRUD => {
     return {
         onSettingsBeforeUpdate: createTopic("fileManager.onSettingsBeforeUpdate"),
         onSettingsAfterUpdate: createTopic("fileManager.onSettingsAfterUpdate"),
@@ -60,6 +64,8 @@ export const createSettingsCrud = ({
             return storageOperations.settings.get({ tenant: getTenantId() });
         },
         async createSettings(data) {
+            await settingsPermissions.ensure();
+
             const results = createDataModelValidation.safeParse(data);
             if (!results.success) {
                 throw createZodError(results.error);
@@ -73,6 +79,7 @@ export const createSettingsCrud = ({
             });
         },
         async updateSettings(data) {
+            await settingsPermissions.ensure();
             const results = updateDataModelValidation.safeParse(data);
             if (!results.success) {
                 throw createZodError(results.error);
@@ -118,6 +125,7 @@ export const createSettingsCrud = ({
             return result;
         },
         async deleteSettings() {
+            await settingsPermissions.ensure();
             await storageOperations.settings.delete({ tenant: getTenantId() });
 
             return true;
diff --git a/packages/api-file-manager/src/createFileManager/system.crud.ts b/packages/api-file-manager/src/createFileManager/system.crud.ts
index 7a966624711..cb408fcd7e3 100644
--- a/packages/api-file-manager/src/createFileManager/system.crud.ts
+++ b/packages/api-file-manager/src/createFileManager/system.crud.ts
@@ -1,20 +1,23 @@
 import { createTopic } from "@webiny/pubsub";
 import { NotAuthorizedError } from "@webiny/api-security";
-import {
+import type {
     FileManagerContextObject,
     FileManagerSettings,
     FileManagerSystem,
     SystemCRUD
 } from "~/types";
 import WebinyError from "@webiny/error";
-import { FileManagerConfig } from "~/createFileManager/index";
+import type { FileManagerConfig } from "~/createFileManager/types";
 
 export const createSystemCrud = ({
     storageOperations,
     getTenantId,
     getIdentity,
     WEBINY_VERSION
-}: FileManagerConfig): SystemCRUD => {
+}: Pick<
+    FileManagerConfig,
+    "storageOperations" | "getTenantId" | "getIdentity" | "WEBINY_VERSION"
+>): SystemCRUD => {
     return {
         onSystemBeforeInstall: createTopic("fileManager.onSystemBeforeInstall"),
         onSystemAfterInstall: createTopic("fileManager.onSystemAfterInstall"),
diff --git a/packages/api-file-manager/src/createFileManager/types.ts b/packages/api-file-manager/src/createFileManager/types.ts
new file mode 100644
index 00000000000..d3b2655c534
--- /dev/null
+++ b/packages/api-file-manager/src/createFileManager/types.ts
@@ -0,0 +1,17 @@
+import type { FileManagerStorageOperations } from "~/types";
+import type { FilesPermissions } from "./permissions/FilesPermissions";
+import type { GetPermissions, SecurityIdentity } from "@webiny/api-security/types";
+import type { FileStorage } from "~/storage/FileStorage";
+import type { SettingsPermissions } from "./permissions/SettingsPermissions";
+
+export interface FileManagerConfig {
+    storageOperations: FileManagerStorageOperations;
+    filesPermissions: FilesPermissions;
+    settingsPermissions: SettingsPermissions;
+    getTenantId: () => string;
+    getLocaleCode: () => string;
+    getIdentity: () => SecurityIdentity;
+    getPermissions: GetPermissions;
+    storage: FileStorage;
+    WEBINY_VERSION: string;
+}
diff --git a/packages/api-file-manager/src/index.ts b/packages/api-file-manager/src/index.ts
index cd83bba8525..204005beddf 100644
--- a/packages/api-file-manager/src/index.ts
+++ b/packages/api-file-manager/src/index.ts
@@ -1,10 +1,10 @@
 import { ContextPlugin } from "@webiny/api";
-import { FileManagerConfig } from "~/createFileManager";
-import { FileManagerContext } from "~/types";
+import type { FileManagerContext } from "~/types";
 import { FileManagerContextSetup } from "./FileManagerContextSetup";
-import { setupAssetDelivery, AssetDeliveryParams } from "./delivery/setupAssetDelivery";
+import { AssetDeliveryParams, setupAssetDelivery } from "./delivery/setupAssetDelivery";
 import { createGraphQLSchemaPlugin } from "./graphql";
 import { applyThreatScanning } from "./enterprise/applyThreatScanning";
+import type { FileManagerConfig } from "./createFileManager/types";
 
 export * from "./modelModifier/CmsModelModifier";
 export * from "./plugins";
diff --git a/packages/api-file-manager/src/types.ts b/packages/api-file-manager/src/types.ts
index 0b1a6d2234e..8f2147e52c9 100644
--- a/packages/api-file-manager/src/types.ts
+++ b/packages/api-file-manager/src/types.ts
@@ -33,6 +33,10 @@ export interface FilePermission extends SecurityPermission {
     own?: boolean;
 }
 
+export interface SettingsPermission extends SecurityPermission {
+    name: "fm.setting";
+}
+
 export interface FileInput {
     id: string;
 
diff --git a/packages/api-form-builder-so-ddb-es/package.json b/packages/api-form-builder-so-ddb-es/package.json
index 970f683b93e..e85c9e76090 100644
--- a/packages/api-form-builder-so-ddb-es/package.json
+++ b/packages/api-form-builder-so-ddb-es/package.json
@@ -26,6 +26,7 @@
   "license": "MIT",
   "dependencies": {
     "@elastic/elasticsearch": "7.12.0",
+    "@webiny/api": "0.0.0",
     "@webiny/api-elasticsearch": "0.0.0",
     "@webiny/api-elasticsearch-tasks": "0.0.0",
     "@webiny/api-form-builder": "0.0.0",
diff --git a/packages/api-form-builder-so-ddb-es/src/index.ts b/packages/api-form-builder-so-ddb-es/src/index.ts
index 33773290324..0a589892c5a 100644
--- a/packages/api-form-builder-so-ddb-es/src/index.ts
+++ b/packages/api-form-builder-so-ddb-es/src/index.ts
@@ -15,10 +15,7 @@ import { createFormStorageOperations } from "~/operations/form";
 import { createElasticsearchTable } from "~/definitions/tableElasticsearch";
 import { PluginsContainer } from "@webiny/plugins";
 import { createElasticsearchEntity } from "~/definitions/elasticsearch";
-import {
-    CompressionPlugin,
-    ElasticsearchQueryBuilderOperatorPlugin
-} from "@webiny/api-elasticsearch";
+import { ElasticsearchQueryBuilderOperatorPlugin } from "@webiny/api-elasticsearch";
 import { elasticsearchIndexPlugins } from "~/elasticsearch/indices";
 import { createElasticsearchIndex } from "~/elasticsearch/createElasticsearchIndex";
 import { FormBuilderContext } from "@webiny/api-form-builder/types";
@@ -35,6 +32,7 @@ import {
     SubmissionElasticsearchSortModifierPlugin
 } from "~/plugins";
 import { createIndexTaskPlugin } from "~/tasks/createIndexTaskPlugin";
+import { CompressorPlugin } from "@webiny/api";
 
 const reservedFields = ["PK", "SK", "index", "data", "TYPE", "__type", "GSI1_PK", "GSI1_SK"];
 
@@ -161,8 +159,6 @@ export const createFormBuilderStorageOperations: FormBuilderStorageOperationsFac
             });
 
             const types: string[] = [
-                // Elasticsearch
-                CompressionPlugin.type,
                 ElasticsearchQueryBuilderOperatorPlugin.type,
                 // Form Builder
                 FormDynamoDbFieldPlugin.type,
@@ -174,7 +170,8 @@ export const createFormBuilderStorageOperations: FormBuilderStorageOperationsFac
                 SubmissionElasticsearchBodyModifierPlugin.type,
                 SubmissionElasticsearchFieldPlugin.type,
                 SubmissionElasticsearchQueryModifierPlugin.type,
-                SubmissionElasticsearchSortModifierPlugin.type
+                SubmissionElasticsearchSortModifierPlugin.type,
+                CompressorPlugin.type
             ];
             for (const type of types) {
                 plugins.mergeByType(context.plugins, type);
diff --git a/packages/api-form-builder-so-ddb-es/tsconfig.build.json b/packages/api-form-builder-so-ddb-es/tsconfig.build.json
index 2ee283960f0..2de106550fe 100644
--- a/packages/api-form-builder-so-ddb-es/tsconfig.build.json
+++ b/packages/api-form-builder-so-ddb-es/tsconfig.build.json
@@ -2,6 +2,7 @@
   "extends": "../../tsconfig.build.json",
   "include": ["src"],
   "references": [
+    { "path": "../api/tsconfig.build.json" },
     { "path": "../api-elasticsearch/tsconfig.build.json" },
     { "path": "../api-elasticsearch-tasks/tsconfig.build.json" },
     { "path": "../api-form-builder/tsconfig.build.json" },
diff --git a/packages/api-form-builder-so-ddb-es/tsconfig.json b/packages/api-form-builder-so-ddb-es/tsconfig.json
index 741d425b0c9..13d5052aad2 100644
--- a/packages/api-form-builder-so-ddb-es/tsconfig.json
+++ b/packages/api-form-builder-so-ddb-es/tsconfig.json
@@ -2,6 +2,7 @@
   "extends": "../../tsconfig.json",
   "include": ["src", "__tests__"],
   "references": [
+    { "path": "../api" },
     { "path": "../api-elasticsearch" },
     { "path": "../api-elasticsearch-tasks" },
     { "path": "../api-form-builder" },
@@ -21,6 +22,8 @@
     "paths": {
       "~/*": ["./src/*"],
       "~tests/*": ["./__tests__/*"],
+      "@webiny/api/*": ["../api/src/*"],
+      "@webiny/api": ["../api/src"],
       "@webiny/api-elasticsearch/*": ["../api-elasticsearch/src/*"],
       "@webiny/api-elasticsearch": ["../api-elasticsearch/src"],
       "@webiny/api-elasticsearch-tasks/*": ["../api-elasticsearch-tasks/src/*"],
diff --git a/packages/api-form-builder-so-ddb/package.json b/packages/api-form-builder-so-ddb/package.json
index d536c0dc435..23d4713212e 100644
--- a/packages/api-form-builder-so-ddb/package.json
+++ b/packages/api-form-builder-so-ddb/package.json
@@ -21,6 +21,7 @@
   ],
   "license": "MIT",
   "dependencies": {
+    "@webiny/api": "0.0.0",
     "@webiny/api-form-builder": "0.0.0",
     "@webiny/aws-sdk": "0.0.0",
     "@webiny/db-dynamodb": "0.0.0",
diff --git a/packages/api-form-builder-so-ddb/src/index.ts b/packages/api-form-builder-so-ddb/src/index.ts
index 1f530b61e49..639c10df494 100644
--- a/packages/api-form-builder-so-ddb/src/index.ts
+++ b/packages/api-form-builder-so-ddb/src/index.ts
@@ -14,6 +14,7 @@ import { createSettingsStorageOperations } from "~/operations/settings";
 import { createFormStorageOperations } from "~/operations/form";
 import { PluginsContainer } from "@webiny/plugins";
 import { FormDynamoDbFieldPlugin, FormSubmissionDynamoDbFieldPlugin } from "~/plugins";
+import { CompressorPlugin } from "@webiny/api";
 
 const reservedFields = ["PK", "SK", "index", "data", "TYPE", "__type", "GSI1_PK", "GSI1_SK"];
 
@@ -92,7 +93,8 @@ export const createFormBuilderStorageOperations: FormBuilderStorageOperationsFac
         beforeInit: async context => {
             const types: string[] = [
                 FormDynamoDbFieldPlugin.type,
-                FormSubmissionDynamoDbFieldPlugin.type
+                FormSubmissionDynamoDbFieldPlugin.type,
+                CompressorPlugin.type
             ];
             for (const type of types) {
                 plugins.mergeByType(context.plugins, type);
diff --git a/packages/api-form-builder-so-ddb/tsconfig.build.json b/packages/api-form-builder-so-ddb/tsconfig.build.json
index ac484fb0fbf..f4594452d15 100644
--- a/packages/api-form-builder-so-ddb/tsconfig.build.json
+++ b/packages/api-form-builder-so-ddb/tsconfig.build.json
@@ -2,6 +2,7 @@
   "extends": "../../tsconfig.build.json",
   "include": ["src"],
   "references": [
+    { "path": "../api/tsconfig.build.json" },
     { "path": "../api-form-builder/tsconfig.build.json" },
     { "path": "../aws-sdk/tsconfig.build.json" },
     { "path": "../db-dynamodb/tsconfig.build.json" },
diff --git a/packages/api-form-builder-so-ddb/tsconfig.json b/packages/api-form-builder-so-ddb/tsconfig.json
index 2f22c781d6b..f534f33ed63 100644
--- a/packages/api-form-builder-so-ddb/tsconfig.json
+++ b/packages/api-form-builder-so-ddb/tsconfig.json
@@ -2,6 +2,7 @@
   "extends": "../../tsconfig.json",
   "include": ["src", "__tests__"],
   "references": [
+    { "path": "../api" },
     { "path": "../api-form-builder" },
     { "path": "../aws-sdk" },
     { "path": "../db-dynamodb" },
@@ -17,6 +18,8 @@
     "paths": {
       "~/*": ["./src/*"],
       "~tests/*": ["./__tests__/*"],
+      "@webiny/api/*": ["../api/src/*"],
+      "@webiny/api": ["../api/src"],
       "@webiny/api-form-builder/*": ["../api-form-builder/src/*"],
       "@webiny/api-form-builder": ["../api-form-builder/src"],
       "@webiny/aws-sdk/*": ["../aws-sdk/src/*"],
diff --git a/packages/api-headless-cms-aco/__tests__/utils/useGraphQlHandler.ts b/packages/api-headless-cms-aco/__tests__/utils/useGraphQlHandler.ts
index ecb3b3d4bc4..6a91cdad4dc 100644
--- a/packages/api-headless-cms-aco/__tests__/utils/useGraphQlHandler.ts
+++ b/packages/api-headless-cms-aco/__tests__/utils/useGraphQlHandler.ts
@@ -22,6 +22,7 @@ import { createTestWcpLicense } from "@webiny/wcp/testing/createTestWcpLicense";
 import { createWcpContext } from "@webiny/api-wcp";
 import { AdminUsersStorageOperations } from "@webiny/api-admin-users/types";
 import { until } from "@webiny/project-utils/testing/helpers/until";
+import { getDocumentClient } from "@webiny/project-utils/testing/dynamodb";
 import {
     CREATE_CONTENT_MODEL,
     CREATE_CONTENT_MODEL_GROUP,
@@ -61,6 +62,7 @@ const defaultIdentity: SecurityIdentity = {
 export const useGraphQlHandler = (params: UseGQLHandlerParams = {}) => {
     const { permissions, identity, plugins = [] } = params;
 
+    const documentClient = getDocumentClient();
     const cmsStorage = getStorageOps<HeadlessCmsStorageOperations>("cms");
     const i18nStorage = getStorageOps<any[]>("i18n");
     const adminUsersStorage = getStorageOps<AdminUsersStorageOperations>("adminUsers");
@@ -89,7 +91,7 @@ export const useGraphQlHandler = (params: UseGQLHandlerParams = {}) => {
                 storageOperations: cmsStorage.storageOperations
             }),
             createHeadlessCmsGraphQL(),
-            createAco(),
+            createAco({ documentClient }),
             createAcoHcmsContext(),
             plugins
         ],
diff --git a/packages/api-headless-cms-bulk-actions/src/tasks/createEmptyTrashBinsTask.ts b/packages/api-headless-cms-bulk-actions/src/tasks/createEmptyTrashBinsTask.ts
index 71bd89fb49a..4e176f10336 100644
--- a/packages/api-headless-cms-bulk-actions/src/tasks/createEmptyTrashBinsTask.ts
+++ b/packages/api-headless-cms-bulk-actions/src/tasks/createEmptyTrashBinsTask.ts
@@ -57,6 +57,9 @@ export const createEmptyTrashBinsTask = () => {
                     return;
                 }
 
+                // Reloading locales for the current tenant to ensure the correct data is available before proceeding.
+                await context.i18n.reloadLocales();
+
                 // Fetch all locales for the tenant.
                 const locales = context.i18n.getLocales();
                 await context.i18n.withEachLocale(locales, async () => {
diff --git a/packages/api-headless-cms-ddb-es/__tests__/api/mocks/result.ts b/packages/api-headless-cms-ddb-es/__tests__/api/mocks/result.ts
index 8e18ddf6ef0..dbe1fc0f8b7 100644
--- a/packages/api-headless-cms-ddb-es/__tests__/api/mocks/result.ts
+++ b/packages/api-headless-cms-ddb-es/__tests__/api/mocks/result.ts
@@ -10,7 +10,7 @@ export const createExpectedGetResult = () => {
                 value: expect.any(String)
             },
             body: {
-                compression: "jsonpack",
+                compression: "gzip",
                 value: expect.any(String)
             },
             information: {
@@ -23,7 +23,7 @@ export const createExpectedGetResult = () => {
                     value: expect.any(String)
                 },
                 subBody: {
-                    compression: "jsonpack",
+                    compression: "gzip",
                     value: expect.any(String)
                 },
                 subInformation: {
@@ -36,7 +36,7 @@ export const createExpectedGetResult = () => {
                         value: expect.any(String)
                     },
                     subSecondSubBody: {
-                        compression: "jsonpack",
+                        compression: "gzip",
                         value: expect.any(String)
                     }
                 }
diff --git a/packages/api-headless-cms-ddb-es/__tests__/converters/convertersDisabled.test.ts b/packages/api-headless-cms-ddb-es/__tests__/converters/convertersDisabled.test.ts
index dac86634f7c..93f9410afa5 100644
--- a/packages/api-headless-cms-ddb-es/__tests__/converters/convertersDisabled.test.ts
+++ b/packages/api-headless-cms-ddb-es/__tests__/converters/convertersDisabled.test.ts
@@ -1,11 +1,12 @@
 import { SearchBody } from "@webiny/api-elasticsearch/types";
 import { useHandler } from "~tests/graphql/handler";
 import { createMockPlugins } from "./mocks";
-import { createEntryRawData } from "./mocks/data";
+import { bodies, createEntryRawData } from "./mocks/data";
 import { configurations } from "~/configurations";
 import { CmsModel } from "@webiny/api-headless-cms/types";
 import { get } from "@webiny/db-dynamodb";
 import { createPartitionKey } from "~/operations/entry/keys";
+import { compress } from "~tests/mocks/compressor";
 
 describe("storage field path converters disabled", () => {
     const { elasticsearch, entryEntity } = useHandler();
@@ -55,7 +56,7 @@ describe("storage field path converters disabled", () => {
                     value: expect.any(String)
                 },
                 body: {
-                    compression: "jsonpack",
+                    compression: "gzip",
                     value: expect.any(String)
                 },
                 information: {
@@ -68,7 +69,7 @@ describe("storage field path converters disabled", () => {
                         value: expect.any(String)
                     },
                     subBody: {
-                        compression: "jsonpack",
+                        compression: "gzip",
                         value: expect.any(String)
                     },
                     subInformation: {
@@ -81,7 +82,7 @@ describe("storage field path converters disabled", () => {
                             value: expect.any(String)
                         },
                         subSecondSubBody: {
-                            compression: "jsonpack",
+                            compression: "gzip",
                             value: expect.any(String)
                         }
                     }
@@ -107,7 +108,7 @@ describe("storage field path converters disabled", () => {
                 dateOfBirth: new Date("2020-01-01").toISOString(),
                 description: "Description level 0",
                 body: {
-                    compression: "jsonpack",
+                    compression: "gzip",
                     value: expect.any(String)
                 },
                 information: {
@@ -117,7 +118,7 @@ describe("storage field path converters disabled", () => {
                     subDateOfBirth: new Date("2020-01-02").toISOString(),
                     subDescription: "Description level 1",
                     subBody: {
-                        compression: "jsonpack",
+                        compression: "gzip",
                         value: expect.any(String)
                     },
                     subInformation: {
@@ -127,7 +128,7 @@ describe("storage field path converters disabled", () => {
                         subSecondSubDateOfBirth: new Date("2020-01-03").toISOString(),
                         subSecondSubDescription: "Description level 2",
                         subSecondSubBody: {
-                            compression: "jsonpack",
+                            compression: "gzip",
                             value: expect.any(String)
                         }
                     }
@@ -183,18 +184,18 @@ describe("storage field path converters disabled", () => {
             },
             rawValues: {
                 body: {
-                    compression: "jsonpack",
-                    value: "tag|p|content|Content+level+0^^^@$0|1|2|3]]"
+                    compression: "gzip",
+                    value: await compress(bodies.body)
                 },
                 information: {
                     subBody: {
-                        compression: "jsonpack",
-                        value: "tag|p1|content|Content+level+1^^^@$0|1|2|3]]"
+                        compression: "gzip",
+                        value: await compress(bodies.subBody)
                     },
                     subInformation: {
                         subSecondSubBody: {
-                            compression: "jsonpack",
-                            value: "tag|p2|content|Content+level+2^^^@$0|1|2|3]]"
+                            compression: "gzip",
+                            value: await compress(bodies.subSecondSubBody)
                         }
                     }
                 }
@@ -226,8 +227,8 @@ describe("storage field path converters disabled", () => {
                     value: expect.any(String)
                 },
                 body: {
-                    compression: "jsonpack",
-                    value: "tag|p|content|Content+level+0^^^@$0|1|2|3]]"
+                    compression: "gzip",
+                    value: await compress(bodies.body)
                 },
                 information: {
                     subtitle: "Title level 1",
@@ -239,8 +240,8 @@ describe("storage field path converters disabled", () => {
                         value: expect.any(String)
                     },
                     subBody: {
-                        compression: "jsonpack",
-                        value: "tag|p1|content|Content+level+1^^^@$0|1|2|3]]"
+                        compression: "gzip",
+                        value: await compress(bodies.subBody)
                     },
                     subInformation: {
                         subSecondSubtitle: "Title level 2",
@@ -252,8 +253,8 @@ describe("storage field path converters disabled", () => {
                             value: expect.any(String)
                         },
                         subSecondSubBody: {
-                            compression: "jsonpack",
-                            value: "tag|p2|content|Content+level+2^^^@$0|1|2|3]]"
+                            compression: "gzip",
+                            value: await compress(bodies.subSecondSubBody)
                         }
                     }
                 }
diff --git a/packages/api-headless-cms-ddb-es/__tests__/converters/convertersEnabled.test.ts b/packages/api-headless-cms-ddb-es/__tests__/converters/convertersEnabled.test.ts
index 8cb4780d8c1..935245629ce 100644
--- a/packages/api-headless-cms-ddb-es/__tests__/converters/convertersEnabled.test.ts
+++ b/packages/api-headless-cms-ddb-es/__tests__/converters/convertersEnabled.test.ts
@@ -58,7 +58,7 @@ describe("storage field path converters enabled", () => {
                     value: expect.any(String)
                 },
                 body: {
-                    compression: "jsonpack",
+                    compression: "gzip",
                     value: expect.any(String)
                 },
                 information: {
@@ -71,7 +71,7 @@ describe("storage field path converters enabled", () => {
                         value: expect.any(String)
                     },
                     subBody: {
-                        compression: "jsonpack",
+                        compression: "gzip",
                         value: expect.any(String)
                     },
                     subInformation: {
@@ -84,7 +84,7 @@ describe("storage field path converters enabled", () => {
                             value: expect.any(String)
                         },
                         subSecondSubBody: {
-                            compression: "jsonpack",
+                            compression: "gzip",
                             value: expect.any(String)
                         }
                     }
@@ -111,7 +111,7 @@ describe("storage field path converters enabled", () => {
                 dateOfBirth: new Date("2020-01-01").toISOString(),
                 description: "Description level 0",
                 body: {
-                    compression: "jsonpack",
+                    compression: "gzip",
                     value: expect.any(String)
                 },
                 information: {
@@ -121,7 +121,7 @@ describe("storage field path converters enabled", () => {
                     subDateOfBirth: new Date("2020-01-02").toISOString(),
                     subDescription: "Description level 1",
                     subBody: {
-                        compression: "jsonpack",
+                        compression: "gzip",
                         value: expect.any(String)
                     },
                     subInformation: {
@@ -131,7 +131,7 @@ describe("storage field path converters enabled", () => {
                         subSecondSubDateOfBirth: new Date("2020-01-03").toISOString(),
                         subSecondSubDescription: "Description level 2",
                         subSecondSubBody: {
-                            compression: "jsonpack",
+                            compression: "gzip",
                             value: expect.any(String)
                         }
                     }
@@ -163,7 +163,7 @@ describe("storage field path converters enabled", () => {
         expect(hits.length).toBe(1);
         const source = hits[0]._source;
         const expectedElasticsearchRecord = {
-            ...createElasticsearchEntryConvertedData().values
+            ...(await createElasticsearchEntryConvertedData()).values
         };
         expect(source.values).toEqual(expectedElasticsearchRecord);
         /**
@@ -181,8 +181,8 @@ describe("storage field path converters enabled", () => {
         });
 
         const expectedDynamoDbRecord = lodashMerge(
-            createElasticsearchEntryConvertedData().values,
-            createElasticsearchEntryConvertedData().rawValues
+            (await createElasticsearchEntryConvertedData()).values,
+            (await createElasticsearchEntryConvertedData()).rawValues
         );
 
         expect(dbResponse?.values).toEqual({
diff --git a/packages/api-headless-cms-ddb-es/__tests__/converters/mocks/data.ts b/packages/api-headless-cms-ddb-es/__tests__/converters/mocks/data.ts
index bf2e246e17d..dcea451130e 100644
--- a/packages/api-headless-cms-ddb-es/__tests__/converters/mocks/data.ts
+++ b/packages/api-headless-cms-ddb-es/__tests__/converters/mocks/data.ts
@@ -1,3 +1,26 @@
+import { compress } from "~tests/mocks/compressor";
+
+export const bodies = {
+    body: [
+        {
+            tag: "p",
+            content: "Content level 0"
+        }
+    ],
+    subBody: [
+        {
+            tag: "p1",
+            content: "Content level 1"
+        }
+    ],
+    subSecondSubBody: [
+        {
+            tag: "p2",
+            content: "Content level 2"
+        }
+    ]
+};
+
 export const createEntryRawData = () => {
     return {
         title: "Title level 0",
@@ -5,42 +28,27 @@ export const createEntryRawData = () => {
         isMarried: true,
         dateOfBirth: "2020-01-01",
         description: "Description level 0",
-        body: [
-            {
-                tag: "p",
-                content: "Content level 0"
-            }
-        ],
+        body: bodies.body,
         information: {
             subtitle: "Title level 1",
             subAge: 234,
             subIsMarried: false,
             subDateOfBirth: "2020-01-02",
             subDescription: "Description level 1",
-            subBody: [
-                {
-                    tag: "p1",
-                    content: "Content level 1"
-                }
-            ],
+            subBody: bodies.subBody,
             subInformation: {
                 subSecondSubtitle: "Title level 2",
                 subSecondSubAge: 345,
                 subSecondSubIsMarried: false,
                 subSecondSubDateOfBirth: "2020-01-03",
                 subSecondSubDescription: "Description level 2",
-                subSecondSubBody: [
-                    {
-                        tag: "p2",
-                        content: "Content level 2"
-                    }
-                ]
+                subSecondSubBody: bodies.subSecondSubBody
             }
         }
     };
 };
 
-export const createElasticsearchEntryConvertedData = () => {
+export const createElasticsearchEntryConvertedData = async () => {
     return {
         values: {
             "text@titleFieldIdWithSomeValue": "Title level 0",
@@ -65,18 +73,18 @@ export const createElasticsearchEntryConvertedData = () => {
         },
         rawValues: {
             "rich-text@bodyFieldIdWithSomeValue": {
-                compression: "jsonpack",
-                value: "tag|p|content|Content+level+0^^^@$0|1|2|3]]"
+                compression: "gzip",
+                value: await compress(bodies.body)
             },
             "object@informationFieldIdWithSomeValue": {
                 "rich-text@subBodyFieldIdWithSomeValue": {
-                    compression: "jsonpack",
-                    value: "tag|p1|content|Content+level+1^^^@$0|1|2|3]]"
+                    compression: "gzip",
+                    value: await compress(bodies.subBody)
                 },
                 "object@subInformationFieldIdWithSomeValue": {
                     "rich-text@subSecondSubBodyFieldIdWithSomeValue": {
-                        compression: "jsonpack",
-                        value: "tag|p2|content|Content+level+2^^^@$0|1|2|3]]"
+                        compression: "gzip",
+                        value: await compress(bodies.subSecondSubBody)
                     }
                 }
             }
diff --git a/packages/api-headless-cms-ddb-es/__tests__/mocks/compressor.ts b/packages/api-headless-cms-ddb-es/__tests__/mocks/compressor.ts
new file mode 100644
index 00000000000..3cb49b2ea76
--- /dev/null
+++ b/packages/api-headless-cms-ddb-es/__tests__/mocks/compressor.ts
@@ -0,0 +1,32 @@
+import { createDefaultCompressor } from "@webiny/utils/compression";
+import { PluginsContainer } from "@webiny/plugins";
+import { Context } from "@webiny/api";
+
+const compressor = createDefaultCompressor({
+    plugins: new PluginsContainer()
+});
+
+compressor.disable("jsonpack");
+
+export const compress = async (data: unknown): Promise<string> => {
+    const result = await compressor.compress(data);
+    if (!result || typeof result !== "object") {
+        throw new Error("Failed to compress data.");
+    }
+    // @ts-expect-error
+    return result.value as string;
+};
+
+export const decompress = async (data: string): Promise<unknown> => {
+    return await compressor.decompress({
+        compression: "gzip",
+        value: data
+    });
+};
+
+export const getContextWithCompressor = () => {
+    return new Context({
+        plugins: new PluginsContainer(),
+        WEBINY_VERSION: "0.0.0"
+    });
+};
diff --git a/packages/api-headless-cms-ddb-es/__tests__/plugins/dynamoDb/storage/richText.test.ts b/packages/api-headless-cms-ddb-es/__tests__/plugins/dynamoDb/storage/richText.test.ts
index e53fc264cf3..e81f292a1e1 100644
--- a/packages/api-headless-cms-ddb-es/__tests__/plugins/dynamoDb/storage/richText.test.ts
+++ b/packages/api-headless-cms-ddb-es/__tests__/plugins/dynamoDb/storage/richText.test.ts
@@ -1,5 +1,7 @@
 import { createRichTextStorageTransformPlugin } from "~/dynamoDb/storage/richText";
 import { FromStorageParams, ToStorageParams } from "@webiny/api-headless-cms";
+import { compress, getContextWithCompressor } from "~tests/mocks/compressor";
+import { Context } from "@webiny/api";
 
 const defaultArgs = {
     field: {
@@ -44,34 +46,58 @@ const testValue = [
     }
 ];
 
-const expectedCompressedValue =
-    "h1|big+title|h2|small+title|h3|subtitle|p|subtitle+description|number919|boolTrue|boolFalse|textYes|yes|content|start+of+the+text|a|text|url|href|https://www.webiny.com|end+of+the+text|more+url|target|_blank^PJ^^@$0|1|2|3]|$4|5|6|7]|$8|O|9|-1|A|-2|B|C|D|@$6|E|F|$G|H|I|J]]|$6|K|F|$G|L|I|J|M|N]]]]]";
-
 describe("richTextStoragePlugin", () => {
+    let expectedCompressedValue: any;
+
+    let context: Context;
+
+    beforeEach(async () => {
+        expectedCompressedValue = await compress(testValue);
+        context = getContextWithCompressor();
+    });
+
     test("toStorage should transform value for storage", async () => {
         const plugin = createRichTextStorageTransformPlugin();
 
         const result = await plugin.toStorage({
             ...defaultArgs,
-            value: testValue
+            value: testValue,
+            plugins: context.plugins
         } as ToStorageParams<any, any>);
 
         expect(result).toEqual({
-            compression: "jsonpack",
+            compression: "gzip",
             value: expectedCompressedValue
         });
     });
 
     test("fromStorage should transform value for output", async () => {
         const value = {
-            compression: "jsonpack",
+            compression: "gzip",
             value: expectedCompressedValue
         };
         const plugin = createRichTextStorageTransformPlugin();
 
         const result = await plugin.fromStorage({
             ...defaultArgs,
-            value
+            value,
+            plugins: context.plugins
+        } as FromStorageParams<any, any>);
+
+        expect(result).toEqual(testValue);
+    });
+
+    it("fromStorage should transform value for output - jsonpack", async () => {
+        const value = {
+            compression: "jsonpack",
+            value: "h1|big+title|h2|small+title|h3|subtitle|p|subtitle+description|number919|boolTrue|boolFalse|textYes|yes|content|start+of+the+text|a|text|url|href|https://www.webiny.com|end+of+the+text|more+url|target|_blank^PJ^^@$0|1|2|3]|$4|5|6|7]|$8|O|9|-1|A|-2|B|C|D|@$6|E|F|$G|H|I|J]]|$6|K|F|$G|L|I|J|M|N]]]]]"
+        };
+        const plugin = createRichTextStorageTransformPlugin();
+
+        const result = await plugin.fromStorage({
+            ...defaultArgs,
+            value,
+            plugins: context.plugins
         } as FromStorageParams<any, any>);
 
         expect(result).toEqual(testValue);
diff --git a/packages/api-headless-cms-ddb-es/package.json b/packages/api-headless-cms-ddb-es/package.json
index eb90faffdc8..8c044aa68ab 100644
--- a/packages/api-headless-cms-ddb-es/package.json
+++ b/packages/api-headless-cms-ddb-es/package.json
@@ -37,7 +37,6 @@
     "@webiny/plugins": "0.0.0",
     "@webiny/utils": "0.0.0",
     "dataloader": "^2.2.2",
-    "jsonpack": "^1.1.5",
     "lodash": "^4.17.21"
   },
   "devDependencies": {
diff --git a/packages/api-headless-cms-ddb-es/src/dynamoDb/storage/richText.ts b/packages/api-headless-cms-ddb-es/src/dynamoDb/storage/richText.ts
index d99efa1d443..2f6eb640e60 100644
--- a/packages/api-headless-cms-ddb-es/src/dynamoDb/storage/richText.ts
+++ b/packages/api-headless-cms-ddb-es/src/dynamoDb/storage/richText.ts
@@ -1,103 +1,47 @@
-import jsonpack from "jsonpack";
 import WebinyError from "@webiny/error";
 import { StorageTransformPlugin } from "@webiny/api-headless-cms";
-
-export type OriginalValue = Record<string, any> | any[];
-
-export interface StorageValue {
-    compression: string;
-    value: any;
-}
-
-/**
- * Remove when jsonpack gets PR with a fix merged
- * https://github.com/rgcl/jsonpack/pull/25/files
- * NOTE 2021-07-28: it seems PR is not going to be merged so keep this.
- */
-// TODO @ts-refactor figure better type
-const transformArray = (value: any) => {
-    if (!value) {
-        return value;
-    }
-    let isArray = Array.isArray(value);
-    const shouldBeArray = value instanceof Array === false && isArray;
-    if (shouldBeArray) {
-        value = Array.from(value);
-        isArray = true;
-    }
-    if (typeof value === "object" || isArray) {
-        for (const k in value) {
-            value[k] = transformArray(value[k]);
-        }
-    }
-    return value;
-};
+import { CompressorPlugin } from "@webiny/api";
 
 export const createRichTextStorageTransformPlugin = () => {
     const plugin = new StorageTransformPlugin({
         name: "headless-cms.storage-transform.rich-text.default",
         fieldType: "rich-text",
-        fromStorage: async ({ field, value: storageValue }) => {
+        fromStorage: async ({ field, value: storageValue, plugins }) => {
             if (!storageValue) {
                 return storageValue;
             } else if (typeof storageValue !== "object") {
                 throw new WebinyError(
-                    `RichText value received in "fromStorage" function is not an object in field "${field.storageId}".`
+                    `RichText value received in "fromStorage" function is not an object in field "${field.storageId}" - ${field.fieldId}.`
                 );
             }
-            /**
-             * This is to circumvent a bug introduced with 5.8.0 storage operations.
-             * Do not remove.
-             */
-            if (!storageValue["compression"]) {
+
+            let compressor: CompressorPlugin;
+
+            try {
+                compressor = plugins.oneByType<CompressorPlugin>(CompressorPlugin.type);
+            } catch (ex) {
                 return storageValue;
             }
-            const { compression, value } = storageValue;
-            if (compression !== "jsonpack") {
-                throw new WebinyError(
-                    `This plugin cannot transform something not packed with "jsonpack".`,
-                    "WRONG_COMPRESSION",
-                    {
-                        compression
-                    }
-                );
-            }
-            /**
-             * No point in going further if no value.
-             */
-            if (!value) {
-                return null;
-            }
+
             try {
-                return jsonpack.unpack(value);
-            } catch (ex) {
-                return null;
+                return await compressor.getCompressor().decompress(storageValue);
+            } catch {
+                return storageValue;
             }
         },
-        toStorage: async ({ value }) => {
-            /**
-             * There is a possibility that we are trying to compress already compressed value.
-             * Introduced a bug with 5.8.0 storage operations, so just return the value to correct it.
-             */
-            if (!!value?.compression) {
-                return value;
-            }
-            value = transformArray(value);
+        toStorage: async ({ value, plugins }) => {
+            let compressor: CompressorPlugin;
 
-            let jsonValue: string | null = null;
             try {
-                jsonValue = jsonpack.pack(value);
+                compressor = plugins.oneByType<CompressorPlugin>(CompressorPlugin.type);
             } catch (ex) {
-                if (process.env.DEBUG !== "true") {
-                    return null;
-                }
-                console.log("Error while compressing rich-text.");
-                console.log(ex.message);
+                return value;
+            }
+            try {
+                return await compressor.getCompressor().compress(value);
+            } catch {
+                return value;
             }
-            return {
-                compression: "jsonpack",
-                value: jsonValue
-            };
         }
     });
     plugin.name = `headless-cms.dynamodb.storageTransform.rich-text`;
diff --git a/packages/api-headless-cms-ddb-es/src/index.ts b/packages/api-headless-cms-ddb-es/src/index.ts
index 7c0dbad00e8..238c36f8fad 100644
--- a/packages/api-headless-cms-ddb-es/src/index.ts
+++ b/packages/api-headless-cms-ddb-es/src/index.ts
@@ -15,10 +15,7 @@ import { createSystemEntity } from "~/definitions/system";
 import { createElasticsearchIndex } from "~/elasticsearch/createElasticsearchIndex";
 import { PluginsContainer } from "@webiny/plugins";
 import { createGroupsStorageOperations } from "~/operations/group";
-import {
-    CompressionPlugin,
-    ElasticsearchQueryBuilderOperatorPlugin
-} from "@webiny/api-elasticsearch";
+import { ElasticsearchQueryBuilderOperatorPlugin } from "@webiny/api-elasticsearch";
 import { elasticsearchIndexPlugins } from "./elasticsearch/indices";
 import { deleteElasticsearchIndex } from "./elasticsearch/deleteElasticsearchIndex";
 import {
@@ -36,6 +33,7 @@ import { CmsEntryFilterPlugin } from "~/plugins/CmsEntryFilterPlugin";
 import { StorageOperationsCmsModelPlugin, StorageTransformPlugin } from "@webiny/api-headless-cms";
 import { createElasticsearchIndexesOnLocaleAfterCreate } from "~/operations/system/indexes";
 import { createIndexTaskPluginTest } from "~/tasks/createIndexTaskPlugin";
+import { CompressorPlugin } from "@webiny/api";
 
 export * from "./plugins";
 
@@ -153,8 +151,6 @@ export const createStorageOperations: StorageOperationsFactory = params => {
              * This way we do not need to register plugins in the storage plugins contains.
              */
             const types: string[] = [
-                // Elasticsearch
-                CompressionPlugin.type,
                 ElasticsearchQueryBuilderOperatorPlugin.type,
                 // Headless CMS
                 "cms-model-field-to-graphql",
@@ -168,7 +164,8 @@ export const createStorageOperations: StorageOperationsFactory = params => {
                 CmsElasticsearchModelFieldPlugin.type,
                 StorageOperationsCmsModelPlugin.type,
                 StorageTransformPlugin.type,
-                CmsEntryElasticsearchValuesModifier.type
+                CmsEntryElasticsearchValuesModifier.type,
+                CompressorPlugin.type
             ];
             for (const type of types) {
                 plugins.mergeByType(context.plugins, type);
diff --git a/packages/api-headless-cms-ddb/__tests__/mocks/compressor.ts b/packages/api-headless-cms-ddb/__tests__/mocks/compressor.ts
new file mode 100644
index 00000000000..3cb49b2ea76
--- /dev/null
+++ b/packages/api-headless-cms-ddb/__tests__/mocks/compressor.ts
@@ -0,0 +1,32 @@
+import { createDefaultCompressor } from "@webiny/utils/compression";
+import { PluginsContainer } from "@webiny/plugins";
+import { Context } from "@webiny/api";
+
+const compressor = createDefaultCompressor({
+    plugins: new PluginsContainer()
+});
+
+compressor.disable("jsonpack");
+
+export const compress = async (data: unknown): Promise<string> => {
+    const result = await compressor.compress(data);
+    if (!result || typeof result !== "object") {
+        throw new Error("Failed to compress data.");
+    }
+    // @ts-expect-error
+    return result.value as string;
+};
+
+export const decompress = async (data: string): Promise<unknown> => {
+    return await compressor.decompress({
+        compression: "gzip",
+        value: data
+    });
+};
+
+export const getContextWithCompressor = () => {
+    return new Context({
+        plugins: new PluginsContainer(),
+        WEBINY_VERSION: "0.0.0"
+    });
+};
diff --git a/packages/api-headless-cms-ddb/__tests__/plugins/dynamoDb/storage/richText.test.ts b/packages/api-headless-cms-ddb/__tests__/plugins/dynamoDb/storage/richText.test.ts
index 0a94516bc8d..2452d84bfe7 100644
--- a/packages/api-headless-cms-ddb/__tests__/plugins/dynamoDb/storage/richText.test.ts
+++ b/packages/api-headless-cms-ddb/__tests__/plugins/dynamoDb/storage/richText.test.ts
@@ -1,5 +1,7 @@
 import { createRichTextStorageTransformPlugin } from "~/dynamoDb/storage/richText";
 import { FromStorageParams, ToStorageParams } from "@webiny/api-headless-cms";
+import { Context } from "@webiny/api/types";
+import { compress, getContextWithCompressor } from "~tests/mocks/compressor";
 
 const defaultArgs = {
     field: {
@@ -44,34 +46,56 @@ const testValue = [
     }
 ];
 
-const expectedCompressedValue =
-    "h1|big+title|h2|small+title|h3|subtitle|p|subtitle+description|number919|boolTrue|boolFalse|textYes|yes|content|start+of+the+text|a|text|url|href|https://www.webiny.com|end+of+the+text|more+url|target|_blank^PJ^^@$0|1|2|3]|$4|5|6|7]|$8|O|9|-1|A|-2|B|C|D|@$6|E|F|$G|H|I|J]]|$6|K|F|$G|L|I|J|M|N]]]]]";
-
 describe("richTextStoragePlugin", () => {
+    let expectedCompressedValue: any;
+    let context: Context;
+    beforeEach(async () => {
+        expectedCompressedValue = await compress(testValue);
+        context = getContextWithCompressor();
+    });
+
     test("toStorage should transform value for storage", async () => {
         const plugin = createRichTextStorageTransformPlugin();
 
         const result = await plugin.toStorage({
             ...defaultArgs,
-            value: testValue
+            value: testValue,
+            plugins: context.plugins
         } as unknown as ToStorageParams<any, any>);
 
         expect(result).toEqual({
-            compression: "jsonpack",
+            compression: "gzip",
             value: expectedCompressedValue
         });
     });
 
     test("fromStorage should transform value for output", async () => {
         const value = {
-            compression: "jsonpack",
+            compression: "gzip",
             value: expectedCompressedValue
         };
         const plugin = createRichTextStorageTransformPlugin();
 
         const result = await plugin.fromStorage({
             ...defaultArgs,
-            value
+            value,
+            plugins: context.plugins
+        } as unknown as FromStorageParams<any, any>);
+
+        expect(result).toEqual(testValue);
+    });
+
+    it("fromStorage should transform value for output - jsonpack", async () => {
+        const value = {
+            compression: "jsonpack",
+            value: "h1|big+title|h2|small+title|h3|subtitle|p|subtitle+description|number919|boolTrue|boolFalse|textYes|yes|content|start+of+the+text|a|text|url|href|https://www.webiny.com|end+of+the+text|more+url|target|_blank^PJ^^@$0|1|2|3]|$4|5|6|7]|$8|O|9|-1|A|-2|B|C|D|@$6|E|F|$G|H|I|J]]|$6|K|F|$G|L|I|J|M|N]]]]]"
+        };
+        const plugin = createRichTextStorageTransformPlugin();
+
+        const result = await plugin.fromStorage({
+            ...defaultArgs,
+            value,
+            plugins: context.plugins
         } as unknown as FromStorageParams<any, any>);
 
         expect(result).toEqual(testValue);
diff --git a/packages/api-headless-cms-ddb/package.json b/packages/api-headless-cms-ddb/package.json
index 7b796b096c9..7dbff1e0f78 100644
--- a/packages/api-headless-cms-ddb/package.json
+++ b/packages/api-headless-cms-ddb/package.json
@@ -31,7 +31,6 @@
     "@webiny/utils": "0.0.0",
     "dataloader": "^2.2.2",
     "dot-prop": "^6.0.1",
-    "jsonpack": "^1.1.5",
     "lodash": "^4.17.21"
   },
   "devDependencies": {
diff --git a/packages/api-headless-cms-ddb/src/dynamoDb/storage/richText.ts b/packages/api-headless-cms-ddb/src/dynamoDb/storage/richText.ts
index e36addb10e7..8f80cabb7cd 100644
--- a/packages/api-headless-cms-ddb/src/dynamoDb/storage/richText.ts
+++ b/packages/api-headless-cms-ddb/src/dynamoDb/storage/richText.ts
@@ -1,39 +1,15 @@
 /**
  * File is @internal
  */
-import jsonpack from "jsonpack";
 import WebinyError from "@webiny/error";
 import { StorageTransformPlugin } from "@webiny/api-headless-cms";
-
-/**
- * Remove when jsonpack gets PR with a fix merged
- * https://github.com/rgcl/jsonpack/pull/25/files
- * NOTE 2021-07-28: it seems PR is not going to be merged so keep this.
- */
-// TODO @ts-refactor figure better type
-const transformArray = (value: any) => {
-    if (!value) {
-        return value;
-    }
-    let isArray = Array.isArray(value);
-    const shouldBeArray = value instanceof Array === false && isArray;
-    if (shouldBeArray) {
-        value = Array.from(value);
-        isArray = true;
-    }
-    if (typeof value === "object" || isArray) {
-        for (const k in value) {
-            value[k] = transformArray(value[k]);
-        }
-    }
-    return value;
-};
+import { CompressorPlugin } from "@webiny/api";
 
 export const createRichTextStorageTransformPlugin = () => {
     return new StorageTransformPlugin({
         name: "headless-cms.storage-transform.rich-text.default",
         fieldType: "rich-text",
-        fromStorage: async ({ field, value: storageValue }) => {
+        fromStorage: async ({ field, value: storageValue, plugins }) => {
             if (!storageValue) {
                 return storageValue;
             } else if (typeof storageValue !== "object") {
@@ -41,53 +17,34 @@ export const createRichTextStorageTransformPlugin = () => {
                     `RichText value received in "fromStorage" function is not an object in field "${field.storageId}" - ${field.fieldId}.`
                 );
             }
-            /**
-             * This is to circumvent a bug introduced with 5.8.0 storage operations.
-             * Do not remove.
-             */
-            if (storageValue.hasOwnProperty("compression") === false) {
+
+            let compressor: CompressorPlugin;
+
+            try {
+                compressor = plugins.oneByType<CompressorPlugin>(CompressorPlugin.type);
+            } catch (ex) {
                 return storageValue;
             }
-            const { compression, value } = storageValue;
-            if (!compression) {
-                throw new WebinyError(
-                    `Missing compression in "fromStorage" function in field "${
-                        field.fieldId
-                    }": ${JSON.stringify(storageValue)}.`,
-                    "MISSING_COMPRESSION",
-                    {
-                        value: storageValue
-                    }
-                );
-            }
-            if (compression !== "jsonpack") {
-                throw new WebinyError(
-                    `This plugin cannot transform something not packed with "jsonpack".`,
-                    "WRONG_COMPRESSION",
-                    {
-                        compression
-                    }
-                );
-            }
+
             try {
-                return jsonpack.unpack(value);
+                return await compressor.getCompressor().decompress(storageValue);
             } catch {
-                return null;
+                return storageValue;
             }
         },
-        toStorage: async ({ value }) => {
-            /**
-             * There is a possibility that we are trying to compress already compressed value.
-             * Introduced a bug with 5.8.0 storage operations, so just return the value to correct it.
-             */
-            if (value && value.hasOwnProperty("compression") === true) {
+        toStorage: async ({ value, plugins }) => {
+            let compressor: CompressorPlugin;
+
+            try {
+                compressor = plugins.oneByType<CompressorPlugin>(CompressorPlugin.type);
+            } catch (ex) {
+                return value;
+            }
+            try {
+                return await compressor.getCompressor().compress(value);
+            } catch {
                 return value;
             }
-            value = transformArray(value);
-            return {
-                compression: "jsonpack",
-                value: value ? jsonpack.pack(value) : value
-            };
         }
     });
 };
diff --git a/packages/api-headless-cms-ddb/src/index.ts b/packages/api-headless-cms-ddb/src/index.ts
index bc99f1ac55f..3a5eaa622f4 100644
--- a/packages/api-headless-cms-ddb/src/index.ts
+++ b/packages/api-headless-cms-ddb/src/index.ts
@@ -21,6 +21,7 @@ import {
 } from "~/plugins";
 import { ValueFilterPlugin } from "@webiny/db-dynamodb/plugins/definitions/ValueFilterPlugin";
 import { StorageOperationsCmsModelPlugin, StorageTransformPlugin } from "@webiny/api-headless-cms";
+import { CompressorPlugin } from "@webiny/api";
 
 export * from "./plugins";
 
@@ -90,7 +91,8 @@ export const createStorageOperations: StorageOperationsFactory = params => {
                 CmsEntryFieldSortingPlugin.type,
                 ValueFilterPlugin.type,
                 StorageOperationsCmsModelPlugin.type,
-                StorageTransformPlugin.type
+                StorageTransformPlugin.type,
+                CompressorPlugin.type
             ];
             /**
              * Collect all required plugins from parent context.
diff --git a/packages/api-headless-cms/src/graphql/handleRequest.ts b/packages/api-headless-cms/src/graphql/handleRequest.ts
index dca6da5a8e2..949b201ca31 100644
--- a/packages/api-headless-cms/src/graphql/handleRequest.ts
+++ b/packages/api-headless-cms/src/graphql/handleRequest.ts
@@ -84,6 +84,13 @@ export const handleRequest: HandleRequest = async params => {
             throw ex;
         }
     });
+    /**
+     * IMPORTANT! Do not send anything if reply was already sent.
+     */
+    if (reply.sent) {
+        console.warn("Reply already sent, cannot send the result (api-headless-cms).");
+        return reply;
+    }
 
-    return reply.code(200).send(result);
+    return reply.send(result);
 };
diff --git a/packages/api-page-builder-aco/__tests__/utils/useGraphQlHandler.ts b/packages/api-page-builder-aco/__tests__/utils/useGraphQlHandler.ts
index a858b9f8dde..d7035e37c8e 100644
--- a/packages/api-page-builder-aco/__tests__/utils/useGraphQlHandler.ts
+++ b/packages/api-page-builder-aco/__tests__/utils/useGraphQlHandler.ts
@@ -48,6 +48,7 @@ import createAdminUsersApp from "@webiny/api-admin-users";
 import { createTestWcpLicense } from "@webiny/wcp/testing/createTestWcpLicense";
 import { createWcpContext } from "@webiny/api-wcp";
 import { AdminUsersStorageOperations } from "@webiny/api-admin-users/types";
+import { getDocumentClient } from "@webiny/project-utils/testing/dynamodb";
 
 export interface UseGQLHandlerParams {
     permissions?: SecurityPermission[];
@@ -73,6 +74,7 @@ const defaultIdentity: SecurityIdentity = {
 };
 
 export const useGraphQlHandler = (params: UseGQLHandlerParams = {}) => {
+    const documentClient = getDocumentClient();
     const { permissions, identity, plugins = [] } = params;
 
     const i18nStorage = getStorageOps<any[]>("i18n");
@@ -104,7 +106,7 @@ export const useGraphQlHandler = (params: UseGQLHandlerParams = {}) => {
             createHeadlessCmsGraphQL(),
             createPageBuilderContext({ storageOperations: pageBuilderStorage.storageOperations }),
             createPageBuilderGraphQL(),
-            createAco(),
+            createAco({ documentClient }),
             createAcoPageBuilderContext(),
             plugins
         ],
diff --git a/packages/api-page-builder-aco/src/utils/PageBuilderCrudDecorators.ts b/packages/api-page-builder-aco/src/utils/PageBuilderCrudDecorators.ts
index 5500d5eb1ec..e809fd1700f 100644
--- a/packages/api-page-builder-aco/src/utils/PageBuilderCrudDecorators.ts
+++ b/packages/api-page-builder-aco/src/utils/PageBuilderCrudDecorators.ts
@@ -41,9 +41,11 @@ export class PageBuilderCrudDecorators {
             const page = await originalPbGetPage(pageId, options);
             const pageSearchRecord = await context.pageBuilderAco.app.search.get(page.pid);
             if (pageSearchRecord && pageSearchRecord.location.folderId !== "root") {
-                const folder = await context.aco.folder.get(pageSearchRecord.location.folderId);
+                const { permissions } = await context.aco.folder.get(
+                    pageSearchRecord.location.folderId
+                );
                 await folderLevelPermissions.ensureCanAccessFolderContent({
-                    folder,
+                    permissions,
                     rwd: "r"
                 });
             }
@@ -54,9 +56,9 @@ export class PageBuilderCrudDecorators {
         const originalPbCreatePage = context.pageBuilder.createPage.bind(context.pageBuilder);
         context.pageBuilder.createPage = async (category, meta) => {
             if (meta?.location?.folderId && meta.location.folderId !== "root") {
-                const folder = await context.aco.folder.get(meta.location.folderId);
+                const { permissions } = await context.aco.folder.get(meta.location.folderId);
                 await folderLevelPermissions.ensureCanAccessFolderContent({
-                    folder,
+                    permissions,
                     rwd: "w"
                 });
             }
@@ -69,9 +71,11 @@ export class PageBuilderCrudDecorators {
             const page = await originalPbGetPage(pageId);
             const pageSearchRecord = await context.pageBuilderAco.app.search.get(page.pid);
             if (pageSearchRecord && pageSearchRecord.location.folderId !== "root") {
-                const folder = await context.aco.folder.get(pageSearchRecord.location.folderId);
+                const { permissions } = await context.aco.folder.get(
+                    pageSearchRecord.location.folderId
+                );
                 await folderLevelPermissions.ensureCanAccessFolderContent({
-                    folder,
+                    permissions,
                     rwd: "w"
                 });
             }
@@ -85,9 +89,11 @@ export class PageBuilderCrudDecorators {
 
             const pageSearchRecord = await context.pageBuilderAco.app.search.get(page.pid);
             if (pageSearchRecord && pageSearchRecord.location.folderId !== "root") {
-                const folder = await context.aco.folder.get(pageSearchRecord.location.folderId);
+                const { permissions } = await context.aco.folder.get(
+                    pageSearchRecord.location.folderId
+                );
                 await folderLevelPermissions.ensureCanAccessFolderContent({
-                    folder,
+                    permissions,
                     rwd: "d"
                 });
             }
diff --git a/packages/api-page-builder-so-ddb-es/__tests__/useHandler.ts b/packages/api-page-builder-so-ddb-es/__tests__/useHandler.ts
index d9d40e72c42..feca7fb055e 100644
--- a/packages/api-page-builder-so-ddb-es/__tests__/useHandler.ts
+++ b/packages/api-page-builder-so-ddb-es/__tests__/useHandler.ts
@@ -28,7 +28,6 @@ import { PluginCollection } from "@webiny/plugins/types";
 import { DynamoDbDriver } from "@webiny/db-dynamodb";
 import { createEventHandler as createDynamoDBToElasticsearchHandler } from "@webiny/api-dynamodb-to-elasticsearch";
 import elasticsearchClientContextPlugin, {
-    createGzipCompression,
     getElasticsearchOperators
 } from "@webiny/api-elasticsearch";
 import { simulateStream } from "@webiny/project-utils/testing/dynamodb";
@@ -41,7 +40,6 @@ import { configurations as cmsConfigurations } from "@webiny/api-headless-cms-dd
 import { SEARCH_RECORD_MODEL_ID } from "@webiny/api-aco/record/record.model";
 import { FOLDER_MODEL_ID } from "@webiny/api-aco/folder/folder.model";
 import { LambdaContext } from "@webiny/handler-aws/types";
-// @ts-expect-error
 import { createMockApiLogContextPlugin } from "@webiny/project-utils/testing/mockApiLog";
 
 interface Params {
@@ -103,8 +101,7 @@ export const useHandler = (params: Params) => {
             plugins: [
                 elasticsearchClientContext,
                 createMockApiLogContextPlugin(),
-                createDynamoDBToElasticsearchHandler(),
-                createGzipCompression()
+                createDynamoDBToElasticsearchHandler()
             ]
         })
     );
@@ -139,7 +136,7 @@ export const useHandler = (params: Params) => {
             createPageBuilderContext({
                 storageOperations
             }),
-            createAco(),
+            createAco({ documentClient }),
             createAcoPageBuilderContext(),
             prerenderingHookPlugins(),
             prerenderingServicePlugins({
diff --git a/packages/api-page-builder-so-ddb-es/src/index.ts b/packages/api-page-builder-so-ddb-es/src/index.ts
index 73d8f53705d..1a58ae2e5f2 100644
--- a/packages/api-page-builder-so-ddb-es/src/index.ts
+++ b/packages/api-page-builder-so-ddb-es/src/index.ts
@@ -1,13 +1,12 @@
 import dynamoDbValueFilters from "@webiny/db-dynamodb/plugins/filters";
 import { PluginsContainer } from "@webiny/plugins";
-import {
-    CompressionPlugin,
-    ElasticsearchQueryBuilderOperatorPlugin
-} from "@webiny/api-elasticsearch";
+
+import { ElasticsearchQueryBuilderOperatorPlugin } from "@webiny/api-elasticsearch";
 
 import { ENTITIES, StorageOperationsFactory } from "~/types";
 import { createTable } from "~/definitions/table";
 import { createElasticsearchTable } from "~/definitions/tableElasticsearch";
+
 import { elasticsearchIndexPlugins } from "~/elasticsearch/indices";
 import { createElasticsearchIndex } from "~/elasticsearch/createElasticsearchIndex";
 
@@ -68,6 +67,7 @@ import {
     SearchPublishedPagesPlugin
 } from "./plugins";
 import { createIndexTaskPlugin } from "~/tasks/createIndexTaskPlugin";
+import { CompressorPlugin } from "@webiny/api";
 
 export * from "./plugins";
 
@@ -219,8 +219,6 @@ export const createStorageOperations: StorageOperationsFactory = params => {
                 tags: ["es", entities.pagesEs.name]
             });
             const types: string[] = [
-                // Elasticsearch
-                CompressionPlugin.type,
                 ElasticsearchQueryBuilderOperatorPlugin.type,
                 // Page Builder
                 BlockCategoryDynamoDbElasticFieldPlugin.type,
@@ -237,7 +235,8 @@ export const createStorageOperations: StorageOperationsFactory = params => {
                 PageElementDynamoDbElasticFieldPlugin.type,
                 SearchLatestPagesPlugin.type,
                 SearchPagesPlugin.type,
-                SearchPublishedPagesPlugin.type
+                SearchPublishedPagesPlugin.type,
+                CompressorPlugin.type
             ];
             for (const type of types) {
                 plugins.mergeByType(context.plugins, type);
diff --git a/packages/api-page-builder-so-ddb-es/src/operations/pages/index.ts b/packages/api-page-builder-so-ddb-es/src/operations/pages/index.ts
index b523ec37d03..239b80bef5b 100644
--- a/packages/api-page-builder-so-ddb-es/src/operations/pages/index.ts
+++ b/packages/api-page-builder-so-ddb-es/src/operations/pages/index.ts
@@ -69,6 +69,7 @@ export interface CreatePageStorageOperationsParams {
     elasticsearch: Client;
     plugins: PluginsContainer;
 }
+
 export const createPageStorageOperations = (
     params: CreatePageStorageOperationsParams
 ): PageStorageOperations => {
@@ -86,6 +87,11 @@ export const createPageStorageOperations = (
             SK: createLatestSortKey()
         };
 
+        const publishedKeys = {
+            ...versionKeys,
+            SK: createPublishedSortKey()
+        };
+
         const entityBatch = createEntityWriteBatch({
             entity,
             put: [
@@ -103,17 +109,41 @@ export const createPageStorageOperations = (
         });
 
         const esData = getESLatestPageData(plugins, page, input);
-        try {
-            await entityBatch.execute();
 
-            await put({
-                entity: esEntity,
-                item: {
+        const elasticsearchEntityBatch = createEntityWriteBatch({
+            entity: esEntity,
+            put: [
+                {
                     index: configurations.es(page).index,
                     data: esData,
                     ...latestKeys
                 }
+            ]
+        });
+
+        if (page.status === "published") {
+            entityBatch.put({
+                ...page,
+                ...publishedKeys,
+                TYPE: createPublishedType()
+            });
+
+            entityBatch.put({
+                ...page,
+                TYPE: createPublishedPathType(),
+                PK: createPathPartitionKey(page),
+                SK: createPathSortKey(page)
             });
+
+            elasticsearchEntityBatch.put({
+                index: configurations.es(page).index,
+                data: getESPublishedPageData(plugins, page),
+                ...publishedKeys
+            });
+        }
+        try {
+            await entityBatch.execute();
+            await elasticsearchEntityBatch.execute();
             return page;
         } catch (ex) {
             throw new WebinyError(
diff --git a/packages/api-page-builder-so-ddb/package.json b/packages/api-page-builder-so-ddb/package.json
index 13dc9c00bd9..8241aab2a01 100644
--- a/packages/api-page-builder-so-ddb/package.json
+++ b/packages/api-page-builder-so-ddb/package.json
@@ -18,6 +18,7 @@
   "description": "The DynamoDB storage operations Webiny Page Builder API.",
   "license": "MIT",
   "dependencies": {
+    "@webiny/api": "0.0.0",
     "@webiny/api-page-builder": "0.0.0",
     "@webiny/aws-sdk": "0.0.0",
     "@webiny/db-dynamodb": "0.0.0",
diff --git a/packages/api-page-builder-so-ddb/src/index.ts b/packages/api-page-builder-so-ddb/src/index.ts
index e5ce5c07a83..bd029be8afe 100644
--- a/packages/api-page-builder-so-ddb/src/index.ts
+++ b/packages/api-page-builder-so-ddb/src/index.ts
@@ -47,6 +47,7 @@ import {
     PageElementDynamoDbFieldPlugin,
     PageTemplateDynamoDbFieldPlugin
 } from "~/plugins";
+import { CompressorPlugin } from "@webiny/api";
 
 export * from "./plugins";
 
@@ -170,7 +171,8 @@ export const createStorageOperations: StorageOperationsFactory = params => {
                 PageBlockDynamoDbFieldPlugin.type,
                 PageDynamoDbFieldPlugin.type,
                 PageElementDynamoDbFieldPlugin.type,
-                PageTemplateDynamoDbFieldPlugin.type
+                PageTemplateDynamoDbFieldPlugin.type,
+                CompressorPlugin.type
             ];
             for (const type of types) {
                 plugins.mergeByType(context.plugins, type);
diff --git a/packages/api-page-builder-so-ddb/src/operations/pages/index.ts b/packages/api-page-builder-so-ddb/src/operations/pages/index.ts
index 1938bace62b..75fb2868e0a 100644
--- a/packages/api-page-builder-so-ddb/src/operations/pages/index.ts
+++ b/packages/api-page-builder-so-ddb/src/operations/pages/index.ts
@@ -81,6 +81,7 @@ export interface CreatePageStorageOperationsParams {
     entity: Entity<any>;
     plugins: PluginsContainer;
 }
+
 export const createPageStorageOperations = (
     params: CreatePageStorageOperationsParams
 ): PageStorageOperations => {
@@ -98,6 +99,11 @@ export const createPageStorageOperations = (
             SK: createLatestSortKey(page)
         };
 
+        const publishedKeys = {
+            PK: createPublishedPartitionKey(page),
+            SK: createPublishedSortKey(page)
+        };
+
         const titleLC = page.title.toLowerCase();
         /**
          * We need to create
@@ -122,6 +128,16 @@ export const createPageStorageOperations = (
             ]
         });
 
+        if (page.status === "published") {
+            entityBatch.put({
+                ...page,
+                ...publishedKeys,
+                GSI1_PK: createPathPartitionKey(page),
+                GSI1_SK: page.path,
+                TYPE: createPublishedType()
+            });
+        }
+
         try {
             await entityBatch.execute();
             return page;
diff --git a/packages/api-page-builder-so-ddb/tsconfig.build.json b/packages/api-page-builder-so-ddb/tsconfig.build.json
index 50bc0203995..bc0fbaac3da 100644
--- a/packages/api-page-builder-so-ddb/tsconfig.build.json
+++ b/packages/api-page-builder-so-ddb/tsconfig.build.json
@@ -2,6 +2,7 @@
   "extends": "../../tsconfig.build.json",
   "include": ["src"],
   "references": [
+    { "path": "../api/tsconfig.build.json" },
     { "path": "../api-page-builder/tsconfig.build.json" },
     { "path": "../aws-sdk/tsconfig.build.json" },
     { "path": "../db-dynamodb/tsconfig.build.json" },
diff --git a/packages/api-page-builder-so-ddb/tsconfig.json b/packages/api-page-builder-so-ddb/tsconfig.json
index 8039f1625f5..ae327ff2952 100644
--- a/packages/api-page-builder-so-ddb/tsconfig.json
+++ b/packages/api-page-builder-so-ddb/tsconfig.json
@@ -2,6 +2,7 @@
   "extends": "../../tsconfig.json",
   "include": ["src", "__tests__"],
   "references": [
+    { "path": "../api" },
     { "path": "../api-page-builder" },
     { "path": "../aws-sdk" },
     { "path": "../db-dynamodb" },
@@ -21,6 +22,8 @@
     "paths": {
       "~/*": ["./src/*"],
       "~tests/*": ["./__tests__/*"],
+      "@webiny/api/*": ["../api/src/*"],
+      "@webiny/api": ["../api/src"],
       "@webiny/api-page-builder/*": ["../api-page-builder/src/*"],
       "@webiny/api-page-builder": ["../api-page-builder/src"],
       "@webiny/aws-sdk/*": ["../aws-sdk/src/*"],
diff --git a/packages/api-page-builder/__tests__/graphql/createPage.test.ts b/packages/api-page-builder/__tests__/graphql/createPage.test.ts
new file mode 100644
index 00000000000..62807cabc01
--- /dev/null
+++ b/packages/api-page-builder/__tests__/graphql/createPage.test.ts
@@ -0,0 +1,209 @@
+import useGqlHandler from "./useGqlHandler";
+
+jest.setTimeout(100000);
+
+describe("CRUD Test", () => {
+    const handler = useGqlHandler();
+
+    const { createCategory, createPageV2, getPage, getPublishedPage } = handler;
+
+    it("creating pages via the new createPagesV2 mutation", async () => {
+        await createCategory({
+            data: {
+                slug: `slug`,
+                name: `name`,
+                url: `/some-url/`,
+                layout: `layout`
+            }
+        });
+
+        const page = {
+            id: "67e15c96026bd2000222d698#0002",
+            pid: "67e15c96026bd2000222d698",
+            category: "slug",
+            version: 2,
+            title: "Welcome to Webiny",
+            path: "/welcome-to-webiny",
+            content: {
+                id: "Fv1PpPWu-",
+                type: "document",
+                data: {
+                    settings: {}
+                },
+                elements: []
+            },
+            status: "published",
+            publishedOn: "2025-03-24T13:22:30.918Z",
+            settings: {
+                general: {
+                    snippet: null,
+                    tags: null,
+                    layout: "static",
+                    image: null
+                },
+                social: {
+                    meta: [],
+                    title: null,
+                    description: null,
+                    image: null
+                },
+                seo: {
+                    title: null,
+                    description: null,
+                    meta: []
+                }
+            },
+            createdOn: "2025-03-24T13:22:30.363Z",
+            createdBy: {
+                id: "67e15c7d026bd2000222d67a",
+                displayName: "ad min",
+                type: "admin"
+            }
+        };
+
+        // The V2 of the createPage mutation should allow us to create pages with
+        // predefined `createdOn`, `createdBy`, `id`, `version`, and also immediately have the
+        // page published.
+        await createPageV2({ data: page });
+
+        const [getPageResponse] = await getPage({ id: page.id });
+
+        expect(getPageResponse).toMatchObject({
+            data: {
+                pageBuilder: {
+                    getPage: {
+                        data: {
+                            id: "67e15c96026bd2000222d698#0002",
+                            pid: "67e15c96026bd2000222d698",
+                            editor: "page-builder",
+                            category: {
+                                slug: "slug"
+                            },
+                            version: 2,
+                            title: "Welcome to Webiny",
+                            path: "/welcome-to-webiny",
+                            url: "https://www.test.com/welcome-to-webiny",
+                            content: {
+                                id: "Fv1PpPWu-",
+                                type: "document",
+                                data: {
+                                    settings: {}
+                                },
+                                elements: []
+                            },
+                            savedOn: "2025-03-24T13:22:30.363Z",
+                            status: "published",
+                            locked: true,
+                            publishedOn: "2025-03-24T13:22:30.918Z",
+                            revisions: [
+                                {
+                                    id: "67e15c96026bd2000222d698#0002",
+                                    status: "published",
+                                    locked: true,
+                                    version: 2
+                                }
+                            ],
+                            settings: {
+                                general: {
+                                    snippet: null,
+                                    tags: null,
+                                    layout: "static",
+                                    image: null
+                                },
+                                social: {
+                                    meta: [],
+                                    title: null,
+                                    description: null,
+                                    image: null
+                                },
+                                seo: {
+                                    title: null,
+                                    description: null,
+                                    meta: []
+                                }
+                            },
+                            createdFrom: null,
+                            createdOn: "2025-03-24T13:22:30.363Z",
+                            createdBy: {
+                                id: "67e15c7d026bd2000222d67a",
+                                displayName: "ad min",
+                                type: "admin"
+                            }
+                        },
+                        error: null
+                    }
+                }
+            }
+        });
+
+        const [getPublishedPageResponse] = await getPublishedPage({ id: page.id });
+
+        expect(getPublishedPageResponse).toMatchObject({
+            data: {
+                pageBuilder: {
+                    getPublishedPage: {
+                        data: {
+                            id: "67e15c96026bd2000222d698#0002",
+                            pid: "67e15c96026bd2000222d698",
+                            editor: "page-builder",
+                            category: {
+                                slug: "slug"
+                            },
+                            version: 2,
+                            title: "Welcome to Webiny",
+                            path: "/welcome-to-webiny",
+                            url: "https://www.test.com/welcome-to-webiny",
+                            content: {
+                                id: "Fv1PpPWu-",
+                                type: "document",
+                                data: {
+                                    settings: {}
+                                },
+                                elements: []
+                            },
+                            savedOn: "2025-03-24T13:22:30.363Z",
+                            status: "published",
+                            locked: true,
+                            publishedOn: "2025-03-24T13:22:30.918Z",
+                            revisions: [
+                                {
+                                    id: "67e15c96026bd2000222d698#0002",
+                                    status: "published",
+                                    locked: true,
+                                    version: 2
+                                }
+                            ],
+                            settings: {
+                                general: {
+                                    snippet: null,
+                                    tags: null,
+                                    layout: "static",
+                                    image: null
+                                },
+                                social: {
+                                    meta: [],
+                                    title: null,
+                                    description: null,
+                                    image: null
+                                },
+                                seo: {
+                                    title: null,
+                                    description: null,
+                                    meta: []
+                                }
+                            },
+                            createdFrom: null,
+                            createdOn: "2025-03-24T13:22:30.363Z",
+                            createdBy: {
+                                id: "67e15c7d026bd2000222d67a",
+                                displayName: "ad min",
+                                type: "admin"
+                            }
+                        },
+                        error: null
+                    }
+                }
+            }
+        });
+    });
+});
diff --git a/packages/api-page-builder/__tests__/graphql/graphql/pages.ts b/packages/api-page-builder/__tests__/graphql/graphql/pages.ts
index 9e2cfeaa999..34ae1f7c1c0 100644
--- a/packages/api-page-builder/__tests__/graphql/graphql/pages.ts
+++ b/packages/api-page-builder/__tests__/graphql/graphql/pages.ts
@@ -198,7 +198,21 @@ export const createPageCreateGraphQl = (params: CreateDataFieldsParams = {}) =>
     `;
 };
 
+export const createPageCreateV2GraphQl = (params: CreateDataFieldsParams = {}) => {
+    return /* GraphQL */ `
+        mutation CreatePageV2($data: PbCreatePageV2Input!) {
+            pageBuilder {
+                createPageV2(data: $data) {
+                    data ${createDataFields(params)}
+                    error ${ERROR_FIELD}
+                }
+            }
+        }
+    `;
+};
+
 export const CREATE_PAGE = createPageCreateGraphQl();
+export const CREATE_PAGE_V2 = createPageCreateV2GraphQl();
 
 export const createPageUpdateGraphQl = (params: CreateDataFieldsParams = {}) => {
     return /* GraphQL */ `
diff --git a/packages/api-page-builder/__tests__/graphql/useGqlHandler.ts b/packages/api-page-builder/__tests__/graphql/useGqlHandler.ts
index d20f93a6350..7c681647fd4 100644
--- a/packages/api-page-builder/__tests__/graphql/useGqlHandler.ts
+++ b/packages/api-page-builder/__tests__/graphql/useGqlHandler.ts
@@ -26,6 +26,7 @@ import {
 } from "./graphql/pageElements";
 import {
     CREATE_PAGE,
+    CREATE_PAGE_V2,
     DELETE_PAGE,
     DUPLICATE_PAGE,
     GET_PAGE,
@@ -241,6 +242,9 @@ export default ({ permissions, identity, plugins }: Params = {}) => {
         async createPage(variables: Record<string, any>) {
             return invoke({ body: { query: CREATE_PAGE, variables } });
         },
+        async createPageV2(variables: Record<string, any>) {
+            return invoke({ body: { query: CREATE_PAGE_V2, variables } });
+        },
         async duplicatePage(variables: Record<string, any>) {
             return invoke({ body: { query: DUPLICATE_PAGE, variables } });
         },
diff --git a/packages/api-page-builder/__tests__/translations/translatableCollection/DeleteTranslatableCollectionUseCase.test.ts b/packages/api-page-builder/__tests__/translations/translatableCollection/DeleteTranslatableCollectionUseCase.test.ts
new file mode 100644
index 00000000000..b269ea28818
--- /dev/null
+++ b/packages/api-page-builder/__tests__/translations/translatableCollection/DeleteTranslatableCollectionUseCase.test.ts
@@ -0,0 +1,38 @@
+import { useHandler } from "~tests/translations/useHandler";
+import {
+    DeleteTranslatableCollectionUseCase,
+    GetTranslatableCollectionUseCase,
+    SaveTranslatableCollectionUseCase
+} from "~/translations";
+
+describe("DeleteTranslatableCollectionUseCase", () => {
+    it("should delete a collection", async () => {
+        const { handler } = useHandler();
+        const context = await handler();
+
+        // Setup
+        const saveTranslatableCollection = new SaveTranslatableCollectionUseCase(context);
+        const newCollection = await saveTranslatableCollection.execute({
+            collectionId: "collection:1",
+            items: [
+                { itemId: "element:1", value: "Value 1" },
+                { itemId: "element:2", value: "Value 2" }
+            ]
+        });
+
+        const getTranslatableCollection = new GetTranslatableCollectionUseCase(context);
+        const collection = await getTranslatableCollection.execute(newCollection.getCollectionId());
+
+        expect(collection).toBeTruthy();
+        expect(collection!.getCollectionId()).toEqual(newCollection.getCollectionId());
+
+        // Test
+        const deleteTranslatableCollection = new DeleteTranslatableCollectionUseCase(context);
+        await deleteTranslatableCollection.execute({
+            collectionId: "collection:1"
+        });
+
+        const checkCollection = await getTranslatableCollection.execute("collection:1");
+        expect(checkCollection).toBeUndefined();
+    });
+});
diff --git a/packages/api-page-builder/__tests__/translations/translatedCollection/DeleteTranslatedCollectionUseCase.test.ts b/packages/api-page-builder/__tests__/translations/translatedCollection/DeleteTranslatedCollectionUseCase.test.ts
new file mode 100644
index 00000000000..d0192645444
--- /dev/null
+++ b/packages/api-page-builder/__tests__/translations/translatedCollection/DeleteTranslatedCollectionUseCase.test.ts
@@ -0,0 +1,131 @@
+import { useHandler } from "~tests/translations/useHandler";
+import {
+    SaveTranslatableCollectionUseCase,
+    SaveTranslatableCollectionParams,
+    SaveTranslatedCollectionUseCase,
+    DeleteTranslatedCollectionUseCase,
+    GetTranslatedCollectionUseCase
+} from "~/translations";
+import { PbContext } from "~/graphql/types";
+
+const createTranslatableCollection = async (
+    context: PbContext,
+    params: SaveTranslatableCollectionParams
+) => {
+    const saveCollection = new SaveTranslatableCollectionUseCase(context);
+    await saveCollection.execute(params);
+};
+
+describe("DeleteTranslatedCollectionUseCase", () => {
+    it("should delete an entire collection with all translations", async () => {
+        const { handler } = useHandler();
+        const context = await handler();
+
+        // Setup
+        await createTranslatableCollection(context, {
+            collectionId: "collection:1",
+            items: [
+                { itemId: "element:1", value: "Value 1" },
+                { itemId: "element:2", value: "Value 2" },
+                { itemId: "element:3", value: "Value 3" }
+            ]
+        });
+
+        const saveTranslatedCollection = new SaveTranslatedCollectionUseCase(context);
+        await saveTranslatedCollection.execute({
+            collectionId: "collection:1",
+            languageCode: "en",
+            items: [
+                { itemId: "element:1", value: "Translated Value 1 EN" },
+                { itemId: "element:2", value: "Translated Value 2 EN" }
+            ]
+        });
+
+        await saveTranslatedCollection.execute({
+            collectionId: "collection:1",
+            languageCode: "de",
+            items: [
+                { itemId: "element:1", value: "Translated Value 1 DE" },
+                { itemId: "element:2", value: "Translated Value 2 DE" }
+            ]
+        });
+
+        // Test
+        const deleteTranslatedCollection = new DeleteTranslatedCollectionUseCase(context);
+        await deleteTranslatedCollection.execute({ collectionId: "collection:1" });
+
+        const getTranslatedCollection = new GetTranslatedCollectionUseCase(context);
+
+        await expect(
+            getTranslatedCollection.execute({
+                collectionId: "collection:1",
+                languageCode: "en"
+            })
+        ).rejects.toThrow("not found");
+
+        await expect(
+            getTranslatedCollection.execute({
+                collectionId: "collection:1",
+                languageCode: "de"
+            })
+        ).rejects.toThrow("not found");
+    });
+
+    it("should delete a collection for a given language", async () => {
+        const { handler } = useHandler();
+        const context = await handler();
+
+        // Setup
+        await createTranslatableCollection(context, {
+            collectionId: "collection:1",
+            items: [
+                { itemId: "element:1", value: "Value 1" },
+                { itemId: "element:2", value: "Value 2" },
+                { itemId: "element:3", value: "Value 3" }
+            ]
+        });
+
+        const saveTranslatedCollection = new SaveTranslatedCollectionUseCase(context);
+        await saveTranslatedCollection.execute({
+            collectionId: "collection:1",
+            languageCode: "en",
+            items: [
+                { itemId: "element:1", value: "Translated Value 1 EN" },
+                { itemId: "element:2", value: "Translated Value 2 EN" }
+            ]
+        });
+
+        await saveTranslatedCollection.execute({
+            collectionId: "collection:1",
+            languageCode: "de",
+            items: [
+                { itemId: "element:1", value: "Translated Value 1 DE" },
+                { itemId: "element:2", value: "Translated Value 2 DE" }
+            ]
+        });
+
+        // Test
+        const deleteTranslatedCollection = new DeleteTranslatedCollectionUseCase(context);
+        await deleteTranslatedCollection.execute({
+            collectionId: "collection:1",
+            languageCode: "en"
+        });
+
+        const getTranslatedCollection = new GetTranslatedCollectionUseCase(context);
+
+        await expect(
+            getTranslatedCollection.execute({
+                collectionId: "collection:1",
+                languageCode: "en"
+            })
+        ).rejects.toThrow("not found");
+
+        const deCollection = await getTranslatedCollection.execute({
+            collectionId: "collection:1",
+            languageCode: "de"
+        });
+
+        expect(deCollection.getCollectionId()).toBe("collection:1");
+        expect(deCollection.getLanguageCode()).toBe("de");
+    });
+});
diff --git a/packages/api-page-builder/src/graphql/crud.ts b/packages/api-page-builder/src/graphql/crud.ts
index 51f391f4f99..04c6607b0c3 100644
--- a/packages/api-page-builder/src/graphql/crud.ts
+++ b/packages/api-page-builder/src/graphql/crud.ts
@@ -9,7 +9,7 @@ import { createPageElementsCrud } from "./crud/pageElements.crud";
 import { createSettingsCrud } from "./crud/settings.crud";
 import { createSystemCrud } from "./crud/system.crud";
 import { ContextPlugin } from "@webiny/api";
-import { PbContext, PrerenderingHandlers } from "~/graphql/types";
+import { PbContext, PrerenderingHandlers, type SettingsSecurityPermission } from "~/graphql/types";
 import { createTopic } from "@webiny/pubsub";
 import { PageBuilderStorageOperations } from "~/types";
 import WebinyError from "@webiny/error";
@@ -21,6 +21,7 @@ import { PageTemplatesPermissions } from "~/graphql/crud/permissions/PageTemplat
 import { PageBlocksPermissions } from "~/graphql/crud/permissions/PageBlocksPermissions";
 import { GzipContentCompressionPlugin, JsonpackContentCompressionPlugin } from "~/plugins";
 import { createDataSourcesContext } from "~/dataSources/context/createDataSourcesContext";
+import { SettingsPermissions } from "~/graphql/crud/permissions/SettingsPermissions";
 
 export interface CreateCrudParams {
     storageOperations: PageBuilderStorageOperations;
@@ -121,6 +122,13 @@ const setup = (params: CreateCrudParams) => {
             fullAccessPermissionName: "pb.*"
         });
 
+        const settingsPermissions = new SettingsPermissions({
+            getIdentity: () => context.security.getIdentity(),
+            getPermissions: () =>
+                context.security.getPermissions<SettingsSecurityPermission>("pb.settings"),
+            fullAccessPermissionName: "pb.*"
+        });
+
         const system = await createSystemCrud({
             context,
             storageOperations,
@@ -131,7 +139,8 @@ const setup = (params: CreateCrudParams) => {
             context,
             storageOperations,
             getTenantId,
-            getLocaleCode
+            getLocaleCode,
+            settingsPermissions
         });
 
         const menus = createMenuCrud({
diff --git a/packages/api-page-builder/src/graphql/crud/categories.crud.ts b/packages/api-page-builder/src/graphql/crud/categories.crud.ts
index 158335ce06e..f94e6e68ac6 100644
--- a/packages/api-page-builder/src/graphql/crud/categories.crud.ts
+++ b/packages/api-page-builder/src/graphql/crud/categories.crud.ts
@@ -23,6 +23,8 @@ import {
 import { createZodError, removeUndefinedValues } from "@webiny/utils";
 import { CategoriesPermissions } from "~/graphql/crud/permissions/CategoriesPermissions";
 import { PagesPermissions } from "~/graphql/crud/permissions/PagesPermissions";
+import { getDate } from "~/graphql/crud/utils/getDate";
+import { getIdentity } from "~/graphql/crud/utils/getIdentity";
 
 export interface CreateCategoriesCrudParams {
     context: PbContext;
@@ -172,17 +174,14 @@ export const createCategoriesCrud = (params: CreateCategoriesCrudParams): Catego
             }
 
             const identity = context.security.getIdentity();
+            const currentDateTime = new Date();
 
             const data = validationResult.data;
 
             const category: Category = {
                 ...data,
-                createdOn: new Date().toISOString(),
-                createdBy: {
-                    id: identity.id,
-                    type: identity.type,
-                    displayName: identity.displayName
-                },
+                createdOn: getDate(input.createdOn, currentDateTime),
+                createdBy: getIdentity(input.createdBy, identity),
                 tenant: getTenantId(),
                 locale: getLocaleCode()
             };
diff --git a/packages/api-page-builder/src/graphql/crud/categories/validation.ts b/packages/api-page-builder/src/graphql/crud/categories/validation.ts
index 9dd72aee443..bd1b10e31fc 100644
--- a/packages/api-page-builder/src/graphql/crud/categories/validation.ts
+++ b/packages/api-page-builder/src/graphql/crud/categories/validation.ts
@@ -8,7 +8,15 @@ const baseValidation = zod.object({
 
 export const createCategoryCreateValidation = () => {
     return baseValidation.extend({
-        slug: zod.string().min(1).max(100)
+        slug: zod.string().min(1).max(100),
+        createdOn: zod.date().optional(),
+        createdBy: zod
+            .object({
+                id: zod.string(),
+                type: zod.string(),
+                displayName: zod.string().nullable()
+            })
+            .optional()
     });
 };
 
diff --git a/packages/api-page-builder/src/graphql/crud/menus.crud.ts b/packages/api-page-builder/src/graphql/crud/menus.crud.ts
index 8bdb7804c9a..2efa4b84f62 100644
--- a/packages/api-page-builder/src/graphql/crud/menus.crud.ts
+++ b/packages/api-page-builder/src/graphql/crud/menus.crud.ts
@@ -23,6 +23,8 @@ import {
 } from "~/graphql/crud/menus/validation";
 import { createZodError, removeUndefinedValues } from "@webiny/utils";
 import { MenusPermissions } from "~/graphql/crud/permissions/MenusPermissions";
+import { getIdentity } from "./utils/getIdentity";
+import { getDate } from "./utils/getDate";
 
 export interface CreateMenuCrudParams {
     context: PbContext;
@@ -175,16 +177,13 @@ export const createMenuCrud = (params: CreateMenuCrudParams): MenusCrud => {
             }
 
             const identity = context.security.getIdentity();
+            const currentDateTime = new Date();
 
             const menu: Menu = {
                 ...data,
                 items: data.items || [],
-                createdOn: new Date().toISOString(),
-                createdBy: {
-                    id: identity.id,
-                    type: identity.type,
-                    displayName: identity.displayName
-                },
+                createdOn: getDate(input.createdOn, currentDateTime),
+                createdBy: getIdentity(input.createdBy, identity),
                 tenant: getTenantId(),
                 locale: getLocaleCode()
             };
diff --git a/packages/api-page-builder/src/graphql/crud/menus/validation.ts b/packages/api-page-builder/src/graphql/crud/menus/validation.ts
index b048c915bef..f150ccf9a29 100644
--- a/packages/api-page-builder/src/graphql/crud/menus/validation.ts
+++ b/packages/api-page-builder/src/graphql/crud/menus/validation.ts
@@ -8,7 +8,15 @@ const baseValidation = zod.object({
 
 export const createMenuCreateValidation = () => {
     return baseValidation.extend({
-        slug: zod.string().min(1).max(100)
+        slug: zod.string().min(1).max(100),
+        createdOn: zod.date().optional(),
+        createdBy: zod
+            .object({
+                id: zod.string(),
+                type: zod.string(),
+                displayName: zod.string().nullable()
+            })
+            .optional()
     });
 };
 
diff --git a/packages/api-page-builder/src/graphql/crud/pages.crud.ts b/packages/api-page-builder/src/graphql/crud/pages.crud.ts
index 7f8fb4a8e84..9074a55185c 100644
--- a/packages/api-page-builder/src/graphql/crud/pages.crud.ts
+++ b/packages/api-page-builder/src/graphql/crud/pages.crud.ts
@@ -52,6 +52,8 @@ import {
 import { createCompression } from "~/graphql/crud/pages/compression";
 import { PagesPermissions } from "./permissions/PagesPermissions";
 import { PageContent } from "./pages/PageContent";
+import { getDate } from "~/graphql/crud/utils/getDate";
+import { getIdentity } from "~/graphql/crud/utils/getIdentity";
 
 const STATUS_DRAFT = "draft";
 const STATUS_PUBLISHED = "published";
@@ -289,12 +291,12 @@ export const createPageCrud = (params: CreatePageCrudParams): PagesCrud => {
         async processPageContent(page) {
             return processPageContent(page, pageElementProcessors);
         },
-        async createPage(this: PageBuilderContextObject, slug, meta): Promise<any> {
+        async createPage(this: PageBuilderContextObject, categorySlug, meta): Promise<any> {
             await pagesPermissions.ensure({ rwd: "w" });
 
-            const category = await this.getCategory(slug);
+            const category = await this.getCategory(categorySlug);
             if (!category) {
-                throw new NotFoundError(`Category with slug "${slug}" not found.`);
+                throw new NotFoundError(`Category with slug "${categorySlug}" not found.`);
             }
 
             const title = "Untitled";
@@ -399,7 +401,160 @@ export const createPageCrud = (params: CreatePageCrudParams): PagesCrud => {
 
                 await storageOperations.pages.create({
                     input: {
-                        slug
+                        slug: categorySlug
+                    },
+                    page: await compressPage(page)
+                });
+                await onPageAfterCreate.publish({ page, meta });
+
+                return page;
+            } catch (ex) {
+                throw new WebinyError(
+                    ex.message || "Could not create new page.",
+                    ex.code || "CREATE_PAGE_ERROR",
+                    {
+                        ...(ex.data || {}),
+                        page
+                    }
+                );
+            }
+        },
+
+        async createPageV2(this: PageBuilderContextObject, input, meta): Promise<any> {
+            await pagesPermissions.ensure({ rwd: "w" });
+
+            const categorySlug = input.category;
+            if (!categorySlug) {
+                throw new WebinyError("Category slug is missing.", "CATEGORY_SLUG_MISSING");
+            }
+
+            const category = await this.getCategory(categorySlug);
+            if (!category) {
+                throw new NotFoundError(`Category with slug "${categorySlug}" not found.`);
+            }
+
+            const title = input.title || "Untitled";
+
+            let pagePath = input.path;
+            if (!pagePath) {
+                if (category.slug === "static") {
+                    pagePath = normalizePath("untitled-" + uniqid.time()) as string;
+                } else {
+                    pagePath = normalizePath(
+                        [category.url, "untitled-" + uniqid.time()].join("/").replace(/\/\//g, "/")
+                    ) as string;
+                }
+            }
+
+            const result = await createPageCreateValidation().safeParseAsync({
+                category: category.slug
+            });
+            if (!result.success) {
+                throw createZodError(result.error);
+            }
+
+            const currentIdentity = context.security.getIdentity();
+            const currentDateTime = new Date();
+
+            let pageId = "",
+                version = 1;
+            if (input.id) {
+                const splitId = input.id.split("#");
+                pageId = splitId[0];
+                version = Number(splitId[1]);
+            } else if (input.pid) {
+                pageId = input.pid;
+            } else {
+                pageId = mdbid();
+            }
+
+            if (input.version) {
+                version = input.version;
+            }
+
+            const id = createIdentifier({
+                id: pageId,
+                version
+            });
+
+            const rawSettings = input.settings || {
+                general: {
+                    layout: category.layout
+                },
+                social: {
+                    description: null,
+                    image: null,
+                    meta: [],
+                    title: null
+                },
+                seo: {
+                    title: null,
+                    description: null,
+                    meta: []
+                }
+            };
+
+            const validation = createPageSettingsUpdateValidation();
+            const settingsValidationResult = validation.safeParse(rawSettings);
+            if (!settingsValidationResult.success) {
+                throw createZodError(settingsValidationResult.error);
+            }
+
+            const settings = settingsValidationResult.data;
+            const status = input.status || STATUS_DRAFT;
+            const locked = status !== STATUS_DRAFT;
+
+            let publishedOn = null;
+            if (status === STATUS_PUBLISHED) {
+                publishedOn = getDate(input.publishedOn, currentDateTime);
+            }
+
+            const page: Page = {
+                id,
+                pid: pageId,
+                locale: getLocaleCode(),
+                tenant: getTenantId(),
+                editor: DEFAULT_EDITOR,
+                category: category.slug,
+                title,
+                path: pagePath,
+                version,
+                status,
+                locked,
+                publishedOn,
+                createdFrom: null,
+                settings: {
+                    ...settings,
+                    general: {
+                        ...settings.general,
+                        tags: settings.general?.tags || undefined
+                    },
+                    social: {
+                        ...settings.social,
+                        meta: settings.social?.meta || []
+                    },
+                    seo: {
+                        ...settings.seo,
+                        meta: settings.seo?.meta || []
+                    }
+                },
+                createdOn: getDate(input.createdOn, currentDateTime),
+                savedOn: getDate(input.createdOn, currentDateTime),
+                createdBy: getIdentity(input.createdBy, currentIdentity),
+                ownedBy: getIdentity(input.createdBy, currentIdentity),
+                content: input.content || PageContent.createEmpty().getValue(),
+                webinyVersion: context.WEBINY_VERSION
+            };
+
+            try {
+                await onPageBeforeCreate.publish({
+                    page,
+                    meta
+                });
+
+                await storageOperations.pages.create({
+                    input: {
+                        slug: categorySlug
                     },
                     page: await compressPage(page)
                 });
diff --git a/packages/api-page-builder/src/graphql/crud/permissions/SettingsPermissions.ts b/packages/api-page-builder/src/graphql/crud/permissions/SettingsPermissions.ts
new file mode 100644
index 00000000000..bdffef24828
--- /dev/null
+++ b/packages/api-page-builder/src/graphql/crud/permissions/SettingsPermissions.ts
@@ -0,0 +1,4 @@
+import { AppPermissions } from "@webiny/api-security/utils/AppPermissions";
+import type { SettingsSecurityPermission } from "~/types";
+
+export class SettingsPermissions extends AppPermissions<SettingsSecurityPermission> {}
diff --git a/packages/api-page-builder/src/graphql/crud/settings.crud.ts b/packages/api-page-builder/src/graphql/crud/settings.crud.ts
index 78a3394da6a..96115cf5a5f 100644
--- a/packages/api-page-builder/src/graphql/crud/settings.crud.ts
+++ b/packages/api-page-builder/src/graphql/crud/settings.crud.ts
@@ -18,6 +18,7 @@ import DataLoader from "dataloader";
 import { createTopic } from "@webiny/pubsub";
 import { createSettingsCreateValidation } from "~/graphql/crud/settings/validation";
 import { createZodError, removeUndefinedValues } from "@webiny/utils";
+import type { SettingsPermissions } from "./permissions/SettingsPermissions";
 
 interface SettingsParams {
     tenant: string;
@@ -37,10 +38,11 @@ export interface CreateSettingsCrudParams {
     storageOperations: PageBuilderStorageOperations;
     getTenantId: () => string;
     getLocaleCode: () => string;
+    settingsPermissions: SettingsPermissions;
 }
 
 export const createSettingsCrud = (params: CreateSettingsCrudParams): SettingsCrud => {
-    const { storageOperations, getLocaleCode, getTenantId } = params;
+    const { storageOperations, getLocaleCode, getTenantId, settingsPermissions } = params;
 
     const settingsDataLoader = new DataLoader<SettingsParams, Settings | null, string>(
         async keys => {
@@ -109,6 +111,8 @@ export const createSettingsCrud = (params: CreateSettingsCrudParams): SettingsCr
         },
 
         async updateSettings(this: PageBuilderContextObject, input) {
+            await settingsPermissions.ensure();
+
             const params = {
                 tenant: getTenantId(),
                 locale: getLocaleCode(),
diff --git a/packages/api-page-builder/src/graphql/crud/utils/formatDate.ts b/packages/api-page-builder/src/graphql/crud/utils/formatDate.ts
new file mode 100644
index 00000000000..b3063eb352f
--- /dev/null
+++ b/packages/api-page-builder/src/graphql/crud/utils/formatDate.ts
@@ -0,0 +1,12 @@
+/**
+ * Should not be used by users as method is prone to breaking changes.
+ * @internal
+ */
+export const formatDate = (date?: Date | string | null): string | null => {
+    if (!date) {
+        return null;
+    } else if (date instanceof Date) {
+        return date.toISOString();
+    }
+    return new Date(date).toISOString();
+};
diff --git a/packages/api-page-builder/src/graphql/crud/utils/getDate.ts b/packages/api-page-builder/src/graphql/crud/utils/getDate.ts
new file mode 100644
index 00000000000..2d4cd08fc5f
--- /dev/null
+++ b/packages/api-page-builder/src/graphql/crud/utils/getDate.ts
@@ -0,0 +1,14 @@
+import { formatDate } from "./formatDate";
+
+export const getDate = <T extends string | null = string | null>(
+    input?: Date | string | null,
+    defaultValue?: Date | string | null
+): T => {
+    if (!input) {
+        return formatDate(defaultValue) as T;
+    }
+    if (input instanceof Date) {
+        return formatDate(input) as T;
+    }
+    return formatDate(new Date(input)) as T;
+};
diff --git a/packages/api-page-builder/src/graphql/crud/utils/getIdentity.ts b/packages/api-page-builder/src/graphql/crud/utils/getIdentity.ts
new file mode 100644
index 00000000000..994e94d0662
--- /dev/null
+++ b/packages/api-page-builder/src/graphql/crud/utils/getIdentity.ts
@@ -0,0 +1,16 @@
+import { SecurityIdentity } from "@webiny/api-security/types";
+
+export const getIdentity = <T extends SecurityIdentity | null>(
+    input: SecurityIdentity | null | undefined,
+    defaultValue: T | null = null
+): T => {
+    const identity = input?.id && input?.displayName && input?.type ? input : defaultValue;
+    if (!identity) {
+        return null as T;
+    }
+    return {
+        id: identity.id,
+        displayName: identity.displayName,
+        type: identity.type
+    } as T;
+};
diff --git a/packages/api-page-builder/src/graphql/graphql/base.gql.ts b/packages/api-page-builder/src/graphql/graphql/base.gql.ts
index ad5016f52fc..0175ff29e75 100644
--- a/packages/api-page-builder/src/graphql/graphql/base.gql.ts
+++ b/packages/api-page-builder/src/graphql/graphql/base.gql.ts
@@ -23,6 +23,12 @@ export const createBaseGraphQL = (): GraphQLSchemaPlugin => {
                     type: String
                 }
 
+                input PbIdentityInput {
+                    id: ID!
+                    displayName: String!
+                    type: String!
+                }
+
                 type PbError {
                     code: String
                     message: String
diff --git a/packages/api-page-builder/src/graphql/graphql/categories.gql.ts b/packages/api-page-builder/src/graphql/graphql/categories.gql.ts
index 7f17ec6db47..a729d829931 100644
--- a/packages/api-page-builder/src/graphql/graphql/categories.gql.ts
+++ b/packages/api-page-builder/src/graphql/graphql/categories.gql.ts
@@ -29,6 +29,8 @@ export const createCategoryGraphQL = (): GraphQLSchemaPlugin<PbContext> => {
                     slug: String!
                     url: String!
                     layout: String!
+                    createdBy: PbIdentityInput
+                    createdOn: DateTime
                 }
 
                 # Response types
diff --git a/packages/api-page-builder/src/graphql/graphql/menus.gql.ts b/packages/api-page-builder/src/graphql/graphql/menus.gql.ts
index d37aceaaa01..c9c98e21124 100644
--- a/packages/api-page-builder/src/graphql/graphql/menus.gql.ts
+++ b/packages/api-page-builder/src/graphql/graphql/menus.gql.ts
@@ -23,6 +23,8 @@ export const createMenuGraphQL = (): GraphQLSchemaPlugin<PbContext> => {
                     slug: String!
                     description: String
                     items: [JSON]
+                    createdBy: PbIdentityInput
+                    createdOn: DateTime
                 }
 
                 # Response types
diff --git a/packages/api-page-builder/src/graphql/graphql/pages.gql.ts b/packages/api-page-builder/src/graphql/graphql/pages.gql.ts
index 5f910fdafab..a3a743765a6 100644
--- a/packages/api-page-builder/src/graphql/graphql/pages.gql.ts
+++ b/packages/api-page-builder/src/graphql/graphql/pages.gql.ts
@@ -109,6 +109,24 @@ const createBasePageGraphQL = (): GraphQLSchemaPlugin<PbContext> => {
                     dataBindings: [DataBindingInput!]
                 }
 
+                input PbCreatePageV2Input {
+                    id: ID
+                    pid: ID
+                    category: ID
+                    title: String
+                    version: Int
+                    path: String
+                    content: JSON
+                    savedOn: DateTime
+                    status: String
+                    publishedOn: DateTime
+                    settings: PbPageSettingsInput
+                    createdOn: DateTime
+                    createdBy: PbIdentityInput
+                    dataSources: [DataSourceInput!]
+                    dataBindings: [DataBindingInput!]
+                }
+
                 input PbPageSettingsInput {
                     _empty: String
                 }
@@ -242,6 +260,8 @@ const createBasePageGraphQL = (): GraphQLSchemaPlugin<PbContext> => {
                 extend type PbMutation {
                     createPage(from: ID, category: String, meta: JSON): PbPageResponse
 
+                    createPageV2(data: PbCreatePageV2Input!, meta: JSON): PbPageResponse
+
                     # Update page by given ID.
                     updatePage(id: ID!, data: PbUpdatePageInput!): PbPageResponse
 
@@ -457,6 +477,12 @@ const createBasePageGraphQL = (): GraphQLSchemaPlugin<PbContext> => {
                             return context.pageBuilder.createPage(category as string, meta);
                         });
                     },
+                    createPageV2: async (_, args: any, context) => {
+                        return resolve(() => {
+                            const { data, meta } = args;
+                            return context.pageBuilder.createPageV2(data, meta);
+                        });
+                    },
 
                     deletePage: async (_, args: any, context) => {
                         return resolve(async () => {
diff --git a/packages/api-page-builder/src/graphql/types.ts b/packages/api-page-builder/src/graphql/types.ts
index fc2ad2e23c7..a30f589b319 100644
--- a/packages/api-page-builder/src/graphql/types.ts
+++ b/packages/api-page-builder/src/graphql/types.ts
@@ -9,6 +9,7 @@ import { Context as BaseContext } from "@webiny/handler/types";
 import {
     BlockCategory,
     Category,
+    CreatedBy,
     DefaultSettings,
     DynamicDocument,
     Menu,
@@ -17,6 +18,7 @@ import {
     PageElement,
     PageSettings,
     PageSpecialType,
+    PageStatus,
     PageTemplate,
     PageTemplateInput,
     Settings,
@@ -32,8 +34,10 @@ export interface ListPagesParamsWhere {
     category?: string;
     status?: string;
     tags?: { query: string[]; rule?: "any" | "all" };
+
     [key: string]: any;
 }
+
 export interface ListPagesParams {
     limit?: number;
     after?: string | null;
@@ -75,6 +79,7 @@ export interface OnPageBeforeCreateTopicParams<TPage extends Page = Page> {
     page: TPage;
     meta?: Record<string, any>;
 }
+
 /**
  * @category Lifecycle events
  */
@@ -82,6 +87,7 @@ export interface OnPageAfterCreateTopicParams<TPage extends Page = Page> {
     page: TPage;
     meta?: Record<string, any>;
 }
+
 /**
  * @category Lifecycle events
  */
@@ -90,6 +96,7 @@ export interface OnPageBeforeUpdateTopicParams<TPage extends Page = Page> {
     page: TPage;
     input: Record<string, any>;
 }
+
 /**
  * @category Lifecycle events
  */
@@ -98,6 +105,7 @@ export interface OnPageAfterUpdateTopicParams<TPage extends Page = Page> {
     page: TPage;
     input: Record<string, any>;
 }
+
 /**
  * @category Lifecycle events
  */
@@ -105,6 +113,7 @@ export interface OnPageBeforeCreateFromTopicParams<TPage extends Page = Page> {
     original: TPage;
     page: TPage;
 }
+
 /**
  * @category Lifecycle events
  */
@@ -112,6 +121,7 @@ export interface OnPageAfterCreateFromTopicParams<TPage extends Page = Page> {
     original: TPage;
     page: TPage;
 }
+
 /**
  * @category Lifecycle events
  */
@@ -121,6 +131,7 @@ export interface OnPageBeforeDeleteTopicParams<TPage extends Page = Page> {
     publishedPage: TPage | null;
     deleteMethod: "deleteAll" | "delete";
 }
+
 /**
  * @category Lifecycle events
  */
@@ -130,6 +141,7 @@ export interface OnPageAfterDeleteTopicParams<TPage extends Page = Page> {
     publishedPage: TPage | null;
     deleteMethod: "deleteAll" | "delete";
 }
+
 /**
  * @category Lifecycle events
  */
@@ -138,6 +150,7 @@ export interface OnPageBeforePublishTopicParams<TPage extends Page = Page> {
     latestPage: TPage;
     publishedPage: TPage | null;
 }
+
 /**
  * @category Lifecycle events
  */
@@ -146,6 +159,7 @@ export interface OnPageAfterPublishTopicParams<TPage extends Page = Page> {
     latestPage: TPage;
     publishedPage: TPage | null;
 }
+
 /**
  * @category Lifecycle events
  */
@@ -153,6 +167,7 @@ export interface OnPageBeforeUnpublishTopicParams<TPage extends Page = Page> {
     page: TPage;
     latestPage: TPage;
 }
+
 /**
  * @category Lifecycle events
  */
@@ -193,34 +208,54 @@ export interface PageElementProcessor {
  */
 export interface PagesCrud {
     addPageElementProcessor(processor: PageElementProcessor): void;
+
     processPageContent(content: Page): Promise<Page>;
+
     getPage<TPage extends Page = Page>(id: string, options?: GetPagesOptions): Promise<TPage>;
+
     listLatestPages<TPage extends Page = Page>(
         args: ListPagesParams,
         options?: ListLatestPagesOptions
     ): Promise<[TPage[], ListMeta]>;
+
     listPublishedPages<TPage extends Page = Page>(
         args: ListPagesParams
     ): Promise<[TPage[], ListMeta]>;
+
     listPagesTags(args: { search: { query: string } }): Promise<string[]>;
+
     getPublishedPageById<TPage extends Page = Page>(args: {
         id: string;
         preview?: boolean;
     }): Promise<TPage>;
+
     getPublishedPageByPath<TPage extends Page = Page>(args: { path: string }): Promise<TPage>;
+
     listPageRevisions<TPage extends Page = Page>(id: string): Promise<TPage[]>;
+
     createPage<TPage extends Page = Page>(
         category: string,
         meta?: Record<string, any>
     ): Promise<TPage>;
+
+    createPageV2<TPage extends Page = Page>(
+        data: PbCreatePageV2Input,
+        meta?: Record<string, any>
+    ): Promise<TPage>;
+
     createPageFrom<TPage extends Page = Page>(
         page: string,
         meta?: Record<string, any>
     ): Promise<TPage>;
+
     updatePage<TPage extends Page = Page>(id: string, data: PbUpdatePageInput): Promise<TPage>;
+
     deletePage<TPage extends Page = Page>(id: string): Promise<[TPage, TPage]>;
+
     publishPage<TPage extends Page = Page>(id: string): Promise<TPage>;
+
     unpublishPage<TPage extends Page = Page>(id: string): Promise<TPage>;
+
     prerendering: {
         render(args: RenderParams): Promise<void>;
         flush(args: FlushParams): Promise<void>;
@@ -249,12 +284,14 @@ export interface ListPageElementsParams {
 export interface OnPageElementBeforeCreateTopicParams {
     pageElement: PageElement;
 }
+
 /**
  * @category Lifecycle events
  */
 export interface OnPageElementAfterCreateTopicParams {
     pageElement: PageElement;
 }
+
 /**
  * @category Lifecycle events
  */
@@ -262,6 +299,7 @@ export interface OnPageElementBeforeUpdateTopicParams {
     original: PageElement;
     pageElement: PageElement;
 }
+
 /**
  * @category Lifecycle events
  */
@@ -269,12 +307,14 @@ export interface OnPageElementAfterUpdateTopicParams {
     original: PageElement;
     pageElement: PageElement;
 }
+
 /**
  * @category Lifecycle events
  */
 export interface OnPageElementBeforeDeleteTopicParams {
     pageElement: PageElement;
 }
+
 /**
  * @category Lifecycle events
  */
@@ -287,10 +327,15 @@ export interface OnPageElementAfterDeleteTopicParams {
  */
 export interface PageElementsCrud {
     getPageElement(id: string): Promise<PageElement | null>;
+
     listPageElements(params?: ListPageElementsParams): Promise<PageElement[]>;
+
     createPageElement(data: Record<string, any>): Promise<PageElement>;
+
     updatePageElement(id: string, data: Record<string, any>): Promise<PageElement>;
+
     deletePageElement(id: string): Promise<void>;
+
     /**
      * Lifecycle events
      */
@@ -308,12 +353,14 @@ export interface PageElementsCrud {
 export interface OnCategoryBeforeCreateTopicParams {
     category: Category;
 }
+
 /**
  * @category Lifecycle events
  */
 export interface OnCategoryAfterCreateTopicParams {
     category: Category;
 }
+
 /**
  * @category Lifecycle events
  */
@@ -321,6 +368,7 @@ export interface OnCategoryBeforeUpdateTopicParams {
     original: Category;
     category: Category;
 }
+
 /**
  * @category Lifecycle events
  */
@@ -328,12 +376,14 @@ export interface OnCategoryAfterUpdateTopicParams {
     original: Category;
     category: Category;
 }
+
 /**
  * @category Lifecycle events
  */
 export interface OnCategoryBeforeDeleteTopicParams {
     category: Category;
 }
+
 /**
  * @category Lifecycle events
  */
@@ -346,10 +396,15 @@ export interface OnCategoryAfterDeleteTopicParams {
  */
 export interface CategoriesCrud {
     getCategory(slug: string, options?: { auth: boolean }): Promise<Category | null>;
+
     listCategories(): Promise<Category[]>;
+
     createCategory(data: PbCategoryInput): Promise<Category>;
+
     updateCategory(slug: string, data: PbCategoryInput): Promise<Category>;
+
     deleteCategory(slug: string): Promise<Category>;
+
     onCategoryBeforeCreate: Topic<OnCategoryBeforeCreateTopicParams>;
     onCategoryAfterCreate: Topic<OnCategoryAfterCreateTopicParams>;
     onCategoryBeforeUpdate: Topic<OnCategoryBeforeUpdateTopicParams>;
@@ -373,6 +428,7 @@ export interface OnMenuBeforeCreateTopicParams {
     menu: Menu;
     input: Record<string, any>;
 }
+
 /**
  * @category Lifecycle events
  */
@@ -380,6 +436,7 @@ export interface OnMenuAfterCreateTopicParams {
     menu: Menu;
     input: Record<string, any>;
 }
+
 /**
  * @category Lifecycle events
  */
@@ -387,6 +444,7 @@ export interface OnMenuBeforeUpdateTopicParams {
     original: Menu;
     menu: Menu;
 }
+
 /**
  * @category Lifecycle events
  */
@@ -394,12 +452,14 @@ export interface OnMenuAfterUpdateTopicParams {
     original: Menu;
     menu: Menu;
 }
+
 /**
  * @category Lifecycle events
  */
 export interface OnMenuBeforeDeleteTopicParams {
     menu: Menu;
 }
+
 /**
  * @category Lifecycle events
  */
@@ -412,17 +472,26 @@ interface CreateMenuInput {
     slug: string;
     description: string;
     items: any[];
+    createdOn?: Date | string;
+    createdBy?: CreatedBy;
 }
+
 /**
  * @category Menu
  */
 export interface MenusCrud {
     getMenu(slug: string, options?: MenuGetOptions): Promise<Menu | null>;
+
     getPublicMenu(slug: string): Promise<Menu>;
+
     listMenus(params?: ListMenuParams): Promise<Menu[]>;
+
     createMenu(data: CreateMenuInput): Promise<Menu>;
+
     updateMenu(slug: string, data: Record<string, any>): Promise<Menu>;
+
     deleteMenu(slug: string): Promise<Menu>;
+
     onMenuBeforeCreate: Topic<OnMenuBeforeCreateTopicParams>;
     onMenuAfterCreate: Topic<OnMenuAfterCreateTopicParams>;
     onMenuBeforeUpdate: Topic<OnMenuBeforeUpdateTopicParams>;
@@ -444,6 +513,7 @@ export interface SettingsUpdateTopicMetaParams {
         pages: [PageSpecialType, string | null | undefined, string, Page][];
     };
 }
+
 /**
  * @category Lifecycle events
  */
@@ -452,6 +522,7 @@ export interface OnSettingsBeforeUpdateTopicParams {
     settings: Settings;
     meta: SettingsUpdateTopicMetaParams;
 }
+
 /**
  * @category Lifecycle events
  */
@@ -484,20 +555,26 @@ export interface SettingsCrud {
 export interface OnSystemBeforeInstallTopicParams {
     tenant: string;
 }
+
 /**
  * @category Lifecycle events
  */
 export interface OnSystemAfterInstallTopicParams {
     tenant: string;
 }
+
 /**
  * @category System
  */
 export interface SystemCrud {
     getSystem: () => Promise<System | null>;
+
     getSystemVersion(): Promise<string | null>;
+
     setSystemVersion(version: string): Promise<void>;
+
     installSystem(args: { name: string; insertDemoData: boolean }): Promise<void>;
+
     /**
      * Lifecycle events
      */
@@ -518,12 +595,14 @@ export interface PbBlockCategoryInput {
 export interface OnBeforeBlockCategoryCreateTopicParams {
     blockCategory: BlockCategory;
 }
+
 /**
  * @category Lifecycle events
  */
 export interface OnAfterBlockCategoryCreateTopicParams {
     blockCategory: BlockCategory;
 }
+
 /**
  * @category Lifecycle events
  */
@@ -531,6 +610,7 @@ export interface OnBeforeBlockCategoryUpdateTopicParams {
     original: BlockCategory;
     blockCategory: BlockCategory;
 }
+
 /**
  * @category Lifecycle events
  */
@@ -538,12 +618,14 @@ export interface OnAfterBlockCategoryUpdateTopicParams {
     original: BlockCategory;
     blockCategory: BlockCategory;
 }
+
 /**
  * @category Lifecycle events
  */
 export interface OnBeforeBlockCategoryDeleteTopicParams {
     blockCategory: BlockCategory;
 }
+
 /**
  * @category Lifecycle events
  */
@@ -556,10 +638,15 @@ export interface OnAfterBlockCategoryDeleteTopicParams {
  */
 export interface BlockCategoriesCrud {
     getBlockCategory(slug: string, options?: { auth: boolean }): Promise<BlockCategory | null>;
+
     listBlockCategories(): Promise<BlockCategory[]>;
+
     createBlockCategory(data: PbBlockCategoryInput): Promise<BlockCategory>;
+
     updateBlockCategory(slug: string, data: PbBlockCategoryInput): Promise<BlockCategory>;
+
     deleteBlockCategory(slug: string): Promise<BlockCategory>;
+
     /**
      * Lifecycle events
      */
@@ -577,6 +664,7 @@ export interface ListPageBlocksParams {
         blockCategory?: string;
     };
 }
+
 /**
  * @category Lifecycle events
  */
@@ -633,10 +721,15 @@ export type PageBlockUpdateInput = Partial<PageBlockCreateInput>;
  */
 export interface PageBlocksCrud {
     getPageBlock(id: string): Promise<PageBlock | null>;
+
     listPageBlocks(params?: ListPageBlocksParams): Promise<PageBlock[]>;
+
     createPageBlock(data: PageBlockCreateInput): Promise<PageBlock>;
+
     updatePageBlock(id: string, data: PageBlockUpdateInput): Promise<PageBlock>;
+
     deletePageBlock(id: string): Promise<boolean>;
+
     resolvePageBlocks(content: Record<string, any> | null): Promise<any>;
 
     /**
@@ -653,6 +746,7 @@ export interface PageBlocksCrud {
 export interface ListPageTemplatesParams {
     sort?: string[];
 }
+
 /**
  * @category Lifecycle events
  */
@@ -742,17 +836,25 @@ export interface PageTemplatesCrud {
             auth: boolean;
         }
     ): Promise<PageTemplate | null>;
+
     listPageTemplates(params?: ListPageTemplatesParams): Promise<PageTemplate[]>;
+
     createPageTemplate(data: PageTemplateInput): Promise<PageTemplate>;
+
     createPageFromTemplate(data: CreatePageFromTemplateParams): Promise<Page>;
+
     createTemplateFromPage(
         pageId: string,
         data: Pick<PageTemplate, "title" | "description" | "slug">
     ): Promise<PageTemplate>;
+
     // Copy relevant data from page template to page instance, by reference.
     copyTemplateDataToPage(template: PageTemplate, page: Page): void;
+
     updatePageTemplate(id: string, data: Record<string, any>): Promise<PageTemplate>;
+
     deletePageTemplate(id: string): Promise<PageTemplate>;
+
     resolvePageTemplate(content: PageContentWithTemplate): Promise<any>;
 
     /**
@@ -820,6 +922,10 @@ export interface PageSecurityPermission extends PbSecurityPermission {
     pw: string;
 }
 
+export interface SettingsSecurityPermission extends PbSecurityPermission {
+    name: "pb.settings";
+}
+
 // Page Builder lifecycle events.
 export interface PageBeforeRenderEvent extends Pick<RenderParams, "paths" | "tags"> {
     args: {
@@ -878,6 +984,7 @@ export interface FlushParams {
 
 export interface PrerenderingHandlers {
     render(args: RenderParams): Promise<void>;
+
     flush(args: FlushParams): Promise<void>;
 }
 
@@ -886,6 +993,8 @@ export interface PbCategoryInput {
     slug: string;
     url: string;
     layout: string;
+    createdOn?: Date | string;
+    createdBy?: CreatedBy;
 }
 
 export interface PbUpdatePageInput extends DynamicDocument {
@@ -895,3 +1004,19 @@ export interface PbUpdatePageInput extends DynamicDocument {
     settings?: PageSettings;
     content?: Record<string, any> | null;
 }
+
+export interface PbCreatePageV2Input extends DynamicDocument {
+    title?: string;
+    category?: string;
+    path?: string;
+    status?: PageStatus;
+    publishedOn?: Date | string;
+    settings?: PageSettings;
+    content?: Record<string, any> | null;
+    version?: number;
+    id?: string;
+    pid?: string;
+    createdOn?: Date | string;
+    createdBy?: CreatedBy;
+    ownedBy?: CreatedBy;
+}
diff --git a/packages/api-page-builder/src/prerendering/hooks/afterSettingsUpdate.ts b/packages/api-page-builder/src/prerendering/hooks/afterSettingsUpdate.ts
index 3f22b5db150..9a01f0a8ae7 100644
--- a/packages/api-page-builder/src/prerendering/hooks/afterSettingsUpdate.ts
+++ b/packages/api-page-builder/src/prerendering/hooks/afterSettingsUpdate.ts
@@ -1,63 +1,16 @@
-import { PathItem, PbContext } from "~/graphql/types";
+import { PbContext } from "~/graphql/types";
 import { ContextPlugin } from "@webiny/api";
 
 export default () => {
     return new ContextPlugin<PbContext>(async ({ pageBuilder }) => {
-        pageBuilder.onSettingsAfterUpdate.subscribe(async params => {
-            const { settings, meta } = params;
-            if (!settings) {
-                return;
-            }
-
-            /**
-             * If a change on pages settings (home, notFound) has been made, let's rerender accordingly.
-             */
-            const toRender: PathItem[] = [];
-
-            for (let i = 0; i < meta.diff.pages.length; i++) {
-                const [type, prevPageId, , page] = meta.diff.pages[i];
-                switch (type) {
-                    case "home":
-                        toRender.push({ path: "/" });
-                        break;
-                    case "notFound":
-                        // Render the new "not found" page and store it into the NOT_FOUND_FOLDER.
-                        toRender.push({
-                            path: page.path,
-                            tags: [{ key: "notFoundPage", value: true }]
-                        });
-
-                        if (prevPageId) {
-                            // Render the old "not found" page, to remove any notion of the "not found" concept
-                            // from the snapshot, as well as the PS#RENDER record in the database.
-                            const prevPage = await pageBuilder.getPublishedPageById({
-                                id: prevPageId
-                            });
-
-                            toRender.push({ path: prevPage.path });
-                        }
-
-                        break;
-                }
-            }
-
-            // Render homepage/not-found page
-            if (toRender.length > 0) {
-                await pageBuilder.prerendering.render({ paths: toRender });
-            }
-
-            /**
-             * TODO: right now, on each update of settings, we trigger a complete site rebuild.
-             * This is from ideal, and we need to implement better checks if full rerender is necessary.
-             * Why full site rerender? Settings contain logo, favicon, site title, social stuff, and that's
-             * used on all pages.
-             */
+        pageBuilder.onSettingsAfterUpdate.subscribe(async () => {
+            // On every update of settings, we trigger a full website prerendering.
+            // Might not be ideal for large websites, but it's a simple solution for now.
             await pageBuilder.prerendering.render({
                 // This flag is for backwards compatibility with the original custom queue implementation
                 // using the "cron job" type of Lambda worker, executed periodically.
                 queue: true,
-                // We want to rerender everything, but exclude homepage/not-found page, if they were changed.
-                paths: [{ path: "*", exclude: toRender.map(task => task.path) }]
+                paths: [{ path: "*" }]
             });
         });
     });
diff --git a/packages/api-page-builder/src/prerendering/prerenderingHandlers.ts b/packages/api-page-builder/src/prerendering/prerenderingHandlers.ts
index b53958d60ec..7fd93b47026 100644
--- a/packages/api-page-builder/src/prerendering/prerenderingHandlers.ts
+++ b/packages/api-page-builder/src/prerendering/prerenderingHandlers.ts
@@ -20,6 +20,7 @@ export const prerenderingHandlers = new ContextPlugin<PbContext>(context => {
                 const render = paths.map<RenderEvent>(item => ({
                     ...item,
                     tenant,
+                    groupId: tenant,
                     locale: locale.code
                 }));
 
diff --git a/packages/api-page-builder/src/translations/index.ts b/packages/api-page-builder/src/translations/index.ts
index b37419f089b..cecc7873775 100644
--- a/packages/api-page-builder/src/translations/index.ts
+++ b/packages/api-page-builder/src/translations/index.ts
@@ -3,9 +3,11 @@ export * from "./translatableCollection/useCases/GetTranslatableCollectionUseCas
 export * from "./translatableCollection/useCases/SaveTranslatableCollectionUseCase";
 export * from "./translatableCollection/useCases/GetOrCreateTranslatableCollectionUseCase";
 export * from "./translatableCollection/useCases/CloneTranslatableCollectionUseCase";
+export * from "./translatableCollection/useCases/DeleteTranslatableCollectionUseCase";
 
 // TranslatedCollection
 export * from "./translatedCollection/useCases/GetTranslatedCollectionUseCase";
 export * from "./translatedCollection/useCases/CloneTranslatedCollectionUseCase";
 export * from "./translatedCollection/useCases/SaveTranslatedCollectionUseCase";
 export * from "./translatedCollection/useCases/GetOrCreateTranslatedCollectionUseCase";
+export * from "./translatedCollection/useCases/DeleteTranslatedCollectionUseCase";
diff --git a/packages/api-page-builder/src/translations/translatableCollection/graphql/resolvers.ts b/packages/api-page-builder/src/translations/translatableCollection/graphql/resolvers.ts
index 4d0268f1fec..6eb878e6acf 100644
--- a/packages/api-page-builder/src/translations/translatableCollection/graphql/resolvers.ts
+++ b/packages/api-page-builder/src/translations/translatableCollection/graphql/resolvers.ts
@@ -5,12 +5,17 @@ import { SaveTranslatableCollectionUseCase } from "~/translations/translatableCo
 import type { GqlTranslatableItemDTO } from "~/translations/translatableCollection/graphql/GqlTranslatableItemDTO";
 import { GetTranslatableCollectionByIdRepository } from "~/translations/translatableCollection/repository/GetTranslatableCollectionByIdRepository";
 import { GqlTranslatableCollectionMapper } from "~/translations/translatableCollection/graphql/GqlTranslatableCollectionMapper";
+import { DeleteTranslatableCollectionUseCase } from "~/translations";
 
 interface UpdateTranslatableCollectionParams {
     collectionId: string;
     items: GqlTranslatableItemDTO[];
 }
 
+interface DeleteTranslatableCollectionParams {
+    collectionId: string;
+}
+
 export const translatableCollectionResolvers: Resolvers<PbContext> = {
     TranslationsQuery: {
         getTranslatableCollection: async (_, args, context) => {
@@ -39,6 +44,18 @@ export const translatableCollectionResolvers: Resolvers<PbContext> = {
             } catch (err) {
                 return new ErrorResponse(err);
             }
+        },
+        deleteTranslatableCollection: async (_, args, context) => {
+            const { collectionId } = args as DeleteTranslatableCollectionParams;
+
+            try {
+                const useCase = new DeleteTranslatableCollectionUseCase(context);
+                await useCase.execute({ collectionId });
+
+                return new Response(true);
+            } catch (err) {
+                return new ErrorResponse(err);
+            }
         }
     }
 };
diff --git a/packages/api-page-builder/src/translations/translatableCollection/graphql/schema.ts b/packages/api-page-builder/src/translations/translatableCollection/graphql/schema.ts
index debbe433dd4..ff3c271c7a4 100644
--- a/packages/api-page-builder/src/translations/translatableCollection/graphql/schema.ts
+++ b/packages/api-page-builder/src/translations/translatableCollection/graphql/schema.ts
@@ -28,7 +28,7 @@ export const translatableCollectionSchema = /* GraphQL*/ `
         data: TranslatableCollection
         error: PbError
     }
-
+    
     extend type TranslationsQuery {
         """Get the source collection with all the items that need to be translated."""
         getTranslatableCollection(collectionId: ID!): TranslatableCollectionResponse
@@ -39,5 +39,7 @@ export const translatableCollectionSchema = /* GraphQL*/ `
             collectionId: ID!
             items: [TranslatableItemInput!]!
         ): SaveTranslatableCollectionResponse
+        
+        deleteTranslatableCollection(collectionId: ID!): BooleanResponse
     }
 `;
diff --git a/packages/api-page-builder/src/translations/translatableCollection/repository/DeleteTranslatableCollectionRepository.ts b/packages/api-page-builder/src/translations/translatableCollection/repository/DeleteTranslatableCollectionRepository.ts
new file mode 100644
index 00000000000..87ff8cfdaf3
--- /dev/null
+++ b/packages/api-page-builder/src/translations/translatableCollection/repository/DeleteTranslatableCollectionRepository.ts
@@ -0,0 +1,32 @@
+import { PbContext } from "~/types";
+import { GetModel } from "~/translations/GetModel";
+import { TranslatableCollectionDTO } from "./mappers/TranslatableCollectionDTO";
+
+export class DeleteTranslatableCollectionRepository {
+    private readonly context: PbContext;
+
+    constructor(context: PbContext) {
+        this.context = context;
+    }
+
+    async execute(collectionId: string): Promise<void> {
+        const model = await GetModel.byModelId(this.context, "translatableCollection");
+
+        // `cms.getEntry` throws an error if an entry is not found.
+        try {
+            const existingEntry = await this.context.cms.getEntry<TranslatableCollectionDTO>(
+                model,
+                {
+                    where: { collectionId, latest: true }
+                }
+            );
+
+            await this.context.cms.deleteEntry(model, existingEntry.entryId, { permanently: true });
+        } catch {
+            // If a record doesn't exist, then there's nothing to delete, and we can exit.
+            console.log(
+                `[DeleteTranslatableCollectionRepository]: Collection doesn't exist: ${collectionId}`
+            );
+        }
+    }
+}
diff --git a/packages/api-page-builder/src/translations/translatableCollection/repository/GetTranslatableCollectionByIdRepository.ts b/packages/api-page-builder/src/translations/translatableCollection/repository/GetTranslatableCollectionByIdRepository.ts
index b743baf3787..291ba8304de 100644
--- a/packages/api-page-builder/src/translations/translatableCollection/repository/GetTranslatableCollectionByIdRepository.ts
+++ b/packages/api-page-builder/src/translations/translatableCollection/repository/GetTranslatableCollectionByIdRepository.ts
@@ -15,17 +15,23 @@ export class GetTranslatableCollectionByIdRepository {
     async execute(collectionId: string): Promise<TranslatableCollection> {
         const model = await GetModel.byModelId(this.context, "translatableCollection");
 
-        const existingEntry = await this.context.cms.getEntry<TranslatableCollectionDTO>(model, {
-            where: { collectionId, latest: true }
-        });
+        try {
+            const existingEntry = await this.context.cms.getEntry<TranslatableCollectionDTO>(
+                model,
+                {
+                    where: { collectionId, latest: true }
+                }
+            );
 
-        if (!existingEntry) {
+            return TranslatableCollectionMapper.fromDTO(
+                existingEntry.values,
+                existingEntry.entryId
+            );
+        } catch {
             throw new WebinyError({
                 message: `TranslatableCollection "${collectionId}" not found!`,
                 code: "NOT_FOUND"
             });
         }
-
-        return TranslatableCollectionMapper.fromDTO(existingEntry.values, existingEntry.entryId);
     }
 }
diff --git a/packages/api-page-builder/src/translations/translatableCollection/useCases/DeleteTranslatableCollectionUseCase.ts b/packages/api-page-builder/src/translations/translatableCollection/useCases/DeleteTranslatableCollectionUseCase.ts
new file mode 100644
index 00000000000..b5c12fe05a0
--- /dev/null
+++ b/packages/api-page-builder/src/translations/translatableCollection/useCases/DeleteTranslatableCollectionUseCase.ts
@@ -0,0 +1,20 @@
+import { PbContext } from "~/graphql/types";
+import { DeleteTranslatableCollectionRepository } from "~/translations/translatableCollection/repository/DeleteTranslatableCollectionRepository";
+
+export interface DeleteTranslatableCollectionParams {
+    collectionId: string;
+}
+
+export class DeleteTranslatableCollectionUseCase {
+    private readonly context: PbContext;
+
+    constructor(context: PbContext) {
+        this.context = context;
+    }
+
+    async execute(params: DeleteTranslatableCollectionParams): Promise<void> {
+        const deleteRepository = new DeleteTranslatableCollectionRepository(this.context);
+
+        await deleteRepository.execute(params.collectionId);
+    }
+}
diff --git a/packages/api-page-builder/src/translations/translatedCollection/graphql/resolvers.ts b/packages/api-page-builder/src/translations/translatedCollection/graphql/resolvers.ts
index 0717d5c989a..bb56d13fe5e 100644
--- a/packages/api-page-builder/src/translations/translatedCollection/graphql/resolvers.ts
+++ b/packages/api-page-builder/src/translations/translatedCollection/graphql/resolvers.ts
@@ -4,13 +4,21 @@ import type { PbContext } from "~/graphql/types";
 import { GqlTranslatedCollectionMapper } from "~/translations/translatedCollection/graphql/mappers/GqlTranslatedCollectionMapper";
 import { SaveTranslatedCollectionUseCase } from "~/translations/translatedCollection/useCases/SaveTranslatedCollectionUseCase";
 import { GetOrCreateTranslatedCollectionUseCase } from "~/translations/translatedCollection/useCases/GetOrCreateTranslatedCollectionUseCase";
-import { GetTranslatableCollectionUseCase } from "~/translations";
+import {
+    DeleteTranslatedCollectionUseCase,
+    GetTranslatableCollectionUseCase
+} from "~/translations";
 
 interface GetTranslatedCollectionParams {
     collectionId: string;
     languageCode: string;
 }
 
+interface DeleteTranslatedCollectionParams {
+    collectionId: string;
+    languageCode?: string;
+}
+
 interface UpdateTranslatedCollectionParams {
     collectionId: string;
     languageCode: string;
@@ -76,6 +84,18 @@ export const translatedCollectionResolvers: Resolvers<PbContext> = {
             } catch (err) {
                 return new ErrorResponse(err);
             }
+        },
+        deleteTranslatedCollection: async (_, args, context) => {
+            const { collectionId, languageCode } = args as DeleteTranslatedCollectionParams;
+
+            try {
+                const useCase = new DeleteTranslatedCollectionUseCase(context);
+                await useCase.execute({ collectionId, languageCode });
+
+                return new Response(true);
+            } catch (err) {
+                return new ErrorResponse(err);
+            }
         }
     }
 };
diff --git a/packages/api-page-builder/src/translations/translatedCollection/graphql/schema.ts b/packages/api-page-builder/src/translations/translatedCollection/graphql/schema.ts
index ca4cdc5a48d..d52189ed203 100644
--- a/packages/api-page-builder/src/translations/translatedCollection/graphql/schema.ts
+++ b/packages/api-page-builder/src/translations/translatedCollection/graphql/schema.ts
@@ -41,5 +41,7 @@ export const translatedCollectionSchema = /* GraphQL*/ `
             languageCode: String!
             items: [TranslatedItemInput!]!
         ): SaveTranslatedCollectionResponse
+        
+        deleteTranslatedCollection(collectionId: ID!, languageCode: String): BooleanResponse
     }
 `;
diff --git a/packages/api-page-builder/src/translations/translatedCollection/repository/DeleteTranslatedCollectionRepository.ts b/packages/api-page-builder/src/translations/translatedCollection/repository/DeleteTranslatedCollectionRepository.ts
new file mode 100644
index 00000000000..18f15b16120
--- /dev/null
+++ b/packages/api-page-builder/src/translations/translatedCollection/repository/DeleteTranslatedCollectionRepository.ts
@@ -0,0 +1,40 @@
+import { PbContext } from "~/types";
+import { GetModel } from "~/translations/GetModel";
+import { TranslatedCollectionDTO } from "~/translations/translatedCollection/repository/mappers/TranslatedCollectionDTO";
+
+export interface DeleteTranslatedCollectionParams {
+    collectionId: string;
+    languageCode?: string;
+}
+
+export class DeleteTranslatedCollectionRepository {
+    private readonly context: PbContext;
+
+    constructor(context: PbContext) {
+        this.context = context;
+    }
+
+    async execute(params: DeleteTranslatedCollectionParams): Promise<void> {
+        const model = await GetModel.byModelId(this.context, "translatedCollection");
+
+        const filter: DeleteTranslatedCollectionParams = {
+            collectionId: params.collectionId
+        };
+
+        if (params.languageCode) {
+            filter.languageCode = params.languageCode;
+        }
+
+        const [entries] = await this.context.cms.listEntries<TranslatedCollectionDTO>(model, {
+            where: { latest: true, ...filter }
+        });
+
+        await Promise.all(
+            entries.map(entry => {
+                return this.context.cms.deleteEntry(model, entry.entryId, {
+                    permanently: true
+                });
+            })
+        );
+    }
+}
diff --git a/packages/api-page-builder/src/translations/translatedCollection/repository/GetTranslatedCollectionRepository.ts b/packages/api-page-builder/src/translations/translatedCollection/repository/GetTranslatedCollectionRepository.ts
index 692271ee71a..43fcca7acde 100644
--- a/packages/api-page-builder/src/translations/translatedCollection/repository/GetTranslatedCollectionRepository.ts
+++ b/packages/api-page-builder/src/translations/translatedCollection/repository/GetTranslatedCollectionRepository.ts
@@ -20,21 +20,21 @@ export class GetTranslatedCollectionRepository {
     async execute(params: GetTranslatedCollectionParams): Promise<TranslatedCollection> {
         const model = await GetModel.byModelId(this.context, "translatedCollection");
 
-        const existingEntry = await this.context.cms.getEntry<TranslatedCollectionDTO>(model, {
-            where: {
-                collectionId: params.collectionId,
-                languageCode: params.languageCode,
-                latest: true
-            }
-        });
+        try {
+            const existingEntry = await this.context.cms.getEntry<TranslatedCollectionDTO>(model, {
+                where: {
+                    collectionId: params.collectionId,
+                    languageCode: params.languageCode,
+                    latest: true
+                }
+            });
 
-        if (!existingEntry) {
+            return TranslatedCollectionMapper.fromDTO(existingEntry.values, existingEntry.entryId);
+        } catch {
             throw new WebinyError({
                 message: `TranslatedCollection "${params.collectionId}" for language "${params.languageCode}" was not found!`,
                 code: "NOT_FOUND"
             });
         }
-
-        return TranslatedCollectionMapper.fromDTO(existingEntry.values, existingEntry.entryId);
     }
 }
diff --git a/packages/api-page-builder/src/translations/translatedCollection/useCases/DeleteTranslatedCollectionUseCase.ts b/packages/api-page-builder/src/translations/translatedCollection/useCases/DeleteTranslatedCollectionUseCase.ts
new file mode 100644
index 00000000000..3257a89d16a
--- /dev/null
+++ b/packages/api-page-builder/src/translations/translatedCollection/useCases/DeleteTranslatedCollectionUseCase.ts
@@ -0,0 +1,21 @@
+import { PbContext } from "~/graphql/types";
+import { DeleteTranslatedCollectionRepository } from "~/translations/translatedCollection/repository/DeleteTranslatedCollectionRepository";
+
+export interface DeleteTranslatedCollectionParams {
+    collectionId: string;
+    languageCode?: string;
+}
+
+export class DeleteTranslatedCollectionUseCase {
+    private readonly context: PbContext;
+
+    constructor(context: PbContext) {
+        this.context = context;
+    }
+
+    async execute(params: DeleteTranslatedCollectionParams): Promise<void> {
+        const deleteRepository = new DeleteTranslatedCollectionRepository(this.context);
+
+        await deleteRepository.execute(params);
+    }
+}
diff --git a/packages/api-prerendering-service-aws/src/render/subscriber.ts b/packages/api-prerendering-service-aws/src/render/subscriber.ts
index 2182ee27ffc..aff36e40693 100644
--- a/packages/api-prerendering-service-aws/src/render/subscriber.ts
+++ b/packages/api-prerendering-service-aws/src/render/subscriber.ts
@@ -114,7 +114,7 @@ export default (params: HandlerConfig) => {
              * the database. This way we are sure that we don't store obsolete infrastructure information.
              */
             toRender.push({
-                groupId: render.tenant,
+                groupId: render.groupId ?? render.tenant,
                 body: render
             });
         }
diff --git a/packages/api-prerendering-service/src/render/index.ts b/packages/api-prerendering-service/src/render/index.ts
index b54bbe82e91..575045f2d03 100644
--- a/packages/api-prerendering-service/src/render/index.ts
+++ b/packages/api-prerendering-service/src/render/index.ts
@@ -56,7 +56,8 @@ export default (params: RenderParams) => {
             const settings = await storageOperations.getSettings();
 
             for (const args of handlerArgs) {
-                const { tenant, path, locale } = args;
+                const { tenant, path, locale, groupId } = args;
+                console.log("Rendering item", args);
 
                 const bucketRoot = isMultiTenant ? tenant : "";
 
@@ -118,6 +119,7 @@ export default (params: RenderParams) => {
                     tenant,
                     path,
                     locale,
+                    groupId: groupId ?? tenant,
                     tags: args.tags,
                     files: files.map(item => omit(item, ["body"]))
                 };
diff --git a/packages/api-prerendering-service/src/types.ts b/packages/api-prerendering-service/src/types.ts
index d0fd251fa9b..ece29e4f9d2 100644
--- a/packages/api-prerendering-service/src/types.ts
+++ b/packages/api-prerendering-service/src/types.ts
@@ -36,6 +36,7 @@ export interface Render {
     path: string;
     tenant: string;
     locale: string;
+    groupId: string;
     tags?: Tag[];
     files: {
         name: string;
@@ -171,6 +172,7 @@ export interface RenderEvent {
     path: string;
     tenant: string;
     locale: string;
+    groupId: string;
     exclude?: string[];
     tags?: Tag[];
 }
diff --git a/packages/api-record-locking/__tests__/mocks/createConvert.ts b/packages/api-record-locking/__tests__/mocks/createConvert.ts
new file mode 100644
index 00000000000..38e720f0f24
--- /dev/null
+++ b/packages/api-record-locking/__tests__/mocks/createConvert.ts
@@ -0,0 +1,9 @@
+import { convertEntryToLockRecord as baseConvertEntryToLockRecord } from "~/utils/convertEntryToLockRecord";
+import type { CmsEntry } from "@webiny/api-headless-cms/types";
+import type { IRecordLockingLockRecordValues } from "~/types";
+
+export const createConvert = () => {
+    return (entry: CmsEntry<IRecordLockingLockRecordValues>) => {
+        return baseConvertEntryToLockRecord(entry, 20000);
+    };
+};
diff --git a/packages/api-record-locking/__tests__/mocks/createGetIdentity.ts b/packages/api-record-locking/__tests__/mocks/createGetIdentity.ts
new file mode 100644
index 00000000000..b52f0becd75
--- /dev/null
+++ b/packages/api-record-locking/__tests__/mocks/createGetIdentity.ts
@@ -0,0 +1,8 @@
+import type { SecurityIdentity } from "@webiny/api-security/types";
+import { createIdentity } from "~tests/helpers/identity";
+
+export const createGetIdentity = () => {
+    return (): SecurityIdentity => {
+        return createIdentity();
+    };
+};
diff --git a/packages/api-record-locking/__tests__/mocks/createGetManager.ts b/packages/api-record-locking/__tests__/mocks/createGetManager.ts
new file mode 100644
index 00000000000..3c82e4490f6
--- /dev/null
+++ b/packages/api-record-locking/__tests__/mocks/createGetManager.ts
@@ -0,0 +1,7 @@
+import { IRecordLockingModelManager } from "~/types";
+
+export const createGetManager = () => {
+    return async () => {
+        return {} as unknown as IRecordLockingModelManager;
+    };
+};
diff --git a/packages/api-record-locking/__tests__/mocks/createGetSecurity.ts b/packages/api-record-locking/__tests__/mocks/createGetSecurity.ts
new file mode 100644
index 00000000000..89d23cfd208
--- /dev/null
+++ b/packages/api-record-locking/__tests__/mocks/createGetSecurity.ts
@@ -0,0 +1,11 @@
+import type { Security } from "@webiny/api-security/types";
+
+export const createGetSecurity = () => {
+    return (): Pick<Security, "withoutAuthorization"> => {
+        return {
+            withoutAuthorization: async cb => {
+                return await cb();
+            }
+        };
+    };
+};
diff --git a/packages/api-record-locking/__tests__/useCase/isEntryLockedUseCase.test.ts b/packages/api-record-locking/__tests__/useCase/isEntryLockedUseCase.test.ts
index 6636dfbbb7e..7cb2f34faf4 100644
--- a/packages/api-record-locking/__tests__/useCase/isEntryLockedUseCase.test.ts
+++ b/packages/api-record-locking/__tests__/useCase/isEntryLockedUseCase.test.ts
@@ -1,14 +1,10 @@
 import { IsEntryLockedUseCase } from "~/useCases/IsEntryLocked/IsEntryLockedUseCase";
 import { WebinyError } from "@webiny/error";
-import { IRecordLockingLockRecord } from "~/types";
+import type { IRecordLockingLockRecord } from "~/types";
 import { NotFoundError } from "@webiny/handler-graphql";
-import { isLockedFactory } from "~/utils/isLockedFactory";
 import { createIdentity } from "~tests/helpers/identity";
 
 describe("is entry locked use case", () => {
-    const timeout = 600000;
-    const isLocked = isLockedFactory(timeout);
-
     it("should return false if lock record is not found - object param", async () => {
         const useCase = new IsEntryLockedUseCase({
             getLockRecordUseCase: {
@@ -16,7 +12,6 @@ describe("is entry locked use case", () => {
                     throw new NotFoundError();
                 }
             },
-            isLocked,
             getIdentity: createIdentity
         });
 
@@ -34,11 +29,13 @@ describe("is entry locked use case", () => {
                 async execute() {
                     return {
                         lockedOn: new Date("2020-01-01"),
-                        lockedBy: createIdentity()
+                        lockedBy: createIdentity(),
+                        isExpired() {
+                            return false;
+                        }
                     } as unknown as IRecordLockingLockRecord;
                 }
             },
-            isLocked,
             getIdentity: createIdentity
         });
 
@@ -59,7 +56,6 @@ describe("is entry locked use case", () => {
                     throw new WebinyError("Testing error.", "TESTING_ERROR");
                 }
             },
-            isLocked,
             getIdentity: createIdentity
         });
 
diff --git a/packages/api-record-locking/__tests__/useCase/lockEntryUseCase.test.ts b/packages/api-record-locking/__tests__/useCase/lockEntryUseCase.test.ts
index 74754dafb5c..57586d7c8e8 100644
--- a/packages/api-record-locking/__tests__/useCase/lockEntryUseCase.test.ts
+++ b/packages/api-record-locking/__tests__/useCase/lockEntryUseCase.test.ts
@@ -3,6 +3,10 @@ import { WebinyError } from "@webiny/error";
 import { IIsEntryLockedUseCase } from "~/abstractions/IIsEntryLocked";
 import { IRecordLockingModelManager } from "~/types";
 import { NotFoundError } from "@webiny/handler-graphql";
+import { createConvert } from "~tests/mocks/createConvert";
+import { createGetSecurity } from "~tests/mocks/createGetSecurity";
+import { createGetManager } from "~tests/mocks/createGetManager";
+import { createGetIdentity } from "~tests/mocks/createGetIdentity";
 
 describe("lock entry use case", () => {
     it("should throw an error on isEntryLockedUseCase.execute", async () => {
@@ -13,9 +17,10 @@ describe("lock entry use case", () => {
                     throw new WebinyError("Trying out an error", "TRYING_OUT_ERROR", {});
                 }
             } as unknown as IIsEntryLockedUseCase,
-            getManager: async () => {
-                return {} as unknown as IRecordLockingModelManager;
-            }
+            getManager: createGetManager(),
+            getSecurity: createGetSecurity(),
+            convert: createConvert(),
+            getIdentity: createGetIdentity()
         });
         try {
             await useCase.execute({
@@ -35,6 +40,9 @@ describe("lock entry use case", () => {
                     throw new NotFoundError();
                 }
             } as unknown as IIsEntryLockedUseCase,
+            getSecurity: createGetSecurity(),
+            convert: createConvert(),
+            getIdentity: createGetIdentity(),
             getManager: async () => {
                 return {
                     create: async () => {
diff --git a/packages/api-record-locking/__tests__/useCase/unlockEntryRequestUseCase.test.ts b/packages/api-record-locking/__tests__/useCase/unlockEntryRequestUseCase.test.ts
index 0a78c0b458e..30cb71177fa 100644
--- a/packages/api-record-locking/__tests__/useCase/unlockEntryRequestUseCase.test.ts
+++ b/packages/api-record-locking/__tests__/useCase/unlockEntryRequestUseCase.test.ts
@@ -1,8 +1,10 @@
 import { UnlockEntryRequestUseCase } from "~/useCases/UnlockRequestUseCase/UnlockEntryRequestUseCase";
 import { IGetLockRecordUseCase } from "~/abstractions/IGetLockRecordUseCase";
 import { getSecurityIdentity } from "~tests/helpers/identity";
-import { IRecordLockingModelManager } from "~/types";
 import { WebinyError } from "@webiny/error";
+import { createConvert } from "~tests/mocks/createConvert";
+import { createGetSecurity } from "~tests/mocks/createGetSecurity";
+import { createGetManager } from "~tests/mocks/createGetManager";
 
 describe("unlock entry request use case", () => {
     it("should throw an error on missing lock record", async () => {
@@ -14,9 +16,9 @@ describe("unlock entry request use case", () => {
                 }
             } as unknown as IGetLockRecordUseCase,
             getIdentity: getSecurityIdentity,
-            getManager: async () => {
-                return {} as unknown as IRecordLockingModelManager;
-            }
+            getManager: createGetManager(),
+            getSecurity: createGetSecurity(),
+            convert: createConvert()
         });
 
         try {
@@ -41,16 +43,22 @@ describe("unlock entry request use case", () => {
                             return {
                                 createdBy: {
                                     id: "other-user-id"
+                                },
+                                isExpired() {
+                                    return false;
                                 }
                             };
+                        },
+                        isExpired() {
+                            return false;
                         }
                     };
                 }
             } as unknown as IGetLockRecordUseCase,
             getIdentity: getSecurityIdentity,
-            getManager: async () => {
-                return {} as unknown as IRecordLockingModelManager;
-            }
+            getManager: createGetManager(),
+            getSecurity: createGetSecurity(),
+            convert: createConvert()
         });
 
         try {
@@ -85,14 +93,17 @@ describe("unlock entry request use case", () => {
                         },
                         getUnlockDenied() {
                             return null;
+                        },
+                        isExpired() {
+                            return false;
                         }
                     };
                 }
             } as unknown as IGetLockRecordUseCase,
             getIdentity: getSecurityIdentity,
-            getManager: async () => {
-                return {} as unknown as IRecordLockingModelManager;
-            }
+            getManager: createGetManager(),
+            getSecurity: createGetSecurity(),
+            convert: createConvert()
         });
 
         const result = await useCase.execute({ id: "aTestIdValue#0001", type: "type" });
diff --git a/packages/api-record-locking/__tests__/useCase/unlockEntryUseCase.test.ts b/packages/api-record-locking/__tests__/useCase/unlockEntryUseCase.test.ts
index 1e591fd4c45..854f23fc206 100644
--- a/packages/api-record-locking/__tests__/useCase/unlockEntryUseCase.test.ts
+++ b/packages/api-record-locking/__tests__/useCase/unlockEntryUseCase.test.ts
@@ -2,6 +2,7 @@ import { UnlockEntryUseCase } from "~/useCases/UnlockEntryUseCase/UnlockEntryUse
 import { IGetLockRecordUseCase } from "~/abstractions/IGetLockRecordUseCase";
 import { WebinyError } from "@webiny/error";
 import { createIdentity } from "~tests/helpers/identity";
+import { createGetSecurity } from "~tests/mocks/createGetSecurity";
 
 describe("unlock entry use case", () => {
     it("should throw an error on unlocking an entry", async () => {
@@ -11,7 +12,10 @@ describe("unlock entry use case", () => {
             getLockRecordUseCase: {
                 execute: async () => {
                     return {
-                        lockedBy: createIdentity()
+                        lockedBy: createIdentity(),
+                        isExpired() {
+                            return false;
+                        }
                     };
                 }
             } as unknown as IGetLockRecordUseCase,
@@ -19,13 +23,14 @@ describe("unlock entry use case", () => {
                 throw new WebinyError("Testing error.", "TESTING_ERROR");
             },
             getIdentity: createIdentity,
-            hasFullAccess: async () => {
-                return true;
-            },
             kickOutCurrentUserUseCase: {
                 async execute(): Promise<void> {
                     return;
                 }
+            },
+            getSecurity: createGetSecurity(),
+            async hasRecordLockingAccess() {
+                return true;
             }
         });
 
diff --git a/packages/api-record-locking/src/crud/crud.ts b/packages/api-record-locking/src/crud/crud.ts
index e91ce123ef0..d622e354d1e 100644
--- a/packages/api-record-locking/src/crud/crud.ts
+++ b/packages/api-record-locking/src/crud/crud.ts
@@ -58,6 +58,10 @@ export const createRecordLockingCrud = async (params: Params): Promise<IRecordLo
         );
     };
 
+    const getSecurity = () => {
+        return context.security;
+    };
+
     const getIdentity: IGetIdentity = () => {
         const identity = context.security.getIdentity();
         if (!identity) {
@@ -128,6 +132,7 @@ export const createRecordLockingCrud = async (params: Params): Promise<IRecordLo
     } = createUseCases({
         getIdentity,
         getManager,
+        getSecurity,
         hasRecordLockingAccess,
         getWebsockets,
         getTimeout
diff --git a/packages/api-record-locking/src/index.ts b/packages/api-record-locking/src/index.ts
index d2da5b6afeb..3b6d259f122 100644
--- a/packages/api-record-locking/src/index.ts
+++ b/packages/api-record-locking/src/index.ts
@@ -6,6 +6,9 @@ import { createLockingModel } from "~/crud/model";
 import { isHeadlessCmsReady } from "@webiny/api-headless-cms";
 
 export interface ICreateContextPluginParams {
+    /**
+     * A number of seconds after last activity to wait before the record is automatically unlocked.
+     */
     timeout?: number;
 }
 
diff --git a/packages/api-record-locking/src/types.ts b/packages/api-record-locking/src/types.ts
index 25d3bb3ccf3..efb307cdd99 100644
--- a/packages/api-record-locking/src/types.ts
+++ b/packages/api-record-locking/src/types.ts
@@ -89,6 +89,7 @@ export interface IRecordLockingLockRecord extends IRecordLockingLockRecordObject
     getUnlockRequested(): IRecordLockingLockRecordRequestedAction | undefined;
     getUnlockApproved(): IRecordLockingLockRecordApprovedAction | undefined;
     getUnlockDenied(): IRecordLockingLockRecordDeniedAction | undefined;
+    isExpired(): boolean;
 }
 
 /**
diff --git a/packages/api-record-locking/src/useCases/GetLockRecord/GetLockRecordUseCase.ts b/packages/api-record-locking/src/useCases/GetLockRecord/GetLockRecordUseCase.ts
index 9ebe0abe37e..50953d16dd0 100644
--- a/packages/api-record-locking/src/useCases/GetLockRecord/GetLockRecordUseCase.ts
+++ b/packages/api-record-locking/src/useCases/GetLockRecord/GetLockRecordUseCase.ts
@@ -7,18 +7,22 @@ import { NotFoundError } from "@webiny/handler-graphql";
 import { createLockRecordDatabaseId } from "~/utils/lockRecordDatabaseId";
 import { createIdentifier } from "@webiny/utils";
 import type { ConvertEntryToLockRecordCb } from "~/useCases/types";
+import type { Security } from "@webiny/api-security/types";
 
 export interface IGetLockRecordUseCaseParams {
     getManager(): Promise<IRecordLockingModelManager>;
+    getSecurity(): Pick<Security, "withoutAuthorization">;
     convert: ConvertEntryToLockRecordCb;
 }
 
 export class GetLockRecordUseCase implements IGetLockRecordUseCase {
     private readonly getManager: IGetLockRecordUseCaseParams["getManager"];
+    private readonly getSecurity: IGetLockRecordUseCaseParams["getSecurity"];
     private readonly convert: ConvertEntryToLockRecordCb;
 
     public constructor(params: IGetLockRecordUseCaseParams) {
         this.getManager = params.getManager;
+        this.getSecurity = params.getSecurity;
         this.convert = params.convert;
     }
 
@@ -30,10 +34,13 @@ export class GetLockRecordUseCase implements IGetLockRecordUseCase {
             id: recordId,
             version: 1
         });
+        const security = this.getSecurity();
         try {
             const manager = await this.getManager();
-            const result = await manager.get(id);
-            return this.convert(result);
+            return await security.withoutAuthorization(async () => {
+                const result = await manager.get(id);
+                return this.convert(result);
+            });
         } catch (ex) {
             if (ex instanceof NotFoundError) {
                 return null;
diff --git a/packages/api-record-locking/src/useCases/GetLockedEntryLockRecord/GetLockedEntryLockRecordUseCase.ts b/packages/api-record-locking/src/useCases/GetLockedEntryLockRecord/GetLockedEntryLockRecordUseCase.ts
index 90a54a078b8..8c9a68d80df 100644
--- a/packages/api-record-locking/src/useCases/GetLockedEntryLockRecord/GetLockedEntryLockRecordUseCase.ts
+++ b/packages/api-record-locking/src/useCases/GetLockedEntryLockRecord/GetLockedEntryLockRecordUseCase.ts
@@ -4,22 +4,21 @@ import type {
     IGetLockedEntryLockRecordUseCase,
     IGetLockedEntryLockRecordUseCaseExecuteParams
 } from "~/abstractions/IGetLockedEntryLockRecordUseCase";
-import type { IIsLocked } from "~/utils/isLockedFactory";
 
 export interface IGetLockedEntryLockRecordUseCaseParams {
     getLockRecordUseCase: IGetLockRecordUseCase;
-    isLocked: IIsLocked;
     getIdentity: IGetIdentity;
 }
 
+/**
+ * This use case is used to get a lock record for an entry - and the entry is still locked by someone other than the current user.
+ */
 export class GetLockedEntryLockRecordUseCase implements IGetLockedEntryLockRecordUseCase {
     private readonly getLockRecordUseCase: IGetLockRecordUseCase;
-    private readonly isLocked: IIsLocked;
     private readonly getIdentity: IGetIdentity;
 
     public constructor(params: IGetLockedEntryLockRecordUseCaseParams) {
         this.getLockRecordUseCase = params.getLockRecordUseCase;
-        this.isLocked = params.isLocked;
         this.getIdentity = params.getIdentity;
     }
 
@@ -27,13 +26,13 @@ export class GetLockedEntryLockRecordUseCase implements IGetLockedEntryLockRecor
         params: IGetLockedEntryLockRecordUseCaseExecuteParams
     ): Promise<IRecordLockingLockRecord | null> {
         const result = await this.getLockRecordUseCase.execute(params);
-        if (!result?.lockedBy) {
+        if (!result?.lockedBy?.id || result.isExpired()) {
             return null;
         }
         const identity = this.getIdentity();
         if (identity.id === result.lockedBy.id) {
             return null;
         }
-        return this.isLocked(result) ? result : null;
+        return result;
     }
 }
diff --git a/packages/api-record-locking/src/useCases/IsEntryLocked/IsEntryLockedUseCase.ts b/packages/api-record-locking/src/useCases/IsEntryLocked/IsEntryLockedUseCase.ts
index 24c00a4797f..57cbe3aa97c 100644
--- a/packages/api-record-locking/src/useCases/IsEntryLocked/IsEntryLockedUseCase.ts
+++ b/packages/api-record-locking/src/useCases/IsEntryLocked/IsEntryLockedUseCase.ts
@@ -4,38 +4,31 @@ import type {
 } from "~/abstractions/IIsEntryLocked";
 import type { IGetLockRecordUseCase } from "~/abstractions/IGetLockRecordUseCase";
 import { NotFoundError } from "@webiny/handler-graphql";
-import type { IIsLocked } from "~/utils/isLockedFactory";
 import type { IGetIdentity } from "~/types";
 
 export interface IIsEntryLockedParams {
     getLockRecordUseCase: IGetLockRecordUseCase;
-    isLocked: IIsLocked;
     getIdentity: IGetIdentity;
 }
 
 export class IsEntryLockedUseCase implements IIsEntryLockedUseCase {
     private readonly getLockRecordUseCase: IGetLockRecordUseCase;
-    private readonly isLocked: IIsLocked;
     private readonly getIdentity: IGetIdentity;
 
     public constructor(params: IIsEntryLockedParams) {
         this.getLockRecordUseCase = params.getLockRecordUseCase;
-        this.isLocked = params.isLocked;
         this.getIdentity = params.getIdentity;
     }
 
     public async execute(params: IIsEntryLockedUseCaseExecuteParams): Promise<boolean> {
         try {
             const result = await this.getLockRecordUseCase.execute(params);
-            if (!result) {
+            if (!result || result.isExpired()) {
                 return false;
             }
             const identity = this.getIdentity();
-            if (result.lockedBy.id === identity.id) {
-                return false;
-            }
 
-            return this.isLocked(result);
+            return result.lockedBy.id !== identity.id;
         } catch (ex) {
             if (ex instanceof NotFoundError === false) {
                 throw ex;
diff --git a/packages/api-record-locking/src/useCases/LockEntryUseCase/LockEntryUseCase.ts b/packages/api-record-locking/src/useCases/LockEntryUseCase/LockEntryUseCase.ts
index 869eccc2b92..80e41a67585 100644
--- a/packages/api-record-locking/src/useCases/LockEntryUseCase/LockEntryUseCase.ts
+++ b/packages/api-record-locking/src/useCases/LockEntryUseCase/LockEntryUseCase.ts
@@ -12,21 +12,28 @@ import type { IIsEntryLockedUseCase } from "~/abstractions/IIsEntryLocked";
 import { createLockRecordDatabaseId } from "~/utils/lockRecordDatabaseId";
 import { NotFoundError } from "@webiny/handler-graphql";
 import type { ConvertEntryToLockRecordCb } from "~/useCases/types";
+import type { Security, SecurityIdentity } from "@webiny/api-security/types";
 
 export interface ILockEntryUseCaseParams {
     isEntryLockedUseCase: IIsEntryLockedUseCase;
     getManager(): Promise<IRecordLockingModelManager>;
+    getSecurity(): Pick<Security, "withoutAuthorization">;
+    getIdentity(): SecurityIdentity;
     convert: ConvertEntryToLockRecordCb;
 }
 
 export class LockEntryUseCase implements ILockEntryUseCase {
     private readonly isEntryLockedUseCase: IIsEntryLockedUseCase;
-    private readonly getManager: () => Promise<IRecordLockingModelManager>;
+    private readonly getManager: ILockEntryUseCaseParams["getManager"];
+    private readonly getSecurity: ILockEntryUseCaseParams["getSecurity"];
+    private readonly getIdentity: ILockEntryUseCaseParams["getIdentity"];
     private readonly convert: ConvertEntryToLockRecordCb;
 
     public constructor(params: ILockEntryUseCaseParams) {
         this.isEntryLockedUseCase = params.isEntryLockedUseCase;
         this.getManager = params.getManager;
+        this.getSecurity = params.getSecurity;
+        this.getIdentity = params.getIdentity;
         this.convert = params.convert;
     }
 
@@ -47,17 +54,28 @@ export class LockEntryUseCase implements ILockEntryUseCase {
                 ...params
             });
         }
+        const security = this.getSecurity();
+        const identity = this.getIdentity();
         try {
+            const user: SecurityIdentity = {
+                id: identity.id,
+                displayName: identity.displayName,
+                type: identity.type
+            };
             const manager = await this.getManager();
 
             const id = createLockRecordDatabaseId(params.id);
-            const entry = await manager.create<IRecordLockingLockRecordValues>({
-                id,
-                targetId: params.id,
-                type: params.type,
-                actions: []
+            return await security.withoutAuthorization(async () => {
+                const entry = await manager.create<IRecordLockingLockRecordValues>({
+                    id,
+                    createdBy: user,
+                    savedBy: user,
+                    targetId: params.id,
+                    type: params.type,
+                    actions: []
+                });
+                return this.convert(entry);
             });
-            return this.convert(entry);
         } catch (ex) {
             throw new WebinyError(
                 `Could not lock entry: ${ex.message}`,
diff --git a/packages/api-record-locking/src/useCases/UnlockEntryUseCase/UnlockEntryUseCase.ts b/packages/api-record-locking/src/useCases/UnlockEntryUseCase/UnlockEntryUseCase.ts
index 4c0f7d111d2..d47828b6140 100644
--- a/packages/api-record-locking/src/useCases/UnlockEntryUseCase/UnlockEntryUseCase.ts
+++ b/packages/api-record-locking/src/useCases/UnlockEntryUseCase/UnlockEntryUseCase.ts
@@ -15,11 +15,13 @@ import { validateSameIdentity } from "~/utils/validateSameIdentity";
 import { NotAuthorizedError } from "@webiny/api-security";
 import type { IKickOutCurrentUserUseCase } from "~/abstractions/IKickOutCurrentUserUseCase";
 import { NotFoundError } from "@webiny/handler-graphql";
+import type { Security } from "@webiny/api-security/types";
 
 export interface IUnlockEntryUseCaseParams {
     readonly getLockRecordUseCase: IGetLockRecordUseCase;
     readonly kickOutCurrentUserUseCase: IKickOutCurrentUserUseCase;
     getManager(): Promise<IRecordLockingModelManager>;
+    getSecurity(): Pick<Security, "withoutAuthorization">;
     getIdentity: IGetIdentity;
     hasRecordLockingAccess: IHasRecordLockingAccessCallable;
 }
@@ -27,7 +29,8 @@ export interface IUnlockEntryUseCaseParams {
 export class UnlockEntryUseCase implements IUnlockEntryUseCase {
     private readonly getLockRecordUseCase: IGetLockRecordUseCase;
     private readonly kickOutCurrentUserUseCase: IKickOutCurrentUserUseCase;
-    private readonly getManager: () => Promise<IRecordLockingModelManager>;
+    private readonly getManager: IUnlockEntryUseCaseParams["getManager"];
+    private readonly getSecurity: IUnlockEntryUseCaseParams["getSecurity"];
     private readonly getIdentity: IGetIdentity;
     private readonly hasRecordLockingAccess: IHasRecordLockingAccessCallable;
 
@@ -35,6 +38,7 @@ export class UnlockEntryUseCase implements IUnlockEntryUseCase {
         this.getLockRecordUseCase = params.getLockRecordUseCase;
         this.kickOutCurrentUserUseCase = params.kickOutCurrentUserUseCase;
         this.getManager = params.getManager;
+        this.getSecurity = params.getSecurity;
         this.getIdentity = params.getIdentity;
         this.hasRecordLockingAccess = params.hasRecordLockingAccess;
     }
@@ -43,12 +47,15 @@ export class UnlockEntryUseCase implements IUnlockEntryUseCase {
         params: IUnlockEntryUseCaseExecuteParams
     ): Promise<IRecordLockingLockRecord> {
         const record = await this.getLockRecordUseCase.execute(params);
-        if (!record) {
+        if (!record || record.isExpired()) {
+            const security = this.getSecurity();
             try {
                 const manager = await this.getManager();
-                await manager.delete(createLockRecordDatabaseId(params.id), {
-                    force: true,
-                    permanently: true
+                await security.withoutAuthorization(async () => {
+                    await manager.delete(createLockRecordDatabaseId(params.id), {
+                        force: true,
+                        permanently: true
+                    });
                 });
             } catch (ex) {
                 if (ex instanceof NotFoundError === false) {
@@ -86,18 +93,21 @@ export class UnlockEntryUseCase implements IUnlockEntryUseCase {
             kickOutCurrentUser = true;
         }
 
+        const security = this.getSecurity();
         try {
             const manager = await this.getManager();
-            await manager.delete(createLockRecordDatabaseId(params.id), {
-                force: true,
-                permanently: true
-            });
+            return await security.withoutAuthorization(async () => {
+                await manager.delete(createLockRecordDatabaseId(params.id), {
+                    force: true,
+                    permanently: true
+                });
 
-            if (!kickOutCurrentUser) {
+                if (!kickOutCurrentUser) {
+                    return record;
+                }
+                await this.kickOutCurrentUserUseCase.execute(record);
                 return record;
-            }
-            await this.kickOutCurrentUserUseCase.execute(record);
-            return record;
+            });
         } catch (ex) {
             throw new WebinyError(
                 `Could not unlock entry: ${ex.message}`,
diff --git a/packages/api-record-locking/src/useCases/UnlockRequestUseCase/UnlockEntryRequestUseCase.ts b/packages/api-record-locking/src/useCases/UnlockRequestUseCase/UnlockEntryRequestUseCase.ts
index 541a137c335..f9141b9d226 100644
--- a/packages/api-record-locking/src/useCases/UnlockRequestUseCase/UnlockEntryRequestUseCase.ts
+++ b/packages/api-record-locking/src/useCases/UnlockRequestUseCase/UnlockEntryRequestUseCase.ts
@@ -9,23 +9,27 @@ import type { IGetLockRecordUseCase } from "~/abstractions/IGetLockRecordUseCase
 import { createLockRecordDatabaseId } from "~/utils/lockRecordDatabaseId";
 import { createIdentifier } from "@webiny/utils";
 import type { ConvertEntryToLockRecordCb } from "~/useCases/types";
+import type { Security } from "@webiny/api-security/types";
 
 export interface IUnlockEntryRequestUseCaseParams {
     getLockRecordUseCase: IGetLockRecordUseCase;
-    getManager: () => Promise<IRecordLockingModelManager>;
+    getManager(): Promise<IRecordLockingModelManager>;
+    getSecurity(): Pick<Security, "withoutAuthorization">;
     getIdentity: IGetIdentity;
     convert: ConvertEntryToLockRecordCb;
 }
 
 export class UnlockEntryRequestUseCase implements IUnlockEntryRequestUseCase {
     private readonly getLockRecordUseCase: IGetLockRecordUseCase;
-    private readonly getManager: () => Promise<IRecordLockingModelManager>;
+    private readonly getManager: IUnlockEntryRequestUseCaseParams["getManager"];
+    private readonly getSecurity: IUnlockEntryRequestUseCaseParams["getSecurity"];
     private readonly getIdentity: IGetIdentity;
     private readonly convert: ConvertEntryToLockRecordCb;
 
     public constructor(params: IUnlockEntryRequestUseCaseParams) {
         this.getLockRecordUseCase = params.getLockRecordUseCase;
         this.getManager = params.getManager;
+        this.getSecurity = params.getSecurity;
         this.getIdentity = params.getIdentity;
         this.convert = params.convert;
     }
@@ -34,7 +38,7 @@ export class UnlockEntryRequestUseCase implements IUnlockEntryRequestUseCase {
         params: IUnlockEntryRequestUseCaseExecuteParams
     ): Promise<IRecordLockingLockRecord> {
         const record = await this.getLockRecordUseCase.execute(params);
-        if (!record) {
+        if (!record || record.isExpired()) {
             throw new WebinyError("Entry is not locked.", "ENTRY_NOT_LOCKED", {
                 ...params
             });
@@ -72,6 +76,8 @@ export class UnlockEntryRequestUseCase implements IUnlockEntryRequestUseCase {
             createdBy: this.getIdentity()
         });
 
+        const security = this.getSecurity();
+
         try {
             const manager = await this.getManager();
 
@@ -80,8 +86,10 @@ export class UnlockEntryRequestUseCase implements IUnlockEntryRequestUseCase {
                 id: entryId,
                 version: 1
             });
-            const result = await manager.update(id, record.toObject());
-            return this.convert(result);
+            return await security.withoutAuthorization(async () => {
+                const result = await manager.update(id, record.toObject());
+                return this.convert(result);
+            });
         } catch (ex) {
             throw new WebinyError(
                 "Could not update record with a unlock request.",
diff --git a/packages/api-record-locking/src/useCases/UpdateEntryLock/UpdateEntryLockUseCase.ts b/packages/api-record-locking/src/useCases/UpdateEntryLock/UpdateEntryLockUseCase.ts
index 7e858ed2641..572bcd8b562 100644
--- a/packages/api-record-locking/src/useCases/UpdateEntryLock/UpdateEntryLockUseCase.ts
+++ b/packages/api-record-locking/src/useCases/UpdateEntryLock/UpdateEntryLockUseCase.ts
@@ -10,11 +10,13 @@ import { createIdentifier } from "@webiny/utils";
 import { validateSameIdentity } from "~/utils/validateSameIdentity";
 import type { ILockEntryUseCase } from "~/abstractions/ILockEntryUseCase";
 import type { ConvertEntryToLockRecordCb } from "~/useCases/types";
+import type { Security } from "@webiny/api-security/types";
 
 export interface IUpdateEntryLockUseCaseParams {
     readonly getLockRecordUseCase: IGetLockRecordUseCase;
     readonly lockEntryUseCase: ILockEntryUseCase;
     getManager(): Promise<IRecordLockingModelManager>;
+    getSecurity(): Pick<Security, "withoutAuthorization">;
     getIdentity: IGetIdentity;
     convert: ConvertEntryToLockRecordCb;
 }
@@ -22,7 +24,8 @@ export interface IUpdateEntryLockUseCaseParams {
 export class UpdateEntryLockUseCase implements IUpdateEntryLockUseCase {
     private readonly getLockRecordUseCase: IGetLockRecordUseCase;
     private readonly lockEntryUseCase: ILockEntryUseCase;
-    private readonly getManager: () => Promise<IRecordLockingModelManager>;
+    private readonly getManager: IUpdateEntryLockUseCaseParams["getManager"];
+    private readonly getSecurity: IUpdateEntryLockUseCaseParams["getSecurity"];
     private readonly getIdentity: IGetIdentity;
     private readonly convert: ConvertEntryToLockRecordCb;
 
@@ -30,6 +33,7 @@ export class UpdateEntryLockUseCase implements IUpdateEntryLockUseCase {
         this.getLockRecordUseCase = params.getLockRecordUseCase;
         this.lockEntryUseCase = params.lockEntryUseCase;
         this.getManager = params.getManager;
+        this.getSecurity = params.getSecurity;
         this.getIdentity = params.getIdentity;
         this.convert = params.convert;
     }
@@ -37,28 +41,81 @@ export class UpdateEntryLockUseCase implements IUpdateEntryLockUseCase {
     public async execute(
         params: IUpdateEntryLockUseCaseExecuteParams
     ): Promise<IRecordLockingLockRecord> {
+        /**
+         * There is a possibility that the lock record already exists, just that the entry is not actually locked - lock expired.
+         */
         const record = await this.getLockRecordUseCase.execute(params);
+        /**
+         * If it exists, we will update the record with new user and dates.
+         * But if it does not exist, we will create a new record.
+         */
         if (!record) {
             return this.lockEntryUseCase.execute(params);
+        } else if (record.isExpired()) {
+            return this.updateOverExistingLockRecord(record);
         }
-
+        /**
+         * If the record exists and is not expired, we need to check if the user is the same as the one who locked it.
+         */
         validateSameIdentity({
             getIdentity: this.getIdentity,
             target: record.lockedBy
         });
+        return this.updateExistingLockRecord(record);
+    }
+
+    private async updateOverExistingLockRecord(
+        record: Pick<IRecordLockingLockRecord, "id">
+    ): Promise<IRecordLockingLockRecord> {
+        try {
+            const manager = await this.getManager();
+            const security = this.getSecurity();
+            const identity = this.getIdentity();
+
+            const entryId = createLockRecordDatabaseId(record.id);
+            const id = createIdentifier({
+                id: entryId,
+                version: 1
+            });
+            return await security.withoutAuthorization(async () => {
+                const date = new Date().toISOString();
+                const result = await manager.update(id, {
+                    savedOn: date,
+                    createdOn: date,
+                    savedBy: identity,
+                    createdBy: identity
+                });
+                return this.convert(result);
+            });
+        } catch (ex) {
+            throw new WebinyError(
+                `Could not update lock entry: ${ex.message}`,
+                ex.code || "UPDATE_LOCK_ENTRY_ERROR",
+                {
+                    ...ex.data
+                }
+            );
+        }
+    }
 
+    private async updateExistingLockRecord(
+        record: Pick<IRecordLockingLockRecord, "id">
+    ): Promise<IRecordLockingLockRecord> {
         try {
             const manager = await this.getManager();
+            const security = this.getSecurity();
 
             const entryId = createLockRecordDatabaseId(record.id);
             const id = createIdentifier({
                 id: entryId,
                 version: 1
             });
-            const result = await manager.update(id, {
-                savedOn: new Date().toISOString()
+            return await security.withoutAuthorization(async () => {
+                const result = await manager.update(id, {
+                    savedOn: new Date().toISOString()
+                });
+                return this.convert(result);
             });
-            return this.convert(result);
         } catch (ex) {
             throw new WebinyError(
                 `Could not update lock entry: ${ex.message}`,
diff --git a/packages/api-record-locking/src/useCases/index.ts b/packages/api-record-locking/src/useCases/index.ts
index 86d4e614d70..e28eb6be7fd 100644
--- a/packages/api-record-locking/src/useCases/index.ts
+++ b/packages/api-record-locking/src/useCases/index.ts
@@ -11,7 +11,6 @@ import { UnlockEntryUseCase } from "./UnlockEntryUseCase/UnlockEntryUseCase";
 import { UnlockEntryRequestUseCase } from "./UnlockRequestUseCase/UnlockEntryRequestUseCase";
 import { ListAllLockRecordsUseCase } from "./ListAllLockRecordsUseCase/ListAllLockRecordsUseCase";
 import { ListLockRecordsUseCase } from "./ListLockRecordsUseCase/ListLockRecordsUseCase";
-import { isLockedFactory } from "~/utils/isLockedFactory";
 import { UpdateEntryLockUseCase } from "~/useCases/UpdateEntryLock/UpdateEntryLockUseCase";
 import { KickOutCurrentUserUseCase } from "./KickOutCurrentUser/KickOutCurrentUserUseCase";
 import { GetLockedEntryLockRecordUseCase } from "~/useCases/GetLockedEntryLockRecord/GetLockedEntryLockRecordUseCase";
@@ -26,11 +25,13 @@ import type { IUnlockEntryUseCase } from "~/abstractions/IUnlockEntryUseCase";
 import type { IUnlockEntryRequestUseCase } from "~/abstractions/IUnlockEntryRequestUseCase";
 import { convertEntryToLockRecord as baseConvertEntryToLockRecord } from "~/utils/convertEntryToLockRecord";
 import { ConvertEntryToLockRecordCb } from "~/useCases/types";
+import type { Security } from "@webiny/api-security/types";
 
 export interface ICreateUseCasesParams {
     getTimeout: () => number;
     getIdentity: IGetIdentity;
     getManager(): Promise<IRecordLockingModelManager>;
+    getSecurity(): Pick<Security, "withoutAuthorization">;
     hasRecordLockingAccess: IHasRecordLockingAccessCallable;
     getWebsockets: IGetWebsocketsContextCallable;
 }
@@ -50,7 +51,6 @@ export interface ICreateUseCasesResponse {
 export const createUseCases = (params: ICreateUseCasesParams): ICreateUseCasesResponse => {
     const { getTimeout } = params;
     const timeout = getTimeout();
-    const isLocked = isLockedFactory(timeout);
 
     const convertEntryToLockRecord: ConvertEntryToLockRecordCb = entry => {
         return baseConvertEntryToLockRecord(entry, timeout);
@@ -69,24 +69,25 @@ export const createUseCases = (params: ICreateUseCasesParams): ICreateUseCasesRe
 
     const getLockRecordUseCase = new GetLockRecordUseCase({
         getManager: params.getManager,
+        getSecurity: params.getSecurity,
         convert: convertEntryToLockRecord
     });
 
     const isEntryLockedUseCase = new IsEntryLockedUseCase({
         getLockRecordUseCase,
-        isLocked,
         getIdentity: params.getIdentity
     });
 
     const getLockedEntryLockRecordUseCase = new GetLockedEntryLockRecordUseCase({
         getLockRecordUseCase,
-        isLocked,
         getIdentity: params.getIdentity
     });
 
     const lockEntryUseCase = new LockEntryUseCase({
         isEntryLockedUseCase,
         getManager: params.getManager,
+        getSecurity: params.getSecurity,
+        getIdentity: params.getIdentity,
         convert: convertEntryToLockRecord
     });
 
@@ -94,6 +95,7 @@ export const createUseCases = (params: ICreateUseCasesParams): ICreateUseCasesRe
         getLockRecordUseCase,
         lockEntryUseCase,
         getManager: params.getManager,
+        getSecurity: params.getSecurity,
         getIdentity: params.getIdentity,
         convert: convertEntryToLockRecord
     });
@@ -107,6 +109,7 @@ export const createUseCases = (params: ICreateUseCasesParams): ICreateUseCasesRe
         getLockRecordUseCase,
         kickOutCurrentUserUseCase,
         getManager: params.getManager,
+        getSecurity: params.getSecurity,
         getIdentity: params.getIdentity,
         hasRecordLockingAccess: params.hasRecordLockingAccess
     });
@@ -114,6 +117,7 @@ export const createUseCases = (params: ICreateUseCasesParams): ICreateUseCasesRe
     const unlockEntryRequestUseCase = new UnlockEntryRequestUseCase({
         getLockRecordUseCase,
         getIdentity: params.getIdentity,
+        getSecurity: params.getSecurity,
         getManager: params.getManager,
         convert: convertEntryToLockRecord
     });
diff --git a/packages/api-record-locking/src/utils/calculateExpiresOn.ts b/packages/api-record-locking/src/utils/calculateExpiresOn.ts
index 11c5d60330c..5ab969dd303 100644
--- a/packages/api-record-locking/src/utils/calculateExpiresOn.ts
+++ b/packages/api-record-locking/src/utils/calculateExpiresOn.ts
@@ -4,6 +4,9 @@ export const calculateExpiresOn = (
     input: Pick<IHeadlessCmsLockRecordParams, "savedOn">,
     timeout: number
 ): Date => {
+    if (!input.savedOn) {
+        throw new Error("Missing savedOn property.");
+    }
     const savedOn = new Date(input.savedOn);
 
     return new Date(savedOn.getTime() + timeout);
diff --git a/packages/api-record-locking/src/utils/convertEntryToLockRecord.ts b/packages/api-record-locking/src/utils/convertEntryToLockRecord.ts
index c20a5d3a6d6..afc020bc39b 100644
--- a/packages/api-record-locking/src/utils/convertEntryToLockRecord.ts
+++ b/packages/api-record-locking/src/utils/convertEntryToLockRecord.ts
@@ -128,4 +128,8 @@ export class HeadlessCmsLockRecord implements IRecordLockingLockRecord {
                 action.type === RecordLockingLockRecordActionType.denied
         );
     }
+
+    public isExpired(): boolean {
+        return this._expiresOn.getTime() < new Date().getTime();
+    }
 }
diff --git a/packages/api-record-locking/src/utils/getTimeout.ts b/packages/api-record-locking/src/utils/getTimeout.ts
index 8792a48ca6d..4a3b3e730ad 100644
--- a/packages/api-record-locking/src/utils/getTimeout.ts
+++ b/packages/api-record-locking/src/utils/getTimeout.ts
@@ -1,10 +1,14 @@
-const defaultTimeoutInSeconds = 1800;
+const minTimeoutInSeconds = 30;
+const defaultTimeoutInSeconds = 60;
 /**
  * Input is in seconds.
  * Output is milliseconds.
  */
 export const getTimeout = (input: number | undefined) => {
     if (input && input > 0) {
+        if (input < minTimeoutInSeconds) {
+            return minTimeoutInSeconds * 1000;
+        }
         return input * 1000;
     }
     const userDefined = process.env.WEBINY_RECORD_LOCK_TIMEOUT
diff --git a/packages/api-record-locking/src/utils/isLockedFactory.ts b/packages/api-record-locking/src/utils/isLockedFactory.ts
deleted file mode 100644
index 2acc8343330..00000000000
--- a/packages/api-record-locking/src/utils/isLockedFactory.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { IRecordLockingLockRecord } from "~/types";
-
-export interface IIsLocked {
-    (record?: Pick<IRecordLockingLockRecord, "lockedOn"> | null): boolean;
-}
-
-export const isLockedFactory = (timeout: number): IIsLocked => {
-    return record => {
-        if (!record || record.lockedOn instanceof Date === false) {
-            return false;
-        }
-        const now = new Date().getTime();
-        const lockedOn = record.lockedOn.getTime();
-        return lockedOn + timeout >= now;
-    };
-};
diff --git a/packages/api-security/src/createSecurity/createApiKeysMethods.ts b/packages/api-security/src/createSecurity/createApiKeysMethods.ts
index 35edc5653fd..9fc625fd02b 100644
--- a/packages/api-security/src/createSecurity/createApiKeysMethods.ts
+++ b/packages/api-security/src/createSecurity/createApiKeysMethods.ts
@@ -22,6 +22,16 @@ const apiKeyModelValidation = zod.object({
         .default([])
 });
 
+const createApiKeyModelValidation = apiKeyModelValidation.extend({
+    id: zod.string().optional(),
+    token: zod
+        .string()
+        .optional()
+        .refine(val => !val || val.startsWith("a"), {
+            message: 'Token must start with letter "a"'
+        })
+});
+
 const generateToken = (tokenLength = 48): string => {
     const token = crypto.randomBytes(Math.ceil(tokenLength / 2)).toString("hex");
 
@@ -126,7 +136,7 @@ export const createApiKeysMethods = ({
                 throw new NotAuthorizedError();
             }
 
-            const validation = apiKeyModelValidation.safeParse(data);
+            const validation = createApiKeyModelValidation.safeParse(data);
             if (!validation.success) {
                 throw createZodError(validation.error);
             }
diff --git a/packages/api-security/src/graphql/apiKey.gql.ts b/packages/api-security/src/graphql/apiKey.gql.ts
index 0c19d359fa0..3bb3ef99e42 100644
--- a/packages/api-security/src/graphql/apiKey.gql.ts
+++ b/packages/api-security/src/graphql/apiKey.gql.ts
@@ -15,8 +15,10 @@ export default new GraphQLSchemaPlugin<SecurityContext>({
         }
 
         input SecurityApiKeyInput {
+            id: ID
             name: String!
             description: String
+            token: String
             permissions: [JSON]!
         }
 
diff --git a/packages/api-serverless-cms/__tests__/handlers/helpers/core.ts b/packages/api-serverless-cms/__tests__/handlers/helpers/core.ts
index 24d0c29fcb3..5fec3039b91 100644
--- a/packages/api-serverless-cms/__tests__/handlers/helpers/core.ts
+++ b/packages/api-serverless-cms/__tests__/handlers/helpers/core.ts
@@ -155,7 +155,7 @@ export const createCore = (params: ICreateCoreParams): ICreateCoreResult => {
             createApwPageBuilderContext({
                 storageOperations: apwScheduleStorage.storageOperations
             }),
-            createAco(),
+            createAco({ documentClient }),
             createAuditLogs(),
             createRecordLocking(),
             createWebsockets(),
diff --git a/packages/api-serverless-cms/src/index.ts b/packages/api-serverless-cms/src/index.ts
index 43442a1e095..f55d5d3d462 100644
--- a/packages/api-serverless-cms/src/index.ts
+++ b/packages/api-serverless-cms/src/index.ts
@@ -61,6 +61,10 @@ export {
     createPrivateModelPlugin,
     createPrivateSingleEntryModelPlugin,
 
+    // Model fields (this is not a plugin factory, hence the missing `Plugin` suffix in the name).
+    createModelField,
+
     // Other.
+    createCmsGraphQLSchemaPlugin,
     createStorageTransformPlugin
 } from "@webiny/api-headless-cms";
diff --git a/packages/api-tenancy/src/graphql/types.gql.ts b/packages/api-tenancy/src/graphql/types.gql.ts
index 284c2e4c299..0631cc9f3d9 100644
--- a/packages/api-tenancy/src/graphql/types.gql.ts
+++ b/packages/api-tenancy/src/graphql/types.gql.ts
@@ -6,6 +6,7 @@ export default new GraphQLSchemaPlugin<TenancyContext>({
         type Tenant {
             id: ID!
             name: String!
+            image: JSON
             description: String!
             parent: ID
             tags: [String!]!
diff --git a/packages/api-tenancy/src/types.ts b/packages/api-tenancy/src/types.ts
index 9826b54c06e..16adc7d785f 100644
--- a/packages/api-tenancy/src/types.ts
+++ b/packages/api-tenancy/src/types.ts
@@ -15,6 +15,7 @@ export interface Tenant {
     id: string;
     name: string;
     description: string;
+    image?: string;
     tags: string[];
     status: string;
     settings: TenantSettings;
@@ -67,6 +68,7 @@ export interface CreateTenantInput {
     id?: string;
     name: string;
     description: string;
+    image?: string;
     tags: string[];
     status?: string;
     settings?: TenantSettings;
diff --git a/packages/api-tenant-manager/src/graphql/tenants.ts b/packages/api-tenant-manager/src/graphql/tenants.ts
index dd4e96189b6..4739b5e6e3d 100644
--- a/packages/api-tenant-manager/src/graphql/tenants.ts
+++ b/packages/api-tenant-manager/src/graphql/tenants.ts
@@ -21,6 +21,16 @@ export default new GraphQLSchemaPlugin<Context>({
             error: TenancyError
         }
 
+        input TmFileInput {
+            id: ID!
+            src: String!
+        }
+
+        type TmFile {
+            id: ID!
+            src: String!
+        }
+
         input GetTenantWhereInput {
             id: ID!
         }
@@ -34,8 +44,10 @@ export default new GraphQLSchemaPlugin<Context>({
         }
 
         input CreateTenantInput {
+            id: ID
             name: String!
             description: String!
+            image: JSON
             tags: [String!]!
             settings: TenantSettingsInput!
         }
@@ -43,6 +55,7 @@ export default new GraphQLSchemaPlugin<Context>({
         input UpdateTenantInput {
             name: String!
             description: String!
+            image: JSON
             tags: [String!]!
             settings: TenantSettingsInput!
         }
@@ -98,8 +111,8 @@ export default new GraphQLSchemaPlugin<Context>({
                     await checkPermissions(context);
                     const tenant = context.tenancy.getCurrentTenant();
                     const newTenant = await context.tenancy.createTenant({
-                        ...args.data,
                         id: mdbid(),
+                        ...args.data,
                         parent: tenant.id
                     });
 
diff --git a/packages/api/__tests__/Context.test.ts b/packages/api/__tests__/Context.test.ts
index 373711f4484..ec06e6fb256 100644
--- a/packages/api/__tests__/Context.test.ts
+++ b/packages/api/__tests__/Context.test.ts
@@ -1,7 +1,9 @@
-import { Context } from "~/index";
+import { CompressorPlugin, Context } from "~/index";
 import { Context as ContextInterface } from "~/types";
 import { Benchmark } from "~/Benchmark";
 import { BenchmarkPlugin } from "~/plugins/BenchmarkPlugin";
+import { GzipCompression, JsonpackCompression } from "@webiny/utils/compression";
+import { PluginsContainer } from "@webiny/plugins";
 
 interface DummyContextInterface extends ContextInterface {
     cms: any;
@@ -15,24 +17,34 @@ describe("Context", () => {
             WEBINY_VERSION: "test"
         });
 
+        const compressor = context.compressor;
+
         expect(context).toBeInstanceOf(Context);
         expect(context).toMatchObject({
             benchmark: expect.any(Benchmark),
             plugins: {
                 _byTypeCache: {},
-                plugins: {
-                    ["context.benchmark"]: new BenchmarkPlugin(context.benchmark)
-                }
+                plugins: {}
             },
             WEBINY_VERSION: "test",
             waiters: []
         });
-        expect(context.plugins).toEqual({
-            _byTypeCache: {},
-            plugins: {
-                ["context.benchmark"]: new BenchmarkPlugin(context.benchmark)
-            }
-        });
+
+        expect(context.plugins).toBeInstanceOf(PluginsContainer);
+
+        expect(context.plugins.all()[0].name).toEqual(new JsonpackCompression().name);
+        expect(context.plugins.all()[1].name).toEqual(new GzipCompression().name);
+        expect(context.plugins.all()[2].name).toEqual(new BenchmarkPlugin(context.benchmark).name);
+        expect(context.plugins.all()[3].name).toEqual(
+            new CompressorPlugin({
+                getCompressor() {
+                    return compressor;
+                }
+            }).name
+        );
+
+        expect(context.plugins.all()).toHaveLength(4);
+
         expect(context.WEBINY_VERSION).toEqual("test");
     });
 
diff --git a/packages/api/package.json b/packages/api/package.json
index 6277efbd906..1cd0a672f6a 100644
--- a/packages/api/package.json
+++ b/packages/api/package.json
@@ -13,7 +13,8 @@
   "license": "MIT",
   "dependencies": {
     "@webiny/aws-sdk": "0.0.0",
-    "@webiny/plugins": "0.0.0"
+    "@webiny/plugins": "0.0.0",
+    "@webiny/utils": "0.0.0"
   },
   "devDependencies": {
     "@webiny/project-utils": "0.0.0",
diff --git a/packages/api/src/Context.ts b/packages/api/src/Context.ts
index 6666deee8f7..2c4f36b61ea 100644
--- a/packages/api/src/Context.ts
+++ b/packages/api/src/Context.ts
@@ -1,8 +1,11 @@
-import { Context as ContextInterface } from "~/types";
+import type { Context as ContextInterface } from "~/types";
 import { PluginsContainer } from "@webiny/plugins";
-import { PluginCollection } from "@webiny/plugins/types";
+import type { PluginCollection } from "@webiny/plugins/types";
 import { Benchmark } from "~/Benchmark";
 import { BenchmarkPlugin } from "~/plugins/BenchmarkPlugin";
+import type { ICompressor } from "@webiny/utils/compression/Compressor";
+import { createDefaultCompressor } from "@webiny/utils/compression";
+import { CompressorPlugin } from "~/plugins/CompressorPlugin";
 
 interface Waiter {
     targets: string[];
@@ -30,6 +33,7 @@ export class Context implements ContextInterface {
     public readonly plugins: PluginsContainer;
     public readonly WEBINY_VERSION: string;
     public readonly benchmark: Benchmark;
+    public readonly compressor: ICompressor;
 
     private readonly waiters: Waiter[] = [];
 
@@ -42,7 +46,17 @@ export class Context implements ContextInterface {
          * Also, register the plugin to have benchmark accessible via plugins container.
          */
         this.benchmark = new Benchmark();
-        this.plugins.register(new BenchmarkPlugin(this.benchmark));
+        this.compressor = createDefaultCompressor({
+            plugins: this.plugins
+        });
+        this.plugins.register(
+            new BenchmarkPlugin(this.benchmark),
+            new CompressorPlugin({
+                getCompressor: () => {
+                    return this.compressor;
+                }
+            })
+        );
     }
 
     public getResult(): any {
diff --git a/packages/api/src/index.ts b/packages/api/src/index.ts
index f277182a7cb..d001f83b098 100644
--- a/packages/api/src/index.ts
+++ b/packages/api/src/index.ts
@@ -1,4 +1,5 @@
 export * from "./Context";
+export * from "./plugins/CompressorPlugin";
 export * from "./decorateContext";
 export * from "./createConditionalPluginFactory";
 export * from "./ServiceDiscovery";
diff --git a/packages/api/src/plugins/CompressorPlugin.ts b/packages/api/src/plugins/CompressorPlugin.ts
new file mode 100644
index 00000000000..16b5d9880be
--- /dev/null
+++ b/packages/api/src/plugins/CompressorPlugin.ts
@@ -0,0 +1,21 @@
+import { Plugin } from "@webiny/plugins/Plugin";
+import { ICompressor } from "@webiny/utils/compression/Compressor";
+
+export interface ICompressorPluginParams {
+    getCompressor(): ICompressor;
+}
+
+/**
+ * Should never be initialized outside the api package.
+ */
+export class CompressorPlugin extends Plugin {
+    public override readonly name: string = "context.compressor";
+    public static override type: string = "context.compressor";
+
+    public readonly getCompressor: () => ICompressor;
+
+    public constructor(params: ICompressorPluginParams) {
+        super();
+        this.getCompressor = params.getCompressor;
+    }
+}
diff --git a/packages/api/src/types.ts b/packages/api/src/types.ts
index e74ee3c0376..47e1774e7ce 100644
--- a/packages/api/src/types.ts
+++ b/packages/api/src/types.ts
@@ -1,4 +1,5 @@
 import { PluginsContainer } from "@webiny/plugins";
+import { ICompressor } from "@webiny/utils/compression/Compressor";
 
 export type GenericRecord<K extends PropertyKey = PropertyKey, V = any> = Record<K, V>;
 
@@ -82,6 +83,12 @@ export interface Context {
         obj: string[] | string,
         cb: (context: T) => void
     ) => void;
-
+    /**
+     * Benchmark instance to help determine possible bugs and slow code.
+     */
     benchmark: Benchmark;
+    /**
+     * Compressor instance to compress and decompress the data.
+     */
+    compressor: ICompressor;
 }
diff --git a/packages/api/tsconfig.build.json b/packages/api/tsconfig.build.json
index bcc9a624b5f..a5b396466b3 100644
--- a/packages/api/tsconfig.build.json
+++ b/packages/api/tsconfig.build.json
@@ -3,7 +3,8 @@
   "include": ["src"],
   "references": [
     { "path": "../aws-sdk/tsconfig.build.json" },
-    { "path": "../plugins/tsconfig.build.json" }
+    { "path": "../plugins/tsconfig.build.json" },
+    { "path": "../utils/tsconfig.build.json" }
   ],
   "compilerOptions": {
     "rootDir": "./src",
diff --git a/packages/api/tsconfig.json b/packages/api/tsconfig.json
index 47c4318ae5a..ad2093a419f 100644
--- a/packages/api/tsconfig.json
+++ b/packages/api/tsconfig.json
@@ -1,7 +1,7 @@
 {
   "extends": "../../tsconfig.json",
   "include": ["src", "__tests__"],
-  "references": [{ "path": "../aws-sdk" }, { "path": "../plugins" }],
+  "references": [{ "path": "../aws-sdk" }, { "path": "../plugins" }, { "path": "../utils" }],
   "compilerOptions": {
     "rootDirs": ["./src", "./__tests__"],
     "outDir": "./dist",
@@ -12,7 +12,9 @@
       "@webiny/aws-sdk/*": ["../aws-sdk/src/*"],
       "@webiny/aws-sdk": ["../aws-sdk/src"],
       "@webiny/plugins/*": ["../plugins/src/*"],
-      "@webiny/plugins": ["../plugins/src"]
+      "@webiny/plugins": ["../plugins/src"],
+      "@webiny/utils/*": ["../utils/src/*"],
+      "@webiny/utils": ["../utils/src"]
     },
     "baseUrl": "."
   }
diff --git a/packages/app-aco/package.json b/packages/app-aco/package.json
index 0cc6468f1eb..e275496ae56 100644
--- a/packages/app-aco/package.json
+++ b/packages/app-aco/package.json
@@ -12,11 +12,8 @@
   "license": "MIT",
   "dependencies": {
     "@apollo/react-hooks": "^3.1.5",
-    "@emotion/react": "11.10.8",
-    "@emotion/styled": "11.10.6",
-    "@material-design-icons/svg": "^0.14.13",
-    "@material-symbols/svg-400": "^0.4.1",
     "@minoru/react-dnd-treeview": "3.2.1",
+    "@webiny/admin-ui": "0.0.0",
     "@webiny/app": "0.0.0",
     "@webiny/app-admin": "0.0.0",
     "@webiny/app-headless-cms-common": "0.0.0",
@@ -24,10 +21,11 @@
     "@webiny/app-utils": "0.0.0",
     "@webiny/app-wcp": "0.0.0",
     "@webiny/form": "0.0.0",
+    "@webiny/icons": "0.0.0",
     "@webiny/plugins": "0.0.0",
     "@webiny/react-properties": "0.0.0",
     "@webiny/react-router": "0.0.0",
-    "@webiny/ui": "0.0.0",
+    "@webiny/shared-aco": "0.0.0",
     "@webiny/utils": "0.0.0",
     "@webiny/validation": "0.0.0",
     "dot-prop-immutable": "^2.1.1",
diff --git a/packages/app-aco/src/components/Actions/DeleteFolder/DeleteFolder.tsx b/packages/app-aco/src/components/Actions/DeleteFolder/DeleteFolder.tsx
index 10106eb0868..1341f160aa4 100644
--- a/packages/app-aco/src/components/Actions/DeleteFolder/DeleteFolder.tsx
+++ b/packages/app-aco/src/components/Actions/DeleteFolder/DeleteFolder.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback } from "react";
-import { ReactComponent as DeleteIcon } from "@material-design-icons/svg/outlined/delete.svg";
+import { ReactComponent as DeleteIcon } from "@webiny/icons/delete.svg";
 
 import { AcoConfig } from "~/config";
 import { useDeleteDialog } from "~/dialogs";
@@ -26,6 +26,7 @@ export const DeleteFolder = () => {
             label={"Delete"}
             onAction={onAction}
             data-testid={"aco.actions.folder.delete"}
+            className={"!wby-text-destructive-primary [&_svg]:wby-fill-destructive"}
         />
     );
 };
diff --git a/packages/app-aco/src/components/Actions/EditFolder/EditFolder.tsx b/packages/app-aco/src/components/Actions/EditFolder/EditFolder.tsx
index cb38cc82705..3d1055da887 100644
--- a/packages/app-aco/src/components/Actions/EditFolder/EditFolder.tsx
+++ b/packages/app-aco/src/components/Actions/EditFolder/EditFolder.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback } from "react";
-import { ReactComponent as Edit } from "@material-design-icons/svg/outlined/edit.svg";
+import { ReactComponent as Edit } from "@webiny/icons/edit.svg";
 
 import { AcoConfig } from "~/config";
 import { useEditDialog } from "~/dialogs";
diff --git a/packages/app-aco/src/components/Actions/SetFolderPemissions/SetFolderPermissions.tsx b/packages/app-aco/src/components/Actions/SetFolderPemissions/SetFolderPermissions.tsx
index b138a30f12e..0447a2f9a7a 100644
--- a/packages/app-aco/src/components/Actions/SetFolderPemissions/SetFolderPermissions.tsx
+++ b/packages/app-aco/src/components/Actions/SetFolderPemissions/SetFolderPermissions.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback } from "react";
-import { ReactComponent as Security } from "@material-design-icons/svg/outlined/add_moderator.svg";
+import { ReactComponent as Security } from "@webiny/icons/add_moderator.svg";
 
 import { AcoConfig } from "~/config";
 import { useSetPermissionsDialog } from "~/dialogs";
diff --git a/packages/app-aco/src/components/AdvancedSearch/AdvancedSearch.styled.tsx b/packages/app-aco/src/components/AdvancedSearch/AdvancedSearch.styled.tsx
deleted file mode 100644
index c7ca86d2d9f..00000000000
--- a/packages/app-aco/src/components/AdvancedSearch/AdvancedSearch.styled.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import styled from "@emotion/styled";
-
-export const AdvancedSearchContainer = styled("div")`
-    display: flex;
-    flex-direction: row-reverse;
-    justify-content: space-between;
-    align-items: center;
-    padding-right: 8px;
-`;
diff --git a/packages/app-aco/src/components/AdvancedSearch/AdvancedSearch.tsx b/packages/app-aco/src/components/AdvancedSearch/AdvancedSearch.tsx
index a2f87cd7455..9da73527b7e 100644
--- a/packages/app-aco/src/components/AdvancedSearch/AdvancedSearch.tsx
+++ b/packages/app-aco/src/components/AdvancedSearch/AdvancedSearch.tsx
@@ -1,29 +1,26 @@
 import React, { useEffect, useMemo } from "react";
 import { observer } from "mobx-react-lite";
+import { useToast } from "@webiny/admin-ui";
 
-import { Field, FieldMapper, FieldRaw, FilterDTO, FilterRepository } from "./domain";
+import { FieldDTOWithElement, FilterDTO, FilterRepository } from "./domain";
 
 import { AdvancedSearchPresenter } from "./AdvancedSearchPresenter";
 
 import { Button } from "./Button";
-import { Feedback } from "./Feedback";
 import { QueryManagerDialog } from "./QueryManagerDialog";
 import { QueryBuilderDrawer } from "./QueryBuilderDrawer";
 import { QuerySaverDialog } from "./QuerySaverDialog";
 import { SelectedFilter } from "./SelectedFilter";
 
-import { AdvancedSearchContainer } from "./AdvancedSearch.styled";
-import { useAcoConfig } from "~/config";
-
 export interface AdvancedSearchProps {
-    fields: FieldRaw[];
+    fields: FieldDTOWithElement[];
     repository: FilterRepository;
     onApplyFilter: (data: FilterDTO | null) => void;
 }
 
 export const AdvancedSearch = observer(
     ({ fields, repository, onApplyFilter }: AdvancedSearchProps) => {
-        const { advancedSearch } = useAcoConfig();
+        const { showToast } = useToast();
 
         const presenter = useMemo<AdvancedSearchPresenter>(() => {
             return new AdvancedSearchPresenter(repository);
@@ -59,21 +56,21 @@ export const AdvancedSearch = observer(
             onApplyFilter(filter);
         };
 
-        const fieldsWithRenderer = useMemo(() => {
-            const fieldDTOs = FieldMapper.toDTO(fields.map(field => Field.createFromRaw(field)));
-
-            return fieldDTOs.map(field => {
-                const config = advancedSearch.fieldRenderers.find(
-                    config => config.type === field.type
-                );
-                const element = config?.element ?? null;
-                return { ...field, element };
-            });
-        }, [fields, advancedSearch.fieldRenderers]);
+        useEffect(() => {
+            if (presenter.vm.feedbackVm.isOpen) {
+                showToast({
+                    title: presenter.vm.feedbackVm.message
+                });
+            }
+        }, [presenter.vm.feedbackVm.isOpen, presenter.vm.feedbackVm.message]);
 
         return (
             <>
-                <AdvancedSearchContainer>
+                <div
+                    className={
+                        "wby-flex wby-flex-row-reverse wby-justify-between wby-items-center wby-gap-sm"
+                    }
+                >
                     <Button onClick={() => presenter.openManager()} />
                     {presenter.vm.appliedFilter ? (
                         <SelectedFilter
@@ -82,7 +79,7 @@ export const AdvancedSearch = observer(
                             onDelete={unsetFilter}
                         />
                     ) : null}
-                </AdvancedSearchContainer>
+                </div>
                 <QueryManagerDialog
                     onClose={() => presenter.closeManager()}
                     onCreate={() => presenter.createFilter()}
@@ -96,7 +93,7 @@ export const AdvancedSearch = observer(
                 {presenter.vm.currentFilter ? (
                     <>
                         <QueryBuilderDrawer
-                            fields={fieldsWithRenderer}
+                            fields={fields}
                             onClose={() => presenter.closeBuilder()}
                             onSave={filter => presenter.saveFilter(filter)}
                             onApply={applyFilter}
@@ -112,10 +109,6 @@ export const AdvancedSearch = observer(
                         />
                     </>
                 ) : null}
-                <Feedback
-                    isOpen={presenter.vm.feedbackVm.isOpen}
-                    message={presenter.vm.feedbackVm.message}
-                />
             </>
         );
     }
diff --git a/packages/app-aco/src/components/AdvancedSearch/AdvancedSearchDebounceRender.tsx b/packages/app-aco/src/components/AdvancedSearch/AdvancedSearchDebounceRender.tsx
new file mode 100644
index 00000000000..16b14644f0d
--- /dev/null
+++ b/packages/app-aco/src/components/AdvancedSearch/AdvancedSearchDebounceRender.tsx
@@ -0,0 +1,41 @@
+import React from "react";
+import { useEffect, useMemo, useState } from "react";
+import debounce from "lodash/debounce";
+import { useAcoConfig } from "~/config";
+
+interface Props {
+    children?: React.ReactNode;
+}
+/**
+ * AdvancedSearchDebounceRenderer is a wrapper component that delays the rendering of its children
+ * until all necessary configurations are fully loaded.
+ *
+ * This component uses a debounced render approach to prevent excessive re-renders as configurations
+ * like `acoConfigs` are loaded. By deferring the
+ * initial render until these configurations are ready, we ensure that the children are rendered
+ * only when the app's environment is fully configured.
+ */
+export const AdvancedSearchDebounceRenderer = ({ children }: Props) => {
+    const [render, setRender] = useState(false);
+    const acoConfigs = useAcoConfig();
+
+    const debouncedRender = useMemo(() => {
+        return debounce(() => {
+            setRender(true);
+        }, 10);
+    }, [setRender]);
+
+    useEffect(() => {
+        if (render) {
+            return;
+        }
+
+        debouncedRender();
+
+        return () => {
+            debouncedRender.cancel();
+        };
+    }, [acoConfigs]);
+
+    return <>{render ? children : null}</>;
+};
diff --git a/packages/app-aco/src/components/AdvancedSearch/Button/Button.styled.tsx b/packages/app-aco/src/components/AdvancedSearch/Button/Button.styled.tsx
deleted file mode 100644
index 35739189f80..00000000000
--- a/packages/app-aco/src/components/AdvancedSearch/Button/Button.styled.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import styled from "@emotion/styled";
-import { ReactComponent as SettingsIcon } from "@material-design-icons/svg/round/tune.svg";
-
-export const Icon = styled(SettingsIcon)`
-    fill: var(--mdc-theme-primary);
-    width: 18px;
-    margin-left: 8px;
-`;
diff --git a/packages/app-aco/src/components/AdvancedSearch/Button/Button.tsx b/packages/app-aco/src/components/AdvancedSearch/Button/Button.tsx
index 7162dee78f9..bb8dd21c6d0 100644
--- a/packages/app-aco/src/components/AdvancedSearch/Button/Button.tsx
+++ b/packages/app-aco/src/components/AdvancedSearch/Button/Button.tsx
@@ -1,6 +1,6 @@
 import React from "react";
-import { ButtonDefault } from "@webiny/ui/Button";
-import { Icon } from "./Button.styled";
+import { Button as UIButton, Icon } from "@webiny/admin-ui";
+import { ReactComponent as SettingsIcon } from "@webiny/icons/tune.svg";
 
 export interface ButtonProps {
     onClick: () => void;
@@ -8,8 +8,11 @@ export interface ButtonProps {
 
 export const Button = ({ onClick }: ButtonProps) => {
     return (
-        <ButtonDefault onClick={onClick}>
-            Advanced search filter <Icon />
-        </ButtonDefault>
+        <UIButton
+            onClick={onClick}
+            text={"Advanced search filter"}
+            icon={<Icon label={"Advanced search filter"} icon={<SettingsIcon />} />}
+            variant={"secondary"}
+        />
     );
 };
diff --git a/packages/app-aco/src/components/AdvancedSearch/Feedback/Feedback.tsx b/packages/app-aco/src/components/AdvancedSearch/Feedback/Feedback.tsx
deleted file mode 100644
index e1c1e260625..00000000000
--- a/packages/app-aco/src/components/AdvancedSearch/Feedback/Feedback.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from "react";
-
-import { Snackbar } from "@webiny/ui/Snackbar";
-
-export interface FeedbackProps {
-    isOpen: boolean;
-    message: string;
-}
-
-export const Feedback = (props: FeedbackProps) => {
-    return <Snackbar open={props.isOpen} message={props.message} />;
-};
diff --git a/packages/app-aco/src/components/AdvancedSearch/Feedback/index.tsx b/packages/app-aco/src/components/AdvancedSearch/Feedback/index.tsx
deleted file mode 100644
index de84f73fa54..00000000000
--- a/packages/app-aco/src/components/AdvancedSearch/Feedback/index.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./Feedback";
diff --git a/packages/app-aco/src/components/AdvancedSearch/QueryBuilderDrawer/Footer.tsx b/packages/app-aco/src/components/AdvancedSearch/QueryBuilderDrawer/Footer.tsx
deleted file mode 100644
index 98265e12093..00000000000
--- a/packages/app-aco/src/components/AdvancedSearch/QueryBuilderDrawer/Footer.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import React from "react";
-
-import { FormAPI } from "@webiny/form";
-import { ButtonDefault, ButtonPrimary } from "@webiny/ui/Button";
-
-import { SimpleFormFooter } from "./QueryBuilderDrawer.styled";
-
-interface FooterProps {
-    onClose: () => void;
-    formRef: React.RefObject<FormAPI>;
-    onSave: () => void;
-}
-
-export const Footer = (props: FooterProps) => {
-    return (
-        <SimpleFormFooter>
-            <div>
-                <ButtonDefault onClick={props.onSave}>Save filter</ButtonDefault>
-            </div>
-            <div>
-                <ButtonDefault onClick={props.onClose}>Cancel</ButtonDefault>
-                <ButtonPrimary onClick={() => props.formRef.current?.submit()}>
-                    Apply filter
-                </ButtonPrimary>
-            </div>
-        </SimpleFormFooter>
-    );
-};
diff --git a/packages/app-aco/src/components/AdvancedSearch/QueryBuilderDrawer/Header.tsx b/packages/app-aco/src/components/AdvancedSearch/QueryBuilderDrawer/Header.tsx
deleted file mode 100644
index 7700c47704d..00000000000
--- a/packages/app-aco/src/components/AdvancedSearch/QueryBuilderDrawer/Header.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from "react";
-import { ReactComponent as CloseIcon } from "@material-design-icons/svg/outlined/close.svg";
-import { SimpleFormHeader } from "@webiny/app-admin/components/SimpleForm";
-
-import { CloseButton } from "./QueryBuilderDrawer.styled";
-
-interface HeaderProps {
-    onClose: () => void;
-}
-
-export const Header = ({ onClose }: HeaderProps) => {
-    return (
-        <SimpleFormHeader title={"Advanced search filter"}>
-            <CloseButton icon={<CloseIcon />} onClick={onClose} />
-        </SimpleFormHeader>
-    );
-};
diff --git a/packages/app-aco/src/components/AdvancedSearch/QueryBuilderDrawer/QueryBuilder/QueryBuilder.tsx b/packages/app-aco/src/components/AdvancedSearch/QueryBuilderDrawer/QueryBuilder/QueryBuilder.tsx
index b52c0ebb4af..39e2b48e57d 100644
--- a/packages/app-aco/src/components/AdvancedSearch/QueryBuilderDrawer/QueryBuilder/QueryBuilder.tsx
+++ b/packages/app-aco/src/components/AdvancedSearch/QueryBuilderDrawer/QueryBuilder/QueryBuilder.tsx
@@ -1,7 +1,7 @@
 import React, { Fragment, useEffect } from "react";
-import { ReactComponent as DeleteIcon } from "@material-design-icons/svg/outlined/delete_outline.svg";
+import { ReactComponent as DeleteIcon } from "@webiny/icons/delete_outline.svg";
 
-import { Accordion, AccordionItem } from "@webiny/ui/Accordion";
+import { Accordion } from "@webiny/admin-ui";
 import { Form, FormAPI, FormOnSubmit } from "@webiny/form";
 
 import { QueryBuilderFormData, QueryBuilderViewModel } from "../QueryBuilderDrawerPresenter";
@@ -16,7 +16,6 @@ import {
     OperationSelector
 } from "./components";
 
-import { AccordionItemInner, Content, FilterOperationContainer } from "./Querybuilder.styled";
 import { FieldDTOWithElement } from "~/components/AdvancedSearch/domain";
 
 export interface QueryBuilderProps {
@@ -42,84 +41,80 @@ export const QueryBuilder = (props: QueryBuilderProps) => {
     }, []);
 
     return (
-        <Form
-            ref={formRef}
-            data={props.vm.data}
-            onChange={props.onChange}
-            onSubmit={props.onSubmit}
-            invalidFields={props.vm.invalidFields}
-        >
-            {() => (
-                <Content>
-                    <Content.Panel>
+        <div className={"wby-py-lg"}>
+            <Form
+                ref={formRef}
+                data={props.vm.data}
+                onChange={props.onChange}
+                onSubmit={props.onSubmit}
+                invalidFields={props.vm.invalidFields}
+            >
+                {() => (
+                    <>
                         <Details name={props.vm.name} description={props.vm.description} />
-                        <Accordion elevation={1}>
+                        <Accordion background={"light"} variant={"container"}>
                             {props.vm.data.groups.map((group, groupIndex, groups) => (
-                                <AccordionItemInner key={`group-${groupIndex}`}>
-                                    <AccordionItem
-                                        title={group.title}
-                                        open={group.open}
-                                        actions={
-                                            <AccordionItem.Actions>
-                                                <AccordionItem.Element
-                                                    element={
-                                                        <FilterOperationContainer>
-                                                            <OperationSelector
-                                                                label={"Match all conditions"}
-                                                                name={`groups.${groupIndex}.operation`}
-                                                            />
-                                                        </FilterOperationContainer>
-                                                    }
+                                <Accordion.Item
+                                    className={"wby-relative"}
+                                    title={group.title}
+                                    defaultOpen={group.open}
+                                    key={`group-${groupIndex}`}
+                                    actions={
+                                        <>
+                                            <div className={"wby-mt-xxs wby-mr-xs-plus"}>
+                                                <OperationSelector
+                                                    label={"Match all conditions"}
+                                                    name={`groups.${groupIndex}.operation`}
                                                 />
-                                                <AccordionItem.Action
-                                                    icon={<DeleteIcon />}
-                                                    onClick={() => props.onDeleteGroup(groupIndex)}
-                                                    disabled={!group.canDelete}
-                                                />
-                                            </AccordionItem.Actions>
-                                        }
-                                    >
-                                        {group.filters.map((filter, filterIndex, filters) => (
-                                            <Fragment key={filterIndex}>
-                                                <Filter
-                                                    name={`groups.${groupIndex}.filters.${filterIndex}`}
-                                                    filter={filter}
-                                                    fields={props.fields}
-                                                    onFieldSelectChange={data =>
-                                                        props.onSetFilterFieldData(
-                                                            groupIndex,
-                                                            filterIndex,
-                                                            data
-                                                        )
-                                                    }
-                                                    onDelete={() => {
-                                                        props.onDeleteFilterFromGroup(
-                                                            groupIndex,
-                                                            filterIndex
-                                                        );
-                                                    }}
-                                                />
-                                                <FilterOperationLabel
-                                                    show={filters.length !== filterIndex + 1}
-                                                    operation={group.operation}
-                                                />
-                                            </Fragment>
-                                        ))}
-                                        <AddFilter
-                                            onClick={() => props.onAddNewFilterToGroup(groupIndex)}
-                                        />
-                                    </AccordionItem>
+                                            </div>
+                                            <Accordion.Item.Action
+                                                icon={<DeleteIcon />}
+                                                onClick={() => props.onDeleteGroup(groupIndex)}
+                                                disabled={!group.canDelete}
+                                            />
+                                        </>
+                                    }
+                                >
+                                    {group.filters.map((filter, filterIndex, filters) => (
+                                        <Fragment key={filterIndex}>
+                                            <Filter
+                                                name={`groups.${groupIndex}.filters.${filterIndex}`}
+                                                filter={filter}
+                                                fields={props.fields}
+                                                onFieldSelectChange={data =>
+                                                    props.onSetFilterFieldData(
+                                                        groupIndex,
+                                                        filterIndex,
+                                                        data
+                                                    )
+                                                }
+                                                onDelete={() => {
+                                                    props.onDeleteFilterFromGroup(
+                                                        groupIndex,
+                                                        filterIndex
+                                                    );
+                                                }}
+                                            />
+                                            <FilterOperationLabel
+                                                show={filters.length !== filterIndex + 1}
+                                                operation={group.operation}
+                                            />
+                                        </Fragment>
+                                    ))}
+                                    <AddFilter
+                                        onClick={() => props.onAddNewFilterToGroup(groupIndex)}
+                                    />
                                     <GroupOperationLabel
                                         show={groups.length !== groupIndex + 1}
                                         operation={props.vm.data.operation}
                                     />
-                                </AccordionItemInner>
+                                </Accordion.Item>
                             ))}
                         </Accordion>
                         <AddGroup onClick={() => props.onAddGroup()} />
-                    </Content.Panel>
-                </Content>
-            )}
-        </Form>
+                    </>
+                )}
+            </Form>
+        </div>
     );
 };
diff --git a/packages/app-aco/src/components/AdvancedSearch/QueryBuilderDrawer/QueryBuilder/Querybuilder.styled.tsx b/packages/app-aco/src/components/AdvancedSearch/QueryBuilderDrawer/QueryBuilder/Querybuilder.styled.tsx
deleted file mode 100644
index 246289f19e9..00000000000
--- a/packages/app-aco/src/components/AdvancedSearch/QueryBuilderDrawer/QueryBuilder/Querybuilder.styled.tsx
+++ /dev/null
@@ -1,108 +0,0 @@
-import React from "react";
-import styled from "@emotion/styled";
-import { ReactComponent as AddIcon } from "@material-design-icons/svg/round/add.svg";
-import { ReactComponent as SavedSearchIcon } from "@material-design-icons/svg/outlined/saved_search.svg";
-import { Typography } from "@webiny/ui/Typography";
-
-interface CellInnerProps {
-    align: "left" | "center" | "right";
-}
-
-export const CellInner = styled(`div`)<CellInnerProps>`
-    text-align: ${props => props.align || "left"};
-`;
-
-export const AccordionItemInner = styled.div`
-    position: relative;
-`;
-
-export const FilterContainer = styled.div`
-    .mdc-layout-grid {
-        padding: 4px;
-    }
-`;
-
-export const DetailsContainer = styled.div`
-    margin-bottom: 24px;
-`;
-
-export const FilterDetailsIcon = styled(SavedSearchIcon)`
-    width: 48px;
-    height: auto;
-    fill: var(--mdc-theme-text-icon-on-background);
-`;
-
-export const FilterDetailsDetails = styled(Typography)`
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-`;
-
-export const FilterOperationContainer = styled.div`
-    margin-right: 8px;
-`;
-
-export const GroupOperationLabelContainer = styled.span`
-    background: #fff;
-    border: 1px solid var(--mdc-theme-background);
-    border-radius: 24px;
-    width: 56px;
-    height: 28px;
-    line-height: 28px;
-    position: absolute;
-    bottom: -13px;
-    left: 50%;
-    margin-left: -28px;
-    z-index: 10;
-    text-align: center;
-`;
-
-export const FilterOperationLabelContainer = styled.div`
-    padding: 12px 0;
-    text-align: center;
-`;
-
-export const AddFilterInner = styled.div`
-    padding: 16px 0 16px;
-    text-align: center;
-`;
-
-export const AddGroupInner = styled.div`
-    padding: 24px 0 0;
-    text-align: center;
-`;
-
-export const ButtonIcon = styled(AddIcon)`
-    fill: var(--mdc-theme-primary);
-    width: 18px;
-    margin-right: 8px;
-`;
-
-const Horizontal = styled.div`
-    display: flex;
-    height: calc(100vh - 166px);
-`;
-
-const Grow = styled.div`
-    flex: 1;
-    overflow: scroll;
-    padding: 24px;
-`;
-
-interface ContentProps {
-    children: React.ReactNode;
-}
-
-export const Content = ({ children }: ContentProps) => {
-    return <Horizontal>{children}</Horizontal>;
-};
-
-interface PanelProps {
-    children: React.ReactNode;
-}
-
-const Panel = ({ children }: PanelProps) => {
-    return <Grow data-role={"panel"}>{children}</Grow>;
-};
-
-Content.Panel = Panel;
diff --git a/packages/app-aco/src/components/AdvancedSearch/QueryBuilderDrawer/QueryBuilder/components/Details.tsx b/packages/app-aco/src/components/AdvancedSearch/QueryBuilderDrawer/QueryBuilder/components/Details.tsx
index 335dfde01c4..8eae451f699 100644
--- a/packages/app-aco/src/components/AdvancedSearch/QueryBuilderDrawer/QueryBuilder/components/Details.tsx
+++ b/packages/app-aco/src/components/AdvancedSearch/QueryBuilderDrawer/QueryBuilder/components/Details.tsx
@@ -1,17 +1,7 @@
 import React from "react";
-
-import { Elevation } from "@webiny/ui/Elevation";
-import { Cell, Grid } from "@webiny/ui/Grid";
-
+import { Grid, Heading, Text } from "@webiny/admin-ui";
 import { OperationSelector } from "./OperationSelector";
 
-import {
-    CellInner,
-    DetailsContainer,
-    FilterDetailsDetails,
-    FilterDetailsIcon
-} from "../Querybuilder.styled";
-
 export interface DetailsProps {
     name: string;
     description?: string;
@@ -19,36 +9,30 @@ export interface DetailsProps {
 
 export const Details = (props: DetailsProps) => {
     return (
-        <DetailsContainer>
-            <Elevation z={0}>
-                <Grid>
-                    <Cell span={1} align={"middle"}>
-                        <CellInner align={"center"}>
-                            <FilterDetailsIcon />
-                        </CellInner>
-                    </Cell>
-                    <Cell span={8} align={"middle"}>
-                        <CellInner align={"left"}>
-                            <FilterDetailsDetails use={"headline5"} tag={"h3"}>
-                                {props.name}
-                            </FilterDetailsDetails>
+        <div className="wby-mb-lg">
+            <Grid>
+                <Grid.Column span={9}>
+                    <div className={"wby-flex wby-items-start wby-gap-md"}>
+                        <div className={"wby-text-left wby-text-neutral-primary"}>
+                            <Heading level={5}>{props.name}</Heading>
                             {props.description && (
-                                <FilterDetailsDetails use={"body1"} tag={"p"}>
+                                <Text
+                                    as={"div"}
+                                    size={"sm"}
+                                    className={"wby-mt-xs wby-text-neutral-strong"}
+                                >
                                     {props.description}
-                                </FilterDetailsDetails>
+                                </Text>
                             )}
-                        </CellInner>
-                    </Cell>
-                    <Cell span={3} align={"middle"}>
-                        <CellInner align={"right"}>
-                            <OperationSelector
-                                name={"operation"}
-                                label={"Match all filter groups"}
-                            />
-                        </CellInner>
-                    </Cell>
-                </Grid>
-            </Elevation>
-        </DetailsContainer>
+                        </div>
+                    </div>
+                </Grid.Column>
+                <Grid.Column span={3} align={"middle"}>
+                    <div className={"wby-text-right"}>
+                        <OperationSelector name={"operation"} label={"Match all filter groups"} />
+                    </div>
+                </Grid.Column>
+            </Grid>
+        </div>
     );
 };
diff --git a/packages/app-aco/src/components/AdvancedSearch/QueryBuilderDrawer/QueryBuilder/components/Filter.tsx b/packages/app-aco/src/components/AdvancedSearch/QueryBuilderDrawer/QueryBuilder/components/Filter.tsx
index 85628e2b39e..5e60429c3ac 100644
--- a/packages/app-aco/src/components/AdvancedSearch/QueryBuilderDrawer/QueryBuilder/components/Filter.tsx
+++ b/packages/app-aco/src/components/AdvancedSearch/QueryBuilderDrawer/QueryBuilder/components/Filter.tsx
@@ -1,16 +1,13 @@
 import React from "react";
 import { Bind } from "@webiny/form";
-import { AutoComplete } from "@webiny/ui/AutoComplete";
-import { Cell, Grid } from "@webiny/ui/Grid";
-import { Select } from "@webiny/ui/Select";
+
+import { AutoComplete, Grid, Select } from "@webiny/admin-ui";
 
 import { InputField } from "./InputField";
 import { RemoveFilter } from "./controls";
 
 import { FieldDTOWithElement, FilterGroupFilterDTO } from "../../../domain";
 
-import { CellInner, FilterContainer } from "../Querybuilder.styled";
-
 interface FilterProps {
     name: string;
     filter: FilterGroupFilterDTO & { canDelete: boolean };
@@ -21,74 +18,74 @@ interface FilterProps {
 
 export const Filter = ({ name, onDelete, onFieldSelectChange, fields, filter }: FilterProps) => {
     return (
-        <FilterContainer>
-            <Grid>
-                <Cell span={4}>
-                    <CellInner align={"left"}>
-                        <Bind name={`${name}.field`}>
-                            {({ value, validation }) => {
-                                const options = fields.map(field => ({
-                                    id: field.value,
-                                    name: field.label
-                                }));
+        <Grid>
+            <Grid.Column span={4}>
+                <div className={"wby-text-left"}>
+                    <Bind name={`${name}.field`}>
+                        {({ value, validation }) => {
+                            const options = fields.map(field => ({
+                                value: field.value,
+                                label: field.label
+                            }));
 
-                                return (
-                                    <AutoComplete
-                                        label={"Field"}
-                                        options={options}
-                                        value={options.find(option => option.id === value)}
-                                        onChange={selected => {
-                                            /**
-                                             * Update the selected value only if it's different from the current value.
-                                             * When the value is populated from data, onChange might trigger re-rendering of the form and clear related fields.
-                                             */
-                                            if (selected !== value) {
-                                                onFieldSelectChange(selected);
-                                            }
-                                        }}
-                                        validation={validation}
-                                    />
-                                );
-                            }}
-                        </Bind>
-                    </CellInner>
-                </Cell>
-                <Cell span={3}>
-                    <CellInner align={"left"}>
-                        {filter.field && (
-                            <Bind name={`${name}.condition`}>
-                                {({ value, onChange, validation }) => (
-                                    <Select
-                                        label={"Condition"}
-                                        options={
-                                            fields.find(field => field.value === filter.field)
-                                                ?.conditions || []
+                            return (
+                                <AutoComplete
+                                    label={"Field"}
+                                    options={options}
+                                    value={value}
+                                    onValueChange={selected => {
+                                        /**
+                                         * Update the selected value only if it's different from the current value.
+                                         * When the value is populated from data, onChange might trigger re-rendering of the form and clear related fields.
+                                         */
+                                        if (selected !== value) {
+                                            onFieldSelectChange(selected);
                                         }
-                                        value={value}
-                                        onChange={onChange}
-                                        validation={validation}
-                                    />
-                                )}
-                            </Bind>
-                        )}
-                    </CellInner>
-                </Cell>
-                <Cell span={4} align={"middle"}>
-                    <CellInner align={"left"}>
-                        {filter.condition && (
-                            <InputField
-                                name={`${name}.value`}
-                                field={fields.find(field => field.value === filter.field)}
-                            />
-                        )}
-                    </CellInner>
-                </Cell>
-                <Cell span={1} align={"middle"}>
-                    <CellInner align={"center"}>
-                        <RemoveFilter onClick={onDelete} disabled={!filter.canDelete} />
-                    </CellInner>
-                </Cell>
-            </Grid>
-        </FilterContainer>
+                                    }}
+                                    validation={validation}
+                                    size={"lg"}
+                                />
+                            );
+                        }}
+                    </Bind>
+                </div>
+            </Grid.Column>
+            <Grid.Column span={3}>
+                <div className={"wby-text-left"}>
+                    {filter.field && (
+                        <Bind name={`${name}.condition`}>
+                            {({ value, onChange, validation }) => (
+                                <Select
+                                    label={"Condition"}
+                                    options={
+                                        fields.find(field => field.value === filter.field)
+                                            ?.conditions || []
+                                    }
+                                    value={value}
+                                    onChange={onChange}
+                                    validation={validation}
+                                    size={"lg"}
+                                />
+                            )}
+                        </Bind>
+                    )}
+                </div>
+            </Grid.Column>
+            <Grid.Column span={4}>
+                <div className={"wby-text-left"}>
+                    {filter.condition && (
+                        <InputField
+                            name={`${name}.value`}
+                            field={fields.find(field => field.value === filter.field)}
+                        />
+                    )}
+                </div>
+            </Grid.Column>
+            <Grid.Column span={1}>
+                <div className={"wby-flex wby-justify-center wby-items-end wby-h-full"}>
+                    <RemoveFilter onClick={onDelete} disabled={!filter.canDelete} />
+                </div>
+            </Grid.Column>
+        </Grid>
     );
 };
diff --git a/packages/app-aco/src/components/AdvancedSearch/QueryBuilderDrawer/QueryBuilder/components/FilterOperationLabel.tsx b/packages/app-aco/src/components/AdvancedSearch/QueryBuilderDrawer/QueryBuilder/components/FilterOperationLabel.tsx
index c32f5cb2885..d2a01ebe667 100644
--- a/packages/app-aco/src/components/AdvancedSearch/QueryBuilderDrawer/QueryBuilder/components/FilterOperationLabel.tsx
+++ b/packages/app-aco/src/components/AdvancedSearch/QueryBuilderDrawer/QueryBuilder/components/FilterOperationLabel.tsx
@@ -1,8 +1,5 @@
 import React from "react";
-
-import { Typography } from "@webiny/ui/Typography";
-
-import { FilterOperationLabelContainer } from "../Querybuilder.styled";
+import { Text } from "@webiny/admin-ui";
 
 interface FilterOperationLabelProps {
     operation: string;
@@ -14,8 +11,8 @@ export const FilterOperationLabel = ({ operation, show }: FilterOperationLabelPr
     }
 
     return (
-        <FilterOperationLabelContainer>
-            <Typography use={"caption"}>{operation}</Typography>
-        </FilterOperationLabelContainer>
+        <div className={"wby-pt-sm-plus wby-text-center"}>
+            <Text size={"sm"}>{operation}</Text>
+        </div>
     );
 };
diff --git a/packages/app-aco/src/components/AdvancedSearch/QueryBuilderDrawer/QueryBuilder/components/GroupOperationLabel.tsx b/packages/app-aco/src/components/AdvancedSearch/QueryBuilderDrawer/QueryBuilder/components/GroupOperationLabel.tsx
index 174d8a53038..d77d5454553 100644
--- a/packages/app-aco/src/components/AdvancedSearch/QueryBuilderDrawer/QueryBuilder/components/GroupOperationLabel.tsx
+++ b/packages/app-aco/src/components/AdvancedSearch/QueryBuilderDrawer/QueryBuilder/components/GroupOperationLabel.tsx
@@ -1,8 +1,5 @@
 import React from "react";
-
-import { Typography } from "@webiny/ui/Typography";
-
-import { GroupOperationLabelContainer } from "../Querybuilder.styled";
+import { cn, Text } from "@webiny/admin-ui";
 
 interface GroupOperationLabelProps {
     operation: string;
@@ -14,10 +11,14 @@ export const GroupOperationLabel = ({ operation, show }: GroupOperationLabelProp
     }
 
     return (
-        <GroupOperationLabelContainer>
-            <Typography use={"subtitle2"} tag={"span"}>
-                {operation}
-            </Typography>
-        </GroupOperationLabelContainer>
+        <span
+            className={cn([
+                "wby-bg-neutral-base wby-rounded-xxl wby-px-md wby-py-xs",
+                "wby-w-[56px] wby-h-[28px]",
+                "wby-absolute -wby-bottom-[15px] wby-left-1/2 -wby-ml-[46px] wby-z-50"
+            ])}
+        >
+            <Text size={"sm"}>{operation}</Text>
+        </span>
     );
 };
diff --git a/packages/app-aco/src/components/AdvancedSearch/QueryBuilderDrawer/QueryBuilder/components/InputField.tsx b/packages/app-aco/src/components/AdvancedSearch/QueryBuilderDrawer/QueryBuilder/components/InputField.tsx
index 90f6a569df9..9b2818313c7 100644
--- a/packages/app-aco/src/components/AdvancedSearch/QueryBuilderDrawer/QueryBuilder/components/InputField.tsx
+++ b/packages/app-aco/src/components/AdvancedSearch/QueryBuilderDrawer/QueryBuilder/components/InputField.tsx
@@ -1,6 +1,5 @@
 import React from "react";
-
-import { Typography } from "@webiny/ui/Typography";
+import { Text } from "@webiny/admin-ui";
 import { InputFieldProvider } from "~/components";
 import { FieldDTOWithElement } from "~/components/AdvancedSearch/domain";
 
@@ -18,9 +17,9 @@ export const InputField = ({ field, name }: InputFieldProps) => {
 
     if (!element) {
         return (
-            <Typography
-                use={"body2"}
-            >{`Cannot render "${field.type}" field: missing field renderer.`}</Typography>
+            <Text
+                size={"sm"}
+            >{`Cannot render "${field.type}" field: missing field renderer.`}</Text>
         );
     }
 
diff --git a/packages/app-aco/src/components/AdvancedSearch/QueryBuilderDrawer/QueryBuilder/components/OperationSelector.tsx b/packages/app-aco/src/components/AdvancedSearch/QueryBuilderDrawer/QueryBuilder/components/OperationSelector.tsx
index ea534f486ab..a3d5c8359fb 100644
--- a/packages/app-aco/src/components/AdvancedSearch/QueryBuilderDrawer/QueryBuilder/components/OperationSelector.tsx
+++ b/packages/app-aco/src/components/AdvancedSearch/QueryBuilderDrawer/QueryBuilder/components/OperationSelector.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 
 import { Bind } from "@webiny/form";
-import { Switch } from "@webiny/ui/Switch";
+import { Switch } from "@webiny/admin-ui";
 import { Operation } from "~/components/AdvancedSearch/domain";
 
 interface OperationSelectorProps {
@@ -27,7 +27,7 @@ export const OperationSelector = ({ label, name }: OperationSelectorProps) => {
             {({ value, onChange }) => (
                 <Switch
                     label={label}
-                    value={getValue(value)}
+                    checked={getValue(value)}
                     onChange={value => onChange(setValue(value))}
                 />
             )}
diff --git a/packages/app-aco/src/components/AdvancedSearch/QueryBuilderDrawer/QueryBuilder/components/controls/AddFilter.tsx b/packages/app-aco/src/components/AdvancedSearch/QueryBuilderDrawer/QueryBuilder/components/controls/AddFilter.tsx
index 131bfa67e1a..dfcc25b3f73 100644
--- a/packages/app-aco/src/components/AdvancedSearch/QueryBuilderDrawer/QueryBuilder/components/controls/AddFilter.tsx
+++ b/packages/app-aco/src/components/AdvancedSearch/QueryBuilderDrawer/QueryBuilder/components/controls/AddFilter.tsx
@@ -1,10 +1,6 @@
 import React from "react";
-
-import { ReactComponent as AddIcon } from "@material-design-icons/svg/round/add_circle_outline.svg";
-import { IconButton } from "@webiny/ui/Button";
-import { Tooltip } from "@webiny/ui/Tooltip";
-
-import { AddFilterInner } from "../../Querybuilder.styled";
+import { ReactComponent as AddIcon } from "@webiny/icons/add_circle_outline.svg";
+import { IconButton, Tooltip } from "@webiny/admin-ui";
 
 interface AddFilterProps {
     onClick: () => void;
@@ -12,10 +8,12 @@ interface AddFilterProps {
 
 export const AddFilter = ({ onClick }: AddFilterProps) => {
     return (
-        <AddFilterInner>
-            <Tooltip content={"Add new condition"} placement={"bottom"}>
-                <IconButton label={"Add new condition"} icon={<AddIcon />} onClick={onClick} />
-            </Tooltip>
-        </AddFilterInner>
+        <div className={"wby-my-md wby-text-center"}>
+            <Tooltip
+                content={"Add new condition"}
+                side={"bottom"}
+                trigger={<IconButton icon={<AddIcon />} onClick={onClick} variant={"ghost"} />}
+            />
+        </div>
     );
 };
diff --git a/packages/app-aco/src/components/AdvancedSearch/QueryBuilderDrawer/QueryBuilder/components/controls/AddGroup.tsx b/packages/app-aco/src/components/AdvancedSearch/QueryBuilderDrawer/QueryBuilder/components/controls/AddGroup.tsx
index 9064b955566..366817c1082 100644
--- a/packages/app-aco/src/components/AdvancedSearch/QueryBuilderDrawer/QueryBuilder/components/controls/AddGroup.tsx
+++ b/packages/app-aco/src/components/AdvancedSearch/QueryBuilderDrawer/QueryBuilder/components/controls/AddGroup.tsx
@@ -1,6 +1,6 @@
 import React from "react";
-import { ButtonDefault } from "@webiny/ui/Button";
-import { AddGroupInner, ButtonIcon } from "../../Querybuilder.styled";
+import { Button } from "@webiny/admin-ui";
+import { ReactComponent as AddIcon } from "@webiny/icons/add.svg";
 
 interface AddGroupProps {
     onClick: () => void;
@@ -8,10 +8,13 @@ interface AddGroupProps {
 
 export const AddGroup = ({ onClick }: AddGroupProps) => {
     return (
-        <AddGroupInner>
-            <ButtonDefault onClick={onClick}>
-                <ButtonIcon /> {"Add new filter group"}
-            </ButtonDefault>
-        </AddGroupInner>
+        <div className={"wby-mt-lg wby-text-center"}>
+            <Button
+                onClick={onClick}
+                text={"Add new filter group"}
+                icon={<AddIcon />}
+                variant={"secondary"}
+            />
+        </div>
     );
 };
diff --git a/packages/app-aco/src/components/AdvancedSearch/QueryBuilderDrawer/QueryBuilder/components/controls/RemoveFilter.tsx b/packages/app-aco/src/components/AdvancedSearch/QueryBuilderDrawer/QueryBuilder/components/controls/RemoveFilter.tsx
index f6267580903..a3ee787e40b 100644
--- a/packages/app-aco/src/components/AdvancedSearch/QueryBuilderDrawer/QueryBuilder/components/controls/RemoveFilter.tsx
+++ b/packages/app-aco/src/components/AdvancedSearch/QueryBuilderDrawer/QueryBuilder/components/controls/RemoveFilter.tsx
@@ -1,8 +1,6 @@
 import React from "react";
-
-import { ReactComponent as DeleteIcon } from "@material-design-icons/svg/outlined/delete.svg";
-import { IconButton } from "@webiny/ui/Button";
-import { Tooltip } from "@webiny/ui/Tooltip";
+import { ReactComponent as DeleteIcon } from "@webiny/icons/delete.svg";
+import { IconButton, Tooltip } from "@webiny/admin-ui";
 
 interface RemoveFilterProps {
     onClick: () => void;
@@ -11,13 +9,18 @@ interface RemoveFilterProps {
 
 export const RemoveFilter = ({ onClick, disabled }: RemoveFilterProps) => {
     return (
-        <Tooltip content={"Remove filter"} placement={"bottom"}>
-            <IconButton
-                label={"Remove filter"}
-                icon={<DeleteIcon />}
-                onClick={onClick}
-                disabled={disabled}
-            />
-        </Tooltip>
+        <Tooltip
+            content={"Remove filter"}
+            side={"bottom"}
+            trigger={
+                <IconButton
+                    icon={<DeleteIcon />}
+                    onClick={onClick}
+                    variant={"ghost"}
+                    size={"lg"}
+                    disabled={disabled}
+                />
+            }
+        />
     );
 };
diff --git a/packages/app-aco/src/components/AdvancedSearch/QueryBuilderDrawer/QueryBuilderDrawer.styled.tsx b/packages/app-aco/src/components/AdvancedSearch/QueryBuilderDrawer/QueryBuilderDrawer.styled.tsx
deleted file mode 100644
index a976d074279..00000000000
--- a/packages/app-aco/src/components/AdvancedSearch/QueryBuilderDrawer/QueryBuilderDrawer.styled.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import styled from "@emotion/styled";
-
-import { SimpleFormFooter as BaseSimpleFormFooter } from "@webiny/app-admin/components/SimpleForm";
-import { IconButton } from "@webiny/ui/Button";
-import { DrawerRight } from "@webiny/ui/Drawer";
-
-export const CloseButton = styled(IconButton)`
-    position: absolute;
-    top: 15px;
-`;
-
-export const DrawerContainer = styled(DrawerRight)`
-    width: 1000px;
-
-    .mdc-deprecated-list-item {
-        margin: 0 0;
-        padding: 0 0;
-        font-size: 1rem;
-
-        .webiny-ui-accordion-item__content {
-            border: 0 !important;
-        }
-
-        &:nth-of-type(1) {
-            margin-top: 0;
-        }
-
-        .mdc-deprecated-list-item__meta {
-            margin-left: auto !important;
-            margin-right: 0 !important;
-        }
-    }
-`;
-
-export const SimpleFormFooter = styled(BaseSimpleFormFooter)`
-    justify-content: space-between;
-`;
diff --git a/packages/app-aco/src/components/AdvancedSearch/QueryBuilderDrawer/QueryBuilderDrawer.tsx b/packages/app-aco/src/components/AdvancedSearch/QueryBuilderDrawer/QueryBuilderDrawer.tsx
index 39be5412d5d..44f893649b7 100644
--- a/packages/app-aco/src/components/AdvancedSearch/QueryBuilderDrawer/QueryBuilderDrawer.tsx
+++ b/packages/app-aco/src/components/AdvancedSearch/QueryBuilderDrawer/QueryBuilderDrawer.tsx
@@ -1,16 +1,13 @@
 import React, { useEffect, useMemo, useRef } from "react";
 import { observer } from "mobx-react-lite";
+import { Button, Drawer } from "@webiny/admin-ui";
 import { FormAPI } from "@webiny/form";
-import { DrawerContent } from "@webiny/ui/Drawer";
 // @ts-expect-error
 import { useHotkeys } from "react-hotkeyz";
-import { Footer } from "./Footer";
-import { Header } from "./Header";
 import { QueryBuilder } from "./QueryBuilder";
 
 import { FieldDTOWithElement, FilterDTO } from "~/components/AdvancedSearch/domain";
 
-import { DrawerContainer } from "./QueryBuilderDrawer.styled";
 import { QueryBuilderDrawerPresenter, QueryBuilderFormData } from "./QueryBuilderDrawerPresenter";
 
 interface QueryBuilderDrawerProps {
@@ -71,27 +68,42 @@ export const QueryBuilderDrawer = observer(({ filter, ...props }: QueryBuilderDr
     const ref = useRef<FormAPI | null>(null);
 
     return (
-        <DrawerContainer modal open={props.vm.isOpen} onClose={props.onClose}>
-            <DrawerContent>
-                <Header onClose={props.onClose} />
-                <QueryBuilder
-                    onForm={form => (ref.current = form)}
-                    onSubmit={onApply}
-                    onChange={data => onChange(data)}
-                    onDeleteGroup={groupIndex => presenter.deleteGroup(groupIndex)}
-                    onSetFilterFieldData={(groupIndex, filterIndex, data) =>
-                        presenter.setFilterFieldData(groupIndex, filterIndex, data)
-                    }
-                    onDeleteFilterFromGroup={(groupIndex, filterIndex) =>
-                        presenter.deleteFilterFromGroup(groupIndex, filterIndex)
-                    }
-                    onAddNewFilterToGroup={groupIndex => presenter.addNewFilterToGroup(groupIndex)}
-                    onAddGroup={() => presenter.addGroup()}
-                    fields={props.fields}
-                    vm={presenter.vm}
-                />
-                <Footer formRef={ref} onClose={props.onClose} onSave={onSave} />
-            </DrawerContent>
-        </DrawerContainer>
+        <Drawer
+            open={props.vm.isOpen}
+            onClose={props.onClose}
+            modal={true}
+            width={1000}
+            title={"Advanced search filter"}
+            description={"Create a filter to search for specific content."}
+            info={<Button onClick={onSave} text={"Save filter"} variant={"secondary"} />}
+            actions={
+                <>
+                    <Drawer.CancelButton text={"Cancel"} />
+                    <Drawer.ConfirmButton
+                        onClick={() => ref.current?.submit()}
+                        text={"Apply filter"}
+                    />
+                </>
+            }
+            headerSeparator={true}
+            footerSeparator={true}
+        >
+            <QueryBuilder
+                onForm={form => (ref.current = form)}
+                onSubmit={onApply}
+                onChange={data => onChange(data)}
+                onDeleteGroup={groupIndex => presenter.deleteGroup(groupIndex)}
+                onSetFilterFieldData={(groupIndex, filterIndex, data) =>
+                    presenter.setFilterFieldData(groupIndex, filterIndex, data)
+                }
+                onDeleteFilterFromGroup={(groupIndex, filterIndex) =>
+                    presenter.deleteFilterFromGroup(groupIndex, filterIndex)
+                }
+                onAddNewFilterToGroup={groupIndex => presenter.addNewFilterToGroup(groupIndex)}
+                onAddGroup={() => presenter.addGroup()}
+                fields={props.fields}
+                vm={presenter.vm}
+            />
+        </Drawer>
     );
 });
diff --git a/packages/app-aco/src/components/AdvancedSearch/QueryManagerDialog/QueryManagerDialog.styled.tsx b/packages/app-aco/src/components/AdvancedSearch/QueryManagerDialog/QueryManagerDialog.styled.tsx
deleted file mode 100644
index 4cb41531aee..00000000000
--- a/packages/app-aco/src/components/AdvancedSearch/QueryManagerDialog/QueryManagerDialog.styled.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import styled from "@emotion/styled";
-import { Dialog } from "@webiny/ui/Dialog";
-
-export const DialogContainer = styled(Dialog)`
-    z-index: 22;
-    .mdc-dialog__surface {
-        width: 600px;
-        min-width: 600px;
-    }
-`;
-
-export const ListActions = styled("div")`
-    display: flex;
-`;
-
-export const EmptyContainer = styled("div")`
-    padding: 24px 0;
-`;
-
-export const EmptyIconContainer = styled("div")`
-    padding: 24px;
-    background: var(--mdc-theme-background);
-    width: 75px;
-    height: 75px;
-    border-radius: 50%;
-`;
diff --git a/packages/app-aco/src/components/AdvancedSearch/QueryManagerDialog/QueryManagerDialog.tsx b/packages/app-aco/src/components/AdvancedSearch/QueryManagerDialog/QueryManagerDialog.tsx
index 262f689126d..11443cabcf4 100644
--- a/packages/app-aco/src/components/AdvancedSearch/QueryManagerDialog/QueryManagerDialog.tsx
+++ b/packages/app-aco/src/components/AdvancedSearch/QueryManagerDialog/QueryManagerDialog.tsx
@@ -1,13 +1,7 @@
 import React from "react";
-
-import { ButtonDefault, ButtonPrimary } from "@webiny/ui/Button";
-import { DialogActions, DialogContent, DialogTitle } from "@webiny/ui/Dialog";
-import { CircularProgress } from "@webiny/ui/Progress";
-
+import { Dialog, OverlayLoader } from "@webiny/admin-ui";
 import { Empty, FilterList } from "./components";
 
-import { DialogContainer } from "./QueryManagerDialog.styled";
-
 type filterCallback = (filterId: string) => void;
 
 interface QueryManagerDialogProps {
@@ -36,26 +30,29 @@ export interface QueryManagerFilter {
 
 export const QueryManagerDialog = ({ vm, ...props }: QueryManagerDialogProps) => {
     return (
-        <DialogContainer open={vm.isOpen} onClose={props.onClose}>
-            <DialogTitle>{"Advanced search filter"}</DialogTitle>
-            {vm.isLoading && <CircularProgress label={vm.loadingLabel} />}
-            <DialogContent>
-                {vm.view === "EMPTY" && <Empty />}
-                {vm.view === "LIST" && (
-                    <FilterList
-                        filters={vm.filters}
-                        onEdit={props.onEdit}
-                        onRename={props.onRename}
-                        onClone={props.onClone}
-                        onDelete={props.onDelete}
-                        onSelect={props.onSelect}
-                    />
-                )}
-            </DialogContent>
-            <DialogActions>
-                <ButtonDefault onClick={props.onClose}>{"Cancel"}</ButtonDefault>
-                <ButtonPrimary onClick={props.onCreate}>{"Create new"}</ButtonPrimary>
-            </DialogActions>
-        </DialogContainer>
+        <Dialog
+            open={vm.isOpen}
+            onClose={props.onClose}
+            title={"Advanced search filter"}
+            actions={
+                <>
+                    <Dialog.CancelButton onClick={props.onClose} text={"Cancel"} />
+                    <Dialog.ConfirmButton onClick={props.onCreate} text={"Create new"} />
+                </>
+            }
+        >
+            {vm.isLoading && <OverlayLoader text={vm.loadingLabel} />}
+            {vm.view === "EMPTY" && <Empty />}
+            {vm.view === "LIST" && (
+                <FilterList
+                    filters={vm.filters}
+                    onEdit={props.onEdit}
+                    onRename={props.onRename}
+                    onClone={props.onClone}
+                    onDelete={props.onDelete}
+                    onSelect={props.onSelect}
+                />
+            )}
+        </Dialog>
     );
 };
diff --git a/packages/app-aco/src/components/AdvancedSearch/QueryManagerDialog/components/Description.tsx b/packages/app-aco/src/components/AdvancedSearch/QueryManagerDialog/components/Description.tsx
index e23018d9164..10b3097343b 100644
--- a/packages/app-aco/src/components/AdvancedSearch/QueryManagerDialog/components/Description.tsx
+++ b/packages/app-aco/src/components/AdvancedSearch/QueryManagerDialog/components/Description.tsx
@@ -1,6 +1,6 @@
 import React from "react";
-import { ListItemTextSecondary } from "@webiny/ui/List";
-import { TimeAgo } from "@webiny/ui/TimeAgo";
+import { Text } from "@webiny/admin-ui";
+import { TimeAgo } from "@webiny/admin-ui";
 
 export interface DescriptionProps {
     children?: string;
@@ -9,9 +9,9 @@ export interface DescriptionProps {
 
 export const Description = (props: DescriptionProps) => {
     return (
-        <ListItemTextSecondary>
+        <Text size={"sm"}>
             {"Created"} <TimeAgo datetime={props.createdOn} />
             {props.children && ` - ${props.children}`}
-        </ListItemTextSecondary>
+        </Text>
     );
 };
diff --git a/packages/app-aco/src/components/AdvancedSearch/QueryManagerDialog/components/Empty.tsx b/packages/app-aco/src/components/AdvancedSearch/QueryManagerDialog/components/Empty.tsx
index b024e0384f4..5d7dfb6b11e 100644
--- a/packages/app-aco/src/components/AdvancedSearch/QueryManagerDialog/components/Empty.tsx
+++ b/packages/app-aco/src/components/AdvancedSearch/QueryManagerDialog/components/Empty.tsx
@@ -1,22 +1,20 @@
 import React from "react";
-
-import { ReactComponent as SearchIcon } from "@material-design-icons/svg/outlined/search.svg";
-import EmptyView from "@webiny/app-admin/components/EmptyView";
-
-import { EmptyContainer, EmptyIconContainer } from "../QueryManagerDialog.styled";
+import { ReactComponent as SettingsIcon } from "@webiny/icons/tune.svg";
+import { Text } from "@webiny/admin-ui";
 
 export const Empty = () => {
     return (
-        <EmptyContainer>
-            <EmptyView
-                icon={
-                    <EmptyIconContainer>
-                        <SearchIcon />
-                    </EmptyIconContainer>
-                }
-                title={"No filters found."}
-                action={null}
-            />
-        </EmptyContainer>
+        <div className="wby-py-xl">
+            <div className="wby-w-full wby-flex wby-flex-col wby-items-center wby-justify-center wby-gap-md">
+                <div className="wby-flex wby-justify-center">
+                    <div className="wby-flex wby-justify-center wby-items-center wby-size-[72px] wby-bg-neutral-dimmed wby-rounded-full wby-fill-neutral-strong [&_svg]:wby-size-[32px]">
+                        <SettingsIcon />
+                    </div>
+                </div>
+                <Text size={"md"} className={"wby-text-center"} as={"div"}>
+                    {"No filters found."}
+                </Text>
+            </div>
+        </div>
     );
 };
diff --git a/packages/app-aco/src/components/AdvancedSearch/QueryManagerDialog/components/FilterList.tsx b/packages/app-aco/src/components/AdvancedSearch/QueryManagerDialog/components/FilterList.tsx
index 51f1b1d9ceb..db26fbbb2a1 100644
--- a/packages/app-aco/src/components/AdvancedSearch/QueryManagerDialog/components/FilterList.tsx
+++ b/packages/app-aco/src/components/AdvancedSearch/QueryManagerDialog/components/FilterList.tsx
@@ -1,16 +1,9 @@
 import React from "react";
-
-import { ReactComponent as SavedSearchIcon } from "@material-design-icons/svg/outlined/saved_search.svg";
-import { ReactComponent as MoreIcon } from "@material-design-icons/svg/outlined/more_vert.svg";
-
-import { IconButton } from "@webiny/ui/Button";
-import { List, ListItem, ListItemMeta, ListItemText, ListItemTextPrimary } from "@webiny/ui/List";
-import { Tooltip } from "@webiny/ui/Tooltip";
-import { Menu, MenuItem } from "@webiny/ui/Menu";
-
-import { ListActions } from "../QueryManagerDialog.styled";
+import { List, IconButton, Tooltip, DropdownMenu } from "@webiny/admin-ui";
+import { ReactComponent as SavedSearchIcon } from "@webiny/icons/saved_search.svg";
+import { ReactComponent as MoreIcon } from "@webiny/icons/more_vert.svg";
 import { QueryManagerFilter } from "../QueryManagerDialog";
-import { Description } from "~/components/AdvancedSearch/QueryManagerDialog/components/Description";
+import { Description } from "./Description";
 
 type filterCallback = (filterId: string) => void;
 
@@ -25,35 +18,54 @@ interface FilterListProps {
 
 export const FilterList = (props: FilterListProps) => {
     return (
-        <List twoLine nonInteractive>
+        <List>
             {props.filters.map(filter => (
-                <ListItem key={filter.id}>
-                    <ListItemText>
-                        <ListItemTextPrimary>{filter.name}</ListItemTextPrimary>
+                <List.Item
+                    key={filter.id}
+                    onClick={() => props.onSelect(filter.id)}
+                    title={filter.name}
+                    description={
                         <Description createdOn={filter.createdOn}>{filter.description}</Description>
-                    </ListItemText>
-                    <ListItemMeta>
-                        <ListActions>
-                            <Tooltip content={"Apply filter"} placement={"left"}>
-                                <IconButton
-                                    icon={<SavedSearchIcon />}
-                                    label={"Apply filter"}
-                                    onClick={() => props.onSelect(filter.id)}
+                    }
+                    actions={
+                        <>
+                            <Tooltip
+                                trigger={
+                                    <IconButton
+                                        icon={<SavedSearchIcon />}
+                                        onClick={() => props.onSelect(filter.id)}
+                                        size={"sm"}
+                                        variant={"ghost"}
+                                    />
+                                }
+                                content={"Apply filter"}
+                                side={"left"}
+                            />
+                            <DropdownMenu
+                                trigger={
+                                    <IconButton icon={<MoreIcon />} size={"sm"} variant={"ghost"} />
+                                }
+                            >
+                                <DropdownMenu.Item
+                                    onClick={() => props.onEdit(filter.id)}
+                                    text={"Edit"}
+                                />
+                                <DropdownMenu.Item
+                                    onClick={() => props.onRename(filter.id)}
+                                    text={"Rename"}
+                                />
+                                <DropdownMenu.Item
+                                    onClick={() => props.onClone(filter.id)}
+                                    text={"Clone"}
+                                />
+                                <DropdownMenu.Item
+                                    onClick={() => props.onDelete(filter.id)}
+                                    text={"Delete"}
                                 />
-                            </Tooltip>
-                            <Menu handle={<IconButton icon={<MoreIcon />} label={"Open menu"} />}>
-                                <MenuItem onClick={() => props.onEdit(filter.id)}>Edit</MenuItem>
-                                <MenuItem onClick={() => props.onRename(filter.id)}>
-                                    Rename
-                                </MenuItem>
-                                <MenuItem onClick={() => props.onClone(filter.id)}>Clone</MenuItem>
-                                <MenuItem onClick={() => props.onDelete(filter.id)}>
-                                    Delete
-                                </MenuItem>
-                            </Menu>
-                        </ListActions>
-                    </ListItemMeta>
-                </ListItem>
+                            </DropdownMenu>
+                        </>
+                    }
+                />
             ))}
         </List>
     );
diff --git a/packages/app-aco/src/components/AdvancedSearch/QuerySaverDialog/QuerySaverDialog.styled.tsx b/packages/app-aco/src/components/AdvancedSearch/QuerySaverDialog/QuerySaverDialog.styled.tsx
deleted file mode 100644
index 7535d9342af..00000000000
--- a/packages/app-aco/src/components/AdvancedSearch/QuerySaverDialog/QuerySaverDialog.styled.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import styled from "@emotion/styled";
-import { Dialog } from "@webiny/ui/Dialog";
-
-export const DialogContainer = styled(Dialog)`
-    z-index: 22;
-    .mdc-dialog__surface {
-        width: 600px;
-        min-width: 600px;
-    }
-`;
diff --git a/packages/app-aco/src/components/AdvancedSearch/QuerySaverDialog/QuerySaverDialog.tsx b/packages/app-aco/src/components/AdvancedSearch/QuerySaverDialog/QuerySaverDialog.tsx
index a26026984e7..98d74b32b29 100644
--- a/packages/app-aco/src/components/AdvancedSearch/QuerySaverDialog/QuerySaverDialog.tsx
+++ b/packages/app-aco/src/components/AdvancedSearch/QuerySaverDialog/QuerySaverDialog.tsx
@@ -1,18 +1,9 @@
 import React, { useEffect, useMemo } from "react";
-
+import { Dialog, Grid, Input, OverlayLoader, Textarea } from "@webiny/admin-ui";
 import { Form } from "@webiny/form";
-import { ButtonDefault, ButtonPrimary } from "@webiny/ui/Button";
-import { DialogActions, DialogContent, DialogTitle } from "@webiny/ui/Dialog";
-import { Cell, Grid } from "@webiny/ui/Grid";
-import { Input } from "@webiny/ui/Input";
-import { CircularProgress } from "@webiny/ui/Progress";
-
 import { QuerySaverDialogFormData, QuerySaverDialogPresenter } from "./QuerySaverDialogPresenter";
-
 import { FilterDTO } from "../domain";
 
-import { DialogContainer } from "./QuerySaverDialog.styled";
-
 interface QuerySaverDialogProps {
     onClose: () => void;
     onSave: (data: FilterDTO) => void;
@@ -44,44 +35,50 @@ export const QuerySaverDialog = ({ filter, ...props }: QuerySaverDialogProps) =>
     };
 
     return (
-        <DialogContainer open={props.vm.isOpen} onClose={props.onClose}>
-            {props.vm.isOpen ? (
-                <Form
-                    data={presenter.vm.data}
-                    onChange={onChange}
-                    onSubmit={onSubmit}
-                    invalidFields={presenter.vm.invalidFields}
-                >
-                    {({ Bind, form }) => (
-                        <>
-                            <DialogTitle>{"Save search filter"}</DialogTitle>
-                            {props.vm.isLoading && (
-                                <CircularProgress label={props.vm.loadingLabel} />
-                            )}
-                            <DialogContent>
+        <Form
+            data={presenter.vm.data}
+            onChange={onChange}
+            onSubmit={onSubmit}
+            invalidFields={presenter.vm.invalidFields}
+        >
+            {({ Bind, form }) => {
+                return (
+                    <Dialog
+                        open={props.vm.isOpen}
+                        onClose={props.onClose}
+                        title={"Save search filter"}
+                        actions={
+                            <>
+                                <Dialog.CancelButton onClick={props.onClose} text={"Cancel"} />
+                                <Dialog.ConfirmButton
+                                    onClick={form.submit}
+                                    text={"Save and apply"}
+                                />
+                            </>
+                        }
+                    >
+                        {props.vm.isOpen ? (
+                            <>
+                                {props.vm.isLoading && (
+                                    <OverlayLoader text={props.vm.loadingLabel} />
+                                )}
                                 <Grid>
-                                    <Cell span={12} align={"middle"}>
+                                    <Grid.Column span={12}>
                                         <Bind name={"name"}>
-                                            <Input type={"text"} label={"Name"} />
+                                            <Input type={"text"} label={"Name"} size={"lg"} />
                                         </Bind>
-                                    </Cell>
-                                    <Cell span={12} align={"middle"}>
+                                    </Grid.Column>
+                                    <Grid.Column span={12}>
                                         <Bind name={"description"}>
-                                            <Input type={"text"} label={"Description"} rows={6} />
+                                            <Textarea label={"Description"} rows={6} size={"lg"} />
                                         </Bind>
-                                    </Cell>
+                                    </Grid.Column>
                                 </Grid>
-                            </DialogContent>
-                            <DialogActions>
-                                <ButtonDefault onClick={props.onClose}>{"Cancel"}</ButtonDefault>
-                                <ButtonPrimary onClick={form.submit}>
-                                    {"Save and apply"}
-                                </ButtonPrimary>
-                            </DialogActions>
-                        </>
-                    )}
-                </Form>
-            ) : null}
-        </DialogContainer>
+                            </>
+                        ) : null}
+                    </Dialog>
+                );
+            }}
+        </Form>
     );
 };
diff --git a/packages/app-aco/src/components/AdvancedSearch/SelectedFilter/SelectedFilter.styled.tsx b/packages/app-aco/src/components/AdvancedSearch/SelectedFilter/SelectedFilter.styled.tsx
deleted file mode 100644
index b21bf2160ef..00000000000
--- a/packages/app-aco/src/components/AdvancedSearch/SelectedFilter/SelectedFilter.styled.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import styled from "@emotion/styled";
-import { ReactComponent as Close } from "@material-design-icons/svg/round/close.svg";
-import { ReactComponent as Edit } from "@material-design-icons/svg/round/edit.svg";
-
-export const CloseIcon = styled(Close)`
-    width: 18px;
-    margin-left: 8px;
-`;
-
-export const EditIcon = styled(Edit)`
-    width: 18px !important;
-    height: 18px !important;
-    margin-right: 8px;
-`;
diff --git a/packages/app-aco/src/components/AdvancedSearch/SelectedFilter/SelectedFilter.tsx b/packages/app-aco/src/components/AdvancedSearch/SelectedFilter/SelectedFilter.tsx
index ed54dd236da..ffd8f75ca88 100644
--- a/packages/app-aco/src/components/AdvancedSearch/SelectedFilter/SelectedFilter.tsx
+++ b/packages/app-aco/src/components/AdvancedSearch/SelectedFilter/SelectedFilter.tsx
@@ -1,8 +1,7 @@
 import React from "react";
-
-import { Chips, Chip } from "@webiny/ui/Chips";
+import { cn, IconButton, buttonVariants } from "@webiny/admin-ui";
+import { ReactComponent as Close } from "@webiny/icons/close.svg";
 import { FilterDTO } from "~/components/AdvancedSearch/domain";
-import { CloseIcon, EditIcon } from "./SelectedFilter.styled";
 
 interface SelectedFilterProps {
     filter: FilterDTO;
@@ -12,15 +11,13 @@ interface SelectedFilterProps {
 
 export const SelectedFilter = (props: SelectedFilterProps) => {
     return (
-        <Chips>
-            <Chip
-                label={props.filter.name}
-                icon={<EditIcon />}
-                onRemove={props.onDelete}
-                trailingIconRemovesChip={true}
-                onInteraction={props.onEdit}
-                trailingIcon={<CloseIcon />}
-            />
-        </Chips>
+        <div
+            role={"button"}
+            className={cn(buttonVariants({ variant: "tertiary" }), "wby-gap-xs wby-cursor-pointer")}
+            onClick={props.onEdit}
+        >
+            <span className={"wby-truncate wby-max-w-[256px]"}>{props.filter.name}</span>
+            <IconButton icon={<Close />} onClick={props.onDelete} size={"xs"} variant={"ghost"} />
+        </div>
     );
 };
diff --git a/packages/app-aco/src/components/AdvancedSearch/fields/Boolean.tsx b/packages/app-aco/src/components/AdvancedSearch/fields/Boolean.tsx
index 3bb9aae5fdd..145416eddc4 100644
--- a/packages/app-aco/src/components/AdvancedSearch/fields/Boolean.tsx
+++ b/packages/app-aco/src/components/AdvancedSearch/fields/Boolean.tsx
@@ -1,8 +1,8 @@
 import React from "react";
 
 import { Bind } from "@webiny/form";
-import { Radio, RadioGroup } from "@webiny/ui/Radio";
 import { useInputField } from "~/components";
+import { RadioGroup } from "@webiny/admin-ui";
 
 export const Boolean = () => {
     const { name } = useInputField();
@@ -10,28 +10,23 @@ export const Boolean = () => {
     return (
         <Bind name={name}>
             {({ value, onChange, validation }) => (
-                <RadioGroup validation={validation}>
-                    {() => {
-                        return (
-                            <>
-                                <Radio
-                                    label="True"
-                                    value={value === "true"}
-                                    onChange={() => {
-                                        onChange("true");
-                                    }}
-                                />
-                                <Radio
-                                    label="False"
-                                    value={value === "false"}
-                                    onChange={() => {
-                                        onChange("false");
-                                    }}
-                                />
-                            </>
-                        );
-                    }}
-                </RadioGroup>
+                <div className="wby-w-full wby-mt-lg">
+                    <RadioGroup
+                        validation={validation}
+                        onChange={onChange}
+                        value={value}
+                        items={[
+                            {
+                                label: "True",
+                                value: "true"
+                            },
+                            {
+                                label: "False",
+                                value: "false"
+                            }
+                        ]}
+                    />
+                </div>
             )}
         </Bind>
     );
diff --git a/packages/app-aco/src/components/AdvancedSearch/fields/DateWithTimezone.tsx b/packages/app-aco/src/components/AdvancedSearch/fields/DateWithTimezone.tsx
index edc514f930f..8035b58aee1 100644
--- a/packages/app-aco/src/components/AdvancedSearch/fields/DateWithTimezone.tsx
+++ b/packages/app-aco/src/components/AdvancedSearch/fields/DateWithTimezone.tsx
@@ -1,24 +1,8 @@
 import React, { useEffect, useState } from "react";
-
-import styled from "@emotion/styled";
 import { useBind } from "@webiny/form";
-import { Input } from "@webiny/ui/Input";
-import { Select } from "@webiny/ui/Select";
 import { UTC_TIMEZONES } from "@webiny/utils";
 import { useInputField } from "~/components";
-
-const DateWithTimezoneContainer = styled.div`
-    display: flex;
-    justify-content: space-between;
-`;
-
-const DateTimeInputContainer = styled.div`
-    width: 50%;
-`;
-
-const TimeZoneSelectContainer = styled.div`
-    width: 45%;
-`;
+import { Input, Select } from "@webiny/admin-ui";
 
 export const DateWithTimezone = () => {
     const { name } = useInputField();
@@ -48,16 +32,17 @@ export const DateWithTimezone = () => {
     };
 
     return (
-        <DateWithTimezoneContainer>
-            <DateTimeInputContainer>
+        <div className={"wby-flex wby-justify-between"}>
+            <div className={"wby-w-1/2"}>
                 <Input
                     label={"Value"}
                     type={"datetime-local"}
                     value={dateTime}
                     onChange={handleDateTimeChange}
+                    size={"lg"}
                 />
-            </DateTimeInputContainer>
-            <TimeZoneSelectContainer>
+            </div>
+            <div className={"wby-w-2/5"}>
                 <Select
                     label={"Time Zone"}
                     value={timeZone}
@@ -66,8 +51,9 @@ export const DateWithTimezone = () => {
                         value
                     }))}
                     onChange={handleTimeZoneChange}
+                    size={"lg"}
                 />
-            </TimeZoneSelectContainer>
-        </DateWithTimezoneContainer>
+            </div>
+        </div>
     );
 };
diff --git a/packages/app-aco/src/components/AdvancedSearch/fields/DateWithoutTimezone.tsx b/packages/app-aco/src/components/AdvancedSearch/fields/DateWithoutTimezone.tsx
index 12936176636..8fd4056dc08 100644
--- a/packages/app-aco/src/components/AdvancedSearch/fields/DateWithoutTimezone.tsx
+++ b/packages/app-aco/src/components/AdvancedSearch/fields/DateWithoutTimezone.tsx
@@ -1,8 +1,8 @@
 import React, { useEffect, useState } from "react";
 
 import { useBind } from "@webiny/form";
-import { Input } from "@webiny/ui/Input";
 import { useInputField } from "~/components";
+import { Input } from "@webiny/admin-ui";
 
 export const DateWithoutTimezone = () => {
     const { name } = useInputField();
@@ -28,6 +28,12 @@ export const DateWithoutTimezone = () => {
     };
 
     return (
-        <Input label={"Value"} type={"datetime-local"} onChange={handleOnChange} value={dateTime} />
+        <Input
+            label={"Value"}
+            type={"datetime-local"}
+            onChange={handleOnChange}
+            value={dateTime}
+            size={"lg"}
+        />
     );
 };
diff --git a/packages/app-aco/src/components/AdvancedSearch/fields/Input.tsx b/packages/app-aco/src/components/AdvancedSearch/fields/Input.tsx
index a10be5ffb35..92f50bcb338 100644
--- a/packages/app-aco/src/components/AdvancedSearch/fields/Input.tsx
+++ b/packages/app-aco/src/components/AdvancedSearch/fields/Input.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 
 import { Bind } from "@webiny/form";
-import { Input as BaseInput } from "@webiny/ui/Input";
+import { Input as UiInput } from "@webiny/admin-ui";
 import { useInputField } from "~/components";
 
 export const Input = () => {
@@ -9,7 +9,7 @@ export const Input = () => {
 
     return (
         <Bind name={name}>
-            <BaseInput label={"Value"} type={field.type} />
+            <UiInput label={"Value"} type={field.type} size={"lg"} />
         </Bind>
     );
 };
diff --git a/packages/app-aco/src/components/AdvancedSearch/fields/PredefinedValues.tsx b/packages/app-aco/src/components/AdvancedSearch/fields/PredefinedValues.tsx
index aaadf55772f..01fde27b521 100644
--- a/packages/app-aco/src/components/AdvancedSearch/fields/PredefinedValues.tsx
+++ b/packages/app-aco/src/components/AdvancedSearch/fields/PredefinedValues.tsx
@@ -1,8 +1,8 @@
 import React from "react";
 
 import { Bind } from "@webiny/form";
-import { Select } from "@webiny/ui/Select";
 import { useInputField } from "~/components";
+import { Select } from "@webiny/admin-ui";
 
 export const PredefinedValues = () => {
     const { name, field } = useInputField();
@@ -19,6 +19,7 @@ export const PredefinedValues = () => {
                     value={value}
                     onChange={data => onChange(data)}
                     validation={validation}
+                    size={"lg"}
                 />
             )}
         </Bind>
diff --git a/packages/app-aco/src/components/AdvancedSearch/index.tsx b/packages/app-aco/src/components/AdvancedSearch/index.tsx
index f8fd0866fd6..574d44b6ff0 100644
--- a/packages/app-aco/src/components/AdvancedSearch/index.tsx
+++ b/packages/app-aco/src/components/AdvancedSearch/index.tsx
@@ -1,19 +1,46 @@
-import React from "react";
+import React, { useMemo } from "react";
 
 import { AdvancedSearch as AdvancedSearchComponent, AdvancedSearchProps } from "./AdvancedSearch";
 import { AdvancedSearchConfigs } from "./AdvancedSearchConfigs";
-import { AcoWithConfig } from "~/config";
+import { AcoWithConfig, useAcoConfig } from "~/config";
 
 export * from "./GraphQLInputMapper";
 export * from "./gateways";
+import { Field, FieldMapper, FieldRaw } from "./domain";
+import { AdvancedSearchDebounceRenderer } from "./AdvancedSearchDebounceRender";
 export * from "./useFilterRepository";
 export * from "./useInputField";
 
-export const AdvancedSearch = (props: AdvancedSearchProps) => {
+interface AdvancedSearchWithFieldRenderersProps extends Omit<AdvancedSearchProps, "fields"> {
+    fields: FieldRaw[];
+}
+
+const AdvancedSearchWithFieldRenderers = ({
+    fields,
+    ...props
+}: AdvancedSearchWithFieldRenderersProps) => {
+    const { advancedSearch } = useAcoConfig();
+
+    const fieldsWithRenderer = useMemo(() => {
+        const fieldDTOs = FieldMapper.toDTO(fields.map(field => Field.createFromRaw(field)));
+
+        return fieldDTOs.map(field => {
+            const config = advancedSearch.fieldRenderers.find(config => config.type === field.type);
+            const element = config?.element ?? null;
+            return { ...field, element };
+        });
+    }, [fields]);
+
+    return <AdvancedSearchComponent {...props} fields={fieldsWithRenderer} />;
+};
+
+export const AdvancedSearch = (props: AdvancedSearchWithFieldRenderersProps) => {
     return (
         <>
             <AcoWithConfig>
-                <AdvancedSearchComponent {...props} />
+                <AdvancedSearchDebounceRenderer>
+                    <AdvancedSearchWithFieldRenderers {...props} />
+                </AdvancedSearchDebounceRenderer>
             </AcoWithConfig>
             <AdvancedSearchConfigs />
         </>
diff --git a/packages/app-aco/src/components/Extensions/Extensions.tsx b/packages/app-aco/src/components/Extensions/Extensions.tsx
index 3363261458f..552f93ef6fb 100644
--- a/packages/app-aco/src/components/Extensions/Extensions.tsx
+++ b/packages/app-aco/src/components/Extensions/Extensions.tsx
@@ -2,29 +2,8 @@ import React from "react";
 import { CompositionScope } from "@webiny/app-admin";
 import { ModelProvider, Fields } from "@webiny/app-headless-cms-common";
 import { Bind, BindPrefix } from "@webiny/form";
-import styled from "@emotion/styled";
 import { useFolderModel, useGetFolderExtensionsFields } from "~/features";
 
-const HideEmptyCells = styled.div`
-    .mdc-layout-grid {
-        margin: -24px;
-        padding: 0 24px 24px;
-    }
-
-    .mdc-layout-grid__inner {
-        row-gap: normal;
-    }
-
-    .mdc-layout-grid__cell {
-        padding-top: 24px;
-    }
-
-    .mdc-layout-grid__cell:empty {
-        display: none;
-        padding: 0;
-    }
-`;
-
 export const Extensions = () => {
     const { getFolderExtensionsFields } = useGetFolderExtensionsFields();
     const { fields } = getFolderExtensionsFields();
@@ -38,7 +17,7 @@ export const Extensions = () => {
         <CompositionScope name={"aco.folderDetails.extensionFields"}>
             <ModelProvider model={folderModel}>
                 <BindPrefix name={"extensions"}>
-                    <HideEmptyCells>
+                    <div className={"wby-mt-lg"}>
                         <Fields
                             contentModel={folderModel}
                             // @ts-expect-error
@@ -46,7 +25,7 @@ export const Extensions = () => {
                             fields={fields}
                             layout={fields.map(field => [field.fieldId])}
                         />
-                    </HideEmptyCells>
+                    </div>
                 </BindPrefix>
             </ModelProvider>
         </CompositionScope>
diff --git a/packages/app-aco/src/components/FolderGrid/Folder.tsx b/packages/app-aco/src/components/FolderGrid/Folder.tsx
deleted file mode 100644
index 29fd6cad514..00000000000
--- a/packages/app-aco/src/components/FolderGrid/Folder.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import React from "react";
-
-import { ReactComponent as FolderIcon } from "@material-design-icons/svg/outlined/folder.svg";
-import { ReactComponent as FolderSharedIcon } from "@material-design-icons/svg/outlined/folder_shared.svg";
-import { OptionsMenu } from "@webiny/app-admin";
-
-import { useFolder } from "~/hooks";
-import { useAcoConfig } from "~/config";
-
-import { FolderContainer, FolderContent, Text } from "./styled";
-
-export interface FolderProps {
-    onClick: (id: string) => void;
-}
-
-export const Folder = ({ onClick }: FolderProps) => {
-    const { folder } = useFolder();
-    const { folder: folderConfig } = useAcoConfig();
-    const { id, title, hasNonInheritedPermissions, canManagePermissions, canManageStructure } =
-        folder;
-
-    let icon = <FolderIcon />;
-    if (hasNonInheritedPermissions && canManagePermissions) {
-        icon = <FolderSharedIcon />;
-    }
-
-    return (
-        <FolderContainer>
-            <FolderContent onClick={() => onClick(id)}>
-                <div>{icon}</div>
-                <Text use={"subtitle2"}>{title}</Text>
-            </FolderContent>
-            {canManageStructure && (
-                <OptionsMenu
-                    actions={folderConfig.actions}
-                    data-testid={"folder.grid.menu-action"}
-                />
-            )}
-        </FolderContainer>
-    );
-};
diff --git a/packages/app-aco/src/components/FolderGrid/FolderGrid.tsx b/packages/app-aco/src/components/FolderGrid/FolderGrid.tsx
deleted file mode 100644
index 18018cf9518..00000000000
--- a/packages/app-aco/src/components/FolderGrid/FolderGrid.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import React from "react";
-
-import { FolderProvider } from "~/contexts/folder";
-import { Folder } from "~/components/FolderGrid/Folder";
-import { Grid } from "~/components/FolderGrid/styled";
-import { AcoWithConfig } from "~/config";
-import { FolderItem } from "~/types";
-
-interface FolderGridProps {
-    folders: FolderItem[];
-    onFolderClick: (id: string) => void;
-}
-
-export const FolderGrid = ({ folders, onFolderClick }: FolderGridProps) => {
-    if (folders.length === 0) {
-        return null;
-    }
-
-    return (
-        <AcoWithConfig>
-            <Grid>
-                {folders.map(folder => (
-                    <FolderProvider key={folder.id} folder={folder}>
-                        <Folder onClick={onFolderClick} />
-                    </FolderProvider>
-                ))}
-            </Grid>
-        </AcoWithConfig>
-    );
-};
diff --git a/packages/app-aco/src/components/FolderGrid/FolderGridItem.tsx b/packages/app-aco/src/components/FolderGrid/FolderGridItem.tsx
new file mode 100644
index 00000000000..4a0dd41028f
--- /dev/null
+++ b/packages/app-aco/src/components/FolderGrid/FolderGridItem.tsx
@@ -0,0 +1,80 @@
+import React from "react";
+import { cn, IconButton, Text, TimeAgo } from "@webiny/admin-ui";
+import { FolderIcon, FolderSharedIcon } from "../FolderIcons";
+import { ReactComponent as MoreVerticalIcon } from "@webiny/icons/more_vert.svg";
+import { OptionsMenu } from "@webiny/app-admin";
+import { useAcoConfig } from "~/config";
+import { useFolder } from "~/hooks";
+
+export interface FolderProps {
+    onClick: (id: string) => void;
+}
+
+export const FolderGridItem = ({ onClick }: FolderProps) => {
+    const { folder } = useFolder();
+    const { folder: folderConfig } = useAcoConfig();
+    const { id, title, hasNonInheritedPermissions, canManagePermissions, canManageStructure } =
+        folder;
+
+    let icon = <FolderIcon />;
+    if (hasNonInheritedPermissions && canManagePermissions) {
+        icon = <FolderSharedIcon />;
+    }
+
+    return (
+        <div
+            className={cn([
+                "wby-group",
+                "wby-bg-neutral-base wby-rounded-lg",
+                "wby-shadow-sm hover:wby-shadow-lg",
+                "wby-border-sm wby-border-solid wby-border-neutral-base hover:wby-border-neutral-dimmed-darker",
+                "wby-transition-shadow wby-duration-250 wby-ease-in-out",
+                "wby-overflow-hidden",
+                "wby-cursor-pointer"
+            ])}
+            onClick={() => onClick(id)}
+        >
+            <div style={{ height: 150 }} className={"wby-relative"}>
+                <div
+                    className={cn([
+                        "wby-absolute wby-top-0 wby-left-0",
+                        "wby-w-full wby-h-full",
+                        "wby-flex wby-items-center wby-justify-center"
+                    ])}
+                >
+                    {icon}
+                </div>
+                {canManageStructure && (
+                    <div
+                        className={cn([
+                            "wby-invisible group-hover:wby-visible",
+                            "wby-flex wby-items-center wby-gap-xxs",
+                            "wby-p-xs",
+                            "wby-absolute wby-top-xs-plus wby-right-xs-plus"
+                        ])}
+                    >
+                        <OptionsMenu
+                            actions={folderConfig.actions}
+                            data-testid={"folder.grid.menu-action"}
+                            trigger={
+                                <IconButton
+                                    icon={<MoreVerticalIcon />}
+                                    size={"sm"}
+                                    variant={"ghost"}
+                                />
+                            }
+                        />
+                    </div>
+                )}
+            </div>
+            <div className={"wby-px-md wby-py-sm-extra"} data-testid={"fm-file-wrapper-file-label"}>
+                <Text size={"sm"} as={"div"} className={"wby-truncate wby-text-neutral-primary"}>
+                    {title}
+                </Text>
+                <Text size={"sm"} as={"div"} className={"wby-truncate wby-text-neutral-dimmed"}>
+                    {"Folder"} / <TimeAgo datetime={folder.createdOn} />
+                </Text>
+            </div>
+        </div>
+    );
+};
diff --git a/packages/app-aco/src/components/FolderGrid/index.tsx b/packages/app-aco/src/components/FolderGrid/index.tsx
index 84c0f496b30..7eccd2429e2 100644
--- a/packages/app-aco/src/components/FolderGrid/index.tsx
+++ b/packages/app-aco/src/components/FolderGrid/index.tsx
@@ -1 +1 @@
-export * from "./FolderGrid";
+export * from "./FolderGridItem";
diff --git a/packages/app-aco/src/components/FolderGrid/styled.tsx b/packages/app-aco/src/components/FolderGrid/styled.tsx
deleted file mode 100644
index 586b27d19dc..00000000000
--- a/packages/app-aco/src/components/FolderGrid/styled.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import styled from "@emotion/styled";
-
-import { Typography } from "@webiny/ui/Typography";
-
-export const FolderContainer = styled("div")`
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    background: var(--mdc-theme-surface);
-    padding: 4px 4px 4px 16px;
-    border: 1px solid var(--mdc-theme-on-background);
-    border-radius: 2px;
-    cursor: pointer;
-`;
-
-export const FolderContent = styled("div")`
-    display: flex;
-    align-items: center;
-    white-space: nowrap;
-    overflow: hidden;
-    width: 100%;
-`;
-
-export const Text = styled(Typography)`
-    margin-left: 4px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-`;
-
-export const Grid = styled("div")`
-    width: 100%;
-    display: grid;
-    /* define the number of grid columns */
-    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-    column-gap: 16px;
-    row-gap: 16px;
-`;
diff --git a/packages/app-aco/src/components/FolderIcons/assets/folder-shared-icon.svg b/packages/app-aco/src/components/FolderIcons/assets/folder-shared-icon.svg
new file mode 100644
index 00000000000..ce65cfbd94b
--- /dev/null
+++ b/packages/app-aco/src/components/FolderIcons/assets/folder-shared-icon.svg
@@ -0,0 +1,5 @@
+<svg width="110" height="92" viewBox="0 0 110 92" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.19165 25.9327V9.91733C0.19165 4.45928 4.60834 0.0356445 10.0557 0.0356445H31.2465C33.335 0.0356445 35.3685 0.699096 37.0559 1.93162L46.2829 8.66799H99.9445C105.392 8.66799 109.809 13.0916 109.809 18.5497V25.9327H0.19165Z" fill="#5EACDE"/>
+<path d="M99.9443 16.0796H10.0565C4.60869 16.0796 0.192383 20.5038 0.192383 25.9613V82.0827C0.192383 87.5402 4.60869 91.9644 10.0565 91.9644H99.9443C105.392 91.9644 109.808 87.5402 109.808 82.0827V25.9613C109.808 20.5038 105.392 16.0796 99.9443 16.0796Z" fill="#64C5FA"/>
+<path d="M64 48.75H62.5V45.75C62.5 41.61 59.14 38.25 55 38.25C50.86 38.25 47.5 41.61 47.5 45.75V48.75H46C44.35 48.75 43 50.1 43 51.75V66.75C43 68.4 44.35 69.75 46 69.75H64C65.65 69.75 67 68.4 67 66.75V51.75C67 50.1 65.65 48.75 64 48.75ZM50.5 45.75C50.5 43.26 52.51 41.25 55 41.25C57.49 41.25 59.5 43.26 59.5 45.75V48.75H50.5V45.75ZM64 66.75H46V51.75H64V66.75ZM55 62.25C56.65 62.25 58 60.9 58 59.25C58 57.6 56.65 56.25 55 56.25C53.35 56.25 52 57.6 52 59.25C52 60.9 53.35 62.25 55 62.25Z" fill="#191C20" fill-opacity="0.3"/>
+</svg>
diff --git a/packages/app-aco/src/components/FolderIcons/assets/folder.svg b/packages/app-aco/src/components/FolderIcons/assets/folder.svg
new file mode 100644
index 00000000000..e78ca340103
--- /dev/null
+++ b/packages/app-aco/src/components/FolderIcons/assets/folder.svg
@@ -0,0 +1,4 @@
+<svg width="90" height="76" viewBox="0 0 90 76" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 21.524V8.37475C0 3.89346 3.62628 0.261475 8.09883 0.261475H25.4973C27.2121 0.261475 28.8816 0.806196 30.267 1.81815L37.8428 7.34898H81.9012C86.3737 7.34898 90 10.981 90 15.4623V21.524H0Z" fill="#5EACDE"/>
+<path d="M81.9009 13.4341H8.09932C3.62646 13.4341 0.000488281 17.0665 0.000488281 21.5474V67.6254C0.000488281 72.1062 3.62646 75.7386 8.09932 75.7386H81.9009C86.3738 75.7386 89.9997 72.1062 89.9997 67.6254V21.5474C89.9997 17.0665 86.3738 13.4341 81.9009 13.4341Z" fill="#64C5FA"/>
+</svg>
diff --git a/packages/app-aco/src/components/FolderIcons/index.ts b/packages/app-aco/src/components/FolderIcons/index.ts
new file mode 100644
index 00000000000..11564e966f3
--- /dev/null
+++ b/packages/app-aco/src/components/FolderIcons/index.ts
@@ -0,0 +1,4 @@
+import { ReactComponent as FolderIcon } from "./assets/folder.svg";
+import { ReactComponent as FolderSharedIcon } from "./assets/folder-shared-icon.svg";
+
+export { FolderIcon, FolderSharedIcon };
diff --git a/packages/app-aco/src/components/FolderTree/ButtonCreate/ButtonCreate.tsx b/packages/app-aco/src/components/FolderTree/ButtonCreate/ButtonCreate.tsx
new file mode 100644
index 00000000000..407d5e0aad7
--- /dev/null
+++ b/packages/app-aco/src/components/FolderTree/ButtonCreate/ButtonCreate.tsx
@@ -0,0 +1,26 @@
+import React from "react";
+import { Button } from "@webiny/admin-ui";
+import { i18n } from "@webiny/app/i18n";
+import { ReactComponent as Plus } from "@webiny/icons/add.svg";
+import { useCreateDialog } from "~/dialogs";
+
+type ButtonCreateProps = {
+    disabled?: boolean;
+};
+
+const t = i18n.ns("app-aco/components/folder-tree/button-create");
+
+export const ButtonCreate = (props: ButtonCreateProps) => {
+    const { showDialog } = useCreateDialog();
+
+    return (
+        <Button
+            onClick={() => showDialog()}
+            disabled={props.disabled}
+            icon={<Plus />}
+            text={t`New folder`}
+            variant={"secondary"}
+            size={"sm"}
+        />
+    );
+};
diff --git a/packages/app-aco/src/components/FolderTree/ButtonCreate/index.tsx b/packages/app-aco/src/components/FolderTree/ButtonCreate/index.tsx
index 105cc89d3f4..13ccc48f61b 100644
--- a/packages/app-aco/src/components/FolderTree/ButtonCreate/index.tsx
+++ b/packages/app-aco/src/components/FolderTree/ButtonCreate/index.tsx
@@ -1,26 +1 @@
-import React from "react";
-
-import { i18n } from "@webiny/app/i18n";
-import { Typography } from "@webiny/ui/Typography";
-
-import { useCreateDialog } from "~/dialogs";
-import { Button, Icon, IconContainer } from "./styled";
-
-type CreateButtonProps = {
-    disabled?: boolean;
-};
-
-const t = i18n.ns("app-aco/components/folder-tree/button-create");
-
-export const CreateButton = (props: CreateButtonProps) => {
-    const { showDialog } = useCreateDialog();
-
-    return (
-        <Button onClick={() => showDialog()} disabled={props.disabled}>
-            <IconContainer>
-                <Icon />
-            </IconContainer>
-            <Typography use={"subtitle2"}>{t`Create a new folder`}</Typography>
-        </Button>
-    );
-};
+export * from "./ButtonCreate";
diff --git a/packages/app-aco/src/components/FolderTree/ButtonCreate/styled.tsx b/packages/app-aco/src/components/FolderTree/ButtonCreate/styled.tsx
deleted file mode 100644
index b04784a7311..00000000000
--- a/packages/app-aco/src/components/FolderTree/ButtonCreate/styled.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import styled from "@emotion/styled";
-import { ReactComponent as Plus } from "@material-design-icons/svg/outlined/add_circle_outline.svg";
-
-export const Button = styled("button")`
-    background: none;
-    border: none;
-    cursor: pointer;
-    outline: none;
-    font-family: var(--mdc-typography-font-family);
-    color: var(--webiny-theme-color-text-secondary);
-    fill: currentColor;
-    display: flex;
-    align-items: center;
-    font-size: 1em;
-    padding: 8px;
-
-    &:disabled {
-        cursor: not-allowed;
-        opacity: 0.5;
-    }
-`;
-
-export const IconContainer = styled.div`
-    display: flex;
-    align-items: center;
-    justify-content: center;
-`;
-
-export const Icon = styled(Plus)`
-    padding: 0 4px;
-    height: 16px;
-    width: 16px;
-`;
diff --git a/packages/app-aco/src/components/FolderTree/Empty/Empty.tsx b/packages/app-aco/src/components/FolderTree/Empty/Empty.tsx
new file mode 100644
index 00000000000..a4dded97ae5
--- /dev/null
+++ b/packages/app-aco/src/components/FolderTree/Empty/Empty.tsx
@@ -0,0 +1,9 @@
+import React from "react";
+import { i18n } from "@webiny/app/i18n";
+import { Text } from "@webiny/admin-ui";
+
+const t = i18n.ns("app-aco/components/folder-tree/empty");
+
+export const Empty = () => {
+    return <Text size={"sm"}>{t`No folders found...`}</Text>;
+};
diff --git a/packages/app-aco/src/components/FolderTree/Empty/index.tsx b/packages/app-aco/src/components/FolderTree/Empty/index.tsx
index 412f9c50722..7aa85b1b7df 100644
--- a/packages/app-aco/src/components/FolderTree/Empty/index.tsx
+++ b/packages/app-aco/src/components/FolderTree/Empty/index.tsx
@@ -1,16 +1 @@
-import React from "react";
-
-import { i18n } from "@webiny/app/i18n";
-import { Typography } from "@webiny/ui/Typography";
-
-import { Container } from "./styled";
-
-const t = i18n.ns("app-aco/components/folder-tree/empty");
-
-export const Empty = () => {
-    return (
-        <Container>
-            <Typography use={"body2"}>{t`No folders found...`}</Typography>
-        </Container>
-    );
-};
+export * from "./Empty";
diff --git a/packages/app-aco/src/components/FolderTree/Empty/styled.tsx b/packages/app-aco/src/components/FolderTree/Empty/styled.tsx
deleted file mode 100644
index c8f763636fb..00000000000
--- a/packages/app-aco/src/components/FolderTree/Empty/styled.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import styled from "@emotion/styled";
-
-export const Container = styled("div")`
-    padding: 48px 12px 8px;
-    color: var(--webiny-theme-color-text-secondary);
-    fill: currentColor;
-`;
diff --git a/packages/app-aco/src/components/FolderTree/List/List.tsx b/packages/app-aco/src/components/FolderTree/List/List.tsx
new file mode 100644
index 00000000000..684aacc4522
--- /dev/null
+++ b/packages/app-aco/src/components/FolderTree/List/List.tsx
@@ -0,0 +1,156 @@
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import {
+    DropOptions,
+    getBackendOptions,
+    InitialOpen,
+    MultiBackend,
+    NodeModel,
+    Tree,
+    type RenderParams
+} from "@minoru/react-dnd-treeview";
+import { useSnackbar } from "@webiny/app-admin";
+import { DndProvider } from "react-dnd";
+import { Node } from "../Node";
+import { NodePreview } from "../NodePreview";
+import { createInitialOpenList, createTreeData } from "./utils";
+import {
+    useGetFolderLevelPermission,
+    useListFoldersByParentIds,
+    useUpdateFolder
+} from "~/features";
+import { ROOT_FOLDER } from "~/constants";
+import { DndFolderItemData, FolderItem } from "~/types";
+import { FolderProvider } from "~/contexts/folder";
+
+interface ListProps {
+    folders: FolderItem[];
+    focusedFolderId?: string;
+    hiddenFolderIds?: string[];
+    enableActions?: boolean;
+    onFolderClick: (data: FolderItem) => void;
+}
+
+export const List = ({
+    folders,
+    onFolderClick,
+    focusedFolderId,
+    hiddenFolderIds,
+    enableActions
+}: ListProps) => {
+    const { listFoldersByParentIds, getIsFolderLoading } = useListFoldersByParentIds();
+    const { updateFolder } = useUpdateFolder();
+    const { getFolderLevelPermission: canManageStructure } =
+        useGetFolderLevelPermission("canManageStructure");
+    const { showSnackbar } = useSnackbar();
+    const [treeData, setTreeData] = useState<NodeModel<DndFolderItemData>[]>([]);
+    const [initialOpenList, setInitialOpenList] = useState<undefined | InitialOpen>();
+    const [openFolderIds, setOpenFolderIds] = useState<string[]>([ROOT_FOLDER]);
+
+    useEffect(() => {
+        if (folders) {
+            setTreeData(createTreeData(folders, focusedFolderId, hiddenFolderIds));
+        }
+    }, [folders, focusedFolderId]);
+
+    useEffect(() => {
+        if (!folders) {
+            return;
+        }
+        setInitialOpenList(createInitialOpenList(folders, openFolderIds, focusedFolderId));
+    }, [focusedFolderId]);
+
+    const handleDrop = async (
+        newTree: NodeModel<DndFolderItemData>[],
+        { dragSourceId, dropTargetId }: DropOptions
+    ) => {
+        // Store the current state of the tree before the drop action
+        const oldTree = [...treeData];
+        try {
+            const item = folders.find(folder => folder.id === dragSourceId);
+
+            if (!item) {
+                throw new Error("Folder not found!");
+            }
+
+            setTreeData(newTree);
+
+            await updateFolder({
+                ...item,
+                parentId: dropTargetId !== ROOT_FOLDER ? (dropTargetId as string) : null
+            });
+        } catch (error) {
+            // If an error occurred, revert the tree back to its previous state
+            setTreeData(oldTree);
+            return showSnackbar(error.message);
+        }
+    };
+
+    const sort = useMemo(
+        () => (a: NodeModel<DndFolderItemData>, b: NodeModel<DndFolderItemData>) => {
+            if (a.id === ROOT_FOLDER || b.id === ROOT_FOLDER) {
+                return 1;
+            }
+            return a.text.localeCompare(b.text, undefined, { numeric: true });
+        },
+        []
+    );
+
+    const handleChangeOpen = async (folderIds: string[]) => {
+        setOpenFolderIds([...new Set([ROOT_FOLDER, ...folderIds])]);
+        const filteredFolderIds = folderIds.filter(item => item !== ROOT_FOLDER && item !== "0");
+        await listFoldersByParentIds(filteredFolderIds);
+    };
+
+    const canDrag = useCallback(
+        (folderId: string) => {
+            const isRootFolder = folderId === ROOT_FOLDER;
+            return !isRootFolder && canManageStructure(folderId);
+        },
+        [canManageStructure]
+    );
+
+    const renderNode = useCallback(
+        (
+            node: NodeModel<DndFolderItemData>,
+            { depth, isOpen, onToggle, handleRef }: RenderParams
+        ) => {
+            const folder = folders.find(folder => folder.id === node.id);
+            return (
+                <FolderProvider folder={folder}>
+                    <Node
+                        node={node}
+                        depth={depth}
+                        isOpen={isOpen}
+                        onToggle={onToggle}
+                        isLoading={getIsFolderLoading(folder?.id)}
+                        enableActions={enableActions}
+                        onClick={onFolderClick}
+                        handleRef={handleRef}
+                    />
+                </FolderProvider>
+            );
+        },
+        [folders, getIsFolderLoading, enableActions, onFolderClick]
+    );
+
+    return (
+        <DndProvider backend={MultiBackend} options={getBackendOptions()}>
+            <Tree
+                tree={treeData}
+                rootId={"0"}
+                onDrop={handleDrop}
+                onChangeOpen={ids => handleChangeOpen(ids as string[])}
+                sort={sort}
+                canDrag={item => canDrag(item!.id as string)}
+                render={renderNode}
+                dragPreviewRender={monitorProps => <NodePreview text={monitorProps.item.text} />}
+                classes={{
+                    dropTarget: "wby-bg-neutral-dark/5",
+                    draggingSource: "wby-opacity-50",
+                    placeholder: "wby-relative"
+                }}
+                initialOpen={initialOpenList}
+            />
+        </DndProvider>
+    );
+};
diff --git a/packages/app-aco/src/components/FolderTree/List/index.tsx b/packages/app-aco/src/components/FolderTree/List/index.tsx
index f6f0a24ac45..870e1dcb494 100644
--- a/packages/app-aco/src/components/FolderTree/List/index.tsx
+++ b/packages/app-aco/src/components/FolderTree/List/index.tsx
@@ -1,143 +1 @@
-import React, { useCallback, useEffect, useMemo, useState } from "react";
-import {
-    DropOptions,
-    getBackendOptions,
-    InitialOpen,
-    MultiBackend,
-    NodeModel,
-    Tree
-} from "@minoru/react-dnd-treeview";
-import { useSnackbar } from "@webiny/app-admin";
-import { DndProvider } from "react-dnd";
-import { Node } from "../Node";
-import { NodePreview } from "../NodePreview";
-import { Placeholder } from "../Placeholder";
-import { createInitialOpenList, createTreeData } from "./utils";
-import { useGetFolderLevelPermission, useUpdateFolder } from "~/features";
-import { ROOT_FOLDER } from "~/constants";
-import { DndFolderItemData, FolderItem } from "~/types";
-import { FolderProvider } from "~/contexts/folder";
-
-interface ListProps {
-    folders: FolderItem[];
-    focusedFolderId?: string;
-    hiddenFolderIds?: string[];
-    enableActions?: boolean;
-    onFolderClick: (data: FolderItem) => void;
-}
-
-export const List = ({
-    folders,
-    onFolderClick,
-    focusedFolderId,
-    hiddenFolderIds,
-    enableActions
-}: ListProps) => {
-    const { updateFolder } = useUpdateFolder();
-    const { getFolderLevelPermission: canManageStructure } =
-        useGetFolderLevelPermission("canManageStructure");
-    const { showSnackbar } = useSnackbar();
-    const [treeData, setTreeData] = useState<NodeModel<DndFolderItemData>[]>([]);
-    const [initialOpenList, setInitialOpenList] = useState<undefined | InitialOpen>();
-    const [openFolderIds, setOpenFolderIds] = useState<string[]>([ROOT_FOLDER]);
-
-    useEffect(() => {
-        if (folders) {
-            setTreeData(createTreeData(folders, focusedFolderId, hiddenFolderIds));
-        }
-    }, [folders, focusedFolderId]);
-
-    useEffect(() => {
-        if (!folders) {
-            return;
-        }
-        setInitialOpenList(createInitialOpenList(folders, openFolderIds, focusedFolderId));
-    }, [focusedFolderId]);
-
-    const handleDrop = async (
-        newTree: NodeModel<DndFolderItemData>[],
-        { dragSourceId, dropTargetId }: DropOptions
-    ) => {
-        // Store the current state of the tree before the drop action
-        const oldTree = [...treeData];
-        try {
-            const item = folders.find(folder => folder.id === dragSourceId);
-
-            if (!item) {
-                throw new Error("Folder not found!");
-            }
-
-            setTreeData(newTree);
-
-            await updateFolder({
-                ...item,
-                parentId: dropTargetId !== ROOT_FOLDER ? (dropTargetId as string) : null
-            });
-        } catch (error) {
-            // If an error occurred, revert the tree back to its previous state
-            setTreeData(oldTree);
-            return showSnackbar(error.message);
-        }
-    };
-
-    const sort = useMemo(
-        () => (a: NodeModel<DndFolderItemData>, b: NodeModel<DndFolderItemData>) => {
-            if (a.id === ROOT_FOLDER || b.id === ROOT_FOLDER) {
-                return 1;
-            }
-            return a.text.localeCompare(b.text, undefined, { numeric: true });
-        },
-        []
-    );
-
-    const handleChangeOpen = (folderIds: string[]) => {
-        setOpenFolderIds([ROOT_FOLDER, ...folderIds]);
-    };
-
-    const canDrag = useCallback(
-        (folderId: string) => {
-            const isRootFolder = folderId === ROOT_FOLDER;
-            return !isRootFolder && canManageStructure(folderId);
-        },
-        [canManageStructure]
-    );
-
-    return (
-        <>
-            <DndProvider backend={MultiBackend} options={getBackendOptions()} context={window}>
-                <Tree
-                    tree={treeData}
-                    rootId={"0"}
-                    onDrop={handleDrop}
-                    onChangeOpen={ids => handleChangeOpen(ids as string[])}
-                    sort={sort}
-                    canDrag={item => canDrag(item!.id as string)}
-                    render={(node, { depth, isOpen, onToggle }) => {
-                        const folder = folders.find(folder => folder.id === node.id);
-
-                        return (
-                            <FolderProvider folder={folder}>
-                                <Node
-                                    node={node}
-                                    depth={depth}
-                                    isOpen={isOpen}
-                                    enableActions={enableActions}
-                                    onToggle={onToggle}
-                                    onClick={data => onFolderClick(data)}
-                                />
-                            </FolderProvider>
-                        );
-                    }}
-                    dragPreviewRender={monitorProps => <NodePreview monitorProps={monitorProps} />}
-                    classes={{
-                        dropTarget: "dropTarget",
-                        draggingSource: "draggingSource",
-                        placeholder: "placeholderContainer"
-                    }}
-                    initialOpen={initialOpenList}
-                    placeholderRender={(_, { depth }) => <Placeholder depth={depth} />}
-                />
-            </DndProvider>
-        </>
-    );
-};
+export * from "./List";
diff --git a/packages/app-aco/src/components/FolderTree/Loader/Loader.tsx b/packages/app-aco/src/components/FolderTree/Loader/Loader.tsx
new file mode 100644
index 00000000000..5f0f9dba46c
--- /dev/null
+++ b/packages/app-aco/src/components/FolderTree/Loader/Loader.tsx
@@ -0,0 +1,25 @@
+import React from "react";
+import { Skeleton } from "@webiny/admin-ui";
+
+interface LoaderProps {
+    count?: number;
+}
+
+export const Loader = ({ count = 4 }: LoaderProps) => {
+    const lines = Array.from({ length: count });
+
+    return (
+        <div className={"wby-my-md wby-p-xs"}>
+            {lines.map((_, index) => {
+                return (
+                    <div
+                        key={`folder-skeleton-${index}`}
+                        className={"wby-mb-xs wby-px-sm wby-py-xs-plus"}
+                    >
+                        <Skeleton type={"text"} size={"md"} />
+                    </div>
+                );
+            })}
+        </div>
+    );
+};
diff --git a/packages/app-aco/src/components/FolderTree/Loader/index.tsx b/packages/app-aco/src/components/FolderTree/Loader/index.tsx
index 158a1e090c1..f9f5a2b49f8 100644
--- a/packages/app-aco/src/components/FolderTree/Loader/index.tsx
+++ b/packages/app-aco/src/components/FolderTree/Loader/index.tsx
@@ -1,11 +1 @@
-import React from "react";
-import { Skeleton } from "@webiny/ui/Skeleton";
-import { Container, SkeletonWrapper } from "./styled";
-
-export const Loader = ({ count }: { count?: number }) => {
-    return (
-        <Container>
-            <Skeleton count={count ?? 4} inline={true} height={"100%"} wrapper={SkeletonWrapper} />
-        </Container>
-    );
-};
+export * from "./Loader";
diff --git a/packages/app-aco/src/components/FolderTree/Loader/styled.tsx b/packages/app-aco/src/components/FolderTree/Loader/styled.tsx
deleted file mode 100644
index e5b3378aa4a..00000000000
--- a/packages/app-aco/src/components/FolderTree/Loader/styled.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import styled from "@emotion/styled";
-
-export const Container = styled("div")`
-    padding: 4px;
-`;
-
-export const SkeletonWrapper = styled("div")`
-    width: 100%;
-    align-content: center;
-    margin: 8px auto;
-    height: 24px;
-
-    &:last-of-type {
-        margin-bottom: 0;
-    }
-`;
diff --git a/packages/app-aco/src/components/FolderTree/MenuActions/MenuActions.tsx b/packages/app-aco/src/components/FolderTree/MenuActions/MenuActions.tsx
new file mode 100644
index 00000000000..b98302fa1a6
--- /dev/null
+++ b/packages/app-aco/src/components/FolderTree/MenuActions/MenuActions.tsx
@@ -0,0 +1,32 @@
+import React from "react";
+import { OptionsMenu } from "@webiny/app-admin";
+import { cn, IconButton } from "@webiny/admin-ui";
+import { ReactComponent as MoreVerticalIcon } from "@webiny/icons/more_vert.svg";
+import { useAcoConfig } from "~/config";
+import { useFolder } from "~/hooks";
+
+export const MenuActions = () => {
+    const { folder } = useFolder();
+    const { folder: folderConfig } = useAcoConfig();
+
+    // If the user cannot manage folder structure, no need to show the menu.
+    if (!folder.canManageStructure) {
+        return null;
+    }
+
+    return (
+        <div
+            className={cn(
+                "wby-invisible group-hover:wby-visible",
+                "wby-size-md wby-cursor-pointer",
+                "wby-absolute wby-top-1/2  wby-right-sm wby--translate-y-1/2"
+            )}
+        >
+            <OptionsMenu
+                trigger={<IconButton icon={<MoreVerticalIcon />} size={"xs"} variant={"ghost"} />}
+                actions={folderConfig.actions}
+                data-testid={"folder.tree.menu-action"}
+            />
+        </div>
+    );
+};
diff --git a/packages/app-aco/src/components/FolderTree/MenuActions/index.ts b/packages/app-aco/src/components/FolderTree/MenuActions/index.ts
new file mode 100644
index 00000000000..cff97bc39ce
--- /dev/null
+++ b/packages/app-aco/src/components/FolderTree/MenuActions/index.ts
@@ -0,0 +1 @@
+export * from "./MenuActions";
diff --git a/packages/app-aco/src/components/FolderTree/MenuActions/index.tsx b/packages/app-aco/src/components/FolderTree/MenuActions/index.tsx
deleted file mode 100644
index f7202d8701b..00000000000
--- a/packages/app-aco/src/components/FolderTree/MenuActions/index.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from "react";
-
-import { OptionsMenu } from "@webiny/app-admin";
-import { useAcoConfig } from "~/config";
-import { useFolder } from "~/hooks";
-
-import { Container } from "./styled";
-
-export const MenuActions = () => {
-    const { folder } = useFolder();
-    const { folder: folderConfig } = useAcoConfig();
-
-    // If the user cannot manage folder structure, no need to show the menu.
-    if (!folder.canManageStructure) {
-        return null;
-    }
-
-    return (
-        <Container className={"folder-tree-menu-action"}>
-            <OptionsMenu actions={folderConfig.actions} data-testid={"folder.tree.menu-action"} />
-        </Container>
-    );
-};
diff --git a/packages/app-aco/src/components/FolderTree/MenuActions/styled.tsx b/packages/app-aco/src/components/FolderTree/MenuActions/styled.tsx
deleted file mode 100644
index 37d1f66dde7..00000000000
--- a/packages/app-aco/src/components/FolderTree/MenuActions/styled.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import styled from "@emotion/styled";
-
-export const Container = styled("div")`
-    position: absolute;
-    right: 8px;
-    visibility: hidden;
-    cursor: pointer;
-`;
diff --git a/packages/app-aco/src/components/FolderTree/Node/Node.tsx b/packages/app-aco/src/components/FolderTree/Node/Node.tsx
new file mode 100644
index 00000000000..8982d20df65
--- /dev/null
+++ b/packages/app-aco/src/components/FolderTree/Node/Node.tsx
@@ -0,0 +1,139 @@
+import React, { useMemo } from "react";
+import { NodeModel, useDragOver } from "@minoru/react-dnd-treeview";
+import { cn, Text } from "@webiny/admin-ui";
+import { ReactComponent as Folder } from "@webiny/icons/folder.svg";
+import { ReactComponent as FolderShared } from "@webiny/icons/folder_shared.svg";
+import { ReactComponent as HomeIcon } from "@webiny/icons/home.svg";
+import { parseIdentifier } from "@webiny/utils";
+import { MenuActions } from "../MenuActions";
+import {
+    TreeItem,
+    TreeItemCollapsibleTrigger,
+    TreeItemContent,
+    TreeItemDragIndicator,
+    TreeItemIcon
+} from "./components";
+import { ROOT_FOLDER } from "~/constants";
+import { useFolder } from "~/hooks";
+import { DndFolderItemData, FolderItem } from "~/types";
+
+type NodeProps = {
+    node: NodeModel<DndFolderItemData>;
+    depth: number;
+    isOpen: boolean;
+    isLoading?: boolean;
+    enableActions?: boolean;
+    onToggle: (id: string | number) => void;
+    onClick: (data: FolderItem) => void;
+    handleRef: React.Ref<HTMLSpanElement>;
+};
+
+interface FolderProps extends React.HTMLAttributes<HTMLDivElement> {
+    text: string;
+    isRoot: boolean;
+    isActive: boolean;
+    hasNonInheritedPermissions?: boolean;
+    canManagePermissions?: boolean;
+}
+
+export const FolderNode = ({
+    isRoot,
+    isActive,
+    hasNonInheritedPermissions,
+    canManagePermissions,
+    text,
+    className,
+    ...props
+}: FolderProps) => {
+    let icon = <HomeIcon />;
+
+    if (!isRoot) {
+        if (hasNonInheritedPermissions && canManagePermissions) {
+            icon = <FolderShared />;
+        } else {
+            icon = <Folder />;
+        }
+    }
+
+    return (
+        <div
+            {...props}
+            className={cn("wby-flex wby-items-center wby-w-full wby-gap-sm wby-pr-xxl", className)}
+        >
+            <TreeItemIcon label={"Folder"} element={icon} active={isActive} />
+            <Text as={"div"} className={"wby-truncate"}>
+                {text}
+            </Text>
+        </div>
+    );
+};
+
+export const Node = ({
+    node,
+    depth,
+    isOpen,
+    isLoading,
+    enableActions,
+    onToggle,
+    onClick,
+    handleRef
+}: NodeProps) => {
+    const { folder } = useFolder();
+    const isRoot = folder.id === ROOT_FOLDER;
+
+    // Indentation logic:
+    // Depth 0 and 1 share the same base padding of 8px.
+    // From depth 2 onward, increase padding by 24px per level, starting from 32px.
+    const indent = depth <= 1 ? 8 : (depth - 2) * 24 + 32;
+
+    const dragOverProps = useDragOver(folder.id, isOpen, onToggle);
+
+    const handleToggle = (e: React.MouseEvent) => {
+        e.stopPropagation();
+        onToggle(folder.id);
+    };
+
+    const handleClick = (e: React.MouseEvent) => {
+        e.stopPropagation();
+        onClick(folder);
+        if (folder.id !== ROOT_FOLDER) {
+            onToggle(folder.id);
+        }
+    };
+
+    const id = useMemo(() => {
+        const { id } = parseIdentifier(String(folder.id));
+        return id;
+    }, [folder.id]);
+
+    const { hasNonInheritedPermissions, canManagePermissions } = folder || {};
+
+    return (
+        <TreeItem
+            active={!!node.data?.isFocused}
+            style={{ paddingInlineStart: indent }}
+            {...dragOverProps}
+        >
+            {isRoot ? null : (
+                <>
+                    <TreeItemDragIndicator handleRef={handleRef} />
+                    <TreeItemCollapsibleTrigger
+                        open={isOpen}
+                        loading={isLoading}
+                        onClick={handleToggle}
+                    />
+                </>
+            )}
+            <TreeItemContent onClick={handleClick} className={`aco-folder-${id}`}>
+                <FolderNode
+                    isRoot={isRoot}
+                    isActive={!!node.data?.isFocused}
+                    text={node.text}
+                    hasNonInheritedPermissions={hasNonInheritedPermissions}
+                    canManagePermissions={canManagePermissions}
+                />
+            </TreeItemContent>
+            {enableActions && !isRoot && <MenuActions />}
+        </TreeItem>
+    );
+};
diff --git a/packages/app-aco/src/components/FolderTree/Node/components/TreeItem.tsx b/packages/app-aco/src/components/FolderTree/Node/components/TreeItem.tsx
new file mode 100644
index 00000000000..8708583f3f5
--- /dev/null
+++ b/packages/app-aco/src/components/FolderTree/Node/components/TreeItem.tsx
@@ -0,0 +1,35 @@
+import React from "react";
+import { cn, cva, type VariantProps } from "@webiny/admin-ui";
+
+const treeItemVariants = cva(
+    [
+        "wby-group",
+        "wby-relative",
+        "wby-flex wby-items-center wby-gap-xs",
+        "wby-px-sm wby-py-xs-plus wby-rounded-md",
+        "wby-text-neutral-primary",
+        "wby-cursor-pointer",
+        "hover:wby-bg-neutral-dark/5"
+    ],
+    {
+        variants: {
+            active: {
+                true: "wby-bg-neutral-dark/5 wby-font-semibold"
+            }
+        }
+    }
+);
+
+type TreeItemProps = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof treeItemVariants>;
+
+const TreeItem = ({ children, className, active, ...props }: TreeItemProps) => {
+    return (
+        <div className={"wby-mb-xs wby-px-xs-plus"}>
+            <div {...props} className={cn(treeItemVariants({ active }), className)}>
+                {children}
+            </div>
+        </div>
+    );
+};
+
+export { TreeItem, type TreeItemProps };
diff --git a/packages/app-aco/src/components/FolderTree/Node/components/TreeItemCollapsibleTrigger.tsx b/packages/app-aco/src/components/FolderTree/Node/components/TreeItemCollapsibleTrigger.tsx
new file mode 100644
index 00000000000..b880ec0ffd4
--- /dev/null
+++ b/packages/app-aco/src/components/FolderTree/Node/components/TreeItemCollapsibleTrigger.tsx
@@ -0,0 +1,40 @@
+import React from "react";
+import { ReactComponent as ChevronRight } from "@webiny/icons/chevron_right.svg";
+import { cn, IconButton, Icon, type IconButtonProps, Loader } from "@webiny/admin-ui";
+
+interface TreeItemCollapsibleTriggerProps extends IconButtonProps {
+    open?: boolean;
+    loading?: boolean;
+}
+
+const TreeItemCollapsibleTrigger = ({
+    open,
+    loading,
+    ...props
+}: TreeItemCollapsibleTriggerProps) => {
+    if (loading) {
+        return <Loader size={"xs"} variant={"subtle"} />;
+    }
+
+    return (
+        <IconButton
+            {...props}
+            size={"xs"}
+            variant={"ghost"}
+            icon={
+                <Icon
+                    icon={<ChevronRight />}
+                    size="sm"
+                    label={"Open / Close tree item"}
+                    color={"neutral-strong"}
+                    className={cn(
+                        "wby-transition wby-transform wby-duration-100 wby-ease-linear",
+                        open ? "wby-rotate-90" : "wby-rotate-0"
+                    )}
+                />
+            }
+        />
+    );
+};
+
+export { TreeItemCollapsibleTrigger, type TreeItemCollapsibleTriggerProps };
diff --git a/packages/app-aco/src/components/FolderTree/Node/components/TreeItemContent.tsx b/packages/app-aco/src/components/FolderTree/Node/components/TreeItemContent.tsx
new file mode 100644
index 00000000000..a55f5744e7d
--- /dev/null
+++ b/packages/app-aco/src/components/FolderTree/Node/components/TreeItemContent.tsx
@@ -0,0 +1,14 @@
+import React from "react";
+import { cn } from "@webiny/admin-ui";
+
+interface TreeItemContentProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+const TreeItemContent = ({ children, className, ...props }: TreeItemContentProps) => {
+    return (
+        <div className={cn("wby-flex wby-items-center wby-w-full", className)} {...props}>
+            {children}
+        </div>
+    );
+};
+
+export { TreeItemContent, type TreeItemContentProps };
diff --git a/packages/app-aco/src/components/FolderTree/Node/components/TreeItemDragIndicator.tsx b/packages/app-aco/src/components/FolderTree/Node/components/TreeItemDragIndicator.tsx
new file mode 100644
index 00000000000..f75a70f0e71
--- /dev/null
+++ b/packages/app-aco/src/components/FolderTree/Node/components/TreeItemDragIndicator.tsx
@@ -0,0 +1,31 @@
+import React from "react";
+import { ReactComponent as DragIndicator } from "@webiny/icons/drag_indicator.svg";
+import { IconButton, Icon, cn } from "@webiny/admin-ui";
+
+type TreeItemDragIndicatorProps = {
+    handleRef?: React.Ref<HTMLSpanElement>;
+};
+const TreeItemDragIndicator = ({ handleRef }: TreeItemDragIndicatorProps) => {
+    const [isDragging, setIsDragging] = React.useState(false);
+
+    return (
+        <span ref={handleRef}>
+            <IconButton
+                size={"xs"}
+                variant={"secondary"}
+                icon={<Icon icon={<DragIndicator />} size="sm" label={"Drag to reorder"} />}
+                onMouseDown={() => setIsDragging(true)}
+                onMouseUp={() => setIsDragging(false)}
+                onMouseLeave={() => setIsDragging(false)}
+                className={cn([
+                    "wby-absolute wby-top-sm -wby-left-sm",
+                    "wby-invisible group-hover:wby-visible",
+                    "wby-size-md",
+                    isDragging ? "wby-cursor-grabbing" : "wby-cursor-grab"
+                ])}
+            />
+        </span>
+    );
+};
+
+export { TreeItemDragIndicator, TreeItemDragIndicatorProps };
diff --git a/packages/app-aco/src/components/FolderTree/Node/components/TreeItemIcon.tsx b/packages/app-aco/src/components/FolderTree/Node/components/TreeItemIcon.tsx
new file mode 100644
index 00000000000..951752b433f
--- /dev/null
+++ b/packages/app-aco/src/components/FolderTree/Node/components/TreeItemIcon.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+import { Icon, type IconProps } from "@webiny/admin-ui";
+
+interface TreeItemIconProps extends Omit<IconProps, "icon"> {
+    element?: React.ReactNode;
+    active?: boolean;
+}
+
+const TreeItemIcon = ({ element, active, ...props }: TreeItemIconProps) => {
+    return (
+        <Icon
+            icon={element}
+            size={"sm"}
+            color={active ? "neutral-strong" : "neutral-light"}
+            {...props}
+        />
+    );
+};
+
+export { TreeItemIcon, type TreeItemIconProps };
diff --git a/packages/app-aco/src/components/FolderTree/Node/components/index.ts b/packages/app-aco/src/components/FolderTree/Node/components/index.ts
new file mode 100644
index 00000000000..ebb6cf02ccb
--- /dev/null
+++ b/packages/app-aco/src/components/FolderTree/Node/components/index.ts
@@ -0,0 +1,5 @@
+export * from "./TreeItemCollapsibleTrigger";
+export * from "./TreeItem";
+export * from "./TreeItemContent";
+export * from "./TreeItemDragIndicator";
+export * from "./TreeItemIcon";
diff --git a/packages/app-aco/src/components/FolderTree/Node/index.ts b/packages/app-aco/src/components/FolderTree/Node/index.ts
new file mode 100644
index 00000000000..3213990515b
--- /dev/null
+++ b/packages/app-aco/src/components/FolderTree/Node/index.ts
@@ -0,0 +1 @@
+export * from "./Node";
diff --git a/packages/app-aco/src/components/FolderTree/Node/index.tsx b/packages/app-aco/src/components/FolderTree/Node/index.tsx
deleted file mode 100644
index cf3fe1d3ef4..00000000000
--- a/packages/app-aco/src/components/FolderTree/Node/index.tsx
+++ /dev/null
@@ -1,112 +0,0 @@
-import React, { useMemo } from "react";
-import { ReactComponent as ArrowRight } from "@material-symbols/svg-400/rounded/arrow_right.svg";
-import { ReactComponent as Folder } from "@material-symbols/svg-400/rounded/folder-fill.svg";
-import { ReactComponent as FolderShared } from "@material-symbols/svg-400/rounded/folder_shared-fill.svg";
-import { ReactComponent as HomeIcon } from "@material-design-icons/svg/filled/home.svg";
-import { NodeModel, useDragOver } from "@minoru/react-dnd-treeview";
-import { MenuActions } from "../MenuActions";
-import { Container, ArrowIcon, FolderIcon, Text, Content } from "./styled";
-import { DndFolderItemData, FolderItem } from "~/types";
-import { parseIdentifier } from "@webiny/utils";
-import { ROOT_FOLDER } from "~/constants";
-import { useFolder } from "~/hooks";
-
-type NodeProps = {
-    node: NodeModel<DndFolderItemData>;
-    depth: number;
-    isOpen: boolean;
-    enableActions?: boolean;
-    onToggle: (id: string | number) => void;
-    onClick: (data: FolderItem) => void;
-};
-
-type FolderProps = {
-    text: string;
-    isRoot: boolean;
-    isOpen: boolean;
-    isFocused?: boolean;
-    hasNonInheritedPermissions?: boolean;
-    canManagePermissions?: boolean;
-};
-
-export const FolderNode = ({
-    isRoot,
-    isFocused,
-    hasNonInheritedPermissions,
-    canManagePermissions,
-    text
-}: FolderProps) => {
-    let icon = <HomeIcon />;
-
-    if (!isRoot) {
-        if (hasNonInheritedPermissions && canManagePermissions) {
-            icon = <FolderShared />;
-        } else {
-            icon = <Folder />;
-        }
-    }
-
-    return (
-        <>
-            <FolderIcon>{icon}</FolderIcon>
-            <Text className={isFocused ? "focused" : ""} use={"body2"}>
-                {text}
-            </Text>
-        </>
-    );
-};
-
-export const Node = ({ node, depth, isOpen, enableActions, onToggle, onClick }: NodeProps) => {
-    const { folder } = useFolder();
-    const isRoot = folder.id === ROOT_FOLDER;
-    // Move the placeholder line to the left based on the element depth within the tree.
-    // Let's add some pixels so that the element is detached from the container but takes up the whole length while it's highlighted during dnd.
-    const indent = depth === 1 ? 4 : (depth - 1) * 20 + 8;
-
-    const dragOverProps = useDragOver(folder.id, isOpen, onToggle);
-
-    const handleToggle = (e: React.MouseEvent) => {
-        e.stopPropagation();
-        onToggle(folder.id);
-    };
-
-    const handleClick = (e: React.MouseEvent) => {
-        e.stopPropagation();
-        onClick(folder);
-        if (folder.id !== ROOT_FOLDER) {
-            onToggle(folder.id);
-        }
-    };
-
-    const id = useMemo(() => {
-        const { id } = parseIdentifier(String(folder.id));
-        return id;
-    }, [folder.id]);
-
-    const { hasNonInheritedPermissions, canManagePermissions } = folder || {};
-
-    return (
-        <Container
-            isFocused={!!node.data?.isFocused}
-            style={{ paddingInlineStart: indent }}
-            {...dragOverProps}
-        >
-            {isRoot ? null : (
-                <ArrowIcon isOpen={isOpen} onClick={handleToggle}>
-                    <ArrowRight />
-                </ArrowIcon>
-            )}
-            <Content onClick={handleClick} className={`aco-folder-${id}`}>
-                <FolderNode
-                    isRoot={isRoot}
-                    text={node.text}
-                    hasNonInheritedPermissions={hasNonInheritedPermissions}
-                    canManagePermissions={canManagePermissions}
-                    isOpen={isRoot ? true : isOpen}
-                    isFocused={!!node.data?.isFocused}
-                />
-            </Content>
-            {enableActions && !isRoot && <MenuActions />}
-        </Container>
-    );
-};
diff --git a/packages/app-aco/src/components/FolderTree/Node/styled.tsx b/packages/app-aco/src/components/FolderTree/Node/styled.tsx
deleted file mode 100644
index e0b5edc6c8f..00000000000
--- a/packages/app-aco/src/components/FolderTree/Node/styled.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import styled from "@emotion/styled";
-import { Typography } from "@webiny/ui/Typography";
-
-type ContainerProps = {
-    isFocused: boolean;
-};
-
-type ArrowIconContainerProps = {
-    isOpen: boolean;
-};
-
-export const Container = styled("div")<ContainerProps>`
-    display: flex;
-    align-items: center;
-    padding: 4px 0 4px 4px;
-    background: ${props => props.isFocused && "var(--mdc-theme-on-background)"};
-    color: var(--webiny-theme-color-text-secondary);
-    fill: currentColor;
-    position: relative;
-    &:hover .folder-tree-menu-action {
-        visibility: visible;
-    }
-`;
-
-export const Icon = styled("div")`
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 24px;
-    width: 24px;
-    cursor: pointer;
-    fill: var(--mdc-theme-text-secondary-on-background);
-`;
-
-export const ArrowIcon = styled(Icon)<ArrowIconContainerProps>`
-    transition: transform linear 0.1s;
-    transform: ${props => (props.isOpen ? "rotate(90deg)" : "rotate(0deg)")};
-`;
-
-export const FolderIcon = styled(Icon)`
-    margin-right: 4px;
-`;
-
-export const Content = styled("div")`
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-    white-space: nowrap;
-    overflow: hidden;
-    width: 100%;
-`;
-
-export const Text = styled(Typography)`
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    line-height: 24px;
-    &.focused {
-        font-weight: 600;
-    }
-`;
diff --git a/packages/app-aco/src/components/FolderTree/NodePreview/NodePreview.tsx b/packages/app-aco/src/components/FolderTree/NodePreview/NodePreview.tsx
new file mode 100644
index 00000000000..810efeaf0e1
--- /dev/null
+++ b/packages/app-aco/src/components/FolderTree/NodePreview/NodePreview.tsx
@@ -0,0 +1,18 @@
+import React from "react";
+import { FolderNode } from "../Node";
+import { TreeItem } from "~/components/FolderTree/Node/components";
+
+type NodePreviewProps = {
+    text: string;
+};
+
+export const NodePreview = ({ text }: NodePreviewProps) => {
+    return (
+        <TreeItem
+            className={"wby-bg-neutral-dark/10 wby-absolute wby-z-[100]"}
+            style={{ maxWidth: 256 }}
+        >
+            <FolderNode text={text} isRoot={false} isActive={false} />
+        </TreeItem>
+    );
+};
diff --git a/packages/app-aco/src/components/FolderTree/NodePreview/index.tsx b/packages/app-aco/src/components/FolderTree/NodePreview/index.tsx
index c2c8f3c6a72..f535fcf7e75 100644
--- a/packages/app-aco/src/components/FolderTree/NodePreview/index.tsx
+++ b/packages/app-aco/src/components/FolderTree/NodePreview/index.tsx
@@ -1,21 +1 @@
-import React from "react";
-import { DragLayerMonitorProps } from "@minoru/react-dnd-treeview";
-
-import { FolderNode } from "../Node";
-import { Container } from "./styled";
-
-import { DndFolderItemData } from "~/types";
-
-type NodePreviewProps = {
-    monitorProps: DragLayerMonitorProps<DndFolderItemData>;
-};
-
-export const NodePreview = (props: NodePreviewProps) => {
-    const item = props.monitorProps.item;
-
-    return (
-        <Container>
-            <FolderNode text={item.text} isOpen={false} isRoot={false} />
-        </Container>
-    );
-};
+export * from "./NodePreview";
diff --git a/packages/app-aco/src/components/FolderTree/NodePreview/styled.tsx b/packages/app-aco/src/components/FolderTree/NodePreview/styled.tsx
deleted file mode 100644
index ef3e05ebf60..00000000000
--- a/packages/app-aco/src/components/FolderTree/NodePreview/styled.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import styled from "@emotion/styled";
-
-export const Container = styled("div")`
-    background-color: var(--webiny-theme-color-primary);
-    border-radius: var(--webiny-theme-border-radius);
-    color: var(--webiny-theme-color-on-primary);
-    fill: currentColor;
-    display: inline-grid;
-    grid-template-columns: auto auto;
-    align-items: center;
-    padding: 4px 8px;
-    pointer-events: none;
-`;
diff --git a/packages/app-aco/src/components/FolderTree/Placeholder/index.tsx b/packages/app-aco/src/components/FolderTree/Placeholder/index.tsx
deleted file mode 100644
index 78bf1c46854..00000000000
--- a/packages/app-aco/src/components/FolderTree/Placeholder/index.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from "react";
-
-import { Element } from "./styled";
-
-interface PlaceholderProps {
-    depth: number;
-}
-
-export const Placeholder = ({ depth }: PlaceholderProps) => {
-    // Move the placeholder line to the left based on the element depth within the tree.
-    // Let's add some pixels so that the element is detached from the container but takes up the whole length while it's highlighted during dnd.
-    const left = depth * 24 + 8;
-    return <Element style={{ left }} />;
-};
diff --git a/packages/app-aco/src/components/FolderTree/Placeholder/styled.tsx b/packages/app-aco/src/components/FolderTree/Placeholder/styled.tsx
deleted file mode 100644
index 2de9d5c0205..00000000000
--- a/packages/app-aco/src/components/FolderTree/Placeholder/styled.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import styled from "@emotion/styled";
-
-export const Element = styled("div")`
-    background-color: var(--webiny-theme-color-primary);
-    height: 2px;
-    position: absolute;
-    right: 0;
-    top: 0;
-    transform: translateY(-50%);
-`;
diff --git a/packages/app-aco/src/components/FolderTree/index.tsx b/packages/app-aco/src/components/FolderTree/index.tsx
index b874066ae59..4edcc64b620 100644
--- a/packages/app-aco/src/components/FolderTree/index.tsx
+++ b/packages/app-aco/src/components/FolderTree/index.tsx
@@ -1,11 +1,9 @@
 import React, { useMemo } from "react";
-import { Tooltip } from "@webiny/ui/Tooltip";
-import { useGetFolderLevelPermission, useListFolders } from "~/features";
-import { CreateButton } from "./ButtonCreate";
-import { Empty } from "./Empty";
+import { Tooltip } from "@webiny/admin-ui";
+import { useGetFolderHierarchy, useGetFolderLevelPermission } from "~/features";
+import { ButtonCreate } from "./ButtonCreate";
 import { Loader } from "./Loader";
 import { List } from "./List";
-import { Container } from "./styled";
 import { FolderItem } from "~/types";
 import { ROOT_FOLDER } from "~/constants";
 import { AcoWithConfig } from "~/config";
@@ -29,7 +27,7 @@ export const FolderTree = ({
     onFolderClick,
     rootFolderLabel
 }: FolderTreeProps) => {
-    const { loading, folders } = useListFolders();
+    const { folders, getIsFolderLoading } = useGetFolderHierarchy();
     const { getFolderLevelPermission: canManageStructure } =
         useGetFolderLevelPermission("canManageStructure");
 
@@ -38,55 +36,49 @@ export const FolderTree = ({
             return [];
         }
 
-        return folders.reduce<FolderItem[]>((acc, item) => {
-            if (item.id === ROOT_FOLDER && rootFolderLabel) {
-                return [...acc, { ...item, title: rootFolderLabel }];
-            }
-            return [...acc, item];
-        }, []);
-    }, [folders]);
+        return folders.map(item =>
+            item.id === ROOT_FOLDER && rootFolderLabel ? { ...item, title: rootFolderLabel } : item
+        );
+    }, [folders, rootFolderLabel]);
 
-    const renderList = () => {
-        if (loading.INIT || loading.LIST) {
-            return <Loader />;
+    const createButton = useMemo(() => {
+        if (!enableCreate) {
+            return null;
         }
 
-        let createButton = null;
-        if (enableCreate) {
-            const canCreate = canManageStructure(focusedFolderId!);
-
-            createButton = <CreateButton disabled={!canCreate} />;
+        const canCreate = canManageStructure(focusedFolderId!);
+        const button = <ButtonCreate disabled={!canCreate} />;
 
-            if (!canCreate) {
-                createButton = (
-                    <Tooltip content={`Cannot create folder because you're not an owner.`}>
-                        {createButton}
-                    </Tooltip>
-                );
-            }
-        }
+        return canCreate ? (
+            button
+        ) : (
+            <Tooltip
+                content={`Cannot create folder because you're not an owner.`}
+                trigger={button}
+            />
+        );
+    }, [enableCreate, canManageStructure, focusedFolderId, localFolders]);
 
-        if (localFolders.length > 0) {
-            return (
-                <AcoWithConfig>
-                    <List
-                        folders={localFolders}
-                        onFolderClick={onFolderClick}
-                        focusedFolderId={focusedFolderId}
-                        hiddenFolderIds={hiddenFolderIds}
-                        enableActions={enableActions}
-                    />
-                    {enableCreate && createButton}
-                </AcoWithConfig>
-            );
-        }
+    if (getIsFolderLoading()) {
+        return <Loader />;
+    }
 
-        return (
-            <>
-                <Empty />
-                {createButton}
-            </>
-        );
-    };
-    return <Container>{renderList()}</Container>;
+    return (
+        <div className="wby-my-xs">
+            <AcoWithConfig>
+                <List
+                    folders={localFolders}
+                    onFolderClick={onFolderClick}
+                    focusedFolderId={focusedFolderId}
+                    hiddenFolderIds={hiddenFolderIds}
+                    enableActions={enableActions}
+                />
+                {enableCreate && (
+                    <div className={"wby-m-xs-plus wby-mt-sm-plus wby-mb-lg wby-pl-sm-extra"}>
+                        {createButton}
+                    </div>
+                )}
+            </AcoWithConfig>
+        </div>
+    );
 };
diff --git a/packages/app-aco/src/components/FolderTree/styled.tsx b/packages/app-aco/src/components/FolderTree/styled.tsx
deleted file mode 100644
index 9fb2a781136..00000000000
--- a/packages/app-aco/src/components/FolderTree/styled.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import styled from "@emotion/styled";
-
-export const Container = styled("div")`
-    position: relative;
-    margin: 0;
-
-    & .treeRoot {
-        box-sizing: border-box;
-        min-width: 200px;
-    }
-
-    & .dropTarget {
-        background: var(--mdc-theme-on-background);
-    }
-
-    & .draggingSource {
-        opacity: 0.5;
-    }
-
-    & .placeholderContainer {
-        position: relative;
-    }
-`;
diff --git a/packages/app-aco/src/components/Search/Search.tsx b/packages/app-aco/src/components/Search/Search.tsx
index e117b8571cc..54aa9e34e76 100644
--- a/packages/app-aco/src/components/Search/Search.tsx
+++ b/packages/app-aco/src/components/Search/Search.tsx
@@ -1,17 +1,23 @@
 import React from "react";
-import SearchUI from "@webiny/app-admin/components/SearchUI";
-
-import { SearchWrapper } from "./styled";
+import { Icon, Input } from "@webiny/admin-ui";
+import { ReactComponent as SearchIcon } from "@webiny/icons/search.svg";
 
 interface SearchProps {
     value: string;
     onChange: (value: string) => void;
+    placeholder?: string;
 }
 
-export const Search = ({ value, onChange }: SearchProps) => {
+export const Search = ({ value, onChange, placeholder }: SearchProps) => {
     return (
-        <SearchWrapper>
-            <SearchUI value={value} onChange={onChange} />
-        </SearchWrapper>
+        <Input
+            value={value}
+            onChange={onChange}
+            placeholder={placeholder}
+            size={"md"}
+            variant={"ghost"}
+            startIcon={<Icon label={"Search"} icon={<SearchIcon />} />}
+            className={"wby-w-full"}
+        />
     );
 };
diff --git a/packages/app-aco/src/components/Search/styled.tsx b/packages/app-aco/src/components/Search/styled.tsx
deleted file mode 100644
index 5121250253f..00000000000
--- a/packages/app-aco/src/components/Search/styled.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import styled from "@emotion/styled";
-
-export const SearchWrapper = styled("div")`
-    width: 300px;
-    height: 34px;
-    border: 1px solid rgba(0, 0, 0, 0.12);
-`;
diff --git a/packages/app-aco/src/components/Table/components/Table/ColumnVisibility/ColumnsVisibilityUpdater.ts b/packages/app-aco/src/components/Table/components/Table/ColumnVisibility/ColumnsVisibilityUpdater.ts
index c176655d914..f4ffa9163a6 100644
--- a/packages/app-aco/src/components/Table/components/Table/ColumnVisibility/ColumnsVisibilityUpdater.ts
+++ b/packages/app-aco/src/components/Table/components/Table/ColumnVisibility/ColumnsVisibilityUpdater.ts
@@ -1,7 +1,7 @@
 import { makeAutoObservable } from "mobx";
+import type { OnDataTableColumnVisibilityChange } from "@webiny/admin-ui";
 import { IColumnsVisibilityRepository } from "./IColumnsVisibilityRepository";
 import { IColumnsVisibilityUpdater } from "./IColumnsVisibilityUpdater";
-import { OnColumnVisibilityChange } from "@webiny/ui/DataTable";
 
 export class ColumnsVisibilityUpdater implements IColumnsVisibilityUpdater {
     private repository: IColumnsVisibilityRepository;
@@ -11,7 +11,7 @@ export class ColumnsVisibilityUpdater implements IColumnsVisibilityUpdater {
         makeAutoObservable(this);
     }
 
-    public update: OnColumnVisibilityChange = async updaterOrValue => {
+    public update: OnDataTableColumnVisibilityChange = async updaterOrValue => {
         const currentVisibility = this.repository.getVisibility();
         let newVisibility = currentVisibility;
 
diff --git a/packages/app-aco/src/components/Table/components/Table/ColumnVisibility/IColumnsVisibilityUpdater.ts b/packages/app-aco/src/components/Table/components/Table/ColumnVisibility/IColumnsVisibilityUpdater.ts
index 38cc8306986..9e5f2c25dde 100644
--- a/packages/app-aco/src/components/Table/components/Table/ColumnVisibility/IColumnsVisibilityUpdater.ts
+++ b/packages/app-aco/src/components/Table/components/Table/ColumnVisibility/IColumnsVisibilityUpdater.ts
@@ -1,5 +1,5 @@
-import { OnColumnVisibilityChange } from "@webiny/ui/DataTable";
+import type { OnDataTableColumnVisibilityChange } from "@webiny/admin-ui";
 
 export interface IColumnsVisibilityUpdater {
-    update: OnColumnVisibilityChange;
+    update: OnDataTableColumnVisibilityChange;
 }
diff --git a/packages/app-aco/src/components/Table/components/Table/Columns/ColumnMapper.ts b/packages/app-aco/src/components/Table/components/Table/Columns/ColumnMapper.ts
index 0957cad5ad1..0fbda781dfe 100644
--- a/packages/app-aco/src/components/Table/components/Table/Columns/ColumnMapper.ts
+++ b/packages/app-aco/src/components/Table/components/Table/Columns/ColumnMapper.ts
@@ -1,5 +1,5 @@
 import React from "react";
-import { Column as DataTableColumn } from "@webiny/ui/DataTable";
+import type { DataTableColumn } from "@webiny/admin-ui";
 import { Column, ColumnDTO } from "./Column";
 
 export class ColumnMapper {
diff --git a/packages/app-aco/src/components/Table/components/Table/Table.tsx b/packages/app-aco/src/components/Table/components/Table/Table.tsx
index a02bb4885cf..6d4f1ecbb61 100644
--- a/packages/app-aco/src/components/Table/components/Table/Table.tsx
+++ b/packages/app-aco/src/components/Table/components/Table/Table.tsx
@@ -1,5 +1,9 @@
 import React, { useEffect, useMemo } from "react";
-import { DefaultData, OnSortingChange, Sorting } from "@webiny/ui/DataTable";
+import type {
+    DataTableDefaultData,
+    DataTableSorting,
+    OnDataTableSortingChange
+} from "@webiny/admin-ui";
 import { Column, ColumnsPresenter, columnsRepositoryFactory } from "./Columns";
 import {
     ColumnsVisibilityDecorator,
@@ -18,13 +22,13 @@ export interface TableProps<T> {
     nameColumnId?: string;
     namespace: string;
     onSelectRow?: (rows: T[] | []) => void;
-    onSortingChange: OnSortingChange;
+    onSortingChange: OnDataTableSortingChange;
     onToggleRow?: (row: T) => void;
-    selected: DefaultData[];
-    sorting: Sorting;
+    selected: DataTableDefaultData[];
+    sorting: DataTableSorting;
 }
 
-export const Table = <T extends Record<string, any> & DefaultData>({
+export const Table = <T extends Record<string, any> & DataTableDefaultData>({
     namespace,
     ...props
 }: TableProps<T>) => {
diff --git a/packages/app-aco/src/components/Table/components/Table/TableInner.tsx b/packages/app-aco/src/components/Table/components/Table/TableInner.tsx
index 9f9afba9959..6f2fb525bd2 100644
--- a/packages/app-aco/src/components/Table/components/Table/TableInner.tsx
+++ b/packages/app-aco/src/components/Table/components/Table/TableInner.tsx
@@ -1,6 +1,12 @@
 import React, { useCallback, useMemo } from "react";
 import { observer } from "mobx-react-lite";
-import { Columns, DataTable, DefaultData, OnSortingChange, Sorting } from "@webiny/ui/DataTable";
+import {
+    DataTable,
+    type DataTableColumns,
+    type DataTableDefaultData,
+    type DataTableSorting,
+    OnDataTableSortingChange
+} from "@webiny/admin-ui";
 import { ColumnMapper, ColumnsPresenter } from "./Columns";
 import { ColumnsVisibilityPresenter, ColumnsVisibilityUpdater } from "./ColumnVisibility";
 import { TablePresenter } from "./TablePresenter";
@@ -14,15 +20,15 @@ export interface TableInnerProps<T> {
     loading?: boolean;
     nameColumnId?: string;
     onSelectRow?: (rows: T[] | []) => void;
-    onSortingChange: OnSortingChange;
+    onSortingChange: OnDataTableSortingChange;
     onToggleRow?: (row: T) => void;
-    selected: DefaultData[];
-    sorting: Sorting;
+    selected: DataTableDefaultData[];
+    sorting: DataTableSorting;
     tablePresenter: TablePresenter;
 }
 
 export const TableInner = observer(
-    <T extends Record<string, any> & DefaultData>(props: TableInnerProps<T>) => {
+    <T extends Record<string, any> & DataTableDefaultData>(props: TableInnerProps<T>) => {
         const cellRenderer = useCallback(
             (row: T, cell: string | React.ReactElement): string | number | JSX.Element | null => {
                 if (typeof cell === "string") {
@@ -42,10 +48,13 @@ export const TableInner = observer(
                 // Determine the column name, using the provided `nameColumnId` if the default is 'name'
                 const name = defaultName === "name" ? nameColumnId : defaultName;
 
-                result[name as keyof Columns<T>] = ColumnMapper.toDataTable(column, cellRenderer);
+                result[name as keyof DataTableColumns<T>] = ColumnMapper.toDataTable(
+                    column,
+                    cellRenderer
+                );
 
                 return result;
-            }, {} as Columns<T>);
+            }, {} as DataTableColumns<T>);
         }, [props.columnsPresenter.vm.columns]);
 
         return (
@@ -56,7 +65,7 @@ export const TableInner = observer(
                 data={props.data}
                 initialSorting={props.tablePresenter.vm.initialSorting}
                 isRowSelectable={row => row.original.$selectable ?? false}
-                loadingInitial={props.loading}
+                loading={props.loading}
                 onSelectRow={props.onSelectRow}
                 onSortingChange={props.onSortingChange}
                 onToggleRow={props.onToggleRow}
@@ -64,7 +73,7 @@ export const TableInner = observer(
                     props.selected.find(item => row.id === item.id)
                 )}
                 sorting={props.sorting}
-                stickyRows={1}
+                stickyHeader={true}
             />
         );
     }
diff --git a/packages/app-aco/src/components/Table/components/Table/TablePresenter.ts b/packages/app-aco/src/components/Table/components/Table/TablePresenter.ts
index dacb861feb5..8b7e3f03c1c 100644
--- a/packages/app-aco/src/components/Table/components/Table/TablePresenter.ts
+++ b/packages/app-aco/src/components/Table/components/Table/TablePresenter.ts
@@ -1,7 +1,7 @@
-import { Sorting } from "@webiny/ui/DataTable";
+import { DataTableSorting } from "@webiny/admin-ui";
 
 export interface TablePresenterViewModel {
-    initialSorting: Sorting;
+    initialSorting: DataTableSorting;
 }
 
 export interface ITablePresenter {
diff --git a/packages/app-aco/src/components/Table/useTableRow.tsx b/packages/app-aco/src/components/Table/useTableRow.tsx
index b81e06a23c7..3abf51dfe1a 100644
--- a/packages/app-aco/src/components/Table/useTableRow.tsx
+++ b/packages/app-aco/src/components/Table/useTableRow.tsx
@@ -1,5 +1,5 @@
 import React, { Context, createContext, ReactNode, useContext } from "react";
-import { DefaultData } from "@webiny/ui/DataTable";
+import { DataTableDefaultData } from "@webiny/admin-ui";
 
 export interface TableRowContextData<T> {
     row: T;
@@ -24,9 +24,9 @@ export const TableRowProvider = <T,>({ row, children }: TableRowProviderProps<T>
 
 export const createUseTableRow = <TBaseRow = Record<string, any>,>() => {
     return <TUserRow = Record<string, any>,>() => {
-        const context = useContext<TableRowContextData<TBaseRow & DefaultData & TUserRow>>(
+        const context = useContext<TableRowContextData<TBaseRow & DataTableDefaultData & TUserRow>>(
             TableRowContext as unknown as Context<
-                TableRowContextData<TBaseRow & DefaultData & TUserRow>
+                TableRowContextData<TBaseRow & DataTableDefaultData & TUserRow>
             >
         );
 
diff --git a/packages/app-aco/src/components/index.tsx b/packages/app-aco/src/components/index.tsx
index faa379e8249..3fe2034096d 100644
--- a/packages/app-aco/src/components/index.tsx
+++ b/packages/app-aco/src/components/index.tsx
@@ -2,6 +2,7 @@ export * from "./Actions";
 export * from "./AdvancedSearch";
 export * from "./Extensions";
 export * from "./FolderGrid";
+export * from "./FolderIcons";
 export * from "./FolderTree";
 export * from "./Search";
 export * from "./Table";
diff --git a/packages/app-aco/src/constants.ts b/packages/app-aco/src/constants.ts
index 4347c18a4df..00fc5e38839 100644
--- a/packages/app-aco/src/constants.ts
+++ b/packages/app-aco/src/constants.ts
@@ -1 +1 @@
-export const ROOT_FOLDER = "root";
+export * from "@webiny/shared-aco/constants";
diff --git a/packages/app-aco/src/contexts/DisplayError/index.tsx b/packages/app-aco/src/contexts/DisplayError/index.tsx
index 45aba0f8d75..2f7fe161917 100644
--- a/packages/app-aco/src/contexts/DisplayError/index.tsx
+++ b/packages/app-aco/src/contexts/DisplayError/index.tsx
@@ -1,24 +1,4 @@
 import React from "react";
-import styled from "@emotion/styled";
-
-const Wrapper = styled("div")({
-    display: "flex",
-    width: "100%",
-    height: "60vh",
-    alignItems: "center",
-    justifyContent: "center"
-});
-const Box = styled("div")({
-    display: "flex",
-    width: "30vw",
-    minHeight: "20vh",
-    justifyContent: "center",
-    alignItems: "center",
-    backgroundColor: "var(--mdc-theme-surface)",
-    " > strong": {
-        fontWeight: "bold"
-    }
-});
 
 interface DisplayErrorProps {
     children: React.ReactNode;
@@ -26,8 +6,14 @@ interface DisplayErrorProps {
 
 export const DisplayError = ({ children }: DisplayErrorProps) => {
     return (
-        <Wrapper>
-            <Box>{children}</Box>
-        </Wrapper>
+        <div className={"wby-flex wby-w-full wby-h-60vh wby-items-center wby-justify-center"}>
+            <div
+                className={
+                    "wby-flex wby-w-[30vw] wby-min-h-[20vh] wby-items-center wby-justify-center wby-bg-neutral-base wby-font-semibold"
+                }
+            >
+                {children}
+            </div>
+        </div>
     );
 };
diff --git a/packages/app-aco/src/contexts/Loading/Loading.tsx b/packages/app-aco/src/contexts/Loading/Loading.tsx
new file mode 100644
index 00000000000..27a9147321f
--- /dev/null
+++ b/packages/app-aco/src/contexts/Loading/Loading.tsx
@@ -0,0 +1,10 @@
+import React from "react";
+import { OverlayLoader } from "@webiny/admin-ui";
+
+export const Loading = () => {
+    return (
+        <div className={"wby-w-screen wby-h-screen wby-fixed wby-top-0 wby-left-0 wby-z-50"}>
+            <OverlayLoader />
+        </div>
+    );
+};
diff --git a/packages/app-aco/src/contexts/Loading/index.tsx b/packages/app-aco/src/contexts/Loading/index.tsx
new file mode 100644
index 00000000000..618e384b5d4
--- /dev/null
+++ b/packages/app-aco/src/contexts/Loading/index.tsx
@@ -0,0 +1 @@
+export * from "./Loading";
diff --git a/packages/app-aco/src/contexts/acoList.tsx b/packages/app-aco/src/contexts/acoList.tsx
index 53f4709a91b..f59df0470ea 100644
--- a/packages/app-aco/src/contexts/acoList.tsx
+++ b/packages/app-aco/src/contexts/acoList.tsx
@@ -12,7 +12,11 @@ import {
     SearchRecordItem
 } from "~/types";
 import { useAcoApp, useNavigateFolder } from "~/hooks";
-import { useGetDescendantFolders, useListFolders } from "~/features";
+import {
+    useGetDescendantFolders,
+    useGetFolderHierarchy,
+    useListFoldersByParentIds
+} from "~/features";
 import { FoldersContext } from "~/contexts/folders";
 import { SearchRecordsContext } from "~/contexts/records";
 import { sortTableItems, validateOrGetDefaultDbSort } from "~/sorting";
@@ -121,8 +125,13 @@ export const AcoListProvider = ({ children, ...props }: AcoListProviderProps) =>
     const { identity } = useSecurity();
     const { currentFolderId } = useNavigateFolder();
     const { folderIdPath, folderIdInPath } = useAcoApp();
-    const { folders: originalFolders, loading: foldersLoading } = useListFolders();
+    const {
+        folders: originalFolders,
+        getIsFolderLoading,
+        getFolderHierarchy
+    } = useGetFolderHierarchy();
     const { getDescendantFolders } = useGetDescendantFolders();
+    const { listFoldersByParentIds } = useListFoldersByParentIds();
     const folderContext = useContext(FoldersContext);
     const searchContext = useContext(SearchRecordsContext);
 
@@ -138,18 +147,18 @@ export const AcoListProvider = ({ children, ...props }: AcoListProviderProps) =>
     const { records: originalRecords, loading: recordsLoading, listRecords, meta } = searchContext;
 
     /**
-     * On first mount, call `listFolders` and `setState`, which will either issue a network request, or load folders and records from cache.
+     * On first mount, call `getFolderHierarchy` and `setState`, which will either issue a network request, or load folders and records from cache.
      * We don't need to store the result of it to any local state; that is managed by the context provider.
      *
-     * IMPORTANT: we check if the folders[type] array exists: the hook can be used from multiple components and
-     * fetch the outdated list from Apollo Cache. Since the state is managed locally, we fetch the folders only
-     * at the first mount.
-     *
      * We don't call `listRecords` directly, instead we call `setState` making it the only driver to fetch records from the apis.
      */
     useEffect(() => {
-        if (!currentFolderId) {
-            return;
+        // The folders collection is empty, it must be the first render, let's load the full hierarchy.
+        if (folders.length === 0) {
+            getFolderHierarchy(currentFolderId);
+        } else {
+            // Otherwise let's load only the current folder sub-tree
+            listFoldersByParentIds([currentFolderId]);
         }
 
         setState(state => {
@@ -393,7 +402,7 @@ export const AcoListProvider = ({ children, ...props }: AcoListProviderProps) =>
         records,
         listTitle,
         isListLoading: Boolean(
-            recordsLoading.INIT || foldersLoading.INIT || recordsLoading.LIST || foldersLoading.LIST
+            recordsLoading.INIT || recordsLoading.LIST || getIsFolderLoading(currentFolderId)
         ),
         isListLoadingMore: Boolean(recordsLoading.LIST_MORE),
         meta,
diff --git a/packages/app-aco/src/contexts/app.tsx b/packages/app-aco/src/contexts/app.tsx
index e3afcbbb39f..2a497b46068 100644
--- a/packages/app-aco/src/contexts/app.tsx
+++ b/packages/app-aco/src/contexts/app.tsx
@@ -1,12 +1,12 @@
 import React, { useEffect, useMemo, useState } from "react";
 import { ApolloClient } from "apollo-client";
-import { CircularProgress } from "@webiny/ui/Progress";
 import { DialogsProvider } from "@webiny/app-admin";
 import { AcoApp, AcoAppMode, AcoError, AcoModel, AcoModelField } from "~/types";
 import { createGetAppQuery, GetAppResult, GetAppVariables } from "~/graphql/app.gql";
 import { FoldersProvider as FoldersContextProvider } from "./folders";
 import { SearchRecordsProvider as SearchRecordsContextProvider } from "./records";
 import { DisplayError } from "./DisplayError";
+import { Loading } from "./Loading";
 import { NavigateFolderWithRouterProvider } from "~/contexts/navigateFolderWithRouter";
 import { AcoListProvider } from "~/contexts/acoList";
 
@@ -228,7 +228,7 @@ export const AcoAppProvider = ({
     if (error) {
         return <div>Error: {error.message}</div>;
     } else if (loading) {
-        return <CircularProgress />;
+        return <Loading />;
     } else if (!app) {
         return (
             <DisplayError>
diff --git a/packages/app-aco/src/contexts/navigateFolder.tsx b/packages/app-aco/src/contexts/navigateFolder.tsx
index 54b7794d8b4..0a2542d6788 100644
--- a/packages/app-aco/src/contexts/navigateFolder.tsx
+++ b/packages/app-aco/src/contexts/navigateFolder.tsx
@@ -3,7 +3,8 @@ import store from "store";
 import { ROOT_FOLDER } from "~/constants";
 
 export interface NavigateFolderContext {
-    currentFolderId?: string;
+    currentFolderId: string;
+    isRootFolder: boolean;
     setFolderToStorage: (folderId?: string) => void;
     navigateToListHome: () => void;
     navigateToFolder: (folder?: string) => void;
@@ -80,7 +81,8 @@ export const NavigateFolderProvider = ({
     };
 
     const context: NavigateFolderContext = {
-        currentFolderId: currentFolderId || getFolderFromStorage(),
+        currentFolderId: currentFolderId || getFolderFromStorage() || ROOT_FOLDER,
+        isRootFolder: currentFolderId === ROOT_FOLDER,
         setFolderToStorage,
         navigateToListHome,
         navigateToFolder,
diff --git a/packages/app-aco/src/dialogs/DialogSetPermissions/UsersTeamsMultiAutocomplete.tsx b/packages/app-aco/src/dialogs/DialogSetPermissions/UsersTeamsMultiAutocomplete.tsx
index 483389de5b8..3c69a1d78f9 100644
--- a/packages/app-aco/src/dialogs/DialogSetPermissions/UsersTeamsMultiAutocomplete.tsx
+++ b/packages/app-aco/src/dialogs/DialogSetPermissions/UsersTeamsMultiAutocomplete.tsx
@@ -1,25 +1,39 @@
 import React from "react";
-import { MultiAutoComplete } from "@webiny/ui/AutoComplete";
+import { MultiAutoComplete } from "@webiny/admin-ui";
+import type { FolderLevelPermissionsTarget, FolderPermission } from "~/types";
 
 interface UsersTeamsMultiAutocompleteProps {
-    options: any;
-    value: any;
-    onChange: (value: any) => void;
+    options: FolderLevelPermissionsTarget[];
+    value: FolderPermission["target"][];
+    onChange: (value: FolderPermission["target"][]) => void;
 }
 
-export const UsersTeamsMultiAutocomplete = (props: UsersTeamsMultiAutocompleteProps) => {
+export const UsersTeamsMultiAutocomplete = ({
+    options = [],
+    onChange,
+    value = []
+}: UsersTeamsMultiAutocompleteProps) => {
     return (
         <>
             {/* A hack that ensures the autocomplete is not being auto-focused. */}
-            <input style={{ position: "fixed", left: 10000 }} type="text" />
+            <input type="text" style={{ opacity: 0, position: "absolute" }} />
             <MultiAutoComplete
                 label={"Add user or a team"}
-                renderMultipleSelection={null}
-                options={props.options}
-                valueProp={"target"}
-                unique={true}
-                onChange={props.onChange}
-                value={props.value || []}
+                selectedOptionRenderer={() => null}
+                options={options.map(option => {
+                    return {
+                        id: option.id,
+                        label: option.name,
+                        value: option.target
+                    };
+                })}
+                uniqueValues={true}
+                onValuesChange={values =>
+                    onChange && onChange(values as Array<`admin:${string}` | `team:${string}`>)
+                }
+                values={value || []}
+                displayResetAction={false}
+                size={"lg"}
             />
         </>
     );
diff --git a/packages/app-aco/src/dialogs/DialogSetPermissions/UsersTeamsSelection.tsx b/packages/app-aco/src/dialogs/DialogSetPermissions/UsersTeamsSelection.tsx
index 5f010950470..792d99fb15c 100644
--- a/packages/app-aco/src/dialogs/DialogSetPermissions/UsersTeamsSelection.tsx
+++ b/packages/app-aco/src/dialogs/DialogSetPermissions/UsersTeamsSelection.tsx
@@ -1,10 +1,8 @@
 import React from "react";
-import { ScrollList, ListItem } from "@webiny/ui/List";
+import { List, Scrollbar, Text } from "@webiny/admin-ui";
 import { ListItemGraphic } from "./UsersTeamsSelection/ListItemGraphic";
 import { ListItemText } from "./UsersTeamsSelection/ListItemText";
 import { ListItemMeta } from "./UsersTeamsSelection/ListItemMeta";
-import styled from "@emotion/styled";
-import { Typography } from "@webiny/ui/Typography";
 import { FolderLevelPermissionsTarget, FolderPermission } from "~/types";
 
 interface UsersTeamsSelectionProps {
@@ -14,13 +12,6 @@ interface UsersTeamsSelectionProps {
     onUpdatePermission: (params: { permission: FolderPermission }) => void;
 }
 
-// We've set scroll list to be non-interactive, but we still need to override the hover color.
-const StyledListItem = styled(ListItem)`
-    :hover {
-        background-color: var(--mdc-theme-background) !important;
-    }
-`;
-
 type Selection = Array<{ permission: FolderPermission; target: FolderLevelPermissionsTarget }>;
 
 export const UsersTeamsSelection = ({
@@ -42,21 +33,28 @@ export const UsersTeamsSelection = ({
 
     return (
         <>
-            <Typography use={"subtitle1"}>People and teams with access</Typography>
-            <ScrollList twoLine avatarList style={{ height: 300 }} nonInteractive>
-                {selection?.map(item => (
-                    <StyledListItem key={item!.permission.target}>
-                        <ListItemGraphic {...item} />
-                        <ListItemText {...item} />
-                        <ListItemMeta
-                            {...item!}
-                            targetsList={targetsList}
-                            onRemoveAccess={onRemoveAccess}
-                            onUpdatePermission={onUpdatePermission}
+            <Text as={"div"} className={"wby-mb-md"}>
+                People and teams with access
+            </Text>
+            <Scrollbar style={{ height: "300px" }}>
+                <List>
+                    {selection?.map(item => (
+                        <List.Item
+                            key={item!.permission.target}
+                            title={<ListItemText {...item} />}
+                            icon={<ListItemGraphic {...item} />}
+                            actions={
+                                <ListItemMeta
+                                    {...item!}
+                                    targetsList={targetsList}
+                                    onRemoveAccess={onRemoveAccess}
+                                    onUpdatePermission={onUpdatePermission}
+                                />
+                            }
                         />
-                    </StyledListItem>
-                ))}
-            </ScrollList>
+                    ))}
+                </List>
+            </Scrollbar>
         </>
     );
 };
diff --git a/packages/app-aco/src/dialogs/DialogSetPermissions/UsersTeamsSelection/ListItemGraphic.tsx b/packages/app-aco/src/dialogs/DialogSetPermissions/UsersTeamsSelection/ListItemGraphic.tsx
index 99775fe9fe1..fb1c5cefb0c 100644
--- a/packages/app-aco/src/dialogs/DialogSetPermissions/UsersTeamsSelection/ListItemGraphic.tsx
+++ b/packages/app-aco/src/dialogs/DialogSetPermissions/UsersTeamsSelection/ListItemGraphic.tsx
@@ -1,38 +1,26 @@
 import React from "react";
-import { Image } from "@webiny/app/components";
-import { ListItemGraphic as UiListItemGraphic } from "@webiny/ui/List";
-import { Avatar } from "@webiny/ui/Avatar";
-import styled from "@emotion/styled";
+import { Avatar } from "@webiny/admin-ui";
 import { FolderLevelPermissionsTarget } from "~/types";
 
 interface ListItemGraphicProps {
     target: FolderLevelPermissionsTarget;
 }
 
-// Internally, the `Avatar` component applies top/left positioning to the image, which we don't want.
-// Not sure why the positioning is applied, but we need to override it.
-const StyledAvatar = styled(Avatar)`
-    top: initial;
-    left: initial;
-`;
-
 export const ListItemGraphic = ({ target }: ListItemGraphicProps) => {
     if (target.type === "admin") {
         return (
-            <UiListItemGraphic>
-                <StyledAvatar
-                    renderImage={props => <Image {...props} transform={{ width: 100 }} />}
-                    src={target.meta.image}
-                    fallbackText={target.name.charAt(0)}
-                    alt={"User's avatar."}
-                />
-            </UiListItemGraphic>
+            <Avatar
+                size={"md"}
+                image={<Avatar.Image src={target.meta.image} alt={"User's avatar."} />}
+                fallback={<Avatar.Fallback delayMs={0}>{target.name.charAt(0)}</Avatar.Fallback>}
+            />
         );
     }
 
     return (
-        <UiListItemGraphic>
-            <StyledAvatar fallbackText={target.name.charAt(0)} />
-        </UiListItemGraphic>
+        <Avatar
+            size={"md"}
+            fallback={<Avatar.Fallback delayMs={0}>{target.name.charAt(0)}</Avatar.Fallback>}
+        />
     );
 };
diff --git a/packages/app-aco/src/dialogs/DialogSetPermissions/UsersTeamsSelection/ListItemMeta.tsx b/packages/app-aco/src/dialogs/DialogSetPermissions/UsersTeamsSelection/ListItemMeta.tsx
index c54ed40c0d0..058a5d92201 100644
--- a/packages/app-aco/src/dialogs/DialogSetPermissions/UsersTeamsSelection/ListItemMeta.tsx
+++ b/packages/app-aco/src/dialogs/DialogSetPermissions/UsersTeamsSelection/ListItemMeta.tsx
@@ -1,15 +1,15 @@
 import React, { useMemo } from "react";
-import { ListActions, ListItemMeta as UiListItemMeta } from "@webiny/ui/List";
-import { Menu, MenuDivider, MenuItem } from "@webiny/ui/Menu";
-import { ReactComponent as More } from "@material-design-icons/svg/outlined/arrow_drop_down.svg";
-import { ReactComponent as Check } from "@material-design-icons/svg/outlined/check.svg";
-import { Typography } from "@webiny/ui/Typography";
-import styled from "@emotion/styled";
+import { ReactComponent as More } from "@webiny/icons/arrow_drop_down.svg";
+import { Button, DropdownMenu, Text, Tooltip } from "@webiny/admin-ui";
 import { useSecurity } from "@webiny/app-security";
-import { Tooltip } from "@webiny/ui/Tooltip";
 import { FolderAccessLevel, FolderLevelPermissionsTarget, FolderPermission } from "~/types";
 
 const TARGET_LEVELS = [
+    {
+        id: "no-access",
+        label: "No Access",
+        description: "Cannot view or modify content"
+    },
     {
         id: "viewer",
         label: "Viewer",
@@ -27,36 +27,6 @@ const TARGET_LEVELS = [
     }
 ];
 
-const StyledHandle = styled.div<{ disabled: boolean }>`
-    display: flex;
-    color: var(--mdc-theme-text-primary-on-background);
-    cursor: pointer;
-    padding: 20px 0 20px 20px;
-    ${({ disabled }) => disabled && `opacity: 0.5; pointer-events: none;`}
-`;
-
-const StyledMenuItem = styled(MenuItem)`
-    display: flex;
-    padding-top: 5px;
-    padding-bottom: 5px;
-
-    div.selected {
-        margin-right: 15px;
-        width: 20px;
-        height: 20px;
-
-        svg {
-            fill: var(--mdc-theme-primary);
-        }
-    }
-
-    div.info {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-    }
-`;
-
 interface ListItemMetaProps {
     permission: FolderPermission;
     target: FolderLevelPermissionsTarget;
@@ -78,13 +48,19 @@ export const ListItemMeta = ({
         return TARGET_LEVELS.find(level => level.id === permission.level)!;
     }, [permission.level]);
 
-    const disabledReason = useMemo(() => {
+    const { isListDisabled, isRemovePermissionDisabled, tooltipMessage } = useMemo(() => {
+        let message = null;
+        let disabled = false;
+        let removePermissionDisabled = false;
+
         if (permission.inheritedFrom?.startsWith("parent:")) {
-            return "Inherited from parent folder.";
+            message = "Inherited from parent folder.";
+            disabled = false; // Still allow interaction, just inform user
+            removePermissionDisabled = true;
         }
 
         if (identity!.id === target.id) {
-            let message = "You can't change your own permissions.";
+            message = "You can't change your own permissions.";
             if (permission.inheritedFrom?.startsWith("team:")) {
                 const team = targetsList.find(t => t.target === permission.inheritedFrom);
                 message += " Access to this folder is managed by a team";
@@ -93,68 +69,68 @@ export const ListItemMeta = ({
                 }
                 message += ".";
             }
-            return message;
+            disabled = true;
+            removePermissionDisabled = true;
         }
 
-        return null;
-    }, [permission]);
+        return {
+            isListDisabled: disabled,
+            isRemovePermissionDisabled: removePermissionDisabled,
+            tooltipMessage: message
+        };
+    }, [permission, identity, target, targetsList]);
 
     const handle = useMemo(() => {
         let handle = (
-            <StyledHandle disabled={!!disabledReason}>
-                <Typography use="body1">{currentLevel.label}</Typography>
-                <More />
-            </StyledHandle>
+            <Button
+                variant={"ghost"}
+                disabled={!!isListDisabled}
+                text={currentLevel.label}
+                icon={<More />}
+                iconPosition={"end"}
+            />
         );
 
-        if (disabledReason) {
-            handle = <Tooltip content={disabledReason}>{handle}</Tooltip>;
+        if (tooltipMessage) {
+            handle = <Tooltip content={tooltipMessage} trigger={handle} />;
         }
 
         return handle;
-    }, [disabledReason, currentLevel.label]);
+    }, [tooltipMessage, isListDisabled, currentLevel.label]);
 
     return (
-        <UiListItemMeta>
-            <ListActions>
-                <Menu
-                    handle={handle}
-                    disabled={!!disabledReason}
-                    // Should prevent first item from being autofocused, but it doesn't. 🤷‍
-                    focusOnOpen={false}
-                    // This is needed because the z-index value is set in `packages/app-admin/src/components/Dialogs/styled.tsx`
-                    portalZIndex={101}
-                >
-                    {TARGET_LEVELS.map(level => (
-                        <StyledMenuItem
-                            key={level.id}
-                            onClick={() => {
-                                // Needed to do this with a short delay because of a visual glitch.
-                                setTimeout(() => {
-                                    onUpdatePermission({
-                                        permission: {
-                                            ...permission,
-                                            level: level.id as FolderAccessLevel
-                                        }
-                                    });
-                                }, 75);
-                            }}
-                        >
-                            <div className="selected">
-                                {currentLevel.id === level.id && <Check />}
-                            </div>
-                            <div className="info">
-                                <Typography use="body1">{level.label}</Typography>
-                                <Typography use="caption">{level.description}</Typography>
-                            </div>
-                        </StyledMenuItem>
-                    ))}
-                    <MenuDivider />
-                    <MenuItem onClick={() => onRemoveAccess({ permission })}>
-                        Remove access
-                    </MenuItem>
-                </Menu>
-            </ListActions>
-        </UiListItemMeta>
+        <DropdownMenu trigger={handle}>
+            {TARGET_LEVELS.map(level => (
+                <DropdownMenu.CheckboxItem
+                    key={level.id}
+                    checked={currentLevel.id === level.id}
+                    text={
+                        <div>
+                            <Text as={"div"}>{level.label}</Text>
+                            <Text as={"div"} size={"sm"} className={"wby-text-neutral-strong"}>
+                                {level.description}
+                            </Text>
+                        </div>
+                    }
+                    onClick={() => {
+                        // Needed to do this with a short delay because of a visual glitch.
+                        setTimeout(() => {
+                            onUpdatePermission({
+                                permission: {
+                                    ...permission,
+                                    level: level.id as FolderAccessLevel
+                                }
+                            });
+                        }, 75);
+                    }}
+                />
+            ))}
+            <DropdownMenu.Separator />
+            <DropdownMenu.Item
+                onClick={() => onRemoveAccess({ permission })}
+                text={"Remove permission"}
+                disabled={isRemovePermissionDisabled}
+            />
+        </DropdownMenu>
     );
 };
diff --git a/packages/app-aco/src/dialogs/DialogSetPermissions/UsersTeamsSelection/ListItemText.tsx b/packages/app-aco/src/dialogs/DialogSetPermissions/UsersTeamsSelection/ListItemText.tsx
index ee6913a17fd..b31081878c5 100644
--- a/packages/app-aco/src/dialogs/DialogSetPermissions/UsersTeamsSelection/ListItemText.tsx
+++ b/packages/app-aco/src/dialogs/DialogSetPermissions/UsersTeamsSelection/ListItemText.tsx
@@ -1,9 +1,5 @@
 import React from "react";
-import {
-    ListItemText as UiListItemText,
-    ListItemTextPrimary,
-    ListItemTextSecondary
-} from "@webiny/ui/List";
+import { Text } from "@webiny/admin-ui";
 import { useSecurity } from "@webiny/app-security";
 import { FolderLevelPermissionsTarget } from "~/types";
 
@@ -16,15 +12,15 @@ export const ListItemText = ({ target }: ListItemTextProps) => {
 
     if (target.type === "admin") {
         return (
-            <UiListItemText>
-                <ListItemTextPrimary>
+            <div>
+                <Text as="div">
                     {target.name}&nbsp;
                     {target.id === identity!.id && <em>(you)</em>}
-                </ListItemTextPrimary>
-                <ListItemTextSecondary>
+                </Text>
+                <Text as={"div"} size={"sm"} className={"wby-text-neutral-strong wby-font-normal"}>
                     {target.meta.email || "E-mail not available."}
-                </ListItemTextSecondary>
-            </UiListItemText>
+                </Text>
+            </div>
         );
     }
 
diff --git a/packages/app-aco/src/dialogs/ParentFolderField.tsx b/packages/app-aco/src/dialogs/ParentFolderField.tsx
new file mode 100644
index 00000000000..83e73184b8e
--- /dev/null
+++ b/packages/app-aco/src/dialogs/ParentFolderField.tsx
@@ -0,0 +1,30 @@
+import React from "react";
+import { cn, FormComponentLabel } from "@webiny/admin-ui";
+
+type ParentFolderFieldProps = React.HTMLAttributes<HTMLDivElement> & {
+    label?: React.ReactNode;
+};
+
+const ParentFolderField = ({
+    children,
+    label = "Parent folder",
+    ...props
+}: ParentFolderFieldProps) => {
+    return (
+        <div {...props}>
+            <FormComponentLabel text={label} />
+            <div
+                className={cn([
+                    "wby-px-sm-extra wby-py-sm-extra",
+                    "wby-border-sm wby-border-neutral-muted wby-rounded-md",
+                    "wby-bg-neutral-base",
+                    "wby-max-h-[280px] wby-overflow-x-hidden wby-overflow-y-scroll"
+                ])}
+            >
+                {children}
+            </div>
+        </div>
+    );
+};
+
+export { ParentFolderField, type ParentFolderFieldProps };
diff --git a/packages/app-aco/src/dialogs/styled.tsx b/packages/app-aco/src/dialogs/styled.tsx
deleted file mode 100644
index 0926a8fe827..00000000000
--- a/packages/app-aco/src/dialogs/styled.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import styled from "@emotion/styled";
-
-export const DialogFoldersContainer = styled("div")`
-    max-height: 30vh;
-    overflow-y: scroll;
-    margin-top: 8px;
-    padding: 8px;
-    background: var(--mdc-theme-background);
-`;
diff --git a/packages/app-aco/src/dialogs/useCreateDialog.tsx b/packages/app-aco/src/dialogs/useCreateDialog.tsx
index 808a3302c12..c57f4832529 100644
--- a/packages/app-aco/src/dialogs/useCreateDialog.tsx
+++ b/packages/app-aco/src/dialogs/useCreateDialog.tsx
@@ -1,18 +1,14 @@
 import React, { useCallback, useState } from "react";
 import slugify from "slugify";
-import { useSnackbar } from "@webiny/app-admin";
+import { Grid, Input } from "@webiny/admin-ui";
+import { useDialogs, useSnackbar } from "@webiny/app-admin";
 import { Bind, GenericFormData, useForm } from "@webiny/form";
-import { Cell, Grid } from "@webiny/ui/Grid";
-import { Input } from "@webiny/ui/Input";
-import { Typography } from "@webiny/ui/Typography";
 import { validation } from "@webiny/validation";
-
 import { Extensions, FolderTree } from "~/components";
-import { useDialogs } from "@webiny/app-admin";
-import { DialogFoldersContainer } from "~/dialogs/styled";
 import { useCreateFolder } from "~/features";
 import { ROOT_FOLDER } from "~/constants";
 import { FolderItem } from "~/types";
+import { ParentFolderField } from "./ParentFolderField";
 
 interface ShowDialogParams {
     currentParentId?: string | null;
@@ -50,19 +46,27 @@ const FormComponent = ({ currentParentId = null }: FormComponentProps) => {
     return (
         <>
             <Grid>
-                <Cell span={12}>
+                <Grid.Column span={12}>
                     <Bind name={"title"} validators={validation.create("required")}>
-                        {bind => <Input {...bind} label={"Title"} onBlur={generateSlug} />}
+                        {bind => (
+                            <Input
+                                {...bind}
+                                label={"Title"}
+                                onBlur={generateSlug}
+                                size={"lg"}
+                                required
+                                autoFocus={true}
+                            />
+                        )}
                     </Bind>
-                </Cell>
-                <Cell span={12}>
+                </Grid.Column>
+                <Grid.Column span={12}>
                     <Bind name={"slug"} validators={validation.create("required,slug")}>
-                        <Input label={"Slug"} />
+                        <Input label={"Slug"} size={"lg"} required />
                     </Bind>
-                </Cell>
-                <Cell span={12}>
-                    <Typography use="body1">{"Parent folder"}</Typography>
-                    <DialogFoldersContainer>
+                </Grid.Column>
+                <Grid.Column span={12}>
+                    <ParentFolderField>
                         <Bind name={"parentId"} defaultValue={parentId}>
                             {({ onChange }) => (
                                 <FolderTree
@@ -74,8 +78,8 @@ const FormComponent = ({ currentParentId = null }: FormComponentProps) => {
                                 />
                             )}
                         </Bind>
-                    </DialogFoldersContainer>
-                </Cell>
+                    </ParentFolderField>
+                </Grid.Column>
             </Grid>
             <Extensions />
         </>
diff --git a/packages/app-aco/src/dialogs/useDeleteDialog.tsx b/packages/app-aco/src/dialogs/useDeleteDialog.tsx
index 54f8f643f6e..889c448364f 100644
--- a/packages/app-aco/src/dialogs/useDeleteDialog.tsx
+++ b/packages/app-aco/src/dialogs/useDeleteDialog.tsx
@@ -1,5 +1,4 @@
 import { useSnackbar } from "@webiny/app-admin";
-
 import { useDialogs } from "@webiny/app-admin";
 import { useDeleteFolder } from "~/features";
 import { FolderItem } from "~/types";
diff --git a/packages/app-aco/src/dialogs/useEditDialog.tsx b/packages/app-aco/src/dialogs/useEditDialog.tsx
index 1f1315b03af..17d517008da 100644
--- a/packages/app-aco/src/dialogs/useEditDialog.tsx
+++ b/packages/app-aco/src/dialogs/useEditDialog.tsx
@@ -1,17 +1,13 @@
 import React, { useCallback, useState } from "react";
-import { useSnackbar } from "@webiny/app-admin";
+import { Grid, Input } from "@webiny/admin-ui";
+import { useSnackbar, useDialogs } from "@webiny/app-admin";
 import { Bind, GenericFormData } from "@webiny/form";
 import { validation } from "@webiny/validation";
-import { Cell, Grid } from "@webiny/ui/Grid";
-import { Input } from "@webiny/ui/Input";
-import { Typography } from "@webiny/ui/Typography";
-
 import { Extensions, FolderTree } from "~/components";
 import { ROOT_FOLDER } from "~/constants";
-import { useDialogs } from "@webiny/app-admin";
-import { DialogFoldersContainer } from "~/dialogs/styled";
 import { useUpdateFolder } from "~/features";
 import { FolderItem } from "~/types";
+import { ParentFolderField } from "./ParentFolderField";
 
 interface ShowDialogParams {
     folder: FolderItem;
@@ -31,27 +27,26 @@ const FormComponent = ({ folder }: FormComponentProps) => {
     return (
         <>
             <Grid>
-                <Cell span={12}>
+                <Grid.Column span={12}>
                     <Bind
                         name={"title"}
                         defaultValue={folder.title}
                         validators={[validation.create("required")]}
                     >
-                        <Input label={"Title"} />
+                        <Input label={"Title"} size={"lg"} required autoFocus />
                     </Bind>
-                </Cell>
-                <Cell span={12}>
+                </Grid.Column>
+                <Grid.Column span={12}>
                     <Bind
                         name={"slug"}
                         defaultValue={folder.slug}
                         validators={[validation.create("required,slug")]}
                     >
-                        <Input label={"Slug"} />
+                        <Input label={"Slug"} size={"lg"} required />
                     </Bind>
-                </Cell>
-                <Cell span={12}>
-                    <Typography use="body1">{"Parent folder"}</Typography>
-                    <DialogFoldersContainer>
+                </Grid.Column>
+                <Grid.Column span={12}>
+                    <ParentFolderField>
                         <Bind name={"parentId"} defaultValue={parentId}>
                             {({ onChange }) => (
                                 <FolderTree
@@ -65,8 +60,8 @@ const FormComponent = ({ folder }: FormComponentProps) => {
                                 />
                             )}
                         </Bind>
-                    </DialogFoldersContainer>
-                </Cell>
+                    </ParentFolderField>
+                </Grid.Column>
             </Grid>
             <Extensions />
         </>
diff --git a/packages/app-aco/src/dialogs/useMoveToFolderDialog.tsx b/packages/app-aco/src/dialogs/useMoveToFolderDialog.tsx
index 09166b89f26..d5a7f7fc2ea 100644
--- a/packages/app-aco/src/dialogs/useMoveToFolderDialog.tsx
+++ b/packages/app-aco/src/dialogs/useMoveToFolderDialog.tsx
@@ -1,11 +1,9 @@
 import React, { ReactNode } from "react";
-
 import { i18n } from "@webiny/app/i18n";
 import { Bind, GenericFormData } from "@webiny/form";
-import { Typography } from "@webiny/ui/Typography";
 import { useDialogs } from "@webiny/app-admin";
 import { FolderTree } from "~/components";
-import { DialogFoldersContainer } from "~/dialogs/styled";
+import { ParentFolderField } from "./ParentFolderField";
 
 const t = i18n.ns("app-aco/dialogs/use-move-to-folder-dialog");
 
@@ -32,8 +30,7 @@ interface MessageProps {
 export const Message = ({ helpText, focusedFolderId }: MessageProps) => {
     return (
         <>
-            <Typography use="body1">{helpText}</Typography>
-            <DialogFoldersContainer>
+            <ParentFolderField label={helpText}>
                 <Bind name={"folder"} defaultValue={{ id: focusedFolderId }}>
                     {({ value, onChange }) => (
                         <FolderTree
@@ -43,7 +40,7 @@ export const Message = ({ helpText, focusedFolderId }: MessageProps) => {
                         />
                     )}
                 </Bind>
-            </DialogFoldersContainer>
+            </ParentFolderField>
         </>
     );
 };
diff --git a/packages/app-aco/src/dialogs/useSetPermissionsDialog.tsx b/packages/app-aco/src/dialogs/useSetPermissionsDialog.tsx
index 9505cdd4139..c0fa8ef469f 100644
--- a/packages/app-aco/src/dialogs/useSetPermissionsDialog.tsx
+++ b/packages/app-aco/src/dialogs/useSetPermissionsDialog.tsx
@@ -1,14 +1,11 @@
 import React, { useCallback, useEffect, useState } from "react";
 import { useQuery } from "@apollo/react-hooks";
-import { useSnackbar } from "@webiny/app-admin";
+import { Grid } from "@webiny/admin-ui";
+import { useDialogs, useSnackbar } from "@webiny/app-admin";
 import { GenericFormData, useBind } from "@webiny/form";
-import { Cell, Grid } from "@webiny/ui/Grid";
-
 import { UsersTeamsMultiAutocomplete } from "./DialogSetPermissions/UsersTeamsMultiAutocomplete";
 import { UsersTeamsSelection } from "./DialogSetPermissions/UsersTeamsSelection";
 import { LIST_FOLDER_LEVEL_PERMISSIONS_TARGETS } from "./DialogSetPermissions/graphql";
-
-import { useDialogs } from "@webiny/app-admin";
 import { useUpdateFolder } from "~/features";
 import { FolderItem, FolderLevelPermissionsTarget, FolderPermission } from "~/types";
 
@@ -55,11 +52,11 @@ const FormComponent = ({ folder }: FormComponentProps) => {
     }, [permissions]);
 
     const addPermission = useCallback(
-        (value: FolderPermission[]) => {
+        (value: FolderPermission["target"][]) => {
             const selectedUserOrTeam = value[value.length - 1];
             const newPermission: FolderPermission = {
-                target: selectedUserOrTeam.target,
-                level: "editor"
+                target: selectedUserOrTeam,
+                level: "viewer"
             };
 
             // We want to add the new permission to the 2nd position in the array.
@@ -94,21 +91,21 @@ const FormComponent = ({ folder }: FormComponentProps) => {
 
     return (
         <Grid>
-            <Cell span={12}>
+            <Grid.Column span={12}>
                 <UsersTeamsMultiAutocomplete
                     options={targetsList}
-                    value={permissions}
+                    value={permissions.map(permission => permission.target)}
                     onChange={addPermission}
                 />
-            </Cell>
-            <Cell span={12}>
+            </Grid.Column>
+            <Grid.Column span={12}>
                 <UsersTeamsSelection
                     permissions={permissions}
                     targetsList={targetsList}
                     onRemoveAccess={removeUserTeam}
                     onUpdatePermission={updatePermission}
                 />
-            </Cell>
+            </Grid.Column>
         </Grid>
     );
 };
diff --git a/packages/app-aco/src/features/folders/Folder.ts b/packages/app-aco/src/features/folders/Folder.ts
index 81c81944b49..cfb637299b5 100644
--- a/packages/app-aco/src/features/folders/Folder.ts
+++ b/packages/app-aco/src/features/folders/Folder.ts
@@ -1,4 +1,5 @@
 import { CmsIdentity, FolderPermission } from "~/types";
+import { ROOT_FOLDER } from "~/constants";
 
 export interface FolderData {
     id?: string;
@@ -6,6 +7,7 @@ export interface FolderData {
     slug: string;
     type: string;
     parentId: string | null;
+    path?: string;
     permissions: FolderPermission[];
     hasNonInheritedPermissions?: boolean;
     canManagePermissions?: boolean;
@@ -26,6 +28,7 @@ export class Folder {
     public slug: string;
     public type: string;
     public parentId: string | null;
+    public path: string;
     public permissions: FolderPermission[];
     public hasNonInheritedPermissions?: boolean;
     public canManagePermissions?: boolean;
@@ -45,6 +48,7 @@ export class Folder {
         this.slug = folder.slug;
         this.type = folder.type;
         this.parentId = folder.parentId;
+        this.path = folder.path ?? `${ROOT_FOLDER}/${folder.slug}`;
         this.permissions = folder.permissions;
         this.hasNonInheritedPermissions = folder.hasNonInheritedPermissions;
         this.canManagePermissions = folder.canManagePermissions;
diff --git a/packages/app-aco/src/features/folders/cache/ListCache.ts b/packages/app-aco/src/features/folders/cache/ListCache.ts
index b45475794cb..00c9bc88b40 100644
--- a/packages/app-aco/src/features/folders/cache/ListCache.ts
+++ b/packages/app-aco/src/features/folders/cache/ListCache.ts
@@ -1,4 +1,5 @@
 import { makeAutoObservable, runInAction, toJS } from "mobx";
+import unionBy from "lodash/unionBy";
 
 export type Constructor<T> = new (...args: any[]) => T;
 
@@ -56,7 +57,7 @@ export class ListCache<T> implements IListCache<T> {
 
     addItems(items: T[]) {
         runInAction(() => {
-            this.state = [...this.state, ...items];
+            this.state = unionBy(this.state, items, "id");
         });
     }
 
diff --git a/packages/app-aco/src/features/folders/cache/LoadedCache.ts b/packages/app-aco/src/features/folders/cache/LoadedCache.ts
new file mode 100644
index 00000000000..325a7d4270f
--- /dev/null
+++ b/packages/app-aco/src/features/folders/cache/LoadedCache.ts
@@ -0,0 +1,43 @@
+import { makeAutoObservable, runInAction } from "mobx";
+
+export interface IListLoadedCachePredicate {
+    (item: string): boolean;
+}
+
+export class LoadedCache {
+    private state: string[];
+
+    constructor() {
+        this.state = [];
+
+        makeAutoObservable(this);
+    }
+
+    hasItems() {
+        return this.state.length > 0;
+    }
+
+    clear() {
+        runInAction(() => {
+            this.state = [];
+        });
+    }
+
+    count() {
+        return this.state.length;
+    }
+
+    getItems() {
+        return [...this.state];
+    }
+
+    getItem(predicate: IListLoadedCachePredicate) {
+        return this.state.find(item => predicate(item));
+    }
+
+    addItems(items: string[]) {
+        runInAction(() => {
+            this.state = Array.from(new Set([...this.state, ...items]));
+        });
+    }
+}
diff --git a/packages/app-aco/src/features/folders/cache/LoadedFoldersCacheFactory.ts b/packages/app-aco/src/features/folders/cache/LoadedFoldersCacheFactory.ts
new file mode 100644
index 00000000000..45e2ba65889
--- /dev/null
+++ b/packages/app-aco/src/features/folders/cache/LoadedFoldersCacheFactory.ts
@@ -0,0 +1,21 @@
+import { LoadedCache } from "~/features/folders/cache/LoadedCache";
+
+export class LoadedFoldersCacheFactory {
+    private cache: Map<string, LoadedCache> = new Map();
+
+    getCache(namespace: string) {
+        const cacheKey = this.getCacheKey(namespace);
+
+        if (!this.cache.has(cacheKey)) {
+            this.cache.set(cacheKey, new LoadedCache());
+        }
+
+        return this.cache.get(cacheKey) as LoadedCache;
+    }
+
+    private getCacheKey(namespace: string) {
+        return namespace;
+    }
+}
+
+export const loadedFolderCacheFactory = new LoadedFoldersCacheFactory();
diff --git a/packages/app-aco/src/features/folders/cache/index.ts b/packages/app-aco/src/features/folders/cache/index.ts
index ecb9ffa44c9..deb6ba97481 100644
--- a/packages/app-aco/src/features/folders/cache/index.ts
+++ b/packages/app-aco/src/features/folders/cache/index.ts
@@ -1,2 +1,4 @@
 export * from "./FoldersCacheFactory";
 export * from "./ListCache";
+export * from "./LoadedCache";
+export * from "./LoadedFoldersCacheFactory";
diff --git a/packages/app-aco/src/features/folders/createFolder/CreateFolderGqlGateway.ts b/packages/app-aco/src/features/folders/createFolder/CreateFolderGqlGateway.ts
index 8cf1a8b2683..defa4765e06 100644
--- a/packages/app-aco/src/features/folders/createFolder/CreateFolderGqlGateway.ts
+++ b/packages/app-aco/src/features/folders/createFolder/CreateFolderGqlGateway.ts
@@ -17,6 +17,7 @@ export interface CreateFolderVariables {
     data: Omit<
         FolderItem,
         | "id"
+        | "path"
         | "createdOn"
         | "createdBy"
         | "savedOn"
diff --git a/packages/app-aco/src/features/folders/createFolder/FolderGqlDto.ts b/packages/app-aco/src/features/folders/createFolder/FolderGqlDto.ts
index 175282d4646..8c35e6ddfe9 100644
--- a/packages/app-aco/src/features/folders/createFolder/FolderGqlDto.ts
+++ b/packages/app-aco/src/features/folders/createFolder/FolderGqlDto.ts
@@ -11,6 +11,7 @@ export interface FolderGqlDto {
     canManageContent: boolean;
     type: string;
     parentId: string | null;
+    path: string;
     createdBy: CmsIdentity;
     createdOn: string;
     savedBy: CmsIdentity;
diff --git a/packages/app-aco/src/features/folders/getFolderHierarchy/FolderDto.ts b/packages/app-aco/src/features/folders/getFolderHierarchy/FolderDto.ts
new file mode 100644
index 00000000000..3609d034943
--- /dev/null
+++ b/packages/app-aco/src/features/folders/getFolderHierarchy/FolderDto.ts
@@ -0,0 +1,57 @@
+import { CmsIdentity, FolderPermission } from "~/types";
+import { Folder } from "../Folder";
+import { ROOT_FOLDER } from "~/constants";
+
+export interface FolderDto {
+    id: string;
+    title: string;
+    slug: string;
+    type: string;
+    parentId: string;
+    path: string;
+    permissions: FolderPermission[];
+    hasNonInheritedPermissions: boolean;
+    canManagePermissions: boolean;
+    canManageStructure: boolean;
+    canManageContent: boolean;
+    createdBy: CmsIdentity;
+    createdOn: string;
+    savedBy: CmsIdentity;
+    savedOn: string;
+    modifiedBy: CmsIdentity;
+    modifiedOn: string;
+    extensions: Record<string, any>;
+}
+
+export class FolderDtoMapper {
+    static toDTO(folder: Folder): FolderDto {
+        return {
+            id: folder.id,
+            title: folder.title,
+            canManageContent: folder.canManageContent ?? false,
+            canManagePermissions: folder.canManagePermissions ?? false,
+            canManageStructure: folder.canManageStructure ?? false,
+            createdBy: this.createIdentity(folder.createdBy),
+            createdOn: folder.createdOn ?? "",
+            hasNonInheritedPermissions: folder.hasNonInheritedPermissions ?? false,
+            modifiedBy: this.createIdentity(folder.modifiedBy),
+            modifiedOn: folder.modifiedOn ?? "",
+            parentId: folder.parentId ?? ROOT_FOLDER,
+            path: folder.path,
+            permissions: folder.permissions ?? [],
+            savedBy: this.createIdentity(folder.savedBy),
+            savedOn: folder.savedOn ?? "",
+            slug: folder.slug,
+            type: folder.type,
+            extensions: folder.extensions ?? {}
+        };
+    }
+
+    private static createIdentity(identity?: CmsIdentity | null): CmsIdentity {
+        return {
+            id: identity?.id || "",
+            displayName: identity?.displayName || "",
+            type: identity?.type || ""
+        };
+    }
+}
diff --git a/packages/app-aco/src/features/folders/getFolderHierarchy/FolderGqlDto.ts b/packages/app-aco/src/features/folders/getFolderHierarchy/FolderGqlDto.ts
new file mode 100644
index 00000000000..8c35e6ddfe9
--- /dev/null
+++ b/packages/app-aco/src/features/folders/getFolderHierarchy/FolderGqlDto.ts
@@ -0,0 +1,22 @@
+import { CmsIdentity, FolderPermission } from "~/types";
+
+export interface FolderGqlDto {
+    id: string;
+    title: string;
+    slug: string;
+    permissions: FolderPermission[];
+    hasNonInheritedPermissions: boolean;
+    canManagePermissions: boolean;
+    canManageStructure: boolean;
+    canManageContent: boolean;
+    type: string;
+    parentId: string | null;
+    path: string;
+    createdBy: CmsIdentity;
+    createdOn: string;
+    savedBy: CmsIdentity;
+    savedOn: string;
+    modifiedBy: CmsIdentity | null;
+    modifiedOn: string | null;
+    extensions: Record<string, any>;
+}
diff --git a/packages/app-aco/src/features/folders/getFolderHierarchy/GetFolderHierarchy.test.ts b/packages/app-aco/src/features/folders/getFolderHierarchy/GetFolderHierarchy.test.ts
new file mode 100644
index 00000000000..da4d6f05cab
--- /dev/null
+++ b/packages/app-aco/src/features/folders/getFolderHierarchy/GetFolderHierarchy.test.ts
@@ -0,0 +1,236 @@
+import { GetFolderHierarchy } from "./GetFolderHierarchy";
+import { folderCacheFactory } from "../cache/FoldersCacheFactory";
+import { loadedFolderCacheFactory } from "../cache/LoadedFoldersCacheFactory";
+
+describe("GetFolderHierarchy", () => {
+    const type = "abc";
+
+    const foldersCache = folderCacheFactory.getCache(type);
+    const loadedFoldersCache = loadedFolderCacheFactory.getCache(type);
+
+    beforeEach(() => {
+        foldersCache.clear();
+        loadedFoldersCache.clear();
+        jest.resetAllMocks();
+    });
+
+    it("should update the list of folders in both `cache` and `loadedCache` when `parents` and `children` are returned by the gateway", async () => {
+        const gateway = {
+            execute: jest.fn().mockResolvedValue({
+                parents: [
+                    {
+                        id: "folder-1",
+                        title: "Folder 1",
+                        slug: "folder-1",
+                        parentId: null,
+                        type
+                    },
+                    {
+                        id: "folder-2",
+                        title: "Folder 2",
+                        slug: "folder-2",
+                        parentId: "folder-1",
+                        type
+                    },
+                    {
+                        id: "folder-3",
+                        title: "Folder 3",
+                        slug: "folder-3",
+                        parentId: "folder-2",
+                        type
+                    }
+                ],
+                siblings: [
+                    {
+                        id: "folder-4",
+                        title: "Folder 4",
+                        slug: "folder-4",
+                        parentId: "folder-3",
+                        type
+                    },
+                    {
+                        id: "folder-5",
+                        title: "Folder 5",
+                        slug: "folder-5",
+                        parentId: "folder-3",
+                        type
+                    }
+                ]
+            })
+        };
+
+        const getFolderHierarchy = GetFolderHierarchy.getInstance(type, gateway);
+
+        expect(foldersCache.hasItems()).toBeFalse();
+        expect(loadedFoldersCache.hasItems()).toBeFalse();
+        await getFolderHierarchy.useCase.execute({ id: "folder-0" });
+
+        expect(gateway.execute).toHaveBeenCalledTimes(1);
+        expect(gateway.execute).toHaveBeenCalledWith({ type, id: "folder-0" });
+
+        expect(foldersCache.hasItems()).toBeTrue();
+        expect(foldersCache.count()).toEqual(5);
+        // We are storing only the parent folders id in the loadedFoldersCache
+        expect(loadedFoldersCache.count()).toEqual(3);
+        expect(loadedFoldersCache.getItems()).toEqual(["folder-1", "folder-2", "folder-3"]);
+
+        // This call should be idempotent: the number of elements in cache should not change
+        await getFolderHierarchy.useCase.execute({ id: "folder-0" });
+        expect(foldersCache.count()).toEqual(5);
+        expect(loadedFoldersCache.count()).toEqual(3);
+    });
+
+    it("should only  update the list of folders in `cache` when `children` are returned by the gateway", async () => {
+        const gateway = {
+            execute: jest.fn().mockResolvedValue({
+                parents: [],
+                siblings: [
+                    {
+                        id: "folder-1",
+                        title: "Folder 1",
+                        slug: "folder-1",
+                        parentId: null,
+                        type
+                    },
+                    {
+                        id: "folder-2",
+                        title: "Folder 2",
+                        slug: "folder-2",
+                        parentId: null,
+                        type
+                    }
+                ]
+            })
+        };
+
+        const getFolderHierarchy = GetFolderHierarchy.getInstance(type, gateway);
+
+        expect(foldersCache.hasItems()).toBeFalse();
+        expect(loadedFoldersCache.hasItems()).toBeFalse();
+        await getFolderHierarchy.useCase.execute({ id: "folder-0" });
+
+        expect(gateway.execute).toHaveBeenCalledTimes(1);
+        expect(gateway.execute).toHaveBeenCalledWith({ type, id: "folder-0" });
+
+        expect(foldersCache.hasItems()).toBeTrue();
+        expect(foldersCache.count()).toEqual(2);
+        // We are NOT storing any folder loadedFoldersCache
+        expect(loadedFoldersCache.hasItems()).toBeFalse();
+    });
+
+    it("should handle gateway errors gracefully", async () => {
+        const errorGateway = {
+            execute: jest.fn().mockRejectedValue(new Error("Gateway error"))
+        };
+        const getFolderHierarchy = GetFolderHierarchy.getInstance(type, errorGateway);
+
+        expect(foldersCache.hasItems()).toBeFalse();
+
+        await expect(getFolderHierarchy.useCase.execute({ id: "folder-0" })).rejects.toThrow(
+            "Gateway error"
+        );
+
+        expect(errorGateway.execute).toHaveBeenCalledTimes(1);
+        expect(foldersCache.hasItems()).toBeFalse();
+    });
+
+    it("should clear cache when type changes", async () => {
+        const gatewayAbc = {
+            execute: jest.fn().mockResolvedValue({
+                parents: [
+                    {
+                        id: "folder-1",
+                        title: "Folder 1",
+                        slug: "folder-1",
+                        parentId: null,
+                        type
+                    },
+                    {
+                        id: "folder-2",
+                        title: "Folder 2",
+                        slug: "folder-2",
+                        parentId: "folder-1",
+                        type
+                    },
+                    {
+                        id: "folder-3",
+                        title: "Folder 3",
+                        slug: "folder-3",
+                        parentId: "folder-2",
+                        type
+                    }
+                ],
+                siblings: [
+                    {
+                        id: "folder-4",
+                        title: "Folder 4",
+                        slug: "folder-4",
+                        parentId: "folder-3",
+                        type
+                    },
+                    {
+                        id: "folder-5",
+                        title: "Folder 5",
+                        slug: "folder-5",
+                        parentId: "folder-3",
+                        type
+                    }
+                ]
+            })
+        };
+
+        const newType = "xyz";
+        const gatewayXyz = {
+            execute: jest.fn().mockResolvedValue({
+                parents: [
+                    {
+                        id: "folder-1",
+                        title: "Folder 1",
+                        slug: "folder-1",
+                        parentId: null,
+                        type
+                    },
+                    {
+                        id: "folder-2",
+                        title: "Folder 2",
+                        slug: "folder-2",
+                        parentId: "folder-1",
+                        type
+                    }
+                ],
+                siblings: [
+                    {
+                        id: "folder-3",
+                        title: "Folder 3",
+                        slug: "folder-4",
+                        parentId: "folder-2",
+                        type
+                    }
+                ]
+            })
+        };
+
+        const getFolderHierarchyAbc = GetFolderHierarchy.getInstance(type, gatewayAbc);
+
+        expect(foldersCache.hasItems()).toBeFalse();
+
+        await getFolderHierarchyAbc.useCase.execute({ id: "folder-0" });
+
+        expect(gatewayAbc.execute).toHaveBeenCalledTimes(1);
+        expect(foldersCache.count()).toEqual(5);
+        expect(loadedFoldersCache.count()).toEqual(3);
+
+        const foldersCacheXyz = folderCacheFactory.getCache(newType);
+        const loadedFoldersCacheXyz = loadedFolderCacheFactory.getCache(newType);
+        const getFolderHierarchyXyz = GetFolderHierarchy.getInstance(newType, gatewayXyz);
+
+        expect(foldersCacheXyz.hasItems()).toBeFalse();
+        expect(loadedFoldersCacheXyz.hasItems()).toBeFalse();
+
+        await getFolderHierarchyXyz.useCase.execute({ id: "folder-0" });
+
+        expect(gatewayXyz.execute).toHaveBeenCalledTimes(1);
+        expect(foldersCacheXyz.count()).toEqual(3);
+        expect(loadedFoldersCacheXyz.count()).toEqual(2);
+    });
+});
diff --git a/packages/app-aco/src/features/folders/getFolderHierarchy/GetFolderHierarchy.ts b/packages/app-aco/src/features/folders/getFolderHierarchy/GetFolderHierarchy.ts
new file mode 100644
index 00000000000..1741899d5d0
--- /dev/null
+++ b/packages/app-aco/src/features/folders/getFolderHierarchy/GetFolderHierarchy.ts
@@ -0,0 +1,42 @@
+import { LoadingRepository, loadingRepositoryFactory } from "@webiny/app-utils";
+import { IGetFolderHierarchyUseCase } from "./IGetFolderHierarchyUseCase";
+import { IGetFolderHierarchyGateway } from "./IGetFolderHierarchyGateway";
+import { GetFolderHierarchyUseCaseWithLoading } from "./GetFolderHierarchyUseCaseWithLoading";
+import { GetFolderHierarchyRepository } from "./GetFolderHierarchyRepository";
+import { GetFolderHierarchyUseCase } from "./GetFolderHierarchyUseCase";
+import { folderCacheFactory, ListCache, loadedFolderCacheFactory } from "../cache";
+import { Folder } from "../Folder";
+
+interface IGetFolderHierarchyInstance {
+    useCase: IGetFolderHierarchyUseCase;
+    folders: ListCache<Folder>;
+    loading: LoadingRepository;
+}
+
+export class GetFolderHierarchy {
+    public static getInstance(
+        type: string,
+        gateway: IGetFolderHierarchyGateway
+    ): IGetFolderHierarchyInstance {
+        const foldersCache = folderCacheFactory.getCache(type);
+        const loadedCache = loadedFolderCacheFactory.getCache(type);
+        const loadingRepository = loadingRepositoryFactory.getRepository(type);
+        const repository = new GetFolderHierarchyRepository(
+            foldersCache,
+            loadedCache,
+            gateway,
+            type
+        );
+        const useCase = new GetFolderHierarchyUseCase(repository);
+        const useCaseWithLoading = new GetFolderHierarchyUseCaseWithLoading(
+            loadingRepository,
+            useCase
+        );
+
+        return {
+            useCase: useCaseWithLoading,
+            folders: foldersCache,
+            loading: loadingRepository
+        };
+    }
+}
diff --git a/packages/app-aco/src/features/folders/getFolderHierarchy/GetFolderHierarchyGqlGateway.ts b/packages/app-aco/src/features/folders/getFolderHierarchy/GetFolderHierarchyGqlGateway.ts
new file mode 100644
index 00000000000..2e36983d461
--- /dev/null
+++ b/packages/app-aco/src/features/folders/getFolderHierarchy/GetFolderHierarchyGqlGateway.ts
@@ -0,0 +1,119 @@
+import ApolloClient from "apollo-client";
+import gql from "graphql-tag";
+import {
+    GetFolderHierarchyGatewayParams,
+    IGetFolderHierarchyGateway
+} from "./IGetFolderHierarchyGateway";
+import { AcoError, FolderItem } from "~/types";
+import { ROOT_FOLDER } from "~/constants";
+
+interface GetFolderHierarchyResponseData {
+    parents: FolderItem[];
+    siblings: FolderItem[];
+}
+
+export interface GetFolderHierarchyResponse {
+    aco: {
+        getFolderHierarchy: {
+            data: GetFolderHierarchyResponseData | null;
+            error: AcoError | null;
+        };
+    };
+}
+
+export interface GetFolderHierarchyQueryVariables {
+    type: string;
+    id: string;
+}
+
+export const GET_FOLDER_HIERARCHY = (FOLDER_FIELDS: string) => gql`
+    query GetFolderHierarchy($type: String!, $id: ID!) {
+        aco {
+            getFolderHierarchy(type: $type, id: $id) {
+                data {
+                    parents ${FOLDER_FIELDS}
+                    siblings ${FOLDER_FIELDS}
+                }
+                error {
+                    code
+                    data
+                    message
+                }
+            }
+        }
+    }
+`;
+
+export class GetFolderHierarchyGqlGateway implements IGetFolderHierarchyGateway {
+    private client: ApolloClient<any>;
+    private modelFields: string;
+
+    constructor(client: ApolloClient<any>, modelFields: string) {
+        this.client = client;
+        this.modelFields = modelFields;
+    }
+
+    async execute(params: GetFolderHierarchyGatewayParams) {
+        const { data: response } = await this.client.query<
+            GetFolderHierarchyResponse,
+            GetFolderHierarchyQueryVariables
+        >({
+            query: GET_FOLDER_HIERARCHY(this.modelFields),
+            variables: {
+                ...params
+            },
+            fetchPolicy: "network-only"
+        });
+
+        if (!response) {
+            throw new Error(
+                `Network error while listing folder hierarchy for the provided type/id: ${params.type}/${params.id}.`
+            );
+        }
+
+        const { data, error } = response.aco.getFolderHierarchy;
+
+        if (!data) {
+            throw new Error(
+                error?.message ||
+                    `Could not fetch folder hierarchy for the provided type/id: ${params.type}/${params.id}.`
+            );
+        }
+
+        return {
+            parents: [this.getRootFolder(), ...data.parents],
+            siblings: data.siblings
+        };
+    }
+
+    private getRootFolder(): FolderItem {
+        return {
+            id: ROOT_FOLDER,
+            title: "Home",
+            permissions: [],
+            parentId: "0",
+            path: ROOT_FOLDER,
+            slug: "",
+            createdOn: "",
+            createdBy: {
+                id: "",
+                displayName: "",
+                type: ""
+            },
+            hasNonInheritedPermissions: false,
+            canManagePermissions: true,
+            canManageStructure: true,
+            canManageContent: true,
+            savedOn: "",
+            savedBy: {
+                id: "",
+                displayName: "",
+                type: ""
+            },
+            modifiedOn: null,
+            modifiedBy: null,
+            type: "$ROOT",
+            extensions: {}
+        };
+    }
+}
diff --git a/packages/app-aco/src/features/folders/getFolderHierarchy/GetFolderHierarchyRepository.ts b/packages/app-aco/src/features/folders/getFolderHierarchy/GetFolderHierarchyRepository.ts
new file mode 100644
index 00000000000..7a6d0cb86a1
--- /dev/null
+++ b/packages/app-aco/src/features/folders/getFolderHierarchy/GetFolderHierarchyRepository.ts
@@ -0,0 +1,42 @@
+import { ListCache, LoadedCache } from "../cache";
+import { Folder } from "../Folder";
+import {
+    GetFolderHierarchyRepositoryParams,
+    IGetFolderHierarchyRepository
+} from "./IGetFolderHierarchyRepository";
+import { IGetFolderHierarchyGateway } from "./IGetFolderHierarchyGateway";
+
+export class GetFolderHierarchyRepository implements IGetFolderHierarchyRepository {
+    private cache: ListCache<Folder>;
+    private loadedCache: LoadedCache;
+    private gateway: IGetFolderHierarchyGateway;
+    private readonly type: string;
+
+    constructor(
+        cache: ListCache<Folder>,
+        loadedCache: LoadedCache,
+        gateway: IGetFolderHierarchyGateway,
+        type: string
+    ) {
+        this.cache = cache;
+        this.loadedCache = loadedCache;
+        this.gateway = gateway;
+        this.type = type;
+    }
+
+    async execute(params: GetFolderHierarchyRepositoryParams) {
+        if (this.loadedCache.getItem(item => item === params.id)) {
+            return;
+        }
+
+        const response = await this.gateway.execute({ type: this.type, id: params.id });
+
+        const { parents = [], siblings = [] } = response;
+
+        if (parents.length > 0) {
+            this.loadedCache.addItems(parents.map(parent => parent.id));
+        }
+
+        this.cache.addItems([...parents, ...siblings].map(item => Folder.create(item)));
+    }
+}
diff --git a/packages/app-aco/src/features/folders/getFolderHierarchy/GetFolderHierarchyUseCase.ts b/packages/app-aco/src/features/folders/getFolderHierarchy/GetFolderHierarchyUseCase.ts
new file mode 100644
index 00000000000..f7e5b837546
--- /dev/null
+++ b/packages/app-aco/src/features/folders/getFolderHierarchy/GetFolderHierarchyUseCase.ts
@@ -0,0 +1,19 @@
+import {
+    GetFolderHierarchyUseCaseParams,
+    IGetFolderHierarchyUseCase
+} from "./IGetFolderHierarchyUseCase";
+import { IGetFolderHierarchyRepository } from "./IGetFolderHierarchyRepository";
+
+export class GetFolderHierarchyUseCase implements IGetFolderHierarchyUseCase {
+    private repository: IGetFolderHierarchyRepository;
+
+    constructor(repository: IGetFolderHierarchyRepository) {
+        this.repository = repository;
+    }
+
+    async execute({ id }: GetFolderHierarchyUseCaseParams) {
+        await this.repository.execute({
+            id
+        });
+    }
+}
diff --git a/packages/app-aco/src/features/folders/getFolderHierarchy/GetFolderHierarchyUseCaseWithLoading.ts b/packages/app-aco/src/features/folders/getFolderHierarchy/GetFolderHierarchyUseCaseWithLoading.ts
new file mode 100644
index 00000000000..c503ce3c15f
--- /dev/null
+++ b/packages/app-aco/src/features/folders/getFolderHierarchy/GetFolderHierarchyUseCaseWithLoading.ts
@@ -0,0 +1,23 @@
+import { ILoadingRepository } from "@webiny/app-utils";
+import {
+    GetFolderHierarchyUseCaseParams,
+    IGetFolderHierarchyUseCase
+} from "./IGetFolderHierarchyUseCase";
+import { LoadingActionsEnum } from "~/types";
+
+export class GetFolderHierarchyUseCaseWithLoading implements IGetFolderHierarchyUseCase {
+    private loadingRepository: ILoadingRepository;
+    private useCase: IGetFolderHierarchyUseCase;
+
+    constructor(loadingRepository: ILoadingRepository, useCase: IGetFolderHierarchyUseCase) {
+        this.loadingRepository = loadingRepository;
+        this.useCase = useCase;
+    }
+
+    async execute(params: GetFolderHierarchyUseCaseParams) {
+        await this.loadingRepository.runCallBack(
+            this.useCase.execute(params),
+            LoadingActionsEnum.init
+        );
+    }
+}
diff --git a/packages/app-aco/src/features/folders/getFolderHierarchy/IGetFolderHierarchyGateway.ts b/packages/app-aco/src/features/folders/getFolderHierarchy/IGetFolderHierarchyGateway.ts
new file mode 100644
index 00000000000..fa57f189960
--- /dev/null
+++ b/packages/app-aco/src/features/folders/getFolderHierarchy/IGetFolderHierarchyGateway.ts
@@ -0,0 +1,17 @@
+import { FolderGqlDto } from "./FolderGqlDto";
+
+export interface GetFolderHierarchyGatewayParams {
+    type: string;
+    id: string;
+}
+
+export interface GetFolderHierarchyGatewayResponse {
+    parents: FolderGqlDto[];
+    siblings: FolderGqlDto[];
+}
+
+export interface IGetFolderHierarchyGateway {
+    execute: (
+        params: GetFolderHierarchyGatewayParams
+    ) => Promise<GetFolderHierarchyGatewayResponse>;
+}
diff --git a/packages/app-aco/src/features/folders/getFolderHierarchy/IGetFolderHierarchyRepository.ts b/packages/app-aco/src/features/folders/getFolderHierarchy/IGetFolderHierarchyRepository.ts
new file mode 100644
index 00000000000..5b6ecf37475
--- /dev/null
+++ b/packages/app-aco/src/features/folders/getFolderHierarchy/IGetFolderHierarchyRepository.ts
@@ -0,0 +1,7 @@
+export interface GetFolderHierarchyRepositoryParams {
+    id: string;
+}
+
+export interface IGetFolderHierarchyRepository {
+    execute: (params: GetFolderHierarchyRepositoryParams) => Promise<void>;
+}
diff --git a/packages/app-aco/src/features/folders/getFolderHierarchy/IGetFolderHierarchyUseCase.ts b/packages/app-aco/src/features/folders/getFolderHierarchy/IGetFolderHierarchyUseCase.ts
new file mode 100644
index 00000000000..35d0c6b5090
--- /dev/null
+++ b/packages/app-aco/src/features/folders/getFolderHierarchy/IGetFolderHierarchyUseCase.ts
@@ -0,0 +1,7 @@
+export interface GetFolderHierarchyUseCaseParams {
+    id: string;
+}
+
+export interface IGetFolderHierarchyUseCase {
+    execute: (params: GetFolderHierarchyUseCaseParams) => Promise<void>;
+}
diff --git a/packages/app-aco/src/features/folders/getFolderHierarchy/index.ts b/packages/app-aco/src/features/folders/getFolderHierarchy/index.ts
new file mode 100644
index 00000000000..7794f0bdc4c
--- /dev/null
+++ b/packages/app-aco/src/features/folders/getFolderHierarchy/index.ts
@@ -0,0 +1 @@
+export * from "./useGetFolderHierarchy";
diff --git a/packages/app-aco/src/features/folders/getFolderHierarchy/useGetFolderHierarchy.ts b/packages/app-aco/src/features/folders/getFolderHierarchy/useGetFolderHierarchy.ts
new file mode 100644
index 00000000000..24d34883bb4
--- /dev/null
+++ b/packages/app-aco/src/features/folders/getFolderHierarchy/useGetFolderHierarchy.ts
@@ -0,0 +1,64 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { autorun } from "mobx";
+import { useApolloClient } from "@apollo/react-hooks";
+import { GetFolderHierarchyGqlGateway } from "./GetFolderHierarchyGqlGateway";
+import { GetFolderHierarchy } from "./GetFolderHierarchy";
+import { FolderDtoMapper } from "./FolderDto";
+import { useFoldersType, useGetFolderGraphQLSelection } from "~/hooks";
+import { FolderItem, LoadingActionsEnum } from "~/types";
+
+export const useGetFolderHierarchy = () => {
+    const client = useApolloClient();
+    const type = useFoldersType();
+    const fields = useGetFolderGraphQLSelection();
+    const gateway = new GetFolderHierarchyGqlGateway(client, fields);
+
+    const [vm, setVm] = useState<{
+        folders: FolderItem[];
+    }>({
+        folders: []
+    });
+
+    const {
+        useCase,
+        folders: foldersCache,
+        loading: loadingState
+    } = useMemo(() => {
+        return GetFolderHierarchy.getInstance(type, gateway);
+    }, [type, gateway]);
+
+    const getFolderHierarchy = useCallback(
+        (id: string) => {
+            return useCase.execute({ id });
+        },
+        [useCase]
+    );
+
+    const getIsFolderLoading = useCallback(
+        (action = LoadingActionsEnum.init) => {
+            if (!loadingState) {
+                return true;
+            }
+
+            return loadingState.isLoading(action);
+        },
+        [loadingState]
+    );
+
+    useEffect(() => {
+        return autorun(() => {
+            const folders = foldersCache.getItems().map(folder => FolderDtoMapper.toDTO(folder));
+
+            setVm(vm => ({
+                ...vm,
+                folders
+            }));
+        });
+    }, [foldersCache]);
+
+    return {
+        ...vm,
+        getFolderHierarchy,
+        getIsFolderLoading
+    };
+};
diff --git a/packages/app-aco/src/features/folders/getFolderModel/FolderModelContext.tsx b/packages/app-aco/src/features/folders/getFolderModel/FolderModelContext.tsx
index 0f36cd369e5..e04791bbb48 100644
--- a/packages/app-aco/src/features/folders/getFolderModel/FolderModelContext.tsx
+++ b/packages/app-aco/src/features/folders/getFolderModel/FolderModelContext.tsx
@@ -1,7 +1,7 @@
 import React, { useState, useCallback, useMemo, useEffect } from "react";
 import { autorun, toJS } from "mobx";
 import { useApolloClient } from "@apollo/react-hooks";
-import { CircularProgress } from "@webiny/ui/Progress";
+import { OverlayLoader } from "@webiny/admin-ui";
 import { FolderModelDto } from "~/features";
 import { GetFolderModelGqlGateway } from "~/features/folders/getFolderModel/GetFolderModelGqlGateway";
 import { GetFolderModel } from "~/features/folders/getFolderModel/GetFolderModel";
@@ -47,7 +47,7 @@ const acoFolderModelProvider: Decorator<
         }, []);
 
         if (!model) {
-            return <CircularProgress label={"Preparing Folders..."} />;
+            return <OverlayLoader text={"Preparing Folders..."} />;
         }
 
         return (
diff --git a/packages/app-aco/src/features/folders/index.ts b/packages/app-aco/src/features/folders/index.ts
index 763072f9078..b4fd6c06516 100644
--- a/packages/app-aco/src/features/folders/index.ts
+++ b/packages/app-aco/src/features/folders/index.ts
@@ -5,7 +5,9 @@ export * from "./deleteFolder";
 export * from "./getDescendantFolders";
 export * from "./getFolder";
 export * from "./getFolderExtensionsFields";
+export * from "./getFolderHierarchy";
 export * from "./getFolderLevelPermission";
 export * from "./getFolderModel";
 export * from "./listFolders";
+export * from "./listFoldersByParentIds";
 export * from "./updateFolder";
diff --git a/packages/app-aco/src/features/folders/listFolders/FolderDto.ts b/packages/app-aco/src/features/folders/listFolders/FolderDto.ts
index 4b3a47ab6d3..3609d034943 100644
--- a/packages/app-aco/src/features/folders/listFolders/FolderDto.ts
+++ b/packages/app-aco/src/features/folders/listFolders/FolderDto.ts
@@ -8,6 +8,7 @@ export interface FolderDto {
     slug: string;
     type: string;
     parentId: string;
+    path: string;
     permissions: FolderPermission[];
     hasNonInheritedPermissions: boolean;
     canManagePermissions: boolean;
@@ -36,6 +37,7 @@ export class FolderDtoMapper {
             modifiedBy: this.createIdentity(folder.modifiedBy),
             modifiedOn: folder.modifiedOn ?? "",
             parentId: folder.parentId ?? ROOT_FOLDER,
+            path: folder.path,
             permissions: folder.permissions ?? [],
             savedBy: this.createIdentity(folder.savedBy),
             savedOn: folder.savedOn ?? "",
diff --git a/packages/app-aco/src/features/folders/listFolders/FolderGqlDto.ts b/packages/app-aco/src/features/folders/listFolders/FolderGqlDto.ts
index 175282d4646..8c35e6ddfe9 100644
--- a/packages/app-aco/src/features/folders/listFolders/FolderGqlDto.ts
+++ b/packages/app-aco/src/features/folders/listFolders/FolderGqlDto.ts
@@ -11,6 +11,7 @@ export interface FolderGqlDto {
     canManageContent: boolean;
     type: string;
     parentId: string | null;
+    path: string;
     createdBy: CmsIdentity;
     createdOn: string;
     savedBy: CmsIdentity;
diff --git a/packages/app-aco/src/features/folders/listFolders/ListFoldersCompressedGqlGateway.ts b/packages/app-aco/src/features/folders/listFolders/ListFoldersCompressedGqlGateway.ts
index 5bed5af1a9c..0e3cb2e62ad 100644
--- a/packages/app-aco/src/features/folders/listFolders/ListFoldersCompressedGqlGateway.ts
+++ b/packages/app-aco/src/features/folders/listFolders/ListFoldersCompressedGqlGateway.ts
@@ -82,6 +82,7 @@ export class ListFoldersCompressedGqlGateway implements IListFoldersGateway {
             title: "Home",
             permissions: [],
             parentId: "0",
+            path: ROOT_FOLDER,
             slug: "",
             createdOn: "",
             createdBy: {
diff --git a/packages/app-aco/src/features/folders/listFolders/ListFoldersGqlGateway.ts b/packages/app-aco/src/features/folders/listFolders/ListFoldersGqlGateway.ts
index 2cc947b8d85..4d41b0acc71 100644
--- a/packages/app-aco/src/features/folders/listFolders/ListFoldersGqlGateway.ts
+++ b/packages/app-aco/src/features/folders/listFolders/ListFoldersGqlGateway.ts
@@ -76,6 +76,7 @@ export class ListFoldersGqlGateway implements IListFoldersGateway {
             title: "Home",
             permissions: [],
             parentId: "0",
+            path: ROOT_FOLDER,
             slug: "",
             createdOn: "",
             createdBy: {
diff --git a/packages/app-aco/src/features/folders/listFolders/useListFolders.ts b/packages/app-aco/src/features/folders/listFolders/useListFolders.ts
index e6354447585..19bff39c83c 100644
--- a/packages/app-aco/src/features/folders/listFolders/useListFolders.ts
+++ b/packages/app-aco/src/features/folders/listFolders/useListFolders.ts
@@ -1,16 +1,17 @@
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { autorun } from "mobx";
 import { useApolloClient } from "@apollo/react-hooks";
-import { ListFoldersCompressedGqlGateway } from "./ListFoldersCompressedGqlGateway";
+import { ListFoldersGqlGateway } from "./ListFoldersGqlGateway";
 import { ListFolders } from "./ListFolders";
 import { FolderDtoMapper } from "./FolderDto";
-import { useFoldersType } from "~/hooks";
+import { useFoldersType, useGetFolderGraphQLSelection } from "~/hooks";
 import { FolderItem } from "~/types";
 
 export const useListFolders = () => {
     const client = useApolloClient();
     const type = useFoldersType();
-    const gateway = new ListFoldersCompressedGqlGateway(client);
+    const fields = useGetFolderGraphQLSelection();
+    const gateway = new ListFoldersGqlGateway(client, fields);
 
     const [vm, setVm] = useState<{
         folders: FolderItem[];
@@ -34,14 +35,6 @@ export const useListFolders = () => {
         return useCase.execute();
     }, [useCase]);
 
-    useEffect(() => {
-        if (foldersCache.hasItems()) {
-            return; // Skip if we already have folders in the cache.
-        }
-
-        listFolders();
-    }, []);
-
     useEffect(() => {
         return autorun(() => {
             const folders = foldersCache.getItems().map(folder => FolderDtoMapper.toDTO(folder));
diff --git a/packages/app-aco/src/features/folders/listFoldersByParentIds/FolderDto.ts b/packages/app-aco/src/features/folders/listFoldersByParentIds/FolderDto.ts
new file mode 100644
index 00000000000..3609d034943
--- /dev/null
+++ b/packages/app-aco/src/features/folders/listFoldersByParentIds/FolderDto.ts
@@ -0,0 +1,57 @@
+import { CmsIdentity, FolderPermission } from "~/types";
+import { Folder } from "../Folder";
+import { ROOT_FOLDER } from "~/constants";
+
+export interface FolderDto {
+    id: string;
+    title: string;
+    slug: string;
+    type: string;
+    parentId: string;
+    path: string;
+    permissions: FolderPermission[];
+    hasNonInheritedPermissions: boolean;
+    canManagePermissions: boolean;
+    canManageStructure: boolean;
+    canManageContent: boolean;
+    createdBy: CmsIdentity;
+    createdOn: string;
+    savedBy: CmsIdentity;
+    savedOn: string;
+    modifiedBy: CmsIdentity;
+    modifiedOn: string;
+    extensions: Record<string, any>;
+}
+
+export class FolderDtoMapper {
+    static toDTO(folder: Folder): FolderDto {
+        return {
+            id: folder.id,
+            title: folder.title,
+            canManageContent: folder.canManageContent ?? false,
+            canManagePermissions: folder.canManagePermissions ?? false,
+            canManageStructure: folder.canManageStructure ?? false,
+            createdBy: this.createIdentity(folder.createdBy),
+            createdOn: folder.createdOn ?? "",
+            hasNonInheritedPermissions: folder.hasNonInheritedPermissions ?? false,
+            modifiedBy: this.createIdentity(folder.modifiedBy),
+            modifiedOn: folder.modifiedOn ?? "",
+            parentId: folder.parentId ?? ROOT_FOLDER,
+            path: folder.path,
+            permissions: folder.permissions ?? [],
+            savedBy: this.createIdentity(folder.savedBy),
+            savedOn: folder.savedOn ?? "",
+            slug: folder.slug,
+            type: folder.type,
+            extensions: folder.extensions ?? {}
+        };
+    }
+
+    private static createIdentity(identity?: CmsIdentity | null): CmsIdentity {
+        return {
+            id: identity?.id || "",
+            displayName: identity?.displayName || "",
+            type: identity?.type || ""
+        };
+    }
+}
diff --git a/packages/app-aco/src/features/folders/listFoldersByParentIds/FolderGqlDto.ts b/packages/app-aco/src/features/folders/listFoldersByParentIds/FolderGqlDto.ts
new file mode 100644
index 00000000000..8c35e6ddfe9
--- /dev/null
+++ b/packages/app-aco/src/features/folders/listFoldersByParentIds/FolderGqlDto.ts
@@ -0,0 +1,22 @@
+import { CmsIdentity, FolderPermission } from "~/types";
+
+export interface FolderGqlDto {
+    id: string;
+    title: string;
+    slug: string;
+    permissions: FolderPermission[];
+    hasNonInheritedPermissions: boolean;
+    canManagePermissions: boolean;
+    canManageStructure: boolean;
+    canManageContent: boolean;
+    type: string;
+    parentId: string | null;
+    path: string;
+    createdBy: CmsIdentity;
+    createdOn: string;
+    savedBy: CmsIdentity;
+    savedOn: string;
+    modifiedBy: CmsIdentity | null;
+    modifiedOn: string | null;
+    extensions: Record<string, any>;
+}
diff --git a/packages/app-aco/src/features/folders/listFoldersByParentIds/IListFoldersByParentIdsGateway.ts b/packages/app-aco/src/features/folders/listFoldersByParentIds/IListFoldersByParentIdsGateway.ts
new file mode 100644
index 00000000000..4283bb27989
--- /dev/null
+++ b/packages/app-aco/src/features/folders/listFoldersByParentIds/IListFoldersByParentIdsGateway.ts
@@ -0,0 +1,10 @@
+import { FolderGqlDto } from "./FolderGqlDto";
+
+export interface ListFoldersByParentIdsGatewayParams {
+    type: string;
+    parentIds: string[];
+}
+
+export interface IListFoldersByParentIdsGateway {
+    execute: (params: ListFoldersByParentIdsGatewayParams) => Promise<FolderGqlDto[]>;
+}
diff --git a/packages/app-aco/src/features/folders/listFoldersByParentIds/IListFoldersByParentIdsRepository.ts b/packages/app-aco/src/features/folders/listFoldersByParentIds/IListFoldersByParentIdsRepository.ts
new file mode 100644
index 00000000000..612fdf0b820
--- /dev/null
+++ b/packages/app-aco/src/features/folders/listFoldersByParentIds/IListFoldersByParentIdsRepository.ts
@@ -0,0 +1,7 @@
+export interface ListFoldersByParentIdsRepositoryParams {
+    parentIds: string[];
+}
+
+export interface IListFoldersByParentIdsRepository {
+    execute: (params: ListFoldersByParentIdsRepositoryParams) => Promise<void>;
+}
diff --git a/packages/app-aco/src/features/folders/listFoldersByParentIds/IListFoldersByParentIdsUseCase.ts b/packages/app-aco/src/features/folders/listFoldersByParentIds/IListFoldersByParentIdsUseCase.ts
new file mode 100644
index 00000000000..9d9ae8ead1f
--- /dev/null
+++ b/packages/app-aco/src/features/folders/listFoldersByParentIds/IListFoldersByParentIdsUseCase.ts
@@ -0,0 +1,7 @@
+export interface ListFoldersByParentIdsUseCaseParams {
+    parentIds?: string[];
+}
+
+export interface IListFoldersByParentIdsUseCase {
+    execute: (params: ListFoldersByParentIdsUseCaseParams) => Promise<void>;
+}
diff --git a/packages/app-aco/src/features/folders/listFoldersByParentIds/ListFoldersByParentIds.test.ts b/packages/app-aco/src/features/folders/listFoldersByParentIds/ListFoldersByParentIds.test.ts
new file mode 100644
index 00000000000..3ddea768417
--- /dev/null
+++ b/packages/app-aco/src/features/folders/listFoldersByParentIds/ListFoldersByParentIds.test.ts
@@ -0,0 +1,291 @@
+import { ListFoldersByParentIds } from "./ListFoldersByParentIds";
+import { folderCacheFactory } from "../cache/FoldersCacheFactory";
+import { loadedFolderCacheFactory } from "../cache/LoadedFoldersCacheFactory";
+import { ROOT_FOLDER } from "~/constants";
+
+describe("ListFoldersByParentIds", () => {
+    const type = "abc";
+
+    const foldersCache = folderCacheFactory.getCache(type);
+    const loadedFoldersCache = loadedFolderCacheFactory.getCache(type);
+
+    beforeEach(() => {
+        foldersCache.clear();
+        loadedFoldersCache.clear();
+        jest.resetAllMocks();
+    });
+
+    it("should list folders from `ROOT` level if parentIds is `undefined`", async () => {
+        const gateway = {
+            execute: jest.fn().mockResolvedValue([
+                {
+                    id: "folder-1",
+                    title: "Folder 1",
+                    slug: "folder-1",
+                    parentId: null,
+                    type
+                },
+                {
+                    id: "folder-2",
+                    title: "Folder 2",
+                    slug: "folder-2",
+                    parentId: null,
+                    type
+                },
+                {
+                    id: "folder-3",
+                    title: "Folder 3",
+                    slug: "folder-3",
+                    parentId: null,
+                    type
+                }
+            ])
+        };
+
+        const listByParentIdFolders = ListFoldersByParentIds.getInstance(type, gateway);
+
+        expect(foldersCache.hasItems()).toBeFalse();
+        await listByParentIdFolders.useCase.execute({ parentIds: undefined });
+
+        expect(gateway.execute).toHaveBeenCalledTimes(1);
+        expect(gateway.execute).toHaveBeenCalledWith({ parentIds: [ROOT_FOLDER], type });
+
+        expect(foldersCache.hasItems()).toBeTrue();
+        expect(foldersCache.count()).toEqual(3);
+
+        // This call should be idempotent: the number of elements in cache should not change
+        await listByParentIdFolders.useCase.execute({ parentIds: undefined });
+        expect(foldersCache.count()).toEqual(3);
+    });
+
+    it("should list folders from the provided `parentIds`", async () => {
+        const gateway = {
+            execute: jest
+                .fn()
+                .mockImplementationOnce(() =>
+                    Promise.resolve([
+                        {
+                            id: "folder-1",
+                            title: "Folder 1",
+                            slug: "folder-1",
+                            parentId: "folder-0",
+                            type
+                        },
+                        {
+                            id: "folder-2",
+                            title: "Folder 2",
+                            slug: "folder-1",
+                            parentId: "folder-0",
+                            type
+                        },
+                        {
+                            id: "folder-3",
+                            title: "Folder 3",
+                            slug: "folder-3",
+                            parentId: "folder-0",
+                            type
+                        }
+                    ])
+                )
+                .mockImplementationOnce(() =>
+                    Promise.resolve([
+                        {
+                            id: "folder-4",
+                            title: "Folder 4",
+                            slug: "folder-4",
+                            parentId: "folder-1",
+                            type
+                        },
+                        {
+                            id: "folder-5",
+                            title: "Folder 5",
+                            slug: "folder-5",
+                            parentId: "folder-1",
+                            type
+                        },
+                        {
+                            id: "folder-6",
+                            title: "Folder 6",
+                            slug: "folder-6",
+                            parentId: "folder-1",
+                            type
+                        }
+                    ])
+                )
+        };
+
+        const listByParentIdFolders = ListFoldersByParentIds.getInstance(type, gateway);
+
+        expect(foldersCache.hasItems()).toBeFalse();
+        await listByParentIdFolders.useCase.execute({ parentIds: ["folder-0"] });
+
+        expect(gateway.execute).toHaveBeenCalledTimes(1);
+        expect(gateway.execute).toHaveBeenCalledWith({ parentIds: ["folder-0"], type });
+
+        expect(foldersCache.hasItems()).toBeTrue();
+        expect(foldersCache.count()).toEqual(3);
+
+        // The number of folders in cache should increase, since we are changing the parentIds
+        await listByParentIdFolders.useCase.execute({ parentIds: ["folder-1"] });
+        expect(foldersCache.count()).toEqual(6);
+    });
+
+    it("should list folders from missing `parentIds` stored in cache", async () => {
+        const gateway = {
+            execute: jest
+                .fn()
+                .mockImplementationOnce(() =>
+                    Promise.resolve([
+                        {
+                            id: "folder-1",
+                            title: "Folder 1",
+                            slug: "folder-1",
+                            parentId: "folder-0",
+                            type
+                        },
+                        {
+                            id: "folder-2",
+                            title: "Folder 2",
+                            slug: "folder-2",
+                            parentId: "folder-1",
+                            type
+                        }
+                    ])
+                )
+                .mockImplementationOnce(() =>
+                    Promise.resolve([
+                        {
+                            id: "folder-3",
+                            title: "Folder 3",
+                            slug: "folder-3",
+                            parentId: "folder-2",
+                            type
+                        }
+                    ])
+                )
+        };
+
+        const listByParentIdFolders = ListFoldersByParentIds.getInstance(type, gateway);
+
+        // Execute the useCase 3 times and check the gateway is invoked only when needed
+        await listByParentIdFolders.useCase.execute({ parentIds: ["folder-0", "folder-1"] });
+        await listByParentIdFolders.useCase.execute({
+            parentIds: ["folder-0", "folder-1", "folder-2"]
+        });
+        await listByParentIdFolders.useCase.execute({
+            parentIds: ["folder-0", "folder-1", "folder-2"]
+        });
+
+        expect(gateway.execute).toHaveBeenNthCalledWith(1, {
+            parentIds: ["folder-0", "folder-1"],
+            type
+        });
+        expect(gateway.execute).toHaveBeenNthCalledWith(2, { parentIds: ["folder-2"], type });
+        expect(gateway.execute).not.toHaveBeenCalledTimes(3);
+    });
+
+    it("should return empty array if no folders are found", async () => {
+        const emptyGateway = {
+            execute: jest.fn().mockResolvedValue([])
+        };
+        const listByParentIdFolders = ListFoldersByParentIds.getInstance(type, emptyGateway);
+
+        expect(foldersCache.hasItems()).toBeFalse();
+
+        await listByParentIdFolders.useCase.execute({});
+
+        expect(emptyGateway.execute).toHaveBeenCalledTimes(1);
+        expect(foldersCache.hasItems()).toBeFalse();
+
+        const items = foldersCache.getItems();
+        expect(items.length).toEqual(0);
+    });
+
+    it("should handle gateway errors gracefully", async () => {
+        const errorGateway = {
+            execute: jest.fn().mockRejectedValue(new Error("Gateway error"))
+        };
+        const listByParentIdFolders = ListFoldersByParentIds.getInstance(type, errorGateway);
+
+        expect(foldersCache.hasItems()).toBeFalse();
+
+        await expect(listByParentIdFolders.useCase.execute({})).rejects.toThrow("Gateway error");
+
+        expect(errorGateway.execute).toHaveBeenCalledTimes(1);
+        expect(foldersCache.hasItems()).toBeFalse();
+    });
+
+    it("should clear cache when type changes", async () => {
+        const gatewayAbc = {
+            execute: jest.fn().mockResolvedValue([
+                {
+                    id: "folder-1",
+                    title: "Folder 1",
+                    slug: "folder-1",
+                    parentId: null,
+                    type
+                },
+                {
+                    id: "folder-2",
+                    title: "Folder 2",
+                    slug: "folder-1",
+                    parentId: null,
+                    type
+                },
+                {
+                    id: "folder-3",
+                    title: "Folder 3",
+                    slug: "folder-3",
+                    parentId: null,
+                    type
+                }
+            ])
+        };
+
+        const newType = "xyz";
+        const gatewayXyz = {
+            execute: jest.fn().mockResolvedValue([
+                {
+                    id: "folder-1",
+                    title: "Folder 1",
+                    slug: "folder-1",
+                    parentId: null,
+                    type: newType
+                },
+                {
+                    id: "folder-2",
+                    title: "Folder 2",
+                    slug: "folder-1",
+                    parentId: null,
+                    type: newType
+                },
+                {
+                    id: "folder-3",
+                    title: "Folder 3",
+                    slug: "folder-3",
+                    parentId: null,
+                    type: newType
+                }
+            ])
+        };
+
+        const listFoldersByParentId = ListFoldersByParentIds.getInstance(type, gatewayAbc);
+
+        expect(foldersCache.hasItems()).toBeFalse();
+
+        await listFoldersByParentId.useCase.execute({});
+
+        expect(gatewayAbc.execute).toHaveBeenCalledTimes(1);
+        expect(foldersCache.hasItems()).toBeTrue();
+
+        const newFoldersCache = folderCacheFactory.getCache(newType);
+        const newListFoldersByParentId = ListFoldersByParentIds.getInstance(newType, gatewayXyz);
+
+        expect(newFoldersCache.hasItems()).toBeFalse();
+
+        await newListFoldersByParentId.useCase.execute({});
+
+        expect(gatewayXyz.execute).toHaveBeenCalledTimes(1);
+        expect(newFoldersCache.hasItems()).toBeTrue();
+    });
+});
diff --git a/packages/app-aco/src/features/folders/listFoldersByParentIds/ListFoldersByParentIds.ts b/packages/app-aco/src/features/folders/listFoldersByParentIds/ListFoldersByParentIds.ts
new file mode 100644
index 00000000000..be8013d2677
--- /dev/null
+++ b/packages/app-aco/src/features/folders/listFoldersByParentIds/ListFoldersByParentIds.ts
@@ -0,0 +1,43 @@
+import { LoadingRepository, loadingRepositoryFactory } from "@webiny/app-utils";
+import { IListFoldersByParentIdsGateway } from "./IListFoldersByParentIdsGateway";
+import { IListFoldersByParentIdsUseCase } from "./IListFoldersByParentIdsUseCase";
+import { ListFoldersByParentIdsRepository } from "./ListFoldersByParentIdsRepository";
+import { ListFoldersByParentIdsRepositoryWithLoadedCache } from "./ListFoldersByParentIdsRepositoryWithLoadedCache";
+import { ListFoldersByParentIdsUseCase } from "./ListFoldersByParentIdsUseCase";
+import { folderCacheFactory, ListCache, loadedFolderCacheFactory } from "../cache";
+import { Folder } from "../Folder";
+import { ListFoldersByParentIdsUseCaseWithLoading } from "~/features/folders/listFoldersByParentIds/ListFoldersByParentIdsUseCaseWithLoading";
+
+interface IListFoldersByParentIdsInstance {
+    useCase: IListFoldersByParentIdsUseCase;
+    folders: ListCache<Folder>;
+    loading: LoadingRepository;
+}
+
+export class ListFoldersByParentIds {
+    public static getInstance(
+        type: string,
+        gateway: IListFoldersByParentIdsGateway
+    ): IListFoldersByParentIdsInstance {
+        const foldersCache = folderCacheFactory.getCache(type);
+        const loadedCache = loadedFolderCacheFactory.getCache(type);
+        const loadingRepository = loadingRepositoryFactory.getRepository(type);
+        const repository = new ListFoldersByParentIdsRepository(foldersCache, gateway, type);
+        const repositoryWithLoadedCache = new ListFoldersByParentIdsRepositoryWithLoadedCache(
+            loadedCache,
+            repository
+        );
+        const useCase = new ListFoldersByParentIdsUseCase(repositoryWithLoadedCache);
+        const useCaseWithLoading = new ListFoldersByParentIdsUseCaseWithLoading(
+            loadingRepository,
+            loadedCache,
+            useCase
+        );
+
+        return {
+            useCase: useCaseWithLoading,
+            folders: foldersCache,
+            loading: loadingRepository
+        };
+    }
+}
diff --git a/packages/app-aco/src/features/folders/listFoldersByParentIds/ListFoldersByParentIdsGqlGateway.ts b/packages/app-aco/src/features/folders/listFoldersByParentIds/ListFoldersByParentIdsGqlGateway.ts
new file mode 100644
index 00000000000..cd91d8e3c17
--- /dev/null
+++ b/packages/app-aco/src/features/folders/listFoldersByParentIds/ListFoldersByParentIdsGqlGateway.ts
@@ -0,0 +1,108 @@
+import ApolloClient from "apollo-client";
+import gql from "graphql-tag";
+import {
+    IListFoldersByParentIdsGateway,
+    ListFoldersByParentIdsGatewayParams
+} from "./IListFoldersByParentIdsGateway";
+import { AcoError, FolderItem } from "~/types";
+import { ROOT_FOLDER } from "~/constants";
+
+export interface ListFoldersByParentIdsResponse {
+    aco: {
+        listFolders: {
+            data: FolderItem[] | null;
+            error: AcoError | null;
+        };
+    };
+}
+
+export interface ListFoldersByParentIdsQueryVariables {
+    type: string;
+    parentIds_in: string[];
+    limit: number;
+    sort?: Record<string, any>;
+    after?: string | null;
+}
+
+export const LIST_FOLDERS_BY_PARENT_IDS = (FOLDER_FIELDS: string) => gql`
+    query ListFoldersByParentIds($type: String!, $parentIds_in: [ID!]!, $limit: Int!) {
+        aco {
+            listFolders(where: { type: $type, parentId_in: $parentIds_in }, limit: $limit) {
+                data ${FOLDER_FIELDS}
+                error {
+                    code
+                    data
+                    message
+                }
+            }
+        }
+    }
+`;
+
+export class ListFoldersByParentIdsGqlGateway implements IListFoldersByParentIdsGateway {
+    private client: ApolloClient<any>;
+    private modelFields: string;
+
+    constructor(client: ApolloClient<any>, modelFields: string) {
+        this.client = client;
+        this.modelFields = modelFields;
+    }
+
+    async execute({ parentIds, ...params }: ListFoldersByParentIdsGatewayParams) {
+        const { data: response } = await this.client.query<
+            ListFoldersByParentIdsResponse,
+            ListFoldersByParentIdsQueryVariables
+        >({
+            query: LIST_FOLDERS_BY_PARENT_IDS(this.modelFields),
+            variables: {
+                ...params,
+                parentIds_in: parentIds,
+                limit: 10000
+            },
+            fetchPolicy: "network-only"
+        });
+
+        if (!response) {
+            throw new Error("Network error while listing folders.");
+        }
+
+        const { data, error } = response.aco.listFolders;
+
+        if (!data) {
+            throw new Error(error?.message || "Could not fetch folders");
+        }
+
+        return [this.getRootFolder(), ...(data || [])];
+    }
+
+    private getRootFolder(): FolderItem {
+        return {
+            id: ROOT_FOLDER,
+            title: "Home",
+            permissions: [],
+            parentId: "0",
+            path: ROOT_FOLDER,
+            slug: "",
+            createdOn: "",
+            createdBy: {
+                id: "",
+                displayName: "",
+                type: ""
+            },
+            hasNonInheritedPermissions: false,
+            canManagePermissions: true,
+            canManageStructure: true,
+            canManageContent: true,
+            savedOn: "",
+            savedBy: {
+                id: "",
+                displayName: "",
+                type: ""
+            },
+            modifiedOn: null,
+            modifiedBy: null,
+            type: "$ROOT",
+            extensions: {}
+        };
+    }
+}
diff --git a/packages/app-aco/src/features/folders/listFoldersByParentIds/ListFoldersByParentIdsRepository.ts b/packages/app-aco/src/features/folders/listFoldersByParentIds/ListFoldersByParentIdsRepository.ts
new file mode 100644
index 00000000000..85e888240f7
--- /dev/null
+++ b/packages/app-aco/src/features/folders/listFoldersByParentIds/ListFoldersByParentIdsRepository.ts
@@ -0,0 +1,24 @@
+import { ListCache } from "../cache";
+import { Folder } from "../Folder";
+import { IListFoldersByParentIdsGateway } from "./IListFoldersByParentIdsGateway";
+import {
+    IListFoldersByParentIdsRepository,
+    ListFoldersByParentIdsRepositoryParams
+} from "./IListFoldersByParentIdsRepository";
+
+export class ListFoldersByParentIdsRepository implements IListFoldersByParentIdsRepository {
+    private cache: ListCache<Folder>;
+    private gateway: IListFoldersByParentIdsGateway;
+    private readonly type: string;
+
+    constructor(cache: ListCache<Folder>, gateway: IListFoldersByParentIdsGateway, type: string) {
+        this.cache = cache;
+        this.gateway = gateway;
+        this.type = type;
+    }
+
+    async execute(params: ListFoldersByParentIdsRepositoryParams) {
+        const items = await this.gateway.execute({ type: this.type, parentIds: params.parentIds });
+        this.cache.addItems(items.map(item => Folder.create(item)));
+    }
+}
diff --git a/packages/app-aco/src/features/folders/listFoldersByParentIds/ListFoldersByParentIdsRepositoryWithLoadedCache.ts b/packages/app-aco/src/features/folders/listFoldersByParentIds/ListFoldersByParentIdsRepositoryWithLoadedCache.ts
new file mode 100644
index 00000000000..003ab5e8c2c
--- /dev/null
+++ b/packages/app-aco/src/features/folders/listFoldersByParentIds/ListFoldersByParentIdsRepositoryWithLoadedCache.ts
@@ -0,0 +1,39 @@
+import { LoadedCache } from "../cache";
+import {
+    IListFoldersByParentIdsRepository,
+    ListFoldersByParentIdsRepositoryParams
+} from "./IListFoldersByParentIdsRepository";
+
+export class ListFoldersByParentIdsRepositoryWithLoadedCache
+    implements IListFoldersByParentIdsRepository
+{
+    private loadedCache: LoadedCache;
+    private repository: IListFoldersByParentIdsRepository;
+
+    constructor(loadedCache: LoadedCache, repository: IListFoldersByParentIdsRepository) {
+        this.loadedCache = loadedCache;
+        this.repository = repository;
+    }
+
+    async execute(params: ListFoldersByParentIdsRepositoryParams) {
+        if (this.loadedCache.count() === 0) {
+            await this.repository.execute(params);
+            this.loadedCache.addItems(params.parentIds);
+            return;
+        }
+
+        const missingParentIds = params.parentIds.filter(
+            parentId => !this.loadedCache.getItems().includes(parentId)
+        );
+
+        if (missingParentIds.length === 0) {
+            return;
+        }
+
+        this.loadedCache.addItems(missingParentIds);
+
+        await this.repository.execute({
+            parentIds: missingParentIds
+        });
+    }
+}
diff --git a/packages/app-aco/src/features/folders/listFoldersByParentIds/ListFoldersByParentIdsUseCase.ts b/packages/app-aco/src/features/folders/listFoldersByParentIds/ListFoldersByParentIdsUseCase.ts
new file mode 100644
index 00000000000..5bd58b3199a
--- /dev/null
+++ b/packages/app-aco/src/features/folders/listFoldersByParentIds/ListFoldersByParentIdsUseCase.ts
@@ -0,0 +1,28 @@
+import { IListFoldersByParentIdsRepository } from "./IListFoldersByParentIdsRepository";
+import {
+    IListFoldersByParentIdsUseCase,
+    ListFoldersByParentIdsUseCaseParams
+} from "./IListFoldersByParentIdsUseCase";
+import { ROOT_FOLDER } from "~/constants";
+
+export class ListFoldersByParentIdsUseCase implements IListFoldersByParentIdsUseCase {
+    private repository: IListFoldersByParentIdsRepository;
+
+    constructor(repository: IListFoldersByParentIdsRepository) {
+        this.repository = repository;
+    }
+
+    async execute(params: ListFoldersByParentIdsUseCaseParams) {
+        await this.repository.execute({
+            parentIds: this.getParentIds(params.parentIds)
+        });
+    }
+
+    private getParentIds(parentIds?: string[]) {
+        if (!parentIds) {
+            return [ROOT_FOLDER];
+        }
+
+        return parentIds;
+    }
+}
diff --git a/packages/app-aco/src/features/folders/listFoldersByParentIds/ListFoldersByParentIdsUseCaseWithLoading.ts b/packages/app-aco/src/features/folders/listFoldersByParentIds/ListFoldersByParentIdsUseCaseWithLoading.ts
new file mode 100644
index 00000000000..8888d706198
--- /dev/null
+++ b/packages/app-aco/src/features/folders/listFoldersByParentIds/ListFoldersByParentIdsUseCaseWithLoading.ts
@@ -0,0 +1,39 @@
+import { ILoadingRepository } from "@webiny/app-utils";
+import {
+    IListFoldersByParentIdsUseCase,
+    ListFoldersByParentIdsUseCaseParams
+} from "./IListFoldersByParentIdsUseCase";
+import { LoadedCache } from "~/features";
+import { LoadingActionsEnum } from "~/types";
+
+export class ListFoldersByParentIdsUseCaseWithLoading implements IListFoldersByParentIdsUseCase {
+    private loadingRepository: ILoadingRepository;
+    private loadedCache: LoadedCache;
+    private useCase: IListFoldersByParentIdsUseCase;
+
+    constructor(
+        loadingRepository: ILoadingRepository,
+        loadedCache: LoadedCache,
+        useCase: IListFoldersByParentIdsUseCase
+    ) {
+        this.loadingRepository = loadingRepository;
+        this.loadedCache = loadedCache;
+        this.useCase = useCase;
+    }
+
+    async execute(params: ListFoldersByParentIdsUseCaseParams) {
+        let action: string = LoadingActionsEnum.init;
+
+        if (params.parentIds?.length) {
+            action = params.parentIds
+                .filter(parentId => !this.loadedCache.getItems().includes(parentId))
+                .join(":");
+        }
+
+        if (action) {
+            await this.loadingRepository.runCallBack(this.useCase.execute(params), action);
+        } else {
+            await this.useCase.execute(params);
+        }
+    }
+}
diff --git a/packages/app-aco/src/features/folders/listFoldersByParentIds/index.ts b/packages/app-aco/src/features/folders/listFoldersByParentIds/index.ts
new file mode 100644
index 00000000000..3509e3eb5d2
--- /dev/null
+++ b/packages/app-aco/src/features/folders/listFoldersByParentIds/index.ts
@@ -0,0 +1 @@
+export * from "./useListFoldersByParentIds";
diff --git a/packages/app-aco/src/features/folders/listFoldersByParentIds/useListFoldersByParentIds.ts b/packages/app-aco/src/features/folders/listFoldersByParentIds/useListFoldersByParentIds.ts
new file mode 100644
index 00000000000..226b6855736
--- /dev/null
+++ b/packages/app-aco/src/features/folders/listFoldersByParentIds/useListFoldersByParentIds.ts
@@ -0,0 +1,65 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { autorun } from "mobx";
+import { useApolloClient } from "@apollo/react-hooks";
+import { ListFoldersByParentIdsGqlGateway } from "./ListFoldersByParentIdsGqlGateway";
+import { ListFoldersByParentIds } from "./ListFoldersByParentIds";
+import { FolderDtoMapper } from "./FolderDto";
+import { useFoldersType, useGetFolderGraphQLSelection } from "~/hooks";
+import { FolderItem } from "~/types";
+import { ROOT_FOLDER } from "~/constants";
+
+export const useListFoldersByParentIds = () => {
+    const client = useApolloClient();
+    const type = useFoldersType();
+    const fields = useGetFolderGraphQLSelection();
+    const gateway = new ListFoldersByParentIdsGqlGateway(client, fields);
+
+    const [vm, setVm] = useState<{
+        folders: FolderItem[];
+    }>({
+        folders: []
+    });
+
+    const {
+        useCase,
+        folders: foldersCache,
+        loading: loadingState
+    } = useMemo(() => {
+        return ListFoldersByParentIds.getInstance(type, gateway);
+    }, [type, gateway]);
+
+    const listFoldersByParentIds = useCallback(
+        (parentIds?: string[]) => {
+            return useCase.execute({ parentIds });
+        },
+        [useCase]
+    );
+
+    const getIsFolderLoading = useCallback(
+        (action = ROOT_FOLDER) => {
+            if (!loadingState) {
+                return true;
+            }
+
+            return loadingState.isLoading(action);
+        },
+        [loadingState]
+    );
+
+    useEffect(() => {
+        return autorun(() => {
+            const folders = foldersCache.getItems().map(folder => FolderDtoMapper.toDTO(folder));
+
+            setVm(vm => ({
+                ...vm,
+                folders
+            }));
+        });
+    }, [foldersCache]);
+
+    return {
+        ...vm,
+        listFoldersByParentIds,
+        getIsFolderLoading
+    };
+};
diff --git a/packages/app-aco/src/features/folders/updateFolder/FolderGqlDto.ts b/packages/app-aco/src/features/folders/updateFolder/FolderGqlDto.ts
index 175282d4646..8c35e6ddfe9 100644
--- a/packages/app-aco/src/features/folders/updateFolder/FolderGqlDto.ts
+++ b/packages/app-aco/src/features/folders/updateFolder/FolderGqlDto.ts
@@ -11,6 +11,7 @@ export interface FolderGqlDto {
     canManageContent: boolean;
     type: string;
     parentId: string | null;
+    path: string;
     createdBy: CmsIdentity;
     createdOn: string;
     savedBy: CmsIdentity;
diff --git a/packages/app-aco/src/features/folders/updateFolder/UpdateFolder.test.ts b/packages/app-aco/src/features/folders/updateFolder/UpdateFolder.test.ts
index c7824cb99f5..fae4336ae7b 100644
--- a/packages/app-aco/src/features/folders/updateFolder/UpdateFolder.test.ts
+++ b/packages/app-aco/src/features/folders/updateFolder/UpdateFolder.test.ts
@@ -1,6 +1,8 @@
 import { UpdateFolder } from "./UpdateFolder";
 import { folderCacheFactory } from "../cache/FoldersCacheFactory";
 import { Folder } from "../Folder";
+import { FolderPermission } from "@webiny/shared-aco/flp/flp.types";
+import { ROOT_FOLDER } from "~/constants";
 
 describe("UpdateFolder", () => {
     const type = "abc";
@@ -88,6 +90,324 @@ describe("UpdateFolder", () => {
         expect(updatedItem?.parentId).toEqual(null);
     });
 
+    it("should propagate `permissions` changes to child folders", async () => {
+        const parentFolder = Folder.create({
+            id: "parent-folder-id",
+            title: "Parent Folder",
+            slug: "parent-folder",
+            parentId: null,
+            permissions: [],
+            type
+        });
+
+        const childFolder1 = Folder.create({
+            id: "child-folder-id-1",
+            title: "Child Folder 1",
+            slug: "child-folder-1",
+            parentId: parentFolder.id,
+            permissions: [],
+            type
+        });
+
+        const childFolder2 = Folder.create({
+            id: "child-folder-id-2",
+            title: "Child Folder 2",
+            slug: "child-folder-2",
+            parentId: childFolder1.id,
+            permissions: [],
+            type
+        });
+
+        const childFolder3 = Folder.create({
+            id: "child-folder-id-3",
+            title: "Child Folder 3",
+            slug: "child-folder-3",
+            parentId: parentFolder.id, // <-- This folder is a sibling of childFolder1, not a child
+            permissions: [],
+            type
+        });
+
+        foldersCache.addItems([parentFolder, childFolder1, childFolder2, childFolder3]);
+
+        // Let's update parentFolder, the change should be propagated to all it's children (childFolder1, childFolder2 and childFolder3).
+        const parentNewPermissions: FolderPermission[] = [
+            { level: "viewer", target: "admin:123" },
+            { level: "viewer", target: "admin:456" }
+        ];
+
+        {
+            const gateway = {
+                execute: jest.fn().mockResolvedValue({
+                    id: parentFolder.id,
+                    title: parentFolder.title,
+                    slug: parentFolder.slug,
+                    parentId: parentFolder.parentId,
+                    permissions: parentNewPermissions,
+                    type
+                })
+            };
+            const updateFolder = UpdateFolder.getInstance(type, gateway);
+
+            await updateFolder.execute({
+                id: parentFolder.id,
+                title: parentFolder.title,
+                slug: parentFolder.slug,
+                parentId: parentFolder.parentId,
+                permissions: parentNewPermissions,
+                type
+            });
+
+            const childFolderCache1 = foldersCache.getItem(folder => folder.id === childFolder1.id);
+            expect(childFolderCache1?.permissions).toEqual(
+                parentNewPermissions.map(permission => ({
+                    ...permission,
+                    inheritedFrom: `parent:${parentFolder?.id}`
+                }))
+            );
+
+            const childFolderCache2 = foldersCache.getItem(folder => folder.id === childFolder2.id);
+            expect(childFolderCache2?.permissions).toEqual(
+                parentNewPermissions.map(permission => ({
+                    ...permission,
+                    inheritedFrom: `parent:${childFolderCache1?.id}`
+                }))
+            );
+
+            const childFolderCache3 = foldersCache.getItem(folder => folder.id === childFolder3.id);
+            expect(childFolderCache3?.permissions).toEqual(
+                parentNewPermissions.map(permission => ({
+                    ...permission,
+                    inheritedFrom: `parent:${parentFolder?.id}`
+                }))
+            );
+        }
+
+        // Let's update childFolder1, the change should be propagated to childFolder2, but not to childFolder3
+        const child1NewPermissions: FolderPermission[] = [{ level: "owner", target: "admin:123" }];
+
+        {
+            const gateway = {
+                execute: jest.fn().mockResolvedValue({
+                    id: childFolder1.id,
+                    title: childFolder1.title,
+                    slug: childFolder1.slug,
+                    parentId: childFolder1.parentId,
+                    permissions: child1NewPermissions,
+                    type
+                })
+            };
+            const updateFolder = UpdateFolder.getInstance(type, gateway);
+
+            await updateFolder.execute({
+                id: childFolder1.id,
+                title: childFolder1.title,
+                slug: childFolder1.slug,
+                parentId: childFolder1.parentId,
+                permissions: child1NewPermissions,
+                type
+            });
+
+            const childFolderCache1 = foldersCache.getItem(folder => folder.id === childFolder1.id);
+            expect(childFolderCache1?.permissions).toEqual([
+                ...child1NewPermissions,
+                {
+                    ...parentNewPermissions[1],
+                    inheritedFrom: `parent:${parentFolder?.id}`
+                }
+            ]);
+
+            const childFolderCache2 = foldersCache.getItem(folder => folder.id === childFolder2.id);
+            expect(childFolderCache2?.permissions).toEqual([
+                ...child1NewPermissions.map(permission => ({
+                    ...permission,
+                    inheritedFrom: `parent:${childFolderCache1?.id}`
+                })),
+                {
+                    ...parentNewPermissions[1],
+                    inheritedFrom: `parent:${childFolderCache1?.id}`
+                }
+            ]);
+
+            const childFolderCache3 = foldersCache.getItem(folder => folder.id === childFolder3.id);
+            expect(childFolderCache3?.permissions).toEqual(
+                parentNewPermissions.map(permission => ({
+                    ...permission,
+                    inheritedFrom: `parent:${parentFolder?.id}`
+                }))
+            );
+        }
+
+        {
+            // Let's remove childFolder1 permissions:
+            // childFolder1 should inherit back permissions from parentFolder,
+            // the change should be propagated to childFolder2, but not to childFolder3
+            const newPermissions: FolderPermission[] = [];
+
+            const gateway = {
+                execute: jest.fn().mockResolvedValue({
+                    id: childFolder1.id,
+                    title: childFolder1.title,
+                    slug: childFolder1.slug,
+                    parentId: childFolder1.parentId,
+                    permissions: newPermissions,
+                    type
+                })
+            };
+            const updateFolder = UpdateFolder.getInstance(type, gateway);
+
+            await updateFolder.execute({
+                id: childFolder1.id,
+                title: childFolder1.title,
+                slug: childFolder1.slug,
+                parentId: childFolder1.parentId,
+                permissions: newPermissions,
+                type
+            });
+
+            const childFolderCache1 = foldersCache.getItem(folder => folder.id === childFolder1.id);
+            expect(childFolderCache1?.permissions).toEqual(
+                parentNewPermissions.map(permission => ({
+                    ...permission,
+                    inheritedFrom: `parent:${parentFolder?.id}`
+                }))
+            );
+
+            const childFolderCache2 = foldersCache.getItem(folder => folder.id === childFolder2.id);
+            expect(childFolderCache2?.permissions).toEqual(
+                parentNewPermissions.map(permission => ({
+                    ...permission,
+                    inheritedFrom: `parent:${childFolderCache1?.id}`
+                }))
+            );
+
+            const childFolderCache3 = foldersCache.getItem(folder => folder.id === childFolder3.id);
+            expect(childFolderCache3?.permissions).toEqual(
+                parentNewPermissions.map(permission => ({
+                    ...permission,
+                    inheritedFrom: `parent:${parentFolder?.id}`
+                }))
+            );
+        }
+    });
+
+    it("should propagate `path` changes to child folders", async () => {
+        const parentFolder = Folder.create({
+            id: "parent-folder-id",
+            title: "Parent Folder",
+            slug: "parent-folder",
+            parentId: null,
+            permissions: [],
+            path: `${ROOT_FOLDER}/parent-folder`,
+            type
+        });
+
+        const childFolder1 = Folder.create({
+            id: "child-folder-id-1",
+            title: "Child Folder 1",
+            slug: "child-folder-1",
+            parentId: parentFolder.id,
+            permissions: [],
+            path: `${ROOT_FOLDER}/parent-folder/child-folder-1`,
+            type
+        });
+
+        const childFolder2 = Folder.create({
+            id: "child-folder-id-2",
+            title: "Child Folder 2",
+            slug: "child-folder-2",
+            parentId: childFolder1.id,
+            permissions: [],
+            path: `${ROOT_FOLDER}/parent-folder/child-folder-1/child-folder-2`,
+            type
+        });
+
+        const childFolder3 = Folder.create({
+            id: "child-folder-id-3",
+            title: "Child Folder 3",
+            slug: "child-folder-3",
+            parentId: parentFolder.id, // <-- This folder is a sibling of childFolder1, not a child
+            permissions: [],
+            path: `${ROOT_FOLDER}/parent-folder/child-folder-3`,
+            type
+        });
+
+        foldersCache.addItems([parentFolder, childFolder1, childFolder2, childFolder3]);
+
+        // Let's update parentFolder, the change should be propagated to all it's children (childFolder1, childFolder2 and childFolder3).
+        const newParentPath: string = `${ROOT_FOLDER}/parent-folder-edit`;
+
+        {
+            const gateway = {
+                execute: jest.fn().mockResolvedValue({
+                    id: parentFolder.id,
+                    title: parentFolder.title,
+                    slug: parentFolder.slug + "-edit",
+                    parentId: parentFolder.parentId,
+                    permissions: parentFolder.permissions,
+                    path: newParentPath,
+                    type
+                })
+            };
+            const updateFolder = UpdateFolder.getInstance(type, gateway);
+
+            await updateFolder.execute({
+                id: parentFolder.id,
+                title: parentFolder.title,
+                slug: parentFolder.slug + "-edit",
+                parentId: parentFolder.parentId,
+                permissions: parentFolder.permissions,
+                type
+            });
+
+            const childFolderCache1 = foldersCache.getItem(folder => folder.id === childFolder1.id);
+            expect(childFolderCache1?.path).toEqual(`${newParentPath}/child-folder-1`);
+
+            const childFolderCache2 = foldersCache.getItem(folder => folder.id === childFolder2.id);
+            expect(childFolderCache2?.path).toEqual(
+                `${newParentPath}/child-folder-1/child-folder-2`
+            );
+
+            const childFolderCache3 = foldersCache.getItem(folder => folder.id === childFolder3.id);
+            expect(childFolderCache3?.path).toEqual(`${newParentPath}/child-folder-3`);
+        }
+
+        // Let's update childFolder1, the change should be propagated to childFolder2, but not to childFolder3
+        const newChildFolder1Path: string = `${newParentPath}/child-folder-1-edit`;
+
+        {
+            const gateway = {
+                execute: jest.fn().mockResolvedValue({
+                    id: childFolder1.id,
+                    title: childFolder1.title,
+                    slug: childFolder1.slug + "-edit",
+                    parentId: childFolder1.parentId,
+                    permissions: childFolder1.permissions,
+                    path: newChildFolder1Path,
+                    type
+                })
+            };
+            const updateFolder = UpdateFolder.getInstance(type, gateway);
+
+            await updateFolder.execute({
+                id: childFolder1.id,
+                title: childFolder1.title,
+                slug: childFolder1.slug + "-edit",
+                parentId: childFolder1.parentId,
+                permissions: childFolder1.permissions,
+                type
+            });
+
+            const childFolderCache1 = foldersCache.getItem(folder => folder.id === childFolder1.id);
+            expect(childFolderCache1?.path).toEqual(newChildFolder1Path);
+
+            const childFolderCache2 = foldersCache.getItem(folder => folder.id === childFolder2.id);
+            expect(childFolderCache2?.path).toEqual(`${newChildFolder1Path}/child-folder-2`);
+
+            const childFolderCache3 = foldersCache.getItem(folder => folder.id === childFolder3.id);
+            expect(childFolderCache3?.path).toEqual(`${newParentPath}/child-folder-3`);
+        }
+    });
+
     it("should handle gateway errors gracefully", async () => {
         const gateway = {
             execute: jest.fn().mockRejectedValue(new Error("Gateway error"))
diff --git a/packages/app-aco/src/features/folders/updateFolder/UpdateFolder.ts b/packages/app-aco/src/features/folders/updateFolder/UpdateFolder.ts
index 63c8063842c..5125b7b2d2b 100644
--- a/packages/app-aco/src/features/folders/updateFolder/UpdateFolder.ts
+++ b/packages/app-aco/src/features/folders/updateFolder/UpdateFolder.ts
@@ -2,17 +2,29 @@ import { loadingRepositoryFactory } from "@webiny/app-utils";
 import { IUpdateFolderUseCase } from "./IUpdateFolderUseCase";
 import { IUpdateFolderGateway } from "./IUpdateFolderGateway";
 import { UpdateFolderRepository } from "./UpdateFolderRepository";
+import { UpdateFolderRepositoryWithPermissionsChange } from "./UpdateFolderRepositoryWithPermissionsChange";
 import { UpdateFolderUseCase } from "./UpdateFolderUseCase";
 import { UpdateFolderUseCaseWithLoading } from "./UpdateFolderUseCaseWithLoading";
 import { UpdateFolderUseCaseWithoutInheritedPermissions } from "./UpdateFolderUseCaseWithoutInheritedPermissions";
 import { folderCacheFactory } from "../cache";
+import { UpdateFolderRepositoryWithPathChange } from "~/features/folders/updateFolder/UpdateFolderRepositoryWithPathChange";
 
 export class UpdateFolder {
     public static getInstance(type: string, gateway: IUpdateFolderGateway): IUpdateFolderUseCase {
         const foldersCache = folderCacheFactory.getCache(type);
         const loadingRepository = loadingRepositoryFactory.getRepository(type);
+
         const repository = new UpdateFolderRepository(foldersCache, gateway);
-        const useCase = new UpdateFolderUseCase(repository);
+        const repositoryWithPathChange = new UpdateFolderRepositoryWithPathChange(
+            foldersCache,
+            repository
+        );
+        const repositoryWithPermissionsChange = new UpdateFolderRepositoryWithPermissionsChange(
+            foldersCache,
+            repositoryWithPathChange
+        );
+
+        const useCase = new UpdateFolderUseCase(repositoryWithPermissionsChange);
         const useCaseWithoutInheritedPermissions =
             new UpdateFolderUseCaseWithoutInheritedPermissions(useCase);
         return new UpdateFolderUseCaseWithLoading(
diff --git a/packages/app-aco/src/features/folders/updateFolder/UpdateFolderRepositoryWithPathChange.ts b/packages/app-aco/src/features/folders/updateFolder/UpdateFolderRepositoryWithPathChange.ts
new file mode 100644
index 00000000000..649859d7435
--- /dev/null
+++ b/packages/app-aco/src/features/folders/updateFolder/UpdateFolderRepositoryWithPathChange.ts
@@ -0,0 +1,79 @@
+import { Path } from "@webiny/shared-aco";
+import { IUpdateFolderRepository } from "./IUpdateFolderRepository";
+import { ListCache } from "../cache";
+import { Folder } from "../Folder";
+
+export class UpdateFolderRepositoryWithPathChange implements IUpdateFolderRepository {
+    private cache: ListCache<Folder>;
+    private decoretee: IUpdateFolderRepository;
+
+    constructor(cache: ListCache<Folder>, decoretee: IUpdateFolderRepository) {
+        this.cache = cache;
+        this.decoretee = decoretee;
+    }
+
+    async execute(folder: Folder) {
+        const folderPath = folder.path;
+        const cachedFolderPath = this.cache.getItem(f => f.id === folder.id)?.path;
+
+        // Update the folder
+        await this.decoretee.execute(folder);
+
+        // If the folder is not in the cache, we can't proceed to update its children paths.
+        if (!cachedFolderPath) {
+            return;
+        }
+
+        // If the folder path has not changed, we don't need to update anything.
+        if (cachedFolderPath === folderPath) {
+            return;
+        }
+
+        // Fetch the updated folder from the cache (with the new path)
+        const updatedFolder = this.cache.getItem(f => f.id === folder.id);
+        if (!updatedFolder) {
+            return;
+        }
+
+        // List direct children of the updated folder
+        const directChildren = this.listDirectChildren(updatedFolder);
+        if (!directChildren.length) {
+            return;
+        }
+
+        this.updateChildrenPathsRecursively(directChildren, updatedFolder);
+    }
+
+    private updateChildrenPathsRecursively(children: Folder[], parentFolder: Folder) {
+        for (const child of children) {
+            let updatedChild: Folder | undefined;
+
+            // Update the child's path in the cache
+            this.cache.updateItems(f => {
+                if (f.id === child.id) {
+                    const newPath = Path.create(f.slug, parentFolder.path); // Use the updated parent's path
+                    const updated = Folder.create({
+                        ...f,
+                        path: newPath
+                    });
+
+                    updatedChild = updated; // Store the updated child for recursion
+                    return updated;
+                }
+                return f;
+            });
+
+            // Recurse for the child's children
+            if (updatedChild) {
+                const grandChildren = this.listDirectChildren(updatedChild);
+                if (grandChildren.length) {
+                    this.updateChildrenPathsRecursively(grandChildren, updatedChild);
+                }
+            }
+        }
+    }
+
+    private listDirectChildren(folder: Folder) {
+        return this.cache.getItems().filter(f => f.parentId === folder.id);
+    }
+}
diff --git a/packages/app-aco/src/features/folders/updateFolder/UpdateFolderRepositoryWithPermissionsChange.ts b/packages/app-aco/src/features/folders/updateFolder/UpdateFolderRepositoryWithPermissionsChange.ts
new file mode 100644
index 00000000000..d3943d7c4eb
--- /dev/null
+++ b/packages/app-aco/src/features/folders/updateFolder/UpdateFolderRepositoryWithPermissionsChange.ts
@@ -0,0 +1,72 @@
+import isEqual from "lodash/isEqual";
+import { Permissions } from "@webiny/shared-aco";
+import { IUpdateFolderRepository } from "./IUpdateFolderRepository";
+import { ListCache } from "../cache";
+import { Folder } from "../Folder";
+
+export class UpdateFolderRepositoryWithPermissionsChange implements IUpdateFolderRepository {
+    private cache: ListCache<Folder>;
+    private decoretee: IUpdateFolderRepository;
+
+    constructor(cache: ListCache<Folder>, decoretee: IUpdateFolderRepository) {
+        this.cache = cache;
+        this.decoretee = decoretee;
+    }
+
+    async execute(folder: Folder) {
+        const folderPermissions = [...folder.permissions];
+        const cachedFolderPermissions = this.cache.getItem(f => f.id === folder.id)?.permissions;
+
+        // Let's run the original use case and update the folder.
+        await this.decoretee.execute(folder);
+
+        if (!cachedFolderPermissions) {
+            // If the folder is not in the cache, we can't proceed to update its children permissions.
+            return;
+        }
+
+        if (isEqual(cachedFolderPermissions, folderPermissions)) {
+            // If the permissions are the same, we don't need to update anything.
+            return;
+        }
+
+        // If the permissions have changed, we need to update the folder and its children.
+        // Starting with the folder itself, inheriting permissions from its parent folder.
+        const parentFolder = this.cache.getItem(f => f.id === folder.parentId);
+        const updatedFolder = this.updateFolderPermissions(folder.id, parentFolder);
+
+        // Now we need to update the permissions of all permissions of the folder's children.
+        const directChildren = this.listDirectChildren(updatedFolder);
+        if (directChildren.length) {
+            this.updateChildrenPermissionsRecursively(directChildren, updatedFolder);
+        }
+    }
+
+    private updateChildrenPermissionsRecursively(children: Folder[], parentFolder: Folder) {
+        for (const child of children) {
+            const updatedChild = this.updateFolderPermissions(child.id, parentFolder);
+            const grandChildren = this.listDirectChildren(updatedChild);
+            if (grandChildren.length) {
+                this.updateChildrenPermissionsRecursively(grandChildren, updatedChild);
+            }
+        }
+    }
+
+    private updateFolderPermissions(folderId: string, parentFolder: Folder | undefined): Folder {
+        let updatedFolder: Folder | undefined;
+        this.cache.updateItems(f => {
+            if (f.id === folderId) {
+                const permissions = Permissions.create(f.permissions, parentFolder);
+                updatedFolder = Folder.create({ ...f, permissions });
+                return updatedFolder;
+            }
+            return f;
+        });
+
+        return updatedFolder!;
+    }
+
+    private listDirectChildren(folder: Folder) {
+        return this.cache.getItems().filter(f => f.parentId === folder.id);
+    }
+}
diff --git a/packages/app-aco/src/sorting.tsx b/packages/app-aco/src/sorting.tsx
index 348664070ae..b132b2d3af0 100644
--- a/packages/app-aco/src/sorting.tsx
+++ b/packages/app-aco/src/sorting.tsx
@@ -1,7 +1,6 @@
 import orderBy from "lodash/orderBy";
-
+import type { DataTableSorting } from "@webiny/admin-ui";
 import { ListSearchRecordsSort, ListSearchRecordsSortItem } from "~/types";
-import { Sorting } from "@webiny/ui/DataTable";
 
 export const validateOrGetDefaultDbSort = (
     initial?: ListSearchRecordsSort
@@ -36,7 +35,7 @@ export const sortTableItems = (
     return orderBy(records, fields, orders);
 };
 
-export const createSort = (sorting?: Sorting): ListSearchRecordsSort | undefined => {
+export const createSort = (sorting?: DataTableSorting): ListSearchRecordsSort | undefined => {
     if (!sorting?.length) {
         return undefined;
     }
diff --git a/packages/app-aco/src/types.ts b/packages/app-aco/src/types.ts
index 5f4ca8a54ae..a748fc81ac9 100644
--- a/packages/app-aco/src/types.ts
+++ b/packages/app-aco/src/types.ts
@@ -4,17 +4,12 @@ import {
     CmsModelField,
     CmsModelFieldSettings
 } from "@webiny/app-headless-cms-common/types";
+import type { FolderPermission } from "@webiny/shared-aco/types";
 
 export { CmsIdentity } from "@webiny/app-headless-cms-common/types";
+export * from "@webiny/shared-aco/flp/flp.types";
 export * from "~/graphql/records/types";
 export * from "~/table.types";
-export type FolderAccessLevel = "owner" | "viewer" | "editor" | "public";
-
-export interface FolderPermission {
-    target: `admin:${string}` | `team:${string}`;
-    level: FolderAccessLevel;
-    inheritedFrom?: string;
-}
 
 export interface FolderLevelPermissionsTarget<TMeta = Record<string, any>> {
     id: string;
@@ -35,6 +30,7 @@ export interface FolderItem {
     canManageContent: boolean;
     type: string;
     parentId: string | null;
+    path: string;
     createdBy: CmsIdentity;
     createdOn: string;
     savedBy: CmsIdentity;
@@ -68,16 +64,16 @@ export type LoadingActions =
     | "DELETE"
     | "MOVE";
 
-export enum LoadingActionsEnum {
-    init = "INIT",
-    list = "LIST",
-    listMore = "LIST_MORE",
-    get = "GET",
-    create = "CREATE",
-    update = "UPDATE",
-    delete = "DELETE",
-    move = "MOVE"
-}
+export const LoadingActionsEnum = {
+    init: "INIT",
+    list: "LIST",
+    listMore: "LIST_MORE",
+    get: "GET",
+    create: "CREATE",
+    update: "UPDATE",
+    delete: "DELETE",
+    move: "MOVE"
+};
 
 export interface AcoError {
     code: string;
diff --git a/packages/app-aco/tsconfig.build.json b/packages/app-aco/tsconfig.build.json
index bda102d5c14..3ac4c47811d 100644
--- a/packages/app-aco/tsconfig.build.json
+++ b/packages/app-aco/tsconfig.build.json
@@ -2,6 +2,7 @@
   "extends": "../../tsconfig.build.json",
   "include": ["src"],
   "references": [
+    { "path": "../admin-ui/tsconfig.build.json" },
     { "path": "../app/tsconfig.build.json" },
     { "path": "../app-admin/tsconfig.build.json" },
     { "path": "../app-headless-cms-common/tsconfig.build.json" },
@@ -12,7 +13,7 @@
     { "path": "../plugins/tsconfig.build.json" },
     { "path": "../react-properties/tsconfig.build.json" },
     { "path": "../react-router/tsconfig.build.json" },
-    { "path": "../ui/tsconfig.build.json" },
+    { "path": "../shared-aco/tsconfig.build.json" },
     { "path": "../utils/tsconfig.build.json" },
     { "path": "../validation/tsconfig.build.json" }
   ],
diff --git a/packages/app-aco/tsconfig.json b/packages/app-aco/tsconfig.json
index f7cb73a64e3..03cb9cfa854 100644
--- a/packages/app-aco/tsconfig.json
+++ b/packages/app-aco/tsconfig.json
@@ -2,6 +2,7 @@
   "extends": "../../tsconfig.json",
   "include": ["src", "__tests__"],
   "references": [
+    { "path": "../admin-ui" },
     { "path": "../app" },
     { "path": "../app-admin" },
     { "path": "../app-headless-cms-common" },
@@ -12,7 +13,7 @@
     { "path": "../plugins" },
     { "path": "../react-properties" },
     { "path": "../react-router" },
-    { "path": "../ui" },
+    { "path": "../shared-aco" },
     { "path": "../utils" },
     { "path": "../validation" }
   ],
@@ -23,6 +24,8 @@
     "paths": {
       "~/*": ["./src/*"],
       "~tests/*": ["./__tests__/*"],
+      "@webiny/admin-ui/*": ["../admin-ui/src/*"],
+      "@webiny/admin-ui": ["../admin-ui/src"],
       "@webiny/app/*": ["../app/src/*"],
       "@webiny/app": ["../app/src"],
       "@webiny/app-admin/*": ["../app-admin/src/*"],
@@ -43,8 +46,8 @@
       "@webiny/react-properties": ["../react-properties/src"],
       "@webiny/react-router/*": ["../react-router/src/*"],
       "@webiny/react-router": ["../react-router/src"],
-      "@webiny/ui/*": ["../ui/src/*"],
-      "@webiny/ui": ["../ui/src"],
+      "@webiny/shared-aco/*": ["../shared-aco/src/*"],
+      "@webiny/shared-aco": ["../shared-aco/src"],
       "@webiny/utils/*": ["../utils/src/*"],
       "@webiny/utils": ["../utils/src"],
       "@webiny/validation/*": ["../validation/src/*"],
diff --git a/packages/app-admin-auth0/package.json b/packages/app-admin-auth0/package.json
index 5d1cec7c0d9..76dbaced673 100644
--- a/packages/app-admin-auth0/package.json
+++ b/packages/app-admin-auth0/package.json
@@ -13,6 +13,7 @@
     "@apollo/react-hooks": "^3.1.5",
     "@auth0/auth0-react": "^2.2.4",
     "@emotion/styled": "11.10.6",
+    "@webiny/admin-ui": "0.0.0",
     "@webiny/app": "0.0.0",
     "@webiny/app-admin": "0.0.0",
     "@webiny/app-security": "0.0.0",
@@ -20,6 +21,7 @@
     "@webiny/app-tenancy": "0.0.0",
     "@webiny/app-tenant-manager": "0.0.0",
     "@webiny/form": "0.0.0",
+    "@webiny/icons": "0.0.0",
     "@webiny/plugins": "0.0.0",
     "@webiny/react-router": "0.0.0",
     "@webiny/ui": "0.0.0",
diff --git a/packages/app-admin-auth0/src/createGetIdentityData/graphql.ts b/packages/app-admin-auth0/src/createGetIdentityData/graphql.ts
index 0a948fb2964..2b9efc50593 100644
--- a/packages/app-admin-auth0/src/createGetIdentityData/graphql.ts
+++ b/packages/app-admin-auth0/src/createGetIdentityData/graphql.ts
@@ -13,12 +13,14 @@ export const LOGIN_MT = gql`
                             id
                             name
                             description
+                            image
                             parent
                         }
                         defaultTenant {
                             id
                             name
                             description
+                            image
                             parent
                         }
                         permissions
diff --git a/packages/app-admin-auth0/src/index.ts b/packages/app-admin-auth0/src/index.ts
index 90d88d4114a..d891e1ae202 100644
--- a/packages/app-admin-auth0/src/index.ts
+++ b/packages/app-admin-auth0/src/index.ts
@@ -1,9 +1,9 @@
 export { Auth0 } from "./Auth0";
 export type { Auth0Props } from "./Auth0";
-import { UserInfo } from "./modules/userMenu/userInfo";
-import { UserImage } from "./modules/userMenu/userImage";
-import { ExitTenant } from "./modules/userMenu/exitTenant";
-import { SignOut } from "./modules/userMenu/signOut";
+import { UserInfo } from "./modules/userMenu/UserInfo";
+import { UserImage } from "./modules/userMenu/UserImage";
+import { ExitTenant } from "./modules/userMenu/ExitTenant";
+import { SignOut } from "./modules/userMenu/SignOut";
 import { NotAuthorizedError, LoginContent, LoginLayout } from "./components";
 
 export const Components = {
diff --git a/packages/app-admin-auth0/src/modules/userMenu/ExitTenant.tsx b/packages/app-admin-auth0/src/modules/userMenu/ExitTenant.tsx
new file mode 100644
index 00000000000..739740cc75f
--- /dev/null
+++ b/packages/app-admin-auth0/src/modules/userMenu/ExitTenant.tsx
@@ -0,0 +1,32 @@
+import React from "react";
+import { makeDecoratable } from "@webiny/app-serverless-cms";
+import { useSecurity } from "@webiny/app-security";
+import { useTenancy } from "@webiny/app-tenancy";
+import { AdminConfig } from "@webiny/app-admin";
+import { ReactComponent as SignOutIcon } from "@webiny/icons/logout.svg";
+
+const { Menu } = AdminConfig;
+
+export const ExitTenant = makeDecoratable("ExitTenant", () => {
+    const security = useSecurity();
+    const tenancy = useTenancy();
+
+    if (!security || !security.identity) {
+        return null;
+    }
+
+    // This is only applicable in multi-tenant environments
+    const { currentTenant, defaultTenant } = security.identity;
+
+    if (tenancy && currentTenant && defaultTenant && currentTenant.id !== defaultTenant.id) {
+        return (
+            <Menu.User.Item
+                icon={<Menu.User.Item.Icon element={<SignOutIcon />} label={"Exit tenant"} />}
+                text={"Exit tenant"}
+                onClick={() => tenancy.setTenant(defaultTenant.id)}
+            />
+        );
+    }
+
+    return null;
+});
diff --git a/packages/app-admin-auth0/src/modules/userMenu/SignOut.tsx b/packages/app-admin-auth0/src/modules/userMenu/SignOut.tsx
new file mode 100644
index 00000000000..b5f0b267222
--- /dev/null
+++ b/packages/app-admin-auth0/src/modules/userMenu/SignOut.tsx
@@ -0,0 +1,27 @@
+import React from "react";
+import { useSecurity } from "@webiny/app-security/hooks/useSecurity";
+import { ReactComponent as SignOutIcon } from "@webiny/icons/logout.svg";
+import { AdminConfig, makeDecoratable } from "@webiny/app-admin";
+
+const { Menu } = AdminConfig;
+
+export const SignOut = makeDecoratable("SignOut", () => {
+    const { identity } = useSecurity();
+
+    if (!identity) {
+        return null;
+    }
+
+    if (typeof identity.logout !== "function") {
+        console.warn(`Missing "logout" function implementation in SecurityIdentity!`);
+        return null;
+    }
+
+    return (
+        <Menu.User.Item
+            text={"Sign out"}
+            icon={<Menu.User.Item.Icon element={<SignOutIcon />} label={"Sign out"} />}
+            onClick={identity.logout}
+        />
+    );
+});
diff --git a/packages/app-admin-auth0/src/modules/userMenu/UserImage.tsx b/packages/app-admin-auth0/src/modules/userMenu/UserImage.tsx
new file mode 100644
index 00000000000..adcdbefeb38
--- /dev/null
+++ b/packages/app-admin-auth0/src/modules/userMenu/UserImage.tsx
@@ -0,0 +1,26 @@
+import React from "react";
+import { makeDecoratable } from "@webiny/app-serverless-cms";
+import { Avatar } from "@webiny/admin-ui";
+import { useSecurity } from "@webiny/app-security/hooks/useSecurity";
+
+export const UserImage = makeDecoratable("UserImage", () => {
+    const { identity } = useSecurity();
+
+    if (!identity) {
+        return null;
+    }
+
+    const { displayName } = identity;
+
+    return (
+        <Avatar
+            size={"sm"}
+            variant={"strong"}
+            fallback={
+                <Avatar.Fallback className={"wby-uppercase"} delayMs={0}>
+                    {displayName[0]}
+                </Avatar.Fallback>
+            }
+        />
+    );
+});
diff --git a/packages/app-admin-auth0/src/modules/userMenu/UserInfo.tsx b/packages/app-admin-auth0/src/modules/userMenu/UserInfo.tsx
new file mode 100644
index 00000000000..6b94f5d6ab3
--- /dev/null
+++ b/packages/app-admin-auth0/src/modules/userMenu/UserInfo.tsx
@@ -0,0 +1,27 @@
+import React from "react";
+import { AdminConfig } from "@webiny/app-admin";
+import { Text } from "@webiny/admin-ui";
+import { useSecurity } from "@webiny/app-security";
+
+const { Menu } = AdminConfig;
+
+export const UserInfo = () => {
+    const security = useSecurity();
+    if (!security || !security.identity) {
+        return null;
+    }
+
+    const { id, displayName } = security.identity;
+
+    return (
+        <>
+            <Text size={"md"} className={"wby-block wby-font-semibold wby-mb-sm"}>
+                {displayName}
+            </Text>
+            <Text size={"sm"} className={"wby-block !wby-text-neutral-strong"}>
+                {id}
+            </Text>
+            <Menu.User.Separator />
+        </>
+    );
+};
diff --git a/packages/app-admin-auth0/src/modules/userMenu/UserMenuHandle.tsx b/packages/app-admin-auth0/src/modules/userMenu/UserMenuHandle.tsx
new file mode 100644
index 00000000000..b33a37377bb
--- /dev/null
+++ b/packages/app-admin-auth0/src/modules/userMenu/UserMenuHandle.tsx
@@ -0,0 +1,35 @@
+import React from "react";
+import { IconButton } from "@webiny/admin-ui";
+import { useSecurity } from "@webiny/app-security";
+import { ReactComponent as KeyboardArrowRightIcon } from "@webiny/icons/keyboard_arrow_down.svg";
+import { UserMenuHandleRenderer as UserMenuHandleRendererSpec } from "@webiny/app-admin";
+import { UserImage } from "./UserImage";
+
+export const UserMenuHandle = UserMenuHandleRendererSpec.createDecorator(() => {
+    return function UserMenuHandle() {
+        const { identity } = useSecurity();
+
+        if (!identity) {
+            return null;
+        }
+
+        return (
+            <div className={"wby-flex wby-gap-x-sm wby-cursor-pointer"}>
+                <div
+                    data-testid="logged-in-user-menu-avatar"
+                    className={
+                        "wby-flex wby-items-center wby-rounded-md wby-gap-xxs wby-py-xs wby-px-xs wby-bg-neutral-light"
+                    }
+                >
+                    <UserImage />
+                    <IconButton
+                        variant={"ghost"}
+                        size={"xs"}
+                        color={"neutral-strong"}
+                        icon={<KeyboardArrowRightIcon />}
+                    />
+                </div>
+            </div>
+        );
+    };
+});
diff --git a/packages/app-admin-auth0/src/modules/userMenu/exitTenant.tsx b/packages/app-admin-auth0/src/modules/userMenu/exitTenant.tsx
deleted file mode 100644
index c49b0c2a6d4..00000000000
--- a/packages/app-admin-auth0/src/modules/userMenu/exitTenant.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import React from "react";
-import { makeDecoratable } from "@webiny/app-serverless-cms";
-import { ListItem, ListItemGraphic } from "@webiny/ui/List";
-import { Icon } from "@webiny/ui/Icon";
-import { ReactComponent as LogoutIcon } from "~/assets/icons/logout_black_24dp.svg";
-import { useSecurity } from "@webiny/app-security";
-import { useTenancy } from "@webiny/app-tenancy";
-
-export const ExitTenant = makeDecoratable("ExitTenant", () => {
-    const security = useSecurity();
-    const tenancy = useTenancy();
-
-    if (!security || !security.identity) {
-        return null;
-    }
-
-    // This is only applicable in multi-tenant environments
-    const { currentTenant, defaultTenant } = security.identity;
-
-    if (tenancy && currentTenant && defaultTenant && currentTenant.id !== defaultTenant.id) {
-        return (
-            <ListItem onClick={() => tenancy.setTenant(defaultTenant.id)}>
-                <ListItemGraphic>
-                    <Icon icon={<LogoutIcon />} />
-                </ListItemGraphic>
-                Exit tenant
-            </ListItem>
-        );
-    }
-
-    return null;
-});
diff --git a/packages/app-admin-auth0/src/modules/userMenu/index.tsx b/packages/app-admin-auth0/src/modules/userMenu/index.tsx
index 7c49d6a99f6..236106e633b 100644
--- a/packages/app-admin-auth0/src/modules/userMenu/index.tsx
+++ b/packages/app-admin-auth0/src/modules/userMenu/index.tsx
@@ -1,30 +1,21 @@
 import React, { Fragment } from "react";
-import {
-    AddUserMenuItem,
-    UserMenuHandleRenderer,
-    Compose,
-    Plugins
-} from "@webiny/app-serverless-cms";
-import { UserInfo } from "~/modules/userMenu/userInfo";
-import { SignOut } from "~/modules/userMenu/signOut";
-import { UserImage } from "~/modules/userMenu/userImage";
-import { ExitTenant } from "./exitTenant";
+import { AdminConfig } from "@webiny/app-serverless-cms";
+import { UserInfo } from "./UserInfo";
+import { SignOut } from "./SignOut";
+import { UserMenuHandle } from "./UserMenuHandle";
+import { ExitTenant } from "./ExitTenant";
 
-const UserImageHOC = () => {
-    return function UserImageHOC() {
-        return <UserImage />;
-    };
-};
+const { Menu } = AdminConfig;
 
 export const UserMenuModule = () => {
     return (
         <Fragment>
-            <Compose component={UserMenuHandleRenderer} with={UserImageHOC} />
-            <Plugins>
-                <AddUserMenuItem element={<UserInfo />} />
-                <AddUserMenuItem element={<ExitTenant />} />
-                <AddUserMenuItem element={<SignOut />} />
-            </Plugins>
+            <UserMenuHandle />
+            <AdminConfig>
+                <Menu.User name={"exitTenant"} element={<ExitTenant />} />
+                <Menu.User name={"signOut"} element={<SignOut />} />
+                <Menu.User name={"userInfo"} element={<UserInfo />} />
+            </AdminConfig>
         </Fragment>
     );
 };
diff --git a/packages/app-admin-auth0/src/modules/userMenu/signOut.tsx b/packages/app-admin-auth0/src/modules/userMenu/signOut.tsx
deleted file mode 100644
index 5c27d9ae874..00000000000
--- a/packages/app-admin-auth0/src/modules/userMenu/signOut.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from "react";
-import { makeDecoratable } from "@webiny/app-serverless-cms";
-import { ListItem, ListItemGraphic } from "@webiny/ui/List";
-import { Icon } from "@webiny/ui/Icon";
-import { useSecurity } from "@webiny/app-security/hooks/useSecurity";
-import { ReactComponent as SignOutIcon } from "~/assets/icons/round-lock_open-24px.svg";
-
-export const SignOut = makeDecoratable("SignOut", () => {
-    const { identity } = useSecurity();
-
-    if (!identity) {
-        return null;
-    }
-
-    if (typeof identity.logout !== "function") {
-        console.warn(`Missing "logout" function implementation in SecurityIdentity!`);
-        return null;
-    }
-
-    return (
-        <ListItem onClick={identity.logout}>
-            <ListItemGraphic>{<Icon icon={<SignOutIcon />} />}</ListItemGraphic>
-            Sign out
-        </ListItem>
-    );
-});
diff --git a/packages/app-admin-auth0/src/modules/userMenu/userImage.tsx b/packages/app-admin-auth0/src/modules/userMenu/userImage.tsx
deleted file mode 100644
index 50cc98639db..00000000000
--- a/packages/app-admin-auth0/src/modules/userMenu/userImage.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import React from "react";
-import { makeDecoratable } from "@webiny/app-serverless-cms";
-import { Avatar } from "@webiny/ui/Avatar";
-import { useSecurity } from "@webiny/app-security/hooks/useSecurity";
-
-export const UserImage = makeDecoratable("UserImage", () => {
-    const { identity } = useSecurity();
-
-    if (!identity) {
-        return null;
-    }
-
-    const { displayName } = identity;
-
-    return (
-        <Avatar
-            data-testid="logged-in-user-menu-avatar"
-            alt={displayName}
-            fallbackText={displayName}
-        />
-    );
-});
diff --git a/packages/app-admin-auth0/src/modules/userMenu/userInfo.tsx b/packages/app-admin-auth0/src/modules/userMenu/userInfo.tsx
deleted file mode 100644
index f25eb9ca76f..00000000000
--- a/packages/app-admin-auth0/src/modules/userMenu/userInfo.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-import React from "react";
-import { css } from "emotion";
-import { useSecurity } from "@webiny/app-security/hooks/useSecurity";
-import { ListItem, ListItemGraphic } from "@webiny/ui/List";
-import { Typography } from "@webiny/ui/Typography";
-import { Avatar } from "@webiny/ui/Avatar";
-import { makeDecoratable } from "@webiny/app-serverless-cms";
-
-const avatarImage = css({
-    height: "40px !important",
-    width: "40px !important",
-    borderRadius: "50%",
-    display: "inline-block",
-    ">div": {
-        backgroundColor: "var(--mdc-theme-surface)"
-    }
-});
-
-const linkStyles = css({
-    backgroundColor: "var(--mdc-theme-background)",
-    marginTop: -25,
-    marginBottom: 0,
-    paddingTop: 0,
-    paddingBottom: 0,
-    textDecoration: "none",
-    display: "block",
-    ">.mdc-deprecated-list-item": {
-        display: "flex",
-        height: "65px !important",
-        marginTop: 15,
-        ".avatar": {
-            marginTop: 10
-        }
-    },
-    "h3, h3>.mdc-typography--headline6": {
-        lineHeight: "1em !important"
-    },
-    ".mdc-menu &.mdc-deprecated-list-item": {
-        ">.mdc-deprecated-list-item__text": {
-            fontWeight: "bold"
-        }
-    },
-    ".mdc-deprecated-list-item": {
-        height: "auto",
-        ".mdc-typography--headline6": {
-            overflow: "hidden",
-            whiteSpace: "nowrap",
-            textOverflow: "ellipsis",
-            maxWidth: 180,
-            display: "block"
-        },
-        ".mdc-typography--subtitle2": {
-            overflow: "hidden",
-            whiteSpace: "nowrap",
-            textOverflow: "ellipsis",
-            maxWidth: 180
-        }
-    }
-});
-
-export const UserInfo = makeDecoratable("UserInfo", () => {
-    const security = useSecurity();
-
-    if (!security || !security.identity) {
-        return null;
-    }
-
-    const { id, displayName } = security.identity;
-
-    return (
-        <div className={linkStyles}>
-            <ListItem ripple={false} className={linkStyles}>
-                <ListItemGraphic className={avatarImage}>
-                    <Avatar
-                        className={"avatar"}
-                        src={null}
-                        alt={displayName}
-                        fallbackText={displayName}
-                    />
-                </ListItemGraphic>
-                <div>
-                    <Typography use={"headline6"}>{displayName}</Typography>
-                    <Typography use={"subtitle2"}>{id}</Typography>
-                </div>
-            </ListItem>
-        </div>
-    );
-});
diff --git a/packages/app-admin-auth0/tsconfig.build.json b/packages/app-admin-auth0/tsconfig.build.json
index 0678df3f3f3..089c92000d3 100644
--- a/packages/app-admin-auth0/tsconfig.build.json
+++ b/packages/app-admin-auth0/tsconfig.build.json
@@ -2,6 +2,7 @@
   "extends": "../../tsconfig.build.json",
   "include": ["src"],
   "references": [
+    { "path": "../admin-ui/tsconfig.build.json" },
     { "path": "../app/tsconfig.build.json" },
     { "path": "../app-admin/tsconfig.build.json" },
     { "path": "../app-security/tsconfig.build.json" },
diff --git a/packages/app-admin-auth0/tsconfig.json b/packages/app-admin-auth0/tsconfig.json
index a6a9d6e0a39..ea1970d011f 100644
--- a/packages/app-admin-auth0/tsconfig.json
+++ b/packages/app-admin-auth0/tsconfig.json
@@ -2,6 +2,7 @@
   "extends": "../../tsconfig.json",
   "include": ["src", "__tests__"],
   "references": [
+    { "path": "../admin-ui" },
     { "path": "../app" },
     { "path": "../app-admin" },
     { "path": "../app-security" },
@@ -21,6 +22,8 @@
     "paths": {
       "~/*": ["./src/*"],
       "~tests/*": ["./__tests__/*"],
+      "@webiny/admin-ui/*": ["../admin-ui/src/*"],
+      "@webiny/admin-ui": ["../admin-ui/src"],
       "@webiny/app/*": ["../app/src/*"],
       "@webiny/app": ["../app/src"],
       "@webiny/app-admin/*": ["../app-admin/src/*"],
diff --git a/packages/app-admin-cognito/package.json b/packages/app-admin-cognito/package.json
index 50616350a25..35afbd6c17c 100644
--- a/packages/app-admin-cognito/package.json
+++ b/packages/app-admin-cognito/package.json
@@ -14,7 +14,7 @@
   "dependencies": {
     "@apollo/react-hooks": "^3.1.5",
     "@aws-amplify/auth": "^5.6.15",
-    "@emotion/styled": "11.10.6",
+    "@webiny/admin-ui": "0.0.0",
     "@webiny/app": "0.0.0",
     "@webiny/app-admin": "0.0.0",
     "@webiny/app-cognito-authenticator": "0.0.0",
@@ -22,11 +22,9 @@
     "@webiny/form": "0.0.0",
     "@webiny/plugins": "0.0.0",
     "@webiny/react-composition": "0.0.0",
-    "@webiny/ui": "0.0.0",
     "@webiny/validation": "0.0.0",
     "apollo-client": "^2.6.10",
     "apollo-link-context": "^1.0.20",
-    "emotion": "10.0.27",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },
diff --git a/packages/app-admin-cognito/src/components/Divider.tsx b/packages/app-admin-cognito/src/components/Divider.tsx
index bbeed85530a..f9c11dbd661 100644
--- a/packages/app-admin-cognito/src/components/Divider.tsx
+++ b/packages/app-admin-cognito/src/components/Divider.tsx
@@ -1,5 +1,22 @@
-import styled from "@emotion/styled";
+import React from "react";
+import { Separator, Text } from "@webiny/admin-ui";
 
-export const Divider = styled.div`
-    border-top: 1px solid #ececec;
-`;
+export const Divider = () => {
+    return (
+        <div className={"wby-relative wby-my-lg"}>
+            <div className={"wby-absolute wby-inset-0 wby-flex wby-items-center"}>
+                <Separator />
+            </div>
+            <div className={"wby-relative wby-flex wby-justify-center"}>
+                <Text
+                    size={"sm"}
+                    className={
+                        "wby-text-neutral-strong wby-px-sm wby-bg-neutral-base wby-uppercase"
+                    }
+                >
+                    {"Or continue with"}
+                </Text>
+            </div>
+        </div>
+    );
+};
diff --git a/packages/app-admin-cognito/src/components/FederatedProviders.tsx b/packages/app-admin-cognito/src/components/FederatedProviders.tsx
index e40d732bf9e..8926cb1e113 100644
--- a/packages/app-admin-cognito/src/components/FederatedProviders.tsx
+++ b/packages/app-admin-cognito/src/components/FederatedProviders.tsx
@@ -1,14 +1,6 @@
 import React from "react";
-import styled from "@emotion/styled";
 import { makeDecoratable } from "@webiny/app-admin";
 
-const FlexContainer = styled.div`
-    display: flex;
-    column-gap: 10px;
-    padding-top: 20px;
-    justify-content: center;
-`;
-
 export interface ContainerProps {
     children: React.ReactNode;
 }
@@ -16,7 +8,7 @@ export interface ContainerProps {
 export const Container = makeDecoratable(
     "FederatedProvidersContainer",
     ({ children }: ContainerProps) => {
-        return <FlexContainer>{children}</FlexContainer>;
+        return <div className={"wby-flex wby-flex-col wby-gap-xs"}>{children}</div>;
     }
 );
 
diff --git a/packages/app-admin-cognito/src/components/StyledComponents.ts b/packages/app-admin-cognito/src/components/StyledComponents.ts
deleted file mode 100644
index 429164a85a5..00000000000
--- a/packages/app-admin-cognito/src/components/StyledComponents.ts
+++ /dev/null
@@ -1,64 +0,0 @@
-import styled from "@emotion/styled";
-import { css } from "emotion";
-
-export const Wrapper = styled("section")({
-    display: "flex",
-    flexDirection: "column",
-    justifyContent: "center",
-    minHeight: "100vh",
-    color: "var(--mdc-theme-on-surface)"
-});
-
-export const LogoWrapper = styled("div")({
-    margin: "0 auto",
-    marginBottom: 30
-});
-
-export const LoginContent = styled("div")({
-    width: "100%",
-    maxWidth: 500,
-    margin: "0 auto 25px auto",
-    ".mdc-elevation--z2": {
-        borderRadius: 4,
-        boxShadow: "0 1px 3px 0 rgba(0,0,0,0.15)"
-    },
-    a: {
-        textDecoration: "none",
-        color: "var(--mdc-theme-primary)",
-        fontWeight: 600,
-        "&:hover": {
-            textDecoration: "underline"
-        }
-    }
-});
-
-export const InnerContent = styled("div")({
-    position: "relative",
-    padding: 25
-});
-
-export const Footer = styled("div")({
-    textAlign: "center",
-    marginBottom: 75,
-    a: {
-        textDecoration: "none",
-        color: "var(--mdc-theme-primary)"
-    }
-});
-
-export const Title = styled("div")({
-    textAlign: "center",
-    margin: "10px 25px"
-});
-
-export const alignRight = css({
-    textAlign: "right"
-});
-
-export const alignCenter = css({
-    textAlign: "center"
-});
-
-export const errorMessage = css({
-    color: "red"
-});
diff --git a/packages/app-admin-cognito/src/components/View.tsx b/packages/app-admin-cognito/src/components/View.tsx
index f4b4ca247a3..901a83d9663 100644
--- a/packages/app-admin-cognito/src/components/View.tsx
+++ b/packages/app-admin-cognito/src/components/View.tsx
@@ -1,31 +1,36 @@
 import * as React from "react";
 import { Logo, makeDecoratable } from "@webiny/app-admin";
-import * as Styled from "./StyledComponents";
-import { Elevation } from "@webiny/ui/Elevation";
-import { Cell, Grid } from "@webiny/ui/Grid";
-import { Typography } from "@webiny/ui/Typography";
+import { Alert, Grid, Heading, Text } from "@webiny/admin-ui";
 
 export interface ContainerProps {
     children: React.ReactNode;
 }
 
-const Container = makeDecoratable("ViewContainer", ({ children }: ContainerProps) => (
-    <Styled.Wrapper>
-        <Styled.LogoWrapper>
-            <Logo />
-        </Styled.LogoWrapper>
-        <Styled.LoginContent>{children}</Styled.LoginContent>
-    </Styled.Wrapper>
-));
+const Container = makeDecoratable("ViewContainer", ({ children }: ContainerProps) => {
+    return (
+        <div className={"wby-w-screen wby-h-screen wby-bg-neutral-light wby-flex-1"}>
+            <section
+                className={"wby-m-auto wby-flex wby-flex-col wby-justify-center wby-min-h-screen"}
+            >
+                <div className={"wby-mx-auto"}>
+                    <Logo />
+                </div>
+                <div className={"wby-w-full wby-max-w-[480px] wby-mx-auto wby-my-lg"}>
+                    {children}
+                </div>
+            </section>
+        </div>
+    );
+});
 
 export interface ContentProps {
     children: React.ReactNode;
 }
 
 const Content = makeDecoratable("ViewContent", ({ children }: ContentProps) => (
-    <Elevation z={2}>
-        <Styled.InnerContent>{children}</Styled.InnerContent>
-    </Elevation>
+    <div className={"wby-relative wby-p-lg wby-pt-md wby-bg-neutral-base wby-rounded-xl"}>
+        {children}
+    </div>
 ));
 
 export interface FooterProps {
@@ -35,9 +40,9 @@ export interface FooterProps {
 const Footer = makeDecoratable("ViewFooter", ({ children }: FooterProps) => {
     return (
         <Grid>
-            <Cell span={12} style={{ textAlign: "center" }}>
+            <Grid.Column span={12} className={"wby-text-center wby-mt-lg"}>
                 {children}
-            </Cell>
+            </Grid.Column>
         </Grid>
     );
 });
@@ -49,21 +54,40 @@ export interface TitleProps {
 
 const Title = makeDecoratable("ViewTitle", ({ title, description }: TitleProps) => {
     return (
-        <Styled.Title>
-            <Typography use="headline4">{title}</Typography>
-            {description ? (
-                <p>
-                    <Typography use="body1">{description}</Typography>
-                </p>
-            ) : null}
-        </Styled.Title>
+        <div className={"wby-mb-md"}>
+            <Heading level={4}>{title}</Heading>
+            {description && (
+                <Text as={"div"} size={"sm"} className={"wby-text-neutral-strong"}>
+                    {description}
+                </Text>
+            )}
+        </div>
     );
 });
 
+export interface ErrorProps {
+    title?: string;
+    description?: string | null;
+}
+
+export const Error = ({ title = "Something went wrong", description }: ErrorProps) => {
+    if (!description) {
+        return null;
+    }
+
+    return (
+        <div className={"wby-mb-lg"}>
+            <Alert title={title} type={"danger"}>
+                {description}
+            </Alert>
+        </div>
+    );
+};
+
 export const View = {
     Container,
-    Logo,
     Content,
     Title,
-    Footer
+    Footer,
+    Error
 };
diff --git a/packages/app-admin-cognito/src/views/ForgotPassword.tsx b/packages/app-admin-cognito/src/views/ForgotPassword.tsx
index c332093c6c6..13216451918 100644
--- a/packages/app-admin-cognito/src/views/ForgotPassword.tsx
+++ b/packages/app-admin-cognito/src/views/ForgotPassword.tsx
@@ -1,16 +1,10 @@
 import * as React from "react";
+import { Alert, Button, Grid, Input, Label, Link, OverlayLoader, Text } from "@webiny/admin-ui";
 import { Form } from "@webiny/form";
 import { validation } from "@webiny/validation";
-import { ButtonPrimary, ButtonDefault } from "@webiny/ui/Button";
-import { Input } from "@webiny/ui/Input";
-import { Grid, Cell } from "@webiny/ui/Grid";
-import { Typography } from "@webiny/ui/Typography";
-import { Alert } from "@webiny/ui/Alert";
-import { CircularProgress } from "@webiny/ui/Progress";
 import { useAuthenticator } from "@webiny/app-cognito-authenticator/hooks/useAuthenticator";
 import { useForgotPassword } from "@webiny/app-cognito-authenticator/hooks/useForgotPassword";
 import { View } from "~/components/View";
-import { alignRight } from "~/components/StyledComponents";
 
 export const ForgotPassword = () => {
     const { authData, changeState } = useAuthenticator();
@@ -33,100 +27,113 @@ export const ForgotPassword = () => {
                 submitOnEnter
             >
                 {({ Bind, submit, data }) => (
-                    <>
-                        <View.Content>
-                            {loading && <CircularProgress />}
-                            <View.Title
-                                title={"Password Recovery"}
-                                description={"request a password reset code"}
-                            />
-                            {error && (
-                                <Grid>
-                                    <Cell span={12}>
-                                        <Alert title={"Something went wrong"} type={"danger"}>
-                                            {error}
-                                        </Alert>
-                                    </Cell>
-                                </Grid>
-                            )}
+                    <View.Content>
+                        {loading && <OverlayLoader />}
+                        <View.Title
+                            title={"Password recovery"}
+                            description={"Request a password reset code."}
+                        />
+                        {error && (
+                            <div className={"wby-mb-lg"}>
+                                <Alert title={"Something went wrong"} type={"danger"}>
+                                    {error}
+                                </Alert>
+                            </div>
+                        )}
 
-                            {!codeSent ? (
-                                <>
-                                    <Grid>
-                                        <Cell span={12}>
-                                            <Bind
-                                                name="username"
-                                                validators={validation.create("required")}
-                                                beforeChange={(
-                                                    val: string,
-                                                    cb: (value: string) => void
-                                                ) => cb(val.toLowerCase())}
-                                            >
-                                                <Input
-                                                    label={"Email"}
-                                                    description={
-                                                        "A reset code will be sent to your email."
-                                                    }
-                                                />
-                                            </Bind>
-                                        </Cell>
-                                    </Grid>
-
-                                    <Grid>
-                                        <Cell span={12} className={alignRight}>
-                                            <ButtonPrimary
+                        {!codeSent ? (
+                            <>
+                                <Grid>
+                                    <Grid.Column span={12}>
+                                        <Bind
+                                            name="username"
+                                            validators={validation.create("required")}
+                                            beforeChange={(
+                                                val: string,
+                                                cb: (value: string) => void
+                                            ) => cb(val.toLowerCase())}
+                                        >
+                                            <Input
+                                                label={
+                                                    <Label
+                                                        text={"Email"}
+                                                        hint={
+                                                            "A reset code will be sent to your email."
+                                                        }
+                                                    />
+                                                }
+                                                size={"lg"}
+                                            />
+                                        </Bind>
+                                    </Grid.Column>
+                                    <Grid.Column span={12}>
+                                        <div
+                                            className={
+                                                "wby-flex wby-flex-row-reverse wby-items-center wby-justify-between"
+                                            }
+                                        >
+                                            <Button
+                                                text={"Send me the code"}
                                                 onClick={ev => {
                                                     submit(ev);
                                                 }}
                                                 data-testid="send-code"
-                                            >
-                                                {"Send me the code"}
-                                            </ButtonPrimary>
-                                        </Cell>
-                                    </Grid>
-                                </>
-                            ) : (
-                                <>
-                                    <Grid>
-                                        <Cell span={12}>
-                                            <Typography use="body1">
-                                                We have sent you a code to reset your password!
-                                                <br />
-                                                <br />
-                                                Click the &quot;Resend code&quot; button below to
-                                                resend the code in case you haven&apos;t received it
-                                                the first time.
-                                            </Typography>
-                                        </Cell>
-                                    </Grid>
-                                    <Grid>
-                                        <Cell span={12} className={alignRight}>
-                                            <ButtonDefault
-                                                onClick={() => {
-                                                    requestCode({ username: data.username });
-                                                }}
-                                            >
-                                                {"Resend code"}
-                                            </ButtonDefault>
-                                            <ButtonPrimary
+                                                size="lg"
+                                            />
+                                            <Text as={"div"} size={"sm"}>
+                                                Want to sign in?&nbsp;
+                                                <Link
+                                                    to={"#"}
+                                                    onClick={() => changeState("signIn")}
+                                                >
+                                                    Sign in
+                                                </Link>
+                                                .
+                                            </Text>
+                                        </div>
+                                    </Grid.Column>
+                                </Grid>
+                            </>
+                        ) : (
+                            <>
+                                <Grid>
+                                    <Grid.Column span={12}>
+                                        <Text>
+                                            We have sent you a code to reset your password!
+                                            <br />
+                                            <br />
+                                            Click the &quot;Resend code&quot; button below to resend
+                                            the code in case you haven&apos;t received it the first
+                                            time.
+                                        </Text>
+                                    </Grid.Column>
+                                    <Grid.Column span={12}>
+                                        <div
+                                            className={
+                                                "wby-flex wby-flex-row-reverse wby-justify-start wby-gap-md"
+                                            }
+                                        >
+                                            <Button
+                                                text={"I got the code!"}
                                                 onClick={ev => {
                                                     submit(ev);
                                                 }}
-                                            >
-                                                I got the code!
-                                            </ButtonPrimary>
-                                        </Cell>
-                                    </Grid>
-                                </>
-                            )}
-                        </View.Content>
-                        <View.Footer>
-                            Want to sign in?&nbsp;
-                            <a href={"#"} onClick={() => changeState("signIn")}>
-                                Sign in
-                            </a>
-                        </View.Footer>
-                    </>
+                                                size="lg"
+                                            />
+                                            <Button
+                                                variant={"secondary"}
+                                                text={"Resend code"}
+                                                onClick={() => {
+                                                    requestCode({ username: data.username });
+                                                }}
+                                                size="lg"
+                                            />
+                                        </div>
+                                    </Grid.Column>
+                                </Grid>
+                            </>
+                        )}
+                    </View.Content>
                 )}
             </Form>
         </View.Container>
diff --git a/packages/app-admin-cognito/src/views/LoggingIn.tsx b/packages/app-admin-cognito/src/views/LoggingIn.tsx
index d494aa946df..8ab175113a8 100644
--- a/packages/app-admin-cognito/src/views/LoggingIn.tsx
+++ b/packages/app-admin-cognito/src/views/LoggingIn.tsx
@@ -1,6 +1,6 @@
 import React from "react";
-import { CircularProgress } from "@webiny/ui/Progress";
+import { OverlayLoader } from "@webiny/admin-ui";
 
 export const LoggingIn = () => {
-    return <CircularProgress label={"Loading identity..."} />;
+    return <OverlayLoader text={"Loading identity..."} />;
 };
diff --git a/packages/app-admin-cognito/src/views/RequireNewPassword.tsx b/packages/app-admin-cognito/src/views/RequireNewPassword.tsx
index 0d1034921dc..33f2f8c5018 100644
--- a/packages/app-admin-cognito/src/views/RequireNewPassword.tsx
+++ b/packages/app-admin-cognito/src/views/RequireNewPassword.tsx
@@ -1,13 +1,9 @@
 import React from "react";
+import { Button, Grid, Heading, Input } from "@webiny/admin-ui";
 import { Form } from "@webiny/form";
 import { validation } from "@webiny/validation";
-import { ButtonPrimary } from "@webiny/ui/Button";
-import { Input } from "@webiny/ui/Input";
-import { Grid, Cell } from "@webiny/ui/Grid";
-import { Typography } from "@webiny/ui/Typography";
 import { useRequireNewPassword } from "@webiny/app-cognito-authenticator/hooks/useRequireNewPassword";
 import { View } from "~/components/View";
-import { alignRight, Title } from "~/components/StyledComponents";
 
 const sentenceCase = (str: string) => {
     const lower = str.toLowerCase();
@@ -31,46 +27,52 @@ export const RequireNewPassword = () => {
             >
                 {({ Bind, submit }) => (
                     <View.Content>
-                        <View.Title title={"Set New Password"} />
+                        <View.Title title={"Set new password"} />
                         <Grid>
-                            <Cell span={12}>
+                            <Grid.Column span={12}>
                                 <Bind name="password" validators={validation.create("required")}>
                                     <Input
                                         type={"password"}
                                         label={"New password"}
-                                        outlined={true}
+                                        size={"lg"}
+                                        autoComplete={"off"}
                                     />
                                 </Bind>
-                            </Cell>
-                        </Grid>
-                        {requiredAttributes.length > 0 && (
-                            <Title>
-                                <Typography use="headline6">
-                                    Please enter additional information
-                                </Typography>
-                            </Title>
-                        )}
-                        <Grid>
-                            {requiredAttributes.map(name => (
-                                <Cell key={name} span={12}>
-                                    <Bind name={name} validators={validation.create("required")}>
-                                        <Input label={sentenceCase(name)} outlined={true} />
-                                    </Bind>
-                                </Cell>
-                            ))}
-                        </Grid>
+                            </Grid.Column>
 
-                        <Grid>
-                            <Cell span={12} className={alignRight}>
-                                <ButtonPrimary
+                            <>
+                                {requiredAttributes.length > 0 && (
+                                    <Grid.Column span={12}>
+                                        <Heading level={6} className={"wby-text-center"}>
+                                            Please enter additional information
+                                        </Heading>
+                                    </Grid.Column>
+                                )}
+                            </>
+
+                            <>
+                                {requiredAttributes.map(name => (
+                                    <Grid.Column key={name} span={12}>
+                                        <Bind
+                                            name={name}
+                                            validators={validation.create("required")}
+                                        >
+                                            <Input label={sentenceCase(name)} size={"lg"} />
+                                        </Bind>
+                                    </Grid.Column>
+                                ))}
+                            </>
+
+                            <Grid.Column span={12} className={"wby-text-right"}>
+                                <Button
+                                    text={"Set password"}
                                     data-testid="submit-sign-in-form-button"
                                     onClick={ev => {
                                         submit(ev);
                                     }}
-                                >
-                                    {"Set password"}
-                                </ButtonPrimary>
-                            </Cell>
+                                    size={"lg"}
+                                />
+                            </Grid.Column>
                         </Grid>
                     </View.Content>
                 )}
diff --git a/packages/app-admin-cognito/src/views/SetNewPassword.tsx b/packages/app-admin-cognito/src/views/SetNewPassword.tsx
index e901f846e7a..a0b5a4dfe4f 100644
--- a/packages/app-admin-cognito/src/views/SetNewPassword.tsx
+++ b/packages/app-admin-cognito/src/views/SetNewPassword.tsx
@@ -1,17 +1,13 @@
 import React from "react";
 import { Form } from "@webiny/form";
 import { validation } from "@webiny/validation";
-import { ButtonPrimary } from "@webiny/ui/Button";
-import { Input } from "@webiny/ui/Input";
-import { Grid, Cell } from "@webiny/ui/Grid";
-import { CircularProgress } from "@webiny/ui/Progress";
 import { View } from "~/components/View";
-import { alignRight, errorMessage } from "~/components/StyledComponents";
 import { useAuthenticator } from "@webiny/app-cognito-authenticator/hooks/useAuthenticator";
 import {
     useSetNewPassword,
     UseSetNewPasswordCallableParams
 } from "@webiny/app-cognito-authenticator/hooks/useSetNewPassword";
+import { Button, Grid, Input, Link, OverlayLoader, Text } from "@webiny/admin-ui";
 
 export const SetNewPassword = () => {
     const { changeState } = useAuthenticator();
@@ -22,54 +18,50 @@ export const SetNewPassword = () => {
     }
 
     return (
-        <Form<UseSetNewPasswordCallableParams> onSubmit={data => setPassword(data)} submitOnEnter>
-            {({ Bind, submit, data }) => {
-                const retypePasswordValidator = (value: string) => {
-                    if (value !== data.password) {
-                        throw Error("Passwords do not match!");
-                    }
-                };
+        <View.Container>
+            <Form<UseSetNewPasswordCallableParams>
+                onSubmit={data => setPassword(data)}
+                submitOnEnter
+            >
+                {({ Bind, submit, data }) => {
+                    const retypePasswordValidator = (value: string) => {
+                        if (value !== data.password) {
+                            throw Error("Passwords do not match!");
+                        }
+                    };
 
-                return (
-                    <View.Container>
+                    return (
                         <View.Content>
-                            {loading && <CircularProgress />}
-                            <View.Title title={"Set New Password"} />
-
-                            {error && (
-                                <Grid>
-                                    <Cell span={12} className={errorMessage}>
-                                        {error}
-                                    </Cell>
-                                </Grid>
-                            )}
+                            {loading && <OverlayLoader />}
+                            <View.Title title={"Set new password"} />
+                            <View.Error description={error} />
 
                             <Grid>
-                                <Cell span={12} data-testid="password-reset-code">
+                                <Grid.Column span={12} data-testid="password-reset-code">
                                     <Bind name="code" validators={validation.create("required")}>
                                         <Input
+                                            size={"lg"}
                                             autoComplete="off"
                                             label={"Password reset code"}
-                                            outlined={true}
                                             description={"Enter the code we sent to your email."}
                                         />
                                     </Bind>
-                                </Cell>
-                                <Cell span={12} data-testid="new-password-input">
+                                </Grid.Column>
+                                <Grid.Column span={12} data-testid="new-password-input">
                                     <Bind
                                         name="password"
                                         validators={validation.create("required")}
                                     >
                                         <Input
+                                            size={"lg"}
                                             autoComplete={"off"}
                                             type={"password"}
                                             label={"New password"}
-                                            outlined={true}
                                             description={"Enter your new password."}
                                         />
                                     </Bind>
-                                </Cell>
-                                <Cell span={12} data-testid="retype-password-input">
+                                </Grid.Column>
+                                <Grid.Column span={12} data-testid="retype-password-input">
                                     <Bind
                                         name="retypePassword"
                                         validators={[
@@ -78,34 +70,42 @@ export const SetNewPassword = () => {
                                         ]}
                                     >
                                         <Input
+                                            autoComplete={"off"}
+                                            size={"lg"}
                                             type={"password"}
                                             label={"Retype password"}
-                                            outlined={true}
                                             description={"Enter your new password once more."}
                                         />
                                     </Bind>
-                                </Cell>
-                                <Cell span={12} className={alignRight}>
-                                    <ButtonPrimary
-                                        data-testid="submit-btn-new-psw"
-                                        onClick={ev => {
-                                            submit(ev);
-                                        }}
+                                </Grid.Column>
+                                <Grid.Column span={12}>
+                                    <div
+                                        className={
+                                            "wby-flex wby-flex-row-reverse wby-items-center wby-justify-between"
+                                        }
                                     >
-                                        {"Set new password"}
-                                    </ButtonPrimary>
-                                </Cell>
+                                        <Button
+                                            text={"Set new password"}
+                                            data-testid="submit-btn-new-psw"
+                                            onClick={ev => {
+                                                submit(ev);
+                                            }}
+                                            size={"lg"}
+                                        />
+                                        <Text as={"div"} size={"sm"}>
+                                            Want to sign in?&nbsp;
+                                            <Link to={"#"} onClick={() => changeState("signIn")}>
+                                                Sign in
+                                            </Link>
+                                            .
+                                        </Text>
+                                    </div>
+                                </Grid.Column>
                             </Grid>
                         </View.Content>
-                        <View.Footer>
-                            Want to sign in?&nbsp;
-                            <a href={"#"} onClick={() => changeState("signIn")}>
-                                Sign in
-                            </a>
-                        </View.Footer>
-                    </View.Container>
-                );
-            }}
-        </Form>
+                    );
+                }}
+            </Form>
+        </View.Container>
     );
 };
diff --git a/packages/app-admin-cognito/src/views/SignIn.tsx b/packages/app-admin-cognito/src/views/SignIn.tsx
index 7de9022360a..032564ddc86 100644
--- a/packages/app-admin-cognito/src/views/SignIn.tsx
+++ b/packages/app-admin-cognito/src/views/SignIn.tsx
@@ -1,12 +1,8 @@
 import React from "react";
+import { Grid, Input, Alert, Link, OverlayLoader, Button, Text } from "@webiny/admin-ui";
 import { makeDecoratable } from "@webiny/app-admin";
 import { Form, Bind, useForm } from "@webiny/form";
 import { validation } from "@webiny/validation";
-import { ButtonPrimary } from "@webiny/ui/Button";
-import { Input } from "@webiny/ui/Input";
-import { Grid, Cell } from "@webiny/ui/Grid";
-import { Alert } from "@webiny/ui/Alert";
-import { CircularProgress } from "@webiny/ui/Progress";
 import { useAuthenticator } from "@webiny/app-cognito-authenticator/hooks/useAuthenticator";
 import {
     useSignIn,
@@ -14,9 +10,8 @@ import {
 } from "@webiny/app-cognito-authenticator/hooks/useSignIn";
 import { View } from "~/components/View";
 import { FederatedLogin } from "./FederatedLogin";
-import { Divider } from "~/components/Divider";
-import { alignRight, alignCenter, errorMessage } from "~/components/StyledComponents";
 import { FederatedIdentityProvider } from "~/federatedIdentityProviders";
+import { Divider } from "~/components/Divider";
 
 export interface SignInProps {
     title?: string;
@@ -39,8 +34,8 @@ const DefaultContent = (props: SignInDefaultContentProps) => {
     const { submit } = useForm();
     const { message, changeState } = useAuthenticator();
     const {
-        title = "Sign In",
-        description = undefined,
+        title = "Login",
+        description,
         federatedProviders = [],
         allowSignInWithCredentials = true,
         error = null
@@ -50,28 +45,18 @@ const DefaultContent = (props: SignInDefaultContentProps) => {
         <>
             <View.Title title={title} description={description} />
             {message && !error && (
-                <Grid>
-                    <Cell span={12}>
-                        <Alert title={message.title} type={message.type}>
-                            {message.text}
-                        </Alert>
-                    </Cell>
-                </Grid>
+                <div className={"wby-mb-lg"}>
+                    <Alert title={message.title} type={message.type}>
+                        {message.text}
+                    </Alert>
+                </div>
             )}
 
-            {error && (
-                <Grid>
-                    <Cell span={12} className={errorMessage}>
-                        <Alert title="Authentication error" type={"danger"}>
-                            {error.message}
-                        </Alert>
-                    </Cell>
-                </Grid>
-            )}
+            <View.Error title="Authentication error" description={error?.message} />
 
             {allowSignInWithCredentials ? (
                 <Grid>
-                    <Cell span={12}>
+                    <Grid.Column span={12}>
                         <Bind
                             name="username"
                             validators={validation.create("required,email")}
@@ -79,29 +64,40 @@ const DefaultContent = (props: SignInDefaultContentProps) => {
                                 cb(val.toLowerCase())
                             }
                         >
-                            <Input label={"Your e-mail"} />
+                            <Input label={"Email"} size={"lg"} />
                         </Bind>
-                    </Cell>
-                    <Cell span={12}>
+                    </Grid.Column>
+                    <Grid.Column span={12}>
                         <Bind name="password" validators={validation.create("required")}>
-                            <Input type={"password"} label={"Your password"} />
+                            <Input
+                                type={"password"}
+                                label={"Password"}
+                                size={"lg"}
+                                autoComplete={"off"}
+                            />
                         </Bind>
-                    </Cell>
-                    <Cell span={12} className={alignRight}>
-                        <ButtonPrimary
-                            data-testid="submit-sign-in-form-button"
-                            onClick={ev => {
-                                submit(ev);
-                            }}
+                    </Grid.Column>
+                    <Grid.Column span={12}>
+                        <div
+                            className={
+                                "wby-flex wby-flex-row-reverse wby-items-center wby-justify-between"
+                            }
                         >
-                            {"Submit"}
-                        </ButtonPrimary>
-                    </Cell>
-                    <Cell span={12} className={alignCenter}>
-                        <a href="#" onClick={() => changeState("forgotPassword")}>
-                            Forgot password?
-                        </a>
-                    </Cell>
+                            <Button
+                                text={"Submit"}
+                                data-testid="submit-sign-in-form-button"
+                                onClick={ev => {
+                                    submit(ev);
+                                }}
+                                size="lg"
+                            />
+                            <Text as={"div"} size={"sm"}>
+                                <Link to="#" onClick={() => changeState("forgotPassword")}>
+                                    Forgot password?
+                                </Link>
+                            </Text>
+                        </div>
+                    </Grid.Column>
                 </Grid>
             ) : null}
             {federatedProviders.length ? (
@@ -128,7 +124,7 @@ export const SignIn = makeDecoratable("SignIn", (props: SignInProps) => {
                 {() => (
                     <>
                         <View.Content>
-                            {loading && <CircularProgress label={"Signing in..."} />}
+                            {loading && <OverlayLoader text={"Signing in..."} />}
                             {content ? content : <DefaultContent {...props} error={error} />}
                         </View.Content>
                         {footer ? <View.Footer>{footer}</View.Footer> : null}
diff --git a/packages/app-admin-cognito/tsconfig.build.json b/packages/app-admin-cognito/tsconfig.build.json
index 23ee04c5fb9..e3d207903f6 100644
--- a/packages/app-admin-cognito/tsconfig.build.json
+++ b/packages/app-admin-cognito/tsconfig.build.json
@@ -2,6 +2,7 @@
   "extends": "../../tsconfig.build.json",
   "include": ["src"],
   "references": [
+    { "path": "../admin-ui/tsconfig.build.json" },
     { "path": "../app/tsconfig.build.json" },
     { "path": "../app-admin/tsconfig.build.json" },
     { "path": "../app-cognito-authenticator/tsconfig.build.json" },
@@ -9,7 +10,6 @@
     { "path": "../form/tsconfig.build.json" },
     { "path": "../plugins/tsconfig.build.json" },
     { "path": "../react-composition/tsconfig.build.json" },
-    { "path": "../ui/tsconfig.build.json" },
     { "path": "../validation/tsconfig.build.json" }
   ],
   "compilerOptions": {
diff --git a/packages/app-admin-cognito/tsconfig.json b/packages/app-admin-cognito/tsconfig.json
index f0e17e966f7..2a64c5687c0 100644
--- a/packages/app-admin-cognito/tsconfig.json
+++ b/packages/app-admin-cognito/tsconfig.json
@@ -2,6 +2,7 @@
   "extends": "../../tsconfig.json",
   "include": ["src", "__tests__"],
   "references": [
+    { "path": "../admin-ui" },
     { "path": "../app" },
     { "path": "../app-admin" },
     { "path": "../app-cognito-authenticator" },
@@ -9,7 +10,6 @@
     { "path": "../form" },
     { "path": "../plugins" },
     { "path": "../react-composition" },
-    { "path": "../ui" },
     { "path": "../validation" }
   ],
   "compilerOptions": {
@@ -19,6 +19,8 @@
     "paths": {
       "~/*": ["./src/*"],
       "~tests/*": ["./__tests__/*"],
+      "@webiny/admin-ui/*": ["../admin-ui/src/*"],
+      "@webiny/admin-ui": ["../admin-ui/src"],
       "@webiny/app/*": ["../app/src/*"],
       "@webiny/app": ["../app/src"],
       "@webiny/app-admin/*": ["../app-admin/src/*"],
@@ -33,8 +35,6 @@
       "@webiny/plugins": ["../plugins/src"],
       "@webiny/react-composition/*": ["../react-composition/src/*"],
       "@webiny/react-composition": ["../react-composition/src"],
-      "@webiny/ui/*": ["../ui/src/*"],
-      "@webiny/ui": ["../ui/src"],
       "@webiny/validation/*": ["../validation/src/*"],
       "@webiny/validation": ["../validation/src"]
     },
diff --git a/packages/app-admin-okta/package.json b/packages/app-admin-okta/package.json
index 745f0cf6372..0796025cc59 100644
--- a/packages/app-admin-okta/package.json
+++ b/packages/app-admin-okta/package.json
@@ -15,6 +15,7 @@
     "@okta/okta-auth-js": "^5.3.1",
     "@okta/okta-react": "^6.1.0",
     "@okta/okta-signin-widget": "^5.9.4",
+    "@webiny/admin-ui": "0.0.0",
     "@webiny/app": "0.0.0",
     "@webiny/app-admin": "0.0.0",
     "@webiny/app-security": "0.0.0",
@@ -22,6 +23,7 @@
     "@webiny/app-tenancy": "0.0.0",
     "@webiny/app-tenant-manager": "0.0.0",
     "@webiny/form": "0.0.0",
+    "@webiny/icons": "0.0.0",
     "@webiny/plugins": "0.0.0",
     "@webiny/ui": "0.0.0",
     "@webiny/validation": "0.0.0",
diff --git a/packages/app-admin-okta/src/createGetIdentityData/graphql.ts b/packages/app-admin-okta/src/createGetIdentityData/graphql.ts
index 6f2db0e6118..b67996105ff 100644
--- a/packages/app-admin-okta/src/createGetIdentityData/graphql.ts
+++ b/packages/app-admin-okta/src/createGetIdentityData/graphql.ts
@@ -13,12 +13,14 @@ export const LOGIN_MT = gql`
                             id
                             name
                             description
+                            image
                             parent
                         }
                         defaultTenant {
                             id
                             name
                             description
+                            image
                             parent
                         }
                         permissions
diff --git a/packages/app-admin-okta/src/index.ts b/packages/app-admin-okta/src/index.ts
index afaaa2ba289..45c4ae54ac3 100644
--- a/packages/app-admin-okta/src/index.ts
+++ b/packages/app-admin-okta/src/index.ts
@@ -1,9 +1,9 @@
 export { Okta } from "./Okta";
 export type { OktaProps, OktaFactory } from "./Okta";
-import { UserInfo } from "./modules/userMenu/userInfo";
-import { UserImage } from "./modules/userMenu/userImage";
-import { ExitTenant } from "./modules/userMenu/exitTenant";
-import { SignOut } from "./modules/userMenu/signOut";
+import { UserInfo } from "./modules/userMenu/UserInfo";
+import { UserImage } from "./modules/userMenu/UserImage";
+import { ExitTenant } from "./modules/userMenu/ExitTenant";
+import { SignOut } from "./modules/userMenu/SignOut";
 import { NotAuthorizedError } from "./components";
 
 export const Components = {
diff --git a/packages/app-admin-okta/src/modules/userMenu/ExitTenant.tsx b/packages/app-admin-okta/src/modules/userMenu/ExitTenant.tsx
new file mode 100644
index 00000000000..739740cc75f
--- /dev/null
+++ b/packages/app-admin-okta/src/modules/userMenu/ExitTenant.tsx
@@ -0,0 +1,32 @@
+import React from "react";
+import { makeDecoratable } from "@webiny/app-serverless-cms";
+import { useSecurity } from "@webiny/app-security";
+import { useTenancy } from "@webiny/app-tenancy";
+import { AdminConfig } from "@webiny/app-admin";
+import { ReactComponent as SignOutIcon } from "@webiny/icons/logout.svg";
+
+const { Menu } = AdminConfig;
+
+export const ExitTenant = makeDecoratable("ExitTenant", () => {
+    const security = useSecurity();
+    const tenancy = useTenancy();
+
+    if (!security || !security.identity) {
+        return null;
+    }
+
+    // This is only applicable in multi-tenant environments
+    const { currentTenant, defaultTenant } = security.identity;
+
+    if (tenancy && currentTenant && defaultTenant && currentTenant.id !== defaultTenant.id) {
+        return (
+            <Menu.User.Item
+                icon={<Menu.User.Item.Icon element={<SignOutIcon />} label={"Exit tenant"} />}
+                text={"Exit tenant"}
+                onClick={() => tenancy.setTenant(defaultTenant.id)}
+            />
+        );
+    }
+
+    return null;
+});
diff --git a/packages/app-admin-okta/src/modules/userMenu/SignOut.tsx b/packages/app-admin-okta/src/modules/userMenu/SignOut.tsx
new file mode 100644
index 00000000000..b5f0b267222
--- /dev/null
+++ b/packages/app-admin-okta/src/modules/userMenu/SignOut.tsx
@@ -0,0 +1,27 @@
+import React from "react";
+import { useSecurity } from "@webiny/app-security/hooks/useSecurity";
+import { ReactComponent as SignOutIcon } from "@webiny/icons/logout.svg";
+import { AdminConfig, makeDecoratable } from "@webiny/app-admin";
+
+const { Menu } = AdminConfig;
+
+export const SignOut = makeDecoratable("SignOut", () => {
+    const { identity } = useSecurity();
+
+    if (!identity) {
+        return null;
+    }
+
+    if (typeof identity.logout !== "function") {
+        console.warn(`Missing "logout" function implementation in SecurityIdentity!`);
+        return null;
+    }
+
+    return (
+        <Menu.User.Item
+            text={"Sign out"}
+            icon={<Menu.User.Item.Icon element={<SignOutIcon />} label={"Sign out"} />}
+            onClick={identity.logout}
+        />
+    );
+});
diff --git a/packages/app-admin-okta/src/modules/userMenu/UserImage.tsx b/packages/app-admin-okta/src/modules/userMenu/UserImage.tsx
new file mode 100644
index 00000000000..adcdbefeb38
--- /dev/null
+++ b/packages/app-admin-okta/src/modules/userMenu/UserImage.tsx
@@ -0,0 +1,26 @@
+import React from "react";
+import { makeDecoratable } from "@webiny/app-serverless-cms";
+import { Avatar } from "@webiny/admin-ui";
+import { useSecurity } from "@webiny/app-security/hooks/useSecurity";
+
+export const UserImage = makeDecoratable("UserImage", () => {
+    const { identity } = useSecurity();
+
+    if (!identity) {
+        return null;
+    }
+
+    const { displayName } = identity;
+
+    return (
+        <Avatar
+            size={"sm"}
+            variant={"strong"}
+            fallback={
+                <Avatar.Fallback className={"wby-uppercase"} delayMs={0}>
+                    {displayName[0]}
+                </Avatar.Fallback>
+            }
+        />
+    );
+});
diff --git a/packages/app-admin-okta/src/modules/userMenu/UserInfo.tsx b/packages/app-admin-okta/src/modules/userMenu/UserInfo.tsx
new file mode 100644
index 00000000000..6b94f5d6ab3
--- /dev/null
+++ b/packages/app-admin-okta/src/modules/userMenu/UserInfo.tsx
@@ -0,0 +1,27 @@
+import React from "react";
+import { AdminConfig } from "@webiny/app-admin";
+import { Text } from "@webiny/admin-ui";
+import { useSecurity } from "@webiny/app-security";
+
+const { Menu } = AdminConfig;
+
+export const UserInfo = () => {
+    const security = useSecurity();
+    if (!security || !security.identity) {
+        return null;
+    }
+
+    const { id, displayName } = security.identity;
+
+    return (
+        <>
+            <Text size={"md"} className={"wby-block wby-font-semibold wby-mb-sm"}>
+                {displayName}
+            </Text>
+            <Text size={"sm"} className={"wby-block !wby-text-neutral-strong"}>
+                {id}
+            </Text>
+            <Menu.User.Separator />
+        </>
+    );
+};
diff --git a/packages/app-admin-okta/src/modules/userMenu/UserMenuHandle.tsx b/packages/app-admin-okta/src/modules/userMenu/UserMenuHandle.tsx
new file mode 100644
index 00000000000..b33a37377bb
--- /dev/null
+++ b/packages/app-admin-okta/src/modules/userMenu/UserMenuHandle.tsx
@@ -0,0 +1,35 @@
+import React from "react";
+import { IconButton } from "@webiny/admin-ui";
+import { useSecurity } from "@webiny/app-security";
+import { ReactComponent as KeyboardArrowRightIcon } from "@webiny/icons/keyboard_arrow_down.svg";
+import { UserMenuHandleRenderer as UserMenuHandleRendererSpec } from "@webiny/app-admin";
+import { UserImage } from "./UserImage";
+
+export const UserMenuHandle = UserMenuHandleRendererSpec.createDecorator(() => {
+    return function UserMenuHandle() {
+        const { identity } = useSecurity();
+
+        if (!identity) {
+            return null;
+        }
+
+        return (
+            <div className={"wby-flex wby-gap-x-sm wby-cursor-pointer"}>
+                <div
+                    data-testid="logged-in-user-menu-avatar"
+                    className={
+                        "wby-flex wby-items-center wby-rounded-md wby-gap-xxs wby-py-xs wby-px-xs wby-bg-neutral-light"
+                    }
+                >
+                    <UserImage />
+                    <IconButton
+                        variant={"ghost"}
+                        size={"xs"}
+                        color={"neutral-strong"}
+                        icon={<KeyboardArrowRightIcon />}
+                    />
+                </div>
+            </div>
+        );
+    };
+});
diff --git a/packages/app-admin-okta/src/modules/userMenu/exitTenant.tsx b/packages/app-admin-okta/src/modules/userMenu/exitTenant.tsx
deleted file mode 100644
index c49b0c2a6d4..00000000000
--- a/packages/app-admin-okta/src/modules/userMenu/exitTenant.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import React from "react";
-import { makeDecoratable } from "@webiny/app-serverless-cms";
-import { ListItem, ListItemGraphic } from "@webiny/ui/List";
-import { Icon } from "@webiny/ui/Icon";
-import { ReactComponent as LogoutIcon } from "~/assets/icons/logout_black_24dp.svg";
-import { useSecurity } from "@webiny/app-security";
-import { useTenancy } from "@webiny/app-tenancy";
-
-export const ExitTenant = makeDecoratable("ExitTenant", () => {
-    const security = useSecurity();
-    const tenancy = useTenancy();
-
-    if (!security || !security.identity) {
-        return null;
-    }
-
-    // This is only applicable in multi-tenant environments
-    const { currentTenant, defaultTenant } = security.identity;
-
-    if (tenancy && currentTenant && defaultTenant && currentTenant.id !== defaultTenant.id) {
-        return (
-            <ListItem onClick={() => tenancy.setTenant(defaultTenant.id)}>
-                <ListItemGraphic>
-                    <Icon icon={<LogoutIcon />} />
-                </ListItemGraphic>
-                Exit tenant
-            </ListItem>
-        );
-    }
-
-    return null;
-});
diff --git a/packages/app-admin-okta/src/modules/userMenu/index.tsx b/packages/app-admin-okta/src/modules/userMenu/index.tsx
index 8c887ed54e6..236106e633b 100644
--- a/packages/app-admin-okta/src/modules/userMenu/index.tsx
+++ b/packages/app-admin-okta/src/modules/userMenu/index.tsx
@@ -1,30 +1,21 @@
 import React, { Fragment } from "react";
-import {
-    AddUserMenuItem,
-    UserMenuHandleRenderer,
-    Compose,
-    Plugins
-} from "@webiny/app-serverless-cms";
-import { UserInfo } from "~/modules/userMenu/userInfo";
-import { SignOut } from "~/modules/userMenu/signOut";
-import { UserImage } from "~/modules/userMenu/userImage";
-import { ExitTenant } from "~/modules/userMenu/exitTenant";
+import { AdminConfig } from "@webiny/app-serverless-cms";
+import { UserInfo } from "./UserInfo";
+import { SignOut } from "./SignOut";
+import { UserMenuHandle } from "./UserMenuHandle";
+import { ExitTenant } from "./ExitTenant";
 
-const UserImageHOC = () => {
-    return function UserImageHOC() {
-        return <UserImage />;
-    };
-};
+const { Menu } = AdminConfig;
 
 export const UserMenuModule = () => {
     return (
         <Fragment>
-            <Compose component={UserMenuHandleRenderer} with={UserImageHOC} />
-            <Plugins>
-                <AddUserMenuItem element={<UserInfo />} />
-                <AddUserMenuItem element={<ExitTenant />} />
-                <AddUserMenuItem element={<SignOut />} />
-            </Plugins>
+            <UserMenuHandle />
+            <AdminConfig>
+                <Menu.User name={"exitTenant"} element={<ExitTenant />} />
+                <Menu.User name={"signOut"} element={<SignOut />} />
+                <Menu.User name={"userInfo"} element={<UserInfo />} />
+            </AdminConfig>
         </Fragment>
     );
 };
diff --git a/packages/app-admin-okta/src/modules/userMenu/signOut.tsx b/packages/app-admin-okta/src/modules/userMenu/signOut.tsx
deleted file mode 100644
index 5c27d9ae874..00000000000
--- a/packages/app-admin-okta/src/modules/userMenu/signOut.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from "react";
-import { makeDecoratable } from "@webiny/app-serverless-cms";
-import { ListItem, ListItemGraphic } from "@webiny/ui/List";
-import { Icon } from "@webiny/ui/Icon";
-import { useSecurity } from "@webiny/app-security/hooks/useSecurity";
-import { ReactComponent as SignOutIcon } from "~/assets/icons/round-lock_open-24px.svg";
-
-export const SignOut = makeDecoratable("SignOut", () => {
-    const { identity } = useSecurity();
-
-    if (!identity) {
-        return null;
-    }
-
-    if (typeof identity.logout !== "function") {
-        console.warn(`Missing "logout" function implementation in SecurityIdentity!`);
-        return null;
-    }
-
-    return (
-        <ListItem onClick={identity.logout}>
-            <ListItemGraphic>{<Icon icon={<SignOutIcon />} />}</ListItemGraphic>
-            Sign out
-        </ListItem>
-    );
-});
diff --git a/packages/app-admin-okta/src/modules/userMenu/userImage.tsx b/packages/app-admin-okta/src/modules/userMenu/userImage.tsx
deleted file mode 100644
index 50cc98639db..00000000000
--- a/packages/app-admin-okta/src/modules/userMenu/userImage.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import React from "react";
-import { makeDecoratable } from "@webiny/app-serverless-cms";
-import { Avatar } from "@webiny/ui/Avatar";
-import { useSecurity } from "@webiny/app-security/hooks/useSecurity";
-
-export const UserImage = makeDecoratable("UserImage", () => {
-    const { identity } = useSecurity();
-
-    if (!identity) {
-        return null;
-    }
-
-    const { displayName } = identity;
-
-    return (
-        <Avatar
-            data-testid="logged-in-user-menu-avatar"
-            alt={displayName}
-            fallbackText={displayName}
-        />
-    );
-});
diff --git a/packages/app-admin-okta/src/modules/userMenu/userInfo.tsx b/packages/app-admin-okta/src/modules/userMenu/userInfo.tsx
deleted file mode 100644
index 57c544f3916..00000000000
--- a/packages/app-admin-okta/src/modules/userMenu/userInfo.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-import React from "react";
-import { css } from "emotion";
-import { useSecurity } from "@webiny/app-security/hooks/useSecurity";
-import { ListItem, ListItemGraphic } from "@webiny/ui/List";
-import { Typography } from "@webiny/ui/Typography";
-import { Avatar } from "@webiny/ui/Avatar";
-import { makeDecoratable } from "@webiny/app-serverless-cms";
-
-const avatarImage = css({
-    height: "40px !important",
-    width: "40px !important",
-    borderRadius: "50%",
-    display: "inline-block",
-    ">div": {
-        backgroundColor: "var(--mdc-theme-surface)"
-    }
-});
-
-const linkStyles = css({
-    backgroundColor: "var(--mdc-theme-background)",
-    marginTop: -25,
-    marginBottom: 0,
-    paddingTop: 0,
-    paddingBottom: 0,
-    textDecoration: "none",
-    display: "block",
-    ">.mdc-deprecated-list-item": {
-        display: "flex",
-        height: "65px !important",
-        marginTop: 15,
-        ".avatar": {
-            marginTop: 10
-        }
-    },
-    "h3, h3>.mdc-typography--headline6": {
-        lineHeight: "1em !important"
-    },
-    ".mdc-menu &.mdc-deprecated-list-item": {
-        ">.mdc-deprecated-list-item__text": {
-            fontWeight: "bold"
-        }
-    },
-    ".mdc-deprecated-list-item": {
-        height: "auto",
-        ".mdc-typography--headline6": {
-            overflow: "hidden",
-            whiteSpace: "nowrap",
-            textOverflow: "ellipsis",
-            maxWidth: 180,
-            display: "block"
-        },
-        ".mdc-typography--body2": {
-            overflow: "hidden",
-            whiteSpace: "nowrap",
-            textOverflow: "ellipsis",
-            maxWidth: 180
-        }
-    }
-});
-
-export const UserInfo = makeDecoratable("UserInfo", () => {
-    const security = useSecurity();
-
-    if (!security || !security.identity) {
-        return null;
-    }
-
-    const { id, displayName } = security.identity;
-
-    return (
-        <div className={linkStyles}>
-            <ListItem ripple={false} className={linkStyles}>
-                <ListItemGraphic className={avatarImage}>
-                    <Avatar
-                        className={"avatar"}
-                        src={null}
-                        alt={displayName}
-                        fallbackText={displayName}
-                    />
-                </ListItemGraphic>
-                <div>
-                    <Typography use={"headline6"}>{displayName}</Typography>
-                    <Typography use={"body2"}>{id}</Typography>
-                </div>
-            </ListItem>
-        </div>
-    );
-});
diff --git a/packages/app-admin-okta/tsconfig.build.json b/packages/app-admin-okta/tsconfig.build.json
index 80d92a5a3b4..e32ca209a72 100644
--- a/packages/app-admin-okta/tsconfig.build.json
+++ b/packages/app-admin-okta/tsconfig.build.json
@@ -2,6 +2,7 @@
   "extends": "../../tsconfig.build.json",
   "include": ["src"],
   "references": [
+    { "path": "../admin-ui/tsconfig.build.json" },
     { "path": "../app/tsconfig.build.json" },
     { "path": "../app-admin/tsconfig.build.json" },
     { "path": "../app-security/tsconfig.build.json" },
diff --git a/packages/app-admin-okta/tsconfig.json b/packages/app-admin-okta/tsconfig.json
index 1fef26bec30..1edad0e9470 100644
--- a/packages/app-admin-okta/tsconfig.json
+++ b/packages/app-admin-okta/tsconfig.json
@@ -2,6 +2,7 @@
   "extends": "../../tsconfig.json",
   "include": ["src", "__tests__"],
   "references": [
+    { "path": "../admin-ui" },
     { "path": "../app" },
     { "path": "../app-admin" },
     { "path": "../app-security" },
@@ -20,6 +21,8 @@
     "paths": {
       "~/*": ["./src/*"],
       "~tests/*": ["./__tests__/*"],
+      "@webiny/admin-ui/*": ["../admin-ui/src/*"],
+      "@webiny/admin-ui": ["../admin-ui/src"],
       "@webiny/app/*": ["../app/src/*"],
       "@webiny/app": ["../app/src"],
       "@webiny/app-admin/*": ["../app-admin/src/*"],
diff --git a/packages/app-admin-rmwc/README.md b/packages/app-admin-rmwc/README.md
deleted file mode 100644
index 383fcf7a08f..00000000000
--- a/packages/app-admin-rmwc/README.md
+++ /dev/null
@@ -1,7 +0,0 @@
-# @webiny/app-admin-rmwc
-[![](https://img.shields.io/npm/dw/@webiny/app-admin-rmwc.svg)](https://www.npmjs.com/package/@webiny/app-admin-rmwc) 
-[![](https://img.shields.io/npm/v/@webiny/app-admin-rmwc.svg)](https://www.npmjs.com/package/@webiny/app-admin-rmwc)
-[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
-[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
-
-An implementation of core UI components for @webiny/app-serverless-cms using RMWC UI library. 
diff --git a/packages/app-admin-rmwc/package.json b/packages/app-admin-rmwc/package.json
deleted file mode 100644
index 7db8645c261..00000000000
--- a/packages/app-admin-rmwc/package.json
+++ /dev/null
@@ -1,56 +0,0 @@
-{
-  "name": "@webiny/app-admin-rmwc",
-  "version": "0.0.0",
-  "main": "index.js",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/webiny/webiny-js.git"
-  },
-  "author": "Webiny Ltd.",
-  "license": "MIT",
-  "dependencies": {
-    "@emotion/styled": "11.10.6",
-    "@material-design-icons/svg": "^0.14.13",
-    "@rmwc/base": "14.3.5",
-    "@rmwc/provider": "14.3.5",
-    "@types/react": "18.2.79",
-    "@webiny/app": "0.0.0",
-    "@webiny/app-admin": "0.0.0",
-    "@webiny/app-plugin-admin-welcome-screen": "0.0.0",
-    "@webiny/app-security": "0.0.0",
-    "@webiny/feature-flags": "0.0.0",
-    "@webiny/plugins": "0.0.0",
-    "@webiny/react-router": "0.0.0",
-    "@webiny/ui": "0.0.0",
-    "classnames": "^2.5.1",
-    "emotion": "10.0.27",
-    "lodash": "^4.17.21",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "react-helmet": "^6.1.0",
-    "react-hotkeyz": "^1.0.4",
-    "react-transition-group": "^4.4.5",
-    "store": "^2.0.12"
-  },
-  "devDependencies": {
-    "@emotion/babel-plugin": "^11.11.0",
-    "@types/react-helmet": "^6.1.11",
-    "@webiny/project-utils": "0.0.0",
-    "babel-plugin-named-asset-import": "^1.0.0-next.3e165448",
-    "rimraf": "^6.0.1",
-    "typescript": "5.3.3"
-  },
-  "publishConfig": {
-    "access": "public",
-    "directory": "dist"
-  },
-  "scripts": {
-    "build": "node ../cli/bin.js run build",
-    "watch": "node ../cli/bin.js run watch"
-  },
-  "svgo": {
-    "plugins": {
-      "removeViewBox": false
-    }
-  }
-}
diff --git a/packages/app-admin-rmwc/src/index.tsx b/packages/app-admin-rmwc/src/index.tsx
deleted file mode 100644
index b7bcbc78bb0..00000000000
--- a/packages/app-admin-rmwc/src/index.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import React, { Fragment } from "react";
-import { createProviderPlugin } from "@webiny/app-admin";
-import { RMWCProvider } from "@rmwc/provider";
-
-import { Layout } from "./modules/Layout";
-import { Navigation } from "./modules/Navigation";
-import { Brand } from "./modules/Brand";
-// import { Search } from "~/modules/Search"; Removed in 5.37.0, it will be refactored later
-import { UserMenu } from "~/modules/UserMenu";
-import { Overlays } from "./modules/Overlays";
-import { NotFound } from "./modules/NotFound";
-import { Dashboard } from "./modules/Dashboard";
-
-const RMWCProviderPlugin = createProviderPlugin(Component => {
-    return function RMWCThemeProvider({ children }) {
-        return (
-            <RMWCProvider ripple={false}>
-                <Component>{children}</Component>
-            </RMWCProvider>
-        );
-    };
-});
-
-export const RMWC = () => {
-    return (
-        <Fragment>
-            <RMWCProviderPlugin />
-            <Layout />
-            <Dashboard />
-            <NotFound />
-            <Brand />
-            <Navigation />
-            {/*<Search />*/}
-            <UserMenu />
-            <Overlays />
-        </Fragment>
-    );
-};
diff --git a/packages/app-admin-rmwc/src/modules/Brand/index.tsx b/packages/app-admin-rmwc/src/modules/Brand/index.tsx
deleted file mode 100644
index 94614f2fa6d..00000000000
--- a/packages/app-admin-rmwc/src/modules/Brand/index.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import React, { Fragment, useCallback } from "react";
-import {
-    Compose,
-    BrandRenderer,
-    HigherOrderComponent,
-    useTags,
-    Logo,
-    AddLogo
-} from "@webiny/app-admin";
-import { Link } from "@webiny/react-router";
-import { ReactComponent as LogoIcon } from "./webiny-logo.svg";
-import { useNavigation } from "../Navigation";
-
-const BrandImpl: HigherOrderComponent = () => {
-    return function BrandRenderer() {
-        const { location } = useTags();
-        const { setVisible } = useNavigation();
-        const inApp = ["appBar", "navigation"].includes(String(location));
-
-        const onClick = useCallback(() => {
-            location === "navigation" ? setVisible(false) : null;
-        }, []);
-
-        if (!inApp) {
-            return <Logo />;
-        }
-
-        return (
-            <Link to={"/"} onClick={onClick}>
-                <Logo />
-            </Link>
-        );
-    };
-};
-
-const WebinyLogo = () => {
-    const { location } = useTags();
-    const isLoginScreen = location === "loginScreen";
-    const isAppBar = location === "appBar";
-    const isInstaller = location === "installer";
-    const inApp = !isInstaller && !isLoginScreen;
-
-    const color = isAppBar ? "white" : "var(--mdc-theme-primary)";
-
-    return (
-        <LogoIcon
-            style={{
-                width: !inApp ? 125 : 100,
-                height: !inApp ? "auto" : 30,
-                paddingLeft: !inApp ? 0 : 20,
-                color
-            }}
-        />
-    );
-};
-
-export const Brand = () => {
-    return (
-        <Fragment>
-            <Compose component={BrandRenderer} with={BrandImpl} />
-            <AddLogo logo={<WebinyLogo />} />
-        </Fragment>
-    );
-};
diff --git a/packages/app-admin-rmwc/src/modules/Brand/webiny-logo.svg b/packages/app-admin-rmwc/src/modules/Brand/webiny-logo.svg
deleted file mode 100644
index 95108a240aa..00000000000
--- a/packages/app-admin-rmwc/src/modules/Brand/webiny-logo.svg
+++ /dev/null
@@ -1,20 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg viewBox="0 0 413 126" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <defs>
-        <path d="M106.337016,98.7997963 L63.0899545,123.570655 C58.9970198,125.91444 53.9546983,125.91444 49.861857,123.570655 L6.61395537,98.7997963 C2.52111405,96.4552699 -5.07221701e-15,92.1236493 -4.78514071e-15,87.4353375 L-1.75158541e-15,37.8936199 C-1.46450911e-15,33.2053081 2.52111405,28.873039 6.61395537,26.5292537 L49.861857,1.75839485 C53.9546983,-0.586131618 58.9970198,-0.586131618 63.0899545,1.75839485 L106.337016,26.5292537 C110.42995,28.873039 112.951064,33.2053081 112.951064,37.8936199 L112.951064,87.4353375 C112.951064,92.1236493 110.42995,96.4552699 106.337016,98.7997963 Z M82.6150471,41.7683515 C79.3715736,50.8470221 76.1049397,59.9486691 72.8391463,69.0602294 L71.8026281,69.0602294 C68.5476678,59.9265265 65.281781,50.8027368 62.0268207,41.6911765 L51.872043,41.6911765 C48.5723496,50.9027956 45.3065562,60.0257515 42.0407628,69.1602882 L41.0927769,69.1602882 C37.7823438,59.9371809 34.4719107,50.7148147 31.2722364,41.8126368 L19.1446281,41.8126368 C25.0417339,58.5659118 30.7933405,74.8990324 36.5448537,91.2321529 L46.554786,91.2321529 L56.4646992,63.5972029 L57.4680645,63.5972029 C60.7784975,72.8645956 64.0781909,82.1427353 67.3216645,91.2099176 L77.3540099,91.2099176 C83.127843,74.8103691 88.8794496,58.4665941 94.7542355,41.7683515 L82.6150471,41.7683515 Z" id="path-1"></path>
-    </defs>
-    <g id="Page-4" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Webiny-Logo-Icon" transform="translate(-95.000000, -227.000000)">
-            <g id="Group-27" transform="translate(301.500000, 290.500000) rotate(-90.000000) translate(-301.500000, -290.500000) translate(238.000000, 84.000000)">
-                <path d="M38.9886,294.4019 L38.9886,303.1704 L78.6828,303.1704 L78.6828,294.4019 L38.9886,294.4019 Z M78.7273,391.1846 L78.7273,382.0161 C70.8914,382.0161 63.4463,382.0343 56.0012,382.0071 C51.053,381.9807 47.5708,378.463 47.6153,373.6211 C47.6508,368.7347 50.1294,366.4688 55.6376,366.4333 C62.1493,366.3888 68.67,366.4333 75.1825,366.4069 C76.3641,366.3979 77.5457,366.2024 78.6737,366.0961 L78.6737,357.5321 C78.3183,357.3812 78.132,357.2294 77.9456,357.2294 C68.6436,357.203 59.3243,357.0522 50.0231,357.2294 C45.492,357.3185 41.9472,359.4508 40.0457,363.9192 C43.0934,368.4948 42.8262,373.5585 42.2045,378.6312 C41.6891,382.7714 41.9736,386.8226 42.8707,391.2736 C54.8641,391.2382 66.7693,391.3709 78.7273,391.1846 L78.7273,391.1846 Z M69.3634,348.63 C73.2192,348.5236 76.0532,346.054 77.6875,342.5091 C79.3754,338.8489 80.1043,334.9486 79.18,331.0393 C78.4164,327.8053 77.0213,324.7231 75.866,321.48 C77.0839,320.0766 78.4692,318.4687 80.0062,316.7099 C78.0338,314.5149 76.3369,312.6142 74.6407,310.7218 C69.5589,314.773 69.5589,314.773 62.94,314.773 C56.1175,314.773 49.2851,314.773 42.4626,314.782 C41.3609,314.782 40.2502,314.8793 39.0068,314.942 L39.0068,323.9859 L61.243,323.9859 C66.0759,323.9859 69.3189,326.5091 70.536,331.2174 C71.9576,336.7256 69.7807,339.6042 64.1126,339.6215 C56.8811,339.6479 49.6405,339.6215 42.3999,339.6396 C41.2983,339.6396 40.1966,339.746 39.0777,339.8078 L39.0777,348.7099 C49.3296,348.7099 59.3506,348.888 69.3634,348.63 L69.3634,348.63 Z M70.9978,230.0101 C70.696,234.3985 68.919,236.0954 64.468,235.7936 C59.9996,231.3517 61.892,225.8344 61.5894,220.6371 C67.1066,221.0107 71.3177,225.3372 70.9978,230.0101 L70.9978,230.0101 Z M50.8575,242.7852 C49.8804,240.5374 48.9742,238.5741 48.1834,236.5663 C46.9309,233.4213 46.5665,230.161 47.2418,226.8206 C47.908,223.4984 49.4986,221.8987 53.008,221.2679 C53.008,223.1603 53.0163,224.9909 53.008,226.8116 C52.9635,231.1117 53.5671,235.2874 55.6104,239.1249 C59.7951,246.9699 70.625,247.938 75.8133,240.84 C81.3214,233.315 80.8506,222.0851 73.112,215.5825 C67.3111,210.7142 60.524,209.7635 53.2562,210.927 C47.3218,211.8868 42.8353,214.9517 40.1612,220.2908 C36.3591,227.8777 38.376,240.6265 44.3632,247.2544 C46.5137,245.7702 48.6897,244.2686 50.8575,242.7852 L50.8575,242.7852 Z M55.6549,410.8713 C61.5011,408.3398 65.4014,401.3037 64.4952,394.8539 C64.4152,394.2759 64.0507,393.7432 63.7662,393.086 L54.7223,393.086 C54.9177,394.3031 55.1577,395.3066 55.2195,396.3192 C55.3795,398.8605 54.0025,401.3483 52.0218,402.2545 C49.8004,403.2761 46.6291,402.6898 44.914,400.7348 C44.0523,399.7486 43.1816,398.576 42.8534,397.3416 C42.0626,394.374 41.21,391.3355 41.0855,388.2887 C40.8456,382.7178 41.21,377.1215 41.041,371.5424 C40.8983,367.0287 38.5887,362.7821 34.733,360.437 C28.035,356.3678 18.742,358.2783 14.2292,364.4255 C9.849,370.3962 10.6307,379.2975 16.068,384.5838 C19.9855,388.395 24.8719,390.0384 30.4864,390.9001 L30.4864,381.5807 C29.4739,381.2608 28.2741,380.9772 27.1461,380.5146 C25.9117,380.0083 24.6501,379.4847 23.5567,378.7384 C20.8562,376.8897 19.9682,373.5675 21.2735,370.8044 C22.3042,368.6193 25.2982,367.1796 27.8124,367.6595 C30.8954,368.2457 31.988,369.8273 31.9971,373.8429 C32.0144,379.5284 31.819,385.2146 32.0061,390.8918 C32.2016,396.5773 33.8359,401.89 37.4252,406.4293 C41.6536,411.7865 49.3123,413.6171 55.6549,410.8713 L55.6549,410.8713 Z M50.8312,276.8821 C47.7126,274.5107 46.9136,271.1695 46.9309,267.5364 C46.94,265.7859 47.2154,264.0361 47.4108,261.7702 C53.6207,261.7702 59.6087,261.5393 65.5696,261.8683 C68.5282,262.0283 70.1715,264.6042 70.9359,267.2783 C71.833,270.3969 71.5758,273.4618 69.0344,275.905 C64.6906,280.0625 55.6376,280.5334 50.8312,276.8821 L50.8312,276.8821 Z M64.2461,288.3157 C74.5162,286.8323 80.6906,279.059 80.0862,268.7626 C79.9534,266.5321 79.2336,264.3379 78.7001,261.7529 L95.5,261.7529 L95.5,252.3626 L40.4275,252.3626 C38.9622,256.5737 37.8961,265.1105 38.2424,269.3843 C39.0686,279.6008 44.2304,286.0687 53.7988,288.0675 C57.1655,288.7783 60.8349,288.8137 64.2461,288.3157 L64.2461,288.3157 Z M78.6919,200.586 C71.3977,198.001 64.0862,195.3978 56.7656,192.7946 L56.7656,191.9684 C64.1035,189.3743 71.4331,186.7711 78.7537,184.177 L78.7537,176.0838 C71.3531,173.4542 64.0243,170.851 56.6856,168.2479 L56.6856,167.4925 C64.0952,164.8547 71.504,162.2161 78.6556,159.6657 L78.6556,150 C65.1969,154.7001 52.0746,159.2839 38.9532,163.8685 L38.9532,171.8463 L61.1548,179.7441 L61.1548,180.5439 C53.7097,183.1825 46.2556,185.8121 38.9713,188.3971 L38.9713,196.393 C52.1463,200.995 65.2769,205.5788 78.6919,210.2607 L78.6919,200.586 Z" id="Fill-23" fill="currentColor"></path>
-                <g id="Webiny-Icon-White" transform="translate(63.500000, 56.500000) rotate(90.000000) translate(-63.500000, -56.500000) translate(7.000000, -6.500000)">
-                    <mask id="mask-2" fill="currentColor">
-                        <use xlink:href="#path-1"></use>
-                    </mask>
-                    <use id="Mask" fill="currentColor" fill-rule="evenodd" xlink:href="#path-1"></use>
-                    <g id="White" mask="url(#mask-2)"></g>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>
diff --git a/packages/app-admin-rmwc/src/modules/Dashboard/Welcome.tsx b/packages/app-admin-rmwc/src/modules/Dashboard/Welcome.tsx
deleted file mode 100644
index 91e33d12f3e..00000000000
--- a/packages/app-admin-rmwc/src/modules/Dashboard/Welcome.tsx
+++ /dev/null
@@ -1,290 +0,0 @@
-import React from "react";
-import { css } from "emotion";
-import styled from "@emotion/styled";
-import { Link } from "@webiny/react-router";
-import {
-    SimpleForm,
-    SimpleFormHeader,
-    SimpleFormContent,
-    SimpleFormFooter
-} from "@webiny/app-admin/components/SimpleForm";
-import { useSecurity } from "@webiny/app-security/hooks/useSecurity";
-import { plugins } from "@webiny/plugins";
-import { Typography } from "@webiny/ui/Typography";
-import { Cell, Grid } from "@webiny/ui/Grid";
-import { Elevation } from "@webiny/ui/Elevation";
-// Icons
-import { ReactComponent as YouTubeIcon } from "./icons/youtube.svg";
-import { ReactComponent as GithubIcon } from "./icons/github.svg";
-import { ReactComponent as SlackIcon } from "./icons/slack.svg";
-import { ReactComponent as TwitterIcon } from "./icons/twitter.svg";
-import { ReactComponent as TextbookIcon } from "./icons/textbook.svg";
-import { ReactComponent as LaptopIcon } from "./icons/laptop.svg";
-import { AdminWelcomeScreenWidgetPlugin } from "@webiny/app-plugin-admin-welcome-screen/types";
-
-const linkStyle = css({
-    textDecoration: "none",
-    "&:hover": {
-        textDecoration: "none"
-    },
-    color: "var(--mdc-theme-text-primary-on-background)"
-});
-
-const imageStyle = css({
-    width: "30px",
-    height: "30px",
-    marginBottom: "5px"
-});
-
-const communityStyle = css({
-    textAlign: "left"
-});
-
-const widgetTitleStyle = css({
-    fontWeight: 600,
-    paddingTop: "1rem",
-    paddingBottom: "1rem",
-    textAlign: "center"
-});
-
-const widgetDescriptionStyle = css({
-    textAlign: "center",
-    paddingLeft: "20px",
-    paddingRight: "20px"
-});
-
-const iconTextStyle = css({
-    textAlign: "center"
-});
-
-const pFormContentStyle = css({
-    fontWeight: 600
-});
-
-const pGetStartedStyle = css({
-    paddingLeft: "1.5rem",
-    paddingTop: "1.5rem"
-});
-
-const footerContainerStyle = css({
-    display: "flex",
-    padding: "1rem"
-});
-
-const widgetButtonStyle = css`
-    text-align: center;
-    margin-top: auto;
-`;
-
-const footerTextStyle = css({
-    backgroundColor: "var(--mdc-theme-on-background)",
-    margin: "1rem"
-});
-
-const footerLinkTextStyle = css({
-    fontWeight: 600,
-    paddingLeft: "1rem"
-});
-
-const ContentTheme = styled("div")({
-    color: "var(--mdc-theme-text-primary-on-background)"
-});
-
-const Widget = styled.div`
-    margin-left: 1.5rem;
-    margin-right: 1.5rem;
-    margin-bottom: 2rem;
-    flex: 1 1 21%;
-    max-width: 25%;
-    min-height: 250px;
-`;
-
-const WelcomeScreenWidgetsWrapper = styled.div`
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    @media (max-width: 479px) {
-        flex-direction: column;
-    }
-`;
-
-const elevation = css`
-    padding: 10px;
-    height: calc(100% - 20px);
-    display: flex;
-    flex-direction: column;
-`;
-
-const Welcome = () => {
-    const { identity, getPermission } = useSecurity();
-
-    if (!identity) {
-        return null;
-    }
-
-    const widgets = plugins
-        .byType<AdminWelcomeScreenWidgetPlugin>("admin-welcome-screen-widget")
-        .filter(pl => {
-            if (pl.permission) {
-                return getPermission(pl.permission);
-            }
-            return true;
-        });
-
-    const canSeeAnyWidget = widgets.length > 0;
-
-    return (
-        <SimpleForm>
-            <SimpleFormHeader title={`Hi ${identity.displayName}!`} />
-            <SimpleFormContent>
-                <ContentTheme>
-                    <Cell span={12}>
-                        <Typography use={"headline6"}>
-                            {canSeeAnyWidget && (
-                                <p className={pGetStartedStyle}>
-                                    To get started - pick one of the actions below:
-                                </p>
-                            )}
-                            {!canSeeAnyWidget && (
-                                <p className={pGetStartedStyle}>
-                                    Please contact the administrator for permissions to access
-                                    Webiny apps.
-                                </p>
-                            )}
-                            <br />
-                        </Typography>
-                    </Cell>
-                    <WelcomeScreenWidgetsWrapper>
-                        {widgets.map(pl => {
-                            return (
-                                <Widget key={pl.name} data-testid={pl.name}>
-                                    <Elevation z={2} className={elevation}>
-                                        <Typography use={"headline6"}>
-                                            <p className={widgetTitleStyle}>{pl.widget.title}</p>
-                                        </Typography>
-                                        <Typography
-                                            use={"body1"}
-                                            className={widgetDescriptionStyle}
-                                        >
-                                            {pl.widget.description}
-                                        </Typography>
-                                        <div className={widgetButtonStyle}>{pl.widget.cta}</div>
-                                    </Elevation>
-                                </Widget>
-                            );
-                        })}
-                    </WelcomeScreenWidgetsWrapper>
-                </ContentTheme>
-            </SimpleFormContent>
-            <SimpleFormFooter>
-                <Grid>
-                    <Cell span={8}>
-                        <Typography use={"headline6"} className={communityStyle}>
-                            <p className={pFormContentStyle}>Learn more about Webiny:</p>
-                        </Typography>
-                    </Cell>
-                    <Cell span={4} style={{ marginLeft: "1rem" }}>
-                        <Typography use={"headline6"} className={communityStyle}>
-                            <p className={pFormContentStyle}>Join our community:</p>
-                        </Typography>
-                    </Cell>
-                    <Cell span={8}>
-                        <Typography use={"body1"} className={communityStyle}>
-                            Explore the Webiny documentation, learn about the architecture and check
-                            out code examples and guides:
-                        </Typography>
-                    </Cell>
-                    <Cell span={4} style={{ marginLeft: "1rem" }}>
-                        <Typography use={"body1"} className={communityStyle}>
-                            Get to know Webiny team members, discuss new ideas and get help:
-                        </Typography>
-                    </Cell>
-                    <Cell
-                        span={4}
-                        className={footerTextStyle}
-                        style={{ margin: "1rem 1rem 1rem 0rem" }}
-                    >
-                        <Link
-                            to="https://www.webiny.com/docs"
-                            className={linkStyle}
-                            target={"_blank"}
-                            rel={"noopener noreferrer"}
-                        >
-                            <Typography use={"headline5"}>
-                                <div className={footerContainerStyle}>
-                                    <TextbookIcon className={imageStyle} />
-                                    <p className={footerLinkTextStyle}>Documentation</p>
-                                </div>
-                            </Typography>
-                        </Link>
-                    </Cell>
-                    <Cell
-                        span={4}
-                        className={footerTextStyle}
-                        style={{ margin: "1rem 1rem 1rem 9px", visibility: "hidden" }}
-                    >
-                        <Link
-                            to="https://github.com/webiny/webiny-examples"
-                            className={linkStyle}
-                            target={"_blank"}
-                            rel={"noopener noreferrer"}
-                        >
-                            <Typography use={"headline5"}>
-                                <span className={footerContainerStyle}>
-                                    <LaptopIcon className={imageStyle} />
-                                    <p className={footerLinkTextStyle}>Code examples</p>
-                                </span>
-                            </Typography>
-                        </Link>
-                    </Cell>
-                    <Cell span={1} className={iconTextStyle} align="middle">
-                        <Link
-                            to="https://github.com/webiny/webiny-js"
-                            className={linkStyle}
-                            target={"_blank"}
-                            rel={"noopener noreferrer"}
-                        >
-                            <GithubIcon className={imageStyle} />
-                            <p>Github</p>
-                        </Link>
-                    </Cell>
-                    <Cell span={1} className={iconTextStyle} align="middle">
-                        <Link
-                            to="https://www.webiny.com/slack/"
-                            className={linkStyle}
-                            target={"_blank"}
-                            rel={"noopener noreferrer"}
-                        >
-                            <SlackIcon className={imageStyle} />
-                            <p>Slack</p>
-                        </Link>
-                    </Cell>
-                    <Cell span={1} className={iconTextStyle} align="middle">
-                        <Link
-                            to="https://youtube.com/webiny"
-                            className={linkStyle}
-                            target={"_blank"}
-                            rel={"noopener noreferrer"}
-                        >
-                            <YouTubeIcon className={imageStyle} />
-                            <p>YouTube</p>
-                        </Link>
-                    </Cell>
-                    <Cell span={1} className={iconTextStyle} align="middle">
-                        <Link
-                            to="https://twitter.com/WebinyCMS"
-                            className={linkStyle}
-                            target={"_blank"}
-                            rel={"noopener noreferrer"}
-                        >
-                            <TwitterIcon className={imageStyle} />
-                            <p>Twitter</p>
-                        </Link>
-                    </Cell>
-                </Grid>
-            </SimpleFormFooter>
-        </SimpleForm>
-    );
-};
-
-export default Welcome;
diff --git a/packages/app-admin-rmwc/src/modules/Dashboard/icons/laptop.svg b/packages/app-admin-rmwc/src/modules/Dashboard/icons/laptop.svg
deleted file mode 100644
index 6b284f9b853..00000000000
--- a/packages/app-admin-rmwc/src/modules/Dashboard/icons/laptop.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg id="Layer_1" enable-background="new 0 0 510.635 510.635" height="512" viewBox="0 0 510.635 510.635" width="512" xmlns="http://www.w3.org/2000/svg"><path d="m494.635 350.649h-26.42v-238.157c0-28.612-23.278-51.891-51.891-51.891h-322.012c-28.613 0-51.891 23.278-51.891 51.891v238.157h-26.421c-8.836 0-16 7.163-16 16v42.984c0 22.276 18.123 40.399 40.399 40.399h429.836c22.276 0 40.399-18.123 40.399-40.399v-42.984c.001-8.836-7.163-16-15.999-16zm-420.215-238.157c0-10.968 8.923-19.891 19.891-19.891h322.012c10.968 0 19.891 8.923 19.891 19.891v238.157h-361.794zm404.215 297.142c0 4.632-3.768 8.399-8.399 8.399h-429.837c-4.631 0-8.399-3.768-8.399-8.399v-26.984h171.69c1.333 7.491 7.863 13.184 15.737 13.184h71.779c7.874 0 14.405-5.692 15.737-13.184h171.69v26.984z"/><path d="m196.197 170.517c-6.249-6.249-16.379-6.249-22.627 0l-46.801 46.801c-6.244 6.242-6.248 16.38 0 22.627l46.801 46.802c3.125 3.125 7.219 4.687 11.314 4.687 14.125 0 21.423-17.205 11.314-27.313l-35.488-35.488 35.487-35.487c6.248-6.25 6.248-16.381 0-22.629z"/><path d="m337.065 170.517c-6.248-6.248-16.378-6.248-22.627 0-6.248 6.248-6.248 16.379 0 22.627l35.487 35.487-35.488 35.488c-10.109 10.109-2.81 27.313 11.314 27.313 4.095 0 8.189-1.563 11.314-4.687l46.801-46.802c6.244-6.243 6.248-16.381 0-22.627z"/><path d="m284.351 153.975c-8.237-3.205-17.509.877-20.711 9.113l-46.468 119.488c-4.098 10.537 3.739 21.803 14.908 21.803 6.407 0 12.454-3.875 14.916-10.205l46.468-119.488c3.202-8.236-.878-17.508-9.113-20.711z"/></svg>
\ No newline at end of file
diff --git a/packages/app-admin-rmwc/src/modules/Dashboard/icons/slack.svg b/packages/app-admin-rmwc/src/modules/Dashboard/icons/slack.svg
deleted file mode 100644
index 0ad8df0676c..00000000000
--- a/packages/app-admin-rmwc/src/modules/Dashboard/icons/slack.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!-- Font Awesome Free 5.15.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) --><path d="M94.12 315.1c0 25.9-21.16 47.06-47.06 47.06S0 341 0 315.1c0-25.9 21.16-47.06 47.06-47.06h47.06v47.06zm23.72 0c0-25.9 21.16-47.06 47.06-47.06s47.06 21.16 47.06 47.06v117.84c0 25.9-21.16 47.06-47.06 47.06s-47.06-21.16-47.06-47.06V315.1zm47.06-188.98c-25.9 0-47.06-21.16-47.06-47.06S139 32 164.9 32s47.06 21.16 47.06 47.06v47.06H164.9zm0 23.72c25.9 0 47.06 21.16 47.06 47.06s-21.16 47.06-47.06 47.06H47.06C21.16 243.96 0 222.8 0 196.9s21.16-47.06 47.06-47.06H164.9zm188.98 47.06c0-25.9 21.16-47.06 47.06-47.06 25.9 0 47.06 21.16 47.06 47.06s-21.16 47.06-47.06 47.06h-47.06V196.9zm-23.72 0c0 25.9-21.16 47.06-47.06 47.06-25.9 0-47.06-21.16-47.06-47.06V79.06c0-25.9 21.16-47.06 47.06-47.06 25.9 0 47.06 21.16 47.06 47.06V196.9zM283.1 385.88c25.9 0 47.06 21.16 47.06 47.06 0 25.9-21.16 47.06-47.06 47.06-25.9 0-47.06-21.16-47.06-47.06v-47.06h47.06zm0-23.72c-25.9 0-47.06-21.16-47.06-47.06 0-25.9 21.16-47.06 47.06-47.06h117.84c25.9 0 47.06 21.16 47.06 47.06 0 25.9-21.16 47.06-47.06 47.06H283.1z"/></svg>
\ No newline at end of file
diff --git a/packages/app-admin-rmwc/src/modules/Dashboard/icons/textbook.svg b/packages/app-admin-rmwc/src/modules/Dashboard/icons/textbook.svg
deleted file mode 100644
index cfed5ab4ba3..00000000000
--- a/packages/app-admin-rmwc/src/modules/Dashboard/icons/textbook.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg height="512pt" viewBox="-40 0 512 512.00004" width="512pt" xmlns="http://www.w3.org/2000/svg"><path d="m423.71875 60.6875c4.203125 0 7.609375-3.410156 7.609375-7.613281v-30.238281c0-12.59375-10.242187-22.835938-22.835937-22.835938h-328.777344c-43.8125 0-79.570313 35.164062-79.714844 78.414062v354.691407.019531c-.0585938 21.085938 8.121094 40.914062 23.039062 55.839844 14.863282 14.855468 34.613282 23.035156 55.617188 23.035156h329.835938c12.59375 0 22.835937-10.242188 22.835937-22.835938v-405.640624c0-4.203126-3.40625-7.613282-7.609375-7.613282s-7.613281 3.410156-7.613281 7.613282v272.476562c-2.382813-.847656-4.941407-1.308594-7.613281-1.308594h-223.808594c-4.207032 0-7.613282 3.40625-7.613282 7.609375s3.40625 7.613281 7.613282 7.613281h223.808594c4.199218 0 7.613281 3.414063 7.613281 7.609376 0 4.199218-3.414063 7.613281-7.613281 7.613281h-329.835938c-13.074219 0-25.320312 5.160156-34.476562 14.535156-9.152344 9.371094-14.023438 21.734375-13.71875 34.820313.605468 25.949218 22.566406 47.0625 48.953124 47.0625h329.078126c4.199218 0 7.613281 3.414062 7.613281 7.609374 0 4.199219-3.414063 7.613282-7.613281 7.613282h-329.835938c-16.9375 0-32.867188-6.597656-44.855469-18.574219-12.035156-12.046875-18.632812-28.054687-18.578125-45.074219.117188-34.855468 29.046875-63.214844 64.492188-63.214844h74.515625c4.207031 0 7.613281-3.410156 7.613281-7.613281s-3.40625-7.609375-7.613281-7.609375h-74.515625c-26.46875 0-49.980469 12.84375-64.492188 32.53125v-308.78125c.117188-34.859375 29.046875-63.21875 64.492188-63.21875h328.777344c4.199218 0 7.613281 3.414063 7.613281 7.613282v30.238281c0 4.203125 3.410156 7.613281 7.613281 7.613281zm-378.039062 373.449219c-.207032-8.953125 3.125-17.414063 9.390624-23.824219 6.265626-6.417969 14.644532-9.953125 23.585938-9.953125h308.585938c-1.910157 4.117187-3.453126 8.359375-4.609376 12.6875h-292.8125c-4.203124 0-7.613281 3.40625-7.613281 7.609375s3.410157 7.613281 7.613281 7.613281h290.324219c-.21875 3.378907-.21875 6.769531 0 10.148438h-290.324219c-4.203124 0-7.613281 3.410156-7.613281 7.613281s3.410157 7.613281 7.613281 7.613281h292.8125c1.15625 4.324219 2.699219 8.570313 4.609376 12.683594h-307.828126c-18.183593 0-33.320312-14.441406-33.734374-32.191406zm362.8125 32.191406h-4c-12.398438-20.167969-12.398438-45.796875 0-65.96875h4c2.671874 0 5.230468-.464844 7.613281-1.308594v68.585938c-2.382813-.84375-4.941407-1.308594-7.613281-1.308594zm0 0"/><path d="m132.140625 83.523438c-16.457031 0-29.84375 13.386718-29.84375 29.84375v59.050781c0 16.453125 13.386719 29.84375 29.84375 29.84375h220.410156c16.457031 0 29.847657-13.390625 29.847657-29.84375v-59.050781c0-16.457032-13.390626-29.84375-29.847657-29.84375zm235.03125 29.84375v59.050781c0 8.058593-6.558594 14.621093-14.621094 14.621093h-220.410156c-8.0625 0-14.621094-6.5625-14.621094-14.621093v-59.050781c0-8.0625 6.558594-14.621094 14.621094-14.621094h220.410156c8.0625 0 14.621094 6.558594 14.621094 14.621094zm0 0"/><path d="m335.207031 151.53125h-185.71875c-4.203125 0-7.613281 3.410156-7.613281 7.613281s3.410156 7.613281 7.613281 7.613281h185.71875c4.203125 0 7.609375-3.410156 7.609375-7.613281s-3.40625-7.613281-7.609375-7.613281zm0 0"/><path d="m335.207031 119.027344h-185.71875c-4.203125 0-7.613281 3.410156-7.613281 7.613281s3.410156 7.609375 7.613281 7.609375h185.71875c4.203125 0 7.609375-3.40625 7.609375-7.609375s-3.40625-7.613281-7.609375-7.613281zm0 0"/></svg>
\ No newline at end of file
diff --git a/packages/app-admin-rmwc/src/modules/Dashboard/icons/twitter.svg b/packages/app-admin-rmwc/src/modules/Dashboard/icons/twitter.svg
deleted file mode 100644
index af40cbb9458..00000000000
--- a/packages/app-admin-rmwc/src/modules/Dashboard/icons/twitter.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!-- Font Awesome Free 5.15.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) --><path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"/></svg>
\ No newline at end of file
diff --git a/packages/app-admin-rmwc/src/modules/Dashboard/icons/youtube.svg b/packages/app-admin-rmwc/src/modules/Dashboard/icons/youtube.svg
deleted file mode 100644
index 3feb1d0b6a2..00000000000
--- a/packages/app-admin-rmwc/src/modules/Dashboard/icons/youtube.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!-- Font Awesome Free 5.15.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) --><path d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"/></svg>
\ No newline at end of file
diff --git a/packages/app-admin-rmwc/src/modules/Dashboard/index.tsx b/packages/app-admin-rmwc/src/modules/Dashboard/index.tsx
deleted file mode 100644
index 5267e25b978..00000000000
--- a/packages/app-admin-rmwc/src/modules/Dashboard/index.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import * as React from "react";
-import {
-    CenteredView,
-    Compose,
-    DashboardRenderer as DashboardRendererSpec
-} from "@webiny/app-admin";
-import Welcome from "./Welcome";
-
-const DashboardRendererHOC = () => {
-    return function DashboardRenderer() {
-        return (
-            <CenteredView maxWidth={1300}>
-                <Welcome />
-            </CenteredView>
-        );
-    };
-};
-
-export const Dashboard = () => {
-    return <Compose component={DashboardRendererSpec} with={DashboardRendererHOC} />;
-};
diff --git a/packages/app-admin-rmwc/src/modules/Layout.tsx b/packages/app-admin-rmwc/src/modules/Layout.tsx
deleted file mode 100644
index 7d32eb19406..00000000000
--- a/packages/app-admin-rmwc/src/modules/Layout.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import React, { Fragment } from "react";
-import Helmet from "react-helmet";
-import {
-    Brand,
-    Compose,
-    LayoutProps,
-    LayoutRenderer,
-    LocaleSelector,
-    Navigation,
-    Search,
-    Tags,
-    UserMenu
-} from "@webiny/app-admin";
-import { TopAppBarPrimary, TopAppBarSection } from "@webiny/ui/TopAppBar";
-
-const RMWCLayout = () => {
-    return function RMWCLayout({ title, children }: LayoutProps) {
-        return (
-            <Fragment>
-                {title ? <Helmet title={title} /> : null}
-                <Tags tags={{ location: "appBar" }}>
-                    <TopAppBarPrimary fixed>
-                        <TopAppBarSection style={{ width: "25%" }} alignStart>
-                            <Brand />
-                        </TopAppBarSection>
-                        <TopAppBarSection style={{ width: "50%" }}>
-                            <Search />
-                        </TopAppBarSection>
-                        <TopAppBarSection style={{ width: "25%" }} alignEnd>
-                            <LocaleSelector />
-                            <UserMenu />
-                        </TopAppBarSection>
-                    </TopAppBarPrimary>
-                </Tags>
-                <div style={{ paddingTop: 64 }}>{children}</div>
-                <Navigation />
-            </Fragment>
-        );
-    };
-};
-
-export const Layout = () => {
-    return <Compose component={LayoutRenderer} with={RMWCLayout} />;
-};
diff --git a/packages/app-admin-rmwc/src/modules/Navigation/Hamburger.tsx b/packages/app-admin-rmwc/src/modules/Navigation/Hamburger.tsx
deleted file mode 100644
index 2b99b4d1693..00000000000
--- a/packages/app-admin-rmwc/src/modules/Navigation/Hamburger.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import React from "react";
-import { IconButton } from "@webiny/ui/Button";
-import { ReactComponent as MenuIcon } from "./icons/hamburger.svg";
-import { useNavigation } from "./index";
-import { useTags } from "@webiny/app-admin";
-
-const Hamburger = () => {
-    const { location } = useTags();
-    const { visible, setVisible } = useNavigation();
-
-    if (location === "installer") {
-        return null;
-    }
-
-    return (
-        <IconButton
-            icon={<MenuIcon style={{ color: location === "navigation" ? undefined : "white" }} />}
-            onClick={() => setVisible(!visible)}
-            data-testid={location === "navigation" ? undefined : "apps-menu"}
-        />
-    );
-};
-
-export default Hamburger;
diff --git a/packages/app-admin-rmwc/src/modules/Navigation/Styled.ts b/packages/app-admin-rmwc/src/modules/Navigation/Styled.ts
deleted file mode 100644
index a27f28e83c4..00000000000
--- a/packages/app-admin-rmwc/src/modules/Navigation/Styled.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import styled from "@emotion/styled";
-import { css } from "emotion";
-
-export const MenuHeader = styled("div")({
-    display: "flex",
-    alignItems: "center",
-    padding: 5,
-    backgroundColor: "var(--mdc-theme-surface)",
-    borderBottom: "1px solid var(--mdc-theme-on-background)"
-});
-
-export const navHeader = css({
-    padding: 0,
-    "&.mdc-drawer__header": {
-        padding: "0 !important",
-        minHeight: 0
-    }
-});
-
-export const navContent = css({
-    padding: "0 !important"
-});
-
-export const logoStyle = css({
-    "&.mdc-top-app-bar__title": {
-        paddingLeft: 15,
-        ".webiny-logo": {
-            color: "var(--mdc-theme-primary)"
-        }
-    }
-});
-
-export const MenuFooter = styled("div")({
-    borderTop: "1px solid var(--mdc-theme-on-background)",
-    a: {
-        color: "var(--mdc-theme-text-on-primary)",
-        textDecoration: "none"
-    }
-});
-
-export const subFooter = css({
-    ".mdc-drawer &.mdc-deprecated-list-item": {
-        borderTop: "1px solid var(--mdc-theme-on-background)",
-        padding: "10px 16px",
-        margin: 0
-    }
-});
diff --git a/packages/app-admin-rmwc/src/modules/Navigation/icons/hamburger.svg b/packages/app-admin-rmwc/src/modules/Navigation/icons/hamburger.svg
deleted file mode 100644
index 1989a0ed5e7..00000000000
--- a/packages/app-admin-rmwc/src/modules/Navigation/icons/hamburger.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-    <path d="M0 0h24v24H0z" fill="none"/>
-    <path fill="currentColor" d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/>
-</svg>
diff --git a/packages/app-admin-rmwc/src/modules/Navigation/icons/round-keyboard_arrow_down-24px.svg b/packages/app-admin-rmwc/src/modules/Navigation/icons/round-keyboard_arrow_down-24px.svg
deleted file mode 100644
index 6d3f171998c..00000000000
--- a/packages/app-admin-rmwc/src/modules/Navigation/icons/round-keyboard_arrow_down-24px.svg
+++ /dev/null
@@ -1,16 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px"
-	 height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
-<g id="Bounding_Boxes" display="none">
-	<g id="ui_x5F_spec_x5F_header_copy_3" display="inline">
-	</g>
-	<path display="inline" fill="none" d="M0,0h24v24H0V0z"/>
-</g>
-<g id="Rounded">
-	<g id="ui_x5F_spec_x5F_header_copy_6">
-	</g>
-	<path d="M8.12,9.29L12,13.17l3.88-3.88c0.39-0.39,1.02-0.39,1.41,0l0,0c0.39,0.39,0.39,1.02,0,1.41l-4.59,4.59
-		c-0.39,0.39-1.02,0.39-1.41,0l-4.59-4.59c-0.39-0.39-0.39-1.02,0-1.41l0,0C7.09,8.91,7.73,8.9,8.12,9.29z"/>
-</g>
-</svg>
diff --git a/packages/app-admin-rmwc/src/modules/Navigation/icons/round-keyboard_arrow_up-24px.svg b/packages/app-admin-rmwc/src/modules/Navigation/icons/round-keyboard_arrow_up-24px.svg
deleted file mode 100644
index 2a577e2fc38..00000000000
--- a/packages/app-admin-rmwc/src/modules/Navigation/icons/round-keyboard_arrow_up-24px.svg
+++ /dev/null
@@ -1,16 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px"
-	 height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
-<g id="Bounding_Boxes" display="none">
-	<g id="ui_x5F_spec_x5F_header_copy_3" display="inline">
-	</g>
-	<path display="inline" fill="none" d="M0,0h24v24H0V0z"/>
-</g>
-<g id="Rounded">
-	<g id="ui_x5F_spec_x5F_header_copy_6">
-	</g>
-	<path d="M8.12,14.71L12,10.83l3.88,3.88c0.39,0.39,1.02,0.39,1.41,0l0,0c0.39-0.39,0.39-1.02,0-1.41l-4.59-4.59
-		c-0.39-0.39-1.02-0.39-1.41,0l-4.59,4.59c-0.39,0.39-0.39,1.02,0,1.41l0,0C7.09,15.09,7.73,15.1,8.12,14.71z"/>
-</g>
-</svg>
diff --git a/packages/app-admin-rmwc/src/modules/Navigation/icons/webiny-orange-logo.svg b/packages/app-admin-rmwc/src/modules/Navigation/icons/webiny-orange-logo.svg
deleted file mode 100644
index b3e41cc5276..00000000000
--- a/packages/app-admin-rmwc/src/modules/Navigation/icons/webiny-orange-logo.svg
+++ /dev/null
@@ -1,20 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg viewBox="0 0 413 136" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <defs>
-        <path d="M113.8653,106.64105 L67.5565,133.37785 C63.1738,135.90765 57.7745,135.90765 53.3919,133.37785 L7.0822,106.64105 C2.6996,104.11045 -4.91085111e-15,99.43505 -4.60099098e-15,94.37465 L-1.32667732e-15,40.90105 C-1.01681719e-15,35.84065 2.6996,31.16455 7.0822,28.63475 L53.3919,1.89795 C57.7745,-0.63265 63.1738,-0.63265 67.5565,1.89795 L113.8653,28.63475 C118.248,31.16455 120.9476,35.84065 120.9476,40.90105 L120.9476,94.37465 C120.9476,99.43505 118.248,104.11045 113.8653,106.64105 Z M88.4639,45.0833 C84.9908,54.8825 81.4929,64.7065 77.9959,74.5412 L76.886,74.5412 C73.4006,64.6826 69.9035,54.8347 66.4181,45 L55.5444,45 C52.0111,54.9427 48.5141,64.7897 45.0171,74.6492 L44.002,74.6492 C40.4572,64.6941 36.9124,54.7398 33.4862,45.1311 L20.5,45.1311 C26.8146,63.214 32.9734,80.8434 39.1321,98.4728 L49.8507,98.4728 L60.4622,68.6446 L61.5366,68.6446 C65.0814,78.6475 68.6147,88.662 72.0878,98.4488 L82.8304,98.4488 C89.013,80.7477 95.1718,63.1068 101.4625,45.0833 L88.4639,45.0833 Z" id="path-1"></path>
-    </defs>
-    <g id="Page-3" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Webiny-Logo-Icon" transform="translate(-95.000000, -227.000000)">
-            <g id="Logo" transform="translate(95.000000, 226.598492)">
-                <path d="M266.606118,87.28355 L266.606118,96.05205 L306.300318,96.05205 L306.300318,87.28355 L266.606118,87.28355 Z M306.344818,184.06705 L306.344818,174.89865 C298.508918,174.89865 291.063818,174.91595 283.618718,174.88955 C278.670418,174.86315 275.188318,171.34475 275.232818,166.50285 C275.268318,161.61645 277.746918,159.35135 283.255118,159.31585 C289.766718,159.27135 296.287518,159.31585 302.799918,159.28945 C303.981618,159.28045 305.163218,159.08495 306.291218,158.97865 L306.291218,150.41375 C305.935818,150.26285 305.749418,150.11195 305.562318,150.11195 C296.261118,150.08555 286.941718,149.93385 277.639718,150.11195 C273.109518,150.20105 269.564718,152.33255 267.663218,156.80175 C270.710818,161.37645 270.443718,166.44095 269.821918,171.51375 C269.306618,175.65395 269.591118,179.70425 270.488218,184.15535 C282.481618,184.11985 294.386818,184.25345 306.344818,184.06705 L306.344818,184.06705 Z M296.980918,141.51245 C300.836618,141.40525 303.670718,138.93565 305.305018,135.39085 C306.992918,131.73055 307.721818,127.83035 306.797518,123.92185 C306.033118,120.68785 304.638718,117.60475 303.483518,114.36255 C304.700618,112.95835 306.086718,111.35045 307.623718,109.59155 C305.651318,107.39735 303.954418,105.49595 302.258218,103.60355 C297.176418,107.65465 297.176418,107.65465 290.557518,107.65465 C283.734218,107.65465 276.902618,107.65465 270.080018,107.66375 C268.978418,107.66375 267.867718,107.76185 266.623418,107.82375 L266.623418,116.86765 L288.860518,116.86765 C293.693418,116.86765 296.936418,119.39085 298.153518,124.09915 C299.575018,129.60725 297.398218,132.48585 291.730018,132.50405 C284.498518,132.53045 277.258018,132.50405 270.017418,132.52135 C268.915718,132.52135 267.814118,132.62775 266.695218,132.69035 L266.695218,141.59245 C276.947118,141.59245 286.968118,141.76975 296.980918,141.51245 L296.980918,141.51245 Z M298.615218,22.89265 C298.313418,27.28095 296.536518,28.97795 292.085418,28.67535 C287.617118,24.23335 289.509518,18.71695 289.206918,13.51965 C294.724118,13.89235 298.935218,18.21895 298.615218,22.89265 L298.615218,22.89265 Z M278.475018,35.66775 C277.497918,33.41995 276.591718,31.45665 275.800918,29.44875 C274.548418,26.30385 274.183918,23.04355 274.859318,19.70315 C275.525518,16.38015 277.116118,14.78125 280.624718,14.15045 C280.624718,16.04285 280.633818,17.87265 280.624718,19.69405 C280.581018,23.99425 281.184618,28.16905 283.227918,32.00745 C287.412618,39.85165 298.242518,40.82045 303.430718,33.72175 C308.938918,26.19665 308.468118,14.96765 300.729418,8.46425 C294.928618,3.59595 288.140718,2.64525 280.873718,3.80955 C274.939318,4.76845 270.452718,7.83345 267.778718,13.17335 C263.976518,20.76025 265.993518,33.50895 271.980718,40.13605 C274.131218,38.65265 276.307218,37.15115 278.475018,35.66775 L278.475018,35.66775 Z M283.272418,203.75375 C289.118618,201.22155 293.018018,194.18545 292.111818,187.73565 C292.031818,187.15845 291.668218,186.62575 291.383718,185.96775 L282.339818,185.96775 C282.535218,187.18485 282.775218,188.18915 282.837018,189.20175 C282.997018,191.74225 281.619918,194.22995 279.639318,195.13615 C277.417918,196.15785 274.246618,195.57155 272.531518,193.61735 C271.669818,192.63115 270.799118,191.45855 270.470918,190.22335 C269.680118,187.25575 268.826718,184.21795 268.703018,181.17035 C268.463018,175.60035 268.826718,170.00315 268.658518,164.42405 C268.515818,159.91125 266.206218,155.66465 262.350518,153.31875 C255.651618,149.25025 246.359518,151.15995 241.845818,157.30805 C237.466518,163.27795 238.248218,172.18005 243.685418,177.46555 C247.603018,181.27755 252.489418,182.92095 258.103918,183.78265 L258.103918,174.46325 C257.091418,174.14335 255.891618,173.85885 254.763618,173.39715 C253.528418,172.89085 252.267618,172.36635 251.174218,171.62015 C248.473718,169.77225 247.585718,166.45005 248.891018,163.68695 C249.921718,161.50095 252.915718,160.06205 255.429818,160.54195 C258.512918,161.12825 259.605518,162.70985 259.614518,166.72545 C259.631918,172.41095 259.436418,178.09635 259.623618,183.77355 C259.819018,189.45975 261.453318,194.77175 265.042718,199.31185 C269.271118,204.66905 276.928918,206.49875 283.272418,203.75375 L283.272418,203.75375 Z M278.448618,69.76465 C275.330118,67.39235 274.530318,64.05205 274.548418,60.41815 C274.557518,58.66835 274.832918,56.91785 275.028318,54.65275 C281.238218,54.65275 287.226218,54.42185 293.187118,54.75085 C296.145618,54.90995 297.789018,57.48675 298.553418,60.16085 C299.450518,63.27945 299.192418,66.34435 296.651918,68.78755 C292.307218,72.94505 283.255118,73.41585 278.448618,69.76465 L278.448618,69.76465 Z M291.863618,81.19825 C302.133718,79.71485 308.308118,71.94075 307.703718,61.64425 C307.570118,59.41465 306.851118,57.22045 306.317618,54.63455 L323.117418,54.63455 L323.117418,45.24435 L268.045018,45.24435 C266.579718,49.45545 265.513518,57.99305 265.859918,62.26605 C266.686118,72.48325 271.847918,78.95045 281.415518,80.94915 C284.783018,81.65995 288.451518,81.69545 291.863618,81.19825 L291.863618,81.19825 Z M306.309318,-6.53145 C299.015218,-9.11735 291.703718,-11.71965 284.383118,-14.32285 L284.383118,-15.14905 C291.721018,-17.74325 299.050618,-20.34635 306.371218,-22.94045 L306.371218,-31.03365 C298.970618,-33.66405 291.641018,-36.26645 284.303118,-38.86965 L284.303118,-39.62495 C291.712718,-42.26355 299.121518,-44.90215 306.273118,-47.45175 L306.273118,-57.11745 C292.814418,-52.41815 279.692118,-47.83355 266.570718,-43.24975 L266.570718,-35.27195 L288.771518,-27.37345 L288.771518,-26.57435 C281.327218,-23.93575 273.873118,-21.30615 266.588018,-18.72035 L266.588018,-10.72525 C279.763018,-6.12335 292.894318,-1.53865 306.309318,3.14325 L306.309318,-6.53145 Z" id="Fill-15" fill="#FA5A28" transform="translate(281.068188, 73.950738) rotate(-90.000000) translate(-281.068188, -73.950738) "></path>
-                <g id="Webiny-Icon-Orange" transform="translate(-0.000000, 0.901508)">
-                    <mask id="mask-2" fill="white">
-                        <use xlink:href="#path-1"></use>
-                    </mask>
-                    <use id="Mask" fill="#FA5A28" fill-rule="evenodd" xlink:href="#path-1"></use>
-                    <g id="Orange" mask="url(#mask-2)"></g>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>
diff --git a/packages/app-admin-rmwc/src/modules/Navigation/index.tsx b/packages/app-admin-rmwc/src/modules/Navigation/index.tsx
deleted file mode 100644
index 7e14c9b653a..00000000000
--- a/packages/app-admin-rmwc/src/modules/Navigation/index.tsx
+++ /dev/null
@@ -1,155 +0,0 @@
-import React, { Fragment, useCallback, useContext, useMemo, useState } from "react";
-import styled from "@emotion/styled";
-import { Drawer, DrawerContent, DrawerHeader } from "@webiny/ui/Drawer";
-import {
-    Brand as BrandSpec,
-    Compose,
-    HigherOrderComponent,
-    MenuData,
-    MenuItemRenderer,
-    MenuItems,
-    MenuItemsProps,
-    NavigationRenderer as NavigationSpec,
-    Provider,
-    useNavigation as useAdminNavigation
-} from "@webiny/app-admin";
-import Hamburger from "./Hamburger";
-import { MenuGroupRenderer } from "./renderers/MenuGroupRenderer";
-import { MenuSectionItemRenderer } from "./renderers/MenuSectionItemRenderer";
-import { MenuSectionRenderer } from "./renderers/MenuSectionRenderer";
-import { MenuLinkRenderer } from "./renderers/MenuLinkRenderer";
-import { MenuElementRenderer } from "./renderers/MenuElementRenderer";
-import { List } from "@webiny/ui/List";
-import { MenuFooter, MenuHeader, navContent, navHeader } from "./Styled";
-
-const AutoWidthDrawer = styled(Drawer)`
-    width: auto;
-`;
-
-interface NavigationContext {
-    visible: boolean;
-    setVisible(visible: boolean): void;
-}
-
-const NavigationContext = React.createContext<NavigationContext>({
-    visible: false,
-    setVisible: () => {
-        return void 0;
-    }
-});
-NavigationContext.displayName = "NavigationContext";
-
-export function useNavigation(): NavigationContext {
-    return useContext(NavigationContext);
-}
-
-const BrandImpl: HigherOrderComponent = Brand => {
-    return function BrandWithHamburger() {
-        return (
-            <Fragment>
-                <Hamburger />
-                <Brand />
-            </Fragment>
-        );
-    };
-};
-
-interface NavigationProviderProps {
-    children?: React.ReactNode;
-}
-
-const NavigationProvider = (Component: React.ComponentType<NavigationProviderProps>) => {
-    return function NavigationProvider(props: NavigationProviderProps) {
-        const [visible, setVisible] = useState(false);
-
-        const context = useMemo(() => ({ visible, setVisible }), [visible]);
-
-        return (
-            <NavigationContext.Provider value={context}>
-                <Component {...props} />
-            </NavigationContext.Provider>
-        );
-    };
-};
-
-export const NavigationImpl = () => {
-    return function Navigation() {
-        const { menuItems } = useAdminNavigation();
-        const { visible, setVisible } = useNavigation();
-
-        const hideDrawer = useCallback(() => {
-            setVisible(false);
-        }, []);
-
-        const mainMenu = useMemo(
-            () => menuItems.filter(m => !(m.tags || []).includes("footer")),
-            [menuItems]
-        );
-
-        const footerMenu = useMemo(
-            () => menuItems.filter(m => (m.tags || []).includes("footer")),
-            [menuItems]
-        );
-
-        return (
-            <AutoWidthDrawer modal open={visible} onClose={hideDrawer}>
-                <DrawerHeader className={navHeader}>
-                    <MenuHeader>
-                        <BrandSpec />
-                    </MenuHeader>
-                </DrawerHeader>
-                <DrawerContent className={navContent}>
-                    <MenuItems menuItems={mainMenu} />
-                </DrawerContent>
-                <MenuFooter>
-                    <List nonInteractive>
-                        <MenuItems menuItems={footerMenu} />
-                    </List>
-                </MenuFooter>
-            </AutoWidthDrawer>
-        );
-    };
-};
-
-const menuSorter = (a: MenuData, b: MenuData): number => {
-    if (a.pin === b.pin) {
-        return (a.label || "").localeCompare(b.label || "");
-    }
-
-    if (a.pin) {
-        return a.pin === "first" ? -1 : 1;
-    }
-
-    if (b.pin) {
-        return b.pin === "first" ? 1 : -1;
-    }
-
-    return (a.label || "").localeCompare(b.label || "");
-};
-
-const SortedMenuItems: HigherOrderComponent<MenuItemsProps> = MenuItems => {
-    return function SortedMenuItems({ menuItems }) {
-        return <MenuItems menuItems={[...menuItems].sort(menuSorter)} />;
-    };
-};
-
-export const Navigation = () => {
-    return (
-        <Fragment>
-            <Provider hoc={NavigationProvider} />
-            <Compose component={NavigationSpec} with={NavigationImpl} />
-            <Compose component={MenuItems} with={SortedMenuItems} />
-            <Compose component={BrandSpec} with={BrandImpl} />
-            <Compose
-                component={MenuItemRenderer}
-                with={[
-                    MenuGroupRenderer,
-                    MenuSectionItemRenderer,
-                    MenuSectionRenderer,
-                    MenuLinkRenderer,
-                    MenuElementRenderer
-                ]}
-            />
-        </Fragment>
-    );
-};
diff --git a/packages/app-admin-rmwc/src/modules/Navigation/renderers/MenuElementRenderer.tsx b/packages/app-admin-rmwc/src/modules/Navigation/renderers/MenuElementRenderer.tsx
deleted file mode 100644
index 9211e12d051..00000000000
--- a/packages/app-admin-rmwc/src/modules/Navigation/renderers/MenuElementRenderer.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from "react";
-import { useMenuItem } from "@webiny/app-admin";
-
-export const MenuElementRenderer = (PrevMenuItem: React.ComponentType) => {
-    return function MenuComponent() {
-        const { menuItem } = useMenuItem();
-        if (!menuItem || !menuItem.element) {
-            return <PrevMenuItem />;
-        }
-
-        return menuItem.element;
-    };
-};
diff --git a/packages/app-admin-rmwc/src/modules/Navigation/renderers/MenuGroupRenderer.tsx b/packages/app-admin-rmwc/src/modules/Navigation/renderers/MenuGroupRenderer.tsx
deleted file mode 100644
index 17cf8e3a992..00000000000
--- a/packages/app-admin-rmwc/src/modules/Navigation/renderers/MenuGroupRenderer.tsx
+++ /dev/null
@@ -1,154 +0,0 @@
-import React, { Fragment, useCallback, useState } from "react";
-import { default as localStorage } from "store";
-import { css } from "emotion";
-import { Transition } from "react-transition-group";
-import classNames from "classnames";
-import { Link } from "@webiny/react-router";
-import { useMenuItem, MenuItems } from "@webiny/app-admin";
-import { List, ListItem, ListItemGraphic, ListItemMeta } from "@webiny/ui/List";
-import { IconButton } from "@webiny/ui/Button";
-import { useNavigation } from "../index";
-import { ReactComponent as UpIcon } from "../icons/round-keyboard_arrow_up-24px.svg";
-import { ReactComponent as DownIcon } from "../icons/round-keyboard_arrow_down-24px.svg";
-
-const defaultStyle = {
-    transform: "translateY(-20px)",
-    opacity: 0,
-    transitionProperty: "transform, opacity",
-    transitionTimingFunction: "cubic-bezier(0, 0, .2, 1)",
-    transitionDuration: "100ms",
-    willChange: "opacity, transform"
-};
-
-const transitionStyles: Record<string, any> = {
-    entering: {
-        transform: "translateY(-20px)",
-        opacity: 0
-    },
-    entered: {
-        transform: "translateY(0px)",
-        opacity: 1
-    }
-};
-
-const menuTitle = css({
-    ".mdc-drawer &.mdc-deprecated-list": {
-        borderBottom: "1px solid var(--mdc-theme-on-background)",
-        padding: 0,
-        ".mdc-deprecated-list-item": {
-            margin: 0,
-            padding: "0 15px",
-            height: "48px",
-            width: "100%",
-            fontWeight: 600,
-            boxSizing: "border-box"
-        }
-    }
-});
-
-const menuTitleActive = css({
-    backgroundColor: "var(--mdc-theme-background)"
-});
-
-const LOCAL_STORAGE_KEY = "webiny_navigation_groups";
-
-function loadState(): string[] {
-    return (localStorage.get(LOCAL_STORAGE_KEY) || "").split(",").filter(Boolean);
-}
-
-function storeState(state: string[]) {
-    localStorage.set(LOCAL_STORAGE_KEY, state.join(","));
-}
-
-function getState(id: string | null): boolean {
-    if (!id) {
-        return false;
-    }
-    const state = loadState();
-    return state.includes(id);
-}
-
-export const MenuGroupRenderer = (PrevMenuItem: React.ComponentType) => {
-    return function MenuGroup() {
-        const { setVisible } = useNavigation();
-        const { menuItem, depth } = useMenuItem();
-        const shouldRender = depth === 0 && menuItem && menuItem.children;
-        const [isExpanded, setExpanded] = useState<boolean>(
-            getState(menuItem ? menuItem.name : null)
-        );
-
-        const hideMenu = useCallback(() => setVisible(false), []);
-
-        const toggleElement = useCallback(() => {
-            if (!menuItem) {
-                return;
-            }
-            const state = loadState();
-            if (isExpanded && state.includes(menuItem.name)) {
-                state.splice(state.indexOf(menuItem.name), 1);
-            }
-
-            if (!isExpanded && !state.includes(menuItem.name)) {
-                state.push(menuItem.name);
-            }
-
-            setExpanded(!isExpanded);
-            storeState(state);
-        }, [isExpanded, setExpanded]);
-
-        if (!shouldRender) {
-            return <PrevMenuItem />;
-        }
-
-        if (!menuItem || !menuItem.children.length) {
-            return null;
-        }
-
-        const withLink = (content: React.ReactNode): React.ReactElement => {
-            return (
-                <Link
-                    to={menuItem.path || ""}
-                    data-testid={menuItem.testId}
-                    onClick={menuItem.onClick || hideMenu}
-                >
-                    {content}
-                </Link>
-            );
-        };
-
-        const item = (
-            <List className={classNames(menuTitle, { [menuTitleActive]: isExpanded })}>
-                <ListItem data-testid={menuItem.testId} onClick={toggleElement}>
-                    {menuItem.icon && (
-                        <ListItemGraphic>
-                            <IconButton icon={menuItem.icon} />
-                        </ListItemGraphic>
-                    )}
-
-                    {menuItem.label}
-
-                    {menuItem.children.length ? (
-                        <ListItemMeta>
-                            <IconButton icon={isExpanded ? <UpIcon /> : <DownIcon />} />
-                        </ListItemMeta>
-                    ) : null}
-                </ListItem>
-            </List>
-        );
-
-        return (
-            <Fragment>
-                {menuItem.path ? withLink(item) : item}
-                {menuItem.children ? (
-                    <Transition in={isExpanded} timeout={100} appear unmountOnExit>
-                        {state => (
-                            <div style={{ ...defaultStyle, ...transitionStyles[state] }}>
-                                <MenuItems menuItems={menuItem.children} />
-                            </div>
-                        )}
-                    </Transition>
-                ) : null}
-            </Fragment>
-        );
-    };
-};
diff --git a/packages/app-admin-rmwc/src/modules/Navigation/renderers/MenuLinkRenderer.tsx b/packages/app-admin-rmwc/src/modules/Navigation/renderers/MenuLinkRenderer.tsx
deleted file mode 100644
index 9bad2a30f8f..00000000000
--- a/packages/app-admin-rmwc/src/modules/Navigation/renderers/MenuLinkRenderer.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import React, { useCallback } from "react";
-import { css } from "emotion";
-import { Link } from "@webiny/react-router";
-import { ListItem, ListItemGraphic } from "@webiny/ui/List";
-import { useMenuItem } from "@webiny/app-admin";
-import { Icon } from "@webiny/ui/Icon";
-import { useNavigation } from "../index";
-
-const listItemStyle = css`
-    font-weight: 400 !important;
-
-    .mdc-deprecated-list &.mdc-deprecated-list-item:hover {
-        cursor: pointer;
-        background-color: var(--mdc-theme-background);
-    }
-`;
-
-export const MenuLinkRenderer = (PrevMenuItem: React.ComponentType) => {
-    return function MenuLink() {
-        const { setVisible } = useNavigation();
-        const { menuItem, depth } = useMenuItem();
-
-        const hideMenu = useCallback(() => setVisible(false), []);
-        const shouldRender =
-            depth === 0 && (menuItem ? menuItem.tags || [] : []).includes("footer");
-
-        if (!shouldRender) {
-            return <PrevMenuItem />;
-        } else if (!menuItem) {
-            // TODO @ts-refactor check if to return component or null @pavel
-            console.log(
-                "MenuLinkRenderer returning PrevMenuItem because missing menuItem variable."
-            );
-            return <PrevMenuItem />;
-        }
-
-        const withLink = (content: React.ReactNode): React.ReactElement => {
-            return (
-                <Link
-                    to={menuItem.path || ""}
-                    target={menuItem.target}
-                    data-testid={menuItem.testId}
-                    onClick={menuItem.onClick || hideMenu}
-                >
-                    {content}
-                </Link>
-            );
-        };
-
-        const item = (
-            <ListItem
-                data-testid={menuItem.testId}
-                ripple={false}
-                className={listItemStyle}
-                onClick={menuItem.onClick || hideMenu}
-            >
-                {menuItem.icon ? (
-                    <ListItemGraphic>
-                        <Icon icon={menuItem.icon} />
-                    </ListItemGraphic>
-                ) : null}
-                {menuItem.label}
-            </ListItem>
-        );
-
-        return menuItem.path ? withLink(item) : item;
-    };
-};
diff --git a/packages/app-admin-rmwc/src/modules/Navigation/renderers/MenuSectionItemRenderer.tsx b/packages/app-admin-rmwc/src/modules/Navigation/renderers/MenuSectionItemRenderer.tsx
deleted file mode 100644
index 5f01b266b94..00000000000
--- a/packages/app-admin-rmwc/src/modules/Navigation/renderers/MenuSectionItemRenderer.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-import React, { useCallback } from "react";
-import { css } from "emotion";
-import { Link } from "@webiny/react-router";
-import { List, ListItem } from "@webiny/ui/List";
-import { useNavigation } from "../index";
-import { useMenuItem } from "@webiny/app-admin";
-
-const linkStyle = css({
-    color: "var(--mdc-theme-text-primary-on-background)",
-    textDecoration: "none",
-    display: "flex",
-    alignItems: "center",
-    width: "100%",
-    height: "100%",
-    outline: "none",
-    paddingLeft: 72,
-    fontWeight: 400,
-    "&:hover": {
-        textDecoration: "none"
-    }
-});
-
-const submenuItems = css({
-    ".mdc-drawer &.mdc-deprecated-list-item": {
-        paddingLeft: 0,
-        margin: 0,
-        padding: 0
-    }
-});
-
-const submenuList = css({
-    "&.mdc-deprecated-list": {
-        padding: 0
-    }
-});
-
-export const MenuSectionItemRenderer = (PrevMenuItem: React.ComponentType) => {
-    return function MenuSectionItem() {
-        const { setVisible } = useNavigation();
-        const { menuItem, depth } = useMenuItem();
-
-        const hideMenu = useCallback(() => setVisible(false), []);
-        const shouldRender = depth > 0 && Boolean(menuItem ? menuItem.path : false);
-
-        if (!shouldRender) {
-            return <PrevMenuItem />;
-        } else if (!menuItem) {
-            // TODO @ts-refactor check if to return component or null @pavel
-            console.log(
-                "MenuSectionItemRenderer returning PrevMenuItem because no menuItem variable."
-            );
-            return <PrevMenuItem />;
-        }
-
-        return (
-            <List className={submenuList}>
-                <ListItem className={submenuItems} data-testid={menuItem.testId}>
-                    {menuItem.path ? (
-                        <Link
-                            className={linkStyle}
-                            to={menuItem.path}
-                            onClick={menuItem.onClick || hideMenu}
-                        >
-                            {menuItem.label}
-                        </Link>
-                    ) : (
-                        <span
-                            onClick={() => {
-                                if (!menuItem.onClick) {
-                                    return;
-                                }
-                                menuItem.onClick();
-                            }}
-                            className={linkStyle}
-                        >
-                            {menuItem.label}
-                        </span>
-                    )}
-                </ListItem>
-            </List>
-        );
-    };
-};
diff --git a/packages/app-admin-rmwc/src/modules/Navigation/renderers/MenuSectionRenderer.tsx b/packages/app-admin-rmwc/src/modules/Navigation/renderers/MenuSectionRenderer.tsx
deleted file mode 100644
index ae0ed5c234c..00000000000
--- a/packages/app-admin-rmwc/src/modules/Navigation/renderers/MenuSectionRenderer.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import React, { Fragment } from "react";
-import { css } from "emotion";
-import { Typography } from "@webiny/ui/Typography";
-import { MenuItems, useMenuItem } from "@webiny/app-admin";
-
-const menuSectionTitle = css({
-    marginLeft: 20,
-    display: "flex",
-    alignItems: "center",
-    color: "var(--mdc-theme-on-surface)"
-});
-
-const iconWrapper = css({
-    marginRight: 5,
-    color: "var(--mdc-theme-on-surface)"
-});
-
-export const MenuSectionRenderer = (PrevMenuItem: React.ComponentType) => {
-    return function MenuSection() {
-        const { menuItem, depth } = useMenuItem();
-
-        const shouldRender = depth === 1 && menuItem && menuItem.children.length > 0;
-
-        if (!shouldRender) {
-            return <PrevMenuItem />;
-        } else if (!menuItem) {
-            // TODO @ts-refactor check if to return component or null @pavel
-            console.log("MenuSectionRenderer returning PrevMenuItem because no menuItem variable.");
-            return <PrevMenuItem />;
-        }
-
-        if (!menuItem.children.length) {
-            return null;
-        }
-
-        return (
-            <Fragment>
-                <div className={menuSectionTitle}>
-                    <div className={iconWrapper}>{menuItem.icon}</div>
-                    <Typography use="overline">{menuItem.label}</Typography>
-                </div>
-                <MenuItems menuItems={menuItem.children} />
-            </Fragment>
-        );
-    };
-};
diff --git a/packages/app-admin-rmwc/src/modules/NotFound/index.tsx b/packages/app-admin-rmwc/src/modules/NotFound/index.tsx
deleted file mode 100644
index 050cc5081bc..00000000000
--- a/packages/app-admin-rmwc/src/modules/NotFound/index.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import * as React from "react";
-import { css } from "emotion";
-import styled from "@emotion/styled";
-import { Link } from "@webiny/react-router";
-import { Typography } from "@webiny/ui/Typography";
-import { Compose, NotFound as NotFoundSpec } from "@webiny/app-admin";
-import authErrorImg from "./SecureRouteError.svg";
-
-const ContentWrapper = styled("div")({
-    display: "block",
-    paddingTop: "15%",
-    textAlign: "center",
-    margin: "auto"
-});
-
-const styles = {
-    authErrorImgStyle: css({
-        width: "192px",
-        paddingBottom: "24px"
-    }),
-    bodyStyle: css({
-        color: "var(--mdc-theme-text-primary-on-background)",
-        display: "block"
-    }),
-    linkStyle: css({
-        textDecoration: "none",
-        "&:hover": {
-            textDecoration: "none"
-        }
-    })
-};
-
-const NotFoundHOC = () => {
-    return function NotFound() {
-        return (
-            <ContentWrapper>
-                <img className={styles.authErrorImgStyle} src={authErrorImg} alt="Not Accessible" />
-
-                <Typography use={"body1"} className={styles.bodyStyle}>
-                    The route is either missing, or you&apos;re not authorized to view it.
-                </Typography>
-
-                <Typography use={"body1"} className={styles.bodyStyle}>
-                    Please contact your administrator to report the issue.
-                </Typography>
-
-                <Link to="/" className={styles.linkStyle}>
-                    Take me back.
-                </Link>
-            </ContentWrapper>
-        );
-    };
-};
-
-export const NotFound = () => {
-    return <Compose component={NotFoundSpec} with={NotFoundHOC} />;
-};
diff --git a/packages/app-admin-rmwc/src/modules/Overlays/Dialog.tsx b/packages/app-admin-rmwc/src/modules/Overlays/Dialog.tsx
deleted file mode 100644
index 2fbc012ba35..00000000000
--- a/packages/app-admin-rmwc/src/modules/Overlays/Dialog.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import React, { useCallback, useEffect, useState } from "react";
-import get from "lodash/get";
-import { useUi } from "@webiny/app/hooks/useUi";
-import { Dialog, DialogAccept, DialogActions, DialogContent, DialogTitle } from "@webiny/ui/Dialog";
-import { ButtonPrimary } from "@webiny/ui/Button";
-
-export const DialogContainer = () => {
-    const ui = useUi();
-    const [isLoading, setIsLoading] = useState(false);
-    const message: React.ReactNode = get(ui, "dialog.message");
-    const {
-        dataTestId,
-        title,
-        loading,
-        actions = { cancel: null, accept: { label: "OK" } },
-        style,
-        onClose
-    } = get(ui, "dialog.options", {});
-
-    const hideDialog = useCallback(() => {
-        ui.setState(ui => ({ ...ui, dialog: null }));
-        if (typeof onClose === "function") {
-            onClose();
-        }
-    }, [ui]);
-    /**
-     * We need this part because message can change while the dialog is opened and in loading state.
-     */
-    useEffect(() => {
-        setIsLoading(false);
-    }, [ui?.dialog?.message]);
-
-    const handleConfirm = async () => {
-        if (!actions.accept.onClick) {
-            /**
-             * Should not happen as users should define "accept.onClick" function, but just in case lets show the information.
-             * Possible to happen in development process.
-             */
-            console.info("There is no actions.accept.onClick callback defined.");
-            hideDialog();
-            return;
-        }
-        setIsLoading(true);
-        await actions.accept.onClick();
-        setIsLoading(false);
-        hideDialog();
-    };
-
-    return (
-        <Dialog open={!!message} onClose={hideDialog} data-testid={dataTestId} style={style}>
-            {isLoading ? loading : null}
-            {title && <DialogTitle>{title}</DialogTitle>}
-            <DialogContent>{message}</DialogContent>
-            <DialogActions>
-                {actions.cancel && (
-                    <DialogAccept onClick={actions.cancel.onClick}>
-                        {actions.cancel.label}
-                    </DialogAccept>
-                )}
-                {actions.accept && (
-                    <ButtonPrimary
-                        data-testid={"confirmationdialog-confirm-action"}
-                        onClick={handleConfirm}
-                    >
-                        {actions.accept.label}
-                    </ButtonPrimary>
-                )}
-            </DialogActions>
-        </Dialog>
-    );
-};
diff --git a/packages/app-admin-rmwc/src/modules/Overlays/OmniSearch.tsx b/packages/app-admin-rmwc/src/modules/Overlays/OmniSearch.tsx
deleted file mode 100644
index 0ba36c0cd6b..00000000000
--- a/packages/app-admin-rmwc/src/modules/Overlays/OmniSearch.tsx
+++ /dev/null
@@ -1,307 +0,0 @@
-import React, { useCallback, useMemo, useState } from "react";
-import { useNavigation } from "@webiny/app-admin";
-import { useNavigate } from "@webiny/react-router";
-import { useSnackbar } from "@webiny/app-admin";
-import { getTenantId } from "@webiny/app/utils";
-import { ReactComponent as SearchIcon } from "@material-design-icons/svg/outlined/search.svg";
-/**
- * Library does not have types.
- */
-// @ts-expect-error
-import { useHotkeys } from "react-hotkeyz";
-import { Input } from "@webiny/ui/Input";
-import { Typography } from "@webiny/ui/Typography";
-
-import { Dialog } from "./OmniSearch/Dialog";
-
-interface Item {
-    id: string;
-    title: string;
-    description: string;
-    link?: string;
-    callback?: () => void | Promise<void>;
-    render?: () => React.ReactElement;
-}
-
-interface ItemsSection {
-    id: string;
-    title: string;
-    items: Item[];
-}
-
-interface IndexedItem extends Item {
-    index: number;
-}
-
-interface IndexedItemsSection extends Omit<ItemsSection, "items"> {
-    id: string;
-    title: string;
-    items: IndexedItem[];
-}
-
-const getIndexedItemsList = (items: ItemsSection[]): IndexedItemsSection[] => {
-    let lastUsedItemIndex = 0;
-    return items.map(itemsSection => {
-        return {
-            ...itemsSection,
-            items: itemsSection.items.map(item => {
-                const index = lastUsedItemIndex++;
-                return {
-                    ...item,
-                    index
-                };
-            })
-        };
-    });
-};
-
-const getItemFromIndexedItemsList = (
-    itemsSections: IndexedItemsSection[],
-    index: number
-): IndexedItem | null => {
-    if (index < 0) {
-        return null;
-    }
-
-    for (let i = 0; i < itemsSections.length; i++) {
-        const itemsSection = itemsSections[i];
-        for (let j = 0; j < itemsSection.items.length; j++) {
-            const item = itemsSection.items[j];
-            if (item.index === index) {
-                return item;
-            }
-        }
-    }
-
-    return null;
-};
-
-export const OmniSearch = () => {
-    const [omniSearchVisible, setShowOmniSearch] = useState(false);
-    const [itemRender, setItemRender] = useState<() => React.ReactElement>();
-    const [filter, setFilter] = useState("");
-    const [focusedItemIndex, focusItemAtIndex] = useState(0);
-    const { menuItems } = useNavigation();
-    const { showSnackbar } = useSnackbar();
-    const navigate = useNavigate();
-    const showOmniSearch = useCallback(() => {
-        setShowOmniSearch(true);
-    }, []);
-
-    const hideOmniSearch = useCallback(() => {
-        setShowOmniSearch(false);
-        setItemRender(undefined);
-        setFilter("");
-    }, []);
-
-    const onFilter = useCallback((searchString: string) => {
-        setFilter(searchString);
-        focusItemAtIndex(0);
-    }, []);
-
-    const selectItem = useCallback((item: Item) => {
-        if (item.link) {
-            navigate(item.link);
-            hideOmniSearch();
-            return;
-        }
-
-        if (item.callback) {
-            item.callback();
-            hideOmniSearch();
-            return;
-        }
-
-        if (item.render) {
-            setFilter("");
-            setItemRender(() => item.render);
-        }
-    }, []);
-
-    // TODO: should be pulled from registered plugins.
-    const fullItemsList = useMemo<ItemsSection[]>(() => {
-        return [
-            {
-                id: "apps",
-                title: "Apps",
-                items: [
-                    ...menuItems
-                        .map(level1Item => {
-                            return [
-                                ...level1Item.children.map(level2Item => {
-                                    return [
-                                        ...level2Item.children.map(child => {
-                                            const description = [
-                                                level1Item.label,
-                                                level2Item.label
-                                            ].join(" / ");
-
-                                            return {
-                                                id: description + child.label,
-                                                title: child.label!,
-                                                description,
-                                                link: child.path
-                                            };
-                                        })
-                                    ];
-                                })
-                            ].flat();
-                        })
-                        .flat()
-                ]
-            },
-            {
-                id: "other",
-                title: "Other",
-                items: [
-                    {
-                        id: "back",
-                        title: "← Back",
-                        description: "Navigates to the previous page.",
-                        callback: () => {
-                            navigate(-1);
-                        }
-                    }
-                ]
-            },
-            getTenantId() && {
-                id: "development",
-                title: "Development",
-                items: [
-                    {
-                        id: "copy-tenant-id",
-                        title: "Copy current tenant ID",
-                        description: "Copies current tenant ID into clipboard.",
-                        callback: () => {
-                            navigator.clipboard.writeText(getTenantId()!);
-                            showSnackbar("Tenant ID copied to clipboard.");
-                        }
-                    }
-                ]
-            }
-        ].filter(Boolean) as ItemsSection[];
-    }, [menuItems]);
-
-    const filteredIndexedItemsList = useMemo(() => {
-        if (!filter) {
-            return getIndexedItemsList(fullItemsList);
-        }
-
-        const filteredItems1stPass = fullItemsList.map(itemsSection => {
-            return {
-                ...itemsSection,
-                items: itemsSection.items.filter(item => {
-                    return item.title?.toLowerCase().includes(filter.toLowerCase());
-                })
-            };
-        });
-
-        const filteredItems2ndPass = filteredItems1stPass.filter(
-            itemsSection => itemsSection.items.length > 0
-        );
-
-        return getIndexedItemsList(filteredItems2ndPass);
-    }, [fullItemsList, filter]);
-
-    const selectFocusedItem = useCallback(() => {
-        const focusedItem = getItemFromIndexedItemsList(filteredIndexedItemsList, focusedItemIndex);
-        if (focusedItem) {
-            selectItem(focusedItem);
-        }
-    }, [filteredIndexedItemsList, focusedItemIndex]);
-
-    const focusNextItem = useCallback(() => {
-        const nextIndex = focusedItemIndex + 1;
-        const itemToFocus = getItemFromIndexedItemsList(filteredIndexedItemsList, nextIndex);
-        if (itemToFocus) {
-            focusItemAtIndex(itemToFocus.index);
-        }
-    }, [filteredIndexedItemsList, focusedItemIndex]);
-
-    const focusPrevItem = useCallback(() => {
-        const prevIndex = focusedItemIndex - 1;
-        const itemToFocus = getItemFromIndexedItemsList(filteredIndexedItemsList, prevIndex);
-        if (itemToFocus) {
-            focusItemAtIndex(itemToFocus.index);
-        }
-    }, [filteredIndexedItemsList, focusedItemIndex]);
-
-    useHotkeys({
-        zIndex: 1000,
-        keys: {
-            "mod+k": showOmniSearch,
-            esc: hideOmniSearch
-        }
-    });
-
-    useHotkeys({
-        zIndex: 1000,
-        keys: {
-            enter: selectFocusedItem,
-            arrowUp: focusPrevItem,
-            arrowDown: focusNextItem
-        },
-        disabled: !omniSearchVisible
-    });
-
-    if (!omniSearchVisible) {
-        return null;
-    }
-
-    let renderedResults = <>Nothing to show.</>;
-    if (itemRender) {
-        renderedResults = itemRender();
-    } else if (filteredIndexedItemsList.length > 0) {
-        renderedResults = (
-            <ul>
-                {filteredIndexedItemsList.map(itemsSection => (
-                    <li key={itemsSection.id}>
-                        <div className={"section-title"}>
-                            <Typography use={"overline"}>{itemsSection.title}</Typography>
-                        </div>
-                        <div className={"section-items"}>
-                            <ul>
-                                {itemsSection.items.map(item => {
-                                    const isFocused = item.index === focusedItemIndex;
-                                    return (
-                                        <li
-                                            className={isFocused ? "focused" : ""}
-                                            key={item.id}
-                                            onClick={() => selectFocusedItem()}
-                                            onMouseEnter={() => focusItemAtIndex(item.index)}
-                                        >
-                                            <div className={"section-item-title"}>{item.title}</div>
-                                            <Typography
-                                                use={"caption"}
-                                                className={"section-item-description"}
-                                            >
-                                                {item.description}
-                                            </Typography>
-                                        </li>
-                                    );
-                                })}
-                            </ul>
-                        </div>
-                    </li>
-                ))}
-            </ul>
-        );
-    }
-
-    return (
-        <Dialog>
-            <div className={"dialog"}>
-                <div className={"search-input"}>
-                    <Input
-                        icon={<SearchIcon />}
-                        placeholder={"Search..."}
-                        autoFocus
-                        value={filter}
-                        onChange={onFilter}
-                    />
-                </div>
-                {renderedResults}
-            </div>
-        </Dialog>
-    );
-};
diff --git a/packages/app-admin-rmwc/src/modules/Overlays/OmniSearch/Dialog.tsx b/packages/app-admin-rmwc/src/modules/Overlays/OmniSearch/Dialog.tsx
deleted file mode 100644
index aa6ae9deb89..00000000000
--- a/packages/app-admin-rmwc/src/modules/Overlays/OmniSearch/Dialog.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import styled from "@emotion/styled";
-
-export const Dialog = styled.div`
-    background-color: rgba(0, 0, 0, 0.32);
-    height: 100%;
-    width: 100%;
-    position: fixed;
-    z-index: 2312321;
-    top: 0;
-
-    .dialog {
-        position: fixed;
-        top: 350px;
-        left: 50%;
-        /* bring your own prefixes */
-        transform: translate(-50%, -50%);
-        background-color: white;
-        width: 700px;
-        height: 500px;
-        z-index: auto;
-        box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14),
-            0px 9px 46px 8px rgba(0, 0, 0, 0.12);
-
-        > ul {
-            overflow-y: scroll;
-            height: 444px;
-            margin-bottom: 10px;
-
-            > li {
-                .section-title {
-                    bottom-bottom: 1px solid var(--mdc-theme-on-background);
-                    padding: 10px 15px 5px 15px;
-                }
-
-                ul {
-                    li {
-                        padding: 10px 15px;
-                        cursor: pointer;
-
-                        &.focused {
-                            background-color: var(--mdc-theme-background);
-                        }
-
-                        .section-item-title {
-                            margin-bottom: 3px;
-                            color: var(--mdc-theme-primary);
-                        }
-
-                        .section-item-description {
-                            color: var(--mdc-theme-text-primary-on-background);
-                        }
-                    }
-                }
-            }
-        }
-    }
-`;
diff --git a/packages/app-admin-rmwc/src/modules/Overlays/Snackbar.tsx b/packages/app-admin-rmwc/src/modules/Overlays/Snackbar.tsx
deleted file mode 100644
index 287680bf2da..00000000000
--- a/packages/app-admin-rmwc/src/modules/Overlays/Snackbar.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import React, { useCallback } from "react";
-import { Snackbar } from "@webiny/ui/Snackbar";
-import get from "lodash/get";
-import { useUi } from "@webiny/app/hooks/useUi";
-
-const SnackbarMain = () => {
-    const ui = useUi();
-    const message: React.ReactNode = get(ui, "snackbar.message");
-    const options: Record<string, any> = get(ui, "snackbar.options", {});
-
-    const hideSnackbar = useCallback((): void => {
-        ui.setState(ui => ({ ...ui, snackbar: null }));
-    }, [ui]);
-
-    return <Snackbar open={!!message} onClose={hideSnackbar} message={message} {...options} />;
-};
-
-export default SnackbarMain;
diff --git a/packages/app-admin-rmwc/src/modules/Overlays/index.tsx b/packages/app-admin-rmwc/src/modules/Overlays/index.tsx
deleted file mode 100644
index fe353012248..00000000000
--- a/packages/app-admin-rmwc/src/modules/Overlays/index.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import React from "react";
-import { Provider } from "@webiny/app-admin";
-import Snackbar from "./Snackbar";
-import { DialogContainer } from "./Dialog";
-import { Portal } from "@rmwc/base";
-import { featureFlags } from "@webiny/feature-flags";
-import { OmniSearch } from "./OmniSearch";
-
-interface OverlaysProps {
-    children?: React.ReactNode;
-}
-
-/**
- * Dialogs, Menus and Snackbars require a container to be rendered, and we want to place it outside of
- * any other views that are constructed by developers. We need these 2 containers to always be
- * present, even if there is no <Layout> mounted.
- */
-const OverlaysHOC = (Component: React.ComponentType<OverlaysProps>) => {
-    return function Overlays({ children }: OverlaysProps) {
-        return (
-            <Component>
-                {children}
-                <div style={{ zIndex: 1000, position: "absolute" }}>
-                    <Snackbar />
-                </div>
-                <Portal />
-                <DialogContainer />
-                {featureFlags.experimentalAdminOmniSearch && <OmniSearch />}
-            </Component>
-        );
-    };
-};
-
-export const Overlays = () => {
-    return <Provider hoc={OverlaysHOC} />;
-};
diff --git a/packages/app-admin-rmwc/src/modules/Search/index.tsx b/packages/app-admin-rmwc/src/modules/Search/index.tsx
deleted file mode 100644
index b37d231d814..00000000000
--- a/packages/app-admin-rmwc/src/modules/Search/index.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from "react";
-import { Compose, SearchRenderer as SearchSpec } from "@webiny/app-admin";
-
-// For the time being, import the existing component.
-// TODO: implement a new SearchBar component
-import SearchBar from "@webiny/app-admin/plugins/globalSearch/SearchBar";
-
-const SearchRenderer = () => {
-    return function Search() {
-        return <SearchBar />;
-    };
-};
-
-export const Search = () => {
-    return <Compose component={SearchSpec} with={SearchRenderer} />;
-};
diff --git a/packages/app-admin-rmwc/src/modules/UserMenu/account.svg b/packages/app-admin-rmwc/src/modules/UserMenu/account.svg
deleted file mode 100644
index 921e655895f..00000000000
--- a/packages/app-admin-rmwc/src/modules/UserMenu/account.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z"/></svg>
diff --git a/packages/app-admin-rmwc/src/modules/UserMenu/index.tsx b/packages/app-admin-rmwc/src/modules/UserMenu/index.tsx
deleted file mode 100644
index 0ed6279ffa1..00000000000
--- a/packages/app-admin-rmwc/src/modules/UserMenu/index.tsx
+++ /dev/null
@@ -1,120 +0,0 @@
-import React, { Fragment } from "react";
-import { css } from "emotion";
-import {
-    Compose,
-    UserMenuHandle,
-    UserMenuHandleRenderer as UserMenuHandleRendererSpec,
-    UserMenuRenderer as UserMenuRendererSpec,
-    UserMenuItems,
-    UserMenuItemRenderer as UserMenuItemRendererSpec,
-    useUserMenuItem,
-    useUserMenu
-} from "@webiny/app-admin";
-import { Menu } from "@webiny/ui/Menu";
-import { List, ListItem, ListItemGraphic } from "@webiny/ui/List";
-import { Icon } from "@webiny/ui/Icon";
-import { Link } from "@webiny/react-router";
-import { useSecurity } from "@webiny/app-security";
-import { Avatar } from "@webiny/ui/Avatar";
-import { Image } from "@webiny/app/components";
-import { TopAppBarActionItem } from "@webiny/ui/TopAppBar";
-
-const UserMenuRendererImpl = () => {
-    return function UserMenu() {
-        const security = useSecurity();
-        const { menuItems } = useUserMenu();
-
-        if (!security || !security.identity) {
-            return null;
-        }
-
-        return (
-            <Menu anchor={"topEnd"} handle={<TopAppBarActionItem icon={<UserMenuHandle />} />}>
-                <List data-testid="logged-in-user-menu-list">
-                    <UserMenuItems menuItems={menuItems} />
-                </List>
-            </Menu>
-        );
-    };
-};
-
-const UserMenuHandleRendererImpl = () => {
-    return function UserMenuHandle() {
-        const { identity } = useSecurity();
-
-        if (!identity) {
-            return null;
-        }
-
-        const profile = identity.profile;
-
-        if (!profile) {
-            return (
-                <Avatar
-                    data-testid="logged-in-user-menu-avatar"
-                    src={undefined}
-                    alt={identity.displayName}
-                    fallbackText={identity.displayName}
-                    renderImage={props => <Image {...props} transform={{ width: 100 }} />}
-                />
-            );
-        }
-
-        const { firstName, lastName, avatar, gravatar } = profile;
-        const fullName = `${firstName} ${lastName}`;
-
-        return (
-            <Avatar
-                data-testid="logged-in-user-menu-avatar"
-                src={avatar ? avatar.src : gravatar}
-                alt={fullName}
-                fallbackText={fullName}
-                renderImage={props => <Image {...props} transform={{ width: 100 }} />}
-            />
-        );
-    };
-};
-
-const linkStyles = css({
-    "&:hover": {
-        textDecoration: "none"
-    }
-});
-
-const UserMenuItemRendererImpl = () => {
-    return function UserMenuItemRenderer() {
-        const { label, path, icon, onClick, element } = useUserMenuItem();
-
-        if (element) {
-            return element;
-        }
-
-        if (path) {
-            return (
-                <Link to={path} className={linkStyles}>
-                    <ListItem>
-                        <ListItemGraphic>{icon ? <Icon icon={icon} /> : null}</ListItemGraphic>
-                        {label}
-                    </ListItem>
-                </Link>
-            );
-        }
-
-        return (
-            <ListItem onClick={onClick}>
-                <ListItemGraphic>{icon ? <Icon icon={icon} /> : null}</ListItemGraphic>
-                {label}
-            </ListItem>
-        );
-    };
-};
-
-export const UserMenu = () => {
-    return (
-        <Fragment>
-            <Compose component={UserMenuHandleRendererSpec} with={UserMenuHandleRendererImpl} />
-            <Compose component={UserMenuRendererSpec} with={UserMenuRendererImpl} />
-            <Compose component={UserMenuItemRendererSpec} with={UserMenuItemRendererImpl} />
-        </Fragment>
-    );
-};
diff --git a/packages/app-admin-rmwc/tsconfig.build.json b/packages/app-admin-rmwc/tsconfig.build.json
deleted file mode 100644
index a6ea6f39230..00000000000
--- a/packages/app-admin-rmwc/tsconfig.build.json
+++ /dev/null
@@ -1,21 +0,0 @@
-{
-  "extends": "../../tsconfig.build.json",
-  "include": ["src"],
-  "references": [
-    { "path": "../app/tsconfig.build.json" },
-    { "path": "../app-admin/tsconfig.build.json" },
-    { "path": "../app-plugin-admin-welcome-screen/tsconfig.build.json" },
-    { "path": "../app-security/tsconfig.build.json" },
-    { "path": "../feature-flags/tsconfig.build.json" },
-    { "path": "../plugins/tsconfig.build.json" },
-    { "path": "../react-router/tsconfig.build.json" },
-    { "path": "../ui/tsconfig.build.json" }
-  ],
-  "compilerOptions": {
-    "rootDir": "./src",
-    "outDir": "./dist",
-    "declarationDir": "./dist",
-    "paths": { "~/*": ["./src/*"], "~tests/*": ["./__tests__/*"] },
-    "baseUrl": "."
-  }
-}
diff --git a/packages/app-admin-rmwc/tsconfig.json b/packages/app-admin-rmwc/tsconfig.json
deleted file mode 100644
index 6c47b387dcd..00000000000
--- a/packages/app-admin-rmwc/tsconfig.json
+++ /dev/null
@@ -1,40 +0,0 @@
-{
-  "extends": "../../tsconfig.json",
-  "include": ["src", "__tests__"],
-  "references": [
-    { "path": "../app" },
-    { "path": "../app-admin" },
-    { "path": "../app-plugin-admin-welcome-screen" },
-    { "path": "../app-security" },
-    { "path": "../feature-flags" },
-    { "path": "../plugins" },
-    { "path": "../react-router" },
-    { "path": "../ui" }
-  ],
-  "compilerOptions": {
-    "rootDirs": ["./src", "./__tests__"],
-    "outDir": "./dist",
-    "declarationDir": "./dist",
-    "paths": {
-      "~/*": ["./src/*"],
-      "~tests/*": ["./__tests__/*"],
-      "@webiny/app/*": ["../app/src/*"],
-      "@webiny/app": ["../app/src"],
-      "@webiny/app-admin/*": ["../app-admin/src/*"],
-      "@webiny/app-admin": ["../app-admin/src"],
-      "@webiny/app-plugin-admin-welcome-screen/*": ["../app-plugin-admin-welcome-screen/src/*"],
-      "@webiny/app-plugin-admin-welcome-screen": ["../app-plugin-admin-welcome-screen/src"],
-      "@webiny/app-security/*": ["../app-security/src/*"],
-      "@webiny/app-security": ["../app-security/src"],
-      "@webiny/feature-flags/*": ["../feature-flags/src/*"],
-      "@webiny/feature-flags": ["../feature-flags/src"],
-      "@webiny/plugins/*": ["../plugins/src/*"],
-      "@webiny/plugins": ["../plugins/src"],
-      "@webiny/react-router/*": ["../react-router/src/*"],
-      "@webiny/react-router": ["../react-router/src"],
-      "@webiny/ui/*": ["../ui/src/*"],
-      "@webiny/ui": ["../ui/src"]
-    },
-    "baseUrl": "."
-  }
-}
diff --git a/packages/app-admin-ui/.babelrc.js b/packages/app-admin-ui/.babelrc.js
new file mode 100644
index 00000000000..bec58b263bd
--- /dev/null
+++ b/packages/app-admin-ui/.babelrc.js
@@ -0,0 +1 @@
+module.exports = require("@webiny/project-utils").createBabelConfigForReact({ path: __dirname });
diff --git a/packages/app-admin-ui/LICENSE b/packages/app-admin-ui/LICENSE
new file mode 100644
index 00000000000..f772d04d4db
--- /dev/null
+++ b/packages/app-admin-ui/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) Webiny
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/packages/app-admin-ui/README.md b/packages/app-admin-ui/README.md
new file mode 100644
index 00000000000..be00f800157
--- /dev/null
+++ b/packages/app-admin-ui/README.md
@@ -0,0 +1,7 @@
+# @webiny/app-admin-ui
+[![](https://img.shields.io/npm/dw/@webiny/app-admin-ui.svg)](https://www.npmjs.com/package/@webiny/app-admin-ui) 
+[![](https://img.shields.io/npm/v/@webiny/app-admin-ui.svg)](https://www.npmjs.com/package/@webiny/app-admin-ui)
+[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
+[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
+
+An implementation of core UI components for @webiny/app-serverless-cms using UI UI library. 
diff --git a/packages/app-admin-ui/package.json b/packages/app-admin-ui/package.json
new file mode 100644
index 00000000000..127a2fa1788
--- /dev/null
+++ b/packages/app-admin-ui/package.json
@@ -0,0 +1,46 @@
+{
+  "name": "@webiny/app-admin-ui",
+  "version": "0.0.0",
+  "main": "index.js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/webiny/webiny-js.git"
+  },
+  "author": "Webiny Ltd.",
+  "license": "MIT",
+  "dependencies": {
+    "@types/react": "18.2.79",
+    "@webiny/admin-ui": "0.0.0",
+    "@webiny/app": "0.0.0",
+    "@webiny/app-admin": "0.0.0",
+    "@webiny/app-plugin-admin-welcome-screen": "0.0.0",
+    "@webiny/app-security": "0.0.0",
+    "@webiny/icons": "0.0.0",
+    "@webiny/plugins": "0.0.0",
+    "@webiny/react-router": "0.0.0",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-helmet": "^6.1.0"
+  },
+  "devDependencies": {
+    "@emotion/babel-plugin": "^11.11.0",
+    "@types/react-helmet": "^6.1.11",
+    "@webiny/project-utils": "0.0.0",
+    "babel-plugin-named-asset-import": "^1.0.0-next.3e165448",
+    "rimraf": "^6.0.1",
+    "typescript": "5.3.3"
+  },
+  "publishConfig": {
+    "access": "public",
+    "directory": "dist"
+  },
+  "scripts": {
+    "build": "node ../cli/bin.js run build",
+    "watch": "node ../cli/bin.js run watch"
+  },
+  "svgo": {
+    "plugins": {
+      "removeViewBox": false
+    }
+  }
+}
diff --git a/packages/app-admin-ui/src/Dashboard.tsx b/packages/app-admin-ui/src/Dashboard.tsx
new file mode 100644
index 00000000000..0ba1c99be1f
--- /dev/null
+++ b/packages/app-admin-ui/src/Dashboard.tsx
@@ -0,0 +1,13 @@
+import * as React from "react";
+import { CenteredView, DashboardRenderer } from "@webiny/app-admin";
+import Welcome from "./Dashboard/Welcome";
+
+export const Dashboard = DashboardRenderer.createDecorator(() => {
+    return function DashboardRenderer() {
+        return (
+            <CenteredView>
+                <Welcome />
+            </CenteredView>
+        );
+    };
+});
diff --git a/packages/app-admin-ui/src/Dashboard/Welcome.tsx b/packages/app-admin-ui/src/Dashboard/Welcome.tsx
new file mode 100644
index 00000000000..a6b4ea16d15
--- /dev/null
+++ b/packages/app-admin-ui/src/Dashboard/Welcome.tsx
@@ -0,0 +1,65 @@
+import React from "react";
+import { Grid, Heading } from "@webiny/admin-ui";
+import { useSecurity } from "@webiny/app-security/hooks/useSecurity";
+import { plugins } from "@webiny/plugins";
+import { AdminWelcomeScreenWidgetPlugin } from "@webiny/app-plugin-admin-welcome-screen/types";
+import {
+    ApplicationWidget,
+    AssistanceWidget,
+    CommunityWidget,
+    MissingPermissionsWidget
+} from "./components";
+
+const Welcome = () => {
+    const { identity, getPermission } = useSecurity();
+
+    if (!identity) {
+        return null;
+    }
+
+    const widgets = plugins
+        .byType<AdminWelcomeScreenWidgetPlugin>("admin-welcome-screen-widget")
+        .filter(pl => {
+            if (pl.permission) {
+                return getPermission(pl.permission);
+            }
+            return true;
+        });
+
+    const canSeeAnyWidget = widgets.length > 0;
+
+    return (
+        <div className={"wby-my-xxl"}>
+            <div className={"wby-mb-3xl"}>
+                <Heading
+                    level={3}
+                >{`Hi ${identity.displayName}, what are we doing today?`}</Heading>
+            </div>
+            <Grid gap={"spacious"}>
+                <Grid.Column span={5}>
+                    {!canSeeAnyWidget && <MissingPermissionsWidget />}
+                    <div className={"wby-flex wby-flex-col wby-gap-lg"}>
+                        {widgets.map(pl => (
+                            <ApplicationWidget
+                                key={pl.name}
+                                cta={pl.widget.cta}
+                                description={pl.widget.description}
+                                icon={pl.widget.icon}
+                                name={pl.name}
+                                title={pl.widget.title}
+                            />
+                        ))}
+                    </div>
+                </Grid.Column>
+                <Grid.Column span={7}>
+                    <div className={"wby-flex wby-flex-col wby-gap-lg"}>
+                        <AssistanceWidget />
+                        <CommunityWidget />
+                    </div>
+                </Grid.Column>
+            </Grid>
+        </div>
+    );
+};
+
+export default Welcome;
diff --git a/packages/app-admin-ui/src/Dashboard/components/ApplicationWidget.tsx b/packages/app-admin-ui/src/Dashboard/components/ApplicationWidget.tsx
new file mode 100644
index 00000000000..aef9083d9dd
--- /dev/null
+++ b/packages/app-admin-ui/src/Dashboard/components/ApplicationWidget.tsx
@@ -0,0 +1,32 @@
+import React from "react";
+import { Grid, Heading, Icon, Text } from "@webiny/admin-ui";
+import { ReactComponent as WidgetIcon } from "@webiny/icons/table_chart.svg";
+
+export interface ApplicationWidgetProps {
+    name: string;
+    title: string;
+    description: string;
+    cta: React.ReactNode;
+    icon?: React.ReactElement;
+}
+
+export const ApplicationWidget = ({
+    name,
+    title,
+    description,
+    cta,
+    icon = <WidgetIcon />
+}: ApplicationWidgetProps) => {
+    return (
+        <Grid.Column span={4} key={name}>
+            <div className={"wby-p-lg wby-bg-primary-subtle wby-rounded-xl"} data-testid={name}>
+                <div className={"wby-flex wby-items-center wby-gap-sm wby-mb-sm"}>
+                    <Icon icon={icon} label={title} size={"lg"} color={"accent"} />
+                    <Heading level={4}>{title}</Heading>
+                </div>
+                <Text>{description}</Text>
+                <div className={"wby-mt-lg"}>{cta}</div>
+            </div>
+        </Grid.Column>
+    );
+};
diff --git a/packages/app-admin-ui/src/Dashboard/components/AssistanceWidget.tsx b/packages/app-admin-ui/src/Dashboard/components/AssistanceWidget.tsx
new file mode 100644
index 00000000000..786cb856078
--- /dev/null
+++ b/packages/app-admin-ui/src/Dashboard/components/AssistanceWidget.tsx
@@ -0,0 +1,75 @@
+import React from "react";
+import { Heading, Icon, Link as AdminLink, Text } from "@webiny/admin-ui";
+import { ReactComponent as HelpIcon } from "@webiny/icons/help_outline.svg";
+import { Link } from "@webiny/react-router";
+
+export const AssistanceWidget = () => {
+    return (
+        <div className={"wby-bg-neutral-light wby-rounded-xl wby-p-lg"}>
+            <div className={"wby-flex wby-items-center wby-gap-sm wby-mb-md"}>
+                <Icon
+                    icon={<HelpIcon />}
+                    label={"Need some assistance?"}
+                    size={"md"}
+                    color={"accent"}
+                />
+                <Heading level={6}>{"Need some assistance?"}</Heading>
+            </div>
+            <div
+                className={"wby-bg-neutral-base wby-rounded-sm wby-px-md wby-py-sm-extra wby-mb-md"}
+            >
+                <Link
+                    to="https://www.webiny.com/docs"
+                    target={"_blank"}
+                    rel={"noopener noreferrer"}
+                    className={"!wby-no-underline"}
+                >
+                    <Text as={"div"} className={"wby-font-semibold !wby-text-neutral-primary"}>
+                        {"Documentation"}
+                    </Text>
+                    <Text size={"sm"} className={"!wby-text-neutral-strong"}>
+                        {"Explore the Webiny documentation and check out code examples and guides."}
+                    </Text>
+                </Link>
+            </div>
+
+            <div className={"wby-bg-neutral-base wby-rounded-sm wby-px-md wby-py-sm-extra"}>
+                <Text as={"div"} className={"wby-font-semibold"}>
+                    {"Contact us"}
+                </Text>
+                <Text size={"sm"} className={"wby-text-neutral-strong"}>
+                    <AdminLink
+                        to={"https://www.webiny.com/forms/product-demo"}
+                        target={"_blank"}
+                        rel={"noopener noreferrer"}
+                        variant={"secondary"}
+                        underline
+                    >
+                        Contact Sales
+                    </AdminLink>
+                    ,{" "}
+                    <AdminLink
+                        to={"https://www.webiny.com/partners"}
+                        target={"_blank"}
+                        rel={"noopener noreferrer"}
+                        variant={"secondary"}
+                        underline
+                    >
+                        Explore Partnerships
+                    </AdminLink>{" "}
+                    or{" "}
+                    <AdminLink
+                        to={"https://www.webiny.com/slack"}
+                        target={"_blank"}
+                        rel={"noopener noreferrer"}
+                        variant={"secondary"}
+                        underline
+                    >
+                        Slack us
+                    </AdminLink>
+                    .
+                </Text>
+            </div>
+        </div>
+    );
+};
diff --git a/packages/app-admin-ui/src/Dashboard/components/CommunityWidget.tsx b/packages/app-admin-ui/src/Dashboard/components/CommunityWidget.tsx
new file mode 100644
index 00000000000..644e7a2a553
--- /dev/null
+++ b/packages/app-admin-ui/src/Dashboard/components/CommunityWidget.tsx
@@ -0,0 +1,79 @@
+import React from "react";
+import { Heading, Icon, Text } from "@webiny/admin-ui";
+import { Link } from "@webiny/react-router";
+// Icons
+import { ReactComponent as YouTubeIcon } from "./assets/youtube.svg";
+import { ReactComponent as GithubIcon } from "./assets/github.svg";
+import { ReactComponent as SlackIcon } from "./assets/slack.svg";
+import { ReactComponent as TwitterIcon } from "./assets/x-twitter.svg";
+
+interface SocialLinkProps {
+    link: string;
+    label: string;
+    icon: React.ReactElement;
+}
+
+const SocialLink = ({ link, label, icon }: SocialLinkProps) => {
+    return (
+        <div
+            className={
+                "wby-w-[64px] wby-bg-neutral-base wby-rounded-md hover:wby-opacity-80 wby-transition-opacity"
+            }
+        >
+            <Link
+                to={link}
+                className={"!wby-no-underline"}
+                target={"_blank"}
+                rel={"noopener noreferrer"}
+            >
+                <div className={"wby-px-xs wby-pt-sm-extra wby-pb-sm wby-text-center"}>
+                    <Icon
+                        label={`${label} icon`}
+                        icon={icon}
+                        size={"lg"}
+                        color={"inherit"}
+                        className={"wby-mx-auto wby-mb-sm"}
+                    />
+                    <Text size={"sm"} className={"wby-text-neutral-strong"}>
+                        {label}
+                    </Text>
+                </div>
+            </Link>
+        </div>
+    );
+};
+
+export const CommunityWidget = () => {
+    return (
+        <div className={"wby-bg-neutral-light wby-rounded-xl wby-p-lg"}>
+            <div className={"wby-mb-md"}>
+                <Heading level={6}>{"Join our community:"}</Heading>
+                <Text size={"sm"} className={"wby-text-neutral-strong"}>
+                    {"Get to know Webiny team members, discuss new ideas and get help:"}
+                </Text>
+            </div>
+            <div className={"wby-flex wby-justify-start wby-items-stretch wby-gap-md"}>
+                <SocialLink
+                    link={"https://github.com/webiny/webiny-js"}
+                    label={"GitHub"}
+                    icon={<GithubIcon />}
+                />
+                <SocialLink
+                    link={"https://www.webiny.com/slack"}
+                    label={"Slack"}
+                    icon={<SlackIcon />}
+                />
+                <SocialLink
+                    link={"https://youtube.com/webiny"}
+                    label={"YouTube"}
+                    icon={<YouTubeIcon />}
+                />
+                <SocialLink
+                    link={"https://x.com/WebinyCMS"}
+                    label={"X.com"}
+                    icon={<TwitterIcon />}
+                />
+            </div>
+        </div>
+    );
+};
diff --git a/packages/app-admin-ui/src/Dashboard/components/MissingPermissionsWidget.tsx b/packages/app-admin-ui/src/Dashboard/components/MissingPermissionsWidget.tsx
new file mode 100644
index 00000000000..3f16dd529e0
--- /dev/null
+++ b/packages/app-admin-ui/src/Dashboard/components/MissingPermissionsWidget.tsx
@@ -0,0 +1,24 @@
+import React from "react";
+import { ReactComponent as VisibilityOff } from "@webiny/icons/visibility_off.svg";
+import { Heading, Icon, Text } from "@webiny/admin-ui";
+
+export const MissingPermissionsWidget = () => {
+    return (
+        <div className="wby-w-full wby-h-full wby-flex wby-flex-col wby-items-center wby-justify-center wby-text-center wby-bg-neutral-light wby-rounded-xl wby-px-xxl wby-py-lg wby-gap-sm">
+            <div>
+                <Icon
+                    icon={<VisibilityOff />}
+                    label={"Access permission required"}
+                    color={"accent"}
+                    size={"lg"}
+                />
+            </div>
+            <Heading level={4}>{"Access permission required"}</Heading>
+            <Text>
+                {
+                    "It seems you do not have access to Webiny apps. Please contact the administrator to set up your Webiny account."
+                }
+            </Text>
+        </div>
+    );
+};
diff --git a/packages/app-admin-rmwc/src/modules/Dashboard/icons/github.svg b/packages/app-admin-ui/src/Dashboard/components/assets/github.svg
similarity index 100%
rename from packages/app-admin-rmwc/src/modules/Dashboard/icons/github.svg
rename to packages/app-admin-ui/src/Dashboard/components/assets/github.svg
diff --git a/packages/app-admin-ui/src/Dashboard/components/assets/slack.svg b/packages/app-admin-ui/src/Dashboard/components/assets/slack.svg
new file mode 100644
index 00000000000..7accd471c64
--- /dev/null
+++ b/packages/app-admin-ui/src/Dashboard/components/assets/slack.svg
@@ -0,0 +1,8 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Vector">
+<path d="M17.8752 9.24984C18.9106 9.24984 19.75 8.41045 19.75 7.375C19.75 6.33956 18.9105 5.50016 17.8751 5.50016C16.8395 5.50016 16 6.33963 16 7.37516V9.24984H17.8752ZM12.625 9.24984C13.6605 9.24984 14.5 8.41037 14.5 7.37484V2.12516C14.5 1.08963 13.6605 0.250159 12.625 0.250159C11.5895 0.250159 10.75 1.08963 10.75 2.12516V7.37484C10.75 8.41037 11.5895 9.24984 12.625 9.24984Z" fill="#2EB67D"/>
+<path d="M2.12484 10.7502C1.08939 10.7502 0.25 11.5896 0.25 12.625C0.25 13.6604 1.08947 14.4998 2.12492 14.4998C3.16045 14.4998 4 13.6604 4 12.6248V10.7502H2.12484ZM7.375 10.7502C6.33947 10.7502 5.5 11.5896 5.5 12.6252V17.8748C5.5 18.9104 6.33947 19.7498 7.375 19.7498C8.41053 19.7498 9.25 18.9104 9.25 17.8748V12.6252C9.25 11.5896 8.41053 10.7502 7.375 10.7502Z" fill="#E01E5A"/>
+<path d="M10.7501 17.8752C10.7501 18.9106 11.5895 19.75 12.625 19.75C13.6604 19.75 14.4998 18.9105 14.4998 17.8751C14.4998 16.8395 13.6603 16 12.6248 16H10.7501V17.8752ZM10.7501 12.625C10.7501 13.6605 11.5896 14.5 12.6251 14.5H17.8748C18.9104 14.5 19.7498 13.6605 19.7498 12.625C19.7498 11.5895 18.9104 10.75 17.8748 10.75H12.6251C11.5896 10.75 10.7501 11.5895 10.7501 12.625Z" fill="#ECB22E"/>
+<path d="M9.24981 2.12484C9.24982 1.08939 8.41042 0.25 7.37498 0.25C6.33953 0.25 5.50014 1.08947 5.50014 2.12492C5.50014 3.16045 6.3396 4 7.37514 4H9.24981V2.12484ZM9.24981 7.375C9.24982 6.33947 8.41035 5.5 7.37482 5.5L2.12514 5.5C1.0896 5.5 0.250137 6.33947 0.250137 7.375C0.250137 8.41053 1.0896 9.25 2.12514 9.25H7.37482C8.41035 9.25 9.24981 8.41053 9.24981 7.375Z" fill="#36C5F0"/>
+</g>
+</svg>
diff --git a/packages/app-admin-ui/src/Dashboard/components/assets/x-twitter.svg b/packages/app-admin-ui/src/Dashboard/components/assets/x-twitter.svg
new file mode 100644
index 00000000000..86b8bf5a3ba
--- /dev/null
+++ b/packages/app-admin-ui/src/Dashboard/components/assets/x-twitter.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Social Icons">
+<path id="Vector" d="M18.3263 1.90393H21.6998L14.3297 10.3274L23 21.7899H16.2112L10.894 14.838L4.80995 21.7899H1.43443L9.31743 12.78L1 1.90393H7.96111L12.7674 8.25826L18.3263 1.90393ZM17.1423 19.7707H19.0116L6.94539 3.81706H4.93946L17.1423 19.7707Z" fill="black"/>
+</g>
+</svg>
diff --git a/packages/app-admin-ui/src/Dashboard/components/assets/youtube.svg b/packages/app-admin-ui/src/Dashboard/components/assets/youtube.svg
new file mode 100644
index 00000000000..f01d4755f99
--- /dev/null
+++ b/packages/app-admin-ui/src/Dashboard/components/assets/youtube.svg
@@ -0,0 +1,11 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Social Icons" clip-path="url(#clip0_2021_7937)">
+<path id="Vector" d="M23.5221 6.18547C23.3864 5.67489 23.119 5.20889 22.7466 4.83413C22.3743 4.45936 21.91 4.18897 21.4003 4.05002C19.5239 3.54547 12.0239 3.54547 12.0239 3.54547C12.0239 3.54547 4.52393 3.54547 2.64756 4.05002C2.13786 4.18897 1.67358 4.45936 1.30121 4.83413C0.928842 5.20889 0.661431 5.67489 0.525744 6.18547C0.0239258 8.07002 0.0239258 12 0.0239258 12C0.0239258 12 0.0239258 15.93 0.525744 17.8146C0.661431 18.3251 0.928842 18.7911 1.30121 19.1659C1.67358 19.5407 2.13786 19.8111 2.64756 19.95C4.52393 20.4546 12.0239 20.4546 12.0239 20.4546C12.0239 20.4546 19.5239 20.4546 21.4003 19.95C21.91 19.8111 22.3743 19.5407 22.7466 19.1659C23.119 18.7911 23.3864 18.3251 23.5221 17.8146C24.0239 15.93 24.0239 12 24.0239 12C24.0239 12 24.0239 8.07002 23.5221 6.18547Z" fill="#FF0302"/>
+<path id="Vector_2" d="M9.56934 15.5687V8.4314L15.8421 12L9.56934 15.5687Z" fill="#FEFEFE"/>
+</g>
+<defs>
+<clipPath id="clip0_2021_7937">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/app-admin-ui/src/Dashboard/components/index.ts b/packages/app-admin-ui/src/Dashboard/components/index.ts
new file mode 100644
index 00000000000..2d73164032f
--- /dev/null
+++ b/packages/app-admin-ui/src/Dashboard/components/index.ts
@@ -0,0 +1,4 @@
+export * from "./ApplicationWidget";
+export * from "./AssistanceWidget";
+export * from "./CommunityWidget";
+export * from "./MissingPermissionsWidget";
diff --git a/packages/app-admin-ui/src/Dialog.tsx b/packages/app-admin-ui/src/Dialog.tsx
new file mode 100644
index 00000000000..2aa4a08b9ab
--- /dev/null
+++ b/packages/app-admin-ui/src/Dialog.tsx
@@ -0,0 +1,9 @@
+import React from "react";
+import { Provider } from "@webiny/app-admin";
+import { DialogProvider } from "./Dialog/DialogProvider";
+
+// This implements the global dialog, which is controlled via the
+// `useDialog` hook (`packages/app-admin/src/hooks/useDialog.ts`).
+export const Dialog = () => {
+    return <Provider hoc={DialogProvider} />;
+};
diff --git a/packages/app-admin-ui/src/Dialog/DialogContainer.tsx b/packages/app-admin-ui/src/Dialog/DialogContainer.tsx
new file mode 100644
index 00000000000..da27513597b
--- /dev/null
+++ b/packages/app-admin-ui/src/Dialog/DialogContainer.tsx
@@ -0,0 +1,82 @@
+import React, { useCallback, useEffect, useState } from "react";
+import { useUi } from "@webiny/app/hooks/useUi";
+import { Dialog } from "@webiny/admin-ui";
+
+export const DialogContainer = () => {
+    const ui = useUi();
+    const [isLoading, setIsLoading] = useState(false);
+    const message: React.ReactNode = ui.dialog?.message;
+
+    const {
+        dataTestId,
+        title,
+        loading,
+        actions = { cancel: null, accept: { label: "OK" } },
+        style,
+        onClose,
+        showCloseButton
+    } = ui.dialog?.options || {};
+
+    const hideDialog = useCallback(() => {
+        ui.setState(ui => ({ ...ui, dialog: null }));
+        if (typeof onClose === "function") {
+            onClose();
+        }
+    }, [ui]);
+
+    /**
+     * We need this part because message can change while the dialog is opened and in loading state.
+     */
+    useEffect(() => {
+        setIsLoading(false);
+    }, [ui.dialog?.message]);
+
+    const handleConfirm = async () => {
+        if (!actions.accept.onClick) {
+            /**
+             * Should not happen as users should define "accept.onClick" function, but just in case lets show the information.
+             * Possible to happen in development process.
+             */
+            console.info("There is no actions.accept.onClick callback defined.");
+            hideDialog();
+            return;
+        }
+        setIsLoading(true);
+        await actions.accept.onClick();
+        setIsLoading(false);
+        hideDialog();
+    };
+
+    return (
+        <Dialog
+            open={!!message}
+            onClose={hideDialog}
+            data-testid={dataTestId}
+            style={style}
+            showCloseButton={showCloseButton}
+            title={title}
+            actions={
+                !actions.cancel && !actions.accept ? null : (
+                    <>
+                        {actions.cancel && (
+                            <Dialog.CancelButton
+                                onClick={actions.cancel.onClick}
+                                text={actions.cancel.label}
+                            />
+                        )}
+                        {actions.accept && (
+                            <Dialog.ConfirmButton
+                                onClick={handleConfirm}
+                                text={actions.accept.label}
+                                data-testid={"confirmationdialog-confirm-action"}
+                            />
+                        )}
+                    </>
+                )
+            }
+        >
+            {isLoading ? loading : null}
+            {message}
+        </Dialog>
+    );
+};
diff --git a/packages/app-admin-ui/src/Dialog/DialogProvider.tsx b/packages/app-admin-ui/src/Dialog/DialogProvider.tsx
new file mode 100644
index 00000000000..cce2746e8af
--- /dev/null
+++ b/packages/app-admin-ui/src/Dialog/DialogProvider.tsx
@@ -0,0 +1,17 @@
+import React from "react";
+import { DialogContainer } from "./DialogContainer";
+
+export interface DialogProviderProps {
+    children?: React.ReactNode;
+}
+
+export const DialogProvider = (Component: React.ComponentType<DialogProviderProps>) => {
+    return function DialogProviderProps({ children }: DialogProviderProps) {
+        return (
+            <Component>
+                {children}
+                <DialogContainer />
+            </Component>
+        );
+    };
+};
diff --git a/packages/app-admin-ui/src/Layout.tsx b/packages/app-admin-ui/src/Layout.tsx
new file mode 100644
index 00000000000..2674d0719ef
--- /dev/null
+++ b/packages/app-admin-ui/src/Layout.tsx
@@ -0,0 +1,45 @@
+import React from "react";
+import Helmet from "react-helmet";
+import {
+    LayoutProps,
+    LayoutRenderer,
+    LocaleSelector,
+    Navigation,
+    TenantSelector,
+    UserMenu
+} from "@webiny/app-admin";
+import { HeaderBar, cn, useSidebar } from "@webiny/admin-ui";
+
+export const Layout = LayoutRenderer.createDecorator(() => {
+    return function Layout({ title, children }: LayoutProps) {
+        const { pinned } = useSidebar();
+        return (
+            <>
+                {title ? <Helmet title={title} /> : null}
+                <Navigation />
+                <div
+                    className={cn(
+                        "wby-ml-auto wby-bg-neutral-base wby-transition-[max-width,min-width] wby-ease-linear wby-w-full",
+                        {
+                            "wby-max-w-[calc(100%-theme(spacing.sidebar-expanded))] ": pinned,
+                            "wby-max-w-[calc(100%-theme(spacing.sidebar-collapsed))] ": !pinned
+                        }
+                    )}
+                >
+                    <HeaderBar
+                        end={
+                            <div className={"wby-flex"}>
+                                <LocaleSelector />
+                                <TenantSelector />
+                                <UserMenu />
+                            </div>
+                        }
+                    />
+                    <main className={"wby-relative wby-overflow-y-auto wby-h-main-content"}>
+                        {children}
+                    </main>
+                </div>
+            </>
+        );
+    };
+});
diff --git a/packages/app-admin-ui/src/Logo.tsx b/packages/app-admin-ui/src/Logo.tsx
new file mode 100644
index 00000000000..16bcee16282
--- /dev/null
+++ b/packages/app-admin-ui/src/Logo.tsx
@@ -0,0 +1,11 @@
+import React from "react";
+import { LogoRenderer, useAdminConfig } from "@webiny/app-admin";
+
+const minHeight = { minHeight: 48 };
+
+export const Logo = LogoRenderer.createDecorator(() => {
+    return function Logo() {
+        const { tenant } = useAdminConfig();
+        return <div style={minHeight}>{tenant.logo || null}</div>;
+    };
+});
diff --git a/packages/app-admin-ui/src/Navigation.tsx b/packages/app-admin-ui/src/Navigation.tsx
new file mode 100644
index 00000000000..62588324a14
--- /dev/null
+++ b/packages/app-admin-ui/src/Navigation.tsx
@@ -0,0 +1,13 @@
+import React from "react";
+import { Provider } from "@webiny/app-admin";
+import { SidebarProvider } from "./Navigation/SidebarProvider";
+import { Navigation as DecoratedNavigation } from "./Navigation/Navigation";
+
+export const Navigation = () => {
+    return (
+        <>
+            <Provider hoc={SidebarProvider} />
+            <DecoratedNavigation />
+        </>
+    );
+};
diff --git a/packages/app-admin-ui/src/Navigation/Navigation.tsx b/packages/app-admin-ui/src/Navigation/Navigation.tsx
new file mode 100644
index 00000000000..3a82503df34
--- /dev/null
+++ b/packages/app-admin-ui/src/Navigation/Navigation.tsx
@@ -0,0 +1,28 @@
+import React from "react";
+import { NavigationRenderer, useAdminConfig } from "@webiny/app-admin";
+import { Sidebar } from "@webiny/admin-ui";
+import { SidebarMenuItems } from "./SidebarMenuItems";
+import { Link } from "@webiny/react-router";
+
+export const Navigation = NavigationRenderer.createDecorator(() => {
+    return function Navigation() {
+        const { menus, tenant } = useAdminConfig();
+
+        const title = <Link to={"/"}>{tenant.name}</Link>;
+        const icon = (
+            <Link to={"/"}>
+                <Sidebar.Icon element={tenant.logo} label={"Webiny"} />
+            </Link>
+        );
+
+        return (
+            <Sidebar
+                title={title}
+                icon={icon}
+                footer={<SidebarMenuItems menus={menus} where={{ tags: ["footer"] }} />}
+            >
+                <SidebarMenuItems menus={menus} />
+            </Sidebar>
+        );
+    };
+});
diff --git a/packages/app-admin-ui/src/Navigation/SidebarMenuItems.tsx b/packages/app-admin-ui/src/Navigation/SidebarMenuItems.tsx
new file mode 100644
index 00000000000..adf590db7c8
--- /dev/null
+++ b/packages/app-admin-ui/src/Navigation/SidebarMenuItems.tsx
@@ -0,0 +1,47 @@
+import React from "react";
+import type { MenuConfig } from "@webiny/app-admin/config/AdminConfig/Menu";
+
+export interface MenusProps {
+    menus: MenuConfig[];
+    where?: { tags?: string[]; parent?: string };
+}
+
+// This component is called recursively to render root and nested menu items.
+// The menu items are defined via AdminConfig.
+export const SidebarMenuItems = (props: MenusProps) => {
+    const { menus: allMenus, where = {} } = props;
+    const filteredMenus = allMenus.filter(menu => {
+        const whereParent = where.parent || null;
+        const menuParent = menu.parent;
+        if (whereParent !== menuParent) {
+            return false;
+        }
+
+        const whereTags = where.tags || [];
+        const menuTags = menu.tags || [];
+
+        if (whereTags.length > 0) {
+            // If not all tags are present, return false.
+            return whereTags.every(tag => menuTags.includes(tag));
+        }
+
+        return menuTags.length === 0;
+    });
+
+    return filteredMenus.map(m => {
+        if (!React.isValidElement(m.element)) {
+            return null;
+        }
+
+        const hasChildMenus = allMenus.some(menu => menu.parent === m.name);
+        if (hasChildMenus) {
+            return React.cloneElement(
+                m.element,
+                { key: m.parent + m.name },
+                <SidebarMenuItems menus={allMenus} where={{ parent: m.name }} />
+            );
+        }
+
+        return React.cloneElement(m.element, { key: m.parent + m.name });
+    });
+};
diff --git a/packages/app-admin-ui/src/Navigation/SidebarProvider.tsx b/packages/app-admin-ui/src/Navigation/SidebarProvider.tsx
new file mode 100644
index 00000000000..ddab422b24c
--- /dev/null
+++ b/packages/app-admin-ui/src/Navigation/SidebarProvider.tsx
@@ -0,0 +1,16 @@
+import React from "react";
+import { SidebarProvider as AdminUiSidebar } from "@webiny/admin-ui";
+
+interface NavigationProviderProps {
+    children?: React.ReactNode;
+}
+
+export const SidebarProvider = (Component: React.ComponentType<NavigationProviderProps>) => {
+    return function SidebarProvider(props: NavigationProviderProps) {
+        return (
+            <AdminUiSidebar>
+                <Component {...props} />
+            </AdminUiSidebar>
+        );
+    };
+};
diff --git a/packages/app-admin-ui/src/NotFound.tsx b/packages/app-admin-ui/src/NotFound.tsx
new file mode 100644
index 00000000000..cf07cb074c9
--- /dev/null
+++ b/packages/app-admin-ui/src/NotFound.tsx
@@ -0,0 +1,27 @@
+import * as React from "react";
+import { NotFound as NotFoundBase } from "@webiny/app-admin";
+import notFoundImage from "./NotFound/notFound.svg";
+import { Link, Text } from "@webiny/admin-ui";
+
+export const NotFound = NotFoundBase.createDecorator(() => {
+    return function NotFound() {
+        return (
+            <div
+                className={
+                    "wby-h-full wby-flex wby-flex-col wby-items-center wby-justify-center wby-text-center wby-gap-xs"
+                }
+            >
+                <img
+                    width={200}
+                    height={200}
+                    src={notFoundImage}
+                    alt="Not Accessible"
+                    className={"wby-mb-xl"}
+                />
+                <Text>The route is either missing, or you&apos;re not authorized to view it.</Text>
+                <Text>Please contact your administrator to report the issue.</Text>
+                <Link to="/">Take me back.</Link>
+            </div>
+        );
+    };
+});
diff --git a/packages/app-admin-rmwc/src/modules/NotFound/SecureRouteError.svg b/packages/app-admin-ui/src/NotFound/notFound.svg
similarity index 100%
rename from packages/app-admin-rmwc/src/modules/NotFound/SecureRouteError.svg
rename to packages/app-admin-ui/src/NotFound/notFound.svg
diff --git a/packages/app-admin-ui/src/UserMenu.tsx b/packages/app-admin-ui/src/UserMenu.tsx
new file mode 100644
index 00000000000..5a797886bd9
--- /dev/null
+++ b/packages/app-admin-ui/src/UserMenu.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+import { UserMenu as BaseUserMenu } from "./UserMenu/UserMenu";
+import { UserMenuHandle } from "./UserMenu/UserMenuHandle";
+import { UserMenuItem, UserMenuItemIcon } from "./UserMenu/UserMenuItem";
+import { UserMenuLink, UserMenuLinkIcon } from "./UserMenu/UserMenuLink";
+import { UserMenuSeparator } from "./UserMenu/UserMenuSeparator";
+
+export const UserMenu = () => {
+    return (
+        <>
+            <UserMenuHandle />
+            <BaseUserMenu />
+            <UserMenuItem />
+            <UserMenuItemIcon />
+            <UserMenuLink />
+            <UserMenuLinkIcon />
+            <UserMenuSeparator />
+        </>
+    );
+};
diff --git a/packages/app-admin-ui/src/UserMenu/UserMenu.tsx b/packages/app-admin-ui/src/UserMenu/UserMenu.tsx
new file mode 100644
index 00000000000..06689b87de6
--- /dev/null
+++ b/packages/app-admin-ui/src/UserMenu/UserMenu.tsx
@@ -0,0 +1,37 @@
+import React from "react";
+import {
+    UserMenuRenderer as UserMenuRendererSpec,
+    UserMenuHandle,
+    useAdminConfig
+} from "@webiny/app-admin";
+import { DropdownMenu } from "@webiny/admin-ui";
+import { useSecurity } from "@webiny/app-security";
+
+export const UserMenu = UserMenuRendererSpec.createDecorator(() => {
+    return function UserMenu() {
+        const security = useSecurity();
+        const { userMenus } = useAdminConfig();
+
+        if (!security || !security.identity) {
+            return null;
+        }
+
+        const dropDownMenuItems = userMenus.map(m => {
+            if (React.isValidElement(m.element)) {
+                return React.cloneElement(m.element, { key: m.name });
+            }
+
+            return null;
+        });
+
+        return (
+            <DropdownMenu
+                trigger={<UserMenuHandle />}
+                data-testid={"logged-in-user-menu-list"}
+                className={"wby-w-[220px]"}
+            >
+                {dropDownMenuItems}
+            </DropdownMenu>
+        );
+    };
+});
diff --git a/packages/app-admin-ui/src/UserMenu/UserMenuHandle.tsx b/packages/app-admin-ui/src/UserMenu/UserMenuHandle.tsx
new file mode 100644
index 00000000000..0be035e6e46
--- /dev/null
+++ b/packages/app-admin-ui/src/UserMenu/UserMenuHandle.tsx
@@ -0,0 +1,48 @@
+import React from "react";
+import { Avatar, IconButton } from "@webiny/admin-ui";
+import { useSecurity } from "@webiny/app-security";
+import { ReactComponent as KeyboardArrowRightIcon } from "@webiny/icons/keyboard_arrow_down.svg";
+import { UserMenuHandleRenderer as UserMenuHandleRendererSpec } from "@webiny/app-admin";
+
+export const UserMenuHandle = UserMenuHandleRendererSpec.createDecorator(() => {
+    return function UserMenuHandle() {
+        const { identity } = useSecurity();
+
+        if (!identity) {
+            return null;
+        }
+
+        const profile = identity.profile;
+
+        const { firstName, lastName, avatar } = profile || {};
+        const fullName = `${firstName} ${lastName}`;
+
+        return (
+            <div className={"wby-flex wby-gap-x-sm wby-cursor-pointer"}>
+                <div
+                    data-testid="logged-in-user-menu-avatar"
+                    className={
+                        "wby-flex wby-items-center wby-rounded-md wby-gap-xxs wby-py-xs wby-px-xs wby-bg-neutral-light"
+                    }
+                >
+                    <Avatar
+                        size={"sm"}
+                        variant={"strong"}
+                        image={<Avatar.Image src={avatar?.src} />}
+                        fallback={
+                            <Avatar.Fallback className={"wby-uppercase"} delayMs={0}>
+                                {fullName[0]}
+                            </Avatar.Fallback>
+                        }
+                    />
+                    <IconButton
+                        variant={"ghost"}
+                        size={"xs"}
+                        color={"neutral-strong"}
+                        icon={<KeyboardArrowRightIcon />}
+                    />
+                </div>
+            </div>
+        );
+    };
+});
diff --git a/packages/app-admin-ui/src/UserMenu/UserMenuItem.tsx b/packages/app-admin-ui/src/UserMenu/UserMenuItem.tsx
new file mode 100644
index 00000000000..d050c76c216
--- /dev/null
+++ b/packages/app-admin-ui/src/UserMenu/UserMenuItem.tsx
@@ -0,0 +1,15 @@
+import React from "react";
+import { DropdownMenu } from "@webiny/admin-ui";
+import { UserMenuItemRenderer, UserMenuItemIconRenderer } from "@webiny/app-admin";
+
+export const UserMenuItem = UserMenuItemRenderer.createDecorator(() => {
+    return function UserMenuItemRenderer(props) {
+        return <DropdownMenu.Item {...props} />;
+    };
+});
+
+export const UserMenuItemIcon = UserMenuItemIconRenderer.createDecorator(() => {
+    return function UserMenuItemRenderer(props) {
+        return <DropdownMenu.Item.Icon {...props} />;
+    };
+});
diff --git a/packages/app-admin-ui/src/UserMenu/UserMenuLink.tsx b/packages/app-admin-ui/src/UserMenu/UserMenuLink.tsx
new file mode 100644
index 00000000000..de21bfa337d
--- /dev/null
+++ b/packages/app-admin-ui/src/UserMenu/UserMenuLink.tsx
@@ -0,0 +1,15 @@
+import React from "react";
+import { DropdownMenu } from "@webiny/admin-ui";
+import { UserMenuLinkRenderer, UserMenuLinkIconRenderer } from "@webiny/app-admin";
+
+export const UserMenuLink = UserMenuLinkRenderer.createDecorator(() => {
+    return function UserMenuLinkRenderer(props) {
+        return <DropdownMenu.Link {...props} />;
+    };
+});
+
+export const UserMenuLinkIcon = UserMenuLinkIconRenderer.createDecorator(() => {
+    return function UserMenuLinkRenderer(props) {
+        return <DropdownMenu.Link.Icon {...props} />;
+    };
+});
diff --git a/packages/app-admin-ui/src/UserMenu/UserMenuSeparator.tsx b/packages/app-admin-ui/src/UserMenu/UserMenuSeparator.tsx
new file mode 100644
index 00000000000..e8d65db6f7b
--- /dev/null
+++ b/packages/app-admin-ui/src/UserMenu/UserMenuSeparator.tsx
@@ -0,0 +1,9 @@
+import React from "react";
+import { DropdownMenu } from "@webiny/admin-ui";
+import { UserMenuSeparatorRenderer } from "@webiny/app-admin";
+
+export const UserMenuSeparator = UserMenuSeparatorRenderer.createDecorator(() => {
+    return function UserMenuSeparatorRenderer(props) {
+        return <DropdownMenu.Separator variant={"dimmed"} {...props} />;
+    };
+});
diff --git a/packages/app-admin-ui/src/index.tsx b/packages/app-admin-ui/src/index.tsx
new file mode 100644
index 00000000000..fb4d2c8c59b
--- /dev/null
+++ b/packages/app-admin-ui/src/index.tsx
@@ -0,0 +1,22 @@
+import React from "react";
+import { Layout } from "./Layout";
+import { Navigation } from "./Navigation";
+import { UserMenu } from "~/UserMenu";
+import { Dialog } from "./Dialog";
+import { NotFound } from "./NotFound";
+import { Dashboard } from "./Dashboard";
+import { Logo } from "./Logo";
+
+export const AdminUI = () => {
+    return (
+        <>
+            <Dashboard />
+            <Dialog />
+            <Layout />
+            <Navigation />
+            <NotFound />
+            <UserMenu />
+            <Logo />
+        </>
+    );
+};
diff --git a/packages/app-admin-ui/src/styles.scss b/packages/app-admin-ui/src/styles.scss
new file mode 100644
index 00000000000..fd96c7dfdcc
--- /dev/null
+++ b/packages/app-admin-ui/src/styles.scss
@@ -0,0 +1,2 @@
+// The default theme. Learn more: https://webiny.link/admin-themes.
+@import "~@webiny/admin-ui/theme.scss";
diff --git a/packages/app-admin-ui/tsconfig.build.json b/packages/app-admin-ui/tsconfig.build.json
new file mode 100644
index 00000000000..0336f6b0f83
--- /dev/null
+++ b/packages/app-admin-ui/tsconfig.build.json
@@ -0,0 +1,20 @@
+{
+  "extends": "../../tsconfig.build.json",
+  "include": ["src"],
+  "references": [
+    { "path": "../admin-ui/tsconfig.build.json" },
+    { "path": "../app/tsconfig.build.json" },
+    { "path": "../app-admin/tsconfig.build.json" },
+    { "path": "../app-plugin-admin-welcome-screen/tsconfig.build.json" },
+    { "path": "../app-security/tsconfig.build.json" },
+    { "path": "../plugins/tsconfig.build.json" },
+    { "path": "../react-router/tsconfig.build.json" }
+  ],
+  "compilerOptions": {
+    "rootDir": "./src",
+    "outDir": "./dist",
+    "declarationDir": "./dist",
+    "paths": { "~/*": ["./src/*"], "~tests/*": ["./__tests__/*"] },
+    "baseUrl": "."
+  }
+}
diff --git a/packages/app-admin-ui/tsconfig.json b/packages/app-admin-ui/tsconfig.json
new file mode 100644
index 00000000000..61ba559d51f
--- /dev/null
+++ b/packages/app-admin-ui/tsconfig.json
@@ -0,0 +1,37 @@
+{
+  "extends": "../../tsconfig.json",
+  "include": ["src", "__tests__"],
+  "references": [
+    { "path": "../admin-ui" },
+    { "path": "../app" },
+    { "path": "../app-admin" },
+    { "path": "../app-plugin-admin-welcome-screen" },
+    { "path": "../app-security" },
+    { "path": "../plugins" },
+    { "path": "../react-router" }
+  ],
+  "compilerOptions": {
+    "rootDirs": ["./src", "./__tests__"],
+    "outDir": "./dist",
+    "declarationDir": "./dist",
+    "paths": {
+      "~/*": ["./src/*"],
+      "~tests/*": ["./__tests__/*"],
+      "@webiny/admin-ui/*": ["../admin-ui/src/*"],
+      "@webiny/admin-ui": ["../admin-ui/src"],
+      "@webiny/app/*": ["../app/src/*"],
+      "@webiny/app": ["../app/src"],
+      "@webiny/app-admin/*": ["../app-admin/src/*"],
+      "@webiny/app-admin": ["../app-admin/src"],
+      "@webiny/app-plugin-admin-welcome-screen/*": ["../app-plugin-admin-welcome-screen/src/*"],
+      "@webiny/app-plugin-admin-welcome-screen": ["../app-plugin-admin-welcome-screen/src"],
+      "@webiny/app-security/*": ["../app-security/src/*"],
+      "@webiny/app-security": ["../app-security/src"],
+      "@webiny/plugins/*": ["../plugins/src/*"],
+      "@webiny/plugins": ["../plugins/src"],
+      "@webiny/react-router/*": ["../react-router/src/*"],
+      "@webiny/react-router": ["../react-router/src"]
+    },
+    "baseUrl": "."
+  }
+}
diff --git a/packages/app-admin-rmwc/webiny.config.js b/packages/app-admin-ui/webiny.config.js
similarity index 100%
rename from packages/app-admin-rmwc/webiny.config.js
rename to packages/app-admin-ui/webiny.config.js
diff --git a/packages/app-admin-users-cognito/package.json b/packages/app-admin-users-cognito/package.json
index e6ad239f1d5..b818cf8f9fa 100644
--- a/packages/app-admin-users-cognito/package.json
+++ b/packages/app-admin-users-cognito/package.json
@@ -14,6 +14,7 @@
   "dependencies": {
     "@apollo/react-hooks": "^3.1.5",
     "@emotion/styled": "11.10.6",
+    "@webiny/admin-ui": "0.0.0",
     "@webiny/app": "0.0.0",
     "@webiny/app-admin": "0.0.0",
     "@webiny/app-admin-cognito": "0.0.0",
@@ -21,6 +22,7 @@
     "@webiny/app-security-access-management": "0.0.0",
     "@webiny/app-tenancy": "0.0.0",
     "@webiny/form": "0.0.0",
+    "@webiny/icons": "0.0.0",
     "@webiny/plugins": "0.0.0",
     "@webiny/react-router": "0.0.0",
     "@webiny/ui": "0.0.0",
diff --git a/packages/app-admin-users-cognito/src/Cognito.tsx b/packages/app-admin-users-cognito/src/Cognito.tsx
index 65716291e40..a328c70144d 100644
--- a/packages/app-admin-users-cognito/src/Cognito.tsx
+++ b/packages/app-admin-users-cognito/src/Cognito.tsx
@@ -1,19 +1,20 @@
 import React, { Fragment, memo } from "react";
-import { Plugin, AddMenu as Menu, AddUserMenuItem, AddRoute, Layout } from "@webiny/app-admin";
+import { Layout } from "@webiny/app-admin";
 import { plugins } from "@webiny/plugins";
 import { HasPermission } from "@webiny/app-security";
 import { Permission } from "~/plugins/constants";
 import { UsersView } from "~/ui/views/Users/UsersView";
 import { Account } from "~/ui/views/Account";
-import { UserInfo } from "./plugins/userMenu/userInfo";
-import { AccountDetails } from "./plugins/userMenu/accountDetails";
-import { SignOut } from "./plugins/userMenu/signOut";
-
+import { AccountDetails } from "./plugins/userMenu/AccountDetails";
+import { UserInfo } from "./plugins/userMenu/UserInfo";
+import { SignOut } from "./plugins/userMenu/SignOut";
 import installation from "./plugins/installation";
 import permissionRenderer from "./plugins/permissionRenderer";
 import cognito from "./plugins/cognito";
 import { CognitoLogin, CognitoProps } from "./CognitoLogin";
+import { AdminConfig } from "@webiny/app-admin";
 
+const { Route, Menu } = AdminConfig;
 const ACCOUNT_ROUTE = "/account";
 
 const CognitoIdP = (props: CognitoProps) => {
@@ -25,32 +26,47 @@ const CognitoIdP = (props: CognitoProps) => {
                 config={props.config}
                 userMenuItems={{ userInfo: false, signOut: false }}
             />
-            <Plugin>
+            <AdminConfig>
                 <HasPermission name={Permission.Users}>
-                    <AddRoute path={"/admin-users"}>
-                        <Layout title={"Admin Users"}>
-                            <UsersView />
-                        </Layout>
-                    </AddRoute>
-                    <Menu name={"settings"}>
-                        <Menu name={"cognito.adminUsers"} label={"Admin Users"}>
-                            <Menu
-                                name={"cognito.adminUsers.users"}
-                                label={"Users"}
-                                path={"/admin-users"}
-                            />
-                        </Menu>
-                    </Menu>
+                    <Route
+                        name={"cognito.users"}
+                        path={"/admin-users"}
+                        element={
+                            <Layout title={"Admin Users"}>
+                                <UsersView />
+                            </Layout>
+                        }
+                    />
+
+                    <Route
+                        name={"cognito.account"}
+                        path={ACCOUNT_ROUTE}
+                        element={
+                            <Layout title={"User Account"}>
+                                <Account />
+                            </Layout>
+                        }
+                    />
+
+                    <Menu
+                        name={"cognito.settings"}
+                        parent={"settings"}
+                        element={<Menu.Group text={"Admin Users"} />}
+                    />
+                    <Menu
+                        name={"cognito.settings.adminUsers"}
+                        parent={"settings"}
+                        element={<Menu.Link text={"Users"} to={"/admin-users"} />}
+                    />
                 </HasPermission>
-                <AddRoute path={ACCOUNT_ROUTE}>
-                    <Layout title={"User Account"}>
-                        <Account />
-                    </Layout>
-                </AddRoute>
-                <AddUserMenuItem element={<UserInfo accountRoute={ACCOUNT_ROUTE} />} />
-                <AddUserMenuItem element={<AccountDetails accountRoute={ACCOUNT_ROUTE} />} />
-                <AddUserMenuItem element={<SignOut />} />
-            </Plugin>
+
+                <Menu.User name={"userInfo"} element={<UserInfo accountRoute={ACCOUNT_ROUTE} />} />
+                <Menu.User
+                    name={"accountSettings"}
+                    element={<AccountDetails accountRoute={ACCOUNT_ROUTE} />}
+                />
+                <Menu.User name={"signOut"} element={<SignOut />} />
+            </AdminConfig>
         </Fragment>
     );
 };
diff --git a/packages/app-admin-users-cognito/src/CognitoLogin.tsx b/packages/app-admin-users-cognito/src/CognitoLogin.tsx
index e5ae60c877a..92ee4cd7eac 100644
--- a/packages/app-admin-users-cognito/src/CognitoLogin.tsx
+++ b/packages/app-admin-users-cognito/src/CognitoLogin.tsx
@@ -1,8 +1,10 @@
 import React, { useMemo } from "react";
 import { createAuthentication, CreateAuthenticationConfig } from "~/createAuthentication";
-import { AddUserMenuItem, LoginScreenRenderer, Plugin } from "@webiny/app-admin";
-import { UserInfo } from "~/plugins/userMenu/userInfo";
-import { SignOut } from "~/plugins/userMenu/signOut";
+import { AdminConfig, LoginScreenRenderer } from "@webiny/app-admin";
+import { UserInfo } from "~/plugins/userMenu/UserInfo";
+import { SignOut } from "~/plugins/userMenu/SignOut";
+
+const { Menu } = AdminConfig;
 
 const createLoginScreenDecorator = (config?: CreateAuthenticationConfig) => {
     const LoginComponent = createAuthentication(config);
@@ -30,10 +32,14 @@ export const CognitoLogin = ({ userMenuItems, config }: CognitoProps) => {
         <>
             <LoginScreenDecorator />
             {userMenuItems ? (
-                <Plugin>
-                    {userMenuItems.userInfo ? <AddUserMenuItem element={<UserInfo />} /> : null}
-                    {userMenuItems.signOut ? <AddUserMenuItem element={<SignOut />} /> : null}
-                </Plugin>
+                <AdminConfig>
+                    {userMenuItems.userInfo ? (
+                        <Menu.User name={"userInfo"} element={<UserInfo />} />
+                    ) : null}
+                    {userMenuItems.signOut ? (
+                        <Menu.User name={"signOut"} element={<SignOut />} />
+                    ) : null}
+                </AdminConfig>
             ) : null}
         </>
     );
diff --git a/packages/app-admin-users-cognito/src/assets/icons/baseline-security-24px.svg b/packages/app-admin-users-cognito/src/assets/icons/baseline-security-24px.svg
deleted file mode 100644
index 5791a4f4609..00000000000
--- a/packages/app-admin-users-cognito/src/assets/icons/baseline-security-24px.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-    <path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V12H5V6.3l7-3.11v8.8z"/>
-    <path d="M0 0h24v24H0z" fill="none"/>
-</svg>
diff --git a/packages/app-admin-users-cognito/src/assets/icons/delete-24px.svg b/packages/app-admin-users-cognito/src/assets/icons/delete-24px.svg
deleted file mode 100644
index bb3db745499..00000000000
--- a/packages/app-admin-users-cognito/src/assets/icons/delete-24px.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
\ No newline at end of file
diff --git a/packages/app-admin-users-cognito/src/assets/icons/edit-24px.svg b/packages/app-admin-users-cognito/src/assets/icons/edit-24px.svg
deleted file mode 100644
index a6f23ff35d3..00000000000
--- a/packages/app-admin-users-cognito/src/assets/icons/edit-24px.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
\ No newline at end of file
diff --git a/packages/app-admin-users-cognito/src/assets/icons/logout_black_24dp.svg b/packages/app-admin-users-cognito/src/assets/icons/logout_black_24dp.svg
deleted file mode 100644
index bfd7e29233b..00000000000
--- a/packages/app-admin-users-cognito/src/assets/icons/logout_black_24dp.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M17 7l-1.41 1.41L18.17 11H8v2h10.17l-2.58 2.58L17 17l5-5zM4 5h8V3H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h8v-2H4V5z"/></svg>
\ No newline at end of file
diff --git a/packages/app-admin-users-cognito/src/assets/icons/round-account_circle-24px.svg b/packages/app-admin-users-cognito/src/assets/icons/round-account_circle-24px.svg
deleted file mode 100644
index 921e655895f..00000000000
--- a/packages/app-admin-users-cognito/src/assets/icons/round-account_circle-24px.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z"/></svg>
diff --git a/packages/app-admin-users-cognito/src/assets/icons/round-lock_open-24px.svg b/packages/app-admin-users-cognito/src/assets/icons/round-lock_open-24px.svg
deleted file mode 100644
index fc2ab5c099c..00000000000
--- a/packages/app-admin-users-cognito/src/assets/icons/round-lock_open-24px.svg
+++ /dev/null
@@ -1,60 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px"
-	 height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
-<g id="Header_x2F_BG" display="none">
-	<rect x="-446" y="-94" display="inline" fill="#F1F1F2" width="520" height="520"/>
-</g>
-<g id="Bounding_Boxes">
-	<g id="ui_x5F_spec_x5F_header_copy_3" display="none">
-	</g>
-	<path fill="none" d="M0,0h24v24H0V0z"/>
-</g>
-<g id="Rounded">
-	<g id="ui_x5F_spec_x5F_header_copy_5" display="none">
-	</g>
-	<g>
-		<path d="M12,13c-1.1,0-2,0.9-2,2c0,1.1,0.9,2,2,2c1.1,0,2-0.9,2-2C14,13.9,13.1,13,12,13z"/>
-		<path d="M18,8h-1V6c0-2.76-2.24-5-5-5C9.72,1,7.73,2.54,7.16,4.75C7.02,5.29,7.34,5.83,7.88,5.97c0.53,0.14,1.08-0.18,1.22-0.72
-			C9.44,3.93,10.63,3,12,3c1.65,0,3,1.35,3,3v2H6c-1.1,0-2,0.9-2,2v10c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2V10C20,8.9,19.1,8,18,8z
-			 M18,19c0,0.55-0.45,1-1,1H7c-0.55,0-1-0.45-1-1v-8c0-0.55,0.45-1,1-1h10c0.55,0,1,0.45,1,1V19z"/>
-	</g>
-</g>
-<g id="Sharp" display="none">
-	<g id="ui_x5F_spec_x5F_header_copy_4">
-	</g>
-	<g display="inline">
-		<path d="M20,8h-3l0-1.79c0-2.61-1.91-4.94-4.51-5.19C9.51,0.74,7,3.08,7,6v0h2v0c0-1.13,0.6-2.24,1.64-2.7C12.85,2.31,15,3.9,15,6
-			v2H4v14h16V8z M18,20H6V10h12V20z"/>
-		<path d="M12,17c1.1,0,2-0.9,2-2c0-1.1-0.9-2-2-2c-1.1,0-2,0.9-2,2C10,16.1,10.9,17,12,17z"/>
-	</g>
-</g>
-<g id="Outline" display="none">
-	<g id="ui_x5F_spec_x5F_header">
-	</g>
-	<g display="inline">
-		<path d="M18,8h-1V6c0-2.76-2.24-5-5-5S7,3.24,7,6v0h2v0c0-1.66,1.34-3,3-3s3,1.34,3,3v2H6c-1.1,0-2,0.9-2,2v10c0,1.1,0.9,2,2,2h12
-			c1.1,0,2-0.9,2-2V10C20,8.9,19.1,8,18,8z M18,20H6V10h12V20z"/>
-		<path d="M12,17c1.1,0,2-0.9,2-2c0-1.1-0.9-2-2-2c-1.1,0-2,0.9-2,2C10,16.1,10.9,17,12,17z"/>
-	</g>
-</g>
-<g id="Duotone" display="none">
-	<g id="ui_x5F_spec_x5F_header_copy_2">
-	</g>
-	<g display="inline">
-		<path opacity="0.3" d="M6,20h12V10H6V20z M12,13c1.1,0,2,0.9,2,2c0,1.1-0.9,2-2,2c-1.1,0-2-0.9-2-2C10,13.9,10.9,13,12,13z"/>
-		<path d="M18,8h-1V6c0-2.76-2.24-5-5-5S7,3.24,7,6v0h2v0c0-1.66,1.34-3,3-3s3,1.34,3,3v2H6c-1.1,0-2,0.9-2,2v10c0,1.1,0.9,2,2,2h12
-			c1.1,0,2-0.9,2-2V10C20,8.9,19.1,8,18,8z M18,20H6V10h12V20z"/>
-		<path d="M12,17c1.1,0,2-0.9,2-2c0-1.1-0.9-2-2-2c-1.1,0-2,0.9-2,2C10,16.1,10.9,17,12,17z"/>
-	</g>
-</g>
-<g id="Material" display="none">
-	<g id="ui_x5F_spec_x5F_header_copy">
-	</g>
-	<g display="inline">
-		<path d="M18,8h-1V6c0-2.76-2.24-5-5-5S7,3.24,7,6v0h2v0c0-1.66,1.34-3,3-3s3,1.34,3,3v2H6c-1.1,0-2,0.9-2,2v10c0,1.1,0.9,2,2,2h12
-			c1.1,0,2-0.9,2-2V10C20,8.9,19.1,8,18,8z M18,20H6V10h12V20z"/>
-		<path d="M12,17c1.1,0,2-0.9,2-2c0-1.1-0.9-2-2-2c-1.1,0-2,0.9-2,2C10,16.1,10.9,17,12,17z"/>
-	</g>
-</g>
-</svg>
diff --git a/packages/app-admin-users-cognito/src/assets/icons/security-24px.svg b/packages/app-admin-users-cognito/src/assets/icons/security-24px.svg
deleted file mode 100644
index 86db4fb92e3..00000000000
--- a/packages/app-admin-users-cognito/src/assets/icons/security-24px.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V12H5V6.3l7-3.11v8.8z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
\ No newline at end of file
diff --git a/packages/app-admin-users-cognito/src/assets/icons/security-teams-24px.svg b/packages/app-admin-users-cognito/src/assets/icons/security-teams-24px.svg
deleted file mode 100644
index 1c5993e23d3..00000000000
--- a/packages/app-admin-users-cognito/src/assets/icons/security-teams-24px.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M480-440q-59 0-99.5-40.5T340-580q0-59 40.5-99.5T480-720q59 0 99.5 40.5T620-580q0 59-40.5 99.5T480-440Zm0-80q26 0 43-17t17-43q0-26-17-43t-43-17q-26 0-43 17t-17 43q0 26 17 43t43 17Zm0 440q-139-35-229.5-159.5T160-516v-244l320-120 320 120v244q0 152-90.5 276.5T480-80Zm0-400Zm0-315-240 90v189q0 54 15 105t41 96q42-21 88-33t96-12q50 0 96 12t88 33q26-45 41-96t15-105v-189l-240-90Zm0 515q-36 0-70 8t-65 22q29 30 63 52t72 34q38-12 72-34t63-52q-31-14-65-22t-70-8Z"/></svg>
\ No newline at end of file
diff --git a/packages/app-admin-users-cognito/src/assets/icons/settings-24px.svg b/packages/app-admin-users-cognito/src/assets/icons/settings-24px.svg
deleted file mode 100644
index e40c8496e5b..00000000000
--- a/packages/app-admin-users-cognito/src/assets/icons/settings-24px.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24" viewBox="0 0 24 24" width="24"><g><path d="M0,0h24v24H0V0z" fill="none"/><path d="M19.14,12.94c0.04-0.3,0.06-0.61,0.06-0.94c0-0.32-0.02-0.64-0.07-0.94l2.03-1.58c0.18-0.14,0.23-0.41,0.12-0.61 l-1.92-3.32c-0.12-0.22-0.37-0.29-0.59-0.22l-2.39,0.96c-0.5-0.38-1.03-0.7-1.62-0.94L14.4,2.81c-0.04-0.24-0.24-0.41-0.48-0.41 h-3.84c-0.24,0-0.43,0.17-0.47,0.41L9.25,5.35C8.66,5.59,8.12,5.92,7.63,6.29L5.24,5.33c-0.22-0.08-0.47,0-0.59,0.22L2.74,8.87 C2.62,9.08,2.66,9.34,2.86,9.48l2.03,1.58C4.84,11.36,4.8,11.69,4.8,12s0.02,0.64,0.07,0.94l-2.03,1.58 c-0.18,0.14-0.23,0.41-0.12,0.61l1.92,3.32c0.12,0.22,0.37,0.29,0.59,0.22l2.39-0.96c0.5,0.38,1.03,0.7,1.62,0.94l0.36,2.54 c0.05,0.24,0.24,0.41,0.48,0.41h3.84c0.24,0,0.44-0.17,0.47-0.41l0.36-2.54c0.59-0.24,1.13-0.56,1.62-0.94l2.39,0.96 c0.22,0.08,0.47,0,0.59-0.22l1.92-3.32c0.12-0.22,0.07-0.47-0.12-0.61L19.14,12.94z M12,15.6c-1.98,0-3.6-1.62-3.6-3.6 s1.62-3.6,3.6-3.6s3.6,1.62,3.6,3.6S13.98,15.6,12,15.6z"/></g></svg>
\ No newline at end of file
diff --git a/packages/app-admin-users-cognito/src/createGetIdentityData/graphql.ts b/packages/app-admin-users-cognito/src/createGetIdentityData/graphql.ts
index d614a9cfc08..3619f80fd1e 100644
--- a/packages/app-admin-users-cognito/src/createGetIdentityData/graphql.ts
+++ b/packages/app-admin-users-cognito/src/createGetIdentityData/graphql.ts
@@ -13,12 +13,14 @@ export const LOGIN_MT = gql`
                             id
                             name
                             description
+                            image
                             parent
                         }
                         defaultTenant {
                             id
                             name
                             description
+                            image
                             parent
                         }
                         permissions
diff --git a/packages/app-admin-users-cognito/src/plugins/permissionRenderer/AdminUsersPermissions.tsx b/packages/app-admin-users-cognito/src/plugins/permissionRenderer/AdminUsersPermissions.tsx
index 86d3489041c..001385ee26f 100644
--- a/packages/app-admin-users-cognito/src/plugins/permissionRenderer/AdminUsersPermissions.tsx
+++ b/packages/app-admin-users-cognito/src/plugins/permissionRenderer/AdminUsersPermissions.tsx
@@ -5,11 +5,10 @@ import { i18n } from "@webiny/app/i18n";
 import {
     CannotUseAaclAlert,
     PermissionInfo,
-    gridNoPaddingClass
+    gridWithPaddingClass,
+    PermissionsGroup
 } from "@webiny/app-admin/components/Permissions";
 import { Form } from "@webiny/form";
-import { Elevation } from "@webiny/ui/Elevation";
-import { Typography } from "@webiny/ui/Typography";
 import { SecurityPermission } from "@webiny/app-security/types";
 import { useSecurity } from "@webiny/app-security";
 import { AaclPermission } from "@webiny/app-admin";
@@ -103,20 +102,20 @@ export const AdminUsersPermissions = ({ value, onChange }: AdminUsersPermissions
                 const disableUserAccessScope = data.groupAccessScope === NO_ACCESS;
                 return (
                     <Fragment>
-                        <Grid className={gridNoPaddingClass}>
+                        <Grid className={gridWithPaddingClass}>
                             <Cell span={12}>
                                 {data.accessLevel === "custom" && cannotUseAAcl && (
                                     <CannotUseAaclAlert />
                                 )}
                             </Cell>
                         </Grid>
-                        <Grid className={gridNoPaddingClass}>
+                        <Grid className={gridWithPaddingClass}>
                             <Cell span={6}>
                                 <PermissionInfo title={t`Access Level`} />
                             </Cell>
                             <Cell span={6}>
                                 <Bind name={"accessLevel"}>
-                                    <Select label={t`Access Level`}>
+                                    <Select>
                                         <option value={NO_ACCESS}>{t`No access`}</option>
                                         <option value={FULL_ACCESS}>{t`Full access`}</option>
                                         <option value={CUSTOM_ACCESS}>{t`Custom access`}</option>
@@ -125,12 +124,9 @@ export const AdminUsersPermissions = ({ value, onChange }: AdminUsersPermissions
                             </Cell>
                         </Grid>
                         {data.accessLevel === CUSTOM_ACCESS && (
-                            <React.Fragment>
-                                <Elevation z={1} style={{ marginTop: 10 }}>
+                            <div className={"wby-mt-lg"}>
+                                <PermissionsGroup title={t`Users`}>
                                     <Grid>
-                                        <Cell span={12}>
-                                            <Typography use={"overline"}>{t`Users`}</Typography>
-                                        </Cell>
                                         <Cell span={12}>
                                             <Bind name={"userAccessScope"}>
                                                 {({ value, ...props }) => (
@@ -157,8 +153,8 @@ export const AdminUsersPermissions = ({ value, onChange }: AdminUsersPermissions
                                             </Bind>
                                         </Cell>
                                     </Grid>
-                                </Elevation>
-                            </React.Fragment>
+                                </PermissionsGroup>
+                            </div>
                         )}
                     </Fragment>
                 );
diff --git a/packages/app-admin-users-cognito/src/plugins/permissionRenderer/index.tsx b/packages/app-admin-users-cognito/src/plugins/permissionRenderer/index.tsx
index 0fa0013dbac..a22ebfc1eb5 100644
--- a/packages/app-admin-users-cognito/src/plugins/permissionRenderer/index.tsx
+++ b/packages/app-admin-users-cognito/src/plugins/permissionRenderer/index.tsx
@@ -1,20 +1,25 @@
 import React from "react";
-import { AccordionItem } from "@webiny/ui/Accordion";
-import { ReactComponent as SecurityIcon } from "@webiny/app-admin/assets/icons/baseline-security-24px.svg";
+import { Accordion } from "@webiny/admin-ui";
+import { ReactComponent as PermissionsIcon } from "@webiny/icons/security.svg";
 import { AdminUsersPermissions } from "./AdminUsersPermissions";
 import { PermissionRendererPlugin } from "@webiny/app-admin/plugins/PermissionRendererPlugin";
 
 export default new PermissionRendererPlugin({
     render(props) {
         return (
-            <AccordionItem
-                icon={<SecurityIcon />}
+            <Accordion.Item
+                icon={
+                    <Accordion.Item.Icon
+                        icon={<PermissionsIcon />}
+                        label={"Admin Users Permissions"}
+                    />
+                }
                 title={`Admin Users`}
                 description={`Manage Admin Users access permissions.`}
                 data-testid={"permission.adminUsers"}
             >
                 <AdminUsersPermissions {...props} />
-            </AccordionItem>
+            </Accordion.Item>
         );
     }
 });
diff --git a/packages/app-admin-users-cognito/src/plugins/userMenu/AccountDetails.tsx b/packages/app-admin-users-cognito/src/plugins/userMenu/AccountDetails.tsx
new file mode 100644
index 00000000000..01be7ae8620
--- /dev/null
+++ b/packages/app-admin-users-cognito/src/plugins/userMenu/AccountDetails.tsx
@@ -0,0 +1,47 @@
+import React from "react";
+import { useSecurity } from "@webiny/app-security";
+import { useTenancy } from "@webiny/app-tenancy";
+import { useIsDefaultTenant } from "./useIsDefaultTenant";
+import { ReactComponent as AccountIcon } from "@webiny/icons/account_circle.svg";
+import { ReactComponent as SignOutIcon } from "@webiny/icons/logout.svg";
+import { AdminConfig } from "@webiny/app-admin";
+const { Menu } = AdminConfig;
+
+interface AccountDetailsProps {
+    accountRoute: string;
+}
+
+export const AccountDetails = (props: AccountDetailsProps) => {
+    const security = useSecurity();
+    const tenancy = useTenancy();
+    const isDefaultTenant = useIsDefaultTenant();
+
+    if (!security || !security.identity) {
+        return null;
+    }
+
+    // This is only applicable in multi-tenant environments
+    const { defaultTenant } = security.identity;
+
+    if (tenancy && !isDefaultTenant) {
+        return (
+            <Menu.User.Item
+                icon={<Menu.User.Item.Icon element={<SignOutIcon />} label={"Exit tenant"} />}
+                text={"Exit tenant"}
+                onClick={() => tenancy.setTenant(defaultTenant.id)}
+            />
+        );
+    }
+
+    if (!security.identity.profile) {
+        return null;
+    }
+
+    return (
+        <Menu.User.Link
+            icon={<Menu.User.Item.Icon element={<AccountIcon />} label={"Account settings"} />}
+            text={"Account settings"}
+            to={props.accountRoute}
+        />
+    );
+};
diff --git a/packages/app-admin-users-cognito/src/plugins/userMenu/SignOut.tsx b/packages/app-admin-users-cognito/src/plugins/userMenu/SignOut.tsx
new file mode 100644
index 00000000000..766c7dec610
--- /dev/null
+++ b/packages/app-admin-users-cognito/src/plugins/userMenu/SignOut.tsx
@@ -0,0 +1,27 @@
+import React from "react";
+import { useSecurity } from "@webiny/app-security/hooks/useSecurity";
+import { ReactComponent as SignOutIcon } from "@webiny/icons/logout.svg";
+import { AdminConfig } from "@webiny/app-admin";
+
+const { Menu } = AdminConfig;
+
+export const SignOut = () => {
+    const { identity } = useSecurity();
+
+    if (!identity) {
+        return null;
+    }
+
+    if (typeof identity.logout !== "function") {
+        console.warn(`Missing "logout" function implementation in SecurityIdentity!`);
+        return null;
+    }
+
+    return (
+        <Menu.User.Item
+            text={"Sign out"}
+            icon={<Menu.User.Item.Icon element={<SignOutIcon />} label={"Sign out"} />}
+            onClick={identity.logout}
+        />
+    );
+};
diff --git a/packages/app-admin-users-cognito/src/plugins/userMenu/UserInfo.tsx b/packages/app-admin-users-cognito/src/plugins/userMenu/UserInfo.tsx
new file mode 100644
index 00000000000..01f0886e636
--- /dev/null
+++ b/packages/app-admin-users-cognito/src/plugins/userMenu/UserInfo.tsx
@@ -0,0 +1,58 @@
+import React from "react";
+import { AdminConfig } from "@webiny/app-admin";
+import { Text } from "@webiny/admin-ui";
+import { useSecurity } from "@webiny/app-security";
+import { useIsDefaultTenant } from "~/plugins/userMenu/useIsDefaultTenant";
+
+const { Menu } = AdminConfig;
+
+interface UserInfoProps {
+    accountRoute?: string;
+}
+
+export const UserInfo = ({ accountRoute }: UserInfoProps) => {
+    const security = useSecurity();
+    const isDefaultTenant = useIsDefaultTenant();
+
+    if (!security || !security.identity) {
+        return null;
+    }
+
+    const { profile, displayName } = security.identity;
+
+    // Start with the assumption that the user doesn't have a profile in the system (external IDP).
+    let content = (
+        <Text size={"md"} className={"wby-font-bold"}>
+            {displayName}
+        </Text>
+    );
+
+    if (profile) {
+        const { email, firstName, lastName } = profile;
+        const fullName = `${firstName} ${lastName}`;
+
+        content = (
+            <>
+                <Text size={"md"} className={"wby-block wby-font-semibold wby-mb-sm"}>
+                    {fullName}
+                </Text>
+
+                <Text size={"sm"} className={"wby-block !wby-text-neutral-strong"}>
+                    {email}
+                </Text>
+            </>
+        );
+    }
+
+    let listItem = <Menu.User.Item text={content} />;
+    if (accountRoute && isDefaultTenant) {
+        listItem = <Menu.User.Link text={content} to={accountRoute} />;
+    }
+
+    return (
+        <>
+            {listItem}
+            <Menu.User.Separator />
+        </>
+    );
+};
diff --git a/packages/app-admin-users-cognito/src/plugins/userMenu/accountDetails.tsx b/packages/app-admin-users-cognito/src/plugins/userMenu/accountDetails.tsx
deleted file mode 100644
index fbc156f6a0d..00000000000
--- a/packages/app-admin-users-cognito/src/plugins/userMenu/accountDetails.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import React from "react";
-import { css } from "emotion";
-import { ListItem, ListItemGraphic } from "@webiny/ui/List";
-import { Icon } from "@webiny/ui/Icon";
-import { Link } from "@webiny/react-router";
-import { ReactComponent as AccountIcon } from "~/assets/icons/round-account_circle-24px.svg";
-import { ReactComponent as LogoutIcon } from "~/assets/icons/logout_black_24dp.svg";
-import { useSecurity } from "@webiny/app-security";
-import { useTenancy } from "@webiny/app-tenancy";
-import { useIsDefaultTenant } from "./useIsDefaultTenant";
-
-const linkStyles = css({
-    "&:hover": {
-        textDecoration: "none"
-    }
-});
-
-interface AccountDetailsProps {
-    accountRoute: `/${string}`;
-}
-
-export const AccountDetails = ({ accountRoute }: AccountDetailsProps) => {
-    const security = useSecurity();
-    const tenancy = useTenancy();
-    const isDefaultTenant = useIsDefaultTenant();
-
-    if (!security || !security.identity) {
-        return null;
-    }
-
-    // This is only applicable in multi-tenant environments
-    const { defaultTenant } = security.identity;
-
-    if (tenancy && !isDefaultTenant) {
-        return (
-            <ListItem onClick={() => tenancy.setTenant(defaultTenant.id)}>
-                <ListItemGraphic>
-                    <Icon icon={<LogoutIcon />} />
-                </ListItemGraphic>
-                Exit tenant
-            </ListItem>
-        );
-    }
-
-    if (!security.identity.profile) {
-        return null;
-    }
-
-    return (
-        <Link to={accountRoute} className={linkStyles}>
-            <ListItem>
-                <ListItemGraphic>
-                    <Icon icon={<AccountIcon />} />
-                </ListItemGraphic>
-                Account details
-            </ListItem>
-        </Link>
-    );
-};
-
-export default () => {
-    console.log(
-        `[DEPRECATED] Import "@webiny/app-admin-users-cognito/plugins/userMenu/accountDetails" is no longer used!`
-    );
-    return { type: "dummy" };
-};
diff --git a/packages/app-admin-users-cognito/src/plugins/userMenu/signOut.tsx b/packages/app-admin-users-cognito/src/plugins/userMenu/signOut.tsx
deleted file mode 100644
index 99c4886c913..00000000000
--- a/packages/app-admin-users-cognito/src/plugins/userMenu/signOut.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import React from "react";
-import { ListItem, ListItemGraphic } from "@webiny/ui/List";
-import { Icon } from "@webiny/ui/Icon";
-import { useSecurity } from "@webiny/app-security/hooks/useSecurity";
-import { ReactComponent as SignOutIcon } from "~/assets/icons/round-lock_open-24px.svg";
-
-export const SignOut = () => {
-    const { identity } = useSecurity();
-
-    if (!identity) {
-        return null;
-    }
-
-    if (typeof identity.logout !== "function") {
-        console.warn(`Missing "logout" function implementation in SecurityIdentity!`);
-        return null;
-    }
-
-    return (
-        <ListItem onClick={identity.logout}>
-            <ListItemGraphic>{<Icon icon={<SignOutIcon />} />}</ListItemGraphic>
-            Sign out
-        </ListItem>
-    );
-};
-
-export default () => {
-    console.log(
-        `[DEPRECATED] Import "@webiny/app-admin-users-cognito/plugins/userMenu/signOut" is no longer used!`
-    );
-    return { type: "dummy" };
-};
diff --git a/packages/app-admin-users-cognito/src/plugins/userMenu/userImage.tsx b/packages/app-admin-users-cognito/src/plugins/userMenu/userImage.tsx
deleted file mode 100644
index cecd0a5976c..00000000000
--- a/packages/app-admin-users-cognito/src/plugins/userMenu/userImage.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-export default () => {
-    console.log(
-        `[DEPRECATED] Import "@webiny/app-admin-users-cognito/plugins/userMenu/userImage" is no longer used!`
-    );
-    return { type: "dummy" };
-};
diff --git a/packages/app-admin-users-cognito/src/plugins/userMenu/userInfo.tsx b/packages/app-admin-users-cognito/src/plugins/userMenu/userInfo.tsx
deleted file mode 100644
index 17a1bd993f2..00000000000
--- a/packages/app-admin-users-cognito/src/plugins/userMenu/userInfo.tsx
+++ /dev/null
@@ -1,163 +0,0 @@
-import React from "react";
-import { css } from "emotion";
-import { Link } from "@webiny/react-router";
-import { useSecurity } from "@webiny/app-security/hooks/useSecurity";
-import { Image } from "@webiny/app/components";
-import { ListItem, ListItemGraphic } from "@webiny/ui/List";
-import { Typography } from "@webiny/ui/Typography";
-import { Avatar } from "@webiny/ui/Avatar";
-import { useIsDefaultTenant } from "./useIsDefaultTenant";
-
-const avatarImage = css({
-    height: "40px !important",
-    width: "40px !important",
-    borderRadius: "50%",
-    display: "inline-block",
-    ">div": {
-        backgroundColor: "var(--mdc-theme-surface)"
-    }
-});
-
-const linkStyles = css({
-    backgroundColor: "var(--mdc-theme-background)",
-    marginTop: -25,
-    marginBottom: 0,
-    paddingTop: 0,
-    paddingBottom: 0,
-    textDecoration: "none",
-    display: "block",
-    "&:hover": {
-        textDecoration: "none"
-    },
-    ">.mdc-deprecated-list-item": {
-        display: "flex",
-        height: "65px !important",
-        marginTop: 15,
-        ".avatar": {
-            marginTop: 10
-        }
-    },
-    "h3, h3>.mdc-typography--headline6": {
-        lineHeight: "1em !important"
-    },
-    ".mdc-menu &.mdc-deprecated-list-item": {
-        ">.mdc-deprecated-list-item__text": {
-            fontWeight: "bold"
-        }
-    },
-    ".mdc-deprecated-list-item": {
-        height: "auto",
-        ".mdc-typography--headline6": {
-            overflow: "hidden",
-            whiteSpace: "nowrap",
-            textOverflow: "ellipsis",
-            maxWidth: 180,
-            display: "block"
-        },
-        ".mdc-typography--body2": {
-            overflow: "hidden",
-            whiteSpace: "nowrap",
-            textOverflow: "ellipsis",
-            maxWidth: 180
-        }
-    }
-});
-
-interface UserInfoProps {
-    /**
-     * Provide a route to the user's account view.
-     * It is optional, because in reality, only Cognito allows you to update your profile, and only when Webiny is managing
-     * those Cognito identities. If Cognito uses federated identity providers, you won't be able to update your account at all.
-     */
-    accountRoute?: `/${string}`;
-}
-
-export const UserInfo = ({ accountRoute }: UserInfoProps) => {
-    const security = useSecurity();
-
-    if (!security || !security.identity) {
-        return null;
-    }
-
-    const { profile, displayName } = security.identity;
-
-    // Start with the assumption that the user doesn't have a profile in the system (external IDP).
-    let listItem: JSX.Element = <UserInfoListItem displayName={displayName} />;
-
-    if (profile) {
-        const { email, firstName, lastName, avatar, gravatar } = profile;
-        const fullName = `${firstName} ${lastName}`;
-
-        listItem = (
-            <UserInfoListItem
-                displayName={fullName}
-                avatarSrc={avatar ? avatar.src : gravatar}
-                email={email}
-            />
-        );
-    }
-
-    return (
-        <UserInfoListItemContainer accountRoute={accountRoute} className={linkStyles}>
-            {listItem}
-        </UserInfoListItemContainer>
-    );
-};
-
-interface UserInfoListItemContainer {
-    accountRoute?: `/${string}`;
-    className: string;
-    children: React.ReactNode;
-}
-
-const UserInfoListItemContainer = ({
-    accountRoute,
-    className,
-    children
-}: UserInfoListItemContainer) => {
-    const isDefaultTenant = useIsDefaultTenant();
-
-    // If there's no "accountRoute", or the user is not on his default tenant, don't render the link to "Account Details".
-    if (!accountRoute || !isDefaultTenant) {
-        return <div className={className}>{children}</div>;
-    }
-
-    return (
-        <Link to={accountRoute} className={className}>
-            {children}
-        </Link>
-    );
-};
-
-interface UserInfoListItemProps {
-    displayName: string;
-    email?: string;
-    avatarSrc?: string;
-}
-
-const UserInfoListItem = ({ avatarSrc, displayName, email }: UserInfoListItemProps) => {
-    return (
-        <ListItem ripple={false} className={linkStyles}>
-            <ListItemGraphic className={avatarImage}>
-                <Avatar
-                    className={"avatar"}
-                    src={avatarSrc}
-                    alt={displayName}
-                    fallbackText={displayName}
-                    renderImage={props => <Image {...props} transform={{ width: 100 }} />}
-                />
-            </ListItemGraphic>
-            <div>
-                <Typography use={"headline6"}>{displayName}</Typography>
-                {email ? <Typography use={"body2"}>{email}</Typography> : null}
-            </div>
-        </ListItem>
-    );
-};
-
-export default () => {
-    console.log(
-        `[DEPRECATED] Import "@webiny/app-admin-users-cognito/plugins/userMenu/userInfo" is no longer used!`
-    );
-    return { type: "dummy" };
-};
diff --git a/packages/app-admin-users-cognito/src/ui/components/AvatarImage.tsx b/packages/app-admin-users-cognito/src/ui/components/AvatarImage.tsx
deleted file mode 100644
index dd9845190c8..00000000000
--- a/packages/app-admin-users-cognito/src/ui/components/AvatarImage.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import * as React from "react";
-import { SingleImageUpload, SingleImageUploadProps } from "@webiny/app-admin";
-
-const getImagePreviewStyles = (round: boolean) => ({
-    width: 150,
-    height: 150,
-    borderRadius: round ? "50%" : "unset",
-    objectFit: "cover"
-});
-
-const AvatarImage = (props: SingleImageUploadProps) => {
-    return (
-        <SingleImageUpload
-            {...props}
-            imagePreviewProps={{
-                transform: { width: 300 },
-                style: getImagePreviewStyles(props.round || false)
-            }}
-        />
-    );
-};
-
-export default AvatarImage;
diff --git a/packages/app-admin-users-cognito/src/ui/components/AvatarImage/AvatarImage.tsx b/packages/app-admin-users-cognito/src/ui/components/AvatarImage/AvatarImage.tsx
new file mode 100644
index 00000000000..655fffce682
--- /dev/null
+++ b/packages/app-admin-users-cognito/src/ui/components/AvatarImage/AvatarImage.tsx
@@ -0,0 +1,40 @@
+import * as React from "react";
+import { SingleImageUpload, SingleImageUploadProps } from "@webiny/app-admin";
+import { AvatarImagePreview } from "./AvatarImagePreview";
+import { AvatarImageTrigger } from "~/ui/components/AvatarImage/AvatarImageTrigger";
+import { cn } from "@webiny/admin-ui";
+
+export const AvatarImage = ({ round, ...props }: SingleImageUploadProps) => {
+    return (
+        <div className={"wby-w-full wby-flex-1"}>
+            <div
+                className={cn([
+                    "wby-size-[128px] wby-mx-auto wby-relative wby-overflow-hidden",
+                    round && "wby-rounded-full"
+                ])}
+            >
+                <SingleImageUpload
+                    {...props}
+                    className={"wby-p-0 !wby-border-none"}
+                    variant={"ghost"}
+                    type={"area"}
+                    renderFilePreview={({ onReplaceItem, onRemoveItem, value, disabled }) => {
+                        return (
+                            <AvatarImagePreview
+                                onReplaceItem={onReplaceItem}
+                                onRemoveItem={onRemoveItem}
+                                value={value}
+                                disabled={disabled}
+                            />
+                        );
+                    }}
+                    renderTrigger={({ onSelectItem, disabled }) => {
+                        return (
+                            <AvatarImageTrigger disabled={disabled} onSelectItem={onSelectItem} />
+                        );
+                    }}
+                />
+            </div>
+        </div>
+    );
+};
diff --git a/packages/app-admin-users-cognito/src/ui/components/AvatarImage/AvatarImagePreview.tsx b/packages/app-admin-users-cognito/src/ui/components/AvatarImage/AvatarImagePreview.tsx
new file mode 100644
index 00000000000..4b7d687699d
--- /dev/null
+++ b/packages/app-admin-users-cognito/src/ui/components/AvatarImage/AvatarImagePreview.tsx
@@ -0,0 +1,88 @@
+import React from "react";
+import { ReactComponent as TrashIcon } from "@webiny/icons/delete.svg";
+import { ReactComponent as EditIcon } from "@webiny/icons/edit.svg";
+
+import { Icon, IconButton, Tooltip, cn, type FileItemFormatted } from "@webiny/admin-ui";
+
+interface AvatarImagePreviewProps {
+    value: FileItemFormatted;
+    onReplaceItem: any;
+    onRemoveItem: any;
+    disabled?: boolean;
+}
+
+const AvatarImagePreview = ({
+    value,
+    onReplaceItem,
+    onRemoveItem,
+    disabled
+}: AvatarImagePreviewProps) => {
+    return (
+        <div className={"wby-w-full wby-flex-1"}>
+            <div className={cn("wby-size-[128px] wby-mx-auto wby-relative wby-overflow-hidden")}>
+                <div className={"wby-size-full"}>
+                    <img
+                        src={value.url}
+                        alt={value.name}
+                        className={"wby-object-cover wby-size-full"}
+                    />
+                </div>
+                <div
+                    className={cn([
+                        "wby-flex wby-justify-center wby-items-center wby-gap-xs wby-size-full",
+                        "wby-absolute wby-top-0 wby-left-0",
+                        "wby-bg-neutral-xstrong/90",
+                        "wby-opacity-0 hover:wby-opacity-100 wby-transition-opacity"
+                    ])}
+                >
+                    {onReplaceItem && (
+                        <Tooltip
+                            content={"Select another image"}
+                            trigger={
+                                <IconButton
+                                    icon={
+                                        <Icon
+                                            icon={<EditIcon />}
+                                            label={"Select another image"}
+                                            size={"md"}
+                                            color={"neutral"}
+                                            disabled={disabled}
+                                        />
+                                    }
+                                    variant={"ghost-negative"}
+                                    size={"sm"}
+                                    onClick={onReplaceItem}
+                                    disabled={disabled}
+                                />
+                            }
+                        ></Tooltip>
+                    )}
+                    {onRemoveItem && (
+                        <Tooltip
+                            content={"Remove image"}
+                            trigger={
+                                <IconButton
+                                    icon={
+                                        <Icon
+                                            icon={<TrashIcon />}
+                                            label={"Remove"}
+                                            size={"md"}
+                                            color={"neutral"}
+                                            disabled={disabled}
+                                        />
+                                    }
+                                    variant={"ghost-negative"}
+                                    size={"sm"}
+                                    onClick={onRemoveItem}
+                                    disabled={disabled}
+                                />
+                            }
+                        />
+                    )}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export { AvatarImagePreview, type AvatarImagePreviewProps };
diff --git a/packages/app-admin-users-cognito/src/ui/components/AvatarImage/AvatarImageTrigger.tsx b/packages/app-admin-users-cognito/src/ui/components/AvatarImage/AvatarImageTrigger.tsx
new file mode 100644
index 00000000000..a5b62a11c63
--- /dev/null
+++ b/packages/app-admin-users-cognito/src/ui/components/AvatarImage/AvatarImageTrigger.tsx
@@ -0,0 +1,44 @@
+import React from "react";
+import { ReactComponent as ImageIcon } from "@webiny/icons/image.svg";
+import { cn, Icon, IconButton, Tooltip } from "@webiny/admin-ui";
+
+interface AvatarImageTriggerProps {
+    onSelectItem: () => void;
+    disabled?: boolean;
+}
+
+const AvatarImageTrigger = ({ onSelectItem, disabled }: AvatarImageTriggerProps) => {
+    return (
+        <div
+            data-role={"select-image"}
+            className={cn([
+                "wby-size-[128px]",
+                "wby-flex wby-justify-center wby-items-center wby-gap-xs",
+                "wby-bg-neutral-strong"
+            ])}
+        >
+            <Tooltip
+                content={"Select from library"}
+                trigger={
+                    <IconButton
+                        icon={
+                            <Icon
+                                icon={<ImageIcon />}
+                                label={"Select from library"}
+                                size={"lg"}
+                                color={"neutral"}
+                                disabled={disabled}
+                            />
+                        }
+                        variant={"ghost-negative"}
+                        size={"lg"}
+                        onClick={onSelectItem}
+                        disabled={disabled}
+                    />
+                }
+            />
+        </div>
+    );
+};
+
+export { AvatarImageTrigger };
diff --git a/packages/app-admin-users-cognito/src/ui/components/AvatarImage/index.ts b/packages/app-admin-users-cognito/src/ui/components/AvatarImage/index.ts
new file mode 100644
index 00000000000..8cacda6a31f
--- /dev/null
+++ b/packages/app-admin-users-cognito/src/ui/components/AvatarImage/index.ts
@@ -0,0 +1 @@
+export * from "./AvatarImage";
diff --git a/packages/app-admin-users-cognito/src/ui/views/Account/Account.tsx b/packages/app-admin-users-cognito/src/ui/views/Account/Account.tsx
index e2ea63262ed..773237cd2c7 100644
--- a/packages/app-admin-users-cognito/src/ui/views/Account/Account.tsx
+++ b/packages/app-admin-users-cognito/src/ui/views/Account/Account.tsx
@@ -9,7 +9,7 @@ import { CircularProgress } from "@webiny/ui/Progress";
 import { SnackbarAction } from "@webiny/ui/Snackbar";
 import { Cell, Grid } from "@webiny/ui/Grid";
 import { validation } from "@webiny/validation";
-import AvatarImage from "../../components/AvatarImage";
+import { AvatarImage } from "../../components/AvatarImage";
 import { GET_CURRENT_USER, UPDATE_CURRENT_USER } from "./graphql";
 import { config as appConfig } from "@webiny/app/config";
 
diff --git a/packages/app-admin-users-cognito/src/ui/views/Users/UsersDataList.tsx b/packages/app-admin-users-cognito/src/ui/views/Users/UsersDataList.tsx
index 1c7060f993b..65234688ba6 100644
--- a/packages/app-admin-users-cognito/src/ui/views/Users/UsersDataList.tsx
+++ b/packages/app-admin-users-cognito/src/ui/views/Users/UsersDataList.tsx
@@ -1,8 +1,10 @@
 import React, { useCallback, useMemo, useState } from "react";
 import { useMutation, useQuery } from "@apollo/react-hooks";
 import orderBy from "lodash/orderBy";
+import { Avatar, Button, Grid, Select, Tooltip } from "@webiny/admin-ui";
+import { ReactComponent as AddIcon } from "@webiny/icons/add.svg";
 import { i18n } from "@webiny/app/i18n";
-import { Image } from "@webiny/app/components";
+import { useSecurity } from "@webiny/app-security";
 import {
     DataList,
     ScrollList,
@@ -13,22 +15,17 @@ import {
     ListActions,
     ListItemGraphic,
     DataListModalOverlayAction,
-    DataListModalOverlay
+    DataListModalOverlay,
+    ListItemTextPrimary
 } from "@webiny/ui/List";
-import { ButtonIcon, ButtonSecondary } from "@webiny/ui/Button";
-import { Avatar } from "@webiny/ui/Avatar";
-import { Cell, Grid } from "@webiny/ui/Grid";
-import { Select } from "@webiny/ui/Select";
+import { DeleteIcon } from "@webiny/ui/List/DataList/icons";
 import { useRouter } from "@webiny/react-router";
 import { useSnackbar } from "@webiny/app-admin/hooks/useSnackbar";
 import { useConfirmationDialog } from "@webiny/app-admin/hooks/useConfirmationDialog";
 import SearchUI from "@webiny/app-admin/components/SearchUI";
-import { ReactComponent as AddIcon } from "@webiny/app-admin/assets/icons/add-18px.svg";
-import { ReactComponent as FilterIcon } from "@webiny/app-admin/assets/icons/filter-24px.svg";
 import { DELETE_USER, LIST_USERS } from "./graphql";
 import { deserializeSorters } from "../utils";
 import { UserItem } from "~/UserItem";
-import { DeleteAction } from "./components/DeleteAction";
 
 const t = i18n.ns("app-identity/admin/users/data-list");
 
@@ -58,6 +55,7 @@ interface FilterUsersCallable {
 const UsersDataList = () => {
     const [filter, setFilter] = useState("");
     const [sort, setSort] = useState<string>(SORTERS[0].sorter);
+    const { identity } = useSecurity();
     const { history } = useRouter();
     const { showSnackbar } = useSnackbar();
     const { showConfirmation } = useConfirmationDialog({
@@ -123,17 +121,17 @@ const UsersDataList = () => {
         () => (
             <DataListModalOverlay>
                 <Grid>
-                    <Cell span={12}>
-                        <Select value={sort} onChange={setSort} label={t`Sort by`}>
-                            {SORTERS.map(({ label, sorter }) => {
-                                return (
-                                    <option key={label} value={sorter}>
-                                        {label}
-                                    </option>
-                                );
-                            })}
-                        </Select>
-                    </Cell>
+                    <Grid.Column span={12}>
+                        <Select
+                            value={sort}
+                            onChange={setSort}
+                            label={t`Sort by`}
+                            options={SORTERS.map(({ label, sorter: value }) => ({
+                                label,
+                                value
+                            }))}
+                        />
+                    </Grid.Column>
                 </Grid>
             </DataListModalOverlay>
         ),
@@ -146,28 +144,31 @@ const UsersDataList = () => {
         <DataList
             title={t`Admin Users`}
             actions={
-                <ButtonSecondary
+                <Button
+                    text={t`New`}
+                    icon={<AddIcon />}
+                    size={"sm"}
+                    className={"wby-ml-xs"}
                     data-testid="new-record-button"
                     onClick={() => history.push("/admin-users?new=true")}
-                >
-                    <ButtonIcon icon={<AddIcon />} /> {t`New User`}
-                </ButtonSecondary>
+                />
             }
             data={userList}
             loading={loading}
             search={
-                <SearchUI value={filter} onChange={setFilter} inputPlaceholder={t`Search users`} />
+                <SearchUI
+                    value={filter}
+                    onChange={setFilter}
+                    inputPlaceholder={t`Search users...`}
+                />
             }
             modalOverlay={usersDataListModalOverlay}
             modalOverlayAction={
-                <DataListModalOverlayAction
-                    icon={<FilterIcon />}
-                    data-testid={"default-data-list.filter"}
-                />
+                <DataListModalOverlayAction data-testid={"default-data-list.filter"} />
             }
         >
             {({ data }: { data: UserItem[] }) => (
-                <ScrollList twoLine avatarList data-testid="default-data-list">
+                <ScrollList data-testid="default-data-list">
                     {data.map(item => (
                         <ListItem
                             key={item.id}
@@ -176,24 +177,43 @@ const UsersDataList = () => {
                         >
                             <ListItemGraphic>
                                 <Avatar
-                                    renderImage={props => (
-                                        <Image {...props} transform={{ width: 100 }} />
-                                    )}
-                                    src={item.avatar ? item.avatar.src : item.gravatar}
-                                    fallbackText={item.firstName}
-                                    alt={t`User's avatar.`}
+                                    image={
+                                        <Avatar.Image
+                                            src={item.avatar ? item.avatar.src : item.gravatar}
+                                            alt={item.firstName}
+                                        />
+                                    }
+                                    fallback={
+                                        <Avatar.Fallback delayMs={0}>
+                                            {item.firstName.charAt(0)}
+                                        </Avatar.Fallback>
+                                    }
                                 />
                             </ListItemGraphic>
                             <ListItemText
                                 onClick={() => history.push(`/admin-users?id=${item.id}`)}
                             >
-                                {item.firstName} {item.lastName}
+                                <ListItemTextPrimary>
+                                    {item.firstName} {item.lastName}
+                                </ListItemTextPrimary>
                                 <ListItemTextSecondary>{item.email}</ListItemTextSecondary>
                             </ListItemText>
 
                             <ListItemMeta>
                                 <ListActions>
-                                    <DeleteAction item={item} onClick={() => deleteItem(item)} />
+                                    {identity && identity.id !== item.id ? (
+                                        <DeleteIcon
+                                            onClick={() => deleteItem(item)}
+                                            data-testid={"default-data-list.delete"}
+                                        />
+                                    ) : (
+                                        <Tooltip
+                                            content={
+                                                <span>{t`You can't delete your own user account.`}</span>
+                                            }
+                                            trigger={<DeleteIcon disabled />}
+                                        />
+                                    )}
                                 </ListActions>
                             </ListItemMeta>
                         </ListItem>
diff --git a/packages/app-admin-users-cognito/src/ui/views/Users/UsersFormView.tsx b/packages/app-admin-users-cognito/src/ui/views/Users/UsersFormView.tsx
index 27e6e5f00f6..f7b9092b6a1 100644
--- a/packages/app-admin-users-cognito/src/ui/views/Users/UsersFormView.tsx
+++ b/packages/app-admin-users-cognito/src/ui/views/Users/UsersFormView.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-import styled from "@emotion/styled";
 import { UIView } from "@webiny/app-admin/ui/UIView";
 import { FormAPI, GenericFormData } from "@webiny/form";
 import { validation } from "@webiny/validation";
@@ -9,10 +8,10 @@ import {
     AccordionItemElement
 } from "@webiny/app-admin/ui/elements/AccordionElement";
 import { InputElement } from "@webiny/app-admin/ui/elements/form/InputElement";
-import { ReactComponent as SecurityIcon } from "~/assets/icons/security-24px.svg";
-import { ReactComponent as SecurityTeamsIcon } from "~/assets/icons/security-teams-24px.svg";
-import { ReactComponent as SettingsIcon } from "~/assets/icons/settings-24px.svg";
-import AvatarImage from "../../components/AvatarImage";
+import { ReactComponent as SecurityIcon } from "@webiny/icons/gpp_maybe.svg";
+import { ReactComponent as SecurityTeamsIcon } from "@webiny/icons/admin_panel_settings.svg";
+import { ReactComponent as SettingsIcon } from "@webiny/icons/settings.svg";
+import { AvatarImage } from "../../components/AvatarImage";
 import { GroupsMultiAutocompleteElement } from "~/ui/elements/GroupsMultiAutocompleteElement";
 import { TeamsMultiAutocompleteElement } from "~/ui/elements/TeamsMultiAutocompleteElement";
 import { UseUserForm, useUserForm } from "~/ui/views/Users/hooks/useUserForm";
@@ -20,14 +19,6 @@ import { FormView } from "@webiny/app-admin/ui/views/FormView";
 import { FormElementRenderProps } from "@webiny/app-admin/ui/elements/form/FormElement";
 import { config as appConfig } from "@webiny/app/config";
 
-const FormWrapper = styled("div")({
-    margin: "0 100px"
-});
-
-const AvatarWrapper = styled("div")({
-    margin: "24px 100px 32px"
-});
-
 interface UsersFormViewParams {
     teams?: boolean;
 }
@@ -90,11 +81,11 @@ export class UsersFormView extends UIView {
             const { Bind } = props.formProps;
 
             return (
-                <AvatarWrapper>
+                <div className={"wby-pt-xl"}>
                     <Bind name="avatar">
                         <AvatarImage round />
                     </Bind>
-                </AvatarWrapper>
+                </div>
             );
         });
 
@@ -207,6 +198,6 @@ export class UsersFormView extends UIView {
             );
         }
 
-        this.wrapWith(({ children }) => <FormWrapper>{children}</FormWrapper>);
+        this.wrapWith(({ children }) => <div>{children}</div>);
     }
 }
diff --git a/packages/app-admin-users-cognito/tsconfig.build.json b/packages/app-admin-users-cognito/tsconfig.build.json
index f8e4b397d29..32728a19055 100644
--- a/packages/app-admin-users-cognito/tsconfig.build.json
+++ b/packages/app-admin-users-cognito/tsconfig.build.json
@@ -2,6 +2,7 @@
   "extends": "../../tsconfig.build.json",
   "include": ["src"],
   "references": [
+    { "path": "../admin-ui/tsconfig.build.json" },
     { "path": "../app/tsconfig.build.json" },
     { "path": "../app-admin/tsconfig.build.json" },
     { "path": "../app-admin-cognito/tsconfig.build.json" },
diff --git a/packages/app-admin-users-cognito/tsconfig.json b/packages/app-admin-users-cognito/tsconfig.json
index 7d062beaf52..096d4cac286 100644
--- a/packages/app-admin-users-cognito/tsconfig.json
+++ b/packages/app-admin-users-cognito/tsconfig.json
@@ -2,6 +2,7 @@
   "extends": "../../tsconfig.json",
   "include": ["src", "__tests__"],
   "references": [
+    { "path": "../admin-ui" },
     { "path": "../app" },
     { "path": "../app-admin" },
     { "path": "../app-admin-cognito" },
@@ -21,6 +22,8 @@
     "paths": {
       "~/*": ["./src/*"],
       "~tests/*": ["./__tests__/*"],
+      "@webiny/admin-ui/*": ["../admin-ui/src/*"],
+      "@webiny/admin-ui": ["../admin-ui/src"],
       "@webiny/app/*": ["../app/src/*"],
       "@webiny/app": ["../app/src"],
       "@webiny/app-admin/*": ["../app-admin/src/*"],
diff --git a/packages/app-admin/package.json b/packages/app-admin/package.json
index dbc5a088933..f8afd969097 100644
--- a/packages/app-admin/package.json
+++ b/packages/app-admin/package.json
@@ -16,16 +16,17 @@
     "@emotion/react": "11.10.8",
     "@emotion/styled": "11.10.6",
     "@iconify/json": "^2.2.142",
-    "@material-design-icons/svg": "^0.14.13",
     "@monaco-editor/react": "^4.7.0",
     "@svgr/webpack": "^6.1.1",
     "@types/mime": "^2.0.3",
     "@types/react": "18.2.79",
+    "@webiny/admin-ui": "0.0.0",
     "@webiny/app": "0.0.0",
     "@webiny/app-security": "0.0.0",
     "@webiny/app-theme": "0.0.0",
     "@webiny/app-wcp": "0.0.0",
     "@webiny/form": "0.0.0",
+    "@webiny/icons": "0.0.0",
     "@webiny/lexical-editor": "0.0.0",
     "@webiny/lexical-theme": "0.0.0",
     "@webiny/plugins": "0.0.0",
@@ -43,7 +44,6 @@
     "apollo-utilities": "^1.3.4",
     "classnames": "^2.5.1",
     "dot-prop-immutable": "^2.1.1",
-    "downshift": "^3.1.2",
     "emotion": "10.0.27",
     "graphlib": "^2.1.8",
     "graphql": "^15.9.0",
@@ -56,13 +56,13 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-draggable": "^4.4.6",
-    "react-hotkeyz": "^1.0.4",
     "react-resizable": "^3.0.5",
     "react-resizable-panels": "^2.0.19",
     "react-transition-group": "^4.4.5",
     "react-virtualized": "^9.22.5",
     "reset-css": "^5.0.1",
     "store": "^2.0.12",
+    "tinycolor2": "^1.6.0",
     "unicode-emoji-json": "^0.4.0"
   },
   "devDependencies": {
@@ -71,7 +71,9 @@
     "@types/graphlib": "^2.1.12",
     "@types/is-hotkey": "^0.1.10",
     "@types/react-resizable": "^3.0.8",
+    "@types/react-transition-group": "^4.4.12",
     "@types/store": "^2.0.2",
+    "@types/tinycolor2": "^1.4.6",
     "@webiny/cli": "0.0.0",
     "@webiny/project-utils": "0.0.0",
     "monaco-editor": "^0.52.2",
diff --git a/packages/app-admin/src/base/Admin.tsx b/packages/app-admin/src/base/Admin.tsx
index 5d2e7bbda16..641cd881e66 100644
--- a/packages/app-admin/src/base/Admin.tsx
+++ b/packages/app-admin/src/base/Admin.tsx
@@ -2,14 +2,12 @@ import React from "react";
 import { App } from "@webiny/app";
 import { ThemeProvider } from "@webiny/app-theme";
 import { WcpProvider } from "@webiny/app-wcp";
-import { CircularProgress } from "@webiny/ui/Progress";
 import { ApolloClientFactory, createApolloProvider } from "./providers/ApolloProvider";
 import { Base } from "./Base";
 import { createTelemetryProvider } from "./providers/TelemetryProvider";
 import { createUiStateProvider } from "./providers/UiStateProvider";
-import { SearchProvider } from "./ui/Search";
-import { UserMenuProvider } from "./ui/UserMenu";
-import { NavigationProvider } from "./ui/Navigation";
+import { createAdminUiStateProvider } from "./providers/AdminUiStateProvider";
+import { createUiProviders } from "./providers/UiProviders";
 import { createDialogsProvider } from "~/components/Dialogs/DialogsContext";
 import { DefaultIcons, IconPickerConfigProvider } from "~/components/IconPicker/config";
 
@@ -21,22 +19,23 @@ export interface AdminProps {
 export const Admin = ({ children, createApolloClient }: AdminProps) => {
     const ApolloProvider = createApolloProvider(createApolloClient);
     const TelemetryProvider = createTelemetryProvider();
+    const UIProviders = createUiProviders();
     const UiStateProvider = createUiStateProvider();
+    const AdminUiStateProvider = createAdminUiStateProvider();
     const DialogsProvider = createDialogsProvider();
 
     return (
         <ApolloProvider>
             <ThemeProvider>
-                <WcpProvider loader={<CircularProgress label={"Loading..."} />}>
+                <WcpProvider>
                     <App
                         providers={[
                             TelemetryProvider,
+                            UIProviders,
                             UiStateProvider,
-                            SearchProvider,
-                            UserMenuProvider,
-                            NavigationProvider,
                             DialogsProvider,
-                            IconPickerConfigProvider
+                            IconPickerConfigProvider,
+                            AdminUiStateProvider
                         ]}
                     >
                         <Base />
diff --git a/packages/app-admin/src/base/Base.tsx b/packages/app-admin/src/base/Base.tsx
index 113b738f3c6..7a04f76d8be 100644
--- a/packages/app-admin/src/base/Base.tsx
+++ b/packages/app-admin/src/base/Base.tsx
@@ -1,77 +1,21 @@
 import React, { memo } from "react";
-import { ReactComponent as FileIcon } from "@material-design-icons/svg/filled/insert_drive_file.svg";
-import { ReactComponent as SettingsIcon } from "@material-design-icons/svg/outlined/settings.svg";
-import { Plugin } from "@webiny/app";
 import { plugins } from "@webiny/plugins";
-import { HasPermission } from "@webiny/app-security";
-import { AddMenu, AddRoute, Dashboard, Layout, NotFound } from "~/index";
-import { ReactComponent as DocsIcon } from "~/assets/icons/icon-documentation.svg";
-import { ReactComponent as SlackIcon } from "~/assets/icons/slack-logo.svg";
-import { ReactComponent as GithubIcon } from "~/assets/icons/github-brands.svg";
-import { FileManager } from "~/base/ui/FileManager";
-import { globalSearchHotkey } from "~/plugins/globalSearch";
 import { uiLayoutPlugin } from "~/plugins/uiLayoutRenderer";
-import { Version } from "~/base/Version";
+import { Menus } from "./Base/Menus";
+import { Routes } from "./Base/Routes";
+import { Tenant } from "./Base/Tenant";
+import { AdminConfigProvider } from "~/config/AdminConfig";
 
 const BaseExtension = () => {
-    plugins.register([globalSearchHotkey, uiLayoutPlugin]);
+    plugins.register([uiLayoutPlugin]);
 
     return (
-        <Plugin>
-            <AddMenu name={"settings"} label={"Settings"} icon={<SettingsIcon />} pin={"last"} />
-            <HasPermission name={"fm.file"}>
-                <FileManager>
-                    {({ showFileManager }) => (
-                        <AddMenu
-                            name={"fileManager"}
-                            label={"File Manager"}
-                            icon={<FileIcon />}
-                            tags={["footer"]}
-                            onClick={showFileManager}
-                            testId={"admin-drawer-footer-menu-file-manager"}
-                        />
-                    )}
-                </FileManager>
-            </HasPermission>
-            <AddMenu
-                name={"documentation"}
-                label={"Documentation"}
-                icon={<DocsIcon />}
-                path={"https://www.webiny.com/docs"}
-                rel={"noopener noreferrer"}
-                target={"_blank"}
-                tags={["footer"]}
-            />
-            <AddMenu
-                name={"slack"}
-                label={"Slack"}
-                icon={<SlackIcon />}
-                path={"https://www.webiny.com/slack/"}
-                rel={"noopener noreferrer"}
-                target={"_blank"}
-                tags={["footer"]}
-            />
-            <AddMenu
-                name={"github"}
-                label={"Github"}
-                icon={<GithubIcon />}
-                path={"https://github.com/webiny/webiny-js"}
-                rel={"noopener noreferrer"}
-                target={"_blank"}
-                tags={["footer"]}
-            />
-            <AddMenu name={"version"} tags={["footer"]} element={<Version />} pin={"last"} />
-            <AddRoute path={"/"}>
-                <Layout title={"Welcome!"}>
-                    <Dashboard />
-                </Layout>
-            </AddRoute>
-            <AddRoute path={"*"}>
-                <Layout title={"Not Accessible"}>
-                    <NotFound />
-                </Layout>
-            </AddRoute>
-        </Plugin>
+        <>
+            <AdminConfigProvider />
+            <Tenant />
+            <Menus />
+            <Routes />
+        </>
     );
 };
 
diff --git a/packages/app-admin/src/base/Base/Menus.tsx b/packages/app-admin/src/base/Base/Menus.tsx
new file mode 100644
index 00000000000..cbb9cf6b6a3
--- /dev/null
+++ b/packages/app-admin/src/base/Base/Menus.tsx
@@ -0,0 +1,154 @@
+import React from "react";
+import { HasPermission } from "@webiny/app-security";
+import { FileManager } from "~/base/ui/FileManager";
+import { WebinyVersion } from "./Menus/WebinyVersion";
+import { SupportMenuItems } from "./Menus/SupportMenuItems";
+import { AdminConfig } from "~/config/AdminConfig";
+import { ReactComponent as DashboardIcon } from "@webiny/icons/space_dashboard.svg";
+import { ReactComponent as SettingsIcon } from "@webiny/icons/settings.svg";
+import { ReactComponent as FileManagerIcon } from "@webiny/icons/folder_open.svg";
+import { ReactComponent as InfoIcon } from "@webiny/icons/info.svg";
+import { ReactComponent as ApiPlaygroundIcon } from "@webiny/icons/swap_horiz.svg";
+import { ReactComponent as SlackIcon } from "@webiny/icons/numbers.svg";
+import { ReactComponent as DocsIcon } from "@webiny/icons/summarize.svg";
+import { ReactComponent as GithubIcon } from "@webiny/icons/route.svg";
+import { ReactComponent as MoreIcon } from "@webiny/icons/more_vert.svg";
+import { DropdownMenu } from "@webiny/admin-ui";
+
+const { Menu } = AdminConfig;
+
+export const Menus = React.memo(() => {
+    return (
+        <AdminConfig>
+            <HasPermission name={"fm.file"}>
+                <Menu
+                    name={"fm"}
+                    element={
+                        <FileManager>
+                            {({ showFileManager }) => (
+                                <Menu.Item
+                                    text={"File Manager"}
+                                    icon={
+                                        <Menu.Item.Icon
+                                            label="File Manager"
+                                            element={<FileManagerIcon />}
+                                        />
+                                    }
+                                    onClick={() => showFileManager()}
+                                    data-testid={"admin-drawer-footer-menu-file-manager"}
+                                />
+                            )}
+                        </FileManager>
+                    }
+                />
+            </HasPermission>
+            <Menu
+                name={"home"}
+                pin={"start"}
+                element={
+                    <Menu.Link
+                        to={"/"}
+                        text={"Home"}
+                        icon={<Menu.Link.Icon label="Home" element={<DashboardIcon />} />}
+                    />
+                }
+            />
+            <Menu
+                name={"settings"}
+                pin={"end"}
+                element={
+                    <Menu.Item
+                        text={"Settings"}
+                        icon={<Menu.Link.Icon label="Settings" element={<SettingsIcon />} />}
+                    />
+                }
+            />
+
+            <Menu.Support
+                name={"api-playground"}
+                element={
+                    <Menu.Support.Link
+                        text={"API Playground"}
+                        icon={
+                            <Menu.Support.Link.Icon
+                                label="API Playground"
+                                element={<ApiPlaygroundIcon />}
+                            />
+                        }
+                        to={"/api-playground"}
+                    />
+                }
+            />
+
+            <Menu.Support
+                name={"docs"}
+                element={
+                    <Menu.Support.Link
+                        text={"Documentation"}
+                        icon={<Menu.Support.Link.Icon label="Docs" element={<DocsIcon />} />}
+                        to={"https://www.webiny.com/docs"}
+                        rel={"noopener noreferrer"}
+                        target={"_blank"}
+                    />
+                }
+            />
+
+            <Menu.Support
+                name={"github"}
+                element={
+                    <Menu.Support.Link
+                        text={"GitHub"}
+                        icon={<Menu.Support.Link.Icon label="GitHub" element={<GithubIcon />} />}
+                        to={"https://github.com/webiny/webiny-js"}
+                        rel={"noopener noreferrer"}
+                        target={"_blank"}
+                    />
+                }
+            />
+
+            <Menu.Support
+                name={"slack"}
+                element={
+                    <Menu.Support.Link
+                        text={"Slack"}
+                        icon={<Menu.Support.Link.Icon label="Slack" element={<SlackIcon />} />}
+                        to={"https://www.webiny.com/slack"}
+                        rel={"noopener noreferrer"}
+                        target={"_blank"}
+                    />
+                }
+            />
+
+            <Menu.Support
+                name={"webiny-version"}
+                pin={"end"}
+                element={
+                    <>
+                        <DropdownMenu.Separator />
+                        <DropdownMenu.Item text={<WebinyVersion />} readOnly />
+                    </>
+                }
+            />
+
+            <Menu.Footer
+                name={"support"}
+                element={
+                    <DropdownMenu
+                        className={"wby-w-[225px]"}
+                        trigger={
+                            <Menu.Item
+                                text={"Support"}
+                                icon={<Menu.Item.Icon label="Support" element={<InfoIcon />} />}
+                                action={<Menu.Item.Action element={<MoreIcon />} />}
+                            />
+                        }
+                    >
+                        <SupportMenuItems />
+                    </DropdownMenu>
+                }
+            />
+        </AdminConfig>
+    );
+});
+
+Menus.displayName = "Menus";
diff --git a/packages/app-admin/src/base/Base/Menus/SupportMenuItems.tsx b/packages/app-admin/src/base/Base/Menus/SupportMenuItems.tsx
new file mode 100644
index 00000000000..68e74c6c453
--- /dev/null
+++ b/packages/app-admin/src/base/Base/Menus/SupportMenuItems.tsx
@@ -0,0 +1,15 @@
+import React from "react";
+import { AdminConfig } from "~/config/AdminConfig";
+
+const { useAdminConfig } = AdminConfig;
+
+export const SupportMenuItems = () => {
+    const { supportMenus } = useAdminConfig();
+    return supportMenus.map(menu => {
+        if (!React.isValidElement(menu.element)) {
+            return null;
+        }
+
+        return React.cloneElement(menu.element, { key: menu.name });
+    });
+};
diff --git a/packages/app-admin/src/base/Base/Menus/WebinyVersion.tsx b/packages/app-admin/src/base/Base/Menus/WebinyVersion.tsx
new file mode 100644
index 00000000000..a5ae7324ee4
--- /dev/null
+++ b/packages/app-admin/src/base/Base/Menus/WebinyVersion.tsx
@@ -0,0 +1,25 @@
+import React, { useMemo } from "react";
+import { config as appConfig } from "@webiny/app/config";
+import { useWcp } from "~/index";
+import { Tag } from "@webiny/admin-ui";
+
+export const WebinyVersion = () => {
+    const wbyVersion = appConfig.getKey("WEBINY_VERSION", process.env.REACT_APP_WEBINY_VERSION);
+    const wcp = useWcp();
+
+    const wcpBadge = useMemo(() => {
+        const wcpProject = wcp.getProject();
+        if (!wcpProject) {
+            return null;
+        }
+
+        return <Tag variant={"accent"} content={"WCP"} className={"wby-ml-sm-extra"} />;
+    }, []);
+
+    return (
+        <div className={"wby-flex wby-items-center"}>
+            Webiny v{wbyVersion}
+            {wcpBadge}
+        </div>
+    );
+};
diff --git a/packages/app-admin/src/base/Base/Routes.tsx b/packages/app-admin/src/base/Base/Routes.tsx
new file mode 100644
index 00000000000..1b03136e3ea
--- /dev/null
+++ b/packages/app-admin/src/base/Base/Routes.tsx
@@ -0,0 +1,33 @@
+import React from "react";
+import { Dashboard, Layout, NotFound } from "~/index";
+import { AdminConfig } from "~/config/AdminConfig";
+
+const { Route } = AdminConfig;
+
+export const Routes = React.memo(() => {
+    return (
+        <AdminConfig>
+            <Route
+                name={"home"}
+                path={"/"}
+                element={
+                    <Layout title={"Welcome!"}>
+                        <Dashboard />
+                    </Layout>
+                }
+            />
+
+            <Route
+                name={"default"}
+                path={"*"}
+                element={
+                    <Layout title={"Not Accessible"}>
+                        <NotFound />
+                    </Layout>
+                }
+            />
+        </AdminConfig>
+    );
+});
+
+Routes.displayName = "Routes";
diff --git a/packages/app-admin/src/base/Base/Tenant.tsx b/packages/app-admin/src/base/Base/Tenant.tsx
new file mode 100644
index 00000000000..5b949247f9c
--- /dev/null
+++ b/packages/app-admin/src/base/Base/Tenant.tsx
@@ -0,0 +1,17 @@
+import React from "react";
+import { AdminConfig } from "~/config/AdminConfig";
+import wbyLogo from "./Tenant/wby-logo.png";
+
+export const Tenant = React.memo(() => {
+    const { Tenant } = AdminConfig;
+    return (
+        <AdminConfig.Public>
+            <Tenant>
+                <Tenant.Name value={"Webiny"} />
+                <Tenant.Logo element={<img src={wbyLogo} alt={"Webiny"} />} />
+            </Tenant>
+        </AdminConfig.Public>
+    );
+});
+
+Tenant.displayName = "Tenant";
diff --git a/packages/app-admin/src/base/Base/Tenant/wby-logo.png b/packages/app-admin/src/base/Base/Tenant/wby-logo.png
new file mode 100644
index 00000000000..ee207a1d70d
Binary files /dev/null and b/packages/app-admin/src/base/Base/Tenant/wby-logo.png differ
diff --git a/packages/app-admin/src/base/Version.tsx b/packages/app-admin/src/base/Version.tsx
deleted file mode 100644
index 7f654753641..00000000000
--- a/packages/app-admin/src/base/Version.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import React, { useMemo } from "react";
-import { css } from "emotion";
-import styled from "@emotion/styled";
-import { ListItem } from "@webiny/ui/List";
-import { config as appConfig } from "@webiny/app/config";
-import { Typography } from "@webiny/ui/Typography";
-import { Tooltip } from "@webiny/ui/Tooltip";
-import { useWcp } from "~/index";
-
-export const subFooter = css`
-    .mdc-drawer &.mdc-list-item {
-        border-top: 1px solid var(--mdc-theme-on-background);
-        padding: 10px 16px;
-        margin: 10px 0 0;
-    }
-`;
-
-const WcpBadge = styled.span`
-    background-color: var(--mdc-theme-primary, #6200ee);
-    display: inline-block;
-    color: white;
-    padding: 2px 4px;
-    border-radius: 5px;
-    font-size: 12px;
-    font-weight: bold;
-    line-height: 14px;
-    margin-left: 5px;
-`;
-
-export const Version = () => {
-    const wbyVersion = appConfig.getKey("WEBINY_VERSION", process.env.REACT_APP_WEBINY_VERSION);
-    const wcp = useWcp();
-
-    const wcpBadge = useMemo(() => {
-        const wcpProject = wcp.getProject();
-
-        if (!wcpProject) {
-            return null;
-        }
-
-        const tooltipContent = (
-            <span>
-                {wcpProject.orgId}/{wcpProject.projectId}
-            </span>
-        );
-
-        return (
-            <Tooltip content={tooltipContent}>
-                <WcpBadge>WCP</WcpBadge>
-            </Tooltip>
-        );
-    }, [wcp]);
-
-    return (
-        <ListItem ripple={false} className={subFooter}>
-            <Typography use={"body2"}>
-                Webiny v{wbyVersion}
-                {wcpBadge}
-            </Typography>
-        </ListItem>
-    );
-};
diff --git a/packages/app-admin/src/base/WebinyVersion.tsx b/packages/app-admin/src/base/WebinyVersion.tsx
new file mode 100644
index 00000000000..a5ae7324ee4
--- /dev/null
+++ b/packages/app-admin/src/base/WebinyVersion.tsx
@@ -0,0 +1,25 @@
+import React, { useMemo } from "react";
+import { config as appConfig } from "@webiny/app/config";
+import { useWcp } from "~/index";
+import { Tag } from "@webiny/admin-ui";
+
+export const WebinyVersion = () => {
+    const wbyVersion = appConfig.getKey("WEBINY_VERSION", process.env.REACT_APP_WEBINY_VERSION);
+    const wcp = useWcp();
+
+    const wcpBadge = useMemo(() => {
+        const wcpProject = wcp.getProject();
+        if (!wcpProject) {
+            return null;
+        }
+
+        return <Tag variant={"accent"} content={"WCP"} className={"wby-ml-sm-extra"} />;
+    }, []);
+
+    return (
+        <div className={"wby-flex wby-items-center"}>
+            Webiny v{wbyVersion}
+            {wcpBadge}
+        </div>
+    );
+};
diff --git a/packages/app-admin/src/base/providers/AdminUiStateProvider.tsx b/packages/app-admin/src/base/providers/AdminUiStateProvider.tsx
new file mode 100644
index 00000000000..951f517ff48
--- /dev/null
+++ b/packages/app-admin/src/base/providers/AdminUiStateProvider.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+import { UiProvider } from "@webiny/app/contexts/Ui";
+import { createProvider } from "@webiny/app";
+
+interface AdminUiStateProviderProps {
+    children: React.ReactNode;
+}
+
+export const createAdminUiStateProvider = () => {
+    return createProvider(Component => {
+        return function AdminUiStateProvider({ children }: AdminUiStateProviderProps) {
+            return (
+                <UiProvider>
+                    <Component>{children}</Component>
+                </UiProvider>
+            );
+        };
+    });
+};
diff --git a/packages/app-admin/src/base/providers/UiProviders.tsx b/packages/app-admin/src/base/providers/UiProviders.tsx
new file mode 100644
index 00000000000..01472196638
--- /dev/null
+++ b/packages/app-admin/src/base/providers/UiProviders.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+import { createProvider } from "@webiny/app";
+import { Providers } from "@webiny/admin-ui";
+
+interface UiProvidersProps {
+    children: React.ReactNode;
+}
+
+export const createUiProviders = () => {
+    return createProvider(Component => {
+        return function UiProviders({ children }: UiProvidersProps) {
+            return (
+                <Providers>
+                    <Component>{children}</Component>
+                </Providers>
+            );
+        };
+    });
+};
diff --git a/packages/app-admin/src/base/ui/CenteredView.tsx b/packages/app-admin/src/base/ui/CenteredView.tsx
index 6531c813170..db2172a7a12 100644
--- a/packages/app-admin/src/base/ui/CenteredView.tsx
+++ b/packages/app-admin/src/base/ui/CenteredView.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-import styled from "@emotion/styled";
 import { makeDecoratable } from "~/index";
 
 export interface CenteredViewProps {
@@ -7,27 +6,13 @@ export interface CenteredViewProps {
     maxWidth?: number | string;
 }
 
-const Container = styled.div({
-    display: "flex",
-    justifyContent: "center"
-});
-
-interface Props {
-    maxWidth: string | number;
-}
-
-const Width = styled.div((props: Props) => ({
-    maxWidth: props.maxWidth,
-    width: "100%"
-}));
-
 export const CenteredView = makeDecoratable(
     "CenteredView",
-    ({ maxWidth = 700, children }: CenteredViewProps) => {
+    ({ maxWidth, children }: CenteredViewProps) => {
         return (
-            <Container>
-                <Width maxWidth={maxWidth}>{children}</Width>
-            </Container>
+            <div className={"wby-container"} style={{ maxWidth }}>
+                {children}
+            </div>
         );
     }
 );
diff --git a/packages/app-admin/src/base/ui/FileManager.tsx b/packages/app-admin/src/base/ui/FileManager.tsx
index fe675f02bc9..a5f246c9a2d 100644
--- a/packages/app-admin/src/base/ui/FileManager.tsx
+++ b/packages/app-admin/src/base/ui/FileManager.tsx
@@ -104,7 +104,7 @@ type ShowFileManagerProps =
 
 export const FileManager = ({ children, render, onChange, ...rest }: FileManagerProps) => {
     const containerRef = useRef<HTMLElement>(getPortalTarget());
-    const [show, setShow] = useState(rest.show ?? false);
+    const [show, setShow] = useState(rest.show);
     const onChangeRef = useRef(onChange);
 
     useEffect(() => {
diff --git a/packages/app-admin/src/base/ui/Logo.tsx b/packages/app-admin/src/base/ui/Logo.tsx
index d182e6a0c76..fda2ac48b80 100644
--- a/packages/app-admin/src/base/ui/Logo.tsx
+++ b/packages/app-admin/src/base/ui/Logo.tsx
@@ -1,24 +1,8 @@
-import React, { useMemo } from "react";
-import { Compose, createVoidComponent, makeDecoratable } from "@webiny/app";
+import React from "react";
+import { createVoidComponent, makeDecoratable } from "@webiny/app";
 
 export const Logo = makeDecoratable("Logo", () => {
     return <LogoRenderer />;
 });
 
 export const LogoRenderer = makeDecoratable("LogoRenderer", createVoidComponent());
-
-interface AddLogoProps {
-    logo: JSX.Element;
-}
-
-export const AddLogo = ({ logo }: AddLogoProps) => {
-    const LogoHOC = useMemo(() => {
-        return () => {
-            return function Logo() {
-                return logo;
-            };
-        };
-    }, []);
-
-    return <Compose component={LogoRenderer} with={LogoHOC} />;
-};
diff --git a/packages/app-admin/src/base/ui/Menu.tsx b/packages/app-admin/src/base/ui/Menu.tsx
deleted file mode 100644
index c393f205c79..00000000000
--- a/packages/app-admin/src/base/ui/Menu.tsx
+++ /dev/null
@@ -1,176 +0,0 @@
-import React, { createContext, useContext, useEffect } from "react";
-import { makeDecoratable, useNavigation } from "~/index";
-
-export interface MenuUpdater {
-    (menuItem: MenuData | undefined | null): MenuData | undefined;
-}
-
-export interface MenuContext {
-    menuItem: MenuData | null;
-    setMenu(id: string, updater: MenuUpdater): void;
-    removeMenu(id: string): void;
-}
-
-const MenuContext = createContext<MenuContext | undefined>(undefined);
-MenuContext.displayName = "MenuContext";
-
-const useMenu = () => {
-    return useContext(MenuContext);
-};
-
-export interface MenuProps {
-    name: string;
-    label?: string;
-    path?: string;
-    icon?: JSX.Element;
-    onClick?: () => void;
-    testId?: string;
-    tags?: string[];
-    target?: string;
-    rel?: string;
-    element?: JSX.Element;
-    pin?: "first" | "last";
-}
-
-export interface MenuData extends MenuProps {
-    children: MenuData[];
-}
-
-export interface AddMenuProps extends MenuProps {
-    children?: React.ReactNode;
-}
-
-export const createEmptyMenu = (name: string): MenuData => {
-    return {
-        name,
-        tags: [],
-        children: []
-    };
-};
-
-const keys: (keyof MenuData)[] = [
-    "label",
-    "path",
-    "icon",
-    "onClick",
-    "testId",
-    "tags",
-    "target",
-    "rel",
-    "element",
-    "pin"
-];
-
-const mergeMenuItems = (item1: MenuData, item2: MenuData): MenuData => {
-    return {
-        ...item1,
-        ...keys.reduce((map, key) => ({ ...map, [key]: item2[key] ?? item1[key] }), {}),
-        children: (item2.children || []).reduce(
-            (acc, menu) => {
-                const index = acc.findIndex(i => i.name === menu.name);
-                if (index > -1) {
-                    acc[index] = mergeMenuItems(acc[index], menu);
-                } else {
-                    acc.push(menu);
-                }
-                return acc;
-            },
-            [...item1.children]
-        )
-    };
-};
-
-/**
- * Register a new menu item into the Admin app.
- */
-export const AddMenu = makeDecoratable("AddMenu", ({ children, ...props }: AddMenuProps) => {
-    const menu = useMenu();
-    const navigation = useNavigation();
-
-    useEffect(() => {
-        if (menu) {
-            menu.setMenu(props.name, existing => {
-                if (!existing) {
-                    return { ...props, children: [] } as MenuData;
-                }
-
-                return mergeMenuItems(existing, props as MenuData);
-            });
-        } else {
-            navigation.setMenu(props.name, existing => {
-                /**
-                 * We return props because this will break otherwise.
-                 * TODO @pavel check if this is correct
-                 */
-                if (!existing) {
-                    return props as MenuData;
-                }
-                return mergeMenuItems(existing, props as MenuData);
-            });
-        }
-
-        return () => {
-            if (menu) {
-                menu.removeMenu(props.name);
-            } else {
-                navigation.removeMenu(props.name);
-            }
-        };
-    }, []);
-
-    const context: MenuContext = {
-        menuItem: { ...props, children: [] },
-        removeMenu(name) {
-            (menu || navigation).setMenu(props.name, existing => {
-                if (!existing) {
-                    return undefined;
-                }
-
-                const childIndex = existing.children.findIndex(ch => ch.name === name);
-                if (childIndex > -1) {
-                    return {
-                        ...existing,
-                        children: [
-                            ...existing.children.slice(0, childIndex),
-                            ...existing.children.slice(childIndex + 1)
-                        ]
-                    };
-                }
-
-                return existing;
-            });
-        },
-        setMenu(name: string, updater: MenuUpdater) {
-            (menu || navigation).setMenu(props.name, existing => {
-                if (!existing) {
-                    existing = createEmptyMenu(props.name);
-                }
-
-                const subItems = existing.children;
-
-                const childIndex = subItems.findIndex(ch => ch.name === name);
-                if (childIndex === -1) {
-                    return {
-                        ...existing,
-                        children: [...subItems, updater(null)].filter(Boolean) as MenuData[]
-                    };
-                }
-
-                return {
-                    ...existing,
-                    children: [
-                        ...subItems.slice(0, childIndex),
-                        updater(subItems[childIndex]),
-                        ...subItems.slice(childIndex + 1)
-                    ].filter(Boolean) as MenuData[]
-                };
-            });
-        }
-    };
-
-    if (!children) {
-        return null;
-    }
-
-    return <MenuContext.Provider value={context}>{children}</MenuContext.Provider>;
-});
diff --git a/packages/app-admin/src/base/ui/Navigation.tsx b/packages/app-admin/src/base/ui/Navigation.tsx
index ce46e662d73..4333d10c123 100644
--- a/packages/app-admin/src/base/ui/Navigation.tsx
+++ b/packages/app-admin/src/base/ui/Navigation.tsx
@@ -1,197 +1,8 @@
-import React, {
-    createContext,
-    Fragment,
-    useCallback,
-    useContext,
-    useEffect,
-    useMemo,
-    useState
-} from "react";
-import { generateId } from "@webiny/utils";
-import { createProvider, createVoidComponent, makeDecoratable, Plugins } from "@webiny/app";
-import { AddMenu as Menu, createEmptyMenu, MenuData, MenuProps, MenuUpdater, Tags } from "~/index";
-import { plugins } from "@webiny/plugins";
-import { AdminMenuPlugin } from "~/types";
-import { ItemProps, SectionProps } from "~/plugins/MenuPlugin";
-
-export interface NavigationContext {
-    menuItems: MenuData[];
-    setMenu(id: string, update: MenuUpdater): void;
-    removeMenu(id: string): void;
-}
-
-const NavigationContext = createContext<NavigationContext>({
-    menuItems: [],
-    setMenu: () => {
-        return void 0;
-    },
-    removeMenu: () => {
-        return void 0;
-    }
-});
-NavigationContext.displayName = "NavigationContext";
-
-export function useNavigation() {
-    return useContext(NavigationContext);
-}
-
-type LegacyMenuProps = MenuProps | SectionProps | ItemProps;
-
-// IMPORTANT! The following component is for BACKWARDS COMPATIBILITY purposes only!
-// It is not a public component, and is not even exported from this file. We need it to take care of
-// scaffolded plugins in users' projects, as well as our own applications (Page Builder and Form Builder).
-const LegacyMenu = (props: LegacyMenuProps & { children: React.ReactNode }) => {
-    return (
-        <Menu
-            {...props}
-            name={(props as MenuProps).name || generateId()}
-            label={props.label as string}
-        >
-            {props.children}
-        </Menu>
-    );
-};
-
-const LegacyMenuPlugins = () => {
-    // IMPORTANT! The following piece of code is for BACKWARDS COMPATIBILITY purposes only!
-    const [menus, setMenus] = useState<JSX.Element | null>(null);
-
-    useEffect(() => {
-        const menuPlugins = plugins.byType<AdminMenuPlugin>("admin-menu");
-        if (!menuPlugins) {
-            return;
-        }
-
-        const menuElements = menuPlugins.map(plugin => {
-            // TODO @ts-refactor figure out correct types or write a comment to leave as React.FC
-            return (
-                <Plugins key={plugin.name}>
-                    {plugin.render({
-                        Menu: LegacyMenu as React.FC,
-                        Item: LegacyMenu as React.FC,
-                        Section: LegacyMenu as React.FC
-                    })}
-                </Plugins>
-            );
-        });
-        /**
-         * TODO Figure out correct types for the menus.
-         */
-        // @ts-expect-error
-        setMenus(menuElements);
-    }, []);
-
-    return menus;
-};
-
-interface NavigationProviderProps {
-    children: React.ReactNode;
-}
-
-export const NavigationProvider = createProvider(Component => {
-    return function NavigationProvider({ children }: NavigationProviderProps) {
-        const [menuItems, setState] = useState<MenuData[]>([]);
-
-        const setMenu = (id: string, updater: MenuUpdater): void => {
-            setState(state => {
-                const index = state.findIndex(m => m.name === id);
-
-                const newMenu = index > -1 ? updater(state[index]) : updater(createEmptyMenu(id));
-                if (!newMenu) {
-                    return [...state];
-                }
-                if (!newMenu.children) {
-                    newMenu.children = [];
-                }
-
-                return index > -1
-                    ? [...state.slice(0, index), newMenu, ...state.slice(index + 1)]
-                    : [...state, newMenu];
-            });
-        };
-        const removeMenu = useCallback(
-            (id: string) => {
-                setState(state => {
-                    const index = state.findIndex(m => m.name === id);
-
-                    if (index < 0) {
-                        return state;
-                    }
-
-                    return [...state.slice(0, index), ...state.slice(index + 1)];
-                });
-            },
-            [setState]
-        );
-
-        const context = useMemo<NavigationContext>(
-            () => ({
-                menuItems,
-                setMenu,
-                removeMenu
-            }),
-            [menuItems, setMenu, removeMenu]
-        );
-
-        return (
-            <NavigationContext.Provider value={context}>
-                <LegacyMenuPlugins />
-                <Component>{children}</Component>
-            </NavigationContext.Provider>
-        );
-    };
-});
+import React from "react";
+import { createVoidComponent, makeDecoratable } from "@webiny/app";
 
 export const Navigation = makeDecoratable("Navigation", () => {
-    return (
-        <Tags tags={{ location: "navigation" }}>
-            <NavigationRenderer />
-        </Tags>
-    );
+    return <NavigationRenderer />;
 });
 
 export const NavigationRenderer = makeDecoratable("NavigationRenderer", createVoidComponent());
-
-interface MenuItemContext {
-    menuItem?: MenuData;
-    depth: number;
-}
-
-const MenuItemContext = React.createContext<MenuItemContext>({
-    menuItem: undefined,
-    depth: -1
-});
-MenuItemContext.displayName = "MenuItemContext";
-
-export function useMenuItem() {
-    return React.useContext(MenuItemContext);
-}
-
-export interface MenuItemsProps {
-    menuItems: MenuData[];
-}
-
-export const MenuItems = makeDecoratable("MenuItems", ({ menuItems }: MenuItemsProps) => {
-    const menuItem = useMenuItem();
-
-    const depth = menuItem ? menuItem.depth : -1;
-
-    return (
-        <Fragment>
-            {menuItems.map(menuItem => (
-                <MenuItemContext.Provider
-                    key={menuItem.name}
-                    value={{ menuItem, depth: depth + 1 }}
-                >
-                    <MenuItem />
-                </MenuItemContext.Provider>
-            ))}
-        </Fragment>
-    );
-});
-
-export const MenuItem = () => {
-    return <MenuItemRenderer />;
-};
-
-export const MenuItemRenderer = makeDecoratable("MenuItemRenderer", createVoidComponent());
diff --git a/packages/app-admin/src/base/ui/Search.tsx b/packages/app-admin/src/base/ui/Search.tsx
deleted file mode 100644
index 7b036f4bb51..00000000000
--- a/packages/app-admin/src/base/ui/Search.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import React, { useCallback, useEffect, useState } from "react";
-import { createProvider, createVoidComponent, makeDecoratable } from "@webiny/app";
-
-export interface SearchOptionData {
-    route: string;
-    label: string;
-    search?: {
-        operator?: "and" | "or";
-        fields?: Array<string>;
-    };
-}
-
-export interface SearchContext {
-    options: SearchOptionData[];
-    addOption(option: SearchOptionData): void;
-}
-
-const SearchContext = React.createContext<SearchContext>({
-    options: [],
-    addOption: () => {
-        return void 0;
-    }
-});
-SearchContext.displayName = "SearchContext";
-
-export function useSearch() {
-    return React.useContext(SearchContext);
-}
-
-interface SearchProviderProps {
-    children: React.ReactNode;
-    [key: string]: any;
-}
-
-export const SearchProvider = createProvider(Component => {
-    return function SearchProvider({ children, ...props }: SearchProviderProps) {
-        const [options, setOptions] = useState<SearchOptionData[]>([]);
-
-        const addOption = useCallback<SearchContext["addOption"]>(
-            option => setOptions(options => [...options, option]),
-            [setOptions]
-        );
-
-        const context = {
-            options,
-            addOption
-        };
-
-        return (
-            <SearchContext.Provider value={context}>
-                <Component {...props}>{children}</Component>
-            </SearchContext.Provider>
-        );
-    };
-});
-
-export const Search = makeDecoratable("Search", () => {
-    return <SearchRenderer />;
-});
-
-export const SearchRenderer = makeDecoratable("SearchRenderer", createVoidComponent());
-
-export type SearchOptionProps = SearchOptionData;
-
-export const SearchOption = (props: SearchOptionProps) => {
-    const { addOption } = useSearch();
-
-    useEffect(() => {
-        addOption(props);
-    }, []);
-
-    return null;
-};
diff --git a/packages/app-admin/src/base/ui/TenantSelector.tsx b/packages/app-admin/src/base/ui/TenantSelector.tsx
new file mode 100644
index 00000000000..936be5b9a23
--- /dev/null
+++ b/packages/app-admin/src/base/ui/TenantSelector.tsx
@@ -0,0 +1,11 @@
+import React from "react";
+import { createVoidComponent, makeDecoratable } from "@webiny/app";
+
+export const TenantSelector = makeDecoratable("TenantSelector", () => {
+    return <TenantSelectorRenderer />;
+});
+
+export const TenantSelectorRenderer = makeDecoratable(
+    "TenantSelectorRenderer",
+    createVoidComponent()
+);
diff --git a/packages/app-admin/src/base/ui/UserMenu.tsx b/packages/app-admin/src/base/ui/UserMenu.tsx
index 7cbfc699d09..6d75c8508de 100644
--- a/packages/app-admin/src/base/ui/UserMenu.tsx
+++ b/packages/app-admin/src/base/ui/UserMenu.tsx
@@ -1,77 +1,18 @@
-import React, { Fragment, useCallback, useEffect, useState } from "react";
-import { createProvider, createVoidComponent, makeDecoratable } from "@webiny/app";
+import React from "react";
+import { createVoidComponent, makeDecoratable } from "@webiny/app";
 
-export interface UserMenuItemData {
-    label?: string;
-    icon?: JSX.Element;
-    path?: string;
-    onClick?: () => void;
-    element?: JSX.Element;
-}
-
-export interface UserMenuContext {
-    menuItems: UserMenuItemData[];
-    addMenuItem(item: UserMenuItemData): void;
-}
-
-const UserMenuContext = React.createContext<UserMenuContext>({
-    addMenuItem: () => {
-        return void 0;
-    },
-    menuItems: []
-});
-UserMenuContext.displayName = "UserMenuContext";
-
-export function useUserMenu() {
-    return React.useContext(UserMenuContext);
-}
-
-interface UserMenuProviderProps {
-    children: React.ReactNode;
-    [key: string]: any;
-}
-
-export const UserMenuProvider = createProvider(Component => {
-    return function UserMenuProvider({ children, ...props }: UserMenuProviderProps) {
-        const [menuItems, setItems] = useState<UserMenuItemData[]>([]);
-
-        const addMenuItem = useCallback<UserMenuContext["addMenuItem"]>(
-            item => {
-                setItems(items => [...items, item]);
-
-                return () => {
-                    setItems(items => {
-                        const index = items.findIndex(i => i === item);
-                        if (index < 0) {
-                            return items;
-                        }
-
-                        return [...items.slice(0, index), ...items.slice(index + 1)];
-                    });
-                };
-            },
-            [setItems]
-        );
-
-        const context = {
-            menuItems,
-            addMenuItem
-        };
-
-        return (
-            <UserMenuContext.Provider value={context}>
-                <Component {...props}>{children}</Component>
-            </UserMenuContext.Provider>
-        );
-    };
-});
+export * from "./UserMenu/UserMenuItem";
+export * from "./UserMenu/UserMenuLink";
+export * from "./UserMenu/UserMenuSeparator";
 
+// UserMenu
 export const UserMenu = makeDecoratable("UserMenu", () => {
     return <UserMenuRenderer />;
 });
 
 export const UserMenuRenderer = makeDecoratable("UserMenuRenderer", createVoidComponent());
 
+// UserMenuHandle
 export const UserMenuHandle = makeDecoratable("UserMenuHandle", () => {
     return <UserMenuHandleRenderer />;
 });
@@ -80,61 +21,3 @@ export const UserMenuHandleRenderer = makeDecoratable(
     "UserMenuHandleRenderer",
     createVoidComponent()
 );
-
-export interface UserMenuItemProps {
-    menuItem: UserMenuItemData;
-}
-
-export const UserMenuItem = makeDecoratable("UserMenuItem", ({ menuItem }: UserMenuItemProps) => {
-    return (
-        <UserMenuItemContext.Provider value={menuItem}>
-            <UserMenuItemRenderer />
-        </UserMenuItemContext.Provider>
-    );
-});
-
-export const UserMenuItemRenderer = makeDecoratable("UserMenuItemRenderer", createVoidComponent());
-
-export const AddUserMenuItem = (props: UserMenuItemProps["menuItem"]) => {
-    const { addMenuItem } = useUserMenu();
-
-    useEffect(() => {
-        return addMenuItem(props);
-    }, []);
-
-    return null;
-};
-
-export type UserMenuItemContext = UserMenuItemData;
-
-const UserMenuItemContext = React.createContext<UserMenuItemContext>({
-    element: undefined,
-    icon: undefined,
-    label: undefined,
-    onClick: () => {
-        return void 0;
-    },
-    path: undefined
-});
-UserMenuItemContext.displayName = "UserMenuItemContext";
-
-export function useUserMenuItem() {
-    return React.useContext(UserMenuItemContext);
-}
-
-export interface UserMenuItemsProps {
-    menuItems: UserMenuItemData[];
-}
-
-export const UserMenuItems = makeDecoratable(
-    "UserMenuItems",
-    ({ menuItems }: UserMenuItemsProps) => {
-        return (
-            <Fragment>
-                {menuItems.map((item, index) => (
-                    <UserMenuItem key={index} menuItem={item} />
-                ))}
-            </Fragment>
-        );
-    }
-);
diff --git a/packages/app-admin/src/base/ui/UserMenu/UserMenu.tsx b/packages/app-admin/src/base/ui/UserMenu/UserMenu.tsx
new file mode 100644
index 00000000000..e12b09074a1
--- /dev/null
+++ b/packages/app-admin/src/base/ui/UserMenu/UserMenu.tsx
@@ -0,0 +1,8 @@
+import React from "react";
+import { createVoidComponent, makeDecoratable } from "@webiny/app";
+
+export const UserMenu = makeDecoratable("UserMenu", () => {
+    return <UserMenuRenderer />;
+});
+
+export const UserMenuRenderer = makeDecoratable("UserMenuRenderer", createVoidComponent());
diff --git a/packages/app-admin/src/base/ui/UserMenu/UserMenuHandle.tsx b/packages/app-admin/src/base/ui/UserMenu/UserMenuHandle.tsx
new file mode 100644
index 00000000000..19a9b5a3d67
--- /dev/null
+++ b/packages/app-admin/src/base/ui/UserMenu/UserMenuHandle.tsx
@@ -0,0 +1,11 @@
+import React from "react";
+import { createVoidComponent, makeDecoratable } from "@webiny/app";
+
+export const UserMenuHandle = makeDecoratable("UserMenuHandle", () => {
+    return <UserMenuHandleRenderer />;
+});
+
+export const UserMenuHandleRenderer = makeDecoratable(
+    "UserMenuHandleRenderer",
+    createVoidComponent()
+);
diff --git a/packages/app-admin/src/base/ui/UserMenu/UserMenuItem.tsx b/packages/app-admin/src/base/ui/UserMenu/UserMenuItem.tsx
new file mode 100644
index 00000000000..a4b61191459
--- /dev/null
+++ b/packages/app-admin/src/base/ui/UserMenu/UserMenuItem.tsx
@@ -0,0 +1,42 @@
+import React from "react";
+import { createVoidComponent, makeDecoratable } from "~/index";
+import type {
+    DropdownMenuItemIconProps,
+    DropdownMenuItemButtonProps
+} from "@webiny/admin-ui/DropdownMenu/components/DropdownMenuItem";
+
+// UserMenuItem
+type UserMenuItemRendererProps = DropdownMenuItemButtonProps;
+
+const UserMenuItemRenderer = makeDecoratable(
+    "UserMenuItemRenderer",
+    createVoidComponent<UserMenuItemRendererProps>()
+);
+
+const UserMenuItem = makeDecoratable("UserMenuItem", (props: UserMenuItemRendererProps) => {
+    return <UserMenuItemRenderer {...props} />;
+});
+
+// UserMenuItem > Icon
+type UserMenuItemIconRendererProps = DropdownMenuItemIconProps;
+
+const UserMenuItemIconRenderer = makeDecoratable(
+    "UserMenuItemIcon",
+    createVoidComponent<UserMenuItemIconRendererProps>()
+);
+
+const UserMenuItemIcon = makeDecoratable(
+    "UserMenuItemIcon",
+    (props: UserMenuItemIconRendererProps) => {
+        return <UserMenuItemIconRenderer {...props} />;
+    }
+);
+
+export {
+    UserMenuItem,
+    UserMenuItemRenderer,
+    UserMenuItemIcon,
+    UserMenuItemIconRenderer,
+    type UserMenuItemRendererProps,
+    type UserMenuItemIconRendererProps
+};
diff --git a/packages/app-admin/src/base/ui/UserMenu/UserMenuLink.tsx b/packages/app-admin/src/base/ui/UserMenu/UserMenuLink.tsx
new file mode 100644
index 00000000000..85c718af4cd
--- /dev/null
+++ b/packages/app-admin/src/base/ui/UserMenu/UserMenuLink.tsx
@@ -0,0 +1,42 @@
+import React from "react";
+import { createVoidComponent, makeDecoratable } from "~/index";
+import type {
+    DropdownMenuItemIconProps,
+    DropdownMenuItemLinkProps
+} from "@webiny/admin-ui/DropdownMenu/components/DropdownMenuLink";
+
+// UserMenuLink
+type UserMenuLinkRendererProps = DropdownMenuItemLinkProps;
+
+const UserMenuLinkRenderer = makeDecoratable(
+    "UserMenuLinkRenderer",
+    createVoidComponent<UserMenuLinkRendererProps>()
+);
+
+const UserMenuLink = makeDecoratable("UserMenuLink", (props: UserMenuLinkRendererProps) => {
+    return <UserMenuLinkRenderer {...props} />;
+});
+
+// UserMenuLink > Icon
+type DropdownMenuItemIconRendererProps = DropdownMenuItemIconProps;
+
+const UserMenuLinkIconRenderer = makeDecoratable(
+    "UserMenuLinkIcon",
+    createVoidComponent<DropdownMenuItemIconProps>()
+);
+
+const UserMenuLinkIcon = makeDecoratable(
+    "UserMenuLinkIcon",
+    (props: DropdownMenuItemIconRendererProps) => {
+        return <UserMenuLinkIconRenderer {...props} />;
+    }
+);
+
+export {
+    UserMenuLink,
+    UserMenuLinkRenderer,
+    UserMenuLinkIcon,
+    UserMenuLinkIconRenderer,
+    type UserMenuLinkRendererProps,
+    type DropdownMenuItemIconRendererProps
+};
diff --git a/packages/app-admin/src/base/ui/UserMenu/UserMenuSeparator.tsx b/packages/app-admin/src/base/ui/UserMenu/UserMenuSeparator.tsx
new file mode 100644
index 00000000000..621cde85e1d
--- /dev/null
+++ b/packages/app-admin/src/base/ui/UserMenu/UserMenuSeparator.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+import { createVoidComponent, makeDecoratable } from "~/index";
+import type { DropdownMenuSeparatorProps } from "@webiny/admin-ui/DropdownMenu/components/DropdownMenuSeparator";
+
+type UserMenuSeparatorRendererProps = DropdownMenuSeparatorProps;
+
+const UserMenuSeparatorRenderer = makeDecoratable(
+    "UserMenuSeparatorRenderer",
+    createVoidComponent<UserMenuSeparatorRendererProps>()
+);
+
+const UserMenuSeparator = makeDecoratable(
+    "UserMenuSeparator",
+    (props: UserMenuSeparatorRendererProps) => {
+        return <UserMenuSeparatorRenderer {...props} />;
+    }
+);
+
+export { UserMenuSeparator, UserMenuSeparatorRenderer, type UserMenuSeparatorRendererProps };
diff --git a/packages/app-admin/src/components/AppInstaller/Sidebar.tsx b/packages/app-admin/src/components/AppInstaller/Sidebar.tsx
index a09a7020013..e15b62d230c 100644
--- a/packages/app-admin/src/components/AppInstaller/Sidebar.tsx
+++ b/packages/app-admin/src/components/AppInstaller/Sidebar.tsx
@@ -4,13 +4,8 @@ import styled from "@emotion/styled";
 import { Typography } from "@webiny/ui/Typography";
 import signInDivider from "./assets/sign-in-divider.svg";
 import { Installer } from "./useInstaller";
-import { Brand } from "~/base/ui/Brand";
 import { Tags } from "~/base/ui/Tags";
-
-const Logo = styled("div")({
-    padding: 15,
-    borderBottom: "1px solid var(--mdc-theme-background)"
-});
+import { Logo } from "~/base/ui/Logo";
 
 const List = styled("ul")({
     li: {
@@ -127,9 +122,7 @@ const Sidebar = ({ allInstallers, installer, showLogin }: SidebarProps) => {
 
     return (
         <Tags tags={{ location: "installer" }}>
-            <Logo>
-                <Brand />
-            </Logo>
+            <Logo />
             {installations.length > 0 && (
                 <Installations
                     title={"The following apps will be installed and configured:"}
diff --git a/packages/app-admin/src/components/BulkActions/useDialogWithReport/DialogMessage.tsx b/packages/app-admin/src/components/BulkActions/useDialogWithReport/DialogMessage.tsx
index d4916b67cba..20c9e3d3ae3 100644
--- a/packages/app-admin/src/components/BulkActions/useDialogWithReport/DialogMessage.tsx
+++ b/packages/app-admin/src/components/BulkActions/useDialogWithReport/DialogMessage.tsx
@@ -1,37 +1,33 @@
 import React from "react";
-import { ReactComponent as ErrorIcon } from "@material-design-icons/svg/round/error.svg";
-import { ReactComponent as SuccessIcon } from "@material-design-icons/svg/round/check_circle.svg";
-import { Icon } from "@webiny/ui/Icon";
-import { List, ListItemText, ListItemTextPrimary, ListItemTextSecondary } from "@webiny/ui/List";
+import { ReactComponent as ErrorIcon } from "@webiny/icons/error_outline.svg";
+import { ReactComponent as SuccessIcon } from "@webiny/icons/check_circle_outline.svg";
+import { List, Icon, cn } from "@webiny/admin-ui";
 import { ShowResultsDialogParams } from "./index";
 
-import { ListItem, ListItemGraphic, MessageContainer } from "./useDialogWithReport.styled";
-
 type ResultDialogMessageProps = Pick<ShowResultsDialogParams, "results" | "message">;
 
 export const ResultDialogMessage = ({ results, message }: ResultDialogMessageProps) => {
     return (
         <>
-            {message && <MessageContainer>{message}</MessageContainer>}
-            <List nonInteractive={true} twoLine={true}>
+            {message && <div className={"wby-mb-md"}>{message}</div>}
+            <List>
                 {results.map((result, index) => (
-                    <ListItem key={`item-${index}`} ripple={false}>
-                        <ListItemGraphic status={result.status}>
+                    <List.Item
+                        key={`item-${index}`}
+                        title={result.title}
+                        description={result.message}
+                        icon={
                             <Icon
                                 icon={result.status === "success" ? <SuccessIcon /> : <ErrorIcon />}
+                                label={result.status}
+                                className={cn(
+                                    result.status === "success"
+                                        ? "wby-fill-success"
+                                        : "wby-fill-destructive"
+                                )}
                             />
-                        </ListItemGraphic>
-                        <ListItemText>
-                            <ListItemTextPrimary>{result.title}</ListItemTextPrimary>
-                            <ListItemTextSecondary>
-                                <span
-                                    dangerouslySetInnerHTML={{
-                                        __html: `${result.message}`
-                                    }}
-                                ></span>
-                            </ListItemTextSecondary>
-                        </ListItemText>
-                    </ListItem>
+                        }
+                    />
                 ))}
             </List>
         </>
diff --git a/packages/app-admin/src/components/BulkActions/useDialogWithReport/useDialogWithReport.styled.tsx b/packages/app-admin/src/components/BulkActions/useDialogWithReport/useDialogWithReport.styled.tsx
deleted file mode 100644
index 9c745284bcf..00000000000
--- a/packages/app-admin/src/components/BulkActions/useDialogWithReport/useDialogWithReport.styled.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import styled from "@emotion/styled";
-import { ListItemGraphic as BaseListItemGraphic, ListItem as BaseListItem } from "@webiny/ui/List";
-
-export const MessageContainer = styled("div")`
-    margin-bottom: 16px;
-`;
-
-export const ListItem = styled(BaseListItem)`
-    overflow: visible;
-    height: auto !important;
-    align-items: flex-start;
-
-    .mdc-deprecated-list-item__secondary-text {
-        display: block;
-        white-space: normal;
-        overflow: visible;
-        text-overflow: clip;
-    }
-`;
-
-type ListItemGraphicProps = {
-    status: "success" | "failure";
-};
-
-export const ListItemGraphic = styled(BaseListItemGraphic)<ListItemGraphicProps>`
-    margin-top: 12px;
-    color: ${props =>
-        props.status === "failure"
-            ? "var(--mdc-theme-error)"
-            : "var(--mdc-theme-secondary)"} !important;
-`;
diff --git a/packages/app-admin/src/components/BulkActions/useDialogWithReport/useDialogWithReport.tsx b/packages/app-admin/src/components/BulkActions/useDialogWithReport/useDialogWithReport.tsx
index eca574809e1..e050e2a35e0 100644
--- a/packages/app-admin/src/components/BulkActions/useDialogWithReport/useDialogWithReport.tsx
+++ b/packages/app-admin/src/components/BulkActions/useDialogWithReport/useDialogWithReport.tsx
@@ -1,7 +1,7 @@
 import React from "react";
+import { OverlayLoader } from "@webiny/admin-ui";
 import { useUi } from "@webiny/app/hooks/useUi";
 import { i18n } from "@webiny/app/i18n";
-import { CircularProgress } from "@webiny/ui/Progress";
 import { ResultDialogMessage } from "./DialogMessage";
 import { Result } from "../Worker";
 
@@ -43,7 +43,7 @@ export const useDialogWithReport = (): UseDialogWithReportResponse => {
                     message: message || t`Are you sure you want to continue?`,
                     options: {
                         title: title || t`Confirm`,
-                        loading: <CircularProgress label={loadingLabel} />,
+                        loading: <OverlayLoader text={loadingLabel} />,
                         actions: {
                             accept: {
                                 label: t`Confirm`,
diff --git a/packages/app-admin/src/components/Buttons/Buttons.tsx b/packages/app-admin/src/components/Buttons/Buttons.tsx
index ff05637b08d..1dbf29df904 100644
--- a/packages/app-admin/src/components/Buttons/Buttons.tsx
+++ b/packages/app-admin/src/components/Buttons/Buttons.tsx
@@ -1,24 +1,25 @@
 import React from "react";
-import {
-    ButtonDefault as BaseButtonDefault,
-    ButtonPrimary as BaseButtonPrimary,
-    ButtonSecondary as BaseButtonSecondary,
-    IconButton as BaseIconButton,
-    ButtonProps as BaseButtonProps,
-    IconButtonProps as BaseIconButtonProps
-} from "@webiny/ui/Button";
-import { Tooltip, TooltipProps } from "@webiny/ui/Tooltip";
 
 import { ButtonsProvider } from "./useButtons";
 import { ButtonContainer } from "./Buttons.styles";
+import {
+    Button,
+    type ButtonProps as BaseButtonProps,
+    IconButton as BaseIconButton,
+    type IconButtonProps as BaseIconButtonProps,
+    Tooltip,
+    type TooltipProps
+} from "@webiny/admin-ui";
 
 interface ButtonProps extends Omit<BaseButtonProps, "onClick"> {
     onAction: (ev?: any) => void;
+    children: React.ReactNode;
 }
 
 interface IconButtonProps extends Omit<BaseIconButtonProps, "onClick"> {
+    label: string;
     onAction: (ev?: any) => void;
-    tooltipPlacement?: TooltipProps["placement"];
+    tooltipPlacement?: TooltipProps["side"];
 }
 
 export interface ButtonsProps {
@@ -34,28 +35,28 @@ export const Buttons = (props: ButtonsProps) => {
     }
 
     return (
-        <>
+        <div className={"wby-flex wby-items-center wby-gap-sm"}>
             {props.actions.map(action => (
-                <ButtonContainer key={action.name}>
+                <div className={"empty:wby-hidden wby-leading-none wby-text-0"} key={action.name}>
                     <ButtonsProvider>{action.element}</ButtonsProvider>
-                </ButtonContainer>
+                </div>
             ))}
-        </>
+        </div>
     );
 };
 
 export { ButtonContainer };
 
-export const ButtonDefault = ({ onAction, ...other }: ButtonProps) => {
-    return <BaseButtonDefault {...other} onClick={onAction} />;
+export const ButtonDefault = ({ onAction, children, ...other }: ButtonProps) => {
+    return <Button variant={"ghost"} {...other} onClick={onAction} text={children} />;
 };
 
-export const ButtonPrimary = ({ onAction, ...other }: ButtonProps) => {
-    return <BaseButtonPrimary {...other} onClick={onAction} />;
+export const ButtonPrimary = ({ onAction, children, ...other }: ButtonProps) => {
+    return <Button variant={"primary"} {...other} onClick={onAction} text={children} />;
 };
 
-export const ButtonSecondary = ({ onAction, ...other }: ButtonProps) => {
-    return <BaseButtonSecondary {...other} onClick={onAction} />;
+export const ButtonSecondary = ({ onAction, children, ...other }: ButtonProps) => {
+    return <Button variant={"secondary"} {...other} onClick={onAction} text={children} />;
 };
 
 export const IconButton = ({
@@ -67,9 +68,11 @@ export const IconButton = ({
 }: IconButtonProps) => {
     if (label && !disabled) {
         return (
-            <Tooltip content={label} placement={tooltipPlacement}>
-                <BaseIconButton {...other} onClick={onAction} />
-            </Tooltip>
+            <Tooltip
+                content={label}
+                side={tooltipPlacement}
+                trigger={<BaseIconButton variant={"ghost"} {...other} onClick={onAction} />}
+            />
         );
     }
 
diff --git a/packages/app-admin/src/components/Dialogs/CustomDialog.tsx b/packages/app-admin/src/components/Dialogs/CustomDialog.tsx
index 42aa6de2e0c..50f65dcbde0 100644
--- a/packages/app-admin/src/components/Dialogs/CustomDialog.tsx
+++ b/packages/app-admin/src/components/Dialogs/CustomDialog.tsx
@@ -1,6 +1,6 @@
 import React, { useContext } from "react";
 import { Form, FormOnSubmit, GenericFormData, useForm } from "@webiny/form";
-import { DialogContainer } from "./styled";
+import { Dialog as UiDialog } from "@webiny/ui/Dialog";
 
 interface DialogProps {
     onSubmit: (data: GenericFormData) => void;
@@ -16,7 +16,7 @@ export const CustomDialog = ({ open, loading, closeDialog, onSubmit, children }:
     };
 
     return (
-        <DialogContainer open={open} onClose={closeDialog}>
+        <UiDialog open={open} onClose={closeDialog}>
             {open ? (
                 <Form onSubmit={handleSubmit}>
                     {() => (
@@ -26,7 +26,7 @@ export const CustomDialog = ({ open, loading, closeDialog, onSubmit, children }:
                     )}
                 </Form>
             ) : null}
-        </DialogContainer>
+        </UiDialog>
     );
 };
 
diff --git a/packages/app-admin/src/components/Dialogs/Dialog.tsx b/packages/app-admin/src/components/Dialogs/Dialog.tsx
index 42170d46e31..8b146619309 100644
--- a/packages/app-admin/src/components/Dialogs/Dialog.tsx
+++ b/packages/app-admin/src/components/Dialogs/Dialog.tsx
@@ -1,12 +1,9 @@
 import React, { ReactNode } from "react";
-
 import { Form, FormOnSubmit, GenericFormData } from "@webiny/form";
 import { ButtonDefault, ButtonPrimary } from "@webiny/ui/Button";
-import { DialogActions, DialogContent, DialogTitle } from "@webiny/ui/Dialog";
+import { Dialog as UiDialog, DialogActions, DialogContent, DialogTitle } from "@webiny/ui/Dialog";
 import { CircularProgress } from "@webiny/ui/Progress";
 
-import { DialogContainer } from "./styled";
-
 interface DialogProps {
     title: ReactNode;
     content: ReactNode;
@@ -37,7 +34,7 @@ export const Dialog = ({
     };
 
     return (
-        <DialogContainer open={open} onClose={closeDialog}>
+        <UiDialog open={open} onClose={closeDialog}>
             {open ? (
                 <Form onSubmit={handleSubmit} data={formData}>
                     {({ submit }) => (
@@ -59,6 +56,6 @@ export const Dialog = ({
                     )}
                 </Form>
             ) : null}
-        </DialogContainer>
+        </UiDialog>
     );
 };
diff --git a/packages/app-admin/src/components/Dialogs/styled.tsx b/packages/app-admin/src/components/Dialogs/styled.tsx
deleted file mode 100644
index b724f8cdd4f..00000000000
--- a/packages/app-admin/src/components/Dialogs/styled.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import styled from "@emotion/styled";
-import { Dialog, DialogActions as DefaultDialogActions } from "@webiny/ui/Dialog";
-
-export const DialogContainer = styled(Dialog)`
-    z-index: 100;
-    .mdc-dialog__surface {
-        width: 600px;
-        min-width: 600px;
-        overflow: visible;
-    }
-`;
-
-export const DialogActions = styled(DefaultDialogActions)`
-    justify-content: space-between;
-`;
diff --git a/packages/app-admin/src/components/EmptyView.tsx b/packages/app-admin/src/components/EmptyView.tsx
index c4cb2597537..2752f853e00 100644
--- a/packages/app-admin/src/components/EmptyView.tsx
+++ b/packages/app-admin/src/components/EmptyView.tsx
@@ -1,55 +1,33 @@
 import React, { ReactElement } from "react";
-import styled from "@emotion/styled";
-import { Typography } from "@webiny/ui/Typography";
-import { ReactComponent as TouchIcon } from "@material-design-icons/svg/filled/touch_app.svg";
+import { Icon, Text } from "@webiny/admin-ui";
+import { ReactComponent as FileIcon } from "@webiny/icons/description.svg";
 
-const EmptyViewWrapper = styled("div")({
-    width: "100%",
-    height: "80%",
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "center",
-    justifyContent: "center",
-
-    "& .media": {
-        "& svg": {
-            width: 75,
-            height: 75,
-            fill: "var(--mdc-theme-text-icon-on-background)"
-        },
-        marginBottom: 30
-    },
-    "& .title__container": {
-        maxWidth: 276,
-        textAlign: "center",
-        marginBottom: 24,
-        "& .title": {
-            color: "var(--mdc-theme-text-secondary-on-background)"
-        }
-    },
-    "& .action__container": {
-        "& .mdc-button": {
-            padding: "0px 16px",
-            backgroundColor: "var(--mdc-theme-surface)"
-        }
-    }
-});
 export interface EmptyViewProps {
     icon?: ReactElement;
     title: string;
-    action: ReactElement | null;
+    action?: ReactElement | null;
 }
-const EmptyView = ({ icon = <TouchIcon />, title, action }: EmptyViewProps) => {
+const EmptyView = ({ icon = <FileIcon />, title, action }: EmptyViewProps) => {
     return (
-        <EmptyViewWrapper>
-            <div className={"media"}>{icon}</div>
-            <div className="title__container">
-                <Typography use={"subtitle1"} className={"title"}>
-                    {title}
-                </Typography>
+        <div className="wby-w-full wby-h-full wby-flex wby-flex-col wby-items-center wby-justify-center wby-gap-md">
+            <div className="wby-flex wby-justify-center">
+                <div
+                    style={{ width: 128, height: 128 }}
+                    className="wby-flex wby-justify-center wby-items-center wby-bg-neutral-dimmed wby-rounded-full wby-fill-neutral-strong [&_svg]:wby-size-[48px]"
+                >
+                    <Icon icon={icon} label={"Empty"} />
+                </div>
             </div>
-            <div className="action__container">{action}</div>
-        </EmptyViewWrapper>
+            <Text
+                size={"md"}
+                className={"wby-text-center wby-text-neutral-strong"}
+                as={"div"}
+                style={{ maxWidth: 276 }}
+            >
+                {title}
+            </Text>
+            {action && <div className={"wby-flex wby-justify-center wby-gap-sm"}>{action}</div>}
+        </div>
     );
 };
 
diff --git a/packages/app-admin/src/components/Filters/Filters.styled.tsx b/packages/app-admin/src/components/Filters/Filters.styled.tsx
deleted file mode 100644
index 6dfaea3c786..00000000000
--- a/packages/app-admin/src/components/Filters/Filters.styled.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import styled from "@emotion/styled";
-
-export const FiltersContainer = styled.div`
-    width: 100%;
-    height: auto;
-    background-color: var(--mdc-theme-surface);
-    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
-    padding: 8px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-`;
-
-export const FormContainer = styled.div`
-    display: flex;
-    flex-wrap: wrap;
-    width: 100%;
-`;
-
-export const FilterContainer = styled.div`
-    padding: 8px;
-    align-items: center;
-    display: flex;
-`;
diff --git a/packages/app-admin/src/components/Filters/Filters.tsx b/packages/app-admin/src/components/Filters/Filters.tsx
index 5b4146e0215..cf9e8d66ae5 100644
--- a/packages/app-admin/src/components/Filters/Filters.tsx
+++ b/packages/app-admin/src/components/Filters/Filters.tsx
@@ -1,8 +1,7 @@
 import React from "react";
+import { Separator } from "@webiny/admin-ui";
 import { Form, FormOnSubmit, FormProps, GenericFormData } from "@webiny/form";
 
-import { FilterContainer, FiltersContainer, FormContainer } from "./Filters.styled";
-
 type Filter = {
     name: string;
     element: React.ReactElement;
@@ -28,17 +27,23 @@ export const Filters = <T extends GenericFiltersData = GenericFiltersData>(
     }
 
     return (
-        <FiltersContainer data-testid={props["data-testid"] || "filters-container"}>
-            <Form data={props.data} onChange={props.onChange}>
-                {() => (
-                    <FormContainer>
-                        {props.filters.map(filter => (
-                            <FilterContainer key={filter.name}>{filter.element}</FilterContainer>
-                        ))}
-                        {props.children}
-                    </FormContainer>
-                )}
-            </Form>
-        </FiltersContainer>
+        <>
+            <div
+                className={"wby-w-full wby-bg-neutral-base wby-px-md wby-my-sm"}
+                data-testid={props["data-testid"] || "filters-container"}
+            >
+                <Form data={props.data} onChange={props.onChange}>
+                    {() => (
+                        <div className={"wby-w-full wby-flex wby-gap-sm wby-flex-wrap"}>
+                            {props.filters.map(filter => (
+                                <div key={filter.name}>{filter.element}</div>
+                            ))}
+                            {props.children}
+                        </div>
+                    )}
+                </Form>
+            </div>
+            <Separator />
+        </>
     );
 };
diff --git a/packages/app-admin/src/components/Filters/FiltersToggle.tsx b/packages/app-admin/src/components/Filters/FiltersToggle.tsx
new file mode 100644
index 00000000000..80b588c9ebf
--- /dev/null
+++ b/packages/app-admin/src/components/Filters/FiltersToggle.tsx
@@ -0,0 +1,36 @@
+import React from "react";
+import { IconButton, Tooltip } from "@webiny/admin-ui";
+import { ReactComponent as FilterIcon } from "@webiny/icons/filter_list.svg";
+import { ReactComponent as CloseFilterIcon } from "@webiny/icons/filter_list_off.svg";
+
+interface IconProps {
+    showingFilters?: boolean;
+}
+
+const Icon = ({ showingFilters }: IconProps) => {
+    return showingFilters ? <CloseFilterIcon /> : <FilterIcon />;
+};
+const IconComponent = React.memo(Icon);
+
+export interface FiltersToggleProps {
+    onFiltersToggle: () => void;
+    showingFilters: boolean;
+    "data-testid"?: string;
+}
+
+export const FiltersToggle = (props: FiltersToggleProps) => {
+    return (
+        <Tooltip
+            side={"bottom"}
+            content={props.showingFilters ? "Hide filters" : "Show filters"}
+            trigger={
+                <IconButton
+                    variant={"ghost"}
+                    icon={<IconComponent showingFilters={props.showingFilters} />}
+                    onClick={props.onFiltersToggle}
+                    data-testid={props["data-testid"]}
+                />
+            }
+        />
+    );
+};
diff --git a/packages/app-admin/src/components/Filters/index.ts b/packages/app-admin/src/components/Filters/index.ts
index f5a9d59fa71..0c4e2cef718 100644
--- a/packages/app-admin/src/components/Filters/index.ts
+++ b/packages/app-admin/src/components/Filters/index.ts
@@ -1 +1,2 @@
 export * from "./Filters";
+export * from "./FiltersToggle";
diff --git a/packages/app-admin/src/components/FloatingActionButton.tsx b/packages/app-admin/src/components/FloatingActionButton.tsx
index 51df3256efa..f9b0baf6f72 100644
--- a/packages/app-admin/src/components/FloatingActionButton.tsx
+++ b/packages/app-admin/src/components/FloatingActionButton.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 import { ButtonFloating } from "@webiny/ui/Button";
-import { ReactComponent as AddIcon } from "@material-design-icons/svg/outlined/add.svg";
+import { ReactComponent as AddIcon } from "@webiny/icons/add.svg";
 
 interface FloatingActionButtonProps {
     children: React.ReactNode;
diff --git a/packages/app-admin/src/components/IconPicker/IconPicker.styles.ts b/packages/app-admin/src/components/IconPicker/IconPicker.styles.ts
deleted file mode 100644
index bcc597c447f..00000000000
--- a/packages/app-admin/src/components/IconPicker/IconPicker.styles.ts
+++ /dev/null
@@ -1,127 +0,0 @@
-import styled from "@emotion/styled";
-import { ReactComponent as SearchIcon } from "@material-design-icons/svg/outlined/search.svg";
-
-import { ButtonSecondary } from "@webiny/ui/Button";
-
-import { ICON_PICKER_SIZE } from "./types";
-
-export const IconPickerWrapper = styled.div`
-    .mdc-menu-surface {
-        overflow: visible !important;
-    }
-`;
-
-export const IconPickerLabel = styled.div`
-    margin-bottom: 5px;
-    margin-left: 2px;
-    color: ${props => props.theme.styles.colors.color3};
-`;
-
-export const IconPickerInput = styled.div`
-    background-color: ${props => props.theme.styles.colors.color5};
-    border-bottom: 1px solid ${props => props.theme.styles.colors.color3};
-    color: ${props => props.theme.styles.colors.color3};
-    padding: 8px;
-    height: 32px;
-    width: 32px;
-    cursor: pointer;
-    :hover {
-        border-bottom: 1px solid ${props => props.theme.styles.colors.color3};
-    }
-`;
-
-export const MenuHeader = styled.div`
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    text-transform: uppercase;
-    padding: 12px;
-    height: 28px;
-    border-bottom: 1px solid ${props => props.theme.styles.colors.color5};
-    color: ${props => props.theme.styles.colors.color4};
-
-    & > svg {
-        cursor: pointer;
-        fill: ${props => props.theme.styles.colors.color4};
-    }
-`;
-
-export const MenuContent = styled.div<{ size?: string }>`
-    position: relative;
-    width: ${({ size }) => (size === ICON_PICKER_SIZE.SMALL ? "279px" : "364px")};
-`;
-
-export const Row = styled.div`
-    display: flex;
-    align-items: center;
-`;
-
-export const Cell = styled.div<{ isActive: boolean }>`
-    cursor: pointer;
-    background-color: ${({ isActive, theme }) =>
-        isActive ? theme.styles.colors.color5 : theme.styles.colors.color6};
-
-    &:hover {
-        background: ${({ theme }) => theme.styles.colors.color5};
-    }
-
-    & > * {
-        padding: 4px;
-    }
-`;
-
-export const CategoryLabel = styled.div`
-    align-self: flex-end;
-    margin-bottom: 4px;
-    text-transform: uppercase;
-    ${props => props.theme.styles.typography.paragraphs.stylesById("paragraph2")};
-    color: ${props => props.theme.styles.colors.color4};
-`;
-
-export const TabContentWrapper = styled.div<{ size?: string }>`
-    width: ${({ size }) => (size === ICON_PICKER_SIZE.SMALL ? "255px" : "340px")};
-    padding: 12px;
-`;
-
-export const ListWrapper = styled.div`
-    position: relative;
-`;
-
-export const NoResultsWrapper = styled.div`
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 400px;
-`;
-
-export const InputsWrapper = styled.div`
-    display: flex;
-    column-gap: 12px;
-    padding-bottom: 12px;
-    height: 40px;
-
-    [class$="color"] {
-        height: 24px;
-        width: 24px;
-        margin: 3px;
-        border-radius: 50%;
-    }
-
-    [class$="classNames"] {
-        display: none;
-    }
-
-    .webiny-ui-input {
-        height: 40px !important;
-    }
-`;
-
-export const PlaceholderIcon = styled(SearchIcon)`
-    fill: #00000040;
-`;
-
-export const RemoveButton = styled(ButtonSecondary)`
-    &.mdc-button {
-        height: 28px;
-    }
-`;
diff --git a/packages/app-admin/src/components/IconPicker/IconPickerComponent.tsx b/packages/app-admin/src/components/IconPicker/IconPickerComponent.tsx
index cd411125c38..9b1246904c3 100644
--- a/packages/app-admin/src/components/IconPicker/IconPickerComponent.tsx
+++ b/packages/app-admin/src/components/IconPicker/IconPickerComponent.tsx
@@ -1,36 +1,23 @@
-import React, { useEffect, useCallback } from "react";
+import React, { useEffect, useCallback, useMemo } from "react";
 import { observer } from "mobx-react-lite";
 import isEqual from "lodash/isEqual";
-import { ReactComponent as CloseIcon } from "@material-design-icons/svg/outlined/close.svg";
-
-import { Menu } from "@webiny/ui/Menu";
-import { Tabs } from "@webiny/ui/Tabs";
-import { Typography } from "@webiny/ui/Typography";
-import { FormElementMessage } from "@webiny/ui/FormElementMessage";
-import { FormComponentProps } from "@webiny/ui/types";
-import { CircularProgress } from "@webiny/ui/Progress";
-
-import { IconPickerPresenter } from "./IconPickerPresenter";
-import { IconProvider, IconRenderer } from "./IconRenderer";
 import {
-    IconPickerWrapper,
-    IconPickerLabel,
-    IconPickerInput,
-    MenuContent,
-    MenuHeader,
-    PlaceholderIcon,
-    RemoveButton
-} from "./IconPicker.styles";
-import { IconPickerTabRenderer } from "./IconPickerTab";
+    FormComponentDescription,
+    FormComponentErrorMessage,
+    FormComponentLabel,
+    FormComponentProps,
+    PopoverPrimitive
+} from "@webiny/admin-ui";
+import { IconPickerContent, IconPickerTrigger } from "./components";
+import { IconPickerPresenter } from "./IconPickerPresenter";
 import { IconPickerPresenterProvider } from "./IconPickerPresenterProvider";
-import { IconTypeProvider } from "./config/IconType";
 import { Icon, ICON_PICKER_SIZE } from "./types";
 
-export interface IconPickerProps extends FormComponentProps<Icon | undefined> {
-    label?: string;
-    description?: string;
+export interface IconPickerProps extends FormComponentProps {
     size?: ICON_PICKER_SIZE;
     removable?: boolean;
+    value?: Icon;
+    onChange?: (value: Icon | undefined) => void;
 }
 
 export interface IconPickerComponentProps extends IconPickerProps {
@@ -38,9 +25,18 @@ export interface IconPickerComponentProps extends IconPickerProps {
 }
 
 export const IconPickerComponent = observer(
-    ({ presenter, label, description, removable, ...props }: IconPickerComponentProps) => {
+    ({
+        presenter,
+        label,
+        description,
+        removable,
+        required,
+        disabled,
+        ...props
+    }: IconPickerComponentProps) => {
         const { value, onChange } = props;
         const { isValid: validationIsValid, message: validationMessage } = props.validation || {};
+        const invalid = useMemo(() => validationIsValid === false, [validationIsValid]);
         const { activeTab, isMenuOpened, isLoading, iconTypes, selectedIcon, size } = presenter.vm;
 
         useEffect(() => {
@@ -49,11 +45,6 @@ export const IconPickerComponent = observer(
             }
         }, [JSON.stringify(selectedIcon)]);
 
-        const setActiveTab = (index: number) => presenter.setActiveTab(index);
-
-        const openMenu = () => presenter.openMenu();
-        const closeMenu = () => presenter.closeMenu();
-
         const removeIcon = useCallback(() => {
             if (onChange) {
                 presenter.setIcon(null);
@@ -61,58 +52,39 @@ export const IconPickerComponent = observer(
             }
         }, [onChange]);
 
+        const handleOnOpenChange = useCallback(
+            (open: boolean) => {
+                if (open) {
+                    return presenter.openMenu();
+                } else {
+                    return presenter.closeMenu();
+                }
+            },
+            [presenter.openMenu, presenter.closeMenu]
+        );
+
         return (
             <IconPickerPresenterProvider presenter={presenter}>
-                <IconPickerWrapper>
-                    {label && (
-                        <IconPickerLabel>
-                            <Typography use={"body1"}>{label}</Typography>
-                        </IconPickerLabel>
-                    )}
-
-                    <Menu
-                        open={isMenuOpened}
-                        handle={
-                            <IconPickerInput>
-                                {selectedIcon ? (
-                                    <IconProvider icon={selectedIcon}>
-                                        <IconRenderer />
-                                    </IconProvider>
-                                ) : (
-                                    <PlaceholderIcon width={32} height={32} />
-                                )}
-                            </IconPickerInput>
-                        }
-                        onClose={closeMenu}
-                        onOpen={openMenu}
-                        portalZIndex={20}
+                <FormComponentLabel text={label} required={required} disabled={disabled} />
+                <FormComponentDescription text={description} />
+                <PopoverPrimitive open={isMenuOpened} onOpenChange={handleOnOpenChange}>
+                    <PopoverPrimitive.Trigger>
+                        <IconPickerTrigger icon={selectedIcon} />
+                    </PopoverPrimitive.Trigger>
+                    <PopoverPrimitive.Content
+                        style={{ width: size === ICON_PICKER_SIZE.SMALL ? "248px" : "328px" }}
+                        className={"wby-z-15"}
                     >
-                        <MenuHeader>
-                            <Typography use={"body1"}>Select an icon</Typography>
-                            {value && removable && (
-                                <RemoveButton onClick={removeIcon}>Remove</RemoveButton>
-                            )}
-                            <CloseIcon onClick={closeMenu} />
-                        </MenuHeader>
-                        <MenuContent size={size}>
-                            {isLoading && <CircularProgress />}
-                            <Tabs value={activeTab} onActivate={value => setActiveTab(value)}>
-                                {iconTypes.map(iconType => (
-                                    <IconTypeProvider key={iconType.name} type={iconType.name}>
-                                        <IconPickerTabRenderer />
-                                    </IconTypeProvider>
-                                ))}
-                            </Tabs>
-                        </MenuContent>
-                    </Menu>
-
-                    {validationIsValid === false && (
-                        <FormElementMessage error>{validationMessage}</FormElementMessage>
-                    )}
-                    {validationIsValid !== false && description && (
-                        <FormElementMessage>{description}</FormElementMessage>
-                    )}
-                </IconPickerWrapper>
+                        <IconPickerContent
+                            loading={isLoading}
+                            removable={value && removable}
+                            iconTypes={iconTypes}
+                            activeTab={activeTab}
+                            removeIcon={removeIcon}
+                        />
+                    </PopoverPrimitive.Content>
+                </PopoverPrimitive>
+                <FormComponentErrorMessage text={validationMessage} invalid={invalid} />
             </IconPickerPresenterProvider>
         );
     }
diff --git a/packages/app-admin/src/components/IconPicker/IconPickerPresenter.test.ts b/packages/app-admin/src/components/IconPicker/IconPickerPresenter.test.ts
index 104efc3fa75..b58abd8803f 100644
--- a/packages/app-admin/src/components/IconPicker/IconPickerPresenter.test.ts
+++ b/packages/app-admin/src/components/IconPicker/IconPickerPresenter.test.ts
@@ -102,8 +102,8 @@ describe("IconPickerPresenter", () => {
         // default `isMenuOpened` should be false
         expect(presenter.vm.isMenuOpened).toBe(false);
 
-        // default `activeTab` should be 0
-        expect(presenter.vm.activeTab).toBe(0);
+        // default `activeTab` should be handled by the component itself
+        expect(presenter.vm.activeTab).toBe(undefined);
 
         // should be able to set `isMenuOpened`
         // should be able to set `activeTab` based on `selectedIcon` type
@@ -113,6 +113,6 @@ describe("IconPickerPresenter", () => {
         expect(presenter.vm.isMenuOpened).toBe(true);
 
         // `vm` should have the expected `activeTab` value
-        expect(presenter.vm.activeTab).toBe(1);
+        expect(presenter.vm.activeTab).toBe("emoji");
     });
 });
diff --git a/packages/app-admin/src/components/IconPicker/IconPickerPresenter.ts b/packages/app-admin/src/components/IconPicker/IconPickerPresenter.ts
index 91f0fd86c01..ba34521f38a 100644
--- a/packages/app-admin/src/components/IconPicker/IconPickerPresenter.ts
+++ b/packages/app-admin/src/components/IconPicker/IconPickerPresenter.ts
@@ -9,12 +9,12 @@ export interface IconPickerPresenterInterface {
     setIcon(icon: Icon): void;
     addIcon(icon: Icon): void;
     setFilter(value: string): void;
-    setActiveTab(index: number): void;
+    setActiveTab(index: string): void;
     openMenu(): void;
     closeMenu(): void;
     get vm(): {
         isLoading: boolean;
-        activeTab: number;
+        activeTab?: string;
         isMenuOpened: boolean;
         icons: Icon[];
         iconTypes: IconType[];
@@ -28,7 +28,7 @@ export class IconPickerPresenter implements IconPickerPresenterInterface {
     private repository: IconRepository;
     private selectedIcon: Icon | null = null;
     private filter = "";
-    private activeTab = 0;
+    private activeTab: string | undefined = undefined;
     private isMenuOpened = false;
     private size: string | undefined;
 
@@ -77,8 +77,8 @@ export class IconPickerPresenter implements IconPickerPresenterInterface {
         this.resetActiveTab();
     }
 
-    setActiveTab(index: number) {
-        this.activeTab = index;
+    setActiveTab(value?: string) {
+        this.activeTab = value;
     }
 
     setIcon(icon: Icon | null) {
@@ -103,13 +103,21 @@ export class IconPickerPresenter implements IconPickerPresenterInterface {
 
     private getActiveTabByType(type: string) {
         const iconTypes = this.repository.getIconTypes();
-        const index = iconTypes.findIndex(iconsByType => iconsByType.name === type);
+        const iconType = iconTypes.find(iconsByType => iconsByType.name === type);
 
-        return index !== -1 ? index : 0;
+        return iconType?.name || iconTypes[0].name;
+    }
+
+    private getDefaultTab() {
+        return this.repository.getIconTypes()[0].name;
     }
 
     private resetActiveTab() {
-        this.setActiveTab(this.selectedIcon ? this.getActiveTabByType(this.selectedIcon.type) : 0);
+        this.setActiveTab(
+            this.selectedIcon
+                ? this.getActiveTabByType(this.selectedIcon.type)
+                : this.getDefaultTab()
+        );
     }
 
     private detectSelectedIcon(icon: Icon) {
diff --git a/packages/app-admin/src/components/IconPicker/IconPickerTab.tsx b/packages/app-admin/src/components/IconPicker/IconPickerTab.tsx
index 3c1b42d46a7..16b07c9b93b 100644
--- a/packages/app-admin/src/components/IconPicker/IconPickerTab.tsx
+++ b/packages/app-admin/src/components/IconPicker/IconPickerTab.tsx
@@ -1,25 +1,14 @@
 import React, { Fragment } from "react";
+import { ReactComponent as SearchIcon } from "@webiny/icons/search.svg";
 import { List } from "react-virtualized";
 import groupBy from "lodash/groupBy";
 
-import { Tab } from "@webiny/ui/Tabs";
-import { Typography } from "@webiny/ui/Typography";
-import { DelayedOnChange } from "@webiny/ui/DelayedOnChange";
-import { Input } from "@webiny/ui/Input";
+import { Text, DelayedOnChange, Input, Tabs, Icon as IconComponent } from "@webiny/admin-ui";
 import { makeDecoratable } from "@webiny/react-composition";
 
-import { IconProvider, IconRenderer } from "./IconRenderer";
-import {
-    Row,
-    Cell,
-    CategoryLabel,
-    TabContentWrapper,
-    ListWrapper,
-    NoResultsWrapper,
-    InputsWrapper
-} from "./IconPicker.styles";
 import { useIconPicker } from "./IconPickerPresenterProvider";
 import { useIconType } from "./config/IconType";
+import { IconPickerCell, IconPickerRow } from "./components";
 import { Icon, IconPickerGridRow, ICON_PICKER_SIZE } from "./types";
 
 const COLUMN_COUNT = 8;
@@ -94,30 +83,32 @@ const RowRenderer = ({ row, style, cellDecorator, onIconClick }: RenderRowProps)
 
     if (row.type === "category-name") {
         return (
-            <Row style={style}>
-                <CategoryLabel>{row.name}</CategoryLabel>
-            </Row>
+            <IconPickerRow style={style}>
+                <Text
+                    size={"sm"}
+                    className={"wby-uppercase wby-self-end wby-text-neutral-muted wby-mb-sm"}
+                >
+                    {row.name}
+                </Text>
+            </IconPickerRow>
         );
     }
 
     return (
-        <Row style={style}>
+        <IconPickerRow style={style}>
             {row.icons.map((item, itemKey) => (
                 <Fragment key={itemKey}>
                     {cellDecorator(
-                        <Cell
+                        <IconPickerCell
                             key={itemKey}
+                            icon={item}
                             isActive={item.name === value?.name}
-                            onClick={() => onIconClick(item)}
-                        >
-                            <IconProvider icon={item}>
-                                <IconRenderer />
-                            </IconProvider>
-                        </Cell>
+                            onIconClick={() => onIconClick(item)}
+                        />
                     )}
                 </Fragment>
             ))}
-        </Row>
+        </IconPickerRow>
     );
 };
 
@@ -129,6 +120,7 @@ const noopDecorator: CellDecorator = cell => cell;
 
 export interface IconPickerTabProps {
     label: string;
+    value: string;
     onChange: (icon: Icon) => void;
     actions?: React.ReactElement;
     cellDecorator?: CellDecorator;
@@ -136,6 +128,7 @@ export interface IconPickerTabProps {
 
 export const IconPickerTab = ({
     label,
+    value,
     actions,
     onChange,
     cellDecorator = noopDecorator
@@ -146,47 +139,60 @@ export const IconPickerTab = ({
     const size = presenter.vm.size;
 
     return (
-        <Tab label={label}>
-            <TabContentWrapper size={size}>
-                <InputsWrapper>
-                    <DelayedOnChange
-                        value={presenter.vm.filter}
-                        onChange={value => presenter.setFilter(value)}
-                    >
-                        {({ value, onChange }) => (
-                            <Input
-                                value={value}
-                                onChange={onChange}
-                                placeholder={"Search icons..."}
-                            />
-                        )}
-                    </DelayedOnChange>
-                    {actions ? actions : null}
-                </InputsWrapper>
-                <ListWrapper>
-                    {isEmpty ? (
-                        <NoResultsWrapper>
-                            <Typography use="body1">No results found.</Typography>
-                        </NoResultsWrapper>
-                    ) : (
-                        <List
-                            rowRenderer={({ key, ...props }) => (
-                                <RowRenderer
-                                    key={key}
-                                    row={rows[props.index]}
-                                    cellDecorator={cellDecorator}
-                                    onIconClick={onChange}
-                                    {...props}
+        <Tabs.Tab
+            value={value}
+            trigger={label}
+            content={
+                <div>
+                    <div className={"wby-flex wby-items-center wby-justify-center wby-gap-sm"}>
+                        <DelayedOnChange
+                            value={presenter.vm.filter}
+                            onChange={value => presenter.setFilter(value)}
+                        >
+                            {({ value, onChange }) => (
+                                <Input
+                                    value={value}
+                                    onChange={value => onChange(value as unknown as string)}
+                                    placeholder={"Search icons..."}
+                                    variant={"secondary"}
+                                    size={"md"}
+                                    startIcon={
+                                        <IconComponent
+                                            icon={<SearchIcon />}
+                                            label={"Search icons"}
+                                        />
+                                    }
                                 />
                             )}
-                            height={size === ICON_PICKER_SIZE.SMALL ? 250 : 320}
-                            rowCount={rowCount}
-                            rowHeight={40}
-                            width={size === ICON_PICKER_SIZE.SMALL ? 255 : 340}
-                        />
-                    )}
-                </ListWrapper>
-            </TabContentWrapper>
-        </Tab>
+                        </DelayedOnChange>
+                        {actions ? <div>{actions}</div> : null}
+                    </div>
+                    <div className={"wby-relative"}>
+                        {isEmpty ? (
+                            <div className={"wby-pt-md wby-text-neutral-strong"}>
+                                <Text>{"No results found."}</Text>
+                            </div>
+                        ) : (
+                            <List
+                                className={"wby-outline-none"}
+                                rowRenderer={({ key, ...props }) => (
+                                    <RowRenderer
+                                        key={key}
+                                        row={rows[props.index]}
+                                        cellDecorator={cellDecorator}
+                                        onIconClick={onChange}
+                                        {...props}
+                                    />
+                                )}
+                                width={size === ICON_PICKER_SIZE.SMALL ? 232 : 312}
+                                height={size === ICON_PICKER_SIZE.SMALL ? 240 : 350}
+                                rowCount={rowCount}
+                                rowHeight={40}
+                            />
+                        )}
+                    </div>
+                </div>
+            }
+        />
     );
 };
diff --git a/packages/app-admin/src/components/IconPicker/components/IconPickerCell.tsx b/packages/app-admin/src/components/IconPicker/components/IconPickerCell.tsx
new file mode 100644
index 00000000000..1d84ed436fb
--- /dev/null
+++ b/packages/app-admin/src/components/IconPicker/components/IconPickerCell.tsx
@@ -0,0 +1,36 @@
+import React from "react";
+import { cn, cva, type VariantProps } from "@webiny/admin-ui";
+import { Icon } from "~/components/IconPicker";
+import { IconProvider, IconRenderer } from "~/components/IconPicker/IconRenderer";
+
+const iconPickerCellVariants = cva(
+    [
+        "wby-flex wby-justify-center wby-items-center",
+        "wby-rounded-md wby-cursor-pointer wby-size-xl wby-p-xs",
+        "hover:wby-bg-neutral-dimmed wby-transition-all wby-duration-500 wby-ease-out"
+    ],
+    {
+        variants: {
+            isActive: {
+                true: "wby-bg-neutral-dimmed"
+            }
+        }
+    }
+);
+
+interface IconPickerCellProps extends VariantProps<typeof iconPickerCellVariants> {
+    icon: Icon;
+    onIconClick: (icon: Icon) => void;
+}
+
+const IconPickerCell = ({ isActive, icon, onIconClick }: IconPickerCellProps) => {
+    return (
+        <div className={cn(iconPickerCellVariants({ isActive }))} onClick={() => onIconClick(icon)}>
+            <IconProvider icon={icon}>
+                <IconRenderer />
+            </IconProvider>
+        </div>
+    );
+};
+
+export { IconPickerCell, IconPickerCellProps };
diff --git a/packages/app-admin/src/components/IconPicker/components/IconPickerContent.tsx b/packages/app-admin/src/components/IconPicker/components/IconPickerContent.tsx
new file mode 100644
index 00000000000..cd8b384606f
--- /dev/null
+++ b/packages/app-admin/src/components/IconPicker/components/IconPickerContent.tsx
@@ -0,0 +1,56 @@
+import React from "react";
+import { ReactComponent as DeleteIcon } from "@webiny/icons/delete.svg";
+import { Button, Icon, OverlayLoader, Tabs } from "@webiny/admin-ui";
+import { IconTypeProvider } from "~/components/IconPicker/config/IconType";
+import { IconPickerTabRenderer } from "~/components/IconPicker/IconPickerTab";
+import { IconType } from "~/components/IconPicker/config";
+
+interface IconPickerContentProps {
+    loading?: boolean;
+    iconTypes: IconType[];
+    activeTab?: string;
+    removeIcon: () => void;
+    removable?: boolean;
+}
+
+const IconPickerContent = ({
+    activeTab,
+    iconTypes,
+    loading,
+    removeIcon,
+    removable
+}: IconPickerContentProps) => {
+    return (
+        <div className={"wby-relative"}>
+            {loading && <OverlayLoader size={"sm"} />}
+            <Tabs
+                size={"sm"}
+                spacing={"sm"}
+                defaultValue={activeTab}
+                separator={true}
+                tabs={iconTypes.map(iconType => (
+                    <IconTypeProvider key={iconType.name} type={iconType.name}>
+                        <IconPickerTabRenderer />
+                    </IconTypeProvider>
+                ))}
+            />
+            {removable && (
+                <div
+                    className={
+                        "wby-flex wby-flex-col wby-px-sm wby-py-sm wby-border-solid wby-border-t-sm wby-border-neutral-muted"
+                    }
+                >
+                    <Button
+                        size={"md"}
+                        variant={"secondary"}
+                        text={"Remove"}
+                        icon={<Icon icon={<DeleteIcon />} label={"Remove"} />}
+                        onClick={removeIcon}
+                    />
+                </div>
+            )}
+        </div>
+    );
+};
+
+export { IconPickerContent, type IconPickerContentProps };
diff --git a/packages/app-admin/src/components/IconPicker/components/IconPickerRow.tsx b/packages/app-admin/src/components/IconPicker/components/IconPickerRow.tsx
new file mode 100644
index 00000000000..a08b317cc87
--- /dev/null
+++ b/packages/app-admin/src/components/IconPicker/components/IconPickerRow.tsx
@@ -0,0 +1,14 @@
+import React from "react";
+import { cn } from "@webiny/admin-ui";
+
+type IconPickerRowProps = React.ButtonHTMLAttributes<HTMLDivElement>;
+
+const IconPickerRow = ({ children, className, ...props }: IconPickerRowProps) => {
+    return (
+        <div {...props} className={cn("wby-flex wby-items-center wby-gap-sm", className)}>
+            {children}
+        </div>
+    );
+};
+
+export { IconPickerRow, type IconPickerRowProps };
diff --git a/packages/app-admin/src/components/IconPicker/components/IconPickerTrigger.tsx b/packages/app-admin/src/components/IconPicker/components/IconPickerTrigger.tsx
new file mode 100644
index 00000000000..0325e3551ea
--- /dev/null
+++ b/packages/app-admin/src/components/IconPicker/components/IconPickerTrigger.tsx
@@ -0,0 +1,62 @@
+import React from "react";
+import { ReactComponent as EmptyIcon } from "@webiny/icons/remove.svg";
+import { ReactComponent as ChevronDown } from "@webiny/icons/keyboard_arrow_down.svg";
+import { cn, cva, Icon as IconComponent, inputVariants, type VariantProps } from "@webiny/admin-ui";
+import { IconProvider, IconRenderer } from "~/components/IconPicker/IconRenderer";
+import { Icon } from "~/components/IconPicker/types";
+
+const iconPickerTriggerVariants = cva("wby-cursor-pointer fill-neutral-xstrong", {
+    variants: {
+        size: {
+            md: "wby-w-[64px]",
+            lg: "wby-w-[64px]",
+            xl: "wby-w-[76px]"
+        },
+        disabled: {
+            true: "wby-pointer-events-none"
+        }
+    },
+    defaultVariants: {
+        size: "md"
+    }
+});
+
+interface IconPickerTriggerProps
+    extends VariantProps<typeof inputVariants>,
+        VariantProps<typeof iconPickerTriggerVariants> {
+    icon: Icon | null;
+    disabled?: boolean;
+}
+
+const IconPickerTrigger = (props: IconPickerTriggerProps) => {
+    return (
+        <div
+            data-disabled={props.disabled}
+            className={cn(
+                inputVariants({
+                    size: props.size,
+                    variant: props.variant,
+                    invalid: props.invalid
+                }),
+                iconPickerTriggerVariants({ size: props.size, disabled: props.disabled })
+            )}
+        >
+            <div className={"wby-flex wby-items-center wby-gap-xs"}>
+                <div>
+                    {props.icon ? (
+                        <IconProvider icon={props.icon} size={24}>
+                            <IconComponent icon={<IconRenderer />} label={props.icon.name} />
+                        </IconProvider>
+                    ) : (
+                        <IconComponent icon={<EmptyIcon />} label={"Search icons"} size={"lg"} />
+                    )}
+                </div>
+                <div>
+                    <IconComponent size={"sm"} icon={<ChevronDown />} label={"Open list"} />
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export { IconPickerTrigger, type IconPickerTriggerProps };
diff --git a/packages/app-admin/src/components/IconPicker/components/index.ts b/packages/app-admin/src/components/IconPicker/components/index.ts
new file mode 100644
index 00000000000..6b1a0cb9b8b
--- /dev/null
+++ b/packages/app-admin/src/components/IconPicker/components/index.ts
@@ -0,0 +1,4 @@
+export * from "./IconPickerCell";
+export * from "./IconPickerContent";
+export * from "./IconPickerRow";
+export * from "./IconPickerTrigger";
diff --git a/packages/app-admin/src/components/IconPicker/plugins/customPlugin.tsx b/packages/app-admin/src/components/IconPicker/plugins/customPlugin.tsx
index 6dc1d061309..6f43170db6a 100644
--- a/packages/app-admin/src/components/IconPicker/plugins/customPlugin.tsx
+++ b/packages/app-admin/src/components/IconPicker/plugins/customPlugin.tsx
@@ -1,10 +1,7 @@
 import React from "react";
 import { useApolloClient } from "@apollo/react-hooks";
 import { observer } from "mobx-react-lite";
-import styled from "@emotion/styled";
-
-import { ButtonSecondary } from "@webiny/ui/Button";
-
+import { Button } from "@webiny/admin-ui";
 import { FileManager, FileManagerFileItem } from "~/base/ui/FileManager";
 import { IconPickerTab } from "../IconPickerTab";
 import { useIcon } from "..";
@@ -13,12 +10,6 @@ import { IconPickerConfig } from "../config";
 import { ListCustomIconsQueryResponse, LIST_CUSTOM_ICONS } from "./graphql";
 import { Icon } from "../types";
 
-const AddButton = styled(ButtonSecondary)`
-    &.mdc-button {
-        height: 40px;
-    }
-`;
-
 /**
  * NOTE: Avoid using `@emotion/styled` in icon renderer components across all plugins.
  * This is crucial for serializing component rendering into a string value as plain HTML,
@@ -58,13 +49,13 @@ const IconFilePicker = ({ onUpload, onChange }: IconFilePickerProps) => {
             accept={["image/svg+xml"]}
         >
             {({ showFileManager }) => (
-                <AddButton
+                <Button
+                    variant={"primary"}
+                    text={"Browse"}
                     onClick={() => {
                         showFileManager();
                     }}
-                >
-                    Browse
-                </AddButton>
+                />
             )}
         </FileManager>
     );
@@ -111,6 +102,7 @@ const CustomIconTab = observer(() => {
 
     return (
         <IconPickerTab
+            value={"custom"}
             label={"Custom"}
             onChange={onIconSelect}
             actions={<IconFilePicker onChange={onIconFileSelect} onUpload={onIconFileUpload} />}
diff --git a/packages/app-admin/src/components/IconPicker/plugins/emojisPlugin.tsx b/packages/app-admin/src/components/IconPicker/plugins/emojisPlugin.tsx
index d03b39236e7..5ab1ab92dd3 100644
--- a/packages/app-admin/src/components/IconPicker/plugins/emojisPlugin.tsx
+++ b/packages/app-admin/src/components/IconPicker/plugins/emojisPlugin.tsx
@@ -1,9 +1,6 @@
-import React from "react";
+import React, { useState } from "react";
 import { observer } from "mobx-react-lite";
-import styled from "@emotion/styled";
-
-import { Menu } from "@webiny/ui/Menu";
-
+import { cn, PopoverPrimitive } from "@webiny/admin-ui";
 import { useIcon } from "..";
 import { IconPickerTab } from "../IconPickerTab";
 import { IconProvider } from "../IconRenderer";
@@ -13,26 +10,17 @@ import { Icon } from "../types";
 
 const SKIN_TONES = ["", "\u{1f3fb}", "\u{1f3fc}", "\u{1f3fd}", "\u{1f3fe}", "\u{1f3ff}"];
 
-const SkinToneSelectWrapper = styled.div`
-    padding: 4px;
-    width: 32px;
-    flex-shrink: 0;
-    background: #fff;
-    border-radius: 1px;
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
-    display: inline-block;
-    cursor: pointer;
-`;
-
-const SkinTonesGrid = styled.div`
-    display: grid;
-    gap: 4px;
-    padding: 4px;
-`;
-
-const SkinTone = styled.div`
-    cursor: pointer;
-`;
+const SkinToneSelectWrapper = (props: React.HTMLAttributes<HTMLDivElement>) => {
+    return (
+        <div
+            className={cn(
+                "wby-size-xl wby-rounded-sm wby-pointer wby-border-solid wby-border-sm wby-border-neutral-muted wby-flex wby-justify-center wby-items-center wby-text-center"
+            )}
+        >
+            {props.children}
+        </div>
+    );
+};
 
 /**
  * NOTE: Avoid using `@emotion/styled` in icon renderer components across all plugins.
@@ -72,6 +60,8 @@ interface SkinToneSelectProps {
 }
 
 const SkinToneSelect = ({ icon, hasSkinToneSupport, onChange }: SkinToneSelectProps) => {
+    const [open, setOpen] = useState(false);
+
     if (!icon || !isEmoji(icon)) {
         return <SkinToneSelectWrapper />;
     }
@@ -79,7 +69,7 @@ const SkinToneSelect = ({ icon, hasSkinToneSupport, onChange }: SkinToneSelectPr
     if (!hasSkinToneSupport) {
         return (
             <SkinToneSelectWrapper>
-                <IconProvider icon={icon}>
+                <IconProvider icon={icon} size={24}>
                     <Emoji />
                 </IconProvider>
             </SkinToneSelectWrapper>
@@ -87,32 +77,32 @@ const SkinToneSelect = ({ icon, hasSkinToneSupport, onChange }: SkinToneSelectPr
     }
 
     return (
-        <Menu
-            handle={
+        <PopoverPrimitive open={open} onOpenChange={open => setOpen(open)}>
+            <PopoverPrimitive.Trigger className={"wby-outline-none"}>
                 <SkinToneSelectWrapper>
-                    <IconProvider icon={icon}>
+                    <IconProvider icon={icon} size={24}>
                         <Emoji />
                     </IconProvider>
                 </SkinToneSelectWrapper>
-            }
-            render={({ closeMenu }) => (
-                <SkinTonesGrid>
+            </PopoverPrimitive.Trigger>
+            <PopoverPrimitive.Content>
+                <div className={"wby-bg-neutral-base wby-grid wby-gap-xs wby-p-xs wby-text-center"}>
                     {SKIN_TONES.map((skinTone, index) => (
-                        <SkinTone
+                        <div
                             key={index}
                             onClick={() => {
                                 onChange(skinTone);
-                                closeMenu();
                             }}
+                            className={"wby-cursor-pointer"}
                         >
-                            <IconProvider icon={{ ...icon, skinTone }}>
+                            <IconProvider icon={{ ...icon, skinTone }} size={24}>
                                 <Emoji />
                             </IconProvider>
-                        </SkinTone>
+                        </div>
                     ))}
-                </SkinTonesGrid>
-            )}
-        />
+                </div>
+            </PopoverPrimitive.Content>
+        </PopoverPrimitive>
     );
 };
 
@@ -145,6 +135,7 @@ const EmojiTab = observer(() => {
 
     return (
         <IconPickerTab
+            value={"emoji"}
             label={"Emojis"}
             onChange={onIconSelect}
             actions={
diff --git a/packages/app-admin/src/components/IconPicker/plugins/iconsPlugin.tsx b/packages/app-admin/src/components/IconPicker/plugins/iconsPlugin.tsx
index d24470f8a8f..9e01ee86aac 100644
--- a/packages/app-admin/src/components/IconPicker/plugins/iconsPlugin.tsx
+++ b/packages/app-admin/src/components/IconPicker/plugins/iconsPlugin.tsx
@@ -1,9 +1,6 @@
 import React, { useState, useEffect } from "react";
 import { observer } from "mobx-react-lite";
-import styled from "@emotion/styled";
-
-import { ColorPicker } from "@webiny/ui/ColorPicker";
-import { DelayedOnChange } from "@webiny/ui/DelayedOnChange";
+import { DelayedOnChange, ColorPicker } from "@webiny/admin-ui";
 
 import { useIcon } from "..";
 import { IconPickerTab } from "../IconPickerTab";
@@ -11,16 +8,6 @@ import { useIconPicker } from "../IconPickerPresenterProvider";
 import { IconPickerConfig } from "../config";
 import { Icon } from "../types";
 
-const StyledColorPicker = styled.div`
-    [data-role="color-picker-swatch"] {
-        width: 30px;
-        height: 30px;
-        > div {
-            width: inherit;
-        }
-    }
-`;
-
 /**
  * NOTE: Avoid using `@emotion/styled` in icon renderer components across all plugins.
  * This is crucial for serializing component rendering into a string value as plain HTML,
@@ -43,7 +30,9 @@ const IconSvg = () => {
             color={icon?.color || "inherit"}
             dangerouslySetInnerHTML={{ __html: icon.value || "" }}
             style={{
-                verticalAlign: "middle"
+                verticalAlign: "middle",
+                width: "100%",
+                height: "100%"
             }}
         />
     );
@@ -58,18 +47,12 @@ const IconColorPicker = ({ color, onChange }: IconColorPickerProps) => {
     return (
         <DelayedOnChange value={color} onChange={onChange}>
             {({ value, onChange }) => (
-                <StyledColorPicker>
-                    <ColorPicker align={"right"} value={value} onChange={onChange} />
-                </StyledColorPicker>
+                <ColorPicker align={"end"} value={value} onChange={onChange} />
             )}
         </DelayedOnChange>
     );
 };
 
-const Color = styled.span<{ color: string }>`
-    color: ${({ color }) => color};
-`;
-
 /**
  * @see https://www.typescriptlang.org/docs/handbook/2/narrowing.html#using-type-predicates
  */
@@ -108,9 +91,10 @@ const IconTab = observer(() => {
 
     return (
         <IconPickerTab
+            value={"icon"}
             label={"Icons"}
             onChange={onIconSelect}
-            cellDecorator={cell => <Color color={color}>{cell}</Color>}
+            cellDecorator={cell => <span style={{ color }}>{cell}</span>}
             actions={<IconColorPicker color={color} onChange={onColorChange} />}
         />
     );
diff --git a/packages/app-admin/src/components/IconPicker/types.ts b/packages/app-admin/src/components/IconPicker/types.ts
index e5f8feda1d8..6f1c889406c 100644
--- a/packages/app-admin/src/components/IconPicker/types.ts
+++ b/packages/app-admin/src/components/IconPicker/types.ts
@@ -22,5 +22,5 @@ type CategoryNameRow = {
 export type IconPickerGridRow = IconsRow | CategoryNameRow;
 
 export enum ICON_PICKER_SIZE {
-    SMALL = "small"
+    SMALL = "sm"
 }
diff --git a/packages/app-admin/src/components/MultiImageUpload.tsx b/packages/app-admin/src/components/MultiImageUpload.tsx
index 89eac558790..b457cc87564 100644
--- a/packages/app-admin/src/components/MultiImageUpload.tsx
+++ b/packages/app-admin/src/components/MultiImageUpload.tsx
@@ -1,6 +1,5 @@
 import * as React from "react";
-import { Image } from "@webiny/app/components/Image";
-import { MultiImageUpload as UiMultiImageUpload } from "@webiny/ui/ImageUpload";
+import { MultiFilePicker } from "@webiny/admin-ui";
 
 /**
  * TODO @ts-refactor
@@ -12,28 +11,10 @@ interface MultiImageUploadProps {
     };
     [key: string]: any;
 }
-const MultiImageUpload = ({
-    imagePreviewProps,
-    ...multiImageUploadProps
-}: MultiImageUploadProps) => {
-    return (
-        <UiMultiImageUpload
-            /**
-             * TODO @ts-refactor
-             * It appears that renderImagePreview does not exist on  UiMultiImageUpload. So how did this work?
-             */
-            // @ts-expect-error
-            renderImagePreview={(renderImageProps: Record<string, any>) => {
-                return (
-                    <Image
-                        transform={{ width: 300 }}
-                        {...imagePreviewProps}
-                        {...renderImageProps}
-                    />
-                );
-            }}
-            {...multiImageUploadProps}
-        />
-    );
+
+// This component looks unused, but let's keep it for now. Down the line, we might want to remove it.
+const MultiImageUpload = ({ props }: MultiImageUploadProps) => {
+    return <MultiFilePicker {...props} />;
 };
+
 export default MultiImageUpload;
diff --git a/packages/app-admin/src/components/OptionsMenu/OptionsMenu.styled.tsx b/packages/app-admin/src/components/OptionsMenu/OptionsMenu.styled.tsx
deleted file mode 100644
index cbffe0eab79..00000000000
--- a/packages/app-admin/src/components/OptionsMenu/OptionsMenu.styled.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import styled, { StyledComponent } from "@emotion/styled";
-import { MenuProps, Menu as OriginalMenu } from "@webiny/ui/Menu";
-
-export const Menu: StyledComponent<MenuProps> = styled(OriginalMenu)`
-    .disabled {
-        opacity: 0.5;
-        pointer-events: none;
-    }
-
-    .mdc-deprecated-list-item__graphic {
-        margin-right: 16px;
-    }
-`;
diff --git a/packages/app-admin/src/components/OptionsMenu/OptionsMenu.tsx b/packages/app-admin/src/components/OptionsMenu/OptionsMenu.tsx
index bd59b010889..4ac0434e221 100644
--- a/packages/app-admin/src/components/OptionsMenu/OptionsMenu.tsx
+++ b/packages/app-admin/src/components/OptionsMenu/OptionsMenu.tsx
@@ -1,16 +1,14 @@
 import React, { Fragment } from "react";
-import { ReactComponent as MoreVerticalIcon } from "@material-design-icons/svg/outlined/more_vert.svg";
-import { IconButton } from "@webiny/ui/Button";
-
+import { ReactComponent as MoreVerticalIcon } from "@webiny/icons/more_vert.svg";
+import { IconButton, DropdownMenu } from "@webiny/admin-ui";
 import { OptionsMenuItemProvider } from "./useOptionsMenuItem";
 
-import { Menu } from "./OptionsMenu.styled";
-
 export interface OptionsMenuProps {
     actions: {
         name: string;
         element: React.ReactElement;
     }[];
+    trigger?: React.ReactElement;
     ["data-testid"]?: string;
 }
 
@@ -19,20 +17,23 @@ export const OptionsMenu = (props: OptionsMenuProps) => {
         return null;
     }
 
+    const trigger = props.trigger || (
+        <IconButton
+            icon={<MoreVerticalIcon />}
+            size={"sm"}
+            iconSize={"lg"}
+            variant={"ghost"}
+            data-testid={props["data-testid"] || "more-options-icon"}
+        />
+    );
+
     return (
-        <Menu
-            handle={
-                <IconButton
-                    icon={<MoreVerticalIcon />}
-                    data-testid={props["data-testid"] || "more-options-icon"}
-                />
-            }
-        >
+        <DropdownMenu trigger={trigger}>
             {props.actions.map(action => (
                 <Fragment key={action.name}>
                     <OptionsMenuItemProvider>{action.element}</OptionsMenuItemProvider>
                 </Fragment>
             ))}
-        </Menu>
+        </DropdownMenu>
     );
 };
diff --git a/packages/app-admin/src/components/OptionsMenu/OptionsMenuItem.tsx b/packages/app-admin/src/components/OptionsMenu/OptionsMenuItem.tsx
index 4ea1e6074af..bd2e5831f16 100644
--- a/packages/app-admin/src/components/OptionsMenu/OptionsMenuItem.tsx
+++ b/packages/app-admin/src/components/OptionsMenu/OptionsMenuItem.tsx
@@ -1,7 +1,5 @@
 import React from "react";
-import { Icon } from "@webiny/ui/Icon";
-import { ListItemGraphic } from "@webiny/ui/List";
-import { MenuItem } from "@webiny/ui/Menu";
+import { DropdownMenu } from "@webiny/admin-ui";
 
 export interface OptionsMenuItemProps {
     onAction: () => void;
@@ -9,19 +7,18 @@ export interface OptionsMenuItemProps {
     icon: React.ReactElement;
     label: string;
     ["data-testid"]?: string;
+    className?: string;
 }
 
 export const OptionsMenuItem = (props: OptionsMenuItemProps) => {
     return (
-        <MenuItem
+        <DropdownMenu.Item
             onClick={props.onAction}
             disabled={props.disabled ?? false}
             data-testid={props["data-testid"]}
-        >
-            <ListItemGraphic>
-                <Icon icon={props.icon} />
-            </ListItemGraphic>
-            {props.label}
-        </MenuItem>
+            icon={<DropdownMenu.Item.Icon label={props.label} element={props.icon} />}
+            text={props.label}
+            className={props.className}
+        />
     );
 };
diff --git a/packages/app-admin/src/components/OptionsMenu/OptionsMenuLink.tsx b/packages/app-admin/src/components/OptionsMenu/OptionsMenuLink.tsx
index 51450b179ec..eb4c9c8d25b 100644
--- a/packages/app-admin/src/components/OptionsMenu/OptionsMenuLink.tsx
+++ b/packages/app-admin/src/components/OptionsMenu/OptionsMenuLink.tsx
@@ -1,8 +1,5 @@
 import React, { HTMLAttributeAnchorTarget } from "react";
-import { Icon } from "@webiny/ui/Icon";
-import { ListItemGraphic } from "@webiny/ui/List";
-import { MenuItem } from "@webiny/ui/Menu";
-import { Link } from "@webiny/react-router";
+import { DropdownMenu } from "@webiny/admin-ui";
 
 export interface OptionsMenuLinkProps {
     disabled?: boolean;
@@ -11,38 +8,18 @@ export interface OptionsMenuLinkProps {
     to: string;
     target?: HTMLAttributeAnchorTarget;
     ["data-testid"]?: string;
+    className?: string;
 }
 
-const MenuLinkItem = (props: Omit<OptionsMenuLinkProps, "to" | "target">) => {
-    return (
-        <MenuItem disabled={props.disabled ?? false} data-testid={props["data-testid"]}>
-            <ListItemGraphic>
-                <Icon icon={props.icon} />
-            </ListItemGraphic>
-            {props.label}
-        </MenuItem>
-    );
-};
-
 export const OptionsMenuLink = (props: OptionsMenuLinkProps) => {
-    if (props.disabled) {
-        return (
-            <MenuLinkItem
-                icon={props.icon}
-                label={props.label}
-                disabled={props.disabled}
-                data-testid={props["data-testid"]}
-            />
-        );
-    }
-
     return (
-        <Link to={props.to} target={props.target}>
-            <MenuLinkItem
-                icon={props.icon}
-                label={props.label}
-                data-testid={props["data-testid"]}
-            />
-        </Link>
+        <DropdownMenu.Link
+            to={props.to}
+            disabled={props.disabled}
+            data-testid={props["data-testid"]}
+            icon={<DropdownMenu.Item.Icon label={props.label} element={props.icon} />}
+            text={props.label}
+            className={props.className}
+        />
     );
 };
diff --git a/packages/app-admin/src/components/OverlayLayout/OverlayLayout.tsx b/packages/app-admin/src/components/OverlayLayout/OverlayLayout.tsx
index f431065a6dc..23f06747bee 100644
--- a/packages/app-admin/src/components/OverlayLayout/OverlayLayout.tsx
+++ b/packages/app-admin/src/components/OverlayLayout/OverlayLayout.tsx
@@ -1,126 +1,70 @@
-import * as React from "react";
-import { Transition } from "react-transition-group";
-import styled from "@emotion/styled";
-import { css } from "emotion";
-import { TopAppBarSecondary, TopAppBarSection } from "@webiny/ui/TopAppBar";
-import { IconButton } from "@webiny/ui/Button";
+import React, { useCallback, useEffect, useState } from "react";
 import noop from "lodash/noop";
-
-import { ReactComponent as CloseIcon } from "@material-design-icons/svg/outlined/close.svg";
+import type { ExitHandler } from "react-transition-group/Transition";
 import { OverlayView } from "~/ui/views/OverlayView";
-import { ExitHandler } from "react-transition-group/Transition";
-
-const OverlayLayoutWrapper = styled("div")({
-    position: "fixed",
-    width: "100%",
-    height: "100vh",
-    backgroundColor: "var(--mdc-theme-background)",
-    /**
-     * Has to be higher than 5 so it's above advanced settings dialog,
-     * and below 20, so the image editor & Dialogs can be displayed above.
-     */
-    zIndex: 21,
-    paddingTop: 65,
-    top: 0,
-    left: 0
-});
-
-const noScroll = css({
-    overflow: "hidden",
-    height: "100vh"
-});
-
-const defaultStyle = {
-    transform: "translateY(75vh)",
-    opacity: 0,
-    transitionProperty: "transform, opacity",
-    transitionTimingFunction: "cubic-bezier(0, 0, .2, 1)",
-    transitionDuration: "225ms",
-    willChange: "opacity, transform"
-};
+import {
+    OverlayBackdrop,
+    OverlayContent,
+    OverlayHeader,
+    overlayHeaderVariants,
+    OverlayRoot
+} from "./components";
+import type { VariantProps } from "@webiny/admin-ui";
 
-const transitionStyles: Record<string, any> = {
-    entering: {
-        transform: "translateY(75vh)",
-        opacity: 0
-    },
-    entered: {
-        transform: "translateY(0px)",
-        opacity: 1
-    }
-};
+const noScrollBodyClassNames = ["wby-overflow-hidden", "wby-h-screen"];
 
-export interface OverlayLayoutProps {
+export interface OverlayLayoutProps extends VariantProps<typeof overlayHeaderVariants> {
     barMiddle?: React.ReactNode;
     barLeft?: React.ReactNode;
     barRight?: React.ReactNode;
     children: React.ReactNode;
     onExited?: ExitHandler<HTMLElement>;
-    style?: React.CSSProperties;
-}
-
-interface OverlayLayoutState {
-    isVisible: boolean;
 }
 
-export class OverlayLayout extends React.Component<OverlayLayoutProps, OverlayLayoutState> {
-    constructor(props: OverlayLayoutProps) {
-        super(props);
-        document.body.classList.add(noScroll);
-    }
+export const OverlayLayout: React.FC<OverlayLayoutProps> = ({
+    barMiddle,
+    barLeft,
+    barRight,
+    children,
+    onExited = noop,
+    variant
+}) => {
+    const [visible, setVisible] = useState(true);
 
-    static defaultProps: Partial<OverlayLayoutProps> = {
-        onExited: noop
-    };
-
-    public override state: OverlayLayoutState = {
-        isVisible: true
-    };
-
-    public hideComponent(): void {
-        this.setState({ isVisible: false });
+    const hideOverlay = useCallback(() => {
+        setVisible(false);
         if (OverlayView.openedViews === 0) {
-            document.body.classList.remove(noScroll);
+            noScrollBodyClassNames.forEach(className => document.body.classList.remove(className));
         }
-    }
+    }, []);
 
-    public override componentWillUnmount(): void {
-        if (OverlayView.openedViews === 0) {
-            document.body.classList.remove(noScroll);
-        }
-    }
+    useEffect(() => {
+        noScrollBodyClassNames.forEach(className => document.body.classList.add(className));
+        return () => {
+            if (OverlayView.openedViews === 0) {
+                noScrollBodyClassNames.forEach(className =>
+                    document.body.classList.remove(className)
+                );
+            }
+        };
+    }, []);
 
-    public override render() {
-        const { onExited, barLeft, barMiddle, barRight, children, style, ...rest } = this.props;
+    return (
+        <OverlayRoot visible={visible} onExited={onExited}>
+            <OverlayContent visible={visible}>
+                <>
+                    <OverlayHeader
+                        start={barLeft}
+                        middle={barMiddle}
+                        end={barRight}
+                        variant={variant}
+                        hideOverlay={hideOverlay}
+                    />
 
-        return (
-            <Transition in={this.state.isVisible} timeout={100} appear onExited={onExited}>
-                {state => (
-                    <OverlayLayoutWrapper
-                        {...rest}
-                        style={{ ...defaultStyle, ...style, ...transitionStyles[state] }}
-                    >
-                        <TopAppBarSecondary fixed style={{ top: 0 }}>
-                            <TopAppBarSection style={{ width: "33%" }} alignStart>
-                                {barLeft}
-                            </TopAppBarSection>
-                            <TopAppBarSection style={{ width: "33%" }}>
-                                {barMiddle}
-                            </TopAppBarSection>
-                            <TopAppBarSection style={{ width: "33%" }} alignEnd>
-                                {barRight}
-                                <IconButton
-                                    ripple={false}
-                                    onClick={() => this.hideComponent()}
-                                    icon={<CloseIcon style={{ width: 24, height: 24 }} />}
-                                />
-                            </TopAppBarSection>
-                        </TopAppBarSecondary>
-
-                        {children}
-                    </OverlayLayoutWrapper>
-                )}
-            </Transition>
-        );
-    }
-}
+                    {children}
+                </>
+            </OverlayContent>
+            <OverlayBackdrop visible={visible} hideOverlay={hideOverlay} />
+        </OverlayRoot>
+    );
+};
diff --git a/packages/app-admin/src/components/OverlayLayout/components/OverlayBackdrop.tsx b/packages/app-admin/src/components/OverlayLayout/components/OverlayBackdrop.tsx
new file mode 100644
index 00000000000..4daf61b27ea
--- /dev/null
+++ b/packages/app-admin/src/components/OverlayLayout/components/OverlayBackdrop.tsx
@@ -0,0 +1,24 @@
+import React from "react";
+import { cn } from "@webiny/admin-ui";
+
+interface OverlayBackdropProps extends React.HTMLAttributes<HTMLDivElement> {
+    visible?: boolean;
+    hideOverlay: () => void;
+}
+
+const OverlayBackdrop = ({ hideOverlay, visible }: OverlayBackdropProps) => {
+    return (
+        <div
+            onClick={hideOverlay}
+            data-state={visible ? "open" : "closed"}
+            className={cn(
+                "wby-fixed wby-inset-0 wby-z-15 wby-bg-neutral-dark/50",
+                "wby-transition wby-ease-in-out",
+                "data-[state=open]:wby-animate-in data-[state=open]:wby-fade-in data-[state=open]:wby-duration-500",
+                "data-[state=closed]:wby-animate-out data-[state=closed]:wby-fade-out data-[state=closed]:wby-duration-150"
+            )}
+        />
+    );
+};
+
+export { OverlayBackdrop, type OverlayBackdropProps };
diff --git a/packages/app-admin/src/components/OverlayLayout/components/OverlayContent.tsx b/packages/app-admin/src/components/OverlayLayout/components/OverlayContent.tsx
new file mode 100644
index 00000000000..8173e1a2ae0
--- /dev/null
+++ b/packages/app-admin/src/components/OverlayLayout/components/OverlayContent.tsx
@@ -0,0 +1,32 @@
+import React from "react";
+import { cn } from "@webiny/admin-ui";
+
+interface OverlayContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    visible?: boolean;
+}
+
+const OverlayContent = ({ visible, className, style, children, ...props }: OverlayContentProps) => {
+    return (
+        <div
+            data-state={visible ? "open" : "closed"}
+            className={cn(
+                [
+                    "wby-fixed wby-inset-x-0 wby-top-lg wby-z-20",
+                    "wby-w-screen",
+                    "wby-rounded-t-lg wby-overflow-hidden",
+                    "wby-bg-neutral-base",
+                    "wby-transition wby-ease-in-out",
+                    "data-[state=open]:wby-animate-in data-[state=open]:wby-slide-in-from-bottom data-[state=open]:wby-fade-in data-[state=open]:wby-duration-500",
+                    "data-[state=closed]:wby-animate-out data-[state=closed]:wby-fade-out data-[state=closed]:wby-duration-150"
+                ],
+                className
+            )}
+            style={{ ...style, height: "calc(100vh - 24px)" }}
+            {...props}
+        >
+            {children}
+        </div>
+    );
+};
+
+export { OverlayContent, type OverlayContentProps };
diff --git a/packages/app-admin/src/components/OverlayLayout/components/OverlayHeader.tsx b/packages/app-admin/src/components/OverlayLayout/components/OverlayHeader.tsx
new file mode 100644
index 00000000000..b312717ba78
--- /dev/null
+++ b/packages/app-admin/src/components/OverlayLayout/components/OverlayHeader.tsx
@@ -0,0 +1,59 @@
+import React from "react";
+import { cn, cva, HeaderBar, IconButton, type VariantProps } from "@webiny/admin-ui";
+import { ReactComponent as CloseIcon } from "@webiny/icons/close.svg";
+
+const overlayHeaderVariants = cva("", {
+    variants: {
+        variant: {
+            default: "wby-bg-neutral-base wby-text-neutral-base",
+            strong: "wby-bg-neutral-dark wby-text-neutral-light"
+        }
+    },
+    defaultVariants: {
+        variant: "default"
+    }
+});
+
+interface OverlayHeaderProps
+    extends React.HTMLAttributes<HTMLDivElement>,
+        VariantProps<typeof overlayHeaderVariants> {
+    start?: React.ReactNode;
+    middle?: React.ReactNode;
+    end?: React.ReactNode;
+    hideOverlay?: () => void;
+}
+
+const OverlayHeader = ({
+    start,
+    middle,
+    end,
+    hideOverlay,
+    variant,
+    className,
+    ...props
+}: OverlayHeaderProps) => {
+    const buttonIconVariant = variant === "strong" ? "ghost-negative" : "ghost";
+
+    return (
+        <HeaderBar
+            start={<div className={"wby-pl-md"}>{start}</div>}
+            middle={middle}
+            end={
+                <>
+                    {end}
+                    <IconButton
+                        variant={buttonIconVariant}
+                        size={"md"}
+                        iconSize={"lg"}
+                        onClick={hideOverlay}
+                        icon={<CloseIcon />}
+                    />
+                </>
+            }
+            className={cn(overlayHeaderVariants({ variant }), className)}
+            {...props}
+        />
+    );
+};
+
+export { OverlayHeader, type OverlayHeaderProps, overlayHeaderVariants };
diff --git a/packages/app-admin/src/components/OverlayLayout/components/OverlayRoot.tsx b/packages/app-admin/src/components/OverlayLayout/components/OverlayRoot.tsx
new file mode 100644
index 00000000000..9d70e702a1f
--- /dev/null
+++ b/packages/app-admin/src/components/OverlayLayout/components/OverlayRoot.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+import { Transition } from "react-transition-group";
+import type { ExitHandler } from "react-transition-group/Transition";
+
+interface OverlayRootProps {
+    visible?: boolean;
+    onExited?: ExitHandler<HTMLElement>;
+    children: React.ReactNode;
+}
+
+const OverlayRoot = ({ visible, onExited, children }: OverlayRootProps) => {
+    return (
+        <Transition in={visible} timeout={100} appear onExited={onExited}>
+            <>{children}</>
+        </Transition>
+    );
+};
+
+export { OverlayRoot, type OverlayRootProps };
diff --git a/packages/app-admin/src/components/OverlayLayout/components/index.ts b/packages/app-admin/src/components/OverlayLayout/components/index.ts
new file mode 100644
index 00000000000..deefcf7dc4f
--- /dev/null
+++ b/packages/app-admin/src/components/OverlayLayout/components/index.ts
@@ -0,0 +1,4 @@
+export * from "./OverlayHeader";
+export * from "./OverlayBackdrop";
+export * from "./OverlayContent";
+export * from "./OverlayRoot";
diff --git a/packages/app-admin/src/components/OverlayLayout/icons/close.svg b/packages/app-admin/src/components/OverlayLayout/icons/close.svg
deleted file mode 100644
index 9d44cfa61b3..00000000000
--- a/packages/app-admin/src/components/OverlayLayout/icons/close.svg
+++ /dev/null
@@ -1,13 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px"
-	 height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
-<g id="Bounding_Boxes">
-	<path fill="none" d="M0,0h24v24H0V0z"/>
-</g>
-<g id="Rounded">
-	<path d="M18.3,5.71L18.3,5.71c-0.39-0.39-1.02-0.39-1.41,0L12,10.59L7.11,5.7c-0.39-0.39-1.02-0.39-1.41,0l0,0
-		c-0.39,0.39-0.39,1.02,0,1.41L10.59,12L5.7,16.89c-0.39,0.39-0.39,1.02,0,1.41h0c0.39,0.39,1.02,0.39,1.41,0L12,13.41l4.89,4.89
-		c0.39,0.39,1.02,0.39,1.41,0l0,0c0.39-0.39,0.39-1.02,0-1.41L13.41,12l4.89-4.89C18.68,6.73,18.68,6.09,18.3,5.71z"/>
-</g>
-</svg>
diff --git a/packages/app-admin/src/components/OverlayLayout/icons/navigate_before.svg b/packages/app-admin/src/components/OverlayLayout/icons/navigate_before.svg
deleted file mode 100644
index 2bb0ec30fea..00000000000
--- a/packages/app-admin/src/components/OverlayLayout/icons/navigate_before.svg
+++ /dev/null
@@ -1,16 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px"
-	 height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
-<g id="Bounding_Boxes">
-	<g id="ui_x5F_spec_x5F_header_copy_2">
-	</g>
-	<path fill="none" d="M0,0h24v24H0V0z"/>
-</g>
-<g id="Rounded">
-	<g id="ui_x5F_spec_x5F_header_copy_6">
-	</g>
-	<path d="M14.91,6.71L14.91,6.71c-0.39-0.39-1.02-0.39-1.41,0l-4.59,4.59c-0.39,0.39-0.39,1.02,0,1.41l4.59,4.59
-		c0.39,0.39,1.02,0.39,1.41,0l0,0c0.39-0.39,0.39-1.02,0-1.41L11.03,12l3.88-3.88C15.29,7.73,15.29,7.09,14.91,6.71z"/>
-</g>
-</svg>
diff --git a/packages/app-admin/src/components/Permissions/CannotUseAaclAlert.tsx b/packages/app-admin/src/components/Permissions/CannotUseAaclAlert.tsx
index 57c8d5864f7..ac6c85b86ab 100644
--- a/packages/app-admin/src/components/Permissions/CannotUseAaclAlert.tsx
+++ b/packages/app-admin/src/components/Permissions/CannotUseAaclAlert.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Alert } from "@webiny/ui/Alert";
+import { Alert } from "@webiny/admin-ui";
 
 export const CannotUseAaclAlert = () => {
     return (
diff --git a/packages/app-admin/src/components/Permissions/PermissionsGroup.tsx b/packages/app-admin/src/components/Permissions/PermissionsGroup.tsx
new file mode 100644
index 00000000000..c05b21429fb
--- /dev/null
+++ b/packages/app-admin/src/components/Permissions/PermissionsGroup.tsx
@@ -0,0 +1,25 @@
+import React from "react";
+import { cn, Heading } from "@webiny/admin-ui";
+
+interface PermissionsGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+    title?: React.ReactNode;
+}
+
+const PermissionsGroup = ({ className, children, title, ...props }: PermissionsGroupProps) => {
+    return (
+        <div
+            {...props}
+            className={cn(
+                "wby-mb-lg wby-p-md-extra wby-border-sm wby-border-neutral-dimmed wby-rounded-lg",
+                className
+            )}
+        >
+            <Heading level={6} className={"wby-mb-sm"}>
+                {title}
+            </Heading>
+            {children}
+        </div>
+    );
+};
+
+export { PermissionsGroup, type PermissionsGroupProps };
diff --git a/packages/app-admin/src/components/Permissions/StyledComponents.tsx b/packages/app-admin/src/components/Permissions/StyledComponents.tsx
index 5b5be42bf60..56ac3e572ea 100644
--- a/packages/app-admin/src/components/Permissions/StyledComponents.tsx
+++ b/packages/app-admin/src/components/Permissions/StyledComponents.tsx
@@ -1,22 +1,16 @@
 import React from "react";
 import { css } from "emotion";
-import { Typography } from "@webiny/ui/Typography";
+import { Label } from "@webiny/admin-ui";
 
-export const flexClass = css({
-    display: "flex",
-    alignItems: "center",
-    height: "100%"
-});
-
-export const gridNoPaddingClass = css({
-    padding: "0px !important"
+export const gridWithPaddingClass = css({
+    paddingTop: "var(--padding-md)"
 });
 
 interface PermissionInfoProps {
     title: string;
 }
 export const PermissionInfo = ({ title }: PermissionInfoProps) => (
-    <div className={flexClass}>
-        <Typography use={"body2"}>{title}</Typography>
+    <div className={"wby-flex wby-items-center wby-h-full"}>
+        <Label text={title} />
     </div>
 );
diff --git a/packages/app-admin/src/components/Permissions/index.ts b/packages/app-admin/src/components/Permissions/index.ts
index 63fa0067467..b566272c3f4 100644
--- a/packages/app-admin/src/components/Permissions/index.ts
+++ b/packages/app-admin/src/components/Permissions/index.ts
@@ -1,3 +1,4 @@
 export * from "./StyledComponents";
 export { Permissions } from "./Permissions";
 export { CannotUseAaclAlert } from "./CannotUseAaclAlert";
+export * from "./PermissionsGroup";
diff --git a/packages/app-admin/src/components/SearchUI.tsx b/packages/app-admin/src/components/SearchUI.tsx
index ebbed140913..1bd9120629d 100644
--- a/packages/app-admin/src/components/SearchUI.tsx
+++ b/packages/app-admin/src/components/SearchUI.tsx
@@ -1,75 +1,36 @@
-import React, { useCallback } from "react";
-import styled from "@emotion/styled";
-import InputField, { OnKeyDownProps } from "./SimpleUI/InputField";
-import { ReactComponent as SearchIcon } from "@material-design-icons/svg/outlined/search.svg";
+import React from "react";
 
-const SearchWrapper = styled("div")({
-    width: "100%",
-    height: "100%",
-    display: "flex",
-    position: "relative",
-
-    "& .search__icon": {
-        position: "absolute",
-        top: 0,
-        left: 0,
-        bottom: 0,
-        pointerEvents: "none",
-        display: "flex",
-        alignItems: "center",
-        paddingLeft: "0.25rem",
-        color: "var(--mdc-theme-text-secondary-on-background)"
-    },
-
-    "& .search__input": {
-        width: "100%",
-        padding: "0.5rem 0.5rem 0.5rem 2.25rem",
-        outline: "none",
-        border: "none",
-        color: "var(--mdc-theme-text-primary-on-background)",
-        "&:focus": {
-            outline: "none"
-        },
-        "&::placeholder": {
-            textTransform: "uppercase",
-            letterSpacing: "0.05em",
-            color: "var(--mdc-theme-text-secondary-on-background)"
-        }
-    }
-});
+import { ReactComponent as SearchIcon } from "@webiny/icons/search.svg";
+import { Icon, InputPrimitive } from "@webiny/admin-ui";
 
 export interface SearchProps {
     value: string;
     onChange: (value: string) => void;
     onEnter?: () => any;
     inputPlaceholder?: string;
+    dataTestId?: string;
 }
 
-const Search = ({ value, onChange, onEnter, inputPlaceholder = "Search..." }: SearchProps) => {
-    const inputOnKeyDown = useCallback(
-        (e: OnKeyDownProps) => {
-            if (typeof onEnter === "function" && e.key === "Enter") {
-                onEnter();
-            }
-        },
-        [onEnter]
-    );
-
+const Search = ({
+    value,
+    onChange,
+    onEnter,
+    dataTestId,
+    inputPlaceholder = "Search..."
+}: SearchProps) => {
     return (
-        <SearchWrapper data-testid={"default-data-list.search"}>
-            <div className="search__icon">
-                <SearchIcon />
-            </div>
-            <InputField
-                id={"search-input"}
-                onKeyDown={inputOnKeyDown}
-                className="search__input"
-                placeholder={inputPlaceholder}
-                value={value}
-                onChange={onChange}
-                autoComplete="off"
-            />
-        </SearchWrapper>
+        <InputPrimitive
+            id={"search-input"}
+            placeholder={inputPlaceholder}
+            value={value}
+            onChange={onChange}
+            onEnter={onEnter}
+            autoComplete="off"
+            startIcon={<Icon label={"Search"} icon={<SearchIcon />} />}
+            variant={"ghost"}
+            size={"md"}
+            data-testid={dataTestId}
+        />
     );
 };
 
diff --git a/packages/app-admin/src/components/SimpleForm/SimpleForm.tsx b/packages/app-admin/src/components/SimpleForm/SimpleForm.tsx
index 10d43aa3c68..fa8fd524708 100644
--- a/packages/app-admin/src/components/SimpleForm/SimpleForm.tsx
+++ b/packages/app-admin/src/components/SimpleForm/SimpleForm.tsx
@@ -1,89 +1,86 @@
 import * as React from "react";
-import styled from "@emotion/styled";
-import { css } from "emotion";
-import classNames from "classnames";
-import { Cell, Grid } from "@webiny/ui/Grid";
-import { Typography } from "@webiny/ui/Typography";
-import { Elevation } from "@webiny/ui/Elevation";
-import { Icon } from "@webiny/ui/Icon";
+import { cn, cva, Grid, Heading, Icon, type VariantProps } from "@webiny/admin-ui";
 
-const SimpleFormContainer = styled("div")({
-    position: "relative",
-    margin: "17px 50px"
-});
-
-const header = css({
-    borderBottom: "1px solid var(--mdc-theme-on-background)",
-    color: "var(--mdc-theme-text-primary-on-background)"
-});
-
-const title = css({
-    display: "flex",
-    alignItems: "center"
-});
-
-const actions = css({
-    display: "flex",
-    justifyContent: "flex-end",
-    alignItems: "center"
-});
-
-const icon = css({
-    marginRight: 15,
-    color: "var(--mdc-theme-text-primary-on-background)"
-});
-
-const footer = css`
-    display: flex;
-    justify-content: flex-end;
-    flex-wrap: wrap;
-    border-top: 1px solid var(--mdc-theme-on-background);
-    padding: 24px;
-    box-sizing: border-box;
-    min-height: 52px;
-    button:last-of-type {
-        margin-left: 8px;
+const simpleFormInnerVariants = cva("wby-mx-auto", {
+    variants: {
+        size: {
+            md: "wby-max-w-[640px]",
+            lg: "wby-max-w-[800px]",
+            full: "wby-max-w-full"
+        }
+    },
+    defaultVariants: {
+        size: "md"
     }
-`;
+});
 
-interface SimpleFormProps {
+interface SimpleFormProps
+    extends React.HTMLAttributes<HTMLDivElement>,
+        VariantProps<typeof simpleFormInnerVariants> {
     children: React.ReactNode;
-    "data-testid"?: string;
     noElevation?: boolean;
     className?: string;
 }
-export const SimpleForm = (props: SimpleFormProps) => {
+
+export const SimpleForm = ({ children, className, size, ...props }: SimpleFormProps) => {
     return (
-        <SimpleFormContainer
-            className={classNames("webiny-data-list", props.className)}
-            data-testid={props["data-testid"]}
+        <div
+            {...props}
+            className={cn(["webiny-data-list", "wby-mx-auto wby-p-lg", "wby-relative"], className)}
         >
-            {props.noElevation ? props.children : <Elevation z={1}>{props.children}</Elevation>}
-        </SimpleFormContainer>
+            <div className={cn(simpleFormInnerVariants({ size }))}>{children}</div>
+        </div>
     );
 };
 
-interface SimpleFormHeaderProps {
+const simpleFormHeaderVariants = cva(
+    "wby-p-md wby-pl-lg wby-border-sm wby-border-neutral-dimmed-darker",
+    {
+        variants: {
+            rounded: {
+                true: "wby-rounded-t-3xl"
+            }
+        },
+        defaultVariants: {
+            rounded: true
+        }
+    }
+);
+
+interface SimpleFormHeaderProps
+    extends Omit<React.HTMLAttributes<HTMLDivElement>, "title">,
+        VariantProps<typeof simpleFormHeaderVariants> {
     title: React.ReactNode;
     icon?: React.ReactElement<any>;
     children?: React.ReactNode;
     ["data-testid"]?: string;
 }
-export const SimpleFormHeader = (props: SimpleFormHeaderProps) => {
+
+export const SimpleFormHeader = ({
+    children,
+    icon,
+    title,
+    className,
+    rounded,
+    ...props
+}: SimpleFormHeaderProps) => {
     return (
-        <Grid className={header} data-testid={props["data-testid"]}>
-            <Cell span={props.children ? 6 : 12} className={title}>
-                <React.Fragment>
-                    {props.icon && <Icon className={icon} icon={props.icon} />}
-                    <Typography use="headline5">{props.title}</Typography>
-                </React.Fragment>
-            </Cell>
-            {props.children && (
-                <Cell span={6} className={actions}>
-                    {props.children}
-                </Cell>
-            )}
-        </Grid>
+        <div
+            className={cn(simpleFormHeaderVariants({ rounded }), className)}
+            data-testid={props["data-testid"]}
+        >
+            <Grid>
+                <Grid.Column span={children ? 6 : 12}>
+                    <>
+                        {icon && <Icon label={title as string} icon={icon} />}
+                        <Heading level={4} className={"wby-truncate"}>
+                            {title}
+                        </Heading>
+                    </>
+                </Grid.Column>
+                <>{children ? <Grid.Column span={6}>{children}</Grid.Column> : null}</>
+            </Grid>
+        </div>
     );
 };
 
@@ -91,14 +88,35 @@ export interface SimpleFormFooterProps {
     children: React.ReactNode;
     className?: string;
 }
-export const SimpleFormFooter = (props: SimpleFormFooterProps) => {
-    return <div className={classNames(footer, props.className)}>{props.children}</div>;
+
+export const SimpleFormFooter = ({ children, className }: SimpleFormFooterProps) => {
+    return (
+        <div
+            className={cn(
+                "wby-p-lg wby-pt-none wby-border-sm wby-border-t-none wby-border-neutral-dimmed-darker wby-rounded-b-3xl",
+                "wby-flex wby-justify-end wby-gap-sm",
+                className
+            )}
+        >
+            {children}
+        </div>
+    );
 };
 
 interface SimpleFormContentProps {
     children: React.ReactNode;
+    className?: string;
 }
 
-export const SimpleFormContent = (props: SimpleFormContentProps) => {
-    return props.children as unknown as React.ReactElement;
+export const SimpleFormContent = ({ children, className }: SimpleFormContentProps) => {
+    return (
+        <div
+            className={cn(
+                "wby-p-lg wby-border-sm wby-border-y-none wby-border-neutral-dimmed-darker",
+                className
+            )}
+        >
+            {children}
+        </div>
+    );
 };
diff --git a/packages/app-admin/src/components/SingleImageUpload.tsx b/packages/app-admin/src/components/SingleImageUpload.tsx
index aa6d38fcc01..f6859c180db 100644
--- a/packages/app-admin/src/components/SingleImageUpload.tsx
+++ b/packages/app-admin/src/components/SingleImageUpload.tsx
@@ -1,28 +1,7 @@
-import * as React from "react";
-import { Image } from "@webiny/app/components/Image";
-import * as Ui from "@webiny/ui/ImageUpload";
+import React, { useCallback } from "react";
 import { FileManager, FileManagerFileItem } from "~/index";
 import { FormComponentProps } from "@webiny/ui/types";
-import { FormElementMessage } from "@webiny/ui/FormElementMessage";
-import styled from "@emotion/styled";
-import { useCallback } from "react";
-
-const ImageUploadWrapper = styled("div")({
-    position: "relative",
-    ".disabled": {
-        opacity: 0.75,
-        pointerEvents: "none"
-    },
-    ".mdc-floating-label--float-above": {
-        transform: "scale(0.75)",
-        top: 10,
-        left: 10,
-        color: "var(--mdc-theme-text-secondary-on-background)"
-    },
-    ".mdc-text-field-helper-text": {
-        color: "var(--mdc-theme-text-secondary-on-background)"
-    }
-});
+import { FileItem, FilePicker, type FilePickerProps } from "@webiny/admin-ui";
 
 export interface SingleImageUploadProps extends FormComponentProps {
     /**
@@ -75,6 +54,7 @@ export interface SingleImageUploadProps extends FormComponentProps {
 
     /**
      * Is the wrapper round?
+     * @deprecated Provide a custom `renderImagePreview` instead.
      */
     round?: boolean;
 
@@ -83,25 +63,45 @@ export interface SingleImageUploadProps extends FormComponentProps {
      * @deprecated Pick the desired file attributes in the `onChange` callback, or `beforeChange` on the `<Bind>` element.
      */
     onChangePick?: string[];
+
+    /**
+     * Render the image preview.
+     */
+    renderFilePreview?: FilePickerProps["renderFilePreview"];
+
+    /**
+     * Render the trigger button.
+     */
+    renderTrigger?: FilePickerProps["renderTrigger"];
+
+    /**
+     * Component type.
+     */
+    type?: FilePickerProps["type"];
+
+    /**
+     * Component variant.
+     */
+    variant?: FilePickerProps["variant"];
 }
 
 const SingleImageUpload = (props: SingleImageUploadProps) => {
     const {
+        accept,
         className,
-        value,
-        validation,
-        label,
         description,
-        accept,
+        disabled,
         includeFileMeta = false,
+        label,
         maxSize,
-        imagePreviewProps,
-        disabled,
-        round
+        renderFilePreview,
+        renderTrigger,
+        validation,
+        value,
+        variant,
+        type
     } = props;
 
-    const { isValid: validationIsValid, message: validationMessage } = validation || {};
-
     const onChange = useCallback(
         (value: FileManagerFileItem | null) => {
             if (!props.onChange) {
@@ -124,38 +124,30 @@ const SingleImageUpload = (props: SingleImageUploadProps) => {
     );
 
     return (
-        <ImageUploadWrapper className={className}>
-            {label && (
-                <div className="mdc-floating-label mdc-floating-label--float-above">{label}</div>
-            )}
-
-            <FileManager
-                onChange={onChange}
-                accept={accept}
-                images={!accept}
-                maxSize={maxSize}
-                render={({ showFileManager }) => (
-                    <Ui.Image
-                        renderImagePreview={renderImageProps => (
-                            <Image {...renderImageProps} {...imagePreviewProps} />
-                        )}
-                        style={{ width: "100%", height: "auto" }}
-                        value={value}
-                        uploadImage={showFileManager}
-                        removeImage={() => onChange(null)}
+        <FileManager
+            onChange={onChange}
+            accept={accept}
+            images={!accept}
+            maxSize={maxSize}
+            render={({ showFileManager }) => (
+                <>
+                    <FilePicker
+                        label={label}
+                        description={description}
+                        validation={validation}
+                        className={className}
                         disabled={disabled}
-                        round={round}
+                        value={value ? FileItem.createFromUrl(value.src) : null}
+                        onSelectItem={showFileManager}
+                        onRemoveItem={() => onChange(null)}
+                        renderFilePreview={renderFilePreview}
+                        renderTrigger={renderTrigger}
+                        variant={variant}
+                        type={type}
                     />
-                )}
-            />
-
-            {validationIsValid === false && (
-                <FormElementMessage error>{validationMessage}</FormElementMessage>
-            )}
-            {validationIsValid !== false && description && (
-                <FormElementMessage>{description}</FormElementMessage>
+                </>
             )}
-        </ImageUploadWrapper>
+        />
     );
 };
 
diff --git a/packages/app-admin/src/components/SplitView/SplitView.tsx b/packages/app-admin/src/components/SplitView/SplitView.tsx
index 7a0b2339f5d..674014f1167 100644
--- a/packages/app-admin/src/components/SplitView/SplitView.tsx
+++ b/packages/app-admin/src/components/SplitView/SplitView.tsx
@@ -1,9 +1,5 @@
 import * as React from "react";
-import classSet from "classnames";
-import { CellProps } from "@webiny/ui/Grid";
-import { css } from "emotion";
-import styled from "@emotion/styled";
-import { getClasses } from "@webiny/ui/Helpers";
+import { cn, Separator, ColumnProps } from "@webiny/admin-ui";
 import {
     Panel,
     PanelProps,
@@ -12,41 +8,6 @@ import {
     PanelGroupProps
 } from "~/components/ResizablePanels";
 
-const grid = css({
-    "&.mdc-layout-grid": {
-        padding: 0,
-        margin: "-3px auto 0 auto",
-        backgroundColor: "var(--mdc-theme-background)",
-        ">.mdc-layout-grid__inner": {
-            gridGap: 0
-        }
-    }
-});
-
-const RightPanelWrapper = styled("div")({
-    backgroundColor: "var(--mdc-theme-background)",
-    overflow: "auto",
-    height: "calc(100vh - 64px)"
-});
-
-export const leftPanel = css({
-    backgroundColor: "var(--mdc-theme-surface)",
-    ">.webiny-data-list": {
-        display: "flex",
-        flexDirection: "column",
-        height: "calc(100vh - 70px)",
-        ".mdc-deprecated-list": {
-            overflow: "auto"
-        }
-    },
-    ">.mdc-deprecated-list": {
-        display: "flex",
-        flexDirection: "column",
-        maxHeight: "calc(100vh - 64px)",
-        overflow: "auto"
-    }
-});
-
 interface SplitViewProps extends Omit<PanelGroupProps, "direction" | "id" | "autoSaveId"> {
     layoutId?: string | null;
 }
@@ -57,7 +18,7 @@ const SplitView = ({ children, className, layoutId, ...props }: SplitViewProps)
             direction="horizontal"
             id="splitView"
             autoSaveId={layoutId}
-            className={classSet(grid, className, "webiny-split-view")}
+            className={cn("webiny-split-view", className)}
             {...props}
         >
             {children}
@@ -66,11 +27,14 @@ const SplitView = ({ children, className, layoutId, ...props }: SplitViewProps)
 };
 
 // Get the default size for the panel:
-const getDefaultSize = (span = 6) => {
-    return (span / 12) * 100;
+const getDefaultSize = (span: ColumnProps["span"]) => {
+    const spanValue = typeof span === "number" && span > 0 && span <= 12 ? span : 6;
+    return (spanValue / 12) * 100;
 };
 
-interface SplitViewPanelProps extends Omit<CellProps, "style">, Omit<PanelProps, "id"> {}
+interface SplitViewPanelProps extends Omit<PanelProps, "id"> {
+    span?: ColumnProps["span"];
+}
 
 const LeftPanel = ({ children, className, ...props }: SplitViewPanelProps) => {
     const defaultSize = props.defaultSize ?? getDefaultSize(props.span || 5);
@@ -81,20 +45,19 @@ const LeftPanel = ({ children, className, ...props }: SplitViewPanelProps) => {
                 defaultSize={defaultSize}
                 minSize={10}
                 id="leftPanel"
-                {...getClasses(
-                    props,
-                    classSet(leftPanel, className, "webiny-split-view__left-panel")
-                )}
+                className={cn("webiny-split-view__right-panel", className)}
                 {...props}
             >
                 {children}
             </Panel>
-            <PanelResizeHandle />
+            <PanelResizeHandle>
+                <Separator orientation={"vertical"} />
+            </PanelResizeHandle>
         </>
     );
 };
 
-const RightPanel = ({ children, ...props }: SplitViewPanelProps) => {
+const RightPanel = ({ children, className, ...props }: SplitViewPanelProps) => {
     const defaultSize = props.defaultSize ?? getDefaultSize(props.span || 7);
 
     return (
@@ -102,15 +65,10 @@ const RightPanel = ({ children, ...props }: SplitViewPanelProps) => {
             defaultSize={defaultSize}
             minSize={30}
             id="rightPanel"
-            {...getClasses(props, "webiny-split-view__right-panel")}
+            className={cn("webiny-split-view__right-panel", className)}
             {...props}
         >
-            <RightPanelWrapper
-                className={"webiny-split-view__right-panel-wrapper"}
-                id={"webiny-split-view-right-panel"}
-            >
-                {children}
-            </RightPanelWrapper>
+            {children}
         </Panel>
     );
 };
diff --git a/packages/app-admin/src/config/AdminConfig.tsx b/packages/app-admin/src/config/AdminConfig.tsx
new file mode 100644
index 00000000000..d051af4aafa
--- /dev/null
+++ b/packages/app-admin/src/config/AdminConfig.tsx
@@ -0,0 +1,78 @@
+import React from "react";
+import { AppContainer, Plugin } from "@webiny/app";
+import { Menu, type MenuConfig } from "./AdminConfig/Menu";
+import { Tenant, TenantConfig } from "./AdminConfig/Tenant";
+import type { SupportMenuConfig } from "./AdminConfig/Menu/SupportMenu";
+import type { UserMenuConfig } from "./AdminConfig/Menu/UserMenu";
+import { Route } from "./AdminConfig/Route";
+import { Theme } from "./AdminConfig/Theme";
+import { createAdminConfig } from "./createAdminConfig";
+
+const base = createAdminConfig<AdminConfig>();
+
+export const AdminWithConfig = Object.assign(base.WithConfig, {
+    displayName: "AdminWithConfig"
+});
+
+interface AdminConfig {
+    menus: MenuConfig[];
+    supportMenus: SupportMenuConfig[];
+    userMenus: UserMenuConfig[];
+    tenant: TenantConfig;
+}
+
+export const AdminConfigProvider = AppContainer.createDecorator(Original => {
+    return function AdminConfigProvider({ children }) {
+        return (
+            <>
+                {/* Wrap the entire app with an AdminConfig provider, and apply all public configs. */}
+                <Original>
+                    <AdminWithConfig>
+                        <base.ApplyPublicConfig />
+                        {children}
+                    </AdminWithConfig>
+                </Original>
+                {/* Once the app fully renders (after the LoginScreen), apply protected configs. */}
+                <Plugin>
+                    <base.ApplyProtectedConfig />
+                </Plugin>
+            </>
+        );
+    };
+});
+
+export const useAdminConfig = () => {
+    const baseConfig = base.useConfig();
+
+    return {
+        menus: baseConfig.menus ?? [],
+        userMenus: baseConfig.userMenus ?? [],
+        supportMenus: baseConfig.supportMenus ?? [],
+        tenant: baseConfig.tenant || {}
+    };
+};
+
+export interface PublicProps {
+    children: React.ReactNode;
+}
+
+export const Public = ({ children }: PublicProps) => {
+    return <base.PublicConfig>{children}</base.PublicConfig>;
+};
+
+export interface PrivateProps {
+    children: React.ReactNode;
+}
+
+export const Private = ({ children }: PrivateProps) => {
+    return <base.PrivateConfig>{children}</base.PrivateConfig>;
+};
+
+export const AdminConfig = Object.assign(Private, {
+    Public,
+    Theme,
+    Menu,
+    Route,
+    Tenant,
+    useAdminConfig
+});
diff --git a/packages/app-admin/src/config/AdminConfig/Menu.tsx b/packages/app-admin/src/config/AdminConfig/Menu.tsx
new file mode 100644
index 00000000000..ec24df938c2
--- /dev/null
+++ b/packages/app-admin/src/config/AdminConfig/Menu.tsx
@@ -0,0 +1,79 @@
+import React from "react";
+import { makeDecoratable } from "~/index";
+import { ConnectToProperties, Property, useIdGenerator } from "@webiny/react-properties";
+import { MenuItem } from "./Menu/MenuItem";
+import { MenuLink } from "./Menu/MenuLink";
+import { MenuGroup } from "./Menu/MenuGroup";
+import { SupportMenu } from "./Menu/SupportMenu";
+import { UserMenu } from "./Menu/UserMenu";
+
+export interface MenuProps {
+    name: string;
+    parent?: string | null;
+    tags?: string[];
+    element?: React.ReactElement;
+    remove?: boolean;
+    pin?: "start" | "end";
+    before?: string;
+    after?: string;
+}
+
+export type MenuConfig = Pick<MenuProps, "name" | "parent" | "tags" | "element">;
+
+const BaseMenu = ({
+    name,
+    parent = null,
+    tags = [],
+    element,
+    remove,
+    pin,
+    before,
+    after
+}: MenuProps) => {
+    const getId = useIdGenerator("Menu");
+
+    let placeAfter = after !== undefined ? getId(after) : undefined;
+    let placeBefore = before !== undefined ? getId(before) : undefined;
+    if (pin) {
+        if (pin === "start") {
+            placeBefore = "$first";
+        } else {
+            placeAfter = "$last";
+        }
+    }
+
+    return (
+        <ConnectToProperties name={"AdminConfig"}>
+            <Property
+                id={getId(name)}
+                name={"menus"}
+                remove={remove}
+                array={true}
+                before={placeBefore}
+                after={placeAfter}
+            >
+                <Property id={getId(name, "name")} name={"name"} value={name} />
+                <Property id={getId(name, "parent")} name={"parent"} value={parent} />
+                <Property id={getId(name, "tags")} name={"tags"} value={tags} />
+                <Property id={getId(name, "element")} name={"element"} value={element} />
+            </Property>
+        </ConnectToProperties>
+    );
+};
+
+const DecoratableMenu = makeDecoratable("Menu", BaseMenu);
+
+const BaseFooterMenu = ({ tags, ...props }: MenuProps) => {
+    return <BaseMenu {...props} tags={["footer", ...(tags || [])]} />;
+};
+
+const DecoratableFooterMenu = makeDecoratable("FooterMenu", BaseFooterMenu);
+
+export const Menu = Object.assign(DecoratableMenu, {
+    Item: MenuItem,
+    Link: MenuLink,
+    Group: MenuGroup,
+    Footer: DecoratableFooterMenu,
+    Support: SupportMenu,
+    User: UserMenu
+});
diff --git a/packages/app-admin/src/config/AdminConfig/Menu/MenuGroup.tsx b/packages/app-admin/src/config/AdminConfig/Menu/MenuGroup.tsx
new file mode 100644
index 00000000000..5ce4a230a82
--- /dev/null
+++ b/packages/app-admin/src/config/AdminConfig/Menu/MenuGroup.tsx
@@ -0,0 +1,17 @@
+import React from "react";
+import { makeDecoratable } from "~/index";
+import { Sidebar } from "@webiny/admin-ui";
+import { type SidebarMenuItemGroupProps } from "@webiny/admin-ui/Sidebar/components/items/SidebarMenuItem";
+
+const MenuGroupBase = (props: SidebarMenuItemGroupProps) => {
+    return <Sidebar.Group {...props} />;
+};
+
+export const DecoratableMenuGroup = makeDecoratable("MenuGroup", MenuGroupBase);
+
+const MenuGroup = Object.assign(DecoratableMenuGroup, {
+    Action: Sidebar.Item.Action,
+    Icon: Sidebar.Item.Icon
+});
+
+export { MenuGroup };
diff --git a/packages/app-admin/src/config/AdminConfig/Menu/MenuItem.tsx b/packages/app-admin/src/config/AdminConfig/Menu/MenuItem.tsx
new file mode 100644
index 00000000000..71dc63e1c69
--- /dev/null
+++ b/packages/app-admin/src/config/AdminConfig/Menu/MenuItem.tsx
@@ -0,0 +1,17 @@
+import React from "react";
+import { makeDecoratable } from "~/index";
+import { Sidebar } from "@webiny/admin-ui";
+import { type SidebarMenuItemButtonProps } from "@webiny/admin-ui/Sidebar/components/items/SidebarMenuItem";
+
+const MenuLinkBase = (props: SidebarMenuItemButtonProps) => {
+    return <Sidebar.Item {...props} />;
+};
+
+const DecoratableMenuItem = makeDecoratable("MenuItem", MenuLinkBase);
+
+const MenuItem = Object.assign(DecoratableMenuItem, {
+    Action: Sidebar.Item.Action,
+    Icon: Sidebar.Item.Icon
+});
+
+export { MenuItem };
diff --git a/packages/app-admin/src/config/AdminConfig/Menu/MenuLink.tsx b/packages/app-admin/src/config/AdminConfig/Menu/MenuLink.tsx
new file mode 100644
index 00000000000..b2f7a71edc1
--- /dev/null
+++ b/packages/app-admin/src/config/AdminConfig/Menu/MenuLink.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+import { makeDecoratable } from "~/index";
+import { Sidebar } from "@webiny/admin-ui";
+import { useLocation } from "@webiny/react-router";
+import { type SidebarMenuItemLinkProps } from "@webiny/admin-ui/Sidebar/components/items/SidebarMenuLink";
+
+const MenuLinkBase = (props: SidebarMenuItemLinkProps) => {
+    const location = useLocation();
+    return <Sidebar.Link {...props} active={location.pathname === props.to} />;
+};
+
+const DecoratableMenuLink = makeDecoratable("MenuLink", MenuLinkBase);
+
+const MenuLink = Object.assign(DecoratableMenuLink, {
+    Action: Sidebar.Link.Action,
+    Icon: Sidebar.Link.Icon
+});
+
+export { MenuLink };
diff --git a/packages/app-admin/src/config/AdminConfig/Menu/SupportMenu.tsx b/packages/app-admin/src/config/AdminConfig/Menu/SupportMenu.tsx
new file mode 100644
index 00000000000..7462b410fee
--- /dev/null
+++ b/packages/app-admin/src/config/AdminConfig/Menu/SupportMenu.tsx
@@ -0,0 +1,53 @@
+import React from "react";
+import { makeDecoratable } from "~/index";
+import { ConnectToProperties, Property, useIdGenerator } from "@webiny/react-properties";
+import { SupportMenuItem } from "./SupportMenu/SupportMenuItem";
+import { SupportMenuLink } from "./SupportMenu/SupportMenuLink";
+
+export interface SupportMenuProps {
+    name: string;
+    element?: React.ReactElement;
+    remove?: boolean;
+    before?: string;
+    after?: string;
+    pin?: "start" | "end";
+}
+
+export type SupportMenuConfig = Pick<SupportMenuProps, "name" | "element">;
+
+const BaseSupportMenu = ({ name, element, remove, before, after, pin }: SupportMenuProps) => {
+    const getId = useIdGenerator("Menu");
+
+    let placeAfter = after !== undefined ? getId(after) : undefined;
+    let placeBefore = before !== undefined ? getId(before) : undefined;
+    if (pin) {
+        if (pin === "start") {
+            placeBefore = "$first";
+        } else {
+            placeAfter = "$last";
+        }
+    }
+
+    return (
+        <ConnectToProperties name={"AdminConfig"}>
+            <Property
+                id={getId(name)}
+                name={"supportMenus"}
+                remove={remove}
+                array={true}
+                before={placeBefore}
+                after={placeAfter}
+            >
+                <Property id={getId(name, "name")} name={"name"} value={name} />
+                <Property id={getId(name, "element")} name={"element"} value={element} />
+            </Property>
+        </ConnectToProperties>
+    );
+};
+
+const DecoratableMenu = makeDecoratable("Menu", BaseSupportMenu);
+
+export const SupportMenu = Object.assign(DecoratableMenu, {
+    Item: SupportMenuItem,
+    Link: SupportMenuLink
+});
diff --git a/packages/app-admin/src/config/AdminConfig/Menu/SupportMenu/SupportMenuItem.tsx b/packages/app-admin/src/config/AdminConfig/Menu/SupportMenu/SupportMenuItem.tsx
new file mode 100644
index 00000000000..7fe2de9f901
--- /dev/null
+++ b/packages/app-admin/src/config/AdminConfig/Menu/SupportMenu/SupportMenuItem.tsx
@@ -0,0 +1,15 @@
+import React from "react";
+import { makeDecoratable } from "~/index";
+import { DropdownMenu, DropdownMenuItemProps } from "@webiny/admin-ui";
+
+const SupportMenuItemBase = (props: DropdownMenuItemProps) => {
+    return <DropdownMenu.Item {...props} />;
+};
+
+export const DecoratableSupportMenuItem = makeDecoratable("SupportMenuItem", SupportMenuItemBase);
+
+const SupportMenuItem = Object.assign(DecoratableSupportMenuItem, {
+    Icon: DropdownMenu.Item.Icon
+});
+
+export { SupportMenuItem };
diff --git a/packages/app-admin/src/config/AdminConfig/Menu/SupportMenu/SupportMenuLink.tsx b/packages/app-admin/src/config/AdminConfig/Menu/SupportMenu/SupportMenuLink.tsx
new file mode 100644
index 00000000000..8d60ed04641
--- /dev/null
+++ b/packages/app-admin/src/config/AdminConfig/Menu/SupportMenu/SupportMenuLink.tsx
@@ -0,0 +1,15 @@
+import React from "react";
+import { makeDecoratable } from "~/index";
+import { DropdownMenu, DropdownMenuLinkProps } from "@webiny/admin-ui";
+
+const SupportMenuLinkBase = (props: DropdownMenuLinkProps) => {
+    return <DropdownMenu.Link {...props} />;
+};
+
+const DecoratableSupportMenuLink = makeDecoratable("SupportMenuLink", SupportMenuLinkBase);
+
+const SupportMenuLink = Object.assign(DecoratableSupportMenuLink, {
+    Icon: DropdownMenu.Link.Icon
+});
+
+export { SupportMenuLink };
diff --git a/packages/app-admin/src/config/AdminConfig/Menu/UserMenu.tsx b/packages/app-admin/src/config/AdminConfig/Menu/UserMenu.tsx
new file mode 100644
index 00000000000..b97772d55ae
--- /dev/null
+++ b/packages/app-admin/src/config/AdminConfig/Menu/UserMenu.tsx
@@ -0,0 +1,68 @@
+import React from "react";
+import { makeDecoratable } from "~/index";
+import { ConnectToProperties, Property, useIdGenerator } from "@webiny/react-properties";
+import { UserMenuItem } from "./UserMenu/UserMenuItem";
+import { UserMenuLink } from "./UserMenu/UserMenuLink";
+import { UserMenuSeparator } from "./UserMenu/UserMenuSeparator";
+
+export interface UserMenuProps {
+    name: string;
+    parent?: string | null;
+    tags?: string[];
+    element?: React.ReactElement;
+    remove?: boolean;
+    pin?: "start" | "end";
+    before?: string;
+    after?: string;
+}
+
+export type UserMenuConfig = Pick<UserMenuProps, "name" | "parent" | "tags" | "element">;
+
+const BaseUserMenu = ({
+    name,
+    parent = null,
+    tags = [],
+    element,
+    remove,
+    pin,
+    before,
+    after
+}: UserMenuProps) => {
+    const getId = useIdGenerator("UserMenu");
+
+    let placeAfter = after !== undefined ? getId(after) : undefined;
+    let placeBefore = before !== undefined ? getId(before) : undefined;
+    if (pin) {
+        if (pin === "start") {
+            placeBefore = "$first";
+        } else {
+            placeAfter = "$last";
+        }
+    }
+
+    return (
+        <ConnectToProperties name={"AdminConfig"}>
+            <Property
+                id={getId(name)}
+                name={"userMenus"}
+                remove={remove}
+                array={true}
+                before={placeBefore}
+                after={placeAfter}
+            >
+                <Property id={getId(name, "name")} name={"name"} value={name} />
+                <Property id={getId(name, "parent")} name={"parent"} value={parent} />
+                <Property id={getId(name, "tags")} name={"tags"} value={tags} />
+                <Property id={getId(name, "element")} name={"element"} value={element} />
+            </Property>
+        </ConnectToProperties>
+    );
+};
+
+const DecoratableUserMenu = makeDecoratable("UserMenu", BaseUserMenu);
+
+export const UserMenu = Object.assign(DecoratableUserMenu, {
+    Item: UserMenuItem,
+    Link: UserMenuLink,
+    Separator: UserMenuSeparator
+});
diff --git a/packages/app-admin/src/config/AdminConfig/Menu/UserMenu/UserMenuItem.tsx b/packages/app-admin/src/config/AdminConfig/Menu/UserMenu/UserMenuItem.tsx
new file mode 100644
index 00000000000..4b5a1ef3b81
--- /dev/null
+++ b/packages/app-admin/src/config/AdminConfig/Menu/UserMenu/UserMenuItem.tsx
@@ -0,0 +1,10 @@
+import {
+    UserMenuItem as BaseUserMenuItem,
+    UserMenuItemIcon as BaseUserMenuItemIcon
+} from "~/base/ui/UserMenu/UserMenuItem";
+
+const UserMenuItem = Object.assign(BaseUserMenuItem, {
+    Icon: BaseUserMenuItemIcon
+});
+
+export { UserMenuItem };
diff --git a/packages/app-admin/src/config/AdminConfig/Menu/UserMenu/UserMenuLink.tsx b/packages/app-admin/src/config/AdminConfig/Menu/UserMenu/UserMenuLink.tsx
new file mode 100644
index 00000000000..ec64a6a64cd
--- /dev/null
+++ b/packages/app-admin/src/config/AdminConfig/Menu/UserMenu/UserMenuLink.tsx
@@ -0,0 +1,10 @@
+import {
+    UserMenuLink as BaseUserMenuLink,
+    UserMenuLinkIcon as BaseUserMenuLinkIcon
+} from "~/base/ui/UserMenu/UserMenuLink";
+
+const UserMenuLink = Object.assign(BaseUserMenuLink, {
+    Icon: BaseUserMenuLinkIcon
+});
+
+export { UserMenuLink };
diff --git a/packages/app-admin/src/config/AdminConfig/Menu/UserMenu/UserMenuSeparator.tsx b/packages/app-admin/src/config/AdminConfig/Menu/UserMenu/UserMenuSeparator.tsx
new file mode 100644
index 00000000000..69965e913bc
--- /dev/null
+++ b/packages/app-admin/src/config/AdminConfig/Menu/UserMenu/UserMenuSeparator.tsx
@@ -0,0 +1 @@
+export { UserMenuSeparator } from "~/base/ui/UserMenu/UserMenuSeparator";
diff --git a/packages/app-admin/src/config/AdminConfig/Menu/UserMenu/types.ts b/packages/app-admin/src/config/AdminConfig/Menu/UserMenu/types.ts
new file mode 100644
index 00000000000..40366394dba
--- /dev/null
+++ b/packages/app-admin/src/config/AdminConfig/Menu/UserMenu/types.ts
@@ -0,0 +1,8 @@
+import React from "react";
+
+export interface BaseUserMenuItemProps {
+    label: string;
+    icon?: React.ReactNode;
+    action?: React.ReactNode;
+    children?: React.ReactNode;
+}
diff --git a/packages/app-admin/src/config/AdminConfig/Menu/types.ts b/packages/app-admin/src/config/AdminConfig/Menu/types.ts
new file mode 100644
index 00000000000..656ebd4c277
--- /dev/null
+++ b/packages/app-admin/src/config/AdminConfig/Menu/types.ts
@@ -0,0 +1,8 @@
+import React from "react";
+
+export interface BaseMenuItemProps {
+    label: string;
+    icon?: React.ReactNode;
+    action?: React.ReactNode;
+    children?: React.ReactNode;
+}
diff --git a/packages/app-admin/src/config/AdminConfig/Route.tsx b/packages/app-admin/src/config/AdminConfig/Route.tsx
new file mode 100644
index 00000000000..d355310f7d1
--- /dev/null
+++ b/packages/app-admin/src/config/AdminConfig/Route.tsx
@@ -0,0 +1,11 @@
+import React from "react";
+import { Route as AppRoute } from "@webiny/app/config/RouterConfig/Route";
+import { RouterConfig } from "@webiny/app/config/RouterConfig";
+
+export const Route = (props: React.ComponentProps<typeof AppRoute>) => {
+    return (
+        <RouterConfig>
+            <AppRoute {...props} />
+        </RouterConfig>
+    );
+};
diff --git a/packages/app-admin/src/config/AdminConfig/Tenant.tsx b/packages/app-admin/src/config/AdminConfig/Tenant.tsx
new file mode 100644
index 00000000000..162af533262
--- /dev/null
+++ b/packages/app-admin/src/config/AdminConfig/Tenant.tsx
@@ -0,0 +1,33 @@
+import React from "react";
+import { makeDecoratable } from "~/index";
+import { ConnectToProperties, Property, useIdGenerator } from "@webiny/react-properties";
+import { TenantName } from "./Tenant/TenantName";
+import { TenantLogo } from "./Tenant/TenantLogo";
+
+export interface TenantProps {
+    children: React.ReactNode;
+}
+
+export type TenantConfig = {
+    name: string;
+    logo: React.ReactNode;
+};
+
+const BaseTenant = ({ children }: TenantProps) => {
+    const getId = useIdGenerator("Tenant");
+
+    return (
+        <ConnectToProperties name={"AdminConfig"}>
+            <Property id={getId("tenant")} name={"tenant"}>
+                {children}
+            </Property>
+        </ConnectToProperties>
+    );
+};
+
+const DecoratableTenant = makeDecoratable("Tenant", BaseTenant);
+
+export const Tenant = Object.assign(DecoratableTenant, {
+    Name: TenantName,
+    Logo: TenantLogo
+});
diff --git a/packages/app-admin/src/config/AdminConfig/Tenant/TenantLogo.tsx b/packages/app-admin/src/config/AdminConfig/Tenant/TenantLogo.tsx
new file mode 100644
index 00000000000..007186cb741
--- /dev/null
+++ b/packages/app-admin/src/config/AdminConfig/Tenant/TenantLogo.tsx
@@ -0,0 +1,15 @@
+import React from "react";
+import { makeDecoratable } from "~/index";
+import { Property, useIdGenerator } from "@webiny/react-properties";
+
+export interface TenantLogoProps {
+    element: React.ReactNode;
+}
+
+const BaseTenantLogo = ({ element }: TenantLogoProps) => {
+    const getId = useIdGenerator("Tenant");
+
+    return <Property id={getId("logo")} name={"logo"} value={element} />;
+};
+
+export const TenantLogo = makeDecoratable("TenantLogo", BaseTenantLogo);
diff --git a/packages/app-admin/src/config/AdminConfig/Tenant/TenantName.tsx b/packages/app-admin/src/config/AdminConfig/Tenant/TenantName.tsx
new file mode 100644
index 00000000000..44760cc2778
--- /dev/null
+++ b/packages/app-admin/src/config/AdminConfig/Tenant/TenantName.tsx
@@ -0,0 +1,15 @@
+import React from "react";
+import { makeDecoratable } from "~/index";
+import { Property, useIdGenerator } from "@webiny/react-properties";
+
+export interface TenantNameProps {
+    value: string;
+}
+
+const BaseTenantName = ({ value }: TenantNameProps) => {
+    const getId = useIdGenerator("Tenant");
+
+    return <Property id={getId("name")} name={"name"} value={value} />;
+};
+
+export const TenantName = makeDecoratable("TenantName", BaseTenantName);
diff --git a/packages/app-admin/src/config/AdminConfig/Theme.tsx b/packages/app-admin/src/config/AdminConfig/Theme.tsx
new file mode 100644
index 00000000000..3b911b8337e
--- /dev/null
+++ b/packages/app-admin/src/config/AdminConfig/Theme.tsx
@@ -0,0 +1,30 @@
+import React from "react";
+import { assignColor } from "./Theme/assignColor";
+import { ColorPalette, ColorShade } from "./Theme/types";
+
+export interface ThemeColorProps {
+    palette: ColorPalette;
+    color: string;
+    shade?: ColorShade;
+}
+
+export const Color = React.memo(({ palette, color, shade }: ThemeColorProps) => {
+    assignColor(palette, color, shade);
+    return null;
+});
+
+Color.displayName = "Color";
+
+export interface ThemeProps {
+    children: React.ReactNode;
+}
+
+const ThemeBase = React.memo(({ children }: ThemeProps) => {
+    return <>{children}</>;
+});
+
+ThemeBase.displayName = "Theme";
+
+export const Theme = Object.assign(ThemeBase, {
+    Color
+});
diff --git a/packages/app-admin/src/config/AdminConfig/Theme/assignColor.ts b/packages/app-admin/src/config/AdminConfig/Theme/assignColor.ts
new file mode 100644
index 00000000000..bd9fd1d764f
--- /dev/null
+++ b/packages/app-admin/src/config/AdminConfig/Theme/assignColor.ts
@@ -0,0 +1,41 @@
+import parseColor, { type Instance as TcColorInstance } from "tinycolor2";
+import { ColorPalette, ColorShade } from "./types";
+
+const generateShades = (color: TcColorInstance): Array<[ColorShade, TcColorInstance]> => {
+    return [
+        [100, color.clone().lighten(40)],
+        [200, color.clone().lighten(30)],
+        [300, color.clone().lighten(20)],
+        [400, color.clone().lighten(10)],
+        [500, color.clone()],
+        [600, color.clone().darken(10)],
+        [700, color.clone().darken(20)],
+        [800, color.clone().darken(30)],
+        [900, color.clone().darken(40)]
+    ];
+};
+
+const assignColorToCssVar = (
+    palette: ColorPalette,
+    shadeLevel: ColorShade,
+    color: TcColorInstance
+) => {
+    const varName = `--color-${palette}-${shadeLevel}`;
+
+    const hsl = color.toHsl();
+    const varValue = `${hsl.h}, ${hsl.s * 100}%, ${hsl.l * 100}%`;
+    document.documentElement.style.setProperty(varName, varValue);
+};
+
+export const assignColor = (palette: ColorPalette, color: string, shade?: ColorShade) => {
+    const colorInstance = parseColor(color);
+
+    if (shade) {
+        assignColorToCssVar(palette, shade, colorInstance);
+        return;
+    }
+
+    generateShades(colorInstance).forEach(([shadeLevel, shade]) => {
+        assignColorToCssVar(palette, shadeLevel, shade);
+    });
+};
diff --git a/packages/app-admin/src/config/AdminConfig/Theme/consts.ts b/packages/app-admin/src/config/AdminConfig/Theme/consts.ts
new file mode 100644
index 00000000000..90fe738e0e2
--- /dev/null
+++ b/packages/app-admin/src/config/AdminConfig/Theme/consts.ts
@@ -0,0 +1,10 @@
+export const COLOR_SHADES = [100, 200, 300, 400, 500, 600, 700, 800, 900] as const;
+
+export const COLOR_PALLETS = [
+    "primary",
+    "secondary",
+    "neutral",
+    "success",
+    "warning",
+    "destructive"
+] as const;
diff --git a/packages/app-admin/src/config/AdminConfig/Theme/types.ts b/packages/app-admin/src/config/AdminConfig/Theme/types.ts
new file mode 100644
index 00000000000..e145fbecd46
--- /dev/null
+++ b/packages/app-admin/src/config/AdminConfig/Theme/types.ts
@@ -0,0 +1,4 @@
+import { COLOR_PALLETS, COLOR_SHADES } from "./consts";
+
+export type ColorPalette = (typeof COLOR_PALLETS)[number];
+export type ColorShade = (typeof COLOR_SHADES)[number];
diff --git a/packages/app-admin/src/config/createAdminConfig.tsx b/packages/app-admin/src/config/createAdminConfig.tsx
new file mode 100644
index 00000000000..9432073a7dd
--- /dev/null
+++ b/packages/app-admin/src/config/createAdminConfig.tsx
@@ -0,0 +1,111 @@
+import React, { useContext, useEffect, useMemo, useState } from "react";
+import { Compose, Decorator, makeDecoratable } from "@webiny/react-composition";
+import type { GenericComponent } from "@webiny/react-composition/types";
+import { Properties, Property, toObject, useDebugConfig } from "@webiny/react-properties";
+
+const createHOC = (
+    newChildren: React.ReactNode
+): Decorator<GenericComponent<{ children?: React.ReactNode }>> => {
+    return BaseComponent => {
+        return function ConfigHOC({ children }) {
+            return (
+                <BaseComponent>
+                    {newChildren}
+                    {children}
+                </BaseComponent>
+            );
+        };
+    };
+};
+
+export interface WithConfigProps {
+    children: React.ReactNode;
+    onProperties?(properties: Property[]): void;
+}
+
+interface ConfigApplyProps {
+    children?: React.ReactNode;
+}
+
+export interface ConfigProps {
+    children: React.ReactNode;
+}
+
+const name = "AdminConfig";
+
+export function createAdminConfig<TConfig>() {
+    /**
+     * This component is used when we want to mount all composed configs.
+     */
+    const ApplyPublicConfig = makeDecoratable(
+        `${name}Apply<Public>`,
+        ({ children }: ConfigApplyProps) => {
+            return <>{children}</>;
+        }
+    );
+
+    const ApplyProtectedConfig = makeDecoratable(
+        `${name}Apply<Protected>`,
+        ({ children }: ConfigApplyProps) => {
+            return <>{children}</>;
+        }
+    );
+
+    /**
+     * This component is used to configure the component (it can be mounted many times).
+     */
+    const PublicConfig = ({ children }: ConfigProps) => {
+        return <Compose component={ApplyPublicConfig} with={createHOC(children)} />;
+    };
+
+    const ProtectedConfig = ({ children }: ConfigProps) => {
+        return <Compose component={ApplyProtectedConfig} with={createHOC(children)} />;
+    };
+
+    interface ViewContext {
+        name: string;
+        properties: Property[];
+    }
+
+    const defaultContext = { name, properties: [] };
+
+    const ViewContext = React.createContext<ViewContext>(defaultContext);
+
+    const WithConfig = ({ onProperties, children }: WithConfigProps) => {
+        const [properties, setProperties] = useState<Property[]>([]);
+        useDebugConfig(name, properties);
+        const context = { name, properties };
+
+        useEffect(() => {
+            if (typeof onProperties === "function") {
+                onProperties(properties);
+            }
+        }, [properties]);
+
+        const stateUpdater = (properties: Property[]) => {
+            setProperties(properties);
+        };
+
+        return (
+            <ViewContext.Provider value={context}>
+                <Properties onChange={stateUpdater} name={name}>
+                    {children}
+                </Properties>
+            </ViewContext.Provider>
+        );
+    };
+
+    function useConfig<TExtra extends object>(): TConfig & TExtra {
+        const { properties } = useContext(ViewContext);
+        return useMemo(() => toObject<TConfig & TExtra>(properties), [properties]);
+    }
+
+    return {
+        WithConfig,
+        PrivateConfig: ProtectedConfig,
+        PublicConfig,
+        ApplyPublicConfig,
+        ApplyProtectedConfig,
+        useConfig
+    };
+}
diff --git a/packages/app-admin/src/hooks/useSnackbar.tsx b/packages/app-admin/src/hooks/useSnackbar.tsx
index 9f8ac0b9158..8629db3c251 100644
--- a/packages/app-admin/src/hooks/useSnackbar.tsx
+++ b/packages/app-admin/src/hooks/useSnackbar.tsx
@@ -1,6 +1,5 @@
 import React from "react";
-import { useUi } from "@webiny/app/hooks/useUi";
-import { SnackbarAction } from "@webiny/ui/Snackbar";
+import { Toast, useToast } from "@webiny/admin-ui";
 
 interface UseSnackbarResponse {
     showSnackbar: (message: React.ReactNode, options?: Record<string, React.ReactNode>) => void;
@@ -12,34 +11,24 @@ interface UseSnackbarResponse {
 }
 
 export const useSnackbar = (): UseSnackbarResponse => {
-    const ui = useUi();
+    const { showToast, hideAllToasts } = useToast();
 
     return {
         showSnackbar: (message, options = {}) => {
-            ui.setState(ui => {
-                return { ...ui, snackbar: { message, options } };
+            showToast({
+                title: <Toast.Title text={message} />,
+                ...options
             });
         },
         showErrorSnackbar: (message, options = {}) => {
-            ui.setState(ui => {
-                return {
-                    ...ui,
-                    snackbar: {
-                        message,
-                        options: {
-                            timeout: -1,
-                            dismissesOnAction: true,
-                            action: <SnackbarAction label={"OK"} />,
-                            ...options
-                        }
-                    }
-                };
+            showToast({
+                title: <Toast.Title text={message} />,
+                duration: Infinity,
+                ...options
             });
         },
         hideSnackbar: () => {
-            ui.setState(ui => {
-                return { ...ui, snackbar: null };
-            });
+            hideAllToasts();
         }
     };
 };
diff --git a/packages/app-admin/src/index.ts b/packages/app-admin/src/index.ts
index ceaecc904b3..d6d2a3d59b4 100644
--- a/packages/app-admin/src/index.ts
+++ b/packages/app-admin/src/index.ts
@@ -2,18 +2,14 @@ export * from "@webiny/app";
 export type { HigherOrderComponent, ProviderProps, ComposeProps } from "@webiny/app";
 // UI components
 export * from "./base/ui/Tags";
-export * from "./base/ui/Menu";
 export * from "./base/ui/Layout";
 export * from "./base/ui/LocaleSelector";
+export * from "./base/ui/TenantSelector";
 export type { LayoutProps } from "./base/ui/Layout";
 export * from "./base/ui/Navigation";
-export type { MenuItemsProps } from "./base/ui/Navigation";
 export * from "./base/ui/Brand";
 export * from "./base/ui/Logo";
-export * from "./base/ui/Search";
-export type { SearchOptionData, SearchOptionProps } from "./base/ui/Search";
 export * from "./base/ui/UserMenu";
-export type { UserMenuItemProps } from "./base/ui/UserMenu";
 export * from "./base/ui/LoginScreen";
 export * from "./base/ui/CenteredView";
 export * from "./base/ui/Dashboard";
@@ -21,6 +17,8 @@ export * from "./base/ui/NotFound";
 
 // Base admin app
 export { Admin } from "./base/Admin";
+export * from "./config/AdminConfig";
+
 export type { AdminProps } from "./base/Admin";
 export { useViewComposition } from "./base/providers/ViewCompositionProvider";
 export type { ViewCompositionContext, ViewElement } from "./base/providers/ViewCompositionProvider";
diff --git a/packages/app-admin/src/plugins/globalSearch/SearchBar.tsx b/packages/app-admin/src/plugins/globalSearch/SearchBar.tsx
deleted file mode 100644
index 173c9bca8b2..00000000000
--- a/packages/app-admin/src/plugins/globalSearch/SearchBar.tsx
+++ /dev/null
@@ -1,256 +0,0 @@
-import * as React from "react";
-import { set } from "dot-prop-immutable";
-import { useRouter, UseRouter } from "@webiny/react-router";
-import Downshift from "downshift";
-import { plugins } from "@webiny/plugins";
-import { AdminGlobalSearchPlugin, AdminGlobalSearchPreventHotkeyPlugin } from "~/types";
-import classnames from "classnames";
-/**
- * Package react-hotkeyz does not have types.
- */
-// @ts-expect-error
-import { Hotkeys } from "react-hotkeyz";
-
-// UI components
-import { Icon } from "@webiny/ui/Icon";
-import { Elevation } from "@webiny/ui/Elevation";
-import SearchBarDropdown from "./SearchBarDropdown";
-
-// Icons
-import { ReactComponent as SearchIcon } from "@material-design-icons/svg/outlined/search.svg";
-
-// Local components
-import {
-    icon,
-    searchBarInput,
-    SearchBarInputWrapper,
-    SearchBarWrapper,
-    SearchShortcut,
-    searchWrapper
-} from "./styled";
-import { makeDecoratable } from "~/index";
-
-type SearchBarProps = UseRouter;
-
-export interface SearchBarState {
-    active: boolean;
-    searchTerm: { previous: string; current: string };
-    plugins: {
-        list: ReadonlyArray<AdminGlobalSearchPlugin>;
-        hotKeys: ReadonlyArray<AdminGlobalSearchPreventHotkeyPlugin>;
-        current?: AdminGlobalSearchPlugin;
-    };
-}
-
-class SearchBar extends React.Component<SearchBarProps, SearchBarState> {
-    public override state: SearchBarState = {
-        active: false,
-        searchTerm: {
-            previous: "",
-            current: ""
-        },
-        plugins: {
-            // List of all registered "admin-global-search" plugins.
-            get list() {
-                return plugins.byType<AdminGlobalSearchPlugin>("admin-global-search");
-            },
-            hotKeys: plugins.byType<AdminGlobalSearchPreventHotkeyPlugin>(
-                "admin-global-search-prevent-hotkey"
-            ),
-            // Current plugin - set by examining current route and its query params (on construct).
-            current: undefined
-        }
-    };
-
-    /**
-     * Helps us trigger some of the downshift's methods (eg. clearSelection) and helps us to avoid adding state.
-     */
-    public readonly downshift: any = React.createRef();
-
-    /**
-     * At some point we must programmatically focus the input.
-     */
-    private readonly input = React.createRef<HTMLInputElement>();
-
-    /**
-     * Let's check if current route is defined in one of the registered plugins.
-     * If so, then check current route query for search term and set it as default value of search input.
-     * @param props
-     */
-    constructor(props: SearchBarProps) {
-        super(props);
-        this.state.plugins.current = this.state.plugins.list.find(
-            p => p.route === props.location.pathname
-        );
-
-        if (this.state.plugins.current) {
-            let search;
-            const query = new URLSearchParams(props.location.search);
-            try {
-                search = JSON.parse(query.get("search") || "").query;
-            } catch (e) {
-                search = query.get("search");
-            }
-
-            this.state.searchTerm.current = search || "";
-            this.state.searchTerm.previous = this.state.searchTerm.current;
-        }
-    }
-
-    private readonly handleOpenHotkey = (e: React.KeyboardEvent): void => {
-        for (let i = 0; i < this.state.plugins.hotKeys.length; i++) {
-            const hotKey = this.state.plugins.hotKeys[i];
-            if (hotKey.preventOpen(e)) {
-                return;
-            }
-        }
-
-        e.preventDefault();
-        if (!this.input.current) {
-            return;
-        }
-        this.input.current.focus();
-    };
-
-    /**
-     * Re-routes to given route (provided by the plugin) with needed search query params.
-     * It also manages previous and current search terms and automatically highlighted item in dropdown.
-     * @param plugin
-     */
-    public readonly submitSearchTerm = (plugin: AdminGlobalSearchPlugin): void => {
-        this.setState(
-            state => {
-                const newState = set(state, "searchTerm.previous", state.searchTerm.current);
-                return set(newState, "plugins.current", plugin);
-            },
-            () => {
-                const query = new URLSearchParams();
-
-                if (this.state.searchTerm.current) {
-                    // If "search" key in the plugin was defined, it means SearchInput values were set. Otherwise,
-                    // we need to send the plain string into the "search" query param. This behavior was needed
-                    // eg. for pages, since Page entity doesn't use regular SearchInput type, but plain string.
-                    if (plugin.search) {
-                        query.set(
-                            "search",
-                            JSON.stringify({
-                                query: this.state.searchTerm.current,
-                                ...plugin.search
-                            })
-                        );
-                    } else {
-                        query.set("search", this.state.searchTerm.current);
-                    }
-                }
-
-                this.props.history.push({
-                    pathname: plugin.route,
-                    search: query.toString()
-                });
-            }
-        );
-    };
-
-    private readonly cancelSearchTerm = (): void => {
-        this.setState(state => {
-            state.searchTerm.current = state.searchTerm.previous;
-            return state;
-        });
-    };
-
-    public override render() {
-        return (
-            <Downshift ref={this.downshift} itemToString={item => item && item.label}>
-                {downshiftProps => {
-                    const { isOpen, openMenu, closeMenu, getInputProps } = downshiftProps;
-
-                    return (
-                        <div style={{ width: "100%" }}>
-                            <Hotkeys
-                                zIndex={10}
-                                keys={{
-                                    // @ts-expect-error
-                                    esc: () => document.activeElement.blur(),
-                                    "/": this.handleOpenHotkey
-                                }}
-                            />
-
-                            <Hotkeys
-                                zIndex={11}
-                                disabled={!isOpen}
-                                keys={{
-                                    esc: () => {
-                                        this.cancelSearchTerm();
-                                        closeMenu();
-                                    },
-                                    enter: () =>
-                                        setTimeout(() => {
-                                            const { selectedItem } = this.downshift.current.state;
-                                            if (selectedItem) {
-                                                closeMenu();
-                                                this.submitSearchTerm(selectedItem);
-                                            }
-                                        })
-                                }}
-                            />
-
-                            <Elevation
-                                className={classnames(searchWrapper, { active: this.state.active })}
-                                z={0}
-                            >
-                                <SearchBarWrapper>
-                                    <SearchBarInputWrapper>
-                                        <Icon className={icon} icon={<SearchIcon />} />
-
-                                        <React.Fragment>
-                                            <input
-                                                {...getInputProps({
-                                                    placeholder: "Search...",
-                                                    className: classnames(
-                                                        "mdc-text-field__input",
-                                                        searchBarInput
-                                                    ),
-                                                    ref: this.input,
-                                                    value: this.state.searchTerm.current,
-                                                    onClick: openMenu,
-                                                    onBlur: () => {
-                                                        this.cancelSearchTerm();
-                                                        this.setState({ active: false });
-                                                    },
-                                                    onFocus: () => {
-                                                        this.setState({ active: true });
-                                                        openMenu();
-                                                    },
-                                                    onChange: (
-                                                        e: React.ChangeEvent<HTMLInputElement>
-                                                    ) => {
-                                                        const value = e.target.value || "";
-                                                        this.setState(state => {
-                                                            state.searchTerm.current = value;
-                                                            return state;
-                                                        });
-                                                    }
-                                                })}
-                                            />
-                                        </React.Fragment>
-
-                                        <SearchShortcut>/</SearchShortcut>
-                                    </SearchBarInputWrapper>
-                                </SearchBarWrapper>
-                                {isOpen && <SearchBarDropdown context={this} />}
-                            </Elevation>
-                        </div>
-                    );
-                }}
-            </Downshift>
-        );
-    }
-}
-
-const SearchBarContainer = () => {
-    const routerProps = useRouter();
-
-    return <SearchBar {...routerProps} />;
-};
-
-export default makeDecoratable("SearchBarContainer", SearchBarContainer);
diff --git a/packages/app-admin/src/plugins/globalSearch/SearchBarDropdown.tsx b/packages/app-admin/src/plugins/globalSearch/SearchBarDropdown.tsx
deleted file mode 100644
index 61fc962e27a..00000000000
--- a/packages/app-admin/src/plugins/globalSearch/SearchBarDropdown.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-import * as React from "react";
-import { AdminGlobalSearchPlugin } from "~/types";
-import classnames from "classnames";
-import { List, ListItem, ListItemGraphic, ListItemText, ListItemMeta } from "@webiny/ui/List";
-import { searchBarDropdown, iconSearchType } from "./styled";
-import { Elevation } from "@webiny/ui/Elevation";
-import { Icon } from "@webiny/ui/Icon";
-import { Actions as DownshiftActions, DownshiftState, PropGetters } from "downshift";
-import { ReactComponent as SearchIcon } from "@material-design-icons/svg/outlined/search.svg";
-import { SearchBarState } from "~/plugins/globalSearch/SearchBar";
-
-interface SearchBarDropdownPropsContextDownshiftCurrent
-    extends DownshiftActions<any>,
-        PropGetters<any> {
-    state: DownshiftState<any>;
-}
-interface SearchBarDropdownPropsContextDownshift {
-    current: SearchBarDropdownPropsContextDownshiftCurrent;
-}
-interface SearchBarDropdownPropsContext {
-    downshift: SearchBarDropdownPropsContextDownshift;
-    submitSearchTerm: (item: AdminGlobalSearchPlugin) => void;
-    state: SearchBarState;
-}
-interface SearchBarDropdownProps {
-    context: SearchBarDropdownPropsContext;
-}
-export default class SearchBarDropdown extends React.Component<SearchBarDropdownProps> {
-    public override componentDidMount() {
-        const {
-            context: {
-                downshift: { current: downshift },
-                state: { plugins }
-            }
-        } = this.props;
-
-        downshift.selectItem(plugins.current);
-        downshift.setHighlightedIndex(
-            plugins.list.indexOf(plugins.current as AdminGlobalSearchPlugin)
-        );
-        downshift.openMenu();
-    }
-
-    public override render() {
-        const {
-            context: {
-                downshift: { current: downshift },
-                submitSearchTerm,
-                state: { plugins, searchTerm }
-            }
-        } = this.props;
-
-        const {
-            getMenuProps,
-            getItemProps,
-            state: { selectedItem, highlightedIndex }
-        } = downshift;
-
-        return (
-            <Elevation z={2} className={searchBarDropdown}>
-                <List {...getMenuProps()}>
-                    {plugins.list.map((item: AdminGlobalSearchPlugin, index) => {
-                        // Base classes.
-                        const itemClassNames = {
-                            highlighted: highlightedIndex === index,
-                            selected: false
-                        };
-
-                        // Add "selected" class if the item is selected.
-                        if (selectedItem && selectedItem === item) {
-                            itemClassNames.selected = true;
-                        }
-
-                        return (
-                            <ListItem
-                                key={item.route}
-                                {...getItemProps({
-                                    index,
-                                    item,
-                                    className: classnames(itemClassNames),
-                                    onClick: () => submitSearchTerm(item)
-                                })}
-                            >
-                                <ListItemGraphic>
-                                    <Icon className={iconSearchType} icon={<SearchIcon />} />
-                                </ListItemGraphic>
-                                <ListItemText>
-                                    {searchTerm.current || "Search for all..."}
-                                </ListItemText>
-                                <ListItemMeta>in {item.label}</ListItemMeta>
-                            </ListItem>
-                        );
-                    })}
-                </List>
-            </Elevation>
-        );
-    }
-}
diff --git a/packages/app-admin/src/plugins/globalSearch/icons/round-search-24px.svg b/packages/app-admin/src/plugins/globalSearch/icons/round-search-24px.svg
deleted file mode 100644
index 5a33edc210e..00000000000
--- a/packages/app-admin/src/plugins/globalSearch/icons/round-search-24px.svg
+++ /dev/null
@@ -1,20 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px"
-	 height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
-<g id="Header_x2F_BG" display="none">
-	<rect x="-358" y="-314" display="inline" fill="#F1F1F2" width="520" height="520"/>
-</g>
-<g id="Bounding_Boxes">
-	<g id="ui_x5F_spec_x5F_header_copy_3" display="none">
-	</g>
-	<path fill="none" d="M0,0h24v24H0V0z"/>
-</g>
-<g id="Rounded">
-	<g id="ui_x5F_spec_x5F_header_copy_5" display="none">
-	</g>
-	<path fill="currentColor" d="M15.5,14h-0.79l-0.28-0.27c1.2-1.4,1.82-3.31,1.48-5.34c-0.47-2.78-2.79-5-5.59-5.34c-4.23-0.52-7.79,3.04-7.27,7.27
-		c0.34,2.8,2.56,5.12,5.34,5.59c2.03,0.34,3.94-0.28,5.34-1.48L14,14.71v0.79l4.25,4.25c0.41,0.41,1.08,0.41,1.49,0l0,0
-		c0.41-0.41,0.41-1.08,0-1.49L15.5,14z M9.5,14C7.01,14,5,11.99,5,9.5S7.01,5,9.5,5S14,7.01,14,9.5S11.99,14,9.5,14z"/>
-</g>
-</svg>
diff --git a/packages/app-admin/src/plugins/globalSearch/index.tsx b/packages/app-admin/src/plugins/globalSearch/index.tsx
deleted file mode 100644
index 4a71a9f3449..00000000000
--- a/packages/app-admin/src/plugins/globalSearch/index.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from "react";
-
-export const globalSearchHotkey = {
-    type: "admin-global-search-prevent-hotkey",
-    name: "admin-global-search-prevent-hotkey-input",
-    preventOpen(e: React.ChangeEvent<HTMLInputElement>): boolean {
-        // Define a list of all node types we want to prevent the event from.
-        const ignoreNodes = ["INPUT", "TEXTAREA"];
-
-        return ignoreNodes.includes(e.target.nodeName);
-    }
-};
diff --git a/packages/app-admin/src/plugins/globalSearch/styled.ts b/packages/app-admin/src/plugins/globalSearch/styled.ts
deleted file mode 100644
index 66a531e1e3f..00000000000
--- a/packages/app-admin/src/plugins/globalSearch/styled.ts
+++ /dev/null
@@ -1,113 +0,0 @@
-import { css } from "emotion";
-import styled from "@emotion/styled";
-
-export const SearchShortcut = styled("div")({
-    border: "1px solid var(--mdc-theme-surface)",
-    color: "var(--mdc-theme-surface)",
-    borderRadius: 5,
-    width: 20,
-    height: 24,
-    marginTop: 1,
-    textAlign: "center",
-    fontSize: "12px",
-    paddingTop: "3px",
-    boxSizing: "border-box",
-    cursor: "default",
-    opacity: "0.8"
-});
-
-export const SearchBarWrapper = styled("div")({
-    display: "flex",
-    width: "100%"
-});
-
-export const SearchBarInputWrapper = styled("div")({
-    display: "flex",
-    width: "100%",
-    position: "relative"
-});
-
-export const searchBarInput = css({
-    width: "100%",
-    lineHeight: 1,
-    border: "none",
-    outline: "none",
-    backgroundColor: "transparent",
-    "&.mdc-text-field__input": {
-        paddingTop: "5px !important",
-        paddingLeft: "10px !important",
-        borderBottom: "none !important",
-        height: "25px !important",
-        color: "var(--mdc-theme-surface)",
-        "&::placeholder": {
-            color: "var(--mdc-theme-surface) !important",
-            opacity: "1 !important"
-        },
-        "&:focus::placeholder": {
-            color: "var(--mdc-theme-text-secondary-on-background) !important"
-        }
-    }
-});
-
-export const searchBarDropdown = css({
-    position: "absolute",
-    background: "white",
-    left: -1,
-    width: "calc(100% + 2px)",
-    top: 45,
-    zIndex: 2,
-    color: "var(--mdc-theme-on-surface)",
-    borderRadius: "0 0 5px 5px",
-    ".mdc-deprecated-list": {
-        padding: 0,
-        ".mdc-deprecated-list-item": {
-            "&.selected": {
-                fontWeight: "bold"
-            },
-            "&.highlighted": {
-                backgroundColor: "var(--mdc-theme-on-background)"
-            }
-        }
-    }
-});
-
-export const icon = css({
-    "&.mdc-button__icon": {
-        width: "auto !important",
-        paddingRight: 5,
-        opacity: 0.75,
-        marginTop: 2
-    }
-});
-
-export const iconSearchType = css({
-    cursor: "pointer",
-    paddingLeft: 5
-});
-
-export const searchWrapper = css({
-    backgroundColor: "rgba(0, 0, 0, 0.1)",
-    display: "flex",
-    padding: "10px 20px",
-    position: "relative",
-    borderRadius: 4,
-    transition: "background 100ms ease-in,width 100ms ease-out",
-    color: "var(--mdc-theme-surface)",
-    border: "1px solid transparent",
-    "&.active": {
-        color: "var(--mdc-theme-on-surface)",
-        border: "1px solid var(--mdc-theme-text-hint-on-dark)",
-        background: "var(--mdc-theme-surface)",
-        boxShadow: "0 1px 1px var(--mdc-theme-text-hint-on-dark)",
-        input: {
-            color: "var(--mdc-theme-on-surface)"
-        },
-        // @ts-expect-error
-        [SearchShortcut]: {
-            display: "none"
-        }
-    },
-    input: {
-        color: "var(--mdc-theme-surface)"
-    }
-});
diff --git a/packages/app-admin/src/styles.scss b/packages/app-admin/src/styles.scss
index 661f11cc324..47bd4b7b88c 100644
--- a/packages/app-admin/src/styles.scss
+++ b/packages/app-admin/src/styles.scss
@@ -1,3 +1,7 @@
-@import "./styles/reset";
-@import "./styles/theme";
-@import "./styles/material";
+// ⚠️ DEPRECATED STYLESHEET ⚠️
+//
+// This SCSS file is no longer in use.
+// We no longer rely on @material theming or component styling.
+//
+// If you're still importing this file, it can be safely removed.
+// Refer to the updated design system and theming approach from @webiny/admin-ui for current styling practices.
diff --git a/packages/app-admin/src/styles/material-theme-assignments.scss b/packages/app-admin/src/styles/material-theme-assignments.scss
deleted file mode 100644
index 89c716bbf08..00000000000
--- a/packages/app-admin/src/styles/material-theme-assignments.scss
+++ /dev/null
@@ -1,375 +0,0 @@
-@use "@material/top-app-bar/_mixins.scss" as topAppBar;
-@use "@material/elevation/mixins" as elevation;
-@use "@material/button/mixins" as button;
-@use "@material/icon-button/mixins" as iconButton;
-@use "@material/drawer/mixins" as drawer;
-@use "@material/tab-bar/mixins" as tabBar;
-@use "@material/tab/mixins" as tab;
-@use "@material/tab-indicator/mixins" as tabIndicator;
-@use "@material/list/mixins" as list;
-@use "@material/switch" as switch;
-@use "@material/textfield/mixins" as textfield;
-@use "@material/select/mixins" as select;
-@use "@material/checkbox/mixins" as checkbox;
-@use "@material/radio/mixins" as radio;
-@use "@material/snackbar/mixins" as snackbar;
-
-// top app bar should use theme-surface as the fill color
-.mdc-top-app-bar {
-  @include topAppBar.fill-color($mdc-theme-surface);
-}
-
-.mdc-top-app-bar.primary {
-  @include topAppBar.fill-color($mdc-theme-primary);
-}
-
-// elevation should use theme-surface as fill color so it can be used as surface
-.mdc-elevation--z1 {
-  @include elevation.elevation(1, $mdc-theme-on-surface);
-}
-
-.mdc-elevation--z2 {
-  @include elevation.elevation(2, $mdc-theme-on-surface);
-}
-
-.mdc-elevation--z3 {
-  @include elevation.elevation(3, $mdc-theme-on-surface);
-}
-
-.mdc-elevation--z1,
-.mdc-elevation--z2,
-.mdc-elevation--z3,
-.mdc-elevation--z4,
-.mdc-elevation--z5,
-.mdc-elevation--z6,
-.mdc-elevation--z7,
-.mdc-elevation--z8,
-.mdc-elevation--z9 {
-  background-color: $mdc-theme-surface;
-}
-
-// button styles
-.mdc-button {
-  @include button.shape-radius(2px);
-  .mdc-button__label {
-    display: flex;
-    align-items: center;
-  }
-}
-
-// set icon colors
-.mdc-icon,
-.mdc-icon-button {
-  @include iconButton.ink-color($mdc-theme-text-secondary-on-background);
-}
-
-// drawer
-.mcd-drawer {
-  @include drawer.title-ink-color($mdc-theme-text-primary-on-background);
-  @include drawer.subtitle-ink-color($mdc-theme-text-primary-on-background);
-  @include drawer.item-icon-ink-color($mdc-theme-text-primary-on-background);
-  @include drawer.item-text-ink-color($mdc-theme-text-primary-on-background);
-  @include drawer.surface-fill-color($mdc-theme-surface);
-  @include drawer.item-shape-radius(0);
-}
-
-// fix for drawer positioning
-.mdc-drawer {
-  z-index: 12;
-  background-color: $mdc-theme-surface;
-  &.mdc-drawer--modal.mdc-drawer--open {
-    top: 0;
-    background-color: $mdc-theme-surface;
-  }
-}
-
-// fix drawer display so we can have a nice drawer footer
-.mdc-drawer--modal.mdc-drawer--open {
-  display: flex;
-}
-
-// tabs
-.mdc-tab-bar {
-  @include tabBar.width("100%");
-
-  .mdc-tab {
-    @include tab.fixed-width("100px");
-    @include tab.text-label-color($mdc-theme-text-primary-on-background);
-    @include tab.icon-color($mdc-theme-text-primary-on-background);
-
-    // fixes tab width
-    flex: 1 0;
-  }
-
-  .mdc-tab-indicator {
-    @include tabIndicator.underline-color($mdc-theme-primary);
-  }
-}
-
-// list
-.mdc-deprecated-list {
-  @include list.deprecated-item-primary-text-ink-color($mdc-theme-text-primary-on-background);
-  @include list.deprecated-item-secondary-text-ink-color($mdc-theme-text-secondary-on-background);
-  @include list.deprecated-item-graphic-ink-color($mdc-theme-text-secondary-on-background);
-  @include list.deprecated-item-meta-ink-color($mdc-theme-text-secondary-on-background);
-  @include list.deprecated-divider-color($mdc-theme-on-background);
-  @include list.deprecated-group-subheader-ink-color($mdc-theme-text-primary-on-background);
-  @include list.deprecated-single-line-shape-radius(0);
-
-  .mdc-deprecated-list-item {
-    color: $mdc-theme-text-primary-on-background;
-  }
-
-  .mdc-deprecated-list-item__ripple {
-    overflow: hidden;
-  }
-
-  .mdc-deprecated-list-item:hover,
-  .mdc-deprecated-list-item::after,
-  .mdc-deprecated-list-item::before {
-    background-color: transparent;
-  }
-  &:not(.mdc-deprecated-list--non-interactive) {
-    .mdc-deprecated-list-item:hover {
-      background-color: $mdc-theme-text-hint-on-dark;
-      cursor: pointer;
-    }
-  }
-}
-
-// switch
-.mdc-switch {
-  @include switch.theme-styles(
-    (
-      selected-focus-handle-color: $mdc-theme-secondary,
-      selected-focus-state-layer-color: $mdc-theme-secondary,
-      selected-focus-track-color: rgba($mdc-theme-secondary, 0.54),
-      selected-handle-color: $mdc-theme-secondary,
-      selected-hover-handle-color: $mdc-theme-secondary,
-      selected-hover-state-layer-color: $mdc-theme-secondary,
-      selected-hover-track-color: rgba($mdc-theme-secondary, 0.54),
-      selected-pressed-handle-color: $mdc-theme-secondary,
-      selected-pressed-state-layer-color: $mdc-theme-secondary,
-      selected-pressed-track-color: rgba($mdc-theme-secondary, 0.54),
-      selected-track-color: rgba($mdc-theme-secondary, 0.54),
-      unselected-focus-handle-color: $mdc-theme-surface,
-      unselected-focus-track-color: rgba($mdc-theme-on-surface, 0.38),
-      unselected-handle-color: $mdc-theme-surface,
-      unselected-hover-handle-color: $mdc-theme-surface,
-      unselected-hover-track-color: rgba($mdc-theme-on-surface, 0.38),
-      unselected-pressed-handle-color: $mdc-theme-surface,
-      unselected-pressed-track-color: rgba($mdc-theme-on-surface, 0.38),
-      unselected-track-color: rgba($mdc-theme-on-surface, 0.38)
-    )
-  );
-
-  margin-left: 5px;
-  margin-right: 10px;
-
-  .mdc-switch__icons {
-    display: none;
-  }
-}
-
-// menu
-.mdc-menu {
-  background-color: $mdc-theme-surface;
-}
-
-/*
-Fix the width of input components when inside grids
- */
-.mdc-text-field {
-  width: 100%;
-  @include textfield.shape-radius(0);
-  @include textfield.textarea-shape-radius(0);
-  @include textfield.fill-color($mdc-theme-on-background);
-  @include textfield.label-color($mdc-theme-text-primary-on-background);
-  @include textfield.ink-color($mdc-theme-on-surface);
-  &.mdc-text-field--textarea {
-    &.--focused {
-      .mdc-floating-label.mdc-floating-label {
-        top: 0px;
-      }
-    }
-  }
-  &.mdc-text-field--disabled {
-    background-color: $mdc-theme-background;
-    opacity: 0.55;
-    .mdc-text-field__input {
-      color: $mdc-theme-text-primary-on-background;
-      &::placeholder {
-        color: $mdc-theme-text-primary-on-background;
-      }
-    }
-  }
-  .mdc-text-field__input {
-    width: 100%;
-    resize: none;
-    //border: 1px solid $mdc-theme-on-background;
-  }
-}
-
-// textfield helper - color fix
-.mdc-text-field-helper-text {
-  margin-left: 2px !important;
-  color: $mdc-theme-text-secondary-on-background;
-  &--error {
-    color: $mdc-theme-primary !important;
-  }
-}
-
-// dialog
-.mdc-dialog {
-  z-index: 22;
-  .mdc-dialog__container {
-    width: 100%;
-  }
-  .mdc-dialog__surface {
-    border-radius: 0px;
-    max-width: 875px;
-    position: relative;
-    .mdc-dialog__title {
-      background-color: $mdc-theme-secondary;
-      padding-bottom: 20px;
-      font-size: 1.4rem;
-      font-weight: 600;
-      color: $mdc-theme-on-secondary;
-    }
-    .mdc-dialog__content {
-      color: $mdc-theme-text-primary-on-background;
-      max-height: 70vh;
-      overflow: auto;
-      margin-top: 0;
-      padding-top: 24px;
-      padding-bottom: 24px;
-      background-color: $mdc-theme-surface;
-
-      // add options for when tabs are inside the body
-      > .webiny-ui-tabs {
-        margin: -24px;
-        > .mdc-tab-bar {
-          position: absolute;
-          z-index: 10;
-          @include tabBar.width(100%);
-          background-color: $mdc-theme-secondary;
-          .mdc-tab {
-            @include tab.text-label-color($mdc-theme-on-secondary);
-            @include tab.icon-color($mdc-theme-on-secondary);
-            @include tab.fixed-width(auto);
-            justify-content: flex-start;
-            font-weight: 600;
-          }
-          .mdc-tab-indicator {
-            padding-bottom: 5px;
-            margin-top: -1px;
-            @include tabIndicator.underline-color($mdc-theme-on-secondary);
-            background-color: $mdc-theme-secondary;
-          }
-        }
-        > .webiny-ui-tabs__content {
-          padding-top: 50px;
-          padding-bottom: 25px;
-        }
-      }
-      > .mdc-layout-grid {
-        margin: -24px;
-      }
-    }
-    .mdc-dialog__actions {
-      border-top: 1px solid $mdc-theme-on-background;
-      background-color: $mdc-theme-surface;
-      padding: 24px;
-    }
-  }
-  &.mdc-dialog--open .mdc-dialog__scrim {
-    opacity: 0.7;
-    background-color: var(--mdc-theme-on-surface);
-  }
-}
-
-// select
-.mdc-select {
-  width: 100%;
-  @include select.ink-color($mdc-theme-text-primary-on-background);
-  @include select.label-color($mdc-theme-text-secondary-on-background);
-  @include select.bottom-line-color(
-    (
-      default: $mdc-theme-text-secondary-on-background,
-      hover: $mdc-theme-text-primary-on-background
-    )
-  );
-  @include select.container-fill-color($mdc-theme-on-background);
-  @include select.filled-shape-radius(0);
-  @include select.outline-shape-radius(2);
-  @include select.dropdown-icon-color(
-    (
-      default: $mdc-theme-text-primary-on-background,
-      focused: $mdc-theme-primary
-    )
-  );
-
-  /*
-  Fix for select box appearance. For some reason browser prefix css attributes are striped away.
-   */
-  .mdc-select__native-control {
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    border-radius: 2px;
-  }
-
-  &.mdc-select--box {
-    border-radius: 2px;
-    .mdc-select__native-control {
-      padding-top: 10px;
-    }
-  }
-  &:not(.mdc-select--disabled).mdc-select--focused {
-    .mdc-floating-label {
-      color: rgba(0, 0, 0, 0.6);
-    }
-  }
-}
-
-// checkbox
-.mdc-checkbox {
-  @include checkbox.container-colors("text-secondary-on-background");
-}
-
-// radio button
-.mdc-radio {
-  @include radio.unchecked-stroke-color("text-secondary-on-background");
-}
-
-// snackbar
-.mdc-snackbar {
-  @include snackbar.shape-radius(2px);
-  @include snackbar.z-index(1000);
-}
-
-.mdc-snackbar__action:not(:disabled) {
-  color: var(--mdc-theme-primary);
-  &::before {
-    background-color: var(--mdc-theme-primary);
-  }
-  &::after {
-    background-color: var(--mdc-theme-primary);
-  }
-}
-
-.mdc-snackbar__actions {
-  .mdc-icon-button {
-    color: var(--mdc-theme-text-primary-on-dark);
-  }
-}
-
-// when grid is inside another grid cell, child grid should not have any padding
-.mdc-layout-grid {
-  > .mdc-layout-grid__inner {
-    > .mdc-layout-grid__cell {
-      > .mdc-layout-grid {
-        padding: 0;
-      }
-    }
-  }
-}
diff --git a/packages/app-admin/src/styles/material.scss b/packages/app-admin/src/styles/material.scss
deleted file mode 100644
index 7b4d5c8707f..00000000000
--- a/packages/app-admin/src/styles/material.scss
+++ /dev/null
@@ -1,42 +0,0 @@
-@use "@material/theme/mixins" as themeMixins;
-
-// material variables
-$mdc-theme-primary: $webiny-theme-light-primary;
-$mdc-theme-on-primary: $webiny-theme-light-on-primary;
-$mdc-theme-secondary: $webiny-theme-light-secondary;
-$mdc-theme-on-secondary: $webiny-theme-light-on-secondary;
-$mdc-theme-surface: $webiny-theme-light-surface;
-$mdc-theme-on-surface: $webiny-theme-light-on-surface;
-$mdc-theme-background: $webiny-theme-light-background;
-$mdc-theme-on-background: $webiny-theme-light-on-background;
-$mdc-theme-text-primary-on-background: $webiny-theme-light-text-primary-on-background !global;
-$mdc-theme-text-secondary-on-background: $webiny-theme-light-text-secondary-on-background;
-$mdc-theme-text-hint-on-dark: $webiny-theme-light-text-hint-on-dark;
-$mdc-typography-font-family: $webiny-theme-typography-font-family;
-$mdc-typography-subtitle2-font-weight: $webiny-theme-typography-subtitle2-font-weight;
-
-@import "~material-components-web/material-components-web.scss";
-@import "material-theme-assignments.scss";
-
-body {
-  background-color: $mdc-theme-background;
-  min-height: 100vh;
-
-  // assign all the sass variables in css variables
-  --mdc-theme-primary: #{$mdc-theme-primary};
-  --mdc-theme-secondary: #{$mdc-theme-secondary};
-  --mdc-theme-background: #{$mdc-theme-background};
-  --mdc-theme-surface: #{$mdc-theme-surface};
-  --mdc-theme-on-primary: #{$mdc-theme-on-primary};
-  --mdc-theme-on-secondary: #{$mdc-theme-on-secondary};
-  --mdc-theme-on-surface: #{$mdc-theme-on-surface};
-  --mdc-theme-on-background: #{$mdc-theme-on-background};
-  --mdc-theme-text-primary-on-background: #{$mdc-theme-text-primary-on-background};
-  --mdc-theme-text-secondary-on-background: #{$mdc-theme-text-secondary-on-background};
-  --mdc-theme-text-hint-on-dark: #{$mdc-theme-text-hint-on-dark};
-  --mdc-theme-caret-down: #{$webiny-theme-light-caret-down};
-  --mdc-typography-font-family: #{$mdc-typography-font-family};
-  --mdc-typography-subtitle2-font-weight: #{$mdc-typography-subtitle2-font-weight};
-
-  font-family: "Source Sans Pro";
-}
diff --git a/packages/app-admin/src/styles/reset.scss b/packages/app-admin/src/styles/reset.scss
deleted file mode 100644
index 3c5f558d261..00000000000
--- a/packages/app-admin/src/styles/reset.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import "reset-css/sass/reset";
diff --git a/packages/app-admin/src/styles/theme.scss b/packages/app-admin/src/styles/theme.scss
deleted file mode 100644
index 5f95635bfbd..00000000000
--- a/packages/app-admin/src/styles/theme.scss
+++ /dev/null
@@ -1,76 +0,0 @@
-// webiny light theme
-$webiny-theme-light-primary: #fa5723 !default;
-$webiny-theme-light-secondary: #00ccb0 !default;
-$webiny-theme-light-background: #f2f2f2 !default;
-$webiny-theme-light-surface: #fff !default;
-$webiny-theme-light-on-primary: #ffffff !default;
-$webiny-theme-light-on-secondary: #ffffff !default;
-$webiny-theme-light-on-surface: #000000 !default;
-$webiny-theme-light-on-background: rgba(212, 212, 212, 0.5) !default;
-$webiny-theme-light-text-primary-on-background: rgba(0, 0, 0, 0.87);
-$webiny-theme-light-text-secondary-on-background: rgba(0, 0, 0, 0.54);
-$webiny-theme-light-text-hint-on-dark: rgba(255, 255, 255, 0.5);
-$webiny-theme-light-caret-down: url("data:image/svg+xml,%3Csvg%20width%3D%2210px%22%20height%3D%225px%22%20viewBox%3D%227%2010%2010%205%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%20%20%3Cpolygon%20id%3D%22Shape%22%20stroke%3D%22none%22%20fill%3D%22%23000000%22%20fill-rule%3D%22evenodd%22%20opacity%3D%220.54%22%20points%3D%227%2010%2012%2015%2017%2010%22%3E%3C%2Fpolygon%3E%0A%3C%2Fsvg%3E");
-
-// webiny dark theme
-$webiny-theme-dark-primary: #fa5723 !default;
-$webiny-theme-dark-secondary: #00ccb0 !default;
-$webiny-theme-dark-background: #121212 !default;
-$webiny-theme-dark-surface: #242424 !default;
-$webiny-theme-dark-on-primary: #ffffff !default;
-$webiny-theme-dark-on-secondary: #ffffff !default;
-$webiny-theme-dark-on-surface: #ffffff !default;
-$webiny-theme-dark-on-background: rgba(255, 255, 255, 0.15) !default;
-$webiny-theme-dark-text-primary-on-background: rgba(255, 255, 255, 0.87);
-$webiny-theme-dark-text-secondary-on-background: rgba(255, 255, 255, 0.54);
-$webiny-theme-dark-text-hint-on-dark: rgba(255, 255, 255, 0.15);
-$webiny-theme-dark-caret-down: url("data:image/svg+xml,%3Csvg%20width%3D%2210px%22%20height%3D%225px%22%20viewBox%3D%227%2010%2010%205%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%20%20%3Cpolygon%20id%3D%22Shape%22%20stroke%3D%22none%22%20fill%3D%22%23FFFFFF%22%20fill-rule%3D%22evenodd%22%20opacity%3D%220.54%22%20points%3D%227%2010%2012%2015%2017%2010%22%3E%3C%2Fpolygon%3E%0A%3C%2Fsvg%3E");
-
-// webiny typography
-$webiny-theme-typography-font-family: "Source Sans Pro" !default;
-$webiny-theme-typography-subtitle2-font-weight: 600 !default;
-
-// import required fonts
-@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700|Open+Sans:300,400,600,700|Source+Code+Pro:400,700");
-
-body {
-  font-size: 16px;
-}
-
-a {
-  color: var(--webiny-theme-color-primary, #ee896b);
-  text-decoration: none;
-}
-
-// Default heading styles
-h1 {
-  font-size: 3rem;
-  line-height: 1;
-}
-
-h2 {
-  font-size: 2.25rem;
-  line-height: 2.5rem;
-}
-
-h3 {
-  font-size: 1.875rem;
-  line-height: 2.25rem;
-}
-
-h4 {
-  font-size: 1.5rem;
-  line-height: 2rem;
-}
-
-h5 {
-  font-size: 1.25rem;
-  line-height: 1.75rem;
-}
-
-h6 {
-  font-size: 1.125rem;
-  line-height: 1.75rem;
-}
-
-@import "@webiny/ui/styles.scss";
diff --git a/packages/app-admin/src/types.ts b/packages/app-admin/src/types.ts
index 402c15d9538..8805f8d5670 100644
--- a/packages/app-admin/src/types.ts
+++ b/packages/app-admin/src/types.ts
@@ -1,51 +1,14 @@
 import React, { ReactElement } from "react";
 import { Plugin } from "@webiny/plugins/types";
 import { ApolloClient } from "apollo-client";
-import { ItemProps, MenuProps, SectionProps } from "~/plugins/MenuPlugin";
+import { SecurityPermission } from "@webiny/app-security/types";
 
 export { Icon } from "~/components/IconPicker/types";
 
-export type AdminGlobalSearchPlugin = Plugin & {
-    type: "admin-global-search";
-    label: string;
-    route: string;
-    search?: {
-        operator?: "and" | "or";
-        fields?: Array<string>;
-    };
-};
-
-export type AdminGlobalSearchPreventHotkeyPlugin = Plugin & {
-    type: "admin-global-search-prevent-hotkey";
-    preventOpen(e: React.KeyboardEvent): boolean | void;
-};
-
-/**
- * LEGACY TYPE. Only for backwards compatibility.
- */
-export type AdminMenuLogoPlugin = Plugin & {
-    name: "admin-menu-logo";
-    type: "admin-menu-logo";
-    render(): React.ReactElement;
-};
-
-/**
- * Enables adding custom menu sections and items in the main menu, located on the left side of the screen.
- * @see https://docs.webiny.com/docs/webiny-apps/admin/development/plugins-reference/app#admin-menu
- */
-export type AdminMenuPlugin = Plugin & {
-    type: "admin-menu";
-    render(props: {
-        Menu: React.ComponentType<MenuProps>;
-        Section: React.ComponentType<SectionProps>;
-        Item: React.ComponentType<ItemProps>;
-    }): React.ReactNode;
-    order?: number;
-};
-
 export interface AdminFileManagerFileTypePluginRenderParams {
     file: FileItem;
 }
+
 export type AdminFileManagerFileTypePlugin = Plugin & {
     type: "admin-file-manager-file-type";
     types: string[];
@@ -58,6 +21,7 @@ export type AdminFileManagerFileTypePlugin = Plugin & {
 export interface AdminInstallationPluginRenderParams {
     onInstalled: () => Promise<void>;
 }
+
 export type AdminInstallationPlugin = Plugin & {
     type: "admin-installation";
     getInstalledVersion(params: { client: ApolloClient<object> }): Promise<string | null>;
@@ -73,8 +37,6 @@ export type AdminAppPermissionRendererPlugin = Plugin & {
     render(params: any): ReactElement;
 };
 
-import { SecurityPermission } from "@webiny/app-security/types";
-
 /**
  * Represents a file as we receive from the GraphQL API.
  */
diff --git a/packages/app-admin/src/ui/elements/form/FileManagerElement/EmptyStateElementRenderer.tsx b/packages/app-admin/src/ui/elements/form/FileManagerElement/EmptyStateElementRenderer.tsx
index 11987d81cbd..29478418591 100644
--- a/packages/app-admin/src/ui/elements/form/FileManagerElement/EmptyStateElementRenderer.tsx
+++ b/packages/app-admin/src/ui/elements/form/FileManagerElement/EmptyStateElementRenderer.tsx
@@ -5,9 +5,9 @@ import * as Ui from "@webiny/ui/ImageUpload";
 import { Image } from "@webiny/app/components";
 import { FileManagerElementRenderProps } from "~/ui/elements/form/FileManagerElement/FileManagerElementRenderer";
 import { AddImageIconWrapper, AddImageWrapper, FilePreviewWrapper, RemoveImage } from "./styled";
-import { ReactComponent as AddFileIcon } from "@material-design-icons/svg/outlined/attach_file.svg";
+import { ReactComponent as AddFileIcon } from "@webiny/icons/attach_file.svg";
+import { ReactComponent as RemoveImageIcon } from "@webiny/icons/close.svg";
 import { Typography } from "@webiny/ui/Typography";
-import { ReactComponent as RemoveImageIcon } from "@material-design-icons/svg/outlined/close.svg";
 
 export class EmptyStateElementRenderer extends UIRenderer<
     EmptyStateElement,
diff --git a/packages/app-admin/src/ui/elements/form/PasswordElement.tsx b/packages/app-admin/src/ui/elements/form/PasswordElement.tsx
index d569eccab1d..30e736b0bb5 100644
--- a/packages/app-admin/src/ui/elements/form/PasswordElement.tsx
+++ b/packages/app-admin/src/ui/elements/form/PasswordElement.tsx
@@ -21,6 +21,7 @@ export class PasswordElement extends InputElement {
             >
                 <Input
                     type={"password"}
+                    autoComplete={"off"}
                     label={this.getLabel(props)}
                     placeholder={this.getPlaceholder(props)}
                     disabled={this.getIsDisabled(props)}
diff --git a/packages/app-admin/src/ui/views/AdminView/components/Hamburger.tsx b/packages/app-admin/src/ui/views/AdminView/components/Hamburger.tsx
index 1b327186756..86d5c5fe27f 100644
--- a/packages/app-admin/src/ui/views/AdminView/components/Hamburger.tsx
+++ b/packages/app-admin/src/ui/views/AdminView/components/Hamburger.tsx
@@ -2,7 +2,7 @@ import React, { useCallback } from "react";
 import { get, set } from "dot-prop-immutable";
 import { useUi } from "@webiny/app/hooks/useUi";
 import { IconButton } from "@webiny/ui/Button";
-import { ReactComponent as MenuIcon } from "@material-design-icons/svg/outlined/menu.svg";
+import { ReactComponent as MenuIcon } from "@webiny/icons/menu.svg";
 
 const Hamburger = () => {
     const ui = useUi();
diff --git a/packages/app-admin/src/ui/views/AdminView/components/Snackbar.tsx b/packages/app-admin/src/ui/views/AdminView/components/Snackbar.tsx
deleted file mode 100644
index bf6ae3c58f9..00000000000
--- a/packages/app-admin/src/ui/views/AdminView/components/Snackbar.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import React, { useCallback } from "react";
-import { Snackbar } from "@webiny/ui/Snackbar";
-import get from "lodash/get";
-import { useUi } from "@webiny/app/hooks/useUi";
-
-const SnackbarMain = () => {
-    const ui = useUi();
-    const message = get(ui, "snackbar.message");
-    const options = get(ui, "snackbar.options", {});
-
-    const hideSnackbar = useCallback(() => {
-        ui.setState(ui => ({ ...ui, snackbar: null }));
-    }, [ui]);
-
-    return <Snackbar open={!!message} onClose={hideSnackbar} message={message} {...options} />;
-};
-
-export default SnackbarMain;
diff --git a/packages/app-admin/src/ui/views/FormView/FormContainerElement.tsx b/packages/app-admin/src/ui/views/FormView/FormContainerElement.tsx
index 37fef819f90..cf23584b16e 100644
--- a/packages/app-admin/src/ui/views/FormView/FormContainerElement.tsx
+++ b/packages/app-admin/src/ui/views/FormView/FormContainerElement.tsx
@@ -1,13 +1,7 @@
 import React from "react";
 import classNames from "classnames";
-import styled from "@emotion/styled";
-import { Elevation } from "@webiny/ui/Elevation";
 import { UIElement, UIElementConfig, UiElementRenderProps } from "~/ui/UIElement";
-
-const FormContainerWrapper = styled("div")({
-    position: "relative",
-    margin: "17px 50px"
-});
+import { SimpleForm } from "~/components/SimpleForm";
 
 interface FormContainerConfig extends UIElementConfig {
     testId?: string;
@@ -25,12 +19,12 @@ export class FormContainerElement extends UIElement<FormContainerConfig> {
         const children = super.render(props);
 
         return (
-            <FormContainerWrapper
+            <SimpleForm
                 className={classNames("webiny-data-list", this.config.className)}
                 data-testid={this.config.testId}
             >
-                {this.config.noElevation ? children : <Elevation z={1}>{children}</Elevation>}
-            </FormContainerWrapper>
+                {children}
+            </SimpleForm>
         );
     }
 }
diff --git a/packages/app-admin/src/ui/views/FormView/FormContentElement.tsx b/packages/app-admin/src/ui/views/FormView/FormContentElement.tsx
index 219333ae2d2..59048731b2f 100644
--- a/packages/app-admin/src/ui/views/FormView/FormContentElement.tsx
+++ b/packages/app-admin/src/ui/views/FormView/FormContentElement.tsx
@@ -1,3 +1,9 @@
-import { UIElement } from "~/ui/UIElement";
+import React from "react";
+import { UIElement, UiElementRenderProps } from "~/ui/UIElement";
+import { SimpleFormContent } from "~/components/SimpleForm";
 
-export class FormContentElement extends UIElement {}
+export class FormContentElement extends UIElement {
+    public override render(props: UiElementRenderProps) {
+        return <SimpleFormContent>{super.render(props)}</SimpleFormContent>;
+    }
+}
diff --git a/packages/app-admin/src/ui/views/FormView/FormFooterElement.tsx b/packages/app-admin/src/ui/views/FormView/FormFooterElement.tsx
index 6199a16a24e..321dd735f32 100644
--- a/packages/app-admin/src/ui/views/FormView/FormFooterElement.tsx
+++ b/packages/app-admin/src/ui/views/FormView/FormFooterElement.tsx
@@ -1,18 +1,6 @@
 import React from "react";
-import styled from "@emotion/styled";
 import { UIElement, UiElementRenderProps } from "~/ui/UIElement";
-
-const ButtonWrapper = styled("div")({
-    display: "flex",
-    justifyContent: "space-between",
-    borderTop: "1px solid var(--mdc-theme-on-background)",
-    color: "var(--mdc-theme-text-primary-on-background)",
-    textAlign: "right",
-    padding: 25,
-    ">:last-child": {
-        marginLeft: "auto"
-    }
-});
+import { SimpleFormFooter } from "~/components/SimpleForm";
 
 export class FormFooterElement extends UIElement {
     public constructor(id: string) {
@@ -22,6 +10,6 @@ export class FormFooterElement extends UIElement {
     }
 
     public override render(props: UiElementRenderProps) {
-        return <ButtonWrapper>{super.render(props)}</ButtonWrapper>;
+        return <SimpleFormFooter>{super.render(props)}</SimpleFormFooter>;
     }
 }
diff --git a/packages/app-admin/src/ui/views/FormView/FormHeaderElement.tsx b/packages/app-admin/src/ui/views/FormView/FormHeaderElement.tsx
index b0b1ee031b1..c8b5d6db490 100644
--- a/packages/app-admin/src/ui/views/FormView/FormHeaderElement.tsx
+++ b/packages/app-admin/src/ui/views/FormView/FormHeaderElement.tsx
@@ -1,31 +1,8 @@
 import React from "react";
-import { css } from "emotion";
-import { Cell, Grid } from "@webiny/ui/Grid";
-import { Typography } from "@webiny/ui/Typography";
 import { UIElement, UIElementConfig } from "~/ui/UIElement";
-import { Icon } from "@webiny/ui/Icon";
 import { FormElementRenderProps } from "~/ui/elements/form/FormElement";
-
-const iconClass = css({
-    marginRight: 15,
-    color: "var(--mdc-theme-text-primary-on-background)"
-});
-
-const headerClass = css({
-    borderBottom: "1px solid var(--mdc-theme-on-background)",
-    color: "var(--mdc-theme-text-primary-on-background)"
-});
-
-const titleClass = css({
-    display: "flex",
-    alignItems: "center"
-});
-
-const actionsClass = css({
-    display: "flex",
-    justifyContent: "flex-end",
-    alignItems: "center"
-});
+import { SimpleFormHeader } from "~/components/SimpleForm";
+import { Icon } from "@webiny/admin-ui";
 
 interface FormHeaderConfig extends UIElementConfig {
     getTitle(props: FormElementRenderProps): string;
@@ -51,17 +28,16 @@ export class FormHeaderElement extends UIElement<FormHeaderConfig> {
         const { icon, getTitle } = this.config;
 
         return (
-            <Grid className={headerClass}>
-                <Cell span={6} className={titleClass}>
-                    <React.Fragment>
-                        {icon && <Icon className={iconClass} icon={icon} />}
-                        <Typography use="headline5">{getTitle(props)}</Typography>
-                    </React.Fragment>
-                </Cell>
-                <Cell span={6} className={actionsClass}>
-                    {super.render(props)}
-                </Cell>
-            </Grid>
+            <SimpleFormHeader
+                title={
+                    <>
+                        {icon && <Icon label={"Icon"} icon={icon} />}
+                        {getTitle(props)}
+                    </>
+                }
+            >
+                {super.render(props)}
+            </SimpleFormHeader>
         );
     }
 }
diff --git a/packages/app-admin/src/ui/views/OverlayView/HeaderElement.tsx b/packages/app-admin/src/ui/views/OverlayView/HeaderElement.tsx
index c7ced10d39b..0977d6008a3 100644
--- a/packages/app-admin/src/ui/views/OverlayView/HeaderElement.tsx
+++ b/packages/app-admin/src/ui/views/OverlayView/HeaderElement.tsx
@@ -3,7 +3,7 @@ import { css } from "emotion";
 import { UIElement, UIElementConfig, UiElementRenderProps } from "~/ui/UIElement";
 import { TopAppBarSecondary, TopAppBarSection } from "@webiny/ui/TopAppBar";
 import { IconButton } from "@webiny/ui/Button";
-import { ReactComponent as CloseIcon } from "@material-design-icons/svg/outlined/close.svg";
+import { ReactComponent as CloseIcon } from "@webiny/icons/close.svg";
 import { PlaceholderElement } from "~/ui/elements/PlaceholderElement";
 import { HeaderTitleElement } from "./HeaderTitleElement";
 
@@ -79,11 +79,7 @@ export class HeaderElement extends UIElement<HeaderElementConfig> {
                 </TopAppBarSection>
                 <TopAppBarSection className={width} alignEnd>
                     {this.getRightSectionElement().render(props)}
-                    <IconButton
-                        ripple={false}
-                        onClick={this.config.onClose}
-                        icon={<CloseIcon style={{ width: 24, height: 24 }} />}
-                    />
+                    <IconButton ripple={false} onClick={this.config.onClose} icon={<CloseIcon />} />
                 </TopAppBarSection>
             </TopAppBarSecondary>
         );
diff --git a/packages/app-admin/tsconfig.build.json b/packages/app-admin/tsconfig.build.json
index 1779131099c..0b9bb238cff 100644
--- a/packages/app-admin/tsconfig.build.json
+++ b/packages/app-admin/tsconfig.build.json
@@ -2,6 +2,7 @@
   "extends": "../../tsconfig.build.json",
   "include": ["src"],
   "references": [
+    { "path": "../admin-ui/tsconfig.build.json" },
     { "path": "../app/tsconfig.build.json" },
     { "path": "../app-security/tsconfig.build.json" },
     { "path": "../app-theme/tsconfig.build.json" },
diff --git a/packages/app-admin/tsconfig.json b/packages/app-admin/tsconfig.json
index 9c739b46060..0be8d31fa94 100644
--- a/packages/app-admin/tsconfig.json
+++ b/packages/app-admin/tsconfig.json
@@ -2,6 +2,7 @@
   "extends": "../../tsconfig.json",
   "include": ["src", "__tests__"],
   "references": [
+    { "path": "../admin-ui" },
     { "path": "../app" },
     { "path": "../app-security" },
     { "path": "../app-theme" },
@@ -25,6 +26,8 @@
     "paths": {
       "~/*": ["./src/*"],
       "~tests/*": ["./__tests__/*"],
+      "@webiny/admin-ui/*": ["../admin-ui/src/*"],
+      "@webiny/admin-ui": ["../admin-ui/src"],
       "@webiny/app/*": ["../app/src/*"],
       "@webiny/app": ["../app/src"],
       "@webiny/app-security/*": ["../app-security/src/*"],
diff --git a/packages/app-apw/package.json b/packages/app-apw/package.json
index f8a91c059cb..36043e541ee 100644
--- a/packages/app-apw/package.json
+++ b/packages/app-apw/package.json
@@ -14,6 +14,7 @@
     "@emotion/react": "11.10.8",
     "@emotion/styled": "11.10.6",
     "@types/react": "18.2.79",
+    "@webiny/admin-ui": "0.0.0",
     "@webiny/app": "0.0.0",
     "@webiny/app-admin": "0.0.0",
     "@webiny/app-headless-cms": "0.0.0",
@@ -21,6 +22,7 @@
     "@webiny/app-page-builder": "0.0.0",
     "@webiny/app-security": "0.0.0",
     "@webiny/form": "0.0.0",
+    "@webiny/icons": "0.0.0",
     "@webiny/plugins": "0.0.0",
     "@webiny/react-router": "0.0.0",
     "@webiny/ui": "0.0.0",
diff --git a/packages/app-apw/src/components/ContentReviewEditor/ContentReviewStep/index.tsx b/packages/app-apw/src/components/ContentReviewEditor/ContentReviewStep/index.tsx
index e1b378bec8a..849b6e70927 100644
--- a/packages/app-apw/src/components/ContentReviewEditor/ContentReviewStep/index.tsx
+++ b/packages/app-apw/src/components/ContentReviewEditor/ContentReviewStep/index.tsx
@@ -2,16 +2,16 @@ import React, { useMemo } from "react";
 import noop from "lodash/noop";
 import { i18n } from "@webiny/app/i18n";
 import { ApwContentReviewStep, ApwContentReviewStepStatus } from "~/types";
-import { Box, Columns, Stack } from "~/components/Layout";
-import {
-    BadgeBox,
-    PanelListItem,
-    TypographyBody,
-    TypographySecondary,
-    TypographyTitle
-} from "../Styled";
+import { Box, Columns } from "~/components/Layout";
+import { BadgeBox, PanelListItem, TypographyBody, TypographySecondary } from "../Styled";
 import { useNavigate } from "@webiny/react-router";
 import { useActiveStepId } from "~/hooks/useContentReviewId";
+import {
+    ListItemGraphic,
+    ListItemText,
+    ListItemTextPrimary,
+    ListItemTextSecondary
+} from "@webiny/ui/List";
 
 const t = i18n.ns("app-apw/admin/content-reviews/editor");
 
@@ -76,57 +76,61 @@ export const ContentReviewStep = (props: ContentReviewStepProps) => {
     return (
         <PanelListItem selected={step.id === activeStepId} disabled={disabled} onClick={onClick}>
             <Columns space={3}>
-                <Box paddingTop={1}>
+                <ListItemGraphic>
                     <StepStatusIcon status={step.status} />
-                </Box>
-                <Stack space={0}>
-                    <Box>
-                        <TypographyTitle use={"subtitle1"}>{step.title}</TypographyTitle>
-                    </Box>
-                    {createdOn ? (
-                        <Box display={"flex"}>
-                            <TypographyBody use={"caption"}>By:&nbsp;&nbsp;</TypographyBody>
-                            <TypographySecondary
-                                use={"caption"}
-                                style={{ textTransform: "capitalize" }}
-                            >
-                                {t`{author}`({
-                                    author: createdBy?.displayName
-                                })}
-                            </TypographySecondary>
-                            <TypographySecondary use={"caption"}>
-                                &nbsp;
-                                {t`on {createdOn}`({
-                                    createdOn
-                                })}
-                            </TypographySecondary>
-                        </Box>
-                    ) : null}
-                    {step.status === ApwContentReviewStepStatus.ACTIVE ? (
-                        <>
-                            <Columns space={2.5} alignItems={"center"}>
-                                <Box>
-                                    <TypographyBody
-                                        use={"caption"}
-                                    >{t`Pending change request: `}</TypographyBody>
-                                </Box>
-                                <BadgeBox paddingX={1.5}>
-                                    <span>{step.pendingChangeRequests}</span>
-                                </BadgeBox>
-                            </Columns>
-                            <Columns space={2.5} alignItems={"center"}>
-                                <Box>
-                                    <TypographyBody use={"caption"}>{t`Sign off: `}</TypographyBody>
-                                </Box>
-                                <BadgeBox paddingX={1.5}>
-                                    <span>
-                                        {step.signOffProvidedOn === null ? "pending" : "provided"}
-                                    </span>
-                                </BadgeBox>
-                            </Columns>
-                        </>
-                    ) : null}
-                </Stack>
+                </ListItemGraphic>
+                <ListItemText>
+                    <ListItemTextPrimary>{step.title}</ListItemTextPrimary>
+                    <ListItemTextSecondary>
+                        {createdOn ? (
+                            <Box display={"flex"}>
+                                <TypographyBody use={"caption"}>By:&nbsp;&nbsp;</TypographyBody>
+                                <TypographySecondary
+                                    use={"caption"}
+                                    style={{ textTransform: "capitalize" }}
+                                >
+                                    {t`{author}`({
+                                        author: createdBy?.displayName
+                                    })}
+                                </TypographySecondary>
+                                <TypographySecondary use={"caption"}>
+                                    &nbsp;
+                                    {t`on {createdOn}`({
+                                        createdOn
+                                    })}
+                                </TypographySecondary>
+                            </Box>
+                        ) : null}
+                        {step.status === ApwContentReviewStepStatus.ACTIVE ? (
+                            <>
+                                <Columns space={2.5} alignItems={"center"}>
+                                    <Box>
+                                        <TypographyBody
+                                            use={"caption"}
+                                        >{t`Pending change request: `}</TypographyBody>
+                                    </Box>
+                                    <BadgeBox paddingX={1.5}>
+                                        <span>{step.pendingChangeRequests}</span>
+                                    </BadgeBox>
+                                </Columns>
+                                <Columns space={2.5} alignItems={"center"}>
+                                    <Box>
+                                        <TypographyBody
+                                            use={"caption"}
+                                        >{t`Sign off: `}</TypographyBody>
+                                    </Box>
+                                    <BadgeBox paddingX={1.5}>
+                                        <span>
+                                            {step.signOffProvidedOn === null
+                                                ? "pending"
+                                                : "provided"}
+                                        </span>
+                                    </BadgeBox>
+                                </Columns>
+                            </>
+                        ) : null}
+                    </ListItemTextSecondary>
+                </ListItemText>
             </Columns>
         </PanelListItem>
     );
diff --git a/packages/app-apw/src/index.tsx b/packages/app-apw/src/index.tsx
index 615db0a0f84..7075d52c4d2 100644
--- a/packages/app-apw/src/index.tsx
+++ b/packages/app-apw/src/index.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Compose, MenuItemRenderer, Plugins, useWcp } from "@webiny/app-admin";
+import { Compose, Plugins, useWcp } from "@webiny/app-admin";
 /**
  * Plugins for "page builder"
  */
@@ -22,7 +22,6 @@ import { DecoratePublishEntryAction, EntryRevisionListItem } from "~/plugins/cms
 import { Module } from "~/plugins/Module";
 import { WorkflowScope } from "~/views/publishingWorkflows/components/WorkflowScope";
 import { DefaultBar } from "~/plugins/editor/defaultBar";
-import { MenuGroupRenderer } from "~/plugins/cms/MenuGroupRenderer";
 import { ApwPermissions } from "~/plugins/permissionRenderer";
 import { ContentEntryEditorConfig } from "@webiny/app-headless-cms";
 
@@ -39,16 +38,17 @@ export const AdvancedPublishingWorkflow = () => {
                 with={[ApwPageBuilderWorkflowScope, ApwHeadlessCmsWorkflowScope]}
                 component={WorkflowScope}
             />
-            <Compose with={MenuGroupRenderer} component={MenuItemRenderer} />
             <ContentEntryEditorConfig>
                 <DecoratePublishEntryAction />
                 <Compose with={EntryRevisionListItem} component={PublishEntryRevisionListItem} />
                 <ApwOnEntryDelete />
                 <ApwOnEntryPublish />
             </ContentEntryEditorConfig>
+
+            <Module />
+
             <Plugins>
                 <DefaultBar />
-                <Module />
                 <DecoratePagePublishActions />
                 <ApwOnPublish />
                 <ApwOnPageDelete />
diff --git a/packages/app-apw/src/plugins/Module.tsx b/packages/app-apw/src/plugins/Module.tsx
index 02a16b1879d..27dfd76960e 100644
--- a/packages/app-apw/src/plugins/Module.tsx
+++ b/packages/app-apw/src/plugins/Module.tsx
@@ -1,13 +1,14 @@
 import React, { lazy, Suspense } from "react";
-import { AddMenu as Menu, AddRoute } from "@webiny/app-admin";
-import { ReactComponent as ApwIcon } from "~/assets/icons/account_tree_24dp.svg";
 import { SecureRoute } from "@webiny/app-security";
-import { AdminLayout } from "@webiny/app-admin/components/AdminLayout";
 import Helmet from "react-helmet";
 import { PublishingWorkflowsView } from "~/views/publishingWorkflows";
 import { ContentReviewDashboard } from "~/views/contentReviewDashboard";
 import { CircularProgress } from "@webiny/ui/Progress";
 import { usePermission } from "~/hooks/usePermission";
+import { AdminConfig, Layout, Plugins } from "@webiny/app-admin";
+import { ReactComponent as ApwIcon } from "@webiny/icons/account_tree.svg";
+
+const { Menu, Route } = AdminConfig;
 
 const ContentReviewEditor = lazy(
     () =>
@@ -20,68 +21,89 @@ const ContentReviewEditor = lazy(
 interface LoaderProps {
     children: React.ReactElement;
 }
+
 const Loader = ({ children, ...props }: LoaderProps) => (
     <Suspense fallback={<CircularProgress />}>{React.cloneElement(children, props)}</Suspense>
 );
 
-export const Module = () => {
+export const ApwMenusRoutes = () => {
     const { canManageWorkflows } = usePermission();
 
     const manageWorkflows = canManageWorkflows();
 
     return (
-        <>
-            <Menu label={"Publishing Workflows"} name={"apw"} icon={<ApwIcon />}>
-                <Menu
-                    name={"apw.contentReviews"}
-                    label={"Content Reviews"}
-                    path={"/apw/content-reviews"}
-                />
-                {manageWorkflows && (
-                    <Menu
-                        name={"apw.publishingWorkflows"}
-                        label={"Workflows"}
-                        path={"/apw/publishing-workflows"}
-                    />
-                )}
-            </Menu>
+        <AdminConfig>
             {manageWorkflows && (
-                <AddRoute
+                <Route
+                    name={"apw.publishingWorkflows"}
                     exact
                     path={"/apw/publishing-workflows"}
-                    render={() => (
+                    element={
                         <SecureRoute permission={"apw.publishingWorkflows"}>
-                            <AdminLayout>
+                            <Layout>
                                 <Helmet title={"APW - Publishing workflows"} />
                                 <PublishingWorkflowsView />
-                            </AdminLayout>
+                            </Layout>
                         </SecureRoute>
-                    )}
+                    }
                 />
             )}
-            <AddRoute
+            <Route
                 exact
+                name={"apw.contentReviews"}
                 path={"/apw/content-reviews"}
-                render={() => (
-                    <>
-                        <AdminLayout>
-                            <Helmet title={"APW - Content Reviews"} />
-                            <ContentReviewDashboard />
-                        </AdminLayout>
-                    </>
-                )}
+                element={
+                    <Layout>
+                        <Helmet title={"APW - Content Reviews"} />
+                        <ContentReviewDashboard />
+                    </Layout>
+                }
             />
-            <AddRoute
+            <Route
+                name={"apw.contentReviewEditor"}
                 path={"/apw/content-reviews/:contentReviewId"}
-                render={() => (
+                element={
                     <>
                         <Helmet title={"APW - Content review editor"} />
                         <Loader>
                             <ContentReviewEditor />
                         </Loader>
                     </>
-                )}
+                }
+            />
+
+            <Menu
+                name={"apw"}
+                element={
+                    <Menu.Item
+                        icon={
+                            <Menu.Link.Icon element={<ApwIcon />} label={"Publishing Workflows"} />
+                        }
+                        text={"Publishing Workflows"}
+                    />
+                }
             />
-        </>
+
+            <Menu
+                name={"apw.contentReviews"}
+                parent={"apw"}
+                element={<Menu.Link text={"Content Reviews"} to={"/apw/content-reviews"} />}
+            />
+            {manageWorkflows && (
+                <Menu
+                    name={"apw.publishingWorkflows"}
+                    parent={"apw"}
+                    element={<Menu.Link text={"Workflows"} to={"/apw/publishing-workflows"} />}
+                />
+            )}
+        </AdminConfig>
+    );
+};
+
+export const Module = () => {
+    return (
+        <Plugins>
+            <ApwMenusRoutes />
+        </Plugins>
     );
 };
diff --git a/packages/app-apw/src/plugins/cms/MenuGroupRenderer.tsx b/packages/app-apw/src/plugins/cms/MenuGroupRenderer.tsx
deleted file mode 100644
index 3b228f9591f..00000000000
--- a/packages/app-apw/src/plugins/cms/MenuGroupRenderer.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { useMenuItem } from "@webiny/app-admin";
-import React from "react";
-
-export const MenuGroupRenderer = (PrevMenuItem: React.ComponentType) => {
-    return function MenuGroup() {
-        const { menuItem } = useMenuItem();
-
-        const label = menuItem ? menuItem.label || "" : "";
-        /**
-         * We render the group only if it is not an APW group
-         */
-        if (label.match(/^apw$/i) === null) {
-            return <PrevMenuItem />;
-        }
-        return null;
-    };
-};
diff --git a/packages/app-apw/src/plugins/cms/PublishEntryHocs.tsx b/packages/app-apw/src/plugins/cms/PublishEntryHocs.tsx
index d9f2e4c4453..3a5f2fded62 100644
--- a/packages/app-apw/src/plugins/cms/PublishEntryHocs.tsx
+++ b/packages/app-apw/src/plugins/cms/PublishEntryHocs.tsx
@@ -1,21 +1,15 @@
 import React from "react";
+import { Button } from "@webiny/admin-ui";
 import { useNavigate } from "@webiny/react-router";
 import { HigherOrderComponent } from "@webiny/app-admin";
-import { ButtonIcon, ButtonPrimary } from "@webiny/ui/Button";
-import { ListItemGraphic } from "@webiny/ui/List";
 import { i18n } from "@webiny/app/i18n";
-import { ReactComponent as AddTaskIcon } from "~/assets/icons/add_task.svg";
+import { ReactComponent as AddTaskIcon } from "@webiny/icons/add_task.svg";
 import { useContentReviewId } from "./useContentReviewId";
 import { routePaths } from "~/utils";
-import { css } from "emotion";
 import { ContentEntryEditorConfig } from "@webiny/app-headless-cms/";
 
 const t = i18n.ns("app-apw/cms/publish-entry");
 
-const entryReviewClassName = css({
-    marginLeft: 16
-});
-
 const { Actions, ContentEntry } = ContentEntryEditorConfig;
 
 export const DecoratePublishEntryAction = Actions.ButtonAction.createDecorator(OriginalAction => {
@@ -29,15 +23,14 @@ export const DecoratePublishEntryAction = Actions.ButtonAction.createDecorator(O
         }
 
         return (
-            <ButtonPrimary
-                className={entryReviewClassName}
+            <Button
+                variant={"primary"}
+                icon={<AddTaskIcon />}
+                text={t`Entry Review`}
                 onClick={() =>
                     navigate(`${routePaths.CONTENT_REVIEWS}/${encodeURIComponent(contentReviewId)}`)
                 }
-            >
-                <ButtonIcon icon={<AddTaskIcon />} />
-                {t`Entry Review`}
-            </ButtonPrimary>
+            />
         );
     };
 
@@ -56,22 +49,15 @@ export const DecoratePublishEntryAction = Actions.ButtonAction.createDecorator(O
 });
 
 export const EntryRevisionListItem: HigherOrderComponent = OriginalRenderer => {
-    return function EntryRevisionListItemGraphic() {
+    return function EntryRevisionListItemGraphic(props) {
         const { entry, contentModel: model } = ContentEntry.useContentEntry();
 
         const contentReviewId = useContentReviewId(entry.id, model);
 
         if (contentReviewId && entry.meta.status === "draft") {
-            return (
-                <>
-                    <ListItemGraphic>
-                        <AddTaskIcon />
-                    </ListItemGraphic>
-                    {t`Entry Review`}
-                </>
-            );
+            return <OriginalRenderer {...props} icon={<AddTaskIcon />} text={t`Entry Review`} />;
         }
 
-        return <OriginalRenderer />;
+        return <OriginalRenderer {...props} />;
     };
 };
diff --git a/packages/app-apw/src/plugins/permissionRenderer/ApwPermissions.tsx b/packages/app-apw/src/plugins/permissionRenderer/ApwPermissions.tsx
index 3dd2df77431..554cdd506dd 100644
--- a/packages/app-apw/src/plugins/permissionRenderer/ApwPermissions.tsx
+++ b/packages/app-apw/src/plugins/permissionRenderer/ApwPermissions.tsx
@@ -1,10 +1,9 @@
-import React, { Fragment, useCallback, useMemo } from "react";
-import { Grid, Cell } from "@webiny/ui/Grid";
-import { Select } from "@webiny/ui/Select";
+import React, { useCallback, useMemo } from "react";
 import { i18n } from "@webiny/app/i18n";
-import { PermissionInfo, gridNoPaddingClass } from "@webiny/app-admin/components/Permissions";
+import { PermissionInfo, gridWithPaddingClass } from "@webiny/app-admin/components/Permissions";
 import { Form } from "@webiny/form";
 import { ApwSecurityPermission } from "~/types";
+import { Grid, Select } from "@webiny/admin-ui";
 
 const t = i18n.ns("app-apw/plugins/permissionRenderer");
 
@@ -79,22 +78,29 @@ export const ApwPermissions = ({ value, onChange }: ApwPermissionsProps) => {
         >
             {({ Bind }) => {
                 return (
-                    <Fragment>
-                        <Grid className={gridNoPaddingClass}>
-                            <Cell span={6}>
+                    <>
+                        <Grid className={gridWithPaddingClass}>
+                            <Grid.Column span={6}>
                                 <PermissionInfo title={t`Manage Workflows`} />
-                            </Cell>
-                            <Cell span={6}>
+                            </Grid.Column>
+                            <Grid.Column span={6}>
                                 <Bind name={"publishingWorkflows"}>
-                                    <Select label={t`Manage Workflows`}>
-                                        <option value={NO_STATEMENT}>{t`No`}</option>
-                                        <option value={YES_STATEMENT}>{t`Yes`}</option>
-                                        {/*<option value={CUSTOM_ACCESS}>{t`Custom access`}</option>*/}
-                                    </Select>
+                                    <Select
+                                        options={[
+                                            {
+                                                label: t`No`,
+                                                value: NO_STATEMENT
+                                            },
+                                            {
+                                                label: t`Yes`,
+                                                value: YES_STATEMENT
+                                            }
+                                        ]}
+                                    />
                                 </Bind>
-                            </Cell>
+                            </Grid.Column>
                         </Grid>
-                    </Fragment>
+                    </>
                 );
             }}
         </Form>
diff --git a/packages/app-apw/src/plugins/permissionRenderer/index.tsx b/packages/app-apw/src/plugins/permissionRenderer/index.tsx
index 6b06c532599..ec02cd24338 100644
--- a/packages/app-apw/src/plugins/permissionRenderer/index.tsx
+++ b/packages/app-apw/src/plugins/permissionRenderer/index.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect } from "react";
-import { AccordionItem } from "@webiny/ui/Accordion";
+import { Accordion } from "@webiny/admin-ui";
 import { AdminAppPermissionRendererPlugin } from "@webiny/app-admin/types";
-import { ReactComponent as ApwIcon } from "~/assets/icons/account_tree_24dp.svg";
+import { ReactComponent as PermissionsIcon } from "@webiny/icons/account_tree.svg";
 import { ApwPermissions as ApwPermissionsComponent } from "./ApwPermissions";
 import { plugins } from "@webiny/plugins";
 
@@ -11,14 +11,19 @@ const createPermissions = (): AdminAppPermissionRendererPlugin => {
         name: "admin-app-permissions-renderer-apw",
         render(props) {
             return (
-                <AccordionItem
-                    icon={<ApwIcon />}
+                <Accordion.Item
+                    icon={
+                        <Accordion.Item.Icon
+                            icon={<PermissionsIcon />}
+                            label={"Advanced Publishing Workflow Permissions"}
+                        />
+                    }
                     title={"Advanced Publishing Workflow"}
                     description={"Manage Advanced Publishing Workflow app access permissions."}
                     data-testid={"permission.apw"}
                 >
                     <ApwPermissionsComponent {...props} />
-                </AccordionItem>
+                </Accordion.Item>
             );
         }
     };
diff --git a/packages/app-apw/src/views/contentReviewDashboard/ContentReviewDataList.tsx b/packages/app-apw/src/views/contentReviewDashboard/ContentReviewDataList.tsx
index 6f3ae5ace2e..d7992798daf 100644
--- a/packages/app-apw/src/views/contentReviewDashboard/ContentReviewDataList.tsx
+++ b/packages/app-apw/src/views/contentReviewDashboard/ContentReviewDataList.tsx
@@ -4,7 +4,6 @@ import SearchUI from "@webiny/app-admin/components/SearchUI";
 import styled from "@emotion/styled";
 import { DataList, DataListModalOverlayAction, List, ListItem } from "@webiny/ui/List";
 import { i18n } from "@webiny/app/i18n";
-import { ReactComponent as FilterIcon } from "@webiny/app-admin/assets/icons/filter-24px.svg";
 import { ApwContentReviewListItem } from "~/types";
 import { ContentReviewListItem } from "./components/ContentReviewItem";
 import { useContentReviewsList } from "~/hooks/useContentReviewsList";
@@ -15,12 +14,6 @@ import { useFetchInterval } from "~/hooks/useFetchInterval";
 
 const t = i18n.ns("app-apw/admin/content-reviews/datalist");
 
-const DataListItem = styled(ListItem)`
-    &.mdc-deprecated-list-item {
-        padding: 0;
-    }
-`;
-
 const SORTERS = [
     {
         label: t`Latest activity`,
@@ -110,10 +103,7 @@ export const ContentReviewDataList = () => {
                 />
             }
             modalOverlayAction={
-                <DataListModalOverlayAction
-                    icon={<FilterIcon />}
-                    data-testid={"content-review-data-list.filter"}
-                />
+                <DataListModalOverlayAction data-testid={"content-review-data-list.filter"} />
             }
         >
             {({ data }) => {
@@ -125,12 +115,9 @@ export const ContentReviewDataList = () => {
                         >
                             <List>
                                 {data.map((item: ApwContentReviewListItem) => (
-                                    <DataListItem
-                                        key={item.id}
-                                        onClick={() => editContentReview(item)}
-                                    >
+                                    <ListItem key={item.id} onClick={() => editContentReview(item)}>
                                         <ContentReviewListItem {...item} />
-                                    </DataListItem>
+                                    </ListItem>
                                 ))}
                             </List>
                         </Scrollbar>
diff --git a/packages/app-apw/src/views/contentReviewDashboard/index.tsx b/packages/app-apw/src/views/contentReviewDashboard/index.tsx
index efc9cd2d557..57e8dee472e 100644
--- a/packages/app-apw/src/views/contentReviewDashboard/index.tsx
+++ b/packages/app-apw/src/views/contentReviewDashboard/index.tsx
@@ -1,9 +1,27 @@
 import React from "react";
 import { Cell, Grid } from "@webiny/ui/Grid";
-import { leftPanel } from "@webiny/app-admin/components/SplitView/SplitView";
+import { css } from "emotion";
 import { restGridStyles } from "../publishingWorkflows/components/Styled";
 import { ContentReviewDataList } from "./ContentReviewDataList";
 
+export const leftPanel = css({
+    backgroundColor: "var(--mdc-theme-surface)",
+    ">.webiny-data-list": {
+        display: "flex",
+        flexDirection: "column",
+        height: "calc(100vh - 70px)",
+        ".mdc-deprecated-list": {
+            overflow: "auto"
+        }
+    },
+    ">.mdc-deprecated-list": {
+        display: "flex",
+        flexDirection: "column",
+        maxHeight: "calc(100vh - 45px)",
+        overflow: "auto"
+    }
+});
+
 interface LayoutCenterProps {
     children: React.ReactNode;
 }
diff --git a/packages/app-apw/src/views/publishingWorkflows/PublishingWorkflowsDataList.tsx b/packages/app-apw/src/views/publishingWorkflows/PublishingWorkflowsDataList.tsx
index a74b4b7c36e..14a0da8a9af 100644
--- a/packages/app-apw/src/views/publishingWorkflows/PublishingWorkflowsDataList.tsx
+++ b/packages/app-apw/src/views/publishingWorkflows/PublishingWorkflowsDataList.tsx
@@ -4,12 +4,13 @@ import { css } from "emotion";
 import { i18n } from "@webiny/app/i18n";
 import {
     DataListWithSections,
-    ScrollListWithSections,
     ListItem,
     ListItemText,
     ListItemMeta,
     ListActions,
-    ListItemTextSecondary
+    ListItemTextSecondary,
+    ListItemTextPrimary,
+    List
 } from "@webiny/ui/List";
 import { Typography } from "@webiny/ui/Typography";
 import { DeleteIcon, EditIcon } from "@webiny/ui/List/DataList/icons";
@@ -130,10 +131,7 @@ const PublishingWorkflowsDataList = () => {
                                 onClick={createPublishingWorkflow}
                                 app={app}
                             />
-                            <ScrollListWithSections
-                                data-testid={`default-data-list-${app}`}
-                                className={listStyles}
-                            >
+                            <List data-testid={`default-data-list-${app}`} className={listStyles}>
                                 {items.map(item => (
                                     <ListItem
                                         key={item.id}
@@ -142,7 +140,7 @@ const PublishingWorkflowsDataList = () => {
                                         <ListItemText
                                             onClick={() => editPublishingWorkflow(item.id)}
                                         >
-                                            {item.title}
+                                            <ListItemTextPrimary>{item.title}</ListItemTextPrimary>
                                             <ListItemTextSecondary>
                                                 {t`Scope: `}
                                                 {item.scope && item.scope.type}
@@ -168,7 +166,7 @@ const PublishingWorkflowsDataList = () => {
                                         </ListItemMeta>
                                     </ListItem>
                                 ))}
-                            </ScrollListWithSections>
+                            </List>
                         </div>
                     );
                 });
diff --git a/packages/app-apw/tsconfig.build.json b/packages/app-apw/tsconfig.build.json
index 9bc4ae90874..b0bf08381da 100644
--- a/packages/app-apw/tsconfig.build.json
+++ b/packages/app-apw/tsconfig.build.json
@@ -2,6 +2,7 @@
   "extends": "../../tsconfig.build.json",
   "include": ["src"],
   "references": [
+    { "path": "../admin-ui/tsconfig.build.json" },
     { "path": "../app/tsconfig.build.json" },
     { "path": "../app-admin/tsconfig.build.json" },
     { "path": "../app-headless-cms/tsconfig.build.json" },
diff --git a/packages/app-apw/tsconfig.json b/packages/app-apw/tsconfig.json
index 106f771e38b..7e1a590161a 100644
--- a/packages/app-apw/tsconfig.json
+++ b/packages/app-apw/tsconfig.json
@@ -2,6 +2,7 @@
   "extends": "../../tsconfig.json",
   "include": ["src", "__tests__"],
   "references": [
+    { "path": "../admin-ui" },
     { "path": "../app" },
     { "path": "../app-admin" },
     { "path": "../app-headless-cms" },
@@ -22,6 +23,8 @@
     "paths": {
       "~/*": ["./src/*"],
       "~tests/*": ["./__tests__/*"],
+      "@webiny/admin-ui/*": ["../admin-ui/src/*"],
+      "@webiny/admin-ui": ["../admin-ui/src"],
       "@webiny/app/*": ["../app/src/*"],
       "@webiny/app": ["../app/src"],
       "@webiny/app-admin/*": ["../app-admin/src/*"],
diff --git a/packages/app-audit-logs/package.json b/packages/app-audit-logs/package.json
index 75b634b5e34..bf216b3e83f 100644
--- a/packages/app-audit-logs/package.json
+++ b/packages/app-audit-logs/package.json
@@ -12,12 +12,14 @@
     "@apollo/react-hooks": "^3.1.5",
     "@emotion/react": "11.10.8",
     "@emotion/styled": "11.10.6",
+    "@webiny/admin-ui": "0.0.0",
     "@webiny/api-audit-logs": "0.0.0",
     "@webiny/app": "0.0.0",
     "@webiny/app-aco": "0.0.0",
     "@webiny/app-admin": "0.0.0",
     "@webiny/app-security": "0.0.0",
     "@webiny/form": "0.0.0",
+    "@webiny/icons": "0.0.0",
     "@webiny/plugins": "0.0.0",
     "@webiny/react-properties": "0.0.0",
     "@webiny/react-router": "0.0.0",
@@ -31,8 +33,6 @@
     "react": "18.2.0"
   },
   "devDependencies": {
-    "@material-design-icons/svg": "^0.14.13",
-    "@material-symbols/svg-400": "^0.4.1",
     "@types/react": "18.2.79",
     "@webiny/project-utils": "0.0.0",
     "execa": "^5.1.1",
diff --git a/packages/app-audit-logs/src/index.tsx b/packages/app-audit-logs/src/index.tsx
index 448bffc1cb6..81e153a73f8 100644
--- a/packages/app-audit-logs/src/index.tsx
+++ b/packages/app-audit-logs/src/index.tsx
@@ -1,8 +1,7 @@
 import React, { useCallback } from "react";
 import { useApolloClient } from "@apollo/react-hooks";
-import { ReactComponent as Icon } from "@material-symbols/svg-400/outlined/quick_reference_all.svg";
-
-import { AddMenu, AddRoute, Layout, Plugin, useWcp } from "@webiny/app-admin";
+import { ReactComponent as Icon } from "@webiny/icons/manage_search.svg";
+import { Layout, useWcp } from "@webiny/app-admin";
 import { HasPermission } from "@webiny/app-security";
 import { AcoProvider } from "@webiny/app-aco";
 
@@ -11,6 +10,9 @@ import { LogsModule } from "~/views/Logs/LogsModule";
 import { AuditLogsPermissions } from "~/plugins/permissionRenderer";
 import AuditLogsView from "~/views/Logs/Logs";
 import { LOCAL_STORAGE_LATEST_VISITED_FOLDER } from "~/constants";
+import { AdminConfig } from "@webiny/app-admin";
+
+const { Menu, Route } = AdminConfig;
 
 export const AuditLogs = () => {
     const client = useApolloClient();
@@ -27,26 +29,40 @@ export const AuditLogs = () => {
     return (
         <>
             <LogsModule />
-            <Plugin>
+            <AdminConfig>
                 <HasPermission any={["al.*"]}>
-                    <AddMenu name="auditLogs" label={`Audit Logs`} icon={<Icon />}>
-                        <AddMenu name={"auditLogs.logs"} label={`Logs`} path="/audit-logs" />
-                    </AddMenu>
-                    <AddRoute path={"/audit-logs"}>
-                        <Layout title={"Audit Logs - Logs"}>
-                            <AuditLogsListWithConfig>
-                                <AcoProvider
-                                    id="AuditLogs"
-                                    client={client}
-                                    createNavigateFolderStorageKey={createNavigateFolderStorageKey}
-                                >
-                                    <AuditLogsView />
-                                </AcoProvider>
-                            </AuditLogsListWithConfig>
-                        </Layout>
-                    </AddRoute>
+                    <Menu
+                        name="auditLogs"
+                        element={
+                            <Menu.Link
+                                text={"Audit Logs"}
+                                icon={<Menu.Link.Icon element={<Icon />} label={"Audit Logs"} />}
+                                to={"/audit-logs"}
+                            />
+                        }
+                    />
+                    <Route
+                        name={"auditLogs"}
+                        exact
+                        path={"/audit-logs"}
+                        element={
+                            <Layout title={"Audit Logs - Logs"}>
+                                <AuditLogsListWithConfig>
+                                    <AcoProvider
+                                        id="AuditLogs"
+                                        client={client}
+                                        createNavigateFolderStorageKey={
+                                            createNavigateFolderStorageKey
+                                        }
+                                    >
+                                        <AuditLogsView />
+                                    </AcoProvider>
+                                </AuditLogsListWithConfig>
+                            </Layout>
+                        }
+                    />
                 </HasPermission>
-            </Plugin>
+            </AdminConfig>
             <AuditLogsPermissions />
         </>
     );
diff --git a/packages/app-audit-logs/src/plugins/permissionRenderer/AuditLogsPermissions.tsx b/packages/app-audit-logs/src/plugins/permissionRenderer/AuditLogsPermissions.tsx
index debaf1b767d..a53e4786b90 100644
--- a/packages/app-audit-logs/src/plugins/permissionRenderer/AuditLogsPermissions.tsx
+++ b/packages/app-audit-logs/src/plugins/permissionRenderer/AuditLogsPermissions.tsx
@@ -5,7 +5,7 @@ import { i18n } from "@webiny/app/i18n";
 import {
     CannotUseAaclAlert,
     PermissionInfo,
-    gridNoPaddingClass
+    gridWithPaddingClass
 } from "@webiny/app-admin/components/Permissions";
 import { Form } from "@webiny/form";
 import { useSecurity } from "@webiny/app-security";
@@ -86,20 +86,20 @@ export const AuditLogsPermissions = ({ value, onChange }: PageBuilderPermissions
         <Form data={formData} onChange={onFormChange}>
             {({ data, Bind }) => (
                 <Fragment>
-                    <Grid className={gridNoPaddingClass}>
+                    <Grid className={gridWithPaddingClass}>
                         <Cell span={12}>
                             {data.accessLevel === "custom" && cannotUseAAcl && (
                                 <CannotUseAaclAlert />
                             )}
                         </Cell>
                     </Grid>
-                    <Grid className={gridNoPaddingClass}>
+                    <Grid className={gridWithPaddingClass}>
                         <Cell span={6}>
                             <PermissionInfo title={t`Access Level`} />
                         </Cell>
                         <Cell span={6}>
                             <Bind name={"accessLevel"}>
-                                <Select label={t`Access Level`}>
+                                <Select>
                                     <option value={NO_ACCESS}>{t`No access`}</option>
                                     <option value={FULL_ACCESS}>{t`Full access`}</option>
                                     <option value={CUSTOM_ACCESS}>{t`Custom access`}</option>
diff --git a/packages/app-audit-logs/src/plugins/permissionRenderer/index.tsx b/packages/app-audit-logs/src/plugins/permissionRenderer/index.tsx
index 6c51931cebb..aa7624d0ca8 100644
--- a/packages/app-audit-logs/src/plugins/permissionRenderer/index.tsx
+++ b/packages/app-audit-logs/src/plugins/permissionRenderer/index.tsx
@@ -1,9 +1,9 @@
 import React, { useEffect } from "react";
-import { ReactComponent as Icon } from "@material-symbols/svg-400/outlined/quick_reference_all.svg";
+import { ReactComponent as PermissionsIcon } from "@webiny/icons/manage_search.svg";
 
 import { i18n } from "@webiny/app/i18n";
 import { plugins } from "@webiny/plugins";
-import { AccordionItem } from "@webiny/ui/Accordion";
+import { Accordion } from "@webiny/admin-ui";
 import { AdminAppPermissionRendererPlugin } from "@webiny/app-admin/types";
 
 import { AuditLogsPermissions as AuditLogsPermissionsComponent } from "./AuditLogsPermissions";
@@ -16,14 +16,19 @@ const createPermissions = (): AdminAppPermissionRendererPlugin => {
         name: "admin-app-permissions-renderer-audit-logs",
         render(props) {
             return (
-                <AccordionItem
-                    icon={<Icon />}
+                <Accordion.Item
+                    icon={
+                        <Accordion.Item.Icon
+                            icon={<PermissionsIcon />}
+                            label={"Audit Logs Permissions"}
+                        />
+                    }
                     title={t`Audit Logs`}
                     description={t`Manage Audit Logs app access permissions.`}
                     data-testid={"permission.al"}
                 >
                     <AuditLogsPermissionsComponent {...props} />
-                </AccordionItem>
+                </Accordion.Item>
             );
         }
     };
diff --git a/packages/app-audit-logs/src/views/Logs/Header/ButtonFilters/ButtonFilters.tsx b/packages/app-audit-logs/src/views/Logs/Header/ButtonFilters/ButtonFilters.tsx
index 9882e43b1f5..038f2fae083 100644
--- a/packages/app-audit-logs/src/views/Logs/Header/ButtonFilters/ButtonFilters.tsx
+++ b/packages/app-audit-logs/src/views/Logs/Header/ButtonFilters/ButtonFilters.tsx
@@ -1,8 +1,8 @@
 import React, { useCallback } from "react";
 import styled from "@emotion/styled";
 
-import { ReactComponent as FilterIcon } from "@material-design-icons/svg/outlined/filter_alt.svg";
-import { ReactComponent as CloseFilterIcon } from "@material-design-icons/svg/outlined/filter_alt_off.svg";
+import { ReactComponent as FilterIcon } from "@webiny/icons/filter_list.svg";
+import { ReactComponent as CloseFilterIcon } from "@webiny/icons/filter_list_off.svg";
 import { IconButton } from "@webiny/ui/Button";
 
 const ButtonWrapper = styled("div")`
diff --git a/packages/app-audit-logs/src/views/Logs/Table/Table.tsx b/packages/app-audit-logs/src/views/Logs/Table/Table.tsx
index 1b0acdc0e38..870fa8a39fb 100644
--- a/packages/app-audit-logs/src/views/Logs/Table/Table.tsx
+++ b/packages/app-audit-logs/src/views/Logs/Table/Table.tsx
@@ -1,7 +1,7 @@
 import React, { forwardRef, useMemo } from "react";
 import { format, addMinutes } from "date-fns";
 
-import { ReactComponent as PreviewIcon } from "@material-design-icons/svg/outlined/visibility.svg";
+import { ReactComponent as PreviewIcon } from "@webiny/icons/info.svg";
 import { Columns, DataTable, OnSortingChange, Sorting } from "@webiny/ui/DataTable";
 import { IconButton } from "@webiny/ui/Button";
 import { Tooltip } from "@webiny/ui/Tooltip";
diff --git a/packages/app-audit-logs/tsconfig.build.json b/packages/app-audit-logs/tsconfig.build.json
index 18801af74d0..1c15f06b18a 100644
--- a/packages/app-audit-logs/tsconfig.build.json
+++ b/packages/app-audit-logs/tsconfig.build.json
@@ -2,6 +2,7 @@
   "extends": "../../tsconfig.build.json",
   "include": ["src"],
   "references": [
+    { "path": "../admin-ui/tsconfig.build.json" },
     { "path": "../api-audit-logs/tsconfig.build.json" },
     { "path": "../app/tsconfig.build.json" },
     { "path": "../app-aco/tsconfig.build.json" },
diff --git a/packages/app-audit-logs/tsconfig.json b/packages/app-audit-logs/tsconfig.json
index 5928e7e0979..8cb8a9f71c1 100644
--- a/packages/app-audit-logs/tsconfig.json
+++ b/packages/app-audit-logs/tsconfig.json
@@ -2,6 +2,7 @@
   "extends": "../../tsconfig.json",
   "include": ["src", "__tests__"],
   "references": [
+    { "path": "../admin-ui" },
     { "path": "../api-audit-logs" },
     { "path": "../app" },
     { "path": "../app-aco" },
@@ -20,6 +21,8 @@
     "paths": {
       "~/*": ["./src/*"],
       "~tests/*": ["./__tests__/*"],
+      "@webiny/admin-ui/*": ["../admin-ui/src/*"],
+      "@webiny/admin-ui": ["../admin-ui/src"],
       "@webiny/api-audit-logs/*": ["../api-audit-logs/src/*"],
       "@webiny/api-audit-logs": ["../api-audit-logs/src"],
       "@webiny/app/*": ["../app/src/*"],
diff --git a/packages/app-dynamic-pages/package.json b/packages/app-dynamic-pages/package.json
index d3126cce73c..1b263fac538 100644
--- a/packages/app-dynamic-pages/package.json
+++ b/packages/app-dynamic-pages/package.json
@@ -13,13 +13,13 @@
     "@emotion/styled": "11.10.6",
     "@fortawesome/fontawesome-svg-core": "^1.3.0",
     "@fortawesome/react-fontawesome": "^0.1.17",
-    "@material-design-icons/svg": "^0.14.13",
     "@types/react": "18.2.79",
     "@webiny/app": "0.0.0",
     "@webiny/app-admin": "0.0.0",
     "@webiny/app-headless-cms": "0.0.0",
     "@webiny/app-page-builder": "0.0.0",
     "@webiny/app-page-builder-elements": "0.0.0",
+    "@webiny/icons": "0.0.0",
     "@webiny/plugins": "0.0.0",
     "@webiny/react-router": "0.0.0",
     "@webiny/ui": "0.0.0",
@@ -35,7 +35,6 @@
     "@emotion/babel-plugin": "^11.11.0",
     "@webiny/project-utils": "0.0.0",
     "rimraf": "^6.0.1",
-    "ttypescript": "^1.5.15",
     "typescript": "5.3.3"
   },
   "publishConfig": {
diff --git a/packages/app-dynamic-pages/src/admin/PageTemplateDialog/CreateTemplateDialog.tsx b/packages/app-dynamic-pages/src/admin/PageTemplateDialog/CreateTemplateDialog.tsx
index 734e7e7fc87..b3eee0705c4 100644
--- a/packages/app-dynamic-pages/src/admin/PageTemplateDialog/CreateTemplateDialog.tsx
+++ b/packages/app-dynamic-pages/src/admin/PageTemplateDialog/CreateTemplateDialog.tsx
@@ -12,10 +12,10 @@ import { CircularProgress } from "@webiny/ui/Progress";
 import { useModels } from "@webiny/app-headless-cms";
 import { CmsModel } from "@webiny/app-headless-cms/types";
 
-import { ReactComponent as ArrowRightIcon } from "@material-design-icons/svg/round/keyboard_arrow_right.svg";
-import { ReactComponent as InfoIcon } from "@material-design-icons/svg/outlined/info.svg";
-import { ReactComponent as ArticleIcon } from "@material-design-icons/svg/outlined/article.svg";
-import { ReactComponent as DatabaseIcon } from "@material-design-icons/svg/outlined/dashboard.svg";
+import { ReactComponent as ArrowRightIcon } from "@webiny/icons/keyboard_arrow_right.svg";
+import { ReactComponent as InfoIcon } from "@webiny/icons/info.svg";
+import { ReactComponent as ArticleIcon } from "@webiny/icons/article.svg";
+import { ReactComponent as DatabaseIcon } from "@webiny/icons/dashboard.svg";
 
 const dialogStyles = css`
     .mdc-dialog__surface {
diff --git a/packages/app-dynamic-pages/src/admin/elements/entriesList.tsx b/packages/app-dynamic-pages/src/admin/elements/entriesList.tsx
index f44666a925e..3a27fbb1d5f 100644
--- a/packages/app-dynamic-pages/src/admin/elements/entriesList.tsx
+++ b/packages/app-dynamic-pages/src/admin/elements/entriesList.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { ReactComponent as RepeatIcon } from "@material-design-icons/svg/round/repeat.svg";
+import { ReactComponent as RepeatIcon } from "@webiny/icons/repeat.svg";
 import { PbEditorPageElementPlugin, PbElement } from "@webiny/app-page-builder/types";
 import { AdminEntriesListRenderer } from "./renderers/EntriesList";
 import { createElement } from "@webiny/app-page-builder/editor/helpers";
diff --git a/packages/app-dynamic-pages/src/admin/elements/entriesSearch.tsx b/packages/app-dynamic-pages/src/admin/elements/entriesSearch.tsx
index 9c89369db96..55cc277a9da 100644
--- a/packages/app-dynamic-pages/src/admin/elements/entriesSearch.tsx
+++ b/packages/app-dynamic-pages/src/admin/elements/entriesSearch.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { ReactComponent as RepeatIcon } from "@material-design-icons/svg/round/repeat.svg";
+import { ReactComponent as RepeatIcon } from "@webiny/icons/repeat.svg";
 import { PbEditorPageElementPlugin, PbElement } from "@webiny/app-page-builder/types";
 import { EntriesSearchRenderer } from "~/dataInjection/renderers/EntriesSearch";
 
diff --git a/packages/app-dynamic-pages/src/admin/elements/repeater.tsx b/packages/app-dynamic-pages/src/admin/elements/repeater.tsx
index a8b1be760dc..9d35313b13f 100644
--- a/packages/app-dynamic-pages/src/admin/elements/repeater.tsx
+++ b/packages/app-dynamic-pages/src/admin/elements/repeater.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { ReactComponent as RepeatIcon } from "@material-design-icons/svg/round/repeat.svg";
+import { ReactComponent as RepeatIcon } from "@webiny/icons/repeat.svg";
 import { PbEditorPageElementPlugin, PbElement } from "@webiny/app-page-builder/types";
 import { AdminRepeaterRenderer } from "./renderers/Repeater";
 
diff --git a/packages/app-file-manager/package.json b/packages/app-file-manager/package.json
index 1d46972379d..135e5c803cf 100644
--- a/packages/app-file-manager/package.json
+++ b/packages/app-file-manager/package.json
@@ -12,10 +12,8 @@
     "@apollo/react-common": "^3.1.4",
     "@apollo/react-components": "^3.1.5",
     "@apollo/react-hooks": "^3.1.5",
-    "@emotion/react": "11.10.8",
-    "@emotion/styled": "11.10.6",
-    "@material-design-icons/svg": "^0.14.13",
     "@types/react": "18.2.79",
+    "@webiny/admin-ui": "0.0.0",
     "@webiny/app": "0.0.0",
     "@webiny/app-aco": "0.0.0",
     "@webiny/app-admin": "0.0.0",
@@ -27,10 +25,10 @@
     "@webiny/app-websockets": "0.0.0",
     "@webiny/error": "0.0.0",
     "@webiny/form": "0.0.0",
+    "@webiny/icons": "0.0.0",
     "@webiny/plugins": "0.0.0",
     "@webiny/react-composition": "0.0.0",
     "@webiny/react-properties": "0.0.0",
-    "@webiny/ui": "0.0.0",
     "@webiny/utils": "0.0.0",
     "@webiny/validation": "0.0.0",
     "apollo-cache": "^1.3.5",
@@ -38,12 +36,13 @@
     "apollo-link": "^1.2.14",
     "apollo-utilities": "^1.3.4",
     "bytes": "^3.1.2",
+    "cropperjs": "^1.4.3",
     "dataurl-to-blob": "^0.0.1",
     "dayjs": "^1.11.13",
     "dot-prop-immutable": "^2.1.1",
-    "emotion": "10.0.27",
     "graphql": "^15.9.0",
     "graphql-tag": "^2.12.6",
+    "load-script": "^1.0.0",
     "lodash": "^4.17.21",
     "mime": "^3.0.0",
     "minimatch": "^5.1.6",
diff --git a/packages/app-file-manager/src/components/BottomInfoBar/BottomInfoBar.tsx b/packages/app-file-manager/src/components/BottomInfoBar/BottomInfoBar.tsx
index 4f510affe81..515977beeac 100644
--- a/packages/app-file-manager/src/components/BottomInfoBar/BottomInfoBar.tsx
+++ b/packages/app-file-manager/src/components/BottomInfoBar/BottomInfoBar.tsx
@@ -1,11 +1,10 @@
 import React from "react";
 import mime from "mime/lite";
+import { Separator } from "@webiny/admin-ui";
 
 import SupportedFileTypes, { SupportedFileTypesProps } from "./SupportedFileTypes";
 import ListStatus, { ListStatusProps } from "./ListStatus";
 
-import { BottomInfoBarInner, BottomInfoBarWrapper } from "./styled";
-
 mime.define({ "image/x-icon": ["ico"] }, true);
 mime.define({ "image/jpg": ["jpg"] }, true);
 mime.define({ "image/vnd.microsoft.icon": ["ico"] }, true);
@@ -14,11 +13,16 @@ type BottomInfoBarProps = SupportedFileTypesProps & ListStatusProps;
 
 export const BottomInfoBar = (props: BottomInfoBarProps) => {
     return (
-        <BottomInfoBarWrapper>
-            <BottomInfoBarInner>
+        <div className="wby-bg-neutral-base wby-w-full wby-overflow-hidden wby-z-5">
+            <Separator />
+            <div
+                className={
+                    "wby-h-xl wby-px-md wby-py-sm wby-flex wby-items-center wby-justify-between"
+                }
+            >
                 <SupportedFileTypes {...props} />
                 <ListStatus {...props} />
-            </BottomInfoBarInner>
-        </BottomInfoBarWrapper>
+            </div>
+        </div>
     );
 };
diff --git a/packages/app-file-manager/src/components/BottomInfoBar/ListStatus.tsx b/packages/app-file-manager/src/components/BottomInfoBar/ListStatus.tsx
index 00645bfc498..d2ae5bdf219 100644
--- a/packages/app-file-manager/src/components/BottomInfoBar/ListStatus.tsx
+++ b/packages/app-file-manager/src/components/BottomInfoBar/ListStatus.tsx
@@ -1,8 +1,6 @@
 import React from "react";
 import { i18n } from "@webiny/app/i18n";
-import { CircularProgress } from "@webiny/ui/Progress";
-
-import { CircularProgressHolder, StatusWrapper, UploadingLabel } from "./styled";
+import { Loader, Text } from "@webiny/admin-ui";
 
 const t = i18n.ns("app-admin/file-manager/components/bottom-info-bar/list-status");
 
@@ -16,12 +14,12 @@ const ListStatus = ({ listing }: ListStatusProps) => {
     }
 
     return (
-        <StatusWrapper>
-            <UploadingLabel>{t`Loading more files...`}</UploadingLabel>
-            <CircularProgressHolder>
-                <CircularProgress size={10} spinnerWidth={1} />
-            </CircularProgressHolder>
-        </StatusWrapper>
+        <div className="wby-flex wby-items-center wby-gap-sm">
+            <Text size={"sm"} as={"div"} className={"wby-text-neutral-strong"}>
+                {t`Loading more files...`}
+            </Text>
+            <Loader size={"xs"} />
+        </div>
     );
 };
 
diff --git a/packages/app-file-manager/src/components/BottomInfoBar/SupportedFileTypes.tsx b/packages/app-file-manager/src/components/BottomInfoBar/SupportedFileTypes.tsx
index adb306fd4e5..cbca72772e8 100644
--- a/packages/app-file-manager/src/components/BottomInfoBar/SupportedFileTypes.tsx
+++ b/packages/app-file-manager/src/components/BottomInfoBar/SupportedFileTypes.tsx
@@ -1,4 +1,5 @@
 import React, { useCallback } from "react";
+import { Text } from "@webiny/admin-ui";
 import { i18n } from "@webiny/app/i18n";
 import mime from "mime/lite";
 
@@ -44,17 +45,17 @@ const SupportedFileTypes = ({
 
     if (accept.length === 0) {
         return (
-            <span>
+            <Text size={"sm"} as={"div"} className={"wby-text-neutral-strong"}>
                 {t`Showing {currentCountLabel} out of {totalCountLabel} from all file extensions.`({
                     currentCountLabel: String(currentCount),
                     totalCountLabel: getLabel(totalCount)
                 })}
-            </span>
+            </Text>
         );
     }
 
     return (
-        <span>
+        <Text size={"sm"} as={"div"} className={"wby-text-neutral-strong"}>
             {t`Showing {currentCountLabel} out of {totalCountLabel} from the following file extensions: {files}.`(
                 {
                     currentCountLabel: String(currentCount),
@@ -62,7 +63,7 @@ const SupportedFileTypes = ({
                     files: getUniqueFilePlugins(accept).join(", ")
                 }
             )}
-        </span>
+        </Text>
     );
 };
 
diff --git a/packages/app-file-manager/src/components/BottomInfoBar/styled.tsx b/packages/app-file-manager/src/components/BottomInfoBar/styled.tsx
deleted file mode 100644
index 46d00e7ff0b..00000000000
--- a/packages/app-file-manager/src/components/BottomInfoBar/styled.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import styled from "@emotion/styled";
-
-export const BottomInfoBarWrapper = styled("div")`
-    font-size: 0.8rem;
-    position: sticky;
-    bottom: 0;
-    height: 30px;
-    color: var(--mdc-theme-text-secondary-on-background);
-    border-top: 1px solid var(--mdc-theme-on-background);
-    background: var(--mdc-theme-surface);
-    width: 100%;
-    transform: translateZ(0);
-    overflow: hidden;
-    display: flex;
-    align-items: center;
-    z-index: 1;
-`;
-
-export const BottomInfoBarInner = styled("div")`
-    padding: 0 10px;
-    width: 100%;
-`;
-
-export const StatusWrapper = styled("div")`
-    color: var(--mdc-theme-primary);
-    position: absolute;
-    right: 0;
-    bottom: 10px;
-    margin-right: 10px;
-    display: flex;
-    align-items: center;
-    > div {
-        display: inline-block;
-    }
-`;
-
-export const CircularProgressHolder = styled("div")`
-    position: relative;
-    height: 12px;
-    width: 12px;
-`;
-
-export const UploadingLabel = styled("div")`
-    margin-right: 5px;
-`;
diff --git a/packages/app-file-manager/src/components/BulkActions/ActionDelete.tsx b/packages/app-file-manager/src/components/BulkActions/ActionDelete.tsx
index 5dfa3ee614e..89eca26474f 100644
--- a/packages/app-file-manager/src/components/BulkActions/ActionDelete.tsx
+++ b/packages/app-file-manager/src/components/BulkActions/ActionDelete.tsx
@@ -1,5 +1,6 @@
 import React, { useMemo } from "react";
-import { ReactComponent as DeleteIcon } from "@material-design-icons/svg/outlined/delete.svg";
+import { Tooltip } from "@webiny/admin-ui";
+import { ReactComponent as DeleteIcon } from "@webiny/icons/delete.svg";
 import { observer } from "mobx-react-lite";
 
 import { FileManagerViewConfig } from "~/modules/FileManagerRenderer/FileManagerView/FileManagerViewConfig";
@@ -12,7 +13,7 @@ export const ActionDelete = observer(() => {
     const { canDelete } = useFileManagerApi();
 
     const { useWorker, useButtons, useDialog } = FileManagerViewConfig.Browser.BulkAction;
-    const { IconButton } = useButtons();
+    const { ButtonDefault } = useButtons();
     const worker = useWorker();
     const { showConfirmationDialog, showResultsDialog } = useDialog();
 
@@ -62,11 +63,14 @@ export const ActionDelete = observer(() => {
     }
 
     return (
-        <IconButton
-            icon={<DeleteIcon />}
-            onAction={openDeleteDialog}
-            label={`Delete ${filesLabel}`}
-            tooltipPlacement={"bottom"}
+        <Tooltip
+            side={"bottom"}
+            content={`Delete ${filesLabel}`}
+            trigger={
+                <ButtonDefault icon={<DeleteIcon />} onAction={openDeleteDialog} size={"sm"}>
+                    {`Delete`}
+                </ButtonDefault>
+            }
         />
     );
 });
diff --git a/packages/app-file-manager/src/components/BulkActions/ActionEdit/ActionEdit.styled.tsx b/packages/app-file-manager/src/components/BulkActions/ActionEdit/ActionEdit.styled.tsx
deleted file mode 100644
index 6ec26dcaf80..00000000000
--- a/packages/app-file-manager/src/components/BulkActions/ActionEdit/ActionEdit.styled.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import styled from "@emotion/styled";
-import { ReactComponent as AddIcon } from "@material-design-icons/svg/round/add.svg";
-import { Dialog } from "@webiny/ui/Dialog";
-
-export const ActionEditFormContainer = styled.div`
-    margin: -24px !important;
-`;
-
-export const DialogContainer = styled(Dialog)`
-    z-index: 22;
-
-    .mdc-dialog__surface {
-        width: 800px;
-        min-width: 800px;
-    }
-`;
-
-export const BatchEditorContainer = styled.div`
-    padding: 24px;
-`;
-
-export const AddOperationInner = styled.div`
-    padding: 24px 0 0;
-    text-align: center;
-`;
-
-interface ButtonIconProps {
-    disabled?: boolean;
-}
-
-export const ButtonIcon = styled(AddIcon)<ButtonIconProps>`
-    fill: ${props =>
-        props.disabled ? "var(--mdc-theme-text-hint-on-light)" : "var(--mdc-theme-primary)"};
-    width: 18px;
-    margin-right: 8px;
-`;
diff --git a/packages/app-file-manager/src/components/BulkActions/ActionEdit/ActionEdit.tsx b/packages/app-file-manager/src/components/BulkActions/ActionEdit/ActionEdit.tsx
index 278397a2651..a481ff52ebd 100644
--- a/packages/app-file-manager/src/components/BulkActions/ActionEdit/ActionEdit.tsx
+++ b/packages/app-file-manager/src/components/BulkActions/ActionEdit/ActionEdit.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useMemo } from "react";
 import { observer } from "mobx-react-lite";
-import { ReactComponent as EditIcon } from "@material-design-icons/svg/outlined/edit.svg";
+import { ReactComponent as EditIcon } from "@webiny/icons/edit.svg";
 import {
     FileManagerViewConfig,
     useFileManagerViewConfig
@@ -10,13 +10,14 @@ import { BatchDTO } from "~/components/BulkActions/ActionEdit/domain";
 import { BatchEditorDialog } from "./BatchEditorDialog";
 import { ActionEditPresenter } from "./ActionEditPresenter";
 import { useActionEditWorker } from "~/components/BulkActions/ActionEdit/useActionEditWorker";
+import { Tooltip } from "@webiny/admin-ui";
 
 const { useButtons } = FileManagerViewConfig.Browser.BulkAction;
 
 export const ActionEdit = observer(() => {
     const { fields: allModelFields } = useFileModel();
     const config = useFileManagerViewConfig();
-    const { IconButton } = useButtons();
+    const { ButtonDefault } = useButtons();
 
     const fields = useMemo(() => {
         if (!config.fileDetails.fields.find(field => field.name === "tags")) {
@@ -55,11 +56,18 @@ export const ActionEdit = observer(() => {
 
     return (
         <>
-            <IconButton
-                icon={<EditIcon />}
-                onAction={() => presenter.openEditor()}
-                label={`Edit ${worker.filesLabel}`}
-                tooltipPlacement={"bottom"}
+            <Tooltip
+                side={"bottom"}
+                content={`Edit ${worker.filesLabel}`}
+                trigger={
+                    <ButtonDefault
+                        icon={<EditIcon />}
+                        onAction={() => presenter.openEditor()}
+                        size={"sm"}
+                    >
+                        {"Edit"}
+                    </ButtonDefault>
+                }
             />
             <BatchEditorDialog
                 onClose={() => presenter.closeEditor()}
diff --git a/packages/app-file-manager/src/components/BulkActions/ActionEdit/BatchEditorDialog/AddOperation.tsx b/packages/app-file-manager/src/components/BulkActions/ActionEdit/BatchEditorDialog/AddOperation.tsx
index c6c65ec42f3..2207bb1dfe5 100644
--- a/packages/app-file-manager/src/components/BulkActions/ActionEdit/BatchEditorDialog/AddOperation.tsx
+++ b/packages/app-file-manager/src/components/BulkActions/ActionEdit/BatchEditorDialog/AddOperation.tsx
@@ -1,11 +1,6 @@
 import React from "react";
-
-import { ButtonDefault } from "@webiny/ui/Button";
-
-import {
-    AddOperationInner,
-    ButtonIcon
-} from "~/components/BulkActions/ActionEdit/ActionEdit.styled";
+import { Button } from "@webiny/admin-ui";
+import { ReactComponent as AddIcon } from "@webiny/icons/add.svg";
 
 interface AddOperationProps {
     disabled: boolean;
@@ -14,10 +9,14 @@ interface AddOperationProps {
 
 export const AddOperation = ({ disabled, onClick }: AddOperationProps) => {
     return (
-        <AddOperationInner>
-            <ButtonDefault disabled={disabled} onClick={onClick}>
-                <ButtonIcon disabled={disabled} /> {"Add new operation"}
-            </ButtonDefault>
-        </AddOperationInner>
+        <div className={"wby-mt-lg wby-text-center"}>
+            <Button
+                onClick={onClick}
+                text={"Add new operation"}
+                icon={<AddIcon />}
+                variant={"secondary"}
+                disabled={disabled}
+            />
+        </div>
     );
 };
diff --git a/packages/app-file-manager/src/components/BulkActions/ActionEdit/BatchEditorDialog/BatchEditor.tsx b/packages/app-file-manager/src/components/BulkActions/ActionEdit/BatchEditorDialog/BatchEditor.tsx
index cd5b314cc73..119be4a90e4 100644
--- a/packages/app-file-manager/src/components/BulkActions/ActionEdit/BatchEditorDialog/BatchEditor.tsx
+++ b/packages/app-file-manager/src/components/BulkActions/ActionEdit/BatchEditorDialog/BatchEditor.tsx
@@ -1,9 +1,8 @@
 import React, { useEffect } from "react";
 
 import { observer } from "mobx-react-lite";
-import { ReactComponent as DeleteIcon } from "@material-design-icons/svg/outlined/delete_outline.svg";
+import { ReactComponent as DeleteIcon } from "@webiny/icons/delete_outline.svg";
 import { Form, FormAPI, FormOnSubmit } from "@webiny/form";
-import { Accordion, AccordionItem } from "@webiny/ui/Accordion";
 
 import { AddOperation } from "~/components/BulkActions/ActionEdit/BatchEditorDialog/AddOperation";
 import { Operation } from "~/components/BulkActions/ActionEdit/BatchEditorDialog/Operation";
@@ -11,7 +10,7 @@ import {
     BatchEditorDialogViewModel,
     BatchEditorFormData
 } from "~/components/BulkActions/ActionEdit/BatchEditorDialog/BatchEditorDialogPresenter";
-import { BatchEditorContainer } from "~/components/BulkActions/ActionEdit/ActionEdit.styled";
+import { Accordion } from "@webiny/admin-ui";
 
 export interface BatchEditorProps {
     onForm: (form: FormAPI) => void;
@@ -33,50 +32,47 @@ export const BatchEditor = observer((props: BatchEditorProps) => {
     }, []);
 
     return (
-        <Form
-            ref={formRef}
-            data={props.vm.data}
-            onChange={props.onChange}
-            onSubmit={data => {
-                console.log("data", data);
-            }}
-            invalidFields={props.vm.invalidFields}
-        >
-            {() => (
-                <BatchEditorContainer>
-                    <Accordion elevation={1}>
-                        {props.vm.data.operations.map((operation, operationIndex) => (
-                            <AccordionItem
-                                key={`operation-${operationIndex}`}
-                                title={operation.title}
-                                open={operation.open}
-                                actions={
-                                    <AccordionItem.Actions>
-                                        <AccordionItem.Action
+        <div className={"wby-py-lg"}>
+            <Form
+                ref={formRef}
+                data={props.vm.data}
+                onChange={props.onChange}
+                invalidFields={props.vm.invalidFields}
+            >
+                {() => (
+                    <>
+                        <Accordion variant={"container"} background={"light"}>
+                            {props.vm.data.operations.map((operation, operationIndex) => (
+                                <Accordion.Item
+                                    key={`operation-${operationIndex}`}
+                                    title={operation.title}
+                                    defaultOpen={operation.open}
+                                    actions={
+                                        <Accordion.Item.Action
                                             icon={<DeleteIcon />}
                                             onClick={() => props.onDelete(operationIndex)}
                                             disabled={!operation.canDelete}
                                         />
-                                    </AccordionItem.Actions>
-                                }
-                            >
-                                <Operation
-                                    name={`operations.${operationIndex}`}
-                                    operation={operation}
-                                    onDelete={() => props.onDelete(operationIndex)}
-                                    onSetOperationFieldData={data =>
-                                        props.onSetOperationFieldData(operationIndex, data)
                                     }
-                                />
-                            </AccordionItem>
-                        ))}
-                    </Accordion>
-                    <AddOperation
-                        disabled={!props.vm.canAddOperation}
-                        onClick={() => props.onAdd()}
-                    />
-                </BatchEditorContainer>
-            )}
-        </Form>
+                                >
+                                    <Operation
+                                        name={`operations.${operationIndex}`}
+                                        operation={operation}
+                                        onDelete={() => props.onDelete(operationIndex)}
+                                        onSetOperationFieldData={data =>
+                                            props.onSetOperationFieldData(operationIndex, data)
+                                        }
+                                    />
+                                </Accordion.Item>
+                            ))}
+                        </Accordion>
+                        <AddOperation
+                            disabled={!props.vm.canAddOperation}
+                            onClick={() => props.onAdd()}
+                        />
+                    </>
+                )}
+            </Form>
+        </div>
     );
 });
diff --git a/packages/app-file-manager/src/components/BulkActions/ActionEdit/BatchEditorDialog/BatchEditorDialog.tsx b/packages/app-file-manager/src/components/BulkActions/ActionEdit/BatchEditorDialog/BatchEditorDialog.tsx
index 17a4f1f9951..45357fbd6b2 100644
--- a/packages/app-file-manager/src/components/BulkActions/ActionEdit/BatchEditorDialog/BatchEditorDialog.tsx
+++ b/packages/app-file-manager/src/components/BulkActions/ActionEdit/BatchEditorDialog/BatchEditorDialog.tsx
@@ -1,13 +1,11 @@
 import React, { useMemo, useEffect, useRef } from "react";
 
+import { Drawer } from "@webiny/admin-ui";
 import { observer } from "mobx-react-lite";
 import { FormAPI } from "@webiny/form";
-import { ButtonPrimary } from "@webiny/ui/Button";
-import { DialogActions, DialogCancel, DialogContent, DialogTitle } from "@webiny/ui/Dialog";
 
 import { BatchEditorDialogPresenter, BatchEditorFormData } from "./BatchEditorDialogPresenter";
 import { BatchEditor } from "~/components/BulkActions/ActionEdit/BatchEditorDialog/BatchEditor";
-import { ActionEditFormContainer, DialogContainer } from "../ActionEdit.styled";
 import { BatchDTO, FieldDTO } from "~/components/BulkActions/ActionEdit/domain";
 
 interface BatchEditorDialogProps {
@@ -46,37 +44,32 @@ export const BatchEditorDialog = observer((props: BatchEditorDialogProps) => {
     };
 
     return (
-        <DialogContainer
+        <Drawer
             open={props.vm.isOpen}
             onClose={props.onClose}
-            preventOutsideDismiss={true}
-        >
-            {props.vm.isOpen ? (
+            modal={true}
+            width={800}
+            headerSeparator={true}
+            footerSeparator={true}
+            title={"Edit items"}
+            actions={
                 <>
-                    <DialogTitle>{"Edit items"}</DialogTitle>
-                    <DialogContent>
-                        <ActionEditFormContainer>
-                            <BatchEditor
-                                onForm={form => (ref.current = form)}
-                                onChange={data => onChange(data)}
-                                onSubmit={onApply}
-                                onDelete={operationIndex =>
-                                    presenter.deleteOperation(operationIndex)
-                                }
-                                onAdd={() => presenter.addOperation()}
-                                onSetOperationFieldData={(operationIndex, data) =>
-                                    presenter.setOperationFieldData(operationIndex, data)
-                                }
-                                vm={presenter.vm}
-                            />
-                        </ActionEditFormContainer>
-                    </DialogContent>
-                    <DialogActions>
-                        <DialogCancel onClick={props.onClose}>{"Cancel"}</DialogCancel>
-                        <ButtonPrimary onClick={onApply}>{"Submit"}</ButtonPrimary>
-                    </DialogActions>
+                    <Drawer.CancelButton text={"Cancel"} onClick={props.onClose} />
+                    <Drawer.ConfirmButton onClick={onApply} text={"Submit"} />
                 </>
-            ) : null}
-        </DialogContainer>
+            }
+        >
+            <BatchEditor
+                onForm={form => (ref.current = form)}
+                onChange={data => onChange(data)}
+                onSubmit={onApply}
+                onDelete={operationIndex => presenter.deleteOperation(operationIndex)}
+                onAdd={() => presenter.addOperation()}
+                onSetOperationFieldData={(operationIndex, data) =>
+                    presenter.setOperationFieldData(operationIndex, data)
+                }
+                vm={presenter.vm}
+            />
+        </Drawer>
     );
 });
diff --git a/packages/app-file-manager/src/components/BulkActions/ActionEdit/BatchEditorDialog/BatchEditorDialogPresenter.tsx b/packages/app-file-manager/src/components/BulkActions/ActionEdit/BatchEditorDialog/BatchEditorDialogPresenter.tsx
index c1319c86720..8ceb70253bd 100644
--- a/packages/app-file-manager/src/components/BulkActions/ActionEdit/BatchEditorDialog/BatchEditorDialogPresenter.tsx
+++ b/packages/app-file-manager/src/components/BulkActions/ActionEdit/BatchEditorDialog/BatchEditorDialogPresenter.tsx
@@ -57,7 +57,7 @@ export class BatchEditorDialogPresenter implements IBatchEditorDialogPresenter {
 
     get vm() {
         const operations = this.getOperations();
-        const canAddOperation = operations[operations.length - 1].fieldOptions.length > 1 ?? false;
+        const canAddOperation = operations[operations.length - 1]?.fieldOptions.length > 1 ?? false;
 
         return {
             invalidFields: this.invalidFields,
diff --git a/packages/app-file-manager/src/components/BulkActions/ActionEdit/BatchEditorDialog/FieldRenderer.tsx b/packages/app-file-manager/src/components/BulkActions/ActionEdit/BatchEditorDialog/FieldRenderer.tsx
index 308ac960258..8009bc73c20 100644
--- a/packages/app-file-manager/src/components/BulkActions/ActionEdit/BatchEditorDialog/FieldRenderer.tsx
+++ b/packages/app-file-manager/src/components/BulkActions/ActionEdit/BatchEditorDialog/FieldRenderer.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { FieldElement, ModelProvider } from "@webiny/app-headless-cms";
 import { Bind, BindPrefix } from "@webiny/form";
-import { Cell } from "@webiny/ui/Grid";
+import { Grid } from "@webiny/admin-ui";
 import { FieldDTO, OperatorType } from "~/components/BulkActions/ActionEdit/domain";
 import { useFileModel } from "~/hooks/useFileModel";
 import { useFileManagerViewConfig } from "~/modules/FileManagerRenderer/FileManagerView/FileManagerViewConfig";
@@ -34,7 +34,7 @@ export const FieldRenderer = (props: FieldRendererProps) => {
 
     return (
         <ModelProvider model={fileModel}>
-            <Cell span={12}>{renderer}</Cell>
+            <Grid.Column span={12}>{renderer}</Grid.Column>
         </ModelProvider>
     );
 };
diff --git a/packages/app-file-manager/src/components/BulkActions/ActionEdit/BatchEditorDialog/Operation.tsx b/packages/app-file-manager/src/components/BulkActions/ActionEdit/BatchEditorDialog/Operation.tsx
index d50b99fdb69..522509570ba 100644
--- a/packages/app-file-manager/src/components/BulkActions/ActionEdit/BatchEditorDialog/Operation.tsx
+++ b/packages/app-file-manager/src/components/BulkActions/ActionEdit/BatchEditorDialog/Operation.tsx
@@ -1,9 +1,8 @@
 import React from "react";
 
 import { observer } from "mobx-react-lite";
+import { Grid, Select } from "@webiny/admin-ui";
 import { Bind } from "@webiny/form";
-import { Cell, Grid } from "@webiny/ui/Grid";
-import { Select } from "@webiny/ui/Select";
 
 import { FieldRenderer } from "~/components/BulkActions/ActionEdit/BatchEditorDialog/FieldRenderer";
 import { OperationFormData } from "~/components/BulkActions/ActionEdit/BatchEditorDialog/BatchEditorDialogPresenter";
@@ -18,7 +17,7 @@ export interface OperationProps {
 export const Operation = observer((props: OperationProps) => {
     return (
         <Grid>
-            <Cell span={6}>
+            <Grid.Column span={6}>
                 <Bind name={`${props.name}.field`}>
                     {({ value, validation }) => (
                         <Select
@@ -30,8 +29,8 @@ export const Operation = observer((props: OperationProps) => {
                         />
                     )}
                 </Bind>
-            </Cell>
-            <Cell span={6}>
+            </Grid.Column>
+            <Grid.Column span={6}>
                 {props.operation.field && (
                     <Bind name={`${props.name}.operator`}>
                         {({ value, onChange, validation }) => (
@@ -45,14 +44,16 @@ export const Operation = observer((props: OperationProps) => {
                         )}
                     </Bind>
                 )}
-            </Cell>
-            {props.operation.selectedField ? (
-                <FieldRenderer
-                    operator={props.operation.operator}
-                    field={props.operation.selectedField}
-                    name={`${props.name}.value`}
-                />
-            ) : null}
+            </Grid.Column>
+            <>
+                {props.operation.selectedField ? (
+                    <FieldRenderer
+                        operator={props.operation.operator}
+                        field={props.operation.selectedField}
+                        name={`${props.name}.value`}
+                    />
+                ) : null}
+            </>
         </Grid>
     );
 });
diff --git a/packages/app-file-manager/src/components/BulkActions/ActionEdit/BatchEditorDialog/RemoveOperation.tsx b/packages/app-file-manager/src/components/BulkActions/ActionEdit/BatchEditorDialog/RemoveOperation.tsx
deleted file mode 100644
index 6af71a20fdd..00000000000
--- a/packages/app-file-manager/src/components/BulkActions/ActionEdit/BatchEditorDialog/RemoveOperation.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from "react";
-
-import { ReactComponent as DeleteIcon } from "@material-design-icons/svg/outlined/delete.svg";
-import { IconButton } from "@webiny/ui/Button";
-import { Tooltip } from "@webiny/ui/Tooltip";
-
-interface RemoveOperationProps {
-    onClick: () => void;
-    disabled: boolean;
-}
-
-export const RemoveOperation = ({ onClick, disabled }: RemoveOperationProps) => {
-    return (
-        <Tooltip content={"Remove operation"} placement={"bottom"}>
-            <IconButton
-                label={"Remove operation"}
-                icon={<DeleteIcon />}
-                onClick={onClick}
-                disabled={disabled}
-            />
-        </Tooltip>
-    );
-};
diff --git a/packages/app-file-manager/src/components/BulkActions/ActionMove.tsx b/packages/app-file-manager/src/components/BulkActions/ActionMove.tsx
index a41a1743b5b..dace3467cbb 100644
--- a/packages/app-file-manager/src/components/BulkActions/ActionMove.tsx
+++ b/packages/app-file-manager/src/components/BulkActions/ActionMove.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback, useMemo } from "react";
-import { ReactComponent as MoveIcon } from "@material-design-icons/svg/outlined/drive_file_move.svg";
+import { ReactComponent as MoveIcon } from "@webiny/icons/exit_to_app.svg";
 import { observer } from "mobx-react-lite";
 import { useMoveToFolderDialog, useNavigateFolder } from "@webiny/app-aco";
 import { FolderItem } from "@webiny/app-aco/types";
@@ -8,13 +8,14 @@ import { useFileManagerView } from "~/modules/FileManagerRenderer/FileManagerVie
 import { FileManagerViewConfig } from "~/modules/FileManagerRenderer/FileManagerView/FileManagerViewConfig";
 import { getFilesLabel } from "~/components/BulkActions/BulkActions";
 import { ROOT_FOLDER } from "~/constants";
+import { Tooltip } from "@webiny/admin-ui";
 
 export const ActionMove = observer(() => {
     const { moveFileToFolder } = useFileManagerView();
     const { currentFolderId } = useNavigateFolder();
 
     const { useWorker, useButtons, useDialog } = FileManagerViewConfig.Browser.BulkAction;
-    const { IconButton } = useButtons();
+    const { ButtonDefault } = useButtons();
     const worker = useWorker();
     const { showConfirmationDialog, showResultsDialog } = useDialog();
     const { showDialog: showMoveDialog } = useMoveToFolderDialog();
@@ -72,11 +73,14 @@ export const ActionMove = observer(() => {
         });
 
     return (
-        <IconButton
-            icon={<MoveIcon />}
-            onAction={openMoveDialog}
-            label={`Move ${filesLabel}`}
-            tooltipPlacement={"bottom"}
+        <Tooltip
+            side={"bottom"}
+            content={`Move ${filesLabel}`}
+            trigger={
+                <ButtonDefault icon={<MoveIcon />} onAction={openMoveDialog} size={"sm"}>
+                    {`Move`}
+                </ButtonDefault>
+            }
         />
     );
 });
diff --git a/packages/app-file-manager/src/components/BulkActions/BulkActions.styled.tsx b/packages/app-file-manager/src/components/BulkActions/BulkActions.styled.tsx
deleted file mode 100644
index 669ce614b56..00000000000
--- a/packages/app-file-manager/src/components/BulkActions/BulkActions.styled.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import styled from "@emotion/styled";
-import { ButtonContainer } from "@webiny/app-admin";
-
-export const BulkActionsContainer = styled.div`
-    width: 100%;
-    height: 64px;
-    background-color: var(--mdc-theme-surface);
-    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
-`;
-
-export const BulkActionsInner = styled.div`
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 0 12px 0 16px;
-`;
-
-export const ButtonsContainer = styled.div`
-    display: flex;
-    align-items: center;
-
-    ${ButtonContainer} {
-        margin: 0;
-    }
-`;
diff --git a/packages/app-file-manager/src/components/BulkActions/BulkActions.tsx b/packages/app-file-manager/src/components/BulkActions/BulkActions.tsx
index 629d8b0f7fb..70a520b00f2 100644
--- a/packages/app-file-manager/src/components/BulkActions/BulkActions.tsx
+++ b/packages/app-file-manager/src/components/BulkActions/BulkActions.tsx
@@ -1,15 +1,12 @@
 import React, { useMemo } from "react";
-import { ReactComponent as Close } from "@material-design-icons/svg/outlined/close.svg";
+import { Text, IconButton } from "@webiny/admin-ui";
+import { ReactComponent as Close } from "@webiny/icons/close.svg";
 import { i18n } from "@webiny/app/i18n";
 import { Buttons } from "@webiny/app-admin";
-import { IconButton } from "@webiny/ui/Button";
-import { Typography } from "@webiny/ui/Typography";
 
 import { useFileManagerViewConfig } from "~/modules/FileManagerRenderer/FileManagerView/FileManagerViewConfig";
 import { useFileManagerView } from "~/modules/FileManagerRenderer/FileManagerViewProvider";
 
-import { BulkActionsContainer, BulkActionsInner, ButtonsContainer } from "./BulkActions.styled";
-
 const t = i18n.ns("app-file-manager/components/bulk-actions");
 
 export const getFilesLabel = (count = 0): string => {
@@ -21,7 +18,7 @@ export const BulkActions = () => {
     const view = useFileManagerView();
 
     const headline = useMemo((): string => {
-        return t`{label} selected:`({
+        return t`{label} selected`({
             label: getFilesLabel(view.selected.length)
         });
     }, [view.selected]);
@@ -31,14 +28,24 @@ export const BulkActions = () => {
     }
 
     return (
-        <BulkActionsContainer>
-            <BulkActionsInner>
-                <ButtonsContainer>
-                    <Typography use={"headline6"}>{headline}</Typography>
+        <div className={"wby-w-full wby-bg-neutral-disabled wby-px-md wby-py-sm"}>
+            <div className={"wby-flex wby-items-center wby-justify-between wby-gap-sm"}>
+                <div className={"wby-flex wby-items-center wby-gap-sm"}>
+                    <Text size={"sm"} className={"wby-text-neutral-strong"}>
+                        {headline}
+                    </Text>
+                </div>
+
+                <div className={"wby-flex wby-items-center wby-gap-sm"}>
                     <Buttons actions={browser.bulkActions} />
-                </ButtonsContainer>
-                <IconButton icon={<Close />} onClick={() => view.setSelected([])} />
-            </BulkActionsInner>
-        </BulkActionsContainer>
+                    <IconButton
+                        variant={"ghost"}
+                        size={"sm"}
+                        icon={<Close />}
+                        onClick={() => view.setSelected([])}
+                    />
+                </div>
+            </div>
+        </div>
     );
 };
diff --git a/packages/app-file-manager/src/components/DropFilesHere/DropFilesHere.tsx b/packages/app-file-manager/src/components/DropFilesHere/DropFilesHere.tsx
deleted file mode 100644
index 207f0c42364..00000000000
--- a/packages/app-file-manager/src/components/DropFilesHere/DropFilesHere.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import React from "react";
-import { i18n } from "@webiny/app/i18n";
-import { Icon } from "@webiny/ui/Icon";
-
-import {
-    DropFilesHereWrapper,
-    DropFilesHereInner,
-    DropFilesHereIcon,
-    DropFilesHereIconWrapper
-} from "./styled";
-
-const t = i18n.ns("app-admin/file-manager/components/drop-files-here");
-
-export interface DropFilesHereProps {
-    onDragLeave?: (event?: React.DragEvent<HTMLElement>) => void;
-    onDrop?: (event?: React.DragEvent<HTMLElement>) => void;
-    empty?: boolean;
-    onClick?: (event?: React.MouseEvent<HTMLElement>) => void;
-}
-
-export const DropFilesHere = ({ empty, onClick }: DropFilesHereProps) => {
-    return (
-        <DropFilesHereWrapper empty={empty} onClick={onClick}>
-            <DropFilesHereInner empty={empty}>
-                <DropFilesHereIconWrapper>
-                    <Icon icon={<DropFilesHereIcon />} />
-                    <div>{t`Drop files here`}</div>
-                </DropFilesHereIconWrapper>
-            </DropFilesHereInner>
-        </DropFilesHereWrapper>
-    );
-};
diff --git a/packages/app-file-manager/src/components/DropFilesHere/index.tsx b/packages/app-file-manager/src/components/DropFilesHere/index.tsx
deleted file mode 100644
index ca55c70374c..00000000000
--- a/packages/app-file-manager/src/components/DropFilesHere/index.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./DropFilesHere";
diff --git a/packages/app-file-manager/src/components/DropFilesHere/styled.tsx b/packages/app-file-manager/src/components/DropFilesHere/styled.tsx
deleted file mode 100644
index 068330890ba..00000000000
--- a/packages/app-file-manager/src/components/DropFilesHere/styled.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import styled from "@emotion/styled";
-import { ReactComponent as UploadIcon } from "@material-design-icons/svg/filled/cloud_upload.svg";
-
-type DropFilesHereWrapperProps = {
-    empty?: boolean;
-};
-
-export const DropFilesHereWrapper = styled("div")<DropFilesHereWrapperProps>`
-    pointer-events: ${({ empty }) => (empty ? "all" : "none")};
-    margin: 0 auto;
-    padding-top: 0;
-    height: calc(100vh - 95px);
-    z-index: 100;
-    width: 100%;
-    position: absolute;
-    background: ${({ empty }) => (empty ? "transparent" : "var(--mdc-theme-text-hint-on-light)")};
-`;
-
-export const DropFilesHereInner = styled("div")<DropFilesHereWrapperProps>`
-    text-align: center;
-    width: 300px;
-    height: 300px;
-    background-color: ${({ empty }) =>
-        empty ? "var(--mdc-theme-surface)" : "var(--mdc-theme-background)"};
-    border-radius: 50%;
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    transform: translateX(-50%) translateY(-50%);
-`;
-
-export const DropFilesHereIconWrapper = styled("div")`
-    position: absolute;
-    top: 90px;
-    width: 300px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    color: var(--mdc-theme-on-surface);
-`;
-
-export const DropFilesHereIcon = styled(UploadIcon)`
-    width: 100px !important;
-    height: auto;
-    display: inline-block;
-    color: var(--mdc-theme-on-surface);
-`;
diff --git a/packages/app-file-manager/src/components/Empty/Empty.tsx b/packages/app-file-manager/src/components/Empty/Empty.tsx
index f8a7e51db19..7fceca8c106 100644
--- a/packages/app-file-manager/src/components/Empty/Empty.tsx
+++ b/packages/app-file-manager/src/components/Empty/Empty.tsx
@@ -2,9 +2,9 @@ import React from "react";
 import { FilesRenderChildren } from "react-butterfiles";
 
 import { useFileManagerApi } from "~/index";
-import { NoPermission } from "~/components/NoPermission";
+import { NoPermissions } from "~/components/NoPermissions";
 import { NoResults } from "~/components/NoResults";
-import { DropFilesHere } from "~/components/DropFilesHere";
+import { FileDropArea } from "~/components/FileDropArea";
 
 interface EmptyViewProps {
     browseFiles: FilesRenderChildren["browseFiles"];
@@ -15,11 +15,21 @@ export const Empty = ({ browseFiles, isSearchResult }: EmptyViewProps) => {
     const { canRead } = useFileManagerApi();
 
     if (!canRead) {
-        return <NoPermission />;
+        return <NoPermissions />;
     }
+
     if (isSearchResult) {
         return <NoResults />;
     }
 
-    return <DropFilesHere empty onClick={() => browseFiles()} />;
+    return (
+        <FileDropArea
+            empty
+            onClick={() => browseFiles()}
+            title={"Drag & Drop files here"}
+            description={
+                "You can also upload files from your computer by clicking the button below"
+            }
+        />
+    );
 };
diff --git a/packages/app-file-manager/src/components/FileDetails/FileDetails.tsx b/packages/app-file-manager/src/components/FileDetails/FileDetails.tsx
index bca65f4571d..147910bc1a3 100644
--- a/packages/app-file-manager/src/components/FileDetails/FileDetails.tsx
+++ b/packages/app-file-manager/src/components/FileDetails/FileDetails.tsx
@@ -1,56 +1,38 @@
-import React, { useMemo, useRef } from "react";
+import React, { useEffect, useMemo, useRef } from "react";
 import ReactDOM from "react-dom";
 import noop from "lodash/noop";
 // @ts-expect-error This package has no types.
 import { useHotkeys } from "react-hotkeyz";
-import styled from "@emotion/styled";
+import { Drawer, Grid, OverlayLoader, Tabs } from "@webiny/admin-ui";
 import { FileItem } from "@webiny/app-admin/types";
-import { Form, FormOnSubmit } from "@webiny/form";
+import { Form, FormAPI, FormOnSubmit } from "@webiny/form";
 import { prepareFormData } from "@webiny/app-headless-cms-common";
-import { DrawerRight, DrawerContent } from "@webiny/ui/Drawer";
-import { CircularProgress } from "@webiny/ui/Progress";
-import { Cell, Grid } from "@webiny/ui/Grid";
-import { Tab, Tabs } from "@webiny/ui/Tabs";
 import { FileDetailsProvider } from "~/components/FileDetails/FileDetailsProvider";
 import { Preview } from "./components/Preview";
-import { PreviewMeta } from "./components/PreviewMeta";
 import { Actions } from "./components/Actions";
-import { Header } from "./components/Header";
-import { Elevation } from "@webiny/ui/Elevation";
 import { Content } from "./components/Content";
-import { SimpleForm } from "@webiny/app-admin/components/SimpleForm";
-import { Footer } from "./components/Footer";
 import { Extensions } from "./components/Extensions";
+import { Description } from "./components/Description";
 import { useFileModel } from "~/hooks/useFileModel";
 import { useFileManagerViewConfig } from "~/index";
 import { FileProvider } from "~/contexts/FileProvider";
 
-type FileDetailsDrawerProps = React.ComponentProps<typeof DrawerRight> & { width: string };
-
-const FileDetailsDrawer = styled(DrawerRight)<FileDetailsDrawerProps>`
-    z-index: 70;
-    &.mdc-drawer {
-        width: ${props => props.width};
-    }
-    .mdc-drawer__content {
-        overflow-y: hidden;
-    }
-    & + .mdc-drawer-scrim {
-        z-index: 65;
-    }
-`;
-
-const FormContainer = styled(SimpleForm)`
-    margin: 0;
-`;
-
 interface FileDetailsInnerProps {
     file: FileItem;
+    onForm: (form: FormAPI) => void;
     onClose: () => void;
     onSubmit: (fileData: FileItem) => void;
 }
 
-const FileDetailsInner = ({ file, ...props }: FileDetailsInnerProps) => {
+const FileDetailsInner = ({ file, onForm, ...props }: FileDetailsInnerProps) => {
+    const formRef = React.createRef<FormAPI>();
+
+    useEffect(() => {
+        if (formRef.current) {
+            onForm(formRef.current);
+        }
+    }, []);
+
     const fileModel = useFileModel();
     const { fileDetails } = useFileManagerViewConfig();
 
@@ -72,9 +54,9 @@ const FileDetailsInner = ({ file, ...props }: FileDetailsInnerProps) => {
     const basicFieldsElement = (
         <Grid>
             {fileDetails.fields.map(field => (
-                <Cell span={12} key={field.name}>
+                <Grid.Column span={12} key={field.name}>
                     {field.element}
-                </Cell>
+                </Grid.Column>
             ))}
         </Grid>
     );
@@ -83,34 +65,48 @@ const FileDetailsInner = ({ file, ...props }: FileDetailsInnerProps) => {
         extensionFields.length > 0 ? <Extensions model={fileModel} /> : null;
 
     return (
-        <Form data={file} onSubmit={onSubmit}>
+        <Form data={file} onSubmit={onSubmit} ref={formRef}>
             {() => (
-                <FormContainer>
-                    <Header />
-                    <Content>
-                        <Content.Panel flex={parseFloat(leftPanel)}>
-                            <Elevation z={2} style={{ margin: 20 }}>
-                                <Actions />
-                                <Preview />
-                                <PreviewMeta />
-                            </Elevation>
-                        </Content.Panel>
-                        <Content.Panel flex={parseFloat(rightPanel)}>
-                            {fileDetails.groupFields ? (
-                                <Tabs>
-                                    <Tab label={"Basic Details"}>{basicFieldsElement}</Tab>
-                                    <Tab label={"Advanced Details"}>{extensionFieldsElement}</Tab>
-                                </Tabs>
-                            ) : (
-                                <>
-                                    {basicFieldsElement}
-                                    {extensionFieldsElement}
-                                </>
-                            )}
-                        </Content.Panel>
-                    </Content>
-                    <Footer />
-                </FormContainer>
+                <Content>
+                    <Content.Panel flex={parseFloat(leftPanel)}>
+                        <div
+                            className={
+                                "wby-flex wby-flex-col wby-justify-between wby-gap-md wby-h-full wby-px-lg wby-py-md"
+                            }
+                        >
+                            <Actions />
+                            <Preview />
+                        </div>
+                    </Content.Panel>
+                    <Content.Panel flex={parseFloat(rightPanel)}>
+                        {fileDetails.groupFields ? (
+                            <Tabs
+                                size={"md"}
+                                spacing={"lg"}
+                                separator={true}
+                                tabs={[
+                                    <Tabs.Tab
+                                        key={"basic-details"}
+                                        value={"basic-details"}
+                                        trigger={"Basic details"}
+                                        content={basicFieldsElement}
+                                    />,
+                                    <Tabs.Tab
+                                        key={"advanced-details"}
+                                        value={"advanced-details"}
+                                        trigger={"Advanced details"}
+                                        content={extensionFieldsElement}
+                                    />
+                                ]}
+                            />
+                        ) : (
+                            <div className={"wby-p-lg"}>
+                                {basicFieldsElement}
+                                <div className={"wby-mt-lg"}>{extensionFieldsElement}</div>
+                            </div>
+                        )}
+                    </Content.Panel>
+                </Content>
             )}
         </Form>
     );
@@ -154,7 +150,7 @@ export const FileDetails = ({
     onSetFile = noop
 }: FileDetailsProps) => {
     useHotkeys({
-        zIndex: 55,
+        zIndex: 50,
         disabled: !open,
         keys: {
             esc: onClose
@@ -165,26 +161,47 @@ export const FileDetails = ({
 
     const drawerWidth = fileDetails.width.split(",")[0];
 
+    const formRef = useRef<FormAPI | null>(null);
+
     return (
         <FileDetailsPortal>
-            <FileDetailsDrawer
-                width={drawerWidth}
-                modal
-                open={open}
-                onClose={onClose}
-                data-testid={"fm.file-details.drawer"}
-            >
-                <DrawerContent>
-                    {loading && <CircularProgress label={loading} />}
-                    {file && (
-                        <FileProvider file={file}>
-                            <FileDetailsProvider hideFileDetails={onClose} onSetFile={onSetFile}>
-                                <FileDetailsInner file={file} onClose={onClose} onSubmit={onSave} />
-                            </FileDetailsProvider>
-                        </FileProvider>
-                    )}
-                </DrawerContent>
-            </FileDetailsDrawer>
+            {file && (
+                <FileProvider file={file}>
+                    <Drawer
+                        title={file.name}
+                        description={<Description />}
+                        width={drawerWidth}
+                        open={open}
+                        modal={true}
+                        bodyPadding={false}
+                        headerSeparator={true}
+                        footerSeparator={true}
+                        onClose={onClose}
+                        data-testid={"fm.file-details.drawer"}
+                        actions={
+                            <>
+                                <Drawer.CancelButton text={"Cancel"} />
+                                <Drawer.ConfirmButton
+                                    text={"Update"}
+                                    onClick={() => formRef.current?.submit()}
+                                />
+                            </>
+                        }
+                    >
+                        {loading && <OverlayLoader text={loading} />}
+                        <FileDetailsProvider hideFileDetails={onClose} onSetFile={onSetFile}>
+                            <FileDetailsInner
+                                onForm={form => {
+                                    formRef.current = form;
+                                }}
+                                file={file}
+                                onClose={onClose}
+                                onSubmit={onSave}
+                            />
+                        </FileDetailsProvider>
+                    </Drawer>
+                </FileProvider>
+            )}
         </FileDetailsPortal>
     );
 };
diff --git a/packages/app-file-manager/src/components/FileDetails/components/ActionButton.tsx b/packages/app-file-manager/src/components/FileDetails/components/ActionButton.tsx
index b5483f9bfa7..358bdd0ad25 100644
--- a/packages/app-file-manager/src/components/FileDetails/components/ActionButton.tsx
+++ b/packages/app-file-manager/src/components/FileDetails/components/ActionButton.tsx
@@ -1,6 +1,5 @@
 import React from "react";
-import { Tooltip } from "@webiny/ui/Tooltip";
-import { IconButton } from "@webiny/ui/Button";
+import { Button } from "@webiny/admin-ui";
 
 export interface ActionButtonProps {
     label: string;
@@ -8,17 +7,27 @@ export interface ActionButtonProps {
     onAction: () => void;
     "data-testid"?: string;
     disabled?: boolean;
+    className?: string;
 }
 
-export const ActionButton = ({ label, icon, onAction, disabled, ...props }: ActionButtonProps) => {
+export const ActionButton = ({
+    label,
+    icon,
+    onAction,
+    disabled,
+    className,
+    ...props
+}: ActionButtonProps) => {
     return (
-        <Tooltip content={<span>{label}</span>} placement={"bottom"}>
-            <IconButton
-                icon={icon}
-                onClick={onAction}
-                disabled={disabled}
-                data-testid={props["data-testid"]}
-            />
-        </Tooltip>
+        <Button
+            text={label}
+            icon={icon}
+            onClick={onAction}
+            disabled={disabled}
+            data-testid={props["data-testid"]}
+            containerClassName={className}
+            variant={"ghost"}
+            size={"sm"}
+        />
     );
 };
diff --git a/packages/app-file-manager/src/components/FileDetails/components/Actions.tsx b/packages/app-file-manager/src/components/FileDetails/components/Actions.tsx
index 559d2b06e47..69470eb606a 100644
--- a/packages/app-file-manager/src/components/FileDetails/components/Actions.tsx
+++ b/packages/app-file-manager/src/components/FileDetails/components/Actions.tsx
@@ -1,20 +1,14 @@
-import React, { Fragment } from "react";
-import styled from "@emotion/styled";
+import React from "react";
 import { useFileManagerViewConfig } from "~/index";
 
-const ActionsContainer = styled.div`
-    text-align: center;
-    border-bottom: 1px solid var(--mdc-theme-on-background);
-`;
-
 export const Actions = () => {
     const { fileDetails } = useFileManagerViewConfig();
 
     return (
-        <ActionsContainer>
+        <div className={"wby-flex wby-justify-start wby-gap-xs"}>
             {fileDetails.actions.map(action => (
-                <Fragment key={action.name}>{action.element}</Fragment>
+                <React.Fragment key={action.name}>{action.element}</React.Fragment>
             ))}
-        </ActionsContainer>
+        </div>
     );
 };
diff --git a/packages/app-file-manager/src/components/FileDetails/components/Content.tsx b/packages/app-file-manager/src/components/FileDetails/components/Content.tsx
index 3db92f52d21..820cce65d96 100644
--- a/packages/app-file-manager/src/components/FileDetails/components/Content.tsx
+++ b/packages/app-file-manager/src/components/FileDetails/components/Content.tsx
@@ -1,35 +1,42 @@
-import styled from "@emotion/styled";
 import React from "react";
+import { cn } from "@webiny/admin-ui";
 
-const Horizontal = styled.div`
-    display: flex;
-    height: calc(100vh - 160px);
-`;
+interface GrowProps {
+    flex: number;
+    className?: string;
+}
 
-const Grow = styled.div<{ flex: number }>`
-    flex: ${({ flex }) => flex};
-    overflow-y: scroll;
-    :last-of-type {
-        border-left: 1px solid var(--mdc-theme-on-background);
-    }
-`;
+const Grow = ({ flex, children, className }: React.PropsWithChildren<GrowProps>) => {
+    return (
+        <div
+            className={cn(
+                "wby-overflow-y-scroll last-of-type:wby-border-l-sm wby-border-neutral-dimmed",
+                className
+            )}
+            style={{ flex }}
+        >
+            {children}
+        </div>
+    );
+};
 
 interface ContentProps {
     children: React.ReactNode;
 }
 
 export const Content = ({ children }: ContentProps) => {
-    return <Horizontal>{children}</Horizontal>;
+    return <div className={"wby-flex wby-h-full"}>{children}</div>;
 };
 
 interface PanelProps {
     flex?: number;
     children: React.ReactNode;
+    className?: string;
 }
 
-const Panel = ({ flex, children }: PanelProps) => {
+const Panel = ({ flex, children, className }: PanelProps) => {
     return (
-        <Grow data-role={"panel"} flex={flex ?? 1}>
+        <Grow data-role={"panel"} flex={flex ?? 1} className={className}>
             {children}
         </Grow>
     );
diff --git a/packages/app-file-manager/src/components/FileDetails/components/CreatedOn.tsx b/packages/app-file-manager/src/components/FileDetails/components/CreatedOn.tsx
index ca6d392e189..78d14d8346a 100644
--- a/packages/app-file-manager/src/components/FileDetails/components/CreatedOn.tsx
+++ b/packages/app-file-manager/src/components/FileDetails/components/CreatedOn.tsx
@@ -1,33 +1,20 @@
 import React from "react";
 import dayjs from "dayjs";
-import { ReactComponent as CalendarIcon } from "@material-design-icons/svg/outlined/today.svg";
-import { Icon } from "@webiny/ui/Icon";
-import { Typography } from "@webiny/ui/Typography";
-import styled from "@emotion/styled";
+import { Icon, Text } from "@webiny/admin-ui";
+import { ReactComponent as CalendarIcon } from "@webiny/icons/today.svg";
 import { useFile } from "~/hooks/useFile";
 
-const CreatedOnWrapper = styled.div`
-    display: flex;
-    align-items: center;
-`;
-
-const InlineIcon = styled(Icon)`
-    margin-right: 5px;
-    &.mdc-button__icon {
-        display: inline;
-        fill: var(--mdc-theme-text-secondary-on-background);
-    }
-`;
-
 export const CreatedOn = () => {
     const { file } = useFile();
 
     return (
-        <CreatedOnWrapper>
-            <InlineIcon icon={<CalendarIcon />} />
-            <Typography use={"caption"} tag={"span"}>
+        <div className={"wby-flex wby-items-center wby-gap-xs"}>
+            <div>
+                <Icon icon={<CalendarIcon />} label={"Calendar icon"} color={"neutral-light"} />
+            </div>
+            <Text size={"sm"} as={"div"}>
                 {dayjs(file.createdOn).format("DD MMM YYYY [at] HH:mm")}
-            </Typography>
-        </CreatedOnWrapper>
+            </Text>
+        </div>
     );
 };
diff --git a/packages/app-file-manager/src/components/FileDetails/components/Description.tsx b/packages/app-file-manager/src/components/FileDetails/components/Description.tsx
new file mode 100644
index 00000000000..371b2f47e48
--- /dev/null
+++ b/packages/app-file-manager/src/components/FileDetails/components/Description.tsx
@@ -0,0 +1,28 @@
+import React from "react";
+import bytes from "bytes";
+import dayjs from "dayjs";
+import { useFile } from "~/hooks/useFile";
+
+const formatFileSize = (size: number) => {
+    return bytes.format(size, { unitSeparator: " " });
+};
+
+const formatDate = (date: string) => {
+    return dayjs(date).format("DD MMM YYYY, HH:mm");
+};
+
+export const Description = () => {
+    const { file } = useFile();
+
+    if (!file) {
+        return null;
+    }
+
+    return (
+        <span>
+            Type: {file.type} {" // "}
+            Size: {formatFileSize(file.size)} {" // "}
+            Upload date: {formatDate(file.createdOn)}
+        </span>
+    );
+};
diff --git a/packages/app-file-manager/src/components/FileDetails/components/Extensions.tsx b/packages/app-file-manager/src/components/FileDetails/components/Extensions.tsx
index ca5b35e3626..6dae235a25a 100644
--- a/packages/app-file-manager/src/components/FileDetails/components/Extensions.tsx
+++ b/packages/app-file-manager/src/components/FileDetails/components/Extensions.tsx
@@ -1,4 +1,3 @@
-import styled from "@emotion/styled";
 import React, { useMemo } from "react";
 import { CompositionScope } from "@webiny/app-admin";
 import { CmsModel } from "@webiny/app-headless-cms/types";
@@ -6,12 +5,6 @@ import { ModelProvider } from "@webiny/app-headless-cms/admin/components/ModelPr
 import { Fields } from "@webiny/app-headless-cms/admin/components/ContentEntryForm/Fields";
 import { Bind, BindPrefix } from "@webiny/form";
 
-const HideEmptyCells = styled.div`
-    .mdc-layout-grid__cell:empty {
-        display: none;
-    }
-`;
-
 interface ExtensionsProps {
     model: CmsModel;
 }
@@ -36,15 +29,13 @@ export const Extensions = ({ model }: ExtensionsProps) => {
         <CompositionScope name={"fm.fileDetails.extensionFields"}>
             <ModelProvider model={model}>
                 <BindPrefix name={"extensions"}>
-                    <HideEmptyCells>
-                        <Fields
-                            contentModel={model}
-                            // @ts-expect-error
-                            Bind={Bind}
-                            fields={fields}
-                            layout={layout}
-                        />
-                    </HideEmptyCells>
+                    <Fields
+                        contentModel={model}
+                        // @ts-expect-error
+                        Bind={Bind}
+                        fields={fields}
+                        layout={layout}
+                    />
                 </BindPrefix>
             </ModelProvider>
         </CompositionScope>
diff --git a/packages/app-file-manager/src/components/FileDetails/components/Flex.tsx b/packages/app-file-manager/src/components/FileDetails/components/Flex.tsx
deleted file mode 100644
index ea33b5c2098..00000000000
--- a/packages/app-file-manager/src/components/FileDetails/components/Flex.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import styled from "@emotion/styled";
-import React from "react";
-
-const Row = styled.div`
-    display: flex;
-    flex-direction: row;
-`;
-
-const Column = styled.div`
-    flex-grow: 1;
-`;
-
-export const FlexRow = ({ children }: { children: React.ReactNode }) => {
-    return <Row>{children}</Row>;
-};
-
-export const FlexColumn = ({ children }: { children: React.ReactNode }) => {
-    return <Column>{children}</Column>;
-};
diff --git a/packages/app-file-manager/src/components/FileDetails/components/Footer.tsx b/packages/app-file-manager/src/components/FileDetails/components/Footer.tsx
deleted file mode 100644
index 0db290326a5..00000000000
--- a/packages/app-file-manager/src/components/FileDetails/components/Footer.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import React from "react";
-import styled from "@emotion/styled";
-import { SimpleFormFooter } from "@webiny/app-admin/components/SimpleForm";
-import { ButtonDefault, ButtonPrimary } from "@webiny/ui/Button";
-import { useForm } from "@webiny/form";
-import { useFileDetails } from "~/hooks/useFileDetails";
-
-const SimpleFormFooterStyled = styled(SimpleFormFooter)`
-    justify-content: flex-end;
-`;
-
-export const Footer = () => {
-    const { close } = useFileDetails();
-    const form = useForm();
-
-    return (
-        <SimpleFormFooterStyled>
-            <ButtonDefault onClick={close}>Cancel</ButtonDefault>
-            <ButtonPrimary onClick={form.submit}>Save File</ButtonPrimary>
-        </SimpleFormFooterStyled>
-    );
-};
diff --git a/packages/app-file-manager/src/components/FileDetails/components/Header.tsx b/packages/app-file-manager/src/components/FileDetails/components/Header.tsx
deleted file mode 100644
index 3268b95755a..00000000000
--- a/packages/app-file-manager/src/components/FileDetails/components/Header.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from "react";
-import styled from "@emotion/styled";
-import { ReactComponent as CloseIcon } from "@material-design-icons/svg/outlined/close.svg";
-import { IconButton } from "@webiny/ui/Button";
-import { SimpleFormHeader } from "@webiny/app-admin/components/SimpleForm";
-import { useFileDetails } from "~/hooks/useFileDetails";
-
-const CloseButton = styled(IconButton)`
-    position: absolute;
-    top: 15px;
-`;
-
-export const Header = () => {
-    const { close } = useFileDetails();
-
-    return (
-        <SimpleFormHeader title={"File details"}>
-            <CloseButton icon={<CloseIcon />} onClick={close} />
-        </SimpleFormHeader>
-    );
-};
diff --git a/packages/app-file-manager/src/components/FileDetails/components/Preview.tsx b/packages/app-file-manager/src/components/FileDetails/components/Preview.tsx
index 6cef2ea230c..f019a9872d8 100644
--- a/packages/app-file-manager/src/components/FileDetails/components/Preview.tsx
+++ b/packages/app-file-manager/src/components/FileDetails/components/Preview.tsx
@@ -1,24 +1,19 @@
 import React from "react";
 import { Thumbnail } from "./Thumbnail";
-import styled from "@emotion/styled";
-
-const PreviewContainer = styled.div`
-    height: calc(100vh - 285px);
-    background: repeating-conic-gradient(#efefef 0% 25%, transparent 0% 50%) 50%/25px 25px;
-    display: flex;
-    width: auto;
-    align-items: center;
-    justify-content: center;
-    > img {
-        max-width: 400px;
-        max-height: calc(100vh - 350px);
-    }
-`;
+import { cn } from "@webiny/admin-ui";
 
 export const Preview = () => {
     return (
-        <PreviewContainer>
-            <Thumbnail />
-        </PreviewContainer>
+        <div className={"wby-h-full wby-w-full"}>
+            <div
+                className={cn([
+                    "wby-flex wby-items-center wby-justify-center",
+                    "wby-w-full wby-aspect-square wby-rounded-lg wby-bg-neutral-dimmed",
+                    "wby-overflow-hidden"
+                ])}
+            >
+                <Thumbnail />
+            </div>
+        </div>
     );
 };
diff --git a/packages/app-file-manager/src/components/FileDetails/components/PreviewMeta.tsx b/packages/app-file-manager/src/components/FileDetails/components/PreviewMeta.tsx
deleted file mode 100644
index 4baa2bdcace..00000000000
--- a/packages/app-file-manager/src/components/FileDetails/components/PreviewMeta.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from "react";
-import styled from "@emotion/styled";
-import { TypeAndSize } from "./TypeAndSize";
-import { CreatedOn } from "./CreatedOn";
-
-const PreviewMetaWrapper = styled.div`
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 5px;
-    border-top: 1px solid var(--mdc-theme-on-background);
-`;
-
-export const PreviewMeta = () => {
-    return (
-        <PreviewMetaWrapper>
-            <TypeAndSize />
-            <CreatedOn />
-        </PreviewMetaWrapper>
-    );
-};
diff --git a/packages/app-file-manager/src/components/FileDetails/components/TypeAndSize.tsx b/packages/app-file-manager/src/components/FileDetails/components/TypeAndSize.tsx
deleted file mode 100644
index d1f33b4c989..00000000000
--- a/packages/app-file-manager/src/components/FileDetails/components/TypeAndSize.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import React, { useMemo } from "react";
-import bytes from "bytes";
-import styled from "@emotion/styled";
-import { ReactComponent as ImageIcon } from "@material-design-icons/svg/outlined/insert_photo.svg";
-import { ReactComponent as FileIcon } from "@material-design-icons/svg/outlined/insert_drive_file.svg";
-import { Icon } from "@webiny/ui/Icon";
-import { Typography } from "@webiny/ui/Typography";
-import { useFile } from "~/hooks/useFile";
-
-const TypeAndSizeWrapper = styled.div`
-    display: flex;
-    align-items: center;
-`;
-
-const InlineIcon = styled(Icon)`
-    margin-right: 5px;
-    &.mdc-button__icon {
-        display: inline;
-        fill: var(--mdc-theme-text-secondary-on-background);
-    }
-`;
-
-export const TypeAndSize = () => {
-    const { file } = useFile();
-
-    const fileTypeIcon = useMemo(() => {
-        if (file && typeof file.type === "string") {
-            return file.type.includes("image") ? <ImageIcon /> : <FileIcon />;
-        }
-        return <ImageIcon />;
-    }, [file]);
-
-    return (
-        <TypeAndSizeWrapper>
-            <InlineIcon icon={fileTypeIcon} />
-            <Typography use={"caption"}>{file.type}</Typography>
-            <span>&nbsp;-&nbsp;</span>
-            <Typography use={"caption"} tag={"span"}>
-                {bytes.format(file.size, {
-                    unitSeparator: " "
-                })}
-            </Typography>
-        </TypeAndSizeWrapper>
-    );
-};
diff --git a/packages/app-file-manager/src/components/FileDropArea/FileDropArea.tsx b/packages/app-file-manager/src/components/FileDropArea/FileDropArea.tsx
new file mode 100644
index 00000000000..2b400e01d55
--- /dev/null
+++ b/packages/app-file-manager/src/components/FileDropArea/FileDropArea.tsx
@@ -0,0 +1,101 @@
+import React from "react";
+import { Button, cn, Heading, Text } from "@webiny/admin-ui";
+import { ReactComponent as UploadFileIcon } from "@webiny/icons/file_upload.svg";
+import { ReactComponent as UploadIcon } from "@webiny/icons/cloud_upload.svg";
+
+interface DropAreaContainerProps {
+    empty?: boolean;
+    children: React.ReactNode;
+}
+
+const DropAreaContainer = ({ empty, children }: DropAreaContainerProps) => (
+    <div
+        className={cn([
+            "wby-w-full wby-h-full wby-p-lg wby-flex wby-items-center wby-justify-center",
+            empty ? "wby-bg-neutral-base" : "wby-pt-xxl wby-bg-neutral-xstrong/20"
+        ])}
+    >
+        {children}
+    </div>
+);
+
+interface DropAreaBoxProps {
+    empty?: boolean;
+    children: React.ReactNode;
+}
+
+const DropAreaBox = ({ children, empty }: DropAreaBoxProps) => (
+    <div
+        style={{
+            width: "650px",
+            height: "400px",
+            ...(empty
+                ? {
+                      backgroundImage: `url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='24' ry='24' stroke='%23E7E7E7FF' stroke-width='4' stroke-dasharray='12' stroke-dashoffset='35' stroke-linecap='square'/%3e%3c/svg%3e")`
+                  }
+                : {})
+        }}
+        className={cn([
+            "-wby-translate-y-xl",
+            "wby-flex wby-flex-col wby-items-center wby-justify-center wby-gap-lg",
+            "wby-p-lg wby-rounded-3xl",
+            "wby-bg-neutral-base",
+            !empty && "wby-shadow-md"
+        ])}
+    >
+        {children}
+    </div>
+);
+
+interface DropAreaContentProps {
+    empty?: boolean;
+    title?: string;
+    description?: string;
+}
+
+const DropAreaContent = ({ title, description }: DropAreaContentProps) => (
+    <div className={"wby-flex wby-flex-col wby-items-center wby-justify-center wby-gap-sm"}>
+        <div className={"wby-fill-neutral-strong"}>
+            <UploadIcon width={75} height={75} />
+        </div>
+        <div className={"wby-text-center"}>
+            {title && (
+                <Heading level={4} className={"wby-text-neutral-strong"}>
+                    {title}
+                </Heading>
+            )}
+            {description && (
+                <Text as={"div"} style={{ width: "300px" }} className={"wby-text-neutral-strong"}>
+                    {description}
+                </Text>
+            )}
+        </div>
+    </div>
+);
+
+interface DropAreaButtonProps {
+    onClick?: (event?: React.MouseEvent<HTMLElement>) => void;
+}
+
+const DropAreaButton = ({ onClick }: DropAreaButtonProps) => (
+    <div>
+        <Button onClick={onClick} text={"Upload files"} icon={<UploadFileIcon />} />
+    </div>
+);
+
+export interface FileDropAreaProps {
+    empty?: boolean;
+    onClick?: (event?: React.MouseEvent<HTMLElement>) => void;
+    title?: string;
+    description?: string;
+    icon?: React.ReactElement;
+}
+
+export const FileDropArea = ({ title, description, empty, onClick }: FileDropAreaProps) => (
+    <DropAreaContainer empty={empty}>
+        <DropAreaBox empty={empty}>
+            <DropAreaContent title={title} description={description} />
+            {empty && <DropAreaButton onClick={onClick} />}
+        </DropAreaBox>
+    </DropAreaContainer>
+);
diff --git a/packages/app-file-manager/src/components/FileDropArea/index.tsx b/packages/app-file-manager/src/components/FileDropArea/index.tsx
new file mode 100644
index 00000000000..1e721ad3dfe
--- /dev/null
+++ b/packages/app-file-manager/src/components/FileDropArea/index.tsx
@@ -0,0 +1 @@
+export * from "./FileDropArea";
diff --git a/packages/app-file-manager/src/components/FileDropPlaceholder/FileDropPlaceholder.tsx b/packages/app-file-manager/src/components/FileDropPlaceholder/FileDropPlaceholder.tsx
new file mode 100644
index 00000000000..6def06b5db8
--- /dev/null
+++ b/packages/app-file-manager/src/components/FileDropPlaceholder/FileDropPlaceholder.tsx
@@ -0,0 +1,17 @@
+import React from "react";
+import { FileDropArea } from "../FileDropArea";
+
+export const FileDropPlaceholder = () => {
+    return (
+        <div
+            className={
+                "wby-absolute wby-top-0 wby-left-0 wby-bottom-0 wby-right-0 wby-animate-in wby-fade-in wby-duration-300"
+            }
+        >
+            <FileDropArea
+                title={"Drop files here"}
+                description={"Upload files from your computer by dropping them here"}
+            />
+        </div>
+    );
+};
diff --git a/packages/app-file-manager/src/components/FileDropPlaceholder/index.ts b/packages/app-file-manager/src/components/FileDropPlaceholder/index.ts
new file mode 100644
index 00000000000..87992ef4922
--- /dev/null
+++ b/packages/app-file-manager/src/components/FileDropPlaceholder/index.ts
@@ -0,0 +1 @@
+export * from "./FileDropPlaceholder";
diff --git a/packages/app-file-manager/src/modules/FileManagerRenderer/FileManagerView/components/Filters.tsx b/packages/app-file-manager/src/components/Filters/Filters.tsx
similarity index 100%
rename from packages/app-file-manager/src/modules/FileManagerRenderer/FileManagerView/components/Filters.tsx
rename to packages/app-file-manager/src/components/Filters/Filters.tsx
diff --git a/packages/app-file-manager/src/components/Filters/index.ts b/packages/app-file-manager/src/components/Filters/index.ts
new file mode 100644
index 00000000000..f5a9d59fa71
--- /dev/null
+++ b/packages/app-file-manager/src/components/Filters/index.ts
@@ -0,0 +1 @@
+export * from "./Filters";
diff --git a/packages/app-file-manager/src/components/Grid/ActionButton.tsx b/packages/app-file-manager/src/components/Grid/ActionButton.tsx
index 1d0c501e43a..0c298292d3f 100644
--- a/packages/app-file-manager/src/components/Grid/ActionButton.tsx
+++ b/packages/app-file-manager/src/components/Grid/ActionButton.tsx
@@ -1,20 +1,28 @@
 import React from "react";
-import { IconButton } from "@webiny/ui/Button";
+import { IconButton, Tooltip } from "@webiny/admin-ui";
 
 export interface ActionButtonProps {
     icon: JSX.Element;
+    label?: string;
     onAction: () => void;
     "data-testid"?: string;
     disabled?: boolean;
 }
 
-export const ActionButton = ({ icon, onAction, disabled, ...props }: ActionButtonProps) => {
+export const ActionButton = ({ icon, label, onAction, disabled, ...props }: ActionButtonProps) => {
     return (
-        <IconButton
-            icon={icon}
-            onClick={onAction}
-            disabled={disabled}
-            data-testid={props["data-testid"]}
+        <Tooltip
+            content={label ?? "Custom action"}
+            trigger={
+                <IconButton
+                    variant={"tertiary"}
+                    size={"sm"}
+                    icon={icon}
+                    onClick={onAction}
+                    disabled={disabled}
+                    data-testid={props["data-testid"]}
+                />
+            }
         />
     );
 };
diff --git a/packages/app-file-manager/src/components/Grid/File.tsx b/packages/app-file-manager/src/components/Grid/File.tsx
index f9459ed9b8c..bf4eb08ebc5 100644
--- a/packages/app-file-manager/src/components/Grid/File.tsx
+++ b/packages/app-file-manager/src/components/Grid/File.tsx
@@ -5,24 +5,9 @@ import React, { Fragment } from "react";
 // @ts-expect-error
 import LazyLoad from "react-lazy-load";
 import { makeDecoratable } from "@webiny/app-admin";
-import { TimeAgo } from "@webiny/ui/TimeAgo";
-import { Typography } from "@webiny/ui/Typography";
-
-import { ReactComponent as SelectedMarker } from "@material-design-icons/svg/filled/check_circle.svg";
-
-import { FileItem } from "@webiny/app-admin/types";
-
-import {
-    FileBody,
-    FileClickable,
-    FileInfoIcon,
-    FileControls,
-    FileSelectedMarker,
-    FileLabel,
-    FilePreview,
-    FileWrapper
-} from "./styled";
+import { Text, TimeAgo, cn, CheckboxPrimitive } from "@webiny/admin-ui";
 import { useFileManagerViewConfig } from "~/modules/FileManagerRenderer/FileManagerView/FileManagerViewConfig";
+import { FileItem } from "@webiny/app-admin/types";
 
 export interface FileProps {
     file: FileItem;
@@ -34,66 +19,107 @@ export interface FileProps {
     children: React.ReactNode;
 }
 
-export type DefaultFileBodyProps = Pick<FileProps, "selected" | "onSelect" | "children">;
+export type DefaultFileControlsProps = Pick<FileProps, "selected" | "onSelect">;
 
-const DefaultFileBody = ({ selected, onSelect, children }: DefaultFileBodyProps) => {
+const DefaultFileControls = ({ onSelect, selected }: DefaultFileControlsProps) => {
     const { browser } = useFileManagerViewConfig();
-
     const { itemActions } = browser.grid;
 
     return (
         <>
-            <FileControls>
-                <FileInfoIcon>
-                    {itemActions.map(action => {
-                        return <Fragment key={action.name}>{action.element}</Fragment>;
-                    })}
-                </FileInfoIcon>
-                {onSelect ? (
-                    <FileSelectedMarker className={selected ? "selected" : ""} onClick={onSelect}>
-                        <div>
-                            <SelectedMarker />
-                        </div>
-                    </FileSelectedMarker>
-                ) : null}
-            </FileControls>
-            <LazyLoad height={200} offsetVertical={300}>
-                <FilePreview
-                    data-testid={"fm-file-wrapper-file-preview"}
-                    className={selected ? "selected" : ""}
+            {onSelect ? (
+                <div
+                    className={cn([
+                        "wby-p-xs wby-rounded-md",
+                        "wby-bg-neutral-base/30",
+                        "wby-absolute wby-top-sm wby-left-sm",
+                        selected ? "wby-visible" : "wby-invisible group-hover:wby-visible"
+                    ])}
                 >
-                    <FileClickable />
-                    {children}
-                </FilePreview>
-            </LazyLoad>
+                    <CheckboxPrimitive
+                        onClick={onSelect}
+                        checked={selected}
+                        onChange={() => void 0}
+                    />
+                </div>
+            ) : null}
+            <div
+                className={cn([
+                    "wby-invisible group-hover:wby-visible",
+                    "wby-flex wby-items-center wby-gap-xxs",
+                    "wby-p-xs",
+                    "wby-absolute wby-top-xs-plus wby-right-xs-plus"
+                ])}
+            >
+                {itemActions.map(action => {
+                    return <Fragment key={action.name}>{action.element}</Fragment>;
+                })}
+            </div>
         </>
     );
 };
 
+export type DefaultFileBodyProps = Pick<FileProps, "selected" | "onSelect" | "children">;
+
+const DefaultFileBody = ({ selected, onSelect, children }: DefaultFileBodyProps) => {
+    return (
+        <div className={"wby-relative"}>
+            <DefaultFileControls selected={selected} onSelect={onSelect} />
+            <LazyLoad
+                height={150}
+                offsetVertical={300}
+                data-testid={"fm-file-wrapper-file-preview"}
+                className={cn([
+                    "wby-bg-neutral-muted",
+                    "wby-flex wby-items-center wby-justify-center",
+                    "wby-text-neutral-strong wby-text-sm"
+                ])}
+            >
+                {children}
+            </LazyLoad>
+        </div>
+    );
+};
+
+type DefaultFileLabelProps = Pick<FileProps, "file">;
+
+const DefaultFileLabel = ({ file }: DefaultFileLabelProps) => {
+    return (
+        <div className={"wby-px-md wby-py-sm-extra"} data-testid={"fm-file-wrapper-file-label"}>
+            <Text size={"sm"} as={"div"} className={"wby-truncate wby-text-neutral-primary"}>
+                {file.name}
+            </Text>
+            <Text size={"sm"} as={"div"} className={"wby-truncate wby-text-neutral-dimmed"}>
+                {file.type} / <TimeAgo datetime={file.createdOn} />
+            </Text>
+        </div>
+    );
+};
+
 export const File = makeDecoratable(
     "File",
     ({ file, fileBody, selected, onSelect, children }: FileProps) => {
         return (
-            <FileWrapper data-testid={"fm-list-wrapper-file"} data-file-id={file.id}>
-                <FileBody>
-                    {fileBody ?? (
-                        <DefaultFileBody selected={selected} onSelect={onSelect}>
-                            {children}
-                        </DefaultFileBody>
-                    )}
-                </FileBody>
-                <FileLabel data-testid={"fm-file-wrapper-file-label"}>
-                    <Typography className="type" use={"overline"} tag={"span"}>
-                        {file.type}
-                    </Typography>
-                    <Typography className="name" use={"body2"} tag={"span"}>
-                        {file.name}
-                    </Typography>
-                    <Typography className="createdOn" use={"caption"} tag={"span"}>
-                        <TimeAgo datetime={file.createdOn} />
-                    </Typography>
-                </FileLabel>
-            </FileWrapper>
+            <div
+                className={cn([
+                    "wby-group",
+                    "wby-bg-neutral-base wby-rounded-lg",
+                    "wby-shadow-sm hover:wby-shadow-lg",
+                    "wby-border-sm wby-border-solid wby-border-neutral-base hover:wby-border-neutral-dimmed-darker",
+                    selected && "wby-ring-md wby-ring-primary-strong",
+                    "wby-transition-shadow wby-duration-250 wby-ease-in-out",
+                    "wby-overflow-hidden"
+                ])}
+                data-testid={"fm-list-wrapper-file"}
+                data-file-id={file.id}
+            >
+                {fileBody ?? (
+                    <DefaultFileBody selected={selected} onSelect={onSelect}>
+                        {children}
+                    </DefaultFileBody>
+                )}
+                <DefaultFileLabel file={file} />
+            </div>
         );
     }
 );
diff --git a/packages/app-file-manager/src/components/Grid/Grid.tsx b/packages/app-file-manager/src/components/Grid/Grid.tsx
index b64e79044a3..2830fa6f357 100644
--- a/packages/app-file-manager/src/components/Grid/Grid.tsx
+++ b/packages/app-file-manager/src/components/Grid/Grid.tsx
@@ -1,13 +1,12 @@
 import React, { useMemo } from "react";
-import { FolderGrid } from "@webiny/app-aco";
+import { cn, OverlayLoader } from "@webiny/admin-ui";
+import { FolderGridItem, FolderProvider } from "@webiny/app-aco";
 import { i18n } from "@webiny/app/i18n";
-import { CircularProgress } from "@webiny/ui/Progress";
-import { File } from "./File";
-import { FileList, FolderList } from "./styled";
 import { FolderItem } from "@webiny/app-aco/types";
 import { FileItem } from "@webiny/app-admin/types";
-import { Thumbnail } from "./Thumbnail";
 import { FileProvider } from "~/contexts/FileProvider";
+import { Thumbnail } from "../Thumbnail";
+import { File } from "./File";
 
 const t = i18n.ns("app-admin/file-manager/components/grid");
 
@@ -23,6 +22,7 @@ interface GridProps {
     onChange?: (file: FileItem) => void;
     onClose?: () => void;
     hasOnSelectCallback: boolean;
+    displaySubFolders?: boolean;
 }
 
 export const Grid = ({
@@ -36,10 +36,15 @@ export const Grid = ({
     toggleSelected,
     deselectAll,
     multiple,
-    hasOnSelectCallback
+    hasOnSelectCallback,
+    displaySubFolders = true
 }: GridProps) => {
     if (loading) {
-        return <CircularProgress label={t`Loading Files...`} style={{ opacity: 1 }} />;
+        return (
+            <div className={"wby-relative wby-size-full"}>
+                <OverlayLoader text={t`Loading files...`} size={"lg"} />
+            </div>
+        );
     }
 
     const onSelect = useMemo(() => {
@@ -63,11 +68,20 @@ export const Grid = ({
     }, [onChange]);
 
     return (
-        <>
-            <FolderList>
-                <FolderGrid folders={folders} onFolderClick={onFolderClick} />
-            </FolderList>
-            <FileList onClick={deselectAll}>
+        <div
+            className={cn(["wby-p-lg", "wby-grid wby-gap-md wby-grid"])}
+            style={{
+                gridTemplateColumns: "repeat(auto-fill, minmax(200px, 1fr))"
+            }}
+            onClick={deselectAll}
+        >
+            <>
+                {displaySubFolders &&
+                    folders.map(folder => (
+                        <FolderProvider folder={folder} key={folder.id}>
+                            <FolderGridItem onClick={onFolderClick} />
+                        </FolderProvider>
+                    ))}
                 {records.map(record => (
                     <FileProvider file={record} key={record.id}>
                         <File
@@ -80,7 +94,7 @@ export const Grid = ({
                         </File>
                     </FileProvider>
                 ))}
-            </FileList>
-        </>
+            </>
+        </div>
     );
 };
diff --git a/packages/app-file-manager/src/components/Grid/styled.tsx b/packages/app-file-manager/src/components/Grid/styled.tsx
deleted file mode 100644
index e4e9f7e929f..00000000000
--- a/packages/app-file-manager/src/components/Grid/styled.tsx
+++ /dev/null
@@ -1,217 +0,0 @@
-import styled from "@emotion/styled";
-
-export const FolderList = styled("div")`
-    margin: 16px;
-`;
-
-export const FileList = styled("div")`
-    display: grid;
-    /* define the number of grid columns */
-    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-    column-gap: 16px;
-    row-gap: 16px;
-    margin: 16px;
-`;
-
-const COMPONENT_WIDTH = 200;
-const COMPONENT_HEIGHT = 200;
-
-export const FileBody = styled("div")`
-    transition: 200ms ease-in opacity;
-    width: ${COMPONENT_WIDTH}px;
-    height: ${COMPONENT_HEIGHT}px;
-    overflow: hidden;
-`;
-
-export const FileControls = styled("div")`
-    opacity: 1;
-    position: absolute;
-    top: -25px;
-    right: 0;
-    z-index: 10;
-    transition: all 150ms ease-out;
-    width: 100%;
-    height: 200px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-`;
-
-export const FileSelectedMarker = styled("div")`
-    position: absolute;
-    z-index: 9;
-    width: 100%;
-    height: 100%;
-    cursor: pointer;
-    > div {
-        width: 32px;
-        height: 32px;
-        position: absolute;
-        right: 0;
-        top: 24px;
-        padding: 2px;
-        margin: 5px;
-        background-color: var(--mdc-theme-surface);
-        box-shadow: 0px 0px 4px var(--mdc-theme-on-background);
-        border-radius: 50%;
-        border: 1px solid var(--mdc-theme-on-background);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        cursor: pointer;
-        opacity: 0.95;
-    }
-    svg {
-        transition: all 150ms ease-out;
-        fill: var(--mdc-theme-text-secondary-on-background);
-        width: 32px;
-        height: 32px;
-        opacity: 0.35;
-        scale: 0.8;
-    }
-    &:hover {
-        svg {
-            opacity: 0.9;
-            scale: 0.9;
-        }
-    }
-    &.selected {
-        > div {
-            background-color: var(--mdc-theme-primary);
-        }
-        svg {
-            opacity: 1;
-            scale: 1;
-            fill: var(--mdc-theme-surface);
-        }
-    }
-`;
-
-export const FileInfoIcon = styled("div")`
-    display: flex;
-    & button {
-        transition: all 150ms ease-out;
-        top: 50px;
-        opacity: 0;
-        padding: 0;
-        svg {
-            border: 1px solid var(--mdc-theme-on-background);
-            border-radius: 50%;
-            background-color: var(--mdc-theme-surface);
-            padding: 10px;
-
-            transition: all 150ms ease-out;
-            color: var(--mdc-theme-text-primary-on-background);
-            scale: 0.7;
-            &:hover {
-                scale: 1;
-            }
-        }
-        &:nth-of-type(1) {
-            transition-delay: 0ms;
-        }
-        &:nth-of-type(2) {
-            transition-delay: 50ms;
-        }
-        &:nth-of-type(3) {
-            transition-delay: 100ms;
-        }
-    }
-`;
-
-export const FilePreview = styled("div")`
-    text-align: center;
-    position: relative;
-    background: repeating-conic-gradient(var(--mdc-theme-surface) 0% 25%, transparent 0% 50%) 50%/18px
-        18px;
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-    display: flex;
-    object-fit: cover;
-    justify-content: center;
-    align-items: center;
-    display: flex;
-    svg,
-    img {
-        width: 100%;
-        height: 100%;
-        max-height: 210px;
-        max-width: 210px;
-        object-fit: contain;
-        box-sizing: border-box;
-        transition: all 150ms ease-out;
-    }
-    svg {
-        fill: var(--mdc-theme-text-secondary-on-background);
-    }
-    &.selected {
-        img,
-        svg {
-            background-color: rgba(255, 255, 255, 0.6);
-            padding: 10px;
-            border-radius: 2px;
-            scale: 0.8;
-            box-shadow: 2px 2px 4px var(--mdc-theme-on-background);
-            border: 2px solid var(--mdc-theme-primary);
-        }
-    }
-`;
-
-export const FileClickable = styled("div")`
-    position: absolute;
-    top: 30px;
-    left: 0;
-    width: 100%;
-    height: 170px;
-    z-index: 2;
-`;
-
-export const FileLabel = styled("div")`
-    padding: 25px 10px 15px 10px;
-    color: var(--mdc-theme-on-surface);
-    background-color: var(--mdc-theme-on-background);
-    span {
-        display: block;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        line-height: 1.5;
-        &.type {
-            font-size: 0.7em;
-        }
-        &.name {
-            font-size: 0.8em;
-            font-weight: 600;
-        }
-    }
-`;
-
-export const FileWrapper = styled("div")`
-    display: inline-block;
-    float: left;
-    position: relative;
-    z-index: 1;
-    width: 100%;
-    max-width: ${COMPONENT_WIDTH}px;
-    border: 1px solid var(--mdc-theme-on-background);
-    border-radius: 2px;
-    overflow: hidden;
-    box-shadow: 0 1px 3px var(--mdc-theme-on-background);
-
-    &:hover ${FileControls} {
-        opacity: 1;
-        button {
-            opacity: 1;
-            top: 125px;
-            width: 100%;
-            svg {
-                fill: var(--mdc-theme-primary);
-            }
-            span.mdc-button__label > span {
-                display: inline-block;
-                width: 75px;
-            }
-        }
-    }
-`;
diff --git a/packages/app-file-manager/src/components/Header/Actions.tsx b/packages/app-file-manager/src/components/Header/Actions.tsx
new file mode 100644
index 00000000000..bdcd822b603
--- /dev/null
+++ b/packages/app-file-manager/src/components/Header/Actions.tsx
@@ -0,0 +1,123 @@
+import React, { useCallback } from "react";
+import { Button, type ButtonProps, IconButton, Tooltip } from "@webiny/admin-ui";
+import { useCreateDialog } from "@webiny/app-aco";
+import { ReactComponent as AddIcon } from "@webiny/icons/add.svg";
+import { ReactComponent as FileUploadIcon } from "@webiny/icons/file_upload.svg";
+import { ReactComponent as GridIcon } from "@webiny/icons/grid_on.svg";
+import { ReactComponent as TableIcon } from "@webiny/icons/format_list_bulleted.svg";
+import { useFileManagerView } from "~/modules/FileManagerRenderer/FileManagerViewProvider";
+import { useFileManagerApi } from "~/modules/FileManagerApiProvider/FileManagerApiContext";
+import type { BrowseFilesHandler, HeaderProps } from "~/components/Header/Header";
+import { FiltersToggle } from "@webiny/app-admin";
+
+type ActionsProps = Pick<HeaderProps, "browseFiles">;
+
+const FileAction = ({ browseFiles }: ActionsProps) => {
+    const view = useFileManagerView();
+    const fileManager = useFileManagerApi();
+
+    const renderUploadFileAction = useCallback(
+        ({ browseFiles }: BrowseFilesHandler) => {
+            if (!fileManager.canCreate) {
+                return null;
+            }
+            return (
+                <Button
+                    onClick={browseFiles as ButtonProps["onClick"]}
+                    size={"md"}
+                    text={"Upload"}
+                    icon={<FileUploadIcon />}
+                />
+            );
+        },
+        [fileManager.canCreate]
+    );
+
+    if (view.hasOnSelectCallback && view.selected.length > 0) {
+        return (
+            <Button
+                onClick={() => view.onChange(view.selected)}
+                size={"md"}
+                text={`Select ${view.multiple && `(${view.selected.length})`}`}
+            />
+        );
+    }
+
+    return renderUploadFileAction({
+        browseFiles
+    } as BrowseFilesHandler);
+};
+
+const FolderAction = () => {
+    const view = useFileManagerView();
+    const { showDialog: showCreateFolderDialog } = useCreateDialog();
+
+    const onCreateFolder = useCallback(() => {
+        showCreateFolderDialog({ currentParentId: view.folderId });
+    }, [view.folderId]);
+
+    return (
+        <Button
+            variant={"secondary"}
+            size={"md"}
+            onClick={onCreateFolder}
+            text={"New Folder"}
+            icon={<AddIcon />}
+            data-testid={"file-manager.create-folder-button"}
+        />
+    );
+};
+
+const LayoutSwitchAction = () => {
+    const view = useFileManagerView();
+
+    return (
+        <Tooltip
+            side={"bottom"}
+            content={view.listTable ? "Switch to Grid" : "Switch to Table"}
+            trigger={
+                <IconButton
+                    variant={"ghost"}
+                    size={"md"}
+                    icon={view.listTable ? <GridIcon /> : <TableIcon />}
+                    onClick={() => view.setListTable(!view.listTable)}
+                />
+            }
+        />
+    );
+};
+
+const ToggleFiltersAction = () => {
+    const view = useFileManagerView();
+
+    const toggleFilters = () => {
+        if (view.showingFilters) {
+            view.hideFilters();
+        } else {
+            view.showFilters();
+        }
+    };
+
+    return (
+        <FiltersToggle
+            onFiltersToggle={toggleFilters}
+            showingFilters={view.showingFilters}
+            data-testid="fm.list-entries.toggle-filters"
+        />
+    );
+};
+
+export const Actions = (props: ActionsProps) => {
+    return (
+        <div className={"wby-h-full wby-flex wby-gap-sm wby-items-center wby-justify-end"}>
+            <div className={"wby-flex wby-gap-xs"}>
+                <ToggleFiltersAction />
+                <LayoutSwitchAction />
+            </div>
+            <div className={"wby-flex wby-gap-xs"}>
+                <FileAction browseFiles={props.browseFiles} />
+                <FolderAction />
+            </div>
+        </div>
+    );
+};
diff --git a/packages/app-file-manager/src/components/Header/Header.tsx b/packages/app-file-manager/src/components/Header/Header.tsx
new file mode 100644
index 00000000000..f439416e575
--- /dev/null
+++ b/packages/app-file-manager/src/components/Header/Header.tsx
@@ -0,0 +1,32 @@
+import React from "react";
+import { FilesRenderChildren } from "react-butterfiles";
+import { Grid, Separator } from "@webiny/admin-ui";
+
+import { Actions } from "./Actions";
+import { Title } from "./Title";
+
+export interface BrowseFilesHandler {
+    browseFiles: FilesRenderChildren["browseFiles"];
+}
+
+export interface HeaderProps {
+    browseFiles: BrowseFilesHandler["browseFiles"];
+}
+
+export const Header = (props: HeaderProps) => {
+    return (
+        <div>
+            <div className={"wby-pl-lg wby-pr-md wby-py-sm-extra"}>
+                <Grid>
+                    <Grid.Column span={6}>
+                        <Title />
+                    </Grid.Column>
+                    <Grid.Column span={6}>
+                        <Actions browseFiles={props.browseFiles} />
+                    </Grid.Column>
+                </Grid>
+            </div>
+            <Separator />
+        </div>
+    );
+};
diff --git a/packages/app-file-manager/src/components/Header/Title.tsx b/packages/app-file-manager/src/components/Header/Title.tsx
new file mode 100644
index 00000000000..a61146714c3
--- /dev/null
+++ b/packages/app-file-manager/src/components/Header/Title.tsx
@@ -0,0 +1,65 @@
+import React, { useMemo } from "react";
+import { Heading, Icon, IconButton, Skeleton, Switch } from "@webiny/admin-ui";
+import { ReactComponent as HomeIcon } from "@webiny/icons/home.svg";
+import { ReactComponent as FolderIcon } from "@webiny/icons/folder.svg";
+import { ReactComponent as MoreVerticalIcon } from "@webiny/icons/more_vert.svg";
+import { useFileManagerView } from "~/modules/FileManagerRenderer/FileManagerViewProvider";
+import { FolderProvider, useAcoConfig } from "@webiny/app-aco";
+import { OptionsMenu } from "@webiny/app-admin";
+
+export const Title = () => {
+    const {
+        isRootFolder,
+        listTitle,
+        displaySubFolders,
+        setDisplaySubFolders,
+        currentFolder,
+        folders
+    } = useFileManagerView();
+    const { folder: folderConfig } = useAcoConfig();
+
+    const icon = useMemo(() => {
+        return isRootFolder ? <HomeIcon /> : <FolderIcon />;
+    }, [isRootFolder]);
+
+    return (
+        <>
+            {(listTitle && (
+                <div className={"wby-flex wby-gap-xs wby-items-center"}>
+                    <div className={"wby-flex wby-gap-sm wby-items-center wby-truncate"}>
+                        <Icon icon={icon} label={listTitle} size={"md"} color={"neutral-strong"} />
+                        <Heading level={4} as={"h1"} className={"wby-truncate"}>
+                            {listTitle}
+                        </Heading>
+                    </div>
+                    {currentFolder && (
+                        <FolderProvider folder={currentFolder}>
+                            <OptionsMenu
+                                actions={folderConfig.actions}
+                                data-testid={"folder.title.menu-action"}
+                                trigger={
+                                    <IconButton
+                                        icon={<MoreVerticalIcon />}
+                                        size={"sm"}
+                                        iconSize={"lg"}
+                                        variant={"ghost"}
+                                        disabled={isRootFolder}
+                                    />
+                                }
+                            />
+                        </FolderProvider>
+                    )}
+                    <div className={"wby-flex wby-flex-nowrap"}>
+                        <Switch
+                            label={"Display subfolders"}
+                            labelPosition={"end"}
+                            onChange={setDisplaySubFolders}
+                            checked={displaySubFolders}
+                            disabled={folders.length === 0}
+                        />
+                    </div>
+                </div>
+            )) || <Skeleton size={"xl"} />}
+        </>
+    );
+};
diff --git a/packages/app-file-manager/src/components/Header/index.ts b/packages/app-file-manager/src/components/Header/index.ts
new file mode 100644
index 00000000000..9e08a64dbfb
--- /dev/null
+++ b/packages/app-file-manager/src/components/Header/index.ts
@@ -0,0 +1 @@
+export * from "./Header";
diff --git a/packages/app-file-manager/src/components/ImageEditor/ImageEditor.tsx b/packages/app-file-manager/src/components/ImageEditor/ImageEditor.tsx
new file mode 100644
index 00000000000..400a8740a63
--- /dev/null
+++ b/packages/app-file-manager/src/components/ImageEditor/ImageEditor.tsx
@@ -0,0 +1,276 @@
+import React from "react";
+import { Button } from "@webiny/admin-ui";
+import { flip, filter, crop, rotate } from "./toolbar";
+import { ImageEditorTool, ToolbarTool } from "./toolbar/types";
+/**
+ * Package load-script does not have types.
+ */
+// @ts-expect-error
+import loadScript from "load-script";
+
+const toolbar = {
+    flip,
+    filter,
+    crop,
+    rotate
+};
+
+const initScripts = (): Promise<string> => {
+    return new Promise((resolve: any) => {
+        // @ts-expect-error
+        if (window.Caman) {
+            return resolve();
+        }
+        return loadScript(
+            "https://cdnjs.cloudflare.com/ajax/libs/camanjs/4.1.2/caman.full.min.js",
+            resolve
+        );
+    });
+};
+
+interface RenderPropArgs {
+    render: () => React.ReactNode;
+    getCanvasDataUrl: () => string;
+    activeTool: ImageEditorTool | null;
+    applyActiveTool: () => Promise<void>;
+    cancelActiveTool: () => Promise<void>;
+}
+
+interface ImageEditorPropsPropsOptions {
+    autoEnable: boolean;
+}
+
+interface ImageEditorProps {
+    src: string;
+    tools: ToolbarTool[];
+    options?: {
+        flip: ImageEditorPropsPropsOptions;
+        filter: ImageEditorPropsPropsOptions;
+        crop: ImageEditorPropsPropsOptions;
+        rotate: ImageEditorPropsPropsOptions;
+    };
+    onToolActivate?: () => void;
+    onToolDeactivate?: () => void;
+    children?: (props: RenderPropArgs) => React.ReactNode;
+}
+
+interface ImageEditorState {
+    tool: ImageEditorTool | null;
+    src: string;
+}
+
+class ImageEditor extends React.Component<ImageEditorProps, ImageEditorState> {
+    static defaultProps: Partial<ImageEditorProps> = {
+        tools: ["crop", "flip", "rotate", "filter"]
+    };
+
+    public override state: ImageEditorState = {
+        tool: null,
+        src: ""
+    };
+
+    public canvas = React.createRef<HTMLCanvasElement>();
+    public image?: HTMLImageElement;
+
+    public override componentDidMount() {
+        initScripts().then(() => {
+            this.updateCanvas();
+            setTimeout(() => {
+                const { options } = this.props;
+                if (!options || typeof options !== "object") {
+                    return;
+                }
+                for (const key in options) {
+                    const option = options[key as ToolbarTool];
+                    if (option.autoEnable === true) {
+                        const tool: ImageEditorTool | null = toolbar[key as ToolbarTool];
+                        tool && this.activateTool(tool);
+                        break;
+                    }
+                }
+            }, 250);
+        });
+    }
+
+    private readonly updateCanvas = (): void => {
+        const { src } = this.props;
+        this.image = new window.Image();
+        const canvas = this.canvas.current;
+        if (canvas) {
+            this.image.onload = () => {
+                if (this.image) {
+                    canvas.width = this.image.width;
+                    canvas.height = this.image.height;
+                    const ctx = canvas.getContext("2d") as CanvasRenderingContext2D;
+                    ctx.drawImage(this.image, 0, 0);
+                }
+            };
+
+            this.image.src = src;
+        }
+    };
+
+    private readonly activateTool = (tool: ToolbarTool | ImageEditorTool): void => {
+        if (typeof tool === "string") {
+            tool = toolbar[tool];
+        }
+
+        this.setState({ tool }, () => {
+            const tt = tool as ImageEditorTool;
+            typeof tt.onActivate === "function" &&
+                tt.onActivate({ canvas: this.canvas, options: this.getToolOptions(tt) });
+        });
+    };
+
+    private readonly deactivateTool = (): void => {
+        this.setState({
+            tool: null
+        });
+    };
+
+    public readonly getCanvasDataUrl = (): string => {
+        const canvas = this.canvas.current as HTMLCanvasElement;
+        if (canvas) {
+            const { src } = this.props;
+            if (src.startsWith("data:image/jpeg;")) {
+                return canvas.toDataURL("image/jpeg", 1.0);
+            }
+
+            return canvas.toDataURL();
+        }
+
+        return "";
+    };
+
+    private readonly applyActiveTool = async (): Promise<void> => {
+        const { tool } = this.state;
+        if (!tool) {
+            return;
+        }
+
+        if (tool.apply) {
+            await tool.apply({
+                canvas: this.canvas
+            });
+        }
+        this.deactivateTool();
+    };
+
+    private readonly cancelActiveTool = async (): Promise<void> => {
+        const { tool } = this.state;
+        if (!tool) {
+            return;
+        }
+
+        if (tool.cancel) {
+            await tool.cancel({
+                canvas: this.canvas
+            });
+        }
+        this.deactivateTool();
+    };
+
+    private readonly getToolOptions = (
+        tool: ImageEditorTool
+    ): Partial<ImageEditorPropsPropsOptions> => {
+        const { options } = this.props;
+        if (!options || typeof options !== "object") {
+            return {};
+        }
+
+        return options[tool.name as ToolbarTool] || {};
+    };
+
+    public override render(): React.ReactNode {
+        const { src, tools, children } = this.props;
+        const { tool } = this.state;
+        const editor = (
+            <>
+                <div
+                    className={"wby-flex wby-justify-center wby-items-center wby-w-full wby-mt-md"}
+                >
+                    {tools.map(key => {
+                        const tool: ImageEditorTool = toolbar[key];
+                        if (!tool) {
+                            return null;
+                        }
+
+                        return (
+                            <div
+                                key={key}
+                                className={
+                                    this.state.tool
+                                        ? "wby-opacity-50 wby-cursor wby-pointer-events-none"
+                                        : ""
+                                }
+                            >
+                                {tool.icon({
+                                    activateTool: () => this.activateTool(tool)
+                                })}
+                            </div>
+                        );
+                    })}
+                </div>
+                <div className={"wby-w-full wby-my-md"}>
+                    {tool ? (
+                        <>
+                            {typeof tool.renderForm === "function" &&
+                                tool.renderForm({
+                                    options: this.getToolOptions(tool as ImageEditorTool),
+                                    image: this.image as HTMLImageElement,
+                                    canvas: this.canvas
+                                })}
+
+                            <div className={"wby-flex wby-justify-center wby-gap-sm wby-mt-sm"}>
+                                <Button
+                                    variant={"secondary"}
+                                    text={"Cancel"}
+                                    data-testid="button-cancel"
+                                    onClick={() => {
+                                        this.cancelActiveTool();
+                                    }}
+                                />
+                                <Button
+                                    variant={"primary"}
+                                    text={"Apply"}
+                                    data-testid="button-apply"
+                                    onClick={() => {
+                                        this.applyActiveTool();
+                                    }}
+                                />
+                            </div>
+                        </>
+                    ) : (
+                        <div className={"wby-text-center"}>
+                            Select a tool to start working on your image.
+                        </div>
+                    )}
+                </div>
+
+                <div className={"wby-text-center wby-mx-auto"}>
+                    <canvas
+                        key={src}
+                        id={"canvas"}
+                        style={{ maxWidth: "100%" }}
+                        ref={this.canvas as React.Ref<any>}
+                    />
+                </div>
+            </>
+        );
+
+        if (typeof children === "function") {
+            return children({
+                render: () => editor,
+                // canvas: this.canvas,
+                getCanvasDataUrl: this.getCanvasDataUrl,
+                activeTool: this.state.tool,
+                applyActiveTool: this.applyActiveTool,
+                cancelActiveTool: this.cancelActiveTool
+            });
+        }
+
+        return editor;
+    }
+}
+
+export { ImageEditor };
diff --git a/packages/app-file-manager/src/components/ImageEditor/ImageEditorDialog.tsx b/packages/app-file-manager/src/components/ImageEditor/ImageEditorDialog.tsx
new file mode 100644
index 00000000000..58bd9014f8e
--- /dev/null
+++ b/packages/app-file-manager/src/components/ImageEditor/ImageEditorDialog.tsx
@@ -0,0 +1,60 @@
+import React, { useState } from "react";
+import { ImageEditor } from "./ImageEditor";
+import { Dialog, OverlayLoader } from "@webiny/admin-ui";
+
+interface ImageEditorDialogProps {
+    dialogZIndex?: number;
+    onClose?: () => void;
+    open?: boolean;
+    /**
+     * We would need to drill down a lot to give correct options.
+     * TODO: figure out some other way.
+     */
+    options?: any;
+    src?: string;
+    onAccept: (src: string) => void;
+    "data-testid"?: string;
+}
+
+export const ImageEditorDialog = (props: ImageEditorDialogProps) => {
+    const { src, options, onAccept, onClose, open, dialogZIndex, ...dialogProps } = props;
+    const imageEditor = React.createRef<ImageEditor>();
+    const [isSaving, setIsSaving] = useState(false);
+
+    const onSave = async () => {
+        try {
+            setIsSaving(true);
+            const url = imageEditor.current ? imageEditor.current.getCanvasDataUrl() : "";
+            await onAccept(url);
+        } catch (e) {
+            console.log(e);
+        } finally {
+            setIsSaving(false);
+        }
+    };
+
+    return (
+        <Dialog
+            style={{ zIndex: dialogZIndex }}
+            open={open}
+            onClose={onClose}
+            {...dialogProps}
+            actions={
+                <>
+                    <Dialog.CancelButton />
+                    <Dialog.ConfirmButton
+                        text={"Save"}
+                        data-testid="dialog-accept"
+                        onClick={onSave}
+                        disabled={isSaving}
+                    />
+                </>
+            }
+        >
+            {isSaving && <OverlayLoader text={"Creating a new version of the image"} />}
+            <ImageEditor ref={imageEditor} src={src} options={options}>
+                {({ render }) => render()}
+            </ImageEditor>
+        </Dialog>
+    );
+};
diff --git a/packages/app-file-manager/src/components/ImageEditor/index.ts b/packages/app-file-manager/src/components/ImageEditor/index.ts
new file mode 100644
index 00000000000..540497ede66
--- /dev/null
+++ b/packages/app-file-manager/src/components/ImageEditor/index.ts
@@ -0,0 +1 @@
+export * from "./ImageEditor";
diff --git a/packages/ui/src/ImageEditor/toolbar/crop.tsx b/packages/app-file-manager/src/components/ImageEditor/toolbar/crop.tsx
similarity index 75%
rename from packages/ui/src/ImageEditor/toolbar/crop.tsx
rename to packages/app-file-manager/src/components/ImageEditor/toolbar/crop.tsx
index eee014934dd..48e0d15d920 100644
--- a/packages/ui/src/ImageEditor/toolbar/crop.tsx
+++ b/packages/app-file-manager/src/components/ImageEditor/toolbar/crop.tsx
@@ -1,8 +1,7 @@
 import React from "react";
 import { ImageEditorTool } from "./types";
-import { ReactComponent as CropIcon } from "./icons/crop.svg";
-import { IconButton } from "~/Button";
-import { Tooltip } from "~/Tooltip";
+import { IconButton, Tooltip } from "@webiny/admin-ui";
+import { ReactComponent as CropIcon } from "@webiny/icons/crop.svg";
 import Cropper from "cropperjs";
 import "cropperjs/dist/cropper.css";
 
@@ -20,13 +19,18 @@ const tool: ImageEditorTool = {
     name: "crop",
     icon({ activateTool }) {
         return (
-            <Tooltip placement={"bottom"} content={"Crop"}>
-                <IconButton
-                    icon={<CropIcon />}
-                    onClick={() => activateTool("crop")}
-                    data-testid={"crop-item"}
-                />
-            </Tooltip>
+            <Tooltip
+                side={"bottom"}
+                content={"Crop"}
+                trigger={
+                    <IconButton
+                        variant={"ghost"}
+                        icon={<CropIcon />}
+                        onClick={() => activateTool("crop")}
+                        data-testid={"crop-item"}
+                    />
+                }
+            />
         );
     },
     renderForm,
diff --git a/packages/ui/src/ImageEditor/toolbar/filter.tsx b/packages/app-file-manager/src/components/ImageEditor/toolbar/filter.tsx
similarity index 76%
rename from packages/ui/src/ImageEditor/toolbar/filter.tsx
rename to packages/app-file-manager/src/components/ImageEditor/toolbar/filter.tsx
index 2b43b329656..7c85f3a1545 100644
--- a/packages/ui/src/ImageEditor/toolbar/filter.tsx
+++ b/packages/app-file-manager/src/components/ImageEditor/toolbar/filter.tsx
@@ -3,13 +3,10 @@
  * TODO: use some other library to edit images
  */
 import React from "react";
-import { ReactComponent as FilterIcon } from "./icons/filter.svg";
-import { Slider } from "~/Slider";
-import { ImageEditorTool } from "./types";
-import { IconButton, ButtonDefault } from "~/Button";
-import { Tooltip } from "~/Tooltip";
+import { ReactComponent as FilterIcon } from "@webiny/icons/tune.svg";
 import debounce from "lodash/debounce";
-import styled from "@emotion/styled";
+import { Button, Grid, IconButton, Slider, Tooltip } from "@webiny/admin-ui";
+import { ImageEditorTool } from "./types";
 
 interface RenderFormState {
     values: Record<string, any>;
@@ -21,20 +18,6 @@ interface RenderFormProps {
     renderApplyCancel?: () => void;
 }
 
-const Wrapper = styled("div")({
-    ul: {
-        textAlign: "center",
-        li: {
-            display: "inline-block",
-            width: 180,
-            padding: 10
-        }
-    },
-    ".buttons": {
-        textAlign: "center"
-    }
-});
-
 const sliders = [
     {
         key: "brightness",
@@ -135,16 +118,16 @@ class RenderForm extends React.Component<RenderFormProps, RenderFormState> {
 
     public override render() {
         return (
-            <Wrapper>
-                <ul>
+            <Grid>
+                <>
                     {sliders.map(props => (
-                        <li key={props.key}>
+                        <Grid.Column span={4} key={props.key}>
                             <Slider
-                                value={this.state.values[props.key]}
+                                value={Number(this.state.values[props.key])}
                                 min={0}
                                 max={100}
                                 disabled={this.state.processing}
-                                onInput={(value: string) => {
+                                onValueChange={(value: number) => {
                                     this.setState(state => {
                                         const values = { ...state.values };
                                         values[props.key] = value;
@@ -154,12 +137,13 @@ class RenderForm extends React.Component<RenderFormProps, RenderFormState> {
                                 }}
                                 {...props}
                             />
-                        </li>
+                        </Grid.Column>
                     ))}
-                </ul>
-
-                <div style={{ textAlign: "center" }}>
-                    <ButtonDefault
+                </>
+                <Grid.Column span={12} className={"wby-text-center"}>
+                    <Button
+                        text={"Reset filters"}
+                        variant={"secondary"}
                         onClick={() => {
                             this.setState({ processing: true }, () => {
                                 this.resetFiltersValues();
@@ -167,11 +151,9 @@ class RenderForm extends React.Component<RenderFormProps, RenderFormState> {
                                 this.setState({ processing: false });
                             });
                         }}
-                    >
-                        Reset filters
-                    </ButtonDefault>
-                </div>
-            </Wrapper>
+                    />
+                </Grid.Column>
+            </Grid>
         );
     }
 }
@@ -180,13 +162,17 @@ const tool: ImageEditorTool = {
     name: "filter",
     icon({ activateTool }) {
         return (
-            <Tooltip placement={"bottom"} content={"Filter"}>
-                <IconButton
-                    icon={<FilterIcon />}
-                    onClick={() => activateTool("filter")}
-                    data-testid={"filter-item"}
-                />
-            </Tooltip>
+            <Tooltip
+                trigger={
+                    <IconButton
+                        variant={"ghost"}
+                        icon={<FilterIcon />}
+                        onClick={() => activateTool("filter")}
+                        data-testid={"filter-item"}
+                    />
+                }
+                content={"Filter"}
+            />
         );
     },
     renderForm(props) {
diff --git a/packages/app-file-manager/src/components/ImageEditor/toolbar/flip.tsx b/packages/app-file-manager/src/components/ImageEditor/toolbar/flip.tsx
new file mode 100644
index 00000000000..610524b19de
--- /dev/null
+++ b/packages/app-file-manager/src/components/ImageEditor/toolbar/flip.tsx
@@ -0,0 +1,101 @@
+import React from "react";
+import { Button, IconButton, Tooltip } from "@webiny/admin-ui";
+import { ReactComponent as FlipIcon } from "@webiny/icons/flip.svg";
+import Cropper from "cropperjs";
+import "cropperjs/dist/cropper.css";
+import { ImageEditorTool } from "./types";
+
+let cropper: Cropper;
+
+const flipped = { x: 1, y: 1 };
+
+const renderForm = () => {
+    return (
+        <div className={"wby-flex wby-justify-center wby-gap-sm"}>
+            <Button
+                text={"FlipX"}
+                variant={"secondary"}
+                onClick={() => {
+                    if (!cropper) {
+                        return;
+                    }
+
+                    flipped.x = flipped.x === 1 ? -1 : 1;
+                    cropper.scaleX(flipped.x);
+                }}
+            />
+            <Button
+                text={"FlipY"}
+                variant={"secondary"}
+                onClick={() => {
+                    if (!cropper) {
+                        return;
+                    }
+
+                    flipped.y = flipped.y === 1 ? -1 : 1;
+                    cropper.scaleY(flipped.y);
+                }}
+            />
+        </div>
+    );
+};
+
+const tool: ImageEditorTool = {
+    name: "flip",
+    icon({ activateTool }) {
+        return (
+            <Tooltip
+                side={"bottom"}
+                content={"Flip"}
+                trigger={
+                    <IconButton
+                        variant={"ghost"}
+                        icon={<FlipIcon />}
+                        onClick={() => activateTool("flip")}
+                        data-testid={"flip-item"}
+                    />
+                }
+            />
+        );
+    },
+    renderForm,
+    cancel: () => cropper && cropper.destroy(),
+    onActivate: ({ canvas }) => {
+        cropper = new Cropper(canvas.current as HTMLCanvasElement, {
+            background: false,
+            modal: false,
+            guides: false,
+            dragMode: "none",
+            highlight: false,
+            autoCrop: false
+        });
+    },
+    apply: ({ canvas }) => {
+        return new Promise((resolve: any) => {
+            if (!cropper) {
+                resolve();
+                return;
+            }
+
+            const current = canvas.current;
+            const src = cropper.getCroppedCanvas().toDataURL();
+            if (current) {
+                const image = new window.Image();
+                const ctx = current.getContext("2d") as CanvasRenderingContext2D;
+                image.onload = () => {
+                    ctx.drawImage(image, 0, 0);
+                    current.width = image.width;
+                    current.height = image.height;
+
+                    ctx.drawImage(image, 0, 0);
+                    resolve();
+                };
+                image.src = src;
+            }
+
+            cropper.destroy();
+        });
+    }
+};
+
+export default tool;
diff --git a/packages/ui/src/ImageEditor/toolbar/index.ts b/packages/app-file-manager/src/components/ImageEditor/toolbar/index.ts
similarity index 100%
rename from packages/ui/src/ImageEditor/toolbar/index.ts
rename to packages/app-file-manager/src/components/ImageEditor/toolbar/index.ts
diff --git a/packages/app-file-manager/src/components/ImageEditor/toolbar/rotate.tsx b/packages/app-file-manager/src/components/ImageEditor/toolbar/rotate.tsx
new file mode 100644
index 00000000000..c9366adffe9
--- /dev/null
+++ b/packages/app-file-manager/src/components/ImageEditor/toolbar/rotate.tsx
@@ -0,0 +1,101 @@
+import React from "react";
+import { IconButton, Slider, Tooltip } from "@webiny/admin-ui";
+import { ReactComponent as RotateRight } from "@webiny/icons/rotate_right.svg";
+import { ImageEditorTool } from "./types";
+
+import Cropper from "cropperjs";
+import "cropperjs/dist/cropper.css";
+
+let cropper: Cropper;
+
+class RenderForm extends React.Component<any, any> {
+    public override state = {
+        rangeInput: 0
+    };
+
+    public override render() {
+        return (
+            <div>
+                <Slider
+                    label={"Range Input"}
+                    value={Number(this.state.rangeInput)}
+                    min={0}
+                    max={360}
+                    step={10}
+                    onValueChange={(value: number) => {
+                        this.setState({ rangeInput: value }, async () => {
+                            if (cropper) {
+                                cropper.rotateTo(parseInt(String(value), 10));
+                            }
+                        });
+                    }}
+                />
+            </div>
+        );
+    }
+}
+
+const tool: ImageEditorTool = {
+    name: "rotate",
+    icon({ activateTool }) {
+        return (
+            <Tooltip
+                side={"bottom"}
+                content={"Rotate"}
+                trigger={
+                    <IconButton
+                        variant={"ghost"}
+                        icon={<RotateRight />}
+                        onClick={() => activateTool("rotate")}
+                        data-testid={"rotate-item"}
+                    />
+                }
+            />
+        );
+    },
+    renderForm(props) {
+        return <RenderForm {...props} />;
+    },
+    onActivate: ({ canvas }) => {
+        /**
+         * We can safely cast canvas.current as HTMLCanvasElement
+         */
+        cropper = new Cropper(canvas.current as HTMLCanvasElement, {
+            background: false,
+            modal: false,
+            guides: false,
+            dragMode: "none",
+            highlight: false,
+            autoCrop: false
+        });
+    },
+    cancel: () => cropper && cropper.destroy(),
+    apply: ({ canvas }) => {
+        return new Promise((resolve: any) => {
+            if (!cropper) {
+                resolve();
+                return;
+            }
+
+            const current = canvas.current;
+            const src = cropper.getCroppedCanvas().toDataURL();
+            if (current) {
+                const image = new window.Image();
+                const ctx = current.getContext("2d") as CanvasRenderingContext2D;
+                image.onload = () => {
+                    ctx.drawImage(image, 0, 0);
+                    current.width = image.width;
+                    current.height = image.height;
+
+                    ctx.drawImage(image, 0, 0);
+                };
+                image.src = src;
+                resolve();
+            }
+
+            cropper.destroy();
+        });
+    }
+};
+
+export default tool;
diff --git a/packages/ui/src/ImageEditor/toolbar/types.ts b/packages/app-file-manager/src/components/ImageEditor/toolbar/types.ts
similarity index 100%
rename from packages/ui/src/ImageEditor/toolbar/types.ts
rename to packages/app-file-manager/src/components/ImageEditor/toolbar/types.ts
diff --git a/packages/app-file-manager/src/components/LayoutSwitch/LayoutSwitch.tsx b/packages/app-file-manager/src/components/LayoutSwitch/LayoutSwitch.tsx
index e1f61476de5..c5b77f6fd19 100644
--- a/packages/app-file-manager/src/components/LayoutSwitch/LayoutSwitch.tsx
+++ b/packages/app-file-manager/src/components/LayoutSwitch/LayoutSwitch.tsx
@@ -1,10 +1,8 @@
 import React from "react";
-
-import { ReactComponent as GridIcon } from "@material-design-icons/svg/outlined/view_module.svg";
-import { ReactComponent as TableIcon } from "@material-design-icons/svg/outlined/view_list.svg";
+import { IconButton, Tooltip } from "@webiny/admin-ui";
+import { ReactComponent as GridIcon } from "@webiny/icons/view_module.svg";
+import { ReactComponent as TableIcon } from "@webiny/icons/view_list.svg";
 import { i18n } from "@webiny/app/i18n";
-import { IconButton } from "@webiny/ui/Button";
-import { Tooltip } from "@webiny/ui/Tooltip";
 
 import { useFileManagerView } from "~/modules/FileManagerRenderer/FileManagerViewProvider";
 
@@ -15,17 +13,16 @@ export const LayoutSwitch = () => {
 
     return (
         <Tooltip
+            side={"bottom"}
+            trigger={
+                <IconButton
+                    icon={view.listTable ? <GridIcon /> : <TableIcon />}
+                    onClick={() => view.setListTable(!view.listTable)}
+                />
+            }
             content={t`{mode} layout`({
                 mode: view.listTable ? "Grid" : "Table"
             })}
-            placement={"bottom"}
-        >
-            <IconButton
-                icon={view.listTable ? <GridIcon /> : <TableIcon />}
-                onClick={() => view.setListTable(!view.listTable)}
-            >
-                {t`Switch`}
-            </IconButton>
-        </Tooltip>
+        />
     );
 };
diff --git a/packages/app-file-manager/src/components/NoPermission/NoPermission.tsx b/packages/app-file-manager/src/components/NoPermission/NoPermission.tsx
deleted file mode 100644
index 79b8d6714dc..00000000000
--- a/packages/app-file-manager/src/components/NoPermission/NoPermission.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import React from "react";
-import { i18n } from "@webiny/app/i18n";
-import { Icon } from "@webiny/ui/Icon";
-
-import {
-    NoPermissionBody,
-    NoPermissionIcon,
-    NoPermissionInner,
-    NoPermissionOuter,
-    NoPermissionTitle,
-    NoPermissionWrapper
-} from "./styled";
-
-const t = i18n.ns("app-admin/file-manager/components/no-permission");
-
-export const NoPermission = () => {
-    return (
-        <NoPermissionWrapper>
-            <NoPermissionOuter>
-                <NoPermissionInner>
-                    <Icon icon={<NoPermissionIcon />} />
-                    <NoPermissionTitle use={"headline6"}>{t`Permission needed`}</NoPermissionTitle>
-                    <NoPermissionBody use={"body2"}>
-                        {t`You're missing required permission to access files. Please contact the administrator.`}
-                    </NoPermissionBody>
-                </NoPermissionInner>
-            </NoPermissionOuter>
-        </NoPermissionWrapper>
-    );
-};
diff --git a/packages/app-file-manager/src/components/NoPermission/index.tsx b/packages/app-file-manager/src/components/NoPermission/index.tsx
deleted file mode 100644
index 3682ec6c7a2..00000000000
--- a/packages/app-file-manager/src/components/NoPermission/index.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./NoPermission";
diff --git a/packages/app-file-manager/src/components/NoPermission/styled.tsx b/packages/app-file-manager/src/components/NoPermission/styled.tsx
deleted file mode 100644
index 555315d3e89..00000000000
--- a/packages/app-file-manager/src/components/NoPermission/styled.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import styled from "@emotion/styled";
-import { ReactComponent as PermissionIcon } from "@material-design-icons/svg/outlined/privacy_tip.svg";
-import { Typography } from "@webiny/ui/Typography";
-
-export const NoPermissionWrapper = styled("div")`
-    margin: 0 auto;
-    padding-top: 0;
-    height: calc(100vh - 95px);
-    z-index: 2;
-    width: 100%;
-    position: absolute;
-    background-color: transparent;
-`;
-
-export const NoPermissionOuter = styled("div")`
-    text-align: center;
-    width: 300px;
-    height: 300px;
-    background-color: var(--mdc-theme-surface);
-    border-radius: 50%;
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    transform: translateX(-50%) translateY(-50%);
-`;
-
-export const NoPermissionInner = styled("div")`
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    padding-top: 35px;
-    width: 300px;
-    color: var(--mdc-theme-on-surface);
-`;
-
-export const NoPermissionIcon = styled(PermissionIcon)`
-    width: 100px !important;
-    height: auto;
-    display: inline-block;
-    color: var(--mdc-theme-on-surface);
-`;
-
-export const NoPermissionTitle = styled(Typography)`
-    margin-top: 8px;
-`;
-
-export const NoPermissionBody = styled(Typography)`
-    padding: 0 16px;
-    color: var(--mdc-theme-text-secondary-on-background);
-`;
diff --git a/packages/app-file-manager/src/components/NoPermissions/NoPermissions.tsx b/packages/app-file-manager/src/components/NoPermissions/NoPermissions.tsx
new file mode 100644
index 00000000000..885ff095227
--- /dev/null
+++ b/packages/app-file-manager/src/components/NoPermissions/NoPermissions.tsx
@@ -0,0 +1,35 @@
+import React from "react";
+import { Heading, Text } from "@webiny/admin-ui";
+import { ReactComponent as VisibilityOffIcon } from "@webiny/icons/visibility_off.svg";
+
+export const NoPermissions = () => {
+    return (
+        <div
+            className={
+                "wby-w-full wby-h-full wby-p-lg wby-flex wby-items-center wby-justify-center wby-bg-neutral-base"
+            }
+        >
+            <div className={"wby-flex wby-flex-col wby-items-center wby-justify-center wby-gap-sm"}>
+                <div className={"wby-fill-neutral-strong"}>
+                    <VisibilityOffIcon width={75} height={75} />
+                </div>
+                <div className={"wby-text-center"}>
+                    <Heading level={4} className={"wby-text-neutral-strong"}>
+                        {"Permission Required"}
+                    </Heading>
+                    <Text
+                        as={"div"}
+                        style={{
+                            width: "300px"
+                        }}
+                        className={"wby-text-neutral-strong"}
+                    >
+                        {
+                            "You don’t have the necessary permissions to access these files. Please contact your administrator for access."
+                        }
+                    </Text>
+                </div>
+            </div>
+        </div>
+    );
+};
diff --git a/packages/app-file-manager/src/components/NoPermissions/index.tsx b/packages/app-file-manager/src/components/NoPermissions/index.tsx
new file mode 100644
index 00000000000..f0c3bd2da19
--- /dev/null
+++ b/packages/app-file-manager/src/components/NoPermissions/index.tsx
@@ -0,0 +1 @@
+export * from "./NoPermissions";
diff --git a/packages/app-file-manager/src/components/NoResults/NoResults.tsx b/packages/app-file-manager/src/components/NoResults/NoResults.tsx
index 98a44e80ec3..23816af1b6e 100644
--- a/packages/app-file-manager/src/components/NoResults/NoResults.tsx
+++ b/packages/app-file-manager/src/components/NoResults/NoResults.tsx
@@ -1,14 +1,24 @@
 import React from "react";
-import { i18n } from "@webiny/app/i18n";
-
-import { NoResultsWrapper } from "./styled";
-
-const t = i18n.ns("app-admin/file-manager/components/no-results");
+import { Heading } from "@webiny/admin-ui";
+import { ReactComponent as SearchOffIcon } from "@webiny/icons/search_off.svg";
 
 export const NoResults = () => {
     return (
-        <NoResultsWrapper>
-            <div>{t`No results found.`}</div>
-        </NoResultsWrapper>
+        <div
+            className={
+                "wby-w-full wby-h-full wby-p-lg wby-flex wby-items-center wby-justify-center wby-bg-neutral-base"
+            }
+        >
+            <div className={"wby-flex wby-flex-col wby-items-center wby-justify-center wby-gap-sm"}>
+                <div className={"wby-fill-neutral-strong"}>
+                    <SearchOffIcon width={75} height={75} />
+                </div>
+                <div className={"wby-text-center"}>
+                    <Heading level={4} className={"wby-text-neutral-strong"}>
+                        {"No results found."}
+                    </Heading>
+                </div>
+            </div>
+        </div>
     );
 };
diff --git a/packages/app-file-manager/src/components/NoResults/styled.tsx b/packages/app-file-manager/src/components/NoResults/styled.tsx
deleted file mode 100644
index 3fb5e911f01..00000000000
--- a/packages/app-file-manager/src/components/NoResults/styled.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import styled from "@emotion/styled";
-
-export const NoResultsWrapper = styled("div")`
-    padding: 100px 0;
-    text-align: center;
-    position: absolute;
-    width: 100%;
-`;
diff --git a/packages/app-file-manager/src/components/SearchWidget/SearchWidget.tsx b/packages/app-file-manager/src/components/SearchWidget/SearchWidget.tsx
new file mode 100644
index 00000000000..0b90cc39c3d
--- /dev/null
+++ b/packages/app-file-manager/src/components/SearchWidget/SearchWidget.tsx
@@ -0,0 +1,27 @@
+import React from "react";
+import { DelayedOnChange, Icon, Input } from "@webiny/admin-ui";
+import { ReactComponent as SearchIcon } from "@webiny/icons/search.svg";
+import { useFileManagerApi, useFileManagerView } from "~/index";
+
+export const SearchWidget = () => {
+    const fileManager = useFileManagerApi();
+    const view = useFileManagerView();
+
+    return (
+        <DelayedOnChange value={view.searchQuery} onChange={value => view.setSearchQuery(value)}>
+            {({ value, onChange }) => (
+                <Input
+                    id={"file-manager__search-input"}
+                    value={value}
+                    onChange={value => onChange(value)}
+                    placeholder={view.searchLabel || "Search library..."}
+                    disabled={!fileManager.canRead}
+                    data-testid={"file-manager.search-input"}
+                    startIcon={<Icon label={"Search"} icon={<SearchIcon />} />}
+                    size={"md"}
+                    variant={"ghost"}
+                />
+            )}
+        </DelayedOnChange>
+    );
+};
diff --git a/packages/app-file-manager/src/components/SearchWidget/index.ts b/packages/app-file-manager/src/components/SearchWidget/index.ts
new file mode 100644
index 00000000000..9e0b3ee7133
--- /dev/null
+++ b/packages/app-file-manager/src/components/SearchWidget/index.ts
@@ -0,0 +1 @@
+export * from "./SearchWidget";
diff --git a/packages/app-file-manager/src/components/Table/Actions/CopyFile.tsx b/packages/app-file-manager/src/components/Table/Actions/CopyFile.tsx
index f94409a06d8..a062a3f96c0 100644
--- a/packages/app-file-manager/src/components/Table/Actions/CopyFile.tsx
+++ b/packages/app-file-manager/src/components/Table/Actions/CopyFile.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { ReactComponent as Copy } from "@material-design-icons/svg/outlined/content_copy.svg";
+import { ReactComponent as Copy } from "@webiny/icons/content_copy.svg";
 import { FileManagerViewConfig } from "~/modules/FileManagerRenderer/FileManagerView/FileManagerViewConfig";
 import { useCopyFile } from "~/hooks/useCopyFile";
 import { useFile } from "~/hooks/useFile";
diff --git a/packages/app-file-manager/src/components/Table/Actions/DeleteFile.tsx b/packages/app-file-manager/src/components/Table/Actions/DeleteFile.tsx
index ce6ee99f541..763faaeb264 100644
--- a/packages/app-file-manager/src/components/Table/Actions/DeleteFile.tsx
+++ b/packages/app-file-manager/src/components/Table/Actions/DeleteFile.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { ReactComponent as Delete } from "@material-design-icons/svg/outlined/delete.svg";
+import { ReactComponent as Delete } from "@webiny/icons/delete.svg";
 import { FileManagerViewConfig } from "~/modules/FileManagerRenderer/FileManagerView/FileManagerViewConfig";
 import { useFileManagerApi } from "~/modules/FileManagerApiProvider/FileManagerApiContext";
 import { useDeleteFile } from "~/hooks/useDeleteFile";
diff --git a/packages/app-file-manager/src/components/Table/Actions/EditFile.tsx b/packages/app-file-manager/src/components/Table/Actions/EditFile.tsx
index c0bc6a4f354..a94f93cea74 100644
--- a/packages/app-file-manager/src/components/Table/Actions/EditFile.tsx
+++ b/packages/app-file-manager/src/components/Table/Actions/EditFile.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { ReactComponent as Edit } from "@material-design-icons/svg/outlined/edit.svg";
+import { ReactComponent as Edit } from "@webiny/icons/edit.svg";
 import { FileManagerViewConfig } from "~/modules/FileManagerRenderer/FileManagerView/FileManagerViewConfig";
 import { useFileManagerView } from "~/modules/FileManagerRenderer/FileManagerViewProvider";
 import { useFile } from "~/hooks/useFile";
diff --git a/packages/app-file-manager/src/components/Table/Actions/MoveFile.tsx b/packages/app-file-manager/src/components/Table/Actions/MoveFile.tsx
index 9976341c795..83af8bf6ec0 100644
--- a/packages/app-file-manager/src/components/Table/Actions/MoveFile.tsx
+++ b/packages/app-file-manager/src/components/Table/Actions/MoveFile.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { ReactComponent as Move } from "@material-design-icons/svg/outlined/drive_file_move.svg";
+import { ReactComponent as Move } from "@webiny/icons/drive_file_move.svg";
 import { FileManagerViewConfig } from "~/modules/FileManagerRenderer/FileManagerView/FileManagerViewConfig";
 import { useFile } from "~/hooks/useFile";
 import { useMoveFileToFolder } from "~/hooks/useMoveFileToFolder";
diff --git a/packages/app-file-manager/src/components/Table/Cells/CellCreated.tsx b/packages/app-file-manager/src/components/Table/Cells/CellCreated.tsx
index d30ccf32a52..5916d896cf6 100644
--- a/packages/app-file-manager/src/components/Table/Cells/CellCreated.tsx
+++ b/packages/app-file-manager/src/components/Table/Cells/CellCreated.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { TimeAgo } from "@webiny/ui/TimeAgo";
+import { TimeAgo } from "@webiny/admin-ui";
 import { FileManagerViewConfig } from "~/modules/FileManagerRenderer/FileManagerView/FileManagerViewConfig";
 
 export const CellCreated = () => {
diff --git a/packages/app-file-manager/src/components/Table/Cells/CellModified.tsx b/packages/app-file-manager/src/components/Table/Cells/CellModified.tsx
index 8385fffec22..a552c4b336c 100644
--- a/packages/app-file-manager/src/components/Table/Cells/CellModified.tsx
+++ b/packages/app-file-manager/src/components/Table/Cells/CellModified.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { TimeAgo } from "@webiny/ui/TimeAgo";
+import { TimeAgo } from "@webiny/admin-ui";
 import { FileManagerViewConfig } from "~/modules/FileManagerRenderer/FileManagerView/FileManagerViewConfig";
 
 export const CellModified = () => {
diff --git a/packages/app-file-manager/src/components/Table/Cells/CellName.tsx b/packages/app-file-manager/src/components/Table/Cells/CellName.tsx
index 8c5c9310174..2eb599d2b93 100644
--- a/packages/app-file-manager/src/components/Table/Cells/CellName.tsx
+++ b/packages/app-file-manager/src/components/Table/Cells/CellName.tsx
@@ -1,15 +1,13 @@
 import React from "react";
 
-import { ReactComponent as Folder } from "@material-design-icons/svg/outlined/folder.svg";
-import { ReactComponent as FolderShared } from "@material-design-icons/svg/outlined/folder_shared.svg";
-import { ReactComponent as Image } from "@material-design-icons/svg/outlined/insert_photo.svg";
-import { ReactComponent as File } from "@material-design-icons/svg/outlined/description.svg";
-
-import { RowIcon, RowText, RowTitle } from "./Cells.styled";
+import { FolderIcon, FolderSharedIcon } from "@webiny/app-aco";
 import { useFileManagerView } from "~/modules/FileManagerRenderer/FileManagerViewProvider";
 import { FileManagerViewConfig } from "~/modules/FileManagerRenderer/FileManagerView/FileManagerViewConfig";
 import { FileTableItem } from "~/types";
 import { FolderTableItem } from "@webiny/app-aco/types";
+import { cn, Text } from "@webiny/admin-ui";
+import { CellThumbnail } from "./CellThumbnail";
+import { FileProvider } from "~/contexts/FileProvider";
 
 interface DefaultProps {
     onClick: (id: string) => void;
@@ -20,16 +18,25 @@ interface FolderCellNameProps extends DefaultProps {
 }
 
 export const FolderCellName = ({ folder, onClick }: FolderCellNameProps) => {
-    let icon = <Folder />;
+    let icon = <FolderIcon width={32} height={32} />;
     if (folder.hasNonInheritedPermissions && folder.canManagePermissions) {
-        icon = <FolderShared />;
+        icon = <FolderSharedIcon width={32} height={32} />;
     }
 
     return (
-        <RowTitle onClick={() => onClick(folder.id)}>
-            <RowIcon>{icon}</RowIcon>
-            <RowText use={"subtitle2"}>{folder.title}</RowText>
-        </RowTitle>
+        <div
+            className={cn([
+                "wby-flex wby-items-center wby-gap-md",
+                "wby-truncate wby-cursor-pointer wby-font-semibold",
+                "hover:wby-underline"
+            ])}
+            onClick={() => onClick(folder.id)}
+        >
+            <div className={"wby-size-xl wby-rounded-md wby-overflow-hidden wby-flex-shrink-0"}>
+                {icon}
+            </div>
+            <Text className={"wby-truncate wby-min-w-0 wby-flex-shrink"}>{folder.title}</Text>
+        </div>
     );
 };
 
@@ -39,10 +46,25 @@ interface FileCellNameProps extends DefaultProps {
 
 export const FileCellName = ({ file, onClick }: FileCellNameProps) => {
     return (
-        <RowTitle onClick={() => onClick(file.id)}>
-            <RowIcon>{file.type && file.type.includes("image") ? <Image /> : <File />}</RowIcon>
-            <RowText use={"subtitle2"}>{file.name}</RowText>
-        </RowTitle>
+        <div
+            className={cn([
+                "wby-flex wby-items-center wby-gap-md",
+                "wby-truncate wby-cursor-pointer",
+                "hover:wby-underline"
+            ])}
+            onClick={() => onClick(file.id)}
+        >
+            <FileProvider file={file}>
+                <div
+                    className={
+                        "wby-size-xl wby-aspect-square wby-rounded-md wby-bg-neutral-muted wby-overflow-hidden wby-flex-shrink-0"
+                    }
+                >
+                    <CellThumbnail />
+                </div>
+            </FileProvider>
+            <Text className={"wby-truncate wby-min-w-0 wby-flex-shrink"}>{file.name}</Text>
+        </div>
     );
 };
 
diff --git a/packages/app-file-manager/src/components/Table/Cells/CellThumbnail.tsx b/packages/app-file-manager/src/components/Table/Cells/CellThumbnail.tsx
new file mode 100644
index 00000000000..456b84f63b0
--- /dev/null
+++ b/packages/app-file-manager/src/components/Table/Cells/CellThumbnail.tsx
@@ -0,0 +1,12 @@
+import React from "react";
+import { useFile } from "~/hooks/useFile";
+import { useFileManagerViewConfig } from "~/index";
+
+export const CellThumbnail = () => {
+    const { file } = useFile();
+    const { browser, getThumbnailRenderer } = useFileManagerViewConfig();
+
+    const renderer = getThumbnailRenderer(browser.table.cellThumbnails, file);
+
+    return <>{renderer?.element || null}</>;
+};
diff --git a/packages/app-file-manager/src/components/Table/Cells/Cells.styled.tsx b/packages/app-file-manager/src/components/Table/Cells/Cells.styled.tsx
deleted file mode 100644
index 8b472745de9..00000000000
--- a/packages/app-file-manager/src/components/Table/Cells/Cells.styled.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import styled from "@emotion/styled";
-import { Typography } from "@webiny/ui/Typography";
-
-export const RowTitle = styled("div")`
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-`;
-
-export const RowIcon = styled("div")`
-    margin-right: 8px;
-    height: 24px;
-`;
-
-export const RowText = styled(Typography)`
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-`;
diff --git a/packages/app-file-manager/src/components/Table/Table.tsx b/packages/app-file-manager/src/components/Table/Table.tsx
index a98358085d1..13195e690c1 100644
--- a/packages/app-file-manager/src/components/Table/Table.tsx
+++ b/packages/app-file-manager/src/components/Table/Table.tsx
@@ -1,14 +1,14 @@
 import React, { forwardRef, useMemo } from "react";
+import type { DataTableSorting, OnDataTableSortingChange } from "@webiny/admin-ui";
 import { createFoldersData, createRecordsData, Table as AcoTable } from "@webiny/app-aco";
-import { OnSortingChange, Sorting } from "@webiny/ui/DataTable";
 import { useFileManagerView } from "~/modules/FileManagerRenderer/FileManagerViewProvider";
 import { TableItem } from "~/types";
 
 export interface TableProps {
     onSelectRow: ((rows: TableItem[] | []) => void) | undefined;
     onToggleRow: ((row: TableItem) => void) | undefined;
-    sorting: Sorting;
-    onSortingChange: OnSortingChange;
+    sorting: DataTableSorting;
+    onSortingChange: OnDataTableSortingChange;
 }
 
 export const Table = forwardRef<HTMLDivElement, TableProps>((props, ref) => {
diff --git a/packages/app-file-manager/src/components/TagsList/Empty.tsx b/packages/app-file-manager/src/components/TagsList/Empty.tsx
new file mode 100644
index 00000000000..45f95292141
--- /dev/null
+++ b/packages/app-file-manager/src/components/TagsList/Empty.tsx
@@ -0,0 +1,10 @@
+import React from "react";
+import { Text } from "@webiny/admin-ui";
+
+type EmptyProps = {
+    disclaimer?: string;
+};
+
+export const Empty = ({ disclaimer = `No tags found...` }: EmptyProps) => {
+    return <Text className={"wby-text-neutral-muted"}>{disclaimer}</Text>;
+};
diff --git a/packages/app-file-manager/src/components/TagsList/FilterSelect.tsx b/packages/app-file-manager/src/components/TagsList/FilterSelect.tsx
new file mode 100644
index 00000000000..0823587b3d1
--- /dev/null
+++ b/packages/app-file-manager/src/components/TagsList/FilterSelect.tsx
@@ -0,0 +1,33 @@
+import React from "react";
+import { Select, Text } from "@webiny/admin-ui";
+import { useFileManagerView } from "~/modules/FileManagerRenderer/FileManagerViewProvider";
+
+const options = [
+    {
+        value: "OR",
+        label: "match any"
+    },
+    {
+        value: "AND",
+        label: "match all"
+    }
+];
+
+export const FilterSelect = () => {
+    const fmView = useFileManagerView();
+
+    return (
+        <div className={"wby-flex wby-flex-col wby-gap-sm wby-mb-md"}>
+            <Text className={"wby-font-semibold"}>Filter by tag</Text>
+            <Select
+                disabled={fmView.tags.activeTags.length < 2}
+                size={"md"}
+                variant={"secondary"}
+                value={fmView.tags.filterMode}
+                onChange={mode => fmView.tags.setFilterMode(mode)}
+                options={options}
+                displayResetAction={false}
+            />
+        </div>
+    );
+};
diff --git a/packages/app-file-manager/src/components/TagsList/FilterStatus.tsx b/packages/app-file-manager/src/components/TagsList/FilterStatus.tsx
new file mode 100644
index 00000000000..edf382001e2
--- /dev/null
+++ b/packages/app-file-manager/src/components/TagsList/FilterStatus.tsx
@@ -0,0 +1,32 @@
+import React, { useCallback } from "react";
+import { Button, Text } from "@webiny/admin-ui";
+import { useFileManagerView } from "~/modules/FileManagerRenderer/FileManagerViewProvider";
+
+interface FilterStatusProps {
+    activeTags: string[];
+    onActivatedTagsChange: (tags: string[]) => void;
+}
+
+export const FilterStatus = ({ activeTags, onActivatedTagsChange }: FilterStatusProps) => {
+    const fmView = useFileManagerView();
+
+    const resetTags = useCallback(() => {
+        onActivatedTagsChange([]);
+        fmView.tags.setFilterMode("OR");
+    }, []);
+
+    return (
+        <div className={"wby-mb-md wby-flex wby-items-center wby-justify-between wby-gap-sm"}>
+            <Text size={"sm"} className={"wby-text-neutral-muted"}>
+                {activeTags.length} selected
+            </Text>
+            <Button
+                onClick={resetTags}
+                size={"sm"}
+                variant={"ghost"}
+                text={"Reset"}
+                disabled={activeTags.length === 0}
+            />
+        </div>
+    );
+};
diff --git a/packages/app-file-manager/src/components/TagsList/Tag.tsx b/packages/app-file-manager/src/components/TagsList/Tag.tsx
new file mode 100644
index 00000000000..2ad29283a21
--- /dev/null
+++ b/packages/app-file-manager/src/components/TagsList/Tag.tsx
@@ -0,0 +1,22 @@
+import React from "react";
+import { Tag as AdminTag } from "@webiny/admin-ui";
+import { TagItem } from "@webiny/app-aco/types";
+
+type TagProps = {
+    tagItem: TagItem;
+    active: boolean;
+    onTagClick: (tagItem: TagItem) => void;
+};
+
+export const Tag = ({ tagItem, active, onTagClick }: TagProps) => {
+    return (
+        <div>
+            <AdminTag
+                variant={active ? "accent" : "neutral-muted"}
+                content={tagItem.tag}
+                onClick={() => onTagClick(tagItem)}
+                onDismiss={active ? () => onTagClick(tagItem) : undefined}
+            />
+        </div>
+    );
+};
diff --git a/packages/app-file-manager/src/components/TagsList/Tags.tsx b/packages/app-file-manager/src/components/TagsList/Tags.tsx
new file mode 100644
index 00000000000..7c93c6277de
--- /dev/null
+++ b/packages/app-file-manager/src/components/TagsList/Tags.tsx
@@ -0,0 +1,48 @@
+import React, { useCallback } from "react";
+import { Tag as AdminTag } from "@webiny/admin-ui";
+import { TagItem } from "@webiny/app-aco/types";
+
+export interface TagsProps {
+    tags: TagItem[];
+    activeTags: string[];
+    onActivatedTagsChange: (tags: string[]) => void;
+}
+
+export const Tags = ({ tags, activeTags, onActivatedTagsChange }: TagsProps) => {
+    const toggleTag = useCallback(
+        (tag: TagItem["tag"]) => {
+            const finalTags = Array.isArray(activeTags) ? [...activeTags] : [];
+
+            if (finalTags.find(item => tag === item)) {
+                finalTags.splice(finalTags.indexOf(tag), 1);
+            } else {
+                finalTags.push(tag);
+            }
+
+            onActivatedTagsChange(finalTags);
+        },
+        [activeTags]
+    );
+
+    const getIsActive = useCallback(
+        (tagItem: TagItem) => {
+            return activeTags.includes(tagItem.tag);
+        },
+        [activeTags]
+    );
+
+    return (
+        <div className={"wby-flex wby-flex-col wby-gap-sm"}>
+            {tags.map((tagItem, index) => (
+                <div key={`tag-${index}`}>
+                    <AdminTag
+                        variant={getIsActive(tagItem) ? "accent" : "neutral-muted"}
+                        content={tagItem.tag}
+                        onClick={() => toggleTag(tagItem.tag)}
+                        onDismiss={getIsActive(tagItem) ? () => toggleTag(tagItem.tag) : undefined}
+                    />
+                </div>
+            ))}
+        </div>
+    );
+};
diff --git a/packages/app-file-manager/src/components/TagsList/TagsList.tsx b/packages/app-file-manager/src/components/TagsList/TagsList.tsx
new file mode 100644
index 00000000000..b59114ef4a2
--- /dev/null
+++ b/packages/app-file-manager/src/components/TagsList/TagsList.tsx
@@ -0,0 +1,49 @@
+import React from "react";
+import { Loader } from "@webiny/app-aco";
+import { Empty } from "./Empty";
+import { FilterSelect } from "./FilterSelect";
+import { FilterStatus } from "./FilterStatus";
+import { Tags } from "./Tags";
+
+import { TagItem } from "@webiny/app-aco/types";
+
+interface TagListProps {
+    loading: boolean;
+    onActivatedTagsChange: (tags: string[]) => void;
+    tags: TagItem[];
+    activeTags: string[];
+    emptyDisclaimer?: string;
+}
+
+export const TagsList = ({
+    loading,
+    tags,
+    emptyDisclaimer,
+    onActivatedTagsChange,
+    activeTags
+}: TagListProps) => {
+    if (loading) {
+        return <Loader />;
+    }
+
+    return (
+        <div className={"wby-my-lg wby-px-md"}>
+            {tags.length === 0 ? (
+                <Empty disclaimer={emptyDisclaimer} />
+            ) : (
+                <>
+                    {tags.length > 1 && <FilterSelect />}
+                    <FilterStatus
+                        activeTags={activeTags}
+                        onActivatedTagsChange={onActivatedTagsChange}
+                    />
+                    <Tags
+                        tags={tags}
+                        activeTags={activeTags}
+                        onActivatedTagsChange={onActivatedTagsChange}
+                    />
+                </>
+            )}
+        </div>
+    );
+};
diff --git a/packages/app-file-manager/src/modules/FileManagerRenderer/FileManagerView/components/TagsList/index.tsx b/packages/app-file-manager/src/components/TagsList/index.tsx
similarity index 100%
rename from packages/app-file-manager/src/modules/FileManagerRenderer/FileManagerView/components/TagsList/index.tsx
rename to packages/app-file-manager/src/components/TagsList/index.tsx
diff --git a/packages/app-file-manager/src/components/Thumbnail/Thumbnail.tsx b/packages/app-file-manager/src/components/Thumbnail/Thumbnail.tsx
new file mode 100644
index 00000000000..e414f3b479b
--- /dev/null
+++ b/packages/app-file-manager/src/components/Thumbnail/Thumbnail.tsx
@@ -0,0 +1,12 @@
+import React from "react";
+import { useFile } from "~/hooks/useFile";
+import { useFileManagerViewConfig } from "~/index";
+
+export const Thumbnail = () => {
+    const { file } = useFile();
+    const { browser, getThumbnailRenderer } = useFileManagerViewConfig();
+
+    const renderer = getThumbnailRenderer(browser.grid.itemThumbnails, file);
+
+    return <>{renderer?.element || null}</>;
+};
diff --git a/packages/app-file-manager/src/components/Thumbnail/index.ts b/packages/app-file-manager/src/components/Thumbnail/index.ts
new file mode 100644
index 00000000000..d376b7afd4c
--- /dev/null
+++ b/packages/app-file-manager/src/components/Thumbnail/index.ts
@@ -0,0 +1 @@
+export * from "./Thumbnail";
diff --git a/packages/app-file-manager/src/components/Title/Title.tsx b/packages/app-file-manager/src/components/Title/Title.tsx
deleted file mode 100644
index 67d5a2cd5e9..00000000000
--- a/packages/app-file-manager/src/components/Title/Title.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from "react";
-
-import { Skeleton } from "@webiny/ui/Skeleton";
-
-import { Name } from "./styled";
-
-export interface TitleProps {
-    title?: string;
-}
-
-export const Title = ({ title }: TitleProps) => {
-    return (
-        <Name use={"headline6"} tag={"h1"}>
-            {title || <Skeleton theme={"dark"} />}
-        </Name>
-    );
-};
diff --git a/packages/app-file-manager/src/components/Title/index.tsx b/packages/app-file-manager/src/components/Title/index.tsx
deleted file mode 100644
index 2a7f3c58777..00000000000
--- a/packages/app-file-manager/src/components/Title/index.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./Title";
diff --git a/packages/app-file-manager/src/components/Title/styled.tsx b/packages/app-file-manager/src/components/Title/styled.tsx
deleted file mode 100644
index 5a0da8f8674..00000000000
--- a/packages/app-file-manager/src/components/Title/styled.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import styled from "@emotion/styled";
-import { Typography, TypographyProps } from "@webiny/ui/Typography";
-
-export const Name = styled(Typography)<TypographyProps>`
-    color: var(--mdc-theme-text-primary-on-background);
-    padding-left: 8px;
-    line-height: 48px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-`;
diff --git a/packages/app-file-manager/src/components/UploadStatus/UploadStatus.tsx b/packages/app-file-manager/src/components/UploadStatus/UploadStatus.tsx
index f6ef1c83b34..3d6c20735a2 100644
--- a/packages/app-file-manager/src/components/UploadStatus/UploadStatus.tsx
+++ b/packages/app-file-manager/src/components/UploadStatus/UploadStatus.tsx
@@ -1,53 +1,56 @@
 import React from "react";
+import { cn, IconButton, ProgressBar, Text } from "@webiny/admin-ui";
 import { i18n } from "@webiny/app/i18n";
-
-import {
-    StatusWrapper,
-    StatusIndicator,
-    Icon,
-    Percentage,
-    ProgressWrapper,
-    UploadingLabel,
-    ProgressBar,
-    ProgressBarPercentage,
-    UploadingLabelFile
-} from "./styled";
-
-import loadingIcon from "./assets/loading.svg";
-import checkIcon from "./assets/check.svg";
+import { ReactComponent as CloseIcon } from "@webiny/icons/close.svg";
 
 const t = i18n.ns("app-admin/file-manager/components/upload-status");
 
 export interface UploadStatusProps {
     progress: number;
     numberOfFiles: number;
+    isVisible: boolean;
+    setIsVisible: (isVisible: boolean) => void;
 }
-export const UploadStatus = ({ numberOfFiles, progress }: UploadStatusProps) => {
-    if (!numberOfFiles) {
+
+export const UploadStatus = ({
+    numberOfFiles,
+    progress = 0,
+    isVisible,
+    setIsVisible
+}: UploadStatusProps) => {
+    if (!numberOfFiles || !isVisible) {
         return null;
     }
 
     return (
-        <StatusWrapper>
-            <StatusIndicator>
-                {Number(progress.toFixed()) <= 98 ? (
-                    <Icon className="loading" src={loadingIcon} alt={t`Loading`} />
-                ) : (
-                    <Icon src={checkIcon} alt={t`Done`} />
-                )}
-                {Number(progress.toFixed()) <= 98 && <Percentage>{progress.toFixed()}%</Percentage>}
-            </StatusIndicator>
-            <ProgressWrapper>
-                <UploadingLabel>
-                    {t`Uploading {numberOfFiles} {label}`({
-                        numberOfFiles: <UploadingLabelFile>{numberOfFiles}</UploadingLabelFile>,
-                        label: numberOfFiles === 1 ? t`file` : t`files`
-                    })}
-                </UploadingLabel>
-                <ProgressBar>
-                    <ProgressBarPercentage width={progress.toFixed()} />
-                </ProgressBar>
-            </ProgressWrapper>
-        </StatusWrapper>
+        <div
+            className={cn([
+                "wby-p-md wby-rounded-lg",
+                "wby-bg-neutral-dark wby-shadow-lg",
+                "wby-absolute wby-bottom-xxl wby-left-2/4 -wby-translate-x-1/2 wby-z-10",
+                "wby-flex wby-items-center wby-gap-sm-extra",
+                "wby-animate-in wby-slide-in-from-top-4 wby-slide-in-from-left-1/2 wby-duration-500"
+            ])}
+        >
+            <Text as={"div"} size={"sm"} className={"wby-text-neutral-disabled wby-shrink-0"}>
+                {t`Uploading {numberOfFiles} {label}`({
+                    numberOfFiles: `${numberOfFiles}`,
+                    label: numberOfFiles === 1 ? t`file` : t`files`
+                })}
+            </Text>
+            <div className={"wby-w-64"}>
+                <ProgressBar
+                    value={progress}
+                    valuePosition={"end"}
+                    className={"wby-text-neutral-light"}
+                />
+            </div>
+            <IconButton
+                onClick={() => setIsVisible(false)}
+                icon={<CloseIcon />}
+                variant={"ghost-negative"}
+                size={"sm"}
+            />
+        </div>
     );
 };
diff --git a/packages/app-file-manager/src/components/UploadStatus/assets/check.svg b/packages/app-file-manager/src/components/UploadStatus/assets/check.svg
deleted file mode 100644
index 24ff3f51a84..00000000000
--- a/packages/app-file-manager/src/components/UploadStatus/assets/check.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24">
-    <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" fill="#fff" />
-</svg>
\ No newline at end of file
diff --git a/packages/app-file-manager/src/components/UploadStatus/assets/loading.svg b/packages/app-file-manager/src/components/UploadStatus/assets/loading.svg
deleted file mode 100644
index c6d209e29f8..00000000000
--- a/packages/app-file-manager/src/components/UploadStatus/assets/loading.svg
+++ /dev/null
@@ -1,17 +0,0 @@
-<svg x="0px" y="0px" width="30px" height="30px" viewBox="0 0 40 40" enable-background="new 0 0 40 40"  xmlns="http://www.w3.org/2000/svg">
-
-    <path opacity="0.3" fill="#fff" d="M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946c0,8.255,6.692,14.946,14.946,14.946
-    s14.946-6.691,14.946-14.946C35.146,11.861,28.455,5.169,20.201,5.169z M20.201,31.749c-6.425,0-11.634-5.208-11.634-11.634
-    c0-6.425,5.209-11.634,11.634-11.634c6.425,0,11.633,5.209,11.633,11.634C31.834,26.541,26.626,31.749,20.201,31.749z" />
-
-    <path fill="#fff" d="M26.013,10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0
-    C22.32,8.481,24.301,9.057,26.013,10.047z">
-        <animateTransform attributeType="xml"
-        attributeName="transform"
-        type="rotate"
-        from="0 20 20"
-        to="360 20 20"
-        dur="1s"
-        repeatCount="indefinite" />
-    </path>
-</svg>
diff --git a/packages/app-file-manager/src/components/UploadStatus/styled.tsx b/packages/app-file-manager/src/components/UploadStatus/styled.tsx
deleted file mode 100644
index 5f933901287..00000000000
--- a/packages/app-file-manager/src/components/UploadStatus/styled.tsx
+++ /dev/null
@@ -1,103 +0,0 @@
-import styled from "@emotion/styled";
-import { keyframes } from "@emotion/react";
-
-const animateShow = keyframes`
-    0% { 
-        opacity: 0;
-        bottom: 24px;
-    }
-    60% { 
-        opacity: 1; 
-    }
-    100% { 
-        opacity: 1;
-        bottom: 16px;
-    }
-`;
-
-export const StatusWrapper = styled.div`
-    border-radius: 28px;
-    width: 320px;
-    position: absolute;
-    box-shadow: 0 2px 6px rgba(170, 185, 200, 0.4);
-    color: var(--mdc-theme-on-surface);
-    background-color: #fff;
-    left: calc(50% - 160px);
-    bottom: 16px;
-    display: flex;
-    align-items: center;
-    animation-name: ${animateShow};
-    animation-duration: 1.5s;
-    animation-timing-function: ease-out;
-    z-index: 10;
-`;
-
-export const ProgressWrapper = styled.div`
-    display: flex;
-    flex-direction: column;
-    width: 225px;
-    align-items: center;
-    justify-content: center;
-    margin-left: 15px;
-    margin-top: -5px;
-`;
-
-export const ProgressBar = styled.div`
-    top: 0;
-    z-index: 1;
-    height: 5px;
-    border-radius: 5px;
-    background-color: var(--mdc-theme-on-background);
-    width: 100%;
-    overflow: hidden;
-`;
-
-export const ProgressBarPercentage = styled.span<{ width: string }>`
-    display: block;
-    height: 100%;
-    background-color: var(--mdc-theme-secondary);
-    width: ${props => props.width || 0}%;
-`;
-
-export const UploadingLabel = styled.div`
-    z-index: 2;
-    padding: 5px 0 6px 0;
-    text-transform: uppercase;
-    color: var(--mdc-theme-text-secondary-on-background);
-`;
-
-export const UploadingLabelFile = styled.span`
-    font-weight: 600;
-`;
-
-export const StatusIndicator = styled.div`
-    width: 56px !important;
-    position: relative;
-    display: block;
-    z-index: 2;
-    background: var(--mdc-theme-secondary);
-    line-height: 56px;
-    height: 56px;
-    border-radius: 28px;
-    width: 100%;
-    text-align: center;
-    color: #fff;
-    box-shadow: 0 2px 6px rgba(170, 185, 200, 0.4);
-`;
-
-export const Percentage = styled.span`
-    font-weight: 600;
-`;
-
-export const Icon = styled.img`
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    margin: -15px 0 0 -15px;
-    fill: #fff;
-    &.loading {
-        width: 75px;
-        left: 5px;
-        top: 5px;
-    }
-`;
diff --git a/packages/app-file-manager/src/components/fields/AccessControl.tsx b/packages/app-file-manager/src/components/fields/AccessControl.tsx
index 78154d64199..712d53734bf 100644
--- a/packages/app-file-manager/src/components/fields/AccessControl.tsx
+++ b/packages/app-file-manager/src/components/fields/AccessControl.tsx
@@ -1,10 +1,10 @@
 import React from "react";
 import { validation } from "@webiny/validation";
-import { Select } from "@webiny/ui/Select";
 import { useBind } from "@webiny/form";
 import { useFileManagerApi } from "~/index";
 import { useAccessControlField } from "./useAccessControlField";
 import { useFileOrUndefined } from "~/components/fields/useFileOrUndefined";
+import { Label, Select } from "@webiny/admin-ui";
 
 interface AccessControlProps {
     defaultValue?: string;
@@ -38,11 +38,10 @@ export const AccessControl = ({ defaultValue, placeholder }: AccessControlProps)
         <Select
             {...bind}
             value={bind.value || defaultValue}
-            label={"Access Control"}
+            label={<Label text={"Access Control"} hint={"Control who can access this file."} />}
             options={options || []}
             disabled={file ? !canEdit(file) : false}
             placeholder={placeholder}
-            description={"Control who can access this file."}
         />
     );
 };
diff --git a/packages/app-file-manager/src/components/fields/Aliases.tsx b/packages/app-file-manager/src/components/fields/Aliases.tsx
index a7b742bf80f..79cee1a70a1 100644
--- a/packages/app-file-manager/src/components/fields/Aliases.tsx
+++ b/packages/app-file-manager/src/components/fields/Aliases.tsx
@@ -1,42 +1,35 @@
-import React, { Fragment, useMemo } from "react";
-import styled from "@emotion/styled";
-import { ReactComponent as DeleteIcon } from "@material-design-icons/svg/outlined/delete.svg";
-import { DynamicFieldset } from "@webiny/ui/DynamicFieldset";
-import { Input } from "@webiny/ui/Input";
-import { Typography } from "@webiny/ui/Typography";
-import { ButtonDefault, IconButton } from "@webiny/ui/Button";
+import React, { useMemo } from "react";
+import { ReactComponent as AddIcon } from "@webiny/icons/add.svg";
+import { ReactComponent as DeleteIcon } from "@webiny/icons/delete.svg";
 import { validation } from "@webiny/validation";
 import { Bind, useBind } from "@webiny/form";
+import { Button, DynamicFieldset, Heading, IconButton, Input, Text } from "@webiny/admin-ui";
 
-const Fieldset = styled("div")({
-    position: "relative",
-    width: "100%",
-    marginBottom: 15,
-    ".webiny-ui-button": {
-        position: "absolute",
-        display: "block",
-        right: 10,
-        top: 13
-    }
-});
-
-const Header = styled("div")({
-    display: "flex",
-    justifyContent: "space-between"
-});
-
-const DeleteAliasButton = styled(IconButton)`
-    position: absolute;
-    top: 5px;
-    right: 5px;
-`;
+const PATHNAME_REGEX = /^\/[/.a-zA-Z0-9-_]+$/;
 
-const FileAliasMessage = styled("span")`
-    color: var(--mdc-theme-text-secondary-on-background);
-    font-size: 12px;
-`;
+interface HeaderPros {
+    addAlias: () => void;
+}
 
-const PATHNAME_REGEX = /^\/[/.a-zA-Z0-9-_]+$/;
+const Header = ({ addAlias }: HeaderPros) => {
+    return (
+        <>
+            <Heading level={6} className={"wby-text-neutral-primary"}>
+                {"File Aliases"}
+            </Heading>
+            <Text size={"sm"} as={"div"} className={"wby-mt-xs wby-mb-sm-extra"}>
+                To make your file accessible via custom paths, add one or more aliases.
+            </Text>
+            <Button
+                onClick={addAlias}
+                text="Add Alias"
+                variant={"secondary"}
+                size={"sm"}
+                icon={<AddIcon />}
+            />
+        </>
+    );
+};
 
 export const Aliases = () => {
     const { value, onChange } = useBind({ name: "aliases" });
@@ -62,47 +55,37 @@ export const Aliases = () => {
     }, []);
 
     return (
-        <DynamicFieldset value={value || [""]} onChange={onChange}>
-            {({ actions, header, row, empty }) => (
-                <>
-                    {row(({ index }) => (
-                        <Fieldset>
-                            <Bind validators={aliasValidator} name={`aliases.${index}`}>
-                                <Input
-                                    placeholder={"Alias"}
-                                    description={
-                                        "Enter a file path, e.g., /my/custom/file/path.png"
-                                    }
-                                />
-                            </Bind>
-                            <DeleteAliasButton
-                                icon={<DeleteIcon />}
-                                onClick={actions.remove(index)}
-                            />
-                        </Fieldset>
-                    ))}
-                    {empty(() => (
-                        <Fragment>
-                            <Header>
-                                <Typography use={"overline"}>File Aliases</Typography>
-                                <ButtonDefault onClick={addAlias}>+ Add Alias</ButtonDefault>
-                            </Header>
-                            <Typography use={"caption"}>
-                                <FileAliasMessage>
-                                    To make your file accessible via custom paths, add one or more
-                                    aliases.
-                                </FileAliasMessage>
-                            </Typography>
-                        </Fragment>
-                    ))}
-                    {header(() => (
-                        <Header>
-                            <Typography use={"overline"}>File Aliases</Typography>
-                            <ButtonDefault onClick={addAlias}>+ Add Alias</ButtonDefault>
-                        </Header>
-                    ))}
-                </>
-            )}
-        </DynamicFieldset>
+        <div className={"wby-my-lg"}>
+            <DynamicFieldset value={value || [""]} onChange={onChange}>
+                {({ actions, header, row, empty }) => (
+                    <>
+                        {row(({ index }) => (
+                            <div className={"wby-mt-md"}>
+                                <Text size={"sm"} as={"div"} className={"wby-mb-sm"}>
+                                    {"Enter a file path, e.g., /my/custom/file/path.png"}
+                                </Text>
+                                <div className={"wby-flex wby-items-start wby-gap-sm"}>
+                                    <Bind validators={aliasValidator} name={`aliases.${index}`}>
+                                        <Input placeholder={"Alias"} size={"lg"} />
+                                    </Bind>
+                                    <IconButton
+                                        variant={"ghost"}
+                                        size={"lg"}
+                                        icon={<DeleteIcon />}
+                                        onClick={actions.remove(index)}
+                                    />
+                                </div>
+                            </div>
+                        ))}
+                        {header(() => (
+                            <Header addAlias={addAlias} />
+                        ))}
+                        {empty(() => (
+                            <Header addAlias={addAlias} />
+                        ))}
+                    </>
+                )}
+            </DynamicFieldset>
+        </div>
     );
 };
diff --git a/packages/app-file-manager/src/components/fields/Name.tsx b/packages/app-file-manager/src/components/fields/Name.tsx
index 94e8e8b9393..a26c0500f7d 100644
--- a/packages/app-file-manager/src/components/fields/Name.tsx
+++ b/packages/app-file-manager/src/components/fields/Name.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Input } from "@webiny/ui/Input";
+import { Input, Label } from "@webiny/admin-ui";
 import { validation } from "@webiny/validation";
 import { useBind } from "@webiny/form";
 import { useFile, useFileManagerApi } from "~/index";
@@ -15,11 +15,16 @@ export const Name = () => {
     return (
         <Input
             {...bind}
-            label={"Name"}
+            label={
+                <Label
+                    text={"Name"}
+                    hint={"Choose a descriptive name that's easy to remember."}
+                    required
+                />
+            }
             disabled={!canEdit(file)}
             autoFocus
             placeholder={"Enter name"}
-            description={"A descriptive name is easier to remember."}
         />
     );
 };
diff --git a/packages/app-file-manager/src/components/fields/Tags.tsx b/packages/app-file-manager/src/components/fields/Tags.tsx
index 307418386ff..0dc3c424729 100644
--- a/packages/app-file-manager/src/components/fields/Tags.tsx
+++ b/packages/app-file-manager/src/components/fields/Tags.tsx
@@ -1,7 +1,8 @@
-import React from "react";
-import { MultiAutoComplete } from "@webiny/ui/AutoComplete";
+import React, { useMemo } from "react";
+import { Label, MultiAutoComplete } from "@webiny/admin-ui";
 import { useBind } from "@webiny/form";
 import { useFileManagerApi, useFileManagerView } from "~/index";
+import { THREAT_SCAN } from "~/modules/Enterprise/constants";
 import { useFileOrUndefined } from "./useFileOrUndefined";
 
 export const Tags = () => {
@@ -13,16 +14,23 @@ export const Tags = () => {
         name: "tags"
     });
 
+    const values = useMemo(() => {
+        return (bind.value || []).filter((tag: string) => {
+            return !tag.startsWith("mime:") || tag !== THREAT_SCAN.IN_PROGRESS;
+        });
+    }, [bind.value]);
+
     return (
         <MultiAutoComplete
             {...bind}
-            value={(bind.value || []).filter((tag: string) => !tag.startsWith("mime:"))}
+            values={values}
+            onValuesChange={bind.onChange}
             options={tags.allTags.map(tagItem => tagItem.tag)}
-            label={"Tags"}
-            description={"Type in a new tag or select an existing one."}
-            unique={true}
+            label={
+                <Label text={"Tags"} hint={"Type to add a new tag or select from suggestions."} />
+            }
+            uniqueValues={true}
             allowFreeInput={true}
-            useSimpleValues={true}
             disabled={file ? !canEdit(file) : false}
         />
     );
diff --git a/packages/app-file-manager/src/components/fields/useAccessControlField.tsx b/packages/app-file-manager/src/components/fields/useAccessControlField.tsx
index b20c7e8f70f..b9bd8c82e92 100644
--- a/packages/app-file-manager/src/components/fields/useAccessControlField.tsx
+++ b/packages/app-file-manager/src/components/fields/useAccessControlField.tsx
@@ -1,5 +1,5 @@
 import { useMemo } from "react";
-import { Select } from "@webiny/ui/Select";
+import { Select } from "@webiny/admin-ui";
 import { useFileModel } from "~/index";
 
 interface AccessControlField {
diff --git a/packages/app-file-manager/src/hooks/useDeleteFile.tsx b/packages/app-file-manager/src/hooks/useDeleteFile.tsx
index 0a255a50028..17ef3ee6df6 100644
--- a/packages/app-file-manager/src/hooks/useDeleteFile.tsx
+++ b/packages/app-file-manager/src/hooks/useDeleteFile.tsx
@@ -1,10 +1,9 @@
 import React, { useCallback } from "react";
-import styled from "@emotion/styled";
 import { i18n } from "@webiny/app/i18n";
+import { OverlayLoader, Text } from "@webiny/admin-ui";
 import { useConfirmationDialog, useSnackbar } from "@webiny/app-admin";
 import { FileItem } from "@webiny/app-admin/types";
 import { useFileManagerView } from "~/index";
-import { CircularProgress } from "@webiny/ui/Progress";
 
 const t = i18n.ns("app-admin/file-manager/hooks/use-delete-file");
 
@@ -13,25 +12,20 @@ interface UseDeleteFileParams {
     onDelete?: () => void;
 }
 
-const Filename = styled("span")`
-    font-weight: bold;
-`;
-
 export const useDeleteFile = ({ onDelete, file }: UseDeleteFileParams) => {
     const { deleteFile } = useFileManagerView();
     const { showSnackbar } = useSnackbar();
 
     const { showConfirmation } = useConfirmationDialog({
         title: t`Delete file`,
-        loading: <CircularProgress label={"Deleting file..."} />,
+        loading: <OverlayLoader text={"Deleting file..."} />,
         message: file && (
             <>
-                <p>
-                    {t`You are about to delete file {name}`({
-                        name: <Filename>{file.name}</Filename>
+                <Text>
+                    {t`You are about to delete file {name}. Are you sure you want to continue?`({
+                        name: <strong>{file.name}</strong>
                     })}
-                </p>
-                <p>{t`Are you sure you want to continue?`}</p>
+                </Text>
             </>
         ),
         style: { zIndex: 100 },
diff --git a/packages/app-file-manager/src/modules/Enterprise/HandleWebsocketMessages.tsx b/packages/app-file-manager/src/modules/Enterprise/HandleWebsocketMessages.tsx
index 7b00aefe5ae..8cd9e9edcbe 100644
--- a/packages/app-file-manager/src/modules/Enterprise/HandleWebsocketMessages.tsx
+++ b/packages/app-file-manager/src/modules/Enterprise/HandleWebsocketMessages.tsx
@@ -1,13 +1,8 @@
 import React, { useEffect, useRef } from "react";
-import styled from "@emotion/styled";
 import { IncomingGenericData, useWebsockets } from "@webiny/app-websockets";
 import { useSnackbar } from "@webiny/app-admin";
 import { useFileManagerView } from "~/modules/FileManagerRenderer/FileManagerViewProvider";
 
-const Bold = styled.span`
-    font-weight: bold;
-`;
-
 const THREAT_SCAN_ACTIONS = {
     NO_THREAT_FOUND: "fm.threatScan.noThreatFound",
     THREAT_DETECTED: "fm.threatScan.threatDetected",
@@ -68,8 +63,8 @@ export const HandleWebsocketMessages = () => {
 
                 showErrorSnackbar(
                     <span>
-                        A threat was detected in file <Bold>{name}</Bold>, and it was automatically
-                        deleted!
+                        A threat was detected in file <strong>{name}</strong>, and it was
+                        automatically deleted!
                     </span>
                 );
             }
@@ -87,7 +82,7 @@ export const HandleWebsocketMessages = () => {
                 showErrorSnackbar(
                     <span>
                         We were unable to scan the file. For security reasons, file
-                        <Bold>{name}</Bold> was automatically deleted!
+                        <strong>{name}</strong> was automatically deleted!
                     </span>
                 );
             }
diff --git a/packages/app-file-manager/src/modules/Enterprise/components/ThreatScanInProgress.tsx b/packages/app-file-manager/src/modules/Enterprise/components/ThreatScanInProgress.tsx
deleted file mode 100644
index 236ea72d287..00000000000
--- a/packages/app-file-manager/src/modules/Enterprise/components/ThreatScanInProgress.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import React from "react";
-import { ReactComponent as ScanIcon } from "@material-design-icons/svg/round/policy.svg";
-import styled from "@emotion/styled";
-
-const Container = styled.div`
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: 200px;
-`;
-
-const Thumbnail = styled.div`
-    display: flex;
-    align-items: center;
-    flex-direction: column;
-    row-gap: 20px;
-    svg {
-        opacity: 0.35;
-        fill: var(--mdc-theme-text-secondary-on-background);
-        width: 50px;
-        height: 50px;
-    }
-`;
-
-export const ThreatScanInProgress = () => {
-    return (
-        <Container>
-            <Thumbnail>
-                <ScanIcon />
-                <div>Scanning for threats...</div>
-            </Thumbnail>
-        </Container>
-    );
-};
diff --git a/packages/app-file-manager/src/modules/Enterprise/components/ThreatScanInProgressFileBody.tsx b/packages/app-file-manager/src/modules/Enterprise/components/ThreatScanInProgressFileBody.tsx
new file mode 100644
index 00000000000..5cd55c0f834
--- /dev/null
+++ b/packages/app-file-manager/src/modules/Enterprise/components/ThreatScanInProgressFileBody.tsx
@@ -0,0 +1,24 @@
+import React from "react";
+import { Icon, Text } from "@webiny/admin-ui";
+import { ReactComponent as ScanIcon } from "@webiny/icons/policy.svg";
+
+export const ThreatScanInProgressFileBody = () => {
+    return (
+        <div
+            style={{ height: 150 }}
+            className={"wby-flex wby-items-center wby-justify-center wby-bg-neutral-muted"}
+        >
+            <div className={"wby-flex wby-flex-col wby-items-center wby-gap-md"}>
+                <Icon
+                    icon={<ScanIcon />}
+                    label={"Scanning for threats..."}
+                    size={"lg"}
+                    color={"neutral-light"}
+                />
+                <Text size={"sm"} className={"wby-text-neutral-strong"}>
+                    Scanning for threats...
+                </Text>
+            </div>
+        </div>
+    );
+};
diff --git a/packages/app-file-manager/src/modules/Enterprise/components/ThreatScanInProgressTableCell.tsx b/packages/app-file-manager/src/modules/Enterprise/components/ThreatScanInProgressTableCell.tsx
new file mode 100644
index 00000000000..bc3dcb705df
--- /dev/null
+++ b/packages/app-file-manager/src/modules/Enterprise/components/ThreatScanInProgressTableCell.tsx
@@ -0,0 +1,34 @@
+import React from "react";
+import { Tooltip } from "@webiny/admin-ui";
+import { THREAT_SCAN } from "~/modules/Enterprise/constants";
+import { FileManagerViewConfig } from "~/modules/FileManagerRenderer/FileManagerView/FileManagerViewConfig";
+
+const { Table } = FileManagerViewConfig.Browser;
+
+interface ThreatScanInProgressTableCellProps {
+    children: React.ReactNode;
+}
+
+export const ThreatScanInProgressTableCell = ({ children }: ThreatScanInProgressTableCellProps) => {
+    const { useTableRow, isFolderRow } = Table.Column;
+    const { row } = useTableRow();
+
+    if (isFolderRow(row)) {
+        return <>{children}</>;
+    }
+
+    if (!row.tags.length || !row.tags.includes(THREAT_SCAN.IN_PROGRESS)) {
+        return <>{children}</>;
+    }
+
+    return (
+        <Tooltip
+            content={`This file is currently being scanned for threats.`}
+            trigger={
+                <div className={"wby-pointer-events-none wby-opacity-50 wby-block wby-truncate"}>
+                    {children}
+                </div>
+            }
+        />
+    );
+};
diff --git a/packages/app-file-manager/src/modules/Enterprise/index.tsx b/packages/app-file-manager/src/modules/Enterprise/index.tsx
index 636295511a0..6d6eb3e2578 100644
--- a/packages/app-file-manager/src/modules/Enterprise/index.tsx
+++ b/packages/app-file-manager/src/modules/Enterprise/index.tsx
@@ -2,20 +2,38 @@ import { useWcp } from "@webiny/app-admin";
 import React from "react";
 import { FileManagerViewConfig } from "~/index";
 import { THREAT_SCAN } from "~/modules/Enterprise/constants";
-import { ThreatScanInProgress } from "./components/ThreatScanInProgress";
+import { ThreatScanInProgressFileBody } from "./components/ThreatScanInProgressFileBody";
+import { ThreatScanInProgressTableCell } from "./components/ThreatScanInProgressTableCell";
 import { HandleWebsocketMessages } from "./HandleWebsocketMessages";
 
-const { Grid } = FileManagerViewConfig.Browser;
+const { Grid, Table } = FileManagerViewConfig.Browser;
 
 const DisableFileWhileThreatScanInProgress = Grid.Item.createDecorator(Original => {
     return function Item(props) {
         if (props.file.tags.includes(THREAT_SCAN.IN_PROGRESS)) {
-            return <Original {...props} fileBody={<ThreatScanInProgress />} />;
+            return <Original {...props} fileBody={<ThreatScanInProgressFileBody />} />;
         }
         return <Original {...props} />;
     };
 });
 
+const DisableTableCellWhileThreatScanInProgress = Table.Column.createDecorator(Original => {
+    return function TableCellActionsWhileThreatScanInProgress(props) {
+        if (props.cell) {
+            return (
+                <Original
+                    {...props}
+                    cell={
+                        <ThreatScanInProgressTableCell>{props.cell}</ThreatScanInProgressTableCell>
+                    }
+                />
+            );
+        }
+
+        return <Original {...props} />;
+    };
+});
+
 export const EnterpriseModule = () => {
     const wcp = useWcp();
 
@@ -26,6 +44,7 @@ export const EnterpriseModule = () => {
     return (
         <>
             <DisableFileWhileThreatScanInProgress />
+            <DisableTableCellWhileThreatScanInProgress />
             <FileManagerViewConfig>
                 <HandleWebsocketMessages />
             </FileManagerViewConfig>
diff --git a/packages/app-file-manager/src/modules/FileManagerApiProvider/FileManagerApiContext/FileModelContext.tsx b/packages/app-file-manager/src/modules/FileManagerApiProvider/FileManagerApiContext/FileModelContext.tsx
index 25135c7e1c9..ec1dfca3297 100644
--- a/packages/app-file-manager/src/modules/FileManagerApiProvider/FileManagerApiContext/FileModelContext.tsx
+++ b/packages/app-file-manager/src/modules/FileManagerApiProvider/FileManagerApiContext/FileModelContext.tsx
@@ -1,8 +1,8 @@
 import React, { useState } from "react";
+import { OverlayLoader } from "@webiny/admin-ui";
 import { CmsModel } from "@webiny/app-headless-cms/types";
 import { useQuery } from "@apollo/react-hooks";
 import { GET_FILE_MODEL } from "~/modules/FileManagerApiProvider/graphql";
-import { CircularProgress } from "@webiny/ui/Progress";
 
 export const FileModelContext = React.createContext<CmsModel | undefined>(undefined);
 
@@ -16,7 +16,7 @@ export const FileModelProvider = ({ children }: { children: React.ReactNode }) =
     });
 
     if (!model) {
-        return <CircularProgress label={"Preparing File Manager..."} />;
+        return <OverlayLoader text={"Preparing File Manager..."} />;
     }
 
     return <FileModelContext.Provider value={model}>{children}</FileModelContext.Provider>;
diff --git a/packages/app-file-manager/src/modules/FileManagerRenderer/FileActions/FileDetails/CopyUrl.tsx b/packages/app-file-manager/src/modules/FileManagerRenderer/FileActions/FileDetails/CopyUrl.tsx
index 450be7cd73a..dadb64c06a4 100644
--- a/packages/app-file-manager/src/modules/FileManagerRenderer/FileActions/FileDetails/CopyUrl.tsx
+++ b/packages/app-file-manager/src/modules/FileManagerRenderer/FileActions/FileDetails/CopyUrl.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { ReactComponent as CopyContentIcon } from "@material-design-icons/svg/outlined/content_copy.svg";
+import { ReactComponent as CopyContentIcon } from "@webiny/icons/content_copy.svg";
 import { useCopyFile } from "~/hooks/useCopyFile";
 import { FileManagerViewConfig, useFile } from "~/index";
 
@@ -10,10 +10,10 @@ export const CopyUrl = () => {
     const { copyFileUrl } = useCopyFile({ file });
 
     return (
-        <FileDetails.Action.IconButton
+        <FileDetails.Action.Button
             label={"Copy URL"}
             onAction={copyFileUrl}
-            icon={<CopyContentIcon style={{ margin: "0 8px 0 0" }} />}
+            icon={<CopyContentIcon />}
         />
     );
 };
diff --git a/packages/app-file-manager/src/modules/FileManagerRenderer/FileActions/FileDetails/DeleteImage.tsx b/packages/app-file-manager/src/modules/FileManagerRenderer/FileActions/FileDetails/DeleteImage.tsx
index 9f52b0958d3..ea68ba0c651 100644
--- a/packages/app-file-manager/src/modules/FileManagerRenderer/FileActions/FileDetails/DeleteImage.tsx
+++ b/packages/app-file-manager/src/modules/FileManagerRenderer/FileActions/FileDetails/DeleteImage.tsx
@@ -1,22 +1,10 @@
 import React from "react";
-import mime from "mime";
-import { ReactComponent as DeleteIcon } from "@material-design-icons/svg/outlined/delete.svg";
-import { FileItem } from "@webiny/app-admin/types";
+import { ReactComponent as DeleteIcon } from "@webiny/icons/delete.svg";
 import { FileManagerViewConfig, useFile, useFileDetails, useFileManagerApi } from "~/index";
 import { useDeleteFile } from "~/hooks/useDeleteFile";
 
 const { FileDetails } = FileManagerViewConfig;
 
-const isImage = (file: FileItem) => {
-    const fileType = mime.getType(file && file.name);
-
-    if (fileType) {
-        return fileType.includes("image");
-    }
-
-    return false;
-};
-
 export const DeleteImage = () => {
     const { file } = useFile();
     const { canEdit } = useFileManagerApi();
@@ -31,10 +19,10 @@ export const DeleteImage = () => {
     }
 
     return (
-        <FileDetails.Action.IconButton
-            label={isImage(file) ? "Delete image" : "Delete file"}
+        <FileDetails.Action.Button
+            label={"Delete"}
             onAction={openDialogDeleteFile}
-            icon={<DeleteIcon style={{ margin: "0 8px 0 0" }} />}
+            icon={<DeleteIcon />}
             data-testid={"fm-delete-file-button"}
         />
     );
diff --git a/packages/app-file-manager/src/modules/FileManagerRenderer/FileActions/FileDetails/Download.tsx b/packages/app-file-manager/src/modules/FileManagerRenderer/FileActions/FileDetails/Download.tsx
index 63056ab4562..33e3cf1993a 100644
--- a/packages/app-file-manager/src/modules/FileManagerRenderer/FileActions/FileDetails/Download.tsx
+++ b/packages/app-file-manager/src/modules/FileManagerRenderer/FileActions/FileDetails/Download.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { ReactComponent as DownloadIcon } from "@material-design-icons/svg/outlined/download.svg";
+import { ReactComponent as DownloadIcon } from "@webiny/icons/file_download.svg";
 import { FileManagerViewConfig, useFile } from "~/index";
 
 const { FileDetails } = FileManagerViewConfig;
@@ -9,9 +9,9 @@ export const Download = () => {
 
     return (
         <a rel="noreferrer" target={"_blank"} href={`${file.src}?original`}>
-            <FileDetails.Action.IconButton
+            <FileDetails.Action.Button
                 label={"Download"}
-                icon={<DownloadIcon style={{ margin: "0 8px 0 0" }} />}
+                icon={<DownloadIcon />}
                 onAction={() => {
                     /* Do nothing. */
                 }}
diff --git a/packages/app-file-manager/src/modules/FileManagerRenderer/FileActions/FileDetails/EditImage.tsx b/packages/app-file-manager/src/modules/FileManagerRenderer/FileActions/FileDetails/EditImage.tsx
index f2eafaa13b1..702e4b08e0a 100644
--- a/packages/app-file-manager/src/modules/FileManagerRenderer/FileActions/FileDetails/EditImage.tsx
+++ b/packages/app-file-manager/src/modules/FileManagerRenderer/FileActions/FileDetails/EditImage.tsx
@@ -3,8 +3,8 @@ import React from "react";
 import { Hotkeys } from "react-hotkeyz";
 // @ts-expect-error
 import dataURLtoBlob from "dataurl-to-blob";
-import { ImageEditorDialog } from "@webiny/ui/ImageUpload";
-import { ReactComponent as EditIcon } from "@material-design-icons/svg/outlined/edit.svg";
+import { ImageEditorDialog } from "~/components/ImageEditor/ImageEditorDialog";
+import { ReactComponent as EditIcon } from "@webiny/icons/edit.svg";
 import {
     FileManagerViewConfig,
     useFile,
@@ -83,16 +83,17 @@ export const EditImage = () => {
 
     return (
         <>
-            <FileDetails.Action.IconButton
+            <FileDetails.Action.Button
+                className={"wby-order-last wby-ml-auto"}
                 label={"Edit image"}
                 data-testid={"fm-edit-image-button"}
-                icon={<EditIcon style={{ margin: "0 8px 0 0" }} />}
+                icon={<EditIcon />}
                 onAction={async () => {
                     const dataUrl = await toDataUrl(file.src);
                     dispatch({ type: "setDataUrl", dataUrl });
                 }}
             />
-            <Hotkeys zIndex={60} disabled={!state.dataUrl}>
+            <Hotkeys zIndex={100} disabled={!state.dataUrl}>
                 <ImageEditorDialog
                     data-testid={"fm-image-editor-dialog"}
                     dialogZIndex={100}
diff --git a/packages/app-file-manager/src/modules/FileManagerRenderer/FileActions/FileDetails/MoveToFolder.tsx b/packages/app-file-manager/src/modules/FileManagerRenderer/FileActions/FileDetails/MoveToFolder.tsx
index a719265fe7d..ad61f63db2d 100644
--- a/packages/app-file-manager/src/modules/FileManagerRenderer/FileActions/FileDetails/MoveToFolder.tsx
+++ b/packages/app-file-manager/src/modules/FileManagerRenderer/FileActions/FileDetails/MoveToFolder.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { ReactComponent as MoveFileIcon } from "@material-design-icons/svg/outlined/drive_file_move.svg";
+import { ReactComponent as MoveIcon } from "@webiny/icons/exit_to_app.svg";
 import { FileManagerViewConfig, useFile, useMoveFileToFolder } from "~/index";
 
 const { FileDetails } = FileManagerViewConfig;
@@ -8,11 +8,5 @@ export const MoveToFolder = () => {
     const { file } = useFile();
     const moveToFolder = useMoveFileToFolder(file);
 
-    return (
-        <FileDetails.Action.IconButton
-            label={"Move To Folder"}
-            icon={<MoveFileIcon style={{ margin: "0 8px 0 0" }} />}
-            onAction={moveToFolder}
-        />
-    );
+    return <FileDetails.Action.Button label={"Move"} icon={<MoveIcon />} onAction={moveToFolder} />;
 };
diff --git a/packages/app-file-manager/src/modules/FileManagerRenderer/FileActions/Grid/Delete.tsx b/packages/app-file-manager/src/modules/FileManagerRenderer/FileActions/Grid/Delete.tsx
new file mode 100644
index 00000000000..07114240249
--- /dev/null
+++ b/packages/app-file-manager/src/modules/FileManagerRenderer/FileActions/Grid/Delete.tsx
@@ -0,0 +1,25 @@
+import React from "react";
+import { ReactComponent as DeleteIcon } from "@webiny/icons/delete.svg";
+import { FileManagerViewConfig, useFile, useFileManagerApi } from "~/index";
+import { useDeleteFile } from "~/hooks/useDeleteFile";
+
+const { Browser } = FileManagerViewConfig;
+
+export const Delete = () => {
+    const { file } = useFile();
+    const { canEdit } = useFileManagerApi();
+
+    const { openDialogDeleteFile } = useDeleteFile({
+        file,
+        onDelete: close
+    });
+
+    return (
+        <Browser.Grid.Item.Action.IconButton
+            label={"Delete file"}
+            icon={<DeleteIcon />}
+            onAction={openDialogDeleteFile}
+            disabled={!canEdit(file)}
+        />
+    );
+};
diff --git a/packages/app-file-manager/src/modules/FileManagerRenderer/FileActions/Grid/Download.tsx b/packages/app-file-manager/src/modules/FileManagerRenderer/FileActions/Grid/Download.tsx
index cd0ec7eacf4..53e669abc27 100644
--- a/packages/app-file-manager/src/modules/FileManagerRenderer/FileActions/Grid/Download.tsx
+++ b/packages/app-file-manager/src/modules/FileManagerRenderer/FileActions/Grid/Download.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { ReactComponent as DownloadIcon } from "@material-design-icons/svg/filled/download.svg";
+import { ReactComponent as DownloadIcon } from "@webiny/icons/file_download.svg";
 import { FileManagerViewConfig, useFile } from "~/index";
 
 const { Browser } = FileManagerViewConfig;
@@ -11,6 +11,7 @@ export const Download = () => {
         <a rel="noreferrer" target={"_blank"} href={`${file.src}?original`}>
             <Browser.Grid.Item.Action.IconButton
                 icon={<DownloadIcon />}
+                label={"Download file"}
                 onAction={() => {
                     /* Do nothing. */
                 }}
diff --git a/packages/app-file-manager/src/modules/FileManagerRenderer/FileActions/Grid/MoveToFolder.tsx b/packages/app-file-manager/src/modules/FileManagerRenderer/FileActions/Grid/MoveToFolder.tsx
index 903ec3161b0..3c888b9198a 100644
--- a/packages/app-file-manager/src/modules/FileManagerRenderer/FileActions/Grid/MoveToFolder.tsx
+++ b/packages/app-file-manager/src/modules/FileManagerRenderer/FileActions/Grid/MoveToFolder.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { ReactComponent as MoveIcon } from "@material-design-icons/svg/filled/drive_file_move.svg";
+import { ReactComponent as MoveIcon } from "@webiny/icons/exit_to_app.svg";
 import { FileManagerViewConfig, useFile, useMoveFileToFolder } from "~/index";
 
 const { Browser } = FileManagerViewConfig;
@@ -8,5 +8,11 @@ export const MoveToFolder = () => {
     const { file } = useFile();
     const moveToFolder = useMoveFileToFolder(file);
 
-    return <Browser.Grid.Item.Action.IconButton icon={<MoveIcon />} onAction={moveToFolder} />;
+    return (
+        <Browser.Grid.Item.Action.IconButton
+            label={"Move file"}
+            icon={<MoveIcon />}
+            onAction={moveToFolder}
+        />
+    );
 };
diff --git a/packages/app-file-manager/src/modules/FileManagerRenderer/FileActions/Grid/Settings.tsx b/packages/app-file-manager/src/modules/FileManagerRenderer/FileActions/Grid/Settings.tsx
index 0dfe95f7063..98914516ab3 100644
--- a/packages/app-file-manager/src/modules/FileManagerRenderer/FileActions/Grid/Settings.tsx
+++ b/packages/app-file-manager/src/modules/FileManagerRenderer/FileActions/Grid/Settings.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback } from "react";
-import { ReactComponent as SettingsIcon } from "@material-design-icons/svg/filled/settings.svg";
+import { ReactComponent as EditIcon } from "@webiny/icons/edit.svg";
 import { FileManagerViewConfig, useFile, useFileManagerView } from "~/index";
 
 const { Browser } = FileManagerViewConfig;
@@ -14,7 +14,8 @@ export const Settings = () => {
 
     return (
         <Browser.Grid.Item.Action.IconButton
-            icon={<SettingsIcon />}
+            icon={<EditIcon />}
+            label={"Edit file details"}
             onAction={showDetails}
             data-testid={"fm-file-wrapper-file-info-icon"}
         />
diff --git a/packages/app-file-manager/src/modules/FileManagerRenderer/FileActions/index.tsx b/packages/app-file-manager/src/modules/FileManagerRenderer/FileActions/index.tsx
index 01d1ae93a44..597e47462f5 100644
--- a/packages/app-file-manager/src/modules/FileManagerRenderer/FileActions/index.tsx
+++ b/packages/app-file-manager/src/modules/FileManagerRenderer/FileActions/index.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 import { FileManagerViewConfig } from "~/index";
+import { Delete as GridDelete } from "./Grid/Delete";
 import { Download as GridDownload } from "./Grid/Download";
 import { MoveToFolder as GridMoveToFolder } from "./Grid/MoveToFolder";
 import { Settings as GridSettings } from "./Grid/Settings";
@@ -15,9 +16,10 @@ export const FileActions = () => {
     return (
         <>
             {/* Grid actions. */}
+            <Browser.Grid.Item.Action name={"settings"} element={<GridSettings />} />
             <Browser.Grid.Item.Action name={"download"} element={<GridDownload />} />
             <Browser.Grid.Item.Action name={"move"} element={<GridMoveToFolder />} />
-            <Browser.Grid.Item.Action name={"settings"} element={<GridSettings />} />
+            <Browser.Grid.Item.Action name={"delete"} element={<GridDelete />} />
             {/* File details actions. */}
             <FileDetails.Action name={"download"} element={<FileDetailsDownload />} />
             <FileDetails.Action name={"moveToFolder"} element={<FileDetailsMoveToFolder />} />
diff --git a/packages/app-file-manager/src/modules/FileManagerRenderer/FileManagerView/FileManagerView.tsx b/packages/app-file-manager/src/modules/FileManagerRenderer/FileManagerView/FileManagerView.tsx
index 79df25ce487..34ad3877f2d 100644
--- a/packages/app-file-manager/src/modules/FileManagerRenderer/FileManagerView/FileManagerView.tsx
+++ b/packages/app-file-manager/src/modules/FileManagerRenderer/FileManagerView/FileManagerView.tsx
@@ -1,67 +1,48 @@
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import Files, { FilesRenderChildren } from "react-butterfiles";
-import styled from "@emotion/styled";
 import debounce from "lodash/debounce";
 import omit from "lodash/omit";
 import { positionValues } from "react-custom-scrollbars";
 // @ts-expect-error
 import { useHotkeys } from "react-hotkeyz";
 import { observer } from "mobx-react-lite";
-import { ReactComponent as UploadIcon } from "@material-design-icons/svg/filled/cloud_upload.svg";
-import { ReactComponent as AddIcon } from "@material-design-icons/svg/filled/add.svg";
+import { Heading, type DataTableSorting, Scrollbar } from "@webiny/admin-ui";
 import { i18n } from "@webiny/app/i18n";
-import { useCreateDialog } from "@webiny/app-aco";
 import { OverlayLayout, useSnackbar } from "@webiny/app-admin";
 import { LeftPanel, RightPanel, SplitView } from "@webiny/app-admin/components/SplitView";
 import { useI18N } from "@webiny/app-i18n";
 import { useTenancy } from "@webiny/app-tenancy";
-import { ButtonIcon, ButtonPrimary, ButtonProps, ButtonSecondary } from "@webiny/ui/Button";
-import { Sorting } from "@webiny/ui/DataTable";
-import { Scrollbar } from "@webiny/ui/Scrollbar";
 import { useFileManagerView } from "~/modules/FileManagerRenderer/FileManagerViewProvider";
 import { outputFileSelectionError } from "./outputFileSelectionError";
 import { LeftSidebar } from "./LeftSidebar";
-import { useFileManagerApi, useFileManagerViewConfig } from "~/index";
+import { useFileManagerViewConfig } from "~/index";
 import { FileItem } from "@webiny/app-admin/types";
+import { BatchFileUploader } from "~/BatchFileUploader";
+import { ListFilesSort, ListFilesSortItem } from "~/modules/FileManagerApiProvider/graphql";
+import { TableItem } from "~/types";
+
 import { BottomInfoBar } from "~/components/BottomInfoBar";
 import { BulkActions } from "~/components/BulkActions";
-import { DropFilesHere } from "~/components/DropFilesHere";
+import { FileDropPlaceholder } from "~/components/FileDropPlaceholder";
 import { Empty } from "~/components/Empty";
 import { FileDetails } from "~/components/FileDetails";
+import { Filters } from "~/components/Filters";
 import { Grid } from "~/components/Grid";
-import { LayoutSwitch } from "~/components/LayoutSwitch";
+import { Header } from "~/components/Header";
+import { SearchWidget } from "~/components/SearchWidget";
 import { Table, TableProps } from "~/components/Table";
-import { Title } from "~/components/Title";
+import { TagsList } from "~/components/TagsList";
 import { UploadStatus } from "~/components/UploadStatus";
-import { BatchFileUploader } from "~/BatchFileUploader";
-import { SearchWidget } from "./components/SearchWidget";
-import { Filters } from "./components/Filters";
-import { TagsList } from "~/modules/FileManagerRenderer/FileManagerView/components/TagsList";
-import { ListFilesSort, ListFilesSortItem } from "~/modules/FileManagerApiProvider/graphql";
-import { TableItem } from "~/types";
 
 const t = i18n.ns("app-admin/file-manager/file-manager-view");
 
-const FileListWrapper = styled("div")({
-    zIndex: 60,
-    height: "calc(100vh - 94px)",
-    position: "relative",
-    ".mdc-data-table": {
-        display: "inline-table"
-    }
-});
-
-type BrowseFilesHandler = {
-    browseFiles: FilesRenderChildren["browseFiles"];
-};
-
 type GetFileUploadErrorMessageProps =
     | string
     | {
           message: string;
       };
 
-const createSort = (sorting?: Sorting): ListFilesSort | undefined => {
+const createSort = (sorting?: DataTableSorting): ListFilesSort | undefined => {
     if (!sorting?.length) {
         return undefined;
     }
@@ -97,10 +78,8 @@ const useLayoutId = (applicationId: string) => {
 
 const FileManagerView = () => {
     const view = useFileManagerView();
-    const fileManager = useFileManagerApi();
     const { browser } = useFileManagerViewConfig();
     const { showSnackbar } = useSnackbar();
-    const { showDialog: showCreateFolderDialog } = useCreateDialog();
     const [drawerLoading, setDrawerLoading] = useState<string | null>(null);
 
     const uploader = useMemo<BatchFileUploader>(
@@ -108,7 +87,7 @@ const FileManagerView = () => {
         [view.folderId]
     );
 
-    const [tableSorting, setTableSorting] = useState<Sorting>([]);
+    const [tableSorting, setTableSorting] = useState<DataTableSorting>([]);
     const [currentFile, setCurrentFile] = useState<FileItem>();
     const layoutId = useLayoutId("fm:file");
 
@@ -153,7 +132,7 @@ const FileManagerView = () => {
     }, []);
 
     useHotkeys({
-        zIndex: 50,
+        zIndex: 20,
         keys: {
             esc: view.onClose
         }
@@ -161,9 +140,11 @@ const FileManagerView = () => {
 
     const uploadFiles = async (files: File[]) => {
         uploader.addFiles(files);
+        view.setIsUploadProgressIndicatorVisible(true);
 
         uploader.onUploadFinished(({ uploaded, errors }) => {
             uploader.reset();
+            view.setIsUploadProgressIndicatorVisible(true);
 
             if (errors.length > 0) {
                 showSnackbar(
@@ -187,25 +168,6 @@ const FileManagerView = () => {
         });
     };
 
-    const renderUploadFileAction = useCallback(
-        ({ browseFiles }: BrowseFilesHandler) => {
-            if (!fileManager.canCreate) {
-                return null;
-            }
-            return (
-                <ButtonPrimary
-                    flat={true}
-                    small={true}
-                    onClick={browseFiles as ButtonProps["onClick"]}
-                >
-                    <ButtonIcon icon={<UploadIcon />} />
-                    {t`Upload...`}
-                </ButtonPrimary>
-            );
-        },
-        [fileManager.canCreate]
-    );
-
     const filesBeingUploaded = uploader.getJobs().length;
     const progress = uploader.progress;
 
@@ -277,6 +239,7 @@ const FileManagerView = () => {
                 onChange={view.onChange}
                 onClose={view.onClose}
                 hasOnSelectCallback={view.hasOnSelectCallback}
+                displaySubFolders={view.displaySubFolders}
             />
         );
     };
@@ -290,10 +253,6 @@ const FileManagerView = () => {
         [view.meta, view.loadMoreFiles]
     );
 
-    const onCreateFolder = useCallback(() => {
-        showCreateFolderDialog({ currentParentId: view.folderId });
-    }, [view.folderId]);
-
     const updateFile = useCallback(
         async (data: FileItem) => {
             const { id, ...fileData } = data;
@@ -326,34 +285,10 @@ const FileManagerView = () => {
             >
                 {({ getDropZoneProps, browseFiles }) => (
                     <OverlayLayout
+                        variant={"strong"}
                         onExited={view.onClose}
-                        barLeft={<Title title={view.listTitle} />}
+                        barLeft={<Heading level={5}>{"File manager"}</Heading>}
                         barMiddle={<SearchWidget />}
-                        barRight={
-                            <>
-                                {view.hasOnSelectCallback && view.selected.length > 0 ? (
-                                    <ButtonPrimary
-                                        flat={true}
-                                        small={true}
-                                        onClick={() => view.onChange(view.selected)}
-                                    >
-                                        {t`Select`} {view.multiple && `(${view.selected.length})`}
-                                    </ButtonPrimary>
-                                ) : (
-                                    renderUploadFileAction({ browseFiles } as BrowseFilesHandler)
-                                )}
-                                <ButtonSecondary
-                                    data-testid={"file-manager.create-folder-button"}
-                                    onClick={onCreateFolder}
-                                    small={true}
-                                    style={{ margin: "0 8px" }}
-                                >
-                                    <ButtonIcon icon={<AddIcon />} />
-                                    {t`New Folder`}
-                                </ButtonSecondary>
-                                <LayoutSwitch />
-                            </>
-                        }
                     >
                         <>
                             <FileDetails
@@ -380,24 +315,39 @@ const FileManagerView = () => {
                                     </LeftSidebar>
                                 </LeftPanel>
                                 <RightPanel span={10}>
-                                    <FileListWrapper
-                                        {...getDropZoneProps({
-                                            onDragOver: () => view.setDragging(true),
-                                            onDragLeave: () => view.setDragging(false),
-                                            onDrop: () => view.setDragging(false)
-                                        })}
-                                        data-testid={"fm-list-wrapper"}
+                                    <div
+                                        className={"wby-flex wby-flex-col wby-relative"}
+                                        style={{ height: "calc(100vh - 69px" }}
                                     >
-                                        {view.dragging && <DropFilesHere />}
-                                        <BulkActions />
-                                        <Filters />
-                                        <Scrollbar
-                                            onScrollFrame={scrollFrame =>
-                                                loadMoreOnScroll({ scrollFrame })
-                                            }
+                                        <Header browseFiles={browseFiles} />
+                                        <div
+                                            className={"wby-flex-1"}
+                                            {...getDropZoneProps({
+                                                onDragOver: () => view.setDragging(true),
+                                                onDragLeave: () => view.setDragging(false),
+                                                onDrop: () => view.setDragging(false)
+                                            })}
+                                            data-testid={"fm-list-wrapper"}
                                         >
-                                            {renderList(browseFiles)}
-                                        </Scrollbar>
+                                            <BulkActions />
+                                            <Filters />
+                                            <Scrollbar
+                                                onScrollFrame={scrollFrame =>
+                                                    loadMoreOnScroll({ scrollFrame })
+                                                }
+                                            >
+                                                {renderList(browseFiles)}
+                                            </Scrollbar>
+                                            {view.dragging && <FileDropPlaceholder />}
+                                            <UploadStatus
+                                                numberOfFiles={filesBeingUploaded}
+                                                progress={progress}
+                                                isVisible={view.isUploadProgressIndicatorVisible}
+                                                setIsVisible={
+                                                    view.setIsUploadProgressIndicatorVisible
+                                                }
+                                            />
+                                        </div>
                                         <BottomInfoBar
                                             accept={view.accept}
                                             listing={view.isListLoadingMore}
@@ -405,11 +355,7 @@ const FileManagerView = () => {
                                             totalCount={view.meta?.totalCount ?? 0}
                                             currentCount={view.files.length}
                                         />
-                                        <UploadStatus
-                                            numberOfFiles={filesBeingUploaded}
-                                            progress={progress}
-                                        />
-                                    </FileListWrapper>
+                                    </div>
                                 </RightPanel>
                             </SplitView>
                         </>
diff --git a/packages/app-file-manager/src/modules/FileManagerRenderer/FileManagerView/FileManagerViewConfig.tsx b/packages/app-file-manager/src/modules/FileManagerRenderer/FileManagerView/FileManagerViewConfig.tsx
index 4f6e791627c..57fce407842 100644
--- a/packages/app-file-manager/src/modules/FileManagerRenderer/FileManagerView/FileManagerViewConfig.tsx
+++ b/packages/app-file-manager/src/modules/FileManagerRenderer/FileManagerView/FileManagerViewConfig.tsx
@@ -1,11 +1,22 @@
-import { useMemo } from "react";
+import React, { useMemo } from "react";
 import { createConfigurableComponent } from "@webiny/react-properties";
 import { Browser, BrowserConfig } from "./configComponents/Browser";
 import { FileDetails, FileDetailsConfig } from "./configComponents/FileDetails";
 import { getThumbnailRenderer } from "./getThumbnailRenderer";
+import { CompositionScope } from "@webiny/react-composition";
 
 const base = createConfigurableComponent<FileManagerViewConfigData>("FileManagerView");
 
+const ScopedFileManagerViewConfig = ({ children }: { children: React.ReactNode }) => {
+    return (
+        <CompositionScope name={"fm"}>
+            <base.Config>{children}</base.Config>
+        </CompositionScope>
+    );
+};
+
+ScopedFileManagerViewConfig.displayName = "FileManagerViewConfig";
+
 export const FileManagerViewConfig = Object.assign(base.Config, { Browser, FileDetails });
 export const FileManagerViewWithConfig = base.WithConfig;
 
@@ -27,6 +38,10 @@ export function useFileManagerViewConfig() {
             getThumbnailRenderer,
             browser: {
                 ...browser,
+                table: {
+                    ...browser.table,
+                    cellThumbnails: [...(browser.table?.cellThumbnails || [])]
+                },
                 grid: {
                     itemActions: [...(browser.grid?.itemActions || [])],
                     itemThumbnails: [...(browser.grid?.itemThumbnails || [])]
diff --git a/packages/app-file-manager/src/modules/FileManagerRenderer/FileManagerView/LeftSidebar.tsx b/packages/app-file-manager/src/modules/FileManagerRenderer/FileManagerView/LeftSidebar.tsx
index 9d9f673f37c..bdbdcd831c4 100644
--- a/packages/app-file-manager/src/modules/FileManagerRenderer/FileManagerView/LeftSidebar.tsx
+++ b/packages/app-file-manager/src/modules/FileManagerRenderer/FileManagerView/LeftSidebar.tsx
@@ -1,38 +1,34 @@
-import React from "react";
-import styled from "@emotion/styled";
-import { FolderTree } from "@webiny/app-aco";
-
-const Divider = styled.div`
-    height: 1px;
-    background-color: var(--mdc-theme-on-background);
-    margin: 12px 8px;
-`;
-
-const LeftSidebarContainer = styled.div`
-    padding: 8px;
-    height: calc(100vh - 64px);
-    background-color: var(--mdc-theme-surface);
-    border-right: 1px solid var(--mdc-theme-on-background);
-    overflow-y: scroll;
-`;
+import React, { useEffect } from "react";
+import { Separator } from "@webiny/admin-ui";
+import { FolderTree, useGetFolderHierarchy } from "@webiny/app-aco";
 
 interface LeftSidebarProps {
-    currentFolder?: string;
+    currentFolder: string;
     onFolderClick: (folderId: string) => void;
     children?: React.ReactNode;
 }
 
 export const LeftSidebar = ({ currentFolder, onFolderClick, children }: LeftSidebarProps) => {
+    const { folders, getFolderHierarchy } = useGetFolderHierarchy();
+
+    useEffect(() => {
+        if (folders.length > 0) {
+            return; // Skip if we already have folders in the cache.
+        }
+
+        getFolderHierarchy(currentFolder);
+    }, [currentFolder]);
+
     return (
-        <LeftSidebarContainer>
+        <div className={"wby-p-xs wby-overflow-auto"} style={{ height: "calc(100vh - 69px)" }}>
             <FolderTree
                 focusedFolderId={currentFolder}
                 onFolderClick={data => onFolderClick(data.id)}
                 enableActions={true}
                 enableCreate={true}
             />
-            {children ? <Divider /> : null}
+            {children ? <Separator /> : null}
             {children}
-        </LeftSidebarContainer>
+        </div>
     );
 };
diff --git a/packages/app-file-manager/src/modules/FileManagerRenderer/FileManagerView/components/SearchWidget.tsx b/packages/app-file-manager/src/modules/FileManagerRenderer/FileManagerView/components/SearchWidget.tsx
deleted file mode 100644
index 5e9b006a22c..00000000000
--- a/packages/app-file-manager/src/modules/FileManagerRenderer/FileManagerView/components/SearchWidget.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-import React from "react";
-import styled from "@emotion/styled";
-import { ReactComponent as SearchIcon } from "@material-design-icons/svg/outlined/search.svg";
-import { ReactComponent as FilterIcon } from "@material-design-icons/svg/outlined/filter_alt.svg";
-import { ReactComponent as CloseFilterIcon } from "@material-design-icons/svg/outlined/filter_alt_off.svg";
-import { Icon } from "@webiny/ui/Icon";
-import { IconButton } from "@webiny/ui/Button";
-import { useFileManagerApi, useFileManagerView, useFileManagerViewConfig } from "~/index";
-import { DelayedOnChange } from "@webiny/ui/DelayedOnChange";
-
-const SearchBarIcon = styled(Icon)`
-    &.mdc-button__icon {
-        color: var(--mdc-theme-text-secondary-on-background);
-        position: absolute;
-        width: 24px;
-        height: 24px;
-        left: 8px;
-        top: 8px;
-    }
-`;
-
-const FilterButton = styled(IconButton)`
-    position: absolute;
-    top: -4px;
-    right: -3px;
-`;
-
-const InputSearch = styled.div`
-    background-color: var(--mdc-theme-on-background);
-    position: relative;
-    height: 32px;
-    padding: 3px;
-    width: 100%;
-    border-radius: 2px;
-    > input {
-        border: none;
-        font-size: 14px;
-        width: calc(100% - 10px);
-        height: 100%;
-        margin-left: 32px;
-        background-color: transparent;
-        outline: none;
-        color: var(--mdc-theme-text-primary-on-background);
-    }
-`;
-
-export const SearchWidget = () => {
-    const fileManager = useFileManagerApi();
-    const view = useFileManagerView();
-    const { browser } = useFileManagerViewConfig();
-
-    const toggleFilters = () => {
-        if (view.showingFilters) {
-            view.hideFilters();
-        } else {
-            view.showFilters();
-        }
-    };
-
-    return (
-        <InputSearch>
-            <SearchBarIcon icon={<SearchIcon />} />
-            <DelayedOnChange
-                value={view.searchQuery}
-                onChange={value => view.setSearchQuery(value)}
-            >
-                {({ value, onChange }) => (
-                    <input
-                        id={"file-manager__search-input"}
-                        value={value}
-                        onChange={e => onChange(e.target.value)}
-                        placeholder={view.searchLabel || "Search all files"}
-                        disabled={!fileManager.canRead}
-                        data-testid={"file-manager.search-input"}
-                    />
-                )}
-            </DelayedOnChange>
-            {browser.filters.length > 0 ? (
-                <FilterButton
-                    icon={view.showingFilters ? <CloseFilterIcon /> : <FilterIcon />}
-                    onClick={toggleFilters}
-                />
-            ) : null}
-        </InputSearch>
-    );
-};
diff --git a/packages/app-file-manager/src/modules/FileManagerRenderer/FileManagerView/components/TagsList/Empty.tsx b/packages/app-file-manager/src/modules/FileManagerRenderer/FileManagerView/components/TagsList/Empty.tsx
deleted file mode 100644
index ee86003acfb..00000000000
--- a/packages/app-file-manager/src/modules/FileManagerRenderer/FileManagerView/components/TagsList/Empty.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from "react";
-import { Typography } from "@webiny/ui/Typography";
-import { EmptyContainer } from "./styled";
-
-type EmptyProps = {
-    disclaimer?: string;
-};
-
-export const Empty = ({ disclaimer = `No tags found...` }: EmptyProps) => {
-    return (
-        <EmptyContainer>
-            <Typography use={"body2"}>{disclaimer}</Typography>
-        </EmptyContainer>
-    );
-};
diff --git a/packages/app-file-manager/src/modules/FileManagerRenderer/FileManagerView/components/TagsList/Tag.tsx b/packages/app-file-manager/src/modules/FileManagerRenderer/FileManagerView/components/TagsList/Tag.tsx
deleted file mode 100644
index ac7c082288b..00000000000
--- a/packages/app-file-manager/src/modules/FileManagerRenderer/FileManagerView/components/TagsList/Tag.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import React from "react";
-
-import { ReactComponent as TagIconOutlined } from "@material-design-icons/svg/outlined/label.svg";
-import { ReactComponent as TagIconRound } from "@material-design-icons/svg/round/label.svg";
-import { TagItem } from "@webiny/app-aco/types";
-import { Typography } from "@webiny/ui/Typography";
-import { TagContainer, Icon } from "./styled";
-
-type TagProps = {
-    tagItem: TagItem;
-    active: boolean;
-    onTagClick: (tagItem: TagItem) => void;
-};
-
-export const Tag = ({ tagItem, active, onTagClick }: TagProps) => {
-    return (
-        <TagContainer onClick={() => onTagClick(tagItem)}>
-            <Icon active={active}>{active ? <TagIconRound /> : <TagIconOutlined />}</Icon>
-            <Typography use={"body2"} tag={"div"}>
-                {tagItem.tag}
-            </Typography>
-        </TagContainer>
-    );
-};
diff --git a/packages/app-file-manager/src/modules/FileManagerRenderer/FileManagerView/components/TagsList/TagsList.tsx b/packages/app-file-manager/src/modules/FileManagerRenderer/FileManagerView/components/TagsList/TagsList.tsx
deleted file mode 100644
index ea6809ce790..00000000000
--- a/packages/app-file-manager/src/modules/FileManagerRenderer/FileManagerView/components/TagsList/TagsList.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-import React, { useCallback } from "react";
-import { Loader } from "@webiny/app-aco";
-import { Empty } from "./Empty";
-import { Tag } from "./Tag";
-import { TagItem } from "@webiny/app-aco/types";
-import { useFileManagerView } from "~/modules/FileManagerRenderer/FileManagerViewProvider";
-import { TagListWrapper, TagsFilterSelect, TagsTitle } from "./styled";
-
-interface TagListProps {
-    loading: boolean;
-    onActivatedTagsChange: (tags: string[]) => void;
-    tags: TagItem[];
-    activeTags: string[];
-    emptyDisclaimer?: string;
-}
-
-const options = [
-    {
-        value: "OR",
-        label: "Match any"
-    },
-    {
-        value: "AND",
-        label: "Match all"
-    }
-];
-
-export const TagsList = ({
-    loading,
-    tags,
-    emptyDisclaimer,
-    onActivatedTagsChange,
-    activeTags
-}: TagListProps) => {
-    const fmView = useFileManagerView();
-
-    const toggleTag = useCallback(
-        (tag: TagItem["tag"]) => {
-            const finalTags = Array.isArray(activeTags) ? [...activeTags] : [];
-
-            if (finalTags.find(item => tag === item)) {
-                finalTags.splice(finalTags.indexOf(tag), 1);
-            } else {
-                finalTags.push(tag);
-            }
-
-            onActivatedTagsChange(finalTags);
-        },
-        [activeTags]
-    );
-
-    if (loading) {
-        return <Loader />;
-    }
-
-    if (tags.length > 0) {
-        return (
-            <>
-                <TagListWrapper>
-                    <TagsTitle use="subtitle1">Filter by tag</TagsTitle>
-                    {tags.length > 1 ? (
-                        <TagsFilterSelect
-                            disabled={fmView.tags.activeTags.length < 2}
-                            size={"small"}
-                            value={fmView.tags.filterMode}
-                            onChange={mode => fmView.tags.setFilterMode(mode)}
-                            options={options}
-                        />
-                    ) : null}
-                </TagListWrapper>
-
-                {tags.map((tagItem, index) => (
-                    <Tag
-                        key={`tag-${index}`}
-                        tagItem={tagItem}
-                        active={activeTags.includes(tagItem.tag)}
-                        onTagClick={tagItem => {
-                            toggleTag(tagItem.tag);
-                        }}
-                    />
-                ))}
-            </>
-        );
-    }
-
-    return <Empty disclaimer={emptyDisclaimer} />;
-};
diff --git a/packages/app-file-manager/src/modules/FileManagerRenderer/FileManagerView/components/TagsList/styled.tsx b/packages/app-file-manager/src/modules/FileManagerRenderer/FileManagerView/components/TagsList/styled.tsx
deleted file mode 100644
index d9c1b9c5d6a..00000000000
--- a/packages/app-file-manager/src/modules/FileManagerRenderer/FileManagerView/components/TagsList/styled.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import styled from "@emotion/styled";
-import { Select } from "@webiny/ui/Select";
-import { Typography } from "@webiny/ui/Typography";
-
-export const TagContainer = styled("div")`
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    cursor: pointer;
-    padding: 4px 8px;
-    color: var(--mdc-theme-on-surface);
-
-    &:hover {
-        background: var(--mdc-theme-background);
-    }
-`;
-
-type IconProps = {
-    active: boolean;
-};
-
-export const Icon = styled("div")<IconProps>`
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 20px;
-    width: 20px;
-    cursor: pointer;
-    padding-right: 4px;
-    fill: ${props =>
-        props.active
-            ? "var(--mdc-theme-secondary)"
-            : "var(--mdc-theme-text-secondary-on-background)"};
-`;
-
-export const EmptyContainer = styled("div")`
-    padding: 8px 12px 8px;
-    color: var(--webiny-theme-color-text-secondary);
-    fill: currentColor;
-`;
-export const TagListWrapper = styled("div")`
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-start;
-    flex-wrap: wrap;
-    margin: 8px;
-`;
-
-export const TagsFilterSelect = styled(Select)`
-    max-width: 150px;
-    min-width: auto;
-    flex-shrink: 0;
-`;
-
-export const TagsTitle = styled(Typography)`
-    margin: 0 0 5px;
-    flex: 1 1 auto;
-`;
diff --git a/packages/app-file-manager/src/modules/FileManagerRenderer/FileManagerView/configComponents/Browser/FileAction.tsx b/packages/app-file-manager/src/modules/FileManagerRenderer/FileManagerView/configComponents/Browser/FileAction.tsx
index 9c4b414cb48..ede69cf5f4c 100644
--- a/packages/app-file-manager/src/modules/FileManagerRenderer/FileManagerView/configComponents/Browser/FileAction.tsx
+++ b/packages/app-file-manager/src/modules/FileManagerRenderer/FileManagerView/configComponents/Browser/FileAction.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-import { CompositionScope } from "@webiny/react-composition";
 import { AcoConfig, RecordActionConfig } from "@webiny/app-aco";
 
 const { Record } = AcoConfig;
@@ -10,11 +9,9 @@ type FileActionProps = React.ComponentProps<typeof AcoConfig.Record.Action>;
 
 const BaseFileAction = (props: FileActionProps) => {
     return (
-        <CompositionScope name={"fm"}>
-            <AcoConfig>
-                <Record.Action {...props} />
-            </AcoConfig>
-        </CompositionScope>
+        <AcoConfig>
+            <Record.Action {...props} />
+        </AcoConfig>
     );
 };
 
diff --git a/packages/app-file-manager/src/modules/FileManagerRenderer/FileManagerView/configComponents/Browser/FolderAction.tsx b/packages/app-file-manager/src/modules/FileManagerRenderer/FileManagerView/configComponents/Browser/FolderAction.tsx
index f019f44b279..7839116b234 100644
--- a/packages/app-file-manager/src/modules/FileManagerRenderer/FileManagerView/configComponents/Browser/FolderAction.tsx
+++ b/packages/app-file-manager/src/modules/FileManagerRenderer/FileManagerView/configComponents/Browser/FolderAction.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-import { CompositionScope } from "@webiny/react-composition";
 import { AcoConfig, FolderActionConfig } from "@webiny/app-aco";
 
 const { Folder } = AcoConfig;
@@ -10,11 +9,9 @@ type FolderActionProps = React.ComponentProps<typeof AcoConfig.Folder.Action>;
 
 const BaseFolderAction = (props: FolderActionProps) => {
     return (
-        <CompositionScope name={"fm"}>
-            <AcoConfig>
-                <Folder.Action {...props} />
-            </AcoConfig>
-        </CompositionScope>
+        <AcoConfig>
+            <Folder.Action {...props} />
+        </AcoConfig>
     );
 };
 
diff --git a/packages/app-file-manager/src/modules/FileManagerRenderer/FileManagerView/configComponents/Browser/Table/Column.tsx b/packages/app-file-manager/src/modules/FileManagerRenderer/FileManagerView/configComponents/Browser/Table/Column.tsx
index 91c21eb81a5..02fb343eab2 100644
--- a/packages/app-file-manager/src/modules/FileManagerRenderer/FileManagerView/configComponents/Browser/Table/Column.tsx
+++ b/packages/app-file-manager/src/modules/FileManagerRenderer/FileManagerView/configComponents/Browser/Table/Column.tsx
@@ -1,7 +1,7 @@
 import React from "react";
-import { CompositionScope } from "@webiny/react-composition";
 import { AcoConfig, TableColumnConfig as ColumnConfig } from "@webiny/app-aco";
 import { TableItem } from "~/types";
+import { makeDecoratable } from "@webiny/react-composition";
 
 const { Table } = AcoConfig;
 
@@ -9,16 +9,16 @@ export { ColumnConfig };
 
 type ColumnProps = React.ComponentProps<typeof AcoConfig.Table.Column>;
 
-const BaseColumn = (props: ColumnProps) => {
+const BaseColumnComponent = (props: ColumnProps) => {
     return (
-        <CompositionScope name={"fm"}>
-            <AcoConfig>
-                <Table.Column {...props} />
-            </AcoConfig>
-        </CompositionScope>
+        <AcoConfig>
+            <Table.Column {...props} />
+        </AcoConfig>
     );
 };
 
+const BaseColumn = makeDecoratable("Column", BaseColumnComponent);
+
 export const Column = Object.assign(BaseColumn, {
     useTableRow: Table.Column.createUseTableRow<TableItem>(),
     isFolderRow: Table.Column.isFolderRow
diff --git a/packages/app-file-manager/src/modules/FileManagerRenderer/FileManagerView/configComponents/Browser/Table/Thumbnail.tsx b/packages/app-file-manager/src/modules/FileManagerRenderer/FileManagerView/configComponents/Browser/Table/Thumbnail.tsx
new file mode 100644
index 00000000000..e599a57c978
--- /dev/null
+++ b/packages/app-file-manager/src/modules/FileManagerRenderer/FileManagerView/configComponents/Browser/Table/Thumbnail.tsx
@@ -0,0 +1,28 @@
+import React from "react";
+import { makeDecoratable } from "@webiny/react-composition";
+import { Property, useIdGenerator } from "@webiny/react-properties";
+
+export interface ThumbnailConfig {
+    type: string;
+    element: JSX.Element;
+}
+
+export interface RendererProps {
+    type: string;
+    element: JSX.Element;
+}
+
+export const Thumbnail = makeDecoratable("Thumbnail", ({ type, element }: RendererProps) => {
+    const getId = useIdGenerator("browser:table:thumbnail");
+
+    return (
+        <Property id="browser" name={"browser"}>
+            <Property id="table" name={"table"}>
+                <Property id={getId(type)} name={"cellThumbnails"} array={true}>
+                    <Property id={getId(type, "type")} name={"type"} value={type} />
+                    <Property id={getId(type, "element")} name={"element"} value={element} />
+                </Property>
+            </Property>
+        </Property>
+    );
+});
diff --git a/packages/app-file-manager/src/modules/FileManagerRenderer/FileManagerView/configComponents/Browser/Table/index.ts b/packages/app-file-manager/src/modules/FileManagerRenderer/FileManagerView/configComponents/Browser/Table/index.ts
index d585009cae2..ff317e61c82 100644
--- a/packages/app-file-manager/src/modules/FileManagerRenderer/FileManagerView/configComponents/Browser/Table/index.ts
+++ b/packages/app-file-manager/src/modules/FileManagerRenderer/FileManagerView/configComponents/Browser/Table/index.ts
@@ -1,9 +1,14 @@
 import { Column, ColumnConfig } from "./Column";
+import { Thumbnail, ThumbnailConfig } from "./Thumbnail";
 
 export interface TableConfig {
     columns: ColumnConfig[];
+    cellThumbnails: ThumbnailConfig[];
 }
 
 export const Table = {
-    Column
+    Column,
+    Cell: {
+        Thumbnail
+    }
 };
diff --git a/packages/app-file-manager/src/modules/FileManagerRenderer/FileManagerView/configComponents/FileDetails/index.ts b/packages/app-file-manager/src/modules/FileManagerRenderer/FileManagerView/configComponents/FileDetails/index.ts
index 824b22acc70..c04a8c6225b 100644
--- a/packages/app-file-manager/src/modules/FileManagerRenderer/FileManagerView/configComponents/FileDetails/index.ts
+++ b/packages/app-file-manager/src/modules/FileManagerRenderer/FileManagerView/configComponents/FileDetails/index.ts
@@ -15,7 +15,7 @@ export interface FileDetailsConfig {
 }
 
 export const FileDetails = {
-    Action: Object.assign(Action, { IconButton: ActionButton }),
+    Action: Object.assign(Action, { Button: ActionButton }),
     Preview: {
         Thumbnail
     },
diff --git a/packages/app-file-manager/src/modules/FileManagerRenderer/FileManagerViewProvider/FileManagerViewContext.tsx b/packages/app-file-manager/src/modules/FileManagerRenderer/FileManagerViewProvider/FileManagerViewContext.tsx
index 50c9fa24be4..a5d3b899b45 100644
--- a/packages/app-file-manager/src/modules/FileManagerRenderer/FileManagerViewProvider/FileManagerViewContext.tsx
+++ b/packages/app-file-manager/src/modules/FileManagerRenderer/FileManagerViewProvider/FileManagerViewContext.tsx
@@ -27,16 +27,20 @@ export interface DeleteFileOptions {
 
 export interface FileManagerViewContext<TFileItem extends FileItem = FileItem> extends PublicState {
     accept: string[];
+    currentFolder: FolderItem | null;
     createFile: (data: TFileItem) => Promise<TFileItem | undefined>;
     deleteFile: (id: string, options?: DeleteFileOptions) => Promise<void>;
     files: FileItem[];
     folderId: string;
     folders: FolderItem[];
+    displaySubFolders: boolean;
     getFile: (id: string) => Promise<TFileItem | undefined>;
     hideFileDetails: () => void;
     hideFilters: () => void;
     isListLoading: boolean;
     isListLoadingMore: boolean;
+    isRootFolder: boolean;
+    isUploadProgressIndicatorVisible: boolean;
     hasOnSelectCallback: boolean;
     listTitle: string;
     loadMoreFiles: () => void;
@@ -49,10 +53,12 @@ export interface FileManagerViewContext<TFileItem extends FileItem = FileItem> e
     own: boolean;
     scope?: string;
     setDragging: (state: boolean) => void;
+    setDisplaySubFolders: (state: boolean) => void;
     setFilters: (data: Record<string, any>) => void;
     setFolderId: (folderId: string) => void;
     setListSort: (state: ListSearchRecordsSort) => void;
     setListTable: (mode: boolean) => void;
+    setIsUploadProgressIndicatorVisible: (visible: boolean) => void;
     setSearchQuery: (query: string) => void;
     setSelected: (files: TFileItem[]) => void;
     showFileDetails: (id: string) => void;
@@ -119,7 +125,7 @@ export const FileManagerViewProvider = ({ children, ...props }: FileManagerViewP
     const modifiers = { scope: props.scope, own: props.own, accept: props.accept };
     const fileManager = useFileManagerApi();
     const { folders: originalFolders, loading: foldersLoading } = useListFolders();
-    const { currentFolderId = ROOT_FOLDER, navigateToFolder } = useNavigateFolder();
+    const { currentFolderId, navigateToFolder, isRootFolder } = useNavigateFolder();
     const tags = useTags(modifiers);
     const [state, setState] = useStateIfMounted(initializeState());
 
@@ -250,7 +256,7 @@ export const FileManagerViewProvider = ({ children, ...props }: FileManagerViewP
 
         const meta = {
             location: {
-                folderId: currentFolderId || ROOT_FOLDER
+                folderId: currentFolderId
             }
         };
 
@@ -351,7 +357,7 @@ export const FileManagerViewProvider = ({ children, ...props }: FileManagerViewP
         const tags = props.scope ? [props.scope] : [];
         const meta = {
             location: {
-                folderId: currentFolderId || ROOT_FOLDER
+                folderId: currentFolderId
             }
         };
 
@@ -412,6 +418,7 @@ export const FileManagerViewProvider = ({ children, ...props }: FileManagerViewP
         deleteFile,
         files,
         folderId: currentFolderId,
+        currentFolder: originalFolders.find(folder => folder.id === currentFolderId) ?? null,
         folders: state.isSearch ? [] : folders,
         getFile,
         hideFileDetails() {
@@ -431,6 +438,7 @@ export const FileManagerViewProvider = ({ children, ...props }: FileManagerViewP
             loading.INIT || foldersLoading.INIT || loading.LIST || foldersLoading.LIST
         ),
         isListLoadingMore: Boolean(loading.LIST_MORE),
+        isRootFolder: Boolean(isRootFolder),
         listTitle,
         loadMoreFiles,
         meta,
@@ -464,6 +472,12 @@ export const FileManagerViewProvider = ({ children, ...props }: FileManagerViewP
                 dragging: value
             }));
         },
+        setDisplaySubFolders(value: boolean) {
+            setState(state => ({
+                ...state,
+                displaySubFolders: value
+            }));
+        },
         setFilters(data) {
             // Create filters object excluding entries with `undefined` values
             const filters = Object.fromEntries(
@@ -481,6 +495,12 @@ export const FileManagerViewProvider = ({ children, ...props }: FileManagerViewP
             resetSearchParameters(folderId);
             navigateToFolder(folderId);
         },
+        setIsUploadProgressIndicatorVisible(visible: boolean) {
+            setState(state => ({
+                ...state,
+                isUploadProgressIndicatorVisible: visible
+            }));
+        },
         setListSort(sort: ListSearchRecordsSort) {
             setState(state => ({
                 ...state,
diff --git a/packages/app-file-manager/src/modules/FileManagerRenderer/FileManagerViewProvider/state.ts b/packages/app-file-manager/src/modules/FileManagerRenderer/FileManagerViewProvider/state.ts
index 75507b2112a..c69437d64f4 100644
--- a/packages/app-file-manager/src/modules/FileManagerRenderer/FileManagerViewProvider/state.ts
+++ b/packages/app-file-manager/src/modules/FileManagerRenderer/FileManagerViewProvider/state.ts
@@ -4,9 +4,11 @@ import { Settings } from "~/types";
 
 export interface State {
     activeTags: string[];
+    displaySubFolders: boolean;
     dragging: boolean;
     filters: Record<string, any> | undefined;
     isSearch: boolean;
+    isUploadProgressIndicatorVisible: boolean;
     limit: number;
     listSort?: ListFilesSort;
     listTable: boolean;
@@ -38,7 +40,9 @@ export const getScopeWhereParams = (scope: string | undefined) => {
 export const initializeState = (): State => {
     return {
         activeTags: [],
+        displaySubFolders: true,
         dragging: false,
+        isUploadProgressIndicatorVisible: true,
         isSearch: false,
         filters: undefined,
         limit: 50,
diff --git a/packages/app-file-manager/src/modules/FileManagerRenderer/FileManagerViewProvider/useTags.ts b/packages/app-file-manager/src/modules/FileManagerRenderer/FileManagerViewProvider/useTags.ts
index 1b759ee84b8..375cb688175 100644
--- a/packages/app-file-manager/src/modules/FileManagerRenderer/FileManagerViewProvider/useTags.ts
+++ b/packages/app-file-manager/src/modules/FileManagerRenderer/FileManagerViewProvider/useTags.ts
@@ -3,6 +3,7 @@ import { useSecurity } from "@webiny/app-security";
 import { useFileManagerApi } from "~/modules/FileManagerApiProvider/FileManagerApiContext";
 import { DEFAULT_SCOPE } from "~/constants";
 import { FileTag } from "~/types";
+import { THREAT_SCAN } from "~/modules/Enterprise/constants";
 
 const sortTags = (tags: FileTag[]) => {
     return tags.sort((a, b) => a.tag.localeCompare(b.tag));
@@ -64,6 +65,7 @@ export const useTags = ({ scope, own }: UseTagsParams) => {
             return tags
                 .filter(({ tag }) => tag !== scope)
                 .filter(({ tag }) => !tag.startsWith("mime:"))
+                .filter(({ tag }) => tag !== THREAT_SCAN.IN_PROGRESS)
                 .map(item => {
                     const tagName = scope ? item.tag.replace(`${scope}:`, "") : item.tag;
                     return {
diff --git a/packages/app-file-manager/src/modules/FileManagerRenderer/filters/FilterByType.tsx b/packages/app-file-manager/src/modules/FileManagerRenderer/filters/FilterByType.tsx
index 74f0f29e5d9..5c7e9c2e3d4 100644
--- a/packages/app-file-manager/src/modules/FileManagerRenderer/filters/FilterByType.tsx
+++ b/packages/app-file-manager/src/modules/FileManagerRenderer/filters/FilterByType.tsx
@@ -1,6 +1,6 @@
 import React from "react";
+import { Select } from "@webiny/admin-ui";
 import { useBind } from "@webiny/form";
-import { Select } from "@webiny/ui/Select";
 
 export const FilterByType = () => {
     const bind = useBind({
@@ -18,5 +18,5 @@ export const FilterByType = () => {
         { label: "Documents", value: "application/" }
     ];
 
-    return <Select {...bind} placeholder={"Filter by type"} options={options} size="medium" />;
+    return <Select {...bind} placeholder={"Filter by type"} options={options} size={"md"} />;
 };
diff --git a/packages/app-file-manager/src/modules/FileManagerRenderer/index.tsx b/packages/app-file-manager/src/modules/FileManagerRenderer/index.tsx
index ac381db78c7..236adf1e472 100644
--- a/packages/app-file-manager/src/modules/FileManagerRenderer/index.tsx
+++ b/packages/app-file-manager/src/modules/FileManagerRenderer/index.tsx
@@ -19,9 +19,13 @@ import {
     EditFile,
     MoveFile
 } from "~/components/Table";
-import { DefaultRenderer } from "~/modules/ThumbnailRenderers/DefaultRenderer";
-import { ImageRenderer } from "~/modules/ThumbnailRenderers/ImageRenderer";
+import { GridItemDefaultRenderer } from "~/modules/ThumbnailRenderers/GridItemDefaultRenderer";
+import { GridItemImageRenderer } from "~/modules/ThumbnailRenderers/GridItemImageRenderer";
 import { FileActions } from "~/modules/FileManagerRenderer/FileActions";
+import { FilePreviewImageRenderer } from "~/modules/ThumbnailRenderers/FilePreviewImageRenderer";
+import { TableItemDefaultRenderer } from "~/modules/ThumbnailRenderers/TableItemDefaultRenderer";
+import { TableItemImageRenderer } from "~/modules/ThumbnailRenderers/TableItemImageRenderer";
+import { FilePreviewDefaultRenderer } from "~/modules/ThumbnailRenderers/FilePreviewDefaultRenderer";
 
 const { Browser, FileDetails } = FileManagerConfig;
 
@@ -30,18 +34,23 @@ export const FileManagerRendererModule = () => {
         <>
             <FileManagerRenderer />
             <FileManagerConfig>
+                {/* Filters */}
                 <Browser.FilterByTags />
                 <Browser.Filter name={"type"} element={<FilterByType />} />
+                {/* Bulk Actions */}
                 <Browser.BulkAction name={"edit"} element={<ActionEdit />} />
                 <Browser.BulkAction name={"move"} element={<ActionMove />} />
                 <Browser.BulkAction name={"delete"} element={<ActionDelete />} />
+                {/* Folder Actions */}
                 <Browser.FolderAction name={"edit"} element={<EditFolder />} />
                 <Browser.FolderAction name={"permissions"} element={<SetFolderPermissions />} />
                 <Browser.FolderAction name={"delete"} element={<DeleteFolder />} />
+                {/* File Actions */}
                 <Browser.FileAction name={"copy"} element={<CopyFile />} />
                 <Browser.FileAction name={"edit"} element={<EditFile />} />
                 <Browser.FileAction name={"move"} element={<MoveFile />} />
                 <Browser.FileAction name={"delete"} element={<DeleteFile />} />
+                {/* Table Columns */}
                 <Browser.Table.Column
                     name={"name"}
                     header={"Name"}
@@ -74,31 +83,49 @@ export const FileManagerRendererModule = () => {
                     name={"actions"}
                     header={" "}
                     cell={<CellActions />}
-                    size={80}
-                    className={"rmwc-data-table__cell--align-end"}
+                    size={56}
+                    className={"wby-text-right"}
                     hideable={false}
                     resizable={false}
                 />
+                {/* File Details Fields */}
                 <FileDetails.Field name={"name"} element={<Name />} />
                 <FileDetails.Field name={"tags"} element={<Tags />} />
                 <Browser.BulkEditField name={"tags"} element={<Tags />} />
                 <FileDetails.Field name={"aliases"} element={<Aliases />} />
+                <FileDetails.GroupFields value={false} />
+                {/* File Details Actions */}
+                <FileActions />
+                {/* Access Control */}
                 <Wcp.CanUsePrivateFiles>
                     <FileDetails.Field
                         name={"accessControl"}
                         element={<AccessControl defaultValue={"public"} />}
+                        after={"tags"}
                     />
                     <Browser.BulkEditField
                         name={"accessControl"}
                         element={<AccessControl placeholder={"Select privacy settings"} />}
                     />
                 </Wcp.CanUsePrivateFiles>
-                <FileDetails.GroupFields value={false} />
-                <FileActions />
-                <Browser.Grid.Item.Thumbnail type={"*/*"} element={<DefaultRenderer />} />
-                <Browser.Grid.Item.Thumbnail type={"image/*"} element={<ImageRenderer />} />
-                <FileDetails.Preview.Thumbnail type={"*/*"} element={<DefaultRenderer />} />
-                <FileDetails.Preview.Thumbnail type={"image/*"} element={<ImageRenderer />} />
+                {/* Grid Thumbnail */}
+                <Browser.Grid.Item.Thumbnail type={"*/*"} element={<GridItemDefaultRenderer />} />
+                <Browser.Grid.Item.Thumbnail type={"image/*"} element={<GridItemImageRenderer />} />
+                {/* Table Thumbnail */}
+                <Browser.Table.Cell.Thumbnail
+                    type={"image/*"}
+                    element={<TableItemImageRenderer />}
+                />
+                <Browser.Table.Cell.Thumbnail type={"*/*"} element={<TableItemDefaultRenderer />} />
+                {/* File Details Thumbnail */}
+                <FileDetails.Preview.Thumbnail
+                    type={"*/*"}
+                    element={<FilePreviewDefaultRenderer />}
+                />
+                <FileDetails.Preview.Thumbnail
+                    type={"image/*"}
+                    element={<FilePreviewImageRenderer />}
+                />
             </FileManagerConfig>
         </>
     );
diff --git a/packages/app-file-manager/src/modules/HeadlessCms/fileField.tsx b/packages/app-file-manager/src/modules/HeadlessCms/fileField.tsx
index c67d23ca4d3..8f324707ad8 100644
--- a/packages/app-file-manager/src/modules/HeadlessCms/fileField.tsx
+++ b/packages/app-file-manager/src/modules/HeadlessCms/fileField.tsx
@@ -1,8 +1,7 @@
 import React from "react";
-import { ReactComponent as FileIcon } from "@material-design-icons/svg/outlined/file_present.svg";
+import { ReactComponent as FileIcon } from "@webiny/icons/file_present.svg";
 import { CmsModelFieldTypePlugin } from "@webiny/app-headless-cms/types";
-import { Cell, Grid } from "@webiny/ui/Grid";
-import { Switch } from "@webiny/ui/Switch";
+import { Grid, Switch } from "@webiny/admin-ui";
 import { Bind } from "@webiny/form";
 
 export const fileField: CmsModelFieldTypePlugin = {
@@ -30,14 +29,14 @@ export const fileField: CmsModelFieldTypePlugin = {
         renderSettings: () => {
             return (
                 <Grid>
-                    <Cell span={12}>
+                    <Grid.Column span={12}>
                         <Bind name={"settings.imagesOnly"}>
                             <Switch
                                 label={"Images only"}
                                 description={"Allow only images to be selected"}
                             />
                         </Bind>
-                    </Cell>
+                    </Grid.Column>
                 </Grid>
             );
         }
diff --git a/packages/app-file-manager/src/modules/HeadlessCms/fileRenderer/File.tsx b/packages/app-file-manager/src/modules/HeadlessCms/fileRenderer/File.tsx
deleted file mode 100644
index f8e304c3a3a..00000000000
--- a/packages/app-file-manager/src/modules/HeadlessCms/fileRenderer/File.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-import React, { useCallback } from "react";
-import { Image } from "@webiny/app/components";
-import * as Ui from "@webiny/ui/ImageUpload";
-import { createRenderImagePreview, imagePlugins } from "./utils";
-import fileIcon from "@material-design-icons/svg/round/insert_drive_file.svg";
-
-const imagePreviewProps = {
-    transform: { width: 300 },
-    style: {
-        width: "100%",
-        height: "100%",
-        maxHeight: "160px",
-        background: "repeating-conic-gradient(#efefef 0% 25%, transparent 0% 50%) 50%/25px 25px",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        objectFit: "contain"
-    }
-};
-
-const defaultStyles = {
-    width: "100%",
-    height: "auto"
-};
-
-export interface FileProps {
-    url: string;
-    onRemove: () => void;
-    onEdit?: () => void;
-    placeholder?: string;
-    styles?: Record<string, any>;
-    showFileManager?: () => void;
-}
-
-export const File = (props: FileProps) => {
-    const { url, onRemove, onEdit, placeholder, showFileManager } = props;
-
-    const styles = props.styles || defaultStyles;
-
-    const isImage = useCallback((url: string) => {
-        return imagePlugins.some(extension => url.includes(extension));
-    }, []);
-
-    const getImageSrc = useCallback((url?: string) => {
-        if (url && isImage(url)) {
-            return url;
-        }
-        return fileIcon;
-    }, []);
-
-    // TODO @ts-refactor figure out correct type
-    const defaultRenderImagePreview = (renderImageProps: any) => (
-        <Image {...renderImageProps} {...imagePreviewProps} />
-    );
-
-    const renderImagePreview = (url: string) => {
-        if (url && !isImage(url)) {
-            return createRenderImagePreview({ value: url, imagePreviewProps });
-        }
-
-        return defaultRenderImagePreview;
-    };
-
-    return (
-        <>
-            <Ui.Image
-                renderImagePreview={renderImagePreview(url)}
-                style={styles}
-                value={url ? { src: getImageSrc(url) } : null}
-                uploadImage={() => {
-                    if (!showFileManager) {
-                        return;
-                    }
-                    showFileManager();
-                }}
-                removeImage={onRemove}
-                editImage={onEdit}
-                placeholder={placeholder}
-                containerStyle={{ height: "auto" }}
-            />
-        </>
-    );
-};
diff --git a/packages/app-file-manager/src/modules/HeadlessCms/fileRenderer/fileField.tsx b/packages/app-file-manager/src/modules/HeadlessCms/fileRenderer/fileField.tsx
index dc61a46f771..c91fc31e249 100644
--- a/packages/app-file-manager/src/modules/HeadlessCms/fileRenderer/fileField.tsx
+++ b/packages/app-file-manager/src/modules/HeadlessCms/fileRenderer/fileField.tsx
@@ -1,96 +1,53 @@
 import React from "react";
-import styled from "@emotion/styled";
 import {
     CmsModelFieldRendererPlugin,
     CmsModelFieldRendererProps
 } from "@webiny/app-headless-cms/types";
 import { FileManager } from "@webiny/app-admin/components";
-import { Typography } from "@webiny/ui/Typography";
-import { File } from "./File";
 import { EditFileUsingUrl } from "~/components/EditFileUsingUrl";
-import { FormElementMessage } from "@webiny/ui/FormElementMessage";
-
-const ImageFieldWrapper = styled("div")({
-    background: "var(--mdc-theme-on-background)",
-    borderBottom: "1px solid rgba(0, 0, 0, 0.42)",
-    height: "100%",
-    padding: "16px",
-    boxSizing: "border-box",
-    display: "flex",
-    flexDirection: "column",
-    span: {
-        color: "var(--mdc-theme-text-primary-on-background)"
-    }
-});
-
-const InnerImageFieldWrapper = styled("div")({
-    background: "repeating-conic-gradient(#efefef 0% 25%, transparent 0% 50%) 50%/25px 25px",
-    height: "100%",
-    width: "100%",
-    boxSizing: "border-box",
-    backgroundColor: "#fff",
-    border: "1px solid var(--mdc-theme-background)",
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "center",
-    flexBasis: "100%",
-    maxHeight: "180px",
-    margin: "16px 0 0",
-    "> div": {
-        minWidth: "200px",
-        maxHeight: "180px",
-        padding: "30px"
-    }
-});
+import { FilePicker } from "@webiny/admin-ui";
+import { getSupportedExtensionsLabelHint } from "~/modules/HeadlessCms/fileRenderer/utils";
 
 const FieldRenderer = ({ field, getBind }: CmsModelFieldRendererProps) => {
     const Bind = getBind();
 
     const imagesOnly = field.settings && field.settings.imagesOnly;
+
     return (
         <Bind>
             {bind => {
                 const { value, onChange, validation } = bind;
+
                 return (
                     <Bind.ValidationContainer>
                         <EditFileUsingUrl onSetFile={file => bind.onChange(file.src)}>
                             {({ editFile }) => (
-                                <div>
-                                    <ImageFieldWrapper>
-                                        <Typography use="body2" tag={"span"}>
-                                            {field.label}
-                                        </Typography>
-                                        <InnerImageFieldWrapper>
-                                            <FileManager
-                                                images={imagesOnly}
-                                                render={({ showFileManager }) => {
-                                                    const selectFile = () => {
-                                                        showFileManager(file => onChange(file.src));
-                                                    };
-                                                    return (
-                                                        <File
-                                                            {...bind}
-                                                            url={value}
-                                                            onEdit={() => editFile(value)}
-                                                            onRemove={() => onChange(null)}
-                                                            showFileManager={selectFile}
-                                                            placeholder={field.placeholderText}
-                                                            data-testid={`fr.input.filefield.${field.label}`}
-                                                        />
-                                                    );
-                                                }}
+                                <FileManager
+                                    images={imagesOnly}
+                                    render={({ showFileManager }) => {
+                                        return (
+                                            <FilePicker
+                                                {...bind}
+                                                label={field.label}
+                                                validation={validation}
+                                                description={[
+                                                    field.helpText,
+                                                    getSupportedExtensionsLabelHint(imagesOnly)
+                                                ]
+                                                    .filter(Boolean)
+                                                    .join(" ")}
+                                                value={value}
+                                                onSelectItem={() =>
+                                                    showFileManager(file => onChange(file.src))
+                                                }
+                                                onEditItem={() => editFile(value)}
+                                                onRemoveItem={() => onChange(null)}
+                                                placeholder={field.placeholderText}
+                                                data-testid={`fr.input.filefield.${field.label}`}
                                             />
-                                        </InnerImageFieldWrapper>
-                                    </ImageFieldWrapper>
-                                    {validation.isValid === false && (
-                                        <FormElementMessage error>
-                                            {validation.message || "Invalid value."}
-                                        </FormElementMessage>
-                                    )}
-                                    {validation.isValid !== false && field.helpText && (
-                                        <FormElementMessage>{field.helpText}</FormElementMessage>
-                                    )}
-                                </div>
+                                        );
+                                    }}
+                                />
                             )}
                         </EditFileUsingUrl>
                     </Bind.ValidationContainer>
diff --git a/packages/app-file-manager/src/modules/HeadlessCms/fileRenderer/fileFields.tsx b/packages/app-file-manager/src/modules/HeadlessCms/fileRenderer/fileFields.tsx
index 8d02de4e824..79ddeb8c984 100644
--- a/packages/app-file-manager/src/modules/HeadlessCms/fileRenderer/fileFields.tsx
+++ b/packages/app-file-manager/src/modules/HeadlessCms/fileRenderer/fileFields.tsx
@@ -7,46 +7,14 @@ import {
 } from "@webiny/app-headless-cms/types";
 import { i18n } from "@webiny/app/i18n";
 import { FileManager } from "@webiny/app-admin/components";
-import styled from "@emotion/styled";
-import { imageWrapperStyles } from "./utils";
-import { File } from "./File";
+import { getSupportedExtensionsLabelHint } from "./utils";
 import { EditFileUsingUrl } from "~/components/EditFileUsingUrl";
-import { FormElementMessage } from "@webiny/ui/FormElementMessage";
 import { FileItem } from "@webiny/app-admin/types";
+import { MultiFilePicker } from "@webiny/admin-ui";
 
 const t = i18n.ns("app-headless-cms/admin/fields/file");
 
-const FileUploadWrapper = styled("div")({
-    position: "relative",
-    ".disabled": {
-        opacity: 0.75,
-        pointerEvents: "none"
-    },
-    ".mdc-text-field-helper-text": {
-        color: "var(--mdc-theme-text-secondary-on-background)"
-    }
-});
-
-const InnerImageFieldWrapper = styled("div")({
-    background: "repeating-conic-gradient(#efefef 0% 25%, transparent 0% 50%) 50%/25px 25px",
-    boxSizing: "border-box",
-    border: "1px solid var(--mdc-theme-background)",
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "center",
-    flexBasis: "100%",
-    padding: "30px",
-    height: "220px"
-});
-
-const Gallery = styled.div`
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
-    grid-template-rows: auto;
-    gap: 15px;
-`;
-
-const FieldRenderer = ({ getBind, Label, field }: CmsModelFieldRendererProps) => {
+const FieldRenderer = ({ getBind, field }: CmsModelFieldRendererProps) => {
     const Bind = getBind();
     const editFileRef = useRef<{ index: number; url: string } | undefined>();
 
@@ -75,7 +43,7 @@ const FieldRenderer = ({ getBind, Label, field }: CmsModelFieldRendererProps) =>
                 const { onChange, validation } = bind;
 
                 // We need to make sure the value is an array, since this is a multi-value component.
-                const value: string[] = (
+                const values: string[] = (
                     Array.isArray(bind.value) ? bind.value : [bind.value]
                 ).filter(Boolean);
 
@@ -83,92 +51,59 @@ const FieldRenderer = ({ getBind, Label, field }: CmsModelFieldRendererProps) =>
                     <Bind.ValidationContainer>
                         <EditFileUsingUrl onSetFile={onSetFile(bind)}>
                             {({ editFile }) => (
-                                <FileUploadWrapper className={imageWrapperStyles}>
-                                    <FileManager
-                                        multiple
-                                        images={imagesOnly}
-                                        render={({ showFileManager }) => {
-                                            const selectFiles = (index = -1) => {
-                                                showFileManager(files => {
-                                                    const urls = files.map(f => f.src);
-                                                    if (index === -1) {
-                                                        onChange([...value, ...urls]);
-                                                    } else {
-                                                        onChange([
-                                                            ...value.slice(0, index),
-                                                            ...urls,
-                                                            ...value.slice(index + 1)
-                                                        ]);
+                                <FileManager
+                                    multiple
+                                    images={imagesOnly}
+                                    render={({ showFileManager }) => {
+                                        const selectFiles = (index = -1) => {
+                                            showFileManager(files => {
+                                                const urls = files.map(f => f.src);
+                                                if (index === -1) {
+                                                    onChange([...values, ...urls]);
+                                                } else {
+                                                    onChange([
+                                                        ...values.slice(0, index),
+                                                        ...urls,
+                                                        ...values.slice(index + 1)
+                                                    ]);
+                                                }
+                                            });
+                                        };
+                                        return (
+                                            <MultiFilePicker
+                                                {...bind}
+                                                label={field.label}
+                                                validation={validation}
+                                                description={[
+                                                    field.helpText,
+                                                    getSupportedExtensionsLabelHint(imagesOnly)
+                                                ]
+                                                    .filter(Boolean)
+                                                    .join(" ")}
+                                                values={values}
+                                                onSelectItem={() => selectFiles()}
+                                                onReplaceItem={(_, index) => selectFiles(index)}
+                                                onRemoveItem={(_, index) =>
+                                                    onChange(dotProp.delete(values, index))
+                                                }
+                                                onEditItem={(value, index) => {
+                                                    if (!value) {
+                                                        return;
                                                     }
-                                                });
-                                            };
-                                            return (
-                                                <>
-                                                    <Label>{field.label}</Label>
-
-                                                    <Gallery>
-                                                        {value.map((url: string, index: number) => (
-                                                            <InnerImageFieldWrapper
-                                                                key={url + "-" + index}
-                                                            >
-                                                                <File
-                                                                    url={url}
-                                                                    showFileManager={() =>
-                                                                        selectFiles(index)
-                                                                    }
-                                                                    onEdit={() => {
-                                                                        editFileRef.current = {
-                                                                            index,
-                                                                            url
-                                                                        };
-
-                                                                        editFile(url);
-                                                                    }}
-                                                                    onRemove={() =>
-                                                                        onChange(
-                                                                            dotProp.delete(
-                                                                                value,
-                                                                                index
-                                                                            )
-                                                                        )
-                                                                    }
-                                                                    placeholder={t`Select a file`}
-                                                                    data-testid={`fr.input.file.${field.label}.${index}`}
-                                                                />
-                                                            </InnerImageFieldWrapper>
-                                                        ))}
-                                                        <InnerImageFieldWrapper>
-                                                            <File
-                                                                url={""}
-                                                                onRemove={() => {
-                                                                    return void 0;
-                                                                }}
-                                                                {...bind}
-                                                                showFileManager={() =>
-                                                                    selectFiles()
-                                                                }
-                                                                placeholder={t`Select a file`}
-                                                                data-testid={`fr.input.file.${field.label}`}
-                                                            />
-                                                        </InnerImageFieldWrapper>
-                                                    </Gallery>
 
-                                                    {validation.isValid === false && (
-                                                        <FormElementMessage error>
-                                                            {validation.message || "Invalid value."}
-                                                        </FormElementMessage>
-                                                    )}
-                                                    {validation.isValid !== false &&
-                                                        field.helpText && (
-                                                            <FormElementMessage>
-                                                                {field.helpText}
-                                                            </FormElementMessage>
-                                                        )}
-                                                </>
-                                            );
-                                        }}
-                                    />
-                                </FileUploadWrapper>
+                                                    editFileRef.current = {
+                                                        index,
+                                                        url: value.url
+                                                    };
+
+                                                    editFile(value.url);
+                                                }}
+                                                placeholder={field.placeholderText}
+                                                data-testid={`fr.input.filefields.${field.label}`}
+                                            />
+                                        );
+                                    }}
+                                />
                             )}
                         </EditFileUsingUrl>
                     </Bind.ValidationContainer>
diff --git a/packages/app-file-manager/src/modules/HeadlessCms/fileRenderer/utils.ts b/packages/app-file-manager/src/modules/HeadlessCms/fileRenderer/utils.ts
new file mode 100644
index 00000000000..35ab61c95c4
--- /dev/null
+++ b/packages/app-file-manager/src/modules/HeadlessCms/fileRenderer/utils.ts
@@ -0,0 +1,17 @@
+export const imagePlugins = [
+    ".jpg",
+    ".jpeg",
+    ".tif",
+    ".gif",
+    ".png",
+    ".svg",
+    ".webp",
+    "bmp",
+    "svg"
+];
+
+export const getSupportedExtensionsLabelHint = (imagesOnly?: boolean) => {
+    return imagesOnly
+        ? `Supported files extensions: ${imagePlugins.filter(Boolean).join(", ")}.`
+        : null;
+};
diff --git a/packages/app-file-manager/src/modules/HeadlessCms/fileRenderer/utils.tsx b/packages/app-file-manager/src/modules/HeadlessCms/fileRenderer/utils.tsx
deleted file mode 100644
index cd1d769e5df..00000000000
--- a/packages/app-file-manager/src/modules/HeadlessCms/fileRenderer/utils.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import * as React from "react";
-import { css } from "emotion";
-import { ReactComponent as FileIcon } from "@material-design-icons/svg/round/insert_drive_file.svg";
-
-export const imagePlugins = [".jpg", ".jpeg", ".gif", ".png", ".svg", ".webp"];
-
-export const imageWrapperStyles = css({
-    height: "auto"
-});
-
-const fileLabel = css({
-    padding: "10px",
-    whiteSpace: "nowrap",
-    overflow: "hidden",
-    textOverflow: "ellipsis",
-    fontSize: "0.8rem",
-    color: "var(--mdc-theme-on-surface)",
-    backgroundColor: "var(--mdc-theme-on-background)"
-});
-
-const IconWrapperStyle = css({
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "center",
-    height: 200
-});
-
-const IconStyle = css({
-    width: 64,
-    height: 64
-});
-
-interface CreateRenderImagePreviewProps {
-    value: string;
-    // TODO @ts-refactor figure out correct type
-    imagePreviewProps: any;
-}
-interface RenderImageProps {
-    [key: string]: string;
-}
-export const createRenderImagePreview = ({
-    value,
-    imagePreviewProps
-}: CreateRenderImagePreviewProps) => {
-    const fileName = getFileName(value);
-
-    const renderImagePreview = (renderImageProps: RenderImageProps) => {
-        return (
-            <div {...renderImageProps} {...imagePreviewProps}>
-                <div className={IconWrapperStyle}>
-                    <FileIcon className={IconStyle} />
-                </div>
-                <div className={fileLabel}>{fileName}</div>
-            </div>
-        );
-    };
-    return renderImagePreview;
-};
-
-const getFileName = (value?: string): string => {
-    if (!value) {
-        return "unknown";
-    }
-    return value.split("/").pop() || "unknown";
-};
diff --git a/packages/app-file-manager/src/modules/Settings/index.tsx b/packages/app-file-manager/src/modules/Settings/index.tsx
index d732678c6ac..57b6379ae8e 100644
--- a/packages/app-file-manager/src/modules/Settings/index.tsx
+++ b/packages/app-file-manager/src/modules/Settings/index.tsx
@@ -1,33 +1,40 @@
 import React from "react";
 import { plugins } from "@webiny/plugins";
-import { AddRoute, Plugin } from "@webiny/app";
 import { HasPermission } from "@webiny/app-security";
-import { AddMenu, Layout } from "@webiny/app-admin";
+import { Layout } from "@webiny/app-admin";
 import installation from "./plugins/installation";
 import permissionRenderer from "./plugins/permissionRenderer";
 import { FileManagerSettings } from "./views/FileManagerSettings";
+import { AdminConfig } from "@webiny/app-admin";
+
+const { Menu, Route } = AdminConfig;
 
 export const SettingsModule = () => {
     plugins.register(installation, permissionRenderer);
 
     return (
-        <Plugin>
+        <AdminConfig>
             <HasPermission name={"fm.settings"}>
-                <AddRoute path="/settings/file-manager/general">
-                    <Layout title={"File Manager - General Settings"}>
-                        <FileManagerSettings />
-                    </Layout>
-                </AddRoute>
-                <AddMenu name={"settings"}>
-                    <AddMenu name={"settings.fileManager"} label={"File Manager"}>
-                        <AddMenu
-                            name={"settings.fileManager.general"}
-                            label={"General"}
-                            path={"/settings/file-manager/general"}
-                        />
-                    </AddMenu>
-                </AddMenu>
+                <Route
+                    name={"settings.fm.general"}
+                    path={"/settings/file-manager/general"}
+                    element={
+                        <Layout title={"File Manager - General Settings"}>
+                            <FileManagerSettings />
+                        </Layout>
+                    }
+                />
+                <Menu
+                    parent={"settings"}
+                    name={"settings.fm"}
+                    element={<Menu.Group text={"File Manager"} />}
+                />
+                <Menu
+                    parent={"settings"}
+                    name={"settings.fm.general"}
+                    element={<Menu.Link text={"General"} to={"/settings/file-manager/general"} />}
+                />
             </HasPermission>
-        </Plugin>
+        </AdminConfig>
     );
 };
diff --git a/packages/app-file-manager/src/modules/Settings/plugins/installation.tsx b/packages/app-file-manager/src/modules/Settings/plugins/installation.tsx
index be5f3e37e8b..edfec298a5d 100644
--- a/packages/app-file-manager/src/modules/Settings/plugins/installation.tsx
+++ b/packages/app-file-manager/src/modules/Settings/plugins/installation.tsx
@@ -3,16 +3,9 @@ import gql from "graphql-tag";
 import { useApolloClient } from "@apollo/react-hooks";
 import { i18n } from "@webiny/app/i18n";
 import { AdminInstallationPlugin } from "@webiny/app-admin/types";
-import { Alert } from "@webiny/ui/Alert";
-import { CircularProgress } from "@webiny/ui/Progress";
 import { SimpleForm, SimpleFormContent } from "@webiny/app-admin/components/SimpleForm";
-import styled from "@emotion/styled";
 import { config as appConfig } from "@webiny/app/config";
-
-const SimpleFormPlaceholder = styled.div({
-    minHeight: 300,
-    minWidth: 400
-});
+import { Alert, OverlayLoader } from "@webiny/admin-ui";
 
 const t = i18n.ns("app-file-manager/admin/installation");
 
@@ -75,9 +68,9 @@ const FMInstaller = ({ onInstalled }: FileManagerInstallerProps) => {
 
     return (
         <SimpleForm>
-            <CircularProgress label={label} />
+            <OverlayLoader text={label} />
             <SimpleFormContent>
-                <SimpleFormPlaceholder />
+                <div style={{ minHeight: 300, minWidth: 400 }} />
             </SimpleFormContent>
         </SimpleForm>
     );
diff --git a/packages/app-file-manager/src/modules/Settings/plugins/permissionRenderer/FileManagerPermissions.tsx b/packages/app-file-manager/src/modules/Settings/plugins/permissionRenderer/FileManagerPermissions.tsx
index 3dbd00b29b2..23376d0be1e 100644
--- a/packages/app-file-manager/src/modules/Settings/plugins/permissionRenderer/FileManagerPermissions.tsx
+++ b/packages/app-file-manager/src/modules/Settings/plugins/permissionRenderer/FileManagerPermissions.tsx
@@ -1,15 +1,13 @@
 import React, { Fragment, useCallback, useMemo } from "react";
-import { Grid, Cell } from "@webiny/ui/Grid";
-import { Select } from "@webiny/ui/Select";
+import { Grid, Select } from "@webiny/admin-ui";
 import { i18n } from "@webiny/app/i18n";
 import {
     CannotUseAaclAlert,
     PermissionInfo,
-    gridNoPaddingClass
+    gridWithPaddingClass,
+    PermissionsGroup
 } from "@webiny/app-admin/components/Permissions";
 import { Form } from "@webiny/form";
-import { Elevation } from "@webiny/ui/Elevation";
-import { Typography } from "@webiny/ui/Typography";
 import { useSecurity } from "@webiny/app-security";
 import { AaclPermission } from "@webiny/app-admin";
 
@@ -145,106 +143,122 @@ export const FileManagerPermissions = ({ value, onChange }: FileManagerPermissio
         <Form data={formData} onChange={onFormChange}>
             {({ data, Bind, setValue }) => (
                 <Fragment>
-                    <Grid className={gridNoPaddingClass}>
-                        <Cell span={12}>
+                    <Grid className={gridWithPaddingClass}>
+                        <Grid.Column span={12}>
                             {data.accessLevel === "custom" && cannotUseAAcl && (
                                 <CannotUseAaclAlert />
                             )}
-                        </Cell>
+                        </Grid.Column>
                     </Grid>
-                    <Grid className={gridNoPaddingClass}>
-                        <Cell span={6}>
+                    <Grid className={gridWithPaddingClass}>
+                        <Grid.Column span={6}>
                             <PermissionInfo title={t`Access Level`} />
-                        </Cell>
-                        <Cell span={6}>
+                        </Grid.Column>
+                        <Grid.Column span={6}>
                             <Bind name={"accessLevel"}>
-                                <Select label={t`Access Level`}>
-                                    <option value={NO_ACCESS}>{t`No access`}</option>
-                                    <option value={FULL_ACCESS}>{t`Full access`}</option>
-                                    <option value={CUSTOM_ACCESS}>{t`Custom access`}</option>
-                                </Select>
+                                <Select
+                                    options={[
+                                        {
+                                            value: NO_ACCESS,
+                                            label: t`No access`
+                                        },
+                                        {
+                                            value: FULL_ACCESS,
+                                            label: t`Full access`
+                                        },
+                                        {
+                                            value: CUSTOM_ACCESS,
+                                            label: t`Custom access`
+                                        }
+                                    ]}
+                                />
                             </Bind>
-                        </Cell>
+                        </Grid.Column>
                     </Grid>
                     {data.accessLevel === "custom" && (
-                        <Fragment>
-                            <Elevation z={1} style={{ marginTop: 10 }}>
+                        <div className={"wby-mt-lg"}>
+                            <PermissionsGroup title={t`Files`}>
                                 <Grid>
-                                    <Cell span={12}>
-                                        <Typography use={"overline"}>{t`Files`}</Typography>
-                                    </Cell>
-                                    <Cell span={12}>
-                                        <Grid style={{ padding: 0, paddingBottom: 24 }}>
-                                            <Cell span={12}>
-                                                <Bind
-                                                    name={"filesAccessScope"}
-                                                    beforeChange={(value, cb) => {
-                                                        if (value === "own") {
-                                                            setValue(`filesRWD`, "rwd");
-                                                        }
-                                                        cb(value);
-                                                    }}
-                                                >
-                                                    <Select
-                                                        label={t`Access Scope`}
-                                                        disabled={cannotUseAAcl}
-                                                    >
-                                                        <option
-                                                            value={NO_ACCESS}
-                                                        >{t`No access`}</option>
-                                                        <option
-                                                            value={FULL_ACCESS}
-                                                        >{t`All files`}</option>
-                                                        <option
-                                                            value={"own"}
-                                                        >{t`Only files created by the user`}</option>
-                                                    </Select>
-                                                </Bind>
-                                            </Cell>
-                                            <Cell span={12}>
-                                                <Bind name={"filesRWD"}>
-                                                    <Select
-                                                        label={t`Primary Actions`}
-                                                        disabled={
-                                                            cannotUseAAcl ||
-                                                            data.filesAccessScope !== "full"
-                                                        }
-                                                    >
-                                                        <option value={"r"}>{t`Read`}</option>
-                                                        <option
-                                                            value={"rw"}
-                                                        >{t`Read, write`}</option>
-                                                        <option
-                                                            value={"rwd"}
-                                                        >{t`Read, write, delete`}</option>
-                                                    </Select>
-                                                </Bind>
-                                            </Cell>
-                                        </Grid>
-                                    </Cell>
+                                    <Grid.Column span={12}>
+                                        <Bind
+                                            name={"filesAccessScope"}
+                                            beforeChange={(value, cb) => {
+                                                if (value === "own") {
+                                                    setValue(`filesRWD`, "rwd");
+                                                }
+                                                cb(value);
+                                            }}
+                                        >
+                                            <Select
+                                                label={t`Access Scope`}
+                                                disabled={cannotUseAAcl}
+                                                options={[
+                                                    {
+                                                        value: NO_ACCESS,
+                                                        label: t`No access`
+                                                    },
+                                                    {
+                                                        value: FULL_ACCESS,
+                                                        label: t`Full access`
+                                                    },
+                                                    {
+                                                        value: "own",
+                                                        label: t`Only files created by the user`
+                                                    }
+                                                ]}
+                                            />
+                                        </Bind>
+                                    </Grid.Column>
+                                    <Grid.Column span={12}>
+                                        <Bind name={"filesRWD"}>
+                                            <Select
+                                                label={t`Primary Actions`}
+                                                disabled={
+                                                    cannotUseAAcl ||
+                                                    data.filesAccessScope !== "full"
+                                                }
+                                                options={[
+                                                    {
+                                                        value: "r",
+                                                        label: t`Read`
+                                                    },
+                                                    {
+                                                        value: "rw",
+                                                        label: t`Read, write`
+                                                    },
+                                                    {
+                                                        value: "rwd",
+                                                        label: t`Read, write, delete`
+                                                    }
+                                                ]}
+                                            />
+                                        </Bind>
+                                    </Grid.Column>
                                 </Grid>
-                            </Elevation>
-                            <Elevation z={1} style={{ marginTop: 10 }}>
+                            </PermissionsGroup>
+                            <PermissionsGroup title={t`Settings`}>
                                 <Grid>
-                                    <Cell span={12}>
-                                        <Typography use={"overline"}>{t`Settings`}</Typography>
-                                    </Cell>
-                                    <Cell span={12}>
+                                    <Grid.Column span={12}>
                                         <Bind name={"settingsAccessScope"}>
                                             <Select
                                                 disabled={cannotUseAAcl}
                                                 label={t`Access Scope`}
-                                            >
-                                                <option value={NO_ACCESS}>{t`No access`}</option>
-                                                <option
-                                                    value={FULL_ACCESS}
-                                                >{t`Full access`}</option>
-                                            </Select>
+                                                options={[
+                                                    {
+                                                        value: NO_ACCESS,
+                                                        label: t`No access`
+                                                    },
+                                                    {
+                                                        value: FULL_ACCESS,
+                                                        label: t`Full access`
+                                                    }
+                                                ]}
+                                            />
                                         </Bind>
-                                    </Cell>
+                                    </Grid.Column>
                                 </Grid>
-                            </Elevation>
-                        </Fragment>
+                            </PermissionsGroup>
+                        </div>
                     )}
                 </Fragment>
             )}
diff --git a/packages/app-file-manager/src/modules/Settings/plugins/permissionRenderer/index.tsx b/packages/app-file-manager/src/modules/Settings/plugins/permissionRenderer/index.tsx
index 763ab932f3f..4e19cf96a68 100644
--- a/packages/app-file-manager/src/modules/Settings/plugins/permissionRenderer/index.tsx
+++ b/packages/app-file-manager/src/modules/Settings/plugins/permissionRenderer/index.tsx
@@ -1,7 +1,7 @@
 import React from "react";
-import { AccordionItem } from "@webiny/ui/Accordion";
+import { Accordion } from "@webiny/admin-ui";
 import { AdminAppPermissionRendererPlugin } from "@webiny/app-admin/types";
-import { ReactComponent as FileManagerIcon } from "../../assets/icons/folder-open.svg";
+import { ReactComponent as PermissionsIcon } from "@webiny/icons/folder_open.svg";
 import { FileManagerPermissions } from "./FileManagerPermissions";
 import { i18n } from "@webiny/app/i18n";
 
@@ -12,14 +12,19 @@ export default {
     name: "admin-app-permissions-renderer-file-manager",
     render(props) {
         return (
-            <AccordionItem
-                icon={<FileManagerIcon />}
+            <Accordion.Item
+                icon={
+                    <Accordion.Item.Icon
+                        icon={<PermissionsIcon />}
+                        label={"File Manager Permissions"}
+                    />
+                }
                 title={t`File Manager`}
                 description={t`Manage File manager app access permissions.`}
                 data-testid={"permission.fm"}
             >
                 <FileManagerPermissions {...props} />
-            </AccordionItem>
+            </Accordion.Item>
         );
     }
 } as AdminAppPermissionRendererPlugin;
diff --git a/packages/app-file-manager/src/modules/Settings/views/FileManagerSettings.tsx b/packages/app-file-manager/src/modules/Settings/views/FileManagerSettings.tsx
index 00314529301..4a505101846 100644
--- a/packages/app-file-manager/src/modules/Settings/views/FileManagerSettings.tsx
+++ b/packages/app-file-manager/src/modules/Settings/views/FileManagerSettings.tsx
@@ -1,12 +1,9 @@
 import * as React from "react";
+import { Button, Grid, Input, OverlayLoader } from "@webiny/admin-ui";
 import { Form } from "@webiny/form";
-import { Cell, Grid } from "@webiny/ui/Grid";
-import { ButtonPrimary } from "@webiny/ui/Button";
 import { Mutation, Query } from "@apollo/react-components";
 import { useSnackbar } from "@webiny/app-admin/hooks/useSnackbar";
-import { Input } from "@webiny/ui/Input";
 import graphql, { GetSettingsResponse } from "../graphql";
-import { CircularProgress } from "@webiny/ui/Progress";
 import get from "lodash/get";
 import { validation } from "@webiny/validation";
 
@@ -84,65 +81,52 @@ export const FileManagerSettings = () => {
                                     {({ Bind, form }) => (
                                         <SimpleForm>
                                             {(queryInProgress || mutationInProgress) && (
-                                                <CircularProgress />
+                                                <OverlayLoader />
                                             )}
                                             <SimpleFormHeader title="General Settings" />
                                             <SimpleFormContent>
                                                 <Grid>
-                                                    <Cell span={12}>
-                                                        <Grid>
-                                                            <Cell span={12}>
-                                                                <Bind name={"uploadMinFileSize"}>
-                                                                    <Input
-                                                                        type="number"
-                                                                        label="Minimum file upload size"
-                                                                        description="The smallest file size in bytes."
-                                                                    />
-                                                                </Bind>
-                                                            </Cell>
-                                                        </Grid>
-                                                    </Cell>
-                                                    <Cell span={12}>
-                                                        <Grid>
-                                                            <Cell span={12}>
-                                                                <Bind name={"uploadMaxFileSize"}>
-                                                                    <Input
-                                                                        type="number"
-                                                                        label="Maximum file upload size"
-                                                                        description="The largest file size in bytes."
-                                                                    />
-                                                                </Bind>
-                                                            </Cell>
-                                                        </Grid>
-                                                    </Cell>
-                                                    <Cell span={12}>
-                                                        <Grid>
-                                                            <Cell span={12}>
-                                                                <Bind
-                                                                    name={"srcPrefix"}
-                                                                    validators={[
-                                                                        validation.create("url"),
-                                                                        prefixValidator
-                                                                    ]}
-                                                                >
-                                                                    <Input
-                                                                        label="File URL prefix"
-                                                                        description="This prefix will be prepended to the file key to form the full file URL."
-                                                                    />
-                                                                </Bind>
-                                                            </Cell>
-                                                        </Grid>
-                                                    </Cell>
+                                                    <Grid.Column span={12}>
+                                                        <Bind name={"uploadMinFileSize"}>
+                                                            <Input
+                                                                type="number"
+                                                                label="Minimum file upload size"
+                                                                description="The smallest file size in bytes."
+                                                            />
+                                                        </Bind>
+                                                    </Grid.Column>
+                                                    <Grid.Column span={12}>
+                                                        <Bind name={"uploadMaxFileSize"}>
+                                                            <Input
+                                                                type="number"
+                                                                label="Maximum file upload size"
+                                                                description="The largest file size in bytes."
+                                                            />
+                                                        </Bind>
+                                                    </Grid.Column>
+                                                    <Grid.Column span={12}>
+                                                        <Bind
+                                                            name={"srcPrefix"}
+                                                            validators={[
+                                                                validation.create("url"),
+                                                                prefixValidator
+                                                            ]}
+                                                        >
+                                                            <Input
+                                                                label="File URL prefix"
+                                                                description="This prefix will be prepended to the file key to form the full file URL."
+                                                            />
+                                                        </Bind>
+                                                    </Grid.Column>
                                                 </Grid>
                                             </SimpleFormContent>
                                             <SimpleFormFooter>
-                                                <ButtonPrimary
+                                                <Button
+                                                    text={"Save settings"}
                                                     onClick={ev => {
                                                         form.submit(ev);
                                                     }}
-                                                >
-                                                    Save Settings
-                                                </ButtonPrimary>
+                                                />
                                             </SimpleFormFooter>
                                         </SimpleForm>
                                     )}
diff --git a/packages/app-file-manager/src/modules/ThumbnailRenderers/DefaultRenderer.tsx b/packages/app-file-manager/src/modules/ThumbnailRenderers/DefaultRenderer.tsx
deleted file mode 100644
index d837f12a957..00000000000
--- a/packages/app-file-manager/src/modules/ThumbnailRenderers/DefaultRenderer.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import * as React from "react";
-import { css } from "emotion";
-import { ReactComponent as FileIcon } from "@material-design-icons/svg/outlined/description.svg";
-
-const style = {
-    centering: css({
-        display: "flex",
-        justifyContent: "center",
-        alignItems: "center",
-        height: 200
-    })
-};
-
-export const DefaultRenderer = () => {
-    return (
-        <div className={style.centering}>
-            <FileIcon />
-        </div>
-    );
-};
diff --git a/packages/app-file-manager/src/modules/ThumbnailRenderers/FilePreviewDefaultRenderer.tsx b/packages/app-file-manager/src/modules/ThumbnailRenderers/FilePreviewDefaultRenderer.tsx
new file mode 100644
index 00000000000..847915cbc91
--- /dev/null
+++ b/packages/app-file-manager/src/modules/ThumbnailRenderers/FilePreviewDefaultRenderer.tsx
@@ -0,0 +1,10 @@
+import * as React from "react";
+import { ReactComponent as HideImageIcon } from "@webiny/icons/hide_image.svg";
+
+export const FilePreviewDefaultRenderer = () => {
+    return (
+        <div className={"wby-fill-neutral-strong"}>
+            <HideImageIcon width={48} height={48} />
+        </div>
+    );
+};
diff --git a/packages/app-file-manager/src/modules/ThumbnailRenderers/FilePreviewImageRenderer.tsx b/packages/app-file-manager/src/modules/ThumbnailRenderers/FilePreviewImageRenderer.tsx
new file mode 100644
index 00000000000..65fc51518e4
--- /dev/null
+++ b/packages/app-file-manager/src/modules/ThumbnailRenderers/FilePreviewImageRenderer.tsx
@@ -0,0 +1,17 @@
+import * as React from "react";
+import { Image } from "@webiny/app/components";
+import { useFile } from "~/hooks/useFile";
+
+const width750 = { width: 750 };
+
+export const FilePreviewImageRenderer = () => {
+    const { file } = useFile();
+    return (
+        <Image
+            src={file.src}
+            alt={file.name}
+            transform={width750}
+            className={"wby-object-contain wby-max-w-full wby-max-h-full"}
+        />
+    );
+};
diff --git a/packages/app-file-manager/src/modules/ThumbnailRenderers/GridItemDefaultRenderer.tsx b/packages/app-file-manager/src/modules/ThumbnailRenderers/GridItemDefaultRenderer.tsx
new file mode 100644
index 00000000000..7d01c8cac12
--- /dev/null
+++ b/packages/app-file-manager/src/modules/ThumbnailRenderers/GridItemDefaultRenderer.tsx
@@ -0,0 +1,10 @@
+import * as React from "react";
+import { ReactComponent as HideImageIcon } from "@webiny/icons/hide_image.svg";
+
+export const GridItemDefaultRenderer = () => {
+    return (
+        <div className={"wby-fill-neutral-strong"}>
+            <HideImageIcon width={48} height={48} />
+        </div>
+    );
+};
diff --git a/packages/app-file-manager/src/modules/ThumbnailRenderers/GridItemImageRenderer.tsx b/packages/app-file-manager/src/modules/ThumbnailRenderers/GridItemImageRenderer.tsx
new file mode 100644
index 00000000000..fde2e708bc3
--- /dev/null
+++ b/packages/app-file-manager/src/modules/ThumbnailRenderers/GridItemImageRenderer.tsx
@@ -0,0 +1,17 @@
+import * as React from "react";
+import { Image } from "@webiny/app/components";
+import { useFile } from "~/hooks/useFile";
+
+const width300 = { width: 300 };
+
+export const GridItemImageRenderer = () => {
+    const { file } = useFile();
+    return (
+        <Image
+            src={file.src}
+            alt={file.name}
+            transform={width300}
+            className={"wby-object-contain wby-max-w-full wby-max-h-full"}
+        />
+    );
+};
diff --git a/packages/app-file-manager/src/modules/ThumbnailRenderers/ImageRenderer.tsx b/packages/app-file-manager/src/modules/ThumbnailRenderers/ImageRenderer.tsx
deleted file mode 100644
index a812b3ee863..00000000000
--- a/packages/app-file-manager/src/modules/ThumbnailRenderers/ImageRenderer.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import * as React from "react";
-import { css } from "emotion";
-import { Image } from "@webiny/app/components";
-import { useFile } from "~/hooks/useFile";
-
-const styles = css({
-    width: "auto"
-});
-
-const width300 = { width: 300 };
-
-export const ImageRenderer = () => {
-    const { file } = useFile();
-    return <Image className={styles} src={file.src} alt={file.name} transform={width300} />;
-};
diff --git a/packages/app-file-manager/src/modules/ThumbnailRenderers/TableItemDefaultRenderer.tsx b/packages/app-file-manager/src/modules/ThumbnailRenderers/TableItemDefaultRenderer.tsx
new file mode 100644
index 00000000000..b48374b707a
--- /dev/null
+++ b/packages/app-file-manager/src/modules/ThumbnailRenderers/TableItemDefaultRenderer.tsx
@@ -0,0 +1,14 @@
+import * as React from "react";
+import { ReactComponent as HideImageIcon } from "@webiny/icons/hide_image.svg";
+import { useFile } from "~/hooks/useFile";
+import { Icon } from "@webiny/admin-ui";
+
+export const TableItemDefaultRenderer = () => {
+    const { file } = useFile();
+
+    return (
+        <div className={"wby-w-full wby-h-full wby-flex wby-items-center wby-justify-center"}>
+            <Icon color={"neutral-light"} size={"md"} icon={<HideImageIcon />} label={file.name} />
+        </div>
+    );
+};
diff --git a/packages/app-file-manager/src/modules/ThumbnailRenderers/TableItemImageRenderer.tsx b/packages/app-file-manager/src/modules/ThumbnailRenderers/TableItemImageRenderer.tsx
new file mode 100644
index 00000000000..1af45b42a2b
--- /dev/null
+++ b/packages/app-file-manager/src/modules/ThumbnailRenderers/TableItemImageRenderer.tsx
@@ -0,0 +1,17 @@
+import * as React from "react";
+import { Image } from "@webiny/app/components";
+import { useFile } from "~/hooks/useFile";
+
+const width100 = { width: 100 };
+
+export const TableItemImageRenderer = () => {
+    const { file } = useFile();
+    return (
+        <Image
+            src={file.src}
+            alt={file.name}
+            transform={width100}
+            className={"wby-object-cover wby-w-full wby-h-full"}
+        />
+    );
+};
diff --git a/packages/app-file-manager/tsconfig.build.json b/packages/app-file-manager/tsconfig.build.json
index 16f955f9c8a..d2411812fa3 100644
--- a/packages/app-file-manager/tsconfig.build.json
+++ b/packages/app-file-manager/tsconfig.build.json
@@ -2,6 +2,7 @@
   "extends": "../../tsconfig.build.json",
   "include": ["src"],
   "references": [
+    { "path": "../admin-ui/tsconfig.build.json" },
     { "path": "../app/tsconfig.build.json" },
     { "path": "../app-aco/tsconfig.build.json" },
     { "path": "../app-admin/tsconfig.build.json" },
@@ -16,7 +17,6 @@
     { "path": "../plugins/tsconfig.build.json" },
     { "path": "../react-composition/tsconfig.build.json" },
     { "path": "../react-properties/tsconfig.build.json" },
-    { "path": "../ui/tsconfig.build.json" },
     { "path": "../utils/tsconfig.build.json" },
     { "path": "../validation/tsconfig.build.json" }
   ],
diff --git a/packages/app-file-manager/tsconfig.json b/packages/app-file-manager/tsconfig.json
index 9b855ac9315..ec8732ad94b 100644
--- a/packages/app-file-manager/tsconfig.json
+++ b/packages/app-file-manager/tsconfig.json
@@ -2,6 +2,7 @@
   "extends": "../../tsconfig.json",
   "include": ["src", "__tests__"],
   "references": [
+    { "path": "../admin-ui" },
     { "path": "../app" },
     { "path": "../app-aco" },
     { "path": "../app-admin" },
@@ -16,7 +17,6 @@
     { "path": "../plugins" },
     { "path": "../react-composition" },
     { "path": "../react-properties" },
-    { "path": "../ui" },
     { "path": "../utils" },
     { "path": "../validation" }
   ],
@@ -27,6 +27,8 @@
     "paths": {
       "~/*": ["./src/*"],
       "~tests/*": ["./__tests__/*"],
+      "@webiny/admin-ui/*": ["../admin-ui/src/*"],
+      "@webiny/admin-ui": ["../admin-ui/src"],
       "@webiny/app/*": ["../app/src/*"],
       "@webiny/app": ["../app/src"],
       "@webiny/app-aco/*": ["../app-aco/src/*"],
@@ -55,8 +57,6 @@
       "@webiny/react-composition": ["../react-composition/src"],
       "@webiny/react-properties/*": ["../react-properties/src/*"],
       "@webiny/react-properties": ["../react-properties/src"],
-      "@webiny/ui/*": ["../ui/src/*"],
-      "@webiny/ui": ["../ui/src"],
       "@webiny/utils/*": ["../utils/src/*"],
       "@webiny/utils": ["../utils/src"],
       "@webiny/validation/*": ["../validation/src/*"],
diff --git a/packages/app-form-builder/package.json b/packages/app-form-builder/package.json
index c9797a2be70..198ddde5544 100644
--- a/packages/app-form-builder/package.json
+++ b/packages/app-form-builder/package.json
@@ -21,10 +21,9 @@
     "@editorjs/editorjs": "2.26.5",
     "@emotion/react": "11.10.8",
     "@emotion/styled": "11.10.6",
-    "@material-design-icons/svg": "^0.14.13",
-    "@material-symbols/svg-400": "^0.4.1",
     "@svgr/webpack": "^6.1.1",
     "@types/react": "18.2.79",
+    "@webiny/admin-ui": "0.0.0",
     "@webiny/app": "0.0.0",
     "@webiny/app-admin": "0.0.0",
     "@webiny/app-page-builder": "0.0.0",
@@ -33,6 +32,7 @@
     "@webiny/app-security": "0.0.0",
     "@webiny/app-tenancy": "0.0.0",
     "@webiny/form": "0.0.0",
+    "@webiny/icons": "0.0.0",
     "@webiny/plugins": "0.0.0",
     "@webiny/react-router": "0.0.0",
     "@webiny/ui": "0.0.0",
diff --git a/packages/app-form-builder/src/admin/components/FormEditor/Bar.tsx b/packages/app-form-builder/src/admin/components/FormEditor/Bar.tsx
index 0931055706f..ccb7ecd5897 100644
--- a/packages/app-form-builder/src/admin/components/FormEditor/Bar.tsx
+++ b/packages/app-form-builder/src/admin/components/FormEditor/Bar.tsx
@@ -1,24 +1,21 @@
 import React from "react";
-import { TopAppBar, TopAppBarSection } from "@webiny/ui/TopAppBar";
 import { renderPlugins } from "@webiny/app/plugins";
-
-import { css } from "emotion";
-
-const topBar = css({
-    boxShadow: "1px 0px 5px 0px rgba(128,128,128,1)"
-});
+import { HeaderBar } from "@webiny/admin-ui";
 
 const Bar = () => {
     return (
-        <TopAppBar className={topBar} fixed>
-            <TopAppBarSection style={{ width: "50%" }} alignEnd>
-                {renderPlugins("form-editor-default-bar-left")}
-            </TopAppBarSection>
-
-            <TopAppBarSection style={{ width: "50%" }} alignEnd>
-                {renderPlugins("form-editor-default-bar-right")}
-            </TopAppBarSection>
-        </TopAppBar>
+        <HeaderBar
+            start={
+                <div className={"wby-flex wby-items-center wby-justify-self-start wby-gap-sm"}>
+                    {renderPlugins("form-editor-default-bar-left")}
+                </div>
+            }
+            end={
+                <div className={"wby-flex wby-items-center wby-justify-self-end wby-gap-sm"}>
+                    {renderPlugins("form-editor-default-bar-right")}
+                </div>
+            }
+        />
     );
 };
 
diff --git a/packages/app-form-builder/src/admin/components/FormEditor/Context/graphql.ts b/packages/app-form-builder/src/admin/components/FormEditor/Context/graphql.ts
index a2729d11c73..1c11564e4aa 100644
--- a/packages/app-form-builder/src/admin/components/FormEditor/Context/graphql.ts
+++ b/packages/app-form-builder/src/admin/components/FormEditor/Context/graphql.ts
@@ -87,7 +87,12 @@ export const GET_FORM = gql`
                     triggers
                     published
                     locked
-                    status
+                    status,
+                    createdBy {
+                        id
+                        displayName
+                    }
+                    savedOn
                 }
                 error ${ERROR_FIELDS}
             }
diff --git a/packages/app-form-builder/src/admin/components/FormEditor/DragPreview.tsx b/packages/app-form-builder/src/admin/components/FormEditor/DragPreview.tsx
index 2c6016d3e23..739a34db658 100644
--- a/packages/app-form-builder/src/admin/components/FormEditor/DragPreview.tsx
+++ b/packages/app-form-builder/src/admin/components/FormEditor/DragPreview.tsx
@@ -68,32 +68,15 @@ const DragPreview = () => {
 
     return (
         <div
-            style={{
-                position: "fixed",
-                pointerEvents: "none",
-                zIndex: 100,
-                left: 0,
-                top: 0,
-                width: "100%",
-                height: "100%"
-            }}
+            style={{ zIndex: 1001 }}
+            className="wby-fixed wby-pointer-events-none wby-left-0 wby-top-0 wby-w-full wby-h-full"
         >
             <div
                 ref={el => (dragPreviewRef = el)}
-                style={{
-                    transition: "opacity .25s ease-in-out",
-                    display: "block",
-                    opacity: dragHelperOpacity
-                }}
+                className="wby-transition-opacity wby-duration-250 wby-ease-in-out wby-block"
+                style={{ opacity: dragHelperOpacity }}
             >
-                <div
-                    style={{
-                        width: 30,
-                        height: 30,
-                        backgroundColor: "var(--mdc-theme-primary)",
-                        borderRadius: "50%"
-                    }}
-                />
+                <div className="wby-size-lg wby-rounded-full wby-bg-primary-default" />
             </div>
         </div>
     );
diff --git a/packages/app-form-builder/src/admin/components/FormEditor/DropZone/Center.tsx b/packages/app-form-builder/src/admin/components/FormEditor/DropZone/Center.tsx
index 5f3e6e8378e..7ab2dd45c7a 100644
--- a/packages/app-form-builder/src/admin/components/FormEditor/DropZone/Center.tsx
+++ b/packages/app-form-builder/src/admin/components/FormEditor/DropZone/Center.tsx
@@ -1,36 +1,21 @@
 import * as React from "react";
-import styled from "@emotion/styled";
 import { Droppable, OnDropCallable } from "./../Droppable";
+import { cn, cva } from "@webiny/admin-ui";
 
-interface ContainerProps {
-    isOver: boolean;
-    isDragging: boolean;
-}
-const Container = styled("div")(({ isOver, isDragging }: ContainerProps) => ({
-    backgroundColor: "transparent",
-    boxSizing: "border-box",
-    height: "100%",
-    minHeight: 100,
-    position: "relative",
-    userSelect: "none",
-    width: "100%",
-    borderWidth: isDragging ? "4px" : "2px",
-    borderStyle: "dashed",
-    borderColor: isOver ? "var(--mdc-theme-primary)" : "var(--mdc-theme-secondary)",
-    opacity: 1
-}));
-
-interface AddProps {
-    isOver: boolean;
-}
-const Add = styled("div")(({ isOver }: AddProps) => ({
-    position: "absolute",
-    top: "50%",
-    left: "50%",
-    transform: "translate(-50%,-50%)",
-    margin: 0,
-    color: isOver ? "var(--mdc-theme-primary)" : "var(--mdc-theme-secondary)"
-}));
+const droppableContainerVariants = cva(
+    "wby-bg-transparent wby-box-border wby-h-full wby-min-h-[120px] wby-relative wby-user-select-none wby-w-full wby-border-md wby-border-dashed",
+    {
+        variants: {
+            isOver: {
+                true: "wby-border-accent-default wby-text-accent-primary",
+                false: "wby-border-success-default wby-text-success-primary"
+            }
+        },
+        defaultVariants: {
+            isOver: false
+        }
+    }
+);
 
 export interface CenterProps {
     type?: string;
@@ -43,15 +28,17 @@ export interface CenterProps {
 export const Center = ({ onDrop, children }: CenterProps) => {
     return (
         <Droppable onDrop={onDrop}>
-            {({ isOver, isDragging, drop }) => (
+            {({ isOver, drop }) => (
                 <div
                     ref={drop}
                     style={{ width: "100%", height: "100%" }}
                     data-testid={"fb.editor.dropzone.center"}
                 >
-                    <Container isOver={isOver} isDragging={isDragging}>
-                        <Add isOver={isOver}>{children}</Add>
-                    </Container>
+                    <div className={cn(droppableContainerVariants({ isOver }))}>
+                        <div className="wby-absolute wby-top-1/2 wby-left-1/2 wby-transform wby--translate-x-1/2 wby--translate-y-1/2 wby-m-0">
+                            {children}
+                        </div>
+                    </div>
                 </div>
             )}
         </Droppable>
diff --git a/packages/app-form-builder/src/admin/components/FormEditor/DropZone/Horizontal.tsx b/packages/app-form-builder/src/admin/components/FormEditor/DropZone/Horizontal.tsx
index 424315472c4..348a91506d9 100644
--- a/packages/app-form-builder/src/admin/components/FormEditor/DropZone/Horizontal.tsx
+++ b/packages/app-form-builder/src/admin/components/FormEditor/DropZone/Horizontal.tsx
@@ -1,22 +1,6 @@
 import React from "react";
-import styled from "@emotion/styled";
 import { Droppable, IsVisibleCallable, OnDropCallable } from "../Droppable";
-
-const InnerDiv = styled("div")({
-    height: 15,
-    width: "100%",
-    zIndex: 3,
-    borderRadius: 0,
-    boxSizing: "border-box",
-    display: "none",
-    border: "1px dashed black",
-    borderSpacing: 5
-});
-
-const BackgroundColorDiv = styled("div")({
-    width: "100%",
-    height: "100%"
-});
+import { cn } from "@webiny/admin-ui";
 
 interface OuterDivProps {
     isOver: boolean;
@@ -24,32 +8,28 @@ interface OuterDivProps {
     last: boolean;
 }
 
-const OuterDiv = styled("div")(
-    {
-        margin: 0,
-        padding: 0,
-        width: "calc(100% + 2px)",
-        zIndex: 10,
-        backgroundColor: "transparent",
-        position: "absolute",
-        display: "flex",
-        justifyContent: "center"
-    },
-    (props: OuterDivProps) => ({
-        [props.last ? "bottom" : "top"]: -15,
-        // @ts-expect-error
-        [InnerDiv]: {
-            borderColor: props.isOver ? "var(--mdc-theme-primary)" : "var(--mdc-theme-secondary)",
-            display: props.isDragging ? "block" : "none",
-            // @ts-expect-error
-            [BackgroundColorDiv]: {
-                opacity: 0.5,
-                backgroundColor: props.isOver
-                    ? "var(--mdc-theme-primary)"
-                    : "var(--mdc-theme-secondary)"
-            }
-        }
-    })
+const OuterDiv = ({ isOver, isDragging, last }: OuterDivProps) => (
+    <div
+        className={cn(
+            "wby-absolute wby-w-full wby-z-10 wby-bg-transparent wby-flex wby-justify-center",
+            last ? "-wby-bottom-md" : "-wby-top-md"
+        )}
+    >
+        <div
+            className={cn(
+                "wby-h-md wby-w-full wby-z-3 wby-border-dashed wby-border-sm wby-hidden",
+                isOver ? "wby-border-accent-default" : "wby-border-success-default",
+                isDragging && "wby-block"
+            )}
+        >
+            <div
+                className={cn(
+                    "wby-w-full wby-h-full wby-opacity-50",
+                    isOver ? "wby-bg-primary-muted" : "wby-bg-success-muted"
+                )}
+            />
+        </div>
+    </div>
 );
 
 export interface HorizontalProps {
@@ -65,7 +45,7 @@ export const Horizontal = ({ last, onDrop, isVisible }: HorizontalProps) => {
                 <div
                     ref={drop}
                     style={{
-                        height: "25px",
+                        height: "16px",
                         width: "100%",
                         position: "absolute",
                         [last ? "bottom" : "top"]: 0,
@@ -74,11 +54,7 @@ export const Horizontal = ({ last, onDrop, isVisible }: HorizontalProps) => {
                     }}
                     data-testid={last ? "fb.editor.dropzone.horizontal-last" : ""}
                 >
-                    <OuterDiv isOver={isOver} isDragging={isDragging} last={!!last}>
-                        <InnerDiv>
-                            <BackgroundColorDiv />
-                        </InnerDiv>
-                    </OuterDiv>
+                    <OuterDiv isOver={isOver} isDragging={isDragging} last={!!last} />
                 </div>
             )}
         </Droppable>
diff --git a/packages/app-form-builder/src/admin/components/FormEditor/DropZone/Vertical.tsx b/packages/app-form-builder/src/admin/components/FormEditor/DropZone/Vertical.tsx
index 2c81ab7b53b..0088981c7a9 100644
--- a/packages/app-form-builder/src/admin/components/FormEditor/DropZone/Vertical.tsx
+++ b/packages/app-form-builder/src/admin/components/FormEditor/DropZone/Vertical.tsx
@@ -1,24 +1,7 @@
 import React from "react";
-import styled from "@emotion/styled";
+import { cn } from "@webiny/admin-ui";
 import { Droppable, IsVisibleCallable, OnDropCallable } from "../Droppable";
 
-const InnerDivVertical = styled("div")({
-    position: "absolute",
-    width: 10,
-    height: "100%",
-    zIndex: 3,
-    borderRadius: 0,
-    display: "none",
-    boxSizing: "border-box",
-    border: "1px dashed black",
-    borderSpacing: 5
-});
-
-const BackgroundColorDiv = styled("div")({
-    width: "100%",
-    height: "100%"
-});
-
 interface OuterDivVerticalProps {
     isOver: boolean;
     last?: boolean;
@@ -26,32 +9,29 @@ interface OuterDivVerticalProps {
     isDragging?: boolean;
 }
 
-const OuterDivVertical = styled("div")(
-    {
-        position: "absolute",
-        width: "30%",
-        top: 0,
-        height: "100%",
-        zIndex: 10,
-        backgroundColor: "transparent"
-    },
-    (props: OuterDivVerticalProps) => ({
-        [props.last ? "right" : "left"]: -9,
-        textAlign: props.last ? "right" : "left",
-        // @ts-expect-error
-        [InnerDivVertical]: {
-            borderColor: props.isOver ? "var(--mdc-theme-primary)" : "var(--mdc-theme-secondary)",
-            [props.last ? "right" : "left"]: -2,
-            display: props.isDragging ? "block" : "none",
-            // @ts-expect-error
-            [BackgroundColorDiv]: {
-                opacity: 0.5,
-                backgroundColor: props.isOver
-                    ? "var(--mdc-theme-primary)"
-                    : "var(--mdc-theme-secondary)"
-            }
-        }
-    })
+const OuterDivVertical = ({ isOver, last, isDragging }: OuterDivVerticalProps) => (
+    <div
+        className={cn(
+            "wby-absolute wby-top-0 wby-h-full wby-w-[30%] wby-z-10 wby-bg-transparent",
+            last ? "wby-text-right -wby-right-sm" : "wby-text-left -wby-left-sm"
+        )}
+    >
+        <div
+            className={cn(
+                "wby-absolute wby-w-md wby-h-full wby-z-3 wby-border-dashed wby-border-sm wby-hidden",
+                isOver ? "wby-border-accent-default" : "wby-border-success-default",
+                last ? "-wby-right-sm" : "-wby-left-sm",
+                isDragging && "wby-block"
+            )}
+        >
+            <div
+                className={cn(
+                    "wby-w-full wby-h-full wby-opacity-50",
+                    isOver ? "wby-bg-primary-muted" : "wby-bg-success-muted"
+                )}
+            />
+        </div>
+    </div>
 );
 
 export interface VerticalProps {
@@ -76,11 +56,7 @@ export const Vertical = ({ last, onDrop, isVisible }: VerticalProps) => {
                         zIndex: isDragging ? 1000 : -1
                     }}
                 >
-                    <OuterDivVertical isOver={isOver} isDragging={isDragging} last={!!last}>
-                        <InnerDivVertical>
-                            <BackgroundColorDiv />
-                        </InnerDivVertical>
-                    </OuterDivVertical>
+                    <OuterDivVertical isOver={isOver} isDragging={isDragging} last={last} />
                 </div>
             )}
         </Droppable>
diff --git a/packages/app-form-builder/src/admin/components/FormEditor/EditorContent.tsx b/packages/app-form-builder/src/admin/components/FormEditor/EditorContent.tsx
index 350f3ea57e7..ecd64d1a782 100644
--- a/packages/app-form-builder/src/admin/components/FormEditor/EditorContent.tsx
+++ b/packages/app-form-builder/src/admin/components/FormEditor/EditorContent.tsx
@@ -1,82 +1,82 @@
 import React, { useCallback, useState } from "react";
-import { css } from "emotion";
-import styled from "@emotion/styled";
 import { SplitView, LeftPanel, RightPanel } from "@webiny/app-admin/components/SplitView";
-import { Typography } from "@webiny/ui/Typography";
-import { Tabs, Tab } from "@webiny/ui/Tabs";
-import { Icon } from "@webiny/ui/Icon";
 import { EditTab } from "./Tabs/EditTab";
 import { TriggersTab } from "./Tabs/TriggersTab";
 import { PreviewTab } from "./Tabs/PreviewTab";
 import { Fields } from "./Fields";
+import { Heading, Separator, Tabs, Text, TimeAgo } from "@webiny/admin-ui";
+import { ReactComponent as EditIcon } from "@webiny/icons/edit.svg";
+import { ReactComponent as PreviewIcon } from "@webiny/icons/fullscreen.svg";
+import { ReactComponent as TriggerIcon } from "@webiny/icons/share.svg";
+import { useFormEditor } from "~/admin/components/FormEditor/Context";
 
-import { ReactComponent as FormIcon } from "./icons/round-assignment-24px.svg";
-
-const ContentContainer = styled("div")({
-    paddingTop: 65
-});
-
-const LeftBarTitle = styled("div")({
-    borderBottom: "1px solid var(--mdc-theme-on-background)",
-    display: "flex",
-    alignItems: "center",
-    padding: 25,
-    color: "var(--mdc-theme-on-surface)"
-});
-
-const titleIcon = css({
-    height: 24,
-    marginRight: 15,
-    color: "var(--mdc-theme-primary)"
-});
-
-const LeftBarFieldList = styled("div")({
-    padding: 40,
-    overflow: "auto",
-    height: "calc(100vh - 250px)"
-});
-
-const formTabs = css({
-    "&.webiny-ui-tabs": {
-        ".webiny-ui-tabs__tab-bar": {
-            backgroundColor: "var(--mdc-theme-surface)"
-        }
-    }
-});
 const EditorContent = () => {
-    const [activeTab, setActiveTab] = useState(0);
+    const [activeTab, setActiveTab] = useState<string>("edit");
+    const { state } = useFormEditor();
 
     const onFieldDragStart = useCallback(() => {
-        setActiveTab(0);
+        setActiveTab("edit");
     }, []);
 
     return (
-        <ContentContainer>
-            <SplitView>
-                <LeftPanel span={4}>
-                    <LeftBarTitle>
-                        <Icon className={titleIcon} icon={<FormIcon />} />
-                        <Typography use={"headline6"}>Form Elements</Typography>
-                    </LeftBarTitle>
-                    <LeftBarFieldList>
-                        <Fields onFieldDragStart={onFieldDragStart} />
-                    </LeftBarFieldList>
-                </LeftPanel>
-                <RightPanel span={8}>
-                    <Tabs className={formTabs} value={activeTab} onActivate={setActiveTab}>
-                        <Tab label={"Edit"}>
-                            <EditTab />
-                        </Tab>
-                        <Tab label={"Preview"}>
-                            <PreviewTab />
-                        </Tab>
-                        <Tab label={"Triggers"}>
-                            <TriggersTab />
-                        </Tab>
-                    </Tabs>
-                </RightPanel>
-            </SplitView>
-        </ContentContainer>
+        <SplitView>
+            <LeftPanel span={4} className={"wby-bg-neutral-light"}>
+                <div className={"wby-px-lg wby-py-md"}>
+                    <Text
+                        as={"div"}
+                        className={"wby-uppercase wby-font-semibold wby-text-neutral-xstrong"}
+                    >
+                        {"Form elements"}
+                    </Text>
+                </div>
+                <Separator />
+                <div className={"wby-px-lg wby-py-md wby-h-[calc(100vh-98px)] wby-overflow-y-auto"}>
+                    <Fields onFieldDragStart={onFieldDragStart} />
+                </div>
+            </LeftPanel>
+            <RightPanel span={8} className={"wby-bg-neutral-base"}>
+                {state.data && (
+                    <div className={"wby-px-xl wby-pt-lg wby-pb-md-extra"}>
+                        <Heading level={4}>{state.data.name}</Heading>
+                        <Text size={"sm"} className={"wby-text-neutral-muted"}>
+                            {`Created by ${state.data?.createdBy?.displayName}. Last modified: `}
+                            <TimeAgo datetime={state.data.savedOn} />.
+                        </Text>
+                    </div>
+                )}
+
+                <Tabs
+                    size={"md"}
+                    spacing={"xl"}
+                    separator={true}
+                    value={activeTab}
+                    onValueChange={setActiveTab}
+                    tabs={[
+                        <Tabs.Tab
+                            key={"edit"}
+                            value={"edit"}
+                            trigger={"Edit"}
+                            icon={<EditIcon />}
+                            content={<EditTab />}
+                        />,
+                        <Tabs.Tab
+                            key={"preview"}
+                            value={"preview"}
+                            trigger={"Preview"}
+                            icon={<PreviewIcon />}
+                            content={<PreviewTab />}
+                        />,
+                        <Tabs.Tab
+                            key={"triggers"}
+                            value={"triggers"}
+                            trigger={"Triggers"}
+                            icon={<TriggerIcon />}
+                            content={<TriggersTab />}
+                        />
+                    ]}
+                />
+            </RightPanel>
+        </SplitView>
     );
 };
 
diff --git a/packages/app-form-builder/src/admin/components/FormEditor/Fields.tsx b/packages/app-form-builder/src/admin/components/FormEditor/Fields.tsx
index 25fc3a409c9..9d43fb15439 100644
--- a/packages/app-form-builder/src/admin/components/FormEditor/Fields.tsx
+++ b/packages/app-form-builder/src/admin/components/FormEditor/Fields.tsx
@@ -1,87 +1,44 @@
 import React from "react";
 import { useFormEditor } from "./Context";
 import { plugins } from "@webiny/plugins";
-import styled from "@emotion/styled";
-import { css } from "emotion";
-import { Icon } from "@webiny/ui/Icon";
-import { Accordion, AccordionItem } from "@webiny/ui/Accordion";
-import { ReactComponent as HandleIcon } from "./icons/round-drag_indicator-24px.svg";
+import { ReactComponent as HandleIcon } from "@webiny/icons/drag_indicator.svg";
 import Draggable from "./Draggable";
 import { FbBuilderFieldPlugin, FbEditorFieldGroup, FbFormModelField } from "~/types";
-
-const FieldContainer = styled("div")({
-    padding: "10px 15px",
-    marginBottom: 20,
-    display: "flex",
-    width: "100%",
-    backgroundColor: "var(--mdc-theme-on-background)",
-    borderRadius: 15,
-    boxSizing: "border-box",
-    cursor: "grab",
-    opacity: 1,
-    transition: "opacity 225ms",
-    "&:hover": {
-        opacity: 0.8
-    },
-    "&:last-child": {
-        marginBottom: 0
-    }
-});
-
-const FieldLabel = styled("div")({
-    textTransform: "uppercase",
-    lineHeight: "145%",
-    color: "var(--mdc-theme-on-surface)"
-});
-
-const FieldHandle = styled("div")({
-    marginRight: 15,
-    color: "var(--mdc-theme-on-surface)"
-});
-
-const accordionItem = css({
-    "&.webiny-ui-accordion-item": {
-        ".webiny-ui-accordion-item__list-item": {
-            height: "14px",
-            borderRadius: "15px !important",
-            padding: "15px 20px 14px 20px",
-            textTransform: "uppercase",
-            backgroundColor: "var(--mdc-theme-on-background)",
-            marginBottom: 20,
-            ".webiny-ui-accordion-item__title": {
-                ">div": {
-                    fontWeight: 400
-                }
-            }
-        },
-        ".webiny-ui-accordion-item__content": {
-            border: "1px solid var(--mdc-theme-on-background)",
-            borderRadius: 15,
-            marginBottom: 20
-        }
-    }
-});
+import { Accordion, cn, Heading, Icon } from "@webiny/admin-ui";
 
 interface FieldProps {
     onFieldDragStart: () => void;
     fieldType: Pick<FbFormModelField, "name" | "label">;
+    className?: string;
 }
-const Field = ({ onFieldDragStart, fieldType: { name, label } }: FieldProps) => {
+const Field = ({ onFieldDragStart, fieldType: { name, label }, className }: FieldProps) => {
     return (
         <Draggable beginDrag={{ ui: "field", name }}>
             {({ drag }) => (
                 <div
                     ref={drag}
-                    style={{ marginBottom: 10 }}
+                    className={cn(
+                        [
+                            "wby-bg-neutral-base wby-rounded-sm wby-mb-sm wby-px-md wby-py-sm-extra wby-cursor-grab last-of-type:wby-mb-none hover:wby-opacity-80 wby-transition-opacity"
+                        ],
+                        className
+                    )}
                     data-testid={`fb.editor.fields.field.${name}`}
                     onDragStart={onFieldDragStart}
                 >
-                    <FieldContainer>
-                        <FieldHandle>
-                            <Icon icon={<HandleIcon />} />
-                        </FieldHandle>
-                        <FieldLabel>{label}</FieldLabel>
-                    </FieldContainer>
+                    <div className={"wby-flex wby-items-center wby-gap-sm-extra"}>
+                        <div>
+                            <Icon
+                                icon={<HandleIcon />}
+                                label={"Handle"}
+                                size={"md"}
+                                color={"neutral-light"}
+                            />
+                        </div>
+                        <div>
+                            <Heading level={6}>{label}</Heading>
+                        </div>
+                    </div>
                 </div>
             )}
         </Draggable>
@@ -119,14 +76,9 @@ export const Fields = ({ onFieldDragStart }: FieldsProps) => {
                 onFieldDragStart={onFieldDragStart}
             />
 
-            <Accordion elevation={0}>
+            <Accordion variant={"container"} color={"neutral"}>
                 {getGroups().map(group => (
-                    <AccordionItem
-                        key={group.name}
-                        title={group.title}
-                        className={accordionItem}
-                        data-testid={group.name}
-                    >
+                    <Accordion.Item key={group.name} title={group.title} data-testid={group.name}>
                         <>
                             {!group.fields.length && (
                                 <span>No fields are available at the moment!</span>
@@ -137,11 +89,12 @@ export const Fields = ({ onFieldDragStart }: FieldsProps) => {
                                         key={fieldType.name}
                                         fieldType={fieldType}
                                         onFieldDragStart={onFieldDragStart}
+                                        className={"wby-bg-neutral-light"}
                                     />
                                 );
                             })}
                         </>
-                    </AccordionItem>
+                    </Accordion.Item>
                 ))}
             </Accordion>
         </React.Fragment>
diff --git a/packages/app-form-builder/src/admin/components/FormEditor/FormEditor.tsx b/packages/app-form-builder/src/admin/components/FormEditor/FormEditor.tsx
index a7a58edcb41..4e2fbd45baa 100644
--- a/packages/app-form-builder/src/admin/components/FormEditor/FormEditor.tsx
+++ b/packages/app-form-builder/src/admin/components/FormEditor/FormEditor.tsx
@@ -28,7 +28,7 @@ const FormEditor = () => {
     }
 
     return (
-        <div className={"form-editor"}>
+        <div className={"form-editor wby-flex-1"}>
             <EditorBar />
             <EditorContent />
             <DragPreview />
diff --git a/packages/app-form-builder/src/admin/components/FormEditor/Tabs/EditTab/EditFieldDialog.tsx b/packages/app-form-builder/src/admin/components/FormEditor/Tabs/EditTab/EditFieldDialog.tsx
index 6f47572a986..8b76ae86911 100644
--- a/packages/app-form-builder/src/admin/components/FormEditor/Tabs/EditTab/EditFieldDialog.tsx
+++ b/packages/app-form-builder/src/admin/components/FormEditor/Tabs/EditTab/EditFieldDialog.tsx
@@ -1,18 +1,8 @@
 import React, { useCallback, useEffect, useState } from "react";
 import cloneDeep from "lodash/cloneDeep";
-import { css } from "emotion";
-import styled from "@emotion/styled";
-import {
-    Dialog,
-    DialogActions,
-    DialogButton,
-    DialogCancel,
-    DialogContent,
-    DialogTitle
-} from "@webiny/ui/Dialog";
+import { Grid, Dialog, Drawer, Button, Tabs } from "@webiny/admin-ui";
 import { Form, FormOnSubmit } from "@webiny/form";
 import { plugins } from "@webiny/plugins";
-import { Tab, Tabs } from "@webiny/ui/Tabs";
 import GeneralTab from "./EditFieldDialog/GeneralTab";
 import ValidatorsTab from "./EditFieldDialog/ValidatorsTab";
 import FieldTypeSelector from "./EditFieldDialog/FieldTypeSelector";
@@ -22,21 +12,136 @@ import { FbBuilderFieldPlugin, FbFormModelField } from "~/types";
 
 const t = i18n.namespace("FormEditor.EditFieldDialog");
 
-const dialogBody = css({
-    "&.webiny-ui-dialog__content": {
-        width: 875,
-        height: 450
+interface SelectFieldDialogProps {
+    currentField: FbFormModelField | null;
+    open: boolean;
+    onClose: () => void;
+    onSelect: (field: FbFormModelField) => void;
+}
+
+const SelectFieldDialog = ({ currentField, open, onClose, onSelect }: SelectFieldDialogProps) => {
+    if (!currentField) {
+        return null;
+    }
+
+    return (
+        <Dialog
+            title={"Field settings"}
+            open={open}
+            onClose={onClose}
+            actions={<Dialog.CancelButton />}
+        >
+            <Grid>
+                {plugins
+                    .byType<FbBuilderFieldPlugin>("form-editor-field-type")
+                    .filter(pl => !pl.field.group)
+                    .map(pl => (
+                        <Grid.Column span={6} key={pl.name}>
+                            <FieldTypeSelector
+                                fieldType={pl.field}
+                                onClick={() => {
+                                    const newCurrent = pl.field.createField();
+                                    if (currentField) {
+                                        // User edited existing field, that's why we still want to
+                                        // keep a couple of previous values.
+                                        const { _id, label, fieldId, helpText } = currentField;
+                                        newCurrent._id = _id;
+                                        newCurrent.label = label;
+                                        newCurrent.fieldId = fieldId;
+                                        newCurrent.helpText = helpText;
+                                    }
+                                    onSelect(newCurrent);
+                                }}
+                            />
+                        </Grid.Column>
+                    ))}
+            </Grid>
+        </Dialog>
+    );
+};
+
+interface EditFieldDrawerProps {
+    open: boolean;
+    onClose: () => void;
+    onSubmit: FormOnSubmit;
+    onBack: () => void;
+    field: FbFormModelField;
+    isNewField: boolean;
+}
+
+const EditFieldDrawer = ({
+    field,
+    isNewField,
+    onBack,
+    onClose,
+    onSubmit,
+    open
+}: EditFieldDrawerProps) => {
+    const { getFieldPlugin } = useFormEditor();
+
+    const fieldPlugin = getFieldPlugin({
+        name: field.name
+    });
+
+    let headerTitle = "Field Settings";
+    let fieldPluginFieldValidators: string[] = [];
+    if (fieldPlugin) {
+        headerTitle = t`Field Settings - {fieldTypeLabel}`({
+            fieldTypeLabel: fieldPlugin.field.label
+        });
+        fieldPluginFieldValidators = fieldPlugin.field.validators || [];
     }
-});
 
-const FbFormModelFieldList = styled("div")({
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "center",
-    flexWrap: "wrap",
-    paddingTop: 25,
-    backgroundColor: "var(--mdc-theme-background) !important"
-});
+    if (!field) {
+        return null;
+    }
+
+    return (
+        <Form data={field} onSubmit={onSubmit}>
+            {form => (
+                <Drawer
+                    title={headerTitle}
+                    open={open}
+                    modal={true}
+                    width={800}
+                    bodyPadding={false}
+                    footerSeparator={true}
+                    onClose={onClose}
+                    actions={
+                        <>
+                            <Drawer.CancelButton />
+                            <Drawer.ConfirmButton onClick={form.submit} />
+                        </>
+                    }
+                    info={
+                        isNewField && <Button variant={"ghost"} text={"Go back"} onClick={onBack} />
+                    }
+                >
+                    <Tabs
+                        spacing={"lg"}
+                        size={"md"}
+                        separator={true}
+                        tabs={[
+                            <Tabs.Tab
+                                trigger={t`General`}
+                                value={"general"}
+                                key={"general"}
+                                content={<GeneralTab form={form} field={field} />}
+                            />,
+                            <Tabs.Tab
+                                trigger={t`Validators`}
+                                value={"validators"}
+                                key={"validators"}
+                                content={<ValidatorsTab form={form} field={field} />}
+                                disabled={!fieldPluginFieldValidators.length}
+                            />
+                        ]}
+                    />
+                </Drawer>
+            )}
+        </Form>
+    );
+};
 
 interface EditFieldDialogProps {
     field: FbFormModelField | null;
@@ -45,11 +150,11 @@ interface EditFieldDialogProps {
 }
 
 const EditFieldDialog = ({ field, onSubmit, ...props }: EditFieldDialogProps) => {
+    const [openFieldSelector, setOpenFieldSelector] = useState<boolean>(false);
+    const [openFieldEditor, setOpenFieldEditor] = useState<boolean>(false);
+
     const [current, setCurrent] = useState<FbFormModelField | null>(null);
     const [isNewField, setIsNewField] = useState<boolean>(false);
-    const [screen, setScreen] = useState<string>();
-
-    const { getFieldPlugin } = useFormEditor();
 
     useEffect(() => {
         if (!field) {
@@ -58,112 +163,54 @@ const EditFieldDialog = ({ field, onSubmit, ...props }: EditFieldDialogProps) =>
         }
         setCurrent(cloneDeep(field));
         setIsNewField(!field._id);
-        setScreen(field.type ? "fieldOptions" : "fieldType");
+
+        if (field.type) {
+            setOpenFieldEditor(true);
+        } else {
+            setOpenFieldSelector(true);
+        }
     }, [field]);
 
-    const onClose = useCallback(() => {
+    const onFieldSelectorClose = useCallback(() => {
         setCurrent(null);
         props.onClose();
-    }, []);
-
-    let render = null;
-    let headerTitle = t`Field Settings`;
+        setOpenFieldSelector(false);
+    }, [setOpenFieldSelector]);
 
-    if (current) {
-        const fieldPlugin = getFieldPlugin({
-            name: current.name
-        });
-        let fieldPluginFieldValidators: string[] = [];
-        if (fieldPlugin) {
-            headerTitle = t`Field Settings - {fieldTypeLabel}`({
-                fieldTypeLabel: fieldPlugin.field.label
-            });
-            fieldPluginFieldValidators = fieldPlugin.field.validators || [];
-        }
+    const onFieldEditorClose = useCallback(() => {
+        setCurrent(null);
+        props.onClose();
+        setOpenFieldEditor(false);
+    }, [setOpenFieldEditor]);
 
-        switch (screen) {
-            case "fieldOptions": {
-                render = (
-                    <Form data={current} onSubmit={onSubmit}>
-                        {form => (
-                            <>
-                                <DialogContent className={dialogBody}>
-                                    <Tabs>
-                                        <Tab label={t`General`}>
-                                            <GeneralTab form={form} field={current} />
-                                        </Tab>
-                                        {fieldPluginFieldValidators.length > 0 && (
-                                            <Tab label={"Validators"}>
-                                                <ValidatorsTab form={form} field={current} />
-                                            </Tab>
-                                        )}
-                                    </Tabs>
-                                </DialogContent>
-                                <DialogActions
-                                    style={{
-                                        justifyContent: isNewField ? "space-between" : "flex-end"
-                                    }}
-                                >
-                                    {isNewField && (
-                                        <DialogButton
-                                            onClick={() => setScreen("fieldType")}
-                                        >{t`Go back`}</DialogButton>
-                                    )}
-                                    <div>
-                                        <DialogButton onClick={onClose}>{t`Cancel`}</DialogButton>
-                                        <DialogButton onClick={form.submit}>{t`Save`}</DialogButton>
-                                    </div>
-                                </DialogActions>
-                            </>
-                        )}
-                    </Form>
-                );
-                break;
-            }
-            default:
-                render = (
-                    <>
-                        <DialogContent className={dialogBody}>
-                            <FbFormModelFieldList>
-                                {plugins
-                                    .byType<FbBuilderFieldPlugin>("form-editor-field-type")
-                                    .filter(pl => !pl.field.group)
-                                    .map(pl => (
-                                        <FieldTypeSelector
-                                            key={pl.name}
-                                            fieldType={pl.field}
-                                            onClick={() => {
-                                                const newCurrent = pl.field.createField();
-                                                if (current) {
-                                                    // User edited existing field, that's why we still want to
-                                                    // keep a couple of previous values.
-                                                    const { _id, label, fieldId, helpText } =
-                                                        current;
-                                                    newCurrent._id = _id;
-                                                    newCurrent.label = label;
-                                                    newCurrent.fieldId = fieldId;
-                                                    newCurrent.helpText = helpText;
-                                                }
-                                                setCurrent(newCurrent);
-                                                setScreen("fieldOptions");
-                                            }}
-                                        />
-                                    ))}
-                            </FbFormModelFieldList>
-                        </DialogContent>
-                        <DialogActions>
-                            <DialogCancel onClick={onClose}>{t`Cancel`}</DialogCancel>
-                        </DialogActions>
-                    </>
-                );
-        }
-    }
+    const onFieldEditorBack = useCallback(() => {
+        setOpenFieldEditor(false);
+        setOpenFieldSelector(true);
+    }, [setOpenFieldEditor, setOpenFieldSelector]);
 
     return (
-        <Dialog preventOutsideDismiss={true} open={!!current} onClose={onClose}>
-            <DialogTitle>{headerTitle}</DialogTitle>
-            {render}
-        </Dialog>
+        <>
+            <SelectFieldDialog
+                currentField={current}
+                open={openFieldSelector}
+                onClose={onFieldSelectorClose}
+                onSelect={field => {
+                    setCurrent(field);
+                    setOpenFieldSelector(false);
+                    setOpenFieldEditor(true);
+                }}
+            />
+            {current && (
+                <EditFieldDrawer
+                    isNewField={isNewField}
+                    open={openFieldEditor}
+                    field={current}
+                    onBack={onFieldEditorBack}
+                    onClose={onFieldEditorClose}
+                    onSubmit={onSubmit}
+                />
+            )}
+        </>
     );
 };
 
diff --git a/packages/app-form-builder/src/admin/components/FormEditor/Tabs/EditTab/EditFieldDialog/FieldTypeSelector.tsx b/packages/app-form-builder/src/admin/components/FormEditor/Tabs/EditTab/EditFieldDialog/FieldTypeSelector.tsx
index 4bee8fa3f21..1738c9d6214 100644
--- a/packages/app-form-builder/src/admin/components/FormEditor/Tabs/EditTab/EditFieldDialog/FieldTypeSelector.tsx
+++ b/packages/app-form-builder/src/admin/components/FormEditor/Tabs/EditTab/EditFieldDialog/FieldTypeSelector.tsx
@@ -1,49 +1,34 @@
 import React from "react";
-import { Elevation } from "@webiny/ui/Elevation";
-import { Typography } from "@webiny/ui/Typography";
-import { Icon } from "@webiny/ui/Icon";
-import { css } from "emotion";
+import { Heading, Icon, Text } from "@webiny/admin-ui";
 import { FbBuilderFieldPlugin } from "~/types";
-const fieldTypeBox = css({
-    width: 150,
-    height: 150,
-    textAlign: "center",
-    margin: 20,
-    padding: 15,
-    display: "flex",
-    justifyContent: "flex-start",
-    alignItems: "center",
-    cursor: "pointer",
-    transition: "opacity 225ms",
-    flexDirection: "column",
-    backgroundColor: "var(--mdc-theme-surface) !important",
-    ".webiny-ui-icon": {
-        color: "var(--mdc-theme-secondary)",
-        height: 50,
-        transition: "color 225ms"
-    },
-    "&:hover": {
-        opacity: 0.8,
-        ".webiny-ui-icon": {
-            color: "var(--mdc-theme-primary)"
-        }
-    }
-});
 
 interface FbFormModelFieldSelectorProps {
     fieldType: FbBuilderFieldPlugin["field"];
     onClick: (event: React.MouseEvent) => void;
 }
+
 const FbFormModelFieldSelector = ({ fieldType, onClick }: FbFormModelFieldSelectorProps) => {
     return (
-        <span onClick={onClick} style={{ display: "inline-block" }}>
-            <Elevation z={2} className={fieldTypeBox}>
-                <Icon icon={fieldType.icon as React.ReactElement} />
-                <Typography use={"headline5"}>{fieldType.label}</Typography>
-                <br />
-                <Typography use={"caption"}>{fieldType.description}</Typography>
-            </Elevation>
-        </span>
+        <div
+            style={{ height: "140px" }}
+            onClick={onClick}
+            className={
+                "wby-px-lg wby-py-md wby-flex wby-items-center wby-justify-center wby-bg-neutral-dimmed wby-rounded-lg wby-text-center hover:wby-bg-neutral-muted wby-transition-all wby-duration-200 wby-cursor-pointer"
+            }
+        >
+            <div>
+                <Icon
+                    size={"lg"}
+                    label={fieldType.label}
+                    icon={fieldType.icon as React.ReactElement}
+                    className={"wby-mx-auto wby-mb-md"}
+                />
+                <Heading level={5}>{fieldType.label}</Heading>
+                <Text as={"div"} size={"sm"}>
+                    {fieldType.description}
+                </Text>
+            </div>
+        </div>
     );
 };
 
diff --git a/packages/app-form-builder/src/admin/components/FormEditor/Tabs/EditTab/EditFieldDialog/GeneralTab.tsx b/packages/app-form-builder/src/admin/components/FormEditor/Tabs/EditTab/EditFieldDialog/GeneralTab.tsx
index 841e60232df..c558f078b29 100644
--- a/packages/app-form-builder/src/admin/components/FormEditor/Tabs/EditTab/EditFieldDialog/GeneralTab.tsx
+++ b/packages/app-form-builder/src/admin/components/FormEditor/Tabs/EditTab/EditFieldDialog/GeneralTab.tsx
@@ -1,12 +1,11 @@
 import React, { useCallback } from "react";
-import { Input } from "@webiny/ui/Input";
-import { Grid, Cell } from "@webiny/ui/Grid";
 import camelCase from "lodash/camelCase";
 import { useFormEditor } from "../../../Context";
 import { validation } from "@webiny/validation";
 import { Validator } from "@webiny/validation/types";
 import { FbFormModelField } from "~/types";
 import { FormRenderPropParams } from "@webiny/form/types";
+import { Grid, Input } from "@webiny/admin-ui";
 
 interface GeneralTabProps {
     field: FbFormModelField;
@@ -58,16 +57,16 @@ const GeneralTab = ({ field, form }: GeneralTabProps) => {
     return (
         <>
             <Grid>
-                <Cell span={6}>
+                <Grid.Column span={6}>
                     <Bind
                         name={"label"}
                         validators={validation.create("required")}
                         afterChange={afterChangeLabel}
                     >
-                        <Input label={"Label"} autoFocus={true} />
+                        <Input size={"lg"} label={"Label"} autoFocus={true} />
                     </Bind>
-                </Cell>
-                <Cell span={6}>
+                </Grid.Column>
+                <Grid.Column span={6}>
                     <Bind
                         name={"fieldId"}
                         validators={[
@@ -76,16 +75,20 @@ const GeneralTab = ({ field, form }: GeneralTabProps) => {
                             fieldIdValidator
                         ]}
                     >
-                        <Input label={"Field ID"} />
+                        <Input size={"lg"} label={"Field ID"} />
                     </Bind>
-                </Cell>
-                <Cell span={12}>
+                </Grid.Column>
+                <Grid.Column span={12}>
                     <Bind name={"helpText"}>
-                        <Input label={"Help text"} description={"Help text (optional)"} />
+                        <Input
+                            size={"lg"}
+                            label={"Help text"}
+                            description={"Help text (optional)"}
+                        />
                     </Bind>
-                </Cell>
+                </Grid.Column>
+                <>{additionalSettings}</>
             </Grid>
-            {additionalSettings}
         </>
     );
 };
diff --git a/packages/app-form-builder/src/admin/components/FormEditor/Tabs/EditTab/EditFieldDialog/ValidatorsTab.tsx b/packages/app-form-builder/src/admin/components/FormEditor/Tabs/EditTab/EditFieldDialog/ValidatorsTab.tsx
index c04291e5265..a8217036dc2 100644
--- a/packages/app-form-builder/src/admin/components/FormEditor/Tabs/EditTab/EditFieldDialog/ValidatorsTab.tsx
+++ b/packages/app-form-builder/src/admin/components/FormEditor/Tabs/EditTab/EditFieldDialog/ValidatorsTab.tsx
@@ -1,23 +1,16 @@
 import React, { useMemo } from "react";
 import { plugins } from "@webiny/plugins";
-import { Switch } from "@webiny/ui/Switch";
-import {
-    SimpleForm,
-    SimpleFormContent,
-    SimpleFormHeader
-} from "@webiny/app-admin/components/SimpleForm";
 import { useFormEditor } from "../../../Context";
 import { BindComponentRenderPropOnChange, Form, FormRenderPropParams } from "@webiny/form";
 import cloneDeep from "lodash/cloneDeep";
 import debounce from "lodash/debounce";
-import { Cell, Grid } from "@webiny/ui/Grid";
-import { Input } from "@webiny/ui/Input";
 import { validation } from "@webiny/validation";
 import {
     FbBuilderFormFieldValidatorPlugin,
     FbBuilderFormFieldValidatorPluginValidator,
     FbFormModelField
 } from "~/types";
+import { Accordion, Grid, Input, Switch } from "@webiny/admin-ui";
 
 interface OnEnabledChangeParams {
     data: Record<string, string>;
@@ -117,7 +110,7 @@ const ValidatorsTab = (props: ValidatorsTabProps) => {
         <Bind name={"validation"}>
             {({ value: validationValue, onChange: onChangeValidation }) => {
                 return (
-                    <>
+                    <Accordion>
                         {validators.map(({ optional, validator }) => {
                             const validatorIndex = validationValue.findIndex(
                                 /**
@@ -129,24 +122,31 @@ const ValidatorsTab = (props: ValidatorsTabProps) => {
                             const data = validationValue[validatorIndex];
 
                             return (
-                                <SimpleForm key={validator.name}>
-                                    {/*TODO: @ts-adrian nema descriptiona?*/}
-                                    <SimpleFormHeader title={validator.label}>
-                                        {optional && (
-                                            <Switch
-                                                label="Enabled"
-                                                value={validatorIndex >= 0}
-                                                onChange={() =>
-                                                    onEnabledChange({
-                                                        data,
-                                                        validationValue,
-                                                        onChangeValidation,
-                                                        validator
-                                                    })
-                                                }
-                                            />
-                                        )}
-                                    </SimpleFormHeader>
+                                <Accordion.Item
+                                    key={validator.name}
+                                    title={validator.label}
+                                    description={validator.description}
+                                    interactive={false}
+                                    open={!!data}
+                                    actions={
+                                        <>
+                                            {optional && (
+                                                <Switch
+                                                    label="Enabled"
+                                                    checked={validatorIndex >= 0}
+                                                    onChange={() =>
+                                                        onEnabledChange({
+                                                            data,
+                                                            validationValue,
+                                                            onChangeValidation,
+                                                            validator
+                                                        })
+                                                    }
+                                                />
+                                            )}
+                                        </>
+                                    }
+                                >
                                     {data && (
                                         <Form
                                             data={data}
@@ -160,45 +160,45 @@ const ValidatorsTab = (props: ValidatorsTabProps) => {
                                             }
                                         >
                                             {({ Bind, setValue }) => (
-                                                <SimpleFormContent>
-                                                    <Grid>
-                                                        <Cell span={12}>
-                                                            {/*TODO: @ts-adrian kako ovo?*/}
-                                                            <Bind
-                                                                name={"message"}
-                                                                validators={validation.create(
-                                                                    "required"
-                                                                )}
-                                                            >
-                                                                <Input
-                                                                    label={"Message"}
-                                                                    description={
-                                                                        "This message will be displayed to the user"
-                                                                    }
-                                                                />
-                                                            </Bind>
-                                                        </Cell>
-                                                    </Grid>
-
-                                                    {typeof validator.renderSettings ===
-                                                        "function" &&
-                                                        validator.renderSettings({
-                                                            setValue,
-                                                            setMessage: message => {
-                                                                setValue("message", message);
-                                                            },
-                                                            data,
-                                                            Bind,
-                                                            formFieldData
-                                                        })}
-                                                </SimpleFormContent>
+                                                <Grid>
+                                                    <Grid.Column span={12}>
+                                                        {/*TODO: @ts-adrian kako ovo?*/}
+                                                        <Bind
+                                                            name={"message"}
+                                                            validators={validation.create(
+                                                                "required"
+                                                            )}
+                                                        >
+                                                            <Input
+                                                                size={"lg"}
+                                                                label={"Message"}
+                                                                description={
+                                                                    "This message will be displayed to the user"
+                                                                }
+                                                            />
+                                                        </Bind>
+                                                    </Grid.Column>
+                                                    <>
+                                                        {typeof validator.renderSettings ===
+                                                            "function" &&
+                                                            validator.renderSettings({
+                                                                setValue,
+                                                                setMessage: message => {
+                                                                    setValue("message", message);
+                                                                },
+                                                                data,
+                                                                Bind,
+                                                                formFieldData
+                                                            })}
+                                                    </>
+                                                </Grid>
                                             )}
                                         </Form>
                                     )}
-                                </SimpleForm>
+                                </Accordion.Item>
                             );
                         })}
-                    </>
+                    </Accordion>
                 );
             }}
         </Bind>
diff --git a/packages/app-form-builder/src/admin/components/FormEditor/Tabs/EditTab/EditTab.tsx b/packages/app-form-builder/src/admin/components/FormEditor/Tabs/EditTab/EditTab.tsx
index 8f6c063befe..fae84be7573 100644
--- a/packages/app-form-builder/src/admin/components/FormEditor/Tabs/EditTab/EditTab.tsx
+++ b/packages/app-form-builder/src/admin/components/FormEditor/Tabs/EditTab/EditTab.tsx
@@ -1,5 +1,4 @@
 import React, { useState } from "react";
-import { EditContainer } from "./Styled";
 import { useFormEditor } from "~/admin/components/FormEditor";
 import { FbFormStep } from "~/types";
 
@@ -19,7 +18,7 @@ export const EditTab = () => {
     const stepTitle = data.steps.find(step => step.id === isEditStep.id)?.title || "";
 
     return (
-        <EditContainer>
+        <div className={"wby-relative"}>
             <FieldErrors errors={errors} />
             {(data.steps || []).map((formStep: FbFormStep, index: number) => (
                 <EditTabStep
@@ -35,6 +34,6 @@ export const EditTab = () => {
                 updateStep={updateStep}
                 stepTitle={stepTitle}
             />
-        </EditContainer>
+        </div>
     );
 };
diff --git a/packages/app-form-builder/src/admin/components/FormEditor/Tabs/EditTab/EditTabStep.tsx b/packages/app-form-builder/src/admin/components/FormEditor/Tabs/EditTab/EditTabStep.tsx
index 3ce90de9e64..ed600db39f7 100644
--- a/packages/app-form-builder/src/admin/components/FormEditor/Tabs/EditTab/EditTabStep.tsx
+++ b/packages/app-form-builder/src/admin/components/FormEditor/Tabs/EditTab/EditTabStep.tsx
@@ -1,45 +1,12 @@
 import React, { useMemo } from "react";
-import styled from "@emotion/styled";
-
+import { Button, cn } from "@webiny/admin-ui";
+import { ReactComponent as AddIcon } from "@webiny/icons/add.svg";
 import Draggable, { BeginDragProps } from "~/admin/components/FormEditor/Draggable";
 import { FbFormStep } from "~/types";
-import { RowContainer } from "./Styled";
 import { Horizontal } from "~/admin/components/FormEditor/DropZone";
 import { useEditTab } from "./EditFieldDialog/useEditTab";
-
-import { IconButton } from "@webiny/ui/Button";
-import { ReactComponent as AddIcon } from "@material-design-icons/svg/outlined/add_circle_outline.svg";
 import { EditTabStepRow } from "./EditTabStepRow";
 
-const AddStepBtn = styled.div`
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin-top: 25px;
-    text-transform: uppercase;
-    cursor: pointer;
-`;
-
-const RowContainerWrapper = styled.div`
-    & .css-1uf2zda-RowContainer {
-        &:last-child {
-            margin-bottom: 25px !important;
-        }
-    }
-`;
-
-const StyledRowContainer = styled(RowContainer)<{ isDragging: boolean }>`
-    opacity: ${({ isDragging }) => (isDragging ? 0.3 : 1)};
-    border: none;
-    box-shadow: none;
-    margin-bottom: 20px;
-    padding: 10px;
-
-    &:last-child {
-        margin-bottom: 25px !important;
-    }
-`;
-
 interface EditTabStepProps {
     setIsEditStep: (params: { isOpened: boolean; id: string }) => void;
     formStep: FbFormStep;
@@ -54,10 +21,16 @@ const AddStepButton = ({
     addStep: () => void;
 }) => {
     return addStepButtonVisible ? (
-        <AddStepBtn onClick={addStep} data-testid="add-step-action">
-            <IconButton icon={<AddIcon />} />
-            Add new step
-        </AddStepBtn>
+        <div className={"wby-flex wby-justify-center wby-items-center wby-mt-xl"}>
+            <Button
+                variant={"tertiary"}
+                size={"lg"}
+                text={"Add new step"}
+                icon={<AddIcon />}
+                onClick={addStep}
+                data-testid="add-step-action"
+            />
+        </div>
     ) : null;
 };
 
@@ -82,8 +55,15 @@ export const EditTabStep = ({ setIsEditStep, formStep, index }: EditTabStepProps
     return (
         <Draggable beginDrag={beginDragStepProps}>
             {({ drag, isDragging }) => (
-                <RowContainerWrapper>
-                    <StyledRowContainer isDragging={isDragging}>
+                <>
+                    <div
+                        className={cn([
+                            "wby-w-full",
+                            "wby-relative",
+                            "wby-mb-md last-of-type:wby-mb-none",
+                            isDragging ? "wby-opacity-30" : "wby-opacity-100"
+                        ])}
+                    >
                         <EditTabStepRow
                             dragRef={drag}
                             setIsEditStep={setIsEditStep}
@@ -99,9 +79,9 @@ export const EditTabStep = ({ setIsEditStep, formStep, index }: EditTabStepProps
                             onDrop={item => handleStepMove(item, formStep)}
                             isVisible={item => renderBottomDropZone(item, formStep.id)}
                         />
-                    </StyledRowContainer>
+                    </div>
                     <AddStepButton addStep={addStep} addStepButtonVisible={addStepButtonVisible} />
-                </RowContainerWrapper>
+                </>
             )}
         </Draggable>
     );
diff --git a/packages/app-form-builder/src/admin/components/FormEditor/Tabs/EditTab/Field.tsx b/packages/app-form-builder/src/admin/components/FormEditor/Tabs/EditTab/Field.tsx
index faf7ec29e58..2d25683a4f2 100644
--- a/packages/app-form-builder/src/admin/components/FormEditor/Tabs/EditTab/Field.tsx
+++ b/packages/app-form-builder/src/admin/components/FormEditor/Tabs/EditTab/Field.tsx
@@ -1,52 +1,10 @@
 import React, { useCallback } from "react";
-import styled from "@emotion/styled";
-import { IconButton } from "@webiny/ui/Button";
-import { Typography } from "@webiny/ui/Typography";
-import { Switch } from "@webiny/ui/Switch";
-import { ReactComponent as EditIcon } from "../../icons/edit.svg";
-import { ReactComponent as DeleteIcon } from "../../icons/delete.svg";
+import { Heading, IconButton, Separator, Switch, Text } from "@webiny/admin-ui";
+import { ReactComponent as EditIcon } from "@webiny/icons/edit.svg";
+import { ReactComponent as DeleteIcon } from "@webiny/icons/delete.svg";
 import { useFormEditor } from "../../Context";
 import { FbFormModelField } from "~/types";
 
-const FieldContainer = styled("div")({
-    display: "flex",
-    flexDirection: "row",
-    justifyContent: "space-between",
-    alignItems: "center"
-});
-
-const Info = styled("div")({
-    display: "flex",
-    flexDirection: "column",
-    "> *": {
-        flex: "1 100%",
-        lineHeight: "150%"
-    }
-});
-
-const Actions = styled("div")({
-    display: "flex",
-    flexDirection: "row",
-    alignItems: "right",
-    "> *": {
-        flex: "1 100%"
-    },
-    ".switch-wrapper": {
-        display: "flex",
-        alignItems: "center",
-        color: "var(--mdc-theme-text-secondary-on-background)",
-        ".webiny-ui-switch": {
-            margin: "0 16px"
-        }
-    }
-});
-
-const StyledDivider = styled("div")({
-    width: 2,
-    margin: 5,
-    backgroundColor: "var(--mdc-theme-on-background)"
-});
-
 interface FieldProps {
     field: FbFormModelField;
     onEdit: (field: FbFormModelField) => void;
@@ -81,21 +39,36 @@ const Field = (props: FieldProps) => {
     }, [isRequired, field]);
 
     return (
-        <FieldContainer>
-            <Info>
-                <Typography use={"subtitle1"}>{field.label}</Typography>
-                <Typography use={"caption"}>{fieldPlugin && fieldPlugin.field.label}</Typography>
-            </Info>
-            <Actions>
-                <div className="switch-wrapper">
-                    <Typography use={"body2"}>Required</Typography>
-                    <Switch value={isRequired} onChange={toggleRequiredValidator} />
+        <div className={"wby-flex wby-justify-between wby-align-center"}>
+            <div>
+                <Heading level={6}>{field.label}</Heading>
+                <Text size={"sm"} className={"wby-text-neutral-strong"}>
+                    {fieldPlugin && fieldPlugin.field.label}
+                </Text>
+            </div>
+            <div className={"wby-flex wby-items-center wby-justify-end wby-gap-md"}>
+                <Switch
+                    label={"Required"}
+                    checked={isRequired}
+                    onChange={toggleRequiredValidator}
+                />
+                <Separator orientation={"vertical"} />
+                <div className={"wby-flex wby-items-center wby-justify-end wby-gap-sm"}>
+                    <IconButton
+                        icon={<EditIcon />}
+                        onClick={() => onEdit(field)}
+                        variant={"ghost"}
+                        size={"sm"}
+                    />
+                    <IconButton
+                        icon={<DeleteIcon />}
+                        onClick={() => onDelete(field)}
+                        variant={"ghost"}
+                        size={"sm"}
+                    />
                 </div>
-                <StyledDivider />
-                <IconButton icon={<EditIcon />} onClick={() => onEdit(field)} />
-                <IconButton icon={<DeleteIcon />} onClick={() => onDelete(field)} />
-            </Actions>
-        </FieldContainer>
+            </div>
+        </div>
     );
 };
 
diff --git a/packages/app-form-builder/src/admin/components/FormEditor/Tabs/EditTab/FieldErrors.tsx b/packages/app-form-builder/src/admin/components/FormEditor/Tabs/EditTab/FieldErrors.tsx
index e738686a436..cc466f34b97 100644
--- a/packages/app-form-builder/src/admin/components/FormEditor/Tabs/EditTab/FieldErrors.tsx
+++ b/packages/app-form-builder/src/admin/components/FormEditor/Tabs/EditTab/FieldErrors.tsx
@@ -1,11 +1,6 @@
 import React from "react";
-import styled from "@emotion/styled";
-import { Alert } from "@webiny/ui/Alert";
 import { FormEditorFieldError } from "~/admin/components/FormEditor/Context";
-
-const Block = styled("span")`
-    display: block;
-`;
+import { Alert, Text } from "@webiny/admin-ui";
 
 const keyNames: Record<string, string> = {
     label: "Label",
@@ -25,14 +20,14 @@ interface FieldErrorProps {
 export const FieldError = ({ error }: FieldErrorProps) => {
     return (
         <>
-            <Block>
-                <strong>{error.label}</strong>
-            </Block>
+            <div>
+                <Text className={"wby-font-semibold"}>{error.label}</Text>
+            </div>
             {Object.keys(error.errors).map(key => {
                 return (
-                    <Block key={key}>
+                    <div key={key}>
                         {keyNames[key] || "unknown"}: {error.errors[key]}
-                    </Block>
+                    </div>
                 );
             })}
         </>
diff --git a/packages/app-form-builder/src/admin/components/FormEditor/Tabs/EditTab/FormStep/EditFormStepDialog.tsx b/packages/app-form-builder/src/admin/components/FormEditor/Tabs/EditTab/FormStep/EditFormStepDialog.tsx
index 37cae6547f6..b6f8e3688c6 100644
--- a/packages/app-form-builder/src/admin/components/FormEditor/Tabs/EditTab/FormStep/EditFormStepDialog.tsx
+++ b/packages/app-form-builder/src/admin/components/FormEditor/Tabs/EditTab/FormStep/EditFormStepDialog.tsx
@@ -1,49 +1,8 @@
 import React from "react";
-import styled from "@emotion/styled";
-
-import { Dialog as BaseDialog } from "@webiny/ui/Dialog";
+import { Dialog, Input } from "@webiny/admin-ui";
 import { Form, FormOnSubmit } from "@webiny/form";
-import { Input } from "@webiny/ui/Input";
-import { ButtonPrimary, ButtonSecondary } from "@webiny/ui/Button";
 import { validation } from "@webiny/validation";
 
-const EditStepDialog = styled(BaseDialog)`
-    font-size: 1.4rem;
-    color: #fff;
-    font-weight: 600;
-
-    & .mdc-dialog__surface {
-        width: 575px;
-    }
-`;
-
-const DialogHeader = styled.div`
-    height: 30px;
-    background-color: var(--mdc-theme-secondary);
-    padding: 20px 20px;
-
-    & span {
-        vertical-align: middle;
-    }
-`;
-
-const DialogBody = styled.div`
-    padding: 20px 20px;
-    min-height: 75px;
-`;
-
-const DialogActions = styled.div`
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    padding: 20px 20px;
-    border-top: 1px solid rgba(212, 212, 212, 0.5);
-
-    & .webiny-ui-button--primary {
-        margin-left: 20px;
-    }
-`;
-
 export interface DialogProps {
     isEditStep: {
         isOpened: boolean;
@@ -68,38 +27,34 @@ export const EditFormStepDialog = ({
     };
     return (
         <>
-            <EditStepDialog
-                open={isEditStep.isOpened}
-                onClose={() =>
-                    setIsEditStep({
-                        isOpened: false,
-                        id: null
-                    })
-                }
-            >
-                <Form onSubmit={onSubmit} data={{ title: stepTitle }}>
-                    {({ Bind, submit }) => (
-                        <>
-                            <DialogHeader>
-                                <span>Change Step Title</span>
-                            </DialogHeader>
-                            <DialogBody>
-                                <Bind name={"title"} validators={[validation.create("required")]}>
-                                    <Input label={"Change Step Title"} />
-                                </Bind>
-                            </DialogBody>
-                            <DialogActions>
-                                <ButtonSecondary
+            <Form onSubmit={onSubmit} data={{ title: stepTitle }}>
+                {({ Bind, submit }) => (
+                    <Dialog
+                        open={isEditStep.isOpened}
+                        onClose={() => {
+                            setIsEditStep({
+                                isOpened: false,
+                                id: null
+                            });
+                        }}
+                        title={"Change step title"}
+                        actions={
+                            <>
+                                <Dialog.CancelButton
                                     onClick={() => setIsEditStep({ isOpened: false, id: null })}
-                                >
-                                    Cancel
-                                </ButtonSecondary>
-                                <ButtonPrimary onClick={submit}>Save</ButtonPrimary>
-                            </DialogActions>
+                                />
+                                <Dialog.ConfirmButton onClick={submit} />
+                            </>
+                        }
+                    >
+                        <>
+                            <Bind name={"title"} validators={[validation.create("required")]}>
+                                <Input size={"lg"} label={"Step title"} />
+                            </Bind>
                         </>
-                    )}
-                </Form>
-            </EditStepDialog>
+                    </Dialog>
+                )}
+            </Form>
         </>
     );
 };
diff --git a/packages/app-form-builder/src/admin/components/FormEditor/Tabs/EditTab/FormStep/FormStep.tsx b/packages/app-form-builder/src/admin/components/FormEditor/Tabs/EditTab/FormStep/FormStep.tsx
index db73c0fed22..691c129085c 100644
--- a/packages/app-form-builder/src/admin/components/FormEditor/Tabs/EditTab/FormStep/FormStep.tsx
+++ b/packages/app-form-builder/src/admin/components/FormEditor/Tabs/EditTab/FormStep/FormStep.tsx
@@ -1,13 +1,9 @@
 import React from "react";
 
 import { FbFormModelField, FbFormStep } from "~/types";
-import { RowHandle, StyledAccordion, StyledAccordionItem, Wrapper } from "../Styled";
-
-import { Icon } from "@webiny/ui/Icon";
-import { AccordionItem } from "@webiny/ui/Accordion";
-import { ReactComponent as DeleteIcon } from "@material-design-icons/svg/outlined/delete_outline.svg";
-import { ReactComponent as EditIcon } from "@material-design-icons/svg/outlined/edit.svg";
-import { ReactComponent as HandleIcon } from "~/admin/components/FormEditor/icons/round-drag_indicator-24px.svg";
+import { Accordion } from "@webiny/admin-ui";
+import { ReactComponent as DeleteIcon } from "@webiny/icons/delete.svg";
+import { ReactComponent as EditIcon } from "@webiny/icons/edit.svg";
 import { EmptyFormStep } from "./EmptyFormStep";
 import { FormStepWithFields } from "./FormStepWithFields";
 
@@ -34,52 +30,48 @@ export const FormStep = (props: FormStepProps) => {
     const fields = getStepFields(formStep.id);
 
     return (
-        <Wrapper data-testid="form-step-element">
-            <StyledAccordion>
-                <RowHandle>
-                    <Icon icon={<HandleIcon />} />
-                </RowHandle>
-                <StyledAccordionItem
-                    title={title}
-                    open={true}
-                    actions={
-                        <AccordionItem.Actions>
-                            <AccordionItem.Action icon={<EditIcon />} onClick={onEdit} />
-                            <AccordionItem.Action
-                                icon={<DeleteIcon />}
-                                onClick={onDelete}
-                                disabled={deleteStepDisabled}
-                            />
-                        </AccordionItem.Actions>
-                    }
-                >
-                    {fields.length === 0 ? (
-                        <EmptyFormStep formStep={formStep} />
-                    ) : (
-                        <FormStepWithFields formStep={formStep} fields={fields} />
-                    )}
-                    <EditFieldDialog
-                        field={editingField}
-                        onClose={() => {
-                            editField(null);
-                        }}
-                        onSubmit={initialData => {
-                            const data = initialData as FbFormModelField;
+        <Accordion data-testid="form-step-element" background={"light"} variant={"container"}>
+            <Accordion.Item
+                title={title}
+                defaultOpen={true}
+                handle={<Accordion.Item.Handle />}
+                actions={
+                    <>
+                        <Accordion.Item.Action icon={<EditIcon />} onClick={onEdit} />
+                        <Accordion.Item.Action
+                            icon={<DeleteIcon />}
+                            onClick={onDelete}
+                            disabled={deleteStepDisabled}
+                        />
+                    </>
+                }
+            >
+                {fields.length === 0 ? (
+                    <EmptyFormStep formStep={formStep} />
+                ) : (
+                    <FormStepWithFields formStep={formStep} fields={fields} />
+                )}
+                <EditFieldDialog
+                    field={editingField}
+                    onClose={() => {
+                        editField(null);
+                    }}
+                    onSubmit={initialData => {
+                        const data = initialData as FbFormModelField;
 
-                            if (data._id) {
-                                updateField(data);
-                            } else if (dropDestination) {
-                                createCustomField({
-                                    data,
-                                    dropDestination
-                                });
-                            }
+                        if (data._id) {
+                            updateField(data);
+                        } else if (dropDestination) {
+                            createCustomField({
+                                data,
+                                dropDestination
+                            });
+                        }
 
-                            editField(null);
-                        }}
-                    />
-                </StyledAccordionItem>
-            </StyledAccordion>
-        </Wrapper>
+                        editField(null);
+                    }}
+                />
+            </Accordion.Item>
+        </Accordion>
     );
 };
diff --git a/packages/app-form-builder/src/admin/components/FormEditor/Tabs/EditTab/FormStep/FormStepWithFields/FormStepRow.tsx b/packages/app-form-builder/src/admin/components/FormEditor/Tabs/EditTab/FormStep/FormStepWithFields/FormStepRow.tsx
index 9971ea11ce2..7201070cadd 100644
--- a/packages/app-form-builder/src/admin/components/FormEditor/Tabs/EditTab/FormStep/FormStepWithFields/FormStepRow.tsx
+++ b/packages/app-form-builder/src/admin/components/FormEditor/Tabs/EditTab/FormStep/FormStepWithFields/FormStepRow.tsx
@@ -1,14 +1,12 @@
 import React, { useCallback, useMemo } from "react";
 import { FbFormModelField, FbFormStep } from "~/types";
 import Draggable, { BeginDragProps } from "~/admin/components/FormEditor/Draggable";
-import { RowHandle, Row, RowContainer } from "~/admin/components/FormEditor/Tabs/EditTab/Styled";
-
-import { Icon } from "@webiny/ui/Icon";
-import { ReactComponent as HandleIcon } from "~/admin/components/FormEditor/icons/round-drag_indicator-24px.svg";
+import { ReactComponent as DragIcon } from "@webiny/icons/drag_indicator.svg";
 import { Horizontal } from "~/admin/components/FormEditor/DropZone";
 import { useFormStep } from "~/admin/components/FormEditor/Tabs/EditTab/FormStep/useFormStep";
 import { DragObjectWithFieldInfo } from "~/admin/components/FormEditor/Droppable";
 import { FormStepRowField } from "./FormStepRowField";
+import { cn, Icon } from "@webiny/admin-ui";
 
 export interface FormStepRowProps {
     formStep: FbFormStep;
@@ -69,17 +67,42 @@ export const FormStepRow = (props: FormStepRowProps) => {
         <Draggable beginDrag={rowBeginDragParams} key={`step-row-${rowIndex}`}>
             {({ drag, isDragging }) => (
                 /* RowContainer start - includes drag handle, drop zones and the Row itself. */
-                <RowContainer isDragging={isDragging}>
-                    <RowHandle ref={drag}>
-                        <Icon icon={<HandleIcon />} />
-                    </RowHandle>
+                <div
+                    className={cn([
+                        "wby-flex wby-flex-column",
+                        "wby-relative",
+                        "wby-mt-md",
+                        "wby-border-sm wby-border-neutral-dimmed-darker wby-rounded-sm",
+                        isDragging ? "wby-opacity-30" : "wby-opacity-100"
+                    ])}
+                >
+                    <div
+                        className={cn([
+                            "wby-cursor-grab",
+                            "wby-absolute wby-left-sm-plus wby-top-sm-plus wby-z-10"
+                        ])}
+                        ref={drag}
+                    >
+                        <Icon
+                            icon={<DragIcon />}
+                            label={"Drag to move this row"}
+                            color={"neutral-light"}
+                            size={"sm"}
+                        />
+                    </div>
                     <Horizontal
                         onDrop={onRowHorizontalZoneDrop}
                         isVisible={item => item.ui !== "step"}
                     />
 
                     {/* Row start - includes field drop zones and fields */}
-                    <Row>
+                    <div
+                        className={cn([
+                            "wby-w-full wby-flex wby-justify-between",
+                            "wby-pl-xl wby-pr-sm wby-py-sm"
+                        ])}
+                        data-testid={"cms.editor.field-row"}
+                    >
                         {row.map((field, fieldIndex) => (
                             <FormStepRowField
                                 key={`field-${field._id}`}
@@ -90,7 +113,7 @@ export const FormStepRow = (props: FormStepRowProps) => {
                                 fieldIndex={fieldIndex}
                             />
                         ))}
-                    </Row>
+                    </div>
 
                     {/* Row end */}
                     {isLastRow && (
@@ -100,7 +123,7 @@ export const FormStepRow = (props: FormStepRowProps) => {
                             isVisible={item => item.ui !== "step"}
                         />
                     )}
-                </RowContainer>
+                </div>
             )}
         </Draggable>
     );
diff --git a/packages/app-form-builder/src/admin/components/FormEditor/Tabs/EditTab/FormStep/FormStepWithFields/FormStepRowField.tsx b/packages/app-form-builder/src/admin/components/FormEditor/Tabs/EditTab/FormStep/FormStepWithFields/FormStepRowField.tsx
index bddd4787542..586196373fa 100644
--- a/packages/app-form-builder/src/admin/components/FormEditor/Tabs/EditTab/FormStep/FormStepWithFields/FormStepRowField.tsx
+++ b/packages/app-form-builder/src/admin/components/FormEditor/Tabs/EditTab/FormStep/FormStepWithFields/FormStepRowField.tsx
@@ -2,12 +2,11 @@ import React, { useCallback, useMemo } from "react";
 import { FbFormModelField, FbFormStep } from "~/types";
 import Draggable, { BeginDragProps } from "~/admin/components/FormEditor/Draggable";
 import Field from "~/admin/components/FormEditor/Tabs/EditTab/Field";
-import { FieldHandle, FieldContainer } from "~/admin/components/FormEditor/Tabs/EditTab/Styled";
-
 import { Vertical } from "~/admin/components/FormEditor/DropZone";
 import { useFormStep } from "~/admin/components/FormEditor/Tabs/EditTab/FormStep/useFormStep";
 import { DragObjectWithFieldInfo } from "~/admin/components/FormEditor/Droppable";
 import { useFormEditor } from "~/admin/components/FormEditor";
+import { cn } from "@webiny/admin-ui";
 
 export interface FormStepFieldRowFieldProps {
     formStep: FbFormStep;
@@ -75,7 +74,10 @@ export const FormStepRowField = (props: FormStepFieldRowFieldProps) => {
     return (
         <Draggable key={`step-field-${fieldIndex}`} beginDrag={fieldBeginDragParams}>
             {({ drag }) => (
-                <FieldContainer ref={drag}>
+                <div
+                    className={cn(["wby-relative", "wby-flex-1 wby-basis-full", "wby-mx-sm"])}
+                    ref={drag}
+                >
                     <Vertical
                         onDrop={onFieldVerticalZoneDrop}
                         isVisible={item =>
@@ -83,13 +85,17 @@ export const FormStepRowField = (props: FormStepFieldRowFieldProps) => {
                         }
                     />
 
-                    <FieldHandle>
+                    <div
+                        className={
+                            "wby-cursor-grab wby-bg-neutral-base wby-p-md wby-shadow-sm wby-rounded-xs"
+                        }
+                    >
                         <Field
                             field={field}
                             onEdit={editField}
                             onDelete={() => deleteField(field, formStep.id)}
                         />
-                    </FieldHandle>
+                    </div>
 
                     {isLastField && (
                         <Vertical
@@ -101,7 +107,7 @@ export const FormStepRowField = (props: FormStepFieldRowFieldProps) => {
                             onDrop={onLastFieldVerticalZoneDrop}
                         />
                     )}
-                </FieldContainer>
+                </div>
             )}
         </Draggable>
     );
diff --git a/packages/app-form-builder/src/admin/components/FormEditor/Tabs/EditTab/Styled.ts b/packages/app-form-builder/src/admin/components/FormEditor/Tabs/EditTab/Styled.ts
deleted file mode 100644
index 04c5dfc0b37..00000000000
--- a/packages/app-form-builder/src/admin/components/FormEditor/Tabs/EditTab/Styled.ts
+++ /dev/null
@@ -1,87 +0,0 @@
-import styled from "@emotion/styled";
-import { Accordion, AccordionItem } from "@webiny/ui/Accordion";
-
-export const StyledAccordion = styled(Accordion)`
-    background: var(--mdc-theme-background);
-    box-shadow: none;
-`;
-
-export const StyledAccordionItem = styled(AccordionItem)`
-    & .webiny-ui-accordion-item__content {
-        background: white;
-    }
-`;
-
-export const EditContainer = styled.div({
-    padding: 40,
-    position: "relative"
-});
-
-export const RowContainer = styled.div<{ isDragging?: boolean }>`
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    margin-bottom: 25px;
-
-    &:last-child {
-        margin-bottom: 0px;
-    }
-
-    border-radius: 2px;
-    background-color: var(--mdc-theme-surface);
-    box-shadow: var(--mdc-theme-on-background) 1px 1px 1px,
-        var(--mdc-theme-on-background) 1px 1px 2px;
-
-    border: 1px solid var(--mdc-theme-background);
-    box-shadow: none;
-
-    opacity: ${props => (props.isDragging ? 0.3 : 1)};
-`;
-
-export const Wrapper = styled.div`
-    margin-left: 40px;
-`;
-
-export const Row = styled.div({
-    display: "flex",
-    flexDirection: "row",
-    backgroundColor: "var(--mdc-theme-surface)",
-    paddingLeft: 40,
-    paddingRight: 10,
-    position: "relative",
-    // We need this because on the smaller screens fourth field in the row shifts out of the row container,
-    // so it breaks the layout.
-    overflowX: "auto"
-});
-
-export const FieldContainer = styled.div({
-    position: "relative",
-    flex: "1 100%",
-    backgroundColor: "var(--mdc-theme-background)",
-    padding: "0 15px",
-    margin: 10,
-    borderRadius: 2,
-    border: "1px solid var(--mdc-theme-on-background)",
-    transition: "box-shadow 225ms",
-    color: "var(--mdc-theme-on-surface)",
-    cursor: "grab",
-    "&:hover": {
-        boxShadow:
-            "var(--mdc-theme-on-background) 1px 1px 1px, var(--mdc-theme-on-background) 1px 1px 2px"
-    }
-});
-
-export const RowHandle = styled.div({
-    width: 30,
-    cursor: "grab",
-    position: "absolute",
-    left: 10,
-    top: "50%",
-    transform: "translateY(-50%)",
-    zIndex: 1,
-    color: "var(--mdc-theme-on-surface)"
-});
-
-export const FieldHandle = styled.div({
-    cursor: "grab"
-});
diff --git a/packages/app-form-builder/src/admin/components/FormEditor/Tabs/PreviewTab/PreviewTab.tsx b/packages/app-form-builder/src/admin/components/FormEditor/Tabs/PreviewTab/PreviewTab.tsx
index dc4fd625360..66d056cac29 100644
--- a/packages/app-form-builder/src/admin/components/FormEditor/Tabs/PreviewTab/PreviewTab.tsx
+++ b/packages/app-form-builder/src/admin/components/FormEditor/Tabs/PreviewTab/PreviewTab.tsx
@@ -1,22 +1,9 @@
 import React from "react";
-import { css } from "emotion";
 import { useFormEditor } from "../../Context";
-import { Elevation } from "@webiny/ui/Elevation";
 import { Form } from "../../../../../components/Form";
 
-const formPreviewWrapper = css({
-    padding: 40,
-    backgroundColor: "var(--webiny-theme-color-surface, #fff) !important",
-    margin: 40,
-    boxSizing: "border-box"
-});
-
 export const PreviewTab = () => {
     const { data } = useFormEditor();
 
-    return (
-        <Elevation z={1} className={formPreviewWrapper}>
-            <Form preview data={data} />
-        </Elevation>
-    );
+    return <Form preview data={data} />;
 };
diff --git a/packages/app-form-builder/src/admin/components/FormEditor/Tabs/TriggersTab/TriggersTab.tsx b/packages/app-form-builder/src/admin/components/FormEditor/Tabs/TriggersTab/TriggersTab.tsx
index 32a2c027daf..ed225eec501 100644
--- a/packages/app-form-builder/src/admin/components/FormEditor/Tabs/TriggersTab/TriggersTab.tsx
+++ b/packages/app-form-builder/src/admin/components/FormEditor/Tabs/TriggersTab/TriggersTab.tsx
@@ -1,7 +1,4 @@
 import React from "react";
-import styled from "@emotion/styled";
-import { Accordion, AccordionItem } from "@webiny/ui/Accordion";
-import { Typography } from "@webiny/ui/Typography";
 import { Form } from "@webiny/form";
 import { useFormEditor } from "../../Context";
 import { plugins } from "@webiny/plugins";
@@ -9,29 +6,27 @@ import set from "lodash/set";
 import { useSnackbar } from "@webiny/app-admin/hooks/useSnackbar";
 import { i18n } from "@webiny/app/i18n";
 import { FbEditorTrigger } from "~/types";
+import { Accordion, Icon, Text } from "@webiny/admin-ui";
 const t = i18n.namespace("FormsApp.Editor.TriggersTab");
 
-const Container = styled("div")({
-    padding: "40px 60px",
-    color: "var(--mdc-theme-on-surface)"
-});
-
 export const TriggersTab = () => {
     const { setData, data: formData } = useFormEditor();
     const formEditorTriggerPlugins = plugins.byType<FbEditorTrigger>("form-editor-trigger");
     const { showSnackbar } = useSnackbar();
 
     return (
-        <Container>
-            <Typography
-                use={"overline"}
-            >{t`Which actions should be taken after submission`}</Typography>
+        <>
+            <Text
+                size={"md"}
+                as={"div"}
+                className={"wby-mb-lg"}
+            >{t`Which actions should be taken after submission`}</Text>
 
             <Accordion>
                 {formEditorTriggerPlugins.map(({ trigger }) => (
-                    <AccordionItem
+                    <Accordion.Item
                         key={trigger.id}
-                        icon={trigger.icon}
+                        icon={<Icon icon={trigger.icon} label={trigger.title} />}
                         title={trigger.title}
                         description={trigger.description}
                     >
@@ -53,9 +48,9 @@ export const TriggersTab = () => {
                                 })
                             }
                         </Form>
-                    </AccordionItem>
+                    </Accordion.Item>
                 ))}
             </Accordion>
-        </Container>
+        </>
     );
 };
diff --git a/packages/app-form-builder/src/admin/components/OptionsMenu.tsx b/packages/app-form-builder/src/admin/components/OptionsMenu.tsx
index 6ddc539d3d9..d6b52ae3f2e 100644
--- a/packages/app-form-builder/src/admin/components/OptionsMenu.tsx
+++ b/packages/app-form-builder/src/admin/components/OptionsMenu.tsx
@@ -1,18 +1,7 @@
 import React from "react";
-import { css } from "emotion";
 import { makeDecoratable } from "@webiny/app-admin";
-import { Menu, MenuItem } from "@webiny/ui/Menu";
-import { IconButton } from "@webiny/ui/Button";
-import { ReactComponent as MoreVerticalIcon } from "@material-design-icons/svg/filled/more_vert.svg";
-import { ListItemGraphic } from "@webiny/ui/List";
-import { Icon } from "@webiny/ui/Icon";
-
-const menuStyles = css({
-    ".disabled": {
-        opacity: 0.5,
-        pointerEvents: "none"
-    }
-});
+import { ReactComponent as MoreVerticalIcon } from "@webiny/icons/more_vert.svg";
+import { DropdownMenu, IconButton } from "@webiny/admin-ui";
 
 export interface OptionsMenuItem {
     label: string;
@@ -35,26 +24,27 @@ export const OptionsMenu = makeDecoratable(
         }
 
         return (
-            <Menu
-                className={menuStyles}
-                handle={<IconButton icon={<MoreVerticalIcon />} />}
-                anchor={"topLeft"}
-                {...props}
+            <DropdownMenu
+                trigger={
+                    <IconButton
+                        size={"sm"}
+                        variant={"ghost"}
+                        icon={<MoreVerticalIcon />}
+                        data-testid={props["data-testid"]}
+                    />
+                }
             >
                 {items.map(item => (
-                    <MenuItem
+                    <DropdownMenu.Item
                         key={item.label}
                         disabled={item.disabled ?? false}
                         onClick={item.onClick}
                         data-testid={item["data-testid"]}
-                    >
-                        <ListItemGraphic>
-                            <Icon icon={item.icon} />
-                        </ListItemGraphic>
-                        {item.label}
-                    </MenuItem>
+                        text={item.label}
+                        icon={<DropdownMenu.Item.Icon element={item.icon} label={item.label} />}
+                    />
                 ))}
-            </Menu>
+            </DropdownMenu>
         );
     }
 );
diff --git a/packages/app-form-builder/src/admin/icons/add.svg b/packages/app-form-builder/src/admin/icons/add.svg
deleted file mode 100644
index 3d4615c7e33..00000000000
--- a/packages/app-form-builder/src/admin/icons/add.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-    <path fill="none" d="M0 0h24v24H0V0z"/>
-    <path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm4 11h-3v3c0 .55-.45 1-1 1s-1-.45-1-1v-3H8c-.55 0-1-.45-1-1s.45-1 1-1h3V8c0-.55.45-1 1-1s1 .45 1 1v3h3c.55 0 1 .45 1 1s-.45 1-1 1z"/>
-</svg>
\ No newline at end of file
diff --git a/packages/app-form-builder/src/admin/icons/beenhere.svg b/packages/app-form-builder/src/admin/icons/beenhere.svg
deleted file mode 100644
index fe2ac17ec64..00000000000
--- a/packages/app-form-builder/src/admin/icons/beenhere.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M19 1H5c-1.1 0-1.99.9-1.99 2L3 15.93c0 .69.35 1.3.88 1.66l7.57 5.04c.34.22.77.22 1.11 0l7.56-5.04c.53-.36.88-.97.88-1.66V3c0-1.1-.9-2-2-2zm-.7 6.7l-7.59 7.59c-.39.39-1.02.39-1.41 0L5.71 11.7c-.39-.39-.39-1.02 0-1.41s1.02-.39 1.41 0L10 13.17l6.88-6.88c.39-.39 1.02-.39 1.41 0s.4 1.02.01 1.41z"/></svg>
\ No newline at end of file
diff --git a/packages/app-form-builder/src/admin/icons/delete.svg b/packages/app-form-builder/src/admin/icons/delete.svg
deleted file mode 100644
index d5ec271650b..00000000000
--- a/packages/app-form-builder/src/admin/icons/delete.svg
+++ /dev/null
@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px"
-	 height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
-<g id="Rounded">
-	<g id="ui_x5F_spec_x5F_header_copy_5">
-	</g>
-	<path fill="currentColor" d="M6,19c0,1.1,0.9,2,2,2h8c1.1,0,2-0.9,2-2V9c0-1.1-0.9-2-2-2H8C6.9,7,6,7.9,6,9V19z M18,4h-2.5l-0.71-0.71
-		C14.61,3.11,14.35,3,14.09,3H9.91C9.65,3,9.39,3.11,9.21,3.29L8.5,4H6C5.45,4,5,4.45,5,5v0c0,0.55,0.45,1,1,1h12c0.55,0,1-0.45,1-1
-		v0C19,4.45,18.55,4,18,4z"/>
-</g>
-</svg>
diff --git a/packages/app-form-builder/src/admin/icons/edit.svg b/packages/app-form-builder/src/admin/icons/edit.svg
deleted file mode 100644
index c2d5cd5edf5..00000000000
--- a/packages/app-form-builder/src/admin/icons/edit.svg
+++ /dev/null
@@ -1,17 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px"
-	 height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
-<g id="Bounding_Boxes">
-	<g id="ui_x5F_spec_x5F_header_copy_3">
-	</g>
-	<path fill="none" d="M0,0h24v24H0V0z"/>
-</g>
-<g id="Rounded">
-	<g id="ui_x5F_spec_x5F_header_copy_7">
-	</g>
-	<path d="M3,17.46v3.04C3,20.78,3.22,21,3.5,21h3.04c0.13,0,0.26-0.05,0.35-0.15L17.81,9.94l-3.75-3.75L3.15,17.1
-		C3.05,17.2,3,17.32,3,17.46z M20.71,7.04c0.39-0.39,0.39-1.02,0-1.41l-2.34-2.34c-0.39-0.39-1.02-0.39-1.41,0l-1.83,1.83l3.75,3.75
-		L20.71,7.04z"/>
-</g>
-</svg>
diff --git a/packages/app-form-builder/src/admin/icons/gesture.svg b/packages/app-form-builder/src/admin/icons/gesture.svg
deleted file mode 100644
index d4b9a44ab88..00000000000
--- a/packages/app-form-builder/src/admin/icons/gesture.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M3.72 6.04c.47.46 1.21.48 1.71.06.37-.32.69-.51.87-.43.5.2 0 1.03-.3 1.52-.25.42-2.86 3.89-2.86 6.31 0 1.28.48 2.34 1.34 2.98.75.56 1.74.73 2.64.46 1.07-.31 1.95-1.4 3.06-2.77 1.21-1.49 2.83-3.44 4.08-3.44 1.63 0 1.65 1.01 1.76 1.79-3.78.64-5.38 3.67-5.38 5.37 0 1.7 1.44 3.09 3.21 3.09 1.63 0 4.29-1.33 4.69-6.1h1.21c.69 0 1.25-.56 1.25-1.25s-.56-1.25-1.25-1.25h-1.22c-.15-1.65-1.09-4.2-4.03-4.2-2.25 0-4.18 1.91-4.94 2.84-.58.73-2.06 2.48-2.29 2.72-.25.3-.68.84-1.11.84-.45 0-.72-.83-.36-1.92.35-1.09 1.4-2.86 1.85-3.52.78-1.14 1.3-1.92 1.3-3.28C8.95 3.69 7.31 3 6.44 3c-1.09 0-2.04.63-2.7 1.22-.53.48-.53 1.32-.02 1.82zm10.16 12.51c-.31 0-.74-.26-.74-.72 0-.6.73-2.2 2.87-2.76-.3 2.69-1.43 3.48-2.13 3.48z"/></svg>
\ No newline at end of file
diff --git a/packages/app-form-builder/src/admin/icons/lock.svg b/packages/app-form-builder/src/admin/icons/lock.svg
deleted file mode 100644
index 98639dbf20d..00000000000
--- a/packages/app-form-builder/src/admin/icons/lock.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="none"><path d="M0 0h24v24H0V0z"/><path opacity=".87" d="M0 0h24v24H0V0z"/></g><path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zM9 8V6c0-1.66 1.34-3 3-3s3 1.34 3 3v2H9z"/></svg>
\ No newline at end of file
diff --git a/packages/app-form-builder/src/admin/icons/more_vert.svg b/packages/app-form-builder/src/admin/icons/more_vert.svg
deleted file mode 100644
index b92cdd99458..00000000000
--- a/packages/app-form-builder/src/admin/icons/more_vert.svg
+++ /dev/null
@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px"
-	 height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
-<g id="Bounding_Boxes">
-	<path fill="none" d="M0,0h24v24H0V0z"/>
-</g>
-<g id="Rounded">
-	<path d="M12,8c1.1,0,2-0.9,2-2s-0.9-2-2-2s-2,0.9-2,2S10.9,8,12,8z M12,10c-1.1,0-2,0.9-2,2s0.9,2,2,2s2-0.9,2-2S13.1,10,12,10z
-		 M12,16c-1.1,0-2,0.9-2,2s0.9,2,2,2s2-0.9,2-2S13.1,16,12,16z"/>
-</g>
-</svg>
diff --git a/packages/app-form-builder/src/admin/icons/publish.svg b/packages/app-form-builder/src/admin/icons/publish.svg
deleted file mode 100644
index 616ae542e3a..00000000000
--- a/packages/app-form-builder/src/admin/icons/publish.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M5 5c0 .55.45 1 1 1h12c.55 0 1-.45 1-1s-.45-1-1-1H6c-.55 0-1 .45-1 1zm2.41 9H9v5c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-5h1.59c.89 0 1.34-1.08.71-1.71L12.71 7.7c-.39-.39-1.02-.39-1.41 0l-4.59 4.59c-.63.63-.19 1.71.7 1.71z"/></svg>
\ No newline at end of file
diff --git a/packages/app-form-builder/src/admin/icons/round-arrow_drop_down-24px.svg b/packages/app-form-builder/src/admin/icons/round-arrow_drop_down-24px.svg
deleted file mode 100644
index 91e1d184224..00000000000
--- a/packages/app-form-builder/src/admin/icons/round-arrow_drop_down-24px.svg
+++ /dev/null
@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
-<g id="Bounding_Boxes">
-	<path fill="none" d="M0,0h24v24H0V0z"/>
-</g>
-	<g id="Rounded">
-	<path fill="currentColor" d="M8.71,11.71l2.59,2.59c0.39,0.39,1.02,0.39,1.41,0l2.59-2.59c0.63-0.63,0.18-1.71-0.71-1.71H9.41
-		C8.52,10,8.08,11.08,8.71,11.71z"/>
-</g>
-</svg>
diff --git a/packages/app-form-builder/src/admin/icons/round-ballot-24px.svg b/packages/app-form-builder/src/admin/icons/round-ballot-24px.svg
deleted file mode 100644
index 4a56c9a8a47..00000000000
--- a/packages/app-form-builder/src/admin/icons/round-ballot-24px.svg
+++ /dev/null
@@ -1,19 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px"
-	 height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
-<g id="Bounding_Boxes">
-	<g id="ui_x5F_spec_x5F_header_copy_3" display="none">
-	</g>
-	<path fill="none" d="M0,0h24v24H0V0z"/>
-</g>
-<g id="Rounded_1_">
-	<g id="ui_x5F_spec_x5F_header_copy_6" display="none">
-	</g>
-	<path d="M14,9.5h3c0.55,0,1-0.45,1-1v0c0-0.55-0.45-1-1-1h-3c-0.55,0-1,0.45-1,1v0C13,9.05,13.45,9.5,14,9.5z M14,16.5h3
-		c0.55,0,1-0.45,1-1v0c0-0.55-0.45-1-1-1h-3c-0.55,0-1,0.45-1,1v0C13,16.05,13.45,16.5,14,16.5z M19,21H5c-1.1,0-2-0.9-2-2V5
-		c0-1.1,0.9-2,2-2h14c1.1,0,2,0.9,2,2v14C21,20.1,20.1,21,19,21z M7,11h3c0.55,0,1-0.45,1-1V7c0-0.55-0.45-1-1-1H7
-		C6.45,6,6,6.45,6,7v3C6,10.55,6.45,11,7,11z M7,7h3v3H7V7z M7,18h3c0.55,0,1-0.45,1-1v-3c0-0.55-0.45-1-1-1H7c-0.55,0-1,0.45-1,1v3
-		C6,17.55,6.45,18,7,18z M7,14h3v3H7V14z"/>
-</g>
-</svg>
diff --git a/packages/app-form-builder/src/admin/icons/round-drag_indicator-24px.svg b/packages/app-form-builder/src/admin/icons/round-drag_indicator-24px.svg
deleted file mode 100644
index 25a1f28aa86..00000000000
--- a/packages/app-form-builder/src/admin/icons/round-drag_indicator-24px.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" viewBox="0 0 24 24">
-    <path fill="none" d="M0 0h24v24H0V0z"/>
-    <path fill="currentColor" d="M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/>
-</svg>
\ No newline at end of file
diff --git a/packages/app-form-builder/src/admin/icons/round-translate-24px.svg b/packages/app-form-builder/src/admin/icons/round-translate-24px.svg
deleted file mode 100644
index a9fe23f7fa7..00000000000
--- a/packages/app-form-builder/src/admin/icons/round-translate-24px.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" viewBox="0 0 24 24">
-    <path fill="none" d="M0 0h24v24H0V0z"/>
-    <path fill="currentColor" d="M12.65 15.67c.14-.36.05-.77-.23-1.05l-2.09-2.06.03-.03c1.74-1.94 2.98-4.17 3.71-6.53h1.94c.54 0 .99-.45.99-.99v-.02c0-.54-.45-.99-.99-.99H10V3c0-.55-.45-1-1-1s-1 .45-1 1v1H1.99c-.54 0-.99.45-.99.99 0 .55.45.99.99.99h10.18C11.5 7.92 10.44 9.75 9 11.35c-.81-.89-1.49-1.86-2.06-2.88-.16-.29-.45-.47-.78-.47-.69 0-1.13.75-.79 1.35.63 1.13 1.4 2.21 2.3 3.21L3.3 16.87c-.4.39-.4 1.03 0 1.42.39.39 1.02.39 1.42 0L9 14l2.02 2.02c.51.51 1.38.32 1.63-.35zM17.5 10c-.6 0-1.14.37-1.35.94l-3.67 9.8c-.24.61.22 1.26.87 1.26.39 0 .74-.24.88-.61l.89-2.39h4.75l.9 2.39c.14.36.49.61.88.61.65 0 1.11-.65.88-1.26l-3.67-9.8c-.22-.57-.76-.94-1.36-.94zm-1.62 7l1.62-4.33L19.12 17h-3.24z"/>
-</svg>
\ No newline at end of file
diff --git a/packages/app-form-builder/src/admin/icons/unpublish.svg b/packages/app-form-builder/src/admin/icons/unpublish.svg
deleted file mode 100644
index 9c6537a88ef..00000000000
--- a/packages/app-form-builder/src/admin/icons/unpublish.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" viewBox="0 0 24 24">
-    <path fill="none" d="M0 0h24v24H0V0z"/>
-    <path fill="currentColor" d="M14 12c0-1.1-.9-2-2-2s-2 .9-2 2 .9 2 2 2 2-.9 2-2zm-1.74-9C7.17 2.86 3 6.95 3 12H1.21c-.45 0-.67.54-.35.85l2.79 2.79c.2.2.51.2.71 0l2.79-2.79c.31-.31.09-.85-.36-.85H5c0-3.9 3.18-7.05 7.1-7 3.72.05 6.85 3.18 6.9 6.9.05 3.91-3.1 7.1-7 7.1-1.25 0-2.42-.34-3.44-.91-.39-.22-.87-.14-1.18.18-.46.46-.37 1.25.2 1.57C8.89 20.57 10.39 21 12 21c5.05 0 9.14-4.17 9-9.26-.13-4.69-4.05-8.61-8.74-8.74z"/>
-</svg>
\ No newline at end of file
diff --git a/packages/app-form-builder/src/admin/plugins/editor/defaultBar/BackButton.tsx b/packages/app-form-builder/src/admin/plugins/editor/defaultBar/BackButton.tsx
index 7545fa7bd74..0d513e7e427 100644
--- a/packages/app-form-builder/src/admin/plugins/editor/defaultBar/BackButton.tsx
+++ b/packages/app-form-builder/src/admin/plugins/editor/defaultBar/BackButton.tsx
@@ -1,12 +1,7 @@
 import React from "react";
-import { IconButton } from "@webiny/ui/Button";
-import { ReactComponent as BackIcon } from "./icons/round-arrow_back-24px.svg";
-import styled from "@emotion/styled";
+import { ReactComponent as BackIcon } from "@webiny/icons/arrow_back.svg";
 import { useRouter } from "@webiny/react-router";
-
-const BackButtonWrapper = styled.div`
-    margin-left: -10px;
-`;
+import { IconButton } from "@webiny/admin-ui";
 
 const BackButton = React.memo(() => {
     const { params, history } = useRouter();
@@ -14,19 +9,19 @@ const BackButton = React.memo(() => {
     const id = params ? params["id"] : undefined;
 
     return (
-        <BackButtonWrapper>
-            <IconButton
-                data-testid="fb-editor-back-button"
-                onClick={() => {
-                    if (!id) {
-                        console.error("Could not determine FormID from params.");
-                        return;
-                    }
-                    history.push(`/form-builder/forms?id=${id}`);
-                }}
-                icon={<BackIcon />}
-            />
-        </BackButtonWrapper>
+        <IconButton
+            variant={"ghost"}
+            iconSize={"lg"}
+            data-testid="fb-editor-back-button"
+            onClick={() => {
+                if (!id) {
+                    console.error("Could not determine FormID from params.");
+                    return;
+                }
+                history.push(`/form-builder/forms?id=${id}`);
+            }}
+            icon={<BackIcon />}
+        />
     );
 });
 
diff --git a/packages/app-form-builder/src/admin/plugins/editor/defaultBar/Divider.tsx b/packages/app-form-builder/src/admin/plugins/editor/defaultBar/Divider.tsx
deleted file mode 100644
index ee468e39749..00000000000
--- a/packages/app-form-builder/src/admin/plugins/editor/defaultBar/Divider.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import styled from "@emotion/styled";
-
-const Divider = styled("div")({
-    width: 1,
-    margin: "0 5px",
-    height: "100%",
-    backgroundColor: "var(--mdc-theme-on-background)"
-});
-
-export default Divider;
diff --git a/packages/app-form-builder/src/admin/plugins/editor/defaultBar/FormSettings/FormSettings.tsx b/packages/app-form-builder/src/admin/plugins/editor/defaultBar/FormSettings/FormSettings.tsx
index 5feb156fec4..d4694702812 100644
--- a/packages/app-form-builder/src/admin/plugins/editor/defaultBar/FormSettings/FormSettings.tsx
+++ b/packages/app-form-builder/src/admin/plugins/editor/defaultBar/FormSettings/FormSettings.tsx
@@ -2,11 +2,7 @@ import React, { useState } from "react";
 import { plugins } from "@webiny/plugins";
 import { OverlayLayout } from "@webiny/app-admin/components/OverlayLayout";
 import { SplitView, LeftPanel, RightPanel } from "@webiny/app-admin/components/SplitView";
-import { Typography } from "@webiny/ui/Typography";
 import { Form } from "@webiny/form";
-import { Icon } from "@webiny/ui/Icon";
-import { ButtonPrimary } from "@webiny/ui/Button";
-import { List, ListItem, ListItemGraphic } from "@webiny/ui/List";
 import { useFormEditor } from "~/admin/components/FormEditor";
 import { useSnackbar } from "@webiny/app-admin/hooks/useSnackbar";
 
@@ -19,8 +15,17 @@ import {
     SimpleFormContent,
     SimpleFormHeader
 } from "@webiny/app-admin/components/SimpleForm";
-import { Title, listItem, ListItemTitle, listStyle, TitleContent } from "./FormSettingsStyled";
 import { FbEditorFormSettingsPlugin } from "~/types";
+import { Button, Heading, Icon, List } from "@webiny/admin-ui";
+
+const Title = () => {
+    return (
+        <Heading
+            level={5}
+            className={"wby-text-neutral-strong"}
+        >{t`Content model settings`}</Heading>
+    );
+};
 
 interface FormSettingsProps {
     onExited: () => void;
@@ -36,28 +41,18 @@ const FormSettings = ({ onExited }: FormSettingsProps) => {
     const [activePlugin, setActivePlugin] = useState(formEditorSettingsPlugins[0]);
 
     return (
-        <OverlayLayout
-            barMiddle={Title}
-            onExited={onExited}
-            style={{ color: "var(--mdc-theme-on-surface)" }}
-        >
+        <OverlayLayout barMiddle={<Title />} onExited={onExited}>
             <SplitView>
                 <LeftPanel span={5}>
-                    <List twoLine className={listStyle}>
+                    <List>
                         {formEditorSettingsPlugins.map(pl => (
-                            <ListItem
+                            <List.Item
                                 key={pl.name}
-                                className={listItem}
                                 onClick={() => setActivePlugin(pl)}
-                            >
-                                <ListItemGraphic>
-                                    <Icon icon={pl.icon} />
-                                </ListItemGraphic>
-                                <TitleContent>
-                                    <ListItemTitle>{pl.title}</ListItemTitle>
-                                    <Typography use={"body2"}>{pl.description}</Typography>
-                                </TitleContent>
-                            </ListItem>
+                                icon={<Icon label={pl.title} icon={pl.icon} />}
+                                title={pl.title}
+                                description={pl.description}
+                            />
                         ))}
                     </List>
                 </LeftPanel>
@@ -74,10 +69,16 @@ const FormSettings = ({ onExited }: FormSettingsProps) => {
                         }}
                     >
                         {({ Bind, submit, form, data: formData }) => (
-                            <SimpleForm>
+                            <SimpleForm size={"lg"}>
                                 <SimpleFormHeader title={activePlugin.title}>
-                                    {typeof activePlugin.renderHeaderActions === "function" &&
-                                        activePlugin.renderHeaderActions({ Bind, form, formData })}
+                                    <div className={"wby-flex wby-justify-end wby-items-center"}>
+                                        {typeof activePlugin.renderHeaderActions === "function" &&
+                                            activePlugin.renderHeaderActions({
+                                                Bind,
+                                                form,
+                                                formData
+                                            })}
+                                    </div>
                                 </SimpleFormHeader>
                                 <SimpleFormContent>
                                     {activePlugin
@@ -85,11 +86,12 @@ const FormSettings = ({ onExited }: FormSettingsProps) => {
                                         : null}
                                 </SimpleFormContent>
                                 <SimpleFormFooter>
-                                    <ButtonPrimary
+                                    <Button
+                                        text={t`Save`}
                                         onClick={ev => {
                                             submit(ev);
                                         }}
-                                    >{t`Save settings`}</ButtonPrimary>
+                                    />
                                 </SimpleFormFooter>
                             </SimpleForm>
                         )}
diff --git a/packages/app-form-builder/src/admin/plugins/editor/defaultBar/FormSettings/FormSettingsButton.tsx b/packages/app-form-builder/src/admin/plugins/editor/defaultBar/FormSettings/FormSettingsButton.tsx
index e7e187b9953..736478e69d6 100644
--- a/packages/app-form-builder/src/admin/plugins/editor/defaultBar/FormSettings/FormSettingsButton.tsx
+++ b/packages/app-form-builder/src/admin/plugins/editor/defaultBar/FormSettings/FormSettingsButton.tsx
@@ -1,9 +1,8 @@
 import React, { useState, useCallback } from "react";
-import { IconButton } from "@webiny/ui/Button";
+import { IconButton } from "@webiny/admin-ui";
+import { ReactComponent as SettingsIcon } from "@webiny/icons/settings.svg";
 import FormSettings from "./FormSettings";
 
-import { ReactComponent as SettingsIcon } from "./../icons/settings.svg";
-
 const FormSettingsButton = () => {
     const [opened, setOpened] = useState<boolean>(false);
     const open = useCallback((): void => setOpened(true), []);
@@ -11,7 +10,7 @@ const FormSettingsButton = () => {
 
     return (
         <>
-            <IconButton onClick={open} icon={<SettingsIcon />} />
+            <IconButton variant={"ghost"} onClick={open} icon={<SettingsIcon />} />
             {opened && <FormSettings onExited={close} />}
         </>
     );
diff --git a/packages/app-form-builder/src/admin/plugins/editor/defaultBar/Name/Name.tsx b/packages/app-form-builder/src/admin/plugins/editor/defaultBar/Name/Name.tsx
index 5e49c5260c8..c3cbd266382 100644
--- a/packages/app-form-builder/src/admin/plugins/editor/defaultBar/Name/Name.tsx
+++ b/packages/app-form-builder/src/admin/plugins/editor/defaultBar/Name/Name.tsx
@@ -1,22 +1,12 @@
 import React, { useCallback, useState } from "react";
-import { Input } from "@webiny/ui/Input";
-import { Tooltip } from "@webiny/ui/Tooltip";
-import { Typography } from "@webiny/ui/Typography";
 import { useFormEditor } from "~/admin/components/FormEditor";
 /**
  * Package react-hotkeyz does not have types.
  */
 // @ts-expect-error
 import { useHotkeys } from "react-hotkeyz";
-import {
-    FormMeta,
-    FormName,
-    formNameWrapper,
-    FormVersion,
-    NameInputWrapper,
-    NameWrapper
-} from "./NameStyled";
 import { i18n } from "@webiny/app/i18n";
+import { Input, Tag, Text, Tooltip } from "@webiny/admin-ui";
 const t = i18n.namespace("FormEditor.Name");
 
 declare global {
@@ -76,42 +66,41 @@ export const Name = () => {
 
     if (editingEnabled) {
         return (
-            <NameInputWrapper>
-                <Input
-                    autoFocus={autoFocus}
-                    fullwidth
-                    value={localName}
-                    onChange={setLocalName}
-                    onBlur={saveTitle}
-                />
-            </NameInputWrapper>
+            <Input
+                autoFocus={autoFocus}
+                value={localName}
+                onChange={setLocalName}
+                onBlur={saveTitle}
+                variant={"ghost"}
+                size={"md"}
+            />
         );
     }
 
     return (
-        <NameWrapper>
-            <FormMeta>
-                <Typography use={"overline"}>{`status: ${
-                    state.data.published ? t`published` : t`draft`
-                }`}</Typography>
-            </FormMeta>
-            <div style={{ width: "100%", display: "flex" }}>
-                <Tooltip
-                    className={formNameWrapper}
-                    placement={"bottom"}
-                    content={<span>{t`rename`}</span>}
-                >
-                    <FormName
+        <div className={"wby-flex wby-items-center wby-gap-sm"}>
+            <Tooltip
+                side={"bottom"}
+                content={<span>{t`Rename`}</span>}
+                trigger={
+                    <Text
+                        size={"lg"}
+                        className={
+                            "wby-p-xs wby-border-sm wby-border-neutral-base wby-rounded-md hover:wby-border-neutral-muted"
+                        }
                         data-testid="fb-editor-form-title"
-                        onClick={() => {
-                            startEditing();
-                        }}
+                        onClick={startEditing}
                     >
                         {state.data.name}
-                    </FormName>
-                </Tooltip>
-                <FormVersion>{`(v${state.data.version})`}</FormVersion>
-            </div>
-        </NameWrapper>
+                    </Text>
+                }
+            />
+            <Tag
+                content={`${state.data.published ? t`Published` : t`Draft`} (v${
+                    state.data.version
+                })`}
+                variant={state.data.published ? "success" : "neutral-base"}
+            />
+        </div>
     );
 };
diff --git a/packages/app-form-builder/src/admin/plugins/editor/defaultBar/PublishFormButton.tsx b/packages/app-form-builder/src/admin/plugins/editor/defaultBar/PublishFormButton.tsx
index 8d306672f92..5bfca1fb2bd 100644
--- a/packages/app-form-builder/src/admin/plugins/editor/defaultBar/PublishFormButton.tsx
+++ b/packages/app-form-builder/src/admin/plugins/editor/defaultBar/PublishFormButton.tsx
@@ -1,7 +1,6 @@
 import React from "react";
 import { useMutation } from "@apollo/react-hooks";
 import { useRouter } from "@webiny/react-router";
-import { ButtonPrimary } from "@webiny/ui/Button";
 import { ConfirmationDialog } from "@webiny/ui/ConfirmationDialog";
 import { useSnackbar } from "@webiny/app-admin/hooks/useSnackbar";
 import { i18n } from "@webiny/app/i18n";
@@ -12,6 +11,7 @@ import {
     PublishRevisionMutationVariables
 } from "~/admin/graphql";
 import { usePermission } from "~/hooks/usePermission";
+import { Button } from "@webiny/admin-ui";
 
 const t = i18n.namespace("FormEditor.PublishPageButton");
 
@@ -41,8 +41,10 @@ const PublishFormButton = () => {
             data-testid={"fb.editor.default-bar.publish-dialog"}
         >
             {({ showConfirmation }) => (
-                <ButtonPrimary
+                <Button
+                    className={"-wby-ml-sm"}
                     data-testid={"fb.editor.default-bar.publish"}
+                    text={data.version > 1 ? t`Publish changes` : t`Publish`}
                     onClick={() => {
                         showConfirmation(async () => {
                             await publish({
@@ -76,9 +78,7 @@ const PublishFormButton = () => {
                             });
                         });
                     }}
-                >
-                    {data.version > 1 ? t`Publish changes` : t`Publish`}
-                </ButtonPrimary>
+                />
             )}
         </ConfirmationDialog>
     );
diff --git a/packages/app-form-builder/src/admin/plugins/editor/defaultBar/Revisions.tsx b/packages/app-form-builder/src/admin/plugins/editor/defaultBar/Revisions.tsx
index a61b0bc5b96..3bddf12cc24 100644
--- a/packages/app-form-builder/src/admin/plugins/editor/defaultBar/Revisions.tsx
+++ b/packages/app-form-builder/src/admin/plugins/editor/defaultBar/Revisions.tsx
@@ -1,11 +1,6 @@
 import React from "react";
-import { css } from "emotion";
 import { useRouter } from "@webiny/react-router";
-import { Menu, MenuItem } from "@webiny/ui/Menu";
-import { ButtonDefault } from "@webiny/ui/Button";
-import { Icon } from "@webiny/ui/Icon";
-import { Typography } from "@webiny/ui/Typography";
-import { ReactComponent as DownButton } from "./icons/round-arrow_drop_down-24px.svg";
+import { ReactComponent as DownButton } from "@webiny/icons/keyboard_arrow_down.svg";
 import { i18n } from "@webiny/app/i18n";
 import { useQuery } from "@apollo/react-hooks";
 import {
@@ -14,24 +9,10 @@ import {
     GetFormRevisionsQueryVariables
 } from "~/admin/graphql";
 import { useFormEditor } from "~/admin/components/FormEditor";
+import { Button, DropdownMenu, Text } from "@webiny/admin-ui";
 
 const t = i18n.namespace("FormEditor.RevisionsMenu");
 
-const buttonStyle = css({
-    "&.mdc-button": {
-        color: "var(--mdc-theme-text-primary-on-background) !important"
-    }
-});
-
-const menuList = css({
-    ".mdc-deprecated-list-item": {
-        flexDirection: "column",
-        justifyContent: "center",
-        alignItems: "baseline",
-        textAlign: "left"
-    }
-});
-
 const Revisions = () => {
     const {
         state: { data }
@@ -54,26 +35,34 @@ const Revisions = () => {
             : getRevisions.data.formBuilder.revisions.data;
 
     return (
-        <Menu
-            className={menuList}
-            onSelect={evt => {
-                history.push(
-                    `/form-builder/forms/${encodeURIComponent(revisions[evt.detail.index]?.id)}`
-                );
-            }}
-            handle={
-                <ButtonDefault className={buttonStyle}>
-                    {t`Revisions`} <Icon icon={<DownButton />} />
-                </ButtonDefault>
+        <DropdownMenu
+            trigger={
+                <Button
+                    variant={"secondary"}
+                    text={t`Revisions`}
+                    icon={<DownButton />}
+                    iconPosition={"end"}
+                />
             }
         >
             {revisions.map(rev => (
-                <MenuItem key={rev.id} disabled={rev.status !== "draft"}>
-                    <Typography use={"body2"}>v{rev.version}</Typography>
-                    <Typography use={"caption"}>({rev.status})</Typography>
-                </MenuItem>
+                <DropdownMenu.Item
+                    key={rev.id}
+                    disabled={rev.status !== "draft"}
+                    onClick={() => {
+                        history.push(`/form-builder/forms/${encodeURIComponent(rev.id)}`);
+                    }}
+                    text={
+                        <>
+                            <Text as={"div"} size={"md"}>
+                                v{rev.version}
+                            </Text>
+                            <Text size={"sm"}>({rev.status})</Text>
+                        </>
+                    }
+                />
             ))}
-        </Menu>
+        </DropdownMenu>
     );
 };
 
diff --git a/packages/app-form-builder/src/admin/plugins/editor/defaultBar/index.tsx b/packages/app-form-builder/src/admin/plugins/editor/defaultBar/index.tsx
index 3c7ebac8c28..d6b6941890a 100644
--- a/packages/app-form-builder/src/admin/plugins/editor/defaultBar/index.tsx
+++ b/packages/app-form-builder/src/admin/plugins/editor/defaultBar/index.tsx
@@ -1,6 +1,5 @@
 import React from "react";
 import BackButton from "./BackButton";
-import Divider from "./Divider";
 import PublishFormButton from "./PublishFormButton";
 import { Name } from "./Name";
 import { FormSettingsButton } from "./FormSettings";
@@ -14,13 +13,6 @@ export default [
             return <Revisions />;
         }
     },
-    {
-        name: "form-editor-default-bar-right-revisions-divider",
-        type: "form-editor-default-bar-right",
-        render() {
-            return <Divider />;
-        }
-    },
     {
         name: "form-editor-default-bar-right-form-settings-button",
         type: "form-editor-default-bar-right",
@@ -43,13 +35,6 @@ export default [
             return <BackButton />;
         }
     },
-    {
-        name: "form-editor-default-bar-left-divider",
-        type: "form-editor-default-bar-left",
-        render() {
-            return <Divider />;
-        }
-    },
     {
         name: "form-editor-default-bar-left-name",
         type: "form-editor-default-bar-left",
diff --git a/packages/app-form-builder/src/admin/plugins/editor/formFieldValidators/gte.tsx b/packages/app-form-builder/src/admin/plugins/editor/formFieldValidators/gte.tsx
index 106af3e1bc5..04dcef048f0 100644
--- a/packages/app-form-builder/src/admin/plugins/editor/formFieldValidators/gte.tsx
+++ b/packages/app-form-builder/src/admin/plugins/editor/formFieldValidators/gte.tsx
@@ -1,6 +1,5 @@
 import React from "react";
-import { Grid, Cell } from "@webiny/ui/Grid";
-import { Input } from "@webiny/ui/Input";
+import { Grid, Input } from "@webiny/admin-ui";
 import { validation } from "@webiny/validation";
 import { FbBuilderFormFieldValidatorPlugin } from "~/types";
 
@@ -14,20 +13,19 @@ const plugin: FbBuilderFormFieldValidatorPlugin = {
         defaultMessage: "Value is too small.",
         renderSettings({ Bind }) {
             return (
-                <Grid>
-                    <Cell span={12}>
-                        <Bind
-                            name={"settings.value"}
-                            validators={validation.create("required,numeric")}
-                        >
-                            <Input
-                                type={"number"}
-                                label={"Value"}
-                                description={"This is the greatest value that will be allowed"}
-                            />
-                        </Bind>
-                    </Cell>
-                </Grid>
+                <Grid.Column span={12}>
+                    <Bind
+                        name={"settings.value"}
+                        validators={validation.create("required,numeric")}
+                    >
+                        <Input
+                            size={"lg"}
+                            type={"number"}
+                            label={"Value"}
+                            description={"This is the greatest value that will be allowed"}
+                        />
+                    </Bind>
+                </Grid.Column>
             );
         }
     }
diff --git a/packages/app-form-builder/src/admin/plugins/editor/formFieldValidators/in.tsx b/packages/app-form-builder/src/admin/plugins/editor/formFieldValidators/in.tsx
index 54d571ec0d1..1b23cc0fa3e 100644
--- a/packages/app-form-builder/src/admin/plugins/editor/formFieldValidators/in.tsx
+++ b/packages/app-form-builder/src/admin/plugins/editor/formFieldValidators/in.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Grid, Cell } from "@webiny/ui/Grid";
+import { Grid } from "@webiny/admin-ui";
 import { Tags } from "@webiny/ui/Tags";
 import { validation } from "@webiny/validation";
 import { FbBuilderFormFieldValidatorPlugin } from "~/types";
@@ -15,16 +15,11 @@ const plugin: FbBuilderFormFieldValidatorPlugin = {
         defaultMessage: "Value is not allowed.",
         renderSettings({ Bind }) {
             return (
-                <Grid>
-                    <Cell span={12}>
-                        <Bind name={"settings.values"} validators={validation.create("required")}>
-                            <Tags
-                                label={"Allowed values"}
-                                description={"Hit ENTER to add values"}
-                            />
-                        </Bind>
-                    </Cell>
-                </Grid>
+                <Grid.Column span={12}>
+                    <Bind name={"settings.values"} validators={validation.create("required")}>
+                        <Tags label={"Allowed values"} description={"Hit ENTER to add values"} />
+                    </Bind>
+                </Grid.Column>
             );
         }
     }
diff --git a/packages/app-form-builder/src/admin/plugins/editor/formFieldValidators/lte.tsx b/packages/app-form-builder/src/admin/plugins/editor/formFieldValidators/lte.tsx
index 83a0ceb3a44..41445181952 100644
--- a/packages/app-form-builder/src/admin/plugins/editor/formFieldValidators/lte.tsx
+++ b/packages/app-form-builder/src/admin/plugins/editor/formFieldValidators/lte.tsx
@@ -1,6 +1,5 @@
 import React from "react";
-import { Grid, Cell } from "@webiny/ui/Grid";
-import { Input } from "@webiny/ui/Input";
+import { Grid, Input } from "@webiny/admin-ui";
 import { validation } from "@webiny/validation";
 import { FbBuilderFormFieldValidatorPlugin } from "~/types";
 
@@ -14,20 +13,19 @@ const plugin: FbBuilderFormFieldValidatorPlugin = {
         defaultMessage: "Value is too great.",
         renderSettings({ Bind }) {
             return (
-                <Grid>
-                    <Cell span={12}>
-                        <Bind
-                            name={"settings.value"}
-                            validators={validation.create("required,numeric")}
-                        >
-                            <Input
-                                type={"number"}
-                                label={"Value"}
-                                description={"This is the greatest value that will be allowed"}
-                            />
-                        </Bind>
-                    </Cell>
-                </Grid>
+                <Grid.Column span={12}>
+                    <Bind
+                        name={"settings.value"}
+                        validators={validation.create("required,numeric")}
+                    >
+                        <Input
+                            size={"lg"}
+                            type={"number"}
+                            label={"Value"}
+                            description={"This is the greatest value that will be allowed"}
+                        />
+                    </Bind>
+                </Grid.Column>
             );
         }
     }
diff --git a/packages/app-form-builder/src/admin/plugins/editor/formFieldValidators/maxLength.tsx b/packages/app-form-builder/src/admin/plugins/editor/formFieldValidators/maxLength.tsx
index 9354dd71378..8e08af01ccb 100644
--- a/packages/app-form-builder/src/admin/plugins/editor/formFieldValidators/maxLength.tsx
+++ b/packages/app-form-builder/src/admin/plugins/editor/formFieldValidators/maxLength.tsx
@@ -1,6 +1,5 @@
 import React from "react";
-import { Grid, Cell } from "@webiny/ui/Grid";
-import { Input } from "@webiny/ui/Input";
+import { Grid, Input } from "@webiny/admin-ui";
 import { validation } from "@webiny/validation";
 import { FbBuilderFormFieldValidatorPlugin } from "~/types";
 
@@ -14,20 +13,19 @@ const plugin: FbBuilderFormFieldValidatorPlugin = {
         defaultMessage: "Value is too long.",
         renderSettings({ Bind }) {
             return (
-                <Grid>
-                    <Cell span={12}>
-                        <Bind
-                            name={"settings.value"}
-                            validators={validation.create("required,numeric")}
-                        >
-                            <Input
-                                type={"number"}
-                                label={"Value"}
-                                description={"This is the maximum allowed length."}
-                            />
-                        </Bind>
-                    </Cell>
-                </Grid>
+                <Grid.Column span={12}>
+                    <Bind
+                        name={"settings.value"}
+                        validators={validation.create("required,numeric")}
+                    >
+                        <Input
+                            size={"lg"}
+                            type={"number"}
+                            label={"Value"}
+                            description={"This is the maximum allowed length."}
+                        />
+                    </Bind>
+                </Grid.Column>
             );
         }
     }
diff --git a/packages/app-form-builder/src/admin/plugins/editor/formFieldValidators/minLength.tsx b/packages/app-form-builder/src/admin/plugins/editor/formFieldValidators/minLength.tsx
index ddc7574a0f7..c1603616464 100644
--- a/packages/app-form-builder/src/admin/plugins/editor/formFieldValidators/minLength.tsx
+++ b/packages/app-form-builder/src/admin/plugins/editor/formFieldValidators/minLength.tsx
@@ -1,8 +1,7 @@
 import React from "react";
-import { Grid, Cell } from "@webiny/ui/Grid";
-import { Input } from "@webiny/ui/Input";
 import { validation } from "@webiny/validation";
 import { FbBuilderFormFieldValidatorPlugin } from "~/types";
+import { Grid, Input } from "@webiny/admin-ui";
 
 const plugin: FbBuilderFormFieldValidatorPlugin = {
     type: "form-editor-field-validator",
@@ -14,20 +13,19 @@ const plugin: FbBuilderFormFieldValidatorPlugin = {
         defaultMessage: "Value is too short.",
         renderSettings({ Bind }) {
             return (
-                <Grid>
-                    <Cell span={12}>
-                        <Bind
-                            name={"settings.value"}
-                            validators={validation.create("required,numeric")}
-                        >
-                            <Input
-                                type={"number"}
-                                label={"Value"}
-                                description={"This is the minimum allowed length."}
-                            />
-                        </Bind>
-                    </Cell>
-                </Grid>
+                <Grid.Column span={12}>
+                    <Bind
+                        name={"settings.value"}
+                        validators={validation.create("required,numeric")}
+                    >
+                        <Input
+                            size={"lg"}
+                            type={"number"}
+                            label={"Value"}
+                            description={"This is the minimum allowed length."}
+                        />
+                    </Bind>
+                </Grid.Column>
             );
         }
     }
diff --git a/packages/app-form-builder/src/admin/plugins/editor/formFieldValidators/pattern.tsx b/packages/app-form-builder/src/admin/plugins/editor/formFieldValidators/pattern.tsx
index f06cff4bcc5..144b31d47a8 100644
--- a/packages/app-form-builder/src/admin/plugins/editor/formFieldValidators/pattern.tsx
+++ b/packages/app-form-builder/src/admin/plugins/editor/formFieldValidators/pattern.tsx
@@ -1,7 +1,5 @@
 import React from "react";
-import { Grid, Cell } from "@webiny/ui/Grid";
-import { Input } from "@webiny/ui/Input";
-import { Select } from "@webiny/ui/Select";
+import { Grid, Input, Label, Select } from "@webiny/admin-ui";
 import { plugins } from "@webiny/plugins";
 import { validation } from "@webiny/validation";
 import {
@@ -26,15 +24,14 @@ const plugin: FbBuilderFormFieldValidatorPlugin = {
                 "form-editor-field-validator-pattern"
             );
 
-            const selectOptions: any = presetPlugins.map(item => (
-                <option key={item.pattern.name} value={item.pattern.name}>
-                    {item.pattern.label}
-                </option>
-            ));
+            const selectOptions: any = presetPlugins.map(item => ({
+                label: item.pattern.label,
+                value: item.pattern.name
+            }));
 
             return (
-                <Grid>
-                    <Cell span={3}>
+                <>
+                    <Grid.Column span={3}>
                         <Bind
                             name={"settings.preset"}
                             validators={validation.create("required")}
@@ -57,31 +54,32 @@ const plugin: FbBuilderFormFieldValidatorPlugin = {
                                 setMessage(selectedPatternPlugin.pattern.message);
                             }}
                         >
-                            <Select label={"Preset"}>
-                                <option value={"custom"}>Custom</option>
-                                {selectOptions}
-                            </Select>
+                            <Select
+                                size={"lg"}
+                                label={"Preset"}
+                                options={[{ value: "custom", label: "Custom" }, ...selectOptions]}
+                            />
                         </Bind>
-                    </Cell>
-                    <Cell span={7}>
+                    </Grid.Column>
+                    <Grid.Column span={7}>
                         <Bind name={"settings.regex"} validators={validation.create("required")}>
                             <Input
+                                size={"lg"}
                                 disabled={inputsDisabled}
-                                label={"Regex"}
-                                description={"Regex to test the value"}
+                                label={<Label text={"Regex"} hint={"Regex to test the value"} />}
                             />
                         </Bind>
-                    </Cell>
-                    <Cell span={2}>
+                    </Grid.Column>
+                    <Grid.Column span={2}>
                         <Bind name={"settings.flags"} validators={validation.create("required")}>
                             <Input
+                                size={"lg"}
                                 disabled={inputsDisabled}
-                                label={"Flags"}
-                                description={"Regex flags"}
+                                label={<Label text={"Flags"} hint={"Regex flags"} />}
                             />
                         </Bind>
-                    </Cell>
-                </Grid>
+                    </Grid.Column>
+                </>
             );
         }
     }
diff --git a/packages/app-form-builder/src/admin/plugins/editor/formFields/checkboxes.tsx b/packages/app-form-builder/src/admin/plugins/editor/formFields/checkboxes.tsx
index 8cbde46d57d..64fd8acba5b 100644
--- a/packages/app-form-builder/src/admin/plugins/editor/formFields/checkboxes.tsx
+++ b/packages/app-form-builder/src/admin/plugins/editor/formFields/checkboxes.tsx
@@ -1,6 +1,6 @@
 import React from "react";
-import { Grid, Cell } from "@webiny/ui/Grid";
-import { ReactComponent as Icon } from "./icons/round-check_box-24px.svg";
+import { Grid } from "@webiny/admin-ui";
+import { ReactComponent as Icon } from "@webiny/icons/check_box.svg";
 import OptionsList from "./components/OptionsList";
 import { FbBuilderFieldPlugin } from "~/types";
 
@@ -29,11 +29,9 @@ const plugin: FbBuilderFieldPlugin = {
         },
         renderSettings({ form }) {
             return (
-                <Grid>
-                    <Cell span={12}>
-                        <OptionsList form={form} multiple otherOption />
-                    </Cell>
-                </Grid>
+                <Grid.Column span={12}>
+                    <OptionsList form={form} multiple otherOption />
+                </Grid.Column>
             );
         }
     }
diff --git a/packages/app-form-builder/src/admin/plugins/editor/formFields/components/DateTime.tsx b/packages/app-form-builder/src/admin/plugins/editor/formFields/components/DateTime.tsx
index f7721377b2d..a96a89c850a 100644
--- a/packages/app-form-builder/src/admin/plugins/editor/formFields/components/DateTime.tsx
+++ b/packages/app-form-builder/src/admin/plugins/editor/formFields/components/DateTime.tsx
@@ -1,68 +1,60 @@
 import React from "react";
-import { Input } from "@webiny/ui/Input";
-import { Select } from "@webiny/ui/Select";
-import { Grid, Cell } from "@webiny/ui/Grid";
 import { validation } from "@webiny/validation";
 import { BindComponent } from "@webiny/form/types";
 import { UTC_TIMEZONES } from "@webiny/utils";
+import { Grid, Input, Select } from "@webiny/admin-ui";
 
 export const DateTime = ({ fieldFormat, Bind }: { fieldFormat: string; Bind: BindComponent }) => {
     if (fieldFormat === "time") {
         return (
-            <Grid>
-                <Cell span={12}>
-                    <Bind name={"settings.value"} validators={validation.create("required")}>
-                        <Input label={"Time"} type="time" />
-                    </Bind>
-                </Cell>
-            </Grid>
+            <Grid.Column span={12}>
+                <Bind name={"settings.value"} validators={validation.create("required")}>
+                    <Input size="lg" label={"Time"} type="time" />
+                </Bind>
+            </Grid.Column>
         );
     }
 
     if (fieldFormat === "dateTimeWithTimezone") {
         return (
-            <Grid>
-                <Cell span={8}>
+            <>
+                <Grid.Column span={8}>
                     <Bind name={"settings.value"} validators={validation.create("required")}>
-                        <Input label={"Date/Time"} type="datetime-local" />
+                        <Input size="lg" label={"Date/Time"} type="datetime-local" />
                     </Bind>
-                </Cell>
-                <Cell span={4}>
+                </Grid.Column>
+                <Grid.Column span={4}>
                     <Bind name={"settings.timeZone"} validators={validation.create("required")}>
-                        <Select label={"Timezone"}>
-                            {UTC_TIMEZONES.map(
-                                ({ value, label }: { value: string; label: string }) => (
-                                    <option value={value} key={label}>
-                                        {label}
-                                    </option>
-                                )
+                        <Select
+                            label={"Timezone"}
+                            options={UTC_TIMEZONES.map(
+                                ({ value, label }: { value: string; label: string }) => ({
+                                    value,
+                                    label
+                                })
                             )}
-                        </Select>
+                        />
                     </Bind>
-                </Cell>
-            </Grid>
+                </Grid.Column>
+            </>
         );
     }
 
     if (fieldFormat === "dateTimeWithoutTimezone") {
         return (
-            <Grid>
-                <Cell span={12}>
-                    <Bind name={"settings.value"} validators={validation.create("required")}>
-                        <Input label={"Date/Time"} type="datetime-local" />
-                    </Bind>
-                </Cell>
-            </Grid>
+            <Grid.Column span={12}>
+                <Bind name={"settings.value"} validators={validation.create("required")}>
+                    <Input size="lg" label={"Date/Time"} type="datetime-local" />
+                </Bind>
+            </Grid.Column>
         );
     }
 
     return (
-        <Grid>
-            <Cell span={12}>
-                <Bind name={"settings.value"} validators={validation.create("required")}>
-                    <Input label={"Date"} type="date" />
-                </Bind>
-            </Cell>
-        </Grid>
+        <Grid.Column span={12}>
+            <Bind name={"settings.value"} validators={validation.create("required")}>
+                <Input size="lg" label={"Date"} type="date" />
+            </Bind>
+        </Grid.Column>
     );
 };
diff --git a/packages/app-form-builder/src/admin/plugins/editor/formFields/components/OptionsList.tsx b/packages/app-form-builder/src/admin/plugins/editor/formFields/components/OptionsList.tsx
index 4f0b2ca9f36..a563d23d773 100644
--- a/packages/app-form-builder/src/admin/plugins/editor/formFields/components/OptionsList.tsx
+++ b/packages/app-form-builder/src/admin/plugins/editor/formFields/components/OptionsList.tsx
@@ -1,14 +1,8 @@
 import React, { useState } from "react";
-import { css } from "emotion";
-import styled from "@emotion/styled";
 import camelCase from "lodash/camelCase";
 import cloneDeep from "lodash/cloneDeep";
 import { OptionsListItem, AddOptionInput, EditFieldOptionDialog } from "./OptionsListComponents";
-import { Icon } from "@webiny/ui/Icon";
-import { Typography } from "@webiny/ui/Typography";
-import { Switch } from "@webiny/ui/Switch";
-import { Grid, Cell } from "@webiny/ui/Grid";
-import { ReactComponent as HandleIcon } from "../../../../icons/round-drag_indicator-24px.svg";
+import { ReactComponent as HandleIcon } from "@webiny/icons/drag_indicator.svg";
 import { validation } from "@webiny/validation";
 import { FormRenderPropParams } from "@webiny/form/types";
 import { FieldOption } from "./types";
@@ -18,37 +12,16 @@ import {
     SortableContainerContextProvider,
     FieldOptionWithId
 } from "./OptionsListComponents/OptionsListItem";
+import { Grid, Icon, Label, Switch } from "@webiny/admin-ui";
 
-const OptionListItem = styled("li")({
-    zIndex: 10,
-    display: "flex",
-    justifyContent: "space-between",
-    borderBottom: "1px solid var(--mdc-theme-background)",
-    background: "var(--mdc-theme-surface)",
-    "&:hover": {
-        background: "var(--mdc-theme-background)"
-    },
-    "&:last-child": {
-        border: "none"
-    }
-});
-
-const switchWrapper = css`
-    align-self: end;
-    height: 100%;
-    display: flex;
-    align-items: center;
-
-    .switch-label {
-        margin-right: 12px;
-
-        strong {
-            font-weight: 600;
-        }
-    }
-`;
-
-const DragHandle = () => <Icon icon={<HandleIcon style={{ cursor: "pointer" }} />} />;
+const DragHandle = () => (
+    <Icon
+        icon={<HandleIcon />}
+        label={"Drag to reorder"}
+        color={"neutral-light"}
+        className={"wby-cursor-grab"}
+    />
+);
 
 interface SetEditOptionParams {
     index: number | null;
@@ -140,37 +113,38 @@ const OptionsList = ({ form, multiple, otherOption }: OptionsListProps) => {
 
                 return (
                     <>
-                        <div>Options</div>
+                        <Label text={"Options"} className={"wby-mb-sm"} />
                         <Grid>
-                            <Cell span={otherOption ? 9 : 12}>
-                                <AddOptionInput
-                                    options={optionsValue}
-                                    validation={optionsValidation}
-                                    onAdd={label => {
-                                        const newValue = Array.isArray(optionsValue)
-                                            ? [...optionsValue]
-                                            : [];
-                                        newValue.push({
-                                            value: camelCase(label),
-                                            label
-                                        });
-                                        setOptionsValue(newValue);
-                                    }}
-                                />
-                            </Cell>
-                            {otherOption && (
-                                <Cell span={3} className={switchWrapper}>
-                                    <Typography use={"button"} className="switch-label">
-                                        Allow &quot;<strong>Other</strong>&quot;
-                                    </Typography>
-                                    <Bind name={"settings.otherOption"}>
-                                        <Switch />
-                                    </Bind>
-                                </Cell>
-                            )}
+                            <>
+                                <Grid.Column span={otherOption ? 9 : 12}>
+                                    <AddOptionInput
+                                        options={optionsValue}
+                                        validation={optionsValidation}
+                                        onAdd={label => {
+                                            const newValue = Array.isArray(optionsValue)
+                                                ? [...optionsValue]
+                                                : [];
+                                            newValue.push({
+                                                value: camelCase(label),
+                                                label
+                                            });
+                                            setOptionsValue(newValue);
+                                        }}
+                                    />
+                                </Grid.Column>
+                                {otherOption && (
+                                    <Grid.Column span={3}>
+                                        <div className={"wby-h-full wby-flex wby-items-center"}>
+                                            <Bind name={"settings.otherOption"}>
+                                                <Switch label={`Allow "Other"`} />
+                                            </Bind>
+                                        </div>
+                                    </Grid.Column>
+                                )}
+                            </>
                         </Grid>
 
-                        <div style={{ position: "relative" }}>
+                        <div className={"wby-relative wby-mt-md"}>
                             {Array.isArray(optionsValueWithId) && optionsValueWithId.length > 0 ? (
                                 <>
                                     <SortableContainerContextProvider
@@ -178,7 +152,7 @@ const OptionsList = ({ form, multiple, otherOption }: OptionsListProps) => {
                                         onDragEnd={onDragEnd}
                                     >
                                         {optionsValueWithId.map((item, index) => (
-                                            <OptionListItem key={`item-${index}`}>
+                                            <div key={`item-${index}`}>
                                                 <OptionsListItem
                                                     dragHandle={<DragHandle />}
                                                     multiple={!!multiple}
@@ -191,14 +165,12 @@ const OptionsList = ({ form, multiple, otherOption }: OptionsListProps) => {
                                                         setOptionsValue(newValue);
                                                     }}
                                                 />
-                                            </OptionListItem>
+                                            </div>
                                         ))}
                                     </SortableContainerContextProvider>
                                 </>
                             ) : (
-                                <div style={{ padding: 40, textAlign: "center" }}>
-                                    No options added.
-                                </div>
+                                <div className={"wby-p-xl wby-text-center"}>No options added.</div>
                             )}
                         </div>
 
diff --git a/packages/app-form-builder/src/admin/plugins/editor/formFields/components/OptionsListComponents/AddOptionInput.tsx b/packages/app-form-builder/src/admin/plugins/editor/formFields/components/OptionsListComponents/AddOptionInput.tsx
index 4686176cfa5..78acac34d2b 100644
--- a/packages/app-form-builder/src/admin/plugins/editor/formFields/components/OptionsListComponents/AddOptionInput.tsx
+++ b/packages/app-form-builder/src/admin/plugins/editor/formFields/components/OptionsListComponents/AddOptionInput.tsx
@@ -1,6 +1,6 @@
 import React from "react";
-import { Input } from "@webiny/ui/Input";
 import trim from "lodash/trim";
+import { Input } from "@webiny/admin-ui";
 import { BindComponentRenderPropValidation, Form } from "@webiny/form";
 import { FieldOption } from "~/admin/plugins/editor/formFields/components/types";
 
@@ -34,6 +34,7 @@ const AddOptionInput = ({ options, onAdd, validation: optionsValidation }: AddOp
                                 : optionsValidation;
                         return (
                             <Input
+                                size={"lg"}
                                 validation={validation}
                                 value={value}
                                 onChange={onChange}
diff --git a/packages/app-form-builder/src/admin/plugins/editor/formFields/components/OptionsListComponents/EditFieldOptionDialog.tsx b/packages/app-form-builder/src/admin/plugins/editor/formFields/components/OptionsListComponents/EditFieldOptionDialog.tsx
index 1bb7e9306af..66e6f6107db 100644
--- a/packages/app-form-builder/src/admin/plugins/editor/formFields/components/OptionsListComponents/EditFieldOptionDialog.tsx
+++ b/packages/app-form-builder/src/admin/plugins/editor/formFields/components/OptionsListComponents/EditFieldOptionDialog.tsx
@@ -1,8 +1,6 @@
 import React from "react";
-import { css } from "emotion";
+import { Dialog, Grid, Input } from "@webiny/admin-ui";
 import { Form, FormOnSubmit } from "@webiny/form";
-import { Grid, Cell } from "@webiny/ui/Grid";
-import { Input } from "@webiny/ui/Input";
 import { i18n } from "@webiny/app/i18n";
 /**
  * Package react-hotkeys does not have types.
@@ -11,15 +9,7 @@ import { i18n } from "@webiny/app/i18n";
 import { Hotkeys } from "react-hotkeyz";
 import { validation } from "@webiny/validation";
 
-import { Dialog, DialogTitle, DialogContent, DialogActions, DialogButton } from "@webiny/ui/Dialog";
-
 const t = i18n.namespace("Forms.FormEditor.EditFieldOptionDialog");
-const narrowDialog = css({
-    ".mdc-dialog__surface": {
-        width: 600,
-        minWidth: 600
-    }
-});
 
 interface EditFieldOptionDialogProps<T = any> {
     option: any;
@@ -33,67 +23,68 @@ interface EditFieldOptionDialogProps<T = any> {
 const EditFieldOptionDialog = (props: EditFieldOptionDialogProps) => {
     const { onClose, options, open, onSubmit, option, optionIndex } = props;
 
+    if (!option) {
+        return null;
+    }
+
     return (
-        <Dialog open={open} onClose={onClose} className={narrowDialog}>
-            {option !== null && (
-                <Hotkeys
-                    zIndex={115}
-                    keys={{
-                        esc(event: React.KeyboardEvent) {
-                            event.preventDefault();
-                            event.stopPropagation();
-                            onClose();
-                        }
-                    }}
-                >
-                    <Form data={option} onSubmit={onSubmit}>
-                        {({ Bind, submit }) => (
+        <Hotkeys
+            zIndex={115}
+            keys={{
+                esc(event: React.KeyboardEvent) {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    onClose();
+                }
+            }}
+        >
+            <Form data={option} onSubmit={onSubmit}>
+                {({ Bind, submit }) => (
+                    <Dialog
+                        open={open}
+                        onClose={onClose}
+                        title={t`Edit option`}
+                        actions={
                             <>
-                                <DialogTitle>{t`Edit option`}</DialogTitle>
-                                <DialogContent>
-                                    <Grid>
-                                        <Cell span={12}>
-                                            <Bind name={"label"}>
-                                                <Input label={t`Label`} />
-                                            </Bind>
-                                        </Cell>
-                                        <Cell span={12}>
-                                            <Bind
-                                                name={"value"}
-                                                validators={(value: string) => {
-                                                    validation.validateSync(value, "required");
-                                                    if (Array.isArray(options) === false) {
-                                                        return true;
-                                                    }
-
-                                                    for (let key = 0; key < options.length; key++) {
-                                                        const current = options[key];
-                                                        if (
-                                                            current.value === value &&
-                                                            key !== optionIndex
-                                                        ) {
-                                                            throw new Error(
-                                                                `Option with value "${value}" already exists.`
-                                                            );
-                                                        }
-                                                    }
-                                                    return true;
-                                                }}
-                                            >
-                                                <Input label={t`Value`} />
-                                            </Bind>
-                                        </Cell>
-                                    </Grid>
-                                </DialogContent>
-                                <DialogActions>
-                                    <DialogButton onClick={submit}>{t`Save`}</DialogButton>
-                                </DialogActions>
+                                <Dialog.CancelButton />
+                                <Dialog.ConfirmButton onClick={submit} text={"Save"} />
                             </>
-                        )}
-                    </Form>
-                </Hotkeys>
-            )}
-        </Dialog>
+                        }
+                    >
+                        <Grid>
+                            <Grid.Column span={12}>
+                                <Bind name={"label"}>
+                                    <Input size={"lg"} label={t`Label`} />
+                                </Bind>
+                            </Grid.Column>
+                            <Grid.Column span={12}>
+                                <Bind
+                                    name={"value"}
+                                    validators={(value: string) => {
+                                        validation.validateSync(value, "required");
+                                        if (Array.isArray(options) === false) {
+                                            return true;
+                                        }
+
+                                        for (let key = 0; key < options.length; key++) {
+                                            const current = options[key];
+                                            if (current.value === value && key !== optionIndex) {
+                                                throw new Error(
+                                                    `Option with value "${value}" already exists.`
+                                                );
+                                            }
+                                        }
+                                        return true;
+                                    }}
+                                >
+                                    <Input size={"lg"} label={t`Value`} />
+                                </Bind>
+                            </Grid.Column>
+                        </Grid>
+                    </Dialog>
+                )}
+            </Form>
+        </Hotkeys>
     );
 };
 
diff --git a/packages/app-form-builder/src/admin/plugins/editor/formFields/components/OptionsListComponents/OptionsListItem.tsx b/packages/app-form-builder/src/admin/plugins/editor/formFields/components/OptionsListComponents/OptionsListItem.tsx
index 9ca74a13b37..0d2618ea994 100644
--- a/packages/app-form-builder/src/admin/plugins/editor/formFields/components/OptionsListComponents/OptionsListItem.tsx
+++ b/packages/app-form-builder/src/admin/plugins/editor/formFields/components/OptionsListComponents/OptionsListItem.tsx
@@ -1,10 +1,4 @@
 import React from "react";
-import { Typography } from "@webiny/ui/Typography";
-import { Tooltip } from "@webiny/ui/Tooltip";
-import { css } from "emotion";
-import { IconButton } from "@webiny/ui/Button";
-import styled from "@emotion/styled";
-
 import { useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 import {
@@ -18,38 +12,11 @@ import {
     UniqueIdentifier
 } from "@dnd-kit/core";
 import { sortableKeyboardCoordinates, SortableContext } from "@dnd-kit/sortable";
-
-import { Switch } from "@webiny/ui/Switch";
-import { ReactComponent as EditIcon } from "../../../../../icons/edit.svg";
-import { ReactComponent as DeleteIcon } from "../../../../../icons/delete.svg";
+import { ReactComponent as EditIcon } from "@webiny/icons/edit.svg";
+import { ReactComponent as DeleteIcon } from "@webiny/icons/delete.svg";
 import { BindComponent } from "@webiny/form/types";
 import { FieldOption } from "~/admin/plugins/editor/formFields/components/types";
-
-const OptionList = styled("ul")({
-    padding: 25,
-    border: "1px solid var(--mdc-theme-on-background)"
-});
-
-const optionsListItemLeft = css({
-    display: "flex",
-    justifyContent: "left",
-    alignItems: "center",
-    ">div": {
-        display: "flex",
-        flexDirection: "column",
-        marginLeft: 10,
-        color: "var(--mdc-theme-on-surface)",
-        span: {
-            lineHeight: "125%"
-        }
-    }
-});
-
-const optionsListItemRight = css({
-    display: "flex",
-    justifyContent: "right",
-    alignItems: "center"
-});
+import { IconButton, Switch, Text, Tooltip } from "@webiny/admin-ui";
 
 interface DefaultValueSwitchProps {
     multiple: boolean;
@@ -70,7 +37,8 @@ const DefaultValueSwitch = ({
 
         return (
             <Switch
-                value={selected}
+                label={""}
+                checked={selected}
                 onChange={() => {
                     if (selected) {
                         const value = Array.isArray(currentDefaultValue)
@@ -94,7 +62,8 @@ const DefaultValueSwitch = ({
     const selected = currentDefaultValue === option.value;
     return (
         <Switch
-            value={selected}
+            label={""}
+            checked={selected}
             onChange={() => {
                 const newValue = selected ? "" : option.value;
                 setDefaultValue(newValue);
@@ -133,7 +102,9 @@ export const SortableContainerContextProvider = ({
     return (
         <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={onDragEnd}>
             <SortableContext items={optionsValue as unknown as SortableContextItemsProp}>
-                <OptionList>{children}</OptionList>
+                <div className={"wby-p-sm wby-border-sm wby-border-neutral-muted wby-rounded-sm"}>
+                    {children}
+                </div>
             </SortableContext>
         </DndContext>
     );
@@ -157,38 +128,56 @@ export default function OptionsListItem(props: OptionsListItemProps) {
     };
 
     return (
-        <>
+        <div
+            className={
+                "wby-flex wby-justify-between wby-items-center wby-gap-lg wby-p-sm hover:wby-bg-neutral-dimmed"
+            }
+        >
             <div ref={setNodeRef} style={style} {...attributes} {...listeners}>
-                <div className={optionsListItemLeft}>
+                <div className={"wby-flex wby-justify-between wby-items-center wby-gap-sm"}>
                     <Tooltip
-                        placement={"bottom"}
-                        content={<span>Drag to rearrange the order</span>}
-                    >
-                        <span>{dragHandle}</span>
-                    </Tooltip>
+                        side={"bottom"}
+                        content={"Drag to rearrange the order"}
+                        trigger={dragHandle}
+                    />
                     <div>
-                        <Typography use={"subtitle1"}>{option.label}</Typography>
-                        <Typography use={"caption"}>{option.value}</Typography>
+                        <Text as={"div"}>{option.label}</Text>
+                        <Text size={"sm"} as={"div"}>
+                            {option.value}
+                        </Text>
                     </div>
                 </div>
             </div>
-            <div className={optionsListItemRight}>
-                <IconButton icon={<EditIcon />} onClick={editOption} />
-                <IconButton icon={<DeleteIcon />} onClick={deleteOption} />
-
+            <div className={"wby-flex wby-justify-start wby-items-center wby-gap-sm"}>
+                <IconButton
+                    size={"sm"}
+                    variant={"ghost"}
+                    icon={<EditIcon />}
+                    onClick={editOption}
+                />
+                <IconButton
+                    size={"sm"}
+                    variant={"ghost"}
+                    icon={<DeleteIcon />}
+                    onClick={deleteOption}
+                />
                 <Bind name={"settings.defaultValue"}>
                     {({ onChange, value }) => (
-                        <Tooltip placement={"bottom"} content={<span>Set as default value</span>}>
-                            <DefaultValueSwitch
-                                onChange={onChange}
-                                value={value}
-                                multiple={multiple}
-                                option={option}
-                            />
-                        </Tooltip>
+                        <Tooltip
+                            side={"bottom"}
+                            content={"Set as default value"}
+                            trigger={
+                                <DefaultValueSwitch
+                                    onChange={onChange}
+                                    value={value}
+                                    multiple={multiple}
+                                    option={option}
+                                />
+                            }
+                        />
                     )}
                 </Bind>
             </div>
-        </>
+        </div>
     );
 }
diff --git a/packages/app-form-builder/src/admin/plugins/editor/formFields/dateTime.tsx b/packages/app-form-builder/src/admin/plugins/editor/formFields/dateTime.tsx
index 57a227d318e..3074ada4ea8 100644
--- a/packages/app-form-builder/src/admin/plugins/editor/formFields/dateTime.tsx
+++ b/packages/app-form-builder/src/admin/plugins/editor/formFields/dateTime.tsx
@@ -1,9 +1,8 @@
 import React from "react";
 import { i18n } from "@webiny/app/i18n";
-import { Grid, Cell } from "@webiny/ui/Grid";
-import { Select } from "@webiny/ui/Select";
-import { ReactComponent as DateIcon } from "@material-design-icons/svg/round/calendar_month.svg";
+import { ReactComponent as DateIcon } from "@webiny/icons/calendar_month.svg";
 import { FbBuilderFieldPlugin } from "~/types";
+import { Grid, Select } from "@webiny/admin-ui";
 
 const t = i18n.ns("app-headless-cms/admin/fields");
 
@@ -33,22 +32,33 @@ const plugin: FbBuilderFieldPlugin = {
         renderSettings({ form }) {
             const { Bind } = form;
             return (
-                <Grid>
-                    <Cell span={12}>
-                        <Bind name={"settings.format"}>
-                            <Select label={t`Format`} description={t`Cannot be changed later`}>
-                                <option value={t`date`}>{t`Date only`}</option>
-                                <option value={t`time`}>{t`Time only`}</option>
-                                <option
-                                    value={t`dateTimeWithTimezone`}
-                                >{t`Date and time with timezone`}</option>
-                                <option
-                                    value={t`dateTimeWithoutTimezone`}
-                                >{t`Date and time without timezone`}</option>
-                            </Select>
-                        </Bind>
-                    </Cell>
-                </Grid>
+                <Grid.Column span={12}>
+                    <Bind name={"settings.format"}>
+                        <Select
+                            label={t`Format`}
+                            description={t`Cannot be changed later`}
+                            size={"lg"}
+                            options={[
+                                {
+                                    value: "date",
+                                    label: t`Date only`
+                                },
+                                {
+                                    value: "time",
+                                    label: t`Time only`
+                                },
+                                {
+                                    value: "dateTimeWithTimezone",
+                                    label: t`Date and time with timezone`
+                                },
+                                {
+                                    value: "dateTimeWithoutTimezone",
+                                    label: t`Date and time without timezone`
+                                }
+                            ]}
+                        />
+                    </Bind>
+                </Grid.Column>
             );
         }
     }
diff --git a/packages/app-form-builder/src/admin/plugins/editor/formFields/hidden.tsx b/packages/app-form-builder/src/admin/plugins/editor/formFields/hidden.tsx
index dafe154a7eb..68a59efeb19 100644
--- a/packages/app-form-builder/src/admin/plugins/editor/formFields/hidden.tsx
+++ b/packages/app-form-builder/src/admin/plugins/editor/formFields/hidden.tsx
@@ -1,8 +1,7 @@
 import React from "react";
-import { Input } from "@webiny/ui/Input";
-import { Grid, Cell } from "@webiny/ui/Grid";
-import { ReactComponent as HiddenIcon } from "./icons/round-visibility_off-24px.svg";
+import { ReactComponent as HiddenIcon } from "@webiny/icons/visibility_off.svg";
 import { FbBuilderFieldPlugin } from "../../../../types";
+import { Grid, Input } from "@webiny/admin-ui";
 
 const plugin: FbBuilderFieldPlugin = {
     type: "form-editor-field-type",
@@ -27,16 +26,15 @@ const plugin: FbBuilderFieldPlugin = {
         },
         renderSettings({ form: { Bind } }) {
             return (
-                <Grid>
-                    <Cell span={12}>
-                        <Bind name={"settings.defaultValue"}>
-                            <Input
-                                label={"Default value"}
-                                description={"Default value (optional)"}
-                            />
-                        </Bind>
-                    </Cell>
-                </Grid>
+                <Grid.Column span={12}>
+                    <Bind name={"settings.defaultValue"}>
+                        <Input
+                            size={"lg"}
+                            label={"Default value"}
+                            description={"Default value (optional)"}
+                        />
+                    </Bind>
+                </Grid.Column>
             );
         }
     }
diff --git a/packages/app-form-builder/src/admin/plugins/editor/formFields/icons/dropdown-icon.svg b/packages/app-form-builder/src/admin/plugins/editor/formFields/icons/dropdown-icon.svg
deleted file mode 100644
index 18f635c76de..00000000000
--- a/packages/app-form-builder/src/admin/plugins/editor/formFields/icons/dropdown-icon.svg
+++ /dev/null
@@ -1,16 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="815px" height="815px" viewBox="0 0 815 815" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 55.2 (78181) - https://sketchapp.com -->
-    <title>input</title>
-    <desc>Created with Sketch.</desc>
-    <g id="Form-Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Artboard">
-            <g id="input">
-                <polygon id="Path" stroke="none" points="0 0 815 0 815 815 0 815"></polygon>
-                <rect id="Rectangle" stroke="currentColor" stroke-width="50" x="57" y="282" width="700" height="250" rx="8"></rect>
-                <path d="M524,329 L524,503" id="Line" stroke="currentColor" stroke-width="50" stroke-linecap="square"></path>
-                <path d="M594.839903,408.340773 L628.384973,442.178552 C633.436161,447.273816 641.595772,447.273816 646.646961,442.178552 L680.19203,408.340773 C688.351642,400.109962 682.523348,386 670.996278,386 L603.906138,386 C592.379067,386 586.680291,400.109962 594.839903,408.340773 Z" id="Path" fill="currentColor" fill-rule="nonzero"></path>
-            </g>
-        </g>
-    </g>
-</svg>
\ No newline at end of file
diff --git a/packages/app-form-builder/src/admin/plugins/editor/formFields/icons/round-check_box-24px.svg b/packages/app-form-builder/src/admin/plugins/editor/formFields/icons/round-check_box-24px.svg
deleted file mode 100644
index 13a80e04c7b..00000000000
--- a/packages/app-form-builder/src/admin/plugins/editor/formFields/icons/round-check_box-24px.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" viewBox="0 0 24 24">
-    <path fill="none" d="M0 0h24v24H0V0z"/>
-    <path fill="currentColor" d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-8.29 13.29c-.39.39-1.02.39-1.41 0L5.71 12.7c-.39-.39-.39-1.02 0-1.41.39-.39 1.02-.39 1.41 0L10 14.17l6.88-6.88c.39-.39 1.02-.39 1.41 0 .39.39.39 1.02 0 1.41l-7.58 7.59z"/>
-</svg>
\ No newline at end of file
diff --git a/packages/app-form-builder/src/admin/plugins/editor/formFields/icons/round-looks_3-24px.svg b/packages/app-form-builder/src/admin/plugins/editor/formFields/icons/round-looks_3-24px.svg
deleted file mode 100644
index 50ae788fe60..00000000000
--- a/packages/app-form-builder/src/admin/plugins/editor/formFields/icons/round-looks_3-24px.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" viewBox="0 0 24 24">
-    <path fill="none" d="M0 0h24v24H0V0z"/>
-    <path fill="currentColor" d="M19 3H5.01c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2H19c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-3.99 7.5c0 .83-.67 1.5-1.5 1.5.83 0 1.5.67 1.5 1.5V15c0 1.11-.9 2-2 2H10c-.55 0-1-.45-1-1s.45-1 1-1h3.01L13 13h-1c-.55 0-1-.45-1-1s.45-1 1-1h1l.01-2H10c-.55 0-.99-.45-.99-1s.44-1 .99-1h3.01c1.1 0 2 .9 2 2v1.5z"/>
-</svg>
\ No newline at end of file
diff --git a/packages/app-form-builder/src/admin/plugins/editor/formFields/icons/round-radio_button_checked-24px.svg b/packages/app-form-builder/src/admin/plugins/editor/formFields/icons/round-radio_button_checked-24px.svg
deleted file mode 100644
index 7ae6abe30f4..00000000000
--- a/packages/app-form-builder/src/admin/plugins/editor/formFields/icons/round-radio_button_checked-24px.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" viewBox="0 0 24 24">
-    <path fill="none" d="M0 0h24v24H0V0z"/>
-    <path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"/>
-    <circle fill="currentColor" cx="12" cy="12" r="5"/>
-</svg>
\ No newline at end of file
diff --git a/packages/app-form-builder/src/admin/plugins/editor/formFields/icons/round-text_fields-24px.svg b/packages/app-form-builder/src/admin/plugins/editor/formFields/icons/round-text_fields-24px.svg
deleted file mode 100644
index eeb3f6d19b4..00000000000
--- a/packages/app-form-builder/src/admin/plugins/editor/formFields/icons/round-text_fields-24px.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" viewBox="0 0 24 24">
-    <path fill="none" d="M0 0h24v24H0z"/>
-    <path fill="currentColor" d="M2.5 5.5C2.5 6.33 3.17 7 4 7h3.5v10.5c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5V7H14c.83 0 1.5-.67 1.5-1.5S14.83 4 14 4H4c-.83 0-1.5.67-1.5 1.5zM20 9h-6c-.83 0-1.5.67-1.5 1.5S13.17 12 14 12h1.5v5.5c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5V12H20c.83 0 1.5-.67 1.5-1.5S20.83 9 20 9z"/>
-</svg>
\ No newline at end of file
diff --git a/packages/app-form-builder/src/admin/plugins/editor/formFields/icons/round-visibility_off-24px.svg b/packages/app-form-builder/src/admin/plugins/editor/formFields/icons/round-visibility_off-24px.svg
deleted file mode 100644
index 394c2d8eaf7..00000000000
--- a/packages/app-form-builder/src/admin/plugins/editor/formFields/icons/round-visibility_off-24px.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" viewBox="0 0 24 24">
-    <path fill="none" d="M0 0h24v24H0V0zm0 0h24v24H0V0zm0 0h24v24H0V0zm0 0h24v24H0V0z"/>
-    <path fill="currentColor" d="M12 6.5c2.76 0 5 2.24 5 5 0 .51-.1 1-.24 1.46l3.06 3.06c1.39-1.23 2.49-2.77 3.18-4.53C21.27 7.11 17 4 12 4c-1.27 0-2.49.2-3.64.57l2.17 2.17c.47-.14.96-.24 1.47-.24zM2.71 3.16c-.39.39-.39 1.02 0 1.41l1.97 1.97C3.06 7.83 1.77 9.53 1 11.5 2.73 15.89 7 19 12 19c1.52 0 2.97-.3 4.31-.82l2.72 2.72c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L4.13 3.16c-.39-.39-1.03-.39-1.42 0zM12 16.5c-2.76 0-5-2.24-5-5 0-.77.18-1.5.49-2.14l1.57 1.57c-.03.18-.06.37-.06.57 0 1.66 1.34 3 3 3 .2 0 .38-.03.57-.07L14.14 16c-.65.32-1.37.5-2.14.5zm2.97-5.33c-.15-1.4-1.25-2.49-2.64-2.64l2.64 2.64z"/>
-</svg>
\ No newline at end of file
diff --git a/packages/app-form-builder/src/admin/plugins/editor/formFields/number.tsx b/packages/app-form-builder/src/admin/plugins/editor/formFields/number.tsx
index 74a3f0f1be9..7e04a912a37 100644
--- a/packages/app-form-builder/src/admin/plugins/editor/formFields/number.tsx
+++ b/packages/app-form-builder/src/admin/plugins/editor/formFields/number.tsx
@@ -1,7 +1,6 @@
 import React from "react";
-import { ReactComponent as NumberIcon } from "./icons/round-looks_3-24px.svg";
-import { Grid, Cell } from "@webiny/ui/Grid";
-import { Input } from "@webiny/ui/Input";
+import { ReactComponent as NumberIcon } from "@webiny/icons/looks_3.svg";
+import { Grid, Input } from "@webiny/admin-ui";
 import { FbBuilderFieldPlugin } from "../../../../types";
 
 const plugin: FbBuilderFieldPlugin = {
@@ -29,16 +28,15 @@ const plugin: FbBuilderFieldPlugin = {
         renderSettings({ form: { Bind } }) {
             // TODO: @ts-adrian: spread Bind komponente na donju komponentu
             return (
-                <Grid>
-                    <Cell span={12}>
-                        <Bind name={"placeholderText"}>
-                            <Input
-                                label={"Placeholder text"}
-                                description={"Placeholder text (optional)"}
-                            />
-                        </Bind>
-                    </Cell>
-                </Grid>
+                <Grid.Column span={12}>
+                    <Bind name={"placeholderText"}>
+                        <Input
+                            size={"lg"}
+                            label={"Placeholder text"}
+                            description={"Placeholder text (optional)"}
+                        />
+                    </Bind>
+                </Grid.Column>
             );
         }
     }
diff --git a/packages/app-form-builder/src/admin/plugins/editor/formFields/radioButtons.tsx b/packages/app-form-builder/src/admin/plugins/editor/formFields/radioButtons.tsx
index d000b488fbc..cf113e76433 100644
--- a/packages/app-form-builder/src/admin/plugins/editor/formFields/radioButtons.tsx
+++ b/packages/app-form-builder/src/admin/plugins/editor/formFields/radioButtons.tsx
@@ -1,6 +1,6 @@
 import React from "react";
-import { Grid, Cell } from "@webiny/ui/Grid";
-import { ReactComponent as Icon } from "./icons/round-radio_button_checked-24px.svg";
+import { ReactComponent as Icon } from "@webiny/icons/radio_button_checked.svg";
+import { Grid } from "@webiny/admin-ui";
 import OptionsList from "./components/OptionsList";
 import { FbBuilderFieldPlugin } from "~/types";
 
@@ -29,11 +29,9 @@ const plugin: FbBuilderFieldPlugin = {
         },
         renderSettings({ form }) {
             return (
-                <Grid>
-                    <Cell span={12}>
-                        <OptionsList form={form} otherOption />
-                    </Cell>
-                </Grid>
+                <Grid.Column span={12}>
+                    <OptionsList form={form} otherOption />
+                </Grid.Column>
             );
         }
     }
diff --git a/packages/app-form-builder/src/admin/plugins/editor/formFields/select.tsx b/packages/app-form-builder/src/admin/plugins/editor/formFields/select.tsx
index 473a68e29d9..9b60be13fea 100644
--- a/packages/app-form-builder/src/admin/plugins/editor/formFields/select.tsx
+++ b/packages/app-form-builder/src/admin/plugins/editor/formFields/select.tsx
@@ -1,9 +1,8 @@
 import React from "react";
-import { Grid, Cell } from "@webiny/ui/Grid";
-import { ReactComponent as Icon } from "./icons/dropdown-icon.svg";
+import { ReactComponent as Icon } from "@webiny/icons/list.svg";
 import OptionsList from "./components/OptionsList";
-import { Input } from "@webiny/ui/Input";
 import { FbBuilderFieldPlugin } from "~/types";
+import { Grid, Input } from "@webiny/admin-ui";
 
 const plugin: FbBuilderFieldPlugin = {
     type: "form-editor-field-type",
@@ -31,19 +30,20 @@ const plugin: FbBuilderFieldPlugin = {
             const { Bind } = form;
             // TODO: @ts-adrian: spread Bind komponente na donju komponentu
             return (
-                <Grid>
-                    <Cell span={12}>
+                <>
+                    <Grid.Column span={12}>
                         <Bind name={"placeholderText"}>
                             <Input
+                                size={"lg"}
                                 label={"Placeholder text"}
                                 description={"Placeholder text (optional)"}
                             />
                         </Bind>
-                    </Cell>
-                    <Cell span={12}>
+                    </Grid.Column>
+                    <Grid.Column span={12}>
                         <OptionsList form={form} />
-                    </Cell>
-                </Grid>
+                    </Grid.Column>
+                </>
             );
         }
     }
diff --git a/packages/app-form-builder/src/admin/plugins/editor/formFields/text.tsx b/packages/app-form-builder/src/admin/plugins/editor/formFields/text.tsx
index f6f702fba4b..d889265bb3f 100644
--- a/packages/app-form-builder/src/admin/plugins/editor/formFields/text.tsx
+++ b/packages/app-form-builder/src/admin/plugins/editor/formFields/text.tsx
@@ -1,7 +1,6 @@
 import React from "react";
-import { ReactComponent as TextIcon } from "./icons/round-text_fields-24px.svg";
-import { Grid, Cell } from "@webiny/ui/Grid";
-import { Input } from "@webiny/ui/Input";
+import { ReactComponent as TextIcon } from "@webiny/icons/text_fields.svg";
+import { Grid, Input } from "@webiny/admin-ui";
 import { FbBuilderFieldPlugin } from "../../../../types";
 
 const plugin: FbBuilderFieldPlugin = {
@@ -28,24 +27,26 @@ const plugin: FbBuilderFieldPlugin = {
         },
         renderSettings({ form: { Bind } }) {
             return (
-                <Grid>
-                    <Cell span={12}>
+                <>
+                    <Grid.Column span={12}>
                         <Bind name={"placeholderText"}>
                             <Input
+                                size={"lg"}
                                 label={"Placeholder text"}
                                 description={"Placeholder text (optional)"}
                             />
                         </Bind>
-                    </Cell>
-                    <Cell span={12}>
+                    </Grid.Column>
+                    <Grid.Column span={12}>
                         <Bind name={"settings.defaultValue"}>
                             <Input
+                                size={"lg"}
                                 label={"Default value"}
                                 description={"Default value (optional)"}
                             />
                         </Bind>
-                    </Cell>
-                </Grid>
+                    </Grid.Column>
+                </>
             );
         }
     }
diff --git a/packages/app-form-builder/src/admin/plugins/editor/formFields/textarea.tsx b/packages/app-form-builder/src/admin/plugins/editor/formFields/textarea.tsx
index 5ef2bdf0545..f53f10d22cd 100644
--- a/packages/app-form-builder/src/admin/plugins/editor/formFields/textarea.tsx
+++ b/packages/app-form-builder/src/admin/plugins/editor/formFields/textarea.tsx
@@ -1,7 +1,6 @@
 import React from "react";
-import { ReactComponent as TextIcon } from "./icons/round-text_fields-24px.svg";
-import { Grid, Cell } from "@webiny/ui/Grid";
-import { Input } from "@webiny/ui/Input";
+import { ReactComponent as TextIcon } from "@webiny/icons/text_fields.svg";
+import { Grid, Input, Textarea } from "@webiny/admin-ui";
 import { FbBuilderFieldPlugin } from "../../../../types";
 
 const plugin: FbBuilderFieldPlugin = {
@@ -28,34 +27,37 @@ const plugin: FbBuilderFieldPlugin = {
         },
         renderSettings({ form: { Bind } }) {
             return (
-                <Grid>
-                    <Cell span={12}>
+                <>
+                    <Grid.Column span={12}>
                         <Bind name={"placeholderText"}>
                             <Input
+                                size={"lg"}
                                 label={"Placeholder text"}
                                 description={"Placeholder text (optional)"}
                             />
                         </Bind>
-                    </Cell>
-                    <Cell span={12}>
+                    </Grid.Column>
+                    <Grid.Column span={12}>
                         <Bind name={"settings.defaultValue"}>
-                            <Input
+                            <Textarea
+                                size={"lg"}
                                 rows={4}
                                 label={"Default value"}
                                 description={"Default value (optional)"}
                             />
                         </Bind>
-                    </Cell>
-                    <Cell span={12}>
+                    </Grid.Column>
+                    <Grid.Column span={12}>
                         <Bind name={"settings.rows"}>
                             <Input
+                                size={"lg"}
                                 type={"number"}
                                 label={"Text area rows"}
                                 description={"Default value (optional)"}
                             />
                         </Bind>
-                    </Cell>
-                </Grid>
+                    </Grid.Column>
+                </>
             );
         }
     }
diff --git a/packages/app-form-builder/src/admin/plugins/editor/triggers/emailNotification.tsx b/packages/app-form-builder/src/admin/plugins/editor/triggers/emailNotification.tsx
index b38cdef6222..ad13d2fc5d9 100644
--- a/packages/app-form-builder/src/admin/plugins/editor/triggers/emailNotification.tsx
+++ b/packages/app-form-builder/src/admin/plugins/editor/triggers/emailNotification.tsx
@@ -4,7 +4,7 @@ import { Input } from "@webiny/ui/Input";
 import { ButtonPrimary } from "@webiny/ui/Button";
 import { i18n } from "@webiny/app/i18n";
 import { validation } from "@webiny/validation";
-import { ReactComponent as EmailIcon } from "@material-symbols/svg-400/outlined/mark_email_unread.svg";
+import { ReactComponent as EmailIcon } from "@webiny/icons/mark_email_unread.svg";
 import { FbEditorTrigger } from "~/types";
 
 const t = i18n.namespace("FormsApp.Editor.EmailNotificationTriggerSettings");
diff --git a/packages/app-form-builder/src/admin/plugins/editor/triggers/emailThanks.tsx b/packages/app-form-builder/src/admin/plugins/editor/triggers/emailThanks.tsx
index 1f65d270f5d..d63ddf0eb6b 100644
--- a/packages/app-form-builder/src/admin/plugins/editor/triggers/emailThanks.tsx
+++ b/packages/app-form-builder/src/admin/plugins/editor/triggers/emailThanks.tsx
@@ -4,7 +4,7 @@ import { Input } from "@webiny/ui/Input";
 import { ButtonPrimary } from "@webiny/ui/Button";
 import { Alert } from "@webiny/ui/Alert";
 import { i18n } from "@webiny/app/i18n";
-import { ReactComponent as EmailIcon } from "@material-symbols/svg-400/outlined/send.svg";
+import { ReactComponent as EmailIcon } from "@webiny/icons/send.svg";
 import { FbEditorTrigger } from "~/types";
 
 const t = i18n.namespace("FormsApp.Editor.EmailThanksTriggerSettings");
diff --git a/packages/app-form-builder/src/admin/plugins/editor/triggers/googleAnalyticsEvent.tsx b/packages/app-form-builder/src/admin/plugins/editor/triggers/googleAnalyticsEvent.tsx
index 623dabdd6d4..a1a1d459bd3 100644
--- a/packages/app-form-builder/src/admin/plugins/editor/triggers/googleAnalyticsEvent.tsx
+++ b/packages/app-form-builder/src/admin/plugins/editor/triggers/googleAnalyticsEvent.tsx
@@ -4,7 +4,7 @@ import { Input } from "@webiny/ui/Input";
 import { ButtonPrimary } from "@webiny/ui/Button";
 import { Typography } from "@webiny/ui/Typography";
 import { i18n } from "@webiny/app/i18n";
-import { ReactComponent as InsightsIcon } from "@material-symbols/svg-400/outlined/insights.svg";
+import { ReactComponent as InsightsIcon } from "@webiny/icons/insights.svg";
 import GoogleAnalyticsEventDynamicFieldset from "./components/GoogleAnalyticsEventDynamicFieldset";
 import { FbEditorTrigger } from "~/types";
 
diff --git a/packages/app-form-builder/src/admin/plugins/formDetails/formRevisions/Revision.tsx b/packages/app-form-builder/src/admin/plugins/formDetails/formRevisions/Revision.tsx
index bd1db10039a..f2c0fcfa828 100644
--- a/packages/app-form-builder/src/admin/plugins/formDetails/formRevisions/Revision.tsx
+++ b/packages/app-form-builder/src/admin/plugins/formDetails/formRevisions/Revision.tsx
@@ -1,55 +1,36 @@
-import React from "react";
-import { css } from "emotion";
-import { TimeAgo } from "@webiny/ui/TimeAgo";
-import {
-    ListItem,
-    ListItemText,
-    ListItemTextPrimary,
-    ListItemTextSecondary,
-    ListItemGraphic,
-    ListItemMeta
-} from "@webiny/ui/List";
-import { IconButton } from "@webiny/ui/Button";
-import { Icon } from "@webiny/ui/Icon";
-import { MenuItem, Menu, MenuDivider } from "@webiny/ui/Menu";
+import React, { useMemo } from "react";
 import { ConfirmationDialog } from "@webiny/ui/ConfirmationDialog";
-import { Tooltip } from "@webiny/ui/Tooltip";
-import { ReactComponent as AddIcon } from "../../../icons/add.svg";
-import { ReactComponent as BeenHereIcon } from "../../../icons/beenhere.svg";
-import { ReactComponent as DeleteIcon } from "../../../icons/delete.svg";
-import { ReactComponent as EditIcon } from "../../../icons/edit.svg";
-import { ReactComponent as GestureIcon } from "../../../icons/gesture.svg";
-import { ReactComponent as LockIcon } from "../../../icons/lock.svg";
-import { ReactComponent as MoreVerticalIcon } from "../../../icons/more_vert.svg";
-import { ReactComponent as PublishIcon } from "../../../icons/publish.svg";
-import { ReactComponent as UnpublishIcon } from "../../../icons/unpublish.svg";
+import { ReactComponent as AddIcon } from "@webiny/icons/add.svg";
+import { ReactComponent as BeenHereIcon } from "@webiny/icons/beenhere.svg";
+import { ReactComponent as DeleteIcon } from "@webiny/icons/delete.svg";
+import { ReactComponent as EditIcon } from "@webiny/icons/edit.svg";
+import { ReactComponent as GestureIcon } from "@webiny/icons/gesture.svg";
+import { ReactComponent as LockIcon } from "@webiny/icons/lock.svg";
+import { ReactComponent as MoreVerticalIcon } from "@webiny/icons/more_vert.svg";
+import { ReactComponent as PublishIcon } from "@webiny/icons/visibility.svg";
+import { ReactComponent as UnpublishIcon } from "@webiny/icons/visibility_off.svg";
 import { useRevision } from "./useRevision";
 import { FbFormModel, FbRevisionModel } from "~/types";
 import { usePermission } from "~/hooks/usePermission";
-
-const primaryColor = css({ color: "var(--mdc-theme-primary)" });
-
-const revisionsMenu = css({
-    width: 250,
-    right: -105,
-    left: "auto !important"
-});
+import { DropdownMenu, Icon, IconButton, List, TimeAgo, Tooltip } from "@webiny/admin-ui";
 
 const getIcon = (revision: Pick<FbFormModel, "status">) => {
     switch (revision.status) {
         case "locked":
             return {
-                icon: <Icon icon={<LockIcon />} />,
+                icon: <Icon label={"Locked revision"} icon={<LockIcon />} />,
                 text: "This revision is locked (it has already been published)"
             };
         case "published":
             return {
-                icon: <Icon icon={<BeenHereIcon />} className={primaryColor} />,
+                icon: (
+                    <Icon label={"Published revision"} icon={<BeenHereIcon />} color={"accent"} />
+                ),
                 text: "This revision is currently published!"
             };
         default:
             return {
-                icon: <Icon icon={<GestureIcon />} />,
+                icon: <Icon label={"Draft revision"} icon={<GestureIcon />} />,
                 text: "This is a draft"
             };
     }
@@ -72,113 +53,122 @@ const Revision = (props: RevisionProps) => {
 
     const showMenu = canUpdate(form) || canDelete(form) || canPublish() || canUnpublish();
 
-    return (
-        <ListItem>
-            <ListItemGraphic>
-                <Tooltip content={tooltipText} placement={"bottom"}>
-                    {icon}
-                </Tooltip>
-            </ListItemGraphic>
-            <ListItemText>
-                <ListItemTextPrimary>{revision.name}</ListItemTextPrimary>
-                <ListItemTextSecondary>
-                    Last modified <TimeAgo datetime={revision.savedOn} /> (#
-                    {revision.version})
-                </ListItemTextSecondary>
-            </ListItemText>
-            {showMenu && (
-                <ListItemMeta>
-                    <Menu
-                        handle={<IconButton icon={<MoreVerticalIcon />} />}
-                        className={revisionsMenu}
-                        data-testid={"fb.form-revisions.action-menu"}
-                    >
-                        {canUpdate(form) && (
-                            <MenuItem
-                                onClick={() => createRevision()}
-                                data-testid={"fb.form-revisions.action-menu.create-revision"}
-                            >
-                                <ListItemGraphic>
-                                    <Icon icon={<AddIcon />} />
-                                </ListItemGraphic>
-                                New from current
-                            </MenuItem>
-                        )}
-                        {revision.status === "draft" && canUpdate(form) && (
-                            <MenuItem
-                                onClick={() => editRevision(revision.id)}
-                                data-testid={"fb.form-revisions.action-menu.edit"}
-                            >
-                                <ListItemGraphic>
-                                    <Icon icon={<EditIcon />} />
-                                </ListItemGraphic>
-                                Edit
-                            </MenuItem>
-                        )}
+    const description = useMemo(() => {
+        return (
+            <>
+                Last modified <TimeAgo datetime={revision.savedOn} /> (#{revision.version})
+            </>
+        );
+    }, [revision]);
 
-                        {revision.status !== "published" && canPublish() && (
-                            <MenuItem
-                                onClick={() => publishRevision(revision.id)}
-                                data-testid={"fb.form-revisions.action-menu.publish"}
-                            >
-                                <ListItemGraphic>
-                                    <Icon icon={<PublishIcon />} />
-                                </ListItemGraphic>
-                                Publish
-                            </MenuItem>
-                        )}
+    const actions = useMemo(() => {
+        if (!showMenu) {
+            return null;
+        }
 
-                        {revision.status === "published" && canUnpublish() && (
-                            <ConfirmationDialog
-                                title="Confirmation required!"
-                                message={
-                                    <span>Are you sure you want to unpublish this revision?</span>
-                                }
-                            >
-                                {({ showConfirmation }) => (
-                                    <MenuItem
-                                        onClick={() =>
-                                            showConfirmation(() => unpublishRevision(revision.id))
-                                        }
-                                        data-testid={"fb.form-revisions.action-menu.unpublish"}
-                                    >
-                                        <ListItemGraphic>
-                                            <Icon icon={<UnpublishIcon />} />
-                                        </ListItemGraphic>
-                                        Unpublish
-                                    </MenuItem>
-                                )}
-                            </ConfirmationDialog>
-                        )}
+        return (
+            <DropdownMenu
+                trigger={
+                    <IconButton
+                        variant={"ghost"}
+                        size={"sm"}
+                        iconSize={"lg"}
+                        icon={<MoreVerticalIcon />}
+                    />
+                }
+            >
+                {canUpdate(form) && (
+                    <DropdownMenu.Item
+                        icon={<AddIcon />}
+                        text={"New from current"}
+                        onClick={() => createRevision()}
+                        data-testid={"fb.form-revisions.action-menu.create-revision"}
+                    />
+                )}
 
-                        <MenuDivider />
+                {revision.status === "draft" && canUpdate(form) && (
+                    <DropdownMenu.Item
+                        icon={<EditIcon />}
+                        text={"Edit"}
+                        onClick={() => editRevision(revision.id)}
+                        data-testid={"fb.form-revisions.action-menu.edit"}
+                    />
+                )}
 
-                        {canDelete(form) && (
-                            <ConfirmationDialog
-                                title="Confirmation required!"
-                                message={
-                                    <span>Are you sure you want to delete this revision?</span>
+                {revision.status !== "published" && canPublish() && (
+                    <DropdownMenu.Item
+                        icon={<PublishIcon />}
+                        text={"Publish"}
+                        onClick={() => publishRevision(revision.id)}
+                        data-testid={"fb.form-revisions.action-menu.publish"}
+                    />
+                )}
+
+                {revision.status === "published" && canUnpublish() && (
+                    <ConfirmationDialog
+                        title="Confirmation required!"
+                        message={<span>Are you sure you want to unpublish this revision?</span>}
+                    >
+                        {({ showConfirmation }) => (
+                            <DropdownMenu.Item
+                                icon={<UnpublishIcon />}
+                                text={"Unpublish"}
+                                onClick={() =>
+                                    showConfirmation(() => unpublishRevision(revision.id))
                                 }
-                            >
-                                {({ showConfirmation }) => (
-                                    <MenuItem
-                                        onClick={() =>
-                                            showConfirmation(() => deleteRevision(revision.id))
-                                        }
-                                        data-testid={"fb.form-revisions.action-menu.delete"}
-                                    >
-                                        <ListItemGraphic>
-                                            <Icon icon={<DeleteIcon />} />
-                                        </ListItemGraphic>
-                                        Delete
-                                    </MenuItem>
-                                )}
-                            </ConfirmationDialog>
+                                data-testid={"fb.form-revisions.action-menu.unpublish"}
+                            />
                         )}
-                    </Menu>
-                </ListItemMeta>
-            )}
-        </ListItem>
+                    </ConfirmationDialog>
+                )}
+
+                {canDelete(form) && (
+                    <>
+                        <DropdownMenu.Separator />
+                        <ConfirmationDialog
+                            title="Confirmation required!"
+                            message={<span>Are you sure you want to delete this revision?</span>}
+                        >
+                            {({ showConfirmation }) => (
+                                <DropdownMenu.Item
+                                    icon={<DeleteIcon />}
+                                    text={"Delete"}
+                                    onClick={() =>
+                                        showConfirmation(() => deleteRevision(revision.id))
+                                    }
+                                    data-testid={"fb.form-revisions.action-menu.delete"}
+                                    className={
+                                        "!wby-text-destructive-primary [&_svg]:wby-fill-destructive"
+                                    }
+                                />
+                            )}
+                        </ConfirmationDialog>
+                    </>
+                )}
+            </DropdownMenu>
+        );
+    }, [
+        showMenu,
+        canUpdate,
+        canDelete,
+        createRevision,
+        editRevision,
+        deleteRevision,
+        publishRevision,
+        unpublishRevision,
+        revision,
+        canPublish,
+        canUnpublish,
+        form
+    ]);
+
+    return (
+        <List.Item
+            icon={<Tooltip content={tooltipText} trigger={icon} />}
+            title={revision.name}
+            description={description}
+            actions={actions}
+        />
     );
 };
 
diff --git a/packages/app-form-builder/src/admin/plugins/formDetails/formRevisions/RevisionsList.tsx b/packages/app-form-builder/src/admin/plugins/formDetails/formRevisions/RevisionsList.tsx
index dc039f502ae..2edab15ce15 100644
--- a/packages/app-form-builder/src/admin/plugins/formDetails/formRevisions/RevisionsList.tsx
+++ b/packages/app-form-builder/src/admin/plugins/formDetails/formRevisions/RevisionsList.tsx
@@ -1,48 +1,30 @@
 import React from "react";
-import { List } from "@webiny/ui/List";
 import Revision from "./Revision";
-import { Elevation } from "@webiny/ui/Elevation";
-import { css } from "emotion";
-import { CircularProgress } from "@webiny/ui/Progress";
 import { FbFormModel, FbRevisionModel } from "~/types";
-
-const listWrapper = css({
-    margin: 25,
-    display: "flex",
-    flexDirection: "column",
-    overflow: "auto",
-    maxHeight: "calc(100vh - 160px)",
-    ".mdc-deprecated-list .mdc-deprecated-list-item": {
-        borderBottom: "1px solid var(--mdc-theme-on-background)"
-    },
-    ".mdc-deprecated-list .mdc-deprecated-list-item:last-child": {
-        borderBottom: "none"
-    }
-});
+import { SimpleForm } from "@webiny/app-admin/components/SimpleForm";
+import { List, OverlayLoader } from "@webiny/admin-ui";
 
 interface RevisionsListProps {
     form: FbFormModel | null;
     revisions: FbRevisionModel[];
     loading: boolean;
 }
+
 export const RevisionsList = ({ form, revisions, loading }: RevisionsListProps) => {
     if (!form) {
         return null;
     }
+
     return (
-        <Elevation className={listWrapper} z={2}>
-            <div style={{ position: "relative" }}>
-                {loading && <CircularProgress />}
-                <List
-                    nonInteractive
-                    twoLine
-                    data-testid={"fb.form-details.tab.revisions.content-list"}
-                >
+        <div className={"wby-relative"}>
+            {loading && <OverlayLoader text="Loading revisions..." />}
+            <SimpleForm size={"full"} className={"wby-p-none"}>
+                <List data-testid={"fb.form-details.tab.revisions.content-list"}>
                     {Array.isArray(revisions)
                         ? revisions.map(rev => <Revision form={form} revision={rev} key={rev.id} />)
                         : null}
                 </List>
-            </div>
-        </Elevation>
+            </SimpleForm>
+        </div>
     );
 };
diff --git a/packages/app-form-builder/src/admin/plugins/formDetails/formRevisions/index.tsx b/packages/app-form-builder/src/admin/plugins/formDetails/formRevisions/index.tsx
index b89e52bc814..56b70e9fbd2 100644
--- a/packages/app-form-builder/src/admin/plugins/formDetails/formRevisions/index.tsx
+++ b/packages/app-form-builder/src/admin/plugins/formDetails/formRevisions/index.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import { FbFormDetailsPluginType } from "~/types";
-import { Tab } from "@webiny/ui/Tabs";
+import { Tabs } from "@webiny/admin-ui";
+import { ReactComponent as RestoreIcon } from "@webiny/icons/restore.svg";
 import { RevisionsList } from "./RevisionsList";
 
 const plugin: FbFormDetailsPluginType = {
@@ -8,13 +9,14 @@ const plugin: FbFormDetailsPluginType = {
     type: "forms-form-details-revision-content",
     render({ form, revisions, loading }) {
         return (
-            <Tab
-                label={"Revisions"}
+            <Tabs.Tab
+                value={"revisions"}
+                trigger={"Revisions"}
+                icon={<RestoreIcon />}
+                content={<RevisionsList form={form} revisions={revisions} loading={loading} />}
                 disabled={loading}
                 data-testid={"fb.form-details.tab.revisions"}
-            >
-                <RevisionsList form={form} revisions={revisions} loading={loading} />
-            </Tab>
+            />
         );
     }
 };
diff --git a/packages/app-form-builder/src/admin/plugins/formDetails/formSubmissions/Block.tsx b/packages/app-form-builder/src/admin/plugins/formDetails/formSubmissions/Block.tsx
deleted file mode 100644
index 26aaa2cc24c..00000000000
--- a/packages/app-form-builder/src/admin/plugins/formDetails/formSubmissions/Block.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import * as React from "react";
-import styled from "@emotion/styled";
-import { css } from "emotion";
-import { Typography } from "@webiny/ui/Typography";
-import { Elevation } from "@webiny/ui/Elevation";
-
-const BlockWrapper = styled("div")({
-    padding: "0 0 25px 0"
-});
-
-const titleStyle = css({
-    display: "flex",
-    alignItems: "center",
-    color: "var(--mdc-theme-on-surface)",
-    ".tooltip-content-wrapper": {
-        lineHeight: "100%",
-        svg: {
-            height: 13,
-            color: "var(--mdc-theme-on-surface)"
-        }
-    }
-});
-
-const ElevationContent = styled("div")({
-    padding: 20
-});
-
-interface BlockProps {
-    title: string;
-    className?: string;
-    children: React.ReactNode;
-}
-const Block = ({ children, title, ...props }: BlockProps) => {
-    return (
-        <BlockWrapper {...props}>
-            <h4>
-                <Typography className={titleStyle} use={"overline"}>
-                    {title}
-                </Typography>
-            </h4>
-
-            <Elevation z={2}>
-                <ElevationContent>{children}</ElevationContent>
-            </Elevation>
-        </BlockWrapper>
-    );
-};
-
-export default Block;
diff --git a/packages/app-form-builder/src/admin/plugins/formDetails/formSubmissions/FormSubmissionsList/FormSubmissionDialog.tsx b/packages/app-form-builder/src/admin/plugins/formDetails/formSubmissions/FormSubmissionsList/FormSubmissionDialog.tsx
index 2be1959b8dc..d7bdef1627e 100644
--- a/packages/app-form-builder/src/admin/plugins/formDetails/formSubmissions/FormSubmissionsList/FormSubmissionDialog.tsx
+++ b/packages/app-form-builder/src/admin/plugins/formDetails/formSubmissions/FormSubmissionsList/FormSubmissionDialog.tsx
@@ -7,8 +7,8 @@ import { Tooltip } from "@webiny/ui/Tooltip";
 import { Dialog, DialogContent, DialogTitle, DialogCancel, DialogActions } from "@webiny/ui/Dialog";
 import { i18n } from "@webiny/app/i18n";
 import { useSnackbar } from "@webiny/app-admin";
-import { ReactComponent as ObjectIcon } from "@material-design-icons/svg/outlined/data_object.svg";
-import { ReactComponent as TableIcon } from "@material-design-icons/svg/outlined/table_rows.svg";
+import { ReactComponent as ObjectIcon } from "@webiny/icons/data_object.svg";
+import { ReactComponent as TableIcon } from "@webiny/icons/table_rows.svg";
 import { FbFormModelField, FbFormSubmissionData } from "~/types";
 
 const t = i18n.namespace("FormEditor.FormSubmissionDialog");
diff --git a/packages/app-form-builder/src/admin/plugins/formDetails/formSubmissions/FormSubmissionsList/FormSubmissionsList.tsx b/packages/app-form-builder/src/admin/plugins/formDetails/formSubmissions/FormSubmissionsList/FormSubmissionsList.tsx
index 43098421118..8d6740f19a9 100644
--- a/packages/app-form-builder/src/admin/plugins/formDetails/formSubmissions/FormSubmissionsList/FormSubmissionsList.tsx
+++ b/packages/app-form-builder/src/admin/plugins/formDetails/formSubmissions/FormSubmissionsList/FormSubmissionsList.tsx
@@ -1,31 +1,19 @@
 import React, { useState } from "react";
 import { TimeAgo } from "@webiny/ui/TimeAgo";
-import { css } from "emotion";
 import styled from "@emotion/styled";
 import { i18n } from "@webiny/app/i18n";
 import * as ListComponents from "@webiny/ui/List";
 import { Tooltip } from "@webiny/ui/Tooltip";
-import { IconButton } from "@webiny/ui/Button";
 import { Typography } from "@webiny/ui/Typography";
 import { Scrollbar } from "@webiny/ui/Scrollbar";
 import FormSubmissionDialog from "./FormSubmissionDialog";
-import { ReactComponent as ImportExport } from "./icons/round-cloud_download-24px.svg";
-import Block from "../Block";
 import { useSubmissions } from "./useSubmissions";
 import { FbFormSubmissionData } from "~/types";
+import { DownloadIcon } from "@webiny/ui/List";
+import { SimpleFormContent, SimpleFormHeader } from "@webiny/app-admin/components/SimpleForm";
 
 const t = i18n.namespace("FormsApp.FormsDataList");
 
-const TOP = 490;
-const blockWrapper = css({
-    "& .webiny-data-list__content": {
-        height: `calc(100vh - ${TOP}px)`
-    }
-});
-const rightAlign = css({
-    alignItems: "flex-end !important"
-});
-
 const InlineLoaderWrapper = styled.div`
     position: absolute;
     bottom: 0;
@@ -63,7 +51,8 @@ interface FormSubmissionsListProps {
     };
 }
 
-const { DataList, ListItem, ListItemMeta, ListItemText, ListTextOverline } = ListComponents;
+const { DataList, ListItem, ListItemText, ListItemTextPrimary, ListItemTextSecondary } =
+    ListComponents;
 
 export const FormSubmissionsList = ({ form }: FormSubmissionsListProps) => {
     const {
@@ -83,7 +72,12 @@ export const FormSubmissionsList = ({ form }: FormSubmissionsListProps) => {
 
     return (
         <>
-            <Block title="Submissions" className={blockWrapper}>
+            <SimpleFormHeader title={"Submissions"} rounded={false} />
+            <SimpleFormContent
+                className={
+                    "wby-p-none wby-border-b-sm wby-border-neutral-dimmed-darker wby-rounded-b-3xl"
+                }
+            >
                 <DataList
                     loading={loading}
                     refresh={refresh}
@@ -92,10 +86,10 @@ export const FormSubmissionsList = ({ form }: FormSubmissionsListProps) => {
                     multiSelectAll={undefined}
                     multiSelectActions={
                         <Tooltip content={t`Export all form submissions`} placement={"bottom"}>
-                            <IconButton
-                                icon={<ImportExport />}
+                            <DownloadIcon
                                 onClick={exportSubmissions}
                                 disabled={exportInProgress}
+                                size={"md"}
                             />
                         </Tooltip>
                     }
@@ -120,22 +114,25 @@ export const FormSubmissionsList = ({ form }: FormSubmissionsListProps) => {
                                             <ListItemText
                                                 onClick={() => selectFormSubmission(submission)}
                                             >
-                                                <FullName submission={submission} />
-                                                <ListTextOverline>
-                                                    Visitor IP:{" "}
-                                                    {(submission.meta && submission.meta.ip) ||
-                                                        "N/A"}
-                                                </ListTextOverline>
+                                                <ListItemTextPrimary>
+                                                    <FullName submission={submission} />
+                                                </ListItemTextPrimary>
+                                                <ListItemTextSecondary>
+                                                    <div>
+                                                        Visitor IP:{" "}
+                                                        {(submission.meta && submission.meta.ip) ||
+                                                            "N/A"}
+                                                    </div>
+                                                    <div>
+                                                        {t`Submitted: {time}.`({
+                                                            time: <TimeAgo datetime={submittedOn} />
+                                                        })}
+                                                    </div>
+                                                    <div>
+                                                        <FormVersion submission={submission} />
+                                                    </div>
+                                                </ListItemTextSecondary>
                                             </ListItemText>
-                                            <ListItemMeta className={rightAlign}>
-                                                <Typography use={"body2"}>
-                                                    {t`Submitted: {time}.`({
-                                                        time: <TimeAgo datetime={submittedOn} />
-                                                    })}
-                                                    <br />
-                                                    <FormVersion submission={submission} />
-                                                </Typography>
-                                            </ListItemMeta>
                                         </ListItem>
                                     );
                                 })}
@@ -150,7 +147,7 @@ export const FormSubmissionsList = ({ form }: FormSubmissionsListProps) => {
                         </>
                     )}
                 </DataList>
-            </Block>
+            </SimpleFormContent>
             <FormSubmissionDialog
                 onClose={() => {
                     selectFormSubmission(null);
diff --git a/packages/app-form-builder/src/admin/plugins/formDetails/formSubmissions/FormSubmissionsOverview.tsx b/packages/app-form-builder/src/admin/plugins/formDetails/formSubmissions/FormSubmissionsOverview.tsx
index d9eab8deb4c..a6c1331dae0 100644
--- a/packages/app-form-builder/src/admin/plugins/formDetails/formSubmissions/FormSubmissionsOverview.tsx
+++ b/packages/app-form-builder/src/admin/plugins/formDetails/formSubmissions/FormSubmissionsOverview.tsx
@@ -1,46 +1,58 @@
 import * as React from "react";
-import Block from "./Block";
-import { Typography } from "@webiny/ui/Typography";
-import styled from "@emotion/styled";
+import { cn, Heading, Text } from "@webiny/admin-ui";
+import { SimpleFormContent, SimpleFormHeader } from "@webiny/app-admin/components/SimpleForm";
 import { FbFormModel } from "~/types";
 
 interface FormSubmissionsOverviewProps {
     form: FbFormModel;
 }
 
-const StatBox = styled("div")({
-    width: "33.33%",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    flexDirection: "column",
-    color: "var(--mdc-theme-on-surface)"
-});
+const ContentWrapper = ({
+    children,
+    className,
+    ...props
+}: React.HTMLAttributes<HTMLDivElement>) => {
+    return (
+        <div className={cn("wby-flex wby-items-center wby-justify-center", className)} {...props}>
+            {children}
+        </div>
+    );
+};
 
-const ContentWrapper = styled("div")({
-    flexDirection: "row",
-    display: "flex",
-    width: "100%",
-    boxSizing: "border-box"
-});
+const StatBox = ({ children, className, ...props }: React.HTMLAttributes<HTMLDivElement>) => {
+    return (
+        <div
+            className={cn(
+                "wby-flex wby-items-center wby-justify-center wby-flex-col wby-w-1/3",
+                className
+            )}
+            {...props}
+        >
+            {children}
+        </div>
+    );
+};
 
 export const FormSubmissionsOverview = ({ form }: FormSubmissionsOverviewProps) => {
     return (
-        <Block title="Overview">
-            <ContentWrapper>
-                <StatBox>
-                    <Typography use="headline2">{form.overallStats.submissions}</Typography>
-                    <Typography use="overline">Submissions</Typography>
-                </StatBox>
-                <StatBox>
-                    <Typography use="headline2">{form.overallStats.views}</Typography>
-                    <Typography use="overline">Views</Typography>
-                </StatBox>
-                <StatBox>
-                    <Typography use="headline2">{form.overallStats.conversionRate}%</Typography>
-                    <Typography use="overline">Conversion Rate</Typography>
-                </StatBox>
-            </ContentWrapper>
-        </Block>
+        <>
+            <SimpleFormHeader title={"Overview"} />
+            <SimpleFormContent>
+                <ContentWrapper>
+                    <StatBox>
+                        <Heading level={2}>{form.overallStats.submissions}</Heading>
+                        <Text>Submissions</Text>
+                    </StatBox>
+                    <StatBox>
+                        <Heading level={2}>{form.overallStats.views}</Heading>
+                        <Text>Views</Text>
+                    </StatBox>
+                    <StatBox>
+                        <Heading level={2}>{form.overallStats.conversionRate}%</Heading>
+                        <Text>Conversion Rate</Text>
+                    </StatBox>
+                </ContentWrapper>
+            </SimpleFormContent>
+        </>
     );
 };
diff --git a/packages/app-form-builder/src/admin/plugins/formDetails/formSubmissions/index.tsx b/packages/app-form-builder/src/admin/plugins/formDetails/formSubmissions/index.tsx
index 409497894f5..33ad862de5a 100644
--- a/packages/app-form-builder/src/admin/plugins/formDetails/formSubmissions/index.tsx
+++ b/packages/app-form-builder/src/admin/plugins/formDetails/formSubmissions/index.tsx
@@ -1,19 +1,15 @@
 import * as React from "react";
 import { renderPlugins } from "@webiny/app/plugins";
-import { Tab } from "@webiny/ui/Tabs";
-import styled from "@emotion/styled";
-import { CircularProgress } from "@webiny/ui/Progress";
 import { FbFormDetailsPluginType, FbFormDetailsSubmissionsPlugin } from "../../../../types";
 import { i18n } from "@webiny/app/i18n";
 import { FormSubmissionsOverview } from "./FormSubmissionsOverview";
 import { FormSubmissionsList } from "./FormSubmissionsList";
+import { OverlayLoader, Tabs } from "@webiny/admin-ui";
+import { ReactComponent as GradingIcon } from "@webiny/icons/grading.svg";
+import { SimpleForm } from "@webiny/app-admin/components/SimpleForm";
 
 const t = i18n.namespace("FormsApp.FormDetails.PreviewContent");
 
-const RenderBlock = styled("div")({
-    padding: 25
-});
-
 export default [
     {
         name: "forms-form-details-revision-content-submissions",
@@ -40,21 +36,24 @@ export default [
             }
 
             return (
-                <Tab
-                    label={t`Submissions`}
+                <Tabs.Tab
+                    value={"submissions"}
+                    trigger={t`Submissions`}
+                    icon={<GradingIcon />}
+                    content={
+                        <div className={"wby-relative"}>
+                            {loading && <OverlayLoader />}
+                            <SimpleForm size={"full"} className={"wby-p-none"}>
+                                {form &&
+                                    renderPlugins("forms-form-details-submissions", {
+                                        form
+                                    })}
+                            </SimpleForm>
+                        </div>
+                    }
                     disabled={loading}
                     data-testid={"fb.form-details.tab.submissions"}
-                >
-                    <RenderBlock>
-                        <div style={{ position: "relative" }}>
-                            {loading && <CircularProgress />}
-                            {form &&
-                                renderPlugins("forms-form-details-submissions", {
-                                    form
-                                })}
-                        </div>
-                    </RenderBlock>
-                </Tab>
+                />
             );
         }
     } as FbFormDetailsPluginType,
diff --git a/packages/app-form-builder/src/admin/plugins/formDetails/previewContent/FormPreview.tsx b/packages/app-form-builder/src/admin/plugins/formDetails/previewContent/FormPreview.tsx
index 89e9ee675dd..98537100637 100644
--- a/packages/app-form-builder/src/admin/plugins/formDetails/previewContent/FormPreview.tsx
+++ b/packages/app-form-builder/src/admin/plugins/formDetails/previewContent/FormPreview.tsx
@@ -1,11 +1,10 @@
 import * as React from "react";
-import { css } from "emotion";
+import { cn, OverlayLoader } from "@webiny/admin-ui";
 import { Form } from "../../../../components/Form";
 import { DATA_FIELDS } from "~/components/Form/graphql";
 import { useQuery } from "@apollo/react-hooks";
 import gql from "graphql-tag";
 import { FbErrorResponse, FbFormModel, FbRevisionModel } from "~/types";
-import CircularProgress from "@webiny/ui/Progress/CircularProgress";
 
 interface GetFormQueryResponse {
     formBuilder: {
@@ -33,14 +32,21 @@ const GET_FORM = gql`
     }
 `;
 
-const pageInnerWrapper = css({
-    overflowY: "scroll",
-    overflowX: "hidden",
-    maxHeight: "calc(100vh - 290px)",
-    position: "relative",
-    padding: 25,
-    backgroundColor: "var(--webiny-theme-color-surface, #fff) !important"
-});
+const PageInnerWrapper = ({
+    className,
+    children,
+    ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+    <div
+        className={cn(
+            "wby-relative wby-overflow-x-hidden wby-overflow-y-scroll wby-max-h-full wby-p-lg",
+            className
+        )}
+        {...props}
+    >
+        {children}
+    </div>
+);
 
 interface FormPreviewProps {
     revision: FbRevisionModel;
@@ -58,22 +64,26 @@ const FormPreview = ({ revision }: FormPreviewProps) => {
     );
 
     if (loading) {
-        return <CircularProgress />;
+        return (
+            <div style={{ height: "500px" }} className={"wby-relative wby-w-full"}>
+                <OverlayLoader text={"Loading preview..."} />
+            </div>
+        );
     }
 
     if (error) {
         console.error(error.message, error);
         return (
-            <div className={pageInnerWrapper}>
-                Form data could not be loaded. Check browser console for errors.
-            </div>
+            <PageInnerWrapper>
+                {"Form data could not be loaded. Check browser console for errors."}
+            </PageInnerWrapper>
         );
     }
 
     return (
-        <div className={pageInnerWrapper}>
+        <PageInnerWrapper>
             {revision && <Form preview data={data?.formBuilder?.getForm?.data} />}
-        </div>
+        </PageInnerWrapper>
     );
 };
 
diff --git a/packages/app-form-builder/src/admin/plugins/formDetails/previewContent/Header.tsx b/packages/app-form-builder/src/admin/plugins/formDetails/previewContent/Header.tsx
index 21b73f57f36..4ca93a20b86 100644
--- a/packages/app-form-builder/src/admin/plugins/formDetails/previewContent/Header.tsx
+++ b/packages/app-form-builder/src/admin/plugins/formDetails/previewContent/Header.tsx
@@ -1,36 +1,7 @@
 import React from "react";
-import { css } from "emotion";
-import { Typography } from "@webiny/ui/Typography";
-import { Grid, Cell } from "@webiny/ui/Grid";
 import { PublishRevision, EditRevision, DeleteForm, RevisionSelector } from "./HeaderComponents";
 import { FbFormDetailsPluginRenderParams, FbRevisionModel } from "~/types";
 
-const headerTitle = css({
-    "&.mdc-layout-grid": {
-        borderBottom: "1px solid var(--mdc-theme-on-background)",
-        color: "var(--mdc-theme-text-primary-on-background)",
-        background: "var(--mdc-theme-surface)",
-        paddingTop: 10,
-        paddingBottom: 9,
-        ".mdc-layout-grid__inner": {
-            alignItems: "center"
-        }
-    }
-});
-
-const pageTitle = css({
-    whiteSpace: "nowrap",
-    overflow: "hidden",
-    textOverflow: "ellipsis"
-});
-
-const headerActions = css({
-    justifyContent: "flex-end",
-    marginRight: "-15px",
-    display: "flex",
-    alignItems: "center"
-});
-
 interface HeaderProps extends FbFormDetailsPluginRenderParams {
     revision: FbRevisionModel;
     selectRevision: (revision: FbRevisionModel) => void;
@@ -39,21 +10,16 @@ interface HeaderProps extends FbFormDetailsPluginRenderParams {
 const Header = (props: HeaderProps) => {
     const { revision } = props;
     return (
-        <React.Fragment>
+        <>
             {revision && (
-                <Grid className={headerTitle}>
-                    <Cell span={8} className={pageTitle}>
-                        <Typography use="headline5">{revision.name}</Typography>
-                    </Cell>
-                    <Cell span={4} className={headerActions}>
-                        <RevisionSelector {...props} />
-                        <EditRevision {...props} />
-                        <PublishRevision {...props} />
-                        <DeleteForm {...props} />
-                    </Cell>
-                </Grid>
+                <div className={"wby-flex wby-justify-end wby-items-center wby-gap-sm wby-h-full"}>
+                    <RevisionSelector {...props} />
+                    <EditRevision {...props} />
+                    <PublishRevision {...props} />
+                    <DeleteForm {...props} />
+                </div>
             )}
-        </React.Fragment>
+        </>
     );
 };
 
diff --git a/packages/app-form-builder/src/admin/plugins/formDetails/previewContent/HeaderComponents/DeleteForm.tsx b/packages/app-form-builder/src/admin/plugins/formDetails/previewContent/HeaderComponents/DeleteForm.tsx
index 07ad0b0bf9d..055ba5ff9e2 100644
--- a/packages/app-form-builder/src/admin/plugins/formDetails/previewContent/HeaderComponents/DeleteForm.tsx
+++ b/packages/app-form-builder/src/admin/plugins/formDetails/previewContent/HeaderComponents/DeleteForm.tsx
@@ -2,14 +2,13 @@ import React from "react";
 import { useApolloClient } from "@apollo/react-hooks";
 import { useRouter } from "@webiny/react-router";
 import { useSnackbar } from "@webiny/app-admin/hooks/useSnackbar";
-import { IconButton } from "@webiny/ui/Button";
-import { Tooltip } from "@webiny/ui/Tooltip";
 import { ConfirmationDialog } from "@webiny/ui/ConfirmationDialog";
-import { ReactComponent as DeleteIcon } from "../../../../icons/delete.svg";
+import { ReactComponent as DeleteIcon } from "@webiny/icons/delete.svg";
 import * as queries from "../../../../graphql";
 import { removeFormFromListCache } from "~/admin/views/cache";
 import { usePermission } from "~/hooks/usePermission";
 import { FbRevisionModel } from "~/types";
+import { Button, Tooltip } from "@webiny/admin-ui";
 
 interface DeleteRevisionProps {
     form: FbRevisionModel;
@@ -29,43 +28,49 @@ const DeleteForm = ({ form, revision }: DeleteRevisionProps) => {
     const message = "You are about to delete this form. Are you sure want to continue?";
 
     return (
-        <Tooltip content={"Delete"} placement={"top"}>
-            <ConfirmationDialog
-                title={"Confirmation required!"}
-                message={message}
-                data-testid={"fb.form-preview.header.delete-dialog"}
-            >
-                {({ showConfirmation }) => (
-                    <IconButton
-                        data-testid={"fb.form-preview.header.delete"}
-                        icon={<DeleteIcon />}
-                        onClick={() =>
-                            showConfirmation(async () => {
-                                await client.mutate({
-                                    mutation: queries.DELETE_FORM,
-                                    variables: { id: revision.id },
-                                    update: (cache, { data }) => {
-                                        const { error } = data.formBuilder.deleteForm;
-                                        if (error) {
-                                            showSnackbar(error.message);
-                                            return;
-                                        }
+        <Tooltip
+            content={"Delete"}
+            trigger={
+                <ConfirmationDialog
+                    title={"Confirmation required!"}
+                    message={message}
+                    data-testid={"fb.form-preview.header.delete-dialog"}
+                >
+                    {({ showConfirmation }) => (
+                        <Button
+                            variant={"ghost"}
+                            size={"sm"}
+                            data-testid={"fb.form-preview.header.delete"}
+                            text={"Delete"}
+                            icon={<DeleteIcon />}
+                            onClick={() =>
+                                showConfirmation(async () => {
+                                    await client.mutate({
+                                        mutation: queries.DELETE_FORM,
+                                        variables: { id: revision.id },
+                                        update: (cache, { data }) => {
+                                            const { error } = data.formBuilder.deleteForm;
+                                            if (error) {
+                                                showSnackbar(error.message);
+                                                return;
+                                            }
 
-                                        showSnackbar(`Form was deleted successfully!`);
+                                            showSnackbar(`Form was deleted successfully!`);
 
-                                        removeFormFromListCache(cache, form);
+                                            removeFormFromListCache(cache, form);
 
-                                        // Redirect
-                                        history.push("/form-builder/forms");
-                                        return;
-                                    }
-                                });
-                            })
-                        }
-                    />
-                )}
-            </ConfirmationDialog>
-        </Tooltip>
+                                            // Redirect
+                                            history.push("/form-builder/forms");
+                                            return;
+                                        }
+                                    });
+                                })
+                            }
+                        />
+                    )}
+                </ConfirmationDialog>
+            }
+        ></Tooltip>
     );
 };
 
diff --git a/packages/app-form-builder/src/admin/plugins/formDetails/previewContent/HeaderComponents/EditRevision.tsx b/packages/app-form-builder/src/admin/plugins/formDetails/previewContent/HeaderComponents/EditRevision.tsx
index 24cd698b985..3b75c4d2c32 100644
--- a/packages/app-form-builder/src/admin/plugins/formDetails/previewContent/HeaderComponents/EditRevision.tsx
+++ b/packages/app-form-builder/src/admin/plugins/formDetails/previewContent/HeaderComponents/EditRevision.tsx
@@ -1,11 +1,10 @@
 import React from "react";
 import { useRouter } from "@webiny/react-router";
-import { IconButton } from "@webiny/ui/Button";
-import { Tooltip } from "@webiny/ui/Tooltip";
-import { ReactComponent as EditIcon } from "../../../../icons/edit.svg";
+import { ReactComponent as EditIcon } from "@webiny/icons/edit.svg";
 import { useRevision } from "../../formRevisions/useRevision";
 import { usePermission } from "~/hooks/usePermission";
 import { FbRevisionModel } from "~/types";
+import { Button, Tooltip } from "@webiny/admin-ui";
 
 interface EditRevisionProps {
     revision: FbRevisionModel;
@@ -23,26 +22,38 @@ const EditRevision = ({ revision, form }: EditRevisionProps) => {
 
     if (revision.status === "draft") {
         return (
-            <Tooltip content={"Edit"} placement={"top"}>
-                <IconButton
-                    data-testid={"fb.form-preview.header.edit-revision"}
-                    icon={<EditIcon />}
-                    onClick={() =>
-                        history.push(`/form-builder/forms/${encodeURIComponent(revision.id)}`)
-                    }
-                />
-            </Tooltip>
+            <Tooltip
+                content={`Edit revision ${revision.version}`}
+                trigger={
+                    <Button
+                        variant={"ghost"}
+                        size={"sm"}
+                        data-testid={"fb.form-preview.header.edit-revision"}
+                        icon={<EditIcon />}
+                        text={"Edit"}
+                        onClick={() =>
+                            history.push(`/form-builder/forms/${encodeURIComponent(revision.id)}`)
+                        }
+                    />
+                }
+            />
         );
     }
 
     return (
-        <Tooltip content={"New draft based on this version..."} placement={"top"}>
-            <IconButton
-                data-testid={"fb.form-preview.header.create-revision"}
-                icon={<EditIcon />}
-                onClick={() => createRevision(revision.id)}
-            />
-        </Tooltip>
+        <Tooltip
+            content={`Create new revision from v${revision.version}`}
+            trigger={
+                <Button
+                    variant={"ghost"}
+                    size={"sm"}
+                    text={"New revision"}
+                    data-testid={"fb.form-preview.header.create-revision"}
+                    icon={<EditIcon />}
+                    onClick={() => createRevision(revision.id)}
+                />
+            }
+        />
     );
 };
 
diff --git a/packages/app-form-builder/src/admin/plugins/formDetails/previewContent/HeaderComponents/PublishRevision.tsx b/packages/app-form-builder/src/admin/plugins/formDetails/previewContent/HeaderComponents/PublishRevision.tsx
index 5cbd6ae5dba..e49f18f880a 100644
--- a/packages/app-form-builder/src/admin/plugins/formDetails/previewContent/HeaderComponents/PublishRevision.tsx
+++ b/packages/app-form-builder/src/admin/plugins/formDetails/previewContent/HeaderComponents/PublishRevision.tsx
@@ -1,8 +1,6 @@
 import React from "react";
-import { IconButton } from "@webiny/ui/Button";
-import { Tooltip } from "@webiny/ui/Tooltip";
-import { ReactComponent as PublishIcon } from "../../../../icons/publish.svg";
-import { ReactComponent as UnpublishIcon } from "../../../../icons/unpublish.svg";
+import { ReactComponent as PublishIcon } from "@webiny/icons/visibility.svg";
+import { ReactComponent as UnpublishIcon } from "@webiny/icons/visibility_off.svg";
 import {
     PUBLISH_REVISION,
     PublishRevisionMutationResponse,
@@ -16,6 +14,7 @@ import { useApolloClient } from "@apollo/react-hooks";
 import { useSnackbar } from "@webiny/app-admin/hooks/useSnackbar";
 import { FbRevisionModel } from "~/types";
 import { usePermission } from "~/hooks/usePermission";
+import { Button, Tooltip } from "@webiny/admin-ui";
 
 interface PublishRevisionProps {
     revision: FbRevisionModel;
@@ -27,105 +26,117 @@ const PublishRevision = ({ revision }: PublishRevisionProps) => {
     const { canPublish, canUnpublish } = usePermission();
 
     return (
-        <React.Fragment>
+        <>
             {revision.status !== "published" && canPublish() && (
-                <Tooltip content={"Publish"} placement={"top"}>
-                    <ConfirmationDialog
-                        title={"Publish form"}
-                        message={
-                            "You are about to publish this form, are you sure want to continue?"
-                        }
-                        data-testid={"fb.form-preview.header.publish-dialog"}
-                    >
-                        {({ showConfirmation }) => (
-                            <IconButton
-                                data-testid={"fb.form-preview.header.publish"}
-                                icon={<PublishIcon />}
-                                onClick={() =>
-                                    showConfirmation(async () => {
-                                        const { data: res } = await client.mutate<
-                                            PublishRevisionMutationResponse,
-                                            PublishRevisionMutationVariables
-                                        >({
-                                            mutation: PUBLISH_REVISION,
-                                            variables: { revision: revision.id }
-                                        });
+                <Tooltip
+                    content={"Publish"}
+                    trigger={
+                        <ConfirmationDialog
+                            title={"Publish form"}
+                            message={
+                                "You are about to publish this form, are you sure want to continue?"
+                            }
+                            data-testid={"fb.form-preview.header.publish-dialog"}
+                        >
+                            {({ showConfirmation }) => (
+                                <Button
+                                    variant={"ghost"}
+                                    size={"sm"}
+                                    data-testid={"fb.form-preview.header.publish"}
+                                    text={"Publish"}
+                                    icon={<PublishIcon />}
+                                    onClick={() =>
+                                        showConfirmation(async () => {
+                                            const { data: res } = await client.mutate<
+                                                PublishRevisionMutationResponse,
+                                                PublishRevisionMutationVariables
+                                            >({
+                                                mutation: PUBLISH_REVISION,
+                                                variables: { revision: revision.id }
+                                            });
 
-                                        if (!res) {
-                                            showSnackbar(
-                                                "Missing response data on Publish Revision Mutation."
-                                            );
-                                            return;
-                                        }
+                                            if (!res) {
+                                                showSnackbar(
+                                                    "Missing response data on Publish Revision Mutation."
+                                                );
+                                                return;
+                                            }
 
-                                        const { error } = res.formBuilder.publishRevision;
-                                        if (error) {
-                                            showSnackbar(error.message);
-                                            return;
-                                        }
+                                            const { error } = res.formBuilder.publishRevision;
+                                            if (error) {
+                                                showSnackbar(error.message);
+                                                return;
+                                            }
 
-                                        showSnackbar(
-                                            <span>
-                                                Successfully published revision{" "}
-                                                <strong>#{revision.version}</strong>!
-                                            </span>
-                                        );
-                                    })
-                                }
-                            />
-                        )}
-                    </ConfirmationDialog>
-                </Tooltip>
-            )}
-            {revision.status === "published" && canUnpublish() && (
-                <Tooltip content={"Unpublish"} placement={"top"}>
-                    <ConfirmationDialog
-                        title={"Un-publish form"}
-                        message={
-                            "You are about to unpublish this form, are you sure want to continue?"
-                        }
-                        data-testid={"fb.form-preview.header.unpublish-dialog"}
-                    >
-                        {({ showConfirmation }) => (
-                            <IconButton
-                                data-testid={"fb.form-preview.header.unpublish"}
-                                icon={<UnpublishIcon />}
-                                onClick={() =>
-                                    showConfirmation(async () => {
-                                        const { data: res } = await client.mutate<
-                                            UnpublishRevisionMutationResponse,
-                                            UnpublishRevisionMutationVariable
-                                        >({
-                                            mutation: UNPUBLISH_REVISION,
-                                            variables: { revision: revision.id }
-                                        });
-                                        if (!res) {
                                             showSnackbar(
-                                                "Missing response data on Unpublish Revision Mutation."
+                                                <span>
+                                                    Successfully published revision{" "}
+                                                    <strong>#{revision.version}</strong>!
+                                                </span>
                                             );
-                                            return;
-                                        }
+                                        })
+                                    }
+                                />
+                            )}
+                        </ConfirmationDialog>
+                    }
+                ></Tooltip>
+            )}
+            {revision.status === "published" && canUnpublish() && (
+                <Tooltip
+                    content={"Unpublish"}
+                    trigger={
+                        <ConfirmationDialog
+                            title={"Un-publish form"}
+                            message={
+                                "You are about to unpublish this form, are you sure want to continue?"
+                            }
+                            data-testid={"fb.form-preview.header.unpublish-dialog"}
+                        >
+                            {({ showConfirmation }) => (
+                                <Button
+                                    variant={"ghost"}
+                                    size={"sm"}
+                                    data-testid={"fb.form-preview.header.unpublish"}
+                                    text={"Unpublish"}
+                                    icon={<UnpublishIcon />}
+                                    onClick={() =>
+                                        showConfirmation(async () => {
+                                            const { data: res } = await client.mutate<
+                                                UnpublishRevisionMutationResponse,
+                                                UnpublishRevisionMutationVariable
+                                            >({
+                                                mutation: UNPUBLISH_REVISION,
+                                                variables: { revision: revision.id }
+                                            });
+                                            if (!res) {
+                                                showSnackbar(
+                                                    "Missing response data on Unpublish Revision Mutation."
+                                                );
+                                                return;
+                                            }
 
-                                        const { error } = res.formBuilder.unpublishRevision;
-                                        if (error) {
-                                            showSnackbar(error.message);
-                                            return;
-                                        }
+                                            const { error } = res.formBuilder.unpublishRevision;
+                                            if (error) {
+                                                showSnackbar(error.message);
+                                                return;
+                                            }
 
-                                        showSnackbar(
-                                            <span>
-                                                Successfully unpublished revision{" "}
-                                                <strong>#{revision.version}</strong>!
-                                            </span>
-                                        );
-                                    })
-                                }
-                            />
-                        )}
-                    </ConfirmationDialog>
-                </Tooltip>
+                                            showSnackbar(
+                                                <span>
+                                                    Successfully unpublished revision{" "}
+                                                    <strong>#{revision.version}</strong>!
+                                                </span>
+                                            );
+                                        })
+                                    }
+                                />
+                            )}
+                        </ConfirmationDialog>
+                    }
+                />
             )}
-        </React.Fragment>
+        </>
     );
 };
 
diff --git a/packages/app-form-builder/src/admin/plugins/formDetails/previewContent/HeaderComponents/RevisionSelector.tsx b/packages/app-form-builder/src/admin/plugins/formDetails/previewContent/HeaderComponents/RevisionSelector.tsx
index d1f9dcb427c..fe9cea839b6 100644
--- a/packages/app-form-builder/src/admin/plugins/formDetails/previewContent/HeaderComponents/RevisionSelector.tsx
+++ b/packages/app-form-builder/src/admin/plugins/formDetails/previewContent/HeaderComponents/RevisionSelector.tsx
@@ -1,29 +1,8 @@
 import React from "react";
-import { css } from "emotion";
-import { ButtonDefault } from "@webiny/ui/Button";
-import { Icon } from "@webiny/ui/Icon";
-import { ReactComponent as DownButton } from "../../../../icons/round-arrow_drop_down-24px.svg";
-
-import { MenuItem } from "@webiny/ui/Menu";
-import { Typography } from "@webiny/ui/Typography";
-import { Menu } from "@webiny/ui/Menu";
+import { ReactComponent as ArrowDownIcon } from "@webiny/icons/expand_more.svg";
+import { Button, DropdownMenu, Text } from "@webiny/admin-ui";
 import { FbRevisionModel } from "~/types";
 
-const buttonStyle = css({
-    "&.mdc-button": {
-        color: "var(--mdc-theme-text-primary-on-background) !important"
-    }
-});
-
-const menuList = css({
-    ".mdc-deprecated-list-item": {
-        flexDirection: "column",
-        justifyContent: "center",
-        alignItems: "baseline",
-        textAlign: "left"
-    }
-});
-
 interface RevisionSelectorProps {
     revisions: FbRevisionModel[];
     revision: FbRevisionModel;
@@ -31,26 +10,34 @@ interface RevisionSelectorProps {
 }
 const RevisionSelector = ({ revisions, revision, selectRevision }: RevisionSelectorProps) => {
     return (
-        <Menu
+        <DropdownMenu
             data-testid={"fb.form-preview.header.revision-selector"}
-            className={menuList}
-            onSelect={evt => selectRevision(revisions[evt.detail.index])}
-            handle={
-                <ButtonDefault className={buttonStyle}>
-                    v{revision.version} <Icon icon={<DownButton />} />
-                </ButtonDefault>
+            trigger={
+                <Button
+                    text={`v${revision.version}`}
+                    icon={<ArrowDownIcon />}
+                    variant={"tertiary"}
+                    size={"sm"}
+                    iconPosition={"end"}
+                />
             }
         >
             {(revisions || []).map(rev => (
-                <MenuItem
+                <DropdownMenu.Item
                     key={rev.id}
                     data-testid={`fb.form-preview.header.revision-v${rev.version}`}
-                >
-                    <Typography use={"body2"}>v{rev.version}</Typography>
-                    <Typography use={"caption"}>({rev.status})</Typography>
-                </MenuItem>
+                    text={
+                        <div>
+                            <Text as={"div"}>v{rev.version}</Text>
+                            <Text size={"sm"} as={"div"}>
+                                ({rev.status})
+                            </Text>
+                        </div>
+                    }
+                    onClick={() => selectRevision(rev)}
+                />
             ))}
-        </Menu>
+        </DropdownMenu>
     );
 };
 
diff --git a/packages/app-form-builder/src/admin/plugins/formDetails/previewContent/index.tsx b/packages/app-form-builder/src/admin/plugins/formDetails/previewContent/index.tsx
index 65fcda3c976..90d98db3502 100644
--- a/packages/app-form-builder/src/admin/plugins/formDetails/previewContent/index.tsx
+++ b/packages/app-form-builder/src/admin/plugins/formDetails/previewContent/index.tsx
@@ -1,24 +1,18 @@
 import React, { useEffect, useState } from "react";
-import { Tab } from "@webiny/ui/Tabs";
-import styled from "@emotion/styled";
-import { Elevation } from "@webiny/ui/Elevation";
 import FormPreview from "./FormPreview";
 import Header from "./Header";
-import { CircularProgress } from "@webiny/ui/Progress";
 import { i18n } from "@webiny/app/i18n";
 import { FbFormDetailsPluginRenderParams, FbFormDetailsPluginType } from "~/types";
+import { OverlayLoader, Tabs } from "@webiny/admin-ui";
+import { ReactComponent as FullscreenIcon } from "@webiny/icons/fullscreen.svg";
+import {
+    SimpleForm,
+    SimpleFormContent,
+    SimpleFormHeader
+} from "@webiny/app-admin/components/SimpleForm";
 
 const t = i18n.namespace("FormsApp.FormDetails.PreviewContent");
 
-const RenderBlock = styled("div")({
-    position: "relative",
-    zIndex: 0,
-    backgroundColor: "var(--mdc-theme-background)",
-    height: "100%",
-    overflow: "auto",
-    padding: 25
-});
-
 const PreviewContentTab = (props: FbFormDetailsPluginRenderParams) => {
     const [revisionId, setRevisionId] = useState<string>();
 
@@ -35,19 +29,25 @@ const PreviewContentTab = (props: FbFormDetailsPluginRenderParams) => {
     }
 
     return (
-        <RenderBlock>
-            <Elevation z={2}>
-                <div style={{ position: "relative" }}>
-                    {props.loading && <CircularProgress />}
-                    <Header
-                        {...props}
-                        revision={revision}
-                        selectRevision={revision => setRevisionId(revision.id)}
-                    />
-                    <FormPreview revision={revision} form={props.form} />
-                </div>
-            </Elevation>
-        </RenderBlock>
+        <SimpleForm size={"full"} className={"wby-p-none "}>
+            <SimpleFormHeader title={revision.name}>
+                <Header
+                    {...props}
+                    revision={revision}
+                    selectRevision={revision => setRevisionId(revision.id)}
+                />
+            </SimpleFormHeader>
+            <SimpleFormContent
+                className={"wby-p-0 wby-border-b-sm wby-rounded-b-3xl wby-overflow-hidden"}
+            >
+                {props.loading && (
+                    <div className={"wby-relative wby-w-full"}>
+                        <OverlayLoader text={"Loading preview..."} />
+                    </div>
+                )}
+                <FormPreview revision={revision} form={props.form} />
+            </SimpleFormContent>
+        </SimpleForm>
     );
 };
 
@@ -57,13 +57,14 @@ export default [
         type: "forms-form-details-revision-content",
         render(props) {
             return (
-                <Tab
-                    label={t`Form preview`}
+                <Tabs.Tab
+                    value={"preview"}
+                    trigger={t`Preview`}
+                    icon={<FullscreenIcon />}
+                    content={<PreviewContentTab {...props} />}
                     disabled={props.loading}
                     data-testid={"fb.form-details.tab.form-preview"}
-                >
-                    <PreviewContentTab {...props} />
-                </Tab>
+                />
             );
         }
     }
diff --git a/packages/app-form-builder/src/admin/plugins/formsDataList/ExportButton/ExportFormLoadingDialogContent.tsx b/packages/app-form-builder/src/admin/plugins/formsDataList/ExportButton/ExportFormLoadingDialogContent.tsx
index 5e665618ae9..2d7dce42ce8 100644
--- a/packages/app-form-builder/src/admin/plugins/formsDataList/ExportButton/ExportFormLoadingDialogContent.tsx
+++ b/packages/app-form-builder/src/admin/plugins/formsDataList/ExportButton/ExportFormLoadingDialogContent.tsx
@@ -3,12 +3,14 @@ import { useSnackbar } from "@webiny/app-admin/hooks/useSnackbar";
 import { useQuery } from "@apollo/react-hooks";
 import { GET_FORM_IMPORT_EXPORT_TASK } from "~/admin/graphql";
 import get from "lodash/get";
-import { Typography } from "@webiny/ui/Typography";
 import { i18n } from "@webiny/app/i18n";
 import { LoadingDialog } from "../ImportButton/styledComponents";
 import ProgressBar from "../ImportButton/ProgressBar";
 import useExportFormDialog from "./useExportFormDialog";
 import { ImportExportTaskStatus } from "~/types";
+import { Icon, Text } from "@webiny/admin-ui";
+import { ReactComponent as SuccessIcon } from "@webiny/icons/check_circle_outline.svg";
+import { ReactComponent as ErrorIcon } from "@webiny/icons/error_outline.svg";
 
 const t = i18n.ns("app-form-builder/admin/plugins/editor/defaultBar/exportForm");
 
@@ -91,42 +93,48 @@ const ExportFormLoadingDialogContent = ({ taskId }: ExportFormLoadingDialogConte
             <LoadingDialog.WrapperRight>
                 {error ? (
                     <LoadingDialog.TitleContainer>
-                        <LoadingDialog.CancelIcon />
-                        <Typography use={"subtitle1"}>{errorMessage}</Typography>
+                        <Icon
+                            icon={<ErrorIcon />}
+                            label="Error"
+                            size={"md"}
+                            className={"wby-fill-danger wby-mr-sm"}
+                        />
+                        <Text size={"md"}>{errorMessage}</Text>
                     </LoadingDialog.TitleContainer>
                 ) : status === ImportExportTaskStatus.COMPLETED ? (
                     <LoadingDialog.TitleContainer>
-                        <LoadingDialog.CheckMarkIcon />
-                        <Typography use={"subtitle1"}>{MESSAGES[status]}</Typography>
+                        <Icon
+                            icon={<SuccessIcon />}
+                            label="Success"
+                            size={"md"}
+                            className={"wby-fill-success wby-mr-sm"}
+                        />
+                        <Text size={"md"}>{MESSAGES[status]}</Text>
                     </LoadingDialog.TitleContainer>
                 ) : (
                     <LoadingDialog.TitleContainer>
                         <LoadingDialog.Pulse>
                             <div className="inner" />
                         </LoadingDialog.Pulse>
-                        <Typography use={"subtitle1"}>{MESSAGES[status]}</Typography>
+                        <Text size={"md"}>{MESSAGES[status]}</Text>
                     </LoadingDialog.TitleContainer>
                 )}
 
                 <LoadingDialog.StatsContainer>
                     {error && (
                         <LoadingDialog.StatusContainer>
-                            <LoadingDialog.StatusTitle use={"body2"}>
-                                {t`Error`}
-                            </LoadingDialog.StatusTitle>
-                            <LoadingDialog.StatusBody use={"body2"}>
-                                {error.message}
-                            </LoadingDialog.StatusBody>
+                            <Text size={"md"}>{t`Error`}</Text>
+                            <Text size={"sm"}> {error.message}</Text>
                         </LoadingDialog.StatusContainer>
                     )}
                     {stats && (
                         <LoadingDialog.ProgressContainer>
-                            <LoadingDialog.StatusTitle use={"body2"}>
+                            <Text size={"sm"}>
                                 {t`{completed} of {total} completed`({
                                     completed: `${stats.completed}`,
                                     total: `${stats.total}`
                                 })}
-                            </LoadingDialog.StatusTitle>
+                            </Text>
                             <ProgressBar
                                 value={stats.completed}
                                 max={stats.total}
diff --git a/packages/app-form-builder/src/admin/plugins/formsDataList/ExportButton/index.tsx b/packages/app-form-builder/src/admin/plugins/formsDataList/ExportButton/index.tsx
index fb1192d47cb..a6c0ad161d0 100644
--- a/packages/app-form-builder/src/admin/plugins/formsDataList/ExportButton/index.tsx
+++ b/packages/app-form-builder/src/admin/plugins/formsDataList/ExportButton/index.tsx
@@ -1,11 +1,9 @@
 import React from "react";
-import { IconButton } from "@webiny/ui/Button";
-import { Tooltip } from "@webiny/ui/Tooltip";
 import { i18n } from "@webiny/app/i18n";
+import { IconButton, Tooltip } from "@webiny/admin-ui";
+import { ReactComponent as DownloadIcon } from "@webiny/icons/file_download.svg";
 import useExportFormDialog, { ExportFormsDialogProps } from "./useExportFormDialog";
 import useExportFormRevisionSelectorDialog from "./useExportFormRevisionSelectorDialog";
-// assets
-import { ReactComponent as DownloadIcon } from "@material-design-icons/svg/round/download.svg";
 
 const t = i18n.ns("app-form-builder/admin/plugins/editor/defaultBar/exportFormButton");
 
@@ -30,18 +28,23 @@ export const ExportFormsButton = ({ getMultiSelected, ...restProps }: ExportForm
     };
 
     return (
-        <Tooltip content={renderExportFormsTooltip(selected)} placement={"bottom"}>
-            <IconButton
-                data-testid={"export-form-button"}
-                icon={<DownloadIcon />}
-                onClick={() => {
-                    showExportFormRevisionSelectorDialog({
-                        onAccept: () =>
-                            showExportFormInitializeDialog({ ids: selected, ...restProps }),
-                        selected
-                    });
-                }}
-            />
-        </Tooltip>
+        <Tooltip
+            trigger={
+                <IconButton
+                    icon={<DownloadIcon />}
+                    size={"sm"}
+                    variant={"ghost"}
+                    data-testid={"export-template-button"}
+                    onClick={() =>
+                        showExportFormRevisionSelectorDialog({
+                            onAccept: () =>
+                                showExportFormInitializeDialog({ ids: selected, ...restProps }),
+                            selected
+                        })
+                    }
+                />
+            }
+            content={renderExportFormsTooltip(selected)}
+        />
     );
 };
diff --git a/packages/app-form-builder/src/admin/plugins/formsDataList/ExportButton/useExportFormDialog.tsx b/packages/app-form-builder/src/admin/plugins/formsDataList/ExportButton/useExportFormDialog.tsx
index 645cd0700e0..dfffdcddde2 100644
--- a/packages/app-form-builder/src/admin/plugins/formsDataList/ExportButton/useExportFormDialog.tsx
+++ b/packages/app-form-builder/src/admin/plugins/formsDataList/ExportButton/useExportFormDialog.tsx
@@ -1,48 +1,15 @@
 import React, { useEffect } from "react";
-import { css } from "emotion";
 import { i18n } from "@webiny/app/i18n";
+import { CopyButton, Button, Text, OverlayLoader, Grid, Heading, Tooltip } from "@webiny/admin-ui";
+import { ReactComponent as FileDownloadIcon } from "@webiny/icons/file_download.svg";
 import { useDialog } from "@webiny/app-admin/hooks/useDialog";
-import { ButtonIcon, ButtonSecondary, CopyButton } from "@webiny/ui/Button";
-import { Typography } from "@webiny/ui/Typography";
-import { Cell, Grid } from "@webiny/ui/Grid";
 import { useSnackbar } from "@webiny/app-admin/hooks/useSnackbar";
-import { CircularProgress } from "@webiny/ui/Progress";
-
 import { usePageBuilder } from "@webiny/app-page-builder/hooks/usePageBuilder";
-import { ReactComponent as FileDownloadIcon } from "@material-design-icons/svg/round/download.svg";
 import ExportFormLoadingDialogContent from "./ExportFormLoadingDialogContent";
 import useExportForm from "./useExportForm";
 
 const t = i18n.ns("app-form-builder/editor/plugins/defaultBar/exportFormButton");
 
-const confirmationMessageStyles = css`
-    width: 600px;
-`;
-
-const linkWrapper = css`
-    display: flex;
-    background-color: var(--mdc-theme-background);
-
-    & .link-text {
-        padding: 8px 0 8px 16px;
-        width: 100%;
-        overflow: hidden;
-    }
-`;
-
-const gridClass = css`
-    &.mdc-layout-grid {
-        padding-top: 0;
-        padding-bottom: 0;
-    }
-`;
-
-const spinnerWrapper = css`
-    position: relative;
-    width: 100%;
-    height: 180px;
-`;
-
 export interface ExportFormsDialogProps {
     ids?: string[];
     where?: Record<string, any>;
@@ -66,10 +33,8 @@ const ExportFormLoadingDialogMessage = (props: ExportFormsDialogProps) => {
     }, []);
 
     return (
-        <div className={confirmationMessageStyles}>
-            <div className={spinnerWrapper}>
-                <CircularProgress label={t`Preparing your export...`} />
-            </div>
+        <div className={"wby-relative wby-h-[180px]"}>
+            <OverlayLoader text={t`Preparing your export...`} />
         </div>
     );
 };
@@ -82,45 +47,50 @@ const ExportFormDialogMessage = ({ exportUrl }: ExportFormDialogProps) => {
     const { showSnackbar } = useSnackbar();
 
     return (
-        <div className={confirmationMessageStyles}>
-            <Grid style={{ paddingTop: 0 }}>
-                <Cell span={12}>
-                    <Typography use={"subtitle1"}>{t`Copy the export URL:`}</Typography>
-                </Cell>
-                <Cell span={12}>
-                    <div className={linkWrapper}>
-                        <Typography
-                            use={"body2"}
-                            className={"link-text"}
-                            data-testid={"fb-forms-export-dialog-export-url"}
-                        >
+        <div className={"wby-pb-lg"}>
+            <Grid>
+                <Grid.Column span={12}>
+                    <Heading level={6} className={"wby-mb-md"}>{t`Copy the export URL:`}</Heading>
+                    <div
+                        className={
+                            "wby-rounded-lg wby-bg-neutral-dimmed wby-p-sm wby-overflow-hidden wby-relative"
+                        }
+                    >
+                        <Text size={"sm"} data-testid={"fb-forms-export-dialog-export-url"}>
                             {exportUrl}
-                        </Typography>
-                        <span>
-                            <CopyButton
-                                data-testid={"export-forms.export-ready-dialog.copy-button"}
-                                value={exportUrl}
-                                onCopy={() => showSnackbar("Successfully copied!")}
+                        </Text>
+                        <span className={"wby-absolute wby-top-0 wby-right-0"}>
+                            <Tooltip
+                                trigger={
+                                    <CopyButton
+                                        variant={"ghost"}
+                                        data-testid={"export-forms.export-ready-dialog.copy-button"}
+                                        value={exportUrl}
+                                        onCopy={() => showSnackbar("Successfully copied!")}
+                                    />
+                                }
+                                content={"Copy the export URL"}
                             />
                         </span>
                     </div>
-                </Cell>
+                </Grid.Column>
             </Grid>
-            <Grid className={gridClass}>
-                <Cell span={12}>
-                    <Typography use={"subtitle1"}>{t`Or download the ZIP archive:`}</Typography>
-                </Cell>
-                <Cell span={12}>
-                    <ButtonSecondary
+            <Grid className={"wby-mt-lg"}>
+                <Grid.Column span={12}>
+                    <Heading
+                        level={6}
+                        className={"wby-mb-md"}
+                    >{t`Or download the ZIP archive:`}</Heading>
+                    <Button
+                        variant={"primary"}
+                        text={"Download"}
+                        icon={<FileDownloadIcon />}
                         onClick={() => {
                             // Download the ZIP
                             window.open(exportUrl, "_blank", "noopener");
                         }}
-                    >
-                        <ButtonIcon icon={<FileDownloadIcon />} />
-                        Download
-                    </ButtonSecondary>
-                </Cell>
+                    />
+                </Grid.Column>
             </Grid>
         </div>
     );
@@ -140,27 +110,21 @@ const useExportFormDialog = (): UseExportFormDialog => {
         showExportFormContentDialog: props => {
             showDialog(<ExportFormDialogMessage {...props} />, {
                 title: t`Your export is now ready!`,
-                actions: {
-                    cancel: { label: t`Close` }
-                },
+                actions: {},
                 dataTestId: "export-forms.export-ready-dialog"
             });
         },
         showExportFormLoadingDialog: taskId => {
             showDialog(<ExportFormLoadingDialogContent taskId={taskId} />, {
                 title: t`Preparing your export...`,
-                actions: {
-                    cancel: { label: t`Cancel` }
-                },
+                actions: {},
                 dataTestId: "export-forms.loading-dialog"
             });
         },
         showExportFormInitializeDialog: props => {
             showDialog(<ExportFormLoadingDialogMessage {...props} />, {
                 title: t`Preparing your export...`,
-                actions: {
-                    cancel: { label: t`Cancel` }
-                },
+                actions: {},
                 dataTestId: "export-forms.initial-dialog"
             });
         },
diff --git a/packages/app-form-builder/src/admin/plugins/formsDataList/ExportButton/useExportFormRevisionSelectorDialog.tsx b/packages/app-form-builder/src/admin/plugins/formsDataList/ExportButton/useExportFormRevisionSelectorDialog.tsx
index 96839ad79a0..abdf70cdff7 100644
--- a/packages/app-form-builder/src/admin/plugins/formsDataList/ExportButton/useExportFormRevisionSelectorDialog.tsx
+++ b/packages/app-form-builder/src/admin/plugins/formsDataList/ExportButton/useExportFormRevisionSelectorDialog.tsx
@@ -1,25 +1,12 @@
 import React from "react";
-import { css } from "emotion";
 import { i18n } from "@webiny/app/i18n";
+import { Alert, Grid, RadioGroup, Text } from "@webiny/admin-ui";
 import { useDialog } from "@webiny/app-admin/hooks/useDialog";
-import { Typography } from "@webiny/ui/Typography";
-import { Cell, Grid } from "@webiny/ui/Grid";
-import { Radio, RadioGroup } from "@webiny/ui/Radio";
 import { Form } from "@webiny/form";
-import { Alert } from "@webiny/ui/Alert";
 import { usePageBuilder } from "@webiny/app-page-builder/hooks/usePageBuilder";
 
 const t = i18n.ns("app-form-builder/editor/plugins/defaultBar/exportFormButton");
 
-const confirmationMessageStyles = css`
-    width: 600px;
-`;
-
-const gridStyles = css`
-    &.mdc-layout-grid {
-        padding-top: 0;
-    }
-`;
 interface ExportFormDialogMessageProps {
     selected: string[];
 }
@@ -29,14 +16,14 @@ const ExportFormDialogMessage = ({ selected }: ExportFormDialogMessageProps) =>
     const { revisionType: value, setRevisionType: setValue } = exportPageData;
 
     return (
-        <div className={confirmationMessageStyles}>
-            <Grid className={gridStyles}>
-                <Cell span={12}>
-                    <Typography
-                        use={"subtitle1"}
-                    >{t`Choose which revision of the form(s) you want to export:`}</Typography>
-                </Cell>
-                <Cell span={12}>
+        <>
+            <Grid>
+                <Grid.Column span={12}>
+                    <Text
+                        size={"md"}
+                    >{t`Choose which revision of the form(s) you want to export:`}</Text>
+                </Grid.Column>
+                <Grid.Column span={12}>
                     <Form
                         data={{ revision: value }}
                         onChange={data => {
@@ -47,44 +34,32 @@ const ExportFormDialogMessage = ({ selected }: ExportFormDialogMessageProps) =>
                             <Bind name="revision">
                                 <RadioGroup
                                     label="Revision selection"
-                                    description={
+                                    note={
                                         "Note: If there is no published revision of a form the latest revision will be exported."
                                     }
-                                >
-                                    {({ onChange, getValue }) => (
-                                        <React.Fragment>
-                                            {[
-                                                { id: "published", name: "Published" },
-                                                {
-                                                    id: "latest",
-                                                    name: "Latest"
-                                                }
-                                            ].map(({ id, name }) => (
-                                                <Radio
-                                                    key={id}
-                                                    label={name}
-                                                    value={getValue(id)}
-                                                    onChange={onChange(id)}
-                                                />
-                                            ))}
-                                        </React.Fragment>
-                                    )}
-                                </RadioGroup>
+                                    items={[
+                                        { value: "published", label: "Published" },
+                                        {
+                                            value: "latest",
+                                            label: "Latest"
+                                        }
+                                    ]}
+                                />
                             </Bind>
                         )}
                     </Form>
-                </Cell>
+                </Grid.Column>
+                <>
+                    {selected.length === 0 && (
+                        <Grid.Column span={12}>
+                            <Alert title={t`Note`} type={"info"}>
+                                {t`You're about to export all forms. This operation might take a few minutes to complete.`}
+                            </Alert>
+                        </Grid.Column>
+                    )}
+                </>
             </Grid>
-            {selected.length === 0 && (
-                <Grid className={gridStyles}>
-                    <Cell span={12}>
-                        <Alert title={t`Note:`} type={"info"}>
-                            {t`You're about to export all forms. This operation might take a few minutes to complete.`}
-                        </Alert>
-                    </Cell>
-                </Grid>
-            )}
-        </div>
+        </>
     );
 };
 
@@ -104,7 +79,7 @@ const useExportFormRevisionSelectorDialog = (): UseExportFormRevisionSelectorDia
     return {
         showExportFormRevisionSelectorDialog: ({ onAccept, selected }) => {
             showDialog(<ExportFormDialogMessage selected={selected} />, {
-                title: t`Select Form Revision`,
+                title: t`Select form revision`,
                 actions: {
                     cancel: { label: t`Cancel` },
                     accept: {
diff --git a/packages/app-form-builder/src/admin/plugins/formsDataList/ImportButton/styledComponents.tsx b/packages/app-form-builder/src/admin/plugins/formsDataList/ImportButton/styledComponents.tsx
index 615f2f50a2f..81e7e41edbf 100644
--- a/packages/app-form-builder/src/admin/plugins/formsDataList/ImportButton/styledComponents.tsx
+++ b/packages/app-form-builder/src/admin/plugins/formsDataList/ImportButton/styledComponents.tsx
@@ -1,11 +1,9 @@
 import styled from "@emotion/styled";
-import { Typography } from "@webiny/ui/Typography";
+import { Text } from "@webiny/admin-ui";
 import Accordion from "@webiny/app-page-builder/editor/plugins/elementSettings/components/Accordion";
 // assets
 import { ReactComponent as UploadInProgressIcon } from "../../../icons/undraw-uploading.svg";
 import { ReactComponent as ExportInProgressIcon } from "../../../icons/undraw_export_files.svg";
-import { ReactComponent as CircleIcon } from "@material-design-icons/svg/round/check_circle.svg";
-import { ReactComponent as CancelIcon } from "@material-design-icons/svg/round/cancel.svg";
 
 export const ShowDetails = {
     Container: styled.div`
@@ -14,7 +12,7 @@ export const ShowDetails = {
     Accordion: styled(Accordion)`
         border: 1px solid var(--mdc-theme-on-background);
     `,
-    Label: styled(Typography)`
+    Label: styled(Text)`
         display: inline-block;
         color: var(--mdc-theme-text-secondary-on-background);
         padding-bottom: 8px;
@@ -26,7 +24,7 @@ export const ShowDetails = {
     ListItem: styled.li`
         padding-bottom: 8px;
     `,
-    LinkText: styled(Typography)`
+    LinkText: styled(Text)`
         margin-left: 8px;
     `
 };
@@ -34,7 +32,6 @@ export const ShowDetails = {
 export const LoadingDialog = {
     Wrapper: styled.div`
         display: flex;
-        width: 600px;
     `,
 
     WrapperLeft: styled.div`
@@ -95,12 +92,6 @@ export const LoadingDialog = {
         flex-direction: column;
         padding-right: 24px;
     `,
-    StatusTitle: styled(Typography)`
-        color: var(--mdc-theme-text-secondary-on-background);
-    `,
-    StatusBody: styled(Typography)`
-        text-transform: capitalize;
-    `,
     ProgressContainer: styled.div`
         display: flex;
         flex-direction: column;
@@ -115,13 +106,5 @@ export const LoadingDialog = {
         width: 100%;
         max-width: 300px;
         height: auto;
-    `,
-    CheckMarkIcon: styled(CircleIcon)`
-        margin-right: 16px;
-        fill: var(--mdc-theme-secondary);
-    `,
-    CancelIcon: styled(CancelIcon)`
-        margin-right: 16px;
-        fill: var(--mdc-theme-error);
     `
 };
diff --git a/packages/app-form-builder/src/admin/plugins/formsDataList/ImportButton/useImportFormDialog.tsx b/packages/app-form-builder/src/admin/plugins/formsDataList/ImportButton/useImportFormDialog.tsx
index 5ac7de9f18f..c13e203344c 100644
--- a/packages/app-form-builder/src/admin/plugins/formsDataList/ImportButton/useImportFormDialog.tsx
+++ b/packages/app-form-builder/src/admin/plugins/formsDataList/ImportButton/useImportFormDialog.tsx
@@ -1,68 +1,66 @@
 import React, { useCallback, useState } from "react";
-import { css } from "emotion";
 import dotProp from "dot-prop-immutable";
+import { Button, Grid, Input, Text } from "@webiny/admin-ui";
 import { i18n } from "@webiny/app/i18n";
 import { useDialog } from "@webiny/app-admin/hooks/useDialog";
-import { ButtonIcon, ButtonSecondary } from "@webiny/ui/Button";
-import { Input } from "@webiny/ui/Input";
-import { Typography } from "@webiny/ui/Typography";
-import { Cell, Grid } from "@webiny/ui/Grid";
 import { Form } from "@webiny/form";
 import { useUi } from "@webiny/app/hooks/useUi";
 import { validation } from "@webiny/validation";
 import { WrapperWithFileUpload } from "./index";
 // assets
-import { ReactComponent as UploadFileIcon } from "@material-design-icons/svg/round/upload.svg";
-import { ReactComponent as LinkIcon } from "@material-design-icons/svg/round/link.svg";
+import { ReactComponent as UploadFileIcon } from "@webiny/icons/file_upload.svg";
+import { ReactComponent as LinkIcon } from "@webiny/icons/link.svg";
 
 const t = i18n.ns("app-form-builder/admin/plugins/editor/defaultBar/importForm");
 
-const contentContainer = css`
-    padding: 36px 0;
-`;
-
-const gridClass = css`
-    &.mdc-layout-grid {
-        padding-left: 0;
-        padding-right: 0;
-    }
-`;
-
-const separator = css`
-    margin: 0 24px;
-`;
-
 export const importFormDialogTitle = t`Import form`;
 
 interface ImportFormDialogContentProps {
     onFileLink: (url: string) => void;
 }
 
-interface SetDialogStylesProps {
-    [key: string]: string | number;
-}
-
 export const ImportFormDialogContent = ({ onFileLink }: ImportFormDialogContentProps) => {
     const ui = useUi();
     const [showLink, setShowLink] = useState<boolean>(false);
 
-    const setDialogStyles = useCallback(
-        (style: SetDialogStylesProps) => {
-            ui.setState(state => dotProp.set(state, "dialog.options.style", style));
-        },
-        [ui]
-    );
+    const setDialogStyles = useCallback(() => {
+        // Update the dialog options style to hide the dialog.
+        ui.setState(state => dotProp.set(state, "dialog.options.style", { display: "none" }));
+
+        // Get the overlay element and the body element.
+        const overlay = document.getElementById("wby-admin-ui.dialog-overlay");
+        const body = document.body;
+
+        // If the overlay exists, hide it and make the body clickable.
+        if (overlay) {
+            overlay.style.visibility = "hidden";
+            overlay.style.pointerEvents = "none";
+            body.style.pointerEvents = "auto";
+        }
+    }, [ui]);
+
+    const restoreDialogStyles = useCallback(() => {
+        // Get the overlay element and the body element.
+        const overlay = document.getElementById("wby-admin-ui.dialog-overlay");
+        const body = document.body;
+
+        // If the overlay exists, hide it and make the body clickable.
+        if (overlay) {
+            overlay.style.visibility = "visible";
+            overlay.style.pointerEvents = "auto";
+            body.style.pointerEvents = "none";
+        }
+    }, [ui]);
 
     const closeDialog = useCallback(() => {
         ui.setState(state => ({ ...state, dialog: null }));
     }, [ui]);
 
     return (
-        <div>
-            <Typography use={"subtitle1"}>
+        <div className={"wby-pb-lg"}>
+            <Text as={"div"} className={"wby-mb-lg"}>
                 {t`You can import form(s) by either uploading a Webiny Form Export ZIP or by pasting export file URL.`}
-            </Typography>
-
+            </Text>
             {showLink ? (
                 <Form
                     data={{ url: "" }}
@@ -72,51 +70,55 @@ export const ImportFormDialogContent = ({ onFileLink }: ImportFormDialogContentP
                     }}
                 >
                     {({ Bind, submit }) => (
-                        <Grid className={gridClass}>
-                            <Cell span={12}>
+                        <Grid>
+                            <Grid.Column span={12}>
                                 <Bind name={"url"} validators={validation.create("required,url")}>
                                     <Input
                                         description={t`The URL has to be public. We'll use it to download the export form data file.`}
                                         label={"File URL"}
                                         data-testid={"import-forms.input-dialog.input-url"}
+                                        size={"lg"}
                                     />
                                 </Bind>
-                            </Cell>
-                            <Cell span={12}>
-                                <ButtonSecondary
+                            </Grid.Column>
+                            <Grid.Column span={12} className={"wby-text-right"}>
+                                <Button
+                                    text={"Import"}
                                     onClick={ev => {
                                         submit(ev);
                                     }}
-                                >
-                                    Continue
-                                </ButtonSecondary>
-                            </Cell>
+                                />
+                            </Grid.Column>
                         </Grid>
                     )}
                 </Form>
             ) : (
-                <div className={contentContainer}>
-                    <WrapperWithFileUpload onSelect={onFileLink}>
+                <div className={"wby-flex wby-items-center wby-gap-md"}>
+                    <WrapperWithFileUpload
+                        onSelect={file => {
+                            restoreDialogStyles();
+                            onFileLink(file);
+                        }}
+                    >
                         {({ showFileManager }) => (
-                            <ButtonSecondary
+                            <Button
+                                text={"Upload file"}
+                                icon={<UploadFileIcon />}
+                                variant={"secondary"}
                                 onClick={() => {
                                     showFileManager();
-                                    setDialogStyles({ display: "none" });
+                                    setDialogStyles();
                                 }}
-                            >
-                                <ButtonIcon icon={<UploadFileIcon />} />
-                                Upload File
-                            </ButtonSecondary>
+                            />
                         )}
                     </WrapperWithFileUpload>
-
-                    <span className={separator}>
-                        <Typography use={"overline"}>{t`Or`}</Typography>
-                    </span>
-                    <ButtonSecondary onClick={() => setShowLink(true)}>
-                        <ButtonIcon icon={<LinkIcon />} />
-                        Paste File URL
-                    </ButtonSecondary>
+                    <Text size={"sm"}>{t`OR`}</Text>
+                    <Button
+                        text={"Paste file URL"}
+                        icon={<LinkIcon />}
+                        variant={"secondary"}
+                        onClick={() => setShowLink(true)}
+                    />
                 </div>
             )}
         </div>
@@ -139,9 +141,7 @@ const useImportFormDialog = () => {
                 />,
                 {
                     title: importFormDialogTitle,
-                    actions: {
-                        cancel: { label: t`Cancel` }
-                    },
+                    actions: {},
                     dataTestId: "import-forms.input-dialog"
                 }
             );
diff --git a/packages/app-form-builder/src/admin/plugins/formsDataList/ImportButton/useImportFormLoadingDialog.tsx b/packages/app-form-builder/src/admin/plugins/formsDataList/ImportButton/useImportFormLoadingDialog.tsx
index d7227ea8a99..378b4558fb1 100644
--- a/packages/app-form-builder/src/admin/plugins/formsDataList/ImportButton/useImportFormLoadingDialog.tsx
+++ b/packages/app-form-builder/src/admin/plugins/formsDataList/ImportButton/useImportFormLoadingDialog.tsx
@@ -3,13 +3,15 @@ import get from "lodash/get";
 import { useLazyQuery, useQuery } from "@apollo/react-hooks";
 import { i18n } from "@webiny/app/i18n";
 import { useDialog } from "@webiny/app-admin/hooks/useDialog";
-import { Typography } from "@webiny/ui/Typography";
 import { useSnackbar } from "@webiny/app-admin/hooks/useSnackbar";
+import { ReactComponent as SuccessIcon } from "@webiny/icons/check_circle_outline.svg";
+import { ReactComponent as ErrorIcon } from "@webiny/icons/error_outline.svg";
 import ImportFormsDetails from "./useImportFormsDetails";
 import ProgressBar from "./ProgressBar";
 import { LoadingDialog } from "./styledComponents";
 import { GET_FORM_IMPORT_EXPORT_TASK, LIST_FORM_IMPORT_EXPORT_SUB_TASKS } from "~/admin/graphql";
 import { ImportExportTaskStatus } from "~/types";
+import { Icon, Text } from "@webiny/admin-ui";
 
 const t = i18n.ns("app-form-builder/admin/plugins/editor/defaultBar/importForm");
 
@@ -99,42 +101,48 @@ const ImportFormLoadingDialogContent = ({ taskId }: ImportFormLoadingDialogConte
             <LoadingDialog.WrapperRight>
                 {error ? (
                     <LoadingDialog.TitleContainer>
-                        <LoadingDialog.CancelIcon />
-                        <Typography use={"subtitle1"}>{errorMessage}</Typography>
+                        <Icon
+                            icon={<ErrorIcon />}
+                            label="Error"
+                            size={"md"}
+                            className={"wby-fill-danger wby-mr-sm"}
+                        />
+                        <Text size={"md"}>{errorMessage}</Text>
                     </LoadingDialog.TitleContainer>
                 ) : status === "completed" ? (
                     <LoadingDialog.TitleContainer>
-                        <LoadingDialog.CheckMarkIcon />
-                        <Typography use={"subtitle1"}>{MESSAGES[status]}</Typography>
+                        <Icon
+                            icon={<SuccessIcon />}
+                            label="Success"
+                            size={"md"}
+                            className={"wby-fill-success wby-mr-sm"}
+                        />
+                        <Text size={"md"}>{MESSAGES[status]}</Text>
                     </LoadingDialog.TitleContainer>
                 ) : (
                     <LoadingDialog.TitleContainer>
                         <LoadingDialog.Pulse>
                             <div className="inner" />
                         </LoadingDialog.Pulse>
-                        <Typography use={"subtitle1"}>{MESSAGES[status]}</Typography>
+                        <Text size={"md"}>{MESSAGES[status]}</Text>
                     </LoadingDialog.TitleContainer>
                 )}
 
                 <LoadingDialog.StatsContainer>
                     {error && (
                         <LoadingDialog.StatusContainer>
-                            <LoadingDialog.StatusTitle use={"body2"}>
-                                {t`Error`}
-                            </LoadingDialog.StatusTitle>
-                            <LoadingDialog.StatusBody use={"body2"}>
-                                {error.message}
-                            </LoadingDialog.StatusBody>
+                            <Text size={"md"}>{t`Error`}</Text>
+                            <Text size={"sm"}> {error.message}</Text>
                         </LoadingDialog.StatusContainer>
                     )}
                     {stats && (
                         <LoadingDialog.ProgressContainer>
-                            <LoadingDialog.StatusTitle use={"body2"}>
+                            <Text size={"sm"}>
                                 {t`{completed} of {total} completed`({
                                     completed: `${stats.completed}`,
                                     total: `${stats.total}`
                                 })}
-                            </LoadingDialog.StatusTitle>
+                            </Text>
                             <ProgressBar
                                 value={stats.completed}
                                 max={stats.total}
diff --git a/packages/app-form-builder/src/admin/plugins/formsDataList/ImportButton/useImportFormsDetails.tsx b/packages/app-form-builder/src/admin/plugins/formsDataList/ImportButton/useImportFormsDetails.tsx
index 38c64461eb6..77c0abebbe7 100644
--- a/packages/app-form-builder/src/admin/plugins/formsDataList/ImportButton/useImportFormsDetails.tsx
+++ b/packages/app-form-builder/src/admin/plugins/formsDataList/ImportButton/useImportFormsDetails.tsx
@@ -1,8 +1,7 @@
 import React from "react";
 import get from "lodash/get";
-import { Typography } from "@webiny/ui/Typography";
+import { Text, Scrollbar } from "@webiny/admin-ui";
 import { i18n } from "@webiny/app/i18n";
-import { Scrollbar } from "@webiny/ui/Scrollbar";
 import { Link } from "@webiny/react-router";
 import { ShowDetails } from "./styledComponents";
 import { ListFormImportExportSubTasksResponse } from "~/admin/graphql";
@@ -17,7 +16,7 @@ interface ImportFormsDetailsProps {
 
 const ImportFormsDetails = ({ loading, result }: ImportFormsDetailsProps) => {
     if (loading || !result) {
-        return <Typography use={"caption"}> {t`Loading details...`} </Typography>;
+        return <Text size={"sm"}>{t`Loading details...`}</Text>;
     }
     const subtasks: FormBuilderImportExportSubTask[] = get(
         result,
@@ -32,20 +31,18 @@ const ImportFormsDetails = ({ loading, result }: ImportFormsDetailsProps) => {
                         height: 160
                     }}
                 >
-                    <ShowDetails.Label use={"body2"}>{t`Forms imported:`}</ShowDetails.Label>
+                    <ShowDetails.Label size={"sm"}>{t`Forms imported:`}</ShowDetails.Label>
                     <ShowDetails.List data-testid={"import-forms-dialog.show-detail-list"}>
                         {subtasks.map(subtask => {
                             const { form } = subtask.data;
                             return (
                                 <ShowDetails.ListItem key={form.id}>
-                                    <Typography use={"body2"}>
-                                        {`${form.name} (v${form.version})`}
-                                    </Typography>
+                                    <Text size={"sm"}>{`${form.name} (v${form.version})`}</Text>
                                     <Link
                                         to={`/form-builder/forms?id=${encodeURIComponent(form.id)}`}
                                         target={"_blank"}
                                     >
-                                        <ShowDetails.LinkText use={"body2"}>
+                                        <ShowDetails.LinkText size={"sm"}>
                                             {t`view`}
                                         </ShowDetails.LinkText>
                                     </Link>
diff --git a/packages/app-form-builder/src/admin/plugins/permissionRenderer/FormBuilderPermissions.tsx b/packages/app-form-builder/src/admin/plugins/permissionRenderer/FormBuilderPermissions.tsx
index e869b1003ad..f49e1731954 100644
--- a/packages/app-form-builder/src/admin/plugins/permissionRenderer/FormBuilderPermissions.tsx
+++ b/packages/app-form-builder/src/admin/plugins/permissionRenderer/FormBuilderPermissions.tsx
@@ -5,11 +5,10 @@ import { i18n } from "@webiny/app/i18n";
 import {
     CannotUseAaclAlert,
     PermissionInfo,
-    gridNoPaddingClass
+    gridWithPaddingClass,
+    PermissionsGroup
 } from "@webiny/app-admin/components/Permissions";
 import { Form } from "@webiny/form";
-import { Elevation } from "@webiny/ui/Elevation";
-import { Typography } from "@webiny/ui/Typography";
 import { Checkbox, CheckboxGroup } from "@webiny/ui/Checkbox";
 import { SecurityPermission } from "@webiny/app-security/types";
 import { FormBuilderSecurityPermission } from "~/types";
@@ -167,20 +166,20 @@ export const FormBuilderPermissions = ({ value, onChange }: FormBuilderPermissio
         <Form data={formData} onChange={onFormChange}>
             {({ data, Bind, setValue }) => (
                 <Fragment>
-                    <Grid className={gridNoPaddingClass}>
+                    <Grid className={gridWithPaddingClass}>
                         <Cell span={12}>
                             {data.accessLevel === "custom" && cannotUseAAcl && (
                                 <CannotUseAaclAlert />
                             )}
                         </Cell>
                     </Grid>
-                    <Grid className={gridNoPaddingClass}>
+                    <Grid className={gridWithPaddingClass}>
                         <Cell span={6}>
                             <PermissionInfo title={t`Access Level`} />
                         </Cell>
                         <Cell span={6}>
                             <Bind name={"accessLevel"}>
-                                <Select label={t`Access Level`}>
+                                <Select>
                                     <option value={NO_ACCESS}>{t`No access`}</option>
                                     <option value={FULL_ACCESS}>{t`Full access`}</option>
                                     <option value={CUSTOM_ACCESS}>{t`Custom access`}</option>
@@ -189,142 +188,122 @@ export const FormBuilderPermissions = ({ value, onChange }: FormBuilderPermissio
                         </Cell>
                     </Grid>
                     {data.accessLevel === CUSTOM_ACCESS && (
-                        <Fragment>
-                            <Elevation z={1} style={{ marginTop: 10 }}>
+                        <div className={"wby-mt-lg"}>
+                            <PermissionsGroup title={"Forms"}>
                                 <Grid>
                                     <Cell span={12}>
-                                        <Typography use={"overline"}>Forms</Typography>
+                                        <Bind
+                                            name={`formAccessLevel`}
+                                            beforeChange={(value, cb) => {
+                                                if (value === "own") {
+                                                    setValue(`formRWD`, "rwd");
+                                                }
+                                                cb(value);
+                                            }}
+                                        >
+                                            <Select
+                                                disabled={cannotUseAAcl}
+                                                label={t`Access Scope`}
+                                                description={
+                                                    "The scope of forms a user can access."
+                                                }
+                                            >
+                                                <option value={NO_ACCESS}>{t`No access`}</option>
+                                                <option value={FULL_ACCESS}>{t`All forms`}</option>
+                                                <option
+                                                    value={"own"}
+                                                >{t`Only forms created by the user`}</option>
+                                            </Select>
+                                        </Bind>
                                     </Cell>
                                     <Cell span={12}>
-                                        <Grid style={{ padding: 0, paddingBottom: 24 }}>
-                                            <Cell span={12}>
-                                                <Bind
-                                                    name={`formAccessLevel`}
-                                                    beforeChange={(value, cb) => {
-                                                        if (value === "own") {
-                                                            setValue(`formRWD`, "rwd");
-                                                        }
-                                                        cb(value);
-                                                    }}
-                                                >
-                                                    <Select
-                                                        disabled={cannotUseAAcl}
-                                                        label={t`Access Scope`}
-                                                        description={
-                                                            "The scope of forms a user can access."
-                                                        }
-                                                    >
-                                                        <option
-                                                            value={NO_ACCESS}
-                                                        >{t`No access`}</option>
-                                                        <option
-                                                            value={FULL_ACCESS}
-                                                        >{t`All forms`}</option>
-                                                        <option
-                                                            value={"own"}
-                                                        >{t`Only forms created by the user`}</option>
-                                                    </Select>
-                                                </Bind>
-                                            </Cell>
-                                            <Cell span={12}>
-                                                <Bind name={`formRWD`}>
-                                                    <Select
-                                                        label={t`Primary Actions`}
-                                                        description={
-                                                            "Primary actions a user can perform on the forms."
-                                                        }
-                                                        disabled={
-                                                            cannotUseAAcl ||
-                                                            data.formAccessLevel !== FULL_ACCESS
-                                                        }
-                                                    >
-                                                        <option value={"r"}>{t`Read`}</option>
-                                                        <option
-                                                            value={"rw"}
-                                                        >{t`Read, write`}</option>
-                                                        <option
-                                                            value={"rwd"}
-                                                        >{t`Read, write, delete`}</option>
-                                                    </Select>
-                                                </Bind>
-                                            </Cell>
-                                            <Cell span={12}>
-                                                <Bind name={"formPW"}>
-                                                    <CheckboxGroup
-                                                        label={t`Publishing actions`}
-                                                        description={t`Publishing-related actions that can be performed on the forms.`}
-                                                    >
-                                                        {({ getValue, onChange }) =>
-                                                            pwOptions.map(({ id, name }) => (
-                                                                <Checkbox
-                                                                    disabled={
-                                                                        cannotUseAAcl ||
-                                                                        !["full", "own"].includes(
-                                                                            data.formAccessLevel
-                                                                        )
-                                                                    }
-                                                                    key={id}
-                                                                    label={name}
-                                                                    value={getValue(id)}
-                                                                    onChange={onChange(id)}
-                                                                />
-                                                            ))
-                                                        }
-                                                    </CheckboxGroup>
-                                                </Bind>
-                                            </Cell>
-                                            <Cell span={12}>
-                                                <Bind name={`submissionPermissions`}>
-                                                    <Select
-                                                        label={t`Form Submissions`}
-                                                        description={
-                                                            "The scope of form submissions a user can access."
-                                                        }
-                                                        disabled={
-                                                            cannotUseAAcl ||
-                                                            !data.formAccessLevel ||
-                                                            data.formAccessLevel === NO_ACCESS
-                                                        }
-                                                    >
-                                                        <option value={NO_ACCESS}>{t`None`}</option>
-                                                        <option
-                                                            value={FULL_ACCESS}
-                                                        >{t`All form submissions`}</option>
-                                                    </Select>
-                                                </Bind>
-                                            </Cell>
-                                        </Grid>
+                                        <Bind name={`formRWD`}>
+                                            <Select
+                                                label={t`Primary Actions`}
+                                                description={
+                                                    "Primary actions a user can perform on the forms."
+                                                }
+                                                disabled={
+                                                    cannotUseAAcl ||
+                                                    data.formAccessLevel !== FULL_ACCESS
+                                                }
+                                            >
+                                                <option value={"r"}>{t`Read`}</option>
+                                                <option value={"rw"}>{t`Read, write`}</option>
+                                                <option
+                                                    value={"rwd"}
+                                                >{t`Read, write, delete`}</option>
+                                            </Select>
+                                        </Bind>
+                                    </Cell>
+                                    <Cell span={12}>
+                                        <Bind name={"formPW"}>
+                                            <CheckboxGroup
+                                                label={t`Publishing actions`}
+                                                description={t`Publishing-related actions that can be performed on the forms.`}
+                                            >
+                                                {({ getValue, onChange }) =>
+                                                    pwOptions.map(({ id, name }) => (
+                                                        <Checkbox
+                                                            disabled={
+                                                                cannotUseAAcl ||
+                                                                !["full", "own"].includes(
+                                                                    data.formAccessLevel
+                                                                )
+                                                            }
+                                                            key={id}
+                                                            label={name}
+                                                            value={getValue(id)}
+                                                            onChange={onChange(id)}
+                                                        />
+                                                    ))
+                                                }
+                                            </CheckboxGroup>
+                                        </Bind>
                                     </Cell>
-                                </Grid>
-                            </Elevation>
-                            <Elevation z={1} style={{ marginTop: 10 }}>
-                                <Grid>
                                     <Cell span={12}>
-                                        <Typography use={"overline"}>{t`Settings`}</Typography>
+                                        <Bind name={`submissionPermissions`}>
+                                            <Select
+                                                label={t`Form Submissions`}
+                                                description={
+                                                    "The scope of form submissions a user can access."
+                                                }
+                                                disabled={
+                                                    cannotUseAAcl ||
+                                                    !data.formAccessLevel ||
+                                                    data.formAccessLevel === NO_ACCESS
+                                                }
+                                            >
+                                                <option value={NO_ACCESS}>{t`None`}</option>
+                                                <option
+                                                    value={FULL_ACCESS}
+                                                >{t`All form submissions`}</option>
+                                            </Select>
+                                        </Bind>
                                     </Cell>
+                                </Grid>
+                            </PermissionsGroup>
+                            <PermissionsGroup title={"Settings"}>
+                                <Grid>
                                     <Cell span={12}>
-                                        <Grid style={{ padding: 0, paddingBottom: 24 }}>
-                                            <Cell span={12}>
-                                                <Bind name={"settingsAccessLevel"}>
-                                                    <Select
-                                                        disabled={cannotUseAAcl}
-                                                        label={t`Access Scope`}
-                                                        description={
-                                                            "The scope of app settings a user can access."
-                                                        }
-                                                    >
-                                                        <option value={NO_ACCESS}>{t`None`}</option>
-                                                        <option
-                                                            value={FULL_ACCESS}
-                                                        >{t`All settings`}</option>
-                                                    </Select>
-                                                </Bind>
-                                            </Cell>
-                                        </Grid>
+                                        <Bind name={"settingsAccessLevel"}>
+                                            <Select
+                                                disabled={cannotUseAAcl}
+                                                label={t`Access Scope`}
+                                                description={
+                                                    "The scope of app settings a user can access."
+                                                }
+                                            >
+                                                <option value={NO_ACCESS}>{t`None`}</option>
+                                                <option
+                                                    value={FULL_ACCESS}
+                                                >{t`All settings`}</option>
+                                            </Select>
+                                        </Bind>
                                     </Cell>
                                 </Grid>
-                            </Elevation>
-                        </Fragment>
+                            </PermissionsGroup>
+                        </div>
                     )}
                 </Fragment>
             )}
diff --git a/packages/app-form-builder/src/admin/plugins/permissionRenderer/index.tsx b/packages/app-form-builder/src/admin/plugins/permissionRenderer/index.tsx
index b8e1494c34a..ab31f17aa16 100644
--- a/packages/app-form-builder/src/admin/plugins/permissionRenderer/index.tsx
+++ b/packages/app-form-builder/src/admin/plugins/permissionRenderer/index.tsx
@@ -1,8 +1,8 @@
 import React from "react";
 import { i18n } from "@webiny/app/i18n";
-import { AccordionItem } from "@webiny/ui/Accordion";
+import { Accordion } from "@webiny/admin-ui";
 import { AdminAppPermissionRendererPlugin } from "@webiny/app-admin/types";
-import { ReactComponent as FormBuilderIcon } from "../../icons/round-ballot-24px.svg";
+import { ReactComponent as PermissionsIcon } from "@webiny/icons/check_box.svg";
 import { FormBuilderPermissions } from "./FormBuilderPermissions";
 
 const t = i18n.ns("app-form-builder/admin/plugins/permissionRenderer");
@@ -12,14 +12,19 @@ const plugin: AdminAppPermissionRendererPlugin = {
     name: "admin-app-permissions-renderer-form-builder",
     render(props) {
         return (
-            <AccordionItem
-                icon={<FormBuilderIcon />}
+            <Accordion.Item
+                icon={
+                    <Accordion.Item.Icon
+                        icon={<PermissionsIcon />}
+                        label={"Form Builder Permissions"}
+                    />
+                }
                 title={t`Form Builder`}
                 description={t`Manage Form Builder app access permissions.`}
                 data-testid={"permission.fb"}
             >
                 <FormBuilderPermissions {...props} />
-            </AccordionItem>
+            </Accordion.Item>
         );
     }
 };
diff --git a/packages/app-form-builder/src/admin/plugins/welcomeScreenWidget.tsx b/packages/app-form-builder/src/admin/plugins/welcomeScreenWidget.tsx
index 725179d0c95..e138c2455c4 100644
--- a/packages/app-form-builder/src/admin/plugins/welcomeScreenWidget.tsx
+++ b/packages/app-form-builder/src/admin/plugins/welcomeScreenWidget.tsx
@@ -1,20 +1,9 @@
 import React from "react";
-import { Link } from "@webiny/react-router";
+import { ReactComponent as AddIcon } from "@webiny/icons/add.svg";
+import { ReactComponent as FbFormIcon } from "@webiny/icons/check_box.svg";
+import { Button, Link } from "@webiny/admin-ui";
 
 import { AdminWelcomeScreenWidgetPlugin } from "@webiny/app-plugin-admin-welcome-screen/types";
-import { ButtonSecondary } from "@webiny/ui/Button";
-import { css } from "emotion";
-
-const linkStyle = css({
-    textDecoration: "none",
-    "&:hover": {
-        textDecoration: "none"
-    }
-});
-
-const buttonStyle = css({
-    margin: "1rem auto 1rem auto"
-});
 
 const plugin: AdminWelcomeScreenWidgetPlugin = {
     type: "admin-welcome-screen-widget",
@@ -22,12 +11,15 @@ const plugin: AdminWelcomeScreenWidgetPlugin = {
     permission: "fb.form",
     widget: {
         cta: (
-            <Link to="/form-builder/forms" className={linkStyle}>
-                <ButtonSecondary className={buttonStyle}>Create a new Form</ButtonSecondary>
-            </Link>
+            <Button
+                text={<Link to="/form-builder/forms">{"Create a new Form"}</Link>}
+                icon={<AddIcon />}
+                asChild
+            />
         ),
         description: "Create forms using a drag and drop interface and track conversions.",
-        title: "Form Builder"
+        title: "Forms",
+        icon: <FbFormIcon />
     }
 };
 export default plugin;
diff --git a/packages/app-form-builder/src/admin/views/Forms/FormDetails.tsx b/packages/app-form-builder/src/admin/views/Forms/FormDetails.tsx
index 1730c36a85e..838ab63e0b9 100644
--- a/packages/app-form-builder/src/admin/views/Forms/FormDetails.tsx
+++ b/packages/app-form-builder/src/admin/views/Forms/FormDetails.tsx
@@ -2,7 +2,6 @@ import React from "react";
 import { useQuery } from "@apollo/react-hooks";
 import { renderPlugins } from "@webiny/app/plugins";
 import { useRouter } from "@webiny/react-router";
-import styled from "@emotion/styled";
 import {
     GET_FORM,
     GET_FORM_REVISIONS,
@@ -12,26 +11,17 @@ import {
     GetFormRevisionsQueryVariables
 } from "../../graphql";
 import { useSnackbar } from "@webiny/app-admin/hooks/useSnackbar";
-import { Tabs } from "@webiny/ui/Tabs";
-import { CircularProgress } from "@webiny/ui/Progress";
-import { ButtonDefault, ButtonIcon } from "@webiny/ui/Button";
 import { useSecurity } from "@webiny/app-security";
 import EmptyView from "@webiny/app-admin/components/EmptyView";
-import { ReactComponent as AddIcon } from "@webiny/app-admin/assets/icons/add-18px.svg";
+import { ReactComponent as AddIcon } from "@webiny/icons/add.svg";
+import { ReactComponent as CheckboxIcon } from "@webiny/icons/check_box.svg";
 import { i18n } from "@webiny/app/i18n";
 import { useForms } from "./useForms";
+import { Button, OverlayLoader, Tabs } from "@webiny/admin-ui";
+import { TabProps } from "@webiny/admin-ui/Tabs/components";
 
 const t = i18n.ns("app-form-builder/admin/views/forms/form-details");
 
-const DetailsContainer = styled("div")({
-    height: "100%",
-    overflow: "hidden",
-    position: "relative",
-    ".mdc-tab-bar": {
-        backgroundColor: "var(--mdc-theme-surface)"
-    }
-});
-
 interface EmptyFormDetailsProps {
     onCreateForm: () => void;
     canCreate: () => boolean;
@@ -39,14 +29,18 @@ interface EmptyFormDetailsProps {
 const EmptyFormDetails = ({ canCreate, onCreateForm }: EmptyFormDetailsProps) => {
     return (
         <EmptyView
+            icon={<CheckboxIcon />}
             title={t`Click on the left side list to display form details {message}`({
                 message: canCreate() ? " or create a..." : ""
             })}
             action={
                 canCreate() ? (
-                    <ButtonDefault data-testid="new-record-button" onClick={onCreateForm}>
-                        <ButtonIcon icon={<AddIcon />} /> {t`New Form`}
-                    </ButtonDefault>
+                    <Button
+                        text={t`New Form`}
+                        icon={<AddIcon />}
+                        data-testid="new-record-button"
+                        onClick={onCreateForm}
+                    />
                 ) : null
             }
         />
@@ -116,18 +110,29 @@ const FormDetails = ({ onCreateForm }: FormDetailsProps) => {
             : getRevisions.data.formBuilder.revisions.data;
 
     return (
-        <DetailsContainer>
-            {getForm.loading && <CircularProgress label={"Loading details..."} />}
+        <div className={"wby-relative wby-overflow-y-auto wby-h-main-content"}>
+            {getForm.loading && <OverlayLoader text={"Loading details..."} />}
             {form && (
-                <Tabs>
-                    {renderPlugins(
-                        "forms-form-details-revision-content",
-                        { security, refreshForms, form, revisions, loading: getForm.loading },
-                        { wrapper: false }
-                    )}
-                </Tabs>
+                <Tabs
+                    size={"md"}
+                    spacing={"lg"}
+                    separator={true}
+                    tabs={
+                        renderPlugins(
+                            "forms-form-details-revision-content",
+                            {
+                                security,
+                                refreshForms,
+                                form,
+                                revisions,
+                                loading: getForm.loading
+                            },
+                            { wrapper: false }
+                        ) as React.ReactElement<TabProps>[]
+                    }
+                />
             )}
-        </DetailsContainer>
+        </div>
     );
 };
 
diff --git a/packages/app-form-builder/src/admin/views/Forms/FormsDataList.tsx b/packages/app-form-builder/src/admin/views/Forms/FormsDataList.tsx
index 899b13c5f17..c9f2bd9a32c 100644
--- a/packages/app-form-builder/src/admin/views/Forms/FormsDataList.tsx
+++ b/packages/app-form-builder/src/admin/views/Forms/FormsDataList.tsx
@@ -1,11 +1,9 @@
 import React, { useCallback, useMemo, useRef, useState } from "react";
-import { TimeAgo } from "@webiny/ui/TimeAgo";
-import { css } from "emotion";
-import styled from "@emotion/styled";
+import { ReactComponent as AddIcon } from "@webiny/icons/add.svg";
+import { ReactComponent as FileUploadIcon } from "@webiny/icons/file_upload.svg";
 import orderBy from "lodash/orderBy";
 import upperFirst from "lodash/upperFirst";
 import { useRouter } from "@webiny/react-router";
-import { Typography } from "@webiny/ui/Typography";
 import { ConfirmationDialog } from "@webiny/ui/ConfirmationDialog";
 import { DeleteIcon, EditIcon } from "@webiny/ui/List/DataList/icons";
 import {
@@ -25,42 +23,24 @@ import {
     ListItem,
     ListItemMeta,
     ListItemText,
+    ListItemTextPrimary,
     ListItemTextSecondary,
     ListSelectBox
 } from "@webiny/ui/List";
 import { i18n } from "@webiny/app/i18n";
 import { removeFormFromListCache, updateLatestRevisionInListCache } from "../cache";
-import { ButtonIcon, ButtonSecondary } from "@webiny/ui/Button";
-import { ReactComponent as AddIcon } from "@webiny/app-admin/assets/icons/add-18px.svg";
-import { ReactComponent as FilterIcon } from "@webiny/app-admin/assets/icons/filter-24px.svg";
 import SearchUI from "@webiny/app-admin/components/SearchUI";
-import { Cell, Grid } from "@webiny/ui/Grid";
-import { Select } from "@webiny/ui/Select";
-import { Checkbox } from "@webiny/ui/Checkbox";
 import { useMultiSelect } from "./hooks/useMultiSelect";
 import { usePermission } from "~/hooks/usePermission";
-import { ReactComponent as FileUploadIcon } from "@material-design-icons/svg/round/upload.svg";
 import useImportForm from "./hooks/useImportForm";
 import { ExportFormsButton } from "~/admin/plugins/formsDataList/ExportButton";
 import { OptionsMenu } from "~/admin/components/OptionsMenu";
 import { useForms } from "./useForms";
 import { deserializeSorters } from "../utils";
 import { FbFormModel, FbRevisionModel } from "~/types";
+import { Button, Checkbox, Select, TimeAgo } from "@webiny/admin-ui";
 
 const t = i18n.namespace("FormsApp.FormsDataList");
-const rightAlign = css({
-    alignItems: "flex-end !important"
-});
-
-const listItemMinHeight = css({
-    minHeight: "66px !important"
-});
-
-const DataListActionsWrapper = styled.div`
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-`;
 
 export type FormsDataListProps = {
     onCreateForm: () => void;
@@ -199,24 +179,15 @@ const FormsDataList = (props: FormsDataListProps) => {
     const formsDataListModalOverlay = useMemo(
         () => (
             <DataListModalOverlay>
-                <Grid>
-                    <Cell span={12}>
-                        <Select
-                            value={sort}
-                            onChange={setSort}
-                            label={t`Sort by`}
-                            description={"Sort forms by"}
-                        >
-                            {SORTERS.map(({ label, sorter }) => {
-                                return (
-                                    <option key={label} value={sorter}>
-                                        {label}
-                                    </option>
-                                );
-                            })}
-                        </Select>
-                    </Cell>
-                </Grid>
+                <Select
+                    value={sort}
+                    onChange={setSort}
+                    label={t`Sort by`}
+                    options={SORTERS.map(({ label, sorter: value }) => ({
+                        label,
+                        value
+                    }))}
+                />
             </DataListModalOverlay>
         ),
         [sort]
@@ -239,21 +210,26 @@ const FormsDataList = (props: FormsDataListProps) => {
             return null;
         }
         return (
-            <DataListActionsWrapper>
-                <ButtonSecondary data-testid="new-record-button" onClick={props.onCreateForm}>
-                    <ButtonIcon icon={<AddIcon />} /> {t`New Form`}
-                </ButtonSecondary>
+            <>
+                <Button
+                    text={t`New`}
+                    icon={<AddIcon />}
+                    size={"sm"}
+                    className={"wby-ml-xs"}
+                    data-testid="new-record-button"
+                    onClick={props.onCreateForm}
+                />
                 <OptionsMenu
                     items={[
                         {
-                            label: "Import Forms",
+                            label: "Import forms",
                             icon: <FileUploadIcon />,
                             onClick: showImportDialog,
                             "data-testid": "import-form-button"
                         }
                     ]}
                 />
-            </DataListActionsWrapper>
+            </>
         );
     }, [canCreate(), showImportDialog]);
 
@@ -278,10 +254,14 @@ const FormsDataList = (props: FormsDataListProps) => {
             isAllMultiSelected={multiSelectProps.isAllMultiSelected}
             isNoneMultiSelected={multiSelectProps.isNoneMultiSelected}
             search={
-                <SearchUI value={filter} onChange={setFilter} inputPlaceholder={t`Search forms`} />
+                <SearchUI
+                    value={filter}
+                    onChange={setFilter}
+                    inputPlaceholder={t`Search forms...`}
+                />
             }
             modalOverlay={formsDataListModalOverlay}
-            modalOverlayAction={<DataListModalOverlayAction icon={<FilterIcon />} />}
+            modalOverlayAction={<DataListModalOverlayAction />}
         >
             {({ data }: { data: FbFormModel[] | null }) => (
                 <List data-testid="default-data-list">
@@ -290,13 +270,13 @@ const FormsDataList = (props: FormsDataListProps) => {
                         return (
                             <ListItem
                                 key={form.id}
-                                className={listItemMinHeight}
                                 data-testid="default-data-list-element"
+                                selected={multiSelectProps.isMultiSelected(form)}
                             >
                                 <ListSelectBox>
                                     <Checkbox
                                         onChange={() => multiSelectProps.multiSelect(form)}
-                                        value={multiSelectProps.isMultiSelected(form)}
+                                        checked={multiSelectProps.isMultiSelected(form)}
                                     />
                                 </ListSelectBox>
                                 <ListItemText
@@ -305,21 +285,23 @@ const FormsDataList = (props: FormsDataListProps) => {
                                         history.push({ search: query.toString() });
                                     }}
                                 >
-                                    {form.name}
+                                    <ListItemTextPrimary>{form.name}</ListItemTextPrimary>
                                     {form.createdBy && (
                                         <ListItemTextSecondary>
-                                            {<>{t`Created by: {user}.`({ user: name })} </>}
+                                            <div data-testid="fb.form.status">
+                                                {upperFirst(form.status)} (v{form.version})
+                                            </div>
+                                            <div>
+                                                {<>{t`Created by: {user}.`({ user: name })} </>}
 
-                                            {t`Last modified: {time}.`({
-                                                time: <TimeAgo datetime={form.savedOn} />
-                                            })}
+                                                {t`Last modified: {time}.`({
+                                                    time: <TimeAgo datetime={form.savedOn} />
+                                                })}
+                                            </div>
                                         </ListItemTextSecondary>
                                     )}
                                 </ListItemText>
-                                <ListItemMeta className={rightAlign}>
-                                    <Typography use={"body2"} data-testid="fb.form.status">
-                                        {upperFirst(form.status)} (v{form.version})
-                                    </Typography>
+                                <ListItemMeta>
                                     <ListActions>
                                         {canUpdate(form) && (
                                             <EditIcon
diff --git a/packages/app-form-builder/src/admin/views/Forms/NewFormDialog.tsx b/packages/app-form-builder/src/admin/views/Forms/NewFormDialog.tsx
index 13db305d947..af8799a6963 100644
--- a/packages/app-form-builder/src/admin/views/Forms/NewFormDialog.tsx
+++ b/packages/app-form-builder/src/admin/views/Forms/NewFormDialog.tsx
@@ -1,40 +1,23 @@
 import React from "react";
-import { css } from "emotion";
 import { useRouter } from "@webiny/react-router";
 import { useMutation } from "@apollo/react-hooks";
 import { Form } from "@webiny/form";
-import { Input } from "@webiny/ui/Input";
 import {
     CREATE_FORM,
     CreateFormMutationResponse,
     CreateFormMutationVariables
 } from "../../graphql";
 import { useSnackbar } from "@webiny/app-admin/hooks/useSnackbar";
-import { CircularProgress } from "@webiny/ui/Progress";
-
-import { i18n } from "@webiny/app/i18n";
-const t = i18n.namespace("Forms.NewFormDialog");
-
-import {
-    Dialog,
-    DialogTitle,
-    DialogContent,
-    DialogActions,
-    DialogOnClose
-} from "@webiny/ui/Dialog";
-import { ButtonDefault } from "@webiny/ui/Button";
+import { Dialog, Input, OverlayLoader } from "@webiny/admin-ui";
 import { addFormToListCache } from "../cache";
+import { i18n } from "@webiny/app/i18n";
+import { validation } from "@webiny/validation";
 
-const narrowDialog = css({
-    ".mdc-dialog__surface": {
-        width: 400,
-        minWidth: 400
-    }
-});
+const t = i18n.namespace("Forms.NewFormDialog");
 
 export interface NewFormDialogProps {
     open: boolean;
-    onClose: DialogOnClose;
+    onClose: () => void;
 }
 
 const NewFormDialog = ({ open, onClose }: NewFormDialogProps) => {
@@ -47,67 +30,71 @@ const NewFormDialog = ({ open, onClose }: NewFormDialogProps) => {
     );
 
     return (
-        <Dialog
-            open={open}
-            onClose={onClose}
-            className={narrowDialog}
-            data-testid="fb-new-form-modal"
-        >
-            <Form
-                onSubmit={formData => {
-                    setLoading(true);
+        <Form
+            onSubmit={formData => {
+                setLoading(true);
 
-                    create({
-                        /**
-                         * We know that formData is CreateFormMutationVariables.
-                         */
-                        variables: formData as unknown as CreateFormMutationVariables,
-                        update(cache, result) {
-                            if (!result.data) {
-                                return;
-                            }
-                            const { data } = result;
-                            const { data: revision, error } = data.formBuilder.form;
-
-                            setLoading(false);
-                            if (error) {
-                                showSnackbar(error.message);
-                                return;
-                            } else if (!revision) {
-                                showSnackbar(`Missing revision data in Create Form Mutation.`);
-                                return;
-                            }
-
-                            addFormToListCache(cache, revision);
+                create({
+                    /**
+                     * We know that formData is CreateFormMutationVariables.
+                     */
+                    variables: formData as unknown as CreateFormMutationVariables,
+                    update(cache, result) {
+                        if (!result.data) {
+                            return;
+                        }
+                        const { data } = result;
+                        const { data: revision, error } = data.formBuilder.form;
 
-                            history.push(`/form-builder/forms/${encodeURIComponent(revision.id)}`);
+                        setLoading(false);
+                        if (error) {
+                            showSnackbar(error.message);
+                            return;
+                        } else if (!revision) {
+                            showSnackbar(`Missing revision data in Create Form Mutation.`);
+                            return;
                         }
-                    });
-                }}
-            >
-                {({ Bind, submit }) => (
-                    <>
-                        {loading && <CircularProgress label={"Creating form..."} />}
-                        <DialogTitle>{t`New form`}</DialogTitle>
-                        <DialogContent>
-                            <Bind name={"name"}>
-                                <Input placeholder={"Enter a name for your new form"} />
-                            </Bind>
-                        </DialogContent>
-                        <DialogActions>
-                            <ButtonDefault
+
+                        addFormToListCache(cache, revision);
+                        console.log("push before");
+                        history.push(`/form-builder/forms/${encodeURIComponent(revision.id)}`);
+                        console.log("push after");
+                    }
+                });
+            }}
+        >
+            {({ Bind, submit }) => (
+                <Dialog
+                    open={open}
+                    onClose={onClose}
+                    title={t`New form`}
+                    data-testid="fb-new-form-modal"
+                    actions={
+                        <>
+                            <Dialog.CancelButton />
+                            <Dialog.ConfirmButton
                                 data-testid="fb.form.create"
+                                text={"Create"}
                                 onClick={ev => {
                                     submit(ev);
                                 }}
-                            >
-                                + {t`Create`}
-                            </ButtonDefault>
-                        </DialogActions>
+                            />
+                        </>
+                    }
+                >
+                    <>
+                        {loading && <OverlayLoader text={"Creating form..."} />}
+                        <Bind name={"name"} validators={validation.create("required")}>
+                            <Input
+                                size={"lg"}
+                                label={t`Name`}
+                                placeholder={"Enter a name for your new form"}
+                            />
+                        </Bind>
                     </>
-                )}
-            </Form>
-        </Dialog>
+                </Dialog>
+            )}
+        </Form>
     );
 };
 
diff --git a/packages/app-form-builder/src/index.tsx b/packages/app-form-builder/src/index.tsx
index 4dc9e12bf3c..303bdb0bfbe 100644
--- a/packages/app-form-builder/src/index.tsx
+++ b/packages/app-form-builder/src/index.tsx
@@ -1,9 +1,12 @@
 import React, { lazy, Suspense } from "react";
-import { AddMenu, AddRoute, Layout, Plugin } from "@webiny/app-admin";
+import { Layout } from "@webiny/app-admin";
 import { HasPermission } from "@webiny/app-security";
-import { ReactComponent as FormsIcon } from "~/admin/icons/round-ballot-24px.svg";
 import { CircularProgress } from "@webiny/ui/Progress";
 import FormsSettings from "./admin/views/Settings/FormsSettings";
+import { ReactComponent as FormsIcon } from "@webiny/icons/check_box.svg";
+import { AdminConfig } from "@webiny/app-admin";
+
+const { Menu, Route } = AdminConfig;
 
 const FormEditor = lazy(
     () =>
@@ -24,6 +27,7 @@ interface LoaderProps {
     label: string;
     children: React.ReactNode;
 }
+
 const Loader = ({ children, label, ...props }: LoaderProps) => (
     <Suspense fallback={<CircularProgress label={label} />}>
         {React.cloneElement(children as unknown as React.ReactElement, props)}
@@ -32,47 +36,65 @@ const Loader = ({ children, label, ...props }: LoaderProps) => (
 
 export const FormBuilder = () => {
     return (
-        <Plugin>
+        <AdminConfig>
             <HasPermission name={"fb.form"}>
-                <AddMenu name="formBuilder" label={"Form Builder"} icon={<FormsIcon />}>
-                    <AddMenu name="formBuilder.forms" label={"Forms"}>
-                        <AddMenu
-                            name="formBuilder.forms.forms"
-                            label={"Forms"}
-                            path="/form-builder/forms"
+                <Menu
+                    name="fb"
+                    element={
+                        <Menu.Link
+                            text={"Form Builder"}
+                            icon={<Menu.Link.Icon element={<FormsIcon />} label={"Form Builder"} />}
+                            to={"/form-builder/forms"}
                         />
-                    </AddMenu>
-                </AddMenu>
-                <AddRoute exact path={"/form-builder/forms/:id"}>
-                    <Loader label={"Loading editor..."}>
-                        <FormEditor />
-                    </Loader>
-                </AddRoute>
-                <AddRoute exact path={"/form-builder/forms"}>
-                    <Layout title={"Form Builder - Forms"}>
-                        <Loader label={"Loading view..."}>
-                            <Forms />
+                    }
+                />
+                <Route
+                    name={"fb.forms.editor"}
+                    exact
+                    path={"/form-builder/forms/:id"}
+                    element={
+                        <Loader label={"Loading editor..."}>
+                            <FormEditor />
                         </Loader>
-                    </Layout>
-                </AddRoute>
+                    }
+                />
+                <Route
+                    name={"fb.forms.list"}
+                    exact
+                    path={"/form-builder/forms"}
+                    element={
+                        <Layout title={"Form Builder - Forms"}>
+                            <Loader label={"Loading view..."}>
+                                <Forms />
+                            </Loader>
+                        </Layout>
+                    }
+                />
             </HasPermission>
             <HasPermission name={"fb.settings"}>
-                <AddRoute path="/settings/form-builder/recaptcha">
-                    <Layout title={"Form Builder - reCAPTCHA Settings"}>
-                        <FormsSettings />
-                    </Layout>
-                </AddRoute>
-                <AddMenu name={"settings"}>
-                    <AddMenu name={"settings.formBuilder"} label={"Form Builder"}>
-                        <AddMenu
-                            name={"settings.formBuilder.recaptcha"}
-                            label={"reCAPTCHA"}
-                            path={"/settings/form-builder/recaptcha"}
-                        />
-                    </AddMenu>
-                </AddMenu>
+                <Route
+                    name={"fb.settings.recaptcha"}
+                    path="/settings/form-builder/recaptcha"
+                    element={
+                        <Layout title={"Form Builder - reCAPTCHA Settings"}>
+                            <FormsSettings />
+                        </Layout>
+                    }
+                />
+                <Menu
+                    name="fb.settings"
+                    parent={"settings"}
+                    element={<Menu.Group text={"Form Builder"} />}
+                />
+                <Menu
+                    name="fb.settings.recaptcha"
+                    parent={"settings"}
+                    element={
+                        <Menu.Link text={"reCAPTCHA"} to={"/settings/form-builder/recaptcha"} />
+                    }
+                />
             </HasPermission>
-        </Plugin>
+        </AdminConfig>
     );
 };
 
diff --git a/packages/app-form-builder/tsconfig.build.json b/packages/app-form-builder/tsconfig.build.json
index ebbdd201775..64c5cb86264 100644
--- a/packages/app-form-builder/tsconfig.build.json
+++ b/packages/app-form-builder/tsconfig.build.json
@@ -2,6 +2,7 @@
   "extends": "../../tsconfig.build.json",
   "include": ["src"],
   "references": [
+    { "path": "../admin-ui/tsconfig.build.json" },
     { "path": "../app/tsconfig.build.json" },
     { "path": "../app-admin/tsconfig.build.json" },
     { "path": "../app-page-builder/tsconfig.build.json" },
diff --git a/packages/app-form-builder/tsconfig.json b/packages/app-form-builder/tsconfig.json
index 8fbddbf6294..ac03669d26c 100644
--- a/packages/app-form-builder/tsconfig.json
+++ b/packages/app-form-builder/tsconfig.json
@@ -2,6 +2,7 @@
   "extends": "../../tsconfig.json",
   "include": ["src", "__tests__"],
   "references": [
+    { "path": "../admin-ui" },
     { "path": "../app" },
     { "path": "../app-admin" },
     { "path": "../app-page-builder" },
@@ -23,6 +24,8 @@
     "paths": {
       "~/*": ["./src/*"],
       "~tests/*": ["./__tests__/*"],
+      "@webiny/admin-ui/*": ["../admin-ui/src/*"],
+      "@webiny/admin-ui": ["../admin-ui/src"],
       "@webiny/app/*": ["../app/src/*"],
       "@webiny/app": ["../app/src"],
       "@webiny/app-admin/*": ["../app-admin/src/*"],
diff --git a/packages/app-graphql-playground/src/index.tsx b/packages/app-graphql-playground/src/index.tsx
index 82ce6f17c03..a3601a3d74f 100644
--- a/packages/app-graphql-playground/src/index.tsx
+++ b/packages/app-graphql-playground/src/index.tsx
@@ -1,14 +1,16 @@
 import React, { memo } from "react";
 import { ApolloClient } from "apollo-client";
 import { plugins } from "@webiny/plugins";
-import { Plugins, AddMenu, AddRoute, Layout } from "@webiny/app-admin";
-import { ReactComponent as InfoIcon } from "./assets/graphql.svg";
+import { AdminConfig, Layout } from "@webiny/app-admin";
 import Playground from "./plugins/Playground";
 import playgroundPlugins from "./plugins";
 
+const { Route } = AdminConfig;
+
 interface CreateApolloClientParams {
     uri: string;
 }
+
 interface GraphQLPlaygroundProps {
     createApolloClient(params: CreateApolloClientParams): ApolloClient<any>;
 }
@@ -17,20 +19,17 @@ const GraphQLPlaygroundExtension = ({ createApolloClient }: GraphQLPlaygroundPro
     plugins.register(playgroundPlugins);
 
     return (
-        <Plugins>
-            <AddMenu
+        <AdminConfig>
+            <Route
                 name={"apiPlayground"}
-                label={"API Playground"}
                 path={"/api-playground"}
-                icon={<InfoIcon />}
-                tags={["footer"]}
+                element={
+                    <Layout title={"API Playground"}>
+                        <Playground createApolloClient={createApolloClient} />
+                    </Layout>
+                }
             />
-            <AddRoute exact path={"/api-playground"}>
-                <Layout title={"API Playground"}>
-                    <Playground createApolloClient={createApolloClient} />
-                </Layout>
-            </AddRoute>
-        </Plugins>
+        </AdminConfig>
     );
 };
 
diff --git a/packages/app-graphql-playground/src/plugins/Playground.styles.ts b/packages/app-graphql-playground/src/plugins/Playground.styles.ts
index c6e99504af4..0f48ed83a80 100644
--- a/packages/app-graphql-playground/src/plugins/Playground.styles.ts
+++ b/packages/app-graphql-playground/src/plugins/Playground.styles.ts
@@ -24,7 +24,7 @@ export const PlaygroundContainer = styled("div")({
     marginTop: -3,
     overflow: "hidden",
     ".playground": {
-        height: "calc(100vh - 64px)",
+        height: "calc(100vh - 45px)",
         margin: 0,
         padding: 0,
         fontFamily: "'Open Sans', sans-serif",
diff --git a/packages/app-headless-cms-common/package.json b/packages/app-headless-cms-common/package.json
index 029a726b02d..61858b25042 100644
--- a/packages/app-headless-cms-common/package.json
+++ b/packages/app-headless-cms-common/package.json
@@ -16,15 +16,14 @@
     "@emotion/react": "11.10.8",
     "@emotion/styled": "11.10.6",
     "@fortawesome/fontawesome-svg-core": "^1.3.0",
+    "@webiny/admin-ui": "0.0.0",
     "@webiny/app": "0.0.0",
     "@webiny/app-admin": "0.0.0",
     "@webiny/app-security": "0.0.0",
     "@webiny/form": "0.0.0",
     "@webiny/plugins": "0.0.0",
     "@webiny/react-composition": "0.0.0",
-    "@webiny/ui": "0.0.0",
     "@webiny/validation": "0.0.0",
-    "classnames": "^2.5.1",
     "dnd-core": "^16.0.1",
     "graphql": "^15.9.0",
     "graphql-tag": "^2.12.6",
diff --git a/packages/app-headless-cms-common/src/Fields/Fields.tsx b/packages/app-headless-cms-common/src/Fields/Fields.tsx
index f6dddf906e3..fc859acd916 100644
--- a/packages/app-headless-cms-common/src/Fields/Fields.tsx
+++ b/packages/app-headless-cms-common/src/Fields/Fields.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Cell, Grid } from "@webiny/ui/Grid";
+import { Grid, type ColumnProps } from "@webiny/admin-ui";
 import { FieldElement } from "./FieldElement";
 import { FieldElementError } from "./FieldElementError";
 import type {
@@ -30,7 +30,10 @@ export const Fields = ({ Bind, fields, layout, contentModel, gridClassName }: Fi
                         const field = getFieldById(fields, id) as CmsModelField;
 
                         return (
-                            <Cell span={Math.floor(12 / row.length)} key={id}>
+                            <Grid.Column
+                                span={Math.floor(12 / row.length) as ColumnProps["span"]}
+                                key={id}
+                            >
                                 {field ? (
                                     <FieldElement
                                         field={field}
@@ -45,7 +48,7 @@ export const Fields = ({ Bind, fields, layout, contentModel, gridClassName }: Fi
                                         }
                                     />
                                 )}
-                            </Cell>
+                            </Grid.Column>
                         );
                     })}
                 </React.Fragment>
diff --git a/packages/app-headless-cms-common/src/Fields/Label.tsx b/packages/app-headless-cms-common/src/Fields/Label.tsx
index cbb50f904f1..b40d1260f47 100644
--- a/packages/app-headless-cms-common/src/Fields/Label.tsx
+++ b/packages/app-headless-cms-common/src/Fields/Label.tsx
@@ -1,27 +1,10 @@
 import React from "react";
-import { css } from "@emotion/react";
-import classNames from "classnames";
-import { Typography } from "@webiny/ui/Typography";
-
-const style = {
-    label: css({
-        marginBottom: "5px !important"
-    })
-};
+import { FormComponentLabel } from "@webiny/admin-ui";
 
 interface LabelProps {
     children?: React.ReactNode;
 }
 
-export const Label = ({ children }: LabelProps) => (
-    <div
-        className={classNames(
-            "mdc-text-field-helper-text mdc-text-field-helper-text--persistent",
-            style.label
-        )}
-    >
-        <Typography use={"body2"}>{children}</Typography>
-    </div>
-);
+export const Label = ({ children }: LabelProps) => <FormComponentLabel text={children} />;
 
 export default Label;
diff --git a/packages/app-headless-cms-common/src/createFieldsList.ts b/packages/app-headless-cms-common/src/createFieldsList.ts
index f7228d2385d..bda6855183b 100644
--- a/packages/app-headless-cms-common/src/createFieldsList.ts
+++ b/packages/app-headless-cms-common/src/createFieldsList.ts
@@ -47,10 +47,10 @@ export function createFieldsList({
         })
         .filter(Boolean);
     /**
-     * If there are no fields, let's always load the `id` field.
+     * If there are no fields, let's always load the `_empty` field.
      */
     if (fields.length === 0) {
-        fields.push("id");
+        fields.push("_empty");
     }
     return fields.join("\n");
 }
diff --git a/packages/app-headless-cms-common/src/types/index.ts b/packages/app-headless-cms-common/src/types/index.ts
index 3024aca7b50..84867bbff07 100644
--- a/packages/app-headless-cms-common/src/types/index.ts
+++ b/packages/app-headless-cms-common/src/types/index.ts
@@ -17,6 +17,7 @@ import {
 import { CmsModel, CmsModelField } from "./model";
 import { CmsIdentity } from "~/types/shared";
 import type { SourceType } from "dnd-core";
+import { IconPickerIconDto } from "@webiny/admin-ui";
 
 export type DragObjectWithType = {
     type: SourceType;
@@ -472,7 +473,7 @@ export interface CmsIcon {
 
 export interface CmsIconsPlugin extends Plugin {
     type: "cms-icons";
-    getIcons(): CmsIcon[];
+    getIcons(): IconPickerIconDto[];
 }
 
 /**
diff --git a/packages/app-headless-cms-common/tsconfig.build.json b/packages/app-headless-cms-common/tsconfig.build.json
index f0a8f27e392..5eda5b68179 100644
--- a/packages/app-headless-cms-common/tsconfig.build.json
+++ b/packages/app-headless-cms-common/tsconfig.build.json
@@ -2,13 +2,13 @@
   "extends": "../../tsconfig.build.json",
   "include": ["src"],
   "references": [
+    { "path": "../admin-ui/tsconfig.build.json" },
     { "path": "../app/tsconfig.build.json" },
     { "path": "../app-admin/tsconfig.build.json" },
     { "path": "../app-security/tsconfig.build.json" },
     { "path": "../form/tsconfig.build.json" },
     { "path": "../plugins/tsconfig.build.json" },
     { "path": "../react-composition/tsconfig.build.json" },
-    { "path": "../ui/tsconfig.build.json" },
     { "path": "../validation/tsconfig.build.json" }
   ],
   "compilerOptions": {
diff --git a/packages/app-headless-cms-common/tsconfig.json b/packages/app-headless-cms-common/tsconfig.json
index 6991ccd2137..2ba582b3449 100644
--- a/packages/app-headless-cms-common/tsconfig.json
+++ b/packages/app-headless-cms-common/tsconfig.json
@@ -2,13 +2,13 @@
   "extends": "../../tsconfig.json",
   "include": ["src", "__tests__"],
   "references": [
+    { "path": "../admin-ui" },
     { "path": "../app" },
     { "path": "../app-admin" },
     { "path": "../app-security" },
     { "path": "../form" },
     { "path": "../plugins" },
     { "path": "../react-composition" },
-    { "path": "../ui" },
     { "path": "../validation" }
   ],
   "compilerOptions": {
@@ -18,6 +18,8 @@
     "paths": {
       "~/*": ["./src/*"],
       "~tests/*": ["./__tests__/*"],
+      "@webiny/admin-ui/*": ["../admin-ui/src/*"],
+      "@webiny/admin-ui": ["../admin-ui/src"],
       "@webiny/app/*": ["../app/src/*"],
       "@webiny/app": ["../app/src"],
       "@webiny/app-admin/*": ["../app-admin/src/*"],
@@ -30,8 +32,6 @@
       "@webiny/plugins": ["../plugins/src"],
       "@webiny/react-composition/*": ["../react-composition/src/*"],
       "@webiny/react-composition": ["../react-composition/src"],
-      "@webiny/ui/*": ["../ui/src/*"],
-      "@webiny/ui": ["../ui/src"],
       "@webiny/validation/*": ["../validation/src/*"],
       "@webiny/validation": ["../validation/src"]
     },
diff --git a/packages/app-headless-cms/package.json b/packages/app-headless-cms/package.json
index 6461f56be31..7a4754b955c 100644
--- a/packages/app-headless-cms/package.json
+++ b/packages/app-headless-cms/package.json
@@ -15,6 +15,7 @@
   "dependencies": {
     "@apollo/react-common": "^3.1.4",
     "@apollo/react-hooks": "^3.1.5",
+    "@emotion/css": "11.10.6",
     "@emotion/react": "11.10.8",
     "@emotion/styled": "11.10.6",
     "@fortawesome/fontawesome-common-types": "^0.3.0",
@@ -24,9 +25,9 @@
     "@fortawesome/free-solid-svg-icons": "^6.0.0",
     "@fortawesome/react-fontawesome": "^0.1.17",
     "@lexical/utils": "0.23.1",
-    "@material-design-icons/svg": "^0.14.13",
     "@svgr/webpack": "^6.1.1",
     "@types/react": "18.2.79",
+    "@webiny/admin-ui": "0.0.0",
     "@webiny/app": "0.0.0",
     "@webiny/app-aco": "0.0.0",
     "@webiny/app-admin": "0.0.0",
@@ -40,6 +41,7 @@
     "@webiny/error": "0.0.0",
     "@webiny/feature-flags": "0.0.0",
     "@webiny/form": "0.0.0",
+    "@webiny/icons": "0.0.0",
     "@webiny/lexical-editor": "0.0.0",
     "@webiny/lexical-nodes": "0.0.0",
     "@webiny/lexical-theme": "0.0.0",
@@ -58,7 +60,6 @@
     "classnames": "^2.5.1",
     "dnd-core": "^16.0.1",
     "dot-prop-immutable": "^2.1.1",
-    "emotion": "10.0.27",
     "graphql": "^15.9.0",
     "graphql-tag": "^2.12.6",
     "lodash": "^4.17.21",
@@ -74,7 +75,6 @@
     "react-dom": "18.2.0",
     "react-helmet": "^6.1.0",
     "react-hotkeyz": "^1.0.4",
-    "react-virtualized": "^9.22.5",
     "use-deep-compare-effect": "^1.8.1"
   },
   "devDependencies": {
diff --git a/packages/app-headless-cms/src/ContentEntryEditorConfig.ts b/packages/app-headless-cms/src/ContentEntryEditorConfig.ts
index b69d9838ec2..166a604e7f8 100644
--- a/packages/app-headless-cms/src/ContentEntryEditorConfig.ts
+++ b/packages/app-headless-cms/src/ContentEntryEditorConfig.ts
@@ -14,6 +14,7 @@ import {
     ContentEntryFormMeta,
     ContentEntryFormTitle
 } from "~/admin/views/contentEntries/ContentEntry/FullScreenContentEntry/FullScreenContentEntryHeaderLeft";
+import { SingleValueItemContainer } from "~/admin/plugins/fieldRenderers/dynamicZone/SingleValueDynamicZone";
 
 export const ContentEntryEditorConfig = Object.assign(BaseContentEntryEditorConfig, {
     ContentEntry: Object.assign(ContentEntry, {
@@ -42,11 +43,9 @@ export const ContentEntryEditorConfig = Object.assign(BaseContentEntryEditorConf
                 useTemplate: DzField.useTemplate
             },
             Container: DzField.DynamicZoneContainer,
-            // SingleValue: {
-            //     Container: null,
-            //     ItemContainer: null,
-            //     Item: null
-            // },
+            SingleValue: {
+                ItemContainer: SingleValueItemContainer
+            },
             MultiValue: {
                 Container: DzField.MultiValueContainer,
                 ItemContainer: DzField.MultiValueItemContainer,
diff --git a/packages/app-headless-cms/src/HeadlessCMS.tsx b/packages/app-headless-cms/src/HeadlessCMS.tsx
index 3123ab9b252..d73e0cf56d4 100644
--- a/packages/app-headless-cms/src/HeadlessCMS.tsx
+++ b/packages/app-headless-cms/src/HeadlessCMS.tsx
@@ -1,7 +1,7 @@
 import React, { Fragment, memo } from "react";
 import { ApolloClient } from "apollo-client";
 import { plugins } from "@webiny/plugins";
-import { Plugins, Provider } from "@webiny/app-admin";
+import { AdminConfig, Provider } from "@webiny/app-admin";
 import { ApolloCacheObjectIdPlugin } from "@webiny/app";
 import { CmsProvider } from "~/admin/contexts/Cms";
 import { CmsMenuLoader } from "~/admin/menus/CmsMenuLoader";
@@ -30,6 +30,7 @@ const createHeadlessCMSProvider =
 interface CreateApolloClientParams {
     uri: string;
 }
+
 interface CreateApolloClient {
     (params: CreateApolloClientParams): ApolloClient<any>;
 }
@@ -66,9 +67,9 @@ const HeadlessCMSExtension = ({ createApolloClient }: HeadlessCMSProps) => {
             <ContentEntriesModule />
             <SingletonContentEntryModule />
             <Provider hoc={createHeadlessCMSProvider(createApolloClient)} />
-            <Plugins>
+            <AdminConfig>
                 <CmsMenuLoader />
-            </Plugins>
+            </AdminConfig>
             <LexicalEditorCmsPlugin />
         </Fragment>
     );
diff --git a/packages/app-headless-cms/src/admin/components/ContentEntries/BottomInfoBar/BottomInfoBar.styled.tsx b/packages/app-headless-cms/src/admin/components/ContentEntries/BottomInfoBar/BottomInfoBar.styled.tsx
deleted file mode 100644
index 281a34eaade..00000000000
--- a/packages/app-headless-cms/src/admin/components/ContentEntries/BottomInfoBar/BottomInfoBar.styled.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import styled from "@emotion/styled";
-
-export const BottomInfoBarWrapper = styled("div")`
-    font-size: 0.8rem;
-    position: sticky;
-    bottom: 0;
-    height: 30px;
-    color: var(--mdc-theme-text-secondary-on-background);
-    border-top: 1px solid var(--mdc-theme-on-background);
-    background: var(--mdc-theme-surface);
-    width: 100%;
-    transform: translateZ(0);
-    overflow: hidden;
-    display: flex;
-    align-items: center;
-    z-index: 1;
-`;
-
-export const BottomInfoBarInner = styled("div")`
-    padding: 0 10px;
-    width: 100%;
-`;
diff --git a/packages/app-headless-cms/src/admin/components/ContentEntries/BottomInfoBar/BottomInfoBar.tsx b/packages/app-headless-cms/src/admin/components/ContentEntries/BottomInfoBar/BottomInfoBar.tsx
index 533c2b95177..69e4733f9cc 100644
--- a/packages/app-headless-cms/src/admin/components/ContentEntries/BottomInfoBar/BottomInfoBar.tsx
+++ b/packages/app-headless-cms/src/admin/components/ContentEntries/BottomInfoBar/BottomInfoBar.tsx
@@ -1,23 +1,31 @@
 import React from "react";
+import { Separator } from "@webiny/admin-ui";
 import { ListMeta } from "./ListMeta";
-import { BottomInfoBarInner, BottomInfoBarWrapper } from "./BottomInfoBar.styled";
+import { ListStatus } from "./ListStatus";
 
 interface BottomInfoBarProps {
     loading: boolean;
+    loadingMore: boolean;
     totalCount: number;
     currentCount: number;
 }
 
 export const BottomInfoBar = (props: BottomInfoBarProps) => {
     return (
-        <BottomInfoBarWrapper>
-            <BottomInfoBarInner>
+        <div className="wby-sticky wby-bottom-0 wby-z-5 wby-bg-neutral-base wby-w-full wby-transform wby-translate-z-0 wby-overflow-hidden">
+            <Separator />
+            <div
+                className={
+                    "wby-h-xl wby-px-md wby-py-sm wby-flex wby-items-center wby-justify-between"
+                }
+            >
                 <ListMeta
                     loading={props.loading}
                     totalCount={props.totalCount}
                     currentCount={props.currentCount}
                 />
-            </BottomInfoBarInner>
-        </BottomInfoBarWrapper>
+                <ListStatus loading={props.loadingMore} />
+            </div>
+        </div>
     );
 };
diff --git a/packages/app-headless-cms/src/admin/components/ContentEntries/BottomInfoBar/ListMeta.tsx b/packages/app-headless-cms/src/admin/components/ContentEntries/BottomInfoBar/ListMeta.tsx
index 07f9a9b21da..8719a6250ef 100644
--- a/packages/app-headless-cms/src/admin/components/ContentEntries/BottomInfoBar/ListMeta.tsx
+++ b/packages/app-headless-cms/src/admin/components/ContentEntries/BottomInfoBar/ListMeta.tsx
@@ -1,4 +1,5 @@
 import React, { useCallback } from "react";
+import { Text } from "@webiny/admin-ui";
 
 export interface ListMetaProps {
     loading: boolean;
@@ -15,5 +16,9 @@ export const ListMeta = (props: ListMetaProps) => {
         return null;
     }
 
-    return <span>{`Showing ${props.currentCount} out of ${getLabel(props.totalCount)}.`}</span>;
+    return (
+        <Text size={"sm"} as={"div"} className={"wby-text-neutral-strong"}>{`Showing ${
+            props.currentCount
+        } out of ${getLabel(props.totalCount)}.`}</Text>
+    );
 };
diff --git a/packages/app-headless-cms/src/admin/components/ContentEntries/BottomInfoBar/ListStatus.tsx b/packages/app-headless-cms/src/admin/components/ContentEntries/BottomInfoBar/ListStatus.tsx
new file mode 100644
index 00000000000..4722689fae4
--- /dev/null
+++ b/packages/app-headless-cms/src/admin/components/ContentEntries/BottomInfoBar/ListStatus.tsx
@@ -0,0 +1,21 @@
+import React from "react";
+import { Loader, Text } from "@webiny/admin-ui";
+
+export interface ListStatusProps {
+    loading: boolean;
+}
+
+export const ListStatus = ({ loading }: ListStatusProps) => {
+    if (!loading) {
+        return null;
+    }
+
+    return (
+        <div className="wby-flex wby-items-center wby-gap-sm">
+            <Text size={"sm"} as={"div"} className={"wby-text-neutral-strong"}>
+                {"Loading more entries..."}
+            </Text>
+            <Loader size={"xs"} />
+        </div>
+    );
+};
diff --git a/packages/app-headless-cms/src/admin/components/ContentEntries/BulkActions/ActionDelete.tsx b/packages/app-headless-cms/src/admin/components/ContentEntries/BulkActions/ActionDelete.tsx
index 8187c673b9d..0afd63845b6 100644
--- a/packages/app-headless-cms/src/admin/components/ContentEntries/BulkActions/ActionDelete.tsx
+++ b/packages/app-headless-cms/src/admin/components/ContentEntries/BulkActions/ActionDelete.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { ReactComponent as DeleteIcon } from "@material-design-icons/svg/outlined/delete.svg";
+import { ReactComponent as DeleteIcon } from "@webiny/icons/delete.svg";
 import { observer } from "mobx-react-lite";
 import { parseIdentifier } from "@webiny/utils/parseIdentifier";
 import { useRecords } from "@webiny/app-aco";
@@ -7,6 +7,7 @@ import { useSnackbar } from "@webiny/app-admin";
 import { ContentEntryListConfig } from "~/admin/config/contentEntries";
 import { useCms, useModel } from "~/admin/hooks";
 import { getEntriesLabel } from "~/admin/components/ContentEntries/BulkActions/BulkActions";
+import { Tooltip } from "@webiny/admin-ui";
 
 export const ActionDelete = observer(() => {
     const { model } = useModel();
@@ -15,7 +16,7 @@ export const ActionDelete = observer(() => {
     const { showSnackbar } = useSnackbar();
 
     const { useWorker, useButtons, useDialog } = ContentEntryListConfig.Browser.BulkAction;
-    const { IconButton } = useButtons();
+    const { ButtonDefault } = useButtons();
     const worker = useWorker();
     const { showConfirmationDialog, showResultsDialog } = useDialog();
 
@@ -81,11 +82,14 @@ export const ActionDelete = observer(() => {
         });
 
     return (
-        <IconButton
-            icon={<DeleteIcon />}
-            onAction={openDeleteEntriesDialog}
-            label={`Trash ${entriesLabel}`}
-            tooltipPlacement={"bottom"}
+        <Tooltip
+            side={"bottom"}
+            content={`Trash ${entriesLabel}`}
+            trigger={
+                <ButtonDefault icon={<DeleteIcon />} onAction={openDeleteEntriesDialog} size={"sm"}>
+                    {"Trash"}
+                </ButtonDefault>
+            }
         />
     );
 });
diff --git a/packages/app-headless-cms/src/admin/components/ContentEntries/BulkActions/ActionMove.tsx b/packages/app-headless-cms/src/admin/components/ContentEntries/BulkActions/ActionMove.tsx
index 2ef05a1d7c7..28adf009819 100644
--- a/packages/app-headless-cms/src/admin/components/ContentEntries/BulkActions/ActionMove.tsx
+++ b/packages/app-headless-cms/src/admin/components/ContentEntries/BulkActions/ActionMove.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback } from "react";
-import { ReactComponent as MoveIcon } from "@material-design-icons/svg/outlined/drive_file_move.svg";
+import { ReactComponent as MoveIcon } from "@webiny/icons/exit_to_app.svg";
 import { useRecords, useMoveToFolderDialog, useNavigateFolder } from "@webiny/app-aco";
 import { useSnackbar } from "@webiny/app-admin";
 import { FolderItem } from "@webiny/app-aco/types";
@@ -7,6 +7,7 @@ import { observer } from "mobx-react-lite";
 import { ContentEntryListConfig } from "~/admin/config/contentEntries";
 import { ROOT_FOLDER } from "~/admin/constants";
 import { getEntriesLabel } from "~/admin/components/ContentEntries/BulkActions/BulkActions";
+import { Tooltip } from "@webiny/admin-ui";
 
 export const ActionMove = observer(() => {
     const { moveRecord } = useRecords();
@@ -14,7 +15,7 @@ export const ActionMove = observer(() => {
     const { showSnackbar } = useSnackbar();
 
     const { useWorker, useButtons, useDialog } = ContentEntryListConfig.Browser.BulkAction;
-    const { IconButton } = useButtons();
+    const { ButtonDefault } = useButtons();
     const worker = useWorker();
     const { showConfirmationDialog, showResultsDialog } = useDialog();
     const { showDialog: showMoveDialog } = useMoveToFolderDialog();
@@ -98,11 +99,14 @@ export const ActionMove = observer(() => {
         });
 
     return (
-        <IconButton
-            icon={<MoveIcon />}
-            onAction={openMoveEntriesDialog}
-            label={`Move ${entriesLabel}`}
-            tooltipPlacement={"bottom"}
+        <Tooltip
+            side={"bottom"}
+            content={`Move ${entriesLabel}`}
+            trigger={
+                <ButtonDefault icon={<MoveIcon />} onAction={openMoveEntriesDialog} size={"sm"}>
+                    {"Move"}
+                </ButtonDefault>
+            }
         />
     );
 });
diff --git a/packages/app-headless-cms/src/admin/components/ContentEntries/BulkActions/ActionPublish.tsx b/packages/app-headless-cms/src/admin/components/ContentEntries/BulkActions/ActionPublish.tsx
index 529e063507e..42f13a23687 100644
--- a/packages/app-headless-cms/src/admin/components/ContentEntries/BulkActions/ActionPublish.tsx
+++ b/packages/app-headless-cms/src/admin/components/ContentEntries/BulkActions/ActionPublish.tsx
@@ -1,11 +1,12 @@
 import React from "react";
-import { ReactComponent as PublishIcon } from "@material-design-icons/svg/outlined/publish.svg";
+import { ReactComponent as PublishIcon } from "@webiny/icons/visibility.svg";
 import { observer } from "mobx-react-lite";
 import { ContentEntryListConfig } from "~/admin/config/contentEntries";
 import { usePermission, useCms, useModel } from "~/admin/hooks";
 import { getEntriesLabel } from "~/admin/components/ContentEntries/BulkActions/BulkActions";
 import { useRecords } from "@webiny/app-aco";
 import { useSnackbar } from "@webiny/app-admin";
+import { Tooltip } from "@webiny/admin-ui";
 
 export const ActionPublish = observer(() => {
     const { model } = useModel();
@@ -15,7 +16,7 @@ export const ActionPublish = observer(() => {
     const { showSnackbar } = useSnackbar();
 
     const { useWorker, useButtons, useDialog } = ContentEntryListConfig.Browser.BulkAction;
-    const { IconButton } = useButtons();
+    const { ButtonDefault } = useButtons();
     const worker = useWorker();
     const { showConfirmationDialog, showResultsDialog } = useDialog();
 
@@ -84,11 +85,18 @@ export const ActionPublish = observer(() => {
     }
 
     return (
-        <IconButton
-            icon={<PublishIcon />}
-            onAction={openPublishEntriesDialog}
-            label={`Publish ${entriesLabel}`}
-            tooltipPlacement={"bottom"}
+        <Tooltip
+            side={"bottom"}
+            content={`Publish ${entriesLabel}`}
+            trigger={
+                <ButtonDefault
+                    icon={<PublishIcon />}
+                    onAction={openPublishEntriesDialog}
+                    size={"sm"}
+                >
+                    {"Publish"}
+                </ButtonDefault>
+            }
         />
     );
 });
diff --git a/packages/app-headless-cms/src/admin/components/ContentEntries/BulkActions/ActionUnpublish.tsx b/packages/app-headless-cms/src/admin/components/ContentEntries/BulkActions/ActionUnpublish.tsx
index d6d03887e35..5ef0a651210 100644
--- a/packages/app-headless-cms/src/admin/components/ContentEntries/BulkActions/ActionUnpublish.tsx
+++ b/packages/app-headless-cms/src/admin/components/ContentEntries/BulkActions/ActionUnpublish.tsx
@@ -1,11 +1,12 @@
 import React from "react";
-import { ReactComponent as UnpublishIcon } from "@material-design-icons/svg/outlined/settings_backup_restore.svg";
+import { ReactComponent as UnpublishIcon } from "@webiny/icons/visibility_off.svg";
 import { observer } from "mobx-react-lite";
 import { ContentEntryListConfig } from "~/admin/config/contentEntries";
 import { useCms, useModel, usePermission } from "~/admin/hooks";
 import { getEntriesLabel } from "~/admin/components/ContentEntries/BulkActions/BulkActions";
 import { useRecords } from "@webiny/app-aco";
 import { useSnackbar } from "@webiny/app-admin";
+import { Tooltip } from "@webiny/admin-ui";
 
 export const ActionUnpublish = observer(() => {
     const { model } = useModel();
@@ -15,7 +16,7 @@ export const ActionUnpublish = observer(() => {
     const { showSnackbar } = useSnackbar();
 
     const { useWorker, useButtons, useDialog } = ContentEntryListConfig.Browser.BulkAction;
-    const { IconButton } = useButtons();
+    const { ButtonDefault } = useButtons();
     const worker = useWorker();
     const { showConfirmationDialog, showResultsDialog } = useDialog();
 
@@ -87,11 +88,18 @@ export const ActionUnpublish = observer(() => {
     }
 
     return (
-        <IconButton
-            icon={<UnpublishIcon />}
-            onAction={openUnpublishEntriesDialog}
-            label={`Unpublish ${entriesLabel}`}
-            tooltipPlacement={"bottom"}
+        <Tooltip
+            side={"bottom"}
+            content={`Unpublish ${entriesLabel}`}
+            trigger={
+                <ButtonDefault
+                    icon={<UnpublishIcon />}
+                    onAction={openUnpublishEntriesDialog}
+                    size={"sm"}
+                >
+                    {"Unpublish"}
+                </ButtonDefault>
+            }
         />
     );
 });
diff --git a/packages/app-headless-cms/src/admin/components/ContentEntries/BulkActions/BulkActions.styled.tsx b/packages/app-headless-cms/src/admin/components/ContentEntries/BulkActions/BulkActions.styled.tsx
deleted file mode 100644
index 247941064e9..00000000000
--- a/packages/app-headless-cms/src/admin/components/ContentEntries/BulkActions/BulkActions.styled.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import styled from "@emotion/styled";
-import { ButtonContainer } from "@webiny/app-admin";
-
-export const BulkActionsContainer = styled.div`
-    width: 100%;
-    height: 64px;
-    background-color: var(--mdc-theme-surface);
-    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: 3;
-`;
-
-export const BulkActionsInner = styled.div`
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 0 16px;
-`;
-
-export const ButtonsContainer = styled.div`
-    display: flex;
-    align-items: center;
-
-    ${ButtonContainer} {
-        margin: 0;
-    }
-`;
diff --git a/packages/app-headless-cms/src/admin/components/ContentEntries/BulkActions/BulkActions.tsx b/packages/app-headless-cms/src/admin/components/ContentEntries/BulkActions/BulkActions.tsx
index de39e36e4e3..2550359386f 100644
--- a/packages/app-headless-cms/src/admin/components/ContentEntries/BulkActions/BulkActions.tsx
+++ b/packages/app-headless-cms/src/admin/components/ContentEntries/BulkActions/BulkActions.tsx
@@ -1,13 +1,11 @@
 import React, { useMemo } from "react";
-import { ReactComponent as Close } from "@material-design-icons/svg/outlined/close.svg";
+import { Text, IconButton, Button } from "@webiny/admin-ui";
+import { ReactComponent as Close } from "@webiny/icons/close.svg";
 import { Buttons } from "@webiny/app-admin";
-import { IconButton } from "@webiny/ui/Button";
 
 import { useContentEntryListConfig } from "~/admin/config/contentEntries";
 import { useContentEntriesList } from "~/admin/views/contentEntries/hooks";
 
-import { BulkActionsContainer, BulkActionsInner, ButtonsContainer } from "./BulkActions.styled";
-import { Typography } from "@webiny/ui/Typography";
 import { i18n } from "@webiny/app/i18n";
 
 const t = i18n.ns("app-headless-cms/admin/content-entries/bulk-actions");
@@ -22,16 +20,44 @@ export const getEntriesLabel = (): string => {
     return `${selected.length} ${selected.length === 1 ? "entry" : "entries"}`;
 };
 
+export const SelectAll = () => {
+    const list = useContentEntriesList();
+
+    if (!list.showingSelectAll) {
+        return null;
+    }
+
+    return (
+        <div data-testid={"select-all-container"}>
+            {list.isSelectedAll ? (
+                <Button
+                    text={"Clear selection"}
+                    onClick={list.unselectAll}
+                    size={"sm"}
+                    variant={"ghost"}
+                />
+            ) : (
+                <Button
+                    text={"Select all remaining entries"}
+                    onClick={list.selectAll}
+                    size={"sm"}
+                    variant={"secondary"}
+                />
+            )}
+        </div>
+    );
+};
+
 export const BulkActions = () => {
     const { browser } = useContentEntryListConfig();
     const { selected, setSelected, isSelectedAll } = useContentEntriesList();
 
     const headline = useMemo((): string => {
         if (isSelectedAll) {
-            return t("All entries selected:");
+            return t("All entries selected");
         }
 
-        return t`{count|count:1:entry:default:entries} selected:`({
+        return t`{count|count:1:entry:default:entries} selected`({
             count: selected.length
         });
     }, [selected.length, isSelectedAll]);
@@ -41,14 +67,25 @@ export const BulkActions = () => {
     }
 
     return (
-        <BulkActionsContainer>
-            <BulkActionsInner>
-                <ButtonsContainer>
-                    <Typography use={"headline6"}>{headline}</Typography>
+        <div className={"wby-w-full wby-bg-neutral-disabled wby-px-md wby-py-sm"}>
+            <div className={"wby-flex wby-items-center wby-justify-between wby-gap-sm"}>
+                <div className={"wby-flex wby-items-center wby-gap-sm"}>
+                    <Text size={"sm"} className={"wby-text-neutral-strong"}>
+                        {headline}
+                    </Text>
+                    <SelectAll />
+                </div>
+
+                <div className={"wby-flex wby-items-center wby-gap-sm"}>
                     <Buttons actions={browser.bulkActions} />
-                </ButtonsContainer>
-                <IconButton icon={<Close />} onClick={() => setSelected([])} />
-            </BulkActionsInner>
-        </BulkActionsContainer>
+                    <IconButton
+                        variant={"ghost"}
+                        size={"sm"}
+                        icon={<Close />}
+                        onClick={() => setSelected([])}
+                    />
+                </div>
+            </div>
+        </div>
     );
 };
diff --git a/packages/app-headless-cms/src/admin/components/ContentEntries/Empty/index.tsx b/packages/app-headless-cms/src/admin/components/ContentEntries/Empty/index.tsx
index 59b2156a5bc..fc2c6c64348 100644
--- a/packages/app-headless-cms/src/admin/components/ContentEntries/Empty/index.tsx
+++ b/packages/app-headless-cms/src/admin/components/ContentEntries/Empty/index.tsx
@@ -1,10 +1,9 @@
 import React from "react";
-import { ReactComponent as SearchIcon } from "@material-design-icons/svg/outlined/search.svg";
+import { Button, Tooltip } from "@webiny/admin-ui";
+import { ReactComponent as SearchIcon } from "@webiny/icons/search.svg";
+import { ReactComponent as AddIcon } from "@webiny/icons/add.svg";
 import EmptyView from "@webiny/app-admin/components/EmptyView";
 import { i18n } from "@webiny/app/i18n";
-import { ButtonDefault } from "@webiny/ui/Button";
-import { Buttons, Icon } from "./styled";
-import { Tooltip } from "@webiny/ui/Tooltip";
 import { useModel } from "~/admin/components/ModelProvider";
 
 const t = i18n.ns("app-headless-cms/admin/components/content-entries/empty");
@@ -31,44 +30,44 @@ export const Empty = ({
     }
 
     let createEntryButton = (
-        <ButtonDefault
+        <Button
+            variant={"primary"}
             data-testid="new-entry-button"
             onClick={onCreateEntry}
             disabled={!canCreateContent}
-        >
-            <Icon /> {`New ${model.name}`}
-        </ButtonDefault>
+            text={`New ${model.name}`}
+            icon={<AddIcon />}
+        />
     );
 
     if (!canCreateContent) {
         createEntryButton = (
             <Tooltip
+                trigger={createEntryButton}
                 content={`Cannot create entry because you're not an owner.`}
-                placement={"bottom"}
-            >
-                {createEntryButton}
-            </Tooltip>
+                side={"bottom"}
+            />
         );
     }
 
     let createFolderButton = (
-        <ButtonDefault
+        <Button
+            variant={"secondary"}
             data-testid="new-folder-button"
             onClick={onCreateFolder}
             disabled={!canCreateFolder}
-        >
-            <Icon /> {t`New Folder`}
-        </ButtonDefault>
+            text={`New folder`}
+            icon={<AddIcon />}
+        />
     );
 
     if (!canCreateFolder) {
         createFolderButton = (
             <Tooltip
+                trigger={createFolderButton}
                 content={`Cannot create folder because you're not an owner.`}
-                placement={"bottom"}
-            >
-                {createFolderButton}
-            </Tooltip>
+                side={"bottom"}
+            />
         );
     }
 
@@ -80,11 +79,10 @@ export const Empty = ({
                     : "click on the left side to navigate to a different folder."
             })}
             action={
-                <Buttons>
+                <>
                     {createFolderButton}
-                    &nbsp;
                     {createEntryButton}
-                </Buttons>
+                </>
             }
         />
     );
diff --git a/packages/app-headless-cms/src/admin/components/ContentEntries/Empty/styled.tsx b/packages/app-headless-cms/src/admin/components/ContentEntries/Empty/styled.tsx
index 9b6f7bd403b..288aba73ce2 100644
--- a/packages/app-headless-cms/src/admin/components/ContentEntries/Empty/styled.tsx
+++ b/packages/app-headless-cms/src/admin/components/ContentEntries/Empty/styled.tsx
@@ -1,5 +1,5 @@
 import styled from "@emotion/styled";
-import { ReactComponent as Add } from "@material-design-icons/svg/filled/add.svg";
+import { ReactComponent as Add } from "@webiny/icons/add.svg";
 
 export const Buttons = styled.div``;
 
diff --git a/packages/app-headless-cms/src/admin/components/ContentEntries/Filters/FilterByStatus.tsx b/packages/app-headless-cms/src/admin/components/ContentEntries/Filters/FilterByStatus.tsx
index b748030f739..8f2686c993d 100644
--- a/packages/app-headless-cms/src/admin/components/ContentEntries/Filters/FilterByStatus.tsx
+++ b/packages/app-headless-cms/src/admin/components/ContentEntries/Filters/FilterByStatus.tsx
@@ -1,9 +1,7 @@
 import React, { useMemo } from "react";
-
+import { Select } from "@webiny/admin-ui";
 import { useBind } from "@webiny/form";
 import { plugins } from "@webiny/plugins";
-import { Select } from "@webiny/ui/Select";
-
 import { CmsEntryFilterStatusPlugin } from "@webiny/app-headless-cms-common/types";
 
 const getValidFilterValue = (value: string): string | undefined => {
@@ -39,5 +37,5 @@ export const FilterByStatus = () => {
         return options;
     }, []);
 
-    return <Select {...bind} size={"medium"} placeholder={"Filter by status"} options={options} />;
+    return <Select {...bind} size={"md"} placeholder={"Filter by status"} options={options} />;
 };
diff --git a/packages/app-headless-cms/src/admin/components/ContentEntries/Filters/RefFieldRenderer/components/AutoComplete.tsx b/packages/app-headless-cms/src/admin/components/ContentEntries/Filters/RefFieldRenderer/components/AutoComplete.tsx
index c4f18eab5bb..3199d49dce7 100644
--- a/packages/app-headless-cms/src/admin/components/ContentEntries/Filters/RefFieldRenderer/components/AutoComplete.tsx
+++ b/packages/app-headless-cms/src/admin/components/ContentEntries/Filters/RefFieldRenderer/components/AutoComplete.tsx
@@ -37,6 +37,7 @@ export const AutoComplete = (props: AutoCompleteProps) => {
                     onInput={props.onInput}
                     options={props.vm.options}
                     loading={props.vm.loading}
+                    valueProp={"entryId"}
                 />
             )}
         </Bind>
diff --git a/packages/app-headless-cms/src/admin/components/ContentEntries/Filters/RefFieldRenderer/domain/EntryRepository.ts b/packages/app-headless-cms/src/admin/components/ContentEntries/Filters/RefFieldRenderer/domain/EntryRepository.ts
index fc0ab1ec8be..22d116905e1 100644
--- a/packages/app-headless-cms/src/admin/components/ContentEntries/Filters/RefFieldRenderer/domain/EntryRepository.ts
+++ b/packages/app-headless-cms/src/admin/components/ContentEntries/Filters/RefFieldRenderer/domain/EntryRepository.ts
@@ -41,14 +41,16 @@ export class EntryRepository {
         });
     }
 
-    async getEntryById(modelId: string, id: string) {
-        const entryInCache = this.entries.find(entry => entry.id === id);
+    async getEntryById(modelId: string, entryId: string) {
+        const entryInCache = this.entries.find(entry => entry.entryId === entryId);
 
         if (entryInCache) {
             return entryInCache;
         }
 
-        const response = await this.runWithLoading<EntryReference>(this.gateway.get(modelId, id));
+        const response = await this.runWithLoading<EntryReference>(
+            this.gateway.get(modelId, entryId)
+        );
 
         if (!response) {
             return;
diff --git a/packages/app-headless-cms/src/admin/components/ContentEntries/Filters/styles.tsx b/packages/app-headless-cms/src/admin/components/ContentEntries/Filters/styles.tsx
deleted file mode 100644
index 1c6e9946ec0..00000000000
--- a/packages/app-headless-cms/src/admin/components/ContentEntries/Filters/styles.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import styled from "@emotion/styled";
-
-export const FiltersContainer = styled.div`
-    width: 100%;
-    height: auto;
-    background-color: var(--mdc-theme-surface);
-    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
-    padding: 8px;
-`;
-
-export const FormContainer = styled.div`
-    display: flex;
-    flex-wrap: wrap;
-    width: 100%;
-`;
-
-export const FilterContainer = styled.div`
-    padding: 8px;
-`;
diff --git a/packages/app-headless-cms/src/admin/components/ContentEntries/Header/ButtonFilters/ButtonFilters.tsx b/packages/app-headless-cms/src/admin/components/ContentEntries/Header/ButtonFilters/ButtonFilters.tsx
index 63bd2fcfa5d..cd6590bf954 100644
--- a/packages/app-headless-cms/src/admin/components/ContentEntries/Header/ButtonFilters/ButtonFilters.tsx
+++ b/packages/app-headless-cms/src/admin/components/ContentEntries/Header/ButtonFilters/ButtonFilters.tsx
@@ -1,23 +1,7 @@
 import React, { useCallback } from "react";
-import styled from "@emotion/styled";
-import { ReactComponent as FilterIcon } from "@material-design-icons/svg/outlined/filter_alt.svg";
-import { ReactComponent as CloseFilterIcon } from "@material-design-icons/svg/outlined/filter_alt_off.svg";
-import { IconButton } from "@webiny/ui/Button";
+import { FiltersToggle } from "@webiny/app-admin";
 import { useContentEntriesList } from "~/admin/views/contentEntries/hooks";
 
-const ButtonWrapper = styled("div")`
-    margin: 0 8px;
-`;
-
-interface IconProps {
-    showingFilters?: boolean;
-}
-
-const Icon = ({ showingFilters }: IconProps) => {
-    return showingFilters ? <CloseFilterIcon /> : <FilterIcon />;
-};
-const IconComponent = React.memo(Icon);
-
 export const ButtonFilters = () => {
     const list = useContentEntriesList();
 
@@ -30,12 +14,10 @@ export const ButtonFilters = () => {
     }, [list.showingFilters]);
 
     return (
-        <ButtonWrapper>
-            <IconButton
-                icon={<IconComponent showingFilters={list.showingFilters} />}
-                onClick={toggleFilters}
-                data-testid="cms.list-entries.toggle-filters"
-            />
-        </ButtonWrapper>
+        <FiltersToggle
+            onFiltersToggle={toggleFilters}
+            showingFilters={list.showingFilters}
+            data-testid="cms.list-entries.toggle-filters"
+        />
     );
 };
diff --git a/packages/app-headless-cms/src/admin/components/ContentEntries/Header/ButtonsCreate/ButtonsCreate.tsx b/packages/app-headless-cms/src/admin/components/ContentEntries/Header/ButtonsCreate/ButtonsCreate.tsx
index fccac8cc00b..b51a74f6bf8 100644
--- a/packages/app-headless-cms/src/admin/components/ContentEntries/Header/ButtonsCreate/ButtonsCreate.tsx
+++ b/packages/app-headless-cms/src/admin/components/ContentEntries/Header/ButtonsCreate/ButtonsCreate.tsx
@@ -1,10 +1,8 @@
 import React from "react";
-import { ReactComponent as Add } from "@material-design-icons/svg/filled/add.svg";
+import { ReactComponent as Add } from "@webiny/icons/add.svg";
 import { i18n } from "@webiny/app/i18n";
-import { ButtonIcon, ButtonPrimary, ButtonSecondary } from "@webiny/ui/Button";
-import { Container } from "./styled";
-import { Tooltip } from "@webiny/ui/Tooltip";
 import { useModel } from "~/admin/hooks";
+import { Button, Tooltip } from "@webiny/admin-ui";
 
 const t = i18n.ns("app-headless-cms/admin/components/content-entries/header/buttons/create");
 
@@ -24,51 +22,48 @@ export const ButtonsCreate = ({
     const { model } = useModel();
 
     let newFolderButton = (
-        <ButtonSecondary
+        <Button
             data-testid="new-folder-button"
             onClick={onCreateFolder}
-            small={true}
             disabled={!canCreateFolder}
-        >
-            <ButtonIcon icon={<Add />} />
-            {t`New Folder`}
-        </ButtonSecondary>
+            text={t`New Folder`}
+            icon={<Add />}
+            variant={"secondary"}
+        />
     );
 
     if (!canCreateFolder) {
         newFolderButton = (
-            <Tooltip content={`Cannot create folder because you're not an owner.`}>
-                {newFolderButton}
-            </Tooltip>
+            <Tooltip
+                content={`Cannot create folder because you're not an owner.`}
+                trigger={newFolderButton}
+            />
         );
     }
 
     let newEntryButton = (
-        <ButtonPrimary
+        <Button
             data-testid="new-entry-button"
             onClick={onCreateEntry}
-            flat={true}
-            small={true}
             disabled={!canCreateContent}
-        >
-            <ButtonIcon icon={<Add />} />
-            New {model.name}
-        </ButtonPrimary>
+            text={`New ${model.name}`}
+            icon={<Add />}
+        />
     );
 
     if (!canCreateContent) {
         newEntryButton = (
-            <Tooltip content={`Cannot create entry because you're not an owner.`}>
-                {newEntryButton}
-            </Tooltip>
+            <Tooltip
+                content={`Cannot create entry because you're not an owner.`}
+                trigger={newEntryButton}
+            />
         );
     }
 
     return (
-        <Container>
+        <>
             {newFolderButton}
-            &nbsp;
             {newEntryButton}
-        </Container>
+        </>
     );
 };
diff --git a/packages/app-headless-cms/src/admin/components/ContentEntries/Header/ButtonsCreate/styled.tsx b/packages/app-headless-cms/src/admin/components/ContentEntries/Header/ButtonsCreate/styled.tsx
deleted file mode 100644
index 1fde8e4fba2..00000000000
--- a/packages/app-headless-cms/src/admin/components/ContentEntries/Header/ButtonsCreate/styled.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import styled from "@emotion/styled";
-
-export const Container = styled("div")`
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-    text-wrap: nowrap;
-`;
diff --git a/packages/app-headless-cms/src/admin/components/ContentEntries/Header/Header.tsx b/packages/app-headless-cms/src/admin/components/ContentEntries/Header/Header.tsx
index 1583583ea4a..c2b941a647a 100644
--- a/packages/app-headless-cms/src/admin/components/ContentEntries/Header/Header.tsx
+++ b/packages/app-headless-cms/src/admin/components/ContentEntries/Header/Header.tsx
@@ -1,11 +1,12 @@
 import React from "react";
+import { Separator } from "@webiny/admin-ui";
 import { Search } from "@webiny/app-aco";
 import { ButtonFilters } from "./ButtonFilters";
 import { ButtonsCreate } from "./ButtonsCreate";
 import { Title } from "./Title";
-import { ActionsColumn, Container, TitleColumn, WrapperActions } from "./styled";
 
 interface HeaderProps {
+    isRoot: boolean;
     title?: string;
     canCreateFolder: boolean;
     canCreateContent: boolean;
@@ -27,22 +28,33 @@ export const Header = (props: HeaderProps) => {
     } = props;
 
     return (
-        <Container>
-            <TitleColumn>
-                <Title title={title} />
-            </TitleColumn>
-            <ActionsColumn>
-                <WrapperActions>
-                    <Search value={searchValue} onChange={onSearchChange} />
-                    <ButtonFilters />
-                    <ButtonsCreate
-                        canCreateFolder={canCreateFolder}
-                        canCreateContent={canCreateContent}
-                        onCreateFolder={onCreateFolder}
-                        onCreateEntry={onCreateEntry}
-                    />
-                </WrapperActions>
-            </ActionsColumn>
-        </Container>
+        <>
+            <div className={"wby-flex wby-flex-col wby-gap-md"}>
+                <Title title={title} isRoot={props.isRoot} />
+                <div className={"wby-px-md wby-pb-sm"}>
+                    <div className={"wby-flex wby-items-center wby-gap-sm wby-w-full"}>
+                        <div className={"wby-flex-1"}>
+                            <Search
+                                value={searchValue}
+                                onChange={onSearchChange}
+                                placeholder={"Search..."}
+                            />
+                        </div>
+                        <div>
+                            <div className={"wby-flex wby-gap-sm"}>
+                                <ButtonFilters />
+                                <ButtonsCreate
+                                    canCreateFolder={canCreateFolder}
+                                    canCreateContent={canCreateContent}
+                                    onCreateFolder={onCreateFolder}
+                                    onCreateEntry={onCreateEntry}
+                                />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <Separator />
+        </>
     );
 };
diff --git a/packages/app-headless-cms/src/admin/components/ContentEntries/Header/Title/Title.tsx b/packages/app-headless-cms/src/admin/components/ContentEntries/Header/Title/Title.tsx
index 1015defb0fd..a10d81330bc 100644
--- a/packages/app-headless-cms/src/admin/components/ContentEntries/Header/Title/Title.tsx
+++ b/packages/app-headless-cms/src/admin/components/ContentEntries/Header/Title/Title.tsx
@@ -1,15 +1,28 @@
-import React from "react";
-import { Skeleton } from "@webiny/ui/Skeleton";
-import { Name } from "./styled";
+import React, { useMemo } from "react";
+import { Heading, Icon, Skeleton } from "@webiny/admin-ui";
+import { ReactComponent as HomeIcon } from "@webiny/icons/home.svg";
+import { ReactComponent as FolderIcon } from "@webiny/icons/folder.svg";
 
 interface TitleProps {
+    isRoot: boolean;
     title?: string;
 }
 
-export const Title = ({ title }: TitleProps) => {
+export const Title = ({ title, isRoot }: TitleProps) => {
+    const icon = useMemo(() => {
+        return isRoot ? <HomeIcon /> : <FolderIcon />;
+    }, [isRoot]);
+
     return (
-        <Name use={"headline6"} tag={"h1"}>
-            {title || <Skeleton theme={"dark"} />}
-        </Name>
+        <div className={"wby-w-5/12 wby-pt-md wby-px-lg"}>
+            {(title && (
+                <div className={"wby-flex wby-gap-sm wby-items-center"}>
+                    <Icon icon={icon} label={title} size={"md"} color={"neutral-strong"} />
+                    <Heading level={4} as={"h1"} className={"wby-truncate"}>
+                        {title}
+                    </Heading>
+                </div>
+            )) || <Skeleton size={"xl"} />}
+        </div>
     );
 };
diff --git a/packages/app-headless-cms/src/admin/components/ContentEntries/Header/Title/styled.tsx b/packages/app-headless-cms/src/admin/components/ContentEntries/Header/Title/styled.tsx
deleted file mode 100644
index 1ba8316295a..00000000000
--- a/packages/app-headless-cms/src/admin/components/ContentEntries/Header/Title/styled.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import styled from "@emotion/styled";
-import { Typography, TypographyProps } from "@webiny/ui/Typography";
-
-export const Name = styled(Typography)<TypographyProps>`
-    line-height: 48px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-`;
diff --git a/packages/app-headless-cms/src/admin/components/ContentEntries/Header/styled.tsx b/packages/app-headless-cms/src/admin/components/ContentEntries/Header/styled.tsx
deleted file mode 100644
index 6fe6df77135..00000000000
--- a/packages/app-headless-cms/src/admin/components/ContentEntries/Header/styled.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import styled from "@emotion/styled";
-
-export const Container = styled("div")`
-    padding: 8px 24px;
-    width: 100%;
-    height: 65px;
-    box-sizing: border-box;
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: 3;
-    background: var(--mdc-theme-surface);
-    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-`;
-
-export const TitleColumn = styled("div")`
-    width: 30%;
-`;
-
-export const ActionsColumn = styled("div")`
-    width: 60%;
-`;
-
-export const WrapperActions = styled("div")`
-    width: 100%;
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-    height: 100%;
-`;
diff --git a/packages/app-headless-cms/src/admin/components/ContentEntries/LoadMoreButton/LoadMoreButton.tsx b/packages/app-headless-cms/src/admin/components/ContentEntries/LoadMoreButton/LoadMoreButton.tsx
index 1b663a63843..772423b84e0 100644
--- a/packages/app-headless-cms/src/admin/components/ContentEntries/LoadMoreButton/LoadMoreButton.tsx
+++ b/packages/app-headless-cms/src/admin/components/ContentEntries/LoadMoreButton/LoadMoreButton.tsx
@@ -1,7 +1,6 @@
 import React from "react";
 import { i18n } from "@webiny/app/i18n";
-import { ButtonPrimary } from "@webiny/ui/Button";
-import { Container } from "./styled";
+import { Button } from "@webiny/admin-ui";
 
 const t = i18n.ns("app-headless-cms/admin/components/content-entries/load-more-button");
 
@@ -25,12 +24,8 @@ export const LoadMoreButton = ({
     }
 
     return (
-        <Container>
-            <ButtonPrimary
-                onClick={onClick}
-                disabled={disabled}
-                flat={true}
-            >{t`Load more entries`}</ButtonPrimary>
-        </Container>
+        <div className={"wby-flex wby-text-center wby-mt-md"}>
+            <Button onClick={onClick} disabled={disabled} text={t`Load more entries`} />
+        </div>
     );
 };
diff --git a/packages/app-headless-cms/src/admin/components/ContentEntries/LoadMoreButton/styled.tsx b/packages/app-headless-cms/src/admin/components/ContentEntries/LoadMoreButton/styled.tsx
deleted file mode 100644
index 3f2937fbe7c..00000000000
--- a/packages/app-headless-cms/src/admin/components/ContentEntries/LoadMoreButton/styled.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import styled from "@emotion/styled";
-
-export const Container = styled("div")`
-    display: flex;
-    justify-content: center;
-    margin-top: 16px;
-`;
diff --git a/packages/app-headless-cms/src/admin/components/ContentEntries/LoadingContentModel/LoadingContentModel.tsx b/packages/app-headless-cms/src/admin/components/ContentEntries/LoadingContentModel/LoadingContentModel.tsx
new file mode 100644
index 00000000000..8b75f9a0ffc
--- /dev/null
+++ b/packages/app-headless-cms/src/admin/components/ContentEntries/LoadingContentModel/LoadingContentModel.tsx
@@ -0,0 +1,10 @@
+import React from "react";
+import { OverlayLoader } from "@webiny/admin-ui";
+
+export const LoadingContentModel = () => {
+    return (
+        <div className={"wby-w-screen wby-h-screen wby-fixed wby-top-0 wby-left-0 wby-z-50"}>
+            <OverlayLoader text={"Loading content model..."} />
+        </div>
+    );
+};
diff --git a/packages/app-headless-cms/src/admin/components/ContentEntries/LoadingContentModel/index.tsx b/packages/app-headless-cms/src/admin/components/ContentEntries/LoadingContentModel/index.tsx
new file mode 100644
index 00000000000..0ca192b0ce5
--- /dev/null
+++ b/packages/app-headless-cms/src/admin/components/ContentEntries/LoadingContentModel/index.tsx
@@ -0,0 +1 @@
+export * from "./LoadingContentModel";
diff --git a/packages/app-headless-cms/src/admin/components/ContentEntries/LoadingMore/index.tsx b/packages/app-headless-cms/src/admin/components/ContentEntries/LoadingMore/index.tsx
deleted file mode 100644
index 2422a0f69a3..00000000000
--- a/packages/app-headless-cms/src/admin/components/ContentEntries/LoadingMore/index.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from "react";
-import { i18n } from "@webiny/app/i18n";
-import { Typography } from "@webiny/ui/Typography";
-import { CircularProgress } from "@webiny/ui/Progress";
-import { Container, LoaderContainer } from "./styled";
-
-const t = i18n.ns("app-headless-cms/admin/components/content-entries/loading-more");
-
-interface LoadingMoreProps {
-    show: boolean;
-}
-
-export const LoadingMore = ({ show }: LoadingMoreProps) => {
-    if (!show) {
-        return null;
-    }
-
-    return (
-        <Container>
-            <LoaderContainer>
-                <CircularProgress size={20} />
-            </LoaderContainer>
-            <Typography use={"body2"}>{t`Loading more entries...`}</Typography>
-        </Container>
-    );
-};
diff --git a/packages/app-headless-cms/src/admin/components/ContentEntries/LoadingMore/styled.tsx b/packages/app-headless-cms/src/admin/components/ContentEntries/LoadingMore/styled.tsx
deleted file mode 100644
index bc335479f46..00000000000
--- a/packages/app-headless-cms/src/admin/components/ContentEntries/LoadingMore/styled.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import styled from "@emotion/styled";
-
-export const Container = styled("div")`
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    z-index: 2;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 100%;
-    height: 40px;
-    background-color: var(--mdc-theme-background);
-    border-top: 1px solid var(--mdc-theme-on-background);
-`;
-
-export const LoaderContainer = styled("div")`
-    display: flex;
-    position: relative;
-    width: 50px;
-    > div {
-        background-color: var(--mdc-theme-background);
-    }
-`;
diff --git a/packages/app-headless-cms/src/admin/components/ContentEntries/SelectAll/Messages.tsx b/packages/app-headless-cms/src/admin/components/ContentEntries/SelectAll/Messages.tsx
deleted file mode 100644
index 2ba98615056..00000000000
--- a/packages/app-headless-cms/src/admin/components/ContentEntries/SelectAll/Messages.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import React from "react";
-import { Typography } from "@webiny/ui/Typography";
-import { getEntriesLabel } from "./SelectAll";
-import { Button, MessageContainer } from "./SelectAll.styled";
-
-export interface MessagesProps {
-    onClick: () => void;
-    selected: number;
-}
-
-export const SelectAllMessage = (props: MessagesProps) => {
-    return (
-        <MessageContainer>
-            <Typography use={"body1"}>{`${getEntriesLabel(props.selected)} selected.`}</Typography>
-            <Button small={true} onClick={props.onClick}>{`Select all remaining entries`}</Button>
-        </MessageContainer>
-    );
-};
-
-export const ClearSelectionMessage = (props: MessagesProps) => {
-    return (
-        <MessageContainer>
-            <Typography use={"body1"}>{`All entries are selected.`}</Typography>
-            <Button small={true} onClick={props.onClick}>{`Clear selection`}</Button>
-        </MessageContainer>
-    );
-};
diff --git a/packages/app-headless-cms/src/admin/components/ContentEntries/SelectAll/SelectAll.styled.tsx b/packages/app-headless-cms/src/admin/components/ContentEntries/SelectAll/SelectAll.styled.tsx
deleted file mode 100644
index bb1889b79e5..00000000000
--- a/packages/app-headless-cms/src/admin/components/ContentEntries/SelectAll/SelectAll.styled.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import styled from "@emotion/styled";
-import { ButtonDefault } from "@webiny/ui/Button";
-
-export const SelectAllContainer = styled.div`
-    width: 100%;
-    height: auto;
-    background-color: var(--mdc-theme-background);
-    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
-    padding: 16px;
-    text-align: center;
-`;
-
-export const MessageContainer = styled.div`
-    display: flex;
-    align-items: center;
-    justify-content: center;
-`;
-
-export const Button = styled(ButtonDefault)`
-    margin-left: 8px;
-`;
diff --git a/packages/app-headless-cms/src/admin/components/ContentEntries/SelectAll/SelectAll.tsx b/packages/app-headless-cms/src/admin/components/ContentEntries/SelectAll/SelectAll.tsx
deleted file mode 100644
index c71b8ba42c1..00000000000
--- a/packages/app-headless-cms/src/admin/components/ContentEntries/SelectAll/SelectAll.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from "react";
-import { useContentEntriesList } from "~/admin/views/contentEntries/hooks";
-import { SelectAllContainer } from "./SelectAll.styled";
-import { ClearSelectionMessage, SelectAllMessage } from "./Messages";
-
-export const getEntriesLabel = (count = 0): string => {
-    return `${count} ${count === 1 ? "entry" : "entries"}`;
-};
-
-export const SelectAll = () => {
-    const list = useContentEntriesList();
-
-    if (!list.showingSelectAll) {
-        return null;
-    }
-
-    return (
-        <SelectAllContainer data-testid={"select-all-container"}>
-            {list.isSelectedAll ? (
-                <ClearSelectionMessage onClick={list.unselectAll} selected={list.selected.length} />
-            ) : (
-                <SelectAllMessage onClick={list.selectAll} selected={list.selected.length} />
-            )}
-        </SelectAllContainer>
-    );
-};
diff --git a/packages/app-headless-cms/src/admin/components/ContentEntries/SelectAll/index.ts b/packages/app-headless-cms/src/admin/components/ContentEntries/SelectAll/index.ts
deleted file mode 100644
index 72c9bbafe39..00000000000
--- a/packages/app-headless-cms/src/admin/components/ContentEntries/SelectAll/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./SelectAll";
diff --git a/packages/app-headless-cms/src/admin/components/ContentEntries/SidebarContent/SidebarContent.tsx b/packages/app-headless-cms/src/admin/components/ContentEntries/SidebarContent/SidebarContent.tsx
new file mode 100644
index 00000000000..59a200eea53
--- /dev/null
+++ b/packages/app-headless-cms/src/admin/components/ContentEntries/SidebarContent/SidebarContent.tsx
@@ -0,0 +1,17 @@
+import React from "react";
+import { FolderTree, useNavigateFolder } from "@webiny/app-aco";
+
+export const SidebarContent = () => {
+    const { navigateToFolder, currentFolderId } = useNavigateFolder();
+
+    return (
+        <div className={"wby-p-xs wby-flex-1 wby-overflow-y-scroll"}>
+            <FolderTree
+                focusedFolderId={currentFolderId}
+                onFolderClick={data => navigateToFolder(data.id)}
+                enableActions={true}
+                enableCreate={true}
+            />
+        </div>
+    );
+};
diff --git a/packages/app-headless-cms/src/admin/components/ContentEntries/SidebarContent/index.ts b/packages/app-headless-cms/src/admin/components/ContentEntries/SidebarContent/index.ts
new file mode 100644
index 00000000000..f9b3204184b
--- /dev/null
+++ b/packages/app-headless-cms/src/admin/components/ContentEntries/SidebarContent/index.ts
@@ -0,0 +1 @@
+export * from "./SidebarContent";
diff --git a/packages/app-headless-cms/src/admin/components/ContentEntries/SidebarFooter/SidebarFooter.tsx b/packages/app-headless-cms/src/admin/components/ContentEntries/SidebarFooter/SidebarFooter.tsx
new file mode 100644
index 00000000000..af92784b745
--- /dev/null
+++ b/packages/app-headless-cms/src/admin/components/ContentEntries/SidebarFooter/SidebarFooter.tsx
@@ -0,0 +1,10 @@
+import React from "react";
+import { TrashBin } from "~/admin/components/ContentEntries/TrashBin";
+
+export const SidebarFooter = () => {
+    return (
+        <div className={"wby-px-xs wby-py-sm wby-bg-neutral-base"}>
+            <TrashBin />
+        </div>
+    );
+};
diff --git a/packages/app-headless-cms/src/admin/components/ContentEntries/SidebarFooter/index.ts b/packages/app-headless-cms/src/admin/components/ContentEntries/SidebarFooter/index.ts
new file mode 100644
index 00000000000..81d95a17124
--- /dev/null
+++ b/packages/app-headless-cms/src/admin/components/ContentEntries/SidebarFooter/index.ts
@@ -0,0 +1 @@
+export * from "./SidebarFooter";
diff --git a/packages/app-headless-cms/src/admin/components/ContentEntries/SidebarHeader/SidebarHeader.tsx b/packages/app-headless-cms/src/admin/components/ContentEntries/SidebarHeader/SidebarHeader.tsx
new file mode 100644
index 00000000000..d972c097941
--- /dev/null
+++ b/packages/app-headless-cms/src/admin/components/ContentEntries/SidebarHeader/SidebarHeader.tsx
@@ -0,0 +1,42 @@
+import React from "react";
+import { Heading, Link, Separator, Text, Tooltip } from "@webiny/admin-ui";
+import { useModel } from "@webiny/app-headless-cms-common";
+
+export const SidebarHeader = () => {
+    const { model } = useModel();
+
+    return (
+        <div>
+            <div className={"wby-p-md wby-pl-lg"}>
+                <Heading level={5}>{model.name}</Heading>
+                <Text size={"sm"} className={"wby-text-neutral-muted"}>
+                    Model ID:{" "}
+                    {model.plugin ? (
+                        <Tooltip
+                            side={"top"}
+                            content={"Content model is registered via a plugin."}
+                            trigger={model.modelId}
+                        />
+                    ) : (
+                        <Tooltip
+                            content={"Edit content model"}
+                            side={"top"}
+                            trigger={
+                                <Link
+                                    to={`/cms/content-models/${model.modelId}`}
+                                    variant={"secondary"}
+                                    className={
+                                        "wby-text-neutral-muted hover:wby-text-neutral-strong"
+                                    }
+                                >
+                                    {model.modelId}
+                                </Link>
+                            }
+                        />
+                    )}
+                </Text>
+            </div>
+            <Separator />
+        </div>
+    );
+};
diff --git a/packages/app-headless-cms/src/admin/components/ContentEntries/SidebarHeader/index.ts b/packages/app-headless-cms/src/admin/components/ContentEntries/SidebarHeader/index.ts
new file mode 100644
index 00000000000..1014b0afde5
--- /dev/null
+++ b/packages/app-headless-cms/src/admin/components/ContentEntries/SidebarHeader/index.ts
@@ -0,0 +1 @@
+export * from "./SidebarHeader";
diff --git a/packages/app-headless-cms/src/admin/components/ContentEntries/Table/Actions/ChangeEntryStatus.tsx b/packages/app-headless-cms/src/admin/components/ContentEntries/Table/Actions/ChangeEntryStatus.tsx
index f0cff3d8634..17576b8262b 100644
--- a/packages/app-headless-cms/src/admin/components/ContentEntries/Table/Actions/ChangeEntryStatus.tsx
+++ b/packages/app-headless-cms/src/admin/components/ContentEntries/Table/Actions/ChangeEntryStatus.tsx
@@ -1,6 +1,6 @@
 import React from "react";
-import { ReactComponent as Publish } from "@material-design-icons/svg/outlined/publish.svg";
-import { ReactComponent as Unpublish } from "@material-design-icons/svg/outlined/settings_backup_restore.svg";
+import { ReactComponent as Publish } from "@webiny/icons/visibility.svg";
+import { ReactComponent as Unpublish } from "@webiny/icons/visibility_off.svg";
 import { ContentEntryListConfig } from "~/admin/config/contentEntries";
 import { useContentEntry, useEntry, usePermission } from "~/admin/hooks";
 
diff --git a/packages/app-headless-cms/src/admin/components/ContentEntries/Table/Actions/DeleteEntry.tsx b/packages/app-headless-cms/src/admin/components/ContentEntries/Table/Actions/DeleteEntry.tsx
index 76dff2b8a72..e2ae03e1ed0 100644
--- a/packages/app-headless-cms/src/admin/components/ContentEntries/Table/Actions/DeleteEntry.tsx
+++ b/packages/app-headless-cms/src/admin/components/ContentEntries/Table/Actions/DeleteEntry.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { ReactComponent as Delete } from "@material-design-icons/svg/outlined/delete.svg";
+import { ReactComponent as Delete } from "@webiny/icons/delete.svg";
 import { ContentEntryListConfig } from "~/admin/config/contentEntries";
 import { useContentEntry, useEntry, usePermission } from "~/admin/hooks";
 
@@ -23,6 +23,7 @@ export const DeleteEntry = () => {
             label={"Trash"}
             onAction={deleteEntry}
             data-testid={"aco.actions.entry.delete"}
+            className={"!wby-text-destructive-primary [&_svg]:wby-fill-destructive"}
         />
     );
 };
diff --git a/packages/app-headless-cms/src/admin/components/ContentEntries/Table/Actions/EditEntry.tsx b/packages/app-headless-cms/src/admin/components/ContentEntries/Table/Actions/EditEntry.tsx
index b1e49b8da08..1aa6a7e4a7f 100644
--- a/packages/app-headless-cms/src/admin/components/ContentEntries/Table/Actions/EditEntry.tsx
+++ b/packages/app-headless-cms/src/admin/components/ContentEntries/Table/Actions/EditEntry.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { ReactComponent as Edit } from "@material-design-icons/svg/outlined/edit.svg";
+import { ReactComponent as Edit } from "@webiny/icons/edit.svg";
 import { ContentEntryListConfig } from "~/admin/config/contentEntries";
 import { useContentEntriesList, useEntry, usePermission } from "~/admin/hooks";
 
diff --git a/packages/app-headless-cms/src/admin/components/ContentEntries/Table/Actions/MoveEntry.tsx b/packages/app-headless-cms/src/admin/components/ContentEntries/Table/Actions/MoveEntry.tsx
index 81cf8b3c739..99e22dc2f10 100644
--- a/packages/app-headless-cms/src/admin/components/ContentEntries/Table/Actions/MoveEntry.tsx
+++ b/packages/app-headless-cms/src/admin/components/ContentEntries/Table/Actions/MoveEntry.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { ReactComponent as Move } from "@material-design-icons/svg/outlined/drive_file_move.svg";
+import { ReactComponent as Move } from "@webiny/icons/exit_to_app.svg";
 import { ContentEntryListConfig } from "~/admin/config/contentEntries";
 import { useEntry, useMoveContentEntryToFolder } from "~/admin/hooks";
 
diff --git a/packages/app-headless-cms/src/admin/components/ContentEntries/Table/Cells/CellName.tsx b/packages/app-headless-cms/src/admin/components/ContentEntries/Table/Cells/CellName.tsx
index 1c4f3c096ea..f1eac6fe488 100644
--- a/packages/app-headless-cms/src/admin/components/ContentEntries/Table/Cells/CellName.tsx
+++ b/packages/app-headless-cms/src/admin/components/ContentEntries/Table/Cells/CellName.tsx
@@ -1,16 +1,15 @@
 import React from "react";
 
-import { ReactComponent as Folder } from "@material-design-icons/svg/outlined/folder.svg";
-import { ReactComponent as FolderShared } from "@material-design-icons/svg/outlined/folder_shared.svg";
-import { ReactComponent as File } from "@material-design-icons/svg/outlined/description.svg";
+import { Icon, Link, Text } from "@webiny/admin-ui";
+import { ReactComponent as Folder } from "@webiny/icons/folder.svg";
+import { ReactComponent as FolderShared } from "@webiny/icons/folder_shared.svg";
+import { ReactComponent as File } from "@webiny/icons/description.svg";
 import { useNavigateFolder } from "@webiny/app-aco";
 
 import { ContentEntryListConfig } from "~/admin/config/contentEntries";
 import { useContentEntriesList } from "~/admin/views/contentEntries/hooks";
 import { usePermission } from "~/admin/hooks";
 
-import { LinkTitle, RowIcon, RowText, RowTitle } from "./Cells.styled";
-
 import { FolderTableItem } from "@webiny/app-aco/types";
 import { EntryTableItem } from "~/types";
 
@@ -27,10 +26,20 @@ export const FolderCellName = ({ folder }: FolderCellNameProps) => {
     }
 
     return (
-        <RowTitle onClick={() => navigateToFolder(folder.id)}>
-            <RowIcon>{icon}</RowIcon>
-            <RowText use={"subtitle2"}>{folder.title}</RowText>
-        </RowTitle>
+        <div
+            className={
+                "wby-flex wby-items-center wby-gap-sm wby-truncate wby-cursor-pointer wby-font-semibold hover:wby-underline"
+            }
+            onClick={() => navigateToFolder(folder.id)}
+        >
+            <Icon
+                size={"sm"}
+                color={"neutral-strong"}
+                icon={icon}
+                label={`Folder - ${folder.title}`}
+            />
+            <Text className={"wby-truncate wby-min-w-0 wby-flex-shrink"}>{folder.title}</Text>
+        </div>
     );
 };
 
@@ -40,12 +49,15 @@ interface EntryCellRowTitleProps {
 
 const EntryCellRowTitle = ({ entry }: EntryCellRowTitleProps) => {
     return (
-        <RowTitle>
-            <RowIcon>
-                <File />
-            </RowIcon>
-            <RowText use={"subtitle2"}>{entry.meta.title}</RowText>
-        </RowTitle>
+        <div className={"wby-flex wby-items-center wby-gap-sm wby-truncate"}>
+            <Icon
+                size={"sm"}
+                color={"neutral-strong"}
+                icon={<File />}
+                label={`Entry - ${entry.meta.title}`}
+            />
+            <Text className={"wby-truncate wby-min-w-0 wby-flex-shrink"}>{entry.meta.title}</Text>
+        </div>
     );
 };
 
@@ -64,9 +76,9 @@ export const EntryCellName = ({ entry }: EntryCellNameProps) => {
     }
 
     return (
-        <LinkTitle to={entryEditUrl}>
+        <Link to={entryEditUrl} variant={"secondary"} className={"wby-truncate"}>
             <EntryCellRowTitle entry={entry} />
-        </LinkTitle>
+        </Link>
     );
 };
 
diff --git a/packages/app-headless-cms/src/admin/components/ContentEntries/Table/Cells/CellStatus.tsx b/packages/app-headless-cms/src/admin/components/ContentEntries/Table/Cells/CellStatus.tsx
index c3b0d4a3b30..21d7336ff7e 100644
--- a/packages/app-headless-cms/src/admin/components/ContentEntries/Table/Cells/CellStatus.tsx
+++ b/packages/app-headless-cms/src/admin/components/ContentEntries/Table/Cells/CellStatus.tsx
@@ -1,6 +1,7 @@
-import React from "react";
+import React, { useMemo } from "react";
 import { statuses } from "~/admin/constants";
 import { ContentEntryListConfig } from "~/admin/config/contentEntries";
+import { Tag } from "@webiny/admin-ui";
 
 export const CellStatus = () => {
     const { useTableRow, isFolderRow } = ContentEntryListConfig.Browser.Table.Column;
@@ -10,7 +11,23 @@ export const CellStatus = () => {
         return <>{"-"}</>;
     }
 
+    const variant = useMemo(() => {
+        switch (row.meta.status) {
+            case "published":
+                return "success";
+            case "unpublished":
+                return "warning";
+            default:
+                return "neutral-light";
+        }
+    }, [row.meta.status]);
+
     return (
-        <>{`${statuses[row.meta.status]}${row.meta.version ? ` (v${row.meta.version})` : ""}`}</>
+        <Tag
+            variant={variant}
+            content={`${statuses[row.meta.status]}${
+                row.meta.version ? ` (v${row.meta.version})` : ""
+            }`}
+        />
     );
 };
diff --git a/packages/app-headless-cms/src/admin/components/ContentEntries/Table/Cells/Cells.styled.tsx b/packages/app-headless-cms/src/admin/components/ContentEntries/Table/Cells/Cells.styled.tsx
deleted file mode 100644
index 96e04e294cb..00000000000
--- a/packages/app-headless-cms/src/admin/components/ContentEntries/Table/Cells/Cells.styled.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import styled from "@emotion/styled";
-import { Link } from "@webiny/react-router";
-import { Typography } from "@webiny/ui/Typography";
-
-export const RowTitle = styled("div")`
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-`;
-
-export const LinkTitle = styled(Link)`
-    color: var(--mdc-theme-text-primary-on-background);
-`;
-
-export const RowIcon = styled("div")`
-    margin-right: 8px;
-    height: 24px;
-`;
-
-export const RowText = styled(Typography)`
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-`;
diff --git a/packages/app-headless-cms/src/admin/components/ContentEntries/Table/index.tsx b/packages/app-headless-cms/src/admin/components/ContentEntries/Table/index.tsx
index 23642afd68e..0d97ae5992a 100644
--- a/packages/app-headless-cms/src/admin/components/ContentEntries/Table/index.tsx
+++ b/packages/app-headless-cms/src/admin/components/ContentEntries/Table/index.tsx
@@ -2,7 +2,6 @@ import React, { ForwardRefRenderFunction, useMemo } from "react";
 import { Table as AcoTable } from "@webiny/app-aco";
 import { useContentEntriesList, useModel } from "~/admin/hooks";
 import { TableItem } from "~/types";
-import { TableContainer } from "./styled";
 
 const BaseTable: ForwardRefRenderFunction<HTMLDivElement> = (_, ref) => {
     const { model } = useModel();
@@ -13,7 +12,7 @@ const BaseTable: ForwardRefRenderFunction<HTMLDivElement> = (_, ref) => {
     }, [list.folders, list.records]);
 
     return (
-        <TableContainer ref={ref}>
+        <div className={"wby-mb-xl"} ref={ref}>
             <AcoTable<TableItem>
                 data={data}
                 nameColumnId={model.titleFieldId || "id"}
@@ -24,7 +23,7 @@ const BaseTable: ForwardRefRenderFunction<HTMLDivElement> = (_, ref) => {
                 onSelectRow={list.onSelectRow}
                 selected={list.selected}
             />
-        </TableContainer>
+        </div>
     );
 };
 
diff --git a/packages/app-headless-cms/src/admin/components/ContentEntries/Table/styled.tsx b/packages/app-headless-cms/src/admin/components/ContentEntries/Table/styled.tsx
deleted file mode 100644
index b3f6ac4e7bf..00000000000
--- a/packages/app-headless-cms/src/admin/components/ContentEntries/Table/styled.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import styled from "@emotion/styled";
-
-export const TableContainer = styled.div`
-    margin-bottom: 31px;
-`;
diff --git a/packages/app-headless-cms/src/admin/components/ContentEntries/TrashBin/components/TrashBin.styled.tsx b/packages/app-headless-cms/src/admin/components/ContentEntries/TrashBin/components/TrashBin.styled.tsx
index 3ff837314cd..d3b367c13d1 100644
--- a/packages/app-headless-cms/src/admin/components/ContentEntries/TrashBin/components/TrashBin.styled.tsx
+++ b/packages/app-headless-cms/src/admin/components/ContentEntries/TrashBin/components/TrashBin.styled.tsx
@@ -1,5 +1,5 @@
 import styled from "@emotion/styled";
-import { ReactComponent as Plus } from "@material-design-icons/svg/filled/delete.svg";
+import { ReactComponent as Plus } from "@webiny/icons/delete.svg";
 
 export const Button = styled("button")`
     background: none;
diff --git a/packages/app-headless-cms/src/admin/components/ContentEntries/TrashBin/components/TrashBinButton.tsx b/packages/app-headless-cms/src/admin/components/ContentEntries/TrashBin/components/TrashBinButton.tsx
index 33878b5ed41..324c56c4a7d 100644
--- a/packages/app-headless-cms/src/admin/components/ContentEntries/TrashBin/components/TrashBinButton.tsx
+++ b/packages/app-headless-cms/src/admin/components/ContentEntries/TrashBin/components/TrashBinButton.tsx
@@ -1,6 +1,6 @@
 import React from "react";
-import { Typography } from "@webiny/ui/Typography";
-import { Button, Icon, IconContainer } from "./TrashBin.styled";
+import { Sidebar } from "@webiny/admin-ui";
+import { ReactComponent as Delete } from "@webiny/icons/delete.svg";
 
 export interface TrashBinButtonProps {
     onClick: () => void;
@@ -8,11 +8,12 @@ export interface TrashBinButtonProps {
 
 export const TrashBinButton = (props: TrashBinButtonProps) => {
     return (
-        <Button onClick={props.onClick}>
-            <IconContainer>
-                <Icon />
-            </IconContainer>
-            <Typography use={"subtitle2"}>{"Trash"}</Typography>
-        </Button>
+        <div className={"wby-list-none"}>
+            <Sidebar.Item
+                onClick={props.onClick}
+                text={"Trash"}
+                icon={<Sidebar.Item.Icon element={<Delete />} label={"Delete"} />}
+            />
+        </div>
     );
 };
diff --git a/packages/app-headless-cms/src/admin/components/ContentEntryForm/ContentEntryForm.tsx b/packages/app-headless-cms/src/admin/components/ContentEntryForm/ContentEntryForm.tsx
index a1238f730b3..3ac2a7f9608 100644
--- a/packages/app-headless-cms/src/admin/components/ContentEntryForm/ContentEntryForm.tsx
+++ b/packages/app-headless-cms/src/admin/components/ContentEntryForm/ContentEntryForm.tsx
@@ -1,5 +1,4 @@
 import React, { useEffect, useRef } from "react";
-import styled from "@emotion/styled";
 import { FormOnSubmit, FormValidation } from "@webiny/form";
 import { makeDecoratable } from "@webiny/app-admin";
 import { CmsContentEntry } from "~/types";
@@ -14,11 +13,6 @@ import { CustomLayout } from "./CustomLayout";
 import { DefaultLayout } from "./DefaultLayout";
 import { useGoToRevision } from "~/admin/components/ContentEntryForm/useGoToRevision";
 
-const FormWrapper = styled("div")({
-    height: "calc(100vh - 260px)",
-    overflow: "auto"
-});
-
 export interface ContentEntryFormProps
     extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
     entry: Partial<CmsContentEntry>;
@@ -91,13 +85,19 @@ export const ContentEntryForm = makeDecoratable(
             >
                 <ModelProvider model={model}>
                     {header ? header : null}
-                    <FormWrapper {...props} data-testid={"cms-content-form"} ref={formElementRef}>
+                    <div
+                        {...props}
+                        id={"cms-content-form"}
+                        data-element={"cms-content-form"}
+                        data-testid={"cms-content-form"}
+                        ref={formElementRef}
+                    >
                         {formRenderer ? (
                             <CustomLayout model={model} formRenderer={formRenderer} />
                         ) : (
                             <DefaultLayout model={model} />
                         )}
-                    </FormWrapper>
+                    </div>
                 </ModelProvider>
             </ContentEntryFormProvider>
         );
diff --git a/packages/app-headless-cms/src/admin/components/ContentEntryForm/ContentEntryFormPreview.tsx b/packages/app-headless-cms/src/admin/components/ContentEntryForm/ContentEntryFormPreview.tsx
index 35c3bf13a8e..4207cbb8888 100644
--- a/packages/app-headless-cms/src/admin/components/ContentEntryForm/ContentEntryFormPreview.tsx
+++ b/packages/app-headless-cms/src/admin/components/ContentEntryForm/ContentEntryFormPreview.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-import styled from "@emotion/styled";
 import { makeDecoratable } from "@webiny/app-admin";
 import { CmsContentEntry, CmsEditorContentModel } from "~/types";
 import { ModelProvider } from "~/admin/components/ModelProvider";
@@ -8,11 +7,6 @@ import { CustomLayout } from "~/admin/components/ContentEntryForm/CustomLayout";
 import { DefaultLayout } from "~/admin/components/ContentEntryForm/DefaultLayout";
 import { ContentEntryFormProvider } from "./ContentEntryFormProvider";
 
-const FormWrapper = styled("div")({
-    height: "calc(100vh - 260px)",
-    overflow: "auto"
-});
-
 export interface ContentEntryFormPreviewProps {
     contentModel: CmsEditorContentModel;
 }
@@ -32,13 +26,16 @@ export const ContentEntryFormPreview = makeDecoratable(
                 confirmNavigationIfDirty={false}
             >
                 <ModelProvider model={contentModel}>
-                    <FormWrapper data-testid={"cms-content-form"}>
+                    <div
+                        className={"wby-h-calc(100vh-260px) wby-overflow-auto"}
+                        data-testid={"cms-content-form"}
+                    >
                         {formRenderer ? (
                             <CustomLayout model={contentModel} formRenderer={formRenderer} />
                         ) : (
                             <DefaultLayout model={contentModel} />
                         )}
-                    </FormWrapper>
+                    </div>
                 </ModelProvider>
             </ContentEntryFormProvider>
         );
diff --git a/packages/app-headless-cms/src/admin/components/ContentEntryForm/Header/ContentFormOptionsMenu/ContentFormOptionsMenu.styles.tsx b/packages/app-headless-cms/src/admin/components/ContentEntryForm/Header/ContentFormOptionsMenu/ContentFormOptionsMenu.styles.tsx
deleted file mode 100644
index 2b1931cb864..00000000000
--- a/packages/app-headless-cms/src/admin/components/ContentEntryForm/Header/ContentFormOptionsMenu/ContentFormOptionsMenu.styles.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import styled from "@emotion/styled";
-
-export const OptionMenuContainer = styled("div")`
-    margin-left: 8px;
-`;
diff --git a/packages/app-headless-cms/src/admin/components/ContentEntryForm/Header/ContentFormOptionsMenu/ContentFormOptionsMenu.tsx b/packages/app-headless-cms/src/admin/components/ContentEntryForm/Header/ContentFormOptionsMenu/ContentFormOptionsMenu.tsx
index 25b27ed4fb4..451a9cfb1d0 100644
--- a/packages/app-headless-cms/src/admin/components/ContentEntryForm/Header/ContentFormOptionsMenu/ContentFormOptionsMenu.tsx
+++ b/packages/app-headless-cms/src/admin/components/ContentEntryForm/Header/ContentFormOptionsMenu/ContentFormOptionsMenu.tsx
@@ -1,18 +1,14 @@
 import React from "react";
 import { OptionsMenu } from "@webiny/app-admin";
-
 import { useContentEntryEditorConfig } from "~/admin/config/contentEntries";
-import { OptionMenuContainer } from "./ContentFormOptionsMenu.styles";
 
 export const ContentFormOptionsMenu = () => {
     const { menuItemActions } = useContentEntryEditorConfig();
 
     return (
-        <OptionMenuContainer>
-            <OptionsMenu
-                actions={menuItemActions}
-                data-testid={"cms.content-form.header.more-options"}
-            />
-        </OptionMenuContainer>
+        <OptionsMenu
+            actions={menuItemActions}
+            data-testid={"cms.content-form.header.more-options"}
+        />
     );
 };
diff --git a/packages/app-headless-cms/src/admin/components/ContentEntryForm/Header/DeleteEntry/DeleteEntry.tsx b/packages/app-headless-cms/src/admin/components/ContentEntryForm/Header/DeleteEntry/DeleteEntry.tsx
index bec2fac90f0..9181f8ecd4b 100644
--- a/packages/app-headless-cms/src/admin/components/ContentEntryForm/Header/DeleteEntry/DeleteEntry.tsx
+++ b/packages/app-headless-cms/src/admin/components/ContentEntryForm/Header/DeleteEntry/DeleteEntry.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { ReactComponent as DeleteIcon } from "@material-design-icons/svg/outlined/delete.svg";
+import { ReactComponent as DeleteIcon } from "@webiny/icons/delete.svg";
 import { useNavigateFolder } from "@webiny/app-aco";
 import { usePermission } from "~/admin/hooks";
 import { ContentEntryEditorConfig } from "~/admin/config/contentEntries";
diff --git a/packages/app-headless-cms/src/admin/components/ContentEntryForm/Header/Header.tsx b/packages/app-headless-cms/src/admin/components/ContentEntryForm/Header/Header.tsx
index fa694a59255..dbcac6e480e 100644
--- a/packages/app-headless-cms/src/admin/components/ContentEntryForm/Header/Header.tsx
+++ b/packages/app-headless-cms/src/admin/components/ContentEntryForm/Header/Header.tsx
@@ -5,37 +5,26 @@ import { useContentEntryEditorConfig } from "~/admin/config/contentEntries";
 
 import { ContentFormOptionsMenu } from "./ContentFormOptionsMenu";
 import { RevisionSelector } from "~/admin/components/ContentEntryForm/Header/RevisionSelector";
-import styled from "@emotion/styled";
 import { Helmet } from "react-helmet";
 import { useContentEntry } from "~/admin/views/contentEntries/hooks";
 
-const ToolbarGrid = styled.div`
-    padding: 15px;
-    border-bottom: 1px solid var(--mdc-theme-on-background);
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-`;
-
-const Actions = styled.div`
-    display: flex;
-    align-items: center;
-`;
-
 export const Header = makeDecoratable("ContentEntryFormHeader", () => {
     const { buttonActions } = useContentEntryEditorConfig();
     const { entry } = useContentEntry();
 
     return (
-        <ToolbarGrid id="headerToolbarGrid">
+        <div
+            className={
+                "wby-flex wby-items-center wby-justify-between wby-gap-sm wby-border-b-sm wby-border-neutral-dimmed wby-pb-md wby-mb-md"
+            }
+            id="headerToolbarGrid"
+        >
             {entry.meta?.title ? <Helmet title={entry.meta.title} /> : null}
-            <div>
-                <RevisionSelector />
-            </div>
-            <Actions>
+            <RevisionSelector />
+            <div className={"wby-flex wby-items-center wby-gap-sm"}>
                 <Buttons actions={buttonActions} />
                 <ContentFormOptionsMenu />
-            </Actions>
-        </ToolbarGrid>
+            </div>
+        </div>
     );
 });
diff --git a/packages/app-headless-cms/src/admin/components/ContentEntryForm/Header/RevisionSelector/RevisionSelector.styles.tsx b/packages/app-headless-cms/src/admin/components/ContentEntryForm/Header/RevisionSelector/RevisionSelector.styles.tsx
deleted file mode 100644
index aa76bf586e0..00000000000
--- a/packages/app-headless-cms/src/admin/components/ContentEntryForm/Header/RevisionSelector/RevisionSelector.styles.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import styled from "@emotion/styled";
-import { ButtonDefault as DefaultButtonDefault } from "@webiny/ui/Button";
-import { Menu as DefaultMenu } from "@webiny/ui/Menu";
-
-export const Button = styled(DefaultButtonDefault)`
-    color: var(--mdc-theme-text-primary-on-background) !important;
-    text-wrap: nowrap;
-`;
-
-export const Menu = styled(DefaultMenu)`
-    width: 150px;
-    right: 0;
-
-    .mdc-deprecated-list-item {
-        flex-direction: column;
-        justify-content: center;
-        align-items: baseline;
-        text-align: left;
-    }
-`;
diff --git a/packages/app-headless-cms/src/admin/components/ContentEntryForm/Header/RevisionSelector/RevisionSelector.tsx b/packages/app-headless-cms/src/admin/components/ContentEntryForm/Header/RevisionSelector/RevisionSelector.tsx
index ae73961ec6c..a1652095ccc 100644
--- a/packages/app-headless-cms/src/admin/components/ContentEntryForm/Header/RevisionSelector/RevisionSelector.tsx
+++ b/packages/app-headless-cms/src/admin/components/ContentEntryForm/Header/RevisionSelector/RevisionSelector.tsx
@@ -1,16 +1,12 @@
 import React from "react";
 import get from "lodash/get";
 import { useRouter } from "@webiny/react-router";
-import { Icon } from "@webiny/ui/Icon";
-import { Typography } from "@webiny/ui/Typography";
-import { MenuItem } from "@webiny/ui/Menu";
-import { ReactComponent as DownButton } from "@material-design-icons/svg/round/arrow_drop_down.svg";
+import { Button, DropdownMenu, Text } from "@webiny/admin-ui";
+import { ReactComponent as DownButton } from "@webiny/icons/keyboard_arrow_down.svg";
 import { useContentEntry } from "~/admin/views/contentEntries/hooks/useContentEntry";
 import { statuses as statusLabels } from "~/admin/constants";
 import { CmsContentEntryRevision } from "~/types";
 
-import { Button, Menu } from "./RevisionSelector.styles";
-
 interface CmsEntryRevision extends Pick<CmsContentEntryRevision, "id"> {
     meta: Pick<CmsContentEntryRevision["meta"], "version" | "status">;
 }
@@ -38,26 +34,36 @@ export const RevisionSelector = () => {
     const allRevisions = revisions.length ? revisions : defaultRevisions;
 
     return (
-        <Menu
-            handle={
-                <Button disabled={loading}>
-                    v{currentRevision.version} ({statusLabels[currentRevision.status]}){" "}
-                    <Icon icon={<DownButton />} />
-                </Button>
+        <DropdownMenu
+            trigger={
+                <Button
+                    variant={"secondary"}
+                    disabled={loading}
+                    icon={<DownButton />}
+                    iconPosition={"end"}
+                    text={
+                        <>
+                            v{currentRevision.version} ({statusLabels[currentRevision.status]})
+                        </>
+                    }
+                />
             }
         >
             {allRevisions.map(revision => (
-                <MenuItem
+                <DropdownMenu.Item
                     key={revision.id}
                     onClick={() => {
                         query.set("id", encodeURIComponent(revision.id));
                         history.push({ search: query.toString() });
                     }}
-                >
-                    <Typography use={"body2"}>v{revision.meta.version}</Typography>
-                    <Typography use={"caption"}>({statusLabels[revision.meta.status]})</Typography>
-                </MenuItem>
+                    text={
+                        <>
+                            <Text as={"div"}>v{revision.meta.version}</Text>
+                            <Text size={"sm"}>({statusLabels[revision.meta.status]})</Text>
+                        </>
+                    }
+                />
             ))}
-        </Menu>
+        </DropdownMenu>
     );
 };
diff --git a/packages/app-headless-cms/src/admin/components/ContentEntryForm/Header/ShowRevisionsList/ShowRevisionList.tsx b/packages/app-headless-cms/src/admin/components/ContentEntryForm/Header/ShowRevisionsList/ShowRevisionList.tsx
index ad8f164e6a2..1823894c914 100644
--- a/packages/app-headless-cms/src/admin/components/ContentEntryForm/Header/ShowRevisionsList/ShowRevisionList.tsx
+++ b/packages/app-headless-cms/src/admin/components/ContentEntryForm/Header/ShowRevisionsList/ShowRevisionList.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { ReactComponent as ListIcon } from "@material-design-icons/svg/outlined/checklist.svg";
+import { ReactComponent as ListIcon } from "@webiny/icons/checklist.svg";
 import { ContentEntryEditorConfig } from "~/admin/config/contentEntries";
 import { useFullScreenContentEntry } from "~/admin/views/contentEntries/ContentEntry/FullScreenContentEntry/useFullScreenContentEntry";
 
diff --git a/packages/app-headless-cms/src/admin/components/ContentEntryForm/SingletonHeader/SingletonHeader.tsx b/packages/app-headless-cms/src/admin/components/ContentEntryForm/SingletonHeader/SingletonHeader.tsx
index ecb97bdb08d..2a04b8b5824 100644
--- a/packages/app-headless-cms/src/admin/components/ContentEntryForm/SingletonHeader/SingletonHeader.tsx
+++ b/packages/app-headless-cms/src/admin/components/ContentEntryForm/SingletonHeader/SingletonHeader.tsx
@@ -1,26 +1,7 @@
 import React from "react";
 import { Buttons } from "@webiny/app-admin";
-import styled from "@emotion/styled";
 import { SaveAction } from "./SaveAction";
-
-const ToolbarGrid = styled.div`
-    padding: 15px;
-    border-bottom: 1px solid var(--mdc-theme-on-background);
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-`;
-
-const Actions = styled.div`
-    display: flex;
-    align-items: center;
-`;
-
-const ModelName = styled.div`
-    font-family: var(--mdc-typography-font-family);
-    padding: 10px 0;
-    font-size: 24px;
-`;
+import { Grid, Heading } from "@webiny/admin-ui";
 
 export interface SingletonHeaderProps {
     title: string;
@@ -28,11 +9,19 @@ export interface SingletonHeaderProps {
 
 export const SingletonHeader = ({ title }: SingletonHeaderProps) => {
     return (
-        <ToolbarGrid>
-            <ModelName>{title}</ModelName>
-            <Actions>
-                <Buttons actions={[{ name: "save", element: <SaveAction /> }]} />
-            </Actions>
-        </ToolbarGrid>
+        <div className={"wby-p-md wby-pl-lg wby-border-b-sm wby-border-neutral-dimmed-darker"}>
+            <Grid>
+                <Grid.Column span={9}>
+                    <Heading level={4} className={"wby-truncate"}>
+                        {title}
+                    </Heading>
+                </Grid.Column>
+                <Grid.Column span={3}>
+                    <div className="wby-flex wby-items-center wby-justify-end">
+                        <Buttons actions={[{ name: "save", element: <SaveAction /> }]} />
+                    </div>
+                </Grid.Column>
+            </Grid>
+        </div>
     );
 };
diff --git a/packages/app-headless-cms/src/admin/components/ContentModelEditor/ContentModelEditor.tsx b/packages/app-headless-cms/src/admin/components/ContentModelEditor/ContentModelEditor.tsx
index 185c27ef97c..598ac99e4f7 100644
--- a/packages/app-headless-cms/src/admin/components/ContentModelEditor/ContentModelEditor.tsx
+++ b/packages/app-headless-cms/src/admin/components/ContentModelEditor/ContentModelEditor.tsx
@@ -1,15 +1,11 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { makeDecoratable } from "@webiny/app-admin";
 import { Prompt } from "@webiny/react-router";
-import styled from "@emotion/styled";
-import { css } from "emotion";
 import { i18n } from "@webiny/app/i18n";
-import { CircularProgress } from "@webiny/ui/Progress";
 import { LeftPanel, RightPanel, SplitView } from "@webiny/app-admin/components/SplitView";
-import { Icon } from "@webiny/ui/Icon";
-import { Typography } from "@webiny/ui/Typography";
-import { Tab, Tabs } from "@webiny/ui/Tabs";
-import { ReactComponent as FormIcon } from "./icons/round-assignment-24px.svg";
+import { Heading, OverlayLoader, Separator, Tabs, Text, TimeAgo } from "@webiny/admin-ui";
+import { ReactComponent as EditIcon } from "@webiny/icons/edit.svg";
+import { ReactComponent as PreviewIcon } from "@webiny/icons/fullscreen.svg";
 import { FieldsSidebar } from "./FieldsSidebar";
 import { FieldEditor } from "../FieldEditor";
 import { PreviewTab } from "./PreviewTab";
@@ -26,111 +22,124 @@ const t = i18n.ns("app-headless-cms/admin/editor");
 
 const prompt = t`There are some unsaved changes! Are you sure you want to navigate away and discard all changes?`;
 
-const ContentContainer = styled("div")({
-    paddingTop: 65
-});
-
-export const EditContainer = styled("div")({
-    padding: 40,
-    position: "relative"
-});
-
-const LeftBarTitle = styled("div")({
-    borderBottom: "1px solid var(--mdc-theme-on-background)",
-    display: "flex",
-    alignItems: "center",
-    padding: 25,
-    color: "var(--mdc-theme-on-surface)"
-});
-
-const titleIcon = css({
-    height: 24,
-    marginRight: 15,
-    color: "var(--mdc-theme-primary)"
-});
-
-const LeftBarFieldList = styled("div")({
-    padding: 40,
-    overflow: "auto",
-    height: "calc(100vh - 250px)"
-});
-
-const formTabs = css({
-    "&.webiny-ui-tabs": {
-        ".webiny-ui-tabs__tab-bar": {
-            backgroundColor: "var(--mdc-theme-surface)"
-        }
-    }
-});
-
 interface OnChangeParams {
     fields: CmsModelField[];
     layout: CmsEditorFieldsLayout;
 }
 
 export const ContentModelEditor = makeDecoratable("ContentModelEditor", () => {
-    const { data, setData, isPristine } = useModelEditor();
+    const { data, setData, isPristine, contentModel } = useModelEditor();
+
+    // Add a class to <body> to trigger global styles while this component is active
+    useEffect(() => {
+        document.body.classList.add("wby-overflow-hidden");
 
-    const [activeTabIndex, setActiveTabIndex] = useState(0);
+        return () => {
+            document.body.classList.remove("wby-overflow-hidden");
+        };
+    }, []);
+
+    const [activeTab, setActiveTab] = useState<string>("edit");
 
     const onChange = ({ fields, layout }: OnChangeParams) => {
         setData(data => ({ ...data, fields, layout }));
     };
 
     if (!data) {
-        return <CircularProgress label={"Loading content model..."} />;
+        return <OverlayLoader text={"Loading content model..."} />;
     } else if (data.isBeingDeleted) {
         return <ModelIsBeingDeletedError model={data} />;
     }
 
     return (
-        <div className={"content-model-editor"}>
+        <div className={"content-model-editor wby-flex-1"}>
             <Prompt when={!isPristine} message={prompt} />
             <Header />
-            <ContentContainer>
+            <div className={"wby-w-full wby-overflow-y-auto wby-h-main-content"}>
                 <SplitView>
-                    <LeftPanel span={4}>
-                        <LeftBarTitle>
-                            <Icon className={titleIcon} icon={<FormIcon />} />
-                            <Typography use={"headline6"}>Fields</Typography>
-                        </LeftBarTitle>
-                        <LeftBarFieldList>
+                    <LeftPanel span={4} className={"wby-bg-neutral-light"}>
+                        <div className={"wby-px-lg wby-py-md"}>
+                            <Text
+                                as={"div"}
+                                className={
+                                    "wby-uppercase wby-font-semibold wby-text-neutral-xstrong"
+                                }
+                            >
+                                {"Fields"}
+                            </Text>
+                        </div>
+                        <Separator />
+                        <div
+                            className={
+                                "wby-px-lg wby-py-md wby-h-[calc(100vh-98px)] wby-overflow-y-scroll"
+                            }
+                        >
                             <FieldsSidebar
                                 onFieldDragStart={() => {
-                                    setActiveTabIndex(0);
+                                    setActiveTab("edit");
                                 }}
                             />
-                        </LeftBarFieldList>
+                        </div>
                     </LeftPanel>
-                    <RightPanel span={8}>
-                        <Tabs
-                            value={activeTabIndex}
-                            className={formTabs}
-                            onActivate={e => setActiveTabIndex(e)}
-                        >
-                            <Tab label={"Edit"} data-testid={"cms.editor.tab.edit"}>
-                                <EditContainer>
-                                    <FieldEditor
-                                        fields={data.fields}
-                                        layout={data.layout || []}
-                                        onChange={onChange}
+                    <RightPanel span={8} className={"wby-bg-neutral-base"}>
+                        <div className={"wby-h-full wby-overflow-y-scroll"}>
+                            {contentModel && (
+                                <div className={"wby-px-xl wby-pt-lg wby-pb-md-extra"}>
+                                    <Heading level={4}>{contentModel.name}</Heading>
+                                    <Text size={"sm"} className={"wby-text-neutral-muted"}>
+                                        {`Created by ${contentModel.createdBy.displayName}. Last modified: `}
+                                        <TimeAgo datetime={contentModel.savedOn} />.
+                                    </Text>
+                                </div>
+                            )}
+                            <Tabs
+                                size={"md"}
+                                spacing={"xl"}
+                                separator={true}
+                                value={String(activeTab)}
+                                onValueChange={setActiveTab}
+                                tabs={[
+                                    <Tabs.Tab
+                                        key={"edit"}
+                                        value={"edit"}
+                                        trigger={"Edit"}
+                                        icon={<EditIcon />}
+                                        data-testid={"cms.editor.tab.edit"}
+                                        content={
+                                            <div className={"wby-relative wby-mb-lg"}>
+                                                <FieldEditor
+                                                    fields={data.fields}
+                                                    layout={data.layout || []}
+                                                    onChange={onChange}
+                                                />
+                                            </div>
+                                        }
+                                    />,
+                                    <Tabs.Tab
+                                        key={"preview"}
+                                        value={"preview"}
+                                        trigger={"Preview"}
+                                        icon={<PreviewIcon />}
+                                        data-testid={"cms.editor.tab.preview"}
+                                        content={
+                                            <ContentEntryEditorWithConfig>
+                                                <ContentEntriesProvider contentModel={data}>
+                                                    <ContentEntryProvider readonly={true}>
+                                                        <PreviewTab
+                                                            activeTab={activeTab === "preview"}
+                                                        />
+                                                    </ContentEntryProvider>
+                                                </ContentEntriesProvider>
+                                            </ContentEntryEditorWithConfig>
+                                        }
                                     />
-                                </EditContainer>
-                            </Tab>
-                            <Tab label={"Preview"} data-testid={"cms.editor.tab.preview"}>
-                                <ContentEntryEditorWithConfig>
-                                    <ContentEntriesProvider contentModel={data}>
-                                        <ContentEntryProvider readonly={true}>
-                                            <PreviewTab activeTab={activeTabIndex === 1} />
-                                        </ContentEntryProvider>
-                                    </ContentEntriesProvider>
-                                </ContentEntryEditorWithConfig>
-                            </Tab>
-                        </Tabs>
+                                ]}
+                            />
+                        </div>
                     </RightPanel>
                 </SplitView>
-            </ContentContainer>
-            <DragPreview />
+                <DragPreview />
+            </div>
         </div>
     );
 });
diff --git a/packages/app-headless-cms/src/admin/components/ContentModelEditor/FieldsSidebar.tsx b/packages/app-headless-cms/src/admin/components/ContentModelEditor/FieldsSidebar.tsx
index 36459e3b9da..133d3fbd766 100644
--- a/packages/app-headless-cms/src/admin/components/ContentModelEditor/FieldsSidebar.tsx
+++ b/packages/app-headless-cms/src/admin/components/ContentModelEditor/FieldsSidebar.tsx
@@ -1,48 +1,8 @@
 import React, { DragEventHandler } from "react";
 import { plugins } from "@webiny/plugins";
-import styled from "@emotion/styled";
-import { Icon } from "@webiny/ui/Icon";
 import Draggable from "../Draggable";
 import { CmsModelFieldTypePlugin } from "~/types";
-
-const FieldContainer = styled("div")({
-    padding: "10px 15px",
-    marginBottom: 20,
-    display: "flex",
-    width: "100%",
-    backgroundColor: "var(--mdc-theme-on-background)",
-    borderRadius: 15,
-    boxSizing: "border-box",
-    cursor: "grab",
-    opacity: 1,
-    transition: "opacity 225ms",
-    "&:hover": {
-        opacity: 0.8
-    },
-    "&:last-child": {
-        marginBottom: 0
-    }
-});
-
-const FileInfo = styled("div")({});
-
-const FieldLabel = styled("div")({
-    textTransform: "uppercase",
-    lineHeight: "145%",
-    fontFamily: "var(--mdc-typography-font-family)",
-    color: "var(--mdc-theme-on-surface)"
-});
-
-const FieldDescription = styled("div")({
-    fontSize: 14,
-    fontFamily: "var(--mdc-typography-font-family)",
-    color: "var(--mdc-theme-text-secondary-on-background)"
-});
-
-const FieldHandle = styled("div")({
-    marginRight: 15,
-    color: "var(--mdc-theme-on-surface)"
-});
+import { Heading, Icon, Text } from "@webiny/admin-ui";
 
 interface FieldProps {
     onFieldDragStart: DragEventHandler;
@@ -59,19 +19,28 @@ const Field = (props: FieldProps) => {
             {({ drag }) => (
                 <div
                     ref={drag}
-                    style={{ marginBottom: 10 }}
                     data-testid={`cms-editor-fields-field-${type}`}
                     onDragStart={onFieldDragStart}
+                    className={
+                        "wby-bg-neutral-base wby-rounded-sm wby-mb-sm wby-py-sm wby-px-md wby-cursor-grab last-of-type:wby-mb-none hover:wby-opacity-80 wby-transition-opacity"
+                    }
                 >
-                    <FieldContainer>
-                        <FieldHandle>
-                            <Icon icon={icon as React.ReactElement} />
-                        </FieldHandle>
-                        <FileInfo>
-                            <FieldLabel>{label}</FieldLabel>
-                            <FieldDescription>{description}</FieldDescription>
-                        </FileInfo>
-                    </FieldContainer>
+                    <div className={"wby-flex wby-items-center wby-gap-md"}>
+                        <div>
+                            <Icon
+                                icon={icon as React.ReactElement}
+                                label={label}
+                                size={"md"}
+                                color={"neutral-light"}
+                            />
+                        </div>
+                        <div>
+                            <Heading level={6}>{label}</Heading>
+                            <Text size={"sm"} className={"wby-text-neutral-strong"}>
+                                {description}
+                            </Text>
+                        </div>
+                    </div>
                 </div>
             )}
         </Draggable>
@@ -86,7 +55,7 @@ export const FieldsSidebar = ({ onFieldDragStart }: FieldsSidebarProps) => {
     const fieldTypePlugin = plugins.byType<CmsModelFieldTypePlugin>("cms-editor-field-type");
 
     return (
-        <React.Fragment>
+        <>
             {fieldTypePlugin.map(fieldPlugin => (
                 <Field
                     key={fieldPlugin.field.type}
@@ -94,6 +63,6 @@ export const FieldsSidebar = ({ onFieldDragStart }: FieldsSidebarProps) => {
                     onFieldDragStart={onFieldDragStart}
                 />
             ))}
-        </React.Fragment>
+        </>
     );
 };
diff --git a/packages/app-headless-cms/src/admin/components/ContentModelEditor/Header.tsx b/packages/app-headless-cms/src/admin/components/ContentModelEditor/Header.tsx
index cfc184967dc..56f0930c706 100644
--- a/packages/app-headless-cms/src/admin/components/ContentModelEditor/Header.tsx
+++ b/packages/app-headless-cms/src/admin/components/ContentModelEditor/Header.tsx
@@ -1,24 +1,22 @@
 import React from "react";
-import { TopAppBar, TopAppBarSection } from "@webiny/ui/TopAppBar";
+import { HeaderBar } from "@webiny/admin-ui";
 import { renderPlugins } from "@webiny/app/plugins";
 
-import { css } from "emotion";
-
-const topBar = css({
-    boxShadow: "1px 0px 5px 0px rgba(128,128,128,1)"
-});
-
 const EditorBar = () => {
     return (
-        <TopAppBar className={topBar} fixed data-testid={"cms-editor-top-bar"}>
-            <TopAppBarSection style={{ width: "50%" }} alignEnd>
-                {renderPlugins("content-model-editor-default-bar-left")}
-            </TopAppBarSection>
-
-            <TopAppBarSection style={{ width: "50%" }} alignEnd>
-                {renderPlugins("content-model-editor-default-bar-right")}
-            </TopAppBarSection>
-        </TopAppBar>
+        <HeaderBar
+            data-testid={"cms-editor-top-bar"}
+            start={
+                <div className={"wby-flex wby-items-center wby-justify-start wby-gap-sm"}>
+                    {renderPlugins("content-model-editor-default-bar-left")}
+                </div>
+            }
+            end={
+                <div className={"wby-flex wby-items-center wby-justify-end wby-gap-xs"}>
+                    {renderPlugins("content-model-editor-default-bar-right")}
+                </div>
+            }
+        />
     );
 };
 
diff --git a/packages/app-headless-cms/src/admin/components/ContentModelEditor/ModelIsBeingDeletedError/ModelIsBeingDeletedError.tsx b/packages/app-headless-cms/src/admin/components/ContentModelEditor/ModelIsBeingDeletedError/ModelIsBeingDeletedError.tsx
index c35759d4e96..f20873fae2c 100644
--- a/packages/app-headless-cms/src/admin/components/ContentModelEditor/ModelIsBeingDeletedError/ModelIsBeingDeletedError.tsx
+++ b/packages/app-headless-cms/src/admin/components/ContentModelEditor/ModelIsBeingDeletedError/ModelIsBeingDeletedError.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 import Helmet from "react-helmet";
-import { css } from "emotion";
+import { css } from "@emotion/css";
 import styled from "@emotion/styled";
 import { Typography } from "@webiny/ui/Typography";
 import authErrorImg from "./SecureRouteError.svg";
diff --git a/packages/app-headless-cms/src/admin/components/ContentModelEditor/PreviewTab.tsx b/packages/app-headless-cms/src/admin/components/ContentModelEditor/PreviewTab.tsx
index b6a3c449790..abdc23ec16b 100644
--- a/packages/app-headless-cms/src/admin/components/ContentModelEditor/PreviewTab.tsx
+++ b/packages/app-headless-cms/src/admin/components/ContentModelEditor/PreviewTab.tsx
@@ -1,37 +1,24 @@
 import React from "react";
-import { css } from "emotion";
-import { Elevation } from "@webiny/ui/Elevation";
 import { i18n } from "@webiny/app/i18n";
 import { CmsEditorContentTab } from "~/types";
 import { useModelEditor } from "~/admin/hooks";
 import { ContentEntryFormPreview } from "../ContentEntryForm/ContentEntryFormPreview";
+import { Alert } from "@webiny/admin-ui";
 
 const t = i18n.ns("app-headless-cms/admin/components/editor/tabs/preview");
 
-const formPreviewWrapper = css({
-    padding: 40,
-    margin: 40,
-    boxSizing: "border-box"
-});
-
-const style = {
-    noFieldsMessage: css({
-        textAlign: "center"
-    })
-};
-
 export const PreviewTab: CmsEditorContentTab = ({ activeTab }) => {
     const { data } = useModelEditor();
 
     return (
-        <Elevation z={1} className={formPreviewWrapper}>
+        <>
             {data.fields && data.fields.length && activeTab ? (
                 <ContentEntryFormPreview contentModel={data} />
             ) : (
-                <div className={style.noFieldsMessage}>
+                <Alert type="warning">
                     {t`Before previewing the form, please add at least one field to the content model.`}
-                </div>
+                </Alert>
             )}
-        </Elevation>
+        </>
     );
 };
diff --git a/packages/app-headless-cms/src/admin/components/DragPreview.tsx b/packages/app-headless-cms/src/admin/components/DragPreview.tsx
index f4acec17fa5..308ddd1dd3a 100644
--- a/packages/app-headless-cms/src/admin/components/DragPreview.tsx
+++ b/packages/app-headless-cms/src/admin/components/DragPreview.tsx
@@ -70,32 +70,15 @@ const DragPreview = () => {
 
     return (
         <div
-            style={{
-                position: "fixed",
-                pointerEvents: "none",
-                zIndex: 1001,
-                left: 0,
-                top: 0,
-                width: "100%",
-                height: "100%"
-            }}
+            style={{ zIndex: 1001 }}
+            className="wby-fixed wby-pointer-events-none wby-left-0 wby-top-0 wby-w-full wby-h-full"
         >
             <div
                 ref={el => (dragPreviewRef = el)}
-                style={{
-                    transition: "opacity .25s ease-in-out",
-                    display: "block",
-                    opacity: dragHelperOpacity
-                }}
+                className="wby-transition-opacity wby-duration-250 wby-ease-in-out wby-block"
+                style={{ opacity: dragHelperOpacity }}
             >
-                <div
-                    style={{
-                        width: 30,
-                        height: 30,
-                        backgroundColor: "var(--mdc-theme-primary)",
-                        borderRadius: "50%"
-                    }}
-                />
+                <div className="wby-size-lg wby-rounded-full wby-bg-primary-default" />
             </div>
         </div>
     );
diff --git a/packages/app-headless-cms/src/admin/components/DropZone/Center.tsx b/packages/app-headless-cms/src/admin/components/DropZone/Center.tsx
index 82a3af6c880..13dc5e5d81f 100644
--- a/packages/app-headless-cms/src/admin/components/DropZone/Center.tsx
+++ b/packages/app-headless-cms/src/admin/components/DropZone/Center.tsx
@@ -1,43 +1,25 @@
 import React, { CSSProperties } from "react";
-import styled from "@emotion/styled";
 import { Droppable, DroppableProps, OnDropCallable } from "./../Droppable";
-
-interface DroppableFlags {
-    isOver: boolean;
-    isDroppable: boolean;
-}
-
-const getColor = ({ isOver, isDroppable }: DroppableFlags) => {
-    if (isOver) {
-        return "var(--mdc-theme-primary)";
-    }
-
-    if (!isDroppable) {
-        return "var(--mdc-theme-background)";
-    }
-
-    return "var(--mdc-theme-secondary)";
-};
-
-const Container = styled.div`
-    background-color: transparent;
-    box-sizing: border-box;
-    height: 100%;
-    min-height: 100px;
-    position: relative;
-    user-select: none;
-    width: 100%;
-    border: 2px dashed ${getColor};
-    opacity: 1;
-    > div {
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        margin: 0;
-        color: ${getColor};
+import { cn, cva } from "@webiny/admin-ui";
+
+const droppableContainerVariants = cva(
+    "wby-bg-transparent wby-box-border wby-h-full wby-min-h-[120px] wby-relative wby-user-select-none wby-w-full wby-border-md wby-border-dashed",
+    {
+        variants: {
+            isOver: {
+                true: "wby-border-accent-default wby-text-accent-primary",
+                false: "wby-border-success-default wby-text-success-primary"
+            },
+            isDroppable: {
+                false: "wby-border-success-default wby-text-accent-primary"
+            }
+        },
+        defaultVariants: {
+            isOver: false,
+            isDroppable: true
+        }
     }
-`;
+);
 
 interface CenterProps {
     type?: string;
@@ -63,9 +45,11 @@ const Center = ({ onDrop, children, style, isDroppable }: CenterProps) => {
                     data-testid={"cms-editor-first-field-area"}
                     {...getInert(isDroppable)}
                 >
-                    <Container isOver={isOver} isDroppable={isDroppable}>
-                        <div>{children}</div>
-                    </Container>
+                    <div className={cn(droppableContainerVariants({ isOver, isDroppable }))}>
+                        <div className="wby-absolute wby-top-1/2 wby-left-1/2 wby-transform wby--translate-x-1/2 wby--translate-y-1/2 wby-m-0">
+                            {children}
+                        </div>
+                    </div>
                 </div>
             )}
         </Droppable>
diff --git a/packages/app-headless-cms/src/admin/components/DropZone/Horizontal.tsx b/packages/app-headless-cms/src/admin/components/DropZone/Horizontal.tsx
index 1a19b0de7be..115f26ab6bc 100644
--- a/packages/app-headless-cms/src/admin/components/DropZone/Horizontal.tsx
+++ b/packages/app-headless-cms/src/admin/components/DropZone/Horizontal.tsx
@@ -1,23 +1,7 @@
 import React from "react";
-import styled from "@emotion/styled";
 import { Droppable, IsVisibleCallable } from "../Droppable";
 import { DragSource } from "~/types";
-
-const InnerDiv = styled("div")({
-    height: 15,
-    width: "100%",
-    zIndex: 3,
-    borderRadius: 0,
-    boxSizing: "border-box",
-    display: "none",
-    border: "1px dashed black",
-    borderSpacing: 5
-});
-
-const BackgroundColorDiv = styled("div")({
-    width: "100%",
-    height: "100%"
-});
+import { cn } from "@webiny/admin-ui";
 
 interface OuterDivProps {
     isOver: boolean;
@@ -25,32 +9,28 @@ interface OuterDivProps {
     last: boolean;
 }
 
-const OuterDiv = styled("div")(
-    {
-        margin: 0,
-        padding: 0,
-        width: "calc(100% + 2px)",
-        zIndex: 10,
-        backgroundColor: "transparent",
-        position: "absolute",
-        display: "flex",
-        justifyContent: "center"
-    },
-    (props: OuterDivProps) => ({
-        [props.last ? "bottom" : "top"]: -15,
-        // @ts-expect-error
-        [InnerDiv]: {
-            borderColor: props.isOver ? "var(--mdc-theme-primary)" : "var(--mdc-theme-secondary)",
-            display: props.isDragging ? "block" : "none",
-            // @ts-expect-error
-            [BackgroundColorDiv]: {
-                opacity: 0.5,
-                backgroundColor: props.isOver
-                    ? "var(--mdc-theme-primary)"
-                    : "var(--mdc-theme-secondary)"
-            }
-        }
-    })
+const OuterDiv = ({ isOver, isDragging, last }: OuterDivProps) => (
+    <div
+        className={cn(
+            "wby-absolute wby-w-full wby-z-10 wby-bg-transparent wby-flex wby-justify-center",
+            last ? "-wby-bottom-md" : "-wby-top-md"
+        )}
+    >
+        <div
+            className={cn(
+                "wby-h-md wby-w-full wby-z-3 wby-border-dashed wby-border-sm wby-hidden",
+                isOver ? "wby-border-accent-default" : "wby-border-success-default",
+                isDragging && "wby-block"
+            )}
+        >
+            <div
+                className={cn(
+                    "wby-w-full wby-h-full wby-opacity-50",
+                    isOver ? "wby-bg-primary-muted" : "wby-bg-success-muted"
+                )}
+            />
+        </div>
+    </div>
 );
 
 interface HorizontalProps {
@@ -69,7 +49,7 @@ const Horizontal = ({ last, onDrop, isVisible, ...rest }: HorizontalProps) => {
                     data-testid={rest["data-testid"]}
                     style={{
                         /* For dropzone debugging: border: "1px solid blue",*/
-                        height: "15px",
+                        height: "16px",
                         width: "100%",
                         position: "absolute",
                         [last ? "bottom" : "top"]: 0,
@@ -77,11 +57,7 @@ const Horizontal = ({ last, onDrop, isVisible, ...rest }: HorizontalProps) => {
                         zIndex: isDragging ? 1000 : -1
                     }}
                 >
-                    <OuterDiv isOver={isOver} isDragging={isDragging} last={last ? true : false}>
-                        <InnerDiv>
-                            <BackgroundColorDiv />
-                        </InnerDiv>
-                    </OuterDiv>
+                    <OuterDiv isOver={isOver} isDragging={isDragging} last={last ?? false} />
                 </div>
             )}
         </Droppable>
diff --git a/packages/app-headless-cms/src/admin/components/DropZone/Vertical.tsx b/packages/app-headless-cms/src/admin/components/DropZone/Vertical.tsx
index 26183bd9e51..4a423bab622 100644
--- a/packages/app-headless-cms/src/admin/components/DropZone/Vertical.tsx
+++ b/packages/app-headless-cms/src/admin/components/DropZone/Vertical.tsx
@@ -1,65 +1,44 @@
 import React from "react";
-import styled from "@emotion/styled";
 import { Droppable, IsVisibleCallable } from "../Droppable";
 import { DragSource } from "~/types";
-
-const InnerDivVertical = styled("div")({
-    position: "absolute",
-    width: 10,
-    height: "100%",
-    zIndex: 3,
-    borderRadius: 0,
-    display: "none",
-    boxSizing: "border-box",
-    border: "1px dashed black",
-    borderSpacing: 5
-});
-
-const BackgroundColorDiv = styled("div")({
-    width: "100%",
-    height: "100%"
-});
+import { cn } from "@webiny/admin-ui";
 
 interface OuterDivVerticalProps {
     isOver: boolean;
     last?: boolean;
-    isVisible?: IsVisibleCallable;
     isDragging?: boolean;
 }
 
-const OuterDivVertical = styled("div")(
-    {
-        position: "absolute",
-        width: "30%",
-        top: 0,
-        height: "100%",
-        zIndex: 10,
-        backgroundColor: "transparent"
-    },
-    (props: OuterDivVerticalProps) => ({
-        [props.last ? "right" : "left"]: -9,
-        textAlign: props.last ? "right" : "left",
-        // @ts-expect-error
-        [InnerDivVertical]: {
-            borderColor: props.isOver ? "var(--mdc-theme-primary)" : "var(--mdc-theme-secondary)",
-            [props.last ? "right" : "left"]: -2,
-            display: props.isDragging ? "block" : "none",
-            // @ts-expect-error
-            [BackgroundColorDiv]: {
-                opacity: 0.5,
-                backgroundColor: props.isOver
-                    ? "var(--mdc-theme-primary)"
-                    : "var(--mdc-theme-secondary)"
-            }
-        }
-    })
+const OuterDivVertical = ({ isOver, last, isDragging }: OuterDivVerticalProps) => (
+    <div
+        className={cn(
+            "wby-absolute wby-top-0 wby-h-full wby-w-[30%] wby-z-10 wby-bg-transparent",
+            last ? "wby-text-right -wby-right-sm" : "wby-text-left -wby-left-sm"
+        )}
+    >
+        <div
+            className={cn(
+                "wby-absolute wby-w-md wby-h-full wby-z-3 wby-border-dashed wby-border-sm wby-hidden",
+                isOver ? "wby-border-accent-default" : "wby-border-success-default",
+                last ? "-wby-right-sm" : "-wby-left-sm",
+                isDragging && "wby-block"
+            )}
+        >
+            <div
+                className={cn(
+                    "wby-w-full wby-h-full wby-opacity-50",
+                    isOver ? "wby-bg-primary-muted" : "wby-bg-success-muted"
+                )}
+            />
+        </div>
+    </div>
 );
 
 interface VerticalProps {
     depth?: number;
     onDrop(item: DragSource): void;
     last?: boolean;
-    isVisible?: any;
+    isVisible?: IsVisibleCallable;
 }
 
 const Vertical = ({ depth, last, onDrop, isVisible }: VerticalProps) => {
@@ -79,11 +58,7 @@ const Vertical = ({ depth, last, onDrop, isVisible }: VerticalProps) => {
                         zIndex: isDragging ? 1000 + (depth || 0) : -1
                     }}
                 >
-                    <OuterDivVertical isOver={isOver} isDragging={isDragging} last={last}>
-                        <InnerDivVertical>
-                            <BackgroundColorDiv />
-                        </InnerDivVertical>
-                    </OuterDivVertical>
+                    <OuterDivVertical isOver={isOver} isDragging={isDragging} last={last} />
                 </div>
             )}
         </Droppable>
diff --git a/packages/app-headless-cms/src/admin/components/FieldEditor/EditFieldDialog.tsx b/packages/app-headless-cms/src/admin/components/FieldEditor/EditFieldDialog.tsx
index 60ebaced0d9..446a7c70014 100644
--- a/packages/app-headless-cms/src/admin/components/FieldEditor/EditFieldDialog.tsx
+++ b/packages/app-headless-cms/src/admin/components/FieldEditor/EditFieldDialog.tsx
@@ -1,41 +1,20 @@
 import React, { useState } from "react";
 import cloneDeep from "lodash/cloneDeep";
-import styled from "@emotion/styled";
-import { Dialog, DialogContent, DialogTitle, DialogActions } from "~/admin/components/Dialog";
+import { Dialog, Drawer, Tabs } from "@webiny/admin-ui";
 import { Form, FormOnSubmit } from "@webiny/form";
-import { Tabs, Tab } from "@webiny/ui/Tabs";
 import { i18n } from "@webiny/app/i18n";
 import { CmsEditorContentModel, CmsModelField } from "~/types";
 import GeneralTab from "./EditFieldDialog/GeneralTab";
 import AppearanceTab from "./EditFieldDialog/AppearanceTab";
 import PredefinedValues from "./EditFieldDialog/PredefinedValues";
-import { ValidatorsList } from "./EditFieldDialog/ValidatorsList";
-import { ButtonDefault, ButtonPrimary } from "@webiny/ui/Button";
+import { ValidationTab } from "./EditFieldDialog/ValidationTab";
 import { useModelField, useModelEditor } from "~/admin/hooks";
 import { ModelFieldProvider } from "~/admin/components/ModelFieldProvider";
-import { ValidationsSection } from "~/admin/components/FieldEditor/EditFieldDialog/ValidationsSection";
-import { getFieldValidators, getListValidators } from "./EditFieldDialog/getValidators";
 import { useRendererPlugins } from "~/admin/components/FieldEditor/EditFieldDialog/useRendererPlugins";
+import { getFieldValidators } from "~/admin/components/FieldEditor/EditFieldDialog/getValidators";
 
 const t = i18n.namespace("app-headless-cms/admin/components/editor");
 
-const FullScreenDialog = styled(Dialog)`
-    width: 100vw;
-    height: 100vh;
-    .mdc-dialog__surface {
-        width: 100%;
-        max-width: 100% !important;
-        max-height: 100% !important;
-        .webiny-ui-dialog__content {
-            max-width: 100% !important;
-            max-height: 100% !important;
-            width: 100vw;
-            height: calc(100vh - 155px);
-            overflow: scroll !important;
-        }
-    }
-`;
-
 function setupState(field: CmsModelField, contentModel: CmsEditorContentModel): EditFieldState {
     const clonedField = cloneDeep(field);
 
@@ -89,110 +68,84 @@ const EditFieldDialog = (props: EditFieldDialogProps) => {
     };
 
     return (
-        <FullScreenDialog
-            preventOutsideDismiss
-            open={true}
-            onClose={props.onClose}
-            data-testid={"cms-editor-edit-fields-dialog"}
-        >
-            <DialogTitle>{headerTitle}</DialogTitle>
-            <Form<CmsModelField> data={shadowField} onSubmit={onSubmit}>
-                {({ data: shadowField, submit }) => {
-                    const individualValidation = getFieldValidators(shadowField, fieldPlugin);
-
-                    const hasValidators = individualValidation.validators.length > 0;
-
-                    const showValidatorsTab =
-                        shadowField.multipleValues || individualValidation.validators.length > 0;
-
-                    const predefinedValuesTabEnabled =
-                        fieldPlugin.field.allowPredefinedValues &&
-                        shadowField.predefinedValues &&
-                        shadowField.predefinedValues.enabled;
-
-                    const listValidation = getListValidators(shadowField, fieldPlugin);
-
-                    return (
-                        /**
-                         * We're using the `shadowField` as the new context, because we want all changes by form inputs
-                         * to immediately be propagated to all dialog components.
-                         */
+        /**
+         * We're using the `shadowField` as the new context, because we want all changes by form inputs
+         * to immediately be propagated to all dialog components.
+         */
+        <Form<CmsModelField> data={shadowField} onSubmit={onSubmit}>
+            {({ data: shadowField, submit }) => {
+                const predefinedValuesTabEnabled =
+                    fieldPlugin.field.allowPredefinedValues &&
+                    shadowField.predefinedValues &&
+                    shadowField.predefinedValues.enabled;
+
+                const individualValidation = getFieldValidators(shadowField, fieldPlugin);
+                const showValidatorsTab =
+                    shadowField.multipleValues || individualValidation.validators.length > 0;
+
+                return (
+                    <Drawer
+                        width={800}
+                        title={headerTitle}
+                        open={true}
+                        modal={true}
+                        onClose={props.onClose}
+                        bodyPadding={false}
+                        actions={
+                            <>
+                                <Dialog.CancelButton
+                                    text={t`Cancel`}
+                                    onClick={props.onClose}
+                                    data-testid="cms.editor.field.settings.cancel"
+                                />
+                                <Dialog.ConfirmButton
+                                    text={t`Save Field`}
+                                    onClick={submit}
+                                    data-testid="cms.editor.field.settings.save"
+                                />
+                            </>
+                        }
+                        data-testid={"cms-editor-edit-fields-dialog"}
+                    >
                         <ModelFieldProvider field={shadowField}>
-                            <DialogContent>
-                                <Tabs>
-                                    <Tab label={t`General`}>
-                                        <GeneralTab />
-                                    </Tab>
-                                    <Tab
-                                        label={t`Predefined Values`}
+                            <Tabs
+                                spacing={"lg"}
+                                size={"md"}
+                                separator
+                                tabs={[
+                                    <Tabs.Tab
+                                        key={"general"}
+                                        trigger={t`General`}
+                                        value={"general"}
+                                        content={<GeneralTab />}
+                                    />,
+                                    <Tabs.Tab
+                                        key={"predefined"}
+                                        trigger={t`Predefined values`}
+                                        value={"predefined"}
                                         disabled={!predefinedValuesTabEnabled}
-                                    >
-                                        {predefinedValuesTabEnabled && <PredefinedValues />}
-                                    </Tab>
-
-                                    <Tab
+                                        content={<PredefinedValues />}
+                                    />,
+                                    <Tabs.Tab
+                                        key={"validations"}
+                                        trigger={t`Validations`}
+                                        value={"validations"}
+                                        content={<ValidationTab field={shadowField} />}
                                         visible={showValidatorsTab}
-                                        label={"Validators"}
-                                        data-testid={"cms.editor.field.tabs.validators"}
-                                    >
-                                        {shadowField.multipleValues ? (
-                                            <>
-                                                <ValidationsSection
-                                                    validators={listValidation.validators}
-                                                    fieldKey={"listValidators"}
-                                                    title={
-                                                        listValidation.title || "List validators"
-                                                    }
-                                                    description={
-                                                        listValidation.description ||
-                                                        "These validators are applied to the entire list of values."
-                                                    }
-                                                />
-
-                                                {hasValidators ? (
-                                                    <ValidationsSection
-                                                        fieldKey={"validators"}
-                                                        validators={individualValidation.validators}
-                                                        title={
-                                                            individualValidation.title ||
-                                                            "Individual value validators"
-                                                        }
-                                                        description={
-                                                            individualValidation.description ||
-                                                            "These validators are applied to each value in the list."
-                                                        }
-                                                    />
-                                                ) : null}
-                                            </>
-                                        ) : null}
-
-                                        {!shadowField.multipleValues && hasValidators ? (
-                                            <ValidatorsList
-                                                name={"validation"}
-                                                validators={individualValidation.validators}
-                                            />
-                                        ) : null}
-                                    </Tab>
-                                    <Tab label={t`Appearance`}>
-                                        <AppearanceTab />
-                                    </Tab>
-                                </Tabs>
-                            </DialogContent>
-                            <DialogActions>
-                                <ButtonDefault
-                                    data-testid="cms.editor.field.settings.cancel"
-                                    onClick={props.onClose}
-                                >{t`Cancel`}</ButtonDefault>
-                                <ButtonPrimary
-                                    data-testid="cms.editor.field.settings.save"
-                                    onClick={submit}
-                                >{t`Save Field`}</ButtonPrimary>
-                            </DialogActions>
+                                    />,
+                                    <Tabs.Tab
+                                        key={"appearance"}
+                                        trigger={t`Appearance`}
+                                        value={"Appearance"}
+                                        content={<AppearanceTab />}
+                                    />
+                                ]}
+                            />
                         </ModelFieldProvider>
-                    );
-                }}
-            </Form>
-        </FullScreenDialog>
+                    </Drawer>
+                );
+            }}
+        </Form>
     );
 };
 
diff --git a/packages/app-headless-cms/src/admin/components/FieldEditor/EditFieldDialog/AppearanceTab.tsx b/packages/app-headless-cms/src/admin/components/FieldEditor/EditFieldDialog/AppearanceTab.tsx
index e5f4e98859a..9bcc2cc8322 100644
--- a/packages/app-headless-cms/src/admin/components/FieldEditor/EditFieldDialog/AppearanceTab.tsx
+++ b/packages/app-headless-cms/src/admin/components/FieldEditor/EditFieldDialog/AppearanceTab.tsx
@@ -1,16 +1,14 @@
 import React, { useEffect } from "react";
-import { Grid, Cell } from "@webiny/ui/Grid";
 import { i18n } from "@webiny/app/i18n";
-import { Radio, RadioGroup } from "@webiny/ui/Radio";
-import { css } from "emotion";
+import { css } from "@emotion/css";
 import { validation } from "@webiny/validation";
 import { useBind } from "@webiny/form";
 import { allowCmsLegacyRichTextInput } from "~/utils/allowCmsLegacyRichTextInput";
-import { Typography } from "@webiny/ui/Typography";
 import { RendererOptions } from "./AppearanceTab/RendererOptions";
 import { LegacyRichTextInput } from "./AppearanceTab/LegacyRichTextInput";
 import { useRendererPlugins } from "./useRendererPlugins";
 import { useModelField } from "~/admin/components/ModelFieldProvider";
+import { RadioGroup, Text, Grid, Heading } from "@webiny/admin-ui";
 
 const t = i18n.ns("app-headless-cms/admin/content-model-editor/tabs/appearance-tab");
 
@@ -41,10 +39,10 @@ const AppearanceTab = () => {
     if (renderers.length === 0) {
         return (
             <Grid>
-                <Cell
+                <Grid.Column
                     span={12}
                     className={style.noComponentsMessage}
-                >{t`There are no components that can render this field.`}</Cell>
+                >{t`There are no components that can render this field.`}</Grid.Column>
             </Grid>
         );
     }
@@ -66,40 +64,44 @@ const AppearanceTab = () => {
     return (
         <>
             <Grid>
-                {allowCmsLegacyRichTextInput && (
-                    <Cell span={6}>
-                        <LegacyRichTextInput />
-                    </Cell>
-                )}
-                <Cell span={12}>Choose a component that will render the field:</Cell>
-                <Cell span={12}>
-                    <RadioGroup {...rendererName}>
-                        {({ onChange, getValue }) =>
-                            renderers.map(item => {
-                                const setValue = onChange(item.renderer.rendererName);
-                                return (
-                                    <div key={item.name} className={style.radioContainer}>
-                                        <Radio
-                                            value={getValue(item.renderer.rendererName)}
-                                            onChange={setValue}
-                                        />
-
-                                        <div onClick={setValue}>
-                                            <div>{item.renderer.name}</div>
-                                            <div>
-                                                <Typography use={"caption"}>
-                                                    {item.renderer.description}
-                                                </Typography>
-                                            </div>
+                <>
+                    {allowCmsLegacyRichTextInput && (
+                        <Grid.Column span={6}>
+                            <LegacyRichTextInput />
+                        </Grid.Column>
+                    )}
+                    <Grid.Column span={12}>
+                        <Heading level={5}>Field renderer</Heading>
+                        <Text size={"sm"}>Choose a component that will render the field.</Text>
+                    </Grid.Column>
+                    <Grid.Column span={12}>
+                        <div className={"wby-mb-xl"}>
+                            <RadioGroup
+                                {...rendererName}
+                                items={renderers.map(item => ({
+                                    id: item.renderer.rendererName,
+                                    value: item.renderer.rendererName,
+                                    label: (
+                                        <div>
+                                            <Text as={"div"} size={"md"}>
+                                                {item.renderer.name}
+                                            </Text>
+                                            <Text
+                                                as={"div"}
+                                                size={"sm"}
+                                                className={"wby-text-sm wby-text-neutral-strong"}
+                                            >
+                                                {item.renderer.description}
+                                            </Text>
                                         </div>
-                                    </div>
-                                );
-                            })
-                        }
-                    </RadioGroup>
-                </Cell>
+                                    )
+                                }))}
+                            />
+                        </div>
+                    </Grid.Column>
+                    <RendererOptions plugin={selectedPlugin} />
+                </>
             </Grid>
-            <RendererOptions plugin={selectedPlugin} />
         </>
     );
 };
diff --git a/packages/app-headless-cms/src/admin/components/FieldEditor/EditFieldDialog/AppearanceTab/RendererOptions.tsx b/packages/app-headless-cms/src/admin/components/FieldEditor/EditFieldDialog/AppearanceTab/RendererOptions.tsx
index 45bce2ffd0a..47e6b7b8061 100644
--- a/packages/app-headless-cms/src/admin/components/FieldEditor/EditFieldDialog/AppearanceTab/RendererOptions.tsx
+++ b/packages/app-headless-cms/src/admin/components/FieldEditor/EditFieldDialog/AppearanceTab/RendererOptions.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { CmsModelFieldRendererPlugin } from "@webiny/app-headless-cms-common/types";
 import { useModelField } from "~/admin/components/ModelFieldProvider";
-import { Cell, Grid } from "@webiny/ui/Grid";
+import { Grid, Heading, Text } from "@webiny/admin-ui";
 
 interface RendererOptionsProps {
     plugin: CmsModelFieldRendererPlugin | undefined;
@@ -20,9 +20,14 @@ export const RendererOptions = ({ plugin }: RendererOptionsProps) => {
     }
 
     return (
-        <Grid>
-            <Cell span={12}>Renderer Settings:</Cell>
+        <>
+            <Grid.Column span={12}>
+                <Heading level={5}>Renderer settings</Heading>
+                <Text size={"sm"}>
+                    Configure additional settings for the selected field renderer.
+                </Text>
+            </Grid.Column>
             {settings}
-        </Grid>
+        </>
     );
 };
diff --git a/packages/app-headless-cms/src/admin/components/FieldEditor/EditFieldDialog/GeneralTab.tsx b/packages/app-headless-cms/src/admin/components/FieldEditor/EditFieldDialog/GeneralTab.tsx
index 4f24647bbff..1fb52928416 100644
--- a/packages/app-headless-cms/src/admin/components/FieldEditor/EditFieldDialog/GeneralTab.tsx
+++ b/packages/app-headless-cms/src/admin/components/FieldEditor/EditFieldDialog/GeneralTab.tsx
@@ -1,8 +1,6 @@
 import React, { useEffect, useCallback, useRef, useMemo } from "react";
 import camelCase from "lodash/camelCase";
-import { Input } from "@webiny/ui/Input";
-import { Switch } from "@webiny/ui/Switch";
-import { Grid, Cell } from "@webiny/ui/Grid";
+import { Grid, Switch, Input, Label } from "@webiny/admin-ui";
 import { validation } from "@webiny/validation";
 import { Tags } from "@webiny/ui/Tags";
 import { useForm, Bind } from "@webiny/form";
@@ -81,8 +79,8 @@ const GeneralTab = () => {
 
     return (
         <>
-            <Grid>
-                <Cell span={6}>
+            <Grid gap={"comfortable"}>
+                <Grid.Column span={6}>
                     <Bind
                         name={"label"}
                         validators={validation.create("required")}
@@ -95,12 +93,13 @@ const GeneralTab = () => {
                     >
                         <Input
                             label={"Label"}
+                            size={"lg"}
                             inputRef={inputRef}
                             data-testid="cms.editor.field.settings.general.label"
                         />
                     </Bind>
-                </Cell>
-                <Cell span={6}>
+                </Grid.Column>
+                <Grid.Column span={6}>
                     <Bind
                         name={"fieldId"}
                         validators={[
@@ -112,12 +111,13 @@ const GeneralTab = () => {
                     >
                         <Input
                             label={"Field ID"}
+                            size={"lg"}
                             data-testid={`cms.editor.field.settings.general.label-${field.id}`}
                         />
                     </Bind>
-                </Cell>
+                </Grid.Column>
 
-                <Cell span={6}>
+                <Grid.Column span={6}>
                     <Bind name={"multipleValues"}>
                         <Switch
                             label={fieldPlugin.field.multipleValuesLabel}
@@ -125,8 +125,8 @@ const GeneralTab = () => {
                             data-testid={`cms.editor.field.settings.general.switch-multiplevalues`}
                         />
                     </Bind>
-                </Cell>
-                <Cell span={6}>
+                </Grid.Column>
+                <Grid.Column span={6}>
                     <Bind name={"predefinedValues.enabled"}>
                         <Switch
                             label={"Use predefined values"}
@@ -134,29 +134,28 @@ const GeneralTab = () => {
                             data-testid={`cms.editor.field.settings.general.switch-predefinedvalues`}
                         />
                     </Bind>
-                </Cell>
+                </Grid.Column>
 
-                <Cell span={12}>
+                <Grid.Column span={12}>
                     <Bind name={"helpText"}>
                         <Input
-                            label={"Help text"}
-                            description={"Help text (optional)"}
+                            label={<Label text={"Help text"} description={"(optional)"} />}
+                            size={"lg"}
                             data-testid={`cms.editor.field.settings.general.helptext`}
                         />
                     </Bind>
-                </Cell>
-                <Cell span={12}>
+                </Grid.Column>
+                <Grid.Column span={12}>
                     <Bind name={"tags"}>
                         <Tags
-                            label={"Tags"}
+                            label={<Label text={"Tags"} description={"(optional)"} />}
                             protectedTags={fieldPlugin.field.tags}
-                            description={"Field tags (optional)"}
                             data-testid={`cms.editor.field.settings.general.tags`}
                         />
                     </Bind>
-                </Cell>
+                </Grid.Column>
+                <Grid.Column span={12}>{additionalSettings}</Grid.Column>
             </Grid>
-            {additionalSettings}
         </>
     );
 };
diff --git a/packages/app-headless-cms/src/admin/components/FieldEditor/EditFieldDialog/ValidationTab/ValidationTab.tsx b/packages/app-headless-cms/src/admin/components/FieldEditor/EditFieldDialog/ValidationTab/ValidationTab.tsx
new file mode 100644
index 00000000000..61ccf36ce60
--- /dev/null
+++ b/packages/app-headless-cms/src/admin/components/FieldEditor/EditFieldDialog/ValidationTab/ValidationTab.tsx
@@ -0,0 +1,55 @@
+import React from "react";
+import { ValidationsSection } from "~/admin/components/FieldEditor/EditFieldDialog/ValidationTab/ValidationsSection";
+import {
+    getFieldValidators,
+    getListValidators
+} from "~/admin/components/FieldEditor/EditFieldDialog/getValidators";
+import { useModelField } from "~/admin/components/ModelFieldProvider";
+import { ValidatorsList } from "~/admin/components/FieldEditor/EditFieldDialog/ValidationTab/ValidatorsList";
+import type { CmsModelField } from "@webiny/app-headless-cms-common/types";
+
+interface ValidationTabProps {
+    field: CmsModelField;
+}
+
+export const ValidationTab = ({ field }: ValidationTabProps) => {
+    const { fieldPlugin } = useModelField();
+
+    const individualValidation = getFieldValidators(field, fieldPlugin);
+    const hasValidators = individualValidation.validators.length > 0;
+    const listValidation = getListValidators(field, fieldPlugin);
+
+    return (
+        <>
+            {field.multipleValues ? (
+                <>
+                    <ValidationsSection
+                        validators={listValidation.validators}
+                        fieldKey={"listValidators"}
+                        title={listValidation.title || "List validators"}
+                        description={
+                            listValidation.description ||
+                            "These validators are applied to the entire list of values."
+                        }
+                    />
+
+                    {hasValidators ? (
+                        <ValidationsSection
+                            fieldKey={"validators"}
+                            validators={individualValidation.validators}
+                            title={individualValidation.title || "Individual value validators"}
+                            description={
+                                individualValidation.description ||
+                                "These validators are applied to each value in the list."
+                            }
+                        />
+                    ) : null}
+                </>
+            ) : null}
+
+            {!field.multipleValues && hasValidators ? (
+                <ValidatorsList name={"validation"} validators={individualValidation.validators} />
+            ) : null}
+        </>
+    );
+};
diff --git a/packages/app-headless-cms/src/admin/components/FieldEditor/EditFieldDialog/ValidationTab/ValidationsSection.tsx b/packages/app-headless-cms/src/admin/components/FieldEditor/EditFieldDialog/ValidationTab/ValidationsSection.tsx
new file mode 100644
index 00000000000..a637560a1f6
--- /dev/null
+++ b/packages/app-headless-cms/src/admin/components/FieldEditor/EditFieldDialog/ValidationTab/ValidationsSection.tsx
@@ -0,0 +1,38 @@
+import React from "react";
+
+import { ValidatorsList } from "./ValidatorsList";
+import { CmsModelFieldValidatorConfigAdapter } from "~/utils/CmsModelFieldValidatorConfigAdapter";
+import { Grid, Heading, Text } from "@webiny/admin-ui";
+
+interface ValidatorsSectionProps {
+    title: string;
+    fieldKey: "validators" | "listValidators";
+    description: string;
+    validators: CmsModelFieldValidatorConfigAdapter[];
+}
+
+const bindTo = {
+    validators: "validation",
+    listValidators: "listValidation"
+};
+
+export const ValidationsSection = ({
+    title,
+    description,
+    fieldKey,
+    validators
+}: ValidatorsSectionProps) => {
+    return (
+        <div className="wby-mb-xl">
+            <Grid>
+                <Grid.Column span={12}>
+                    <Heading level={5}>{title}</Heading>
+                    <Text size={"sm"}>{description}</Text>
+                </Grid.Column>
+                <Grid.Column span={12}>
+                    <ValidatorsList name={bindTo[fieldKey]} validators={validators} />
+                </Grid.Column>
+            </Grid>
+        </div>
+    );
+};
diff --git a/packages/app-headless-cms/src/admin/components/FieldEditor/EditFieldDialog/ValidatorsList.tsx b/packages/app-headless-cms/src/admin/components/FieldEditor/EditFieldDialog/ValidationTab/ValidatorsList.tsx
similarity index 96%
rename from packages/app-headless-cms/src/admin/components/FieldEditor/EditFieldDialog/ValidatorsList.tsx
rename to packages/app-headless-cms/src/admin/components/FieldEditor/EditFieldDialog/ValidationTab/ValidatorsList.tsx
index 3ecf274f7ca..51f1639403c 100644
--- a/packages/app-headless-cms/src/admin/components/FieldEditor/EditFieldDialog/ValidatorsList.tsx
+++ b/packages/app-headless-cms/src/admin/components/FieldEditor/EditFieldDialog/ValidationTab/ValidatorsList.tsx
@@ -1,11 +1,10 @@
 import React, { Fragment } from "react";
-import { css } from "emotion";
+import { css } from "@emotion/css";
 import cloneDeep from "lodash/cloneDeep";
 import debounce from "lodash/debounce";
 import { plugins } from "@webiny/plugins";
 import { Switch } from "@webiny/ui/Switch";
 import { Form, Bind } from "@webiny/form";
-import { Grid, Cell } from "@webiny/ui/Grid";
 import { validation } from "@webiny/validation";
 import { Input } from "@webiny/ui/Input";
 import { CmsModelFieldValidator, CmsModelFieldValidatorPlugin } from "~/types";
@@ -14,6 +13,7 @@ import { Accordion, AccordionItem } from "@webiny/ui/Accordion";
 import { CmsModelFieldValidatorConfigAdapter } from "~/utils/CmsModelFieldValidatorConfigAdapter";
 import styled from "@emotion/styled";
 import { Tooltip } from "@webiny/ui/Tooltip";
+import { Grid } from "@webiny/admin-ui";
 
 const Variable = styled.span`
     font-weight: bold;
@@ -185,7 +185,7 @@ const ValidatorItem = ({ validator, value, onChange }: ValidatorItemProps) => {
                     {({ Bind }) => (
                         <>
                             <Grid className={gridBottomPadding}>
-                                <Cell span={12}>
+                                <Grid.Column span={12}>
                                     <Bind
                                         name={"message"}
                                         validators={validation.create("required")}
@@ -201,10 +201,9 @@ const ValidatorItem = ({ validator, value, onChange }: ValidatorItemProps) => {
                                             );
                                         }}
                                     </Bind>
-                                </Cell>
+                                </Grid.Column>
+                                <>{renderSettings(validator)}</>
                             </Grid>
-
-                            {renderSettings(validator)}
                         </>
                     )}
                 </Form>
diff --git a/packages/app-headless-cms/src/admin/components/FieldEditor/EditFieldDialog/ValidationTab/index.ts b/packages/app-headless-cms/src/admin/components/FieldEditor/EditFieldDialog/ValidationTab/index.ts
new file mode 100644
index 00000000000..4236dd9ae52
--- /dev/null
+++ b/packages/app-headless-cms/src/admin/components/FieldEditor/EditFieldDialog/ValidationTab/index.ts
@@ -0,0 +1 @@
+export * from "./ValidationTab";
diff --git a/packages/app-headless-cms/src/admin/components/FieldEditor/EditFieldDialog/ValidationsSection.tsx b/packages/app-headless-cms/src/admin/components/FieldEditor/EditFieldDialog/ValidationsSection.tsx
deleted file mode 100644
index 96e47600965..00000000000
--- a/packages/app-headless-cms/src/admin/components/FieldEditor/EditFieldDialog/ValidationsSection.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import React from "react";
-import { Cell, Grid } from "@webiny/ui/Grid";
-import { Typography } from "@webiny/ui/Typography";
-import { ValidatorsList } from "./ValidatorsList";
-import { CmsModelFieldValidatorConfigAdapter } from "~/utils/CmsModelFieldValidatorConfigAdapter";
-
-interface ValidatorsSectionProps {
-    title: string;
-    fieldKey: "validators" | "listValidators";
-    description: string;
-    validators: CmsModelFieldValidatorConfigAdapter[];
-}
-
-const bindTo = {
-    validators: "validation",
-    listValidators: "listValidation"
-};
-
-export const ValidationsSection = ({
-    title,
-    description,
-    fieldKey,
-    validators
-}: ValidatorsSectionProps) => {
-    return (
-        <Grid>
-            <Cell span={12}>
-                <Typography use={"headline5"}>{title}</Typography>
-                <br />
-                <Typography use={"body2"}>{description}</Typography>
-            </Cell>
-            <Cell span={12}>
-                <ValidatorsList name={bindTo[fieldKey]} validators={validators} />
-            </Cell>
-        </Grid>
-    );
-};
diff --git a/packages/app-headless-cms/src/admin/components/FieldEditor/Field.tsx b/packages/app-headless-cms/src/admin/components/FieldEditor/Field.tsx
index 65e53401424..e84782350c0 100644
--- a/packages/app-headless-cms/src/admin/components/FieldEditor/Field.tsx
+++ b/packages/app-headless-cms/src/admin/components/FieldEditor/Field.tsx
@@ -1,86 +1,20 @@
 import React, { Fragment, useCallback, useMemo } from "react";
-import { css } from "emotion";
-import styled from "@emotion/styled";
-import { IconButton } from "@webiny/ui/Button";
-import { Typography } from "@webiny/ui/Typography";
-import { ReactComponent as EditIcon } from "@material-design-icons/svg/outlined/edit.svg";
-import { ReactComponent as DeleteIcon } from "~/admin/icons/delete.svg";
-import { ReactComponent as TitleIcon } from "~/admin/icons/title-24px.svg";
-import { ReactComponent as MoreVerticalIcon } from "~/admin/icons/more_vert.svg";
-import { Menu, MenuItem } from "@webiny/ui/Menu";
+import capitalize from "lodash/capitalize";
+import { ReactComponent as EditIcon } from "@webiny/icons/edit.svg";
+import { ReactComponent as DeleteIcon } from "@webiny/icons/delete.svg";
+import { ReactComponent as TitleIcon } from "@webiny/icons/title.svg";
+import { ReactComponent as MoreVerticalIcon } from "@webiny/icons/more_vert.svg";
 import { plugins } from "@webiny/plugins";
 import { CmsModelField, CmsEditorFieldOptionPlugin, CmsModel } from "~/types";
-import { ListItemGraphic } from "@webiny/ui/List";
-import { Icon } from "@webiny/ui/Icon";
 import { i18n } from "@webiny/app/i18n";
 import { useSnackbar } from "@webiny/app-admin/hooks/useSnackbar";
 import { useModelEditor } from "~/admin/hooks";
 import { useModelFieldEditor } from "~/admin/components/FieldEditor/useModelFieldEditor";
 import { useConfirmationDialog } from "@webiny/app-admin";
+import { IconButton, Heading, Text, DropdownMenu, Tag } from "@webiny/admin-ui";
 
 const t = i18n.ns("app-headless-cms/admin/components/editor/field");
 
-const FieldContainer = styled("div")({
-    display: "flex",
-    flexDirection: "row",
-    justifyContent: "space-between",
-    alignItems: "center"
-});
-
-const LowerCase = styled.span`
-    text-transform: lowercase;
-`;
-
-const Info = styled("div")({
-    display: "flex",
-    flexDirection: "column",
-    "> *": {
-        flex: "1 100%",
-        lineHeight: "150%"
-    }
-});
-
-const Actions = styled("div")({
-    display: "flex",
-    flexDirection: "row",
-    alignItems: "right",
-    position: "relative",
-    "> *": {
-        flex: "1 100%"
-    }
-});
-
-/**
- * TODO @sven to give correct values
- */
-const FieldTypeName = styled("div")({
-    fontFamily: "var(--mdc-typography-font-family)",
-    display: "flex",
-    flexDirection: "column",
-    textTransform: "uppercase",
-    color: "#938F99",
-    flex: "1",
-    textAlign: "right",
-    fontSize: "14px",
-    paddingRight: "10px"
-});
-
-const menuStyles = css({
-    width: "220px",
-    ".disabled": {
-        opacity: 0.5,
-        pointerEvents: "none"
-    }
-});
-
-const FieldExtra = styled.div`
-    padding: 10px 0 10px;
-
-    :empty {
-        display: none;
-    }
-`;
-
 const allowedTitleFieldTypes: string[] = ["text", "number"];
 
 const isFieldAllowedToBeTitle = (model: CmsModel, field: CmsModelField, parent?: CmsModelField) => {
@@ -255,7 +189,7 @@ const Field = (props: FieldProps) => {
             if (!fieldTypeName) {
                 return null;
             }
-            return <FieldTypeName>{fieldTypeName}</FieldTypeName>;
+            return <Tag content={capitalize(fieldTypeName)} variant={"neutral-base"} />;
         };
 
         fn.displayName = "FieldTypeRenderer";
@@ -271,74 +205,88 @@ const Field = (props: FieldProps) => {
 
     return (
         <Fragment>
-            <FieldContainer>
-                <Info>
-                    <Typography use={"subtitle1"}>{field.label}</Typography>
-                    <Typography use={"caption"}>
+            <div className={"wby-flex wby-justify-between wby-align-center"}>
+                <div>
+                    <Heading level={6}>{field.label}</Heading>
+                    <Text size={"sm"} className={"wby-text-neutral-strong"}>
                         {fieldPlugin.field.label}
-                        {info && <LowerCase> ({info})</LowerCase>}
-                    </Typography>
-                </Info>
-                {fieldInformationRenderer
-                    ? fieldInformationRenderer({ model, field })
-                    : defaultInformationRenderer()}
-                <Actions>
+                        {info && <span className={"wby-lowercase"}> ({info})</span>}
+                    </Text>
+                </div>
+                <div className={"wby-flex wby-items-center wby-justify-end wby-gap-sm"}>
+                    {fieldInformationRenderer
+                        ? fieldInformationRenderer({ model, field })
+                        : defaultInformationRenderer()}
                     {canEdit ? (
                         <IconButton
                             data-testid={"cms.editor.edit-field"}
                             icon={<EditIcon />}
                             onClick={() => onEdit(field)}
+                            variant={"ghost"}
+                            size={"sm"}
                         />
                     ) : null}
-                    <Menu
-                        className={menuStyles}
-                        handle={<IconButton icon={<MoreVerticalIcon />} />}
+                    <DropdownMenu
+                        trigger={
+                            <IconButton icon={<MoreVerticalIcon />} variant={"ghost"} size={"sm"} />
+                        }
                     >
                         {editorFieldOptionPlugins.map(pl =>
                             React.cloneElement(pl.render(), { key: pl.name })
                         )}
                         {/* We only allow this action for top-level fields. */}
-                        <MenuItem
+                        <DropdownMenu.Item
                             disabled={!isFieldAllowedToBeTitle(model, field, parent)}
                             onClick={setAsTitle}
-                        >
-                            <ListItemGraphic>
-                                <Icon icon={<TitleIcon />} />
-                            </ListItemGraphic>
-                            {t`Use as title`}
-                        </MenuItem>
-                        <MenuItem
+                            text={t`Use as title`}
+                            icon={
+                                <DropdownMenu.Item.Icon
+                                    element={<TitleIcon />}
+                                    label={t`Use as title`}
+                                />
+                            }
+                        />
+                        <DropdownMenu.Item
                             disabled={!isFieldAllowedToBeDescription(model, field, parent)}
                             onClick={setAsDescription}
-                        >
-                            <ListItemGraphic>
-                                <Icon icon={<TitleIcon />} />
-                            </ListItemGraphic>
-                            {t`Use as description`}
-                        </MenuItem>
-                        <MenuItem
+                            text={t`Use as description`}
+                            icon={
+                                <DropdownMenu.Item.Icon
+                                    element={<TitleIcon />}
+                                    label={t`Use as description`}
+                                />
+                            }
+                        />
+                        <DropdownMenu.Item
                             disabled={!isFieldAllowedToBeImage(model, field, parent)}
                             onClick={setAsImage}
-                        >
-                            <ListItemGraphic>
-                                <Icon icon={<TitleIcon />} />
-                            </ListItemGraphic>
-                            {t`Use as image`}
-                        </MenuItem>
-
-                        <MenuItem onClick={onDelete}>
-                            <ListItemGraphic>
-                                <Icon icon={<DeleteIcon />} />
-                            </ListItemGraphic>
-                            {t`Delete`}
-                        </MenuItem>
-                    </Menu>
-                </Actions>
-            </FieldContainer>
-            <FieldExtra>
-                {fieldPlugin.field.render &&
-                    fieldPlugin.field.render({ field, data: model, setData: setModel })}
-            </FieldExtra>
+                            text={t`Use as image`}
+                            icon={
+                                <DropdownMenu.Item.Icon
+                                    element={<TitleIcon />}
+                                    label={t`Use as image`}
+                                />
+                            }
+                        />
+                        <DropdownMenu.Item
+                            onClick={onDelete}
+                            text={t`Delete`}
+                            icon={
+                                <DropdownMenu.Item.Icon
+                                    element={<DeleteIcon />}
+                                    label={t`Delete`}
+                                />
+                            }
+                            className={"!wby-text-destructive-primary [&_svg]:wby-fill-destructive"}
+                        />
+                    </DropdownMenu>
+                </div>
+            </div>
+            {fieldPlugin.field.render && (
+                <div className={"wby-pt-md"}>
+                    {fieldPlugin.field.render({ field, data: model, setData: setModel })}
+                </div>
+            )}
         </Fragment>
     );
 };
diff --git a/packages/app-headless-cms/src/admin/components/FieldEditor/FieldEditor.tsx b/packages/app-headless-cms/src/admin/components/FieldEditor/FieldEditor.tsx
index 455c8dd6f9a..b2bb2f0cf7f 100644
--- a/packages/app-headless-cms/src/admin/components/FieldEditor/FieldEditor.tsx
+++ b/packages/app-headless-cms/src/admin/components/FieldEditor/FieldEditor.tsx
@@ -1,17 +1,16 @@
 import React, { Fragment } from "react";
 import get from "lodash/get";
-import { Icon } from "@webiny/ui/Icon";
 import { i18n } from "@webiny/app/i18n";
-import { ReactComponent as HandleIcon } from "~/admin/icons/round-drag_indicator-24px.svg";
+import { ReactComponent as DragIcon } from "@webiny/icons/drag_indicator.svg";
 import { Center, Vertical, Horizontal } from "../DropZone";
 import Draggable from "../Draggable";
 import EditFieldDialog from "./EditFieldDialog";
 import Field from "./Field";
-import { rowHandle, fieldHandle, fieldContainer, Row, RowContainer } from "./Styled";
 import { useModelFieldEditor } from "./useModelFieldEditor";
 import { FieldEditorProvider, IsVisibleCallable } from "./FieldEditorContext";
 import { CmsModelField, CmsEditorFieldsLayout, CmsModelFieldTypePlugin, DragSource } from "~/types";
 import { ModelFieldProvider } from "~/admin/components/ModelFieldProvider";
+import { cn, Icon } from "@webiny/admin-ui";
 
 const t = i18n.namespace("app-headless-cms/admin/components/editor");
 
@@ -111,9 +110,28 @@ const Editor = () => {
                             isDragging
                         } /* RowContainer start - includes drag handle, drop zones and the Row itself. */
                     ) => (
-                        <RowContainer style={{ opacity: isDragging ? 0.3 : 1 }}>
-                            <div className={rowHandle} ref={drag}>
-                                <Icon icon={<HandleIcon />} />
+                        <div
+                            className={cn([
+                                "wby-flex wby-flex-column",
+                                "wby-relative",
+                                "wby-mb-md last-of-type:wby-mb-none",
+                                "wby-bg-neutral-dimmed",
+                                isDragging ? "wby-opacity-30" : "wby-opacity-100"
+                            ])}
+                        >
+                            <div
+                                className={cn([
+                                    "wby-cursor-grab",
+                                    "wby-absolute wby-left-sm-plus wby-top-sm-plus wby-z-10"
+                                ])}
+                                ref={drag}
+                            >
+                                <Icon
+                                    icon={<DragIcon />}
+                                    label={"Drag to move this row"}
+                                    color={"neutral-light"}
+                                    size={"sm"}
+                                />
                             </div>
                             <Horizontal
                                 isVisible={isHorizontalDropzoneVisible(noConflict())}
@@ -121,7 +139,13 @@ const Editor = () => {
                                 onDrop={item => onFieldDrop(item, { row: index, index: null })}
                             />
                             {/* Row start - includes field drop zones and fields */}
-                            <Row data-testid={"cms.editor.field-row"}>
+                            <div
+                                className={cn([
+                                    "wby-w-full wby-flex wby-justify-between",
+                                    "wby-pl-xl wby-pr-sm wby-py-sm"
+                                ])}
+                                data-testid={"cms.editor.field-row"}
+                            >
                                 {row.map((field, fieldIndex) => (
                                     <ModelFieldProvider field={field} key={field.fieldId}>
                                         <Draggable
@@ -137,7 +161,14 @@ const Editor = () => {
                                             endDrag={onEndDrag}
                                         >
                                             {({ drag }) => (
-                                                <div className={fieldContainer} ref={drag}>
+                                                <div
+                                                    className={cn([
+                                                        "wby-relative",
+                                                        "wby-flex-1 wby-basis-full",
+                                                        "wby-mx-sm"
+                                                    ])}
+                                                    ref={drag}
+                                                >
                                                     <Vertical
                                                         depth={depth}
                                                         onDrop={item =>
@@ -159,7 +190,11 @@ const Editor = () => {
                                                         )}
                                                     />
 
-                                                    <div className={fieldHandle}>
+                                                    <div
+                                                        className={
+                                                            "wby-cursor-grab wby-bg-neutral-base wby-p-md wby-shadow-sm wby-rounded-xs"
+                                                        }
+                                                    >
                                                         <Field
                                                             parent={parent}
                                                             field={field}
@@ -198,7 +233,7 @@ const Editor = () => {
                                         </Draggable>
                                     </ModelFieldProvider>
                                 ))}
-                            </Row>
+                            </div>
                             {/* Row end */}
                             {index === fields.length - 1 ? (
                                 <Horizontal
@@ -213,7 +248,7 @@ const Editor = () => {
                                     }
                                 />
                             ) : null}
-                        </RowContainer>
+                        </div>
                     )}
                 </Draggable>
             ))}
diff --git a/packages/app-headless-cms/src/admin/components/FieldEditor/Styled.ts b/packages/app-headless-cms/src/admin/components/FieldEditor/Styled.ts
deleted file mode 100644
index d561993779f..00000000000
--- a/packages/app-headless-cms/src/admin/components/FieldEditor/Styled.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import { css } from "emotion";
-import styled from "@emotion/styled";
-
-export const RowContainer = styled.div`
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    margin-bottom: 20px;
-    border-radius: 2px;
-    background-color: var(--mdc-theme-surface);
-    border: 1px solid var(--mdc-theme-on-background);
-    box-shadow: var(--mdc-theme-on-background) 1px 1px 1px,
-        var(--mdc-theme-on-background) 1px 1px 2px;
-    :last-child {
-        margin-bottom: 5px;
-    }
-`;
-
-export const Row = styled("div")({
-    display: "flex",
-    flexDirection: "row",
-    backgroundColor: "var(--mdc-theme-surface)",
-    paddingLeft: 40,
-    paddingRight: 10,
-    position: "relative"
-});
-
-export const fieldContainer = css({
-    position: "relative",
-    flex: "1 100%",
-    backgroundColor: "var(--mdc-theme-background)",
-    padding: "2px 15px 2px",
-    margin: 10,
-    borderRadius: 2,
-    border: "1px solid var(--mdc-theme-on-background)",
-    transition: "box-shadow 225ms",
-    color: "var(--mdc-theme-on-surface)",
-    cursor: "grab",
-    "&:hover": {
-        boxShadow:
-            "var(--mdc-theme-on-background) 1px 1px 1px, var(--mdc-theme-on-background) 1px 1px 2px"
-    }
-});
-
-export const rowHandle = css({
-    width: 30,
-    cursor: "grab",
-    position: "absolute",
-    left: 10,
-    top: "50%",
-    transform: "translateY(-50%)",
-    zIndex: 1,
-    color: "var(--mdc-theme-on-surface)"
-});
-
-export const fieldHandle = css({
-    cursor: "grab"
-});
diff --git a/packages/app-headless-cms/src/admin/components/IconPicker.tsx b/packages/app-headless-cms/src/admin/components/IconPicker.tsx
index 6dc980f6ee9..e703a177be8 100644
--- a/packages/app-headless-cms/src/admin/components/IconPicker.tsx
+++ b/packages/app-headless-cms/src/admin/components/IconPicker.tsx
@@ -1,257 +1,19 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { css } from "emotion";
-import { css as reactCss, Global } from "@emotion/react";
+import React, { useMemo } from "react";
+import {
+    IconPickerIconDto,
+    IconPicker as AdminIconPicker,
+    IconPickerProps
+} from "@webiny/admin-ui";
 import { plugins } from "@webiny/plugins";
-import { Typography } from "@webiny/ui/Typography";
-import { Grid } from "react-virtualized";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { DelayedOnChange, OnChangeCallable } from "@webiny/ui/DelayedOnChange";
-import { Menu, RenderableMenuChildren } from "@webiny/ui/Menu";
-import { Input } from "@webiny/ui/Input";
-import { CmsIcon, CmsIconsPlugin } from "~/types";
-import { FormComponentProps } from "@webiny/ui/types";
-import { FormElementMessage } from "@webiny/ui/FormElementMessage";
-import { GridCellProps } from "react-virtualized/dist/es/Grid";
+import { CmsIconsPlugin } from "~/types";
 
-/**
- * Controls the helper text below the checkbox.
- * @type {string}
- */
-const iconPickerLabel = css({ marginBottom: 5, marginLeft: 2 });
-
-const globalStyles = reactCss`
-    #rmwcPortal > .mdc-menu-surface {
-        z-index: 1000;
-    }
-`;
-
-const MenuWrapper = css`
-    color: var(--mdc-theme-text-secondary-on-background);
-    background-color: var(--mdc-theme-on-background);
-    border-bottom: 1px solid var(--mdc-theme-text-secondary-on-background, rgba(0, 0, 0, 0.54));
-    padding: 16px 8px;
-    cursor: pointer;
-    :hover {
-        border-bottom: 1px solid rgba(0, 0, 0, 1);
-    }
-`;
-
-const NoResultWrapper = css({
-    width: 640,
-    color: "var(--mdc-theme-text-secondary-on-background)",
-    padding: "16px 12px"
-});
-
-const COLUMN_COUNT = 6;
-
-const gridItem = css({
-    display: "flex",
-    flexDirection: "column",
-    justifyContent: "flex-start",
-    boxSizing: "border-box",
-    paddingTop: 15,
-    alignItems: "center",
-    textAlign: "center",
-    cursor: "pointer",
-    transform: "translateZ(0)",
-    borderRadius: 2,
-    color: "var(--mdc-theme-text-secondary-on-background)",
-    transition: "all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1)",
-    "&::after": {
-        boxShadow: "0 0.25rem 0.125rem 0 rgba(0,0,0,0.05)",
-        transition: "opacity 0.5s cubic-bezier(0.165, 0.84, 0.44, 1)",
-        content: '""',
-        position: "absolute",
-        top: 0,
-        left: 0,
-        width: "100%",
-        height: "100%",
-        zIndex: -1,
-        opacity: 0
-    },
-    "&:hover": {
-        backgroundColor: "var(--mdc-theme-background)",
-        color: "var(--mdc-theme-text-primary-on-background)",
-        "&::after": {
-            opacity: 1
-        }
-    },
-    ">svg": {
-        width: 42,
-        marginBottom: 5
-    }
-});
-
-const grid = css({
-    padding: 20
-});
-
-const pickIcon = css({
-    width: 50,
-    textAlign: "center",
-    cursor: "pointer"
-});
-
-const searchInput = css({
-    input: {
-        padding: "20px 12px 20px"
-    }
-});
-
-export interface IconPickerProps extends FormComponentProps {
-    label?: React.ReactNode;
-    description?: React.ReactNode;
-}
-
-interface RenderCellParams {
-    closeMenu: () => void;
-}
-
-export const IconPicker = ({
-    value,
-    onChange,
-    label,
-    description,
-    validation
-}: IconPickerProps) => {
-    const [filter, setFilter] = useState("");
-    const [mustRenderGrid, setMustRenderGrid] = useState(false);
-    const inputRef = useRef<HTMLInputElement>(null);
-
-    useEffect(() => {
-        setTimeout(() => {
-            if (mustRenderGrid && inputRef.current) {
-                inputRef.current.focus();
-            }
-        }, 50);
-    }, [mustRenderGrid]);
-
-    const onFilterChange = useCallback<OnChangeCallable>(
-        (value, cb) => {
-            setFilter(value);
-            if (cb) {
-                cb(value);
-            }
-        },
-        [filter]
-    );
-
-    const allIcons: CmsIcon[] = useMemo(() => {
+export const IconPicker = (props: Omit<IconPickerProps, "icons">) => {
+    const icons: IconPickerIconDto[] = useMemo(() => {
         const iconPlugins = plugins.byType<CmsIconsPlugin>("cms-icons");
-        return iconPlugins.reduce((icons: Array<CmsIcon>, pl) => {
+        return iconPlugins.reduce((icons: Array<IconPickerIconDto>, pl) => {
             return icons.concat(pl.getIcons());
         }, []);
     }, []);
 
-    const icons = useMemo(() => {
-        return filter ? allIcons.filter(ic => ic.name.includes(filter)) : allIcons;
-    }, [filter]);
-
-    const renderCell = useCallback(
-        ({ closeMenu }: RenderCellParams) => {
-            return function renderCell({
-                columnIndex,
-                key,
-                rowIndex,
-                style
-            }: GridCellProps): React.ReactNode {
-                const item = icons[rowIndex * COLUMN_COUNT + columnIndex];
-                if (!item) {
-                    return null;
-                }
-
-                return (
-                    <div
-                        key={key}
-                        style={style}
-                        className={gridItem}
-                        onClick={() => {
-                            if (onChange) {
-                                onChange(item.id.join("/"));
-                            }
-                            closeMenu();
-                        }}
-                    >
-                        <FontAwesomeIcon icon={item.id} size={"2x"} />
-                        <Typography use={"body2"}>{item.name}</Typography>
-                    </div>
-                );
-            };
-        },
-        [icons]
-    );
-
-    const renderGrid = useCallback<RenderableMenuChildren>(
-        ({ closeMenu }) => {
-            return (
-                <>
-                    <Global styles={globalStyles} />
-                    <DelayedOnChange value={filter} onChange={onFilterChange}>
-                        {({ value, onChange }) => (
-                            <Input
-                                inputRef={inputRef}
-                                className={searchInput}
-                                value={value}
-                                onChange={onChange}
-                                placeholder={"Search icons..."}
-                            />
-                        )}
-                    </DelayedOnChange>
-                    {icons.length === 0 ? (
-                        <div className={NoResultWrapper}>
-                            <Typography use="body1">No results found.</Typography>
-                        </div>
-                    ) : (
-                        <Grid
-                            className={grid}
-                            cellRenderer={renderCell({ closeMenu })}
-                            columnCount={COLUMN_COUNT}
-                            columnWidth={100}
-                            height={440}
-                            rowCount={Math.ceil(icons.length / COLUMN_COUNT)}
-                            rowHeight={100}
-                            width={640}
-                        />
-                    )}
-                </>
-            );
-        },
-        [icons]
-    );
-
-    const fontAwesomeIconValue: any =
-        typeof value === "string" && value.includes("/") ? value.split("/") : ["fas", "star"];
-
-    const { isValid: validationIsValid, message: validationMessage } = validation || {};
-
-    return (
-        <>
-            {label && (
-                <div className={iconPickerLabel}>
-                    <Typography use={"body1"}>{label}</Typography>
-                </div>
-            )}
-
-            <Menu
-                onOpen={() => setMustRenderGrid(true)}
-                onClose={() => setMustRenderGrid(false)}
-                renderToPortal={true}
-                render={mustRenderGrid ? renderGrid : () => null}
-                handle={
-                    <div className={MenuWrapper}>
-                        <div className={pickIcon}>
-                            <FontAwesomeIcon icon={fontAwesomeIconValue} size={"2x"} />
-                        </div>
-                    </div>
-                }
-            />
-
-            {validationIsValid === false && (
-                <FormElementMessage error>{validationMessage}</FormElementMessage>
-            )}
-            {validationIsValid !== false && description && (
-                <FormElementMessage>{description}</FormElementMessage>
-            )}
-        </>
-    );
+    return <AdminIconPicker size={"lg"} icons={icons} {...props} />;
 };
diff --git a/packages/app-headless-cms/src/admin/components/LexicalCmsEditor/LexicalCmsEditor.tsx b/packages/app-headless-cms/src/admin/components/LexicalCmsEditor/LexicalCmsEditor.tsx
index 925468df5af..60469ba8715 100644
--- a/packages/app-headless-cms/src/admin/components/LexicalCmsEditor/LexicalCmsEditor.tsx
+++ b/packages/app-headless-cms/src/admin/components/LexicalCmsEditor/LexicalCmsEditor.tsx
@@ -1,7 +1,6 @@
 import React, { useCallback } from "react";
 import { StaticToolbar } from "@webiny/lexical-editor";
 import { RichTextEditorProps } from "@webiny/lexical-editor/types";
-import { CompositionScope } from "@webiny/react-composition";
 import { LexicalEditor } from "@webiny/app-admin/components/LexicalEditor";
 
 const placeholderStyles: React.CSSProperties = { position: "absolute", top: 40, left: 25 };
@@ -20,11 +19,7 @@ const styles: React.CSSProperties = {
     maxHeight: 350
 };
 
-const toolbar = (
-    <CompositionScope name={"cms"}>
-        <StaticToolbar />
-    </CompositionScope>
-);
+const toolbar = <StaticToolbar />;
 
 export const LexicalCmsEditor = (props: Omit<RichTextEditorProps, "theme">) => {
     const onChange = useCallback(
diff --git a/packages/app-headless-cms/src/admin/config/contentEntries/list/Browser/AdvancedSearch/FieldRenderer.tsx b/packages/app-headless-cms/src/admin/config/contentEntries/list/Browser/AdvancedSearch/FieldRenderer.tsx
index b240d2f8cc7..cb021a5122d 100644
--- a/packages/app-headless-cms/src/admin/config/contentEntries/list/Browser/AdvancedSearch/FieldRenderer.tsx
+++ b/packages/app-headless-cms/src/admin/config/contentEntries/list/Browser/AdvancedSearch/FieldRenderer.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-import { CompositionScope } from "@webiny/react-composition";
 import {
     AcoConfig,
     AdvancedSearchFieldRendererConfig as FieldRendererConfig
@@ -23,11 +22,9 @@ const BaseFieldRenderer = ({ modelIds = [], ...props }: FieldRendererProps) => {
     }
 
     return (
-        <CompositionScope name={"cms"}>
-            <AcoConfig>
-                <AdvancedSearch.FieldRenderer {...props} />
-            </AcoConfig>
-        </CompositionScope>
+        <AcoConfig>
+            <AdvancedSearch.FieldRenderer {...props} />
+        </AcoConfig>
     );
 };
 
diff --git a/packages/app-headless-cms/src/admin/config/contentEntries/list/Browser/EntryAction.tsx b/packages/app-headless-cms/src/admin/config/contentEntries/list/Browser/EntryAction.tsx
index ea5c9c8a216..00bf9ef8f22 100644
--- a/packages/app-headless-cms/src/admin/config/contentEntries/list/Browser/EntryAction.tsx
+++ b/packages/app-headless-cms/src/admin/config/contentEntries/list/Browser/EntryAction.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { CompositionScope, makeDecoratable } from "@webiny/react-composition";
+import { makeDecoratable } from "@webiny/react-composition";
 import { AcoConfig, RecordActionConfig } from "@webiny/app-aco";
 import { IsApplicableToCurrentModel } from "~/admin/config/IsApplicableToCurrentModel";
 
@@ -15,13 +15,11 @@ const BaseEntryAction = makeDecoratable(
     "EntryAction",
     ({ modelIds = [], ...props }: EntryActionProps) => {
         return (
-            <CompositionScope name={"cms"}>
-                <AcoConfig>
-                    <IsApplicableToCurrentModel modelIds={modelIds}>
-                        <Record.Action {...props} />
-                    </IsApplicableToCurrentModel>
-                </AcoConfig>
-            </CompositionScope>
+            <AcoConfig>
+                <IsApplicableToCurrentModel modelIds={modelIds}>
+                    <Record.Action {...props} />
+                </IsApplicableToCurrentModel>
+            </AcoConfig>
         );
     }
 );
diff --git a/packages/app-headless-cms/src/admin/config/contentEntries/list/Browser/FolderAction.tsx b/packages/app-headless-cms/src/admin/config/contentEntries/list/Browser/FolderAction.tsx
index 53f2c20001b..40d950d578f 100644
--- a/packages/app-headless-cms/src/admin/config/contentEntries/list/Browser/FolderAction.tsx
+++ b/packages/app-headless-cms/src/admin/config/contentEntries/list/Browser/FolderAction.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-import { CompositionScope } from "@webiny/react-composition";
 import { AcoConfig, FolderActionConfig } from "@webiny/app-aco";
 import { useModel } from "~/admin/hooks";
 
@@ -19,11 +18,9 @@ const BaseFolderAction = ({ modelIds = [], ...props }: FolderActionProps) => {
     }
 
     return (
-        <CompositionScope name={"cms"}>
-            <AcoConfig>
-                <Folder.Action {...props} />
-            </AcoConfig>
-        </CompositionScope>
+        <AcoConfig>
+            <Folder.Action {...props} />
+        </AcoConfig>
     );
 };
 
diff --git a/packages/app-headless-cms/src/admin/config/contentEntries/list/Browser/Table/Column.tsx b/packages/app-headless-cms/src/admin/config/contentEntries/list/Browser/Table/Column.tsx
index d71110f2f93..e1ebeb81801 100644
--- a/packages/app-headless-cms/src/admin/config/contentEntries/list/Browser/Table/Column.tsx
+++ b/packages/app-headless-cms/src/admin/config/contentEntries/list/Browser/Table/Column.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { CompositionScope, makeDecoratable } from "@webiny/react-composition";
+import { makeDecoratable } from "@webiny/react-composition";
 import { AcoConfig, TableColumnConfig as ColumnConfig } from "@webiny/app-aco";
 import { TableItem } from "~/types";
 import { IsApplicableToCurrentModel } from "~/admin/config/IsApplicableToCurrentModel";
@@ -14,13 +14,11 @@ export interface ColumnProps extends React.ComponentProps<typeof AcoConfig.Table
 
 const BaseColumnComponent = ({ modelIds = [], ...props }: ColumnProps) => {
     return (
-        <CompositionScope name={"cms"}>
-            <AcoConfig>
-                <IsApplicableToCurrentModel modelIds={modelIds}>
-                    <Table.Column {...props} />
-                </IsApplicableToCurrentModel>
-            </AcoConfig>
-        </CompositionScope>
+        <AcoConfig>
+            <IsApplicableToCurrentModel modelIds={modelIds}>
+                <Table.Column {...props} />
+            </IsApplicableToCurrentModel>
+        </AcoConfig>
     );
 };
 
diff --git a/packages/app-headless-cms/src/admin/config/contentEntries/list/ContentEntryListConfig.tsx b/packages/app-headless-cms/src/admin/config/contentEntries/list/ContentEntryListConfig.tsx
index 5a383dc7529..a4d036cc30e 100644
--- a/packages/app-headless-cms/src/admin/config/contentEntries/list/ContentEntryListConfig.tsx
+++ b/packages/app-headless-cms/src/admin/config/contentEntries/list/ContentEntryListConfig.tsx
@@ -1,10 +1,21 @@
-import { useMemo } from "react";
+import React, { useMemo } from "react";
 import { createConfigurableComponent } from "@webiny/react-properties";
 import { Browser, BrowserConfig } from "./Browser";
+import { CompositionScope } from "@webiny/react-composition";
 
 const base = createConfigurableComponent<ContentEntryListConfig>("ContentEntryListConfig");
 
-export const ContentEntryListConfig = Object.assign(base.Config, { Browser });
+const ScopedContentEntryListConfig = ({ children }: { children: React.ReactNode }) => {
+    return (
+        <CompositionScope name={"cms"}>
+            <base.Config>{children}</base.Config>
+        </CompositionScope>
+    );
+};
+
+ScopedContentEntryListConfig.displayName = "ContentEntryListConfig";
+
+export const ContentEntryListConfig = Object.assign(ScopedContentEntryListConfig, { Browser });
 export const ContentEntryListWithConfig = base.WithConfig;
 
 interface ContentEntryListConfig {
diff --git a/packages/app-headless-cms/src/admin/contexts/Cms/index.tsx b/packages/app-headless-cms/src/admin/contexts/Cms/index.tsx
index 0cd0e48e962..bae888f8204 100644
--- a/packages/app-headless-cms/src/admin/contexts/Cms/index.tsx
+++ b/packages/app-headless-cms/src/admin/contexts/Cms/index.tsx
@@ -5,38 +5,38 @@ import { CircularProgress } from "@webiny/ui/Progress";
 import { config as appConfig } from "@webiny/app/config";
 import { CmsContentEntry, CmsContentEntryRevision, CmsErrorResponse, CmsModel } from "~/types";
 import {
-    CmsEntryPublishMutationResponse,
-    CmsEntryPublishMutationVariables,
-    createReadQuery,
-    createCreateMutation,
-    createCreateFromMutation,
-    createUpdateMutation,
-    createDeleteMutation,
-    createPublishMutation,
-    createUnpublishMutation,
+    CmsEntriesListRevisionsQueryResponse,
+    CmsEntriesListRevisionsQueryVariables,
+    CmsEntryBulkActionMutationResponse,
+    CmsEntryBulkActionMutationVariables,
+    CmsEntryCreateFromMutationResponse,
+    CmsEntryCreateFromMutationVariables,
     CmsEntryCreateMutationResponse,
     CmsEntryCreateMutationVariables,
-    CmsEntryUpdateMutationResponse,
-    CmsEntryUpdateMutationVariables,
     CmsEntryDeleteMutationResponse,
     CmsEntryDeleteMutationVariables,
-    CmsEntryUnpublishMutationResponse,
-    CmsEntryUnpublishMutationVariables,
-    CmsEntryCreateFromMutationResponse,
-    CmsEntryCreateFromMutationVariables,
     CmsEntryGetQueryResponse,
     CmsEntryGetQueryVariables,
-    createReadSingletonQuery,
     CmsEntryGetSingletonQueryResponse,
-    createUpdateSingletonMutation,
+    CmsEntryPublishMutationResponse,
+    CmsEntryPublishMutationVariables,
+    CmsEntryUnpublishMutationResponse,
+    CmsEntryUnpublishMutationVariables,
+    CmsEntryUpdateMutationResponse,
+    CmsEntryUpdateMutationVariables,
     CmsEntryUpdateSingletonMutationResponse,
     CmsEntryUpdateSingletonMutationVariables,
-    createRevisionsQuery,
-    CmsEntriesListRevisionsQueryResponse,
-    CmsEntriesListRevisionsQueryVariables,
     createBulkActionMutation,
-    CmsEntryBulkActionMutationResponse,
-    CmsEntryBulkActionMutationVariables
+    createCreateFromMutation,
+    createCreateMutation,
+    createDeleteMutation,
+    createPublishMutation,
+    createReadQuery,
+    createReadSingletonQuery,
+    createRevisionsQuery,
+    createUnpublishMutation,
+    createUpdateMutation,
+    createUpdateSingletonMutation
 } from "@webiny/app-headless-cms-common";
 import { getFetchPolicy } from "~/utils/getFetchPolicy";
 
@@ -147,6 +147,38 @@ export interface BulkActionParams {
     data?: Record<string, any>;
 }
 
+interface ICatchErrorOnExecuteOptions {
+    message?: string;
+}
+
+const defaultErrorMessage =
+    "The system wasn't able to save the current entry. Please contact your support team to help you resolve this issue.";
+
+const catchErrorOnExecute = async <T = any,>(
+    cb: () => Promise<T>,
+    options?: ICatchErrorOnExecuteOptions
+) => {
+    try {
+        return await cb();
+    } catch (ex) {
+        return {
+            data: {
+                content: {
+                    data: null,
+                    error: {
+                        message: options?.message || defaultErrorMessage,
+                        code: ex.code,
+                        stack: ex.stack,
+                        data: {
+                            ...ex.data
+                        }
+                    }
+                }
+            }
+        };
+    }
+};
+
 export interface CmsContext {
     getApolloClient(locale: string): ApolloClient<any>;
 
@@ -312,17 +344,25 @@ export const CmsProvider = (props: CmsProviderProps) => {
         },
         createEntry: async ({ model, entry, options }) => {
             const mutation = createCreateMutation(model);
-            const response = await value.apolloClient.mutate<
-                CmsEntryCreateMutationResponse,
-                CmsEntryCreateMutationVariables
-            >({
-                mutation,
-                variables: {
-                    data: entry,
-                    options
+            const response = await catchErrorOnExecute(
+                () => {
+                    return value.apolloClient.mutate<
+                        CmsEntryCreateMutationResponse,
+                        CmsEntryCreateMutationVariables
+                    >({
+                        mutation,
+                        variables: {
+                            data: entry,
+                            options
+                        },
+                        fetchPolicy: getFetchPolicy(model)
+                    });
                 },
-                fetchPolicy: getFetchPolicy(model)
-            });
+                {
+                    message:
+                        "The system wasn't able to create a new entry. Please contact your support team to help you resolve this issue."
+                }
+            );
 
             if (!response.data) {
                 return {
@@ -346,18 +386,26 @@ export const CmsProvider = (props: CmsProviderProps) => {
         },
         createEntryRevisionFrom: async ({ model, id, input, options }) => {
             const mutation = createCreateFromMutation(model);
-            const response = await value.apolloClient.mutate<
-                CmsEntryCreateFromMutationResponse,
-                CmsEntryCreateFromMutationVariables
-            >({
-                mutation,
-                variables: {
-                    revision: id,
-                    data: input,
-                    options
+            const response = await catchErrorOnExecute(
+                async () => {
+                    return value.apolloClient.mutate<
+                        CmsEntryCreateFromMutationResponse,
+                        CmsEntryCreateFromMutationVariables
+                    >({
+                        mutation,
+                        variables: {
+                            revision: id,
+                            data: input,
+                            options
+                        },
+                        fetchPolicy: getFetchPolicy(model)
+                    });
                 },
-                fetchPolicy: getFetchPolicy(model)
-            });
+                {
+                    message:
+                        "The system wasn't able to create a new revision of the entry. Please contact your support team to help you resolve this issue."
+                }
+            );
 
             if (!response.data) {
                 return {
@@ -382,17 +430,19 @@ export const CmsProvider = (props: CmsProviderProps) => {
         updateEntryRevision: async ({ model, entry, options }) => {
             const mutation = createUpdateMutation(model);
             const { id, ...input } = entry;
-            const response = await value.apolloClient.mutate<
-                CmsEntryUpdateMutationResponse,
-                CmsEntryUpdateMutationVariables
-            >({
-                mutation,
-                variables: {
-                    revision: id,
-                    data: input,
-                    options
-                },
-                fetchPolicy: getFetchPolicy(model)
+            const response = await catchErrorOnExecute(() => {
+                return value.apolloClient.mutate<
+                    CmsEntryUpdateMutationResponse,
+                    CmsEntryUpdateMutationVariables
+                >({
+                    mutation,
+                    variables: {
+                        revision: id,
+                        data: input,
+                        options
+                    },
+                    fetchPolicy: getFetchPolicy(model)
+                });
             });
 
             if (!response.data) {
@@ -419,16 +469,18 @@ export const CmsProvider = (props: CmsProviderProps) => {
             const mutation = createUpdateSingletonMutation(model);
             // eslint-disable-next-line @typescript-eslint/no-unused-vars
             const { id, ...input } = entry;
-            const response = await value.apolloClient.mutate<
-                CmsEntryUpdateSingletonMutationResponse,
-                CmsEntryUpdateSingletonMutationVariables
-            >({
-                mutation,
-                variables: {
-                    data: input,
-                    options
-                },
-                fetchPolicy: getFetchPolicy(model)
+            const response = await catchErrorOnExecute(() => {
+                return value.apolloClient.mutate<
+                    CmsEntryUpdateSingletonMutationResponse,
+                    CmsEntryUpdateSingletonMutationVariables
+                >({
+                    mutation,
+                    variables: {
+                        data: input,
+                        options
+                    },
+                    fetchPolicy: getFetchPolicy(model)
+                });
             });
 
             if (!response.data) {
@@ -453,15 +505,23 @@ export const CmsProvider = (props: CmsProviderProps) => {
         },
         publishEntryRevision: async ({ model, id }) => {
             const mutation = createPublishMutation(model);
-            const response = await value.apolloClient.mutate<
-                CmsEntryPublishMutationResponse,
-                CmsEntryPublishMutationVariables
-            >({
-                mutation,
-                variables: {
-                    revision: id
+            const response = await catchErrorOnExecute(
+                () => {
+                    return value.apolloClient.mutate<
+                        CmsEntryPublishMutationResponse,
+                        CmsEntryPublishMutationVariables
+                    >({
+                        mutation,
+                        variables: {
+                            revision: id
+                        }
+                    });
+                },
+                {
+                    message:
+                        "The system wasn't able to publish the current entry. Please contact your support team to help you resolve this issue."
                 }
-            });
+            );
 
             if (!response.data) {
                 const error: CmsErrorResponse = {
@@ -485,15 +545,23 @@ export const CmsProvider = (props: CmsProviderProps) => {
         unpublishEntryRevision: async ({ model, id }) => {
             const mutation = createUnpublishMutation(model);
 
-            const response = await value.apolloClient.mutate<
-                CmsEntryUnpublishMutationResponse,
-                CmsEntryUnpublishMutationVariables
-            >({
-                mutation,
-                variables: {
-                    revision: id
+            const response = await catchErrorOnExecute(
+                () => {
+                    return value.apolloClient.mutate<
+                        CmsEntryUnpublishMutationResponse,
+                        CmsEntryUnpublishMutationVariables
+                    >({
+                        mutation,
+                        variables: {
+                            revision: id
+                        }
+                    });
+                },
+                {
+                    message:
+                        "The system wasn't able to unpublish the current entry. Please contact your support team to help you resolve this issue."
                 }
-            });
+            );
 
             if (!response.data) {
                 return {
@@ -517,16 +585,24 @@ export const CmsProvider = (props: CmsProviderProps) => {
         },
         deleteEntry: async ({ model, id }) => {
             const mutation = createDeleteMutation(model);
-            const response = await value.apolloClient.mutate<
-                CmsEntryDeleteMutationResponse,
-                CmsEntryDeleteMutationVariables
-            >({
-                mutation,
-                variables: {
-                    revision: id,
-                    permanently: false
+            const response = await catchErrorOnExecute(
+                () => {
+                    return value.apolloClient.mutate<
+                        CmsEntryDeleteMutationResponse,
+                        CmsEntryDeleteMutationVariables
+                    >({
+                        mutation,
+                        variables: {
+                            revision: id,
+                            permanently: false
+                        }
+                    });
+                },
+                {
+                    message:
+                        "The system wasn't able to delete the current entry. Please contact your support team to help you resolve this issue."
                 }
-            });
+            );
 
             if (!response.data) {
                 const error: CmsErrorResponse = {
@@ -547,18 +623,26 @@ export const CmsProvider = (props: CmsProviderProps) => {
         },
         bulkAction: async ({ model, action, where, search, data }) => {
             const mutation = createBulkActionMutation(model);
-            const response = await value.apolloClient.mutate<
-                CmsEntryBulkActionMutationResponse,
-                CmsEntryBulkActionMutationVariables
-            >({
-                mutation,
-                variables: {
-                    action,
-                    where,
-                    search,
-                    data
+            const response = await catchErrorOnExecute(
+                () => {
+                    return value.apolloClient.mutate<
+                        CmsEntryBulkActionMutationResponse,
+                        CmsEntryBulkActionMutationVariables
+                    >({
+                        mutation,
+                        variables: {
+                            action,
+                            where,
+                            search,
+                            data
+                        }
+                    });
+                },
+                {
+                    message:
+                        "The system wasn't able to perform the bulk action. Please contact your support team to help you resolve this issue."
                 }
-            });
+            );
 
             if (!response.data) {
                 return {
diff --git a/packages/app-headless-cms/src/admin/elements/NothingToShowElement.tsx b/packages/app-headless-cms/src/admin/elements/NothingToShowElement.tsx
index 4bdfe5384a6..b8daa776458 100644
--- a/packages/app-headless-cms/src/admin/elements/NothingToShowElement.tsx
+++ b/packages/app-headless-cms/src/admin/elements/NothingToShowElement.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { css } from "emotion";
+import { css } from "@emotion/css";
 import { NavigationMenuElement } from "@webiny/app-admin/ui/elements/NavigationMenuElement";
 import { UIElementConfig } from "@webiny/app-admin/ui/UIElement";
 import { List, ListItem } from "@webiny/ui/List";
diff --git a/packages/app-headless-cms/src/admin/graphql/contentModels.ts b/packages/app-headless-cms/src/admin/graphql/contentModels.ts
index 93e05dbfb5d..9e63d4d2cf8 100644
--- a/packages/app-headless-cms/src/admin/graphql/contentModels.ts
+++ b/packages/app-headless-cms/src/admin/graphql/contentModels.ts
@@ -53,6 +53,10 @@ export const MODEL_FIELDS = `
     singularApiName
     pluralApiName
     savedOn
+    createdBy {
+        id
+        displayName
+    }
     titleFieldId
     descriptionFieldId
     imageFieldId
diff --git a/packages/app-headless-cms/src/admin/menus/CmsMenuLoader.tsx b/packages/app-headless-cms/src/admin/menus/CmsMenuLoader.tsx
index b85d363cc84..37c969e2405 100644
--- a/packages/app-headless-cms/src/admin/menus/CmsMenuLoader.tsx
+++ b/packages/app-headless-cms/src/admin/menus/CmsMenuLoader.tsx
@@ -1,9 +1,10 @@
-import React, { Fragment } from "react";
-import { AddMenu as Menu } from "@webiny/app-admin";
+import React from "react";
 import { ReactComponent as HeadlessCmsIcon } from "~/admin/icons/devices_other-black-24px.svg";
-import GlobalSearchPlugins from "./GlobalSearchPlugins";
 import usePermission from "~/admin/hooks/usePermission";
 import { ContentGroupsMenuItems } from "./ContentGroupsMenuItems";
+import { AdminConfig } from "@webiny/app-admin";
+
+const { Menu } = AdminConfig;
 
 interface ChildMenuProps {
     canAccess: boolean;
@@ -13,11 +14,12 @@ const CmsContentModelsMenu = ({ canAccess }: ChildMenuProps) => {
     if (!canAccess) {
         return null;
     }
+
     return (
         <Menu
             name={"headlessCMS.contentModels.models"}
-            label={"Models"}
-            path={"/cms/content-models"}
+            parent={"headlessCMS"}
+            element={<Menu.Link text={"Models"} to={"/cms/content-models"} />}
         />
     );
 };
@@ -29,8 +31,8 @@ const CmsContentGroupsMenu = ({ canAccess }: ChildMenuProps) => {
     return (
         <Menu
             name={"headlessCMS.contentModels.groups"}
-            label={"Groups"}
-            path={"/cms/content-model-groups"}
+            parent={"headlessCMS"}
+            element={<Menu.Link text={"Groups"} to={"/cms/content-model-groups"} />}
         />
     );
 };
@@ -52,18 +54,34 @@ const CmsMenuLoaderComponent = () => {
     }
 
     return (
-        <Fragment>
-            <Menu name={"headlessCMS"} label={"Headless CMS"} icon={<HeadlessCmsIcon />}>
-                {(canCreateContentModels || canCreateContentModelGroups) && (
-                    <Menu name={"headlessCMS.contentModels"} label={"Content Models"} pin={"first"}>
-                        <CmsContentModelsMenu canAccess={canCreateContentModels} />
-                        <CmsContentGroupsMenu canAccess={canCreateContentModelGroups} />
-                    </Menu>
-                )}
-                <ContentGroupsMenuItems />
-            </Menu>
-            <GlobalSearchPlugins />
-        </Fragment>
+        <>
+            <Menu
+                name={"headlessCMS"}
+                after={"home"}
+                element={
+                    <Menu.Item
+                        text={"Headless CMS"}
+                        icon={
+                            <Menu.Link.Icon label={"Headless CMS"} element={<HeadlessCmsIcon />} />
+                        }
+                    />
+                }
+            />
+
+            {(canCreateContentModels || canCreateContentModelGroups) && (
+                <>
+                    <Menu
+                        name={"headlessCMS.contentModels"}
+                        parent={"headlessCMS"}
+                        element={<Menu.Group text={"Content Models"} />}
+                    />
+
+                    <CmsContentModelsMenu canAccess={canCreateContentModels} />
+                    <CmsContentGroupsMenu canAccess={canCreateContentModelGroups} />
+                </>
+            )}
+            <ContentGroupsMenuItems />
+        </>
     );
 };
 
diff --git a/packages/app-headless-cms/src/admin/menus/ContentGroupsMenuItems.tsx b/packages/app-headless-cms/src/admin/menus/ContentGroupsMenuItems.tsx
index ac09f5d1e77..86510cd1741 100644
--- a/packages/app-headless-cms/src/admin/menus/ContentGroupsMenuItems.tsx
+++ b/packages/app-headless-cms/src/admin/menus/ContentGroupsMenuItems.tsx
@@ -7,10 +7,11 @@ import {
 } from "~/admin/viewsGraphql";
 import useQuery from "~/admin/hooks/useQuery";
 import usePermission from "~/admin/hooks/usePermission";
-import { AddMenu as Menu } from "@webiny/app-admin";
-import { NothingToShow } from "./NothingToShowElement";
 import { CmsGroup, CmsModel } from "~/types";
 import { IconProp } from "@fortawesome/fontawesome-svg-core";
+import { AdminConfig } from "@webiny/app-admin";
+
+const { Menu } = AdminConfig;
 
 interface HasContentEntryPermissionsProps {
     group: CmsGroup;
@@ -48,6 +49,7 @@ const HasContentEntryPermissions = ({
 interface IconProps {
     group: CmsGroup;
 }
+
 const Icon = ({ group }: IconProps) => {
     return (
         <FontAwesomeIcon
@@ -70,14 +72,29 @@ export const ContentGroupsMenuItems = () => {
             {groups.map(group => {
                 return (
                     <HasContentEntryPermissions key={group.id} group={group}>
-                        <Menu
-                            name={group.id}
-                            label={group.name}
-                            tags={["headlessCMS"]}
-                            icon={<Icon group={group} />}
-                        >
+                        <>
+                            <Menu
+                                name={group.id}
+                                parent={"headlessCMS"}
+                                element={
+                                    <Menu.Group
+                                        text={group.name}
+                                        icon={
+                                            <Menu.Group.Icon
+                                                label={group.name}
+                                                element={<Icon group={group} />}
+                                            />
+                                        }
+                                    />
+                                }
+                            />
+
                             {group.contentModels.length === 0 && (
-                                <Menu name={`${group.id}-empty`} element={<NothingToShow />} />
+                                <Menu
+                                    parent={"headlessCMS"}
+                                    name={`${group.id}-empty`}
+                                    element={<Menu.Group text={"Nothing to show"} />}
+                                />
                             )}
                             {group.contentModels.length > 0 &&
                                 group.contentModels.map(contentModel => (
@@ -87,13 +104,18 @@ export const ContentGroupsMenuItems = () => {
                                         contentModel={contentModel}
                                     >
                                         <Menu
+                                            parent={"headlessCMS"}
                                             name={contentModel.modelId}
-                                            label={contentModel.name}
-                                            path={`/cms/content-entries/${contentModel.modelId}`}
+                                            element={
+                                                <Menu.Link
+                                                    text={contentModel.name}
+                                                    to={`/cms/content-entries/${contentModel.modelId}`}
+                                                />
+                                            }
                                         />
                                     </HasContentEntryPermissions>
                                 ))}
-                        </Menu>
+                        </>
                     </HasContentEntryPermissions>
                 );
             })}
diff --git a/packages/app-headless-cms/src/admin/menus/GlobalSearchPlugins.tsx b/packages/app-headless-cms/src/admin/menus/GlobalSearchPlugins.tsx
deleted file mode 100644
index 0c3f3ae65d6..00000000000
--- a/packages/app-headless-cms/src/admin/menus/GlobalSearchPlugins.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import { useEffect } from "react";
-import get from "lodash/get";
-import { useI18N } from "@webiny/app-i18n/hooks/useI18N";
-import { AdminGlobalSearchPlugin } from "@webiny/app-admin/types";
-import { plugins } from "@webiny/plugins";
-import { useQuery } from "~/admin/hooks";
-import {
-    LIST_MENU_CONTENT_GROUPS_MODELS,
-    ListMenuCmsGroupsQueryResponse
-} from "~/admin/viewsGraphql";
-import { CmsGroup } from "~/types";
-
-/**
- * DISCLAIMER!
- * This file is OLD and needs refactoring into something that makes more sense in the context of the new UI Composer.
- * Even if we keep a dedicated `AdminGlobalSearchPlugin`, it needs to be converted to a proper class.
- * This can be a "good first issue" for community to solve.
- */
-const GlobalSearchPlugins = () => {
-    const { getCurrentLocale } = useI18N();
-    const response = useQuery<ListMenuCmsGroupsQueryResponse>(LIST_MENU_CONTENT_GROUPS_MODELS);
-
-    const locale = getCurrentLocale("content");
-
-    const contentModelGroups: CmsGroup[] =
-        get(response, "data.listContentModelGroups.data", []) || [];
-
-    const cmgHash = contentModelGroups.reduce((returnValue: string, currentValue) => {
-        return (
-            returnValue +
-            currentValue.contentModels.reduce((returnValue: string, currentValue) => {
-                return returnValue + currentValue.modelId;
-            }, "")
-        );
-    }, "");
-
-    // Generate "admin-global-search" plugins - enables the user to search content via the global search bar.
-    useEffect(() => {
-        // 1. Unregister all previously registered plugins.
-        plugins
-            .byType<AdminGlobalSearchPlugin>("admin-global-search")
-            .filter(item => item.name && item.name.startsWith("admin-global-search-headless-cms"))
-            .forEach(item => plugins.unregister(item.name as string));
-
-        // 2. Register a new set of plugins via the latest list of content models.
-        contentModelGroups.forEach(group => {
-            group.contentModels.forEach(contentModel => {
-                const pluginName = "admin-global-search-headless-cms-" + contentModel.modelId;
-                if (!plugins.byName(pluginName)) {
-                    plugins.register({
-                        type: "admin-global-search",
-                        name: "admin-global-search-headless-cms-" + contentModel.modelId,
-                        route: "/cms/content-entries/" + contentModel.modelId,
-                        label: contentModel.name
-                    });
-                }
-            });
-        });
-    }, [locale, cmgHash]);
-
-    return null;
-};
-
-export default GlobalSearchPlugins;
diff --git a/packages/app-headless-cms/src/admin/menus/NothingToShowElement.tsx b/packages/app-headless-cms/src/admin/menus/NothingToShowElement.tsx
deleted file mode 100644
index 0aedef9c05c..00000000000
--- a/packages/app-headless-cms/src/admin/menus/NothingToShowElement.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import React from "react";
-import { css } from "emotion";
-import { List, ListItem } from "@webiny/ui/List";
-import { Typography } from "@webiny/ui/Typography";
-
-const linkStyle = css({
-    color: "var(--mdc-theme-text-primary-on-background)",
-    textDecoration: "none",
-    display: "flex",
-    alignItems: "center",
-    width: "100%",
-    height: "100%",
-    outline: "none",
-    paddingLeft: 72,
-    "&:hover": {
-        textDecoration: "none"
-    }
-});
-
-const submenuItems = css({
-    ".mdc-drawer &.mdc-deprecated-list-item": {
-        margin: 0,
-        paddingLeft: 0
-    }
-});
-
-const submenuList = css({
-    "&.mdc-deprecated-list": {
-        padding: 0
-    }
-});
-
-export const NothingToShow = () => {
-    return (
-        <List className={submenuList} style={{ opacity: 0.4 }}>
-            <ListItem className={submenuItems} ripple={false} disabled>
-                <Typography use={"body2"} className={linkStyle}>
-                    Nothing to show.
-                </Typography>
-            </ListItem>
-        </List>
-    );
-};
diff --git a/packages/app-headless-cms/src/admin/plugins/editor/defaultBar/BackButton.tsx b/packages/app-headless-cms/src/admin/plugins/editor/defaultBar/BackButton.tsx
index 1e2f42aaf18..0d8528de660 100644
--- a/packages/app-headless-cms/src/admin/plugins/editor/defaultBar/BackButton.tsx
+++ b/packages/app-headless-cms/src/admin/plugins/editor/defaultBar/BackButton.tsx
@@ -1,24 +1,18 @@
 import React from "react";
-import styled from "@emotion/styled";
-import { IconButton } from "@webiny/ui/Button";
 import { useRouter } from "@webiny/react-router";
-import { ReactComponent as BackIcon } from "./icons/round-arrow_back-24px.svg";
-
-const BackButtonWrapper = styled.div`
-    margin-left: -10px;
-`;
+import { ReactComponent as BackIcon } from "@webiny/icons/arrow_back.svg";
+import { IconButton } from "@webiny/admin-ui";
 
 const BackButton = React.memo(() => {
     const { history } = useRouter();
 
     return (
-        <BackButtonWrapper>
-            <IconButton
-                data-testid="cms-editor-back-button"
-                onClick={() => history.push(`/cms/content-models`)}
-                icon={<BackIcon />}
-            />
-        </BackButtonWrapper>
+        <IconButton
+            data-testid="cms-editor-back-button"
+            onClick={() => history.push(`/cms/content-models`)}
+            icon={<BackIcon />}
+            variant="ghost"
+        />
     );
 });
 
diff --git a/packages/app-headless-cms/src/admin/plugins/editor/defaultBar/CreateContentButton.tsx b/packages/app-headless-cms/src/admin/plugins/editor/defaultBar/CreateContentButton.tsx
index b9a7a564015..dee290621b5 100644
--- a/packages/app-headless-cms/src/admin/plugins/editor/defaultBar/CreateContentButton.tsx
+++ b/packages/app-headless-cms/src/admin/plugins/editor/defaultBar/CreateContentButton.tsx
@@ -2,15 +2,14 @@ import React from "react";
 import get from "lodash/get";
 import { useRouter } from "@webiny/react-router";
 import { i18n } from "@webiny/app/i18n";
-import { IconButton } from "@webiny/ui/Button";
-import { Tooltip } from "@webiny/ui/Tooltip";
-import { ReactComponent as ViewListIcon } from "~/admin/icons/view_list.svg";
+import { ReactComponent as ListViewIcon } from "@webiny/icons/list.svg";
 import {
     GET_CONTENT_MODEL,
     GetCmsModelQueryResponse,
     GetCmsModelQueryVariables
 } from "~/admin/graphql/contentModels";
 import { useModelEditor } from "~/admin/hooks";
+import { IconButton, Tooltip } from "@webiny/admin-ui";
 
 const t = i18n.namespace("app-headless-cms/admin/editor/top-bar/save-button");
 
@@ -27,17 +26,22 @@ const CreateContentButton = () => {
     const fields = get(getQuery, "getContentModel.data.fields", []);
     const disableViewContent = fields.length === 0;
     const message = disableViewContent
-        ? "To view the content, you first need to add a field and save the form"
-        : "View content";
+        ? "To view the entries, you first need to add a field and save the form"
+        : "View entries";
 
     return (
-        <Tooltip content={t`{message}`({ message })} placement={"bottom"}>
-            <IconButton
-                icon={<ViewListIcon />}
-                onClick={() => router.history.push(`/cms/content-entries/${data.modelId}`)}
-                disabled={disableViewContent}
-            />
-        </Tooltip>
+        <Tooltip
+            content={t`{message}`({ message })}
+            side={"bottom"}
+            trigger={
+                <IconButton
+                    icon={<ListViewIcon />}
+                    onClick={() => router.history.push(`/cms/content-entries/${data.modelId}`)}
+                    disabled={disableViewContent}
+                    variant={"ghost"}
+                />
+            }
+        />
     );
 };
 
diff --git a/packages/app-headless-cms/src/admin/plugins/editor/defaultBar/Divider.tsx b/packages/app-headless-cms/src/admin/plugins/editor/defaultBar/Divider.tsx
deleted file mode 100644
index ee468e39749..00000000000
--- a/packages/app-headless-cms/src/admin/plugins/editor/defaultBar/Divider.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import styled from "@emotion/styled";
-
-const Divider = styled("div")({
-    width: 1,
-    margin: "0 5px",
-    height: "100%",
-    backgroundColor: "var(--mdc-theme-on-background)"
-});
-
-export default Divider;
diff --git a/packages/app-headless-cms/src/admin/plugins/editor/defaultBar/FormSettings/FormSettings.tsx b/packages/app-headless-cms/src/admin/plugins/editor/defaultBar/FormSettings/FormSettings.tsx
index 87910923dcc..d6d5c7d15fa 100644
--- a/packages/app-headless-cms/src/admin/plugins/editor/defaultBar/FormSettings/FormSettings.tsx
+++ b/packages/app-headless-cms/src/admin/plugins/editor/defaultBar/FormSettings/FormSettings.tsx
@@ -2,20 +2,25 @@ import React, { useState } from "react";
 import { plugins } from "@webiny/plugins";
 import { OverlayLayout } from "@webiny/app-admin/components/OverlayLayout";
 import { LeftPanel, RightPanel, SplitView } from "@webiny/app-admin/components/SplitView";
-import { Typography } from "@webiny/ui/Typography";
 import { Form } from "@webiny/form";
-import { Icon } from "@webiny/ui/Icon";
-import { ButtonPrimary } from "@webiny/ui/Button";
-import { List, ListItem, ListItemGraphic } from "@webiny/ui/List";
 import { useSnackbar } from "@webiny/app-admin/hooks/useSnackbar";
 import { i18n } from "@webiny/app/i18n";
 import * as SF from "@webiny/app-admin/components/SimpleForm";
 import { CmsEditorFormSettingsPlugin } from "~/types";
-import { listItem, ListItemTitle, listStyle, Title, TitleContent } from "./FormSettingsStyled";
 import { useModelEditor } from "~/admin/hooks";
+import { Button, Heading, Icon, List } from "@webiny/admin-ui";
 
 const t = i18n.namespace("FormsApp.Editor.FormSettings");
 
+const Title = () => {
+    return (
+        <Heading
+            level={5}
+            className={"wby-text-neutral-strong"}
+        >{t`Content model settings`}</Heading>
+    );
+};
+
 interface FormSettingsProps {
     onExited: () => void;
 }
@@ -30,24 +35,18 @@ const FormSettings = ({ onExited }: FormSettingsProps) => {
     const [activePlugin, setActivePlugin] = useState(cmsEditorFormSettingsPlugins[0]);
 
     return (
-        <OverlayLayout barMiddle={Title} onExited={onExited}>
+        <OverlayLayout barMiddle={<Title />} onExited={onExited}>
             <SplitView>
                 <LeftPanel span={5}>
-                    <List twoLine className={listStyle}>
+                    <List>
                         {cmsEditorFormSettingsPlugins.map(pl => (
-                            <ListItem
+                            <List.Item
                                 key={pl.name}
-                                className={listItem}
                                 onClick={() => setActivePlugin(pl)}
-                            >
-                                <ListItemGraphic>
-                                    <Icon icon={pl.icon} />
-                                </ListItemGraphic>
-                                <TitleContent>
-                                    <ListItemTitle>{pl.title}</ListItemTitle>
-                                    <Typography use={"body2"}>{pl.description}</Typography>
-                                </TitleContent>
-                            </ListItem>
+                                icon={<Icon label={pl.title} icon={pl.icon} />}
+                                title={pl.title}
+                                description={pl.description}
+                            />
                         ))}
                     </List>
                 </LeftPanel>
@@ -61,14 +60,16 @@ const FormSettings = ({ onExited }: FormSettingsProps) => {
                         }}
                     >
                         {({ Bind, submit, form, data: formData }) => (
-                            <SF.SimpleForm>
+                            <SF.SimpleForm size={"lg"}>
                                 <SF.SimpleFormHeader title={activePlugin.title}>
-                                    {typeof activePlugin.renderHeaderActions === "function" &&
-                                        activePlugin.renderHeaderActions({
-                                            Bind,
-                                            form,
-                                            formData
-                                        })}
+                                    <div className={"wby-flex wby-justify-end wby-items-center"}>
+                                        {typeof activePlugin.renderHeaderActions === "function" &&
+                                            activePlugin.renderHeaderActions({
+                                                Bind,
+                                                form,
+                                                formData
+                                            })}
+                                    </div>
                                 </SF.SimpleFormHeader>
                                 <SF.SimpleFormContent>
                                     {activePlugin
@@ -80,11 +81,12 @@ const FormSettings = ({ onExited }: FormSettingsProps) => {
                                         : null}
                                 </SF.SimpleFormContent>
                                 <SF.SimpleFormFooter>
-                                    <ButtonPrimary
+                                    <Button
+                                        text={t`Save`}
                                         onClick={ev => {
                                             submit(ev);
                                         }}
-                                    >{t`Save settings`}</ButtonPrimary>
+                                    />
                                 </SF.SimpleFormFooter>
                             </SF.SimpleForm>
                         )}
diff --git a/packages/app-headless-cms/src/admin/plugins/editor/defaultBar/FormSettings/FormSettingsButton.tsx b/packages/app-headless-cms/src/admin/plugins/editor/defaultBar/FormSettings/FormSettingsButton.tsx
index eca1da58bc3..9fd02b58789 100644
--- a/packages/app-headless-cms/src/admin/plugins/editor/defaultBar/FormSettings/FormSettingsButton.tsx
+++ b/packages/app-headless-cms/src/admin/plugins/editor/defaultBar/FormSettings/FormSettingsButton.tsx
@@ -1,8 +1,8 @@
 import React, { useState, useCallback } from "react";
-import { IconButton } from "@webiny/ui/Button";
 import FormSettings from "./FormSettings";
 
-import { ReactComponent as SettingsIcon } from "./../icons/settings.svg";
+import { ReactComponent as SettingsIcon } from "@webiny/icons/settings.svg";
+import { IconButton, Tooltip } from "@webiny/admin-ui";
 
 const FormSettingsButton = () => {
     const [opened, setOpened] = useState(false);
@@ -11,7 +11,11 @@ const FormSettingsButton = () => {
 
     return (
         <>
-            <IconButton onClick={open} icon={<SettingsIcon />} />
+            <Tooltip
+                content={"View content model settings"}
+                side={"bottom"}
+                trigger={<IconButton onClick={open} icon={<SettingsIcon />} variant={"ghost"} />}
+            />
             {opened && <FormSettings onExited={close} />}
         </>
     );
diff --git a/packages/app-headless-cms/src/admin/plugins/editor/defaultBar/FormSettings/FormSettingsStyled.tsx b/packages/app-headless-cms/src/admin/plugins/editor/defaultBar/FormSettings/FormSettingsStyled.tsx
index 0f01d9af9fd..d07bc120a08 100644
--- a/packages/app-headless-cms/src/admin/plugins/editor/defaultBar/FormSettings/FormSettingsStyled.tsx
+++ b/packages/app-headless-cms/src/admin/plugins/editor/defaultBar/FormSettings/FormSettingsStyled.tsx
@@ -1,5 +1,5 @@
 import * as React from "react";
-import { css } from "emotion";
+import { css } from "@emotion/css";
 import styled from "@emotion/styled";
 import { Typography } from "@webiny/ui/Typography";
 
diff --git a/packages/app-headless-cms/src/admin/plugins/editor/defaultBar/Name/Name.tsx b/packages/app-headless-cms/src/admin/plugins/editor/defaultBar/Name/Name.tsx
index d9c2296ad3a..4f31c87b560 100644
--- a/packages/app-headless-cms/src/admin/plugins/editor/defaultBar/Name/Name.tsx
+++ b/packages/app-headless-cms/src/admin/plugins/editor/defaultBar/Name/Name.tsx
@@ -1,14 +1,12 @@
 import React, { useCallback, useState } from "react";
-import { Input } from "@webiny/ui/Input";
-import { Tooltip } from "@webiny/ui/Tooltip";
 /**
  * Package react-hotkeyz does not have types.
  */
 // @ts-expect-error
 import { useHotkeys } from "react-hotkeyz";
-import { FormName, formNameWrapper, NameInputWrapper, NameWrapper } from "./NameStyled";
 import { i18n } from "@webiny/app/i18n";
 import { useModelEditor } from "~/admin/hooks";
+import { Heading, Input, Tooltip } from "@webiny/admin-ui";
 
 const t = i18n.namespace("ContentModelEditor.Name");
 
@@ -68,26 +66,30 @@ export const Name = () => {
     const autoFocus = !window.Cypress;
 
     return editingEnabled ? (
-        <NameInputWrapper>
-            <Input
-                autoFocus={autoFocus}
-                fullwidth
-                value={localName}
-                onChange={setLocalName}
-                onBlur={saveName}
-            />
-        </NameInputWrapper>
+        <Input
+            autoFocus={autoFocus}
+            value={localName}
+            onChange={setLocalName}
+            onBlur={saveName}
+            variant={"ghost"}
+            size={"md"}
+        />
     ) : (
-        <NameWrapper>
-            <Tooltip
-                className={formNameWrapper}
-                placement={"bottom"}
-                content={<span>{t`rename`}</span>}
-            >
-                <FormName data-testid="cms-editor-model-title" onClick={startEditing}>
+        <Tooltip
+            side={"bottom"}
+            content={<span>{t`Rename content model`}</span>}
+            trigger={
+                <Heading
+                    level={5}
+                    className={
+                        "wby-px-xs wby-border-sm wby-border-neutral-base wby-rounded-md hover:wby-border-neutral-muted"
+                    }
+                    data-testid="cms-editor-model-title"
+                    onClick={startEditing}
+                >
                     {data.name}
-                </FormName>
-            </Tooltip>
-        </NameWrapper>
+                </Heading>
+            }
+        />
     );
 };
diff --git a/packages/app-headless-cms/src/admin/plugins/editor/defaultBar/Name/NameStyled.tsx b/packages/app-headless-cms/src/admin/plugins/editor/defaultBar/Name/NameStyled.tsx
deleted file mode 100644
index d6580f7518f..00000000000
--- a/packages/app-headless-cms/src/admin/plugins/editor/defaultBar/Name/NameStyled.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import styled from "@emotion/styled";
-import { css } from "emotion";
-
-export const NameInputWrapper = styled("div")({
-    width: "100%",
-    display: "flex",
-    alignItems: "center",
-    position: "relative",
-    "> .mdc-text-field--upgraded": {
-        height: 35,
-        marginTop: "0 !important",
-        paddingLeft: 10,
-        paddingRight: 40
-    }
-});
-
-export const NameWrapper = styled("div")({
-    display: "flex",
-    alignItems: "baseline",
-    justifyContent: "flex-center",
-    flexDirection: "column",
-    color: "var(--mdc-theme-text-primary-on-background)",
-    position: "relative",
-    width: "100%",
-    marginLeft: 10
-});
-
-export const FormName = styled("div")({
-    border: "1px solid transparent",
-    fontSize: 20,
-    lineHeight: 1.25,
-    whiteSpace: "nowrap",
-    overflow: "hidden",
-    textOverflow: "ellipsis",
-    fontFamily: "var(--mdc-typography-font-family)",
-    width: "100%",
-    "&:hover": {
-        border: "1px solid var(--mdc-theme-on-background)"
-    }
-});
-
-export const formNameWrapper = css({
-    maxWidth: "calc(100% - 50px)"
-});
diff --git a/packages/app-headless-cms/src/admin/plugins/editor/defaultBar/SaveContentModelButton.tsx b/packages/app-headless-cms/src/admin/plugins/editor/defaultBar/SaveContentModelButton.tsx
index af698649147..7800f102661 100644
--- a/packages/app-headless-cms/src/admin/plugins/editor/defaultBar/SaveContentModelButton.tsx
+++ b/packages/app-headless-cms/src/admin/plugins/editor/defaultBar/SaveContentModelButton.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback, useState } from "react";
-import { ButtonPrimary } from "@webiny/ui/Button";
+import { Button } from "@webiny/admin-ui";
 import { useSnackbar } from "@webiny/app-admin/hooks/useSnackbar";
 import { i18n } from "@webiny/app/i18n";
 import { useModelEditor } from "~/admin/hooks";
@@ -25,15 +25,14 @@ const SaveContentModelButton = () => {
     }, [saveContentModel]);
 
     return (
-        <ButtonPrimary
+        <Button
             data-testid="cms.editor.defaultbar.save"
             disabled={loading}
             onClick={() => {
                 onClick();
             }}
-        >
-            {t`Save`}
-        </ButtonPrimary>
+            text={t`Save`}
+        />
     );
 };
 
diff --git a/packages/app-headless-cms/src/admin/plugins/editor/defaultBar/icons/more_vert.svg b/packages/app-headless-cms/src/admin/plugins/editor/defaultBar/icons/more_vert.svg
deleted file mode 100644
index b92cdd99458..00000000000
--- a/packages/app-headless-cms/src/admin/plugins/editor/defaultBar/icons/more_vert.svg
+++ /dev/null
@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px"
-	 height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
-<g id="Bounding_Boxes">
-	<path fill="none" d="M0,0h24v24H0V0z"/>
-</g>
-<g id="Rounded">
-	<path d="M12,8c1.1,0,2-0.9,2-2s-0.9-2-2-2s-2,0.9-2,2S10.9,8,12,8z M12,10c-1.1,0-2,0.9-2,2s0.9,2,2,2s2-0.9,2-2S13.1,10,12,10z
-		 M12,16c-1.1,0-2,0.9-2,2s0.9,2,2,2s2-0.9,2-2S13.1,16,12,16z"/>
-</g>
-</svg>
diff --git a/packages/app-headless-cms/src/admin/plugins/editor/defaultBar/icons/round-arrow_back-24px.svg b/packages/app-headless-cms/src/admin/plugins/editor/defaultBar/icons/round-arrow_back-24px.svg
deleted file mode 100644
index e56418facfc..00000000000
--- a/packages/app-headless-cms/src/admin/plugins/editor/defaultBar/icons/round-arrow_back-24px.svg
+++ /dev/null
@@ -1,13 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
-<g id="Bounding_Boxes">
-	<path fill="none" d="M0,0h24v24H0V0z"/>
-</g>
-<g id="Rounded">
-	<path fill="currentColor" d="M19,11H7.83l4.88-4.88c0.39-0.39,0.39-1.03,0-1.42l0,0c-0.39-0.39-1.02-0.39-1.41,0l-6.59,6.59
-		c-0.39,0.39-0.39,1.02,0,1.41l6.59,6.59c0.39,0.39,1.02,0.39,1.41,0l0,0c0.39-0.39,0.39-1.02,0-1.41L7.83,13H19c0.55,0,1-0.45,1-1
-		v0C20,11.45,19.55,11,19,11z"/>
-</g>
-</svg>
diff --git a/packages/app-headless-cms/src/admin/plugins/editor/defaultBar/icons/round-arrow_drop_down-24px.svg b/packages/app-headless-cms/src/admin/plugins/editor/defaultBar/icons/round-arrow_drop_down-24px.svg
deleted file mode 100644
index d2a91682bb2..00000000000
--- a/packages/app-headless-cms/src/admin/plugins/editor/defaultBar/icons/round-arrow_drop_down-24px.svg
+++ /dev/null
@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
-<g id="Bounding_Boxes">
-	<path fill="none" d="M0,0h24v24H0V0z"/>
-</g>
-<g id="Rounded">
-	<path fill="currentColor" d="M8.71,11.71l2.59,2.59c0.39,0.39,1.02,0.39,1.41,0l2.59-2.59c0.63-0.63,0.18-1.71-0.71-1.71H9.41
-		C8.52,10,8.08,11.08,8.71,11.71z"/>
-</g>
-</svg>
diff --git a/packages/app-headless-cms/src/admin/plugins/editor/defaultBar/icons/settings.svg b/packages/app-headless-cms/src/admin/plugins/editor/defaultBar/icons/settings.svg
deleted file mode 100644
index 383b39df409..00000000000
--- a/packages/app-headless-cms/src/admin/plugins/editor/defaultBar/icons/settings.svg
+++ /dev/null
@@ -1,25 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px"
-	 height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
-<g id="Header_x2F_BG" display="none">
-	<rect x="-402" y="-314" display="inline" fill="#F1F1F2" width="520" height="520"/>
-</g>
-<g id="Bounding_Boxes">
-	<g id="ui_x5F_spec_x5F_header_copy_3" display="none">
-	</g>
-	<path fill="none" d="M0,0h24v24H0V0z"/>
-</g>
-<g id="Rounded">
-	<g id="ui_x5F_spec_x5F_header_copy_5" display="none">
-	</g>
-	<path fill="currentColor" d="M19.43,12.98c0.04-0.32,0.07-0.64,0.07-0.98s-0.03-0.66-0.07-0.98l2.11-1.65c0.19-0.15,0.24-0.42,0.12-0.64l-2-3.46
-		c-0.12-0.22-0.39-0.3-0.61-0.22l-2.49,1c-0.52-0.4-1.08-0.73-1.69-0.98l-0.38-2.65C14.46,2.18,14.25,2,14,2h-4
-		C9.75,2,9.54,2.18,9.51,2.42L9.13,5.07C8.52,5.32,7.96,5.66,7.44,6.05l-2.49-1c-0.23-0.09-0.49,0-0.61,0.22l-2,3.46
-		C2.21,8.95,2.27,9.22,2.46,9.37l2.11,1.65C4.53,11.34,4.5,11.67,4.5,12s0.03,0.66,0.07,0.98l-2.11,1.65
-		c-0.19,0.15-0.24,0.42-0.12,0.64l2,3.46c0.12,0.22,0.39,0.3,0.61,0.22l2.49-1c0.52,0.4,1.08,0.73,1.69,0.98l0.38,2.65
-		C9.54,21.82,9.75,22,10,22h4c0.25,0,0.46-0.18,0.49-0.42l0.38-2.65c0.61-0.25,1.17-0.59,1.69-0.98l2.49,1
-		c0.23,0.09,0.49,0,0.61-0.22l2-3.46c0.12-0.22,0.07-0.49-0.12-0.64L19.43,12.98z M12,15.5c-1.93,0-3.5-1.57-3.5-3.5
-		s1.57-3.5,3.5-3.5s3.5,1.57,3.5,3.5S13.93,15.5,12,15.5z"/>
-</g>
-</svg>
diff --git a/packages/app-headless-cms/src/admin/plugins/editor/defaultBar/index.tsx b/packages/app-headless-cms/src/admin/plugins/editor/defaultBar/index.tsx
index 9ed50a44cba..3442d40e44b 100644
--- a/packages/app-headless-cms/src/admin/plugins/editor/defaultBar/index.tsx
+++ b/packages/app-headless-cms/src/admin/plugins/editor/defaultBar/index.tsx
@@ -1,6 +1,5 @@
 import React from "react";
 import BackButton from "./BackButton";
-import Divider from "./Divider";
 import SaveContentModelButton from "./SaveContentModelButton";
 import CreateContentButton from "./CreateContentButton";
 import { Name } from "./Name";
@@ -14,13 +13,6 @@ export default [
             return <CreateContentButton />;
         }
     },
-    {
-        name: "content-model-editor-default-bar-left-divider",
-        type: "content-model-editor-default-bar-right",
-        render() {
-            return <Divider />;
-        }
-    },
     {
         name: "content-model-editor-default-bar-right-form-settings-button",
         type: "content-model-editor-default-bar-right",
diff --git a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/Accordion.tsx b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/Accordion.tsx
index 86d7ba2df1e..906cb2221d4 100644
--- a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/Accordion.tsx
+++ b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/Accordion.tsx
@@ -1,8 +1,8 @@
 import React, { ReactElement, useEffect, useRef } from "react";
-import { css } from "emotion";
+import { css } from "@emotion/css";
 import styled from "@emotion/styled";
 import classNames from "classnames";
-import { Typography } from "@webiny/ui/Typography";
+import { Text } from "@webiny/admin-ui";
 
 const classes = {
     accordionWrapper: css({
@@ -19,7 +19,7 @@ const classes = {
         color: "var(--mdc-theme-text-secondary-on-background)",
         cursor: "pointer",
         padding: "0px",
-        minHeight: 48, // To have same height as the remove value action button.
+        minHeight: 32, // To have same height as the remove value action button.
         display: "flex",
         alignItems: "center",
         justifyContent: "space-between",
@@ -30,7 +30,7 @@ const classes = {
             justifyContent: "space-between",
             "& .accordion-title": {
                 span: {
-                    marginLeft: 16
+                    marginLeft: 24
                 }
             }
         },
@@ -54,7 +54,7 @@ const classes = {
         "&::before": {
             position: "absolute",
             top: "calc(50% - 5px)",
-            left: 0,
+            left: "5px",
             content: '""',
             width: 0,
             height: 0,
@@ -138,9 +138,9 @@ const Accordion = ({
             >
                 <div className="accordion-header--left">
                     <div className={"accordion-title"}>
-                        <Typography use={"subtitle1"} tag={"span"}>
+                        <Text size={"md"} as={"span"} className={"webiny_accordion-title-text"}>
                             {title}
-                        </Typography>
+                        </Text>
                     </div>
                 </div>
                 <div className="accordion-header--right">
diff --git a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/AccordionRenderSettings.tsx b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/AccordionRenderSettings.tsx
index 1abecc384d3..bf857b066a2 100644
--- a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/AccordionRenderSettings.tsx
+++ b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/AccordionRenderSettings.tsx
@@ -1,7 +1,6 @@
 import React from "react";
 import { Bind } from "@webiny/form";
-import { Cell } from "@webiny/ui/Grid";
-import { Switch } from "@webiny/ui/Switch";
+import { Grid, Switch } from "@webiny/admin-ui";
 import {
     CmsModelField,
     CmsModelFieldRendererSettingsProps
@@ -25,15 +24,13 @@ export const getAccordionRenderSettings = (field: CmsModelField) => {
 
 export const AccordionRenderSettings = ({ field }: CmsModelFieldRendererSettingsProps) => {
     return (
-        <>
-            <Cell span={12}>
-                <Bind name={"renderer.settings.open"} defaultValue={false}>
-                    <Switch
-                        label={"Expand Accordion"}
-                        description={`Enable if "${field.label}" is to be expanded by default.`}
-                    />
-                </Bind>
-            </Cell>
-        </>
+        <Grid.Column span={12}>
+            <Bind name={"renderer.settings.open"} defaultValue={false}>
+                <Switch
+                    label={"Expand Accordion"}
+                    description={`Enable if "${field.label}" is to be expanded by default.`}
+                />
+            </Bind>
+        </Grid.Column>
     );
 };
diff --git a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/DynamicSection.tsx b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/DynamicSection.tsx
index f2a62dd1958..8134f645700 100644
--- a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/DynamicSection.tsx
+++ b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/DynamicSection.tsx
@@ -1,18 +1,21 @@
 import React from "react";
 import classSet from "classnames";
-import { css } from "emotion";
-import styled from "@emotion/styled";
+import { css } from "@emotion/css";
 import { i18n } from "@webiny/app/i18n";
-import { Cell, Grid } from "@webiny/ui/Grid";
-import { Typography } from "@webiny/ui/Typography";
-import { ButtonDefault, ButtonIcon } from "@webiny/ui/Button";
-import { FormElementMessage } from "@webiny/ui/FormElementMessage";
-import { ReactComponent as AddIcon } from "@webiny/app-admin/assets/icons/add-18px.svg";
+import { ReactComponent as AddIcon } from "@webiny/icons/add.svg";
 import { GetBindCallable } from "~/admin/components/ContentEntryForm/useBind";
 import { ParentFieldProvider } from "~/admin/hooks";
 import { ParentValueIndexProvider } from "~/admin/components/ModelFieldProvider";
 import { BindComponent, BindComponentRenderProp, CmsModelField } from "~/types";
 import { getMultiValueRendererSettings } from "~/admin/plugins/fieldRenderers/MultiValueRendererSettings";
+import {
+    Button,
+    cn,
+    FormComponentDescription,
+    FormComponentErrorMessage,
+    Grid,
+    Heading
+} from "@webiny/admin-ui";
 
 const t = i18n.ns("app-headless-cms/admin/fields/text");
 
@@ -43,20 +46,6 @@ export interface DynamicSectionProps {
     addValueButtonLabel?: string;
 }
 
-const FieldLabel = styled.div`
-    font-size: 24px;
-    font-weight: normal;
-    border-bottom: 1px solid var(--mdc-theme-background);
-    margin-bottom: 20px;
-    padding-bottom: 5px;
-`;
-
-const AddButtonCell = styled(Cell)<{ items: number }>`
-    width: 100%;
-    padding-top: ${({ items }) => (items > 0 ? "8px" : "0")};
-    border-top: ${({ items }) => (items > 0 ? "1px solid var(--mdc-theme-background)" : "none")};
-`;
-
 const defaultAddItem = () => {
     // No op.
 };
@@ -93,63 +82,77 @@ const DynamicSection = ({
                     <Bind.ValidationContainer>
                         <ParentFieldProvider value={value} path={Bind.parentName}>
                             {showLabel ? (
-                                <FieldLabel>
-                                    <Typography use={"headline5"}>
+                                <div
+                                    className={
+                                        "wby-pb-md wby-mb-md wby-border-b-sm wby-border-neutral-dimmed"
+                                    }
+                                >
+                                    <Heading level={6} className={"webiny_group-label-text"}>
                                         {`${field.label} ${
                                             bindFieldValue.length
                                                 ? `(${bindFieldValue.length})`
                                                 : ""
                                         }`}
-                                    </Typography>
+                                    </Heading>
                                     {field.helpText && (
-                                        <FormElementMessage>{field.helpText}</FormElementMessage>
+                                        <FormComponentDescription text={field.helpText} />
                                     )}
-                                </FieldLabel>
+                                </div>
                             ) : null}
                             <Grid className={classSet(gridClassName, style.gridContainer)}>
-                                {bindFieldValue.map((_, index) => {
-                                    const BindField = getBind(index);
-                                    return (
-                                        <Cell span={12} key={index}>
-                                            <BindField>
-                                                {bindProps => (
-                                                    <BindField.ValidationContainer>
-                                                        <ParentValueIndexProvider index={index}>
-                                                            {children({
-                                                                Bind: BindField,
-                                                                field,
-                                                                bind: {
-                                                                    index: bindProps,
-                                                                    field: bindField
-                                                                },
-                                                                index
-                                                            })}
-                                                        </ParentValueIndexProvider>
-                                                    </BindField.ValidationContainer>
-                                                )}
-                                            </BindField>
-                                        </Cell>
-                                    );
-                                })}
-
-                                {bindField.validation.isValid === false && (
-                                    <Cell span={12}>
-                                        <FormElementMessage error>
-                                            {bindField.validation.message}
-                                        </FormElementMessage>
-                                    </Cell>
-                                )}
-                                <AddButtonCell span={12} items={bindFieldValue.length}>
-                                    <ButtonDefault
-                                        onClick={() => {
-                                            appendValue(emptyValue);
-                                            onAddItem(bindFieldValue.length);
-                                        }}
+                                <>
+                                    {bindFieldValue.map((_, index) => {
+                                        const BindField = getBind(index);
+                                        return (
+                                            <Grid.Column span={12} key={index}>
+                                                <BindField>
+                                                    {bindProps => (
+                                                        <BindField.ValidationContainer>
+                                                            <ParentValueIndexProvider index={index}>
+                                                                {children({
+                                                                    Bind: BindField,
+                                                                    field,
+                                                                    bind: {
+                                                                        index: bindProps,
+                                                                        field: bindField
+                                                                    },
+                                                                    index
+                                                                })}
+                                                            </ParentValueIndexProvider>
+                                                        </BindField.ValidationContainer>
+                                                    )}
+                                                </BindField>
+                                            </Grid.Column>
+                                        );
+                                    })}
+                                </>
+                                <>
+                                    {bindField.validation.isValid === false && (
+                                        <Grid.Column span={12}>
+                                            <FormComponentErrorMessage
+                                                invalid
+                                                text={bindField.validation.message}
+                                            />
+                                        </Grid.Column>
+                                    )}
+                                </>
+                                <Grid.Column span={12}>
+                                    <div
+                                        className={cn(
+                                            bindFieldValue.length > 0 ? "wby-pt-none" : "wby-pt-sm"
+                                        )}
                                     >
-                                        <ButtonIcon icon={<AddIcon />} />
-                                        {t(addValueButtonLabel)}
-                                    </ButtonDefault>
-                                </AddButtonCell>
+                                        <Button
+                                            variant={"tertiary"}
+                                            icon={<AddIcon />}
+                                            text={t(addValueButtonLabel)}
+                                            onClick={() => {
+                                                appendValue(emptyValue);
+                                                onAddItem(bindFieldValue.length);
+                                            }}
+                                        />
+                                    </div>
+                                </Grid.Column>
                             </Grid>
                         </ParentFieldProvider>
                     </Bind.ValidationContainer>
diff --git a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/MultiValueRendererSettings.tsx b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/MultiValueRendererSettings.tsx
index 5b1627b972f..bab463647a1 100644
--- a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/MultiValueRendererSettings.tsx
+++ b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/MultiValueRendererSettings.tsx
@@ -4,8 +4,7 @@ import type {
     CmsModelFieldRendererSettingsProps
 } from "@webiny/app-headless-cms-common/types";
 import { Bind } from "@webiny/form";
-import { Cell } from "@webiny/ui/Grid";
-import { Input } from "@webiny/ui/Input";
+import { Grid, Input } from "@webiny/admin-ui";
 
 interface IMultiValueRendererSettings {
     addValueButtonLabel: string;
@@ -27,13 +26,13 @@ export const getMultiValueRendererSettings = (
 
 export const MultiValueRendererSettings = ({ field }: CmsModelFieldRendererSettingsProps) => {
     return (
-        <Cell span={12}>
+        <Grid.Column span={12}>
             <Bind
                 name={"renderer.settings.multiValue.addValueButtonLabel"}
                 defaultValue={`Add ${field.label}`}
             >
-                <Input label={`"Add Value" Button Label`} />
+                <Input label={`"Add Value" button label`} />
             </Bind>
-        </Cell>
+        </Grid.Column>
     );
 };
diff --git a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/boolean/booleanSwitch.tsx b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/boolean/booleanSwitch.tsx
index 45e850ae557..08c041ad25a 100644
--- a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/boolean/booleanSwitch.tsx
+++ b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/boolean/booleanSwitch.tsx
@@ -1,8 +1,8 @@
 import React from "react";
 import get from "lodash/get";
 import { CmsModelFieldRendererPlugin } from "~/types";
-import { Switch } from "@webiny/ui/Switch";
 import { i18n } from "@webiny/app/i18n";
+import { Switch } from "@webiny/admin-ui";
 
 const t = i18n.ns("app-headless-cms/admin/fields/boolean");
 
diff --git a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/checkboxes.tsx b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/checkboxes.tsx
index c125b685853..35518997db4 100644
--- a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/checkboxes.tsx
+++ b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/checkboxes.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import get from "lodash/get";
 import { CmsModelField, CmsModelFieldRendererPlugin } from "~/types";
 import { i18n } from "@webiny/app/i18n";
-import { Checkbox, CheckboxGroup } from "@webiny/ui/Checkbox";
+import { CheckboxGroup } from "@webiny/admin-ui";
 
 const t = i18n.ns("app-headless-cms/admin/fields/text");
 
@@ -44,24 +44,13 @@ const plugin: CmsModelFieldRendererPlugin = {
                                 {...bind}
                                 label={field.label}
                                 description={field.helpText}
-                            >
-                                {({ onChange, getValue }) => (
-                                    <React.Fragment>
-                                        {options.map((option, index) => {
-                                            return (
-                                                <div key={String(option.value) + index}>
-                                                    <Checkbox
-                                                        label={option.label}
-                                                        value={getValue(option.value)}
-                                                        onChange={onChange(option.value)}
-                                                        data-testid={`fr.input.${field.label}`}
-                                                    />
-                                                </div>
-                                            );
-                                        })}
-                                    </React.Fragment>
-                                )}
-                            </CheckboxGroup>
+                                value={bind.value}
+                                items={options.map(opt => ({
+                                    label: opt.label,
+                                    value: opt.value,
+                                    selected: opt.selected
+                                }))}
+                            />
                         </Bind.ValidationContainer>
                     )}
                 </Bind>
diff --git a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/dateTime/DateTimeWithTimezone.tsx b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/dateTime/DateTimeWithTimezone.tsx
index 20a91a5a6c1..a6b3ed46570 100644
--- a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/dateTime/DateTimeWithTimezone.tsx
+++ b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/dateTime/DateTimeWithTimezone.tsx
@@ -1,7 +1,7 @@
 import React from "react";
+import { Grid } from "@webiny/admin-ui";
 import { Input } from "./Input";
 import { Select } from "./Select";
-import { Grid, Cell } from "@webiny/ui/Grid";
 import {
     RemoveFieldButton,
     getDefaultFieldValue,
@@ -78,7 +78,7 @@ export const DateTimeWithTimezone = ({ bind, trailingIcon, field }: DateTimeWith
 
     return (
         <Grid>
-            <Cell span={4}>
+            <Grid.Column span={4}>
                 <Input
                     bind={{
                         ...bind,
@@ -100,8 +100,8 @@ export const DateTimeWithTimezone = ({ bind, trailingIcon, field }: DateTimeWith
                     }}
                     type={"date"}
                 />
-            </Cell>
-            <Cell span={4}>
+            </Grid.Column>
+            <Grid.Column span={4}>
                 <Input
                     bind={{
                         ...bind,
@@ -125,8 +125,8 @@ export const DateTimeWithTimezone = ({ bind, trailingIcon, field }: DateTimeWith
                     type={"time"}
                     step={60}
                 />
-            </Cell>
-            <Cell span={cellSize}>
+            </Grid.Column>
+            <Grid.Column span={cellSize}>
                 <Select
                     label="Timezone"
                     value={timezone}
@@ -143,7 +143,7 @@ export const DateTimeWithTimezone = ({ bind, trailingIcon, field }: DateTimeWith
                     }}
                     options={UTC_TIMEZONES.map(t => ({ value: t.value, label: t.label }))}
                 />
-            </Cell>
+            </Grid.Column>
             <RemoveFieldButton trailingIcon={trailingIcon} />
         </Grid>
     );
diff --git a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/dateTime/DateTimeWithoutTimezone.tsx b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/dateTime/DateTimeWithoutTimezone.tsx
index 5896db4ae73..d66ca50c079 100644
--- a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/dateTime/DateTimeWithoutTimezone.tsx
+++ b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/dateTime/DateTimeWithoutTimezone.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Grid, Cell } from "@webiny/ui/Grid";
+import { Grid } from "@webiny/admin-ui";
 import {
     getCurrentDate,
     getCurrentLocalTime,
@@ -70,7 +70,7 @@ export const DateTimeWithoutTimezone = ({
 
     return (
         <Grid>
-            <Cell span={6}>
+            <Grid.Column span={6}>
                 <Input
                     bind={{
                         ...bind,
@@ -91,8 +91,8 @@ export const DateTimeWithoutTimezone = ({
                     }}
                     type={"date"}
                 />
-            </Cell>
-            <Cell span={cellSize}>
+            </Grid.Column>
+            <Grid.Column span={cellSize}>
                 <Input
                     bind={{
                         ...bind,
@@ -114,7 +114,7 @@ export const DateTimeWithoutTimezone = ({
                     type={"time"}
                     step={60}
                 />
-            </Cell>
+            </Grid.Column>
             <RemoveFieldButton trailingIcon={trailingIcon} />
         </Grid>
     );
diff --git a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/dateTime/Input.tsx b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/dateTime/Input.tsx
index f70b86dd2b8..f7c4220196e 100644
--- a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/dateTime/Input.tsx
+++ b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/dateTime/Input.tsx
@@ -1,7 +1,7 @@
 import * as React from "react";
 import { CmsModelField } from "~/types";
 import { BindComponentRenderProp } from "@webiny/form";
-import { Input as UiInput } from "@webiny/ui/Input";
+import { Input as UiInput, Icon } from "@webiny/admin-ui";
 
 export interface TrailingIcon {
     icon: React.ReactNode;
@@ -16,7 +16,22 @@ export interface InputProps {
     trailingIcon?: TrailingIcon;
 }
 
-export const Input = ({ bind, ...props }: InputProps) => {
+export const Input = ({ bind, trailingIcon, ...props }: InputProps) => {
+    const endIcon = React.useMemo(() => {
+        if (!trailingIcon) {
+            return undefined;
+        }
+
+        return (
+            <Icon
+                label={"Icon"}
+                icon={trailingIcon?.icon}
+                onClick={trailingIcon?.onClick}
+                className={"wby-cursor-pointer"}
+            />
+        );
+    }, [trailingIcon]);
+
     return (
         <UiInput
             {...props}
@@ -31,7 +46,7 @@ export const Input = ({ bind, ...props }: InputProps) => {
             placeholder={props.field.placeholderText}
             description={props.field.multipleValues ? undefined : props.field.helpText}
             type={props.type}
-            trailingIcon={props.trailingIcon}
+            endIcon={endIcon}
             data-testid={`fr.input.${props.field.label}`}
         />
     );
diff --git a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/dateTime/Select.tsx b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/dateTime/Select.tsx
index 4cfa26c1544..fa78d41f3ed 100644
--- a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/dateTime/Select.tsx
+++ b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/dateTime/Select.tsx
@@ -1,24 +1,23 @@
 import * as React from "react";
-import { Select as UiSelect, SelectProps as BaseSelectProps } from "@webiny/ui/Select";
+import { Select as UiSelect, SelectProps as UiSelectProps } from "@webiny/admin-ui";
 
 export interface Option {
     value: string;
     label: string;
 }
 
-export interface SelectProps extends BaseSelectProps {
+export interface SelectProps extends UiSelectProps {
     options: Option[];
 }
 export const Select = (props: SelectProps) => {
     return (
-        <UiSelect {...props}>
-            {props.options.map(t => {
-                return (
-                    <option key={t.value} value={t.value} data-testid={`fr.input.${t.label}`}>
-                        {t.label}
-                    </option>
-                );
-            })}
-        </UiSelect>
+        <UiSelect
+            {...props}
+            options={props.options.map(option => ({
+                value: option.value,
+                label: option.label,
+                "data-testid": `fr.input.${option.label}`
+            }))}
+        />
     );
 };
diff --git a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/dateTime/dateTimeFields.tsx b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/dateTime/dateTimeFields.tsx
index 593e2b66577..22ed30a221b 100644
--- a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/dateTime/dateTimeFields.tsx
+++ b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/dateTime/dateTimeFields.tsx
@@ -3,7 +3,7 @@ import get from "lodash/get";
 import DynamicSection from "../DynamicSection";
 import { CmsModelFieldRendererPlugin } from "~/types";
 import { i18n } from "@webiny/app/i18n";
-import { ReactComponent as DeleteIcon } from "@material-design-icons/svg/outlined/delete_outline.svg";
+import { ReactComponent as DeleteIcon } from "@webiny/icons/delete.svg";
 import { DateTimeWithoutTimezone } from "./DateTimeWithoutTimezone";
 import { DateTimeWithTimezone } from "./DateTimeWithTimezone";
 import { DateOnly } from "./DateOnly";
diff --git a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/dateTime/utils.tsx b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/dateTime/utils.tsx
index 28d1bb6722c..c531d664e49 100644
--- a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/dateTime/utils.tsx
+++ b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/dateTime/utils.tsx
@@ -1,7 +1,5 @@
 import React from "react";
-import { css } from "emotion";
-import { Cell } from "@webiny/ui/Grid";
-import { IconButton } from "@webiny/ui/Button";
+import { Grid, IconButton } from "@webiny/admin-ui";
 import { CmsModelField } from "~/types";
 
 export const DEFAULT_TIMEZONE = "+01:00";
@@ -74,12 +72,6 @@ export const getHHmmss = (time?: string) => {
     return parts.join(":");
 };
 
-const deleteIconStyles = css({
-    width: "100% !important",
-    height: "100% !important",
-    color: "var(--mdc-theme-text-secondary-on-background) !important"
-});
-
 interface RemoveFieldButtonProps {
     trailingIcon: any;
 }
@@ -88,12 +80,15 @@ export const RemoveFieldButton = ({ trailingIcon }: RemoveFieldButtonProps) => {
         return null;
     }
     return (
-        <Cell span={1}>
-            <IconButton
-                className={deleteIconStyles}
-                onClick={trailingIcon.onClick}
-                icon={trailingIcon.icon}
-            />
-        </Cell>
+        <Grid.Column span={1}>
+            <div className={"wby-flex wby-items-end wby-justify-center wby-h-full"}>
+                <IconButton
+                    variant={"ghost"}
+                    onClick={trailingIcon.onClick}
+                    icon={trailingIcon.icon}
+                    className={"wby-mb-xs-plus"}
+                />
+            </div>
+        </Grid.Column>
     );
 };
diff --git a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/dynamicZone/AddTemplate.tsx b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/dynamicZone/AddTemplate.tsx
index a3eee887b7e..ed6c5d43aa4 100644
--- a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/dynamicZone/AddTemplate.tsx
+++ b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/dynamicZone/AddTemplate.tsx
@@ -1,38 +1,10 @@
 import React, { useState } from "react";
-import styled from "@emotion/styled";
-import { ReactComponent as InfoIcon } from "@material-design-icons/svg/outlined/info.svg";
-import { ReactComponent as AddIcon } from "@material-design-icons/svg/round/add_circle_outline.svg";
-import { Typography } from "@webiny/ui/Typography";
+import { ReactComponent as AddIcon } from "@webiny/icons/add.svg";
+import { ReactComponent as AddCircleIcon } from "@webiny/icons/add_circle_outline.svg";
 import { CmsDynamicZoneTemplate, CmsDynamicZoneTemplateWithTypename } from "~/types";
 import { TemplateGallery } from "./TemplateGallery";
-import { IconButton, ButtonSecondary } from "@webiny/ui/Button";
 import { useTemplateTypename } from "~/admin/plugins/fieldRenderers/dynamicZone/useTemplateTypename";
-
-const AddIconContainer = styled.div`
-    text-align: center;
-    padding-top: 3px;
-`;
-
-const AddButtonContainer = styled.div`
-    text-align: center;
-    margin-top: 20px;
-
-    :first-of-type {
-        margin-top: 0;
-    }
-`;
-
-const Info = styled.div`
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin-top: 5px;
-
-    > svg {
-        width: 20px;
-        margin-right: 5px;
-    }
-`;
+import { Button, cn, IconButton, Link, Text, Tooltip } from "@webiny/admin-ui";
 
 interface UseAddTemplateParams {
     onTemplate: (template: CmsDynamicZoneTemplateWithTypename) => void;
@@ -74,21 +46,45 @@ export const AddTemplateButton = (props: AddTemplateProps) => {
     });
 
     return (
-        <AddButtonContainer>
+        <div
+            className={
+                "wby-w-full wby-rounded-md wby-border-sm wby-border-neutral-muted wby-p-sm-extra wby-mt-xs wby-mb-md wby-relative"
+            }
+        >
             {showGallery ? (
                 <TemplateGallery onTemplate={onTemplate} onClose={onGalleryClose} />
             ) : (
-                <>
-                    <ButtonSecondary onClick={browseTemplates}>+ Add a template</ButtonSecondary>
-                    <Info>
-                        <InfoIcon />
-                        <Typography use={"caption"}>
-                            Click here to learn how templates and dynamic zones work.
-                        </Typography>
-                    </Info>
-                </>
+                <div
+                    className={cn([
+                        "wby-w-full wby-flex wby-flex-col wby-gap-sm-extra wby-px-xl wby-pt-xl wby-pb-lg wby-bg-neutral-subtle wby-rounded wby-text-center",
+                        "hover:wby-bg-neutral-light"
+                    ])}
+                >
+                    <Button
+                        size={"sm"}
+                        variant={"ghost"}
+                        onClick={browseTemplates}
+                        text={"Pick a template"}
+                        icon={<AddIcon />}
+                    />
+                    <div
+                        className={
+                            "wby-flex wby-items-center wby-justify-center wby-gap-xs wby-w-full wby-mx-auto wby-text-center"
+                        }
+                    >
+                        <Text size={"sm"} className={"wby-text-neutral-strong"}>
+                            <Link
+                                to={"http://webiny.link/admin/how-to-use/dynamic-zones"}
+                                target={"_blank"}
+                            >
+                                Learn how
+                            </Link>{" "}
+                            templates and dynamic zones work.
+                        </Text>
+                    </div>
+                </div>
             )}
-        </AddButtonContainer>
+        </div>
     );
 };
 
@@ -98,12 +94,22 @@ export const AddTemplateIcon = (props: AddTemplateProps) => {
     });
 
     return (
-        <AddIconContainer>
+        <div className={"wby-w-full wby-text-center wby-mt-md"}>
             {showGallery ? (
                 <TemplateGallery onTemplate={onTemplate} onClose={onGalleryClose} />
             ) : (
-                <IconButton onClick={browseTemplates} icon={<AddIcon />} />
+                <Tooltip
+                    content={"Add template"}
+                    trigger={
+                        <IconButton
+                            onClick={browseTemplates}
+                            icon={<AddCircleIcon />}
+                            size={"lg"}
+                            variant={"ghost"}
+                        />
+                    }
+                />
             )}
-        </AddIconContainer>
+        </div>
     );
 };
diff --git a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/dynamicZone/MultiValueDynamicZone.tsx b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/dynamicZone/MultiValueDynamicZone.tsx
index d897dde29bc..a7711062415 100644
--- a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/dynamicZone/MultiValueDynamicZone.tsx
+++ b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/dynamicZone/MultiValueDynamicZone.tsx
@@ -1,11 +1,9 @@
 import React from "react";
-import styled from "@emotion/styled";
 import cloneDeep from "lodash/cloneDeep";
-import { Accordion, AccordionItem } from "@webiny/ui/Accordion";
-import { ReactComponent as DeleteIcon } from "@material-design-icons/svg/outlined/delete_outline.svg";
-import { ReactComponent as CloneIcon } from "@material-design-icons/svg/outlined/library_add.svg";
-import { ReactComponent as ArrowUpIcon } from "@material-design-icons/svg/outlined/arrow_drop_up.svg";
-import { ReactComponent as ArrowDownIcon } from "@material-design-icons/svg/outlined/arrow_drop_down.svg";
+import { ReactComponent as DeleteIcon } from "@webiny/icons/delete_outline.svg";
+import { ReactComponent as CloneIcon } from "@webiny/icons/library_add.svg";
+import { ReactComponent as ArrowUpIcon } from "@webiny/icons/expand_less.svg";
+import { ReactComponent as ArrowDownIcon } from "@webiny/icons/expand_more.svg";
 import { AddTemplateButton, AddTemplateIcon } from "./AddTemplate";
 import { TemplateIcon } from "./TemplateIcon";
 import { ParentFieldProvider, useModelField } from "~/admin/hooks";
@@ -23,10 +21,7 @@ import { makeDecoratable } from "@webiny/react-composition";
 import { TemplateProvider } from "~/admin/plugins/fieldRenderers/dynamicZone/TemplateProvider";
 import { ParentValueIndexProvider } from "~/admin/components/ModelFieldProvider";
 import { useConfirmationDialog } from "@webiny/app-admin";
-
-const BottomMargin = styled.div`
-    margin-bottom: 20px;
-`;
+import { Accordion, Tooltip } from "@webiny/admin-ui";
 
 type GetBind = CmsModelFieldRendererProps["getBind"];
 
@@ -42,6 +37,7 @@ export interface MultiValueItemContainerProps {
     title: React.ReactNode;
     description: string;
     icon: JSX.Element;
+    actions?: JSX.Element;
     template: CmsDynamicZoneTemplate;
     children: React.ReactNode;
 }
@@ -50,35 +46,39 @@ export const MultiValueItemContainer = makeDecoratable(
     "MultiValueItemContainer",
     ({ children, ...props }: MultiValueItemContainerProps) => {
         const actions = (
-            <AccordionItem.Actions>
-                <AccordionItem.Action
-                    icon={<ArrowUpIcon />}
+            <>
+                <Accordion.Item.Action
+                    icon={<Tooltip trigger={<ArrowUpIcon />} content={"Move up"} />}
                     onClick={props.onMoveUp}
                     disabled={props.isFirst}
                 />
-                <AccordionItem.Action
-                    icon={<ArrowDownIcon />}
+                <Accordion.Item.Action
+                    icon={<Tooltip trigger={<ArrowDownIcon />} content={"Move down"} />}
                     onClick={props.onMoveDown}
                     disabled={props.isLast}
                 />
-                <AccordionItem.Divider />
-                <AccordionItem.Action
-                    icon={<CloneIcon />}
+                <Accordion.Item.Action.Separator />
+                {props.actions ? <>{props.actions}</> : null}
+                <Accordion.Item.Action
+                    icon={<Tooltip trigger={<CloneIcon />} content={"Duplicate"} />}
                     onClick={() => props.onClone(props.value)}
                 />
-                <AccordionItem.Action icon={<DeleteIcon />} onClick={props.onDelete} />
-            </AccordionItem.Actions>
+                <Accordion.Item.Action
+                    icon={<Tooltip trigger={<DeleteIcon />} content={"Delete"} />}
+                    onClick={props.onDelete}
+                />
+            </>
         );
 
         return (
-            <AccordionItem
+            <Accordion.Item
                 title={props.title}
                 description={props.description}
                 icon={props.icon}
                 actions={actions}
             >
                 {children}
-            </AccordionItem>
+            </Accordion.Item>
         );
     }
 );
@@ -252,9 +252,7 @@ export const MultiValueDynamicZone = (props: MultiValueDynamicZoneProps) => {
             {hasValues ? (
                 <AddTemplateIcon onTemplate={onTemplate} />
             ) : (
-                <BottomMargin>
-                    <AddTemplateButton onTemplate={onTemplate} />
-                </BottomMargin>
+                <AddTemplateButton onTemplate={onTemplate} />
             )}
         </>
     );
diff --git a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/dynamicZone/SingleValueDynamicZone.tsx b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/dynamicZone/SingleValueDynamicZone.tsx
index aabf0891b7f..770b09d5a46 100644
--- a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/dynamicZone/SingleValueDynamicZone.tsx
+++ b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/dynamicZone/SingleValueDynamicZone.tsx
@@ -1,6 +1,7 @@
 import React from "react";
-import { ReactComponent as DeleteIcon } from "@material-design-icons/svg/outlined/delete_outline.svg";
-import { Accordion, AccordionItem } from "@webiny/ui/Accordion";
+import { ReactComponent as DeleteIcon } from "@webiny/icons/delete.svg";
+import { makeDecoratable, useConfirmationDialog } from "@webiny/app-admin";
+import { Accordion, Tooltip } from "@webiny/admin-ui";
 import { AddTemplateButton } from "./AddTemplate";
 import { TemplateIcon } from "./TemplateIcon";
 import { TemplateProvider } from "./TemplateProvider";
@@ -18,7 +19,6 @@ import {
     ParentValueIndexProvider,
     ModelFieldProvider
 } from "~/admin/components/ModelFieldProvider";
-import { useConfirmationDialog } from "@webiny/app-admin";
 
 type GetBind = CmsModelFieldRendererProps["getBind"];
 
@@ -29,6 +29,50 @@ interface SingleValueDynamicZoneProps {
     getBind: GetBind;
 }
 
+interface TemplateValue {
+    _templateId: string;
+    [key: string]: any;
+}
+
+export interface SingleValueItemContainerProps {
+    value: TemplateValue;
+    contentModel: CmsModel;
+    onDelete: () => void;
+    title: React.ReactNode;
+    description: string;
+    icon: JSX.Element;
+    actions?: JSX.Element;
+    template: CmsDynamicZoneTemplate;
+    children: React.ReactNode;
+}
+
+export const SingleValueItemContainer = makeDecoratable(
+    "SingleValueItemContainer",
+    (props: SingleValueItemContainerProps) => {
+        const { template, actions, children } = props;
+        return (
+            <Accordion.Item
+                title={template.name}
+                description={template.description}
+                icon={<TemplateIcon icon={template.icon} />}
+                open={true}
+                interactive={false}
+                actions={
+                    <>
+                        {actions ?? null}
+                        <Accordion.Item.Action
+                            icon={<Tooltip trigger={<DeleteIcon />} content={"Delete"} />}
+                            onClick={props.onDelete}
+                        />
+                    </>
+                }
+            >
+                {children}
+            </Accordion.Item>
+        );
+    }
+);
+
 export const SingleValueDynamicZone = ({
     field,
     bind,
@@ -66,20 +110,14 @@ export const SingleValueDynamicZone = ({
                     <ParentValueIndexProvider index={-1}>
                         <ModelFieldProvider field={field}>
                             <Accordion>
-                                <AccordionItem
+                                <SingleValueItemContainer
+                                    template={template}
+                                    value={bind.value}
+                                    contentModel={contentModel}
+                                    onDelete={unsetValue}
                                     title={template.name}
                                     description={template.description}
                                     icon={<TemplateIcon icon={template.icon} />}
-                                    open={true}
-                                    interactive={false}
-                                    actions={
-                                        <AccordionItem.Actions>
-                                            <AccordionItem.Action
-                                                icon={<DeleteIcon />}
-                                                onClick={unsetValue}
-                                            />
-                                        </AccordionItem.Actions>
-                                    }
                                 >
                                     <TemplateProvider template={template}>
                                         <Fields
@@ -89,7 +127,7 @@ export const SingleValueDynamicZone = ({
                                             Bind={Bind}
                                         />
                                     </TemplateProvider>
-                                </AccordionItem>
+                                </SingleValueItemContainer>
                             </Accordion>
                         </ModelFieldProvider>
                     </ParentValueIndexProvider>
diff --git a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/dynamicZone/TemplateGallery.tsx b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/dynamicZone/TemplateGallery.tsx
index aa498e4c6a4..1c726379522 100644
--- a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/dynamicZone/TemplateGallery.tsx
+++ b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/dynamicZone/TemplateGallery.tsx
@@ -1,8 +1,7 @@
 import React from "react";
-import styled from "@emotion/styled";
-import { ReactComponent as CloseIcon } from "@material-design-icons/svg/outlined/highlight_off.svg";
+import { ReactComponent as CloseIcon } from "@webiny/icons/highlight_off.svg";
+import { IconButton, Tooltip } from "@webiny/admin-ui";
 import { DecoratableComponent, makeDecoratable, withDecoratorFactory } from "@webiny/app-admin";
-import { IconButton } from "@webiny/ui/Button";
 import { CmsDynamicZoneTemplate } from "~/types";
 import { useModel, useModelField } from "~/admin/hooks";
 import { TemplateItem } from "./TemplateItem";
@@ -18,19 +17,20 @@ const GalleryContainer = makeDecoratable(
     }
 );
 
-const DefaultGalleryList = styled.div`
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    padding: 10px;
-`;
-
 export interface TemplateGalleryListProps {
     children: React.ReactNode;
 }
 
 const GalleryList = makeDecoratable("TemplateGalleryList", (props: TemplateGalleryListProps) => {
-    return <DefaultGalleryList>{props.children}</DefaultGalleryList>;
+    return (
+        <div
+            className={
+                "wby-p-md wby-rounded-sm wby-bg-neutral-dimmed wby-grid wby-grid-cols-4 wby-gap-md"
+            }
+        >
+            {props.children}
+        </div>
+    );
 });
 
 export interface CloseGalleryProps {
@@ -38,7 +38,21 @@ export interface CloseGalleryProps {
 }
 
 const CloseGallery = makeDecoratable("TemplateGalleryClose", (props: CloseGalleryProps) => {
-    return <IconButton onClick={props.onClose} icon={<CloseIcon />} />;
+    return (
+        <div className={"wby-w-full wby-text-center wby-mt-md"}>
+            <Tooltip
+                content={"Close"}
+                trigger={
+                    <IconButton
+                        onClick={props.onClose}
+                        icon={<CloseIcon />}
+                        size={"lg"}
+                        variant={"ghost"}
+                    />
+                }
+            />
+        </div>
+    );
 });
 
 export interface TemplateGalleryProps {
diff --git a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/dynamicZone/TemplateIcon.tsx b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/dynamicZone/TemplateIcon.tsx
index 1d9387ce066..ad354e04e48 100644
--- a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/dynamicZone/TemplateIcon.tsx
+++ b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/dynamicZone/TemplateIcon.tsx
@@ -8,5 +8,5 @@ interface TemplateIconProps {
 export const TemplateIcon = ({ icon }: TemplateIconProps) => {
     const faIcon = icon ? (icon.split("/") as FontAwesomeIconProps["icon"]) : undefined;
 
-    return faIcon ? <FontAwesomeIcon icon={faIcon} /> : null;
+    return faIcon ? <FontAwesomeIcon className={"wby-text-neutral-strong"} icon={faIcon} /> : null;
 };
diff --git a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/dynamicZone/TemplateItem.tsx b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/dynamicZone/TemplateItem.tsx
index b1ea8863c06..37f34d7ccee 100644
--- a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/dynamicZone/TemplateItem.tsx
+++ b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/dynamicZone/TemplateItem.tsx
@@ -1,51 +1,8 @@
 import React from "react";
-import styled from "@emotion/styled";
 import { makeDecoratable } from "@webiny/app-admin";
-import { Typography } from "@webiny/ui/Typography";
-import { ButtonSecondary } from "@webiny/ui/Button";
 import { CmsDynamicZoneTemplate } from "~/types";
 import { TemplateIcon } from "~/admin/plugins/fieldRenderers/dynamicZone/TemplateIcon";
-
-const CardContainer = styled.div`
-    display: flex;
-    flex-direction: column;
-    width: 170px;
-    height: 200px;
-    margin: 5px;
-    border: 1px solid var(--mdc-theme-background);
-`;
-
-const CardIcon = styled.div`
-    text-align: center;
-    padding: 25px;
-    font-size: 1.5rem;
-    background-color: var(--mdc-theme-background);
-`;
-
-const CardBody = styled.div`
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-    padding: 10px;
-    text-align: left;
-`;
-
-const CardTitle = styled(Typography)`
-    margin-bottom: 10px;
-`;
-
-const CardDescription = styled(Typography)`
-    text-overflow: ellipsis;
-    margin-bottom: 10px;
-    white-space: nowrap;
-    overflow: hidden;
-`;
-
-const CardButton = styled(ButtonSecondary)`
-    font-size: 0.7rem;
-    line-height: 100%;
-    margin-top: auto;
-`;
+import { Button, Heading, Text } from "@webiny/admin-ui";
 
 export interface TemplateCardProps {
     template: CmsDynamicZoneTemplate;
@@ -56,20 +13,28 @@ export const TemplateItem = makeDecoratable(
     "TemplateItem",
     ({ template, onTemplate }: TemplateCardProps) => {
         return (
-            <CardContainer>
-                <CardIcon>
-                    <TemplateIcon icon={template.icon} />
-                </CardIcon>
-                <CardBody>
-                    <CardTitle tag={"p"} use={"subtitle2"}>
-                        {template.name}
-                    </CardTitle>
-                    <CardDescription tag={"p"} use={"body2"}>
-                        {template.description}
-                    </CardDescription>
-                    <CardButton onClick={() => onTemplate(template)}>+ Insert Template</CardButton>
-                </CardBody>
-            </CardContainer>
+            <div
+                className={
+                    "wby-flex wby-flex-col wby-justify-between wby-bg-neutral-base wby-rounded-sm wby-shadow-sm wby-overflow-hidden"
+                }
+            >
+                <div>
+                    <div className={"wby-text-center wby-p-lg wby-bg-neutral-muted"}>
+                        <TemplateIcon icon={template.icon} />
+                    </div>
+                    <div className={"wby-pt-md wby-px-md wby-text-left"}>
+                        <Heading level={6} className={"wby-mb-xs"}>
+                            {template.name}
+                        </Heading>
+                        <Text size={"sm"} as={"div"} className={"wby-text-neutral-strong"}>
+                            {template.description}
+                        </Text>
+                    </div>
+                </div>
+                <div className={"wby-p-sm wby-text-right"}>
+                    <Button size={"sm"} text={"Insert"} onClick={() => onTemplate(template)} />
+                </div>
+            </div>
         );
     }
 );
diff --git a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/dynamicZone/dynamicZoneRenderer.tsx b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/dynamicZone/dynamicZoneRenderer.tsx
index bde4c288fc7..24777c8c365 100644
--- a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/dynamicZone/dynamicZoneRenderer.tsx
+++ b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/dynamicZone/dynamicZoneRenderer.tsx
@@ -1,6 +1,5 @@
 import React from "react";
-import { css } from "emotion";
-import { Accordion, AccordionItem } from "@webiny/ui/Accordion";
+import { css } from "@emotion/css";
 import {
     BindComponent,
     BindComponentRenderProp,
@@ -12,8 +11,8 @@ import {
 import { SingleValueDynamicZone } from "./SingleValueDynamicZone";
 import { MultiValueDynamicZone } from "./MultiValueDynamicZone";
 import { AccordionRenderSettings, getAccordionRenderSettings } from "../AccordionRenderSettings";
-import { FormElementMessage } from "@webiny/ui/FormElementMessage";
 import { makeDecoratable } from "@webiny/react-composition";
+import { Accordion, FormComponentErrorMessage } from "@webiny/admin-ui";
 
 const noBottomPadding = css`
     > .webiny-ui-accordion-item__content {
@@ -30,6 +29,7 @@ export type DynamicZoneContainerProps = {
     title?: string;
     description?: string;
     className?: string;
+    actions?: JSX.Element;
 };
 
 export const DynamicZoneContainer = makeDecoratable(
@@ -52,18 +52,17 @@ export const DynamicZoneContainer = makeDecoratable(
         return (
             <>
                 <Accordion>
-                    <AccordionItem
+                    <Accordion.Item
                         title={title}
                         description={description}
                         className={className || defaultClassName}
-                        open={open}
+                        defaultOpen={open}
+                        actions={props.actions ?? null}
                     >
                         {children}
-                    </AccordionItem>
+                    </Accordion.Item>
                 </Accordion>
-                {isValid === false && (
-                    <FormElementMessage error={true}>{message}</FormElementMessage>
-                )}
+                {isValid === false && <FormComponentErrorMessage text={message} />}
             </>
         );
     }
diff --git a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/lexicalText/lexicalTextInput.tsx b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/lexicalText/lexicalTextInput.tsx
index 1a121a4e6f4..d102a574cdc 100644
--- a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/lexicalText/lexicalTextInput.tsx
+++ b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/lexicalText/lexicalTextInput.tsx
@@ -5,8 +5,7 @@ import { CmsModelFieldRendererPlugin, CmsModelField } from "~/types";
 import { useForm } from "@webiny/form";
 import { LexicalCmsEditor } from "~/admin/components/LexicalCmsEditor/LexicalCmsEditor";
 import { modelHasLegacyRteField } from "~/admin/plugins/fieldRenderers/richText/utils";
-import { FormElementMessage } from "@webiny/ui/FormElementMessage";
-import { DelayedOnChange } from "@webiny/ui/DelayedOnChange";
+import { FormComponentDescription, DelayedOnChange } from "@webiny/admin-ui";
 
 const t = i18n.ns("app-headless-cms/admin/fields/rich-text");
 
@@ -43,6 +42,7 @@ const plugin: CmsModelFieldRendererPlugin = {
                         return (
                             <Bind.ValidationContainer>
                                 <Label>{field.label}</Label>
+                                <FormComponentDescription text={field.helpText} />
                                 <DelayedOnChange {...bind}>
                                     {({ value, onChange }) => (
                                         <LexicalCmsEditor
@@ -54,7 +54,6 @@ const plugin: CmsModelFieldRendererPlugin = {
                                         />
                                     )}
                                 </DelayedOnChange>
-                                <FormElementMessage>{field.helpText}</FormElementMessage>
                             </Bind.ValidationContainer>
                         );
                     }}
diff --git a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/lexicalText/lexicalTextInputs.tsx b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/lexicalText/lexicalTextInputs.tsx
index 673adc8f758..e18a35ed74d 100644
--- a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/lexicalText/lexicalTextInputs.tsx
+++ b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/lexicalText/lexicalTextInputs.tsx
@@ -2,16 +2,13 @@ import React from "react";
 import get from "lodash/get";
 import { i18n } from "@webiny/app/i18n";
 import { CmsModelField, CmsModelFieldRendererPlugin } from "~/types";
-import { ReactComponent as DeleteIcon } from "@material-design-icons/svg/outlined/delete_outline.svg";
+import { ReactComponent as DeleteIcon } from "@webiny/icons/delete_outline.svg";
 import DynamicSection from "../DynamicSection";
-import { IconButton } from "@webiny/ui/Button";
-import styled from "@emotion/styled";
 import { LexicalCmsEditor } from "~/admin/components/LexicalCmsEditor/LexicalCmsEditor";
 import { modelHasLegacyRteField } from "~/admin/plugins/fieldRenderers/richText/utils";
-import { FormElementMessage } from "@webiny/ui/FormElementMessage";
 import { useForm } from "@webiny/form";
-import { DelayedOnChange } from "@webiny/ui/DelayedOnChange";
 import { MultiValueRendererSettings } from "~/admin/plugins/fieldRenderers/MultiValueRendererSettings";
+import { FormComponentNote, DelayedOnChange, IconButton } from "@webiny/admin-ui";
 
 const t = i18n.ns("app-headless-cms/admin/fields/rich-text");
 
@@ -20,16 +17,6 @@ const getKey = (id: string | undefined, field: CmsModelField, index: number): st
     return `${formId}.${field.fieldId}.${index}`;
 };
 
-const EditorWrapper = styled("div")({
-    position: "relative",
-    "> button": {
-        position: "absolute",
-        top: 0,
-        right: 5,
-        zIndex: 10
-    }
-});
-
 const plugin: CmsModelFieldRendererPlugin = {
     type: "cms-editor-field-renderer",
     name: "cms-editor-field-renderer-lexical-inputs",
@@ -56,7 +43,7 @@ const plugin: CmsModelFieldRendererPlugin = {
             return (
                 <DynamicSection {...props}>
                     {({ bind, index }) => (
-                        <EditorWrapper>
+                        <div className={"wby-relative"}>
                             <DelayedOnChange {...bind.index}>
                                 {({ value, onChange }) => (
                                     <LexicalCmsEditor
@@ -68,13 +55,17 @@ const plugin: CmsModelFieldRendererPlugin = {
                                 )}
                             </DelayedOnChange>
                             {field.multipleValues ? null : (
-                                <FormElementMessage>{field.helpText}</FormElementMessage>
+                                <FormComponentNote text={field.helpText} />
                             )}
-                            <IconButton
-                                icon={<DeleteIcon />}
-                                onClick={() => bind.field.removeValue(index)}
-                            />
-                        </EditorWrapper>
+                            <div className={"wby-absolute wby-top-sm wby-right-sm wby-z-10"}>
+                                <IconButton
+                                    variant={"ghost"}
+                                    size={"md"}
+                                    icon={<DeleteIcon />}
+                                    onClick={() => bind.field.removeValue(index)}
+                                />
+                            </div>
+                        </div>
                     )}
                 </DynamicSection>
             );
diff --git a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/longText/longText.tsx b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/longText/longText.tsx
index 5bc0f169d9c..cec067347ef 100644
--- a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/longText/longText.tsx
+++ b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/longText/longText.tsx
@@ -1,9 +1,8 @@
 import React from "react";
 import get from "lodash/get";
 import { CmsModelFieldRendererPlugin } from "~/types";
-import { Input } from "@webiny/ui/Input";
+import { DelayedOnChange, Textarea } from "@webiny/admin-ui";
 import { i18n } from "@webiny/app/i18n";
-import { DelayedOnChange } from "@webiny/ui/DelayedOnChange";
 
 const t = i18n.ns("app-headless-cms/admin/fields/text");
 
@@ -33,7 +32,7 @@ const plugin: CmsModelFieldRendererPlugin = {
                                 onChange={bind.onChange}
                                 onBlur={bind.validate}
                             >
-                                <Input
+                                <Textarea
                                     rows={5}
                                     label={field.label}
                                     placeholder={field.placeholderText}
diff --git a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/longText/longTexts.tsx b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/longText/longTexts.tsx
index 92c9cdfa50c..d3a2faa8ca8 100644
--- a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/longText/longTexts.tsx
+++ b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/longText/longTexts.tsx
@@ -1,12 +1,11 @@
 import React from "react";
 import get from "lodash/get";
 import { CmsModelFieldRendererPlugin } from "~/types";
-import { Input } from "@webiny/ui/Input";
 import { i18n } from "@webiny/app/i18n";
-import { ReactComponent as DeleteIcon } from "@material-design-icons/svg/outlined/delete_outline.svg";
+import { ReactComponent as DeleteIcon } from "@webiny/icons/delete_outline.svg";
 import DynamicSection from "../DynamicSection";
-import { DelayedOnChange } from "@webiny/ui/DelayedOnChange";
 import { MultiValueRendererSettings } from "~/admin/plugins/fieldRenderers/MultiValueRendererSettings";
+import { DelayedOnChange, IconButton, Textarea } from "@webiny/admin-ui";
 
 const t = i18n.ns("app-headless-cms/admin/fields/text");
 
@@ -28,23 +27,31 @@ const plugin: CmsModelFieldRendererPlugin = {
             return (
                 <DynamicSection {...props}>
                     {({ bind, index }) => (
-                        <DelayedOnChange
-                            value={bind.index.value}
-                            onChange={bind.index.onChange}
-                            onBlur={bind.index.validate}
-                        >
-                            <Input
-                                validation={bind.index.validation}
-                                rows={5}
-                                label={t`Value {number}`({ number: index + 1 })}
-                                placeholder={props.field.placeholderText}
-                                data-testid={`fr.input.longTexts.${props.field.label}.${index + 1}`}
-                                trailingIcon={{
-                                    icon: <DeleteIcon />,
-                                    onClick: () => bind.field.removeValue(index)
-                                }}
-                            />
-                        </DelayedOnChange>
+                        <div className={"wby-relative"}>
+                            <DelayedOnChange
+                                value={bind.index.value}
+                                onChange={bind.index.onChange}
+                                onBlur={bind.index.validate}
+                            >
+                                <Textarea
+                                    validation={bind.index.validation}
+                                    rows={5}
+                                    label={t`Value {number}`({ number: index + 1 })}
+                                    placeholder={props.field.placeholderText}
+                                    data-testid={`fr.input.longTexts.${props.field.label}.${
+                                        index + 1
+                                    }`}
+                                />
+                            </DelayedOnChange>
+                            <div className={"wby-absolute wby-top-xl wby-right-sm wby-z-10"}>
+                                <IconButton
+                                    variant={"ghost"}
+                                    size={"md"}
+                                    icon={<DeleteIcon />}
+                                    onClick={() => bind.field.removeValue(index)}
+                                />
+                            </div>
+                        </div>
                     )}
                 </DynamicSection>
             );
diff --git a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/number/numberInput.tsx b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/number/numberInput.tsx
index b8bad37335f..da3c3c3b4ca 100644
--- a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/number/numberInput.tsx
+++ b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/number/numberInput.tsx
@@ -2,8 +2,7 @@ import React from "react";
 import get from "lodash/get";
 import { CmsModelFieldRendererPlugin } from "~/types";
 import { i18n } from "@webiny/app/i18n";
-import { Input } from "@webiny/ui/Input";
-import { DelayedOnChange } from "@webiny/ui/DelayedOnChange";
+import { DelayedOnChange, Input } from "@webiny/admin-ui";
 
 const t = i18n.ns("app-headless-cms/admin/fields/number");
 
diff --git a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/number/numberInputs.tsx b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/number/numberInputs.tsx
index c6b29fc1001..53b7874b5be 100644
--- a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/number/numberInputs.tsx
+++ b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/number/numberInputs.tsx
@@ -1,12 +1,11 @@
 import React from "react";
 import get from "lodash/get";
 import { CmsModelFieldRendererPlugin } from "~/types";
-import { Input } from "@webiny/ui/Input";
 import { i18n } from "@webiny/app/i18n";
-import { ReactComponent as DeleteIcon } from "@material-design-icons/svg/outlined/delete_outline.svg";
+import { ReactComponent as DeleteIcon } from "@webiny/icons/delete.svg";
 import DynamicSection from "../DynamicSection";
-import { DelayedOnChange } from "@webiny/ui/DelayedOnChange";
 import { MultiValueRendererSettings } from "~/admin/plugins/fieldRenderers/MultiValueRendererSettings";
+import { DelayedOnChange, Icon, Input } from "@webiny/admin-ui";
 
 const t = i18n.ns("app-headless-cms/admin/fields/text");
 
@@ -40,10 +39,14 @@ const plugin: CmsModelFieldRendererPlugin = {
                                 placeholder={props.field.placeholderText}
                                 data-testid={`fr.input.numbers.${props.field.label}.${index + 1}`}
                                 type="number"
-                                trailingIcon={{
-                                    icon: <DeleteIcon />,
-                                    onClick: () => bind.field.removeValue(index)
-                                }}
+                                endIcon={
+                                    <Icon
+                                        icon={<DeleteIcon />}
+                                        label={"Delete"}
+                                        onClick={() => bind.field.removeValue(index)}
+                                        className={"wby-cursor-pointer"}
+                                    />
+                                }
                             />
                         </DelayedOnChange>
                     )}
diff --git a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/object/MultiValueItemContainer.tsx b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/object/MultiValueItemContainer.tsx
index a76e70051de..4f1d24ec9ff 100644
--- a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/object/MultiValueItemContainer.tsx
+++ b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/object/MultiValueItemContainer.tsx
@@ -2,9 +2,9 @@ import React from "react";
 import { makeDecoratable } from "@webiny/react-composition";
 import Accordion from "~/admin/plugins/fieldRenderers/Accordion";
 import { GenericRecord } from "@webiny/app/types";
-import { ReactComponent as DeleteIcon } from "@material-design-icons/svg/outlined/delete_outline.svg";
-import { ReactComponent as ArrowUp } from "@material-design-icons/svg/outlined/arrow_drop_up.svg";
-import { ReactComponent as ArrowDown } from "@material-design-icons/svg/outlined/arrow_drop_down.svg";
+import { ReactComponent as DeleteIcon } from "@webiny/icons/delete_outline.svg";
+import { ReactComponent as ArrowUp } from "@webiny/icons/arrow_drop_up.svg";
+import { ReactComponent as ArrowDown } from "@webiny/icons/arrow_drop_down.svg";
 import { IconButton } from "@webiny/ui/Button";
 
 export interface MultiValueItemContainerProps {
diff --git a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/object/StyledComponents.ts b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/object/StyledComponents.ts
index 86da9c89b66..761d1566eb9 100644
--- a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/object/StyledComponents.ts
+++ b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/object/StyledComponents.ts
@@ -1,9 +1,10 @@
 import styled from "@emotion/styled";
-import { css } from "emotion";
+import { css } from "@emotion/css";
 
 export const fieldsWrapperStyle = css`
     border-left: 2px solid var(--mdc-theme-on-background);
     padding-left: 16px;
+    margin-left: 6px;
 
     &:focus-within {
         border-color: var(--mdc-theme-primary);
diff --git a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/object/arrow_drop_down.svg b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/object/arrow_drop_down.svg
deleted file mode 100644
index ea2b536ab5a..00000000000
--- a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/object/arrow_drop_down.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="24px" height="24px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M8.71 11.71l2.59 2.59c.39.39 1.02.39 1.41 0l2.59-2.59c.63-.63.18-1.71-.71-1.71H9.41c-.89 0-1.33 1.08-.7 1.71z"/></svg>
\ No newline at end of file
diff --git a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/object/arrow_drop_up.svg b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/object/arrow_drop_up.svg
deleted file mode 100644
index cd79c97cf77..00000000000
--- a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/object/arrow_drop_up.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="24px" height="24px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M8.71 12.29L11.3 9.7c.39-.39 1.02-.39 1.41 0l2.59 2.59c.63.63.18 1.71-.71 1.71H9.41c-.89 0-1.33-1.08-.7-1.71z"/></svg>
\ No newline at end of file
diff --git a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/object/multipleObjectsAccordion.tsx b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/object/multipleObjectsAccordion.tsx
index 17cc28c6d0b..17338580020 100644
--- a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/object/multipleObjectsAccordion.tsx
+++ b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/object/multipleObjectsAccordion.tsx
@@ -1,11 +1,11 @@
 import React from "react";
 import { i18n } from "@webiny/app/i18n";
-import { Accordion as RootAccordion, AccordionItem } from "@webiny/ui/Accordion";
 import { CmsModelFieldRendererPlugin, CmsModelFieldRendererProps } from "~/types";
 import { FieldSettings } from "./FieldSettings";
 import { AccordionRenderSettings, getAccordionRenderSettings } from "../AccordionRenderSettings";
 import { MultiValueContainer } from "~/admin/plugins/fieldRenderers/object/MultiValueContainer";
 import { MultiValueRendererSettings } from "~/admin/plugins/fieldRenderers/MultiValueRendererSettings";
+import { Accordion } from "@webiny/admin-ui";
 
 const t = i18n.ns("app-headless-cms/admin/fields/text");
 
@@ -31,15 +31,19 @@ const ObjectsRenderer = (props: CmsModelFieldRendererProps) => {
 
                 return (
                     <Bind.ValidationContainer>
-                        <RootAccordion>
-                            <AccordionItem title={label} description={field.helpText} open={open}>
+                        <Accordion>
+                            <Accordion.Item
+                                title={label}
+                                description={field.helpText}
+                                defaultOpen={open}
+                            >
                                 <MultiValueContainer
                                     bind={bind}
                                     getBind={getBind}
                                     showTitle={false}
                                 />
-                            </AccordionItem>
-                        </RootAccordion>
+                            </Accordion.Item>
+                        </Accordion>
                     </Bind.ValidationContainer>
                 );
             }}
diff --git a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/object/singleObjectInline.tsx b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/object/singleObjectInline.tsx
index 7a11a481c0a..81871a93656 100644
--- a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/object/singleObjectInline.tsx
+++ b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/object/singleObjectInline.tsx
@@ -1,25 +1,15 @@
 import React from "react";
-import styled from "@emotion/styled";
 import { i18n } from "@webiny/app/i18n";
-import { FormElementMessage } from "@webiny/ui/FormElementMessage";
 import { CmsModelFieldRendererPlugin } from "~/types";
 import { Fields } from "~/admin/components/ContentEntryForm/Fields";
 import { FieldSettings } from "./FieldSettings";
 import { ParentFieldProvider } from "~/admin/components/ContentEntryForm/ParentValue";
 import { ParentValueIndexProvider } from "~/admin/components/ModelFieldProvider";
 import { fieldsGridStyle } from "./StyledComponents";
-import { Typography } from "@webiny/ui/Typography";
+import { FormComponentDescription, Heading } from "@webiny/admin-ui";
 
 const t = i18n.ns("app-headless-cms/admin/fields/text");
 
-const FieldLabel = styled.div`
-    font-size: 24px;
-    font-weight: normal;
-    border-bottom: 1px solid var(--mdc-theme-background);
-    margin-bottom: 20px;
-    padding-bottom: 5px;
-`;
-
 const plugin: CmsModelFieldRendererPlugin = {
     type: "cms-editor-field-renderer",
     name: "cms-editor-field-renderer-object",
@@ -48,21 +38,29 @@ const plugin: CmsModelFieldRendererPlugin = {
                         <Bind.ValidationContainer>
                             <ParentFieldProvider value={bindProps.value} path={Bind.parentName}>
                                 <ParentValueIndexProvider index={-1}>
-                                    <FieldLabel>
-                                        <Typography use={"headline5"}>{field.label}</Typography>
+                                    <div className={"wby-pb-sm"}>
+                                        <Heading level={6} className={"webiny_group-label-text"}>
+                                            {field.label}
+                                        </Heading>
                                         {field.helpText && (
-                                            <FormElementMessage>
+                                            <FormComponentDescription>
                                                 {field.helpText}
-                                            </FormElementMessage>
+                                            </FormComponentDescription>
                                         )}
-                                    </FieldLabel>
-                                    <Fields
-                                        gridClassName={fieldsGridStyle}
-                                        Bind={Bind}
-                                        contentModel={contentModel}
-                                        fields={settings.fields}
-                                        layout={settings.layout}
-                                    />
+                                    </div>
+                                    <div
+                                        className={
+                                            "wby-p-md wby-border-sm wby-border-neutral-dimmed-darker wby-rounded-md"
+                                        }
+                                    >
+                                        <Fields
+                                            gridClassName={fieldsGridStyle}
+                                            Bind={Bind}
+                                            contentModel={contentModel}
+                                            fields={settings.fields}
+                                            layout={settings.layout}
+                                        />
+                                    </div>
                                 </ParentValueIndexProvider>
                             </ParentFieldProvider>
                         </Bind.ValidationContainer>
diff --git a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/radioButtons.tsx b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/radioButtons.tsx
index 5d28e576e56..967b20b3e42 100644
--- a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/radioButtons.tsx
+++ b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/radioButtons.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import get from "lodash/get";
 import { CmsModelFieldRendererPlugin } from "~/types";
 import { i18n } from "@webiny/app/i18n";
-import { Radio, RadioGroup } from "@webiny/ui/Radio";
+import { RadioGroup } from "@webiny/admin-ui";
 
 const t = i18n.ns("app-headless-cms/admin/fields/text");
 
@@ -27,30 +27,26 @@ const plugin: CmsModelFieldRendererPlugin = {
 
             return (
                 <Bind defaultValue={defaultOption ? defaultOption.value : undefined}>
-                    {bind => (
+                    {({ onChange, value, ...bind }) => (
                         <Bind.ValidationContainer>
-                            <RadioGroup {...bind} label={field.label} description={field.helpText}>
-                                {({ onChange, getValue }) => (
-                                    <React.Fragment>
-                                        {options.map((option, index) => {
-                                            const value =
-                                                field.type === "number"
-                                                    ? Number(option.value)
-                                                    : option.value;
-                                            return (
-                                                <div key={String(option.value) + index}>
-                                                    <Radio
-                                                        label={option.label}
-                                                        value={getValue(value)}
-                                                        onChange={onChange(value)}
-                                                        data-testid={`fr.input.${field.label}.${option.label}`}
-                                                    />
-                                                </div>
-                                            );
-                                        })}
-                                    </React.Fragment>
-                                )}
-                            </RadioGroup>
+                            <RadioGroup
+                                {...bind}
+                                label={field.label}
+                                description={field.helpText}
+                                items={options.map(option => ({
+                                    label: option.label,
+                                    value: String(option.value),
+                                    selected: option.selected
+                                }))}
+                                value={String(value)}
+                                onChange={value => {
+                                    if (field.type === "number") {
+                                        onChange(Number(value));
+                                    } else {
+                                        onChange(String(value));
+                                    }
+                                }}
+                            />
                         </Bind.ValidationContainer>
                     )}
                 </Bind>
diff --git a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/components/AdvancedMultipleReferenceField.tsx b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/components/AdvancedMultipleReferenceField.tsx
index a8913e0706e..07a72defa79 100644
--- a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/components/AdvancedMultipleReferenceField.tsx
+++ b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/components/AdvancedMultipleReferenceField.tsx
@@ -1,5 +1,4 @@
 import React, { useCallback, useEffect, useMemo, useState } from "react";
-import styled from "@emotion/styled";
 import * as GQL from "~/admin/viewsGraphql";
 import { ListCmsModelsQueryResponse, withoutBeingDeletedModels } from "~/admin/viewsGraphql";
 import {
@@ -11,74 +10,20 @@ import {
 import { Options } from "./Options";
 import { useReferences } from "../hooks/useReferences";
 import { Entry } from "./Entry";
+import { Container } from "./Container";
 import { ReferencesDialog } from "./ReferencesDialog";
 import { useModelFieldGraphqlContext, useQuery } from "~/admin/hooks";
 import { useSnackbar } from "@webiny/app-admin";
 import { CmsReferenceValue } from "~/admin/plugins/fieldRenderers/ref/components/types";
-import { AbsoluteLoader as Loader } from "./Loader";
 import { parseIdentifier } from "@webiny/utils";
 import { Entries } from "./Entries";
 import { NewReferencedEntryDialog } from "~/admin/plugins/fieldRenderers/ref/components/NewReferencedEntryDialog";
-import { FormElementMessage } from "@webiny/ui/FormElementMessage";
-
-const FieldLabel = styled("h3")({
-    fontSize: 24,
-    fontWeight: "normal",
-    borderBottom: "1px solid var(--mdc-theme-background)",
-    marginBottom: "20px",
-    paddingBottom: "5px",
-    display: "flex",
-    justifyContent: "space-between"
-});
-
-const OptionsContainer: any = styled("div")({
-    borderTop: "1px solid var(--mdc-theme-on-background)",
-    borderRight: "1px solid var(--mdc-theme-surface)",
-    backgroundColor: "var(--mdc-theme-surface)",
-    marginLeft: "-21px",
-    marginBottom: "-21px",
-    marginRight: "-1px"
-});
-/**
- * Error is on the `position: "relative !important"` style.
- */
-// @ts-expect-error
-const Container = styled("div")({
-    border: "1px solid var(--mdc-theme-on-background)",
-    paddingLeft: "10px",
-    width: "100%",
-    boxSizing: "border-box",
-    position: "relative",
-    padding: "20px 0 20px 20px",
-    backgroundColor: "var(--mdc-theme-background)",
-    "&.no-entries": {
-        backgroundColor: "var(--mdc-theme-surface)",
-        border: "none",
-        borderLeft: "3px solid var(--mdc-theme-background)",
-        padding: 0,
-        paddingLeft: 10,
-        [OptionsContainer]: {
-            border: "none",
-            margin: 0
-        }
-    },
-    "&.single-entry": {
-        "> .entries": {
-            height: "auto",
-            " > div > div": {
-                position: "relative !important"
-            }
-        }
-    }
-});
-
-const FieldName = styled("span")({});
-const RecordCount = styled("span")({
-    color: "var(--mdc-theme-text-secondary-on-background)",
-    fontSize: "0.6em",
-    lineHeight: "100%",
-    alignSelf: "center"
-});
+import {
+    FormComponentErrorMessage,
+    FormComponentLabel,
+    OverlayLoader,
+    Text
+} from "@webiny/admin-ui";
 
 const getRecordCountMessage = (count: number) => {
     switch (count) {
@@ -271,23 +216,16 @@ export const AdvancedMultipleReferenceField = (props: AdvancedMultipleReferenceF
 
     const { validation } = bind;
     const { isValid: validationIsValid, message: validationMessage } = validation || {};
+    const invalid = useMemo(() => validationIsValid === false, [validationIsValid]);
 
     return (
         <>
-            <FieldLabel>
-                <FieldName>{field.label}</FieldName>
-                <RecordCount>({message})</RecordCount>
-            </FieldLabel>
-            {validationIsValid === false && (
-                <FormElementMessage error>{validationMessage}</FormElementMessage>
-            )}
-            <Container
-                className={
-                    (entries.length < 1 ? "no-entries" : "has-entries") +
-                    (entries.length == 1 ? " single-entry" : "")
-                }
-            >
-                {loading && <Loader />}
+            <div className={"wby-flex wby-items-center wby-justify-between"}>
+                <FormComponentLabel text={field.label} invalid={invalid} />
+                <Text size={"sm"}>({message})</Text>
+            </div>
+            <Container className={"webiny_ref-field-container"}>
+                {loading && <OverlayLoader size={"md"} />}
                 <Entries entries={entries} loadMore={loadMore}>
                     {(entry, index) => {
                         const isFirst = index === 0;
@@ -312,35 +250,33 @@ export const AdvancedMultipleReferenceField = (props: AdvancedMultipleReferenceF
                         );
                     }}
                 </Entries>
+            </Container>
+            <FormComponentErrorMessage text={validationMessage} invalid={invalid} />
+            <Options
+                models={models}
+                onNewRecord={onNewRecord}
+                onLinkExistingRecord={onExistingRecord}
+            />
 
-                <OptionsContainer>
-                    <Options
-                        models={models}
-                        onNewRecord={onNewRecord}
-                        onLinkExistingRecord={onExistingRecord}
-                    />
-
-                    {newEntryDialogModel && (
-                        <NewReferencedEntryDialog
-                            model={newEntryDialogModel}
-                            onClose={onNewEntryDialogClose}
-                            onChange={onNewEntryCreate}
-                        />
-                    )}
+            {newEntryDialogModel && (
+                <NewReferencedEntryDialog
+                    model={newEntryDialogModel}
+                    onClose={onNewEntryDialogClose}
+                    onChange={onNewEntryCreate}
+                />
+            )}
 
-                    {linkEntryDialogModel && (
-                        <ReferencesDialog
-                            {...props}
-                            field={field}
-                            multiple={true}
-                            values={values}
-                            contentModel={linkEntryDialogModel}
-                            storeValues={storeValues}
-                            onDialogClose={onLinkEntryDialogClose}
-                        />
-                    )}
-                </OptionsContainer>
-            </Container>
+            {linkEntryDialogModel && (
+                <ReferencesDialog
+                    {...props}
+                    field={field}
+                    multiple={true}
+                    values={values}
+                    contentModel={linkEntryDialogModel}
+                    storeValues={storeValues}
+                    onDialogClose={onLinkEntryDialogClose}
+                />
+            )}
         </>
     );
 };
diff --git a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/components/AdvancedMultipleReferenceSettings.tsx b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/components/AdvancedMultipleReferenceSettings.tsx
index 7dd2c28176b..bb7717daa71 100644
--- a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/components/AdvancedMultipleReferenceSettings.tsx
+++ b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/components/AdvancedMultipleReferenceSettings.tsx
@@ -1,7 +1,6 @@
 import { Bind } from "@webiny/form";
 import React from "react";
-import { Select } from "@webiny/ui/Select";
-import { Cell } from "@webiny/ui/Grid";
+import { Grid, Select } from "@webiny/admin-ui";
 
 export interface MultiRefFieldSettings {
     newItemPosition: "first" | "last";
@@ -10,17 +9,18 @@ export interface MultiRefFieldSettings {
 export const AdvancedMultipleReferenceSettings = () => {
     return (
         <>
-            <Cell span={12}>
+            <Grid.Column span={12}>
                 <Bind name={"renderer.settings.newItemPosition"} defaultValue={"last"}>
                     <Select
                         label={"New item position"}
                         description={"Where should the new items be added?"}
-                    >
-                        <option value={"first"}>Top of the list</option>
-                        <option value={"last"}>Bottom of the list</option>
-                    </Select>
+                        options={[
+                            { value: "first", label: "Top of the list" },
+                            { value: "last", label: "Bottom of the list" }
+                        ]}
+                    />
                 </Bind>
-            </Cell>
+            </Grid.Column>
         </>
     );
 };
diff --git a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/components/AdvancedSingleReferenceField.tsx b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/components/AdvancedSingleReferenceField.tsx
index bd4389c21d2..c7c34f41043 100644
--- a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/components/AdvancedSingleReferenceField.tsx
+++ b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/components/AdvancedSingleReferenceField.tsx
@@ -9,25 +9,15 @@ import { Options } from "./Options";
 import { useReferences } from "../hooks/useReferences";
 import { Entry } from "./Entry";
 import { ReferencesDialog } from "./ReferencesDialog";
-import styled from "@emotion/styled";
+import { NoEntries } from "./NoEntries";
+import { Container } from "./Container";
 import { useQuery, useModelFieldGraphqlContext } from "~/admin/hooks";
 import { ListCmsModelsQueryResponse } from "~/admin/viewsGraphql";
 import * as GQL from "~/admin/viewsGraphql";
 import { useSnackbar } from "@webiny/app-admin";
 import { CmsReferenceValue } from "~/admin/plugins/fieldRenderers/ref/components/types";
-import { Loader } from "./Loader";
 import { NewReferencedEntryDialog } from "~/admin/plugins/fieldRenderers/ref/components/NewReferencedEntryDialog";
-import { FormElementMessage } from "@webiny/ui/FormElementMessage";
-
-const Container = styled("div")({});
-
-const FieldLabel = styled("h3")({
-    fontSize: 24,
-    fontWeight: "normal",
-    borderBottom: "1px solid var(--mdc-theme-background)",
-    marginBottom: "20px",
-    paddingBottom: "5px"
-});
+import { FormComponentErrorMessage, FormComponentLabel, OverlayLoader } from "@webiny/admin-ui";
 
 interface AdvancedSingleReferenceFieldProps extends CmsModelFieldRendererProps {
     bind: BindComponentRenderProp<CmsReferenceValue | null>;
@@ -177,16 +167,14 @@ export const AdvancedSingleReferenceField = (props: AdvancedSingleReferenceField
 
     const { validation } = bind;
     const { isValid: validationIsValid, message: validationMessage } = validation || {};
+    const invalid = useMemo(() => validationIsValid === false, [validationIsValid]);
 
     return (
         <>
-            <FieldLabel>{field.label}</FieldLabel>
-            {validationIsValid === false && (
-                <FormElementMessage error>{validationMessage}</FormElementMessage>
-            )}
-            <Container>
-                {loading && <Loader />}
-                {initialValue && (
+            <FormComponentLabel text={field.label} invalid={invalid} />
+            <Container className={"webiny_ref-field-container"}>
+                {loading && <OverlayLoader size={"md"} />}
+                {initialValue ? (
                     <Entry
                         model={initialValue.model}
                         placement="singleRefField"
@@ -194,32 +182,35 @@ export const AdvancedSingleReferenceField = (props: AdvancedSingleReferenceField
                         entry={initialValue.entry}
                         onRemove={onRemove}
                     />
+                ) : (
+                    <NoEntries text={"No record found"} />
                 )}
-                <Options
-                    models={models}
-                    onNewRecord={onNewRecord}
-                    onLinkExistingRecord={onExistingRecord}
+            </Container>
+            <FormComponentErrorMessage text={validationMessage} invalid={invalid} />
+            <Options
+                models={models}
+                onNewRecord={onNewRecord}
+                onLinkExistingRecord={onExistingRecord}
+            />
+
+            {newEntryDialogModel && (
+                <NewReferencedEntryDialog
+                    model={newEntryDialogModel}
+                    onClose={onNewEntryDialogClose}
+                    onChange={onNewEntryCreate}
                 />
+            )}
 
-                {newEntryDialogModel && (
-                    <NewReferencedEntryDialog
-                        model={newEntryDialogModel}
-                        onClose={onNewEntryDialogClose}
-                        onChange={onNewEntryCreate}
-                    />
-                )}
-
-                {linkEntryDialogModel && (
-                    <ReferencesDialog
-                        {...props}
-                        multiple={false}
-                        values={bind.value ? [bind.value] : []}
-                        contentModel={linkEntryDialogModel}
-                        storeValues={storeValues}
-                        onDialogClose={onLinkEntryDialogClose}
-                    />
-                )}
-            </Container>
+            {linkEntryDialogModel && (
+                <ReferencesDialog
+                    {...props}
+                    multiple={false}
+                    values={bind.value ? [bind.value] : []}
+                    contentModel={linkEntryDialogModel}
+                    storeValues={storeValues}
+                    onDialogClose={onLinkEntryDialogClose}
+                />
+            )}
         </>
     );
 };
diff --git a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/components/Container.tsx b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/components/Container.tsx
new file mode 100644
index 00000000000..cc75ce7b6c3
--- /dev/null
+++ b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/components/Container.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+import { cn } from "@webiny/admin-ui";
+
+type ContainerProps = React.HTMLAttributes<HTMLDivElement>;
+
+const Container = ({ children, className, ...props }: ContainerProps) => {
+    return (
+        <div
+            {...props}
+            className={cn(
+                "wby-w-full wby-rounded-md wby-border-sm wby-border-neutral-muted wby-p-sm-extra wby-mt-xs wby-relative",
+                className
+            )}
+        >
+            {children}
+        </div>
+    );
+};
+
+export { Container, type ContainerProps };
diff --git a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/components/Entries.tsx b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/components/Entries.tsx
index 849b8e36ad3..1f57a7151f1 100644
--- a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/components/Entries.tsx
+++ b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/components/Entries.tsx
@@ -1,31 +1,9 @@
 import React, { useCallback } from "react";
 import debounce from "lodash/debounce";
-import styled from "@emotion/styled";
 import { CmsReferenceContentEntry } from "~/admin/plugins/fieldRenderers/ref/components/types";
-import { Scrollbar } from "@webiny/ui/Scrollbar";
+import { Scrollbar } from "@webiny/admin-ui";
 import { positionValues as PositionValues } from "react-custom-scrollbars";
-
-/**
- * Error is on the `overflowX: "hidden !important".
- */
-// @ts-expect-error
-const Container = styled("div")(() => ({
-    minWidth: "100%",
-    height: "460px",
-    backgroundColor: "var(--mdc-theme-background)",
-    boxSizing: "border-box",
-    display: "flex",
-    ">div>div": {
-        overflowX: "hidden !important",
-        overflowY: "scroll",
-        paddingRight: 20
-    }
-}));
-const ContainerChild = styled("div")({
-    boxSizing: "border-box",
-    width: "100%",
-    margin: "0 2px 25px 2px"
-});
+import { NoEntries } from "~/admin/plugins/fieldRenderers/ref/advanced/components/NoEntries";
 
 interface EntriesProps {
     entries: CmsReferenceContentEntry[];
@@ -47,19 +25,23 @@ export const Entries = (props: EntriesProps) => {
     );
 
     if (entries.length === 0) {
-        return <>No entries found.</>;
+        return <NoEntries text={"No records found"} />;
     }
+
     return (
-        <Container className={"entries"}>
+        <div
+            style={{ height: "260px" }}
+            className={"wby-w-full wby-overflow-x-hidden wby-overflow-y-hidden"}
+        >
             <Scrollbar data-testid="advanced-ref-field-entries" onScrollFrame={loadMoreOnScroll}>
                 {entries.map((entry, index) => {
                     return (
-                        <ContainerChild key={`entry-${entry.id}`}>
+                        <div className={"wby-mb-sm wby-w-full"} key={`entry-${entry.id}`}>
                             {children(entry, index)}
-                        </ContainerChild>
+                        </div>
                     );
                 })}
             </Scrollbar>
-        </Container>
+        </div>
     );
 };
diff --git a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/components/Entry.tsx b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/components/Entry.tsx
index 727a619b221..35a48e448f8 100644
--- a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/components/Entry.tsx
+++ b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/components/Entry.tsx
@@ -1,83 +1,18 @@
 import React, { useCallback } from "react";
-import styled from "@emotion/styled";
 import {
     CmsReferenceContentEntry,
     CmsReferenceValue
 } from "~/admin/plugins/fieldRenderers/ref/components/types";
 import { Image } from "./entry/Image";
-import { ModelName } from "./entry/ModelName";
 import { Title } from "./entry/Title";
-import { Description } from "./entry/Description";
-import { Status } from "./entry/Status";
-import { CreatedBy } from "./entry/CreatedBy";
-import { ModifiedBy } from "./entry/ModifiedBy";
 import { View } from "./entry/View";
 import { Select } from "./entry/Select";
 import { Remove } from "./entry/Remove";
 import { MoveUp } from "./entry/MoveUp";
 import { MoveDown } from "./entry/MoveDown";
+import { Excerpt } from "./entry/Excerpt";
 import { CmsModel } from "~/types";
 
-const Container = styled("div")({
-    width: "100%",
-    display: "flex",
-    backgroundColor: "#FFF",
-    flexDirection: "column",
-    boxShadow: "0px 1px 2px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15)",
-    marginBottom: "10px",
-    boxSizing: "border-box"
-});
-
-const ContentContainer = styled("div")({
-    width: "100%",
-    display: "grid",
-    gridTemplateColumns: "166px auto",
-    borderBottom: "1px solid var(--mdc-theme-background)"
-});
-
-const Content = styled("div")({
-    paddingLeft: "16px",
-    paddingTop: "18px",
-    paddingBottom: "10px"
-});
-
-const FooterContainer = styled("div")({
-    display: "flex",
-    flexDirection: "row",
-    padding: "10px",
-    flexWrap: "wrap-reverse",
-    justifyContent: "center",
-    marginBottom: "-10px"
-});
-
-const LeftContainer = styled("div")({
-    display: "flex",
-    flexWrap: "nowrap",
-    flexBasis: "50%",
-    alignItems: "center",
-    flexShrink: 1,
-    flexGrow: 1,
-    justifyContent: "space-around",
-    borderBottom: "1px solid var(--mdc-theme-on-background)",
-    paddingBottom: 10,
-    marginTop: -10,
-    paddingTop: 15
-});
-
-const RightContainer = styled("div")({
-    display: "flex",
-    flexWrap: "nowrap",
-    flexBasis: "50%",
-    flexShrink: 1,
-    flexGrow: 1,
-    justifyContent: "space-around",
-    borderBottom: "1px solid var(--mdc-theme-on-background)",
-    paddingBottom: 10,
-    ">div": {
-        minWidth: "100px"
-    }
-});
-
 interface EntryProps {
     model: CmsModel;
     entry: CmsReferenceContentEntry;
@@ -135,22 +70,23 @@ export const Entry = ({
     const icon = model.icon;
 
     return (
-        <Container>
-            <ContentContainer>
+        <div className={"wby-w-full wby-rounded-md wby-bg-neutral-dimmed"}>
+            <div className="wby-flex wby-items-center wby-justify-between wby-gap-sm-extra wby-min-w-0">
                 <Image title={entry.title} src={entry.image} icon={icon} />
-                <Content>
-                    <ModelName name={entry.model.name} />
+                <div
+                    className={
+                        "wby-flex wby-flex-col wby-gap-xxs wby-overflow-hidden wby-flex-1 wby-min-w-0"
+                    }
+                >
                     <Title title={entry.title} />
-                    <Description description={entry.description} />
-                </Content>
-            </ContentContainer>
-            <FooterContainer>
-                <LeftContainer>
-                    <Status status={entry.status} />
-                    <CreatedBy createdBy={entry.createdBy} createdOn={entry.createdOn} />
-                    <ModifiedBy modifiedBy={entry.modifiedBy} savedOn={entry.savedOn} />
-                </LeftContainer>
-                <RightContainer>
+                    <Excerpt
+                        modelName={entry.model.name}
+                        createdBy={entry.createdBy}
+                        createdOn={entry.createdOn}
+                        status={entry.status}
+                    />
+                </div>
+                <div className={"wby-flex wby-items-center wby-gap-sm wby-pr-sm-extra wby-h-lg"}>
                     {placement == "multiRef" && (
                         <>
                             <MoveUp
@@ -166,8 +102,8 @@ export const Entry = ({
                     <View entry={entry} />
                     {onChange && <Select entry={entry} onChange={onChange} selected={selected} />}
                     {onRemove && <Remove entry={entry} onRemove={onRemove} />}
-                </RightContainer>
-            </FooterContainer>
-        </Container>
+                </div>
+            </div>
+        </div>
     );
 };
diff --git a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/components/Loader.tsx b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/components/Loader.tsx
deleted file mode 100644
index 6fc97e51837..00000000000
--- a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/components/Loader.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import React from "react";
-import styled from "@emotion/styled";
-import { CircularProgress } from "@webiny/ui/Progress";
-
-const LoaderContainer = styled("div")({
-    display: "flex",
-    position: "relative",
-    minHeight: "50px"
-});
-const AbsoluteLoaderContainer = styled("div")({
-    display: "flex",
-    minHeight: "100%",
-    position: "absolute",
-    width: "100%",
-    top: 0,
-    left: 0
-});
-export const Loader = () => {
-    return (
-        <LoaderContainer>
-            <CircularProgress />
-        </LoaderContainer>
-    );
-};
-export const AbsoluteLoader = () => {
-    return (
-        <AbsoluteLoaderContainer>
-            <CircularProgress />
-        </AbsoluteLoaderContainer>
-    );
-};
diff --git a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/components/NoEntries.tsx b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/components/NoEntries.tsx
new file mode 100644
index 00000000000..e785b42dade
--- /dev/null
+++ b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/components/NoEntries.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+import { Text } from "@webiny/admin-ui";
+
+interface NoEntriesProps {
+    text?: React.ReactNode;
+}
+
+const NoEntries = ({ text = "No records found." }: NoEntriesProps) => {
+    return (
+        <div
+            className={
+                "wby-flex wby-justify-center wby-px-xl wby-py-md-extra wby-bg-neutral-subtle"
+            }
+        >
+            <Text size={"sm"}>{text}</Text>
+        </div>
+    );
+};
+
+export { NoEntries, type NoEntriesProps };
diff --git a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/components/Options.tsx b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/components/Options.tsx
index fa3de3a511a..a24b8194f56 100644
--- a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/components/Options.tsx
+++ b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/components/Options.tsx
@@ -1,70 +1,24 @@
 import React, { useCallback } from "react";
-import styled from "@emotion/styled";
 import { CmsModel } from "~/types";
 import { OptionsModelList } from "~/admin/plugins/fieldRenderers/ref/advanced/components/options/OptionsModelList";
-import { ReactComponent as LinkIcon } from "./assets/link.svg";
-import { ReactComponent as AddIcon } from "./assets/add-circle.svg";
+import { ReactComponent as AddIcon } from "@webiny/icons/add.svg";
+import { ReactComponent as LinkIcon } from "@webiny/icons/link.svg";
+import { Button, type ButtonProps, DropdownMenu } from "@webiny/admin-ui";
 
-const Container = styled("div")({
-    display: "flex",
-    flexDirection: "row",
-    width: "100%"
-});
-const NewRecord = styled("div")({
-    borderRight: "2px solid var(--mdc-theme-background)",
-    padding: "10px 15px",
-    display: "flex",
-    position: "relative",
-    alignItems: "center",
-    " > div ": {
-        display: "none"
-    },
-    ":hover > div": {
-        display: "block"
-    }
-});
-const NewRecordButton = styled("button")({
-    background: "transparent",
-    border: "none",
-    color: "var(--mdc-theme-primary)",
-    padding: "2px 2px",
-    cursor: "pointer",
-    alignItems: "center",
-    display: "flex",
-    "> svg": {
-        color: "var(--mdc-theme-primary)",
-        width: "16px",
-        height: "16px",
-        marginRight: 10
-    }
-});
-const LinkExistingRecord = styled("div")({
-    padding: "10px 15px",
-    alignItems: "center",
-    display: "flex",
-    position: "relative",
-    " > div ": {
-        display: "none"
-    },
-    ":hover > div": {
-        display: "block"
-    }
-});
-const LinkExistingRecordButton = styled("button")({
-    background: "transparent",
-    border: "none",
-    color: "var(--mdc-theme-primary)",
-    padding: "2px 5px",
-    cursor: "pointer",
-    alignItems: "center",
-    display: "flex",
-    "> svg": {
-        color: "var(--mdc-theme-primary)",
-        width: "16px",
-        height: "16px",
-        marginRight: 10
-    }
-});
+const CreateNewRecordButton = (props: ButtonProps) => {
+    return <Button {...props} variant={"tertiary"} text="Create a new record" icon={<AddIcon />} />;
+};
+
+const LinkExistingRecordButton = (props: ButtonProps) => {
+    return (
+        <Button
+            {...props}
+            variant={"tertiary"}
+            text="Link an existing record"
+            icon={<LinkIcon />}
+        />
+    );
+};
 
 interface OptionsProps {
     models: CmsModel[];
@@ -86,20 +40,40 @@ export const Options = ({ models, onNewRecord, onLinkExistingRecord }: OptionsPr
         }
         onLinkExistingRecord(models[0].modelId);
     }, [models]);
+
+    if (hasMultipleModels) {
+        return (
+            <div className={"wby-flex wby-gap-sm wby-mt-md"}>
+                <DropdownMenu
+                    trigger={
+                        <Button
+                            variant={"tertiary"}
+                            text="Create a new record"
+                            icon={<AddIcon />}
+                        />
+                    }
+                >
+                    <OptionsModelList onClick={onNewRecord} models={models} />
+                </DropdownMenu>
+                <DropdownMenu
+                    trigger={
+                        <Button
+                            variant={"tertiary"}
+                            text="Link an existing record"
+                            icon={<LinkIcon />}
+                        />
+                    }
+                >
+                    <OptionsModelList onClick={onLinkExistingRecord} models={models} />
+                </DropdownMenu>
+            </div>
+        );
+    }
+
     return (
-        <Container>
-            <NewRecord>
-                <NewRecordButton onClick={onSingleNewRecord}>
-                    <AddIcon /> create a new record
-                </NewRecordButton>
-                <OptionsModelList onClick={onNewRecord} models={models} />
-            </NewRecord>
-            <LinkExistingRecord>
-                <LinkExistingRecordButton onClick={onSingleExistingRecord}>
-                    <LinkIcon /> link an existing record
-                </LinkExistingRecordButton>
-                <OptionsModelList onClick={onLinkExistingRecord} models={models} />
-            </LinkExistingRecord>
-        </Container>
+        <div className={"wby-flex wby-gap-sm wby-mt-md"}>
+            <CreateNewRecordButton onClick={onSingleNewRecord} />
+            <LinkExistingRecordButton onClick={onSingleExistingRecord} />
+        </div>
     );
 };
diff --git a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/components/ReferencesDialog.tsx b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/components/ReferencesDialog.tsx
index bd1b6f19656..ce89b2b98d9 100644
--- a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/components/ReferencesDialog.tsx
+++ b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/components/ReferencesDialog.tsx
@@ -1,43 +1,14 @@
-import React, { useCallback, useEffect, useRef, useState } from "react";
-import styled from "@emotion/styled";
+import React, { useCallback, useEffect, useState } from "react";
 import { Search } from "./Search";
 import { Entry } from "./Entry";
-import { DialogActions, DialogContent as BaseDialogContent } from "~/admin/components/Dialog";
 import { CmsModelField, CmsModelFieldRendererProps } from "~/types";
 import { CmsReferenceValue } from "~/admin/plugins/fieldRenderers/ref/components/types";
-import { ButtonDefault, ButtonPrimary } from "@webiny/ui/Button";
 import { useSnackbar } from "@webiny/app-admin";
 import { parseIdentifier } from "@webiny/utils";
-import { AbsoluteLoader } from "~/admin/plugins/fieldRenderers/ref/advanced/components/Loader";
 import { useEntries } from "~/admin/plugins/fieldRenderers/ref/advanced/hooks/useEntries";
 import { Entries } from "./Entries";
-import { Dialog } from "~/admin/plugins/fieldRenderers/ref/components/dialog/Dialog";
-import { DialogHeader } from "~/admin/plugins/fieldRenderers/ref/components/dialog/DialogHeader";
 import { MultiRefFieldSettings } from "~/admin/plugins/fieldRenderers/ref/advanced/components/AdvancedMultipleReferenceSettings";
-
-const Container = styled("div")({
-    width: "100%",
-    boxSizing: "border-box",
-    padding: "20px"
-});
-
-const Content = styled("div")({
-    display: "flex",
-    flex: "1",
-    flexDirection: "column",
-    position: "relative",
-    width: "100%",
-    minHeight: "20px",
-    boxSizing: "border-box",
-    padding: "20px 0 20px 20px",
-    backgroundColor: "var(--mdc-theme-background)",
-    border: "1px solid var(--mdc-theme-on-background)",
-    overflowX: "hidden"
-});
-
-const DialogContent = styled(BaseDialogContent)({
-    padding: "0 !important"
-});
+import { Dialog, OverlayLoader } from "@webiny/admin-ui";
 
 const isSelected = (entryId: string, values: CmsReferenceValue[]) => {
     if (!entryId) {
@@ -78,6 +49,7 @@ export const ReferencesDialog = (props: ReferencesDialogProps) => {
     } = props;
 
     const [values, setValues] = useState<CmsReferenceValue[]>(initialValues || []);
+    const [searchValue, setSearchValue] = useState<string>("");
     const rendererSettings = getSettings(field);
     const newItemPosition = rendererSettings?.newItemPosition ?? "last";
 
@@ -152,52 +124,42 @@ export const ReferencesDialog = (props: ReferencesDialogProps) => {
         showSnackbar(error);
     }, [error]);
 
-    const debouncedSearch = useRef<number | null>(null);
-
-    const onInput = useCallback((ev: React.BaseSyntheticEvent) => {
-        const value = (String(ev.target.value) || "").trim();
-        if (debouncedSearch.current) {
-            clearTimeout(debouncedSearch.current);
-            debouncedSearch.current = null;
-        }
-        /**
-         * We can safely cast as setTimeout really produces a number.
-         * There is an error while coding because Storm thinks this is NodeJS timeout.
-         */
-        debouncedSearch.current = setTimeout(() => {
-            runSearch(value);
-        }, 200) as unknown as number;
+    const onInput = useCallback((value: string) => {
+        runSearch(value);
+        setSearchValue(value);
     }, []);
 
     return (
         <>
-            <Dialog open={true} onClose={onDialogClose}>
-                <DialogHeader model={contentModel} onClose={onDialogClose} />
-                <DialogContent>
-                    <Container>
-                        <Search onInput={onInput} />
-                        <Content>
-                            {loading && <AbsoluteLoader />}
-                            <Entries entries={entries} loadMore={loadMore}>
-                                {entry => {
-                                    return (
-                                        <Entry
-                                            model={contentModel}
-                                            key={`reference-entry-${entry.id}`}
-                                            entry={entry}
-                                            selected={isSelected(entry.entryId, values)}
-                                            onChange={onChange}
-                                        />
-                                    );
-                                }}
-                            </Entries>
-                        </Content>
-                    </Container>
-                </DialogContent>
-                <DialogActions>
-                    <ButtonDefault onClick={onDialogClose}>Cancel</ButtonDefault>
-                    <ButtonPrimary onClick={onDialogSave}>Save</ButtonPrimary>
-                </DialogActions>
+            <Dialog
+                open={true}
+                onClose={onDialogClose}
+                title={"Select an existing record"}
+                description={`Content model: ${contentModel.name}`}
+                actions={
+                    <>
+                        <Dialog.CancelButton />
+                        <Dialog.ConfirmButton onClick={onDialogSave} text="Save" />
+                    </>
+                }
+            >
+                <>
+                    {loading && <OverlayLoader />}
+                    <Search onChange={onInput} value={searchValue} />
+                    <Entries entries={entries} loadMore={loadMore}>
+                        {entry => {
+                            return (
+                                <Entry
+                                    model={contentModel}
+                                    key={`reference-entry-${entry.id}`}
+                                    entry={entry}
+                                    selected={isSelected(entry.entryId, values)}
+                                    onChange={onChange}
+                                />
+                            );
+                        }}
+                    </Entries>
+                </>
             </Dialog>
         </>
     );
diff --git a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/components/Search.tsx b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/components/Search.tsx
index 12e4d8d3769..26e7bfe3aa0 100644
--- a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/components/Search.tsx
+++ b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/components/Search.tsx
@@ -1,50 +1,27 @@
 import React from "react";
-import styled from "@emotion/styled";
-import searchIcon from "./assets/search.svg";
-
-const Container = styled("div")({
-    display: "flex",
-    width: "100%",
-    position: "relative",
-    height: "36px",
-    marginBottom: "16px",
-    padding: "5px 0",
-    border: "1px solid var(--mdc-theme-on-background)",
-    backgroundColor: "var(--mdc-theme-background)"
-});
-
-const Icon = styled("img")({
-    position: "absolute",
-    top: "12px",
-    left: "10px",
-    width: "24px",
-    height: "24px"
-});
-
-const Input = styled("input")({
-    display: "block",
-    boxSizing: "border-box",
-    border: "none",
-    backgroundColor: "transparent",
-    width: "100%",
-    height: "100%",
-    fontSize: "14px",
-    lineHeight: "36px",
-    paddingLeft: "45px",
-    ":focus-visible": {
-        outline: "none"
-    }
-});
+import { ReactComponent as SearchIcon } from "@webiny/icons/search.svg";
+import { Input, DelayedOnChange, Icon } from "@webiny/admin-ui";
 
 interface SearchProps {
-    onInput: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+    onChange: (value: string) => void;
+    value: string;
 }
 
-export const Search = ({ onInput }: SearchProps) => {
+export const Search = ({ onChange, value }: SearchProps) => {
     return (
-        <Container>
-            <Icon src={searchIcon} />
-            <Input placeholder={"Search entries"} onKeyUp={onInput} />
-        </Container>
+        <div className={"wby-mb-sm"}>
+            <DelayedOnChange value={value} onChange={onChange}>
+                {({ value, onChange }) => (
+                    <Input
+                        size={"lg"}
+                        placeholder={"Search entries..."}
+                        onChange={onChange}
+                        value={value}
+                        startIcon={<Icon label="Search" icon={<SearchIcon />} />}
+                        variant={"secondary"}
+                    />
+                )}
+            </DelayedOnChange>
+        </div>
     );
 };
diff --git a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/components/entry/CreatedBy.tsx b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/components/entry/CreatedBy.tsx
index f8f62356133..d104ac1eb65 100644
--- a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/components/entry/CreatedBy.tsx
+++ b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/components/entry/CreatedBy.tsx
@@ -10,8 +10,7 @@ interface CreatedByProps {
 export const CreatedBy = ({ createdBy, createdOn }: CreatedByProps) => {
     return (
         <Box icon={null} name={"Created By"}>
-            {createdBy.displayName} <br />
-            <TimeAgo datetime={createdOn} />
+            {createdBy.displayName} <TimeAgo datetime={createdOn} />
         </Box>
     );
 };
diff --git a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/components/entry/Description.tsx b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/components/entry/Description.tsx
index 8764db135e3..a431cae868f 100644
--- a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/components/entry/Description.tsx
+++ b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/components/entry/Description.tsx
@@ -1,16 +1,6 @@
-import styled from "@emotion/styled";
 import React from "react";
+import { cn, Text } from "@webiny/admin-ui";
 
-const Content = styled("p")({
-    fontStyle: "normal",
-    fontWeight: 400,
-    fontSize: 14,
-    lineHeight: "20px",
-    letterSpacing: "0.25px",
-    boxSizing: "border-box",
-    paddingRight: 20,
-    paddingBottom: 10
-});
 interface DescriptionProps {
     description?: string | null;
 }
@@ -18,14 +8,14 @@ interface DescriptionProps {
 export const Description = ({ description }: DescriptionProps) => {
     const MAX_LENGTH = 320;
     if (!description) {
-        return <Content />;
+        return null;
     }
 
     return (
-        <Content>
+        <Text size="sm" as="div" className={cn("wby-truncate wby-w-full wby-text-neutral-muted")}>
             {description.length > MAX_LENGTH
                 ? description.substring(0, MAX_LENGTH) + "..."
                 : description}
-        </Content>
+        </Text>
     );
 };
diff --git a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/components/entry/Excerpt.tsx b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/components/entry/Excerpt.tsx
new file mode 100644
index 00000000000..8b3053fa78f
--- /dev/null
+++ b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/components/entry/Excerpt.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+import { cn, Text, TimeAgo } from "@webiny/admin-ui";
+import { CmsContentEntryStatusType, CmsIdentity } from "@webiny/app-headless-cms-common/types";
+
+interface ExcerptProps {
+    modelName: string;
+    createdBy: CmsIdentity;
+    createdOn: Date;
+    status: CmsContentEntryStatusType;
+}
+
+export const Excerpt = ({ modelName, createdOn, createdBy, status }: ExcerptProps) => {
+    return (
+        <Text size="sm" as="div" className={cn("wby-truncate wby-w-full wby-text-neutral-muted")}>
+            Model: {modelName} - Status: {status} - Created by {createdBy.displayName}{" "}
+            <TimeAgo datetime={createdOn} />
+        </Text>
+    );
+};
diff --git a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/components/entry/Image.tsx b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/components/entry/Image.tsx
index cc2738ddfaa..3d1c676fdbc 100644
--- a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/components/entry/Image.tsx
+++ b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/components/entry/Image.tsx
@@ -1,36 +1,7 @@
-import styled from "@emotion/styled";
 import React from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { IconProp } from "@fortawesome/fontawesome-svg-core";
-
-const Container = styled("div")({
-    width: "100%",
-    backgroundColor: "var(--mdc-theme-on-background)",
-    borderRight: "1px solid var(--mdc-theme-on-background)",
-    borderBottom: "1px solid var(--mdc-theme-on-background)",
-    backgroundRepeat: "no-repeat",
-    backgroundSize: "contain",
-    backgroundOrigin: "content-box",
-    backgroundPosition: "center",
-    padding: 5,
-    minHeight: 140,
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "center",
-    boxSizing: "border-box"
-});
-
-const Icon = styled("div")({
-    flex: "0 0 100px",
-    svg: {
-        color: "var(--mdc-theme-text-icon-on-light)",
-        width: "100%",
-        height: "auto",
-        maxWidth: 100,
-        maxHeight: 100,
-        opacity: 0.3
-    }
-});
+import { Icon } from "@webiny/admin-ui";
 
 interface IconProps {
     icon: string | undefined;
@@ -47,18 +18,26 @@ const DisplayIcon = ({ icon }: IconProps) => {
     if (!icon) {
         return null;
     }
-    return <FontAwesomeIcon icon={(icon || "").split("/") as IconProp} />;
+    return (
+        <Icon
+            icon={<FontAwesomeIcon icon={(icon || "").split("/") as IconProp} />}
+            label={"Model icon"}
+            size={"lg"}
+            className={"wby-text-neutral-muted"}
+        />
+    );
 };
 
-export const Image = ({ src, icon, width = 166 }: ImageProps) => {
-    if (!src) {
-        return (
-            <Container>
-                <Icon>
-                    <DisplayIcon icon={icon} />
-                </Icon>
-            </Container>
-        );
-    }
-    return <Container style={{ backgroundImage: "url(" + src + "?width=" + width + ")" }} />;
+export const Image = ({ src, icon, width }: ImageProps) => {
+    return (
+        <div className={"wby-size-[56px] wby-m-xs wby-rounded-sm wby-overflow-hidden wby-relative"}>
+            <div
+                className={
+                    "wby-size-full wby-flex wby-justify-center wby-items-center wby-bg-neutral-base"
+                }
+            >
+                {src ? <img src={src} width={width} /> : <DisplayIcon icon={icon} />}
+            </div>
+        </div>
+    );
 };
diff --git a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/components/entry/ModelName.tsx b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/components/entry/ModelName.tsx
index 8885d5acd53..92f7cc5a247 100644
--- a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/components/entry/ModelName.tsx
+++ b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/components/entry/ModelName.tsx
@@ -1,18 +1,14 @@
-import styled from "@emotion/styled";
 import React from "react";
-
-const Content = styled("h4")({
-    color: "#938F99",
-    fontSize: 11,
-    lineHeight: "16px",
-    fontWeight: 500,
-    letterSpacing: "0.5px",
-    textTransform: "uppercase"
-});
+import { cn, Text } from "@webiny/admin-ui";
 
 interface ModelNameProps {
     name: string;
 }
+
 export const ModelName = ({ name }: ModelNameProps) => {
-    return <Content>{name}</Content>;
+    return (
+        <Text size="sm" as="div" className={cn("wby-truncate wby-w-full wby-text-neutral-muted")}>
+            {name}
+        </Text>
+    );
 };
diff --git a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/components/entry/ModifiedBy.tsx b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/components/entry/ModifiedBy.tsx
index f0311762474..0c4cbfb9d81 100644
--- a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/components/entry/ModifiedBy.tsx
+++ b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/components/entry/ModifiedBy.tsx
@@ -19,8 +19,7 @@ export const ModifiedBy = ({ modifiedBy, savedOn }: ModifiedByProps) => {
         <Box icon={null} name={"Modified By"}>
             {showInformation && (
                 <>
-                    {modifiedBy?.displayName} <br />
-                    <TimeAgo datetime={savedOn} />
+                    {modifiedBy?.displayName} <TimeAgo datetime={savedOn} />
                 </>
             )}
         </Box>
diff --git a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/components/entry/MoveDown.tsx b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/components/entry/MoveDown.tsx
index e72ebf7f19f..2d0ed10c351 100644
--- a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/components/entry/MoveDown.tsx
+++ b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/components/entry/MoveDown.tsx
@@ -1,7 +1,6 @@
 import React from "react";
-import { ButtonLink } from "./elements/ButtonLink";
-import { ReactComponent as MoveDownIcon } from "./assets/move-down.svg";
-import { Tooltip } from "@webiny/ui/Tooltip";
+import { ReactComponent as MoveDownIcon } from "@webiny/icons/keyboard_arrow_down.svg";
+import { IconButton, Tooltip } from "@webiny/admin-ui";
 
 interface MoveDownProps {
     onClick: (ev: React.MouseEvent) => void;
@@ -10,10 +9,19 @@ interface MoveDownProps {
 
 export const MoveDown = ({ onClick, className }: MoveDownProps) => {
     return (
-        <ButtonLink className={"has-tooltip " + className} onClick={onClick} maxWidth={"100px"}>
-            <Tooltip content={"Shift+Click to move to bottom"} placement={"top"}>
-                <MoveDownIcon /> <span>Move Down</span>
-            </Tooltip>
-        </ButtonLink>
+        <Tooltip
+            content={"Shift+Click to move to bottom"}
+            side={"top"}
+            trigger={
+                <IconButton
+                    variant={"ghost"}
+                    size={"sm"}
+                    iconSize={"lg"}
+                    onClick={onClick}
+                    className={className}
+                    icon={<MoveDownIcon />}
+                />
+            }
+        />
     );
 };
diff --git a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/components/entry/MoveUp.tsx b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/components/entry/MoveUp.tsx
index e96b7bce61f..b54d10cab60 100644
--- a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/components/entry/MoveUp.tsx
+++ b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/components/entry/MoveUp.tsx
@@ -1,7 +1,6 @@
 import React from "react";
-import { ButtonLink } from "./elements/ButtonLink";
-import { ReactComponent as MoveUpIcon } from "./assets/move-up.svg";
-import { Tooltip } from "@webiny/ui/Tooltip";
+import { ReactComponent as MoveUpIcon } from "@webiny/icons/keyboard_arrow_up.svg";
+import { IconButton, Tooltip } from "@webiny/admin-ui";
 
 interface MoveUpProps {
     onClick: (ev: React.MouseEvent) => void;
@@ -10,10 +9,19 @@ interface MoveUpProps {
 
 export const MoveUp = ({ onClick, className }: MoveUpProps) => {
     return (
-        <ButtonLink className={"has-tooltip " + className} onClick={onClick} maxWidth={"100px"}>
-            <Tooltip content={"Shift+Click to move to top"} placement={"top"}>
-                <MoveUpIcon /> Move Up
-            </Tooltip>
-        </ButtonLink>
+        <Tooltip
+            content={"Shift+Click to move to top"}
+            side={"top"}
+            trigger={
+                <IconButton
+                    variant={"ghost"}
+                    size={"sm"}
+                    iconSize={"lg"}
+                    onClick={onClick}
+                    className={className}
+                    icon={<MoveUpIcon />}
+                />
+            }
+        />
     );
 };
diff --git a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/components/entry/Remove.tsx b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/components/entry/Remove.tsx
index 2a559dd5cb1..85c9dfd40bc 100644
--- a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/components/entry/Remove.tsx
+++ b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/components/entry/Remove.tsx
@@ -1,19 +1,9 @@
-import styled from "@emotion/styled";
 import React, { useCallback } from "react";
 import { CmsReferenceContentEntry } from "~/admin/plugins/fieldRenderers/ref/components/types";
-import { ReactComponent as DeleteIcon } from "@material-design-icons/svg/outlined/delete_outline.svg";
+import { ReactComponent as DeleteIcon } from "@webiny/icons/delete.svg";
 import { useConfirmationDialog } from "@webiny/app-admin";
-import { ButtonLink } from "./elements/ButtonLink";
 import { useForm } from "@webiny/form";
-
-const Text = styled("span")({
-    fontFamily: "Source Sans Pro",
-    fontWeight: 500,
-    fontSize: "14px",
-    lineHeight: "20px",
-    letterSpacing: "0.1px",
-    textTransform: "uppercase"
-});
+import { IconButton, Tooltip } from "@webiny/admin-ui";
 
 interface RemoveProps {
     entry: CmsReferenceContentEntry;
@@ -35,9 +25,18 @@ export const Remove = ({ entry, onRemove }: RemoveProps) => {
     }, [entry, onRemove]);
 
     return (
-        <ButtonLink onClick={onRemoveClick} maxWidth={"100px"}>
-            <DeleteIcon />
-            <Text>Remove</Text>
-        </ButtonLink>
+        <Tooltip
+            content={"Remove"}
+            side={"top"}
+            trigger={
+                <IconButton
+                    variant={"ghost"}
+                    size={"sm"}
+                    iconSize={"lg"}
+                    onClick={onRemoveClick}
+                    icon={<DeleteIcon />}
+                />
+            }
+        />
     );
 };
diff --git a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/components/entry/Select.tsx b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/components/entry/Select.tsx
index ef8bd879b36..d7270ab36ca 100644
--- a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/components/entry/Select.tsx
+++ b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/components/entry/Select.tsx
@@ -1,58 +1,11 @@
-import styled from "@emotion/styled";
 import React, { useCallback } from "react";
 import {
     CmsReferenceContentEntry,
     CmsReferenceValue
 } from "~/admin/plugins/fieldRenderers/ref/components/types";
-import { ReactComponent as SelectedIcon } from "./assets/selected.svg";
-
-const Container = styled("div")({
-    width: "140px",
-    display: "flex",
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "end"
-});
-
-const SelectButton = styled("button")({
-    border: 0,
-    display: "flex",
-    flexDirection: "row",
-    alignItems: "center",
-    background: "transparent",
-    color: "var(--mdc-theme-primary)",
-    cursor: "pointer",
-    "&:hover": {
-        textDecoration: "underline"
-    }
-});
-
-interface IconProps {
-    selected?: boolean;
-}
-const Icon = styled("div")(({ selected }: IconProps) => {
-    return {
-        backgroundColor: selected ? "var(--mdc-theme-primary)" : "transparent",
-        border: "1px solid var(--mdc-theme-primary)",
-        borderRadius: "3px",
-        width: "16px",
-        height: "16px",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        cursor: "pointer"
-    };
-});
-
-const Text = styled("span")({
-    fontFamily: "Source Sans Pro",
-    fontWeight: 500,
-    fontSize: "14px",
-    lineHeight: "20px",
-    letterSpacing: "0.1px",
-    textTransform: "uppercase",
-    marginLeft: "10px"
-});
+import { ReactComponent as SelectIcon } from "@webiny/icons/check_box_outline_blank.svg";
+import { ReactComponent as SelectedIcon } from "@webiny/icons/check_box.svg";
+import { IconButton, Tooltip } from "@webiny/admin-ui";
 
 interface SelectProps {
     entry: CmsReferenceContentEntry;
@@ -66,12 +19,20 @@ export const Select = ({ entry, selected, onChange }: SelectProps) => {
             modelId: entry.model.modelId
         });
     }, [entry, onChange]);
+
     return (
-        <Container>
-            <SelectButton onClick={onIconClick}>
-                <Icon selected={selected}>{selected && <SelectedIcon />}</Icon>
-                <Text>{selected ? "Selected" : "Select"}</Text>
-            </SelectButton>
-        </Container>
+        <Tooltip
+            content={selected ? "Unselect" : "Select"}
+            side={"top"}
+            trigger={
+                <IconButton
+                    variant={"ghost"}
+                    size={"sm"}
+                    iconSize={"lg"}
+                    onClick={onIconClick}
+                    icon={selected ? <SelectedIcon /> : <SelectIcon />}
+                />
+            }
+        />
     );
 };
diff --git a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/components/entry/Status.tsx b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/components/entry/Status.tsx
index 7d0b1b3a9dd..09468456867 100644
--- a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/components/entry/Status.tsx
+++ b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/components/entry/Status.tsx
@@ -1,18 +1,40 @@
 import React from "react";
-import { ReactComponent as DraftIcon } from "./assets/status-draft.svg";
-import { ReactComponent as PublishedIcon } from "./assets/status-published.svg";
-import { ReactComponent as UnpublishedIcon } from "./assets/status-unpublished.svg";
+import { ReactComponent as DraftIcon } from "@webiny/icons/draw.svg";
+import { ReactComponent as PublishedIcon } from "@webiny/icons/visibility.svg";
+import { ReactComponent as UnpublishedIcon } from "@webiny/icons/visibility_off.svg";
 import { Box } from "./Box";
 import { CmsContentEntryStatusType } from "~/types";
+import { Icon } from "@webiny/admin-ui";
 
 const getIcon = (status: CmsContentEntryStatusType) => {
     switch (status) {
         case "published":
-            return <PublishedIcon />;
+            return (
+                <Icon
+                    icon={<PublishedIcon />}
+                    label="Published"
+                    size={"lg"}
+                    className={"wby-fill-success-default"}
+                />
+            );
         case "unpublished":
-            return <UnpublishedIcon />;
+            return (
+                <Icon
+                    icon={<UnpublishedIcon />}
+                    label="Unpublished"
+                    size={"lg"}
+                    className={"wby-fill-danger-default"}
+                />
+            );
         case "draft":
-            return <DraftIcon />;
+            return (
+                <Icon
+                    icon={<DraftIcon />}
+                    label="Draft"
+                    size={"lg"}
+                    className={"wby-fill-warning-default"}
+                />
+            );
         default:
             return null;
     }
diff --git a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/components/entry/Title.tsx b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/components/entry/Title.tsx
index a85ac5ce6df..f1b6604553a 100644
--- a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/components/entry/Title.tsx
+++ b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/components/entry/Title.tsx
@@ -1,17 +1,18 @@
-import styled from "@emotion/styled";
 import React from "react";
-
-const Content = styled("h3")({
-    fontStyle: "normal",
-    fontWeight: 400,
-    fontSize: 24,
-    lineHeight: "32px",
-    marginBottom: "5px"
-});
+import { cn, Text } from "@webiny/admin-ui";
 
 interface TitleProps {
     title: string;
 }
+
 export const Title = ({ title }: TitleProps) => {
-    return <Content>{title}</Content>;
+    return (
+        <Text
+            size={"sm"}
+            as={"div"}
+            className={cn("wby-truncate wby-w-full wby-text-neutral-primary")}
+        >
+            {title}
+        </Text>
+    );
 };
diff --git a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/components/entry/View.tsx b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/components/entry/View.tsx
index ae29af54516..979bf5b24b9 100644
--- a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/components/entry/View.tsx
+++ b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/components/entry/View.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { CmsReferenceContentEntry } from "~/admin/plugins/fieldRenderers/ref/components/types";
-import { ReactComponent as ViewIcon } from "@material-design-icons/svg/outlined/visibility.svg";
-import { ButtonLink } from "./elements/ButtonLink";
+import { ReactComponent as ViewIcon } from "@webiny/icons/open_in_new.svg";
+import { IconButton, Link, Tooltip } from "@webiny/admin-ui";
 
 const createEntryUrl = (entry: CmsReferenceContentEntry) => {
     const folderId = entry.wbyAco_location?.folderId || "";
@@ -15,8 +15,14 @@ interface ViewProps {
 }
 export const View = ({ entry }: ViewProps) => {
     return (
-        <ButtonLink href={createEntryUrl(entry)} target="_blank" maxWidth={"95px"}>
-            <ViewIcon /> <span>View</span>
-        </ButtonLink>
+        <Tooltip
+            content={"View"}
+            side={"top"}
+            trigger={
+                <Link to={createEntryUrl(entry)} target="_blank" rel="noopener noreferrer">
+                    <IconButton variant={"ghost"} size={"sm"} iconSize={"lg"} icon={<ViewIcon />} />
+                </Link>
+            }
+        />
     );
 };
diff --git a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/components/options/OptionsModelList.tsx b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/components/options/OptionsModelList.tsx
index bea1f75f415..b9b7028bddb 100644
--- a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/components/options/OptionsModelList.tsx
+++ b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/components/options/OptionsModelList.tsx
@@ -1,35 +1,12 @@
-import styled from "@emotion/styled";
 import React from "react";
 import { CmsModel } from "~/types";
-import { Elevation } from "@webiny/ui/Elevation";
 import { OptionsModelListItem } from "./OptionsModelListItem";
-import { ReactComponent as DownIcon } from "../assets/down-arrow.svg";
-
-const Container = styled("span")({
-    display: "flex",
-    marginLeft: "5px",
-    width: 32,
-    ">svg": {
-        color: "var(--mdc-theme-primary)",
-        width: "24px",
-        height: "24px"
-    }
-});
-const ModelsContainer = styled(Elevation)({
-    position: "absolute",
-    zIndex: 2,
-    top: "40px",
-    left: 0,
-    width: "215px",
-    backgroundColor: "#FFFFFF",
-    display: "flex",
-    flexDirection: "column"
-});
 
 interface OptionsModelListProps {
     models: CmsModel[];
     onClick: (modelId: string) => void;
 }
+
 export const OptionsModelList = ({ models, onClick }: OptionsModelListProps) => {
     if (models.length <= 1) {
         return null;
@@ -37,20 +14,15 @@ export const OptionsModelList = ({ models, onClick }: OptionsModelListProps) =>
 
     return (
         <>
-            <Container>
-                <DownIcon />
-            </Container>
-            <ModelsContainer z={1}>
-                {models.map(model => {
-                    return (
-                        <OptionsModelListItem
-                            onClick={onClick}
-                            key={`model-${model.modelId}`}
-                            model={model}
-                        />
-                    );
-                })}
-            </ModelsContainer>
+            {models.map(model => {
+                return (
+                    <OptionsModelListItem
+                        onClick={onClick}
+                        key={`model-${model.modelId}`}
+                        model={model}
+                    />
+                );
+            })}
         </>
     );
 };
diff --git a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/components/options/OptionsModelListItem.tsx b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/components/options/OptionsModelListItem.tsx
index 64c4d17d1aa..3e814e6fb6f 100644
--- a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/components/options/OptionsModelListItem.tsx
+++ b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/components/options/OptionsModelListItem.tsx
@@ -1,61 +1,8 @@
 import React, { useCallback } from "react";
-import styled from "@emotion/styled";
 import { CmsModel } from "~/types";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { IconProp } from "@fortawesome/fontawesome-svg-core";
-
-const Title = styled("div")({
-    width: "100%",
-    boxSizing: "border-box",
-    paddingTop: 5,
-    "&.hasDescription": {
-        paddingTop: 0
-    }
-});
-
-const Content = styled("div")({
-    display: "flex",
-    flexDirection: "column",
-    width: "100%"
-});
-
-const Container = styled("div")({
-    color: "--var(mdc-theme-primary)",
-    display: "flex",
-    flexDirection: "row",
-    width: "100%",
-    cursor: "pointer",
-    padding: 15,
-    boxSizing: "border-box",
-    borderBottom: "1px solid var(--mdc-theme-background)",
-    ":hover": {
-        backgroundColor: "var(--mdc-theme-background)"
-    },
-    "&:last-of-type": {
-        borderBottom: "none"
-    }
-});
-
-const Description = styled("p")({
-    fontSize: 12,
-    marginTop: 10,
-    lineHeight: "125%",
-    color: "#666"
-});
-
-const Icon = styled("div")({
-    width: "24px",
-    height: "24px",
-    marginRight: "15px",
-    flex: "0 0 24px",
-    svg: {
-        color: "var(--mdc-theme-text-icon-on-light)",
-        width: "100%",
-        height: "auto",
-        maxWidth: 24,
-        maxHeight: 24
-    }
-});
+import { DropdownMenu, Text, Icon } from "@webiny/admin-ui";
 
 interface IconProps {
     model: Pick<CmsModel, "icon">;
@@ -65,7 +12,14 @@ const DisplayIcon = ({ model }: IconProps) => {
     if (!model.icon) {
         return null;
     }
-    return <FontAwesomeIcon icon={(model.icon || "").split("/") as IconProp} />;
+    return (
+        <Icon
+            icon={<FontAwesomeIcon icon={(model.icon || "").split("/") as IconProp} />}
+            label={"Model icon"}
+            size={"lg"}
+            className={"wby-text-neutral-strong"}
+        />
+    );
 };
 
 interface OptionsModelListItemProps {
@@ -81,14 +35,17 @@ export const OptionsModelListItem = ({
         originalOnClick(model.modelId);
     }, [originalOnClick]);
     return (
-        <Container onClick={onClick}>
-            <Icon>
-                <DisplayIcon model={model} />
-            </Icon>
-            <Content>
-                <Title className={model.description && "hasDescription"}>{model.name}</Title>
-                {model.description && <Description>{model.description}</Description>}
-            </Content>
-        </Container>
+        <DropdownMenu.Item
+            onClick={onClick}
+            icon={<DisplayIcon model={model} />}
+            text={
+                <div>
+                    <Text as={"div"}>{model.name}</Text>
+                    <Text as={"div"} size={"sm"} className={"wby-text-neutral-strong"}>
+                        {model.description}
+                    </Text>
+                </div>
+            }
+        />
     );
 };
diff --git a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/components/NewReferencedEntryDialog.tsx b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/components/NewReferencedEntryDialog.tsx
index 113d99f4911..71f58d7bc47 100644
--- a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/components/NewReferencedEntryDialog.tsx
+++ b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/components/NewReferencedEntryDialog.tsx
@@ -1,79 +1,32 @@
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import { ContentEntryProvider } from "~/admin/views/contentEntries/ContentEntry/ContentEntryContext";
 import { FoldersProvider } from "@webiny/app-aco/contexts/folders";
-import { DialogActions, DialogCancel, DialogContent, DialogTitle } from "@webiny/ui/Dialog";
 import { ContentEntriesProvider } from "~/admin/views/contentEntries/ContentEntriesContext";
 import { i18n } from "@webiny/app/i18n";
 import { CmsContentEntry, CmsModel } from "~/types";
 import { useContentEntry } from "~/admin/views/contentEntries/hooks/useContentEntry";
 import { ModelProvider } from "~/admin/components/ModelProvider";
 import { ContentEntryForm } from "~/admin/components/ContentEntryForm/ContentEntryForm";
-import { ButtonPrimary } from "@webiny/ui/Button";
 import {
     GET_CONTENT_MODEL,
     GetCmsModelQueryResponse,
     GetCmsModelQueryVariables
 } from "~/admin/graphql/contentModels";
 import { useCms } from "~/admin/hooks";
-import { FullWidthDialog } from "./dialog/Dialog";
 import { NavigateFolderProvider as AbstractNavigateFolderProvider } from "@webiny/app-aco/contexts/navigateFolder";
 import { SearchRecordsProvider } from "@webiny/app-aco/contexts/records";
 import { FolderTree, useNavigateFolder } from "@webiny/app-aco";
-import styled from "@emotion/styled";
-import { Elevation } from "@webiny/ui/Elevation";
 import { SplitView, LeftPanel, RightPanel } from "@webiny/app-admin/components/SplitView";
-import { CircularProgress } from "@webiny/ui/Progress";
 import { usePersistEntry } from "~/admin/hooks/usePersistEntry";
 import {
     AcoAppContext,
     AcoAppProviderContext,
     createAppFromModel
 } from "@webiny/app-aco/contexts/app";
-import { DialogsProvider } from "@webiny/app-admin";
+import { Drawer, OverlayLoader } from "@webiny/admin-ui";
 
 const t = i18n.ns("app-headless-cms/admin/fields/ref");
 
-const RenderBlock = styled.div`
-    position: relative;
-    background-color: var(--mdc-theme-background);
-    padding: 25px;
-    overflow: scroll;
-`;
-
-const PaddedLeftPanel = styled(LeftPanel)`
-    padding: 10px 10px 0;
-`;
-
-const ModalRightPanel = styled(RightPanel)`
-    > div {
-        height: auto;
-    }
-
-    webiny-form-container > div {
-        height: auto;
-    }
-`;
-
-const ModalFullWidthDialog = styled(FullWidthDialog)`
-    .webiny-ui-dialog__content {
-        height: 100%;
-        > div {
-            max-height: inherit;
-            height: inherit;
-            .mdc-layout-grid__inner {
-                height: 100%;
-                max-height: inherit;
-                .webiny-split-view__left-panel,
-                .webiny-split-view__right-panel {
-                    height: inherit;
-                    max-height: inherit;
-                    overflow: scroll;
-                }
-            }
-        }
-    }
-`;
-
 interface SaveEntry {
     (): void;
 }
@@ -91,28 +44,28 @@ const EntryForm = ({ onCreate, setSaveEntry }: EntryFormProps) => {
     return (
         <ModelProvider model={contentModel}>
             <SplitView>
-                <PaddedLeftPanel span={3}>
-                    <FolderTree
-                        focusedFolderId={currentFolderId}
-                        onFolderClick={data => navigateToFolder(data.id)}
-                        enableActions={true}
-                        enableCreate={true}
-                    />
-                </PaddedLeftPanel>
-                <ModalRightPanel span={9}>
-                    <RenderBlock>
-                        <Elevation z={2}>
-                            {loading ? <CircularProgress label={"Creating entry..."} /> : null}
-                            <ContentEntryForm
-                                header={false}
-                                entry={{}}
-                                persistEntry={persistEntry}
-                                onAfterCreate={entry => onCreate(entry)}
-                                setSaveEntry={setSaveEntry}
-                            />
-                        </Elevation>
-                    </RenderBlock>
-                </ModalRightPanel>
+                <LeftPanel span={3}>
+                    <div className={"wby-px-sm-extra wby-py-sm"}>
+                        <FolderTree
+                            focusedFolderId={currentFolderId}
+                            onFolderClick={data => navigateToFolder(data.id)}
+                            enableActions={true}
+                            enableCreate={true}
+                        />
+                    </div>
+                </LeftPanel>
+                <RightPanel span={9}>
+                    <div className={"wby-p-md wby-relative"}>
+                        {loading ? <OverlayLoader text={"Creating entry..."} /> : null}
+                        <ContentEntryForm
+                            header={false}
+                            entry={{}}
+                            persistEntry={persistEntry}
+                            onAfterCreate={entry => onCreate(entry)}
+                            setSaveEntry={setSaveEntry}
+                        />
+                    </div>
+                </RightPanel>
             </SplitView>
         </ModelProvider>
     );
@@ -189,19 +142,17 @@ export const NewReferencedEntryDialog = ({
             <FoldersProvider>
                 <SearchRecordsProvider>
                     <NavigateFolderProvider modelId={model.modelId}>
-                        <DialogsProvider>
-                            <ContentEntriesProvider
-                                contentModel={model}
-                                key={model.modelId}
-                                insideDialog={true}
-                            >
-                                <ContentEntryProviderWithCurrentFolderId
-                                    model={model}
-                                    onClose={onClose}
-                                    onCreate={onCreate}
-                                />
-                            </ContentEntriesProvider>
-                        </DialogsProvider>
+                        <ContentEntriesProvider
+                            contentModel={model}
+                            key={model.modelId}
+                            insideDialog={true}
+                        >
+                            <ContentEntryProviderWithCurrentFolderId
+                                model={model}
+                                onClose={onClose}
+                                onCreate={onCreate}
+                            />
+                        </ContentEntriesProvider>
                     </NavigateFolderProvider>
                 </SearchRecordsProvider>
             </FoldersProvider>
@@ -259,21 +210,27 @@ const ContentEntryProviderWithCurrentFolderId = ({
             getContentId={() => null}
             currentFolderId={currentFolderId}
         >
-            <ModalFullWidthDialog open={true} onClose={onClose}>
-                <DialogTitle>{t`New {modelName} Entry`({ modelName: model.name })}</DialogTitle>
-                <DialogContent>
-                    <EntryForm
-                        onCreate={onCreate}
-                        setSaveEntry={cb => (saveEntryRef.current = cb)}
-                    />
-                </DialogContent>
-                <DialogActions>
-                    <DialogCancel>{t`Cancel`}</DialogCancel>
-                    <ButtonPrimary
-                        onClick={() => saveEntryRef.current && saveEntryRef.current()}
-                    >{t`Create Entry`}</ButtonPrimary>
-                </DialogActions>
-            </ModalFullWidthDialog>
+            <Drawer
+                open={true}
+                onClose={onClose}
+                width={1000}
+                modal={true}
+                headerSeparator={true}
+                footerSeparator={true}
+                bodyPadding={false}
+                title={t`New {modelName} Entry`({ modelName: model.name })}
+                actions={
+                    <>
+                        <Drawer.CancelButton />
+                        <Drawer.ConfirmButton
+                            onClick={() => saveEntryRef.current && saveEntryRef.current()}
+                            text={t`Create Entry`}
+                        />
+                    </>
+                }
+            >
+                <EntryForm onCreate={onCreate} setSaveEntry={cb => (saveEntryRef.current = cb)} />
+            </Drawer>
         </ContentEntryProvider>
     );
 };
diff --git a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/components/dialog/DialogHeader.tsx b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/components/dialog/DialogHeader.tsx
deleted file mode 100644
index dbd5991d962..00000000000
--- a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/components/dialog/DialogHeader.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-import styled from "@emotion/styled";
-import React from "react";
-import { CmsModel } from "~/types";
-import { ReactComponent as CloseIcon } from "./assets/close.svg";
-
-const Container = styled("div")({
-    width: "100%",
-    boxSizing: "border-box",
-    padding: "20px",
-    display: "flex",
-    flexDirection: "row",
-    backgroundColor: "var(--mdc-theme-secondary)",
-    color: "#FFF"
-});
-
-const Content = styled("div")({
-    display: "flex",
-    flex: "1",
-    flexDirection: "column"
-});
-
-const Title = styled("h2")({
-    display: "block",
-    fontSize: "24px",
-    lineHeight: "34px"
-});
-
-const Model = styled("h3")({
-    display: "block",
-    fontSize: "14px",
-    fontWeight: "normal",
-    " > strong": {
-        fontWeight: "bold"
-    }
-});
-
-const CloseContainer = styled("div")({
-    width: "20px",
-    height: "20px",
-    paddingTop: "5px"
-});
-
-const CloseButton = styled("button")({
-    background: "transparent",
-    border: "0 none",
-    outline: "none",
-    cursor: "pointer",
-    display: "block",
-    width: "100%",
-    height: "100%",
-    padding: "0",
-    margin: "0",
-    " > svg": {
-        display: "block",
-        width: "100%",
-        height: "100%"
-    }
-});
-
-interface CloseProps {
-    onClick: () => void;
-}
-
-const Close = ({ onClick }: CloseProps) => {
-    return (
-        <CloseContainer>
-            <CloseButton onClick={onClick}>
-                <CloseIcon />
-            </CloseButton>
-        </CloseContainer>
-    );
-};
-
-interface DialogHeaderProps {
-    model: CmsModel;
-    onClose: () => void;
-}
-
-export const DialogHeader = ({ model, onClose }: DialogHeaderProps) => {
-    return (
-        <Container>
-            <Content>
-                <Title>Select an existing record</Title>
-                <Model>
-                    Content model: <strong>{model.name}</strong>
-                </Model>
-            </Content>
-            <Close onClick={onClose} />
-        </Container>
-    );
-};
diff --git a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/components/dialog/assets/close.svg b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/components/dialog/assets/close.svg
deleted file mode 100644
index 214ccd18ae6..00000000000
--- a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/components/dialog/assets/close.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M14 1.41L12.59 0L7 5.59L1.41 0L0 1.41L5.59 7L0 12.59L1.41 14L7 8.41L12.59 14L14 12.59L8.41 7L14 1.41Z" fill="#fff"/>
-</svg>
diff --git a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/components/renderItem.tsx b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/components/renderItem.tsx
index 04f02e67a47..651f74d99c7 100644
--- a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/components/renderItem.tsx
+++ b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/components/renderItem.tsx
@@ -6,7 +6,7 @@ import { Link } from "@webiny/react-router";
 import { OptionItem } from "./types";
 import { EntryStatus } from "./EntryStatus";
 import { IconButton } from "@webiny/ui/Button";
-import { css } from "emotion";
+import { css } from "@emotion/css";
 
 const ModelId = styled("span")({
     color: "var(--mdc-theme-text-secondary-on-background) !important"
diff --git a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/simple/components/Loader.tsx b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/simple/components/Loader.tsx
new file mode 100644
index 00000000000..f79814174b3
--- /dev/null
+++ b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/simple/components/Loader.tsx
@@ -0,0 +1,10 @@
+import React from "react";
+import { OverlayLoader } from "@webiny/admin-ui";
+
+export const Loader = () => {
+    return (
+        <div style={{ height: "180px" }} className={"wby-relative"}>
+            <OverlayLoader size={"md"} text={"Loading entries..."} />
+        </div>
+    );
+};
diff --git a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/simple/components/SimpleItems.tsx b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/simple/components/SimpleItems.tsx
deleted file mode 100644
index cd84fa3bab6..00000000000
--- a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/simple/components/SimpleItems.tsx
+++ /dev/null
@@ -1,99 +0,0 @@
-import React, { useCallback } from "react";
-import { Checkbox } from "@webiny/ui/Checkbox";
-import {
-    CmsReferenceContentEntry,
-    CmsReferenceValue
-} from "~/admin/plugins/fieldRenderers/ref/components/types";
-import { parseIdentifier } from "@webiny/utils";
-import styled from "@emotion/styled";
-import { CmsModelField } from "~/types";
-import { Radio } from "@webiny/ui/Radio";
-
-const Title = styled("h5")({
-    display: "block"
-});
-const ListItem = styled("div")({
-    display: "block"
-});
-
-export interface AddItemParams {
-    id: string;
-    modelId: string;
-}
-
-export interface RemoveItemParams {
-    entryId: string;
-    modelId: string;
-}
-
-interface ItemProps {
-    multiple?: boolean;
-    value?: string | null;
-    item: CmsReferenceContentEntry;
-    onChange: (checked?: boolean) => void;
-}
-
-const Item = (props: ItemProps) => {
-    const { multiple, value, item, onChange } = props;
-    if (!multiple) {
-        return <Radio value={value} onChange={onChange} label={item.title} />;
-    }
-    return <Checkbox value={value} onChange={onChange} label={item.title} />;
-};
-
-interface SimpleItemsProps {
-    multiple?: boolean;
-    field: CmsModelField;
-    items?: CmsReferenceContentEntry[];
-    values?: CmsReferenceValue[];
-    addItem: (params: AddItemParams) => void;
-    removeItem: (params: RemoveItemParams) => void;
-}
-
-export const SimpleItems = (props: SimpleItemsProps) => {
-    const { field, items, values, addItem, removeItem, multiple } = props;
-
-    const onChange = useCallback(
-        (item: CmsReferenceContentEntry) => {
-            return (checked?: boolean) => {
-                if (checked) {
-                    addItem({
-                        id: item.id,
-                        modelId: item.model.modelId
-                    });
-                    return;
-                }
-                removeItem({
-                    entryId: item.entryId,
-                    modelId: item.model.modelId
-                });
-            };
-        },
-        [addItem, removeItem, multiple, values]
-    );
-
-    if (!items || items.length === 0) {
-        return null;
-    }
-    return (
-        <>
-            <Title>{field.label}</Title>
-            {items.map(item => {
-                const checked = (values || []).some(value => {
-                    const { id: entryId } = parseIdentifier(value.id);
-                    return entryId === item.entryId;
-                });
-                return (
-                    <ListItem key={`item-${item.entryId}`}>
-                        <Item
-                            multiple={multiple}
-                            value={checked ? item.entryId : null}
-                            item={item}
-                            onChange={onChange(item)}
-                        />
-                    </ListItem>
-                );
-            })}
-        </>
-    );
-};
diff --git a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/simple/components/SimpleMultipleRenderer.tsx b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/simple/components/SimpleMultipleRenderer.tsx
index fa77c9ef2c3..0f93b14d8b7 100644
--- a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/simple/components/SimpleMultipleRenderer.tsx
+++ b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/simple/components/SimpleMultipleRenderer.tsx
@@ -1,9 +1,10 @@
-import React, { useCallback, useMemo } from "react";
+import React, { useMemo } from "react";
 import { BindComponentRenderProp, CmsModelField } from "~/types";
 import { CmsReferenceValue } from "~/admin/plugins/fieldRenderers/ref/components/types";
 import { useContentModels } from "./useContentModels";
 import { useReferences } from "./useReferences";
-import { AddItemParams, RemoveItemParams, SimpleItems } from "./SimpleItems";
+import { CheckboxGroup } from "@webiny/admin-ui";
+import { Loader } from "./Loader";
 
 interface SimpleMultipleRendererProps {
     bind: BindComponentRenderProp<CmsReferenceValue[] | undefined | null>;
@@ -14,7 +15,7 @@ export const SimpleMultipleRenderer = (props: SimpleMultipleRendererProps) => {
     const { field, bind } = props;
 
     const values = useMemo(() => {
-        return Array.isArray(bind.value) ? bind.value : [];
+        return Array.isArray(bind.value) ? bind.value.map(item => item.id) : [];
     }, [bind.value]);
 
     const { models } = useContentModels({
@@ -25,34 +26,41 @@ export const SimpleMultipleRenderer = (props: SimpleMultipleRendererProps) => {
         models
     });
 
-    const addItem = useCallback(
-        (params: AddItemParams) => {
-            bind.onChange([...values, params]);
-        },
-        [bind, values]
-    );
-    const removeItem = useCallback(
-        ({ entryId }: RemoveItemParams) => {
-            bind.onChange(
-                values.filter(value => {
-                    if (!value?.id) {
-                        return false;
-                    }
-                    return value.id.substring(0, entryId.length) !== entryId;
-                })
-            );
-        },
-        [bind, values]
-    );
+    const items = useMemo(() => {
+        if (!references.entries) {
+            return [];
+        }
+
+        return references.entries.map(entry => ({
+            label: entry.title,
+            value: entry.id
+        }));
+    }, [references]);
+
+    if (references.loading) {
+        return <Loader />;
+    }
 
     return (
-        <SimpleItems
-            multiple={true}
-            field={field}
-            values={values}
-            items={references.entries}
-            addItem={addItem}
-            removeItem={removeItem}
+        <CheckboxGroup
+            {...bind}
+            label={field.label}
+            description={field.helpText}
+            value={values}
+            items={items}
+            onChange={(values: string[]) => {
+                const selectedEntryIds = values.map(value => value.split("#")[0]);
+                const selectedItems = references.entries.filter(entry =>
+                    selectedEntryIds.includes(entry.entryId)
+                );
+
+                bind.onChange(
+                    selectedItems.map(({ id, model }) => ({
+                        id,
+                        modelId: model.modelId
+                    }))
+                );
+            }}
         />
     );
 };
diff --git a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/simple/components/SimpleSingleRenderer.tsx b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/simple/components/SimpleSingleRenderer.tsx
index 7ed019616b9..ae6c3966117 100644
--- a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/simple/components/SimpleSingleRenderer.tsx
+++ b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/simple/components/SimpleSingleRenderer.tsx
@@ -1,21 +1,21 @@
-import React, { useCallback, useMemo } from "react";
+import React, { useMemo } from "react";
 import { BindComponentRenderProp, CmsModelField } from "~/types";
 import { CmsReferenceValue } from "~/admin/plugins/fieldRenderers/ref/components/types";
 import { useContentModels } from "./useContentModels";
 import { useReferences } from "./useReferences";
-import { AddItemParams, SimpleItems } from "./SimpleItems";
+import { Loader } from "~/admin/plugins/fieldRenderers/ref/simple/components/Loader";
+import { RadioGroup } from "@webiny/admin-ui";
 
 interface SimpleSingleRendererProps {
     bind: BindComponentRenderProp<CmsReferenceValue | undefined | null>;
     field: CmsModelField;
-    loadingElement?: JSX.Element;
 }
 
 export const SimpleSingleRenderer = (props: SimpleSingleRendererProps) => {
     const { field, bind } = props;
 
     const value = useMemo(() => {
-        return bind.value;
+        return bind.value?.id;
     }, [bind.value]);
 
     const { models } = useContentModels({
@@ -26,27 +26,42 @@ export const SimpleSingleRenderer = (props: SimpleSingleRendererProps) => {
         models
     });
 
-    const addItem = useCallback(
-        (params: AddItemParams) => {
-            bind.onChange(params);
-        },
-        [bind, value]
-    );
-    const removeItem = useCallback(() => {
-        bind.onChange(null);
-    }, [bind, value]);
+    const items = useMemo(() => {
+        if (!references.entries) {
+            return [];
+        }
+
+        return references.entries.map(entry => ({
+            label: entry.title,
+            value: entry.id
+        }));
+    }, [references]);
 
-    if (references.loading && props.loadingElement) {
-        return props.loadingElement;
+    if (references.loading) {
+        return <Loader />;
     }
 
     return (
-        <SimpleItems
-            field={field}
-            values={value ? [value] : []}
-            items={references.entries}
-            addItem={addItem}
-            removeItem={removeItem}
+        <RadioGroup
+            {...bind}
+            label={field.label}
+            description={field.helpText}
+            value={value}
+            items={items}
+            onChange={(value: string) => {
+                const selectedItem = references.entries.find(
+                    entry => entry.entryId === value.split("#")[0]
+                );
+
+                if (!selectedItem) {
+                    return;
+                }
+
+                bind.onChange({
+                    id: selectedItem.id,
+                    modelId: selectedItem.model.modelId
+                });
+            }}
         />
     );
 };
diff --git a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/richText/richTextInputs.tsx b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/richText/richTextInputs.tsx
index 84841e00896..46541c1f777 100644
--- a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/richText/richTextInputs.tsx
+++ b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/richText/richTextInputs.tsx
@@ -2,7 +2,7 @@ import React, { useMemo } from "react";
 import get from "lodash/get";
 import { i18n } from "@webiny/app/i18n";
 import { CmsModelField, CmsModelFieldRendererPlugin } from "~/types";
-import { ReactComponent as DeleteIcon } from "@material-design-icons/svg/outlined/delete_outline.svg";
+import { ReactComponent as DeleteIcon } from "@webiny/icons/delete_outline.svg";
 import DynamicSection from "../DynamicSection";
 import { createPropsFromConfig, RichTextEditor } from "@webiny/app-admin/components/RichTextEditor";
 import { IconButton } from "@webiny/ui/Button";
diff --git a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/select.tsx b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/select.tsx
index 38e63b87c95..195f358fda8 100644
--- a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/select.tsx
+++ b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/select.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import get from "lodash/get";
 import { i18n } from "@webiny/app/i18n";
 import { CmsModelFieldRendererPlugin } from "~/types";
-import { Select } from "@webiny/ui/Select";
+import { Select } from "@webiny/admin-ui";
 
 const t = i18n.ns("app-headless-cms/admin/fields/text");
 
@@ -24,7 +24,7 @@ const plugin: CmsModelFieldRendererPlugin = {
 
             return (
                 <Bind defaultValue={defaultOption ? defaultOption.value : undefined}>
-                    {bind => (
+                    {({ value, onChange, ...bind }) => (
                         <Bind.ValidationContainer>
                             <Select
                                 {...bind}
@@ -33,6 +33,14 @@ const plugin: CmsModelFieldRendererPlugin = {
                                 options={options}
                                 placeholder={field.placeholderText}
                                 data-testid={`fr.input.select.${field.label}`}
+                                value={String(value)}
+                                onChange={value => {
+                                    if (field.type === "number") {
+                                        onChange(Number(value));
+                                    } else {
+                                        onChange(String(value));
+                                    }
+                                }}
                             />
                         </Bind.ValidationContainer>
                     )}
diff --git a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/text/textInput.tsx b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/text/textInput.tsx
index d9a301460f2..cf9dc963791 100644
--- a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/text/textInput.tsx
+++ b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/text/textInput.tsx
@@ -1,9 +1,9 @@
 import React from "react";
 import get from "lodash/get";
 import { i18n } from "@webiny/app/i18n";
-import { Input } from "@webiny/ui/Input";
 import { DelayedOnChange } from "@webiny/ui/DelayedOnChange";
 import { CmsModelFieldRendererPlugin } from "~/types";
+import { Input } from "@webiny/admin-ui";
 
 const t = i18n.ns("app-headless-cms/admin/fields/text");
 
diff --git a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/text/textInputs.tsx b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/text/textInputs.tsx
index 884bc4a9874..c7cce62d145 100644
--- a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/text/textInputs.tsx
+++ b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/text/textInputs.tsx
@@ -1,12 +1,11 @@
 import React from "react";
 import get from "lodash/get";
 import { i18n } from "@webiny/app/i18n";
-import { Input } from "@webiny/ui/Input";
-import { DelayedOnChange } from "@webiny/ui/DelayedOnChange";
 import { CmsModelFieldRendererPlugin } from "~/types";
-import { ReactComponent as DeleteIcon } from "@material-design-icons/svg/outlined/delete_outline.svg";
+import { ReactComponent as DeleteIcon } from "@webiny/icons/delete.svg";
 import DynamicSection from "../DynamicSection";
 import { MultiValueRendererSettings } from "~/admin/plugins/fieldRenderers/MultiValueRendererSettings";
+import { DelayedOnChange, Icon, Input } from "@webiny/admin-ui";
 
 const t = i18n.ns("app-headless-cms/admin/fields/text");
 
@@ -39,10 +38,14 @@ const plugin: CmsModelFieldRendererPlugin = {
                                 label={t`Value {number}`({ number: index + 1 })}
                                 placeholder={props.field.placeholderText}
                                 data-testid={`fr.input.texts.${props.field.label}.${index + 1}`}
-                                trailingIcon={{
-                                    icon: <DeleteIcon />,
-                                    onClick: () => bind.field.removeValue(index)
-                                }}
+                                endIcon={
+                                    <Icon
+                                        icon={<DeleteIcon />}
+                                        label={"Delete"}
+                                        onClick={() => bind.field.removeValue(index)}
+                                        className={"wby-cursor-pointer"}
+                                    />
+                                }
                             />
                         </DelayedOnChange>
                     )}
diff --git a/packages/app-headless-cms/src/admin/plugins/fieldValidators/dateGte.tsx b/packages/app-headless-cms/src/admin/plugins/fieldValidators/dateGte.tsx
index 306c458fc5c..8bdba661afa 100644
--- a/packages/app-headless-cms/src/admin/plugins/fieldValidators/dateGte.tsx
+++ b/packages/app-headless-cms/src/admin/plugins/fieldValidators/dateGte.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Grid, Cell } from "@webiny/ui/Grid";
+import { Cell } from "@webiny/ui/Grid";
 import { validation } from "@webiny/validation";
 import { CmsModelFieldValidatorPlugin } from "~/types";
 import { createInputField } from "./date/createDateInputField";
@@ -13,30 +13,28 @@ function DateGteSettings() {
     const type = field.settings ? field.settings.type : undefined;
     const availableValidators = getAvailableValidators(type).join(",");
     return (
-        <Grid>
-            <Cell span={12}>
-                <Bind name={"settings.type"}>
-                    {bind => {
-                        if (bind.value !== type) {
-                            bind.onChange(type);
-                        }
-                        return <></>;
-                    }}
-                </Bind>
-                <Bind name={"settings.value"} validators={validation.create(availableValidators)}>
-                    {bind => {
-                        return (
-                            <>
-                                {createInputField(field, bind)}
-                                <FormElementMessage>
-                                    This is the earliest date/time that will be allowed.
-                                </FormElementMessage>
-                            </>
-                        );
-                    }}
-                </Bind>
-            </Cell>
-        </Grid>
+        <Cell span={12}>
+            <Bind name={"settings.type"}>
+                {bind => {
+                    if (bind.value !== type) {
+                        bind.onChange(type);
+                    }
+                    return <></>;
+                }}
+            </Bind>
+            <Bind name={"settings.value"} validators={validation.create(availableValidators)}>
+                {bind => {
+                    return (
+                        <>
+                            {createInputField(field, bind)}
+                            <FormElementMessage>
+                                This is the earliest date/time that will be allowed.
+                            </FormElementMessage>
+                        </>
+                    );
+                }}
+            </Bind>
+        </Cell>
     );
 }
 
diff --git a/packages/app-headless-cms/src/admin/plugins/fieldValidators/dateLte.tsx b/packages/app-headless-cms/src/admin/plugins/fieldValidators/dateLte.tsx
index 1bd7f44bb89..f4971b17ce2 100644
--- a/packages/app-headless-cms/src/admin/plugins/fieldValidators/dateLte.tsx
+++ b/packages/app-headless-cms/src/admin/plugins/fieldValidators/dateLte.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Grid, Cell } from "@webiny/ui/Grid";
+import { Cell } from "@webiny/ui/Grid";
 import { validation } from "@webiny/validation";
 import { CmsModelFieldValidatorPlugin } from "~/types";
 import { createInputField } from "./date/createDateInputField";
@@ -13,30 +13,28 @@ function DateLteSettings() {
     const type = field.settings ? field.settings.type : undefined;
     const availableValidators = getAvailableValidators(type).join(",");
     return (
-        <Grid>
-            <Cell span={12}>
-                <Bind name={"settings.type"}>
-                    {bind => {
-                        if (bind.value !== type) {
-                            bind.onChange(type);
-                        }
-                        return <></>;
-                    }}
-                </Bind>
-                <Bind name={"settings.value"} validators={validation.create(availableValidators)}>
-                    {bind => {
-                        return (
-                            <>
-                                {createInputField(field, bind)}
-                                <FormElementMessage>
-                                    This is the latest date/time that will be allowed.
-                                </FormElementMessage>
-                            </>
-                        );
-                    }}
-                </Bind>
-            </Cell>
-        </Grid>
+        <Cell span={12}>
+            <Bind name={"settings.type"}>
+                {bind => {
+                    if (bind.value !== type) {
+                        bind.onChange(type);
+                    }
+                    return <></>;
+                }}
+            </Bind>
+            <Bind name={"settings.value"} validators={validation.create(availableValidators)}>
+                {bind => {
+                    return (
+                        <>
+                            {createInputField(field, bind)}
+                            <FormElementMessage>
+                                This is the latest date/time that will be allowed.
+                            </FormElementMessage>
+                        </>
+                    );
+                }}
+            </Bind>
+        </Cell>
     );
 }
 
diff --git a/packages/app-headless-cms/src/admin/plugins/fieldValidators/dynamicZone.tsx b/packages/app-headless-cms/src/admin/plugins/fieldValidators/dynamicZone.tsx
index 38af35643ba..d32e2a5b5d3 100644
--- a/packages/app-headless-cms/src/admin/plugins/fieldValidators/dynamicZone.tsx
+++ b/packages/app-headless-cms/src/admin/plugins/fieldValidators/dynamicZone.tsx
@@ -7,7 +7,7 @@ import {
     CmsModelFieldValidatorConfig,
     CmsModelFieldValidatorPlugin
 } from "~/types";
-import { ValidatorsList } from "~/admin/components/FieldEditor/EditFieldDialog/ValidatorsList";
+import { ValidatorsList } from "~/admin/components/FieldEditor/EditFieldDialog/ValidationTab/ValidatorsList";
 import { createValidators } from "~/utils/createValidators";
 import { CmsModelFieldValidatorConfigAdapter } from "~/utils/CmsModelFieldValidatorConfigAdapter";
 import { useModelField } from "~/admin/components/ModelFieldProvider";
diff --git a/packages/app-headless-cms/src/admin/plugins/fieldValidators/gte.tsx b/packages/app-headless-cms/src/admin/plugins/fieldValidators/gte.tsx
index 507bf90e421..c9f7a170878 100644
--- a/packages/app-headless-cms/src/admin/plugins/fieldValidators/gte.tsx
+++ b/packages/app-headless-cms/src/admin/plugins/fieldValidators/gte.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Grid, Cell } from "@webiny/ui/Grid";
+import { Cell } from "@webiny/ui/Grid";
 import { Input } from "@webiny/ui/Input";
 import { validation } from "@webiny/validation";
 import { CmsModelFieldValidatorPlugin } from "~/types";
@@ -15,20 +15,18 @@ const plugin: CmsModelFieldValidatorPlugin = {
         defaultMessage: "Value is too small.",
         renderSettings() {
             return (
-                <Grid>
-                    <Cell span={12}>
-                        <Bind
-                            name={"settings.value"}
-                            validators={validation.create("required,numeric")}
-                        >
-                            <Input
-                                type={"number"}
-                                label={"Value"}
-                                description={"This is the greatest value that will be allowed"}
-                            />
-                        </Bind>
-                    </Cell>
-                </Grid>
+                <Cell span={12}>
+                    <Bind
+                        name={"settings.value"}
+                        validators={validation.create("required,numeric")}
+                    >
+                        <Input
+                            type={"number"}
+                            label={"Value"}
+                            description={"This is the greatest value that will be allowed"}
+                        />
+                    </Bind>
+                </Cell>
             );
         },
         validate: async (value, { validator }) => {
diff --git a/packages/app-headless-cms/src/admin/plugins/fieldValidators/in.tsx b/packages/app-headless-cms/src/admin/plugins/fieldValidators/in.tsx
index 14f9609c36d..cd1e2128736 100644
--- a/packages/app-headless-cms/src/admin/plugins/fieldValidators/in.tsx
+++ b/packages/app-headless-cms/src/admin/plugins/fieldValidators/in.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Grid, Cell } from "@webiny/ui/Grid";
+import { Cell } from "@webiny/ui/Grid";
 import { Tags } from "@webiny/ui/Tags";
 import { validation } from "@webiny/validation";
 import { CmsModelFieldValidatorPlugin } from "~/types";
@@ -16,16 +16,11 @@ const plugin: CmsModelFieldValidatorPlugin = {
         defaultMessage: "Value is not allowed.",
         renderSettings() {
             return (
-                <Grid>
-                    <Cell span={12}>
-                        <Bind name={"settings.values"} validators={validation.create("required")}>
-                            <Tags
-                                label={"Allowed values"}
-                                description={"Hit ENTER to add values"}
-                            />
-                        </Bind>
-                    </Cell>
-                </Grid>
+                <Cell span={12}>
+                    <Bind name={"settings.values"} validators={validation.create("required")}>
+                        <Tags label={"Allowed values"} description={"Hit ENTER to add values"} />
+                    </Bind>
+                </Cell>
             );
         },
         validate: async (value, { validator }) => {
diff --git a/packages/app-headless-cms/src/admin/plugins/fieldValidators/lte.tsx b/packages/app-headless-cms/src/admin/plugins/fieldValidators/lte.tsx
index f74e11cacd5..b9e7b8407b3 100644
--- a/packages/app-headless-cms/src/admin/plugins/fieldValidators/lte.tsx
+++ b/packages/app-headless-cms/src/admin/plugins/fieldValidators/lte.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Grid, Cell } from "@webiny/ui/Grid";
+import { Cell } from "@webiny/ui/Grid";
 import { Input } from "@webiny/ui/Input";
 import { validation } from "@webiny/validation";
 import { CmsModelFieldValidatorPlugin } from "~/types";
@@ -15,20 +15,18 @@ const plugin: CmsModelFieldValidatorPlugin = {
         defaultMessage: "Value is too great.",
         renderSettings() {
             return (
-                <Grid>
-                    <Cell span={12}>
-                        <Bind
-                            name={"settings.value"}
-                            validators={validation.create("required,numeric")}
-                        >
-                            <Input
-                                type={"number"}
-                                label={"Value"}
-                                description={"This is the greatest value that will be allowed"}
-                            />
-                        </Bind>
-                    </Cell>
-                </Grid>
+                <Cell span={12}>
+                    <Bind
+                        name={"settings.value"}
+                        validators={validation.create("required,numeric")}
+                    >
+                        <Input
+                            type={"number"}
+                            label={"Value"}
+                            description={"This is the greatest value that will be allowed"}
+                        />
+                    </Bind>
+                </Cell>
             );
         },
         validate: async (value, { validator }) => {
diff --git a/packages/app-headless-cms/src/admin/plugins/fieldValidators/maxLength.tsx b/packages/app-headless-cms/src/admin/plugins/fieldValidators/maxLength.tsx
index f1e3a578f7e..c5b53966d2f 100644
--- a/packages/app-headless-cms/src/admin/plugins/fieldValidators/maxLength.tsx
+++ b/packages/app-headless-cms/src/admin/plugins/fieldValidators/maxLength.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Grid, Cell } from "@webiny/ui/Grid";
+import { Cell } from "@webiny/ui/Grid";
 import { Input } from "@webiny/ui/Input";
 import { validation } from "@webiny/validation";
 import { CmsModelFieldValidatorPlugin } from "~/types";
@@ -19,20 +19,18 @@ const plugin: CmsModelFieldValidatorPlugin = {
         },
         renderSettings(config) {
             return (
-                <Grid>
-                    <Cell span={12}>
-                        <Bind
-                            name={"settings.value"}
-                            validators={validation.create("required,numeric")}
-                        >
-                            <Input
-                                type={"number"}
-                                label={"Value"}
-                                description={config.getVariableDescription("value")}
-                            />
-                        </Bind>
-                    </Cell>
-                </Grid>
+                <Cell span={12}>
+                    <Bind
+                        name={"settings.value"}
+                        validators={validation.create("required,numeric")}
+                    >
+                        <Input
+                            type={"number"}
+                            label={"Value"}
+                            description={config.getVariableDescription("value")}
+                        />
+                    </Bind>
+                </Cell>
             );
         },
         validate: async (value, { validator }) => {
diff --git a/packages/app-headless-cms/src/admin/plugins/fieldValidators/minLength.tsx b/packages/app-headless-cms/src/admin/plugins/fieldValidators/minLength.tsx
index 6e8c43257e3..160ff3b06dc 100644
--- a/packages/app-headless-cms/src/admin/plugins/fieldValidators/minLength.tsx
+++ b/packages/app-headless-cms/src/admin/plugins/fieldValidators/minLength.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Grid, Cell } from "@webiny/ui/Grid";
+import { Cell } from "@webiny/ui/Grid";
 import { Input } from "@webiny/ui/Input";
 import { validation } from "@webiny/validation";
 import { Bind } from "@webiny/form";
@@ -19,20 +19,18 @@ const plugin: CmsModelFieldValidatorPlugin = {
         },
         renderSettings(config) {
             return (
-                <Grid>
-                    <Cell span={12}>
-                        <Bind
-                            name={"settings.value"}
-                            validators={validation.create("required,numeric")}
-                        >
-                            <Input
-                                type={"number"}
-                                label={"Value"}
-                                description={config.getVariableDescription("value")}
-                            />
-                        </Bind>
-                    </Cell>
-                </Grid>
+                <Cell span={12}>
+                    <Bind
+                        name={"settings.value"}
+                        validators={validation.create("required,numeric")}
+                    >
+                        <Input
+                            type={"number"}
+                            label={"Value"}
+                            description={config.getVariableDescription("value")}
+                        />
+                    </Bind>
+                </Cell>
             );
         },
         validate: async (value, { validator }) => {
diff --git a/packages/app-headless-cms/src/admin/plugins/fieldValidators/pattern.tsx b/packages/app-headless-cms/src/admin/plugins/fieldValidators/pattern.tsx
index 5cefcddc4af..dda9e9b0319 100644
--- a/packages/app-headless-cms/src/admin/plugins/fieldValidators/pattern.tsx
+++ b/packages/app-headless-cms/src/admin/plugins/fieldValidators/pattern.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Grid, Cell } from "@webiny/ui/Grid";
+import { Cell } from "@webiny/ui/Grid";
 import { Input } from "@webiny/ui/Input";
 import { Select } from "@webiny/ui/Select";
 import { plugins } from "@webiny/plugins";
@@ -25,7 +25,7 @@ const PatternSettings = () => {
     ));
 
     return (
-        <Grid>
+        <>
             <Cell span={3}>
                 <Bind
                     name={"settings.preset"}
@@ -70,7 +70,7 @@ const PatternSettings = () => {
                     <Input disabled={inputsDisabled} label={"Flags"} description={"Regex flags"} />
                 </Bind>
             </Cell>
-        </Grid>
+        </>
     );
 };
 
diff --git a/packages/app-headless-cms/src/admin/plugins/fields/PredefinedValuesDynamicFieldset.tsx b/packages/app-headless-cms/src/admin/plugins/fields/PredefinedValuesDynamicFieldset.tsx
index 9c94f3a4c48..bc6a89b869e 100644
--- a/packages/app-headless-cms/src/admin/plugins/fields/PredefinedValuesDynamicFieldset.tsx
+++ b/packages/app-headless-cms/src/admin/plugins/fields/PredefinedValuesDynamicFieldset.tsx
@@ -1,49 +1,26 @@
 import React from "react";
-import styled from "@emotion/styled";
-import { css } from "emotion";
-import { Grid, Cell, GridInner } from "@webiny/ui/Grid";
+import { ReactComponent as AddIcon } from "@webiny/icons/add.svg";
+import { ReactComponent as RemoveIcon } from "@webiny/icons/remove.svg";
 import { i18n } from "@webiny/app/i18n";
-import { DynamicFieldset } from "@webiny/ui/DynamicFieldset";
-import { Typography } from "@webiny/ui/Typography";
-import { ButtonPrimary, ButtonSecondary } from "@webiny/ui/Button";
-import { Input } from "@webiny/ui/Input";
-import { Switch } from "@webiny/ui/Switch";
 import { BindComponent, CmsModelField } from "~/types";
 import { BindComponentRenderProp, FormAPI, useForm } from "@webiny/form";
 import { useModelField } from "~/admin/hooks";
+import {
+    Button,
+    DynamicFieldset,
+    Grid,
+    Icon,
+    IconButton,
+    Input,
+    Switch,
+    Text
+} from "@webiny/admin-ui";
 
 const t = i18n.ns("app-headless-cms/admin/fields/dynamic-fieldset-predefined-values");
 
-const Fieldset = styled("div")({
-    position: "relative",
-    width: "100%",
-    marginBottom: 15,
-    ".webiny-ui-button": {
-        position: "absolute",
-        display: "block",
-        right: 10,
-        top: 13
-    }
-});
-
-const controlButtons = css({
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    ">button": {
-        marginRight: 15
-    }
-});
-
-const emptyStyles = css({
-    textAlign: "center"
-});
-
-const Header = styled("div")({
-    display: "flex",
-    justifyContent: "space-between",
-    marginBottom: 15
-});
+const Header = (props: React.HTMLProps<HTMLDivElement>) => {
+    return <div className={"wby-flex wby-justify-between wby-mb-md"} {...props} />;
+};
 
 interface PredefinedValue {
     selected?: boolean;
@@ -85,7 +62,7 @@ const PredefinedValuesDynamicFieldset = ({
 
     return (
         <Grid>
-            <Cell span={12}>
+            <Grid.Column span={12}>
                 <Bind>
                     {bind => {
                         return (
@@ -97,36 +74,38 @@ const PredefinedValuesDynamicFieldset = ({
                                                 const Bind = getBind(index);
 
                                                 return (
-                                                    <React.Fragment>
-                                                        <GridInner>
-                                                            <Cell span={4}>
-                                                                <Fieldset>
-                                                                    <Bind name={"label"}>
-                                                                        <Input label={t`Label`} />
+                                                    <div className={"wby-mb-md"}>
+                                                        <Grid>
+                                                            <Grid.Column span={4}>
+                                                                <Bind name={"label"}>
+                                                                    <Input
+                                                                        label={t`Label`}
+                                                                        size={"lg"}
+                                                                    />
+                                                                </Bind>
+                                                            </Grid.Column>
+                                                            <Grid.Column span={4}>
+                                                                {renderValueInput ? (
+                                                                    renderValueInput(Bind)
+                                                                ) : (
+                                                                    <Bind name={"value"}>
+                                                                        <Input
+                                                                            label={t`Value`}
+                                                                            size={"lg"}
+                                                                        />
                                                                     </Bind>
-                                                                </Fieldset>
-                                                            </Cell>
-                                                            <Cell span={4}>
-                                                                <Fieldset>
-                                                                    {renderValueInput ? (
-                                                                        renderValueInput(Bind)
-                                                                    ) : (
-                                                                        <Bind name={"value"}>
-                                                                            <Input
-                                                                                label={t`Value`}
-                                                                            />
-                                                                        </Bind>
-                                                                    )}
-                                                                </Fieldset>
-                                                            </Cell>
-                                                            <Cell span={2}>
-                                                                <Fieldset>
+                                                                )}
+                                                            </Grid.Column>
+                                                            <Grid.Column span={2}>
+                                                                <div
+                                                                    className={
+                                                                        "wby-flex wby-flex-col wby-justify-end wby-h-full wby-py-sm-plus"
+                                                                    }
+                                                                >
                                                                     <Bind name={"selected"}>
                                                                         <Switch
-                                                                            label={"Selected"}
-                                                                            description={
-                                                                                "Mark as selected value"
-                                                                            }
+                                                                            label={t`Selected`}
+                                                                            description={t`Mark as selected value.`}
                                                                             onChange={value => {
                                                                                 onSelectedChange({
                                                                                     form,
@@ -138,59 +117,71 @@ const PredefinedValuesDynamicFieldset = ({
                                                                             }}
                                                                         />
                                                                     </Bind>
-                                                                </Fieldset>
-                                                            </Cell>
+                                                                </div>
+                                                            </Grid.Column>
 
-                                                            <Cell
-                                                                span={2}
-                                                                className={controlButtons}
-                                                            >
-                                                                <ButtonPrimary
-                                                                    small
-                                                                    onClick={actions.add(index)}
-                                                                >
-                                                                    +
-                                                                </ButtonPrimary>
-                                                                <ButtonSecondary
-                                                                    small
-                                                                    onClick={actions.remove(index)}
+                                                            <Grid.Column span={2}>
+                                                                <div
+                                                                    className={
+                                                                        "wby-flex wby-justify-end wby-items-end wby-gap-sm wby-h-full wby-py-sm-plus"
+                                                                    }
                                                                 >
-                                                                    -
-                                                                </ButtonSecondary>
-                                                            </Cell>
-                                                        </GridInner>
-                                                    </React.Fragment>
+                                                                    <IconButton
+                                                                        variant={"primary"}
+                                                                        size={"sm"}
+                                                                        icon={
+                                                                            <Icon
+                                                                                label={"Add"}
+                                                                                icon={<AddIcon />}
+                                                                            />
+                                                                        }
+                                                                        onClick={actions.add(index)}
+                                                                    />
+                                                                    <IconButton
+                                                                        variant={"secondary"}
+                                                                        size={"sm"}
+                                                                        icon={
+                                                                            <Icon
+                                                                                label={"Remove"}
+                                                                                icon={
+                                                                                    <RemoveIcon />
+                                                                                }
+                                                                            />
+                                                                        }
+                                                                        onClick={actions.remove(
+                                                                            index
+                                                                        )}
+                                                                    />
+                                                                </div>
+                                                            </Grid.Column>
+                                                        </Grid>
+                                                    </div>
                                                 );
                                             })}
                                             {empty(() => {
                                                 return (
                                                     <React.Fragment>
                                                         <Header>
-                                                            <Typography
-                                                                use={"overline"}
-                                                            >{t`Predefined values`}</Typography>
+                                                            <Text>{t`Predefined values`}</Text>
                                                         </Header>
 
-                                                        <GridInner className={emptyStyles}>
-                                                            <Cell span={12}>
-                                                                <Typography use={"subtitle1"}>
-                                                                    {t`There are no predefined values available.`}
-                                                                </Typography>
-                                                            </Cell>
-                                                            <Cell span={12}>
-                                                                <ButtonPrimary
+                                                        <Grid className={"wby-text-center"}>
+                                                            <Grid.Column span={12}>
+                                                                <Text>{t`There are no predefined values available.`}</Text>
+                                                            </Grid.Column>
+                                                            <Grid.Column span={12}>
+                                                                <Button
                                                                     onClick={actions.add()}
-                                                                >{t`Add a predefined value`}</ButtonPrimary>
-                                                            </Cell>
-                                                        </GridInner>
+                                                                    text={t`Add a predefined value`}
+                                                                />
+                                                            </Grid.Column>
+                                                        </Grid>
                                                     </React.Fragment>
                                                 );
                                             })}
                                             {header(() => (
                                                 <Header>
-                                                    <Typography
-                                                        use={"overline"}
-                                                    >{t`Predefined values`}</Typography>
+                                                    <Text>{t`Predefined values`}</Text>
                                                 </Header>
                                             ))}
                                         </React.Fragment>
@@ -200,7 +191,7 @@ const PredefinedValuesDynamicFieldset = ({
                         );
                     }}
                 </Bind>
-            </Cell>
+            </Grid.Column>
         </Grid>
     );
 };
diff --git a/packages/app-headless-cms/src/admin/plugins/fields/boolean.tsx b/packages/app-headless-cms/src/admin/plugins/fields/boolean.tsx
index 0bf198d5172..c17e1ad35f1 100644
--- a/packages/app-headless-cms/src/admin/plugins/fields/boolean.tsx
+++ b/packages/app-headless-cms/src/admin/plugins/fields/boolean.tsx
@@ -1,10 +1,9 @@
 import React from "react";
-import { ReactComponent as BooleanIcon } from "@material-design-icons/svg/outlined/toggle_on.svg";
+import { ReactComponent as BooleanIcon } from "@webiny/icons/toggle_on.svg";
 import { CmsModelFieldTypePlugin } from "~/types";
 import { i18n } from "@webiny/app/i18n";
-import { Cell, Grid } from "@webiny/ui/Grid";
 import { Bind } from "@webiny/form";
-import { Radio, RadioGroup } from "@webiny/ui/Radio";
+import { Grid, RadioGroup } from "@webiny/admin-ui";
 
 const t = i18n.ns("app-headless-cms/admin/fields");
 
@@ -17,32 +16,17 @@ const Options = ({ onChange, value: initialValue }: OptionsProps) => {
     const value = initialValue === true || initialValue === "true";
 
     return (
-        <RadioGroup label={"Default value"}>
-            {() => {
-                return (
-                    <>
-                        <div>
-                            <Radio
-                                label="True"
-                                value={value}
-                                onChange={() => {
-                                    onChange(true);
-                                }}
-                            />
-                        </div>
-                        <div>
-                            <Radio
-                                label="False"
-                                value={!value}
-                                onChange={() => {
-                                    onChange(false);
-                                }}
-                            />
-                        </div>
-                    </>
-                );
+        <RadioGroup
+            label={"Default value"}
+            value={String(value)}
+            onChange={value => {
+                onChange(value === "true");
             }}
-        </RadioGroup>
+            items={[
+                { value: "true", label: "True" },
+                { value: "false", label: "False" }
+            ]}
+        />
     );
 };
 
@@ -72,13 +56,13 @@ const plugin: CmsModelFieldTypePlugin = {
         renderSettings() {
             return (
                 <Grid>
-                    <Cell span={12}>
+                    <Grid.Column span={12}>
                         <Bind name={"settings.defaultValue"}>
                             {bind => {
                                 return <Options onChange={bind.onChange} value={bind.value} />;
                             }}
                         </Bind>
-                    </Cell>
+                    </Grid.Column>
                 </Grid>
             );
         }
diff --git a/packages/app-headless-cms/src/admin/plugins/fields/dateTime.tsx b/packages/app-headless-cms/src/admin/plugins/fields/dateTime.tsx
index 83f1e098694..267923b6288 100644
--- a/packages/app-headless-cms/src/admin/plugins/fields/dateTime.tsx
+++ b/packages/app-headless-cms/src/admin/plugins/fields/dateTime.tsx
@@ -1,12 +1,12 @@
 import React from "react";
 import get from "lodash/get";
-import { Grid, Cell } from "@webiny/ui/Grid";
-import { Select } from "@webiny/ui/Select";
+
 import { CmsModelField, CmsModelFieldTypePlugin } from "~/types";
 import { i18n } from "@webiny/app/i18n";
 import { ReactComponent as DateTimeIcon } from "./icons/schedule-black-24px.svg";
 import { useModel, useModelField } from "~/admin/hooks";
 import { Bind } from "@webiny/form";
+import { Grid, Label, Select } from "@webiny/admin-ui";
 
 const t = i18n.ns("app-headless-cms/admin/fields");
 
@@ -24,35 +24,49 @@ const DateTimeSettings = () => {
     return (
         <>
             <Grid>
-                <Cell span={6}>
+                <Grid.Column span={6}>
                     <Bind name={"settings.type"}>
                         <Select
-                            label={t`Format`}
-                            description={t`Cannot be changed later`}
+                            label={
+                                <Label
+                                    text={t`Format`}
+                                    description={t`(cannot be changed later)`}
+                                />
+                            }
                             disabled={lockedField && Boolean(lockedField.formatType)}
-                        >
-                            <option value={t`date`}>{t`Date only`}</option>
-                            <option value={t`time`}>{t`Time only`}</option>
-                            <option
-                                value={t`dateTimeWithTimezone`}
-                            >{t`Date and time with timezone`}</option>
-                            <option
-                                value={t`dateTimeWithoutTimezone`}
-                            >{t`Date and time without timezone`}</option>
-                        </Select>
+                            options={[
+                                { value: "date", label: t`Date only` },
+                                { value: "time", label: t`Time only` },
+                                {
+                                    value: "dateTimeWithTimezone",
+                                    label: t`Date and time with timezone`
+                                },
+                                {
+                                    value: "dateTimeWithoutTimezone",
+                                    label: t`Date and time without timezone`
+                                }
+                            ]}
+                            size={"lg"}
+                        />
                     </Bind>
-                </Cell>
-                <Cell span={6}>
+                </Grid.Column>
+                <Grid.Column span={6}>
                     <Bind name={"settings.defaultSetValue"}>
                         <Select
-                            label={t`Default Admin UI value`}
-                            description={"Affects the Admin UI only"}
-                        >
-                            <option value={t`null`}>{t`Leave empty (null value)`}</option>
-                            <option value={t`current`}>{t`Current date/time`}</option>
-                        </Select>
+                            label={
+                                <Label
+                                    text={t`Default Admin UI value`}
+                                    hint={t`Affects the Admin UI only`}
+                                />
+                            }
+                            options={[
+                                { value: t`null`, label: t`Leave empty (null value)` },
+                                { value: t`current`, label: t`Current date/time` }
+                            ]}
+                            size={"lg"}
+                        />
                     </Bind>
-                </Cell>
+                </Grid.Column>
             </Grid>
         </>
     );
diff --git a/packages/app-headless-cms/src/admin/plugins/fields/dynamicZone.tsx b/packages/app-headless-cms/src/admin/plugins/fields/dynamicZone.tsx
index 55a2a3c0338..346adac3e67 100644
--- a/packages/app-headless-cms/src/admin/plugins/fields/dynamicZone.tsx
+++ b/packages/app-headless-cms/src/admin/plugins/fields/dynamicZone.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { ReactComponent as ObjectIcon } from "@material-design-icons/svg/outlined/dynamic_form.svg";
+import { ReactComponent as ObjectIcon } from "@webiny/icons/dynamic_form.svg";
 import { i18n } from "@webiny/app/i18n";
 import { createFieldsList } from "@webiny/app-headless-cms-common";
 import { DynamicZone } from "~/admin/plugins/fields/dynamicZone/DynamicZone";
diff --git a/packages/app-headless-cms/src/admin/plugins/fields/dynamicZone/AddTemplate.tsx b/packages/app-headless-cms/src/admin/plugins/fields/dynamicZone/AddTemplate.tsx
index 5490a616b97..0566074c6b9 100644
--- a/packages/app-headless-cms/src/admin/plugins/fields/dynamicZone/AddTemplate.tsx
+++ b/packages/app-headless-cms/src/admin/plugins/fields/dynamicZone/AddTemplate.tsx
@@ -1,42 +1,9 @@
 import React, { useState } from "react";
-import styled from "@emotion/styled";
 import { CmsDynamicZoneTemplate } from "~/types";
-import { ButtonSecondary, IconButton } from "@webiny/ui/Button";
 import { TemplateDialog } from "./TemplateDialog";
-import { Typography } from "@webiny/ui/Typography";
-import { ReactComponent as InfoIcon } from "@material-design-icons/svg/outlined/info.svg";
-import { ReactComponent as AddIcon } from "@material-design-icons/svg/round/add_circle_outline.svg";
-import { Elevation } from "@webiny/ui/Elevation";
-
-const AddTemplateButtonContainer = styled(Elevation)`
-    padding: 25px 0 20px;
-    text-align: center;
-`;
-
-/**
- * This hacking is needed to position the button exactly in the middle of available area and not stretch the parent element.
- */
-const AddTemplateIconContainer = styled.div`
-    text-align: center;
-    height: 36px;
-
-    > button {
-        margin-left: -24px;
-        position: absolute;
-    }
-`;
-
-const Info = styled.div`
-    margin-top: 8px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    > svg {
-        width: 20px;
-        margin-right: 5px;
-    }
-`;
+import { ReactComponent as AddIcon } from "@webiny/icons/add.svg";
+import { ReactComponent as AddCircleIcon } from "@webiny/icons/add_circle_outline.svg";
+import { Button, Text, IconButton, Link, Tooltip } from "@webiny/admin-ui";
 
 interface AddTemplateProps {
     onTemplate: UseAddTemplateParams["onTemplate"];
@@ -75,18 +42,39 @@ export const AddTemplateButton = (props: AddTemplateProps) => {
     });
 
     return (
-        <AddTemplateButtonContainer z={2}>
-            {showTemplateDialog ? (
-                <TemplateDialog onTemplate={onTemplate} onClose={onDialogClose} />
-            ) : null}
-            <ButtonSecondary onClick={addTemplate}>+ Add a template</ButtonSecondary>
-            <Info>
-                <InfoIcon />
-                <Typography use={"caption"}>
-                    Click here to learn how templates and dynamic zones work
-                </Typography>
-            </Info>
-        </AddTemplateButtonContainer>
+        <div
+            className={
+                "wby-flex wby-flex-col wby-px-xl wby-pt-xl wby-pb-lg wby-gap-sm wby-border-sm wby-border-neutral-muted wby-rounded"
+            }
+        >
+            <div className={"wby-w-full wby-text-center"}>
+                {showTemplateDialog ? (
+                    <TemplateDialog onTemplate={onTemplate} onClose={onDialogClose} />
+                ) : null}
+                <Button
+                    size={"sm"}
+                    variant={"secondary"}
+                    onClick={addTemplate}
+                    text={"Add template"}
+                    icon={<AddIcon />}
+                />
+            </div>
+            <div
+                className={
+                    "wby-flex wby-items-center wby-justify-center wby-gap-xs wby-w-full wby-mx-auto wby-text-center"
+                }
+            >
+                <Text size={"sm"} className={"wby-text-neutral-strong"}>
+                    <Link
+                        to={"http://webiny.link/admin/how-to-use/dynamic-zones"}
+                        target={"_blank"}
+                    >
+                        Learn how
+                    </Link>{" "}
+                    templates and dynamic zones work.
+                </Text>
+            </div>
+        </div>
     );
 };
 
@@ -96,11 +84,21 @@ export const AddTemplateIcon = (props: AddTemplateProps) => {
     });
 
     return (
-        <AddTemplateIconContainer>
+        <div className={"wby-w-full wby-text-center wby-mt-md"}>
             {showTemplateDialog ? (
                 <TemplateDialog onTemplate={onTemplate} onClose={onDialogClose} />
             ) : null}
-            <IconButton onClick={addTemplate} icon={<AddIcon />} />
-        </AddTemplateIconContainer>
+            <Tooltip
+                content={"Add template"}
+                trigger={
+                    <IconButton
+                        onClick={addTemplate}
+                        icon={<AddCircleIcon />}
+                        size={"lg"}
+                        variant={"ghost"}
+                    />
+                }
+            />
+        </div>
     );
 };
diff --git a/packages/app-headless-cms/src/admin/plugins/fields/dynamicZone/DynamicZoneTemplate.tsx b/packages/app-headless-cms/src/admin/plugins/fields/dynamicZone/DynamicZoneTemplate.tsx
index f0d7b90cc18..235a491f1b5 100644
--- a/packages/app-headless-cms/src/admin/plugins/fields/dynamicZone/DynamicZoneTemplate.tsx
+++ b/packages/app-headless-cms/src/admin/plugins/fields/dynamicZone/DynamicZoneTemplate.tsx
@@ -2,10 +2,10 @@ import React, { useCallback, useState } from "react";
 import { set } from "dot-prop-immutable";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { IconProp } from "@fortawesome/fontawesome-svg-core";
-import { ReactComponent as EditIcon } from "@material-design-icons/svg/outlined/edit.svg";
-import { ReactComponent as DeleteIcon } from "@material-design-icons/svg/outlined/delete_outline.svg";
-import { ReactComponent as ArrowUpIcon } from "@material-design-icons/svg/round/expand_less.svg";
-import { ReactComponent as ArrowDownIcon } from "@material-design-icons/svg/round/expand_more.svg";
+import { ReactComponent as EditIcon } from "@webiny/icons/edit.svg";
+import { ReactComponent as DeleteIcon } from "@webiny/icons/delete.svg";
+import { ReactComponent as ArrowUpIcon } from "@webiny/icons/expand_less.svg";
+import { ReactComponent as ArrowDownIcon } from "@webiny/icons/expand_more.svg";
 import { AccordionItem } from "@webiny/ui/Accordion";
 import { useConfirmationDialog } from "@webiny/app-admin";
 import { pullValueAtIndex, pushValueAtIndex, removeValueAtIndex } from "~/admin/plugins/arrayUtils";
diff --git a/packages/app-headless-cms/src/admin/plugins/fields/dynamicZone/TemplateDialog.tsx b/packages/app-headless-cms/src/admin/plugins/fields/dynamicZone/TemplateDialog.tsx
index 3f4555dd033..0c722f809f3 100644
--- a/packages/app-headless-cms/src/admin/plugins/fields/dynamicZone/TemplateDialog.tsx
+++ b/packages/app-headless-cms/src/admin/plugins/fields/dynamicZone/TemplateDialog.tsx
@@ -1,15 +1,11 @@
 import React, { useState } from "react";
-import { ButtonPrimary, ButtonDefault } from "@webiny/ui/Button";
-import { Grid, Cell } from "@webiny/ui/Grid";
-import { Input } from "@webiny/ui/Input";
 import { Form, FormAPI, FormOnSubmit } from "@webiny/form";
 import { validation } from "@webiny/validation";
 import { CmsDynamicZoneTemplate } from "~/types";
 import { generateAlphaNumericLowerCaseId } from "@webiny/utils";
 import { IconPicker } from "~/admin/components/IconPicker";
-import { Dialog, DialogTitle, DialogContent, DialogActions } from "~/admin/components/Dialog";
-import { Alert } from "@webiny/ui/Alert";
 import { Tags } from "@webiny/ui/Tags";
+import { Alert, Dialog, Grid, Input, Textarea } from "@webiny/admin-ui";
 
 const typeNameValidator = (value: string) => {
     const regex = new RegExp("^[A-Z]+[_0-9A-Za-z]+$");
@@ -91,83 +87,73 @@ export const TemplateDialog = (props: TemplateDialogProps) => {
     };
 
     return (
-        <Dialog open={true} onClose={props.onClose}>
-            <Form<CmsDynamicZoneTemplate>
-                onSubmit={onSubmit}
-                data={props.template}
-                onChange={onFormChange}
-            >
-                {({ Bind, submit, form }) => (
-                    <>
-                        <DialogTitle>{dialogTitle}</DialogTitle>
-                        <DialogContent>
-                            <Grid>
-                                {showWarning ? (
-                                    <Cell span={12}>
-                                        <Alert title={"GraphQL Schema Change"} type={"danger"}>
-                                            You&apos;ve changed the GraphQL schema type name! If
-                                            your API is being queried by a 3rd party application,
-                                            this will affect the GraphQL queries in those
-                                            applications. Make sure your consumers are informed
-                                            about this change!
-                                        </Alert>
-                                    </Cell>
-                                ) : null}
-                                <Cell span={12}>
-                                    <Bind
-                                        name={"name"}
-                                        validators={[validation.create("required")]}
-                                    >
-                                        <Input label={"Name"} onBlur={nameOnBlur(form)} />
-                                    </Bind>
-                                </Cell>
-                                <Cell span={12}>
-                                    <Bind
-                                        name={"gqlTypeName"}
-                                        validators={[
-                                            validation.create("required"),
-                                            typeNameValidator
-                                        ]}
-                                    >
-                                        <Input
-                                            autoFocus={false}
-                                            label={"GraphQL Type Name"}
-                                            description={
-                                                "This string will be used to generate the GraphQL schema. "
-                                            }
-                                        />
-                                    </Bind>
-                                </Cell>
-                                <Cell span={12}>
-                                    <Bind
-                                        name={"icon"}
-                                        validators={[validation.create("required")]}
-                                    >
-                                        <IconPicker label={"Icon"} />
-                                    </Bind>
-                                </Cell>
-                                <Cell span={12}>
-                                    <Bind
-                                        name={"description"}
-                                        validators={[validation.create("required")]}
-                                    >
-                                        <Input rows={3} label={"Description"} />
-                                    </Bind>
-                                </Cell>
-                                <Cell span={12}>
-                                    <Bind name={"tags"} defaultValue={[]}>
-                                        <Tags label={"Tags"} />
-                                    </Bind>
-                                </Cell>
-                            </Grid>
-                        </DialogContent>
-                        <DialogActions>
-                            <ButtonDefault onClick={props.onClose}>Cancel</ButtonDefault>
-                            <ButtonPrimary onClick={submit}>{submitLabel}</ButtonPrimary>
-                        </DialogActions>
-                    </>
-                )}
-            </Form>
-        </Dialog>
+        <Form<CmsDynamicZoneTemplate>
+            onSubmit={onSubmit}
+            data={props.template}
+            onChange={onFormChange}
+        >
+            {({ Bind, submit, form }) => (
+                <Dialog
+                    open={true}
+                    onClose={props.onClose}
+                    title={dialogTitle}
+                    actions={
+                        <>
+                            <Dialog.CancelButton />
+                            <Dialog.ConfirmButton onClick={submit} text={submitLabel} />
+                        </>
+                    }
+                >
+                    <Grid>
+                        <>
+                            {showWarning ? (
+                                <Grid.Column span={12}>
+                                    <Alert title={"GraphQL Schema Change"} type={"danger"}>
+                                        You&apos;ve changed the GraphQL schema type name! If your
+                                        API is being queried by a 3rd party application, this will
+                                        affect the GraphQL queries in those applications. Make sure
+                                        your consumers are informed about this change!
+                                    </Alert>
+                                </Grid.Column>
+                            ) : null}
+                        </>
+                        <Grid.Column span={12}>
+                            <Bind name={"name"} validators={[validation.create("required")]}>
+                                <Input label={"Name"} onBlur={nameOnBlur(form)} />
+                            </Bind>
+                        </Grid.Column>
+                        <Grid.Column span={12}>
+                            <Bind
+                                name={"gqlTypeName"}
+                                validators={[validation.create("required"), typeNameValidator]}
+                            >
+                                <Input
+                                    autoFocus={false}
+                                    label={"GraphQL Type Name"}
+                                    description={
+                                        "This string will be used to generate the GraphQL schema. "
+                                    }
+                                />
+                            </Bind>
+                        </Grid.Column>
+                        <Grid.Column span={12}>
+                            <Bind name={"icon"} validators={[validation.create("required")]}>
+                                <IconPicker label={"Icon"} />
+                            </Bind>
+                        </Grid.Column>
+                        <Grid.Column span={12}>
+                            <Bind name={"description"} validators={[validation.create("required")]}>
+                                <Textarea rows={3} label={"Description"} />
+                            </Bind>
+                        </Grid.Column>
+                        <Grid.Column span={12}>
+                            <Bind name={"tags"} defaultValue={[]}>
+                                <Tags label={"Tags"} />
+                            </Bind>
+                        </Grid.Column>
+                    </Grid>
+                </Dialog>
+            )}
+        </Form>
     );
 };
diff --git a/packages/app-headless-cms/src/admin/plugins/fields/longText.tsx b/packages/app-headless-cms/src/admin/plugins/fields/longText.tsx
index ecc3ddbc1c8..c6044e5f0e4 100644
--- a/packages/app-headless-cms/src/admin/plugins/fields/longText.tsx
+++ b/packages/app-headless-cms/src/admin/plugins/fields/longText.tsx
@@ -1,10 +1,9 @@
 import React from "react";
-import { ReactComponent as LongTextIcon } from "./icons/round-notes.svg";
-import { Grid, Cell } from "@webiny/ui/Grid";
-import { Input } from "@webiny/ui/Input";
+import { ReactComponent as LongTextIcon } from "@webiny/icons/notes.svg";
 import { CmsModelFieldTypePlugin } from "~/types";
 import { i18n } from "@webiny/app/i18n";
 import { Bind } from "@webiny/form";
+import { Grid, Input, Label } from "@webiny/admin-ui";
 
 const t = i18n.ns("app-headless-cms/admin/fields");
 
@@ -32,14 +31,16 @@ const plugin: CmsModelFieldTypePlugin = {
         renderSettings() {
             return (
                 <Grid>
-                    <Cell span={12}>
+                    <Grid.Column span={12}>
                         <Bind name={"placeholderText"}>
                             <Input
-                                label={t`Placeholder text`}
-                                description={t`Placeholder text (optional)`}
+                                label={
+                                    <Label text={t`Placeholder text`} description={t`(optional)`} />
+                                }
+                                size={"lg"}
                             />
                         </Bind>
-                    </Cell>
+                    </Grid.Column>
                 </Grid>
             );
         }
diff --git a/packages/app-headless-cms/src/admin/plugins/fields/number.tsx b/packages/app-headless-cms/src/admin/plugins/fields/number.tsx
index 7939b312eb5..cb5ac8e65c0 100644
--- a/packages/app-headless-cms/src/admin/plugins/fields/number.tsx
+++ b/packages/app-headless-cms/src/admin/plugins/fields/number.tsx
@@ -1,11 +1,10 @@
 import React from "react";
-import { Grid, Cell } from "@webiny/ui/Grid";
 import { CmsModelFieldTypePlugin } from "~/types";
 import { i18n } from "@webiny/app/i18n";
-import { Input } from "@webiny/ui/Input";
 import PredefinedValuesDynamicFieldset from "./PredefinedValuesDynamicFieldset";
-import { ReactComponent as FloatIcon } from "@material-design-icons/svg/outlined/looks_3.svg";
+import { ReactComponent as FloatIcon } from "@webiny/icons/looks_3.svg";
 import { Bind } from "@webiny/form";
+import { Grid, Input, Label } from "@webiny/admin-ui";
 
 const t = i18n.ns("app-headless-cms/admin/fields");
 
@@ -33,14 +32,16 @@ const plugin: CmsModelFieldTypePlugin = {
         renderSettings() {
             return (
                 <Grid>
-                    <Cell span={12}>
+                    <Grid.Column span={12}>
                         <Bind name={"placeholderText"}>
                             <Input
-                                label={t`Placeholder text`}
-                                description={t`Placeholder text (optional)`}
+                                label={
+                                    <Label text={t`Placeholder text`} description={t`(optional)`} />
+                                }
+                                size={"lg"}
                             />
                         </Bind>
-                    </Cell>
+                    </Grid.Column>
                 </Grid>
             );
         },
@@ -56,6 +57,7 @@ const plugin: CmsModelFieldTypePlugin = {
                                     type="number"
                                     label={t`Value`}
                                     onChange={value => bind.onChange(parseFloat(value))}
+                                    size={"lg"}
                                 />
                             )}
                         </Bind>
diff --git a/packages/app-headless-cms/src/admin/plugins/fields/object.tsx b/packages/app-headless-cms/src/admin/plugins/fields/object.tsx
index 60c4b439d93..d10c5e4fa0f 100644
--- a/packages/app-headless-cms/src/admin/plugins/fields/object.tsx
+++ b/packages/app-headless-cms/src/admin/plugins/fields/object.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { ReactComponent as ObjectIcon } from "@material-design-icons/svg/outlined/ballot.svg";
+import { ReactComponent as ObjectIcon } from "@webiny/icons/ballot.svg";
 import { createFieldsList } from "@webiny/app-headless-cms-common";
 import { i18n } from "@webiny/app/i18n";
 import { ObjectFields } from "./object/ObjectFields";
diff --git a/packages/app-headless-cms/src/admin/plugins/fields/ref.tsx b/packages/app-headless-cms/src/admin/plugins/fields/ref.tsx
index 523fee42f67..d2e5ffc0fa9 100644
--- a/packages/app-headless-cms/src/admin/plugins/fields/ref.tsx
+++ b/packages/app-headless-cms/src/admin/plugins/fields/ref.tsx
@@ -5,16 +5,15 @@ import {
     withoutBeingDeletedModels
 } from "../../viewsGraphql";
 import { validation, ValidationError } from "@webiny/validation";
-import { Cell, Grid } from "@webiny/ui/Grid";
-import { MultiAutoComplete } from "@webiny/ui/AutoComplete";
 import { useSnackbar } from "@webiny/app-admin/hooks/useSnackbar";
 import { CmsModel, CmsModelFieldTypePlugin } from "~/types";
-import { ReactComponent as RefIcon } from "./icons/round-link-24px.svg";
+import { ReactComponent as RefIcon } from "@webiny/icons/link.svg";
 import { i18n } from "@webiny/app/i18n";
 import { Bind, BindComponentRenderProp, useForm } from "@webiny/form";
 import { useModel, useQuery } from "~/admin/hooks";
 import { renderInfo } from "./ref/renderInfo";
 import { CMS_MODEL_SINGLETON_TAG } from "@webiny/app-headless-cms-common";
+import { Grid, Label, MultiAutoComplete } from "@webiny/admin-ui";
 
 const t = i18n.ns("app-headless-cms/admin/fields");
 
@@ -50,7 +49,7 @@ const RefFieldSettings = () => {
                     return !model.tags?.includes(CMS_MODEL_SINGLETON_TAG);
                 })
                 .map(model => {
-                    return { id: model.modelId, name: model.name };
+                    return { value: model.modelId, label: model.name };
                 })
         );
     }, [data]);
@@ -65,30 +64,41 @@ const RefFieldSettings = () => {
 
     return (
         <Grid>
-            <Cell span={12}>
+            <Grid.Column span={12}>
                 <Bind name={"settings.models"} validators={atLeastOneItem}>
                     {(bind: BindComponentRenderProp<CmsModel[]>) => {
                         // Format value prop for MultiAutoComplete component.
-                        const formattedValueForAutoComplete = options.filter(option =>
-                            bind.value.some(({ modelId }) => option.id === modelId)
-                        );
+                        const formattedValueForAutoComplete = options
+                            .filter(option =>
+                                bind.value.some(({ modelId }) => option.value === modelId)
+                            )
+                            .map(({ value }) => value);
 
                         return (
                             <MultiAutoComplete
                                 {...bind}
-                                value={formattedValueForAutoComplete}
-                                onChange={(values: CmsModel[]) => {
-                                    bind.onChange(values.map(value => ({ modelId: value.id })));
+                                size={"lg"}
+                                values={formattedValueForAutoComplete}
+                                onValuesChange={(values: string[]) => {
+                                    bind.onChange(values.map(value => ({ modelId: value })));
                                 }}
-                                label={loading ? t`Loading models...` : t`Content models`}
-                                description={t`Cannot be changed later`}
+                                label={
+                                    loading ? (
+                                        t`Loading models...`
+                                    ) : (
+                                        <Label
+                                            text={t`Content models`}
+                                            description={"(cannot be changed later)"}
+                                        />
+                                    )
+                                }
                                 options={options}
                                 disabled={isFieldLocked || loading}
                             />
                         );
                     }}
                 </Bind>
-            </Cell>
+            </Grid.Column>
         </Grid>
     );
 };
diff --git a/packages/app-headless-cms/src/admin/plugins/fields/ref/renderInfo.tsx b/packages/app-headless-cms/src/admin/plugins/fields/ref/renderInfo.tsx
index d6908e26e18..87d6a987fde 100644
--- a/packages/app-headless-cms/src/admin/plugins/fields/ref/renderInfo.tsx
+++ b/packages/app-headless-cms/src/admin/plugins/fields/ref/renderInfo.tsx
@@ -5,49 +5,17 @@ import {
     LIST_REFERENCED_MODELS,
     ListReferencedModelsQueryResult
 } from "~/admin/plugins/fields/ref/graphql";
-import styled from "@emotion/styled";
 import { useSnackbar } from "@webiny/app-admin";
+import { Tag } from "@webiny/admin-ui";
 
 type CmsModel = Pick<BaseCmsModel, "modelId" | "name">;
 
-const Information = styled("div")({
-    display: "flex",
-    flexDirection: "row",
-    justifyContent: "right",
-    alignItems: "center",
-    flex: "1"
-});
-
-const BadgeItem = styled("div")({
-    display: "inline-block",
-    padding: "5px 20px 7px 20px",
-    backgroundColor: "#FFF",
-    borderRadius: "5px",
-    border: "1px solid darkgrey",
-    marginRight: "10px",
-    cursor: "default",
-    fontWeight: "normal"
-});
-
-const Extras = styled("div")({
-    display: "inline-block",
-    padding: "5px 10px 7px 10px",
-    backgroundColor: "#FFF",
-    borderRadius: "5px",
-    border: "1px solid darkgrey",
-    maxWidth: "20px",
-    textAlign: "center",
-    marginRight: "10px",
-    cursor: "default",
-    fontWeight: "normal"
-});
-
 interface BadgeProps {
     model: CmsModel;
 }
 
 const Badge = ({ model }: BadgeProps) => {
-    return <BadgeItem>{model.name}</BadgeItem>;
+    return <Tag content={model.name} />;
 };
 
 interface RenderInfoParams {
@@ -102,11 +70,11 @@ const RenderInfo = ({ field }: RenderInfoParams) => {
     }
 
     return (
-        <Information>
+        <div className={"wby-flex wby-justify-end wby-items-center wby-gap-sm"}>
             {items.map(model => {
                 return <Badge key={`model-${model.modelId}`} model={model} />;
             })}
-            {badges > 0 && <Extras>+{badges}</Extras>}
-        </Information>
+            {badges > 0 && <Tag content={`+${badges}`}></Tag>}
+        </div>
     );
 };
diff --git a/packages/app-headless-cms/src/admin/plugins/fields/richText.tsx b/packages/app-headless-cms/src/admin/plugins/fields/richText.tsx
index 9f02249a87f..2cf0dceab30 100644
--- a/packages/app-headless-cms/src/admin/plugins/fields/richText.tsx
+++ b/packages/app-headless-cms/src/admin/plugins/fields/richText.tsx
@@ -1,9 +1,8 @@
 import React from "react";
 import { i18n } from "@webiny/app/i18n";
 import { CmsModelFieldTypePlugin } from "~/types";
-import { Grid, Cell } from "@webiny/ui/Grid";
-import { ReactComponent as NotesIcon } from "@material-design-icons/svg/outlined/text_snippet.svg";
-import { Input } from "@webiny/ui/Input";
+import { ReactComponent as NotesIcon } from "@webiny/icons/text_snippet.svg";
+import { Grid, Input, Label } from "@webiny/admin-ui";
 import { Bind } from "@webiny/form";
 
 const t = i18n.ns("app-headless-cms/admin/fields");
@@ -31,14 +30,16 @@ const plugin: CmsModelFieldTypePlugin = {
         renderSettings() {
             return (
                 <Grid>
-                    <Cell span={12}>
+                    <Grid.Column span={12}>
                         <Bind name={"placeholderText"}>
                             <Input
-                                label={t`Placeholder text`}
-                                description={t`Placeholder text (optional)`}
+                                label={
+                                    <Label text={t`Placeholder text`} description={t`(optional)`} />
+                                }
+                                size={"lg"}
                             />
                         </Bind>
-                    </Cell>
+                    </Grid.Column>
                 </Grid>
             );
         }
diff --git a/packages/app-headless-cms/src/admin/plugins/fields/text.tsx b/packages/app-headless-cms/src/admin/plugins/fields/text.tsx
index 442fc8a0aee..76143689d50 100644
--- a/packages/app-headless-cms/src/admin/plugins/fields/text.tsx
+++ b/packages/app-headless-cms/src/admin/plugins/fields/text.tsx
@@ -1,11 +1,10 @@
 import React from "react";
-import { ReactComponent as TextIcon } from "./icons/round-text_fields-24px.svg";
-import { Grid, Cell } from "@webiny/ui/Grid";
+import { ReactComponent as TextIcon } from "@webiny/icons/text_fields.svg";
 import { CmsModelFieldTypePlugin } from "~/types";
 import { i18n } from "@webiny/app/i18n";
-import { Input } from "@webiny/ui/Input";
 import PredefinedValuesDynamicFieldset from "./PredefinedValuesDynamicFieldset";
 import { Bind } from "@webiny/form";
+import { Grid, Input, Label } from "@webiny/admin-ui";
 const t = i18n.ns("app-headless-cms/admin/fields");
 
 const plugin: CmsModelFieldTypePlugin = {
@@ -32,14 +31,16 @@ const plugin: CmsModelFieldTypePlugin = {
         renderSettings() {
             return (
                 <Grid>
-                    <Cell span={12}>
+                    <Grid.Column span={12}>
                         <Bind name={"placeholderText"}>
                             <Input
-                                label={t`Placeholder text`}
-                                description={t`Placeholder text (optional)`}
+                                label={
+                                    <Label text={t`Placeholder text`} description={t`(optional)`} />
+                                }
+                                size={"lg"}
                             />
                         </Bind>
-                    </Cell>
+                    </Grid.Column>
                 </Grid>
             );
         },
diff --git a/packages/app-headless-cms/src/admin/plugins/icons.tsx b/packages/app-headless-cms/src/admin/plugins/icons.tsx
index bde8b9d159c..127b3b92dca 100644
--- a/packages/app-headless-cms/src/admin/plugins/icons.tsx
+++ b/packages/app-headless-cms/src/admin/plugins/icons.tsx
@@ -1,20 +1,12 @@
-import React from "react";
 import { IconName, library } from "@fortawesome/fontawesome-svg-core";
 import { IconPrefix } from "@fortawesome/fontawesome-common-types";
 import { fab } from "@fortawesome/free-brands-svg-icons";
 import { fas } from "@fortawesome/free-solid-svg-icons";
 import { far } from "@fortawesome/free-regular-svg-icons";
-import { CmsIcon, CmsIconsPlugin } from "~/types";
+import { IconPickerIconDto } from "@webiny/admin-ui";
+import { CmsIconsPlugin } from "~/types";
 
-const createSvg = (icon: string[]): React.ReactElement => {
-    return (
-        <svg width={24} viewBox={`0 0 ${icon[0]} ${icon[1]}`}>
-            <path d={icon[4]} fill="currentColor" />
-        </svg>
-    );
-};
-
-const icons: CmsIcon[] = [];
+const icons: IconPickerIconDto[] = [];
 
 interface Icons {
     definitions: Record<IconPrefix, Record<IconName, string[]>>;
@@ -36,9 +28,8 @@ const plugin: CmsIconsPlugin = {
             // @ts-expect-error
             Object.keys(defs).forEach((icon: IconName) => {
                 icons.push({
-                    id: [pack, icon],
-                    name: icon,
-                    svg: createSvg(defs[icon])
+                    prefix: pack,
+                    name: icon
                 });
             });
         });
diff --git a/packages/app-headless-cms/src/admin/plugins/permissionRenderer/CmsPermissions.tsx b/packages/app-headless-cms/src/admin/plugins/permissionRenderer/CmsPermissions.tsx
index bc94f2189c5..1fd00ac82cb 100644
--- a/packages/app-headless-cms/src/admin/plugins/permissionRenderer/CmsPermissions.tsx
+++ b/packages/app-headless-cms/src/admin/plugins/permissionRenderer/CmsPermissions.tsx
@@ -4,23 +4,21 @@
  */
 import React, { Fragment, useCallback, useMemo } from "react";
 import ContentModelGroupPermission from "./components/ContentModelGroupPermission";
-import { Grid, Cell } from "@webiny/ui/Grid";
-import { Select } from "@webiny/ui/Select";
 import { i18n } from "@webiny/app/i18n";
 import {
     CannotUseAaclAlert,
     PermissionInfo,
-    gridNoPaddingClass
+    gridWithPaddingClass
 } from "@webiny/app-admin/components/Permissions";
 import { Form } from "@webiny/form";
 import { ContentModelPermission } from "./components/ContentModelPermission";
 import { ContentEntryPermission } from "./components/ContentEntryPermission";
-import { Checkbox, CheckboxGroup } from "@webiny/ui/Checkbox";
 import { useI18N } from "@webiny/app-i18n/hooks/useI18N";
 import { Link } from "@webiny/react-router";
 import { CmsSecurityPermission } from "~/types";
 import { useSecurity } from "@webiny/app-security";
 import { AaclPermission } from "@webiny/app-admin";
+import { CheckboxGroup, Grid, Select } from "@webiny/admin-ui";
 
 const t = i18n.ns("app-headless-cms/admin/plugins/permissionRenderer");
 
@@ -266,62 +264,71 @@ export const CMSPermissions = ({ value, onChange }: CMSPermissionsProps) => {
         <Form<CmsSecurityPermission> data={initialFormData} onChange={onFormChange}>
             {({ data, Bind, setValue }) => (
                 <>
-                    <Grid className={gridNoPaddingClass}>
-                        <Cell span={12}>
+                    <Grid className={gridWithPaddingClass}>
+                        <Grid.Column span={12}>
                             {data.accessLevel === "custom" && cannotUseAAcl && (
                                 <CannotUseAaclAlert />
                             )}
-                        </Cell>
+                        </Grid.Column>
                     </Grid>
 
-                    <Grid className={gridNoPaddingClass}>
-                        <Cell span={6}>
+                    <Grid className={gridWithPaddingClass}>
+                        <Grid.Column span={6}>
                             <PermissionInfo title={t`Access Level`} />
-                        </Cell>
-                        <Cell span={6}>
+                        </Grid.Column>
+                        <Grid.Column span={6}>
                             <Bind name={"accessLevel"}>
-                                <Select label={t`Access Level`}>
-                                    <option value={NO_ACCESS}>{t`No access`}</option>
-                                    <option value={FULL_ACCESS}>{t`Full access`}</option>
-                                    <option value={CUSTOM_ACCESS}>{t`Custom access`}</option>
-                                </Select>
+                                <Select
+                                    options={[
+                                        {
+                                            value: NO_ACCESS,
+                                            label: t`No access`
+                                        },
+                                        {
+                                            value: FULL_ACCESS,
+                                            label: t`Full access`
+                                        },
+                                        {
+                                            value: CUSTOM_ACCESS,
+                                            label: t`Custom access`
+                                        }
+                                    ]}
+                                />
                             </Bind>
-                        </Cell>
+                        </Grid.Column>
                     </Grid>
                     {data.accessLevel === CUSTOM_ACCESS && (
-                        <>
-                            <Grid>
-                                <Cell span={12}>
-                                    <Bind name={"endpoints"}>
-                                        <CheckboxGroup
-                                            label={t`GraphQL API types`}
-                                            description={t`Each type has a separate URL and a specific purpose.
+                        <div className={"wby-mt-lg"}>
+                            <div className={"wby-mb-md"}>
+                                <Grid>
+                                    <Grid.Column span={12}>
+                                        <Bind name={"endpoints"}>
+                                            {bind => (
+                                                <CheckboxGroup
+                                                    {...bind}
+                                                    label={t`GraphQL API types`}
+                                                    description={t`Each type has a separate URL and a specific purpose.
                                                  Check out the {link} key topic to learn more.`({
-                                                link: (
-                                                    <Link
-                                                        to={GRAPHQL_API_TYPES_LINK}
-                                                        target={"_blank"}
-                                                    >
-                                                        Headless CMS GraphQL API
-                                                    </Link>
-                                                )
-                                            })}
-                                        >
-                                            {({ getValue, onChange }) =>
-                                                API_ENDPOINTS.map(({ id, name }) => (
-                                                    <Checkbox
-                                                        key={id}
-                                                        label={name}
-                                                        value={getValue(id)}
-                                                        onChange={onChange(id)}
-                                                        disabled={cannotUseAAcl}
-                                                    />
-                                                ))
-                                            }
-                                        </CheckboxGroup>
-                                    </Bind>
-                                </Cell>
-                            </Grid>
+                                                        link: (
+                                                            <Link
+                                                                to={GRAPHQL_API_TYPES_LINK}
+                                                                target={"_blank"}
+                                                            >
+                                                                Headless CMS GraphQL API
+                                                            </Link>
+                                                        )
+                                                    })}
+                                                    items={API_ENDPOINTS.map(({ id, name }) => ({
+                                                        id,
+                                                        label: name,
+                                                        value: id
+                                                    }))}
+                                                />
+                                            )}
+                                        </Bind>
+                                    </Grid.Column>
+                                </Grid>
+                            </div>
 
                             <ContentModelGroupPermission
                                 data={data}
@@ -351,7 +358,7 @@ export const CMSPermissions = ({ value, onChange }: CMSPermissionsProps) => {
                                 entity={"contentEntry"}
                                 title={"Content Entries"}
                             />
-                        </>
+                        </div>
                     )}
                 </>
             )}
diff --git a/packages/app-headless-cms/src/admin/plugins/permissionRenderer/components/ContentEntryPermission.tsx b/packages/app-headless-cms/src/admin/plugins/permissionRenderer/components/ContentEntryPermission.tsx
index e98c2d9c694..1dd0ebd4a8a 100644
--- a/packages/app-headless-cms/src/admin/plugins/permissionRenderer/components/ContentEntryPermission.tsx
+++ b/packages/app-headless-cms/src/admin/plugins/permissionRenderer/components/ContentEntryPermission.tsx
@@ -1,14 +1,10 @@
 import React, { useEffect } from "react";
 import get from "lodash/get";
-import { Grid, Cell } from "@webiny/ui/Grid";
-import { Typography } from "@webiny/ui/Typography";
-import { Select } from "@webiny/ui/Select";
 import { i18n } from "@webiny/app/i18n";
-import { Elevation } from "@webiny/ui/Elevation";
-import { Checkbox, CheckboxGroup } from "@webiny/ui/Checkbox";
-import { Note } from "./StyledComponents";
 import { BindComponent } from "@webiny/form/types";
 import { CmsSecurityPermission } from "~/types";
+import { CheckboxGroup, FormComponentNote, Grid, Select } from "@webiny/admin-ui";
+import { PermissionsGroup } from "@webiny/app-admin/components/Permissions";
 
 const t = i18n.ns("app-headless-cms/admin/plugins/permissionRenderer");
 
@@ -54,98 +50,94 @@ export const ContentEntryPermission = ({
         !endpoints.includes("manage");
 
     return (
-        <Elevation z={1} style={{ marginTop: 10 }}>
+        <PermissionsGroup title={title}>
             <Grid>
-                <Cell span={12}>
-                    <Typography use={"overline"}>{title}</Typography>
-                </Cell>
-                <Cell span={12}>
-                    <Grid style={{ padding: 0, paddingBottom: 24 }}>
-                        <Cell span={12}>
-                            <Bind
-                                defaultValue={"full"}
-                                name={`${entity}AccessScope`}
-                                beforeChange={(value, cb) => {
-                                    if (value === "own") {
-                                        setValue(`${entity}RWD`, "rwd");
+                <Grid.Column span={12}>
+                    <Bind
+                        defaultValue={"full"}
+                        name={`${entity}AccessScope`}
+                        beforeChange={(value, cb) => {
+                            if (value === "own") {
+                                setValue(`${entity}RWD`, "rwd");
+                            }
+                            cb(value);
+                        }}
+                    >
+                        <Select
+                            label={t`Access Scope`}
+                            disabled={disabled || data[`contentModelAccessScope`] === "own"}
+                            options={[
+                                {
+                                    value: "full",
+                                    label: t`All entries`
+                                },
+                                ...((endpoints.includes("manage") && [
+                                    {
+                                        value: "own",
+                                        label: t`Only entries created by the user`
                                     }
-                                    cb(value);
-                                }}
-                            >
-                                <Select
-                                    label={t`Access Scope`}
-                                    disabled={disabled || data[`contentModelAccessScope`] === "own"}
-                                >
-                                    <option value={"full"}>{t`All entries`}</option>
-                                    {(endpoints.includes("manage") && (
-                                        <option
-                                            value={"own"}
-                                        >{t`Only entries created by the user`}</option>
-                                    )) || <></>}
-                                </Select>
+                                ]) ||
+                                    [])
+                            ]}
+                        />
+                    </Bind>
+                    <>
+                        {data[`contentModelAccessScope`] === "own" && (
+                            <FormComponentNote>
+                                <strong>Content Entry</strong>
+                                &nbsp;{t`access depends upon`}&nbsp;
+                                <strong>Content Model</strong>
+                            </FormComponentNote>
+                        )}
+                    </>
+                </Grid.Column>
+                <Grid.Column span={12}>
+                    <Bind name={`${entity}RWD`}>
+                        <Select
+                            label={t`Primary Actions`}
+                            placeholder={"Read-only"}
+                            disabled={disabled || disabledPrimaryActions}
+                            options={[
+                                {
+                                    value: "r",
+                                    label: t`Read-only`
+                                },
+                                ...(endpoints.includes("manage")
+                                    ? [
+                                          {
+                                              value: "rw",
+                                              label: t`Read, write`
+                                          },
+                                          {
+                                              value: "rwd",
+                                              label: t`Read, write, delete`
+                                          }
+                                      ]
+                                    : [])
+                            ]}
+                        />
+                    </Bind>
+                </Grid.Column>
+                <>
+                    {endpoints.includes("manage") && (
+                        <Grid.Column span={12}>
+                            <Bind name={`${entity}PW`}>
+                                <CheckboxGroup
+                                    label={t`Publishing actions`}
+                                    description={t`Publishing-related actions that can be performed on content entries.`}
+                                    items={pwOptions.map(({ id, name }) => ({
+                                        value: id,
+                                        label: name,
+                                        disabled:
+                                            disabled ||
+                                            [undefined, "no"].includes(data[`${entity}AccessScope`])
+                                    }))}
+                                />
                             </Bind>
-                            {data[`contentModelAccessScope`] === "own" && (
-                                <Note>
-                                    <Typography use={"caption"}>
-                                        <span className={"highlight"}>Content Entry</span>
-                                        &nbsp;{t`access depends upon`}&nbsp;
-                                        <span className={"highlight"}>Content Model</span>
-                                    </Typography>
-                                </Note>
-                            )}
-                        </Cell>
-
-                        <Cell span={12}>
-                            <Bind name={`${entity}RWD`}>
-                                <Select
-                                    label={t`Primary Actions`}
-                                    placeholder={"Read-only"}
-                                    disabled={disabled || disabledPrimaryActions}
-                                >
-                                    <option value={"r"}>{t`Read-only`}</option>
-                                    {endpoints.includes("manage") ? (
-                                        <option value={"rw"}>{t`Read, write`}</option>
-                                    ) : (
-                                        <></>
-                                    )}
-                                    {endpoints.includes("manage") ? (
-                                        <option value={"rwd"}>{t`Read, write, delete`}</option>
-                                    ) : (
-                                        <></>
-                                    )}
-                                </Select>
-                            </Bind>
-                        </Cell>
-                        {endpoints.includes("manage") ? (
-                            <Cell span={12}>
-                                <Bind name={`${entity}PW`}>
-                                    <CheckboxGroup
-                                        label={t`Publishing actions`}
-                                        description={t`Publishing-related actions that can be performed on content entries.`}
-                                    >
-                                        {({ getValue, onChange }) =>
-                                            pwOptions.map(({ id, name }) => (
-                                                <Checkbox
-                                                    disabled={
-                                                        disabled ||
-                                                        [undefined, "no"].includes(
-                                                            data[`${entity}AccessScope`]
-                                                        )
-                                                    }
-                                                    key={id}
-                                                    label={name}
-                                                    value={getValue(id)}
-                                                    onChange={onChange(id)}
-                                                />
-                                            ))
-                                        }
-                                    </CheckboxGroup>
-                                </Bind>
-                            </Cell>
-                        ) : null}
-                    </Grid>
-                </Cell>
+                        </Grid.Column>
+                    )}
+                </>
             </Grid>
-        </Elevation>
+        </PermissionsGroup>
     );
 };
diff --git a/packages/app-headless-cms/src/admin/plugins/permissionRenderer/components/ContentModelGroupPermission.tsx b/packages/app-headless-cms/src/admin/plugins/permissionRenderer/components/ContentModelGroupPermission.tsx
index c11e2dd4ef4..037d1e91cae 100644
--- a/packages/app-headless-cms/src/admin/plugins/permissionRenderer/components/ContentModelGroupPermission.tsx
+++ b/packages/app-headless-cms/src/admin/plugins/permissionRenderer/components/ContentModelGroupPermission.tsx
@@ -1,13 +1,11 @@
 import React, { useCallback } from "react";
-import { Grid, Cell } from "@webiny/ui/Grid";
-import { Select } from "@webiny/ui/Select";
 import { i18n } from "@webiny/app/i18n";
-import { Elevation } from "@webiny/ui/Elevation";
-import { Typography } from "@webiny/ui/Typography";
-import { PermissionSelector, PermissionSelectorWrapper } from "./PermissionSelector";
+import { PermissionSelector } from "./PermissionSelector";
 import { useCmsData } from "./useCmsData";
 import { BindComponent } from "@webiny/form/types";
 import { CmsSecurityPermission } from "~/types";
+import { Grid, Select } from "@webiny/admin-ui";
+import { PermissionsGroup } from "@webiny/app-admin/components/Permissions";
 
 const t = i18n.ns("app-headless-cms/admin/plugins/permissionRenderer");
 
@@ -43,63 +41,76 @@ const ContentModelGroupPermission = ({
         !endpoints.includes("manage");
 
     return (
-        <Elevation z={1} style={{ marginTop: 10 }}>
+        <PermissionsGroup title={title}>
             <Grid>
-                <Cell span={12}>
-                    <Typography use={"overline"}>{title}</Typography>
-                </Cell>
-                <Cell span={12}>
-                    <Grid style={{ padding: 0, paddingBottom: 24 }}>
-                        <Cell span={12}>
-                            <Bind name={`${entity}AccessScope`} defaultValue={"full"}>
-                                <Select label={t`Access Scope`} disabled={disabled}>
-                                    <option value={"full"}>{t`All groups`}</option>
-                                    <option value={"groups"}>{t`Only specific groups`}</option>
-                                    {(endpoints.includes("manage") && (
-                                        <option
-                                            value={"own"}
-                                        >{t`Only groups created by the user`}</option>
-                                    )) || <></>}
-                                </Select>
-                            </Bind>
-                        </Cell>
-                        {data[`${entity}AccessScope`] === "groups" && (
-                            <PermissionSelectorWrapper>
-                                <PermissionSelector
-                                    disabled={disabled}
-                                    locales={locales}
-                                    Bind={Bind}
-                                    entity={entity}
-                                    selectorKey={"groups"}
-                                    getItems={getItems}
-                                />
-                            </PermissionSelectorWrapper>
-                        )}
-                        <Cell span={12}>
-                            <Bind name={`${entity}RWD`}>
-                                <Select
-                                    label={t`Primary Actions`}
-                                    placeholder={"Read-only"}
-                                    disabled={disabled || disabledPrimaryActions}
-                                >
-                                    <option value={"r"}>{t`Read-only`}</option>
-                                    {endpoints.includes("manage") ? (
-                                        <option value={"rw"}>{t`Read, write`}</option>
-                                    ) : (
-                                        <></>
-                                    )}
-                                    {endpoints.includes("manage") ? (
-                                        <option value={"rwd"}>{t`Read, write, delete`}</option>
-                                    ) : (
-                                        <></>
-                                    )}
-                                </Select>
-                            </Bind>
-                        </Cell>
-                    </Grid>
-                </Cell>
+                <Grid.Column span={12}>
+                    <Bind name={`${entity}AccessScope`} defaultValue={"full"}>
+                        <Select
+                            label={t`Access Scope`}
+                            disabled={disabled}
+                            options={[
+                                {
+                                    value: "full",
+                                    label: t`All groups`
+                                },
+                                {
+                                    value: "groups",
+                                    label: t`Only specific groups`
+                                },
+                                ...((endpoints.includes("manage") && [
+                                    {
+                                        value: "own",
+                                        label: t`Only groups created by the user`
+                                    }
+                                ]) ||
+                                    [])
+                            ]}
+                        />
+                    </Bind>
+                </Grid.Column>
+                <>
+                    {data[`${entity}AccessScope`] === "groups" && (
+                        <Grid.Column span={12}>
+                            <PermissionSelector
+                                disabled={disabled}
+                                locales={locales}
+                                Bind={Bind}
+                                entity={entity}
+                                selectorKey={"groups"}
+                                getItems={getItems}
+                            />
+                        </Grid.Column>
+                    )}
+                </>
+                <Grid.Column span={12}>
+                    <Bind name={`${entity}RWD`}>
+                        <Select
+                            label={t`Primary Actions`}
+                            placeholder={"Read-only"}
+                            disabled={disabled || disabledPrimaryActions}
+                            options={[
+                                {
+                                    value: "r",
+                                    label: t`Read-only`
+                                },
+                                ...(endpoints.includes("manage")
+                                    ? [
+                                          {
+                                              value: "rw",
+                                              label: t`Read, write`
+                                          },
+                                          {
+                                              value: "rwd",
+                                              label: t`Read, write, delete`
+                                          }
+                                      ]
+                                    : [])
+                            ]}
+                        />
+                    </Bind>
+                </Grid.Column>
             </Grid>
-        </Elevation>
+        </PermissionsGroup>
     );
 };
 
diff --git a/packages/app-headless-cms/src/admin/plugins/permissionRenderer/components/ContentModelList.tsx b/packages/app-headless-cms/src/admin/plugins/permissionRenderer/components/ContentModelList.tsx
index dc28d129b43..faab70ea1af 100644
--- a/packages/app-headless-cms/src/admin/plugins/permissionRenderer/components/ContentModelList.tsx
+++ b/packages/app-headless-cms/src/admin/plugins/permissionRenderer/components/ContentModelList.tsx
@@ -1,20 +1,8 @@
 import React from "react";
-import { css } from "emotion";
 import groupBy from "lodash/groupBy";
 import get from "lodash/get";
-import { Typography } from "@webiny/ui/Typography";
-import { Checkbox } from "@webiny/ui/Checkbox";
-import { GetValueCallable, OnChangeCallable, PermissionSelectorCmsGroup } from "./types";
-
-const groupStyles = css({
-    marginLeft: 20
-});
-
-const labelStyles = css({
-    display: "block",
-    color: "var(--mdc-theme-text-secondary-on-light)",
-    fontWeight: "bold"
-});
+import { PermissionSelectorCmsGroup } from "./types";
+import { CheckboxGroup, Text } from "@webiny/admin-ui";
 
 interface GroupItem extends PermissionSelectorCmsGroup {
     groupName: string;
@@ -22,10 +10,12 @@ interface GroupItem extends PermissionSelectorCmsGroup {
 
 interface ContentModelListProps {
     items: PermissionSelectorCmsGroup[];
-    onChange: OnChangeCallable;
-    getValue: GetValueCallable;
+    label: string;
+    disabled?: boolean;
+    value?: string[];
+    onChange?: (values: string[]) => void;
 }
-const ContentModelList = ({ items, onChange, getValue }: ContentModelListProps) => {
+const ContentModelList = ({ items, label, disabled, value, onChange }: ContentModelListProps) => {
     const list: [string, GroupItem[]][] = Object.entries(
         groupBy(
             items.map((item): GroupItem => {
@@ -39,27 +29,27 @@ const ContentModelList = ({ items, onChange, getValue }: ContentModelListProps)
     );
 
     return (
-        <React.Fragment>
-            {list.map(([key, value]) => {
+        <>
+            <Text className={"wby-font-semibold"}>{label}</Text>
+            {list.map(([key, items]) => {
                 return (
-                    <div key={key} className={groupStyles}>
-                        <Typography use={"caption"} className={labelStyles}>
-                            {key}
-                        </Typography>
-                        {value.map(({ id, label }) => (
-                            <div key={id}>
-                                <Checkbox
-                                    key={id}
-                                    label={label}
-                                    value={getValue(id)}
-                                    onChange={onChange(id)}
-                                />
-                            </div>
-                        ))}
+                    <div key={key} className={"wby-ml-md wby-mt-sm"}>
+                        <CheckboxGroup
+                            label={key}
+                            value={value}
+                            onChange={onChange}
+                            items={items.map(item => {
+                                return {
+                                    value: item.id,
+                                    label: item.label,
+                                    disabled
+                                };
+                            })}
+                        />
                     </div>
                 );
             })}
-        </React.Fragment>
+        </>
     );
 };
 
diff --git a/packages/app-headless-cms/src/admin/plugins/permissionRenderer/components/ContentModelPermission.tsx b/packages/app-headless-cms/src/admin/plugins/permissionRenderer/components/ContentModelPermission.tsx
index a5df08bfa9c..b56f96be934 100644
--- a/packages/app-headless-cms/src/admin/plugins/permissionRenderer/components/ContentModelPermission.tsx
+++ b/packages/app-headless-cms/src/admin/plugins/permissionRenderer/components/ContentModelPermission.tsx
@@ -1,16 +1,13 @@
 import React, { useCallback, useEffect } from "react";
 import get from "lodash/get";
-import { Grid, Cell } from "@webiny/ui/Grid";
-import { Typography } from "@webiny/ui/Typography";
-import { Select } from "@webiny/ui/Select";
 import { i18n } from "@webiny/app/i18n";
-import { Elevation } from "@webiny/ui/Elevation";
-import { PermissionSelector, PermissionSelectorWrapper } from "./PermissionSelector";
+import { PermissionSelector } from "./PermissionSelector";
 import { useCmsData, CmsDataCmsModel } from "./useCmsData";
-import { Note } from "./StyledComponents";
 import ContentModelList from "./ContentModelList";
 import { BindComponent } from "@webiny/form/types";
 import { CmsSecurityPermission } from "~/types";
+import { FormComponentNote, Grid, Select } from "@webiny/admin-ui";
+import { PermissionsGroup } from "@webiny/app-admin/components/Permissions";
 
 const t = i18n.ns("app-headless-cms/admin/plugins/permissionRenderer");
 
@@ -67,14 +64,11 @@ export const ContentModelPermission = ({
         !endpoints.includes("manage");
 
     return (
-        <Elevation z={1} style={{ marginTop: 10 }}>
+        <PermissionsGroup title={title}>
             <Grid>
-                <Cell span={12}>
-                    <Typography use={"overline"}>{title}</Typography>
-                </Cell>
-                <Cell span={12}>
-                    <Grid style={{ padding: 0, paddingBottom: 24 }}>
-                        <Cell span={12}>
+                <Grid.Column span={12}>
+                    <Grid>
+                        <Grid.Column span={12}>
                             <Bind name={`${entity}AccessScope`} defaultValue={"full"}>
                                 <Select
                                     label={t`Access Scope`}
@@ -82,64 +76,79 @@ export const ContentModelPermission = ({
                                         disabled || data[`contentModelGroupAccessScope`] === "own"
                                     }
                                     description={t`The list of available models is defined by the options set in the content model groups section above.`}
-                                >
-                                    <option value={"full"}>{t`All models`}</option>
-                                    <option value={"models"}>{t`Only specific models`}</option>
-                                    {(endpoints.includes("manage") && (
-                                        <option
-                                            value={"own"}
-                                        >{t`Only models created by the user`}</option>
-                                    )) || <></>}
-                                </Select>
+                                    options={[
+                                        {
+                                            value: "full",
+                                            label: t`All models`
+                                        },
+                                        {
+                                            value: "models",
+                                            label: t`Only specific models`
+                                        },
+                                        ...((endpoints.includes("manage") && [
+                                            {
+                                                value: "own",
+                                                label: t`Only models created by the user`
+                                            }
+                                        ]) ||
+                                            [])
+                                    ]}
+                                />
                             </Bind>
                             {data[`contentModelGroupAccessScope`] === "own" && (
-                                <Note>
-                                    <Typography use={"caption"}>
-                                        <span className={"highlight"}>Content Model</span>
-                                        &nbsp;{t`access depends upon`}&nbsp;
-                                        <span className={"highlight"}>Content Model Group</span>
-                                    </Typography>
-                                </Note>
+                                <FormComponentNote>
+                                    <strong>Content Model</strong>
+                                    &nbsp;{t`access depends upon`}&nbsp;
+                                    <strong>Content Model Group</strong>
+                                </FormComponentNote>
                             )}
-                        </Cell>
-                        {data[`${entity}AccessScope`] === "models" && (
-                            <PermissionSelectorWrapper>
-                                <PermissionSelector
-                                    disabled={disabled}
-                                    locales={locales}
-                                    Bind={Bind}
-                                    entity={entity}
-                                    selectorKey={"models"}
-                                    getItems={getItems}
-                                    RenderItems={ContentModelList}
-                                />
-                            </PermissionSelectorWrapper>
-                        )}
+                        </Grid.Column>
+                        <>
+                            {data[`${entity}AccessScope`] === "models" && (
+                                <Grid.Column span={12}>
+                                    <PermissionSelector
+                                        disabled={disabled}
+                                        locales={locales}
+                                        Bind={Bind}
+                                        entity={entity}
+                                        selectorKey={"models"}
+                                        getItems={getItems}
+                                        RenderItems={ContentModelList}
+                                    />
+                                </Grid.Column>
+                            )}
+                        </>
 
-                        <Cell span={12}>
+                        <Grid.Column span={12}>
                             <Bind name={`${entity}RWD`}>
                                 <Select
                                     label={t`Primary Actions`}
                                     placeholder={"Read-only"}
                                     disabled={disabled || disabledPrimaryActions}
-                                >
-                                    <option value={"r"}>{t`Read-only`}</option>
-                                    {endpoints.includes("manage") ? (
-                                        <option value={"rw"}>{t`Read, write`}</option>
-                                    ) : (
-                                        <></>
-                                    )}
-                                    {endpoints.includes("manage") ? (
-                                        <option value={"rwd"}>{t`Read, write, delete`}</option>
-                                    ) : (
-                                        <></>
-                                    )}
-                                </Select>
+                                    options={[
+                                        {
+                                            value: "r",
+                                            label: t`Read-only`
+                                        },
+                                        ...(endpoints.includes("manage")
+                                            ? [
+                                                  {
+                                                      value: "rw",
+                                                      label: t`Read, write`
+                                                  },
+                                                  {
+                                                      value: "rwd",
+                                                      label: t`Read, write, delete`
+                                                  }
+                                              ]
+                                            : [])
+                                    ]}
+                                />
                             </Bind>
-                        </Cell>
+                        </Grid.Column>
                     </Grid>
-                </Cell>
+                </Grid.Column>
             </Grid>
-        </Elevation>
+        </PermissionsGroup>
     );
 };
diff --git a/packages/app-headless-cms/src/admin/plugins/permissionRenderer/components/PermissionSelector.tsx b/packages/app-headless-cms/src/admin/plugins/permissionRenderer/components/PermissionSelector.tsx
index d7f07ff8911..b02a637d2b3 100644
--- a/packages/app-headless-cms/src/admin/plugins/permissionRenderer/components/PermissionSelector.tsx
+++ b/packages/app-headless-cms/src/admin/plugins/permissionRenderer/components/PermissionSelector.tsx
@@ -1,25 +1,36 @@
-import React, { Fragment } from "react";
+import React from "react";
 import { i18n } from "@webiny/app/i18n";
-import { Checkbox, CheckboxGroup } from "@webiny/ui/Checkbox";
-import { Cell } from "@webiny/ui/Grid";
 import { BindComponent } from "@webiny/form";
-import { FormElementMessage } from "@webiny/ui/FormElementMessage";
-import {
-    GetValueCallable,
-    OnChangeCallable,
-    PermissionSelectorCmsGroup,
-    PermissionSelectorCmsModel
-} from "./types";
+import { PermissionSelectorCmsGroup, PermissionSelectorCmsModel } from "./types";
+import { CheckboxGroup, FormComponentNote } from "@webiny/admin-ui";
 
 const t = i18n.ns("app-headless-cms/admin/plugins/permissionRenderer");
 
 interface RenderItemsProps {
-    onChange: OnChangeCallable;
-    getValue: GetValueCallable;
+    label: string;
     items: PermissionSelectorCmsModel[] | PermissionSelectorCmsGroup[];
     disabled?: boolean;
+    value?: string[];
+    onChange?: (values: string[]) => void;
 }
 
+const DefaultRenderItems = ({ items, label, disabled, onChange, value }: RenderItemsProps) => {
+    return (
+        <CheckboxGroup
+            label={label}
+            value={value}
+            onChange={onChange}
+            items={items.map(item => {
+                return {
+                    value: item.id,
+                    label: item.label,
+                    disabled
+                };
+            })}
+        />
+    );
+};
+
 export interface PermissionSelectorProps {
     Bind: BindComponent;
     selectorKey: string;
@@ -30,24 +41,6 @@ export interface PermissionSelectorProps {
     disabled?: boolean;
 }
 
-const DefaultRenderItems = ({ items, getValue, onChange, disabled }: RenderItemsProps) => {
-    return (
-        <React.Fragment>
-            {items.map(({ id, label }) => (
-                <div key={id}>
-                    <Checkbox
-                        key={id}
-                        label={label}
-                        value={getValue(id)}
-                        onChange={onChange(id)}
-                        disabled={disabled}
-                    />
-                </div>
-            ))}
-        </React.Fragment>
-    );
-};
-
 export const PermissionSelector = ({
     Bind,
     entity,
@@ -62,7 +55,8 @@ export const PermissionSelector = ({
     });
 
     return (
-        <Fragment>
+        <>
+            <FormComponentNote text={description} />
             {locales.map(code => {
                 const items = getItems(code);
 
@@ -78,34 +72,13 @@ export const PermissionSelector = ({
                     );
                 }
                 return (
-                    <Bind key={code} name={`${entity}Props.${selectorKey}.${code}`}>
-                        <CheckboxGroup label={code}>
-                            {({ onChange, getValue }) => {
-                                return (
-                                    <RenderItems
-                                        disabled={disabled}
-                                        items={items}
-                                        onChange={onChange}
-                                        getValue={getValue}
-                                    />
-                                );
-                            }}
-                        </CheckboxGroup>
-                    </Bind>
+                    <div key={code} className={"wby-mt-md"}>
+                        <Bind name={`${entity}Props.${selectorKey}.${code}`}>
+                            <RenderItems label={code} items={items} disabled={disabled} />
+                        </Bind>
+                    </div>
                 );
             })}
-            <FormElementMessage>{description}</FormElementMessage>
-        </Fragment>
+        </>
     );
 };
-
-interface PermissionSelectorWrapperProps {
-    children: React.ReactNode;
-}
-
-export const PermissionSelectorWrapper = ({ children }: PermissionSelectorWrapperProps) => (
-    <Fragment>
-        <Cell span={1} />
-        <Cell span={11}>{children}</Cell>
-    </Fragment>
-);
diff --git a/packages/app-headless-cms/src/admin/plugins/permissionRenderer/components/StyledComponents.tsx b/packages/app-headless-cms/src/admin/plugins/permissionRenderer/components/StyledComponents.tsx
deleted file mode 100644
index d12a1220c87..00000000000
--- a/packages/app-headless-cms/src/admin/plugins/permissionRenderer/components/StyledComponents.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import styled from "@emotion/styled";
-
-export const Note = styled("div")({
-    color: "var(--mdc-theme-text-secondary-on-background)",
-
-    "& .highlight": {
-        fontWeight: "bold"
-    }
-});
diff --git a/packages/app-headless-cms/src/admin/plugins/permissionRenderer/index.tsx b/packages/app-headless-cms/src/admin/plugins/permissionRenderer/index.tsx
index 623aef1f4d0..2578fbf1b6c 100644
--- a/packages/app-headless-cms/src/admin/plugins/permissionRenderer/index.tsx
+++ b/packages/app-headless-cms/src/admin/plugins/permissionRenderer/index.tsx
@@ -1,7 +1,7 @@
 import React from "react";
-import { AccordionItem } from "@webiny/ui/Accordion";
+import { Accordion } from "@webiny/admin-ui";
 import { AdminAppPermissionRendererPlugin } from "@webiny/app-admin/types";
-import { ReactComponent as HeadlessCMSIcon } from "../../icons/devices_other-black-24px.svg";
+import { ReactComponent as PermissionsIcon } from "@webiny/icons/devices_other.svg";
 import { CMSPermissions } from "./CmsPermissions";
 
 const plugin: AdminAppPermissionRendererPlugin = {
@@ -9,14 +9,19 @@ const plugin: AdminAppPermissionRendererPlugin = {
     name: "admin-app-permissions-renderer-cms",
     render(props) {
         return (
-            <AccordionItem
-                icon={<HeadlessCMSIcon />}
+            <Accordion.Item
+                icon={
+                    <Accordion.Item.Icon
+                        icon={<PermissionsIcon />}
+                        label={"Headless CMS Permissions"}
+                    />
+                }
                 title={"Headless CMS"}
                 description={"Manage Headless CMS app access permissions."}
                 data-testid={"permission.cms"}
             >
                 <CMSPermissions {...props} />
-            </AccordionItem>
+            </Accordion.Item>
         );
     }
 };
diff --git a/packages/app-headless-cms/src/admin/plugins/welcomeScreenWidget.tsx b/packages/app-headless-cms/src/admin/plugins/welcomeScreenWidget.tsx
index 0463831258e..4e74d3ee757 100644
--- a/packages/app-headless-cms/src/admin/plugins/welcomeScreenWidget.tsx
+++ b/packages/app-headless-cms/src/admin/plugins/welcomeScreenWidget.tsx
@@ -1,19 +1,10 @@
 import React from "react";
-import { Link } from "@webiny/react-router";
-import { AdminWelcomeScreenWidgetPlugin } from "@webiny/app-plugin-admin-welcome-screen/types";
-import { ButtonSecondary } from "@webiny/ui/Button";
-import { css } from "emotion";
+import { ReactComponent as AddIcon } from "@webiny/icons/add.svg";
+import { ReactComponent as CmsIcon } from "@webiny/icons/devices_other.svg";
 
-const linkStyle = css({
-    textDecoration: "none",
-    "&:hover": {
-        textDecoration: "none"
-    }
-});
+import { AdminWelcomeScreenWidgetPlugin } from "@webiny/app-plugin-admin-welcome-screen/types";
 
-const buttonStyle = css({
-    margin: "1rem auto 1rem auto"
-});
+import { Button, Link } from "@webiny/admin-ui";
 
 const plugin: AdminWelcomeScreenWidgetPlugin = {
     type: "admin-welcome-screen-widget",
@@ -21,12 +12,15 @@ const plugin: AdminWelcomeScreenWidgetPlugin = {
     permission: "cms.endpoint.manage",
     widget: {
         cta: (
-            <Link to="/cms/content-models" className={linkStyle}>
-                <ButtonSecondary className={buttonStyle}>New Content Model</ButtonSecondary>
-            </Link>
+            <Button
+                text={<Link to="/cms/content-models">{"New Content Model"}</Link>}
+                icon={<AddIcon />}
+                asChild
+            />
         ),
         description: "GraphQL based headless CMS with powerful content modeling features.",
-        title: "Headless CMS"
+        title: "CMS",
+        icon: <CmsIcon />
     }
 };
 
diff --git a/packages/app-headless-cms/src/admin/views/contentEntries/ContentEntriesContainer.tsx b/packages/app-headless-cms/src/admin/views/contentEntries/ContentEntriesContainer.tsx
index b711a49ea1c..9066e36b94d 100644
--- a/packages/app-headless-cms/src/admin/views/contentEntries/ContentEntriesContainer.tsx
+++ b/packages/app-headless-cms/src/admin/views/contentEntries/ContentEntriesContainer.tsx
@@ -3,7 +3,6 @@ import get from "lodash/get";
 import { useRouter } from "@webiny/react-router";
 import { useSnackbar } from "@webiny/app-admin/hooks/useSnackbar";
 import { i18n } from "@webiny/app/i18n";
-import { CircularProgress } from "@webiny/ui/Progress";
 import {
     GET_CONTENT_MODEL,
     GetCmsModelQueryResponse,
@@ -12,6 +11,7 @@ import {
 import { useQuery } from "../../hooks";
 import { CmsModel } from "~/types";
 import { ModelProvider } from "~/admin/components/ModelProvider";
+import { LoadingContentModel } from "~/admin/components/ContentEntries/LoadingContentModel";
 
 const t = i18n.ns("app-headless-cms/admin/content-entries");
 
@@ -50,7 +50,7 @@ export const ContentEntriesContainer = ({ children }: ContentEntriesContainerPro
     );
 
     if (!contentModel || loading) {
-        return <CircularProgress label={t`Loading content model...`} />;
+        return <LoadingContentModel />;
     } else if (error) {
         showSnackbar(error.message);
         return null;
diff --git a/packages/app-headless-cms/src/admin/views/contentEntries/ContentEntriesModule.tsx b/packages/app-headless-cms/src/admin/views/contentEntries/ContentEntriesModule.tsx
index 05465a25dc3..c4755f559d6 100644
--- a/packages/app-headless-cms/src/admin/views/contentEntries/ContentEntriesModule.tsx
+++ b/packages/app-headless-cms/src/admin/views/contentEntries/ContentEntriesModule.tsx
@@ -93,12 +93,12 @@ export const ContentEntriesModule = () => {
                 />
                 <Browser.Table.Column
                     name={"actions"}
-                    header={" "}
+                    header={""}
                     cell={<CellActions />}
-                    size={80}
+                    size={56}
                     resizable={false}
                     hideable={false}
-                    className={"rmwc-data-table__cell--align-end cms-aco-list-actions"}
+                    className={"cms-aco-list-actions wby-text-right"}
                 />
                 <Browser.AdvancedSearch.FieldRenderer
                     name={"ref"}
diff --git a/packages/app-headless-cms/src/admin/views/contentEntries/ContentEntry.tsx b/packages/app-headless-cms/src/admin/views/contentEntries/ContentEntry.tsx
index 894dcb435ad..e84a6653976 100644
--- a/packages/app-headless-cms/src/admin/views/contentEntries/ContentEntry.tsx
+++ b/packages/app-headless-cms/src/admin/views/contentEntries/ContentEntry.tsx
@@ -1,9 +1,4 @@
 import React, { useState } from "react";
-import { css } from "emotion";
-import styled from "@emotion/styled";
-import { Tab, Tabs } from "@webiny/ui/Tabs";
-import { Elevation } from "@webiny/ui/Elevation";
-import { CircularProgress } from "@webiny/ui/Progress";
 import { makeDecoratable } from "@webiny/app";
 import { RevisionsList } from "./ContentEntry/RevisionsList/RevisionsList";
 import { useContentEntry } from "./hooks/useContentEntry";
@@ -12,27 +7,7 @@ import { ContentEntryForm } from "~/admin/components/ContentEntryForm/ContentEnt
 import { usePersistEntry } from "~/admin/hooks/usePersistEntry";
 import { FormValidation } from "@webiny/form";
 import { ValidationIndicators } from "./ValidationIndicators";
-
-const DetailsContainer = styled("div")({
-    height: "calc(100% - 10px)",
-    overflow: "hidden",
-    position: "relative",
-    ".mdc-tab-bar": {
-        backgroundColor: "var(--mdc-theme-surface)"
-    }
-});
-
-const RenderBlock = styled("div")({
-    position: "relative",
-    zIndex: 0,
-    backgroundColor: "var(--mdc-theme-background)",
-    height: "100%",
-    padding: 25
-});
-
-const elevationStyles = css({
-    position: "relative"
-});
+import { OverlayLoader, Tabs } from "@webiny/admin-ui";
 
 declare global {
     // eslint-disable-next-line
@@ -51,40 +26,50 @@ export const ContentEntry = makeDecoratable("ContentEntry", () => {
     const { persistEntry } = usePersistEntry({ addItemToListCache: true });
 
     return (
-        <DetailsContainer>
+        <div>
             <test-id data-testid="cms-content-details">
-                <Tabs id={"cms-content-details-tabs"} value={activeTab} onActivate={setActiveTab}>
-                    <Tab
-                        label={"Content"}
-                        disabled={loading}
-                        data-testid={"cms.content-form.tabs.content"}
-                    >
-                        <RenderBlock>
-                            <Elevation z={2} className={elevationStyles}>
-                                {invalidFields ? (
-                                    <ValidationIndicators invalidFields={invalidFields} />
-                                ) : null}
-                                {loading && <CircularProgress />}
-                                <ContentEntryForm
-                                    entry={entry}
-                                    persistEntry={persistEntry}
-                                    header={<Header />}
-                                    onInvalidFields={invalidFields =>
-                                        setInvalidFields(invalidFields)
-                                    }
-                                />
-                            </Elevation>
-                        </RenderBlock>
-                    </Tab>
-                    <Tab
-                        label={"Revisions"}
-                        disabled={loading}
-                        data-testid={"cms.content-form.tabs.revisions"}
-                    >
-                        <RevisionsList />
-                    </Tab>
-                </Tabs>
+                <Tabs
+                    id={"cms-content-details-tabs"}
+                    size={"md"}
+                    separator={true}
+                    spacing={"lg"}
+                    value={activeTab}
+                    onValueChange={setActiveTab}
+                    tabs={[
+                        <Tabs.Tab
+                            key={"content"}
+                            value={"content"}
+                            trigger={"Content"}
+                            disabled={loading}
+                            data-testid={"cms.content-form.tabs.content"}
+                            content={
+                                <div className={"wby-relative"}>
+                                    {invalidFields ? (
+                                        <ValidationIndicators invalidFields={invalidFields} />
+                                    ) : null}
+                                    {loading && <OverlayLoader />}
+                                    <ContentEntryForm
+                                        entry={entry}
+                                        persistEntry={persistEntry}
+                                        header={<Header />}
+                                        onInvalidFields={invalidFields =>
+                                            setInvalidFields(invalidFields)
+                                        }
+                                    />
+                                </div>
+                            }
+                        />,
+                        <Tabs.Tab
+                            key={"revisions"}
+                            value={"revisions"}
+                            trigger={"Revisions"}
+                            disabled={loading}
+                            data-testid={"cms.content-form.tabs.revisions"}
+                            content={<RevisionsList />}
+                        />
+                    ]}
+                ></Tabs>
             </test-id>
-        </DetailsContainer>
+        </div>
     );
 });
diff --git a/packages/app-headless-cms/src/admin/views/contentEntries/ContentEntry/ContentEntryContext.tsx b/packages/app-headless-cms/src/admin/views/contentEntries/ContentEntry/ContentEntryContext.tsx
index a09f252d4ef..31a71cac42d 100644
--- a/packages/app-headless-cms/src/admin/views/contentEntries/ContentEntry/ContentEntryContext.tsx
+++ b/packages/app-headless-cms/src/admin/views/contentEntries/ContentEntry/ContentEntryContext.tsx
@@ -67,9 +67,9 @@ export interface ContentEntryContext extends ContentEntriesContext, ContentEntry
     revisions: CmsContentEntryRevision[];
     refetchContent: () => void;
 
-    setActiveTab(index: number): void;
+    setActiveTab(index: string): void;
 
-    activeTab: number;
+    activeTab: string;
     showEmptyView: boolean;
 }
 
@@ -116,7 +116,7 @@ export const ContentEntryProvider = ({
     currentFolderId
 }: ContentEntryContextProviderProps) => {
     const { isMounted } = useIsMounted();
-    const [activeTab, setActiveTab] = useState(0);
+    const [activeTab, setActiveTab] = useState("content");
     const [entry, setEntry] = useState<CmsContentEntry>();
     const [revisions, setRevisions] = useState<CmsContentEntryRevision[]>([]);
     const { contentModel: model, canCreate } = useContentEntries();
@@ -168,7 +168,7 @@ export const ContentEntryProvider = ({
         if (!revisionId && entry) {
             setEntry(undefined);
         }
-        setActiveTab(0);
+        setActiveTab("content");
     }, [revisionId]);
 
     const { READ_CONTENT } = useMemo(() => {
diff --git a/packages/app-headless-cms/src/admin/views/contentEntries/ContentEntry/FullScreenContentEntry/FullScreenContentEntry.styled.tsx b/packages/app-headless-cms/src/admin/views/contentEntries/ContentEntry/FullScreenContentEntry/FullScreenContentEntry.styled.tsx
index d0704559d3e..cbe5618d3cf 100644
--- a/packages/app-headless-cms/src/admin/views/contentEntries/ContentEntry/FullScreenContentEntry/FullScreenContentEntry.styled.tsx
+++ b/packages/app-headless-cms/src/admin/views/contentEntries/ContentEntry/FullScreenContentEntry/FullScreenContentEntry.styled.tsx
@@ -1,117 +1,72 @@
+import React from "react";
 import styled from "@emotion/styled";
-import { css } from "emotion";
-
-export const Container = styled.div`
-    background: var(--mdc-theme-background);
-    z-index: 4;
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100vh;
+import { cn } from "@webiny/admin-ui";
 
+const Wrapper = styled.div`
     #headerToolbarGrid {
-        border: 0;
-        padding: 0;
         margin: 0;
+        padding: 0;
+        border: 0;
     }
 
-    #cms-content-details-tabs > .webiny-ui-tabs__tab-bar {
-        display: none;
-    }
-`;
-
-/**
- * HEADER
- */
-export const Header = styled.div`
-    background: var(--mdc-theme-surface);
-    position: fixed;
-    display: flex;
-    justify-content: space-between;
-    box-sizing: border-box;
-    width: 100%;
-    z-index: 4;
-`;
-
-export const HeaderContent = styled.div`
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 8px 12px;
-`;
-
-export const TitleWrapper = styled.div`
-    display: flex;
-    align-items: baseline;
-    justify-content: flex-start;
-    flex-direction: column;
-    color: var(--mdc-theme-text-primary-on-background);
-    position: relative;
-    width: 100%;
-    margin-left: 10px;
-`;
-
-export const EntryTitle = styled.div`
-    width: 100%;
-    display: flex;
-    align-items: center;
-`;
-
-interface EntryNameProps {
-    isNewEntry?: boolean;
-}
-
-export const EntryName = styled.div<EntryNameProps>`
-    font-family: var(--mdc-typography-font-family);
-    font-size: 20px;
-    line-height: 1.4em;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    opacity: ${props => (props.isNewEntry ? 0.3 : 1)};
-`;
-
-export const EntryVersion = styled.span`
-    font-size: 20px;
-    color: var(--mdc-theme-text-secondary-on-background);
-    margin-left: 5px;
-    line-height: 120%;
-
-    @media (max-width: 800px) {
+    #cms-content-details-tabs > [role="tablist"] {
         display: none;
     }
 `;
 
-export const EntryMeta = styled.div`
-    height: 20px;
-    margin: -2px 2px 2px 2px;
-
-    @media (max-width: 960px) {
-        display: none;
-    }
-`;
+export const Container = ({
+    children,
+    className,
+    ...props
+}: React.HTMLAttributes<HTMLDivElement>) => {
+    return (
+        <Wrapper>
+            <div
+                className={cn(
+                    [
+                        "wby-bg-neutral-base",
+                        "wby-fixed wby-z-15 wby-top-0 wby-left-0",
+                        "wby-w-full wby-h-screen"
+                    ],
+                    className
+                )}
+                {...props}
+            >
+                {children}
+            </div>
+        </Wrapper>
+    );
+};
 
 /**
  * FORM
  */
-export const Content = styled.div`
-    overflow-y: scroll;
-    height: calc(100vh - 64px);
-    margin-top: 64px;
-`;
-
-export const ContentFormWrapper = styled.div`
-    display: flex;
-    justify-content: center;
-`;
+export const Content = ({
+    children,
+    className,
+    ...props
+}: React.HTMLAttributes<HTMLDivElement>) => {
+    return (
+        <div className={cn("wby-overflow-y-auto wby-h-main-content", className)} {...props}>
+            {children}
+        </div>
+    );
+};
+
+export const ContentFormWrapper = ({
+    children,
+    className,
+    ...props
+}: React.HTMLAttributes<HTMLDivElement>) => {
+    return (
+        <div className={cn("wby-flex wby-justify-center", className)} {...props}>
+            {children}
+        </div>
+    );
+};
 
 type ContentFormInnerProps = { width: string };
 
 export const ContentFormInner = styled.div<ContentFormInnerProps>`
     width: ${props => props.width};
 `;
-
-export const ContentFormInnerCss = css`
-    height: 100% !important;
-`;
diff --git a/packages/app-headless-cms/src/admin/views/contentEntries/ContentEntry/FullScreenContentEntry/FullScreenContentEntry.tsx b/packages/app-headless-cms/src/admin/views/contentEntries/ContentEntry/FullScreenContentEntry/FullScreenContentEntry.tsx
index 44ad72d9e2a..e858e40f109 100644
--- a/packages/app-headless-cms/src/admin/views/contentEntries/ContentEntry/FullScreenContentEntry/FullScreenContentEntry.tsx
+++ b/packages/app-headless-cms/src/admin/views/contentEntries/ContentEntry/FullScreenContentEntry/FullScreenContentEntry.tsx
@@ -1,6 +1,5 @@
 import React, { useState } from "react";
 import { createPortal } from "react-dom";
-import { CircularProgress } from "@webiny/ui/Progress";
 import { useContentEntry } from "~/admin/views/contentEntries/hooks";
 import { RevisionListDrawer } from "./RevisionListDrawer";
 import { FullScreenContentEntryHeaderLeft } from "./FullScreenContentEntryHeaderLeft";
@@ -9,6 +8,7 @@ import { FullScreenContentEntryProvider } from "./useFullScreenContentEntry";
 import { ContentEntryEditorConfig } from "~/ContentEntryEditorConfig";
 import { cmsLegacyEntryEditor } from "~/utils/cmsLegacyEntryEditor";
 import { useContentEntryEditorConfig } from "~/admin/config/contentEntries";
+import { HeaderBar, OverlayLoader } from "@webiny/admin-ui";
 
 const { ContentEntry } = ContentEntryEditorConfig;
 
@@ -24,19 +24,17 @@ const FullScreenContentEntryDecorator = ContentEntry.createDecorator(Original =>
                 isRevisionListOpen={isRevisionListOpen}
             >
                 <FSE.Container>
-                    <FSE.Header>
-                        <FSE.HeaderContent style={{ width: "33%" }}>
-                            <FullScreenContentEntryHeaderLeft />
-                        </FSE.HeaderContent>
-                        <FSE.HeaderContent>
-                            {/*
-                                Empty div to relocate Entry Form Header via React Portal in full-screen mode.
-                                Ensures layout flexibility without disrupting React context and state.
-                            */}
-                            <div id={"cms-content-entry-header-right"} />
-                        </FSE.HeaderContent>
-                    </FSE.Header>
-                    {loading && <CircularProgress style={{ zIndex: 10 }} />}
+                    <HeaderBar
+                        start={<FullScreenContentEntryHeaderLeft />}
+                        end={
+                            <div
+                                // Empty div to relocate Entry Form Header via React Portal in full-screen mode.
+                                // Ensures layout flexibility without disrupting React context and state.
+                                id={"cms-content-entry-header-right"}
+                            />
+                        }
+                    />
+                    {loading && <OverlayLoader className={"wby-z-10"} />}
                     <FSE.Content>
                         <FSE.ContentFormWrapper>
                             <FSE.ContentFormInner width={width}>
@@ -54,7 +52,7 @@ const FullScreenContentEntryDecorator = ContentEntry.createDecorator(Original =>
 const FullScreenContentEntryFormDecorator = ContentEntry.ContentEntryForm.createDecorator(
     Original => {
         return function ContentEntryForm(props) {
-            return <Original {...props} className={FSE.ContentFormInnerCss} />;
+            return <Original {...props} className={"wby-h-full"} />;
         };
     }
 );
diff --git a/packages/app-headless-cms/src/admin/views/contentEntries/ContentEntry/FullScreenContentEntry/FullScreenContentEntryHeaderLeft.tsx b/packages/app-headless-cms/src/admin/views/contentEntries/ContentEntry/FullScreenContentEntry/FullScreenContentEntryHeaderLeft.tsx
index 975e8f047a5..50669d94d89 100644
--- a/packages/app-headless-cms/src/admin/views/contentEntries/ContentEntry/FullScreenContentEntry/FullScreenContentEntryHeaderLeft.tsx
+++ b/packages/app-headless-cms/src/admin/views/contentEntries/ContentEntry/FullScreenContentEntry/FullScreenContentEntryHeaderLeft.tsx
@@ -1,28 +1,22 @@
 import React from "react";
-import { ReactComponent as BackIcon } from "@material-design-icons/svg/round/arrow_back.svg";
+import { ReactComponent as BackIcon } from "@webiny/icons/arrow_back.svg";
+import { ReactComponent as InfoIcon } from "@webiny/icons/info.svg";
 import { useNavigateFolder } from "@webiny/app-aco";
 import { makeDecoratable } from "@webiny/react-composition";
-import { IconButton } from "@webiny/ui/Button";
-import { Typography } from "@webiny/ui/Typography";
 import { useContentEntry } from "~/admin/views/contentEntries/hooks";
-import {
-    EntryMeta,
-    EntryTitle,
-    EntryVersion,
-    TitleWrapper,
-    EntryName
-} from "./FullScreenContentEntry.styled";
+import { cn, Heading, Icon, IconButton, Tooltip } from "@webiny/admin-ui";
 
 export const ContentEntryFormMeta = makeDecoratable("ContentEntryFormMeta", () => {
     const { entry, contentModel } = useContentEntry();
     const status = entry.meta?.status ?? null;
 
     return (
-        <EntryMeta>
-            <Typography use="overline">
-                {`Model: ${contentModel.name} ${status ? `(status: ${status})` : ""}`}
-            </Typography>
-        </EntryMeta>
+        <Tooltip
+            content={`Model: ${contentModel.name} ${status ? `- Status: ${status}` : ""}`}
+            trigger={
+                <Icon icon={<InfoIcon />} label={"Info"} size={"sm"} color={"neutral-light"} />
+            }
+        />
     );
 });
 
@@ -31,13 +25,16 @@ export const ContentEntryFormTitle = makeDecoratable("ContentEntryFormTitle", ()
 
     const title = entry?.meta?.title || `New ${contentModel.name}`;
     const isNewEntry = !entry.meta?.title;
-    const version = entry.meta?.version ?? null;
 
     return (
-        <EntryTitle>
-            <EntryName isNewEntry={isNewEntry}>{title}</EntryName>
-            {version && <EntryVersion>{`(v${version})`}</EntryVersion>}
-        </EntryTitle>
+        <Heading
+            level={5}
+            className={cn("wby-text-neutral-primary wby-max-w-lg wby-truncate", {
+                "wby-opacity-50": isNewEntry
+            })}
+        >
+            {title}
+        </Heading>
     );
 });
 
@@ -45,12 +42,14 @@ export const FullScreenContentEntryHeaderLeft = () => {
     const { navigateToFolder, currentFolderId } = useNavigateFolder();
 
     return (
-        <>
-            <IconButton onClick={() => navigateToFolder(currentFolderId)} icon={<BackIcon />} />
-            <TitleWrapper>
-                <ContentEntryFormMeta />
-                <ContentEntryFormTitle />
-            </TitleWrapper>
-        </>
+        <div className={"wby-flex wby-items-center wby-gap-sm"}>
+            <IconButton
+                variant={"ghost"}
+                onClick={() => navigateToFolder(currentFolderId)}
+                icon={<BackIcon />}
+            />
+            <ContentEntryFormTitle />
+            <ContentEntryFormMeta />
+        </div>
     );
 };
diff --git a/packages/app-headless-cms/src/admin/views/contentEntries/ContentEntry/FullScreenContentEntry/RevisionListDrawer/Header.tsx b/packages/app-headless-cms/src/admin/views/contentEntries/ContentEntry/FullScreenContentEntry/RevisionListDrawer/Header.tsx
deleted file mode 100644
index 8eec81d8e04..00000000000
--- a/packages/app-headless-cms/src/admin/views/contentEntries/ContentEntry/FullScreenContentEntry/RevisionListDrawer/Header.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from "react";
-import { ReactComponent as CloseIcon } from "@material-design-icons/svg/outlined/close.svg";
-import { SimpleFormHeader } from "@webiny/app-admin/components/SimpleForm";
-import { CloseButton } from "./RevisionListDrawer.styled";
-
-interface HeaderProps {
-    onClose: () => void;
-}
-
-export const Header = ({ onClose }: HeaderProps) => {
-    return (
-        <SimpleFormHeader title={"Entry revisions"}>
-            <CloseButton icon={<CloseIcon />} onClick={onClose} />
-        </SimpleFormHeader>
-    );
-};
diff --git a/packages/app-headless-cms/src/admin/views/contentEntries/ContentEntry/FullScreenContentEntry/RevisionListDrawer/RevisionListDrawer.styled.tsx b/packages/app-headless-cms/src/admin/views/contentEntries/ContentEntry/FullScreenContentEntry/RevisionListDrawer/RevisionListDrawer.styled.tsx
deleted file mode 100644
index f9ca52c29c2..00000000000
--- a/packages/app-headless-cms/src/admin/views/contentEntries/ContentEntry/FullScreenContentEntry/RevisionListDrawer/RevisionListDrawer.styled.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import styled from "@emotion/styled";
-import { IconButton } from "@webiny/ui/Button";
-import { DrawerRight } from "@webiny/ui/Drawer";
-
-export const Drawer = styled(DrawerRight)`
-    width: 1000px;
-    max-width: 100vw;
-    z-index: 25;
-
-    & ~ .mdc-drawer-scrim {
-        z-index: 24;
-    }
-`;
-
-export const CloseButton = styled(IconButton)`
-    position: absolute;
-    top: 15px;
-`;
diff --git a/packages/app-headless-cms/src/admin/views/contentEntries/ContentEntry/FullScreenContentEntry/RevisionListDrawer/RevisionListDrawer.tsx b/packages/app-headless-cms/src/admin/views/contentEntries/ContentEntry/FullScreenContentEntry/RevisionListDrawer/RevisionListDrawer.tsx
index 519a6e09a33..04df66ab210 100644
--- a/packages/app-headless-cms/src/admin/views/contentEntries/ContentEntry/FullScreenContentEntry/RevisionListDrawer/RevisionListDrawer.tsx
+++ b/packages/app-headless-cms/src/admin/views/contentEntries/ContentEntry/FullScreenContentEntry/RevisionListDrawer/RevisionListDrawer.tsx
@@ -1,12 +1,10 @@
 import React from "react";
 // @ts-expect-error
 import { useHotkeys } from "react-hotkeyz";
-import { DrawerContent } from "@webiny/ui/Drawer";
 import { RevisionsList } from "~/admin/views/contentEntries/ContentEntry/RevisionsList/RevisionsList";
 import { cmsLegacyEntryEditor } from "~/utils/cmsLegacyEntryEditor";
 import { useFullScreenContentEntry } from "../useFullScreenContentEntry";
-import { Header } from "./Header";
-import { Drawer } from "./RevisionListDrawer.styled";
+import { Drawer } from "@webiny/admin-ui";
 
 export const RevisionListDrawer = () => {
     const { isRevisionListOpen, openRevisionList } = useFullScreenContentEntry();
@@ -24,11 +22,16 @@ export const RevisionListDrawer = () => {
     });
 
     return (
-        <Drawer open={isRevisionListOpen} onClose={() => openRevisionList(false)} modal dismissible>
-            <DrawerContent>
-                <Header onClose={() => openRevisionList(false)} />
-                <RevisionsList />
-            </DrawerContent>
+        <Drawer
+            title={"Entry revisions"}
+            open={isRevisionListOpen}
+            onOpenChange={open => openRevisionList(open)}
+            modal
+            bodyPadding={false}
+            headerSeparator={true}
+            width={1000}
+        >
+            <RevisionsList />
         </Drawer>
     );
 };
diff --git a/packages/app-headless-cms/src/admin/views/contentEntries/ContentEntry/RevisionsList/PublishEntryRevisionListItem.tsx b/packages/app-headless-cms/src/admin/views/contentEntries/ContentEntry/RevisionsList/PublishEntryRevisionListItem.tsx
index 1fe74526577..b90e7eb0d07 100644
--- a/packages/app-headless-cms/src/admin/views/contentEntries/ContentEntry/RevisionsList/PublishEntryRevisionListItem.tsx
+++ b/packages/app-headless-cms/src/admin/views/contentEntries/ContentEntry/RevisionsList/PublishEntryRevisionListItem.tsx
@@ -1,21 +1,9 @@
-import { makeDecoratable } from "@webiny/react-composition";
-import { ListItemGraphic } from "@webiny/ui/List";
-import { Icon } from "@webiny/ui/Icon";
-import { ReactComponent as PublishIcon } from "~/admin/icons/publish.svg";
 import React from "react";
-import { i18n } from "@webiny/app/i18n";
-
-const t = i18n.ns("app-headless-cms/admin/plugins/content-details/content-revisions");
+import { DropdownMenu, type DropdownMenuItemProps } from "@webiny/admin-ui";
+import { makeDecoratable } from "@webiny/react-composition";
 
-const PublishEntryRevisionListItemComponent = () => {
-    return (
-        <>
-            <ListItemGraphic>
-                <Icon icon={<PublishIcon />} />
-            </ListItemGraphic>
-            {t`Publish revision`}
-        </>
-    );
+const PublishEntryRevisionListItemComponent = (props: DropdownMenuItemProps) => {
+    return <DropdownMenu.Item {...props} />;
 };
 
 export const PublishEntryRevisionListItem = makeDecoratable(
diff --git a/packages/app-headless-cms/src/admin/views/contentEntries/ContentEntry/RevisionsList/RevisionListItem.tsx b/packages/app-headless-cms/src/admin/views/contentEntries/ContentEntry/RevisionsList/RevisionListItem.tsx
index f82d2ce3d2a..e45519c38a4 100644
--- a/packages/app-headless-cms/src/admin/views/contentEntries/ContentEntry/RevisionsList/RevisionListItem.tsx
+++ b/packages/app-headless-cms/src/admin/views/contentEntries/ContentEntry/RevisionsList/RevisionListItem.tsx
@@ -1,26 +1,15 @@
 import React from "react";
-import { css } from "emotion";
 import { Date } from "@webiny/ui/DateTime";
-import {
-    ListItem,
-    ListItemText,
-    ListItemTextPrimary,
-    ListItemTextSecondary,
-    ListItemGraphic,
-    ListItemMeta
-} from "@webiny/ui/List";
-import { IconButton } from "@webiny/ui/Button";
-import { Icon } from "@webiny/ui/Icon";
-import { MenuItem, Menu, MenuDivider } from "@webiny/ui/Menu";
-import { Tooltip } from "@webiny/ui/Tooltip";
-import { ReactComponent as MoreVerticalIcon } from "~/admin/icons/more_vert.svg";
-import { ReactComponent as LockIcon } from "~/admin/icons/lock.svg";
-import { ReactComponent as BeenHereIcon } from "~/admin/icons/beenhere.svg";
-import { ReactComponent as GestureIcon } from "~/admin/icons/gesture.svg";
-import { ReactComponent as AddIcon } from "~/admin/icons/add.svg";
-import { ReactComponent as EditIcon } from "~/admin/icons/edit.svg";
-import { ReactComponent as UnpublishIcon } from "~/admin/icons/unpublish.svg";
-import { ReactComponent as DeleteIcon } from "~/admin/icons/delete.svg";
+import { DropdownMenu, Icon, IconButton, List, Tooltip } from "@webiny/admin-ui";
+import { ReactComponent as MoreVerticalIcon } from "@webiny/icons/more_vert.svg";
+import { ReactComponent as LockIcon } from "@webiny/icons/lock.svg";
+import { ReactComponent as BeenHereIcon } from "@webiny/icons/beenhere.svg";
+import { ReactComponent as GestureIcon } from "@webiny/icons/gesture.svg";
+import { ReactComponent as AddIcon } from "@webiny/icons/add.svg";
+import { ReactComponent as EditIcon } from "@webiny/icons/edit.svg";
+import { ReactComponent as PublishIcon } from "@webiny/icons/visibility.svg";
+import { ReactComponent as UnpublishIcon } from "@webiny/icons/visibility_off.svg";
+import { ReactComponent as DeleteIcon } from "@webiny/icons/delete.svg";
 import { CmsContentEntryRevision } from "~/types";
 import { i18n } from "@webiny/app/i18n";
 import { useRevision } from "./useRevision";
@@ -30,27 +19,26 @@ import { PublishEntryRevisionListItem } from "./PublishEntryRevisionListItem";
 
 const t = i18n.ns("app-headless-cms/admin/plugins/content-details/content-revisions");
 
-const primaryColor = css({ color: "var(--mdc-theme-primary)" });
-
-const revisionsMenu = css({
-    width: 300,
-    right: -105,
-    left: "auto !important"
-});
-
 const getIcon = (rev: CmsContentEntryRevision) => {
     switch (true) {
         case rev.meta.locked && rev.meta.status !== "published":
             return {
-                icon: <Icon icon={<LockIcon />} data-testid={"cms.revision.status.locked"} />,
+                icon: (
+                    <Icon
+                        label={"Locked revision"}
+                        icon={<LockIcon />}
+                        data-testid={"cms.revision.status.locked"}
+                    />
+                ),
                 text: "This revision is locked (it has already been published)"
             };
         case rev.meta.status === "published":
             return {
                 icon: (
                     <Icon
+                        label="Published revision"
                         icon={<BeenHereIcon />}
-                        className={primaryColor}
+                        color={"accent"}
                         data-testid={"cms.revision.status.published"}
                     />
                 ),
@@ -58,7 +46,13 @@ const getIcon = (rev: CmsContentEntryRevision) => {
             };
         default:
             return {
-                icon: <Icon icon={<GestureIcon />} data-testid={"cms.revision.status.draft"} />,
+                icon: (
+                    <Icon
+                        label={"Draft revision"}
+                        icon={<GestureIcon />}
+                        data-testid={"cms.revision.status.draft"}
+                    />
+                ),
                 text: "This is a draft"
             };
     }
@@ -69,7 +63,7 @@ interface RevisionListItemProps {
 }
 
 const RevisionListItem = ({ revision }: RevisionListItemProps) => {
-    const { createRevision, deleteRevision, publishRevision, unpublishRevision, editRevision } =
+    const { createRevision, deleteRevision, unpublishRevision, editRevision, publishRevision } =
         useRevision({
             revision
         });
@@ -79,87 +73,83 @@ const RevisionListItem = ({ revision }: RevisionListItemProps) => {
     const { icon, text: tooltipText } = getIcon(revision);
 
     return (
-        <ListItem>
-            <ListItemGraphic>
-                <Tooltip content={tooltipText} placement={"bottom"}>
-                    {icon}
-                </Tooltip>
-            </ListItemGraphic>
-            <ListItemText>
-                <ListItemTextPrimary>{revision.meta.title || t`N/A`}</ListItemTextPrimary>
-                <ListItemTextSecondary>
-                    {t`Last modified by {author} on {time} (#{version})`({
-                        // Added this because revisionCreatedBy can be returned as null from GraphQL.
-                        author: revision.revisionCreatedBy?.displayName,
-                        time: <Date date={revision.revisionSavedOn} />,
-                        version: revision.meta.version
-                    })}
-                </ListItemTextSecondary>
-            </ListItemText>
-            <ListItemMeta>
-                <Menu
-                    handle={<IconButton icon={<MoreVerticalIcon />} />}
-                    className={revisionsMenu}
+        <List.Item
+            icon={<Tooltip content={tooltipText} trigger={icon} />}
+            title={revision.meta.title || t`N/A`}
+            description={t`Last modified by {author} on {time} (#{version})`({
+                // Added this because revisionCreatedBy can be returned as null from GraphQL.
+                author: revision.revisionCreatedBy?.displayName,
+                time: <Date date={revision.revisionSavedOn} />,
+                version: revision.meta.version
+            })}
+            actions={
+                <DropdownMenu
+                    trigger={
+                        <IconButton
+                            variant={"ghost"}
+                            size={"sm"}
+                            iconSize={"lg"}
+                            icon={<MoreVerticalIcon />}
+                        />
+                    }
                     data-testid={"cms.content-form.revisions.more-options"}
                 >
-                    {canEdit(entry, "cms.contentEntry") && (
-                        <MenuItem
-                            onClick={() => createRevision()}
-                            data-testid={"cms.revision.create-revision"}
-                        >
-                            <ListItemGraphic>
-                                <Icon icon={<AddIcon />} />
-                            </ListItemGraphic>
-                            {t`New revision from current`}
-                        </MenuItem>
-                    )}
+                    <>
+                        {canEdit(entry, "cms.contentEntry") && (
+                            <DropdownMenu.Item
+                                onClick={() => createRevision()}
+                                data-testid={"cms.revision.create-revision"}
+                                icon={<AddIcon />}
+                                text={t`New revision from current`}
+                            />
+                        )}
 
-                    {!revision.meta.locked && canEdit(entry, "cms.contentEntry") && (
-                        <MenuItem
-                            onClick={() => {
-                                editRevision();
-                                setActiveTab(0);
-                            }}
-                        >
-                            <ListItemGraphic>
-                                <Icon icon={<EditIcon />} />
-                            </ListItemGraphic>
-                            {t`Edit revision`}
-                        </MenuItem>
-                    )}
+                        {!revision.meta.locked && canEdit(entry, "cms.contentEntry") && (
+                            <DropdownMenu.Item
+                                onClick={() => {
+                                    editRevision();
+                                    setActiveTab("content");
+                                }}
+                                icon={<EditIcon />}
+                                text={t`Edit revision`}
+                            />
+                        )}
 
-                    {revision.meta.status !== "published" && canPublish("cms.contentEntry") && (
-                        <MenuItem onClick={() => publishRevision()}>
-                            <PublishEntryRevisionListItem />
-                        </MenuItem>
-                    )}
+                        {revision.meta.status !== "published" && canPublish("cms.contentEntry") && (
+                            <PublishEntryRevisionListItem
+                                onClick={() => publishRevision()}
+                                icon={<PublishIcon />}
+                                text={t`Publish revision`}
+                            />
+                        )}
 
-                    {revision.meta.status === "published" && canUnpublish("cms.contentEntry") && (
-                        <MenuItem
-                            onClick={() => unpublishRevision()}
-                            data-testid={"cms.revision.unpublish"}
-                        >
-                            <ListItemGraphic>
-                                <Icon icon={<UnpublishIcon />} />
-                            </ListItemGraphic>
-                            {t`Unpublish revision`}
-                        </MenuItem>
-                    )}
+                        {revision.meta.status === "published" &&
+                            canUnpublish("cms.contentEntry") && (
+                                <DropdownMenu.Item
+                                    onClick={() => unpublishRevision()}
+                                    data-testid={"cms.revision.unpublish"}
+                                    icon={<UnpublishIcon />}
+                                    text={t`Unpublish revision`}
+                                />
+                            )}
 
-                    {!revision.meta.locked && canDelete(entry, "cms.contentEntry") && (
-                        <div>
-                            <MenuDivider />
-                            <MenuItem onClick={() => deleteRevision()}>
-                                <ListItemGraphic>
-                                    <Icon icon={<DeleteIcon />} />
-                                </ListItemGraphic>
-                                {t` Delete revision`}
-                            </MenuItem>
-                        </div>
-                    )}
-                </Menu>
-            </ListItemMeta>
-        </ListItem>
+                        {!revision.meta.locked && canDelete(entry, "cms.contentEntry") && (
+                            <>
+                                <DropdownMenu.Separator />
+                                <DropdownMenu.Item
+                                    onClick={() => deleteRevision()}
+                                    icon={<DeleteIcon />}
+                                    text={t` Delete revision`}
+                                    className={
+                                        "!wby-text-destructive-primary [&_svg]:wby-fill-destructive"
+                                    }
+                                />
+                            </>
+                        )}
+                    </>
+                </DropdownMenu>
+            }
+        />
     );
 };
 
diff --git a/packages/app-headless-cms/src/admin/views/contentEntries/ContentEntry/RevisionsList/RevisionsList.tsx b/packages/app-headless-cms/src/admin/views/contentEntries/ContentEntry/RevisionsList/RevisionsList.tsx
index 03bb9337591..6bea9d43401 100644
--- a/packages/app-headless-cms/src/admin/views/contentEntries/ContentEntry/RevisionsList/RevisionsList.tsx
+++ b/packages/app-headless-cms/src/admin/views/contentEntries/ContentEntry/RevisionsList/RevisionsList.tsx
@@ -1,51 +1,26 @@
 import React from "react";
-import { css } from "emotion";
-import { List } from "@webiny/ui/List";
-import { Elevation } from "@webiny/ui/Elevation";
-import { CircularProgress } from "@webiny/ui/Progress";
+import { List, OverlayLoader } from "@webiny/admin-ui";
 import { i18n } from "@webiny/app/i18n";
 import RevisionListItem from "./RevisionListItem";
 import { useContentEntry } from "~/admin/views/contentEntries/hooks/useContentEntry";
 
 const t = i18n.ns("app-headless-cms/admin/plugins/content-details/content-revisions");
 
-const style = {
-    list: css({
-        position: "relative",
-        margin: 25,
-        display: "flex",
-        flexDirection: "column",
-        overflow: "auto",
-        maxHeight: "calc(100vh - 160px)",
-        ".mdc-deprecated-list .mdc-deprecated-list-item": {
-            borderBottom: "1px solid var(--mdc-theme-on-background)"
-        },
-        ".mdc-deprecated-list .mdc-deprecated-list-item:last-child": {
-            borderBottom: "none"
-        }
-    }),
-    nothingToShow: css({
-        padding: 20,
-        margin: 25,
-        textAlign: "center"
-    })
-};
-
 export const RevisionsList = () => {
     const { entry, revisions, loading } = useContentEntry();
 
     return (
-        <Elevation className={style.list} z={2}>
-            {loading && <CircularProgress />}
+        <div className={"wby-relative"}>
+            {loading && <OverlayLoader />}
             {entry.id && revisions.length ? (
-                <List nonInteractive twoLine data-testid={"cms.content-form.revisions"}>
+                <List data-testid={"cms.content-form.revisions"}>
                     {revisions.map(revision => (
                         <RevisionListItem revision={revision} key={revision.id} />
                     ))}
                 </List>
             ) : (
-                <div className={style.nothingToShow}>{t`No revisions to show.`}</div>
+                <div className={"wby-p-lg"}>{t`No revisions to show.`}</div>
             )}
-        </Elevation>
+        </div>
     );
 };
diff --git a/packages/app-headless-cms/src/admin/views/contentEntries/ContentEntry/SingletonContentEntry.tsx b/packages/app-headless-cms/src/admin/views/contentEntries/ContentEntry/SingletonContentEntry.tsx
index fc5183e7d84..4dd222589f7 100644
--- a/packages/app-headless-cms/src/admin/views/contentEntries/ContentEntry/SingletonContentEntry.tsx
+++ b/packages/app-headless-cms/src/admin/views/contentEntries/ContentEntry/SingletonContentEntry.tsx
@@ -1,22 +1,17 @@
 import React from "react";
 import styled from "@emotion/styled";
-import { Elevation as BaseElevation } from "@webiny/ui/Elevation";
-import { CircularProgress } from "@webiny/ui/Progress";
+import { Grid, OverlayLoader } from "@webiny/admin-ui";
 import { ContentEntryForm } from "~/admin/components/ContentEntryForm/ContentEntryForm";
 import { makeDecoratable } from "@webiny/app";
 import { useSingletonContentEntry } from "../hooks/useSingletonContentEntry";
 import { PartialCmsContentEntryWithId } from "~/admin/contexts/Cms";
 import { SingletonHeader } from "~/admin/components/ContentEntryForm/SingletonHeader";
 
-const Elevation = styled(BaseElevation)`
-    height: 100%;
-    flex: 0 0 50%;
-`;
-
 const Container = styled.div`
-    display: flex;
-    padding: 25px;
-    justify-content: center;
+    // This is a workaround for the fact that the ContentEntryForm component is used by many views.
+    // It has no padding, so we need to override it here.
+    #cms-content-form {
+        padding: var(--padding-lg);
 `;
 
 export const SingletonContentEntry = makeDecoratable("SingletonContentEntry", () => {
@@ -24,16 +19,22 @@ export const SingletonContentEntry = makeDecoratable("SingletonContentEntry", ()
 
     return (
         <Container>
-            <Elevation z={2}>
-                {loading && <CircularProgress />}
-                <ContentEntryForm
-                    header={<SingletonHeader title={contentModel.name} />}
-                    entry={entry}
-                    persistEntry={entry =>
-                        updateEntry({ entry: entry as PartialCmsContentEntryWithId })
-                    }
-                />
-            </Elevation>
+            <div className={"wby-container wby-pt-lg"}>
+                <Grid>
+                    <Grid.Column span={10} offset={1}>
+                        <div className="wby-border-sm wby-border-b-none wby-border-neutral-dimmed-darker wby-rounded-t-3xl">
+                            {loading && <OverlayLoader />}
+                            <ContentEntryForm
+                                header={<SingletonHeader title={contentModel.name} />}
+                                entry={entry}
+                                persistEntry={entry =>
+                                    updateEntry({ entry: entry as PartialCmsContentEntryWithId })
+                                }
+                            />
+                        </div>
+                    </Grid.Column>
+                </Grid>
+            </div>
         </Container>
     );
 });
diff --git a/packages/app-headless-cms/src/admin/views/contentEntries/Table/Main.tsx b/packages/app-headless-cms/src/admin/views/contentEntries/Table/Main.tsx
index f075e62593b..f6c87deabb8 100644
--- a/packages/app-headless-cms/src/admin/views/contentEntries/Table/Main.tsx
+++ b/packages/app-headless-cms/src/admin/views/contentEntries/Table/Main.tsx
@@ -1,20 +1,17 @@
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import debounce from "lodash/debounce";
 import { useCreateDialog, useGetFolderLevelPermission } from "@webiny/app-aco";
-import { Scrollbar } from "@webiny/ui/Scrollbar";
+import { Scrollbar } from "@webiny/admin-ui";
 import { Empty } from "~/admin/components/ContentEntries/Empty";
 import { Filters } from "~/admin/components/ContentEntries/Filters";
 import { Header } from "~/admin/components/ContentEntries/Header";
-import { LoadingMore } from "~/admin/components/ContentEntries/LoadingMore";
 import { LoadMoreButton } from "~/admin/components/ContentEntries/LoadMoreButton";
 import { Table } from "~/admin/components/ContentEntries/Table";
-import { MainContainer, Wrapper } from "./styled";
 import { useContentEntriesList, useContentEntry } from "~/admin/views/contentEntries/hooks";
 import { ContentEntry } from "~/admin/views/contentEntries/ContentEntry";
 import { useRouter } from "@webiny/react-router";
 import { ROOT_FOLDER } from "~/admin/constants";
 import { BulkActions } from "~/admin/components/ContentEntries/BulkActions";
-import { SelectAll } from "~/admin/components/ContentEntries/SelectAll";
 import { BottomInfoBar } from "~/admin/components/ContentEntries/BottomInfoBar";
 
 interface MainProps {
@@ -23,6 +20,7 @@ interface MainProps {
 
 export const Main = ({ folderId: initialFolderId }: MainProps) => {
     const folderId = initialFolderId === undefined ? ROOT_FOLDER : initialFolderId;
+    const isRoot = initialFolderId === ROOT_FOLDER;
     const list = useContentEntriesList();
     const { showDialog: showCreateFolderDialog } = useCreateDialog();
 
@@ -84,8 +82,9 @@ export const Main = ({ folderId: initialFolderId }: MainProps) => {
 
     return (
         <>
-            <MainContainer>
+            <div className={"wby-h-full wby-relative wby-overflow-hidden"}>
                 <Header
+                    isRoot={isRoot}
                     title={!list.isListLoading ? list.listTitle : undefined}
                     canCreateFolder={canCreateFolder(folderId)}
                     canCreateContent={canCreateContent(folderId)}
@@ -94,9 +93,13 @@ export const Main = ({ folderId: initialFolderId }: MainProps) => {
                     searchValue={list.search}
                     onSearchChange={list.setSearch}
                 />
-                <BulkActions />
-                <Wrapper>
-                    <SelectAll />
+                <div
+                    className={
+                        "wby-w-full wby-overflow-hidden wby-absolute wby-top-0 wby-bottom-0 wby-left-0"
+                    }
+                    style={{ top: "105px" }}
+                >
+                    <BulkActions />
                     <Filters />
                     {list.records.length === 0 &&
                     list.folders.length === 0 &&
@@ -125,14 +128,14 @@ export const Main = ({ folderId: initialFolderId }: MainProps) => {
                             </Scrollbar>
                             <BottomInfoBar
                                 loading={list.isListLoading}
+                                loadingMore={list.isListLoadingMore}
                                 totalCount={list.meta.totalCount}
                                 currentCount={list.records.length}
                             />
-                            <LoadingMore show={list.isListLoadingMore} />
                         </>
                     )}
-                </Wrapper>
-            </MainContainer>
+                </div>
+            </div>
         </>
     );
 };
diff --git a/packages/app-headless-cms/src/admin/views/contentEntries/Table/Sidebar.tsx b/packages/app-headless-cms/src/admin/views/contentEntries/Table/Sidebar.tsx
index 9aae71b8e0a..21f02ce2785 100644
--- a/packages/app-headless-cms/src/admin/views/contentEntries/Table/Sidebar.tsx
+++ b/packages/app-headless-cms/src/admin/views/contentEntries/Table/Sidebar.tsx
@@ -1,79 +1,14 @@
 import React from "react";
-import styled from "@emotion/styled";
-import { FolderTree, useNavigateFolder } from "@webiny/app-aco";
-import { SidebarContainer, SidebarContent, SidebarFooter } from "./styled";
-import { Typography } from "@webiny/ui/Typography";
-import { Tooltip } from "@webiny/ui/Tooltip";
-import { Link } from "@webiny/react-router";
-import { useModel } from "~/admin/components/ModelProvider";
-import { i18n } from "@webiny/app/i18n";
-import { css } from "emotion";
-import { TrashBin } from "~/admin/components/ContentEntries/TrashBin/components/TrashBin";
-
-const t = i18n.ns("app-headless-cms/admin/content-entries/table");
-
-const ModelName = styled.div`
-    font-family: var(--mdc-typography-font-family);
-    padding: 10px 0;
-    font-size: 24px;
-`;
-
-const ModelId = styled("span")({
-    color: "var(--mdc-theme-text-secondary-on-background)"
-});
-
-const disabled = css({
-    color: "rgba(0, 0, 0, 0.54)",
-    cursor: "default"
-});
-
-interface SidebarProps {
-    folderId?: string;
-}
-
-export const Sidebar = ({ folderId }: SidebarProps) => {
-    const { navigateToFolder } = useNavigateFolder();
-
-    const { model } = useModel();
+import { SidebarHeader } from "~/admin/components/ContentEntries/SidebarHeader";
+import { SidebarContent } from "~/admin/components/ContentEntries/SidebarContent";
+import { SidebarFooter } from "~/admin/components/ContentEntries/SidebarFooter/SidebarFooter";
 
+export const Sidebar = () => {
     return (
-        <SidebarContainer>
-            <SidebarContent>
-                <ModelName>
-                    {model.name}
-                    <br />
-                    <Typography use={"subtitle1"}>
-                        <ModelId>
-                            Model ID:{" "}
-                            {model.plugin ? (
-                                <Tooltip
-                                    content={t`Content model is registered via a plugin.`}
-                                    placement={"top"}
-                                >
-                                    <Link to="#" className={disabled}>
-                                        {model.modelId}
-                                    </Link>
-                                </Tooltip>
-                            ) : (
-                                <Tooltip content={t`Edit content model`} placement={"top"}>
-                                    <Link to={`/cms/content-models/${model.modelId}`}>
-                                        {model.modelId}
-                                    </Link>
-                                </Tooltip>
-                            )}
-                        </ModelId>
-                    </Typography>
-                </ModelName>
-                <FolderTree
-                    focusedFolderId={folderId}
-                    onFolderClick={data => navigateToFolder(data.id)}
-                    enableActions={true}
-                    enableCreate={true}
-                />
-            </SidebarContent>
-            <SidebarFooter>
-                <TrashBin />
-            </SidebarFooter>
-        </SidebarContainer>
+        <div className={"wby-flex wby-flex-col wby-h-main-content"}>
+            <SidebarHeader />
+            <SidebarContent />
+            <SidebarFooter />
+        </div>
     );
 };
diff --git a/packages/app-headless-cms/src/admin/views/contentEntries/Table/index.tsx b/packages/app-headless-cms/src/admin/views/contentEntries/Table/index.tsx
index 7aab35719c9..41812cacd5f 100644
--- a/packages/app-headless-cms/src/admin/views/contentEntries/Table/index.tsx
+++ b/packages/app-headless-cms/src/admin/views/contentEntries/Table/index.tsx
@@ -38,7 +38,7 @@ const View = () => {
     return (
         <SplitView layoutId={layoutId}>
             <LeftPanel span={2}>
-                <Sidebar folderId={currentFolderId} />
+                <Sidebar />
             </LeftPanel>
             <RightPanel span={10}>
                 <ContentEntryProvider currentFolderId={currentFolderId}>
diff --git a/packages/app-headless-cms/src/admin/views/contentEntries/Table/styled.tsx b/packages/app-headless-cms/src/admin/views/contentEntries/Table/styled.tsx
deleted file mode 100644
index 7ac85133359..00000000000
--- a/packages/app-headless-cms/src/admin/views/contentEntries/Table/styled.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import styled from "@emotion/styled";
-
-export const MainContainer = styled("div")`
-    overflow: hidden;
-    position: relative;
-    height: 100%;
-`;
-
-export const Wrapper = styled("div")`
-    width: 100%;
-    position: absolute;
-    top: 64px;
-    bottom: 0;
-    left: 0;
-    border-radius: 4px;
-    overflow: hidden;
-
-    .mdc-data-table {
-        display: inline-table;
-    }
-`;
-
-export const SidebarContainer = styled("div")`
-    height: calc(100vh - 64px);
-    background: var(--mdc-theme-surface);
-    border-right: 1px solid var(--mdc-theme-on-background);
-    position: relative;
-`;
-
-export const SidebarContent = styled("div")`
-    height: calc(100vh - 136px);
-    overflow-y: scroll;
-    padding: 8px;
-`;
-
-export const SidebarFooter = styled("div")`
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    background: var(--mdc-theme-surface);
-    border-top: 1px solid var(--mdc-theme-on-background);
-`;
diff --git a/packages/app-headless-cms/src/admin/views/contentEntries/ValidationIndicators.tsx b/packages/app-headless-cms/src/admin/views/contentEntries/ValidationIndicators.tsx
index f12438acbd6..485bae202dc 100644
--- a/packages/app-headless-cms/src/admin/views/contentEntries/ValidationIndicators.tsx
+++ b/packages/app-headless-cms/src/admin/views/contentEntries/ValidationIndicators.tsx
@@ -3,242 +3,106 @@ import type { FormValidation } from "@webiny/form";
 import { makeDecoratable } from "@webiny/react-composition";
 import { Global, css } from "@emotion/react";
 
-// To customize the color and icon, define a CSS variable within the validation class:
+// To customize the icon, define a CSS variable within the validation class:
 // .wby-content-entry-invalid-field {
-//     --error-color: blue;
 //     --error-icon: "🤔"
 // }
+// To customize the border color, use the Admin UI Colors APIs to override the default `destructive` color palette.
 
-const errorColor = `var(--error-color, #fa5723)`;
+const errorColor = `hsl(var(--border-destructive-default))`;
 const errorIcon = `var(--error-icon, "⚠️")`;
 
 const errorTitleMixin = `
-    content: ${errorIcon};
-    margin-right: 5px;
+    content: ${errorIcon}!important;
+    margin-right: var(--spacing-xs-plus)!important;
+`;
+
+const noErrorTitleMixin = `
+    content: "";
+    margin: 0;
 `;
 
 const errorBorderMixin = `
-    border-left: 5px solid ${errorColor};
-    padding-left: 10px;
-    border-top-left-radius: 5px; 
-    border-bottom-left-radius: 5px;
+    border: 1px solid ${errorColor};
 `;
 
 const defaultClass = css`
-    // default behavior for error fields
     .wby-content-entry-invalid-field {
-        ${errorBorderMixin}
-    }
-
-    // reset the default behavior for fields that we want to manually control
-    .wby-content-entry-invalid-field[data-field-type="text"],
-    .wby-content-entry-invalid-field[data-field-type="number"],
-    .wby-content-entry-invalid-field[data-field-type="datetime"],
-    .wby-content-entry-invalid-field[data-field-type="long-text"],
-    .wby-content-entry-invalid-field[data-field-type="dynamicZone"],
-    .wby-content-entry-invalid-field[data-field-type="object"],
-    .wby-content-entry-invalid-field[data-field-type="ref"],
-    .wby-content-entry-invalid-field[data-field-type="file"] {
-        border: none;
-        padding-left: 0;
-        border-radius: 0;
-    }
-
-    // short text error
-    // long text error
-    // number error
-    // checkbox error
-    // select error
-    // date time error
-    .wby-content-entry-invalid-field[data-field-type="text"],
-    .wby-content-entry-invalid-field[data-field-type="ref"][data-field-renderer="ref-input"],
-    .wby-content-entry-invalid-field[data-field-type="number"],
-    .wby-content-entry-invalid-field[data-field-type="datetime"],
-    .wby-content-entry-invalid-field[data-field-type="long-text"] {
-        // input renderer
-        &[data-field-multiple-values="false"]:not([data-field-renderer="radio-buttons"])
-            label:first-of-type,
-        &[data-field-multiple-values="true"] > hcms-parent-field-provider,
-        > label {
-            ${errorBorderMixin}
-            .mdc-floating-label {
-                left: 12px;
-            }
+        // Default fields
+        .webiny_label-invalid {
+            left: var(--spacing-sm-extra);
 
-            .mdc-floating-label::before {
+            .webiny_label-text::before {
                 ${errorTitleMixin}
             }
         }
 
-        &[data-field-multiple-values="true"] > hcms-parent-field-provider {
-            display: block;
+        // accordion
+        .webiny_accordion-item-title::before {
+            ${errorTitleMixin}
+        }
+        .webiny_accordion-title-text::before {
+            ${errorTitleMixin}
         }
 
         // multiple entries
-        > hcms-parent-field-provider h5::before {
+        > hcms-parent-field-provider .webiny_group-label-text::before {
             ${errorTitleMixin}
         }
 
         // radio buttons
         &[data-field-renderer="radio-buttons"] {
-            > div:first-of-type::before {
-                ${errorTitleMixin}
-                padding-right: 10px;
-            }
-            ${errorBorderMixin}
-        }
-
-        // select box
-        &[data-field-renderer="select-box"] {
-            .mdc-floating-label::before {
-                ${errorTitleMixin}
-            }
-
-            .webiny-ui-select {
-                ${errorBorderMixin}
-                padding-left: 0;
-                box-sizing: border-box;
+            [role="radiogroup"] .webiny_label-text::before {
+                ${noErrorTitleMixin}
             }
         }
 
         // checkboxes
         &[data-field-renderer="checkboxes"] {
-            > div:first-of-type::before {
-                ${errorTitleMixin}
-                padding-right: 10px;
+            [role="checkbox"] + label .webiny_label-text::before {
+                ${noErrorTitleMixin}
             }
-            ${errorBorderMixin}
         }
     }
 
     // reference field
-    .wby-content-entry-invalid-field[data-field-type="ref"][data-field-multiple-values="false"] {
-        h3::before,
-        h5::before {
+    .wby-content-entry-invalid-field[data-field-type="ref"] {
+        .webiny_group-label-text::before {
             ${errorTitleMixin}
         }
 
-        &:not([data-field-renderer="ref-input"]) {
+        .webiny_ref-field-container {
             ${errorBorderMixin}
         }
 
-        .wby-content-entry-invalid-field[data-field-type="dynamicZone"] {
-            padding-left: 0px;
-        }
-    }
-
-    // dynamic zone
-    .wby-content-entry-invalid-field[data-field-type="dynamicZone"] {
-        ul > div > li::before {
-            ${errorTitleMixin}
-        }
-
-        ${errorBorderMixin}
-
-        .wby-content-entry-invalid-field[data-field-type="dynamicZone"] {
-            padding-left: 0px;
-        }
+        &[data-field-renderer="ref-simple-single"] {
+            [role="radiogroup"] .webiny_label-text::before {
+                ${noErrorTitleMixin}
+            }
 
-        hcms-parent-field-provider .wby-content-entry-invalid-field {
-            li > .webiny-ui-accordion-item__title {
-                font-weight: bold;
-                color: ${errorColor};
+            [role="checkbox"] + label .webiny_label-text::before {
+                ${noErrorTitleMixin}
             }
         }
     }
 
-    // object field
+    // Object field
     .wby-content-entry-invalid-field[data-field-type="object"] {
         &[data-field-renderer="object"],
         &[data-field-renderer="objects"] {
-            h5::before,
-            ul > div > li::before {
-                ${errorTitleMixin}
-            }
-
-            hcms-parent-field-provider {
-                ${errorBorderMixin}
-
-                // object field (multiple values)
-                .wby-content-entry-invalid-field {
-                    border: none;
-                    padding-left: 0;
-                    .accordion-title > span {
-                        font-weight: bold;
-                        color: ${errorColor};
-                        ::before {
-                            ${errorTitleMixin}
-                        }
-                    }
-                }
-            }
-        }
-
-        &[data-field-renderer="object-accordion"],
-        &[data-field-renderer="objects-accordion"] {
-            ul > div > li::before {
+            .webiny_group-label-text::before {
                 ${errorTitleMixin}
-                display: contents;
             }
 
-            ${errorBorderMixin}
-
-            &[data-field-multiple-values="false"] {
-                padding-left: 0px;
-            }
+            label {
+                left: 0;
 
-            &[data-field-multiple-values="true"] {
-                .wby-content-entry-invalid-field {
-                    border: none;
-                    padding-left: 0;
-                    // object field (multiple values)
-                    .accordion-title > span {
-                        font-weight: bold;
-                        color: ${errorColor};
-                        ::before {
-                            ${errorTitleMixin}
-                        }
-                    }
+                .webiny_label-text::before {
+                    ${noErrorTitleMixin}
                 }
             }
         }
     }
-
-    // file error
-    .wby-content-entry-invalid-field[data-field-type="file"] {
-        &[data-field-multiple-values="false"] > div > div:first-of-type {
-            > span::before {
-                ${errorTitleMixin}
-            }
-
-            ${errorBorderMixin}
-        }
-
-        &[data-field-multiple-values="true"] {
-            > div > div > p::before {
-                ${errorTitleMixin}
-            }
-
-            ${errorBorderMixin}
-        }
-    }
-
-    .wby-content-entry-invalid-field > .webiny-ui-accordion {
-        margin-left: -10px;
-    }
-
-    .webiny-ui-accordion:has(.wby-content-entry-invalid-field) {
-        border-radius: 5px;
-    }
-
-    .wby-content-entry-invalid-field .webiny-ui-accordion-item {
-        border-radius: 5px;
-    }
-
-    // We don't want to add padding, if we're a direct child of an "ul".
-    ul > .wby-content-entry-invalid-field {
-        padding-left: 0px;
-    }
 `;
 
 export interface ValidationIndicatorsProps {
diff --git a/packages/app-headless-cms/src/admin/views/contentModelGroups/ContentModelGroups.tsx b/packages/app-headless-cms/src/admin/views/contentModelGroups/ContentModelGroups.tsx
index f592acf3c1d..70bea6cb5fe 100644
--- a/packages/app-headless-cms/src/admin/views/contentModelGroups/ContentModelGroups.tsx
+++ b/packages/app-headless-cms/src/admin/views/contentModelGroups/ContentModelGroups.tsx
@@ -27,7 +27,9 @@ const ContentModelGroups = () => {
                 <ContentModelGroupsDataList canCreate={canCreate} />
             </LeftPanel>
             <RightPanel span={8}>
-                <ContentModelGroupsForm canCreate={canCreate} />
+                <div className={"wby-w-full wby-overflow-y-auto wby-h-main-content"}>
+                    <ContentModelGroupsForm canCreate={canCreate} />
+                </div>
             </RightPanel>
         </SplitView>
     );
diff --git a/packages/app-headless-cms/src/admin/views/contentModelGroups/ContentModelGroupsDataList.tsx b/packages/app-headless-cms/src/admin/views/contentModelGroups/ContentModelGroupsDataList.tsx
index af88535c8e1..120e870fd2d 100644
--- a/packages/app-headless-cms/src/admin/views/contentModelGroups/ContentModelGroupsDataList.tsx
+++ b/packages/app-headless-cms/src/admin/views/contentModelGroups/ContentModelGroupsDataList.tsx
@@ -3,6 +3,7 @@ import get from "lodash/get";
 import orderBy from "lodash/orderBy";
 import dotProp from "dot-prop-immutable";
 import { i18n } from "@webiny/app/i18n";
+import { ReactComponent as AddIcon } from "@webiny/icons/add.svg";
 import { DeleteIcon } from "@webiny/ui/List/DataList/icons";
 import {
     DataList,
@@ -13,6 +14,7 @@ import {
     ListItem,
     ListItemMeta,
     ListItemText,
+    ListItemTextPrimary,
     ListItemTextSecondary
 } from "@webiny/ui/List";
 import { useRouter } from "@webiny/react-router";
@@ -21,16 +23,11 @@ import { useApolloClient, useQuery } from "../../hooks";
 import { useConfirmationDialog } from "@webiny/app-admin/hooks/useConfirmationDialog";
 import * as GQL from "./graphql";
 import { CmsGroupWithModels, ListCmsGroupsQueryResponse } from "./graphql";
-import { ButtonIcon, ButtonSecondary } from "@webiny/ui/Button";
-import { Cell, Grid } from "@webiny/ui/Grid";
-import { Select } from "@webiny/ui/Select";
 import SearchUI from "@webiny/app-admin/components/SearchUI";
-import { ReactComponent as AddIcon } from "@webiny/app-admin/assets/icons/add-18px.svg";
-import { ReactComponent as FilterIcon } from "@webiny/app-admin/assets/icons/filter-24px.svg";
 import { deserializeSorters } from "../utils";
 import usePermission from "../../hooks/usePermission";
-import { Tooltip } from "@webiny/ui/Tooltip";
 import { CmsGroup } from "~/types";
+import { Button, Select, Tooltip } from "@webiny/admin-ui";
 
 const t = i18n.ns("app-headless-cms/admin/content-model-groups/data-list");
 
@@ -150,24 +147,16 @@ const ContentModelGroupsDataList = ({ canCreate }: ContentModelGroupsDataListPro
     const contentModelGroupsDataListModalOverlay = useMemo(
         () => (
             <DataListModalOverlay>
-                <Grid>
-                    <Cell span={12}>
-                        <Select
-                            value={sort}
-                            onChange={setSort}
-                            label={t`Sort by`}
-                            description={"Sort groups by"}
-                        >
-                            {SORTERS.map(({ label, sorters }) => {
-                                return (
-                                    <option key={label} value={sorters}>
-                                        {label}
-                                    </option>
-                                );
-                            })}
-                        </Select>
-                    </Cell>
-                </Grid>
+                <Select
+                    value={sort}
+                    onChange={setSort}
+                    label={t`Sort by`}
+                    description={"Sort groups by"}
+                    options={SORTERS.map(sorter => ({
+                        label: sorter.label,
+                        value: sorter.sorters
+                    }))}
+                />
             </DataListModalOverlay>
         ),
         [sort]
@@ -184,30 +173,29 @@ const ContentModelGroupsDataList = ({ canCreate }: ContentModelGroupsDataListPro
         <DataList
             loading={listQuery.loading}
             data={contentModelGroups}
-            title={t`Content Model Groups`}
+            title={t`Content model groups`}
             actions={
                 canCreate ? (
-                    <ButtonSecondary
-                        data-testid="new-record-button"
+                    <Button
+                        data-testid="new-group-button"
                         onClick={() => history.push("/cms/content-model-groups?new=true")}
-                    >
-                        <ButtonIcon icon={<AddIcon />} /> {t`New Group`}
-                    </ButtonSecondary>
+                        text={t`New`}
+                        icon={<AddIcon />}
+                        size={"sm"}
+                        className={"wby-ml-xs"}
+                    />
                 ) : null
             }
             search={
                 <SearchUI
                     value={filter}
                     onChange={setFilter}
-                    inputPlaceholder={t`Search content model group`}
+                    inputPlaceholder={t`Search content model group...`}
                 />
             }
             modalOverlay={contentModelGroupsDataListModalOverlay}
             modalOverlayAction={
-                <DataListModalOverlayAction
-                    icon={<FilterIcon />}
-                    data-testid={"default-data-list.filter"}
-                />
+                <DataListModalOverlayAction data-testid={"default-data-list.filter"} />
             }
             refresh={onRefreshClick}
         >
@@ -220,7 +208,7 @@ const ContentModelGroupsDataList = ({ canCreate }: ContentModelGroupsDataListPro
                                     history.push(`/cms/content-model-groups?id=${item.id}`)
                                 }
                             >
-                                {item.name}
+                                <ListItemTextPrimary>{item.name}</ListItemTextPrimary>
                                 <ListItemTextSecondary>
                                     {item.contentModels.length
                                         ? t`{contentModels|count:1:content model:default:content models}`(
@@ -239,15 +227,16 @@ const ContentModelGroupsDataList = ({ canCreate }: ContentModelGroupsDataListPro
                                                 content={
                                                     "Content model group is registered via a plugin."
                                                 }
-                                                placement={"bottom"}
-                                            >
-                                                <DeleteIcon
-                                                    disabled
-                                                    data-testid={
-                                                        "cms.contentModelGroup.list-item.delete"
-                                                    }
-                                                />
-                                            </Tooltip>
+                                                side={"bottom"}
+                                                trigger={
+                                                    <DeleteIcon
+                                                        disabled
+                                                        data-testid={
+                                                            "cms.contentModelGroup.list-item.delete"
+                                                        }
+                                                    />
+                                                }
+                                            />
                                         ) : (
                                             <DeleteIcon
                                                 onClick={() => deleteItem(item)}
diff --git a/packages/app-headless-cms/src/admin/views/contentModelGroups/ContentModelGroupsForm.tsx b/packages/app-headless-cms/src/admin/views/contentModelGroups/ContentModelGroupsForm.tsx
index bcf7d860267..f085c8f7ce9 100644
--- a/packages/app-headless-cms/src/admin/views/contentModelGroups/ContentModelGroupsForm.tsx
+++ b/packages/app-headless-cms/src/admin/views/contentModelGroups/ContentModelGroupsForm.tsx
@@ -1,12 +1,8 @@
 import React, { useCallback } from "react";
-import styled from "@emotion/styled";
+import { ReactComponent as DevicesIcon } from "@webiny/icons/devices_other.svg";
 import isEmpty from "lodash/isEmpty";
 import get from "lodash/get";
 import { Form, FormRenderPropParams } from "@webiny/form";
-import { Grid, Cell } from "@webiny/ui/Grid";
-import { Input } from "@webiny/ui/Input";
-import { ButtonDefault, ButtonIcon, ButtonPrimary } from "@webiny/ui/Button";
-import { CircularProgress } from "@webiny/ui/Progress";
 import { i18n } from "@webiny/app/i18n";
 import { validation } from "@webiny/validation";
 
@@ -35,12 +31,9 @@ import {
     UpdateCmsGroupMutationResponse,
     UpdateCmsGroupMutationVariables
 } from "./graphql";
+import { Button, Grid, Input, OverlayLoader, Textarea } from "@webiny/admin-ui";
 
 const t = i18n.ns("app-headless-cms/admin/content-model-groups/form");
-const ButtonWrapper = styled("div")({
-    display: "flex",
-    justifyContent: "space-between"
-});
 
 interface ContentModelGroupsFormProps {
     canCreate: boolean;
@@ -173,17 +166,18 @@ const ContentModelGroupsForm = ({ canCreate }: ContentModelGroupsFormProps) => {
     if (showEmptyView) {
         return (
             <EmptyView
+                icon={<DevicesIcon />}
                 title={t`Click on the left side list to display group details {message}`({
                     message: canCreate ? "or create a..." : ""
                 })}
                 action={
                     canCreate ? (
-                        <ButtonDefault
+                        <Button
+                            text={t`New Group`}
+                            icon={<AddIcon />}
                             data-testid="new-record-button"
                             onClick={() => history.push("/cms/content-model-groups?new=true")}
-                        >
-                            <ButtonIcon icon={<AddIcon />} /> {t`New Group`}
-                        </ButtonDefault>
+                        />
                     ) : (
                         <></>
                     )
@@ -197,67 +191,75 @@ const ContentModelGroupsForm = ({ canCreate }: ContentModelGroupsFormProps) => {
             {({ data, form, Bind }: FormRenderPropParams<CmsGroup>) => (
                 <SimpleForm data-testid={"pb-content-model-groups-form"}>
                     <SimpleFormHeader title={data.name ? data.name : t`New content model group`} />
-                    {loading && <CircularProgress />}
+                    {loading && <OverlayLoader />}
                     <SimpleFormContent>
                         <Grid>
-                            <Cell span={12}>
+                            <Grid.Column span={12}>
                                 <Bind
                                     name="name"
                                     validators={validation.create("required,maxLength:100")}
                                 >
-                                    <Input data-testid={"cms.form.group.name"} label={t`Name`} />
+                                    <Input
+                                        size={"lg"}
+                                        data-testid={"cms.form.group.name"}
+                                        label={t`Name`}
+                                    />
                                 </Bind>
-                            </Cell>
+                            </Grid.Column>
 
-                            <Cell span={12}>
+                            <Grid.Column span={12}>
                                 <Bind name="icon" validators={validation.create("required")}>
                                     <IconPicker
                                         label={t`Group icon`}
                                         description={t`Icon that will be displayed in the main menu.`}
                                     />
                                 </Bind>
-                            </Cell>
-                            <Cell span={12}>
+                            </Grid.Column>
+                            <Grid.Column span={12}>
                                 <Bind name="description">
-                                    <Input
+                                    <Textarea
+                                        size={"lg"}
                                         data-testid={"cms.form.group.description"}
                                         rows={5}
                                         label={t`Description`}
                                     />
                                 </Bind>
-                            </Cell>
+                            </Grid.Column>
                         </Grid>
                     </SimpleFormContent>
                     <SimpleFormFooter>
-                        <ButtonWrapper>
-                            <ButtonDefault
-                                onClick={() => history.push("/cms/content-model-groups")}
-                            >{t`Cancel`}</ButtonDefault>
+                        <Button
+                            variant={"secondary"}
+                            text={t`Cancel`}
+                            onClick={() => history.push("/cms/content-model-groups")}
+                        />
 
-                            {canEdit(data, "cms.contentModelGroup") && (
-                                <React.Fragment>
-                                    {!data.plugin ? (
-                                        <ButtonPrimary
-                                            onClick={ev => {
-                                                form.submit(ev);
-                                            }}
+                        {canEdit(data, "cms.contentModelGroup") && (
+                            <React.Fragment>
+                                {!data.plugin ? (
+                                    <Button
+                                        variant={"primary"}
+                                        text={t`Save`}
+                                        onClick={ev => {
+                                            form.submit(ev);
+                                        }}
+                                        data-testid={"cms.form.group.submit"}
+                                    />
+                                ) : (
+                                    <Tooltip
+                                        content={"Content model group is registered via a plugin."}
+                                        placement={"bottom"}
+                                    >
+                                        <Button
+                                            disabled
+                                            variant={"primary"}
+                                            text={t`Save`}
                                             data-testid={"cms.form.group.submit"}
-                                        >{t`Save content model group`}</ButtonPrimary>
-                                    ) : (
-                                        <Tooltip
-                                            content={
-                                                "Content model group is registered via a plugin."
-                                            }
-                                            placement={"bottom"}
-                                        >
-                                            <ButtonPrimary
-                                                disabled
-                                            >{t`Save content model group`}</ButtonPrimary>
-                                        </Tooltip>
-                                    )}
-                                </React.Fragment>
-                            )}
-                        </ButtonWrapper>
+                                        />
+                                    </Tooltip>
+                                )}
+                            </React.Fragment>
+                        )}
                     </SimpleFormFooter>
                 </SimpleForm>
             )}
diff --git a/packages/app-headless-cms/src/admin/views/contentModels/ContentModels.tsx b/packages/app-headless-cms/src/admin/views/contentModels/ContentModels.tsx
index f9429e10f78..e77604abc5f 100644
--- a/packages/app-headless-cms/src/admin/views/contentModels/ContentModels.tsx
+++ b/packages/app-headless-cms/src/admin/views/contentModels/ContentModels.tsx
@@ -2,39 +2,10 @@ import React, { useCallback, useMemo, useState } from "react";
 import { CloneContentModelDialog } from "./CloneContentModelDialog";
 import NewContentModelDialog from "./NewContentModelDialog";
 import ContentModelsDataList from "./ContentModelsDataList";
-import { css } from "emotion";
 import { useSecurity } from "@webiny/app-security";
-import { Cell, Grid } from "@webiny/ui/Grid";
 import { CmsModel, CmsSecurityPermission } from "~/types";
 import { ImportContentModelsDialog } from "./importing/ImportContentModelsDialog";
-
-const grid = css({
-    "&.mdc-layout-grid": {
-        padding: 0,
-        backgroundColor: "var(--mdc-theme-background)",
-        ">.mdc-layout-grid__inner": {
-            gridGap: 0
-        }
-    }
-});
-
-const centeredContent = css({
-    backgroundColor: "var(--mdc-theme-surface)",
-    ">.webiny-data-list": {
-        display: "flex",
-        flexDirection: "column",
-        height: "calc(100vh - 70px)",
-        ".mdc-deprecated-list": {
-            overflow: "auto"
-        }
-    },
-    ">.mdc-deprecated-list": {
-        display: "flex",
-        flexDirection: "column",
-        maxHeight: "calc(100vh - 70px)",
-        overflow: "auto"
-    }
-});
+import { Grid } from "@webiny/admin-ui";
 
 const ContentModels = () => {
     const [newContentModelDialogOpened, openNewContentModelDialog] = React.useState(false);
@@ -77,7 +48,19 @@ const ContentModels = () => {
     }, []);
 
     return (
-        <>
+        <div className={"wby-container wby-h-main-content"}>
+            <Grid className="wby-h-full wby-pt-lg">
+                <Grid.Column span={10} offset={1}>
+                    <div className="wby-h-full wby-border-sm wby-border-b-none wby-border-neutral-dimmed-darker wby-rounded-t-3xl">
+                        <ContentModelsDataList
+                            showImportModelModal={showImportModelModal}
+                            canCreate={canCreate}
+                            onCreate={onCreate}
+                            onClone={onClone}
+                        />
+                    </div>
+                </Grid.Column>
+            </Grid>
             <NewContentModelDialog open={newContentModelDialogOpened} onClose={onClose} />
             {cloneContentModel && (
                 <CloneContentModelDialog
@@ -87,19 +70,7 @@ const ContentModels = () => {
                 />
             )}
             {importModels && <ImportContentModelsDialog onClose={closeImportModelModal} />}
-            <Grid className={grid}>
-                <Cell span={3} />
-                <Cell span={6} className={centeredContent}>
-                    <ContentModelsDataList
-                        showImportModelModal={showImportModelModal}
-                        canCreate={canCreate}
-                        onCreate={onCreate}
-                        onClone={onClone}
-                    />
-                </Cell>
-                <Cell span={3} />
-            </Grid>
-        </>
+        </div>
     );
 };
 
diff --git a/packages/app-headless-cms/src/admin/views/contentModels/ContentModelsDataList.tsx b/packages/app-headless-cms/src/admin/views/contentModels/ContentModelsDataList.tsx
index 64a2a56c33f..ceac674e782 100644
--- a/packages/app-headless-cms/src/admin/views/contentModels/ContentModelsDataList.tsx
+++ b/packages/app-headless-cms/src/admin/views/contentModels/ContentModelsDataList.tsx
@@ -3,34 +3,31 @@
  */
 import React, { useCallback, useMemo, useState } from "react";
 import { TimeAgo } from "@webiny/ui/TimeAgo";
-import { css } from "emotion";
 import { useRouter } from "@webiny/react-router";
-import { DeleteIcon, EditIcon } from "@webiny/ui/List/DataList/icons";
-import { ReactComponent as ViewListIcon } from "../../icons/view_list.svg";
-import { ReactComponent as CloneIcon } from "../../icons/clone.svg";
+import { ReactComponent as AddIcon } from "@webiny/icons/add.svg";
+import { ReactComponent as DownloadFileIcon } from "@webiny/icons/file_download.svg";
+import { ReactComponent as UploadFileIcon } from "@webiny/icons/file_upload.svg";
+import { ReactComponent as FullscreenIcon } from "@webiny/icons/fullscreen.svg";
+import { ReactComponent as EditIcon } from "@webiny/icons/edit.svg";
+import { ReactComponent as MoreVertIcon } from "@webiny/icons/more_vert.svg";
+import { ReactComponent as ExportIcon } from "@webiny/icons/file_download.svg";
+import { ReactComponent as DeleteIcon } from "@webiny/icons/delete.svg";
+import { ReactComponent as CloneIcon } from "@webiny/icons/flip_to_front.svg";
 import { useModels } from "../../hooks";
 import * as UIL from "@webiny/ui/List";
-import { ButtonIcon, ButtonSecondary, IconButton } from "@webiny/ui/Button";
-import { Tooltip } from "@webiny/ui/Tooltip";
 import { i18n } from "@webiny/app/i18n";
-import { ReactComponent as AddIcon } from "@webiny/app-admin/assets/icons/add-18px.svg";
 import SearchUI from "@webiny/app-admin/components/SearchUI";
 import { deserializeSorters } from "../utils";
 import orderBy from "lodash/orderBy";
-import { Cell, Grid } from "@webiny/ui/Grid";
-import { Select } from "@webiny/ui/Select";
-import { ReactComponent as FilterIcon } from "@webiny/app-admin/assets/icons/filter-24px.svg";
 import type { CmsEditorContentModel, CmsModel } from "~/types";
 import { usePermission } from "~/admin/hooks/usePermission";
-import styled from "@emotion/styled";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import type { IconProp } from "@fortawesome/fontawesome-svg-core";
-import { OptionsMenu } from "./OptionsMenu";
-import { ReactComponent as DownloadFileIcon } from "@webiny/app-admin/assets/icons/file_download.svg";
-import { ReactComponent as UploadFileIcon } from "@webiny/app-admin/assets/icons/file_upload.svg";
 import { useModelExport } from "./exporting/useModelExport";
 import { ModelIsBeingDeleted } from "./fullDelete/ModelIsBeingDeleted";
 import { FullyDeleteModelDialog } from "~/admin/views/contentModels/fullDelete/FullyDeleteModelDialog";
+import { Button, DropdownMenu, Icon, IconButton, Select, Tooltip } from "@webiny/admin-ui";
+import { CMS_MODEL_SINGLETON_TAG } from "@webiny/app-headless-cms-common";
 
 const t = i18n.namespace("FormsApp.ContentModelsDataList");
 
@@ -58,21 +55,6 @@ const SORTERS: Sorter[] = [
     }
 ];
 
-const DataListActionsWrapper = styled.div`
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-`;
-
-const rightAlign = css({
-    alignItems: "flex-end !important",
-    justifyContent: "center !important"
-});
-
-const listItemMinHeight = css({
-    minHeight: "66px !important"
-});
-
 interface ContentModelsDataListProps {
     canCreate: boolean;
     onCreate: () => void;
@@ -80,20 +62,6 @@ interface ContentModelsDataListProps {
     showImportModelModal: () => void;
 }
 
-const Icon = styled("div")({
-    width: "24px",
-    height: "24px",
-    marginRight: "15px",
-    flex: "0 0 24px",
-    svg: {
-        color: "var(--mdc-theme-text-icon-on-light)",
-        width: "100%",
-        height: "auto",
-        maxWidth: 24,
-        maxHeight: 24
-    }
-});
-
 interface IconProps {
     model: Pick<CmsModel, "icon">;
 }
@@ -102,7 +70,18 @@ const DisplayIcon = ({ model }: IconProps) => {
     if (!model.icon) {
         return null;
     }
-    return <FontAwesomeIcon icon={(model.icon || "").split("/") as IconProp} />;
+    return (
+        <UIL.ListItemGraphic>
+            <div className={"wby-text-neutral-muted"}>
+                <Icon
+                    size={"lg"}
+                    color={"inherit"}
+                    label={"Content model icon"}
+                    icon={<FontAwesomeIcon icon={(model.icon || "").split("/") as IconProp} />}
+                />
+            </div>
+        </UIL.ListItemGraphic>
+    );
 };
 
 const ContentModelsDataList = ({
@@ -148,24 +127,15 @@ const ContentModelsDataList = ({
     const contentModelsDataListModalOverlay = useMemo(
         () => (
             <UIL.DataListModalOverlay>
-                <Grid>
-                    <Cell span={12}>
-                        <Select
-                            value={sort}
-                            onChange={setSort}
-                            label={t`Sort by`}
-                            description={"Sort content models by"}
-                        >
-                            {SORTERS.map(({ label, sorters }) => {
-                                return (
-                                    <option key={label} value={sorters}>
-                                        {label}
-                                    </option>
-                                );
-                            })}
-                        </Select>
-                    </Cell>
-                </Grid>
+                <Select
+                    value={sort}
+                    onChange={setSort}
+                    label={t`Sort by`}
+                    options={SORTERS.map(sorter => ({
+                        label: sorter.label,
+                        value: sorter.sorters
+                    }))}
+                />
             </UIL.DataListModalOverlay>
         ),
         [sort]
@@ -187,42 +157,51 @@ const ContentModelsDataList = ({
                 data={contentModels}
                 title={t`Content Models`}
                 actions={
-                    <DataListActionsWrapper>
+                    <div className={"wby-flex wby-items-center wby-justify-end wby-gap-xs"}>
+                        <Tooltip
+                            content={"Export all models"}
+                            trigger={
+                                <IconButton
+                                    icon={<DownloadFileIcon />}
+                                    size={"sm"}
+                                    variant={"ghost"}
+                                    onClick={() => handleModelsExport()}
+                                />
+                            }
+                        />
+                        <Tooltip
+                            content={"Import models"}
+                            trigger={
+                                <IconButton
+                                    icon={<UploadFileIcon />}
+                                    size={"sm"}
+                                    variant={"ghost"}
+                                    onClick={() => showImportModelModal()}
+                                />
+                            }
+                        />
                         {canCreate ? (
-                            <ButtonSecondary data-testid="new-record-button" onClick={onCreate}>
-                                <ButtonIcon icon={<AddIcon />} /> {t`New Model`}
-                            </ButtonSecondary>
+                            <Button
+                                data-testid="new-record-button"
+                                onClick={onCreate}
+                                text={t`New`}
+                                icon={<AddIcon />}
+                                size={"sm"}
+                                className={"wby-ml-xs"}
+                            />
                         ) : null}
-                        <OptionsMenu
-                            data-testid="pb-blocks-list-options-menu"
-                            items={[
-                                {
-                                    label: "Export all models",
-                                    icon: <DownloadFileIcon />,
-                                    onClick: handleModelsExport
-                                },
-                                {
-                                    label: "Import models",
-                                    icon: <UploadFileIcon />,
-                                    onClick: showImportModelModal
-                                }
-                            ]}
-                        />
-                    </DataListActionsWrapper>
+                    </div>
                 }
                 search={
                     <SearchUI
                         value={filter}
                         onChange={setFilter}
-                        inputPlaceholder={t`Search content models`}
+                        inputPlaceholder={t`Search content model...`}
                     />
                 }
                 modalOverlay={contentModelsDataListModalOverlay}
                 modalOverlayAction={
-                    <UIL.DataListModalOverlayAction
-                        icon={<FilterIcon />}
-                        data-testid={"default-data-list.filter"}
-                    />
+                    <UIL.DataListModalOverlayAction data-testid={"default-data-list.filter"} />
                 }
                 refresh={onRefreshClick}
             >
@@ -230,20 +209,28 @@ const ContentModelsDataList = ({
                     <UIL.List data-testid="default-data-list">
                         {data.map(contentModel => {
                             const disableViewContent = contentModel.fields.length === 0;
-                            const message = disableViewContent
-                                ? "To view the content, you first need to add a field and save the model"
-                                : "View content";
+                            const getMessage = () => {
+                                if (disableViewContent) {
+                                    return "To view the entries, you first need to add a field and save the model";
+                                }
+
+                                if (contentModel.tags.includes(CMS_MODEL_SINGLETON_TAG)) {
+                                    return "View";
+                                }
+
+                                return "View entries";
+                            };
 
                             return (
                                 <UIL.ListItem
                                     key={contentModel.modelId}
-                                    className={listItemMinHeight}
+                                    className={"wby-group/item"}
                                 >
-                                    <Icon>
-                                        <DisplayIcon model={contentModel} />
-                                    </Icon>
                                     <UIL.ListItemText>
-                                        {contentModel.name}
+                                        <DisplayIcon model={contentModel} />
+                                        <UIL.ListItemTextPrimary>
+                                            {contentModel.name}
+                                        </UIL.ListItemTextPrimary>
                                         <UIL.ListItemTextSecondary>
                                             {t`Last modified: {time}.`({
                                                 time: contentModel.savedOn ? (
@@ -254,56 +241,55 @@ const ContentModelsDataList = ({
                                             })}
                                         </UIL.ListItemTextSecondary>
                                     </UIL.ListItemText>
-                                    <UIL.ListItemMeta className={rightAlign}>
-                                        <ModelIsBeingDeleted model={contentModel}>
-                                            <UIL.ListActions>
-                                                <Tooltip
-                                                    content={t`{message}`({ message })}
-                                                    placement={"top"}
-                                                >
-                                                    <IconButton
-                                                        data-testid={
-                                                            "cms-view-content-model-button"
-                                                        }
-                                                        icon={<ViewListIcon />}
-                                                        label={t`View entries`}
-                                                        onClick={viewContentEntries(contentModel)}
-                                                        disabled={disableViewContent}
-                                                    />
-                                                </Tooltip>
-                                                <Tooltip
-                                                    content={t`Export content model`}
-                                                    placement={"top"}
+                                    <UIL.ListItemMeta>
+                                        <UIL.ListActions>
+                                            <ModelIsBeingDeleted model={contentModel}>
+                                                <span
+                                                    className={
+                                                        "wby-invisible group-hover/item:wby-visible"
+                                                    }
                                                 >
-                                                    <IconButton
-                                                        data-testid={
-                                                            "cms-export-content-model-button"
+                                                    <Tooltip
+                                                        side={"top"}
+                                                        content={getMessage()}
+                                                        trigger={
+                                                            <Button
+                                                                text={"View"}
+                                                                icon={<FullscreenIcon />}
+                                                                variant={"secondary"}
+                                                                size={"sm"}
+                                                                data-testid={
+                                                                    "cms-view-content-model-button"
+                                                                }
+                                                                onClick={viewContentEntries(
+                                                                    contentModel
+                                                                )}
+                                                                disabled={disableViewContent}
+                                                            />
                                                         }
-                                                        icon={<DownloadFileIcon />}
-                                                        label={t`Export content model`}
-                                                        onClick={handleModelExport(contentModel)}
                                                     />
-                                                </Tooltip>
+                                                </span>
+
                                                 {canEdit(contentModel, "cms.contentModel") && (
-                                                    <>
-                                                        {contentModel.plugin ? (
-                                                            <Tooltip
-                                                                content={t`Content model is registered via a plugin.`}
-                                                                placement={"top"}
-                                                            >
-                                                                <EditIcon
-                                                                    disabled
-                                                                    data-testid={
-                                                                        "cms-edit-content-model-button"
-                                                                    }
-                                                                />
-                                                            </Tooltip>
-                                                        ) : (
-                                                            <Tooltip
-                                                                content={t`Edit content model`}
-                                                                placement={"top"}
-                                                            >
-                                                                <EditIcon
+                                                    <span
+                                                        className={
+                                                            "wby-invisible group-hover/item:wby-visible"
+                                                        }
+                                                    >
+                                                        <Tooltip
+                                                            side={"top"}
+                                                            content={
+                                                                contentModel.plugin
+                                                                    ? t`Content model is registered via a plugin.`
+                                                                    : t`Edit content model`
+                                                            }
+                                                            trigger={
+                                                                <Button
+                                                                    text={"Edit"}
+                                                                    icon={<EditIcon />}
+                                                                    variant={"secondary"}
+                                                                    size={"sm"}
+                                                                    disabled={contentModel.plugin}
                                                                     onClick={() =>
                                                                         editRecord(contentModel)
                                                                     }
@@ -311,47 +297,76 @@ const ContentModelsDataList = ({
                                                                         "cms-edit-content-model-button"
                                                                     }
                                                                 />
-                                                            </Tooltip>
-                                                        )}
-                                                        <Tooltip
-                                                            content={"Clone content model"}
-                                                            placement={"top"}
-                                                        >
-                                                            <IconButton
-                                                                data-testid={
-                                                                    "cms-clone-content-model-button"
-                                                                }
-                                                                icon={<CloneIcon />}
-                                                                label={t`Clone content model`}
-                                                                onClick={() =>
-                                                                    onClone(contentModel)
-                                                                }
-                                                            />
-                                                        </Tooltip>
-                                                    </>
+                                                            }
+                                                        />
+                                                    </span>
                                                 )}
 
-                                                {canDelete(contentModel, "cms.contentModel") && (
-                                                    <>
-                                                        <Tooltip
-                                                            content={t`Delete content model`}
-                                                            placement={"top"}
-                                                        >
-                                                            <DeleteIcon
-                                                                onClick={() => {
-                                                                    setModelToBeDeleted(
-                                                                        contentModel
-                                                                    );
-                                                                }}
-                                                                data-testid={
-                                                                    "cms-delete-content-model-button"
-                                                                }
+                                                <DropdownMenu
+                                                    trigger={
+                                                        <IconButton
+                                                            icon={<MoreVertIcon />}
+                                                            size={"sm"}
+                                                            variant={"ghost"}
+                                                        />
+                                                    }
+                                                >
+                                                    {canEdit(contentModel, "cms.contentModel") && (
+                                                        <DropdownMenu.Item
+                                                            text={"Clone"}
+                                                            icon={
+                                                                <DropdownMenu.Item.Icon
+                                                                    label={"Clone"}
+                                                                    element={<CloneIcon />}
+                                                                />
+                                                            }
+                                                            data-testid={
+                                                                "cms-clone-content-model-button"
+                                                            }
+                                                            onClick={() => onClone(contentModel)}
+                                                        />
+                                                    )}
+
+                                                    <DropdownMenu.Item
+                                                        text={"Export"}
+                                                        icon={
+                                                            <DropdownMenu.Item.Icon
+                                                                label={"Export"}
+                                                                element={<ExportIcon />}
                                                             />
-                                                        </Tooltip>
-                                                    </>
-                                                )}
-                                            </UIL.ListActions>
-                                        </ModelIsBeingDeleted>
+                                                        }
+                                                        data-testid={
+                                                            "cms-export-content-model-button"
+                                                        }
+                                                        onClick={handleModelExport(contentModel)}
+                                                    />
+
+                                                    {canDelete(
+                                                        contentModel,
+                                                        "cms.contentModel"
+                                                    ) && (
+                                                        <DropdownMenu.Item
+                                                            text={"Delete"}
+                                                            icon={
+                                                                <DropdownMenu.Item.Icon
+                                                                    label={"Delete"}
+                                                                    element={<DeleteIcon />}
+                                                                />
+                                                            }
+                                                            onClick={() => {
+                                                                setModelToBeDeleted(contentModel);
+                                                            }}
+                                                            data-testid={
+                                                                "cms-delete-content-model-button"
+                                                            }
+                                                            className={
+                                                                "!wby-text-destructive-primary [&_svg]:wby-fill-destructive"
+                                                            }
+                                                        />
+                                                    )}
+                                                </DropdownMenu>
+                                            </ModelIsBeingDeleted>
+                                        </UIL.ListActions>
                                     </UIL.ListItemMeta>
                                 </UIL.ListItem>
                             );
diff --git a/packages/app-headless-cms/src/admin/views/contentModels/OptionsMenu.tsx b/packages/app-headless-cms/src/admin/views/contentModels/OptionsMenu.tsx
index f37d8396098..22cca7412f7 100644
--- a/packages/app-headless-cms/src/admin/views/contentModels/OptionsMenu.tsx
+++ b/packages/app-headless-cms/src/admin/views/contentModels/OptionsMenu.tsx
@@ -1,18 +1,18 @@
 import React from "react";
-import { css } from "emotion";
+import { css } from "@emotion/css";
 import { makeDecoratable } from "@webiny/app-admin";
 import { Menu, MenuItem } from "@webiny/ui/Menu";
-import { IconButton } from "@webiny/ui/Button";
-import { ReactComponent as MoreVerticalIcon } from "@material-design-icons/svg/filled/more_vert.svg";
+import { ReactComponent as MoreVerticalIcon } from "@webiny/icons/more_vert.svg";
 import { ListItemGraphic } from "@webiny/ui/List";
 import { Icon } from "@webiny/ui/Icon";
+import { IconButton } from "@webiny/admin-ui";
 
-const menuStyles = css({
-    ".disabled": {
-        opacity: 0.5,
-        pointerEvents: "none"
+const menuStyles = css`
+    .disabled {
+        opacity: 0.5;
+        pointer-events: none;
     }
-});
+`;
 
 export interface OptionsMenuItem {
     label: string;
@@ -37,7 +37,7 @@ export const OptionsMenu = makeDecoratable(
         return (
             <Menu
                 className={menuStyles}
-                handle={<IconButton icon={<MoreVerticalIcon />} />}
+                handle={<IconButton icon={<MoreVerticalIcon />} size={"sm"} variant={"ghost"} />}
                 anchor={"topLeft"}
                 {...props}
             >
diff --git a/packages/app-headless-cms/src/admin/views/contentModels/fullDelete/ModelIsBeingDeleted.tsx b/packages/app-headless-cms/src/admin/views/contentModels/fullDelete/ModelIsBeingDeleted.tsx
index a02be453b85..a3ed5a607fd 100644
--- a/packages/app-headless-cms/src/admin/views/contentModels/fullDelete/ModelIsBeingDeleted.tsx
+++ b/packages/app-headless-cms/src/admin/views/contentModels/fullDelete/ModelIsBeingDeleted.tsx
@@ -1,10 +1,9 @@
-import styled from "@emotion/styled";
 import React, { useCallback, useState } from "react";
 import type { CmsModel } from "@webiny/app-headless-cms-common/types";
-import { ButtonPrimary } from "@webiny/ui/Button";
 import { i18n } from "@webiny/app/i18n";
 import { useConfirmationDialog } from "@webiny/app-admin";
 import { useCancelDelete } from "~/admin/views/contentModels/fullDelete/useCancelDelete";
+import { Button, Text } from "@webiny/admin-ui";
 
 const t = i18n.ns("app-headless-cms/admin/views/content-models/fully-delete-model");
 
@@ -12,14 +11,6 @@ export interface IModelOverlayProps {
     model: CmsModel;
 }
 
-const Wrap = styled.div`
-    width: 100%;
-    height: 100%;
-    display: flex;
-    flex-grow: 1;
-    min-width: 130px;
-`;
-
 const CancelDelete = ({ model }: IModelOverlayProps) => {
     const { cancel } = useCancelDelete({ model });
     const { showConfirmation } = useConfirmationDialog({
@@ -35,11 +26,7 @@ const CancelDelete = ({ model }: IModelOverlayProps) => {
         });
     }, [showConfirmation, model.modelId]);
 
-    return (
-        <>
-            <ButtonPrimary onClick={onClick}>{t`Cancel delete`}</ButtonPrimary>
-        </>
-    );
+    return <Button text={t`Cancel delete`} size={"sm"} onClick={onClick} />;
 };
 
 export const ModelIsBeingDeleted = ({
@@ -59,11 +46,21 @@ export const ModelIsBeingDeleted = ({
     if (!model.isBeingDeleted) {
         return <>{children}</>;
     }
+
     const message = model.plugin ? "Records are being deleted." : "Model is being deleted.";
     return (
-        <Wrap onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
-            {!over && <>{message}</>}
+        <div
+            style={{ width: "150px" }}
+            className={"wby-text-right"}
+            onMouseEnter={onMouseEnter}
+            onMouseLeave={onMouseLeave}
+        >
+            {!over && (
+                <Text size={"sm"} as={"div"} className={"wby-text-destructive-primary"}>
+                    {message}
+                </Text>
+            )}
             {over && <CancelDelete model={model} />}
-        </Wrap>
+        </div>
     );
 };
diff --git a/packages/app-headless-cms/src/admin/views/contentModels/fullDelete/dialog/Confirmation.tsx b/packages/app-headless-cms/src/admin/views/contentModels/fullDelete/dialog/Confirmation.tsx
index a345fdad4ba..c6c9d16f4d2 100644
--- a/packages/app-headless-cms/src/admin/views/contentModels/fullDelete/dialog/Confirmation.tsx
+++ b/packages/app-headless-cms/src/admin/views/contentModels/fullDelete/dialog/Confirmation.tsx
@@ -1,19 +1,8 @@
 import React, { useCallback, useMemo } from "react";
 import type { CmsErrorResponse, CmsModel } from "~/types";
 import { Input } from "@webiny/ui/Input";
-import { css } from "emotion";
 import { createValidationValue } from "./validationValue";
-
-const errorClassName = css({
-    color: "red",
-    width: "100%",
-    fontSize: "10px",
-    display: "block"
-});
-
-const deleteClassName = css({
-    fontWeight: "bold"
-});
+import { Alert } from "@webiny/admin-ui";
 
 export interface IConfirmationProps {
     model: CmsModel;
@@ -40,8 +29,9 @@ export const Confirmation = (props: IConfirmationProps) => {
         <>
             <p>Are you sure you want to delete this content model and all of its entries?</p>
             <p>
-                If yes, please write <span className={deleteClassName}>{placeholder}</span> in the
-                confirmation input:
+                If yes, please write{" "}
+                <span className={"wby-font-semibold wby-text-neutral-primary"}>{placeholder}</span>{" "}
+                in the confirmation input:
             </p>
             <p>
                 <br />
@@ -53,7 +43,11 @@ export const Confirmation = (props: IConfirmationProps) => {
                     placeholder={placeholder}
                     value={confirmation}
                 />
-                {error && <p className={errorClassName}>{error.message}</p>}
+                {error && (
+                    <Alert type={"danger"} className={"wby-mt-sm"}>
+                        {error.message}
+                    </Alert>
+                )}
             </div>
         </>
     );
diff --git a/packages/app-headless-cms/src/admin/views/contentModels/fullDelete/dialog/Information.tsx b/packages/app-headless-cms/src/admin/views/contentModels/fullDelete/dialog/Information.tsx
index 39979479d72..3c50d375a53 100644
--- a/packages/app-headless-cms/src/admin/views/contentModels/fullDelete/dialog/Information.tsx
+++ b/packages/app-headless-cms/src/admin/views/contentModels/fullDelete/dialog/Information.tsx
@@ -1,36 +1,33 @@
 import React from "react";
+import { Text } from "@webiny/admin-ui";
 import type { CmsModel } from "~/types";
-import { css } from "emotion";
 
 export interface IInformationProps {
     model: Pick<CmsModel, "plugin">;
 }
 
-const warningClassName = css({
-    color: "var(--mdc-theme-error)"
-});
-
 export const Information = (props: IInformationProps) => {
     const { model } = props;
     return (
-        <>
+        <ul className={"wby-list-disc wby-ml-md"}>
             {model.plugin ? (
                 <>
-                    <p>
+                    <li>
                         This model is a plugin one, and it cannot be deleted. Only its entries can
                         be deleted.
-                    </p>
-                    <p>
-                        <br />
-                    </p>
-                    <p>- This action will permanently delete all model entries.</p>
+                    </li>
+                    <li>This action will permanently delete all model entries.</li>
                 </>
             ) : (
-                <p>- This action will permanently delete the model and all its entries.</p>
+                <li>This action will permanently delete the model and all its entries.</li>
             )}
-            <p>- References to this model in other parts of the system will be emptied.</p>
-            <p>- All relevant lifecycle events will be triggered.</p>
-            <p className={warningClassName}> - This action cannot be undone!</p>
-        </>
+            <li>References to this model in other parts of the system will be emptied.</li>
+            <li>All relevant lifecycle events will be triggered.</li>
+            <li>
+                <Text className={`wby-text-destructive-primary`}>
+                    This action cannot be undone!
+                </Text>
+            </li>
+        </ul>
     );
 };
diff --git a/packages/app-headless-cms/tsconfig.build.json b/packages/app-headless-cms/tsconfig.build.json
index 15585cfe08c..04e493223bf 100644
--- a/packages/app-headless-cms/tsconfig.build.json
+++ b/packages/app-headless-cms/tsconfig.build.json
@@ -2,6 +2,7 @@
   "extends": "../../tsconfig.build.json",
   "include": ["src"],
   "references": [
+    { "path": "../admin-ui/tsconfig.build.json" },
     { "path": "../app/tsconfig.build.json" },
     { "path": "../app-aco/tsconfig.build.json" },
     { "path": "../app-admin/tsconfig.build.json" },
diff --git a/packages/app-headless-cms/tsconfig.json b/packages/app-headless-cms/tsconfig.json
index f68ff7be9c7..b61db93dd15 100644
--- a/packages/app-headless-cms/tsconfig.json
+++ b/packages/app-headless-cms/tsconfig.json
@@ -2,6 +2,7 @@
   "extends": "../../tsconfig.json",
   "include": ["src", "__tests__"],
   "references": [
+    { "path": "../admin-ui" },
     { "path": "../app" },
     { "path": "../app-aco" },
     { "path": "../app-admin" },
@@ -34,6 +35,8 @@
     "paths": {
       "~/*": ["./src/*"],
       "~tests/*": ["./__tests__/*"],
+      "@webiny/admin-ui/*": ["../admin-ui/src/*"],
+      "@webiny/admin-ui": ["../admin-ui/src"],
       "@webiny/app/*": ["../app/src/*"],
       "@webiny/app": ["../app/src"],
       "@webiny/app-aco/*": ["../app-aco/src/*"],
diff --git a/packages/app-i18n-content/package.json b/packages/app-i18n-content/package.json
index 90891f05bdc..1324cf36856 100644
--- a/packages/app-i18n-content/package.json
+++ b/packages/app-i18n-content/package.json
@@ -9,14 +9,14 @@
   "author": "Webiny Ltd",
   "license": "MIT",
   "dependencies": {
+    "@webiny/admin-ui": "0.0.0",
     "@webiny/app": "0.0.0",
     "@webiny/app-admin": "0.0.0",
     "@webiny/app-i18n": "0.0.0",
     "@webiny/app-security": "0.0.0",
     "@webiny/form": "0.0.0",
+    "@webiny/icons": "0.0.0",
     "@webiny/plugins": "0.0.0",
-    "@webiny/ui": "0.0.0",
-    "emotion": "10.0.27",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },
diff --git a/packages/app-i18n-content/src/admin/LocaleSelector.tsx b/packages/app-i18n-content/src/admin/LocaleSelector.tsx
index 12fc04b1632..56e30e479a8 100644
--- a/packages/app-i18n-content/src/admin/LocaleSelector.tsx
+++ b/packages/app-i18n-content/src/admin/LocaleSelector.tsx
@@ -1,75 +1,58 @@
 import React, { useMemo } from "react";
 import { useI18N } from "@webiny/app-i18n/hooks/useI18N";
-import { Menu, MenuItem } from "@webiny/ui/Menu";
-import { ButtonPrimary, ButtonIcon } from "@webiny/ui/Button";
-import { css } from "emotion";
+import { Select } from "@webiny/admin-ui";
+import { LocaleSelector as BaseLocaleSelector } from "@webiny/app-admin";
 import { useSecurity } from "@webiny/app-security";
-import { ReactComponent as DoneIcon } from "./assets/done-24px.svg";
-import { ReactComponent as TranslateIcon } from "./assets/round-translate-24px.svg";
 import { I18NSecurityPermission } from "@webiny/app-i18n/types";
 
-const menuList = css({
-    width: 160,
-    right: 80,
-    left: "auto !important"
-});
-
-const buttonStyles = css({
-    marginRight: 10
-});
+export const LocaleSelector = BaseLocaleSelector.createDecorator(() => {
+    return function LocaleSelector() {
+        const { setCurrentLocale, getCurrentLocale, getLocales } = useI18N();
+        const { identity, getPermission } = useSecurity();
 
-export const LocaleSelector = () => {
-    const { setCurrentLocale, getCurrentLocale, getLocales } = useI18N();
-    const { identity, getPermission } = useSecurity();
+        const contentI18NPermission = useMemo((): I18NSecurityPermission | null => {
+            return getPermission("content.i18n");
+        }, [identity]);
 
-    const contentI18NPermission = useMemo((): I18NSecurityPermission | null => {
-        return getPermission("content.i18n");
-    }, [identity]);
+        const locales = getLocales();
+        const localeList = locales.filter(locale => {
+            if (!contentI18NPermission || !Array.isArray(contentI18NPermission.locales)) {
+                return true;
+            }
+            return contentI18NPermission.locales.includes(locale.code);
+        });
 
-    const locales = getLocales();
-    const localeList = locales.filter(locale => {
-        if (!contentI18NPermission || !Array.isArray(contentI18NPermission.locales)) {
-            return true;
+        if (localeList.length === 1) {
+            return null;
         }
-        return contentI18NPermission.locales.includes(locale.code);
-    });
 
-    if (localeList.length === 1) {
-        return null;
-    }
-
-    const currentLocale = getCurrentLocale("content");
-    return (
-        <Menu
-            anchor={"bottomLeft"}
-            className={menuList}
-            handle={
-                <ButtonPrimary className={buttonStyles} flat data-testid={"app-i18n-content.menu"}>
-                    <ButtonIcon icon={<TranslateIcon />} />
-                    Locale: {currentLocale}
-                </ButtonPrimary>
-            }
-        >
-            {localeList.map(locale => (
-                <MenuItem
-                    key={locale.code}
-                    onClick={() => {
-                        setCurrentLocale(locale.code, "content");
-                        window.location.reload();
-                    }}
-                    data-testid={`app-i18n-content.menu-item.${locale.code}`}
-                >
-                    <span style={{ minWidth: 35 }}>
-                        {currentLocale === locale.code && (
-                            <ButtonIcon
-                                icon={<DoneIcon style={{ color: "var(--mdc-theme-primary)" }} />}
-                            />
-                        )}
-                    </span>
+        const currentLocale = getCurrentLocale("content");
+        if (!currentLocale) {
+            return null;
+        }
 
-                    {locale.code}
-                </MenuItem>
-            ))}
-        </Menu>
-    );
-};
+        return (
+            <Select
+                displayResetAction={false}
+                value={currentLocale}
+                onChange={value => {
+                    setCurrentLocale(value, "content");
+                    window.location.reload();
+                }}
+                size={"md"}
+                variant={"ghost"}
+                options={[
+                    {
+                        label: "Locale",
+                        options: [
+                            ...localeList.map(locale => ({
+                                value: locale.code,
+                                label: locale.code
+                            }))
+                        ]
+                    }
+                ]}
+            />
+        );
+    };
+});
diff --git a/packages/app-i18n-content/src/admin/assets/done-24px.svg b/packages/app-i18n-content/src/admin/assets/done-24px.svg
deleted file mode 100644
index e0184ccc0cd..00000000000
--- a/packages/app-i18n-content/src/admin/assets/done-24px.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M9 16.2l-3.5-3.5c-.39-.39-1.01-.39-1.4 0-.39.39-.39 1.01 0 1.4l4.19 4.19c.39.39 1.02.39 1.41 0L20.3 7.7c.39-.39.39-1.01 0-1.4-.39-.39-1.01-.39-1.4 0L9 16.2z"/></svg>
\ No newline at end of file
diff --git a/packages/app-i18n-content/src/admin/assets/round-translate-24px.svg b/packages/app-i18n-content/src/admin/assets/round-translate-24px.svg
deleted file mode 100644
index a9fe23f7fa7..00000000000
--- a/packages/app-i18n-content/src/admin/assets/round-translate-24px.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" viewBox="0 0 24 24">
-    <path fill="none" d="M0 0h24v24H0V0z"/>
-    <path fill="currentColor" d="M12.65 15.67c.14-.36.05-.77-.23-1.05l-2.09-2.06.03-.03c1.74-1.94 2.98-4.17 3.71-6.53h1.94c.54 0 .99-.45.99-.99v-.02c0-.54-.45-.99-.99-.99H10V3c0-.55-.45-1-1-1s-1 .45-1 1v1H1.99c-.54 0-.99.45-.99.99 0 .55.45.99.99.99h10.18C11.5 7.92 10.44 9.75 9 11.35c-.81-.89-1.49-1.86-2.06-2.88-.16-.29-.45-.47-.78-.47-.69 0-1.13.75-.79 1.35.63 1.13 1.4 2.21 2.3 3.21L3.3 16.87c-.4.39-.4 1.03 0 1.42.39.39 1.02.39 1.42 0L9 14l2.02 2.02c.51.51 1.38.32 1.63-.35zM17.5 10c-.6 0-1.14.37-1.35.94l-3.67 9.8c-.24.61.22 1.26.87 1.26.39 0 .74-.24.88-.61l.89-2.39h4.75l.9 2.39c.14.36.49.61.88.61.65 0 1.11-.65.88-1.26l-3.67-9.8c-.22-.57-.76-.94-1.36-.94zm-1.62 7l1.62-4.33L19.12 17h-3.24z"/>
-</svg>
\ No newline at end of file
diff --git a/packages/app-i18n-content/src/admin/contentPermissions/ContentPermissions.tsx b/packages/app-i18n-content/src/admin/contentPermissions/ContentPermissions.tsx
index 6d0391c5f10..3d88c2b8593 100644
--- a/packages/app-i18n-content/src/admin/contentPermissions/ContentPermissions.tsx
+++ b/packages/app-i18n-content/src/admin/contentPermissions/ContentPermissions.tsx
@@ -1,11 +1,9 @@
 import React, { Fragment, useCallback, useMemo } from "react";
-import { Grid, Cell } from "@webiny/ui/Grid";
 import { i18n } from "@webiny/app/i18n";
 import { Form } from "@webiny/form";
 import { useI18N } from "@webiny/app-i18n/hooks/useI18N";
-import { CheckboxGroup, Checkbox } from "@webiny/ui/Checkbox";
-import { Radio, RadioGroup } from "@webiny/ui/Radio";
 import { I18NSecurityPermission } from "@webiny/app-i18n/types";
+import { CheckboxGroup, Grid, RadioGroup } from "@webiny/admin-ui";
 
 const t = i18n.ns("app-i18n/admin/plugins/permissionRenderer");
 
@@ -67,48 +65,40 @@ export const ContentPermissions = ({ value, onChange }: ContentPermissionsProps)
         >
             {({ data, Bind }) => (
                 <Fragment>
-                    <Grid style={{ padding: "0px !important" }}>
-                        <Cell span={12}>
+                    <Grid>
+                        <Grid.Column span={12}>
                             <Bind name={"level"}>
-                                <RadioGroup label={t`Content can be accessed on:`}>
-                                    {({ getValue, onChange }) => (
-                                        <React.Fragment>
-                                            <Radio
-                                                label={t`All locales`}
-                                                value={getValue("all")}
-                                                onChange={onChange("all")}
-                                            />
-                                            <Radio
-                                                label={t`Specific locales`}
-                                                value={getValue("locales")}
-                                                onChange={onChange("locales")}
-                                            />
-                                        </React.Fragment>
-                                    )}
-                                </RadioGroup>
-                            </Bind>
-                        </Cell>
-                        {data.level === "locales" && (
-                            <Cell span={12}>
-                                <Bind name={"locales"}>
-                                    <CheckboxGroup
-                                        label={t`Available Locales`}
-                                        description={t`The user will be able to access content in the selected locales.`}
-                                    >
-                                        {({ onChange, getValue }) =>
-                                            getLocales().map(({ code }) => (
-                                                <Checkbox
-                                                    key={code + data.level}
-                                                    label={code}
-                                                    value={getValue(code)}
-                                                    onChange={onChange(code)}
-                                                />
-                                            ))
+                                <RadioGroup
+                                    label={t`Content can be accessed on:`}
+                                    items={[
+                                        {
+                                            label: t`All locales`,
+                                            value: "all"
+                                        },
+                                        {
+                                            label: t`Specific locales`,
+                                            value: "locales"
                                         }
-                                    </CheckboxGroup>
-                                </Bind>
-                            </Cell>
-                        )}
+                                    ]}
+                                />
+                            </Bind>
+                        </Grid.Column>
+                        <>
+                            {data.level === "locales" && (
+                                <Grid.Column span={12}>
+                                    <Bind name={"locales"}>
+                                        <CheckboxGroup
+                                            label={t`Available Locales`}
+                                            description={t`The user will be able to access content in the selected locales.`}
+                                            items={getLocales().map(locale => ({
+                                                value: locale.code,
+                                                label: locale.code
+                                            }))}
+                                        />
+                                    </Bind>
+                                </Grid.Column>
+                            )}
+                        </>
                     </Grid>
                 </Fragment>
             )}
diff --git a/packages/app-i18n-content/src/admin/contentPermissions/icons/how_to_vote-24px.svg b/packages/app-i18n-content/src/admin/contentPermissions/icons/how_to_vote-24px.svg
deleted file mode 100644
index 95074e5fe29..00000000000
--- a/packages/app-i18n-content/src/admin/contentPermissions/icons/how_to_vote-24px.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M18 13h-.68l-2 2h1.91L19 17H5l1.78-2h2.05l-2-2H6l-3 3v4c0 1.1.89 2 1.99 2H19c1.1 0 2-.89 2-2v-4l-3-3zm-1-5.05l-4.95 4.95-3.54-3.54 4.95-4.95L17 7.95zm-4.24-5.66L6.39 8.66c-.39.39-.39 1.02 0 1.41l4.95 4.95c.39.39 1.02.39 1.41 0l6.36-6.36c.39-.39.39-1.02 0-1.41L14.16 2.3c-.38-.4-1.01-.4-1.4-.01z"/></svg>
\ No newline at end of file
diff --git a/packages/app-i18n-content/src/admin/contentPermissions/index.tsx b/packages/app-i18n-content/src/admin/contentPermissions/index.tsx
index a55195355d6..81f1cef7194 100644
--- a/packages/app-i18n-content/src/admin/contentPermissions/index.tsx
+++ b/packages/app-i18n-content/src/admin/contentPermissions/index.tsx
@@ -1,9 +1,9 @@
 import React from "react";
-import { AccordionItem } from "@webiny/ui/Accordion";
 import { AdminAppPermissionRendererPlugin } from "@webiny/app-admin/types";
-import { ReactComponent as Icon } from "./icons/how_to_vote-24px.svg";
+import { ReactComponent as PermissionsIcon } from "@webiny/icons/how_to_vote.svg";
 import { ContentPermissions } from "./ContentPermissions";
 import { i18n } from "@webiny/app/i18n";
+import { Accordion } from "@webiny/admin-ui";
 
 const t = i18n.ns("app-i18n/admin/plugins/permissionRenderer");
 
@@ -13,15 +13,15 @@ export default {
     system: true,
     render(props) {
         return (
-            <AccordionItem
+            <Accordion.Item
                 open={true}
-                icon={<Icon />}
+                icon={<Accordion.Item.Icon label={"Content"} icon={<PermissionsIcon />} />}
                 title={t`Content`}
                 description={t`Per-locale content access permissions management.`}
                 data-testid={"permission.content"}
             >
                 <ContentPermissions {...props} />
-            </AccordionItem>
+            </Accordion.Item>
         );
     }
 } as AdminAppPermissionRendererPlugin;
diff --git a/packages/app-i18n-content/src/index.tsx b/packages/app-i18n-content/src/index.tsx
index 56ec3131327..42139a0435f 100644
--- a/packages/app-i18n-content/src/index.tsx
+++ b/packages/app-i18n-content/src/index.tsx
@@ -1,19 +1,16 @@
 import React, { memo } from "react";
 import { plugins } from "@webiny/plugins";
-import { Compose, LocaleSelector as LocaleSelectorSpec } from "@webiny/app-admin";
 import { LocaleSelector } from "./admin/LocaleSelector";
 import contentPermissions from "./admin/contentPermissions";
 
-const LocaleSelectorHOC = () => {
-    return function LocaleSelectorHOC() {
-        return <LocaleSelector />;
-    };
-};
-
 const I18NContentExtension = () => {
     plugins.register(contentPermissions);
 
-    return <Compose component={LocaleSelectorSpec} with={LocaleSelectorHOC} />;
+    return (
+        <>
+            <LocaleSelector />
+        </>
+    );
 };
 
 export const I18NContent: React.ComponentType = memo(I18NContentExtension);
diff --git a/packages/app-i18n-content/tsconfig.build.json b/packages/app-i18n-content/tsconfig.build.json
index 1f6508ddeed..322170444e7 100644
--- a/packages/app-i18n-content/tsconfig.build.json
+++ b/packages/app-i18n-content/tsconfig.build.json
@@ -2,13 +2,13 @@
   "extends": "../../tsconfig.build.json",
   "include": ["src"],
   "references": [
+    { "path": "../admin-ui/tsconfig.build.json" },
     { "path": "../app/tsconfig.build.json" },
     { "path": "../app-admin/tsconfig.build.json" },
     { "path": "../app-i18n/tsconfig.build.json" },
     { "path": "../app-security/tsconfig.build.json" },
     { "path": "../form/tsconfig.build.json" },
-    { "path": "../plugins/tsconfig.build.json" },
-    { "path": "../ui/tsconfig.build.json" }
+    { "path": "../plugins/tsconfig.build.json" }
   ],
   "compilerOptions": {
     "rootDir": "./src",
diff --git a/packages/app-i18n-content/tsconfig.json b/packages/app-i18n-content/tsconfig.json
index 46bf24e060c..b230369bf07 100644
--- a/packages/app-i18n-content/tsconfig.json
+++ b/packages/app-i18n-content/tsconfig.json
@@ -2,13 +2,13 @@
   "extends": "../../tsconfig.json",
   "include": ["src", "__tests__"],
   "references": [
+    { "path": "../admin-ui" },
     { "path": "../app" },
     { "path": "../app-admin" },
     { "path": "../app-i18n" },
     { "path": "../app-security" },
     { "path": "../form" },
-    { "path": "../plugins" },
-    { "path": "../ui" }
+    { "path": "../plugins" }
   ],
   "compilerOptions": {
     "rootDirs": ["./src", "./__tests__"],
@@ -17,6 +17,8 @@
     "paths": {
       "~/*": ["./src/*"],
       "~tests/*": ["./__tests__/*"],
+      "@webiny/admin-ui/*": ["../admin-ui/src/*"],
+      "@webiny/admin-ui": ["../admin-ui/src"],
       "@webiny/app/*": ["../app/src/*"],
       "@webiny/app": ["../app/src"],
       "@webiny/app-admin/*": ["../app-admin/src/*"],
@@ -28,9 +30,7 @@
       "@webiny/form/*": ["../form/src/*"],
       "@webiny/form": ["../form/src"],
       "@webiny/plugins/*": ["../plugins/src/*"],
-      "@webiny/plugins": ["../plugins/src"],
-      "@webiny/ui/*": ["../ui/src/*"],
-      "@webiny/ui": ["../ui/src"]
+      "@webiny/plugins": ["../plugins/src"]
     },
     "baseUrl": "."
   }
diff --git a/packages/app-i18n/package.json b/packages/app-i18n/package.json
index 839db9c148f..17c8ef4a7a6 100644
--- a/packages/app-i18n/package.json
+++ b/packages/app-i18n/package.json
@@ -14,13 +14,13 @@
   "license": "MIT",
   "dependencies": {
     "@apollo/react-hooks": "^3.1.5",
-    "@emotion/react": "11.10.8",
-    "@emotion/styled": "11.10.6",
     "@types/react": "18.2.79",
+    "@webiny/admin-ui": "0.0.0",
     "@webiny/app": "0.0.0",
     "@webiny/app-admin": "0.0.0",
     "@webiny/app-security": "0.0.0",
     "@webiny/form": "0.0.0",
+    "@webiny/icons": "0.0.0",
     "@webiny/plugins": "0.0.0",
     "@webiny/react-router": "0.0.0",
     "@webiny/ui": "0.0.0",
@@ -38,7 +38,6 @@
     "react-dom": "18.2.0"
   },
   "devDependencies": {
-    "@emotion/babel-plugin": "^11.11.0",
     "@webiny/project-utils": "0.0.0",
     "rimraf": "^6.0.1",
     "typescript": "5.3.3"
diff --git a/packages/app-i18n/src/I18N.tsx b/packages/app-i18n/src/I18N.tsx
index 5ef3c81c223..ddd0437e92d 100644
--- a/packages/app-i18n/src/I18N.tsx
+++ b/packages/app-i18n/src/I18N.tsx
@@ -1,12 +1,14 @@
 import React, { Fragment, memo } from "react";
 import { plugins } from "@webiny/plugins";
-import { Provider, Plugins, AddMenu } from "@webiny/app-admin";
+import { Provider } from "@webiny/app-admin";
 import { I18NProvider as ContextProvider } from "./contexts/I18N";
 import { HasPermission } from "@webiny/app-security";
-import { AddRoute } from "@webiny/app-admin";
 import { Layout } from "@webiny/app-admin";
 import { LocalesView } from "./admin/views/locales";
 import i18nPlugins from "./admin/plugins";
+import { AdminConfig } from "@webiny/app-admin";
+
+const { Menu, Route } = AdminConfig;
 
 interface I18NProviderProps {
     children: React.ReactNode;
@@ -32,24 +34,30 @@ const I18NExtension = () => {
     return (
         <Fragment>
             <Provider hoc={I18NProviderHOC} />
-            <Plugins>
+            <AdminConfig>
                 <HasPermission name={"i18n.locale"}>
-                    <AddRoute exact path={"/i18n/locales"}>
-                        <Layout title={"I18N - Locales"}>
-                            <LocalesView />
-                        </Layout>
-                    </AddRoute>
-                    <AddMenu name={"settings"}>
-                        <AddMenu name={"settings.i18n"} label={"Languages"}>
-                            <AddMenu
-                                name={"settings.i18n.locales"}
-                                label={"Locales"}
-                                path={"/i18n/locales"}
-                            />
-                        </AddMenu>
-                    </AddMenu>
+                    <Route
+                        name={"i18n.locales"}
+                        exact
+                        path={"/i18n/locales"}
+                        element={
+                            <Layout title={"I18N - Locales"}>
+                                <LocalesView />
+                            </Layout>
+                        }
+                    />
+                    <Menu
+                        name="i18n.settings"
+                        parent={"settings"}
+                        element={<Menu.Group text={"Languages"} />}
+                    />
+                    <Menu
+                        name="i18n.settings.locales"
+                        parent={"settings"}
+                        element={<Menu.Link text={"Locales"} to={"/i18n/locales"} />}
+                    />
                 </HasPermission>
-            </Plugins>
+            </AdminConfig>
         </Fragment>
     );
 };
diff --git a/packages/app-i18n/src/admin/plugins/permissionRenderer/I18NPermissions.tsx b/packages/app-i18n/src/admin/plugins/permissionRenderer/I18NPermissions.tsx
index 8e74f380071..787b3d84ac9 100644
--- a/packages/app-i18n/src/admin/plugins/permissionRenderer/I18NPermissions.tsx
+++ b/packages/app-i18n/src/admin/plugins/permissionRenderer/I18NPermissions.tsx
@@ -2,7 +2,7 @@ import React, { Fragment, useCallback, useMemo } from "react";
 import { Grid, Cell } from "@webiny/ui/Grid";
 import { Select } from "@webiny/ui/Select";
 import { i18n } from "@webiny/app/i18n";
-import { PermissionInfo, gridNoPaddingClass } from "@webiny/app-admin/components/Permissions";
+import { PermissionInfo, gridWithPaddingClass } from "@webiny/app-admin/components/Permissions";
 import { Form } from "@webiny/form";
 import { SecurityPermission } from "@webiny/app-security/types";
 import { I18NSecurityPermission } from "~/types";
@@ -79,13 +79,13 @@ export const I18NPermissions = ({ value, onChange }: I18NPermissionsProps) => {
         >
             {({ Bind }) => (
                 <Fragment>
-                    <Grid className={gridNoPaddingClass}>
+                    <Grid className={gridWithPaddingClass}>
                         <Cell span={6}>
                             <PermissionInfo title={t`Access Level`} />
                         </Cell>
                         <Cell span={6}>
                             <Bind name={"level"}>
-                                <Select label={t`Access Level`}>
+                                <Select>
                                     <option value={NO_ACCESS}>{t`No access`}</option>
                                     <option value={FULL_ACCESS}>{t`Full access`}</option>
                                 </Select>
diff --git a/packages/app-i18n/src/admin/plugins/permissionRenderer/index.tsx b/packages/app-i18n/src/admin/plugins/permissionRenderer/index.tsx
index 9a523a09c26..4de0a3cbcaa 100644
--- a/packages/app-i18n/src/admin/plugins/permissionRenderer/index.tsx
+++ b/packages/app-i18n/src/admin/plugins/permissionRenderer/index.tsx
@@ -1,8 +1,8 @@
 import React from "react";
-import { AccordionItem } from "@webiny/ui/Accordion";
+import { Accordion } from "@webiny/admin-ui";
 import { PermissionRendererPlugin } from "@webiny/app-admin/plugins/PermissionRendererPlugin";
 import { i18n } from "@webiny/app/i18n";
-import { ReactComponent as TranslateIcon } from "../../assets/icons/round-translate-24px.svg";
+import { ReactComponent as PermissionsIcon } from "@webiny/icons/translate.svg";
 import { I18NPermissions } from "./I18NPermissions";
 
 const t = i18n.ns("app-i18n/admin/plugins/permissionRenderer");
@@ -10,14 +10,14 @@ const t = i18n.ns("app-i18n/admin/plugins/permissionRenderer");
 export default new PermissionRendererPlugin({
     render(props) {
         return (
-            <AccordionItem
-                icon={<TranslateIcon />}
+            <Accordion.Item
+                icon={<Accordion.Item.Icon icon={<PermissionsIcon />} label={"I18N Permissions"} />}
                 title={t`I18N`}
                 description={t`Manage I18N app access permissions.`}
                 data-testid={"permission.i18n"}
             >
                 <I18NPermissions {...props} />
-            </AccordionItem>
+            </Accordion.Item>
         );
     }
 });
diff --git a/packages/app-i18n/src/admin/views/locales/LocaleForm.tsx b/packages/app-i18n/src/admin/views/locales/LocaleForm.tsx
index a3d6ef58659..a1fa457f73e 100644
--- a/packages/app-i18n/src/admin/views/locales/LocaleForm.tsx
+++ b/packages/app-i18n/src/admin/views/locales/LocaleForm.tsx
@@ -1,11 +1,8 @@
 import React from "react";
-import styled from "@emotion/styled";
+import { ReactComponent as AddIcon } from "@webiny/icons/add.svg";
+import { ReactComponent as LocaleIcon } from "@webiny/icons/translate.svg";
 import { i18n } from "@webiny/app/i18n";
 import { Form } from "@webiny/form";
-import { Grid, Cell } from "@webiny/ui/Grid";
-import { ButtonDefault, ButtonIcon, ButtonPrimary } from "@webiny/ui/Button";
-import { Switch } from "@webiny/ui/Switch";
-import { CircularProgress } from "@webiny/ui/Progress";
 import {
     SimpleForm,
     SimpleFormFooter,
@@ -14,17 +11,12 @@ import {
 } from "@webiny/app-admin/components/SimpleForm";
 import { validation } from "@webiny/validation";
 import EmptyView from "@webiny/app-admin/components/EmptyView";
-import { ReactComponent as AddIcon } from "@webiny/app-admin/assets/icons/add-18px.svg";
 import LocaleCodesAutoComplete from "~/admin/components/LocaleCodesAutoComplete";
 import { useLocaleForm } from "./hooks/useLocaleForm";
+import { Button, Grid, OverlayLoader, Switch } from "@webiny/admin-ui";
 
 const t = i18n.ns("app-i18n/admin/locales/form");
 
-const ButtonWrapper = styled("div")({
-    display: "flex",
-    justifyContent: "space-between"
-});
-
 const I18NLocaleForm = () => {
     const { loading, showEmptyView, createLocale, cancelEditing, locale, onSubmit } =
         useLocaleForm();
@@ -33,11 +25,15 @@ const I18NLocaleForm = () => {
     if (showEmptyView) {
         return (
             <EmptyView
+                icon={<LocaleIcon />}
                 title={t`Click on the left side list to display locale details or create a...`}
                 action={
-                    <ButtonDefault data-testid="new-record-button" onClick={createLocale}>
-                        <ButtonIcon icon={<AddIcon />} /> {t`New Locale`}
-                    </ButtonDefault>
+                    <Button
+                        text={t`New Locale`}
+                        icon={<AddIcon />}
+                        data-testid="new-record-button"
+                        onClick={createLocale}
+                    />
                 }
             />
         );
@@ -47,11 +43,11 @@ const I18NLocaleForm = () => {
         <Form data-testid={"i18n-locale-form"} data={locale} onSubmit={onSubmit}>
             {({ data, form, Bind }) => (
                 <SimpleForm>
-                    {loading && <CircularProgress />}
+                    {loading && <OverlayLoader />}
                     <SimpleFormHeader title={data.code || t`New locale`} />
                     <SimpleFormContent>
                         <Grid>
-                            <Cell span={12}>
+                            <Grid.Column span={12}>
                                 <Bind name="code" validators={validation.create("required")}>
                                     <LocaleCodesAutoComplete
                                         disabled={Boolean(data.createdOn)}
@@ -60,26 +56,23 @@ const I18NLocaleForm = () => {
                                         description={t`For example: "en-GB"`}
                                     />
                                 </Bind>
-                            </Cell>
-                        </Grid>
-                        <Grid>
-                            <Cell span={12}>
+                            </Grid.Column>
+                            <Grid.Column span={12}>
                                 <Bind name="default">
-                                    <Switch label={t`Default`} />
+                                    <Switch label={t`Default locale`} />
                                 </Bind>
-                            </Cell>
+                            </Grid.Column>
                         </Grid>
                     </SimpleFormContent>
                     <SimpleFormFooter>
-                        <ButtonWrapper>
-                            <ButtonDefault onClick={cancelEditing}>{t`Cancel`}</ButtonDefault>
-                            <ButtonPrimary
-                                onClick={ev => {
-                                    form.submit(ev);
-                                }}
-                                data-testid="l18n.locale.save"
-                            >{t`Save locale`}</ButtonPrimary>
-                        </ButtonWrapper>
+                        <Button variant={"secondary"} text={t`Cancel`} onClick={cancelEditing} />
+                        <Button
+                            text={t`Save`}
+                            onClick={ev => {
+                                form.submit(ev);
+                            }}
+                            data-testid="l18n.locale.save"
+                        />
                     </SimpleFormFooter>
                 </SimpleForm>
             )}
diff --git a/packages/app-i18n/src/admin/views/locales/LocalesDataList.tsx b/packages/app-i18n/src/admin/views/locales/LocalesDataList.tsx
index f8dffd81fae..3932e903104 100644
--- a/packages/app-i18n/src/admin/views/locales/LocalesDataList.tsx
+++ b/packages/app-i18n/src/admin/views/locales/LocalesDataList.tsx
@@ -1,4 +1,6 @@
 import React, { useMemo } from "react";
+import { Button, Select } from "@webiny/admin-ui";
+import { ReactComponent as AddIcon } from "@webiny/icons/add.svg";
 import { i18n } from "@webiny/app/i18n";
 import {
     DataList,
@@ -8,17 +10,12 @@ import {
     ListItemMeta,
     ListActions,
     ListItemTextSecondary,
-    DataListModalOverlay,
-    DataListModalOverlayAction
+    DataListModalOverlayAction,
+    ListItemTextPrimary
 } from "@webiny/ui/List";
 
 import { DeleteIcon } from "@webiny/ui/List/DataList/icons";
-import { ButtonIcon, ButtonSecondary } from "@webiny/ui/Button";
-import { Cell, Grid } from "@webiny/ui/Grid";
-import { Select } from "@webiny/ui/Select";
 import SearchUI from "@webiny/app-admin/components/SearchUI";
-import { ReactComponent as AddIcon } from "@webiny/app-admin/assets/icons/add-18px.svg";
-import { ReactComponent as FilterIcon } from "@webiny/app-admin/assets/icons/filter-24px.svg";
 import { useLocalesList } from "./hooks/useLocalesList";
 import { I18NLocaleItem } from "~/types";
 
@@ -51,21 +48,15 @@ const LocalesDataList = () => {
 
     const localesDataListModalOverlay = useMemo(
         () => (
-            <DataListModalOverlay>
-                <Grid>
-                    <Cell span={12}>
-                        <Select value={sort || ""} onChange={setSort} label={t`Sort by`}>
-                            {SORTERS.map(({ label, sorter }) => {
-                                return (
-                                    <option key={label} value={sorter}>
-                                        {label}
-                                    </option>
-                                );
-                            })}
-                        </Select>
-                    </Cell>
-                </Grid>
-            </DataListModalOverlay>
+            <Select
+                value={sort || ""}
+                onChange={setSort}
+                label={t`Sort by`}
+                options={SORTERS.map(({ label, sorter: value }) => ({
+                    label,
+                    value
+                }))}
+            />
         ),
         [sort]
     );
@@ -74,9 +65,14 @@ const LocalesDataList = () => {
         <DataList
             loading={loading}
             actions={
-                <ButtonSecondary data-testid="new-record-button" onClick={createLocale}>
-                    <ButtonIcon icon={<AddIcon />} /> {t`New Locale`}
-                </ButtonSecondary>
+                <Button
+                    text={t`New`}
+                    icon={<AddIcon />}
+                    size={"sm"}
+                    className={"wby-ml-xs"}
+                    data-testid="new-record-button"
+                    onClick={createLocale}
+                />
             }
             data={locales}
             title={t`Locales`}
@@ -84,18 +80,18 @@ const LocalesDataList = () => {
                 <SearchUI
                     value={filter}
                     onChange={setFilter}
-                    inputPlaceholder={t`Search locales`}
+                    inputPlaceholder={t`Search locales...`}
                 />
             }
             modalOverlay={localesDataListModalOverlay}
-            modalOverlayAction={<DataListModalOverlayAction icon={<FilterIcon />} />}
+            modalOverlayAction={<DataListModalOverlayAction />}
         >
             {({ data }: { data: I18NLocaleItem[] }) => (
                 <ScrollList data-testid="default-data-list">
                     {data.map(item => (
                         <ListItem key={item.code} selected={item.code === currentLocaleCode}>
                             <ListItemText onClick={() => editLocale(item)}>
-                                {item.code}
+                                <ListItemTextPrimary>{item.code}</ListItemTextPrimary>
                                 <ListItemTextSecondary>
                                     {item.default && t`Default locale`}
                                 </ListItemTextSecondary>
diff --git a/packages/app-i18n/tsconfig.build.json b/packages/app-i18n/tsconfig.build.json
index f14235ad0f4..89c37719634 100644
--- a/packages/app-i18n/tsconfig.build.json
+++ b/packages/app-i18n/tsconfig.build.json
@@ -2,6 +2,7 @@
   "extends": "../../tsconfig.build.json",
   "include": ["src"],
   "references": [
+    { "path": "../admin-ui/tsconfig.build.json" },
     { "path": "../app/tsconfig.build.json" },
     { "path": "../app-admin/tsconfig.build.json" },
     { "path": "../app-security/tsconfig.build.json" },
diff --git a/packages/app-i18n/tsconfig.json b/packages/app-i18n/tsconfig.json
index 03fc0bb2e5f..315ff718e64 100644
--- a/packages/app-i18n/tsconfig.json
+++ b/packages/app-i18n/tsconfig.json
@@ -2,6 +2,7 @@
   "extends": "../../tsconfig.json",
   "include": ["src", "__tests__"],
   "references": [
+    { "path": "../admin-ui" },
     { "path": "../app" },
     { "path": "../app-admin" },
     { "path": "../app-security" },
@@ -18,6 +19,8 @@
     "paths": {
       "~/*": ["./src/*"],
       "~tests/*": ["./__tests__/*"],
+      "@webiny/admin-ui/*": ["../admin-ui/src/*"],
+      "@webiny/admin-ui": ["../admin-ui/src"],
       "@webiny/app/*": ["../app/src/*"],
       "@webiny/app": ["../app/src"],
       "@webiny/app-admin/*": ["../app-admin/src/*"],
diff --git a/packages/app-mailer/package.json b/packages/app-mailer/package.json
index d734d09fc07..4c2adc9f290 100644
--- a/packages/app-mailer/package.json
+++ b/packages/app-mailer/package.json
@@ -10,7 +10,7 @@
   "license": "MIT",
   "dependencies": {
     "@apollo/react-components": "^3.1.5",
-    "@emotion/react": "11.10.8",
+    "@webiny/admin-ui": "0.0.0",
     "@webiny/app-admin": "0.0.0",
     "@webiny/app-security": "0.0.0",
     "@webiny/form": "0.0.0",
@@ -29,7 +29,6 @@
     "react-helmet": "^6.1.0"
   },
   "devDependencies": {
-    "@emotion/babel-plugin": "^11.11.0",
     "@types/react": "18.2.79",
     "@webiny/project-utils": "0.0.0",
     "rimraf": "^6.0.1",
diff --git a/packages/app-mailer/src/plugins/Module.tsx b/packages/app-mailer/src/plugins/Module.tsx
index 5d8397a7acd..96670c8e93a 100644
--- a/packages/app-mailer/src/plugins/Module.tsx
+++ b/packages/app-mailer/src/plugins/Module.tsx
@@ -1,11 +1,12 @@
 import React, { lazy, Suspense } from "react";
-import { AddMenu as Menu, AddRoute, Plugins } from "@webiny/app-admin";
-import { SecureRoute } from "@webiny/app-security";
-import { AdminLayout } from "@webiny/app-admin/components/AdminLayout";
+import { AdminConfig, Plugins, Layout } from "@webiny/app-admin";
+import { HasPermission } from "@webiny/app-security";
 import Helmet from "react-helmet";
 import { usePermission } from "~/hooks/usePermission";
 import { CircularProgress } from "@webiny/ui/Progress";
 
+const { Menu, Route } = AdminConfig;
+
 const Settings = lazy(
     () =>
         import(
@@ -17,6 +18,7 @@ const Settings = lazy(
 interface LoaderProps {
     children: React.ReactElement;
 }
+
 const Loader = ({ children, ...props }: LoaderProps) => (
     <Suspense fallback={<CircularProgress />}>{React.cloneElement(children, props)}</Suspense>
 );
@@ -31,31 +33,33 @@ const MailerSettings = () => {
     }
 
     return (
-        <>
-            <Menu name={"settings"}>
-                <Menu name={"settings.mailer"} label={"Mailer"}>
-                    <Menu
-                        name={"settings.mailer.settings"}
-                        label={"Settings"}
-                        path={"/mailer/settings"}
-                    />
-                </Menu>
-            </Menu>
-            <AddRoute
-                exact
-                path={"/mailer/settings"}
-                render={() => (
-                    <SecureRoute permission={"mailer.settings"}>
-                        <AdminLayout>
+        <AdminConfig>
+            <HasPermission name={"mailer.settings"}>
+                <Route
+                    name={"mailer.settings"}
+                    exact
+                    path={"/mailer/settings"}
+                    element={
+                        <Layout>
                             <Helmet title={"Mailer - Settings"} />
                             <Loader>
                                 <Settings />
                             </Loader>
-                        </AdminLayout>
-                    </SecureRoute>
-                )}
-            />
-        </>
+                        </Layout>
+                    }
+                />
+                <Menu
+                    name={"mailer.settings"}
+                    parent={"settings"}
+                    element={<Menu.Group text={"Mailer"} />}
+                />
+                <Menu
+                    name={"mailer.settings.general"}
+                    parent={"settings"}
+                    element={<Menu.Link text={"Settings"} to={"/mailer/settings"} />}
+                />
+            </HasPermission>
+        </AdminConfig>
     );
 };
 
diff --git a/packages/app-mailer/src/views/settings/Settings.tsx b/packages/app-mailer/src/views/settings/Settings.tsx
index 0123b364898..da813892ee6 100644
--- a/packages/app-mailer/src/views/settings/Settings.tsx
+++ b/packages/app-mailer/src/views/settings/Settings.tsx
@@ -8,11 +8,7 @@ import {
     SimpleFormFooter,
     SimpleFormHeader
 } from "@webiny/app-admin/components/SimpleForm";
-import { CircularProgress } from "@webiny/ui/Progress";
-import { Cell, Grid } from "@webiny/ui/Grid";
-import { Input } from "@webiny/ui/Input";
 import { validation } from "@webiny/validation";
-import { ButtonPrimary } from "@webiny/ui/Button";
 import {
     GET_SETTINGS_QUERY,
     SAVE_SETTINGS_MUTATION,
@@ -21,9 +17,9 @@ import {
     SettingsQueryResponse
 } from "./graphql";
 import { TransportSettings, ValidationError } from "~/types";
-import { Alert } from "@webiny/ui/Alert";
 import { Validator } from "@webiny/validation/types";
 import dotPropImmutable from "dot-prop-immutable";
+import { Alert, Button, Grid, Input, OverlayLoader } from "@webiny/admin-ui";
 
 const displayErrors = (errors?: ValidationError[]) => {
     if (!errors) {
@@ -36,7 +32,12 @@ const displayErrors = (errors?: ValidationError[]) => {
                 if (!field) {
                     return null;
                 }
-                return <Alert key={`${field}`} title={error.message} type="danger" />;
+                return (
+                    <Alert key={`${field}`} title={"Error"} type="danger">
+                        {error.message}
+                        {"ssss"}
+                    </Alert>
+                );
             })}
         </>
     );
@@ -111,17 +112,21 @@ export const Settings = () => {
                         };
                         if (settingsError) {
                             return (
-                                <CenteredView>
+                                <SimpleForm>
                                     <SimpleFormHeader title="Mailer Settings" />
-                                    <Grid style={{ backgroundColor: "#FFFFFF" }}>
-                                        <Cell span={12}>
-                                            <Alert title={settingsError.message} type="danger" />
-                                            {settingsError.data?.description && (
-                                                <p>{settingsError.data.description}</p>
-                                            )}
-                                        </Cell>
-                                    </Grid>
-                                </CenteredView>
+                                    <SimpleFormContent>
+                                        <Grid>
+                                            <Grid.Column span={12}>
+                                                <Alert title={settingsError.message} type="danger">
+                                                    {settingsError.data?.description && (
+                                                        <p>{settingsError.data.description}</p>
+                                                    )}
+                                                </Alert>
+                                            </Grid.Column>
+                                        </Grid>
+                                    </SimpleFormContent>
+                                    <SimpleFormFooter>{""}</SimpleFormFooter>
+                                </SimpleForm>
                             );
                         }
 
@@ -144,13 +149,13 @@ export const Settings = () => {
                                     {({ Bind, form }) => (
                                         <SimpleForm>
                                             {(queryInProgress || mutationInProgress) && (
-                                                <CircularProgress />
+                                                <OverlayLoader />
                                             )}
                                             <SimpleFormHeader title="Mailer Settings" />
                                             <SimpleFormContent>
                                                 {displayErrors(errors)}
                                                 <Grid>
-                                                    <Cell span={12}>
+                                                    <Grid.Column span={12}>
                                                         <Bind
                                                             name={"host"}
                                                             validators={[
@@ -159,15 +164,23 @@ export const Settings = () => {
                                                                 )
                                                             ]}
                                                         >
-                                                            <Input type="text" label="Hostname" />
+                                                            <Input
+                                                                size={"lg"}
+                                                                type="text"
+                                                                label="Hostname"
+                                                            />
                                                         </Bind>
-                                                    </Cell>
-                                                    <Cell span={12}>
+                                                    </Grid.Column>
+                                                    <Grid.Column span={12}>
                                                         <Bind name={"port"}>
-                                                            <Input type="number" label="Port" />
+                                                            <Input
+                                                                size={"lg"}
+                                                                type="number"
+                                                                label="Port"
+                                                            />
                                                         </Bind>
-                                                    </Cell>
-                                                    <Cell span={12}>
+                                                    </Grid.Column>
+                                                    <Grid.Column span={12}>
                                                         <Bind
                                                             name={"user"}
                                                             validators={[
@@ -177,18 +190,20 @@ export const Settings = () => {
                                                             ]}
                                                         >
                                                             <Input
+                                                                size={"lg"}
                                                                 type="text"
                                                                 label="User"
                                                                 autoComplete="new-password"
                                                             />
                                                         </Bind>
-                                                    </Cell>
-                                                    <Cell span={12}>
+                                                    </Grid.Column>
+                                                    <Grid.Column span={12}>
                                                         <Bind
                                                             name={"password"}
                                                             validators={passwordValidators}
                                                         >
                                                             <Input
+                                                                size={"lg"}
                                                                 label="Password"
                                                                 type="password"
                                                                 autoComplete="new-password"
@@ -197,8 +212,8 @@ export const Settings = () => {
                                                                 inputRef={password}
                                                             />
                                                         </Bind>
-                                                    </Cell>
-                                                    <Cell span={12}>
+                                                    </Grid.Column>
+                                                    <Grid.Column span={12}>
                                                         <Bind
                                                             name={"from"}
                                                             validators={[
@@ -207,10 +222,14 @@ export const Settings = () => {
                                                                 )
                                                             ]}
                                                         >
-                                                            <Input type="text" label="Mail from" />
+                                                            <Input
+                                                                size={"lg"}
+                                                                type="text"
+                                                                label="Mail from"
+                                                            />
                                                         </Bind>
-                                                    </Cell>
-                                                    <Cell span={12}>
+                                                    </Grid.Column>
+                                                    <Grid.Column span={12}>
                                                         <Bind
                                                             name={"replyTo"}
                                                             validators={[
@@ -218,21 +237,21 @@ export const Settings = () => {
                                                             ]}
                                                         >
                                                             <Input
+                                                                size={"lg"}
                                                                 type="text"
                                                                 label="Mail reply-to"
                                                             />
                                                         </Bind>
-                                                    </Cell>
+                                                    </Grid.Column>
                                                 </Grid>
                                             </SimpleFormContent>
                                             <SimpleFormFooter>
-                                                <ButtonPrimary
+                                                <Button
+                                                    text={"Save"}
                                                     onClick={ev => {
                                                         form.submit(ev);
                                                     }}
-                                                >
-                                                    Save Settings
-                                                </ButtonPrimary>
+                                                />
                                             </SimpleFormFooter>
                                         </SimpleForm>
                                     )}
diff --git a/packages/app-mailer/tsconfig.build.json b/packages/app-mailer/tsconfig.build.json
index e9020a20ad1..a21c8f4b867 100644
--- a/packages/app-mailer/tsconfig.build.json
+++ b/packages/app-mailer/tsconfig.build.json
@@ -2,6 +2,7 @@
   "extends": "../../tsconfig.build.json",
   "include": ["src"],
   "references": [
+    { "path": "../admin-ui/tsconfig.build.json" },
     { "path": "../app-admin/tsconfig.build.json" },
     { "path": "../app-security/tsconfig.build.json" },
     { "path": "../form/tsconfig.build.json" },
diff --git a/packages/app-mailer/tsconfig.json b/packages/app-mailer/tsconfig.json
index a8b89383b73..8d7987b9371 100644
--- a/packages/app-mailer/tsconfig.json
+++ b/packages/app-mailer/tsconfig.json
@@ -2,6 +2,7 @@
   "extends": "../../tsconfig.json",
   "include": ["src", "__tests__"],
   "references": [
+    { "path": "../admin-ui" },
     { "path": "../app-admin" },
     { "path": "../app-security" },
     { "path": "../form" },
@@ -15,6 +16,8 @@
     "paths": {
       "~/*": ["./src/*"],
       "~tests/*": ["./__tests__/*"],
+      "@webiny/admin-ui/*": ["../admin-ui/src/*"],
+      "@webiny/admin-ui": ["../admin-ui/src"],
       "@webiny/app-admin/*": ["../app-admin/src/*"],
       "@webiny/app-admin": ["../app-admin/src"],
       "@webiny/app-security/*": ["../app-security/src/*"],
diff --git a/packages/app-page-builder-elements/src/renderers/button.tsx b/packages/app-page-builder-elements/src/renderers/button.tsx
index 051e2cf6896..cf9686cf680 100644
--- a/packages/app-page-builder-elements/src/renderers/button.tsx
+++ b/packages/app-page-builder-elements/src/renderers/button.tsx
@@ -97,6 +97,7 @@ export interface ButtonElementData {
 export interface Props {
     linkComponent?: LinkComponent;
     clickHandlers?: Array<ButtonClickHandler>;
+    isEditor?: boolean;
 }
 
 export const elementInputs = {
@@ -143,12 +144,21 @@ export const elementInputs = {
         getDefaultValue: ({ element }) => {
             return element.data.action?.href;
         }
+    }),
+    actionScrollToElement: ElementInput.create<ButtonElementData["action"]["scrollToElement"]>({
+        name: "actionHref",
+        type: "link",
+        translatable: true,
+        getDefaultValue: ({ element }) => {
+            return element.data.action?.scrollToElement;
+        }
     })
 };
 
 export const ButtonRenderer = createRenderer<Props, typeof elementInputs>(
     props => {
         const LinkComponent = props.linkComponent || DefaultLinkComponent;
+        const { isEditor } = props;
         const { getElement, getInputValues } = useRenderer();
         const element = getElement<ButtonElementData>();
         const inputs = getInputValues<typeof elementInputs>();
@@ -160,7 +170,8 @@ export const ButtonRenderer = createRenderer<Props, typeof elementInputs>(
         const action: ButtonElementData["action"] = {
             href: inputs.actionHref || "",
             newTab: inputs.actionNewTab || false,
-            actionType: inputs.actionType || "link"
+            actionType: inputs.actionType || "link",
+            scrollToElement: inputs.actionScrollToElement
         };
 
         let StyledButtonBody = ButtonBody;
@@ -193,6 +204,11 @@ export const ButtonRenderer = createRenderer<Props, typeof elementInputs>(
             return link?.href || ["link", "scrollToElement"].includes(action?.actionType);
         }, [link?.href, action?.actionType]);
 
+        // In the editor, we don't want to have buttons clickable.
+        if (isEditor) {
+            return <StyledButtonBody>{buttonInnerContent}</StyledButtonBody>;
+        }
+
         if (isLinkAction) {
             let href = "";
 
diff --git a/packages/app-page-builder/package.json b/packages/app-page-builder/package.json
index e624c1a1507..6281ffc0a4a 100644
--- a/packages/app-page-builder/package.json
+++ b/packages/app-page-builder/package.json
@@ -20,10 +20,10 @@
     "@fortawesome/free-regular-svg-icons": "^6.0.0",
     "@fortawesome/free-solid-svg-icons": "^6.0.0",
     "@fortawesome/react-fontawesome": "^0.1.17",
-    "@material-design-icons/svg": "^0.14.13",
     "@svgr/webpack": "^6.1.1",
     "@types/medium-editor": "^5.0.3",
     "@types/react": "18.2.79",
+    "@webiny/admin-ui": "0.0.0",
     "@webiny/app": "0.0.0",
     "@webiny/app-aco": "0.0.0",
     "@webiny/app-admin": "0.0.0",
@@ -37,6 +37,7 @@
     "@webiny/error": "0.0.0",
     "@webiny/feature-flags": "0.0.0",
     "@webiny/form": "0.0.0",
+    "@webiny/icons": "0.0.0",
     "@webiny/lexical-editor": "0.0.0",
     "@webiny/plugins": "0.0.0",
     "@webiny/react-composition": "0.0.0",
@@ -71,6 +72,7 @@
     "prop-types": "^15.8.1",
     "react": "18.2.0",
     "react-color": "^2.19.3",
+    "react-columned": "^1.1.3",
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
     "react-dom": "18.2.0",
@@ -78,7 +80,6 @@
     "react-images": "^0.5.19",
     "react-in-viewport": "^1.0.0-alpha.30",
     "react-sortable": "^2.0.0",
-    "react-virtualized": "^9.22.5",
     "recoil": "^0.7.7",
     "slugify": "^1.6.6",
     "store": "^2.0.12",
@@ -92,7 +93,6 @@
     "@types/pako": "^2.0.3",
     "@types/platform": "^1.3.4",
     "@types/react-images": "^0.5.3",
-    "@types/react-virtualized": "^9.21.16",
     "@types/resize-observer-browser": "^0.1.4",
     "@types/store": "^2.0.2",
     "@webiny/project-utils": "0.0.0",
diff --git a/packages/app-page-builder/src/PageBuilder.tsx b/packages/app-page-builder/src/PageBuilder.tsx
index dbb46a2ec85..33fed2ce8cd 100644
--- a/packages/app-page-builder/src/PageBuilder.tsx
+++ b/packages/app-page-builder/src/PageBuilder.tsx
@@ -1,6 +1,6 @@
 import React, { Fragment, useMemo } from "react";
 import { HasPermission } from "@webiny/app-security";
-import { Plugins, AddMenu as Menu, createProviderPlugin } from "@webiny/app-admin";
+import { Plugins, createProviderPlugin } from "@webiny/app-admin";
 import { Global, css } from "@emotion/react";
 import { PageBuilderProvider as ContextProvider } from "./contexts/PageBuilder";
 import { ReactComponent as PagesIcon } from "./admin/assets/table_chart-24px.svg";
@@ -23,6 +23,9 @@ import { AddImageLinkComponent } from "~/elementDecorators/AddImageLinkComponent
 import { PageTemplatesPreview } from "./dataInjection/preview/PageTemplatesPreview";
 import { PagesPreview } from "~/dataInjection/preview/PagesPreview";
 import { IfDynamicPagesEnabled } from "~/IfDynamicPagesEnabled";
+import { AdminConfig } from "@webiny/app-admin";
+
+const { Menu } = AdminConfig;
 
 export type { EditorProps };
 export { EditorRenderer };
@@ -47,67 +50,78 @@ const PageBuilderProviderPlugin = createProviderPlugin(Component => {
 
 const PageBuilderMenu = () => {
     return (
-        <>
+        <AdminConfig>
+            <HasPermission any={["pb.menu", "pb.category", "pb.page", "pb.template", "pb.block"]}>
+                <Menu
+                    name="pb"
+                    element={
+                        <Menu.Item
+                            text={"Page Builder"}
+                            icon={<Menu.Link.Icon label={"Page Builder"} element={<PagesIcon />} />}
+                        />
+                    }
+                />
+            </HasPermission>
+
             <HasPermission any={["pb.menu", "pb.category", "pb.page", "pb.template", "pb.block"]}>
-                <Menu name="pageBuilder" label={"Page Builder"} icon={<PagesIcon />}>
-                    <Menu name="pageBuilder.pages" label={"Pages"}>
-                        <HasPermission name={"pb.category"}>
-                            <Menu
-                                name="pageBuilder.pages.categories"
-                                label={"Categories"}
-                                path="/page-builder/categories"
-                            />
-                        </HasPermission>
-                        <HasPermission name={"pb.page"}>
-                            <Menu
-                                name="pageBuilder.pages.pages"
-                                label={"Pages"}
-                                path="/page-builder/pages"
-                            />
-                        </HasPermission>
-                        <HasPermission name={"pb.template"}>
-                            <Menu
-                                name="pageBuilder.pages.pageTemplates"
-                                label={"Templates"}
-                                path="/page-builder/page-templates"
-                            />
-                        </HasPermission>
-                        <HasPermission name={"pb.menu"}>
-                            <Menu
-                                name="pageBuilder.pages.menus"
-                                label={"Menus"}
-                                path="/page-builder/menus"
-                            />
-                        </HasPermission>
-                    </Menu>
-                    <Menu name="pageBuilder.blocks" label={"Blocks"}>
-                        <HasPermission name={"pb.block"}>
-                            <Menu
-                                name="pageBuilder.blocks.categories"
-                                label={"Categories"}
-                                path="/page-builder/block-categories"
-                            />
-                            <Menu
-                                name="pageBuilder.blocks.pageBlocks"
-                                label={"Blocks"}
-                                path="/page-builder/page-blocks"
-                            />
-                        </HasPermission>
-                    </Menu>
-                </Menu>
+                <Menu name="pb.pagesLabel" parent="pb" element={<Menu.Group text={"Pages"} />} />
+            </HasPermission>
+            <HasPermission name={"pb.category"}>
+                <Menu
+                    name="pb.categories"
+                    parent={"pb"}
+                    element={<Menu.Link text={"Categories"} to={"/page-builder/categories"} />}
+                />
+            </HasPermission>
+            <HasPermission name={"pb.page"}>
+                <Menu
+                    name="pb.pages"
+                    parent={"pb"}
+                    element={<Menu.Link text={"Pages"} to={"/page-builder/pages"} />}
+                />
+            </HasPermission>
+            <HasPermission name={"pb.template"}>
+                <Menu
+                    name="pb.templates"
+                    parent={"pb"}
+                    element={<Menu.Link text={"Templates"} to={"/page-builder/page-templates"} />}
+                />
+            </HasPermission>
+            <HasPermission name={"pb.menu"}>
+                <Menu
+                    name="pb.menus"
+                    parent={"pb"}
+                    element={<Menu.Link text={"Menus"} to={"/page-builder/menus"} />}
+                />
+            </HasPermission>
+            <HasPermission any={["pb.block"]}>
+                <Menu name="pb.blocksLabel" parent="pb" element={<Menu.Group text={"Blocks"} />} />
+                <Menu
+                    name="pb.blocks.categories"
+                    parent={"pb"}
+                    element={
+                        <Menu.Link text={"Categories"} to={"/page-builder/block-categories"} />
+                    }
+                />
+                <Menu
+                    name="pb.blocks.pageBlocks"
+                    parent={"pb"}
+                    element={<Menu.Link text={"Blocks"} to={"/page-builder/page-blocks"} />}
+                />
             </HasPermission>
             <HasPermission name={"pb.settings"}>
-                <Menu name={"settings"}>
-                    <Menu name={"settings.pageBuilder"} label={"Page Builder"}>
-                        <Menu
-                            name={"settings.pageBuilder.website"}
-                            label={"Website"}
-                            path={"/settings/page-builder/website"}
-                        />
-                    </Menu>
-                </Menu>
+                <Menu
+                    name="pb.settings"
+                    parent="settings"
+                    element={<Menu.Group text={"Page Builder"} />}
+                />
+                <Menu
+                    name="pb.settings.website"
+                    parent={"settings"}
+                    element={<Menu.Link text={"Website"} to={"/settings/page-builder/website"} />}
+                />
             </HasPermission>
-        </>
+        </AdminConfig>
     );
 };
 
@@ -140,8 +154,8 @@ export const PageBuilder = () => {
             <PagesModule />
             <PageBuilderProviderPlugin />
             <EditorRendererPlugin />
+            <PageBuilderMenu />
             <Plugins>
-                <PageBuilderMenu />
                 <WebsiteSettings />
                 <DefaultOnPagePublish />
                 <DefaultOnPageUnpublish />
diff --git a/packages/app-page-builder/src/admin/components/BottomInfoBar/BottomInfoBar.styled.tsx b/packages/app-page-builder/src/admin/components/BottomInfoBar/BottomInfoBar.styled.tsx
deleted file mode 100644
index 281a34eaade..00000000000
--- a/packages/app-page-builder/src/admin/components/BottomInfoBar/BottomInfoBar.styled.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import styled from "@emotion/styled";
-
-export const BottomInfoBarWrapper = styled("div")`
-    font-size: 0.8rem;
-    position: sticky;
-    bottom: 0;
-    height: 30px;
-    color: var(--mdc-theme-text-secondary-on-background);
-    border-top: 1px solid var(--mdc-theme-on-background);
-    background: var(--mdc-theme-surface);
-    width: 100%;
-    transform: translateZ(0);
-    overflow: hidden;
-    display: flex;
-    align-items: center;
-    z-index: 1;
-`;
-
-export const BottomInfoBarInner = styled("div")`
-    padding: 0 10px;
-    width: 100%;
-`;
diff --git a/packages/app-page-builder/src/admin/components/BottomInfoBar/BottomInfoBar.tsx b/packages/app-page-builder/src/admin/components/BottomInfoBar/BottomInfoBar.tsx
index 533c2b95177..75470c35e5b 100644
--- a/packages/app-page-builder/src/admin/components/BottomInfoBar/BottomInfoBar.tsx
+++ b/packages/app-page-builder/src/admin/components/BottomInfoBar/BottomInfoBar.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { ListMeta } from "./ListMeta";
-import { BottomInfoBarInner, BottomInfoBarWrapper } from "./BottomInfoBar.styled";
+import { Separator } from "@webiny/admin-ui";
 
 interface BottomInfoBarProps {
     loading: boolean;
@@ -10,14 +10,15 @@ interface BottomInfoBarProps {
 
 export const BottomInfoBar = (props: BottomInfoBarProps) => {
     return (
-        <BottomInfoBarWrapper>
-            <BottomInfoBarInner>
+        <div className="wby-sticky wby-bottom-0 wby-z-5 wby-bg-neutral-base wby-w-full wby-transform wby-translate-z-0 wby-overflow-hidden">
+            <Separator />
+            <div className={"wby-h-xl wby-px-md wby-py-sm"}>
                 <ListMeta
                     loading={props.loading}
                     totalCount={props.totalCount}
                     currentCount={props.currentCount}
                 />
-            </BottomInfoBarInner>
-        </BottomInfoBarWrapper>
+            </div>
+        </div>
     );
 };
diff --git a/packages/app-page-builder/src/admin/components/BottomInfoBar/ListMeta.tsx b/packages/app-page-builder/src/admin/components/BottomInfoBar/ListMeta.tsx
index 9f41f7b8e08..4e1d3aa0665 100644
--- a/packages/app-page-builder/src/admin/components/BottomInfoBar/ListMeta.tsx
+++ b/packages/app-page-builder/src/admin/components/BottomInfoBar/ListMeta.tsx
@@ -1,4 +1,5 @@
 import React, { useCallback } from "react";
+import { Text } from "@webiny/admin-ui";
 
 export interface ListMetaProps {
     loading: boolean;
@@ -15,5 +16,9 @@ export const ListMeta = (props: ListMetaProps) => {
         return null;
     }
 
-    return <span>{`Showing ${props.currentCount} out of ${getLabel(props.totalCount)}.`}</span>;
+    return (
+        <Text size={"sm"} as={"div"} className={"wby-text-neutral-strong"}>{`Showing ${
+            props.currentCount
+        } out of ${getLabel(props.totalCount)}.`}</Text>
+    );
 };
diff --git a/packages/app-page-builder/src/admin/components/BulkActions/ActionDelete.tsx b/packages/app-page-builder/src/admin/components/BulkActions/ActionDelete.tsx
index 1dfe01ffc67..92d1e7d0fae 100644
--- a/packages/app-page-builder/src/admin/components/BulkActions/ActionDelete.tsx
+++ b/packages/app-page-builder/src/admin/components/BulkActions/ActionDelete.tsx
@@ -1,5 +1,5 @@
 import React, { useMemo } from "react";
-import { ReactComponent as DeleteIcon } from "@material-design-icons/svg/outlined/delete.svg";
+import { ReactComponent as DeleteIcon } from "@webiny/icons/delete.svg";
 import { useRecords } from "@webiny/app-aco";
 import { observer } from "mobx-react-lite";
 import { PageListConfig } from "~/admin/config/pages";
diff --git a/packages/app-page-builder/src/admin/components/BulkActions/ActionDuplicate.tsx b/packages/app-page-builder/src/admin/components/BulkActions/ActionDuplicate.tsx
index 6d971bd9aa0..e09f0661221 100644
--- a/packages/app-page-builder/src/admin/components/BulkActions/ActionDuplicate.tsx
+++ b/packages/app-page-builder/src/admin/components/BulkActions/ActionDuplicate.tsx
@@ -1,5 +1,5 @@
 import React, { useMemo } from "react";
-import { ReactComponent as Duplicate } from "@material-design-icons/svg/outlined/library_add.svg";
+import { ReactComponent as Duplicate } from "@webiny/icons/library_add.svg";
 import { useRecords } from "@webiny/app-aco";
 import { observer } from "mobx-react-lite";
 import { PageListConfig } from "~/admin/config/pages";
diff --git a/packages/app-page-builder/src/admin/components/BulkActions/ActionExport.tsx b/packages/app-page-builder/src/admin/components/BulkActions/ActionExport.tsx
index 43f2eb6775f..9d33821c1bb 100644
--- a/packages/app-page-builder/src/admin/components/BulkActions/ActionExport.tsx
+++ b/packages/app-page-builder/src/admin/components/BulkActions/ActionExport.tsx
@@ -1,5 +1,5 @@
 import React, { useMemo } from "react";
-import { ReactComponent as ExportIcon } from "@material-design-icons/svg/outlined/file_download.svg";
+import { ReactComponent as ExportIcon } from "@webiny/icons/file_download.svg";
 import { observer } from "mobx-react-lite";
 import { PageListConfig } from "~/admin/config/pages";
 import useExportPageRevisionSelectorDialog from "~/editor/plugins/defaultBar/components/ExportPageButton/useExportPageRevisionSelectorDialog";
diff --git a/packages/app-page-builder/src/admin/components/BulkActions/ActionMove.tsx b/packages/app-page-builder/src/admin/components/BulkActions/ActionMove.tsx
index b55c840d01b..f036bf5a5c9 100644
--- a/packages/app-page-builder/src/admin/components/BulkActions/ActionMove.tsx
+++ b/packages/app-page-builder/src/admin/components/BulkActions/ActionMove.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback, useMemo } from "react";
-import { ReactComponent as MoveIcon } from "@material-design-icons/svg/outlined/drive_file_move.svg";
+import { ReactComponent as MoveIcon } from "@webiny/icons/drive_file_move.svg";
 import { useMoveToFolderDialog, useNavigateFolder, useRecords } from "@webiny/app-aco";
 import { FolderItem } from "@webiny/app-aco/types";
 import { observer } from "mobx-react-lite";
diff --git a/packages/app-page-builder/src/admin/components/BulkActions/ActionPublish.tsx b/packages/app-page-builder/src/admin/components/BulkActions/ActionPublish.tsx
index 17269f24af7..cba9b1cdfcd 100644
--- a/packages/app-page-builder/src/admin/components/BulkActions/ActionPublish.tsx
+++ b/packages/app-page-builder/src/admin/components/BulkActions/ActionPublish.tsx
@@ -1,5 +1,5 @@
 import React, { useMemo } from "react";
-import { ReactComponent as PublishIcon } from "@material-design-icons/svg/outlined/publish.svg";
+import { ReactComponent as PublishIcon } from "@webiny/icons/publish.svg";
 import { useRecords } from "@webiny/app-aco";
 import { observer } from "mobx-react-lite";
 import { PageListConfig } from "~/admin/config/pages";
diff --git a/packages/app-page-builder/src/admin/components/BulkActions/ActionUnpublish.tsx b/packages/app-page-builder/src/admin/components/BulkActions/ActionUnpublish.tsx
index b0673417f74..905ade3b2e2 100644
--- a/packages/app-page-builder/src/admin/components/BulkActions/ActionUnpublish.tsx
+++ b/packages/app-page-builder/src/admin/components/BulkActions/ActionUnpublish.tsx
@@ -1,5 +1,5 @@
 import React, { useMemo } from "react";
-import { ReactComponent as UnpublishIcon } from "@material-design-icons/svg/outlined/settings_backup_restore.svg";
+import { ReactComponent as UnpublishIcon } from "@webiny/icons/settings_backup_restore.svg";
 import { observer } from "mobx-react-lite";
 import { useRecords } from "@webiny/app-aco";
 import { PageListConfig } from "~/admin/config/pages";
diff --git a/packages/app-page-builder/src/admin/components/BulkActions/BulkActions.tsx b/packages/app-page-builder/src/admin/components/BulkActions/BulkActions.tsx
index 2b2389c69fc..f0f94c219f9 100644
--- a/packages/app-page-builder/src/admin/components/BulkActions/BulkActions.tsx
+++ b/packages/app-page-builder/src/admin/components/BulkActions/BulkActions.tsx
@@ -1,5 +1,5 @@
 import React, { useMemo } from "react";
-import { ReactComponent as Close } from "@material-design-icons/svg/outlined/close.svg";
+import { ReactComponent as Close } from "@webiny/icons/close.svg";
 import { Buttons } from "@webiny/app-admin";
 import { IconButton } from "@webiny/ui/Button";
 
diff --git a/packages/app-page-builder/src/admin/components/OptionsMenu.tsx b/packages/app-page-builder/src/admin/components/OptionsMenu.tsx
index f2a15e1fc0c..54694618757 100644
--- a/packages/app-page-builder/src/admin/components/OptionsMenu.tsx
+++ b/packages/app-page-builder/src/admin/components/OptionsMenu.tsx
@@ -1,18 +1,7 @@
 import React from "react";
-import { css } from "emotion";
+import { DropdownMenu, IconButton } from "@webiny/admin-ui";
 import { makeDecoratable } from "@webiny/app-admin";
-import { Menu, MenuItem } from "@webiny/ui/Menu";
-import { IconButton } from "@webiny/ui/Button";
-import { ReactComponent as MoreVerticalIcon } from "@material-design-icons/svg/filled/more_vert.svg";
-import { ListItemGraphic } from "@webiny/ui/List";
-import { Icon } from "@webiny/ui/Icon";
-
-const menuStyles = css({
-    ".disabled": {
-        opacity: 0.5,
-        pointerEvents: "none"
-    }
-});
+import { ReactComponent as MoreVerticalIcon } from "@webiny/icons/more_vert.svg";
 
 export interface OptionsMenuItem {
     label: string;
@@ -35,27 +24,27 @@ export const OptionsMenu = makeDecoratable(
         }
 
         return (
-            <Menu
-                className={menuStyles}
-                handle={
-                    <IconButton icon={<MoreVerticalIcon />} data-testid={props["data-testid"]} />
+            <DropdownMenu
+                trigger={
+                    <IconButton
+                        size={"sm"}
+                        variant={"ghost"}
+                        icon={<MoreVerticalIcon />}
+                        data-testid={props["data-testid"]}
+                    />
                 }
-                anchor={"topLeft"}
             >
                 {items.map(item => (
-                    <MenuItem
+                    <DropdownMenu.Item
                         key={item.label}
                         disabled={item.disabled ?? false}
                         onClick={item.onClick}
                         data-testid={item["data-testid"]}
-                    >
-                        <ListItemGraphic>
-                            <Icon icon={item.icon} />
-                        </ListItemGraphic>
-                        {item.label}
-                    </MenuItem>
+                        text={item.label}
+                        icon={<DropdownMenu.Item.Icon element={item.icon} label={item.label} />}
+                    />
                 ))}
-            </Menu>
+            </DropdownMenu>
         );
     }
 );
diff --git a/packages/app-page-builder/src/admin/components/Table/Empty/index.tsx b/packages/app-page-builder/src/admin/components/Table/Empty/index.tsx
index 9ec9d764cc6..82f68bb6920 100644
--- a/packages/app-page-builder/src/admin/components/Table/Empty/index.tsx
+++ b/packages/app-page-builder/src/admin/components/Table/Empty/index.tsx
@@ -1,6 +1,6 @@
 import React, { ReactElement } from "react";
 
-import { ReactComponent as SearchIcon } from "@material-design-icons/svg/outlined/search.svg";
+import { ReactComponent as SearchIcon } from "@webiny/icons/search.svg";
 import { i18n } from "@webiny/app/i18n";
 import EmptyView from "@webiny/app-admin/components/EmptyView";
 import { ButtonDefault } from "@webiny/ui/Button";
diff --git a/packages/app-page-builder/src/admin/components/Table/Empty/styled.tsx b/packages/app-page-builder/src/admin/components/Table/Empty/styled.tsx
index 9b6f7bd403b..288aba73ce2 100644
--- a/packages/app-page-builder/src/admin/components/Table/Empty/styled.tsx
+++ b/packages/app-page-builder/src/admin/components/Table/Empty/styled.tsx
@@ -1,5 +1,5 @@
 import styled from "@emotion/styled";
-import { ReactComponent as Add } from "@material-design-icons/svg/filled/add.svg";
+import { ReactComponent as Add } from "@webiny/icons/add.svg";
 
 export const Buttons = styled.div``;
 
diff --git a/packages/app-page-builder/src/admin/components/Table/Header/ButtonsCreate/ButtonsCreate.tsx b/packages/app-page-builder/src/admin/components/Table/Header/ButtonsCreate/ButtonsCreate.tsx
index 5055baa8807..f74999ceb49 100644
--- a/packages/app-page-builder/src/admin/components/Table/Header/ButtonsCreate/ButtonsCreate.tsx
+++ b/packages/app-page-builder/src/admin/components/Table/Header/ButtonsCreate/ButtonsCreate.tsx
@@ -1,6 +1,6 @@
 import React, { ReactElement } from "react";
 
-import { ReactComponent as Add } from "@material-design-icons/svg/filled/add.svg";
+import { ReactComponent as Add } from "@webiny/icons/add.svg";
 import { i18n } from "@webiny/app/i18n";
 import { ButtonIcon, ButtonPrimary, ButtonSecondary } from "@webiny/ui/Button";
 
@@ -27,7 +27,6 @@ export const ButtonsCreate = ({
             disabled={!canCreateFolder}
             data-testid="new-folder-button"
             onClick={onCreateFolder}
-            small={true}
         >
             <ButtonIcon icon={<Add />} />
             {t`New Folder`}
@@ -48,7 +47,6 @@ export const ButtonsCreate = ({
             data-testid="new-page-button"
             onClick={onCreatePage}
             flat={true}
-            small={true}
         >
             <ButtonIcon icon={<Add />} />
             {t`New Page`}
diff --git a/packages/app-page-builder/src/admin/components/Table/Header/TableActions/TableActions.tsx b/packages/app-page-builder/src/admin/components/Table/Header/TableActions/TableActions.tsx
index bc6b8c1887d..0e25dc81f0e 100644
--- a/packages/app-page-builder/src/admin/components/Table/Header/TableActions/TableActions.tsx
+++ b/packages/app-page-builder/src/admin/components/Table/Header/TableActions/TableActions.tsx
@@ -1,7 +1,7 @@
 import React, { ReactElement, useCallback, useMemo } from "react";
 
-import { ReactComponent as ExportIcon } from "@material-design-icons/svg/outlined/file_download.svg";
-import { ReactComponent as ImportIcon } from "@material-design-icons/svg/outlined/file_upload.svg";
+import { ReactComponent as ExportIcon } from "@webiny/icons/file_download.svg";
+import { ReactComponent as ImportIcon } from "@webiny/icons/file_upload.svg";
 import { i18n } from "@webiny/app/i18n";
 import { Tooltip } from "@webiny/ui/Tooltip";
 import { IconButton } from "@webiny/ui/Button";
diff --git a/packages/app-page-builder/src/admin/components/Table/Header/Title/Title.tsx b/packages/app-page-builder/src/admin/components/Table/Header/Title/Title.tsx
index a629b54fa7a..9eb21f5e8ac 100644
--- a/packages/app-page-builder/src/admin/components/Table/Header/Title/Title.tsx
+++ b/packages/app-page-builder/src/admin/components/Table/Header/Title/Title.tsx
@@ -11,7 +11,7 @@ export interface TitleProps {
 export const Title = ({ title }: TitleProps): ReactElement => {
     return (
         <Name use={"headline6"} tag={"h1"}>
-            {title !== undefined ? title : <Skeleton theme={"dark"} />}
+            {title || <Skeleton size={"lg"} />}
         </Name>
     );
 };
diff --git a/packages/app-page-builder/src/admin/components/Table/Table/Actions/ChangePageStatus.tsx b/packages/app-page-builder/src/admin/components/Table/Table/Actions/ChangePageStatus.tsx
index 80a27162b58..650fcbe4fad 100644
--- a/packages/app-page-builder/src/admin/components/Table/Table/Actions/ChangePageStatus.tsx
+++ b/packages/app-page-builder/src/admin/components/Table/Table/Actions/ChangePageStatus.tsx
@@ -1,6 +1,6 @@
 import React from "react";
-import { ReactComponent as Publish } from "@material-design-icons/svg/outlined/publish.svg";
-import { ReactComponent as Unpublish } from "@material-design-icons/svg/outlined/settings_backup_restore.svg";
+import { ReactComponent as Publish } from "@webiny/icons/publish.svg";
+import { ReactComponent as Unpublish } from "@webiny/icons/settings_backup_restore.svg";
 import { PageListConfig } from "~/admin/config/pages";
 import { usePage } from "~/admin/views/Pages/hooks/usePage";
 import { useChangePageStatus } from "~/admin/views/Pages/hooks/useChangePageStatus";
diff --git a/packages/app-page-builder/src/admin/components/Table/Table/Actions/DeletePage.tsx b/packages/app-page-builder/src/admin/components/Table/Table/Actions/DeletePage.tsx
index 056d77c0a18..588f419547b 100644
--- a/packages/app-page-builder/src/admin/components/Table/Table/Actions/DeletePage.tsx
+++ b/packages/app-page-builder/src/admin/components/Table/Table/Actions/DeletePage.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { makeDecoratable } from "@webiny/app-admin";
-import { ReactComponent as Delete } from "@material-design-icons/svg/outlined/delete.svg";
+import { ReactComponent as Delete } from "@webiny/icons/delete.svg";
 import { PageListConfig } from "~/admin/config/pages";
 import { usePage } from "~/admin/views/Pages/hooks/usePage";
 import { useDeletePage } from "~/admin/views/Pages/hooks/useDeletePage";
diff --git a/packages/app-page-builder/src/admin/components/Table/Table/Actions/DuplicatePage.tsx b/packages/app-page-builder/src/admin/components/Table/Table/Actions/DuplicatePage.tsx
index 1083325c3c4..29f810514a9 100644
--- a/packages/app-page-builder/src/admin/components/Table/Table/Actions/DuplicatePage.tsx
+++ b/packages/app-page-builder/src/admin/components/Table/Table/Actions/DuplicatePage.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback } from "react";
-import { ReactComponent as Duplicate } from "@material-design-icons/svg/outlined/library_add.svg";
+import { ReactComponent as Duplicate } from "@webiny/icons/library_add.svg";
 import { makeDecoratable } from "@webiny/react-composition";
 import { PageListConfig } from "~/admin/config/pages";
 import { usePage } from "~/admin/views/Pages/hooks/usePage";
diff --git a/packages/app-page-builder/src/admin/components/Table/Table/Actions/EditPage.tsx b/packages/app-page-builder/src/admin/components/Table/Table/Actions/EditPage.tsx
index 77fb906ba43..ee2e1bbdfa9 100644
--- a/packages/app-page-builder/src/admin/components/Table/Table/Actions/EditPage.tsx
+++ b/packages/app-page-builder/src/admin/components/Table/Table/Actions/EditPage.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { ReactComponent as Edit } from "@material-design-icons/svg/outlined/edit.svg";
+import { ReactComponent as Edit } from "@webiny/icons/edit.svg";
 import { makeDecoratable } from "@webiny/app-admin";
 import { PageListConfig } from "~/admin/config/pages";
 import { usePage } from "~/admin/views/Pages/hooks/usePage";
diff --git a/packages/app-page-builder/src/admin/components/Table/Table/Actions/MovePage.tsx b/packages/app-page-builder/src/admin/components/Table/Table/Actions/MovePage.tsx
index 0d38c587175..8b27740818d 100644
--- a/packages/app-page-builder/src/admin/components/Table/Table/Actions/MovePage.tsx
+++ b/packages/app-page-builder/src/admin/components/Table/Table/Actions/MovePage.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { ReactComponent as Move } from "@material-design-icons/svg/outlined/drive_file_move.svg";
+import { ReactComponent as Move } from "@webiny/icons/drive_file_move.svg";
 import { makeDecoratable } from "@webiny/app-admin";
 import { PageListConfig } from "~/admin/config/pages";
 import { usePage } from "~/admin/views/Pages/hooks/usePage";
diff --git a/packages/app-page-builder/src/admin/components/Table/Table/Actions/PreviewPage.tsx b/packages/app-page-builder/src/admin/components/Table/Table/Actions/PreviewPage.tsx
index b337872e8e1..fbddbf8076e 100644
--- a/packages/app-page-builder/src/admin/components/Table/Table/Actions/PreviewPage.tsx
+++ b/packages/app-page-builder/src/admin/components/Table/Table/Actions/PreviewPage.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { ReactComponent as Visibility } from "@material-design-icons/svg/outlined/visibility.svg";
+import { ReactComponent as Visibility } from "@webiny/icons/visibility.svg";
 import { makeDecoratable } from "@webiny/app-admin";
 import { PageListConfig } from "~/admin/config/pages";
 import { usePage } from "~/admin/views/Pages/hooks/usePage";
diff --git a/packages/app-page-builder/src/admin/components/Table/Table/Cells/CellName.tsx b/packages/app-page-builder/src/admin/components/Table/Table/Cells/CellName.tsx
index 5a933857637..a9b05a0063f 100644
--- a/packages/app-page-builder/src/admin/components/Table/Table/Cells/CellName.tsx
+++ b/packages/app-page-builder/src/admin/components/Table/Table/Cells/CellName.tsx
@@ -1,9 +1,9 @@
 import React from "react";
 
 import { useNavigateFolder } from "@webiny/app-aco";
-import { ReactComponent as Folder } from "@material-design-icons/svg/outlined/folder.svg";
-import { ReactComponent as FolderShared } from "@material-design-icons/svg/outlined/folder_shared.svg";
-import { ReactComponent as File } from "@material-design-icons/svg/outlined/description.svg";
+import { ReactComponent as Folder } from "@webiny/icons/folder.svg";
+import { ReactComponent as FolderShared } from "@webiny/icons/folder_shared.svg";
+import { ReactComponent as File } from "@webiny/icons/description.svg";
 
 import { PageListConfig } from "~/admin/config/pages";
 import { usePagesList } from "~/admin/views/Pages/hooks/usePagesList";
diff --git a/packages/app-page-builder/src/admin/config/pages/list/Browser/FolderAction.tsx b/packages/app-page-builder/src/admin/config/pages/list/Browser/FolderAction.tsx
index 4cb11debe14..7839116b234 100644
--- a/packages/app-page-builder/src/admin/config/pages/list/Browser/FolderAction.tsx
+++ b/packages/app-page-builder/src/admin/config/pages/list/Browser/FolderAction.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-import { CompositionScope } from "@webiny/react-composition";
 import { AcoConfig, FolderActionConfig } from "@webiny/app-aco";
 
 const { Folder } = AcoConfig;
@@ -10,11 +9,9 @@ type FolderActionProps = React.ComponentProps<typeof AcoConfig.Folder.Action>;
 
 const BaseFolderAction = (props: FolderActionProps) => {
     return (
-        <CompositionScope name={"pb.page"}>
-            <AcoConfig>
-                <Folder.Action {...props} />
-            </AcoConfig>
-        </CompositionScope>
+        <AcoConfig>
+            <Folder.Action {...props} />
+        </AcoConfig>
     );
 };
 
diff --git a/packages/app-page-builder/src/admin/config/pages/list/Browser/PageAction.tsx b/packages/app-page-builder/src/admin/config/pages/list/Browser/PageAction.tsx
index b30ac8369e5..6769638c4a7 100644
--- a/packages/app-page-builder/src/admin/config/pages/list/Browser/PageAction.tsx
+++ b/packages/app-page-builder/src/admin/config/pages/list/Browser/PageAction.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-import { CompositionScope } from "@webiny/react-composition";
 import { AcoConfig, RecordActionConfig } from "@webiny/app-aco";
 
 const { Record } = AcoConfig;
@@ -10,11 +9,9 @@ type PageActionProps = React.ComponentProps<typeof AcoConfig.Record.Action>;
 
 const BasePageAction = (props: PageActionProps) => {
     return (
-        <CompositionScope name={"pb.page"}>
-            <AcoConfig>
-                <Record.Action {...props} />
-            </AcoConfig>
-        </CompositionScope>
+        <AcoConfig>
+            <Record.Action {...props} />
+        </AcoConfig>
     );
 };
 
diff --git a/packages/app-page-builder/src/admin/config/pages/list/Browser/Table/Column.tsx b/packages/app-page-builder/src/admin/config/pages/list/Browser/Table/Column.tsx
index d43d6e36b8c..a7f89ac404f 100644
--- a/packages/app-page-builder/src/admin/config/pages/list/Browser/Table/Column.tsx
+++ b/packages/app-page-builder/src/admin/config/pages/list/Browser/Table/Column.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-import { CompositionScope } from "@webiny/react-composition";
 import { AcoConfig, TableColumnConfig as ColumnConfig } from "@webiny/app-aco";
 import { TableItem } from "~/types";
 
@@ -9,13 +8,11 @@ export { ColumnConfig };
 
 type ColumnProps = React.ComponentProps<typeof AcoConfig.Table.Column>;
 
-const BaseColumn = (props: ColumnProps) => {
+const BaseColumn: React.FC<ColumnProps> = props => {
     return (
-        <CompositionScope name={"pb.page"}>
-            <AcoConfig>
-                <Table.Column {...props} />
-            </AcoConfig>
-        </CompositionScope>
+        <AcoConfig>
+            <Table.Column {...props} />
+        </AcoConfig>
     );
 };
 
@@ -23,3 +20,5 @@ export const Column = Object.assign(BaseColumn, {
     useTableRow: Table.Column.createUseTableRow<TableItem>(),
     isFolderRow: Table.Column.isFolderRow
 });
+
+Column["displayName"] = "Column";
diff --git a/packages/app-page-builder/src/admin/config/pages/list/PageListConfig.tsx b/packages/app-page-builder/src/admin/config/pages/list/PageListConfig.tsx
index 5a7485790f2..929a98ee9fb 100644
--- a/packages/app-page-builder/src/admin/config/pages/list/PageListConfig.tsx
+++ b/packages/app-page-builder/src/admin/config/pages/list/PageListConfig.tsx
@@ -1,10 +1,21 @@
-import { useMemo } from "react";
+import React, { useMemo } from "react";
 import { createConfigurableComponent } from "@webiny/react-properties";
 import { Browser, BrowserConfig } from "./Browser";
+import { CompositionScope } from "@webiny/react-composition";
 
 const base = createConfigurableComponent<PageListConfig>("PageListConfig");
 
-export const PageListConfig = Object.assign(base.Config, { Browser });
+const ScopedPagesListConfig = ({ children }: { children: React.ReactNode }) => {
+    return (
+        <CompositionScope name={"pb.pages"}>
+            <base.Config>{children}</base.Config>
+        </CompositionScope>
+    );
+};
+
+ScopedPagesListConfig.displayName = "PagesListConfig";
+
+export const PageListConfig = Object.assign(ScopedPagesListConfig, { Browser });
 export const PageListWithConfig = base.WithConfig;
 
 interface PageListConfig {
diff --git a/packages/app-page-builder/src/admin/plugins/globalSearch/index.ts b/packages/app-page-builder/src/admin/plugins/globalSearch/index.ts
deleted file mode 100644
index e39b9e04256..00000000000
--- a/packages/app-page-builder/src/admin/plugins/globalSearch/index.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { AdminGlobalSearchPlugin } from "@webiny/app-admin/types";
-
-// Additional sections in global search.
-
-const plugins: AdminGlobalSearchPlugin[] = [
-    {
-        type: "admin-global-search",
-        name: "global-search-pages",
-        route: "/page-builder/pages",
-        label: "Pages"
-    }
-];
-
-export default plugins;
diff --git a/packages/app-page-builder/src/admin/plugins/icons/index.tsx b/packages/app-page-builder/src/admin/plugins/icons/index.tsx
index b462304293e..e95ea069e4f 100644
--- a/packages/app-page-builder/src/admin/plugins/icons/index.tsx
+++ b/packages/app-page-builder/src/admin/plugins/icons/index.tsx
@@ -1,20 +1,12 @@
-import React from "react";
 import { IconName, library } from "@fortawesome/fontawesome-svg-core";
 import { fab } from "@fortawesome/free-brands-svg-icons";
 import { fas } from "@fortawesome/free-solid-svg-icons";
 import { far } from "@fortawesome/free-regular-svg-icons";
-import { PbIcon, PbIconsPlugin } from "~/types";
 import { IconPrefix } from "@fortawesome/fontawesome-common-types";
+import { IconPickerIconDto } from "@webiny/admin-ui";
+import { PbIconsPlugin } from "~/types";
 
-const createSvg = (icon: string[]): React.ReactElement => {
-    return (
-        <svg width={24} viewBox={`0 0 ${icon[0]} ${icon[1]}`}>
-            <path d={icon[4]} fill="currentColor" />
-        </svg>
-    );
-};
-
-const icons: PbIcon[] = [];
+const icons: IconPickerIconDto[] = [];
 
 interface Icons {
     definitions: Record<IconPrefix, Record<IconName, string[]>>;
@@ -39,9 +31,8 @@ const plugin: PbIconsPlugin = {
             // @ts-expect-error
             Object.keys(defs).forEach((icon: IconName) => {
                 icons.push({
-                    id: [pack, icon],
-                    name: icon,
-                    svg: createSvg(defs[icon])
+                    prefix: pack,
+                    name: icon
                 });
             });
         });
diff --git a/packages/app-page-builder/src/admin/plugins/index.ts b/packages/app-page-builder/src/admin/plugins/index.ts
index b2ccc6f6f40..5a5f37aa5d1 100644
--- a/packages/app-page-builder/src/admin/plugins/index.ts
+++ b/packages/app-page-builder/src/admin/plugins/index.ts
@@ -3,7 +3,6 @@ import revisionContent from "./pageDetails/revisionContent";
 import previewContent from "./pageDetails/previewContent";
 import pageRevisions from "./pageDetails/pageRevisions";
 import menuItems from "./menuItems";
-import globalSearch from "./globalSearch";
 import routes from "./routes";
 import installation from "./installation";
 import permissionRenderer from "./permissionRenderer";
@@ -15,7 +14,6 @@ export default () => [
     previewContent,
     pageRevisions,
     menuItems,
-    globalSearch,
     routes,
     installation,
     permissionRenderer,
diff --git a/packages/app-page-builder/src/admin/plugins/menuItems/folder/FolderForm.tsx b/packages/app-page-builder/src/admin/plugins/menuItems/folder/FolderForm.tsx
index fc4a0a1a8fb..1fc6d712946 100644
--- a/packages/app-page-builder/src/admin/plugins/menuItems/folder/FolderForm.tsx
+++ b/packages/app-page-builder/src/admin/plugins/menuItems/folder/FolderForm.tsx
@@ -1,19 +1,10 @@
 import * as React from "react";
 import { Form } from "@webiny/form";
-import { Input } from "@webiny/ui/Input";
-import { Typography } from "@webiny/ui/Typography";
-import { Grid, Cell } from "@webiny/ui/Grid";
-import { ButtonSecondary, ButtonPrimary } from "@webiny/ui/Button";
-import { Elevation } from "@webiny/ui/Elevation";
 import { validation } from "@webiny/validation";
 import { FormOnSubmit } from "@webiny/form/types";
 import { MenuTreeItem } from "~/admin/views/Menus/types";
-import { css } from "emotion";
-
-const menuFolderFormStyle = css({
-    color: "var(--mdc-theme-on-surface)",
-    backgroundColor: "var(--mdc-theme-background) !important"
-});
+import { Grid } from "@webiny/admin-ui/Grid";
+import { Button, Heading, Input } from "@webiny/admin-ui";
 
 interface FolderFormProps {
     data: MenuTreeItem;
@@ -22,40 +13,36 @@ interface FolderFormProps {
 }
 const FolderForm = ({ data, onSubmit, onCancel }: FolderFormProps) => {
     return (
-        <Elevation z={4} className={menuFolderFormStyle}>
-            <Form data={data} onSubmit={onSubmit}>
-                {({ submit, Bind }) => (
-                    <>
-                        <Grid>
-                            <Cell span={12}>
-                                <Typography use={"overline"}>Folder menu item</Typography>
-                            </Cell>
-                        </Grid>
-                        <Grid>
-                            <Cell span={12}>
-                                <Bind name="title" validators={validation.create("required")}>
-                                    <Input label={`Title`} data-testid="pb.menu.new.folder.title" />
-                                </Bind>
-                            </Cell>
-                        </Grid>
-                        <Grid>
-                            <Cell span={12}>
-                                <ButtonSecondary onClick={onCancel}>Cancel</ButtonSecondary>
-                                <ButtonPrimary
-                                    onClick={ev => {
-                                        submit(ev);
-                                    }}
-                                    style={{ float: "right" }}
-                                    data-testid="pb.menu.new.folder.button.save"
-                                >
-                                    Save menu item
-                                </ButtonPrimary>
-                            </Cell>
-                        </Grid>
-                    </>
-                )}
-            </Form>
-        </Elevation>
+        <Form data={data} onSubmit={onSubmit}>
+            {({ submit, Bind }) => (
+                <Grid>
+                    <Grid.Column span={12}>
+                        <Heading level={6}>Folder menu item</Heading>
+                    </Grid.Column>
+                    <Grid.Column span={12}>
+                        <Bind name="title" validators={validation.create("required")}>
+                            <Input
+                                size={"lg"}
+                                label={`Title`}
+                                data-testid="pb.menu.new.folder.title"
+                            />
+                        </Bind>
+                    </Grid.Column>
+                    <Grid.Column span={12}>
+                        <div className={"wby-flex wby-justify-end wby-gap-sm"}>
+                            <Button variant={"secondary"} text={"Cancel"} onClick={onCancel} />
+                            <Button
+                                text={"Save menu item"}
+                                onClick={ev => {
+                                    submit(ev);
+                                }}
+                                data-testid="pb.menu.new.folder.button.save"
+                            />
+                        </div>
+                    </Grid.Column>
+                </Grid>
+            )}
+        </Form>
     );
 };
 
diff --git a/packages/app-page-builder/src/admin/plugins/menuItems/folder/index.tsx b/packages/app-page-builder/src/admin/plugins/menuItems/folder/index.tsx
index 965ba1f058c..df1a0b96ab0 100644
--- a/packages/app-page-builder/src/admin/plugins/menuItems/folder/index.tsx
+++ b/packages/app-page-builder/src/admin/plugins/menuItems/folder/index.tsx
@@ -1,5 +1,6 @@
 import * as React from "react";
-import { ReactComponent as LinkIcon } from "./round-folder-24px.svg";
+import { ReactComponent as FolderIcon } from "@webiny/icons/folder.svg";
+
 import FolderForm from "./FolderForm";
 import { PbMenuItemPlugin } from "../../../../types";
 
@@ -9,7 +10,7 @@ const plugin: PbMenuItemPlugin = {
     menuItem: {
         type: "folder",
         title: "Folder",
-        icon: <LinkIcon />,
+        icon: <FolderIcon />,
         canHaveChildren: true,
         renderForm(props) {
             return <FolderForm {...props} />;
diff --git a/packages/app-page-builder/src/admin/plugins/menuItems/folder/round-folder-24px.svg b/packages/app-page-builder/src/admin/plugins/menuItems/folder/round-folder-24px.svg
deleted file mode 100644
index 96d62919bc5..00000000000
--- a/packages/app-page-builder/src/admin/plugins/menuItems/folder/round-folder-24px.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path fill="currentColor" d="M10.59 4.59C10.21 4.21 9.7 4 9.17 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-1.41-1.41z"/></svg>
\ No newline at end of file
diff --git a/packages/app-page-builder/src/admin/plugins/menuItems/link/LinkForm.tsx b/packages/app-page-builder/src/admin/plugins/menuItems/link/LinkForm.tsx
index aa55c4c4fb2..e96a8c052f5 100644
--- a/packages/app-page-builder/src/admin/plugins/menuItems/link/LinkForm.tsx
+++ b/packages/app-page-builder/src/admin/plugins/menuItems/link/LinkForm.tsx
@@ -1,19 +1,9 @@
 import * as React from "react";
 import { Form } from "@webiny/form";
-import { Input } from "@webiny/ui/Input";
-import { Typography } from "@webiny/ui/Typography";
-import { Grid, Cell } from "@webiny/ui/Grid";
-import { ButtonSecondary, ButtonPrimary } from "@webiny/ui/Button";
-import { Elevation } from "@webiny/ui/Elevation";
 import { validation } from "@webiny/validation";
 import { FormOnSubmit } from "@webiny/form/types";
 import { MenuTreeItem } from "~/admin/views/Menus/types";
-import { css } from "emotion";
-
-const menuFormStyle = css({
-    color: "var(--mdc-theme-on-surface)",
-    backgroundColor: "var(--mdc-theme-background) !important"
-});
+import { Button, Grid, Heading, Input } from "@webiny/admin-ui";
 
 interface LinkFormProps {
     data: MenuTreeItem;
@@ -22,52 +12,40 @@ interface LinkFormProps {
 }
 const LinkForm = ({ data, onSubmit, onCancel }: LinkFormProps) => {
     return (
-        <Elevation z={4} className={menuFormStyle}>
-            <Form data={data} onSubmit={onSubmit}>
-                {({ submit, Bind }) => (
-                    <>
-                        <Grid>
-                            <Cell span={12}>
-                                <Typography use={"overline"}>Link menu item</Typography>
-                            </Cell>
-                        </Grid>
-                        <Grid>
-                            <Cell span={12}>
-                                <Bind name="title" validators={validation.create("required")}>
-                                    <Input label="Title" data-testid="pb.menu.new.link.title" />
-                                </Bind>
-                            </Cell>
-                        </Grid>
-                        <Grid>
-                            <Cell span={12}>
-                                <Bind
-                                    name="url"
-                                    validators={validation.create(
-                                        "required,url:allowRelative:allowHref"
-                                    )}
-                                >
-                                    <Input label="URL" data-testid="pb.menu.new.link.url" />
-                                </Bind>
-                            </Cell>
-                        </Grid>
-                        <Grid>
-                            <Cell span={12}>
-                                <ButtonSecondary onClick={onCancel}>Cancel</ButtonSecondary>
-                                <ButtonPrimary
-                                    onClick={ev => {
-                                        submit(ev);
-                                    }}
-                                    style={{ float: "right" }}
-                                    data-testid="pb.menu.new.link.button.save"
-                                >
-                                    Save menu item
-                                </ButtonPrimary>
-                            </Cell>
-                        </Grid>
-                    </>
-                )}
-            </Form>
-        </Elevation>
+        <Form data={data} onSubmit={onSubmit}>
+            {({ submit, Bind }) => (
+                <Grid>
+                    <Grid.Column span={12}>
+                        <Heading level={6}>Link menu item</Heading>
+                    </Grid.Column>
+                    <Grid.Column span={12}>
+                        <Bind name="title" validators={validation.create("required")}>
+                            <Input size={"lg"} label="Title" data-testid="pb.menu.new.link.title" />
+                        </Bind>
+                    </Grid.Column>
+                    <Grid.Column span={12}>
+                        <Bind
+                            name="url"
+                            validators={validation.create("required,url:allowRelative:allowHref")}
+                        >
+                            <Input size={"lg"} label="URL" data-testid="pb.menu.new.link.url" />
+                        </Bind>
+                    </Grid.Column>
+                    <Grid.Column span={12}>
+                        <div className={"wby-flex wby-justify-end wby-gap-sm"}>
+                            <Button variant={"secondary"} text={"Cancel"} onClick={onCancel} />
+                            <Button
+                                text={"Save menu item"}
+                                onClick={ev => {
+                                    submit(ev);
+                                }}
+                                data-testid="pb.menu.new.link.button.save"
+                            />
+                        </div>
+                    </Grid.Column>
+                </Grid>
+            )}
+        </Form>
     );
 };
 
diff --git a/packages/app-page-builder/src/admin/plugins/menuItems/link/index.tsx b/packages/app-page-builder/src/admin/plugins/menuItems/link/index.tsx
index 598cd7aced5..7e1f585b407 100644
--- a/packages/app-page-builder/src/admin/plugins/menuItems/link/index.tsx
+++ b/packages/app-page-builder/src/admin/plugins/menuItems/link/index.tsx
@@ -1,5 +1,6 @@
 import * as React from "react";
-import { ReactComponent as LinkIcon } from "./round-link-24px.svg";
+import { ReactComponent as LinkIcon } from "@webiny/icons/link.svg";
+
 import LinkForm from "./LinkForm";
 import { PbMenuItemPlugin } from "../../../../types";
 
diff --git a/packages/app-page-builder/src/admin/plugins/menuItems/link/round-link-24px.svg b/packages/app-page-builder/src/admin/plugins/menuItems/link/round-link-24px.svg
deleted file mode 100644
index 1006dfd3550..00000000000
--- a/packages/app-page-builder/src/admin/plugins/menuItems/link/round-link-24px.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path fill="currentColor" d="M17 7h-3c-.55 0-1 .45-1 1s.45 1 1 1h3c1.65 0 3 1.35 3 3s-1.35 3-3 3h-3c-.55 0-1 .45-1 1s.45 1 1 1h3c2.76 0 5-2.24 5-5s-2.24-5-5-5zm-9 5c0 .55.45 1 1 1h6c.55 0 1-.45 1-1s-.45-1-1-1H9c-.55 0-1 .45-1 1zm2 3H7c-1.65 0-3-1.35-3-3s1.35-3 3-3h3c.55 0 1-.45 1-1s-.45-1-1-1H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h3c.55 0 1-.45 1-1s-.45-1-1-1z"/></svg>
\ No newline at end of file
diff --git a/packages/app-page-builder/src/admin/plugins/menuItems/page/PageForm.tsx b/packages/app-page-builder/src/admin/plugins/menuItems/page/PageForm.tsx
index ce37a100900..229aa81b829 100644
--- a/packages/app-page-builder/src/admin/plugins/menuItems/page/PageForm.tsx
+++ b/packages/app-page-builder/src/admin/plugins/menuItems/page/PageForm.tsx
@@ -1,20 +1,10 @@
 import * as React from "react";
 import { Form } from "@webiny/form";
-import { Input } from "@webiny/ui/Input";
-import { Typography } from "@webiny/ui/Typography";
-import { Cell, Grid } from "@webiny/ui/Grid";
-import { ButtonPrimary, ButtonSecondary } from "@webiny/ui/Button";
 import { PagesAutocomplete } from "~/admin/components/PagesAutocomplete";
-import { Elevation } from "@webiny/ui/Elevation";
 import { validation } from "@webiny/validation";
 import { FormOnSubmit } from "@webiny/form/types";
 import { MenuTreeItem } from "~/admin/views/Menus/types";
-import { css } from "emotion";
-
-const menuPageFormStyle = css({
-    color: "var(--mdc-theme-on-surface)",
-    backgroundColor: "var(--mdc-theme-background) !important"
-});
+import { Button, Grid, Heading, Input } from "@webiny/admin-ui";
 
 interface LinkFormProps {
     data: MenuTreeItem;
@@ -23,60 +13,53 @@ interface LinkFormProps {
 }
 const LinkForm = ({ data, onSubmit, onCancel }: LinkFormProps) => {
     return (
-        <Elevation z={4} className={menuPageFormStyle}>
-            <Form data={data} onSubmit={onSubmit}>
-                {({ submit, Bind, data, form }) => (
-                    <>
-                        <Grid>
-                            <Cell span={12}>
-                                <Typography use={"overline"}>Page menu item</Typography>
-                            </Cell>
-                        </Grid>
-
-                        <Grid>
-                            <Cell span={12}>
-                                <Bind name="page" validators={validation.create("required")}>
-                                    {({ onChange, ...rest }) => (
-                                        <PagesAutocomplete
-                                            {...rest}
-                                            onChange={(value: string, selection: MenuTreeItem) => {
-                                                onChange(value);
-                                                if (!data.title && selection) {
-                                                    form.setValue("title", selection.title);
-                                                }
-                                            }}
-                                            label="Page"
-                                            data-testid="pb.menu.new.pageitem.page"
-                                        />
-                                    )}
-                                </Bind>
-                            </Cell>
-                        </Grid>
-                        <Grid>
-                            <Cell span={12}>
-                                <Bind name="title" validators={validation.create("required")}>
-                                    <Input label="Title" data-testid="pb.menu.new.pageitem.title" />
-                                </Bind>
-                            </Cell>
-                        </Grid>
-                        <Grid>
-                            <Cell span={12}>
-                                <ButtonSecondary onClick={onCancel}>Cancel</ButtonSecondary>
-                                <ButtonPrimary
-                                    onClick={ev => {
-                                        submit(ev);
+        <Form data={data} onSubmit={onSubmit}>
+            {({ submit, Bind, data, form }) => (
+                <Grid>
+                    <Grid.Column span={12}>
+                        <Heading level={6}>Page menu item</Heading>
+                    </Grid.Column>
+                    <Grid.Column span={12}>
+                        <Bind name="page" validators={validation.create("required")}>
+                            {({ onChange, ...rest }) => (
+                                <PagesAutocomplete
+                                    {...rest}
+                                    onChange={(value: string, selection: MenuTreeItem) => {
+                                        onChange(value);
+                                        if (!data.title && selection) {
+                                            form.setValue("title", selection.title);
+                                        }
                                     }}
-                                    style={{ float: "right" }}
-                                    data-testid="pb.menu.new.pageitem.button.save"
-                                >
-                                    Save menu item
-                                </ButtonPrimary>
-                            </Cell>
-                        </Grid>
-                    </>
-                )}
-            </Form>
-        </Elevation>
+                                    label="Page"
+                                    data-testid="pb.menu.new.pageitem.page"
+                                />
+                            )}
+                        </Bind>
+                    </Grid.Column>
+                    <Grid.Column span={12}>
+                        <Bind name="title" validators={validation.create("required")}>
+                            <Input
+                                size={"lg"}
+                                label="Title"
+                                data-testid="pb.menu.new.pageitem.title"
+                            />
+                        </Bind>
+                    </Grid.Column>
+                    <Grid.Column span={12}>
+                        <div className={"wby-flex wby-justify-end wby-gap-sm"}>
+                            <Button variant={"secondary"} text={"Cancel"} onClick={onCancel} />
+                            <Button
+                                text={"Save menu item"}
+                                onClick={ev => {
+                                    submit(ev);
+                                }}
+                                data-testid="pb.menu.new.pageitem.button.save"
+                            />
+                        </div>
+                    </Grid.Column>
+                </Grid>
+            )}
+        </Form>
     );
 };
 
diff --git a/packages/app-page-builder/src/admin/plugins/menuItems/page/index.tsx b/packages/app-page-builder/src/admin/plugins/menuItems/page/index.tsx
index 83314874e0e..706c526d952 100644
--- a/packages/app-page-builder/src/admin/plugins/menuItems/page/index.tsx
+++ b/packages/app-page-builder/src/admin/plugins/menuItems/page/index.tsx
@@ -1,5 +1,6 @@
 import * as React from "react";
-import { ReactComponent as PageIcon } from "./round-subject-24px.svg";
+import { ReactComponent as PageIcon } from "@webiny/icons/article.svg";
+
 import PageForm from "./PageForm";
 import { PbMenuItemPlugin } from "../../../../types";
 
diff --git a/packages/app-page-builder/src/admin/plugins/menuItems/page/round-subject-24px.svg b/packages/app-page-builder/src/admin/plugins/menuItems/page/round-subject-24px.svg
deleted file mode 100644
index 9e00a719932..00000000000
--- a/packages/app-page-builder/src/admin/plugins/menuItems/page/round-subject-24px.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path fill="currentColor" d="M13 17H5c-.55 0-1 .45-1 1s.45 1 1 1h8c.55 0 1-.45 1-1s-.45-1-1-1zm6-8H5c-.55 0-1 .45-1 1s.45 1 1 1h14c.55 0 1-.45 1-1s-.45-1-1-1zM5 15h14c.55 0 1-.45 1-1s-.45-1-1-1H5c-.55 0-1 .45-1 1s.45 1 1 1zM4 6c0 .55.45 1 1 1h14c.55 0 1-.45 1-1s-.45-1-1-1H5c-.55 0-1 .45-1 1z"/></svg>
\ No newline at end of file
diff --git a/packages/app-page-builder/src/admin/plugins/menuItems/pageList/PageListForm.tsx b/packages/app-page-builder/src/admin/plugins/menuItems/pageList/PageListForm.tsx
index 65f8b11ce4f..3d0a3aaf3f0 100644
--- a/packages/app-page-builder/src/admin/plugins/menuItems/pageList/PageListForm.tsx
+++ b/packages/app-page-builder/src/admin/plugins/menuItems/pageList/PageListForm.tsx
@@ -1,22 +1,11 @@
 import React from "react";
 import { Form } from "@webiny/form";
-import { Input } from "@webiny/ui/Input";
-import { Typography } from "@webiny/ui/Typography";
-import { Grid, Cell } from "@webiny/ui/Grid";
-import { ButtonSecondary, ButtonPrimary } from "@webiny/ui/Button";
-import { Select } from "@webiny/ui/Select";
 import { TagsMultiAutocomplete } from "~/admin/components/TagsMultiAutocomplete";
 import { CategoriesAutocomplete } from "~/admin/components/CategoriesAutocomplete";
-import { Elevation } from "@webiny/ui/Elevation";
 import { validation } from "@webiny/validation";
 import { FormOnSubmit } from "@webiny/form/types";
 import { MenuTreeItem } from "~/admin/views/Menus/types";
-import { css } from "emotion";
-
-const menuPageFormStyle = css({
-    color: "var(--mdc-theme-on-surface)",
-    backgroundColor: "var(--mdc-theme-background) !important"
-});
+import { Button, Grid, Heading, Input, Select } from "@webiny/admin-ui";
 
 interface LinkFormProps {
     data: MenuTreeItem;
@@ -26,75 +15,71 @@ interface LinkFormProps {
 
 const LinkForm = ({ data, onSubmit, onCancel }: LinkFormProps) => {
     return (
-        <Elevation z={4} className={menuPageFormStyle} data-testid="pb.page.list.menu.item.form">
+        <div data-testid="pb.page.list.menu.item.form">
             <Form data={data} onSubmit={onSubmit}>
                 {({ Bind, submit, data: formData }) => (
                     <>
                         <Grid>
-                            <Cell span={12}>
-                                <Typography use={"overline"}>Page list menu item</Typography>
-                            </Cell>
-                        </Grid>
-                        <Grid>
-                            <Cell span={12} data-testid="pb.menu.new.listitem.title.grid">
+                            <Grid.Column span={12}>
+                                <Heading level={6}>Page list menu item</Heading>
+                            </Grid.Column>
+                            <Grid.Column span={12} data-testid="pb.menu.new.listitem.title.grid">
                                 <Bind name="title" validators={validation.create("required")}>
-                                    <Input label="Title" data-testid="pb.menu.new.listitem.title" />
+                                    <Input
+                                        size={"lg"}
+                                        label="Title"
+                                        data-testid="pb.menu.new.listitem.title"
+                                    />
                                 </Bind>
-                            </Cell>
-                        </Grid>
-                        <Grid>
-                            <Cell span={12}>
+                            </Grid.Column>
+                            <Grid.Column span={12}>
                                 <Bind name="category" validators={validation.create("required")}>
                                     <CategoriesAutocomplete
                                         label="Category"
                                         data-testid="pb.menu.new.listitem.category"
                                     />
                                 </Bind>
-                            </Cell>
-                        </Grid>
-                        <Grid>
-                            <Cell span={12}>
+                            </Grid.Column>
+                            <Grid.Column span={6}>
                                 <Bind
                                     name="sortBy"
                                     defaultValue={"publishedOn"}
                                     validators={validation.create("required")}
                                 >
                                     <Select
+                                        size={"lg"}
                                         label="Sort by..."
                                         data-testid="pb.menu.new.listitem.sortby"
-                                    >
-                                        <option value="publishedOn">Published on</option>
-                                        <option value="title">Title</option>
-                                    </Select>
+                                        options={[
+                                            { label: "Published on", value: "publishedOn" },
+                                            { label: "Title", value: "title" }
+                                        ]}
+                                    />
                                 </Bind>
-                            </Cell>
-                        </Grid>
-                        <Grid>
-                            <Cell span={12}>
+                            </Grid.Column>
+                            <Grid.Column span={6}>
                                 <Bind
                                     name="sortDir"
                                     defaultValue={"desc"}
                                     validators={validation.create("required")}
                                 >
                                     <Select
+                                        size={"lg"}
                                         label="Sort direction..."
                                         data-testid="pb.menu.new.listitem.sortdirection"
-                                    >
-                                        <option value="asc">Ascending</option>
-                                        <option value="desc">Descending</option>
-                                    </Select>
+                                        options={[
+                                            { label: "Ascending", value: "asc" },
+                                            { label: "Descending", value: "desc" }
+                                        ]}
+                                    />
                                 </Bind>
-                            </Cell>
-                        </Grid>
-                        <Grid>
-                            <Cell span={12}>
+                            </Grid.Column>
+                            <Grid.Column span={12}>
                                 <Bind name="tags">
                                     <TagsMultiAutocomplete data-testid="pb.menu.new.listitem.tags" />
                                 </Bind>
-                            </Cell>
-                        </Grid>
-                        <Grid>
-                            <Cell span={12}>
+                            </Grid.Column>
+                            <Grid.Column span={12}>
                                 {formData.tags && formData.tags.length > 0 && (
                                     <Bind
                                         name="tagsRule"
@@ -102,41 +87,42 @@ const LinkForm = ({ data, onSubmit, onCancel }: LinkFormProps) => {
                                         validators={validation.create("required")}
                                     >
                                         <Select
+                                            size={"lg"}
                                             label="Tags rule..."
                                             data-testid="pb.menu.new.listitem.tagsrule"
-                                        >
-                                            <option value="all">Must include all tags</option>
-                                            <option value="any">
-                                                Must include any of the tags
-                                            </option>
-                                        </Select>
+                                            options={[
+                                                { label: "Must include all tags", value: "all" },
+                                                {
+                                                    label: "Must include any of the tags",
+                                                    value: "any"
+                                                }
+                                            ]}
+                                        />
                                     </Bind>
                                 )}
-                            </Cell>
-                        </Grid>
-                        <Grid>
-                            <Cell span={12}>
-                                <ButtonSecondary
-                                    onClick={onCancel}
-                                    data-testid="pb.menu.new.listitem.button.cancel"
-                                >
-                                    Cancel
-                                </ButtonSecondary>
-                                <ButtonPrimary
-                                    onClick={ev => {
-                                        submit(ev);
-                                    }}
-                                    style={{ float: "right" }}
-                                    data-testid="pb.menu.new.listitem.button.save"
-                                >
-                                    Save menu item
-                                </ButtonPrimary>
-                            </Cell>
+                            </Grid.Column>
+                            <Grid.Column span={12}>
+                                <div className={"wby-flex wby-justify-end wby-gap-sm"}>
+                                    <Button
+                                        variant={"secondary"}
+                                        text={"Cancel"}
+                                        onClick={onCancel}
+                                        data-testid="pb.menu.new.listitem.button.cancel"
+                                    />
+                                    <Button
+                                        text={"Save menu item"}
+                                        onClick={ev => {
+                                            submit(ev);
+                                        }}
+                                        data-testid="pb.menu.new.listitem.button.save"
+                                    />
+                                </div>
+                            </Grid.Column>
                         </Grid>
                     </>
                 )}
             </Form>
-        </Elevation>
+        </div>
     );
 };
 
diff --git a/packages/app-page-builder/src/admin/plugins/menuItems/pageList/index.tsx b/packages/app-page-builder/src/admin/plugins/menuItems/pageList/index.tsx
index fb20e914b5d..1723c950967 100644
--- a/packages/app-page-builder/src/admin/plugins/menuItems/pageList/index.tsx
+++ b/packages/app-page-builder/src/admin/plugins/menuItems/pageList/index.tsx
@@ -1,5 +1,6 @@
 import * as React from "react";
-import { ReactComponent as PageListIcon } from "./round-format_list_bulleted-24px.svg";
+import { ReactComponent as PageListIcon } from "@webiny/icons/format_list_bulleted.svg";
+
 import PageListForm from "./PageListForm";
 import { PbMenuItemPlugin } from "../../../../types";
 
diff --git a/packages/app-page-builder/src/admin/plugins/menuItems/pageList/round-format_list_bulleted-24px.svg b/packages/app-page-builder/src/admin/plugins/menuItems/pageList/round-format_list_bulleted-24px.svg
deleted file mode 100644
index 1c2c73f45b8..00000000000
--- a/packages/app-page-builder/src/admin/plugins/menuItems/pageList/round-format_list_bulleted-24px.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path fill="currentColor" d="M4 10.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm0-6c-.83 0-1.5.67-1.5 1.5S3.17 7.5 4 7.5 5.5 6.83 5.5 6 4.83 4.5 4 4.5zm0 12c-.83 0-1.5.68-1.5 1.5s.68 1.5 1.5 1.5 1.5-.68 1.5-1.5-.67-1.5-1.5-1.5zM8 19h12c.55 0 1-.45 1-1s-.45-1-1-1H8c-.55 0-1 .45-1 1s.45 1 1 1zm0-6h12c.55 0 1-.45 1-1s-.45-1-1-1H8c-.55 0-1 .45-1 1s.45 1 1 1zM7 6c0 .55.45 1 1 1h12c.55 0 1-.45 1-1s-.45-1-1-1H8c-.55 0-1 .45-1 1z"/></svg>
\ No newline at end of file
diff --git a/packages/app-page-builder/src/admin/plugins/pageDetails/header/Header.tsx b/packages/app-page-builder/src/admin/plugins/pageDetails/header/Header.tsx
index b8e37345003..0ca61aa468d 100644
--- a/packages/app-page-builder/src/admin/plugins/pageDetails/header/Header.tsx
+++ b/packages/app-page-builder/src/admin/plugins/pageDetails/header/Header.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import styled from "@emotion/styled";
 import { renderPlugins } from "@webiny/app/plugins";
 import { Typography } from "@webiny/ui/Typography";
-import { ReactComponent as OpenInNew } from "@material-design-icons/svg/round/open_in_new.svg";
+import { ReactComponent as OpenInNew } from "@webiny/icons/open_in_new.svg";
 import { PbPageData } from "~/types";
 import { usePreviewPage } from "~/admin/hooks/usePreviewPage";
 
diff --git a/packages/app-page-builder/src/admin/plugins/pageDetails/header/pageOptionsMenu/DuplicatePage/DuplicatePage.tsx b/packages/app-page-builder/src/admin/plugins/pageDetails/header/pageOptionsMenu/DuplicatePage/DuplicatePage.tsx
index 4489e488fd6..994474dbd1a 100644
--- a/packages/app-page-builder/src/admin/plugins/pageDetails/header/pageOptionsMenu/DuplicatePage/DuplicatePage.tsx
+++ b/packages/app-page-builder/src/admin/plugins/pageDetails/header/pageOptionsMenu/DuplicatePage/DuplicatePage.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { ReactComponent as DuplicateIcon } from "@material-design-icons/svg/filled/library_add.svg";
+import { ReactComponent as DuplicateIcon } from "@webiny/icons/library_add.svg";
 import { makeDecoratable } from "@webiny/app-admin";
 import { DefaultDuplicatePage } from "./DefaultDuplicatePage";
 import { DuplicatePageMenuItem } from "./DuplicatePageMenuItem";
diff --git a/packages/app-page-builder/src/admin/plugins/pageDetails/header/pageOptionsMenu/PageOptionsMenu.tsx b/packages/app-page-builder/src/admin/plugins/pageDetails/header/pageOptionsMenu/PageOptionsMenu.tsx
index ad6513dc471..810d1126b1d 100644
--- a/packages/app-page-builder/src/admin/plugins/pageDetails/header/pageOptionsMenu/PageOptionsMenu.tsx
+++ b/packages/app-page-builder/src/admin/plugins/pageDetails/header/pageOptionsMenu/PageOptionsMenu.tsx
@@ -3,7 +3,7 @@ import { IconButton } from "@webiny/ui/Button";
 import { Icon } from "@webiny/ui/Icon";
 import { ReactComponent as MoreVerticalIcon } from "~/admin/assets/more_vert.svg";
 import { ReactComponent as HomeIcon } from "~/admin/assets/round-home-24px.svg";
-import { ReactComponent as GridViewIcon } from "@material-design-icons/svg/outlined/grid_view.svg";
+import { ReactComponent as GridViewIcon } from "@webiny/icons/grid_view.svg";
 import { ListItemGraphic } from "@webiny/ui/List";
 import { MenuItem, Menu } from "@webiny/ui/Menu";
 import { CreatePageTemplateDialog } from "~/admin/views/PageTemplates/CreatePageTemplateDialog";
diff --git a/packages/app-page-builder/src/admin/plugins/pageDetails/header/publishRevision/PublishRevision.tsx b/packages/app-page-builder/src/admin/plugins/pageDetails/header/publishRevision/PublishRevision.tsx
index 73f7988a011..db4e43b9f92 100644
--- a/packages/app-page-builder/src/admin/plugins/pageDetails/header/publishRevision/PublishRevision.tsx
+++ b/packages/app-page-builder/src/admin/plugins/pageDetails/header/publishRevision/PublishRevision.tsx
@@ -3,8 +3,8 @@ import { IconButton } from "@webiny/ui/Button";
 import { Tooltip } from "@webiny/ui/Tooltip";
 import { useConfirmationDialog } from "@webiny/app-admin/hooks/useConfirmationDialog";
 import { i18n } from "@webiny/app/i18n";
-import { ReactComponent as PublishIcon } from "@material-design-icons/svg/round/publish.svg";
-import { ReactComponent as UnpublishIcon } from "@material-design-icons/svg/round/settings_backup_restore.svg";
+import { ReactComponent as PublishIcon } from "@webiny/icons/publish.svg";
+import { ReactComponent as UnpublishIcon } from "@webiny/icons/settings_backup_restore.svg";
 import { makeDecoratable } from "@webiny/app-admin";
 import { usePagesPermissions } from "~/hooks/permissions";
 import { useGetFolderLevelPermission } from "@webiny/app-aco";
diff --git a/packages/app-page-builder/src/admin/plugins/permissionRenderer/PageBuilderPermissions/CustomSection.tsx b/packages/app-page-builder/src/admin/plugins/permissionRenderer/PageBuilderPermissions/CustomSection.tsx
index d7514cdb9a7..2b2abb178d9 100644
--- a/packages/app-page-builder/src/admin/plugins/permissionRenderer/PageBuilderPermissions/CustomSection.tsx
+++ b/packages/app-page-builder/src/admin/plugins/permissionRenderer/PageBuilderPermissions/CustomSection.tsx
@@ -2,9 +2,8 @@ import React from "react";
 import { Grid, Cell } from "@webiny/ui/Grid";
 import { Select } from "@webiny/ui/Select";
 import { i18n } from "@webiny/app/i18n";
-import { Elevation } from "@webiny/ui/Elevation";
-import { Typography } from "@webiny/ui/Typography";
 import { BindComponent } from "@webiny/form/types";
+import { PermissionsGroup } from "@webiny/app-admin/components/Permissions";
 
 const t = i18n.ns("app-page-builder/admin/plugins/permission-renderer");
 
@@ -30,54 +29,45 @@ const CustomSection = ({
     const rwdSelectEnabled = ["full"].includes(data[`${entity}AccessScope`]);
 
     return (
-        <Elevation z={1} style={{ marginTop: 10 }}>
+        <PermissionsGroup title={title}>
             <Grid>
                 <Cell span={12}>
-                    <Typography use={"overline"}>{title}</Typography>
+                    <Bind
+                        name={`${entity}AccessScope`}
+                        beforeChange={(value: string, cb: (value: string) => void) => {
+                            if (value === "own") {
+                                setValue(`${entity}RWD`, "rwd");
+                            }
+                            cb(value);
+                        }}
+                    >
+                        <Select
+                            disabled={disabled}
+                            label={t`Access Scope`}
+                            description={t`The scope of the content that can be accessed.`}
+                        >
+                            <option value={"no"}>{t`None`}</option>
+                            <option value={"full"}>{t`All content`}</option>
+                            <option value={"own"}>{t`Only content created by the user`}</option>
+                        </Select>
+                    </Bind>
                 </Cell>
                 <Cell span={12}>
-                    <Grid style={{ padding: 0, paddingBottom: 24 }}>
-                        <Cell span={12}>
-                            <Bind
-                                name={`${entity}AccessScope`}
-                                beforeChange={(value: string, cb: (value: string) => void) => {
-                                    if (value === "own") {
-                                        setValue(`${entity}RWD`, "rwd");
-                                    }
-                                    cb(value);
-                                }}
-                            >
-                                <Select
-                                    disabled={disabled}
-                                    label={t`Access Scope`}
-                                    description={t`The scope of the content that can be accessed.`}
-                                >
-                                    <option value={"no"}>{t`None`}</option>
-                                    <option value={"full"}>{t`All content`}</option>
-                                    <option
-                                        value={"own"}
-                                    >{t`Only content created by the user`}</option>
-                                </Select>
-                            </Bind>
-                        </Cell>
-                        <Cell span={12}>
-                            <Bind name={`${entity}RWD`}>
-                                <Select
-                                    disabled={disabled || !rwdSelectEnabled}
-                                    label={t`Primary actions`}
-                                    description={t`Primary actions that can be performed on the content.`}
-                                >
-                                    <option value={"r"}>{t`Read`}</option>
-                                    <option value={"rw"}>{t`Read, write`}</option>
-                                    <option value={"rwd"}>{t`Read, write, delete`}</option>
-                                </Select>
-                            </Bind>
-                        </Cell>
-                        {children}
-                    </Grid>
+                    <Bind name={`${entity}RWD`}>
+                        <Select
+                            disabled={disabled || !rwdSelectEnabled}
+                            label={t`Primary actions`}
+                            description={t`Primary actions that can be performed on the content.`}
+                        >
+                            <option value={"r"}>{t`Read`}</option>
+                            <option value={"rw"}>{t`Read, write`}</option>
+                            <option value={"rwd"}>{t`Read, write, delete`}</option>
+                        </Select>
+                    </Bind>
                 </Cell>
+                {children}
             </Grid>
-        </Elevation>
+        </PermissionsGroup>
     );
 };
 
diff --git a/packages/app-page-builder/src/admin/plugins/permissionRenderer/PageBuilderPermissions/PageBuilderPermissions.tsx b/packages/app-page-builder/src/admin/plugins/permissionRenderer/PageBuilderPermissions/PageBuilderPermissions.tsx
index dd67361b5fc..ba77d2d6d37 100644
--- a/packages/app-page-builder/src/admin/plugins/permissionRenderer/PageBuilderPermissions/PageBuilderPermissions.tsx
+++ b/packages/app-page-builder/src/admin/plugins/permissionRenderer/PageBuilderPermissions/PageBuilderPermissions.tsx
@@ -5,11 +5,10 @@ import { i18n } from "@webiny/app/i18n";
 import {
     CannotUseAaclAlert,
     PermissionInfo,
-    gridNoPaddingClass
+    PermissionsGroup,
+    gridWithPaddingClass
 } from "@webiny/app-admin/components/Permissions";
 import { Form } from "@webiny/form";
-import { Elevation } from "@webiny/ui/Elevation";
-import { Typography } from "@webiny/ui/Typography";
 import { Checkbox, CheckboxGroup } from "@webiny/ui/Checkbox";
 import CustomSection from "./CustomSection";
 import { useSecurity } from "@webiny/app-security";
@@ -197,20 +196,20 @@ export const PageBuilderPermissions = ({ value, onChange }: PageBuilderPermissio
         <Form data={formData} onChange={onFormChange}>
             {({ data, Bind, setValue }) => (
                 <Fragment>
-                    <Grid className={gridNoPaddingClass}>
+                    <Grid className={gridWithPaddingClass}>
                         <Cell span={12}>
                             {data.accessLevel === "custom" && cannotUseAAcl && (
                                 <CannotUseAaclAlert />
                             )}
                         </Cell>
                     </Grid>
-                    <Grid className={gridNoPaddingClass}>
+                    <Grid className={gridWithPaddingClass}>
                         <Cell span={6}>
                             <PermissionInfo title={t`Access Level`} />
                         </Cell>
                         <Cell span={6}>
                             <Bind name={"accessLevel"}>
-                                <Select label={t`Access Level`}>
+                                <Select>
                                     <option value={NO_ACCESS}>{t`No access`}</option>
                                     <option value={FULL_ACCESS}>{t`Full access`}</option>
                                     <option value={CUSTOM_ACCESS}>{t`Custom access`}</option>
@@ -219,7 +218,7 @@ export const PageBuilderPermissions = ({ value, onChange }: PageBuilderPermissio
                         </Cell>
                     </Grid>
                     {data.accessLevel === CUSTOM_ACCESS && (
-                        <Fragment>
+                        <div className={"wby-mt-lg"}>
                             <CustomSection
                                 data={data}
                                 Bind={Bind}
@@ -304,36 +303,24 @@ export const PageBuilderPermissions = ({ value, onChange }: PageBuilderPermissio
                                     </Bind>
                                 </Cell>
                             </CustomSection>
-                            <Elevation z={1} style={{ marginTop: 10 }}>
+                            <PermissionsGroup title={t`Settings`}>
                                 <Grid>
-                                    <Cell span={12}>
-                                        <Typography use={"overline"}>{t`Settings`}</Typography>
+                                    <Cell span={6}>
+                                        <PermissionInfo title={t`Manage settings`} />
                                     </Cell>
-                                    <Cell span={12}>
-                                        <Grid style={{ padding: 0, paddingBottom: 24 }}>
-                                            <Cell span={6}>
-                                                <PermissionInfo title={t`Manage settings`} />
-                                            </Cell>
-                                            <Cell span={6} align={"middle"}>
-                                                <Bind name={"settingsAccessLevel"}>
-                                                    <Select
-                                                        label={t`Access Level`}
-                                                        disabled={cannotUseAAcl}
-                                                    >
-                                                        <option
-                                                            value={NO_ACCESS}
-                                                        >{t`No access`}</option>
-                                                        <option
-                                                            value={FULL_ACCESS}
-                                                        >{t`Full Access`}</option>
-                                                    </Select>
-                                                </Bind>
-                                            </Cell>
-                                        </Grid>
+                                    <Cell span={6} align={"middle"}>
+                                        <Bind name={"settingsAccessLevel"}>
+                                            <Select disabled={cannotUseAAcl}>
+                                                <option value={NO_ACCESS}>{t`No access`}</option>
+                                                <option
+                                                    value={FULL_ACCESS}
+                                                >{t`Full Access`}</option>
+                                            </Select>
+                                        </Bind>
                                     </Cell>
                                 </Grid>
-                            </Elevation>
-                        </Fragment>
+                            </PermissionsGroup>
+                        </div>
                     )}
                 </Fragment>
             )}
diff --git a/packages/app-page-builder/src/admin/plugins/permissionRenderer/PageBuilderPermissions/index.tsx b/packages/app-page-builder/src/admin/plugins/permissionRenderer/PageBuilderPermissions/index.tsx
index a5354c5254f..d2a0f92f601 100644
--- a/packages/app-page-builder/src/admin/plugins/permissionRenderer/PageBuilderPermissions/index.tsx
+++ b/packages/app-page-builder/src/admin/plugins/permissionRenderer/PageBuilderPermissions/index.tsx
@@ -1,7 +1,7 @@
 import React from "react";
-import { AccordionItem } from "@webiny/ui/Accordion";
+import { Accordion } from "@webiny/admin-ui";
 import { AdminAppPermissionRendererPlugin } from "@webiny/app-admin/types";
-import { ReactComponent as Icon } from "../../../assets/table_chart-24px.svg";
+import { ReactComponent as PermissionsIcon } from "@webiny/icons/table_chart.svg";
 import { PageBuilderPermissions } from "./PageBuilderPermissions";
 import { i18n } from "@webiny/app/i18n";
 
@@ -12,14 +12,19 @@ const plugin: AdminAppPermissionRendererPlugin = {
     name: "admin-app-permissions-renderer-page-builder",
     render(props) {
         return (
-            <AccordionItem
-                icon={<Icon />}
+            <Accordion.Item
+                icon={
+                    <Accordion.Item.Icon
+                        icon={<PermissionsIcon />}
+                        label={"Page Builder Permissions"}
+                    />
+                }
                 title={t`Page Builder`}
                 description={t`Manage Page Builder app access permissions.`}
                 data-testid={"permission.pb"}
             >
                 <PageBuilderPermissions {...props} />
-            </AccordionItem>
+            </Accordion.Item>
         );
     }
 };
diff --git a/packages/app-page-builder/src/admin/plugins/routes.tsx b/packages/app-page-builder/src/admin/plugins/routes.tsx
index 8cd18ad6eb2..40c77f28aad 100644
--- a/packages/app-page-builder/src/admin/plugins/routes.tsx
+++ b/packages/app-page-builder/src/admin/plugins/routes.tsx
@@ -71,7 +71,7 @@ const plugins: RoutePlugin[] = [
                         <RenderPluginsLoader>
                             <AdminLayout>
                                 <Helmet title={"Page Builder - Pages"} />
-                                <CompositionScope name={"pb.page"}>
+                                <CompositionScope name={"pb.pages"}>
                                     <Pages />
                                 </CompositionScope>
                             </AdminLayout>
@@ -90,10 +90,12 @@ const plugins: RoutePlugin[] = [
                 element={
                     <SecureRoute permission={ROLE_PB_PAGES}>
                         <EditorPluginsLoader>
-                            <Helmet title={"Page Builder - Edit page"} />
-                            <CompositionScope name={"pb.pageEditor"}>
-                                <PageEditor />
-                            </CompositionScope>
+                            <RenderPluginsLoader>
+                                <Helmet title={"Page Builder - Edit page"} />
+                                <CompositionScope name={"pb.pageEditor"}>
+                                    <PageEditor />
+                                </CompositionScope>
+                            </RenderPluginsLoader>
                         </EditorPluginsLoader>
                     </SecureRoute>
                 }
@@ -128,10 +130,12 @@ const plugins: RoutePlugin[] = [
                 element={
                     <SecureRoute permission={ROLE_PB_TEMPLATE}>
                         <EditorPluginsLoader>
-                            <Helmet title={"Page Builder - Edit template"} />
-                            <CompositionScope name={"pb.templateEditor"}>
-                                <TemplateEditor />
-                            </CompositionScope>
+                            <RenderPluginsLoader>
+                                <Helmet title={"Page Builder - Edit template"} />
+                                <CompositionScope name={"pb.templateEditor"}>
+                                    <TemplateEditor />
+                                </CompositionScope>
+                            </RenderPluginsLoader>
                         </EditorPluginsLoader>
                     </SecureRoute>
                 }
@@ -183,10 +187,12 @@ const plugins: RoutePlugin[] = [
                 element={
                     <SecureRoute permission={ROLE_PB_PAGES}>
                         <EditorPluginsLoader>
-                            <Helmet title={"Page Builder - Edit block"} />
-                            <CompositionScope name={"pb.blockEditor"}>
-                                <BlockEditor />
-                            </CompositionScope>
+                            <RenderPluginsLoader>
+                                <Helmet title={"Page Builder - Edit block"} />
+                                <CompositionScope name={"pb.blockEditor"}>
+                                    <BlockEditor />
+                                </CompositionScope>
+                            </RenderPluginsLoader>
                         </EditorPluginsLoader>
                     </SecureRoute>
                 }
diff --git a/packages/app-page-builder/src/admin/plugins/welcomeScreenWidget.tsx b/packages/app-page-builder/src/admin/plugins/welcomeScreenWidget.tsx
index 9d68102a281..40fe228808c 100644
--- a/packages/app-page-builder/src/admin/plugins/welcomeScreenWidget.tsx
+++ b/packages/app-page-builder/src/admin/plugins/welcomeScreenWidget.tsx
@@ -1,20 +1,9 @@
 import React from "react";
-import { Link } from "@webiny/react-router";
+import { ReactComponent as AddIcon } from "@webiny/icons/add.svg";
+import { ReactComponent as PbPageIcon } from "@webiny/icons/table_chart.svg";
+import { Button, Link } from "@webiny/admin-ui";
 
 import { AdminWelcomeScreenWidgetPlugin } from "@webiny/app-plugin-admin-welcome-screen/types";
-import { ButtonSecondary } from "@webiny/ui/Button";
-import { css } from "emotion";
-
-const linkStyle = css({
-    textDecoration: "none",
-    "&:hover": {
-        textDecoration: "none"
-    }
-});
-
-const buttonStyle = css({
-    margin: "1rem auto 1rem auto"
-});
 
 const plugin: AdminWelcomeScreenWidgetPlugin = {
     type: "admin-welcome-screen-widget",
@@ -22,12 +11,15 @@ const plugin: AdminWelcomeScreenWidgetPlugin = {
     permission: "pb.page",
     widget: {
         cta: (
-            <Link to="/page-builder/pages" className={linkStyle}>
-                <ButtonSecondary className={buttonStyle}>Build a new Page</ButtonSecondary>
-            </Link>
+            <Button
+                text={<Link to="/page-builder/pages">{"Build a new Page"}</Link>}
+                icon={<AddIcon />}
+                asChild
+            />
         ),
         description: "Build stunning landing pages with an easy to use drag and drop editor.",
-        title: "Page Builder"
+        title: "Pages",
+        icon: <PbPageIcon />
     }
 };
 
diff --git a/packages/app-page-builder/src/admin/views/BlockCategories/BlockCategoriesDataList.tsx b/packages/app-page-builder/src/admin/views/BlockCategories/BlockCategoriesDataList.tsx
index 2ac30a8f69d..032a7be37ed 100644
--- a/packages/app-page-builder/src/admin/views/BlockCategories/BlockCategoriesDataList.tsx
+++ b/packages/app-page-builder/src/admin/views/BlockCategories/BlockCategoriesDataList.tsx
@@ -1,4 +1,6 @@
 import React, { useCallback, useMemo, useState } from "react";
+import { Button, Grid, Select } from "@webiny/admin-ui";
+import { ReactComponent as AddIcon } from "@webiny/icons/add.svg";
 import { i18n } from "@webiny/app/i18n";
 import { useRouter } from "@webiny/react-router";
 import { useQuery, useMutation } from "@apollo/react-hooks";
@@ -17,16 +19,12 @@ import {
     ListItemText,
     ListItemMeta,
     ListActions,
-    ListItemTextSecondary
+    ListItemTextSecondary,
+    ListItemTextPrimary
 } from "@webiny/ui/List";
 
 import { DeleteIcon } from "@webiny/ui/List/DataList/icons";
-import { Cell, Grid } from "@webiny/ui/Grid";
-import { Select } from "@webiny/ui/Select";
-import { ButtonIcon, ButtonSecondary } from "@webiny/ui/Button";
 import SearchUI from "@webiny/app-admin/components/SearchUI";
-import { ReactComponent as AddIcon } from "@webiny/app-admin/assets/icons/add-18px.svg";
-import { ReactComponent as FilterIcon } from "@webiny/app-admin/assets/icons/filter-24px.svg";
 import { PbBlockCategory } from "~/types";
 import { Icon } from "~/admin/utils/createBlockCategoryPlugin";
 import { useBlockCategoriesPermissions } from "~/hooks/permissions";
@@ -125,22 +123,19 @@ const PageBuilderBlockCategoriesDataList = ({
         () => (
             <DataListModalOverlay>
                 <Grid>
-                    <Cell span={12}>
+                    <Grid.Column span={12}>
                         <Select
                             value={sort}
                             onChange={setSort}
                             label={t`Sort by`}
-                            description={"Sort block categories by"}
-                        >
-                            {SORTERS.map(({ label, sort: value }) => {
-                                return (
-                                    <option key={label} value={value}>
-                                        {label}
-                                    </option>
-                                );
+                            options={SORTERS.map(({ label, sort: value }) => {
+                                return {
+                                    label,
+                                    value
+                                };
                             })}
-                        </Select>
-                    </Cell>
+                        />
+                    </Grid.Column>
                 </Grid>
             </DataListModalOverlay>
         ),
@@ -157,27 +152,27 @@ const PageBuilderBlockCategoriesDataList = ({
             data={categoryList}
             actions={
                 canCreate ? (
-                    <ButtonSecondary
+                    <Button
+                        text={t`New`}
+                        icon={<AddIcon />}
+                        size={"sm"}
+                        className={"wby-ml-xs"}
                         data-testid="data-list-new-record-button"
                         onClick={() => history.push("/page-builder/block-categories?new=true")}
-                    >
-                        <ButtonIcon icon={<AddIcon />} /> {t`New Block Category`}
-                    </ButtonSecondary>
+                    />
                 ) : null
             }
             search={
                 <SearchUI
                     value={filter}
                     onChange={setFilter}
-                    inputPlaceholder={t`Search block categories`}
+                    inputPlaceholder={t`Search block categories...`}
+                    dataTestId={"pb.block.category.data-list.search-input"}
                 />
             }
             modalOverlay={blockCategoriesDataListModalOverlay}
             modalOverlayAction={
-                <DataListModalOverlayAction
-                    icon={<FilterIcon />}
-                    data-testid={"default-data-list.filter"}
-                />
+                <DataListModalOverlayAction data-testid={"default-data-list.filter"} />
             }
         >
             {({ data }: { data: PbBlockCategory[] }) => (
@@ -194,7 +189,7 @@ const PageBuilderBlockCategoriesDataList = ({
                                 <Icon category={item} />
                             </ListItemGraphic>
                             <ListItemText>
-                                {item.name}
+                                <ListItemTextPrimary>{item.name}</ListItemTextPrimary>
                                 <ListItemTextSecondary>
                                     {item.description || t`No description provided.`}
                                 </ListItemTextSecondary>
diff --git a/packages/app-page-builder/src/admin/views/BlockCategories/BlockCategoriesForm.tsx b/packages/app-page-builder/src/admin/views/BlockCategories/BlockCategoriesForm.tsx
index ccb63398298..339cb40692f 100644
--- a/packages/app-page-builder/src/admin/views/BlockCategories/BlockCategoriesForm.tsx
+++ b/packages/app-page-builder/src/admin/views/BlockCategories/BlockCategoriesForm.tsx
@@ -1,10 +1,9 @@
 import React, { useCallback, useMemo } from "react";
-import styled from "@emotion/styled";
+import { Button, Grid, Input, OverlayLoader, Textarea } from "@webiny/admin-ui";
+import { ReactComponent as AddIcon } from "@webiny/icons/add.svg";
+import { ReactComponent as TableIcon } from "@webiny/icons/table_chart.svg";
 import { i18n } from "@webiny/app/i18n";
 import { Form } from "@webiny/form";
-import { Grid, Cell } from "@webiny/ui/Grid";
-import { ButtonDefault, ButtonIcon, ButtonPrimary } from "@webiny/ui/Button";
-import { CircularProgress } from "@webiny/ui/Progress";
 import { useMutation, useQuery } from "@apollo/react-hooks";
 import {
     SimpleForm,
@@ -29,23 +28,16 @@ import {
 } from "./graphql";
 import { useRouter } from "@webiny/react-router";
 import { useSnackbar } from "@webiny/app-admin/hooks/useSnackbar";
-import { Input } from "@webiny/ui/Input";
 import { PbBlockCategory } from "~/types";
 import pick from "lodash/pick";
 import get from "lodash/get";
 import set from "lodash/set";
 import isEmpty from "lodash/isEmpty";
 import EmptyView from "@webiny/app-admin/components/EmptyView";
-import { ReactComponent as AddIcon } from "@webiny/app-admin/assets/icons/add-18px.svg";
 import { usePagesPermissions } from "~/hooks/permissions";
 
 const t = i18n.ns("app-page-builder/admin/block-categories/form");
 
-const ButtonWrapper = styled("div")({
-    display: "flex",
-    justifyContent: "space-between"
-});
-
 interface CategoriesFormProps {
     canCreate: boolean;
 }
@@ -164,17 +156,18 @@ const CategoriesForm = ({ canCreate }: CategoriesFormProps) => {
     if (showEmptyView) {
         return (
             <EmptyView
+                icon={<TableIcon />}
                 title={t`Click on the left side list to display block category details {message}`({
                     message: canCreate ? "or create a..." : ""
                 })}
                 action={
                     canCreate ? (
-                        <ButtonDefault
+                        <Button
+                            text={t`New Category`}
+                            icon={<AddIcon />}
                             data-testid="new-record-button"
                             onClick={() => history.push("/page-builder/block-categories?new=true")}
-                        >
-                            <ButtonIcon icon={<AddIcon />} /> {t`New Block Category`}
-                        </ButtonDefault>
+                        />
                     ) : (
                         <></>
                     )
@@ -187,16 +180,16 @@ const CategoriesForm = ({ canCreate }: CategoriesFormProps) => {
         <Form data={data} onSubmit={onSubmit}>
             {({ data, form, Bind }) => (
                 <SimpleForm>
-                    {loading && <CircularProgress />}
+                    {loading && <OverlayLoader />}
                     <SimpleFormHeader title={data.name || t`New block category`} />
                     <SimpleFormContent>
                         <Grid>
-                            <Cell span={6}>
+                            <Grid.Column span={6}>
                                 <Bind name="name" validators={validation.create("required")}>
-                                    <Input label={t`Name`} />
+                                    <Input size={"lg"} label={t`Name`} />
                                 </Bind>
-                            </Cell>
-                            <Cell span={6}>
+                            </Grid.Column>
+                            <Grid.Column span={6}>
                                 <Bind
                                     name="slug"
                                     validators={[
@@ -204,10 +197,14 @@ const CategoriesForm = ({ canCreate }: CategoriesFormProps) => {
                                         blockCategorySlugValidator
                                     ]}
                                 >
-                                    <Input disabled={Boolean(data.createdOn)} label={t`Slug`} />
+                                    <Input
+                                        size={"lg"}
+                                        disabled={Boolean(data.createdOn)}
+                                        label={t`Slug`}
+                                    />
                                 </Bind>
-                            </Cell>
-                            <Cell span={12}>
+                            </Grid.Column>
+                            <Grid.Column span={12}>
                                 <Bind
                                     name="icon"
                                     validators={validation.create("required")}
@@ -218,8 +215,8 @@ const CategoriesForm = ({ canCreate }: CategoriesFormProps) => {
                                         description={t`Icon that will be displayed in the page builder.`}
                                     />
                                 </Bind>
-                            </Cell>
-                            <Cell span={12}>
+                            </Grid.Column>
+                            <Grid.Column span={12}>
                                 <Bind
                                     name="description"
                                     validators={[
@@ -227,25 +224,26 @@ const CategoriesForm = ({ canCreate }: CategoriesFormProps) => {
                                         blockCategoryDescriptionValidator
                                     ]}
                                 >
-                                    <Input label={t`Description`} />
+                                    <Textarea size={"lg"} label={t`Description`} />
                                 </Bind>
-                            </Cell>
+                            </Grid.Column>
                         </Grid>
                     </SimpleFormContent>
                     <SimpleFormFooter>
-                        <ButtonWrapper>
-                            <ButtonDefault
-                                onClick={() => history.push("/page-builder/block-categories")}
-                            >{t`Cancel`}</ButtonDefault>
-                            {canSave && (
-                                <ButtonPrimary
-                                    data-testid={"pb-block-categories-form-save-block-category-btn"}
-                                    onClick={ev => {
-                                        form.submit(ev);
-                                    }}
-                                >{t`Save block category`}</ButtonPrimary>
-                            )}
-                        </ButtonWrapper>
+                        <Button
+                            variant={"secondary"}
+                            text={t`Cancel`}
+                            onClick={() => history.push("/page-builder/block-categories")}
+                        />
+                        {canSave && (
+                            <Button
+                                text={t`Save`}
+                                data-testid={"pb-block-categories-form-save-block-category-btn"}
+                                onClick={ev => {
+                                    form.submit(ev);
+                                }}
+                            />
+                        )}
                     </SimpleFormFooter>
                 </SimpleForm>
             )}
diff --git a/packages/app-page-builder/src/admin/views/BlockCategories/IconPicker.tsx b/packages/app-page-builder/src/admin/views/BlockCategories/IconPicker.tsx
index e82ae797648..a812033550d 100644
--- a/packages/app-page-builder/src/admin/views/BlockCategories/IconPicker.tsx
+++ b/packages/app-page-builder/src/admin/views/BlockCategories/IconPicker.tsx
@@ -1,240 +1,21 @@
-// TODO: find a better way to share IconPicker with icons across apps.
-import React, { useState, useCallback, useMemo, useEffect, useRef } from "react";
-import { css } from "emotion";
+import React, { useMemo } from "react";
+import {
+    IconPickerIconDto,
+    IconPicker as AdminIconPicker,
+    IconPickerProps
+} from "@webiny/admin-ui";
 import { plugins } from "@webiny/plugins";
-import { Typography } from "@webiny/ui/Typography";
-import { Grid } from "react-virtualized";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { DelayedOnChange } from "@webiny/ui/DelayedOnChange";
-import { Menu, MenuChildrenFunctionProps } from "@webiny/ui/Menu";
-import { Input } from "@webiny/ui/Input";
-import { PbIcon, PbIconsPlugin } from "~/types";
-import { FormComponentProps } from "@webiny/ui/types";
-import { FormElementMessage } from "@webiny/ui/FormElementMessage";
-import { GridCellProps } from "react-virtualized/dist/es/Grid";
+import { PbIconsPlugin } from "~/types";
 
-/**
- * Controls the helper text below the checkbox.
- * @type {string}
- */
-const iconPickerLabel = css({ marginBottom: 5, marginLeft: 2 });
-
-const MenuWrapper = css`
-    color: var(--mdc-theme-text-secondary-on-background);
-    background-color: var(--mdc-theme-on-background);
-    border-bottom: 1px solid var(--mdc-theme-text-secondary-on-background, rgba(0, 0, 0, 0.54));
-    padding: 16px 8px;
-    cursor: pointer;
-    :hover {
-        border-bottom: 1px solid rgba(0, 0, 0, 1);
-    }
-`;
-
-const NoResultWrapper = css({
-    width: 640,
-    color: "var(--mdc-theme-text-secondary-on-background)",
-    padding: "16px 12px"
-});
-
-const COLUMN_COUNT = 6;
-
-const gridItem = css({
-    display: "flex",
-    flexDirection: "column",
-    justifyContent: "flex-start",
-    boxSizing: "border-box",
-    paddingTop: 15,
-    alignItems: "center",
-    textAlign: "center",
-    cursor: "pointer",
-    transform: "translateZ(0)",
-    borderRadius: 2,
-    color: "var(--mdc-theme-text-secondary-on-background)",
-    transition: "all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1)",
-    "&::after": {
-        boxShadow: "0 0.25rem 0.125rem 0 rgba(0,0,0,0.05)",
-        transition: "opacity 0.5s cubic-bezier(0.165, 0.84, 0.44, 1)",
-        content: '""',
-        position: "absolute",
-        top: 0,
-        left: 0,
-        width: "100%",
-        height: "100%",
-        zIndex: -1,
-        opacity: 0
-    },
-    "&:hover": {
-        backgroundColor: "var(--mdc-theme-background)",
-        color: "var(--mdc-theme-text-primary-on-background)",
-        "&::after": {
-            opacity: 1
-        }
-    },
-    ">svg": {
-        width: 42,
-        marginBottom: 5
-    }
-});
-
-const grid = css({
-    padding: 20
-});
-
-const pickIcon = css({
-    width: 50,
-    textAlign: "center",
-    cursor: "pointer"
-});
-
-const searchInput = css({
-    input: {
-        padding: "20px 12px 20px"
-    }
-});
-
-interface IconPickerProps extends FormComponentProps {
-    label?: React.ReactNode;
-    description?: React.ReactNode;
-}
-const IconPicker = ({ value, onChange, label, description, validation }: IconPickerProps) => {
-    const [filter, setFilter] = useState("");
-    const [mustRenderGrid, setMustRenderGrid] = useState(false);
-    const inputRef = useRef<HTMLInputElement>(null);
-
-    useEffect(() => {
-        setTimeout(() => {
-            if (mustRenderGrid && inputRef.current) {
-                inputRef.current.focus();
-            }
-        }, 50);
-    }, [mustRenderGrid]);
-
-    const onFilterChange = useCallback(
-        (value: string) => {
-            setFilter(value);
-        },
-        [filter]
-    );
-
-    const allIcons: PbIcon[] = useMemo(() => {
+const IconPicker = (props: Omit<IconPickerProps, "icons">) => {
+    const icons: IconPickerIconDto[] = useMemo(() => {
         const iconPlugins = plugins.byType<PbIconsPlugin>("pb-icons");
-        return iconPlugins.reduce((icons: Array<PbIcon>, pl) => {
+        return iconPlugins.reduce((icons: Array<IconPickerIconDto>, pl) => {
             return icons.concat(pl.getIcons());
         }, []);
     }, []);
 
-    const icons = useMemo(() => {
-        return filter ? allIcons.filter(ic => ic.name.includes(filter)) : allIcons;
-    }, [filter]);
-
-    const renderCell = useCallback(
-        ({ closeMenu }: MenuChildrenFunctionProps) => {
-            return function renderCell({
-                columnIndex,
-                key,
-                rowIndex,
-                style
-            }: GridCellProps): React.ReactNode {
-                const item = icons[rowIndex * COLUMN_COUNT + columnIndex];
-                if (!item) {
-                    return null;
-                }
-
-                return (
-                    <div
-                        key={key}
-                        style={style}
-                        className={gridItem}
-                        onClick={() => {
-                            if (onChange) {
-                                onChange(item.id.join("/"));
-                            }
-                            closeMenu();
-                        }}
-                    >
-                        <FontAwesomeIcon icon={item.id} size={"2x"} />
-                        <Typography use={"body2"}>{item.name}</Typography>
-                    </div>
-                );
-            };
-        },
-        [mustRenderGrid, icons]
-    );
-
-    const renderGrid = useCallback(
-        ({ closeMenu }: MenuChildrenFunctionProps) => {
-            if (!mustRenderGrid) {
-                return;
-            }
-
-            return (
-                <>
-                    <DelayedOnChange value={filter} onChange={onFilterChange}>
-                        {({ value, onChange }) => (
-                            <Input
-                                inputRef={inputRef}
-                                className={searchInput}
-                                value={value}
-                                onChange={onChange}
-                                placeholder={"Search icons..."}
-                            />
-                        )}
-                    </DelayedOnChange>
-                    {icons.length === 0 ? (
-                        <div className={NoResultWrapper}>
-                            <Typography use="body1">No results found.</Typography>
-                        </div>
-                    ) : (
-                        <Grid
-                            className={grid}
-                            cellRenderer={renderCell({ closeMenu })}
-                            columnCount={COLUMN_COUNT}
-                            columnWidth={100}
-                            height={440}
-                            rowCount={Math.ceil(icons.length / COLUMN_COUNT)}
-                            rowHeight={100}
-                            width={640}
-                        />
-                    )}
-                </>
-            );
-        },
-        [mustRenderGrid, icons]
-    );
-
-    const fontAwesomeIconValue: any =
-        typeof value === "string" && value.includes("/") ? value.split("/") : ["fas", "star"];
-
-    const { isValid: validationIsValid, message: validationMessage } = validation || {};
-
-    return (
-        <>
-            {label && (
-                <div className={iconPickerLabel}>
-                    <Typography use={"body1"}>{label}</Typography>
-                </div>
-            )}
-            <Menu
-                onOpen={() => setMustRenderGrid(true)}
-                onClose={() => setMustRenderGrid(false)}
-                handle={
-                    <div className={MenuWrapper}>
-                        <div className={pickIcon}>
-                            <FontAwesomeIcon icon={fontAwesomeIconValue} size={"2x"} />
-                        </div>
-                    </div>
-                }
-                render={renderGrid}
-            />
-
-            {validationIsValid === false && (
-                <FormElementMessage error>{validationMessage}</FormElementMessage>
-            )}
-            {validationIsValid !== false && description && (
-                <FormElementMessage>{description}</FormElementMessage>
-            )}
-        </>
-    );
+    return <AdminIconPicker size={"lg"} icons={icons} {...props} />;
 };
 
 export default IconPicker;
diff --git a/packages/app-page-builder/src/admin/views/Categories/CategoriesDataList.tsx b/packages/app-page-builder/src/admin/views/Categories/CategoriesDataList.tsx
index 752bac63543..873c04aad28 100644
--- a/packages/app-page-builder/src/admin/views/Categories/CategoriesDataList.tsx
+++ b/packages/app-page-builder/src/admin/views/Categories/CategoriesDataList.tsx
@@ -1,4 +1,6 @@
 import React, { useCallback, useMemo, useState } from "react";
+import { Button, Grid, Select } from "@webiny/admin-ui";
+import { ReactComponent as AddIcon } from "@webiny/icons/add.svg";
 import { i18n } from "@webiny/app/i18n";
 import { useRouter } from "@webiny/react-router";
 import { useQuery, useMutation } from "@apollo/react-hooks";
@@ -16,16 +18,11 @@ import {
     ListItemText,
     ListItemMeta,
     ListActions,
-    ListItemTextSecondary
+    ListItemTextSecondary,
+    ListItemTextPrimary
 } from "@webiny/ui/List";
-
 import { DeleteIcon } from "@webiny/ui/List/DataList/icons";
-import { Cell, Grid } from "@webiny/ui/Grid";
-import { Select } from "@webiny/ui/Select";
-import { ButtonIcon, ButtonSecondary } from "@webiny/ui/Button";
 import SearchUI from "@webiny/app-admin/components/SearchUI";
-import { ReactComponent as AddIcon } from "@webiny/app-admin/assets/icons/add-18px.svg";
-import { ReactComponent as FilterIcon } from "@webiny/app-admin/assets/icons/filter-24px.svg";
 import { PbCategory } from "~/types";
 import { useCategoriesPermissions } from "~/hooks/permissions";
 
@@ -125,22 +122,19 @@ const PageBuilderCategoriesDataList = ({ canCreate }: PageBuilderCategoriesDataL
         () => (
             <DataListModalOverlay>
                 <Grid>
-                    <Cell span={12}>
+                    <Grid.Column span={12}>
                         <Select
                             value={sort}
                             onChange={setSort}
                             label={t`Sort by`}
-                            description={"Sort categories by"}
-                        >
-                            {SORTERS.map(({ label, sort: value }) => {
-                                return (
-                                    <option key={label} value={value}>
-                                        {label}
-                                    </option>
-                                );
+                            options={SORTERS.map(({ label, sort: value }) => {
+                                return {
+                                    label,
+                                    value
+                                };
                             })}
-                        </Select>
-                    </Cell>
+                        />
+                    </Grid.Column>
                 </Grid>
             </DataListModalOverlay>
         ),
@@ -157,27 +151,27 @@ const PageBuilderCategoriesDataList = ({ canCreate }: PageBuilderCategoriesDataL
             data={categoryList}
             actions={
                 canCreate ? (
-                    <ButtonSecondary
+                    <Button
+                        text={t`New`}
+                        icon={<AddIcon />}
+                        size={"sm"}
+                        className={"wby-ml-xs"}
                         data-testid="data-list-new-record-button"
                         onClick={() => history.push("/page-builder/categories?new=true")}
-                    >
-                        <ButtonIcon icon={<AddIcon />} /> {t`New Category`}
-                    </ButtonSecondary>
+                    />
                 ) : null
             }
             search={
                 <SearchUI
                     value={filter}
                     onChange={setFilter}
-                    inputPlaceholder={t`Search categories`}
+                    inputPlaceholder={t`Search categories...`}
+                    dataTestId={"pb.category.data-list.search-input"}
                 />
             }
             modalOverlay={categoriesDataListModalOverlay}
             modalOverlayAction={
-                <DataListModalOverlayAction
-                    icon={<FilterIcon />}
-                    data-testid={"default-data-list.filter"}
-                />
+                <DataListModalOverlayAction data-testid={"default-data-list.filter"} />
             }
         >
             {({ data }: { data: PbCategory[] }) => (
@@ -189,7 +183,7 @@ const PageBuilderCategoriesDataList = ({ canCreate }: PageBuilderCategoriesDataL
                                     history.push(`/page-builder/categories?slug=${item.slug}`)
                                 }
                             >
-                                {item.name}
+                                <ListItemTextPrimary>{item.name}</ListItemTextPrimary>
                                 <ListItemTextSecondary>{item.url}</ListItemTextSecondary>
                             </ListItemText>
 
diff --git a/packages/app-page-builder/src/admin/views/Categories/CategoriesDialog.tsx b/packages/app-page-builder/src/admin/views/Categories/CategoriesDialog.tsx
index 512fbd87263..9e0e6d2f6b4 100644
--- a/packages/app-page-builder/src/admin/views/Categories/CategoriesDialog.tsx
+++ b/packages/app-page-builder/src/admin/views/Categories/CategoriesDialog.tsx
@@ -1,35 +1,12 @@
 import React from "react";
-import { css } from "emotion";
-import { useRouter } from "@webiny/react-router";
+import { Dialog, Link, List, Loader } from "@webiny/admin-ui";
 import { Query } from "@apollo/react-components";
-import {
-    Dialog,
-    DialogTitle,
-    DialogContent,
-    DialogActions,
-    DialogOnClose
-} from "@webiny/ui/Dialog";
-import {
-    List,
-    ListItem,
-    ListItemText,
-    ListItemTextPrimary,
-    ListItemTextSecondary
-} from "@webiny/ui/List";
-import { ButtonDefault } from "@webiny/ui/Button";
 import { LIST_CATEGORIES } from "./graphql";
 import { PageBuilderListCategoriesResponse, PbCategory } from "~/types";
 
-const narrowDialog = css({
-    ".mdc-dialog__surface": {
-        width: 400,
-        minWidth: 400
-    }
-});
-
 export type CategoriesDialogProps = {
     open: boolean;
-    onClose: DialogOnClose;
+    onClose: () => void;
     onSelect: (item: PbCategory) => void;
     children: any;
 };
@@ -38,60 +15,54 @@ interface ListCategoriesQueryResponse {
     loading?: boolean;
 }
 const CategoriesDialog = ({ open, onClose, onSelect, children }: CategoriesDialogProps) => {
-    const { history } = useRouter();
     return (
         <Dialog
             open={open}
             onClose={onClose}
-            className={narrowDialog}
             data-testid="pb-new-page-category-modal"
+            title="Select a category"
+            info={
+                <>
+                    {"Category not listed? "}
+                    <Link to={"/page-builder/categories"}>{"Create a new one"}</Link>.
+                </>
+            }
+            actions={
+                <>
+                    <Dialog.CancelButton />
+                </>
+            }
         >
             {children}
-            <DialogTitle>Select a category</DialogTitle>
-            <DialogContent>
-                <List twoLine>
-                    <Query query={LIST_CATEGORIES}>
-                        {({ data, loading }: ListCategoriesQueryResponse) => {
-                            if (loading) {
-                                return <span>Loading categories...</span>;
-                            }
+            <List>
+                <Query query={LIST_CATEGORIES}>
+                    {({ data, loading }: ListCategoriesQueryResponse) => {
+                        if (loading) {
+                            return <Loader text={"Loading categories"} size={"lg"} />;
+                        }
 
-                            const categories = data?.pageBuilder?.listCategories?.data;
-                            if (!categories) {
-                                return <></>;
-                            }
-                            return (
-                                <React.Fragment>
-                                    {categories.map(item => (
-                                        <ListItem
-                                            key={item.slug}
-                                            onClick={() => {
-                                                onSelect(item);
-                                                // @ts-expect-error
-                                                onClose();
-                                            }}
-                                        >
-                                            <ListItemText>
-                                                <ListItemTextPrimary>
-                                                    {item.name}
-                                                </ListItemTextPrimary>
-                                                <ListItemTextSecondary>
-                                                    {item.url}
-                                                </ListItemTextSecondary>
-                                            </ListItemText>
-                                        </ListItem>
-                                    ))}
-                                </React.Fragment>
-                            );
-                        }}
-                    </Query>
-                </List>
-            </DialogContent>
-            <DialogActions>
-                <ButtonDefault onClick={() => history.push("/page-builder/categories")}>
-                    + Create new category
-                </ButtonDefault>
-            </DialogActions>
+                        const categories = data?.pageBuilder?.listCategories?.data;
+                        if (!categories) {
+                            return <></>;
+                        }
+                        return (
+                            <>
+                                {categories.map(item => (
+                                    <List.Item
+                                        key={item.slug}
+                                        onClick={() => {
+                                            onSelect(item);
+                                            onClose();
+                                        }}
+                                        title={item.name}
+                                        description={item.url}
+                                    />
+                                ))}
+                            </>
+                        );
+                    }}
+                </Query>
+            </List>
         </Dialog>
     );
 };
diff --git a/packages/app-page-builder/src/admin/views/Categories/CategoriesForm.tsx b/packages/app-page-builder/src/admin/views/Categories/CategoriesForm.tsx
index b01fd535a15..9af24b176d4 100644
--- a/packages/app-page-builder/src/admin/views/Categories/CategoriesForm.tsx
+++ b/packages/app-page-builder/src/admin/views/Categories/CategoriesForm.tsx
@@ -1,10 +1,9 @@
 import React, { useCallback, useMemo } from "react";
-import styled from "@emotion/styled";
+import { Button, Grid, Input, OverlayLoader, Select } from "@webiny/admin-ui";
+import { ReactComponent as AddIcon } from "@webiny/icons/add.svg";
+import { ReactComponent as TableIcon } from "@webiny/icons/table_chart.svg";
 import { i18n } from "@webiny/app/i18n";
 import { Form } from "@webiny/form";
-import { Grid, Cell } from "@webiny/ui/Grid";
-import { ButtonDefault, ButtonIcon, ButtonPrimary } from "@webiny/ui/Button";
-import { CircularProgress } from "@webiny/ui/Progress";
 import { useMutation, useQuery } from "@apollo/react-hooks";
 import {
     SimpleForm,
@@ -27,26 +26,18 @@ import {
 } from "./graphql";
 import { useRouter } from "@webiny/react-router";
 import { useSnackbar } from "@webiny/app-admin/hooks/useSnackbar";
-import { Input } from "@webiny/ui/Input";
 import { categoryUrlValidator } from "./validators";
 import { plugins } from "@webiny/plugins";
 import { PbCategory, PbPageLayoutPlugin } from "~/types";
-import { Select } from "@webiny/ui/Select";
 import pick from "lodash/pick";
 import get from "lodash/get";
 import set from "lodash/set";
 import isEmpty from "lodash/isEmpty";
 import EmptyView from "@webiny/app-admin/components/EmptyView";
-import { ReactComponent as AddIcon } from "@webiny/app-admin/assets/icons/add-18px.svg";
 import { useCategoriesPermissions } from "~/hooks/permissions";
 
 const t = i18n.ns("app-page-builder/admin/categories/form");
 
-const ButtonWrapper = styled("div")({
-    display: "flex",
-    justifyContent: "space-between"
-});
-
 interface CategoriesFormProps {
     canCreate: boolean;
 }
@@ -167,17 +158,18 @@ const CategoriesForm = ({ canCreate }: CategoriesFormProps) => {
     if (showEmptyView) {
         return (
             <EmptyView
+                icon={<TableIcon />}
                 title={t`Click on the left side list to display category details {message}`({
                     message: canCreate ? "or create a..." : ""
                 })}
                 action={
                     canCreate ? (
-                        <ButtonDefault
+                        <Button
+                            text={t`New Category`}
+                            icon={<AddIcon />}
                             data-testid="new-record-button"
                             onClick={() => history.push("/page-builder/categories?new=true")}
-                        >
-                            <ButtonIcon icon={<AddIcon />} /> {t`New Category`}
-                        </ButtonDefault>
+                        />
                     ) : (
                         <></>
                     )
@@ -190,31 +182,33 @@ const CategoriesForm = ({ canCreate }: CategoriesFormProps) => {
         <Form data={data} onSubmit={onSubmit}>
             {({ data, form, Bind }) => (
                 <SimpleForm>
-                    {loading && <CircularProgress />}
+                    {loading && <OverlayLoader />}
                     <SimpleFormHeader
                         title={data.name || t`New category`}
                         data-testid={"pb-categories-form-title"}
                     />
                     <SimpleFormContent>
                         <Grid>
-                            <Cell span={6}>
+                            <Grid.Column span={6}>
                                 <Bind name="name" validators={validation.create("required")}>
                                     <Input
+                                        size={"lg"}
                                         label={t`Name`}
                                         data-testid="pb.category.new.form.name"
                                     />
                                 </Bind>
-                            </Cell>
-                            <Cell span={6}>
+                            </Grid.Column>
+                            <Grid.Column span={6}>
                                 <Bind name="slug" validators={validation.create("required")}>
                                     <Input
+                                        size={"lg"}
                                         disabled={Boolean(data.createdOn)}
                                         label={t`Slug`}
                                         data-testid="pb.category.new.form.slug"
                                     />
                                 </Bind>
-                            </Cell>
-                            <Cell span={12}>
+                            </Grid.Column>
+                            <Grid.Column span={12}>
                                 <Bind
                                     name="url"
                                     validators={[
@@ -222,10 +216,14 @@ const CategoriesForm = ({ canCreate }: CategoriesFormProps) => {
                                         categoryUrlValidator
                                     ]}
                                 >
-                                    <Input label={t`URL`} data-testid="pb.category.new.form.url" />
+                                    <Input
+                                        size={"lg"}
+                                        label={t`URL`}
+                                        data-testid="pb.category.new.form.url"
+                                    />
                                 </Bind>
-                            </Cell>
-                            <Cell span={6}>
+                            </Grid.Column>
+                            <Grid.Column span={12}>
                                 <Bind
                                     name="layout"
                                     defaultValue={layouts.length ? layouts[0].name : ""}
@@ -233,32 +231,32 @@ const CategoriesForm = ({ canCreate }: CategoriesFormProps) => {
                                     <Select
                                         label={t`Layout`}
                                         data-testid="pb.category.new.form.layout"
-                                    >
-                                        {layouts.map(({ name, title }) => (
-                                            <option key={name} value={name}>
-                                                {title}
-                                            </option>
-                                        ))}
-                                    </Select>
+                                        size={"lg"}
+                                        options={layouts.map(({ name, title }) => ({
+                                            label: title,
+                                            value: name
+                                        }))}
+                                    />
                                 </Bind>
-                            </Cell>
+                            </Grid.Column>
                         </Grid>
                     </SimpleFormContent>
                     <SimpleFormFooter>
-                        <ButtonWrapper>
-                            <ButtonDefault
-                                onClick={() => history.push("/page-builder/categories")}
-                                data-testid="pb.category.new.form.button.cancel"
-                            >{t`Cancel`}</ButtonDefault>
-                            {canWrite(loadedCategory?.createdBy?.id) && (
-                                <ButtonPrimary
-                                    data-testid="pb.category.new.form.button.save"
-                                    onClick={ev => {
-                                        form.submit(ev);
-                                    }}
-                                >{t`Save category`}</ButtonPrimary>
-                            )}
-                        </ButtonWrapper>
+                        <Button
+                            variant={"secondary"}
+                            text={t`Cancel`}
+                            onClick={() => history.push("/page-builder/categories")}
+                            data-testid="pb.category.new.form.button.cancel"
+                        />
+                        {canWrite(loadedCategory?.createdBy?.id) && (
+                            <Button
+                                text={t`Save`}
+                                data-testid="pb.category.new.form.button.save"
+                                onClick={ev => {
+                                    form.submit(ev);
+                                }}
+                            />
+                        )}
                     </SimpleFormFooter>
                 </SimpleForm>
             )}
diff --git a/packages/app-page-builder/src/admin/views/Menus/MenusDataList.tsx b/packages/app-page-builder/src/admin/views/Menus/MenusDataList.tsx
index 2daf879751b..10aa77dcfcf 100644
--- a/packages/app-page-builder/src/admin/views/Menus/MenusDataList.tsx
+++ b/packages/app-page-builder/src/admin/views/Menus/MenusDataList.tsx
@@ -1,5 +1,7 @@
 import React, { useCallback, useMemo, useState } from "react";
 import orderBy from "lodash/orderBy";
+import { Button, Grid, Select } from "@webiny/admin-ui";
+import { ReactComponent as AddIcon } from "@webiny/icons/add.svg";
 import { i18n } from "@webiny/app/i18n";
 import { useRouter } from "@webiny/react-router";
 import { useQuery, useMutation } from "@apollo/react-hooks";
@@ -16,16 +18,12 @@ import {
     ListItemText,
     ListItemMeta,
     ListActions,
-    ListItemTextSecondary
+    ListItemTextSecondary,
+    ListItemTextPrimary
 } from "@webiny/ui/List";
 
 import { DeleteIcon } from "@webiny/ui/List/DataList/icons";
-import { ButtonIcon, ButtonSecondary } from "@webiny/ui/Button";
-import { ReactComponent as AddIcon } from "@webiny/app-admin/assets/icons/add-18px.svg";
-import { ReactComponent as FilterIcon } from "@webiny/app-admin/assets/icons/filter-24px.svg";
 import SearchUI from "@webiny/app-admin/components/SearchUI";
-import { Cell, Grid } from "@webiny/ui/Grid";
-import { Select } from "@webiny/ui/Select";
 import { PbMenu } from "~/types";
 import { useMenusPermissions } from "~/hooks/permissions";
 
@@ -123,22 +121,17 @@ const PageBuilderMenusDataList = ({ canCreate }: PageBuilderMenusDataListProps)
         () => (
             <DataListModalOverlay>
                 <Grid>
-                    <Cell span={12}>
+                    <Grid.Column span={12}>
                         <Select
                             value={sort}
                             onChange={setSort}
                             label={t`Sort by`}
-                            description={"Sort menus by"}
-                        >
-                            {SORTERS.map(({ label, sort: value }) => {
-                                return (
-                                    <option key={label} value={value}>
-                                        {label}
-                                    </option>
-                                );
-                            })}
-                        </Select>
-                    </Cell>
+                            options={SORTERS.map(({ label, sort: value }) => ({
+                                label,
+                                value
+                            }))}
+                        />
+                    </Grid.Column>
                 </Grid>
             </DataListModalOverlay>
         ),
@@ -157,23 +150,27 @@ const PageBuilderMenusDataList = ({ canCreate }: PageBuilderMenusDataListProps)
             title={t`Menus`}
             actions={
                 canCreate ? (
-                    <ButtonSecondary
+                    <Button
+                        text={t`New`}
+                        icon={<AddIcon />}
+                        size={"sm"}
+                        className={"wby-ml-xs"}
                         data-testid="data-list-new-record-button"
                         onClick={() => history.push("/page-builder/menus?new=true")}
-                    >
-                        <ButtonIcon icon={<AddIcon />} /> {t`New Menu`}
-                    </ButtonSecondary>
+                    />
                 ) : null
             }
             search={
-                <SearchUI value={filter} onChange={setFilter} inputPlaceholder={t`Search menus`} />
+                <SearchUI
+                    value={filter}
+                    onChange={setFilter}
+                    inputPlaceholder={t`Search menus...`}
+                    dataTestId={"pb.menu.data-list.search-input"}
+                />
             }
             modalOverlay={menusDataListModalOverlay}
             modalOverlayAction={
-                <DataListModalOverlayAction
-                    icon={<FilterIcon />}
-                    data-testid={"default-data-list.filter"}
-                />
+                <DataListModalOverlayAction data-testid={"default-data-list.filter"} />
             }
         >
             {({ data }: MenuDataListResponse) => (
@@ -185,7 +182,7 @@ const PageBuilderMenusDataList = ({ canCreate }: PageBuilderMenusDataListProps)
                                     history.push(`/page-builder/menus?slug=${item.slug}`)
                                 }
                             >
-                                {item.title}
+                                <ListItemTextPrimary>{item.title}</ListItemTextPrimary>
                                 <ListItemTextSecondary>
                                     {item.description || t`No description provided.`}
                                 </ListItemTextSecondary>
diff --git a/packages/app-page-builder/src/admin/views/Menus/MenusForm.tsx b/packages/app-page-builder/src/admin/views/Menus/MenusForm.tsx
index 9caaf36b538..043a4c6c726 100644
--- a/packages/app-page-builder/src/admin/views/Menus/MenusForm.tsx
+++ b/packages/app-page-builder/src/admin/views/Menus/MenusForm.tsx
@@ -1,10 +1,8 @@
 import React, { useCallback, useMemo } from "react";
-import styled from "@emotion/styled";
 import { i18n } from "@webiny/app/i18n";
 import { Form } from "@webiny/form";
-import { Grid, Cell } from "@webiny/ui/Grid";
-import { ButtonDefault, ButtonIcon, ButtonPrimary } from "@webiny/ui/Button";
-import { CircularProgress } from "@webiny/ui/Progress";
+import { ReactComponent as AddIcon } from "@webiny/icons/add.svg";
+import { ReactComponent as TableIcon } from "@webiny/icons/table_chart.svg";
 import { useMutation, useQuery } from "@apollo/react-hooks";
 import {
     SimpleForm,
@@ -23,7 +21,6 @@ import {
 } from "./graphql";
 import { useRouter } from "@webiny/react-router";
 import { useSnackbar } from "@webiny/app-admin/hooks/useSnackbar";
-import { Input } from "@webiny/ui/Input";
 import MenuItems from "./MenusForm/MenuItems";
 import pick from "lodash/pick";
 import get from "lodash/get";
@@ -31,15 +28,11 @@ import set from "lodash/set";
 import isEmpty from "lodash/isEmpty";
 import omit from "lodash/omit";
 import EmptyView from "@webiny/app-admin/components/EmptyView";
-import { ReactComponent as AddIcon } from "@webiny/app-admin/assets/icons/add-18px.svg";
 import { useMenusPermissions } from "~/hooks/permissions";
 import { PbMenu } from "~/types";
+import { Button, Grid, Input, OverlayLoader, Textarea } from "@webiny/admin-ui";
 
 const t = i18n.ns("app-page-builder/admin/menus/form");
-const ButtonWrapper = styled("div")({
-    display: "flex",
-    justifyContent: "space-between"
-});
 
 interface MenusFormProps {
     canCreate: boolean;
@@ -134,17 +127,18 @@ const MenusForm = ({ canCreate }: MenusFormProps) => {
     if (showEmptyView) {
         return (
             <EmptyView
+                icon={<TableIcon />}
                 title={t`Click on the left side list to display menu details {message}`({
                     message: canCreate ? "or create a..." : ""
                 })}
                 action={
                     canCreate ? (
-                        <ButtonDefault
+                        <Button
+                            text={t`New Menu`}
+                            icon={<AddIcon />}
                             data-testid="new-record-button"
                             onClick={() => history.push("/page-builder/menus?new=true")}
-                        >
-                            <ButtonIcon icon={<AddIcon />} /> {t`New Menu`}
-                        </ButtonDefault>
+                        />
                     ) : (
                         <></>
                     )
@@ -156,58 +150,66 @@ const MenusForm = ({ canCreate }: MenusFormProps) => {
     return (
         <Form data={data} onSubmit={onSubmit}>
             {({ data, form, Bind }) => (
-                <SimpleForm data-testid={"pb-menus-form"}>
-                    {loading && <CircularProgress />}
+                <SimpleForm size={"full"} data-testid={"pb-menus-form"}>
+                    {loading && <OverlayLoader />}
                     <SimpleFormHeader title={data.title || t`New menu`} />
                     <SimpleFormContent>
                         <Grid>
-                            <Cell span={6}>
+                            <Grid.Column span={6}>
                                 <Bind name="title" validators={validation.create("required")}>
-                                    <Input label={t`Name`} data-testid="pb.menu.create.name" />
+                                    <Input
+                                        label={t`Name`}
+                                        data-testid="pb.menu.create.name"
+                                        size={"lg"}
+                                    />
                                 </Bind>
-                            </Cell>
-                            <Cell span={6}>
+                            </Grid.Column>
+                            <Grid.Column span={6}>
                                 <Bind name="slug" validators={validation.create("required")}>
                                     <Input
+                                        size={"lg"}
                                         disabled={Boolean(data.createdOn)}
                                         label={t`Slug`}
                                         data-testid="pb.menu.create.slug"
                                     />
                                 </Bind>
-                            </Cell>
-                            <Cell span={12}>
+                            </Grid.Column>
+                            <Grid.Column span={12}>
                                 <Bind name="description">
-                                    <Input
+                                    <Textarea
+                                        size={"lg"}
                                         rows={5}
                                         label={t`Description`}
                                         data-testid="pb.menu.create.description"
                                     />
                                 </Bind>
-                            </Cell>
+                            </Grid.Column>
+                            <Bind name="items">
+                                {props => (
+                                    <MenuItems
+                                        {...props}
+                                        canSave={canWrite(loadedMenu?.createdBy?.id)}
+                                    />
+                                )}
+                            </Bind>
                         </Grid>
-                        <Bind name="items">
-                            {props => (
-                                <MenuItems
-                                    {...props}
-                                    canSave={canWrite(loadedMenu?.createdBy?.id)}
-                                />
-                            )}
-                        </Bind>
                     </SimpleFormContent>
                     <SimpleFormFooter>
-                        <ButtonWrapper>
-                            <ButtonDefault
-                                onClick={() => history.push("/page-builder/menus")}
-                            >{t`Cancel`}</ButtonDefault>
-                            {canWrite(loadedMenu?.createdBy?.id) && (
-                                <ButtonPrimary
-                                    data-testid="pb.menu.save.button"
-                                    onClick={ev => {
-                                        form.submit(ev);
-                                    }}
-                                >{t`Save menu`}</ButtonPrimary>
-                            )}
-                        </ButtonWrapper>
+                        <Button
+                            variant={"secondary"}
+                            text={t`Cancel`}
+                            onClick={() => history.push("/page-builder/menus")}
+                            data-testid="pb.menu.new.form.button.cancel"
+                        />
+                        {canWrite(loadedMenu?.createdBy?.id) && (
+                            <Button
+                                text={t`Save`}
+                                data-testid="pb.menu.save.button"
+                                onClick={ev => {
+                                    form.submit(ev);
+                                }}
+                            />
+                        )}
                     </SimpleFormFooter>
                 </SimpleForm>
             )}
diff --git a/packages/app-page-builder/src/admin/views/Menus/MenusForm/MenuItems.tsx b/packages/app-page-builder/src/admin/views/Menus/MenusForm/MenuItems.tsx
index b4082ce8dfb..fcf24e8bd9c 100644
--- a/packages/app-page-builder/src/admin/views/Menus/MenusForm/MenuItems.tsx
+++ b/packages/app-page-builder/src/admin/views/Menus/MenusForm/MenuItems.tsx
@@ -1,40 +1,21 @@
 import React, { useState } from "react";
-import { css } from "emotion";
-import styled from "@emotion/styled";
 import uniqid from "uniqid";
 import { plugins } from "@webiny/plugins";
-import { Grid, Cell } from "@webiny/ui/Grid";
-import { Icon } from "@webiny/ui/Icon";
-import { Menu } from "@webiny/ui/Menu";
-import { List, ListItem, ListItemGraphic } from "@webiny/ui/List";
-import { ButtonPrimary } from "@webiny/ui/Button";
 import MenuItemsList from "./MenuItems/MenuItemsList";
 import MenuItemForm from "./MenuItems/MenuItemForm";
 import findObject from "./MenuItems/findObject";
 import { PbMenuItemPlugin } from "~/types";
-import { Typography } from "@webiny/ui/Typography";
 import { MenuTreeItem } from "~/admin/views/Menus/types";
-const leftPanel = css({
-    padding: 25,
-    backgroundColor: "var(--mdc-theme-background)",
-    overflow: "auto"
-});
-const menuItems = css({
-    width: 170
-});
-const MenuHolder = styled("div")({
-    textAlign: "center",
-    color: "var(--mdc-theme-text-primary-on-background)"
-});
-const AddMenu = styled("div")({
-    width: 180,
-    margin: "25px auto 0 auto"
-});
+import { Button, DropdownMenu, Grid } from "@webiny/admin-ui";
+import { ReactComponent as TableIcon } from "@webiny/icons/table_chart.svg";
+import EmptyView from "@webiny/app-admin/components/EmptyView";
+
 interface MenuItemsProps {
     canSave: boolean;
     onChange: (items: MenuTreeItem[]) => void;
     value: MenuTreeItem[];
 }
+
 type MenuItemsState = MenuTreeItem | null;
 const MenuItems = (props: MenuItemsProps) => {
     const [currentMenuItem, setCurrentMenuItem] = useState<MenuItemsState>(null);
@@ -58,8 +39,12 @@ const MenuItems = (props: MenuItemsProps) => {
     const pbMenuItemPlugins = plugins.byType<PbMenuItemPlugin>("pb-menu-item");
     return (
         <>
-            <Grid>
-                <Cell span={7} className={leftPanel}>
+            <Grid.Column span={7}>
+                <div
+                    className={
+                        "wby-p-lg wby-border-sm wby-border-neutral-muted wby-rounded-md wby-bg-neutral-base wby-overflow-auto"
+                    }
+                >
                     <MenuItemsList
                         canSave={canSave}
                         items={items}
@@ -67,55 +52,47 @@ const MenuItems = (props: MenuItemsProps) => {
                         editItem={editItem}
                         deleteItem={deleteItem}
                     />
-                </Cell>
-                <Cell span={5}>
-                    {!currentMenuItem && canSave && (
-                        <>
-                            <MenuHolder>
-                                <Typography use={"body2"}>
-                                    To build your menu you need to create menu items! Begin by
-                                    clicking the &quot;Add menu item&quot; button
-                                </Typography>
-                                <AddMenu>
-                                    <Menu
-                                        handle={
-                                            <ButtonPrimary data-testid="pb.menu.add.addmenuitem">
-                                                + Add menu item
-                                            </ButtonPrimary>
-                                        }
-                                        anchor={"topEnd"}
-                                        data-testid="pb.menu.create.items.button"
-                                    >
-                                        <List className={menuItems}>
-                                            {pbMenuItemPlugins.map(pl => (
-                                                <ListItem
-                                                    key={pl.name}
-                                                    onClick={() => addItem(pl)}
-                                                    style={{ whiteSpace: "nowrap" }}
-                                                >
-                                                    <ListItemGraphic>
-                                                        <Icon icon={pl.menuItem.icon} />
-                                                    </ListItemGraphic>
-                                                    {pl.menuItem.title}
-                                                </ListItem>
-                                            ))}
-                                        </List>
-                                    </Menu>
-                                </AddMenu>
-                            </MenuHolder>
-                        </>
-                    )}
-                    {currentMenuItem && (
-                        <MenuItemForm
-                            currentMenuItem={currentMenuItem}
-                            editItem={editItem}
-                            deleteItem={deleteItem}
-                            items={items}
-                            onChange={onChange}
-                        />
-                    )}
-                </Cell>
-            </Grid>
+                </div>
+            </Grid.Column>
+            <Grid.Column span={5}>
+                {!currentMenuItem && canSave && (
+                    <EmptyView
+                        icon={<TableIcon />}
+                        title={"To build your menu you need to create menu items!"}
+                        action={
+                            <div>
+                                <DropdownMenu
+                                    trigger={
+                                        <Button
+                                            text={"Add menu item"}
+                                            data-testid="pb.menu.add.addmenuitem"
+                                        />
+                                    }
+                                    data-testid="pb.menu.create.items.button"
+                                >
+                                    {pbMenuItemPlugins.map(pl => (
+                                        <DropdownMenu.Item
+                                            icon={pl.menuItem.icon}
+                                            key={pl.name}
+                                            onClick={() => addItem(pl)}
+                                            text={pl.menuItem.title}
+                                        />
+                                    ))}
+                                </DropdownMenu>
+                            </div>
+                        }
+                    />
+                )}
+                {currentMenuItem && (
+                    <MenuItemForm
+                        currentMenuItem={currentMenuItem}
+                        editItem={editItem}
+                        deleteItem={deleteItem}
+                        items={items}
+                        onChange={onChange}
+                    />
+                )}
+            </Grid.Column>
         </>
     );
 };
diff --git a/packages/app-page-builder/src/admin/views/Menus/MenusForm/MenuItems/MenuItemRenderer.tsx b/packages/app-page-builder/src/admin/views/Menus/MenusForm/MenuItems/MenuItemRenderer.tsx
index 2a61a5d269a..fed751ee268 100644
--- a/packages/app-page-builder/src/admin/views/Menus/MenusForm/MenuItems/MenuItemRenderer.tsx
+++ b/packages/app-page-builder/src/admin/views/Menus/MenusForm/MenuItems/MenuItemRenderer.tsx
@@ -5,65 +5,77 @@
 import React, { forwardRef } from "react";
 // import { TreeItemComponentProps } from "dnd-kit-sortable-tree";
 import classnames from "classnames";
-import { IconButton } from "@webiny/ui/Button";
-import { Typography } from "@webiny/ui/Typography";
-import { Icon } from "@webiny/ui/Icon";
-import { rowHandle, fieldContainer, Row, RowContainer, FolderTreeItemWrapper } from "./Styled";
-import { ReactComponent as EditIcon } from "./icons/round-edit-24px.svg";
-import { ReactComponent as DeleteIcon } from "./icons/round-delete-24px.svg";
-import { ReactComponent as HandleIcon } from "./icons/round-drag_indicator-24px.svg";
+import { ReactComponent as EditIcon } from "@webiny/icons/edit.svg";
+import { ReactComponent as DeleteIcon } from "@webiny/icons/delete.svg";
+import { ReactComponent as HandleIcon } from "@webiny/icons/drag_indicator.svg";
+import { FolderTreeItemWrapper } from "./Styled";
 import { TreeItemComponentProps, MenuTreeItem } from "~/admin/views/Menus/types";
+import { cn, Icon, IconButton, Text } from "@webiny/admin-ui";
 export interface NodeRendererDefaultProps {
     editItem: (item: MenuTreeItem) => void;
     deleteItem: (item: MenuTreeItem) => void;
 }
 const NodeRendererDefault = forwardRef<HTMLDivElement, TreeItemComponentProps>((props, ref) => {
-    const { item, deleteItem, editItem, onRemove, collapsed, depth } = props;
+    const { item, deleteItem, editItem, onRemove, collapsed, depth, ...rest } = props;
     const handle = (
-        <div className={rowHandle}>
-            <Icon icon={<HandleIcon />} />
-        </div>
+        <Icon icon={<HandleIcon />} label={"Drag and drop indicator"} color={"neutral-strong"} />
     );
     return (
         <FolderTreeItemWrapper
-            {...props}
+            {...rest}
+            item={item}
             ref={ref}
             depth={depth}
             collapsed={collapsed}
             data-testid={`pb-menu-item-render-${item.title}`}
         >
-            <RowContainer className={"rst__rowWrapper"}>
+            <div
+                className={cn([
+                    "rst__rowWrapper",
+                    "wby-flex wby-items-center wby-gap-sm",
+                    "wby-pl-sm-extra wby-pr-sm wby-py-sm",
+                    "wby-border-sm wby-border-neutral-muted wby-rounded-md",
+                    "hover:wby-border-neutral-strong"
+                ])}
+            >
                 {handle}
                 <div>
-                    <Row className={classnames("rst__row")}>
-                        <div className={classnames(fieldContainer)}>
-                            <div className={classnames("rst__rowLabel")}>
-                                <span className={classnames("rst__rowTitle")}>
-                                    <Typography use={"overline"}>{item.title}</Typography>
-                                </span>
-                            </div>
-                            <div className="rst__rowToolbar">
-                                <IconButton
-                                    data-testid={"pb-edit-icon-button"}
-                                    icon={<EditIcon />}
-                                    onClick={() => editItem(item)}
-                                />
-                                <IconButton
-                                    data-testid={"pb-delete-icon-button"}
-                                    icon={<DeleteIcon />}
-                                    onClick={e => {
-                                        e.stopPropagation();
-                                        if (onRemove) {
-                                            onRemove();
-                                            deleteItem(item);
-                                        }
-                                    }}
-                                />
-                            </div>
+                    <div className={cn(["rst__row", "wby-flex wby-items-center wby-gap-md"])}>
+                        <div className={classnames("rst__rowLabel")}>
+                            <span className={classnames("rst__rowTitle")}>
+                                <Text>{item.title}</Text>
+                            </span>
                         </div>
-                    </Row>
+                        <div
+                            className={cn([
+                                "rst__rowToolbar",
+                                "wby-flex wby-items-center wby-gap-xs"
+                            ])}
+                        >
+                            <IconButton
+                                variant={"ghost"}
+                                size={"sm"}
+                                data-testid={"pb-edit-icon-button"}
+                                icon={<EditIcon />}
+                                onClick={() => editItem(item)}
+                            />
+                            <IconButton
+                                variant={"ghost"}
+                                size={"sm"}
+                                data-testid={"pb-delete-icon-button"}
+                                icon={<DeleteIcon />}
+                                onClick={e => {
+                                    e.stopPropagation();
+                                    if (onRemove) {
+                                        onRemove();
+                                        deleteItem(item);
+                                    }
+                                }}
+                            />
+                        </div>
+                    </div>
                 </div>
-            </RowContainer>
+            </div>
         </FolderTreeItemWrapper>
     );
 });
diff --git a/packages/app-page-builder/src/admin/views/Menus/MenusForm/MenuItems/MenuItemsList.tsx b/packages/app-page-builder/src/admin/views/Menus/MenusForm/MenuItems/MenuItemsList.tsx
index 25b95705808..c517b252e2e 100644
--- a/packages/app-page-builder/src/admin/views/Menus/MenusForm/MenuItems/MenuItemsList.tsx
+++ b/packages/app-page-builder/src/admin/views/Menus/MenusForm/MenuItems/MenuItemsList.tsx
@@ -1,7 +1,7 @@
 import React, { useCallback } from "react";
+import { Text } from "@webiny/admin-ui";
 import NodeRendererDefault, { NodeRendererDefaultProps } from "./MenuItemRenderer";
 import { SortableTree, TreeItems, TreeItemComponentProps } from "dnd-kit-sortable-tree";
-import { Typography } from "@webiny/ui/Typography";
 import styled from "@emotion/styled";
 import { MenuTreeItem } from "~/admin/views/Menus/types";
 
@@ -14,15 +14,6 @@ const TreeWrapper = styled("div")({
         }
 });
 
-const EmptyTree = styled("div")({
-    width: "100%",
-    height: "100%",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    color: "var(--mdc-theme-on-surface)"
-});
-
 export interface MenuItemsListProps {
     items: MenuTreeItem[];
     onChange: (items: MenuTreeItem[]) => void;
@@ -57,9 +48,9 @@ const MenuItemsList = (props: MenuItemsListProps) => {
         [onChange]
     );
     let dom = (
-        <EmptyTree>
-            <Typography use={"overline"}>There are no menu items to display</Typography>
-        </EmptyTree>
+        <div className={"wby-size-full wby-flex wby-items-center wby-justify-center"}>
+            <Text className={"wby-text-neutral-strong"}>There are no menu items to display</Text>
+        </div>
     );
     const TreeNode = React.forwardRef<HTMLDivElement, TreeItemComponentProps<MenuTreeItem>>(
         (props, ref) => (
diff --git a/packages/app-page-builder/src/admin/views/Menus/MenusForm/MenuItems/Styled.ts b/packages/app-page-builder/src/admin/views/Menus/MenusForm/MenuItems/Styled.ts
index d948d9be1fe..50885726723 100644
--- a/packages/app-page-builder/src/admin/views/Menus/MenusForm/MenuItems/Styled.ts
+++ b/packages/app-page-builder/src/admin/views/Menus/MenusForm/MenuItems/Styled.ts
@@ -1,63 +1,15 @@
-import { css } from "emotion";
 import styled from "@emotion/styled";
 import { FolderTreeItemWrapper as DefaultFolderTreeItemWrapper } from "dnd-kit-sortable-tree";
-export const RowContainer = styled("div")({
-    position: "relative",
-    display: "flex",
-    flexDirection: "column",
-    marginBottom: 25,
-    borderRadius: 2,
-    padding: "0 !important",
-    height: "auto !important",
-    backgroundColor: "var(--mdc-theme-surface)",
-    border: "1px solid var(--mdc-theme-on-background)",
-    boxShadow:
-        "var(--mdc-theme-on-background) 1px 1px 1px, var(--mdc-theme-on-background) 1px 1px 2px"
-});
-export const Row = styled("div")({
-    display: "flex",
-    flexDirection: "row",
-    backgroundColor: "var(--mdc-theme-surface)",
-    paddingLeft: 40,
-    paddingRight: 0,
-    position: "relative"
-});
-export const fieldContainer = css({
-    display: "flex",
-    alignItems: "center",
-    position: "relative",
-    flex: "1 100%",
-    backgroundColor: "var(--mdc-theme-background)",
-    padding: "0 15px",
-    margin: 10,
-    borderRadius: 2,
-    border: "1px solid var(--mdc-theme-on-background)",
-    transition: "box-shadow 225ms",
-    color: "var(--mdc-theme-on-surface)",
-    "&:hover": {
-        boxShadow:
-            "var(--mdc-theme-on-background) 1px 1px 1px, var(--mdc-theme-on-background) 1px 1px 2px"
-    }
-});
-export const rowHandle = css({
-    width: 30,
-    cursor: "grab",
-    position: "absolute",
-    left: 10,
-    top: "50%",
-    transform: "translateY(-50%)",
-    zIndex: 1,
-    color: "var(--mdc-theme-on-surface)"
-});
+
 export const FolderTreeItemWrapper = styled(DefaultFolderTreeItemWrapper)<{
     depth?: number;
     collapsed?: boolean;
 }>`
-    height: 80px;
+    height: 56px;
     position: relative;
     & .dnd-sortable-tree_folder_line {
         background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><line stroke='black' style='stroke-width: 1px;' x1='50%' y1='0' x2='50%' y2='100%'/></svg>");
-        width: 44px;
+        width: 20px;
     }
     & .dnd-sortable-tree_folder_line-to_self {
         background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'>
@@ -65,14 +17,14 @@ export const FolderTreeItemWrapper = styled(DefaultFolderTreeItemWrapper)<{
             <line stroke='black' style='stroke-width: 1px;' x1='50%' y1='35%' x2='100%' y2='35%'/>
         </svg>
         ");
-        width: 44px;
+        width: 20px;
     }
     & .dnd-sortable-tree_folder_line-to_self-last {
         background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'>
             <line stroke='black' style='stroke-width: 1px;' x1='50%' y1='0' x2='50%' y2='36.6%'/>
             <line stroke='black' style='stroke-width: 1px;' x1='50%' y1='36%' x2='100%' y2='36%'/>
         </svg>");
-        width: 44px;
+        width: 20px;
     }
     & .dnd-sortable-tree_folder_tree-item-collapse_button {
         ${props =>
@@ -81,12 +33,12 @@ export const FolderTreeItemWrapper = styled(DefaultFolderTreeItemWrapper)<{
                 : `        background: #fff url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCI+PGNpcmNsZSBjeD0iOSIgY3k9IjkiIHI9IjgiIGZpbGw9IiNGRkYiLz48cGF0aCBkPSJNNC41IDloOSIgc3Ryb2tlPSIjOTg5ODk4IiBzdHJva2Utd2lkdGg9IjEuOSIvPjwvc3ZnPg==") no-repeat 50%;
             `};
         position: absolute;
-        top: 17px;
-        ${props => (props.depth !== 0 ? `left: ${46}px;` : `left: 13px;`)};
-        border: 1px solid black;
+        top: 18px;
+        ${props => (props.depth !== 0 ? `left: ${47}px;` : `left: 12px;`)};
+        border: 1px solid hsl(var(--border-neutral-muted));
         border-radius: 50%;
-        width: 20px;
-        height: 20px;
+        width: 18px;
+        height: 18px;
         z-index: 10;
     }
     & .dnd-sortable-tree_folder_tree-item {
diff --git a/packages/app-page-builder/src/admin/views/Menus/MenusForm/MenuItems/icons/round-delete-24px.svg b/packages/app-page-builder/src/admin/views/Menus/MenusForm/MenuItems/icons/round-delete-24px.svg
deleted file mode 100644
index d5ec271650b..00000000000
--- a/packages/app-page-builder/src/admin/views/Menus/MenusForm/MenuItems/icons/round-delete-24px.svg
+++ /dev/null
@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px"
-	 height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
-<g id="Rounded">
-	<g id="ui_x5F_spec_x5F_header_copy_5">
-	</g>
-	<path fill="currentColor" d="M6,19c0,1.1,0.9,2,2,2h8c1.1,0,2-0.9,2-2V9c0-1.1-0.9-2-2-2H8C6.9,7,6,7.9,6,9V19z M18,4h-2.5l-0.71-0.71
-		C14.61,3.11,14.35,3,14.09,3H9.91C9.65,3,9.39,3.11,9.21,3.29L8.5,4H6C5.45,4,5,4.45,5,5v0c0,0.55,0.45,1,1,1h12c0.55,0,1-0.45,1-1
-		v0C19,4.45,18.55,4,18,4z"/>
-</g>
-</svg>
diff --git a/packages/app-page-builder/src/admin/views/Menus/MenusForm/MenuItems/icons/round-drag_indicator-24px.svg b/packages/app-page-builder/src/admin/views/Menus/MenusForm/MenuItems/icons/round-drag_indicator-24px.svg
deleted file mode 100644
index 25a1f28aa86..00000000000
--- a/packages/app-page-builder/src/admin/views/Menus/MenusForm/MenuItems/icons/round-drag_indicator-24px.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" viewBox="0 0 24 24">
-    <path fill="none" d="M0 0h24v24H0V0z"/>
-    <path fill="currentColor" d="M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/>
-</svg>
\ No newline at end of file
diff --git a/packages/app-page-builder/src/admin/views/Menus/MenusForm/MenuItems/icons/round-edit-24px.svg b/packages/app-page-builder/src/admin/views/Menus/MenusForm/MenuItems/icons/round-edit-24px.svg
deleted file mode 100644
index 77ebdee629d..00000000000
--- a/packages/app-page-builder/src/admin/views/Menus/MenusForm/MenuItems/icons/round-edit-24px.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-    <path fill="currentColor" d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/>
-    <path d="M0 0h24v24H0z" fill="none"/>
-</svg>
\ No newline at end of file
diff --git a/packages/app-page-builder/src/admin/views/PageBlocks/BlocksByCategoriesDataList.tsx b/packages/app-page-builder/src/admin/views/PageBlocks/BlocksByCategoriesDataList.tsx
index 879887e5b3a..9ec4843b012 100644
--- a/packages/app-page-builder/src/admin/views/PageBlocks/BlocksByCategoriesDataList.tsx
+++ b/packages/app-page-builder/src/admin/views/PageBlocks/BlocksByCategoriesDataList.tsx
@@ -1,6 +1,4 @@
 import React, { useCallback, useMemo, useState } from "react";
-import { css } from "emotion";
-import styled from "@emotion/styled";
 import { i18n } from "@webiny/app/i18n";
 import { useRouter } from "@webiny/react-router";
 import { useQuery } from "@apollo/react-hooks";
@@ -9,57 +7,38 @@ import {
     DataList,
     DataListModalOverlay,
     DataListModalOverlayAction,
-    List,
+    DownloadIcon,
     ListItem,
     ListItemGraphic,
     ListItemText,
     ListItemTextPrimary,
     ListItemTextSecondary,
-    ScrollList
+    ScrollList,
+    UploadIcon
 } from "@webiny/ui/List";
-import { Cell, Grid } from "@webiny/ui/Grid";
-import { Select } from "@webiny/ui/Select";
-import { Typography } from "@webiny/ui/Typography";
-import { CircularProgress } from "@webiny/ui/Progress";
 import SearchUI from "@webiny/app-admin/components/SearchUI";
-import { Dialog, DialogActions, DialogContent, DialogTitle } from "@webiny/ui/Dialog";
-import { ButtonDefault, ButtonIcon, ButtonSecondary } from "@webiny/ui/Button";
 import { useSnackbar, useStateIfMounted, useStateWithCallback } from "@webiny/app-admin/hooks";
-import { ReactComponent as FilterIcon } from "@webiny/app-admin/assets/icons/filter-24px.svg";
-import { ReactComponent as AddIcon } from "@webiny/app-admin/assets/icons/add-18px.svg";
-import { ReactComponent as DownloadFileIcon } from "@webiny/app-admin/assets/icons/file_download.svg";
-import { ReactComponent as UploadFileIcon } from "@webiny/app-admin/assets/icons/file_upload.svg";
 import { Icon } from "~/admin/utils/createBlockCategoryPlugin";
 import { OptionsMenu } from "~/admin/components/OptionsMenu";
-
 import { PbBlockCategory } from "~/types";
 import { LIST_PAGE_CATEGORIES } from "./graphql";
 import useImportBlock from "~/admin/views/PageBlocks/hooks/useImportBlock";
 import useExportBlockDialog from "~/editor/plugins/defaultBar/components/ExportBlockButton/useExportBlockDialog";
 import useFilteredCategoriesListData from "./hooks/useFilteredCategoriesListData";
 import { usePageBlocks } from "~/admin/contexts/AdminPageBuilder/PageBlocks/usePageBlocks";
+import {
+    Button,
+    Dialog,
+    Grid,
+    List as AdminList,
+    OverlayLoader,
+    Select,
+    Text
+} from "@webiny/admin-ui";
+import { ReactComponent as AddIcon } from "@webiny/icons/add.svg";
 
 const t = i18n.ns("app-page-builder/admin/page-blocks/by-categories-data-list");
 
-const narrowDialog = css`
-    .mdc-dialog__surface {
-        width: 400px;
-        min-width: 400px;
-    }
-`;
-
-const noRecordsWrapper = css`
-    display: flex;
-    justify-content: center;
-    color: var(--mdc-theme-on-surface);
-`;
-
-const DataListActionsWrapper = styled.div`
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-`;
-
 interface Sorter {
     label: string;
     sort: string;
@@ -121,22 +100,17 @@ const BlocksByCategoriesDataList = ({
         () => (
             <DataListModalOverlay>
                 <Grid>
-                    <Cell span={12}>
+                    <Grid.Column span={12}>
                         <Select
                             value={sort}
                             onChange={setSort}
                             label={t`Sort by`}
-                            description={"Sort block categories by"}
-                        >
-                            {SORTERS.map(({ label, sort: value }) => {
-                                return (
-                                    <option key={label} value={value}>
-                                        {label}
-                                    </option>
-                                );
-                            })}
-                        </Select>
-                    </Cell>
+                            options={SORTERS.map(({ label, sort: value }) => ({
+                                label,
+                                value
+                            }))}
+                        />
+                    </Grid.Column>
                 </Grid>
             </DataListModalOverlay>
         ),
@@ -173,52 +147,52 @@ const BlocksByCategoriesDataList = ({
                 loading={Boolean(loading)}
                 data={filteredBlockCategoriesList}
                 actions={
-                    <DataListActionsWrapper>
+                    <>
                         {canCreate ? (
-                            <ButtonSecondary
+                            <Button
+                                text={t`New`}
+                                icon={<AddIcon />}
+                                size={"sm"}
+                                className={"wby-ml-xs"}
                                 onClick={handleNewBlockClick}
                                 data-testid={"pb-blocks-list-new-block-btn"}
-                            >
-                                <ButtonIcon icon={<AddIcon />} /> {t`New Block`}
-                            </ButtonSecondary>
+                            />
                         ) : null}
                         <OptionsMenu
                             data-testid="pb-blocks-list-options-menu"
                             items={[
                                 {
                                     label: "Import blocks",
-                                    icon: <UploadFileIcon />,
+                                    icon: <UploadIcon />,
                                     onClick: showImportDialog
                                 },
                                 {
                                     label: "Export all blocks",
-                                    icon: <DownloadFileIcon />,
+                                    icon: <DownloadIcon />,
                                     onClick: () => handleExportClick()
                                 },
                                 {
                                     label: "Export blocks from current category",
-                                    icon: <DownloadFileIcon />,
+                                    icon: <DownloadIcon />,
                                     onClick: () => handleExportClick(selectedBlocksCategory),
                                     disabled: !selectedBlocksCategory
                                 }
                             ]}
                         />
-                    </DataListActionsWrapper>
+                    </>
                 }
                 search={
                     <SearchUI
                         value={filter}
                         onChange={setFilter}
-                        inputPlaceholder={t`Search blocks`}
+                        inputPlaceholder={t`Search blocks...`}
+                        dataTestId={"pb.blocks.data-list.search-input"}
                     />
                 }
                 showOptions={{ refresh: false }}
                 modalOverlay={blockCategoriesDataListModalOverlay}
                 modalOverlayAction={
-                    <DataListModalOverlayAction
-                        icon={<FilterIcon />}
-                        data-testid={"default-data-list.filter"}
-                    />
+                    <DataListModalOverlayAction data-testid={"default-data-list.filter"} />
                 }
             >
                 {({ data }: { data: PbBlockCategory[] }) => (
@@ -241,7 +215,7 @@ const BlocksByCategoriesDataList = ({
                                         <Icon category={item} />
                                     </ListItemGraphic>
                                     <ListItemText>
-                                        {item.name}
+                                        <ListItemTextPrimary>{item.name}</ListItemTextPrimary>
                                         <ListItemTextSecondary>{`${numberOfBlocks} ${
                                             numberOfBlocks === 1 ? "block" : "blocks"
                                         } in the category`}</ListItemTextSecondary>
@@ -255,52 +229,36 @@ const BlocksByCategoriesDataList = ({
             <Dialog
                 open={isDialogOpen}
                 onClose={() => setIsDialogOpen(false)}
-                className={narrowDialog}
+                title={"Please select a block category"}
+                actions={
+                    <>
+                        <Dialog.CancelButton />
+                        <Dialog.ConfirmButton
+                            data-testid={"pb-blocks-list-new-block-category-btn"}
+                            onClick={() => history.push("/page-builder/block-categories?new=true")}
+                        />
+                    </>
+                }
+                bodyPadding={false}
             >
-                <DialogTitle>
-                    <Typography use="headline5" tag={"span"}>
-                        Please select a block category
-                    </Typography>
-                </DialogTitle>
-                <DialogContent>
-                    {creatingBlock ? <CircularProgress label={"Creating page block..."} /> : null}
-                    <React.Fragment>
-                        {isEmpty(blockCategoriesData) ? (
-                            <div className={noRecordsWrapper}>
-                                <Typography use="overline">
-                                    There are no block categories
-                                </Typography>
-                            </div>
-                        ) : (
-                            <List twoLine>
-                                {blockCategoriesData.map(item => (
-                                    <ListItem
-                                        key={item.slug}
-                                        onClick={() => onCreatePageBlock(item.slug)}
-                                    >
-                                        <ListItemGraphic>
-                                            <Icon category={item} />
-                                        </ListItemGraphic>
-                                        <ListItemText>
-                                            <ListItemTextPrimary>{item.name}</ListItemTextPrimary>
-                                            <ListItemTextSecondary>
-                                                {item.slug}
-                                            </ListItemTextSecondary>
-                                        </ListItemText>
-                                    </ListItem>
-                                ))}
-                            </List>
-                        )}
-                    </React.Fragment>
-                </DialogContent>
-                <DialogActions>
-                    <ButtonDefault
-                        data-testid={"pb-blocks-list-new-block-category-btn"}
-                        onClick={() => history.push("/page-builder/block-categories?new=true")}
-                    >
-                        + Create a new block category
-                    </ButtonDefault>
-                </DialogActions>
+                {creatingBlock ? <OverlayLoader text={"Creating page block..."} /> : null}
+                <>
+                    {isEmpty(blockCategoriesData) ? (
+                        <Text size={"sm"}>There are no block categories</Text>
+                    ) : (
+                        <AdminList>
+                            {blockCategoriesData.map(item => (
+                                <AdminList.Item
+                                    key={item.slug}
+                                    onClick={() => onCreatePageBlock(item.slug)}
+                                    icon={<Icon category={item} />}
+                                    title={item.name}
+                                    description={item.slug}
+                                />
+                            ))}
+                        </AdminList>
+                    )}
+                </>
             </Dialog>
         </>
     );
diff --git a/packages/app-page-builder/src/admin/views/PageBlocks/PageBlocksDataList.tsx b/packages/app-page-builder/src/admin/views/PageBlocks/PageBlocksDataList.tsx
index ea5e5d2a4ea..c139d7fbd09 100644
--- a/packages/app-page-builder/src/admin/views/PageBlocks/PageBlocksDataList.tsx
+++ b/packages/app-page-builder/src/admin/views/PageBlocks/PageBlocksDataList.tsx
@@ -1,118 +1,30 @@
 import React, { useCallback, useEffect, useState } from "react";
-import styled from "@emotion/styled";
 import isEmpty from "lodash/isEmpty";
-
+import { ReactComponent as ExportIcon } from "@webiny/icons/file_download.svg";
+import { ReactComponent as EditIcon } from "@webiny/icons/edit.svg";
+import { ReactComponent as DeleteIcon } from "@webiny/icons/delete.svg";
+import { ReactComponent as CloneIcon } from "@webiny/icons/copy_all.svg";
+import { ReactComponent as TableIcon } from "@webiny/icons/table_chart.svg";
+import { IconButton, OverlayLoader, Tooltip } from "@webiny/admin-ui";
 import { useRouter } from "@webiny/react-router";
-import { DeleteIcon, EditIcon } from "@webiny/ui/List/DataList/icons";
-import { IconButton } from "@webiny/ui/Button";
-import { ReactComponent as DuplicateIcon } from "~/editor/assets/icons/round-queue-24px.svg";
-import { ReactComponent as ExportIcon } from "@material-design-icons/svg/round/download.svg";
-import { CircularProgress } from "@webiny/ui/Progress";
 import EmptyView from "@webiny/app-admin/components/EmptyView";
-import { Typography } from "@webiny/ui/Typography";
 import { i18n } from "@webiny/app/i18n";
 import { useSnackbar } from "@webiny/app-admin/hooks/useSnackbar";
 import { useConfirmationDialog } from "@webiny/app-admin/hooks/useConfirmationDialog";
 import useExportBlockDialog from "~/editor/plugins/defaultBar/components/ExportBlockButton/useExportBlockDialog";
-
 import { PbPageBlock } from "~/types";
 import { CreatableItem } from "./PageBlocks";
 import { PreviewBlock } from "~/admin/components/PreviewBlock";
 import { ResponsiveElementsProvider } from "~/admin/components/ResponsiveElementsProvider";
 import { usePageBlocks } from "~/admin/contexts/AdminPageBuilder/PageBlocks/usePageBlocks";
+import {
+    SimpleForm,
+    SimpleFormContent,
+    SimpleFormHeader
+} from "@webiny/app-admin/components/SimpleForm";
 
 const t = i18n.ns("app-page-builder/admin/page-blocks/data-list");
 
-const List = styled("div")`
-    display: flex;
-    flex-direction: column;
-    padding: 8px;
-    margin: 17px 50px;
-    background-color: white;
-    box-shadow: 0px 2px 1px -1px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%),
-        0px 1px 3px 0px rgb(0 0 0 / 12%);
-`;
-
-const ListItem = styled.div`
-    position: relative;
-    border: 1px solid rgba(212, 212, 212, 0.5);
-    box-shadow: 0px 2px 1px -1px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%),
-        0px 1px 3px 0px rgb(0 0 0 / 12%);
-    min-height: 70px;
-    padding: 15px;
-    margin-bottom: 10px;
-    :last-of-type {
-        margin-bottom: 0;
-    }
-`;
-
-const ListItemText = styled("div")({
-    textTransform: "uppercase",
-    alignSelf: "start",
-    marginTop: "15px"
-});
-
-const Controls = styled("div")({
-    position: "absolute",
-    top: 0,
-    bottom: 0,
-    left: 0,
-    right: 0,
-    opacity: 0,
-    backgroundColor: "rgba(0,0,0,0.5)",
-    transition: "opacity 0.2s ease-out",
-
-    "&:hover": {
-        opacity: 1
-    }
-});
-
-const DeleteButton = styled(DeleteIcon)({
-    position: "absolute",
-    top: "10px",
-    right: "10px",
-
-    "& svg": {
-        fill: "white"
-    }
-});
-
-const EditButton = styled(EditIcon)({
-    position: "absolute",
-    top: "10px",
-    right: "110px",
-
-    "& svg": {
-        fill: "white"
-    }
-});
-
-const DuplicateButton = styled(IconButton)({
-    position: "absolute",
-    top: "10px",
-    right: "60px",
-
-    "& svg": {
-        fill: "white"
-    }
-});
-
-const ExportButton = styled(IconButton)({
-    position: "absolute",
-    top: "10px",
-    right: "160px",
-
-    "& svg": {
-        fill: "white"
-    }
-});
-
-const NoRecordsWrapper = styled("div")({
-    textAlign: "center",
-    padding: 100,
-    color: "var(--mdc-theme-on-surface)"
-});
-
 type PageBlocksDataListProps = {
     filter: string;
     canCreate: boolean;
@@ -192,6 +104,7 @@ const PageBlocksDataList = ({ filter, canCreate, canEdit, canDelete }: PageBlock
     if (showEmptyView) {
         return (
             <EmptyView
+                icon={<TableIcon />}
                 title={t`Click on the left side list to display list of page blocks for selected category`}
                 action={null}
             />
@@ -201,55 +114,86 @@ const PageBlocksDataList = ({ filter, canCreate, canEdit, canDelete }: PageBlock
     const showNoRecordsView = !pageBlocks.loading && isEmpty(filteredBlocksData);
     // Render "No records found" view.
     if (showNoRecordsView) {
-        return (
-            <NoRecordsWrapper>
-                <Typography use="overline">No records found.</Typography>
-            </NoRecordsWrapper>
-        );
+        return <EmptyView icon={<TableIcon />} title={t`No blocks found.`} />;
     }
 
     return (
-        <List>
+        <>
             {pageBlocks.loading && (
-                <CircularProgress label={loadingLabel || pageBlocks.loadingLabel || "Loading..."} />
+                <OverlayLoader text={loadingLabel || pageBlocks.loadingLabel || "Loading..."} />
             )}
             <ResponsiveElementsProvider>
                 {filteredBlocksData.map(pageBlock => (
-                    <ListItem key={pageBlock.id}>
-                        <PreviewBlock element={pageBlock} />
-                        <ListItemText>{pageBlock.name}</ListItemText>
-                        <Controls>
-                            <ExportButton
-                                data-testid={"pb-blocks-list-block-export-btn"}
-                                icon={<ExportIcon />}
-                                onClick={() => handleExportClick(pageBlock.id)}
-                            />
-                            {canEdit(pageBlock) && (
-                                <EditButton
-                                    data-testid={"pb-blocks-list-block-edit-btn"}
-                                    onClick={() =>
-                                        history.push(`/page-builder/block-editor/${pageBlock.id}`)
+                    <SimpleForm
+                        key={pageBlock.id}
+                        size={"lg"}
+                        className={"wby-pt-none first:wby-pt-lg"}
+                    >
+                        <SimpleFormHeader title={pageBlock.name}>
+                            <div className={"wby-flex wby-items-center wby-justify-end wby-gap-xs"}>
+                                <Tooltip
+                                    content={"Export block"}
+                                    trigger={
+                                        <IconButton
+                                            variant="ghost"
+                                            icon={<ExportIcon />}
+                                            data-testid={"pb-blocks-list-block-export-btn"}
+                                            onClick={() => handleExportClick(pageBlock.id)}
+                                        />
                                     }
                                 />
-                            )}
-                            {canCreate && (
-                                <DuplicateButton
-                                    data-testid={"pb-blocks-list-block-duplicate-btn"}
-                                    icon={<DuplicateIcon />}
-                                    onClick={() => duplicateItem(pageBlock)}
-                                />
-                            )}
-                            {canDelete(pageBlock) && (
-                                <DeleteButton
-                                    data-testid={"pb-blocks-list-block-delete-btn"}
-                                    onClick={() => deleteItem(pageBlock)}
-                                />
-                            )}
-                        </Controls>
-                    </ListItem>
+                                {canEdit(pageBlock) && (
+                                    <Tooltip
+                                        content={"Edit block"}
+                                        trigger={
+                                            <IconButton
+                                                variant="ghost"
+                                                icon={<EditIcon />}
+                                                data-testid={"pb-blocks-list-block-edit-btn"}
+                                                onClick={() =>
+                                                    history.push(
+                                                        `/page-builder/block-editor/${pageBlock.id}`
+                                                    )
+                                                }
+                                            />
+                                        }
+                                    />
+                                )}
+                                {canCreate && (
+                                    <Tooltip
+                                        content={"Clone block"}
+                                        trigger={
+                                            <IconButton
+                                                variant="ghost"
+                                                data-testid={"pb-blocks-list-block-duplicate-btn"}
+                                                icon={<CloneIcon />}
+                                                onClick={() => duplicateItem(pageBlock)}
+                                            />
+                                        }
+                                    />
+                                )}
+                                {canDelete(pageBlock) && (
+                                    <Tooltip
+                                        content={"Delete block"}
+                                        trigger={
+                                            <IconButton
+                                                variant="ghost"
+                                                data-testid={"pb-blocks-list-block-delete-btn"}
+                                                onClick={() => deleteItem(pageBlock)}
+                                                icon={<DeleteIcon />}
+                                            />
+                                        }
+                                    />
+                                )}
+                            </div>
+                        </SimpleFormHeader>
+                        <SimpleFormContent className={"wby-p-0 wby-border-b-sm"}>
+                            <PreviewBlock element={pageBlock} />
+                        </SimpleFormContent>
+                    </SimpleForm>
                 ))}
             </ResponsiveElementsProvider>
-        </List>
+        </>
     );
 };
 
diff --git a/packages/app-page-builder/src/admin/views/PageTemplates/CreatePageTemplateDialog.tsx b/packages/app-page-builder/src/admin/views/PageTemplates/CreatePageTemplateDialog.tsx
index 90eb1054f4a..c585cb789f9 100644
--- a/packages/app-page-builder/src/admin/views/PageTemplates/CreatePageTemplateDialog.tsx
+++ b/packages/app-page-builder/src/admin/views/PageTemplates/CreatePageTemplateDialog.tsx
@@ -1,22 +1,10 @@
 import React, { useCallback, useState } from "react";
-import { css } from "emotion";
 import { makeDecoratable } from "@webiny/app";
 import { Form } from "@webiny/form";
-import { ButtonPrimary } from "@webiny/ui/Button";
-import { Grid, Cell } from "@webiny/ui/Grid";
-import { SimpleFormContent } from "@webiny/app-admin/components/SimpleForm";
 import { validation } from "@webiny/validation";
-import { Dialog, DialogCancel, DialogTitle, DialogActions, DialogContent } from "@webiny/ui/Dialog";
-import { Input } from "@webiny/ui/Input";
 import { Validator } from "@webiny/validation/types";
 import { PbPageTemplate } from "~/types";
-
-const narrowDialog = css`
-    & .mdc-dialog__surface {
-        width: 600px;
-        min-width: 600px;
-    }
-`;
+import { Dialog, Grid, Input, Textarea } from "@webiny/admin-ui";
 
 const slugValidator: Validator = (value: string) => {
     if (!value.match(/^[a-z]+(\-[a-z]+)*$/)) {
@@ -53,54 +41,51 @@ export const CreatePageTemplateDialog = makeDecoratable(
         );
 
         return (
-            <Dialog open={open} onClose={onClose} className={narrowDialog}>
-                <Form onSubmit={submitForm}>
-                    {({ form, Bind }) => (
-                        <>
-                            <DialogTitle>Create Page Template</DialogTitle>
-                            <DialogContent>
-                                <SimpleFormContent>
-                                    <Grid>
-                                        <Cell span={6}>
-                                            <Bind
-                                                name="title"
-                                                validators={[validation.create("required")]}
-                                            >
-                                                <Input label="Title" />
-                                            </Bind>
-                                        </Cell>
-                                        <Cell span={6}>
-                                            <Bind
-                                                name="slug"
-                                                validators={[
-                                                    validation.create("required"),
-                                                    slugValidator
-                                                ]}
-                                            >
-                                                <Input label="Slug" />
-                                            </Bind>
-                                        </Cell>
-                                        <Cell span={12}>
-                                            <Bind
-                                                name="description"
-                                                validators={[validation.create("required")]}
-                                            >
-                                                <Input rows={2} label="Description" />
-                                            </Bind>
-                                        </Cell>
-                                    </Grid>
-                                </SimpleFormContent>
-                            </DialogContent>
-                            <DialogActions>
-                                <DialogCancel disabled={loading}>Cancel</DialogCancel>
-                                <ButtonPrimary disabled={loading} onClick={form.submit}>
-                                    Create
-                                </ButtonPrimary>
-                            </DialogActions>
-                        </>
-                    )}
-                </Form>
-            </Dialog>
+            <Form onSubmit={submitForm}>
+                {({ form, Bind }) => (
+                    <>
+                        <Dialog
+                            open={open}
+                            onClose={onClose}
+                            title={"Create page template"}
+                            actions={
+                                <>
+                                    <Dialog.CancelButton disabled={loading} />
+                                    <Dialog.ConfirmButton
+                                        text={"Create"}
+                                        disabled={loading}
+                                        onClick={form.submit}
+                                    />
+                                </>
+                            }
+                        >
+                            <Grid>
+                                <Grid.Column span={12}>
+                                    <Bind name="title" validators={[validation.create("required")]}>
+                                        <Input size={"lg"} label="Title" />
+                                    </Bind>
+                                </Grid.Column>
+                                <Grid.Column span={12}>
+                                    <Bind
+                                        name="slug"
+                                        validators={[validation.create("required"), slugValidator]}
+                                    >
+                                        <Input size={"lg"} label="Slug" />
+                                    </Bind>
+                                </Grid.Column>
+                                <Grid.Column span={12}>
+                                    <Bind
+                                        name="description"
+                                        validators={[validation.create("required")]}
+                                    >
+                                        <Textarea size={"lg"} rows={2} label="Description" />
+                                    </Bind>
+                                </Grid.Column>
+                            </Grid>
+                        </Dialog>
+                    </>
+                )}
+            </Form>
         );
     }
 );
diff --git a/packages/app-page-builder/src/admin/views/PageTemplates/PageTemplateContentPreview.tsx b/packages/app-page-builder/src/admin/views/PageTemplates/PageTemplateContentPreview.tsx
index ca4ce0acbe3..88eac2076c8 100644
--- a/packages/app-page-builder/src/admin/views/PageTemplates/PageTemplateContentPreview.tsx
+++ b/packages/app-page-builder/src/admin/views/PageTemplates/PageTemplateContentPreview.tsx
@@ -1,15 +1,8 @@
 import React from "react";
-import { css } from "emotion";
 import { makeDecoratable } from "@webiny/app";
 import { Content } from "@webiny/app-page-builder-elements";
 import type { PbPageTemplateWithContent } from "~/types";
 
-const pageInnerWrapper = css`
-    overflow-y: scroll;
-    overflow-x: hidden;
-    height: calc(100vh - 165px);
-`;
-
 interface PageTemplateContentPreviewProps {
     template: PbPageTemplateWithContent;
 }
@@ -18,7 +11,7 @@ export const PageTemplateContentPreview = makeDecoratable(
     "PageTemplateContentPreview",
     ({ template }: PageTemplateContentPreviewProps) => {
         return (
-            <div className={pageInnerWrapper}>
+            <div className={"wby-overflow-y-scroll wby-overflow-x-hidden"}>
                 <Content content={template.content} />
             </div>
         );
diff --git a/packages/app-page-builder/src/admin/views/PageTemplates/PageTemplateDetails.tsx b/packages/app-page-builder/src/admin/views/PageTemplates/PageTemplateDetails.tsx
index 82d01526032..7fdcafaacc9 100644
--- a/packages/app-page-builder/src/admin/views/PageTemplates/PageTemplateDetails.tsx
+++ b/packages/app-page-builder/src/admin/views/PageTemplates/PageTemplateDetails.tsx
@@ -1,62 +1,25 @@
 import React from "react";
-import styled from "@emotion/styled";
+import { Button, OverlayLoader, IconButton, Tooltip } from "@webiny/admin-ui";
+import { ReactComponent as AddIcon } from "@webiny/icons/add.svg";
+import { ReactComponent as EditIcon } from "@webiny/icons/edit.svg";
+import { ReactComponent as DeleteIcon } from "@webiny/icons/delete.svg";
+import { ReactComponent as TableIcon } from "@webiny/icons/table_chart.svg";
 import { useRouter } from "@webiny/react-router";
-import { ButtonDefault, ButtonIcon, IconButton } from "@webiny/ui/Button";
-import { Elevation } from "@webiny/ui/Elevation";
-import { CircularProgress } from "@webiny/ui/Progress";
-import { Typography } from "@webiny/ui/Typography";
 import EmptyView from "@webiny/app-admin/components/EmptyView";
 import { i18n } from "@webiny/app/i18n";
-import { ReactComponent as AddIcon } from "@material-design-icons/svg/filled/add.svg";
-import { ReactComponent as EditIcon } from "@material-design-icons/svg/round/edit.svg";
-import { ReactComponent as DeleteIcon } from "@material-design-icons/svg/round/delete.svg";
 
 import { CreatableItem } from "./PageTemplates";
 import { PbPageTemplate } from "~/types";
 import { useListPageTemplates } from "~/features";
 import { PageTemplateContentPreview } from "~/admin/views/PageTemplates/PageTemplateContentPreview";
+import {
+    SimpleForm,
+    SimpleFormContent,
+    SimpleFormHeader
+} from "@webiny/app-admin/components/SimpleForm";
 
 const t = i18n.ns("app-page-builder/admin/views/page-templates/page-template-details");
 
-const DetailsContainer = styled.div`
-    height: calc(100% - 10px);
-    overflow: hidden;
-    position: relative;
-`;
-
-const RenderBlock = styled.div`
-    position: relative;
-    z-index: 0;
-    background-color: var(--mdc-theme-background);
-    height: 100%;
-    overflow: auto;
-    padding: 25px;
-`;
-
-const HeaderTitle = styled.div`
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    border-bottom: 1px solid var(--mdc-theme-on-background);
-    color: var(--mdc-theme-text-primary-on-background);
-    background: var(--mdc-theme-surface);
-    padding: 10px 24px 9px;
-`;
-
-const PageTemplateTitle = styled.div`
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-`;
-
-const HeaderActions = styled.div`
-    justify-content: flex-end;
-    margin-right: -15px;
-    margin-left: 10px;
-    display: flex;
-    align-items: center;
-`;
-
 interface EmptyTemplateDetailsProps {
     onCreate: () => void;
     canCreate: boolean;
@@ -65,17 +28,18 @@ interface EmptyTemplateDetailsProps {
 const EmptyTemplateDetails = ({ onCreate, canCreate }: EmptyTemplateDetailsProps) => {
     return (
         <EmptyView
-            title={t`Click on the left side list to display page details {message} `({
+            icon={<TableIcon />}
+            title={t`Click on the left side list to display template details {message} `({
                 message: canCreate ? "or create a..." : ""
             })}
             action={
                 canCreate ? (
-                    <ButtonDefault
-                        data-testid="pb-templates-form-new-template-btn"
+                    <Button
+                        text={t`New Template`}
+                        icon={<AddIcon />}
+                        data-testid="new-record-button"
                         onClick={onCreate}
-                    >
-                        <ButtonIcon icon={<AddIcon />} /> {t`New Template`}
-                    </ButtonDefault>
+                    />
                 ) : (
                     <></>
                 )
@@ -111,18 +75,17 @@ export const PageTemplateDetails = ({
     }
 
     return (
-        <DetailsContainer>
-            <RenderBlock>
-                <Elevation z={2}>
-                    <div style={{ position: "relative" }} data-testid={"pb-page-templates-form"}>
-                        {loading && <CircularProgress />}
-                        <HeaderTitle>
-                            <PageTemplateTitle>
-                                <Typography use="headline5">{template.title}</Typography>
-                            </PageTemplateTitle>
-                            <HeaderActions>
-                                {canEdit(template) && (
+        <SimpleForm size={"lg"}>
+            <div style={{ position: "relative" }} data-testid={"pb-page-templates-form"}>
+                {loading && <OverlayLoader />}
+                <SimpleFormHeader title={template.title} data-testid={"pb-categories-form-title"}>
+                    <div className={"wby-flex wby-items-center wby-justify-end wby-gap-xs"}>
+                        {canEdit(template) && (
+                            <Tooltip
+                                content={t`Edit template`}
+                                trigger={
                                     <IconButton
+                                        variant={"ghost"}
                                         icon={<EditIcon />}
                                         onClick={() =>
                                             history.push(
@@ -130,19 +93,27 @@ export const PageTemplateDetails = ({
                                             )
                                         }
                                     />
-                                )}
-                                {canDelete(template) && (
+                                }
+                            />
+                        )}
+                        {canDelete(template) && (
+                            <Tooltip
+                                content={t`Delete template`}
+                                trigger={
                                     <IconButton
+                                        variant={"ghost"}
                                         icon={<DeleteIcon />}
                                         onClick={() => onDelete(template)}
                                     />
-                                )}
-                            </HeaderActions>
-                        </HeaderTitle>
-                        <PageTemplateContentPreview template={template} />
+                                }
+                            />
+                        )}
                     </div>
-                </Elevation>
-            </RenderBlock>
-        </DetailsContainer>
+                </SimpleFormHeader>
+                <SimpleFormContent className={"wby-p-0 wby-border-b-sm"}>
+                    <PageTemplateContentPreview template={template} />
+                </SimpleFormContent>
+            </div>
+        </SimpleForm>
     );
 };
diff --git a/packages/app-page-builder/src/admin/views/PageTemplates/PageTemplatesDataList.tsx b/packages/app-page-builder/src/admin/views/PageTemplates/PageTemplatesDataList.tsx
index 5087d82680b..94029fd9156 100644
--- a/packages/app-page-builder/src/admin/views/PageTemplates/PageTemplatesDataList.tsx
+++ b/packages/app-page-builder/src/admin/views/PageTemplates/PageTemplatesDataList.tsx
@@ -1,50 +1,36 @@
 import React, { useCallback, useMemo, useState } from "react";
-import styled from "@emotion/styled";
+import { Button, CheckboxPrimitive, Grid, Select, TimeAgo } from "@webiny/admin-ui";
+import { ReactComponent as AddIcon } from "@webiny/icons/add.svg";
 import { i18n } from "@webiny/app/i18n";
 import { useRouter } from "@webiny/react-router";
 import orderBy from "lodash/orderBy";
-import { TimeAgo } from "@webiny/ui/TimeAgo";
-
 import {
     DataList,
     DataListModalOverlay,
     DataListModalOverlayAction,
+    DeleteIcon,
+    EditIcon,
     ListActions,
     ListItem,
     ListItemMeta,
     ListItemText,
+    ListItemTextPrimary,
     ListItemTextSecondary,
     ListSelectBox,
-    ListTextOverline,
-    ScrollList
+    ScrollList,
+    UploadIcon
 } from "@webiny/ui/List";
-import { Checkbox } from "@webiny/ui/Checkbox";
-import { Cell, Grid } from "@webiny/ui/Grid";
-import { Select } from "@webiny/ui/Select";
 import SearchUI from "@webiny/app-admin/components/SearchUI";
-import { ButtonIcon, ButtonSecondary, IconButton } from "@webiny/ui/Button";
-import { ReactComponent as AddIcon } from "@material-design-icons/svg/filled/add.svg";
-import { ReactComponent as FilterIcon } from "@material-design-icons/svg/round/filter_alt.svg";
-import { ReactComponent as EditIcon } from "@material-design-icons/svg/round/edit.svg";
-import { ReactComponent as DeleteIcon } from "@material-design-icons/svg/round/delete.svg";
 import { CreatableItem } from "./PageTemplates";
 import { useMultiSelect } from "~/admin/views/Pages/hooks/useMultiSelect";
 import { ExportTemplatesButton } from "~/editor/plugins/defaultBar/components/ExportTemplateButton";
-import { ReactComponent as FileUploadIcon } from "@webiny/app-admin/assets/icons/file_upload.svg";
 import useImportTemplate from "~/admin/views/PageTemplates/hooks/useImportTemplate";
 import { OptionsMenu } from "~/admin/components/OptionsMenu";
-
 import { PbPageTemplate } from "~/types";
 import { useListPageTemplates } from "~/features";
 
 const t = i18n.ns("app-page-builder/admin/views/page-templates/page-templates-details");
 
-const DataListActionsWrapper = styled.div`
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-`;
-
 interface Sorter {
     label: string;
     sort: string;
@@ -117,22 +103,17 @@ const PageTemplatesDataList = ({
         () => (
             <DataListModalOverlay>
                 <Grid>
-                    <Cell span={12}>
+                    <Grid.Column span={12}>
                         <Select
                             value={sort}
                             onChange={setSort}
                             label={t`Sort by`}
-                            description={"Sort templates by"}
-                        >
-                            {SORTERS.map(({ label, sort: value }) => {
-                                return (
-                                    <option key={label} value={value}>
-                                        {label}
-                                    </option>
-                                );
-                            })}
-                        </Select>
-                    </Cell>
+                            options={SORTERS.map(({ label, sort: value }) => ({
+                                label,
+                                value
+                            }))}
+                        />
+                    </Grid.Column>
                 </Grid>
             </DataListModalOverlay>
         ),
@@ -146,25 +127,27 @@ const PageTemplatesDataList = ({
             return null;
         }
         return (
-            <DataListActionsWrapper>
-                <ButtonSecondary
-                    data-testid="pb-templates-list-new-template-btn"
+            <>
+                <Button
+                    text={t`New`}
+                    icon={<AddIcon />}
+                    size={"sm"}
+                    className={"wby-ml-xs"}
+                    data-testid="data-list-new-record-button"
                     onClick={onCreate}
-                >
-                    <ButtonIcon icon={<AddIcon />} /> {t`New Template`}
-                </ButtonSecondary>
+                />
                 <OptionsMenu
                     data-testid={"pb-templates-list-options-btn"}
                     items={[
                         {
-                            label: "Import Templates",
-                            icon: <FileUploadIcon />,
+                            label: "Import templates",
+                            icon: <UploadIcon />,
                             onClick: showImportDialog,
                             "data-testid": "pb-templates-list-options-import-template-btn"
                         }
                     ]}
                 />
-            </DataListActionsWrapper>
+            </>
         );
     }, [canCreate, showImportDialog]);
 
@@ -185,10 +168,7 @@ const PageTemplatesDataList = ({
             actions={listActions}
             modalOverlay={templatesDataListModalOverlay}
             modalOverlayAction={
-                <DataListModalOverlayAction
-                    icon={<FilterIcon />}
-                    data-testid={"default-data-list.filter"}
-                />
+                <DataListModalOverlayAction data-testid={"default-data-list.filter"} />
             }
             multiSelectActions={
                 <ExportTemplatesButton
@@ -206,7 +186,8 @@ const PageTemplatesDataList = ({
                 <SearchUI
                     value={filter}
                     onChange={setFilter}
-                    inputPlaceholder={t`Search templates`}
+                    inputPlaceholder={t`Search templates...`}
+                    dataTestId={"pb.template.data-list.search-input"}
                 />
             }
         >
@@ -220,9 +201,9 @@ const PageTemplatesDataList = ({
                                     selected={template.id === selectedTemplate}
                                 >
                                     <ListSelectBox>
-                                        <Checkbox
+                                        <CheckboxPrimitive
                                             onChange={() => multiSelectProps.multiSelect(template)}
-                                            value={multiSelectProps.isMultiSelected(template)}
+                                            checked={multiSelectProps.isMultiSelected(template)}
                                         />
                                     </ListSelectBox>
                                     <ListItemText
@@ -232,25 +213,26 @@ const PageTemplatesDataList = ({
                                             )
                                         }
                                     >
-                                        {template.title}
-                                        <ListTextOverline>{template.description}</ListTextOverline>
-                                        {template.createdBy && (
-                                            <ListItemTextSecondary>
-                                                {`Created by:
+                                        <ListItemTextPrimary>{template.title}</ListItemTextPrimary>
+                                        <ListItemTextSecondary>
+                                            <div>{template.description}</div>
+                                            {template.createdBy && (
+                                                <div>
+                                                    {`Created by:
                                                 ${template.createdBy.displayName || "N/A"}. `}
-                                                {`Last modified: `}
-                                                <TimeAgo datetime={template.savedOn} />.
-                                            </ListItemTextSecondary>
-                                        )}
+                                                    {`Last modified: `}
+                                                    <TimeAgo datetime={template.savedOn} />.
+                                                </div>
+                                            )}
+                                        </ListItemTextSecondary>
                                     </ListItemText>
                                     <ListItemMeta>
                                         <ListActions>
                                             {canEdit(template) && (
-                                                <IconButton
+                                                <EditIcon
                                                     data-testid={
                                                         "pb-templates-list-edit-template-btn"
                                                     }
-                                                    icon={<EditIcon />}
                                                     onClick={() =>
                                                         history.push(
                                                             `/page-builder/template-editor/${template.id}`
@@ -259,11 +241,10 @@ const PageTemplatesDataList = ({
                                                 />
                                             )}
                                             {canDelete(template) && (
-                                                <IconButton
+                                                <DeleteIcon
                                                     data-testid={
                                                         "pb-templates-list-delete-template-btn"
                                                     }
-                                                    icon={<DeleteIcon />}
                                                     onClick={() => onDelete(template)}
                                                 />
                                             )}
diff --git a/packages/app-page-builder/src/admin/views/Pages/PageTemplatesDialog.tsx b/packages/app-page-builder/src/admin/views/Pages/PageTemplatesDialog.tsx
index 90eb4b9283d..5a1d8e6f6b9 100644
--- a/packages/app-page-builder/src/admin/views/Pages/PageTemplatesDialog.tsx
+++ b/packages/app-page-builder/src/admin/views/Pages/PageTemplatesDialog.tsx
@@ -1,111 +1,35 @@
 import React, { useCallback, useState, useEffect, useMemo } from "react";
-import styled from "@emotion/styled";
-import classNames from "classnames";
+import { ReactComponent as TableIcon } from "@webiny/icons/table_chart.svg";
 import { OverlayLayout } from "@webiny/app-admin/components/OverlayLayout";
 import { LeftPanel, RightPanel, SplitView } from "@webiny/app-admin/components/SplitView";
-import { ScrollList, ListItem } from "@webiny/ui/List";
-import { Icon } from "@webiny/ui/Icon";
-import { Typography } from "@webiny/ui/Typography";
-import { DelayedOnChange } from "@webiny/ui/DelayedOnChange";
-import { Elevation } from "@webiny/ui/Elevation";
-import { ButtonSecondary } from "@webiny/ui/Button";
-
 import { ReactComponent as SearchIcon } from "~/editor/assets/icons/search.svg";
 import { useKeyHandler } from "~/editor/hooks/useKeyHandler";
-import {
-    listItem,
-    activeListItem,
-    ListItemTitle,
-    listStyle,
-    TitleContent
-} from "./PageTemplatesDialogStyled";
-import * as Styled from "~/templateEditor/config/Content/BlocksBrowser/StyledComponents";
 import { PbPageTemplate, PbPageTemplateWithContent } from "~/types";
 import { useListPageTemplates } from "~/features";
 import { PageTemplateContentPreview } from "~/admin/views/PageTemplates/PageTemplateContentPreview";
-
-const ListContainer = styled.div`
-    width: 100%;
-    height: calc(100vh - 64px);
-    overflow: clip;
-    display: flex;
-    flex-direction: column;
-`;
-
-const DetailsContainer = styled.div`
-    height: calc(100% - 10px);
-    overflow: hidden;
-    position: relative;
-
-    .mdc-tab-bar {
-        background-color: var(--mdc-theme-surface);
-    }
-`;
-
-const RenderBlock = styled.div`
-    position: relative;
-    z-index: 0;
-    background-color: var(--mdc-theme-background);
-    height: 100%;
-    overflow: auto;
-    padding: 25px;
-`;
-
-const HeaderTitle = styled.div`
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    border-bottom: 1px solid var(--mdc-theme-on-background);
-    color: var(--mdc-theme-text-primary-on-background);
-    background: var(--mdc-theme-surface);
-    padding-top: 10px;
-    padding-bottom: 9px;
-    padding-left: 24px;
-    padding-right: 24px;
-`;
-
-const PageTemplateTitle = styled.div`
-    overflow: hidden;
-
-    span {
-        display: block;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
-`;
-
-const HeaderActions = styled.div`
-    justify-content: flex-end;
-    margin-left: 10px;
-    display: flex;
-    align-items: center;
-`;
-
-const ModalTitleStyled = styled.div`
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    color: var(--mdc-theme-text-primary-on-background);
-`;
-
-const SearchInputWrapper = styled.div`
-    padding: 16px;
-`;
-
-const BlankTemplateButtonWrapper = styled.div`
-    display: flex;
-    justify-content: center;
-    padding-top: 16px;
-    padding-bottom: 16px;
-    border-top: 1px solid var(--mdc-theme-on-background);
-`;
+import { Button, DelayedOnChange, Heading, Icon, Input, List, Separator } from "@webiny/admin-ui";
+import {
+    SimpleForm,
+    SimpleFormContent,
+    SimpleFormFooter,
+    SimpleFormHeader
+} from "@webiny/app-admin/components/SimpleForm";
+import EmptyView from "@webiny/app-admin/components/EmptyView";
 
 const ModalTitle = () => {
     return (
-        <ModalTitleStyled>
-            <Typography use="headline5">Pick a template for your new page</Typography>
-        </ModalTitleStyled>
+        <Heading level={5} className={"wby-truncate"}>
+            Pick a template for your new page
+        </Heading>
+    );
+};
+
+const EmptyTemplateDetails = () => {
+    return (
+        <EmptyView
+            icon={<TableIcon />}
+            title={"Click on the left side list to display template details"}
+        />
     );
 };
 
@@ -149,92 +73,78 @@ const PageTemplatesDialog = ({ onClose, onSelect, isLoading }: PageTemplatesDial
         <OverlayLayout barLeft={<ModalTitle />} onExited={onClose}>
             <SplitView>
                 <LeftPanel span={3}>
-                    <ListContainer>
-                        <SearchInputWrapper>
-                            <Styled.Input>
-                                <Icon className={Styled.searchIcon} icon={<SearchIcon />} />
-                                <DelayedOnChange value={search} onChange={setSearch}>
-                                    {({ value, onChange }) => (
-                                        <input
-                                            autoFocus
-                                            type={"text"}
-                                            placeholder="Search templates..."
-                                            value={value}
-                                            onChange={ev => onChange(ev.target.value)}
-                                        />
-                                    )}
-                                </DelayedOnChange>
-                            </Styled.Input>
-                        </SearchInputWrapper>
-                        <ScrollList
-                            className={listStyle}
-                            data-testid={"pb-new-page-dialog-templates-list"}
-                        >
-                            {filteredPageTemplates.map(template => (
-                                <ListItem
-                                    key={template.id}
-                                    className={classNames(
-                                        listItem,
-                                        activeTemplate?.id === template.id && activeListItem
-                                    )}
-                                    onClick={() => {
-                                        setActiveTemplate(template);
-                                    }}
-                                >
-                                    <TitleContent>
-                                        <ListItemTitle>{template.title}</ListItemTitle>
-                                        <Typography use={"body2"}>
-                                            {template.description}
-                                        </Typography>
-                                    </TitleContent>
-                                </ListItem>
-                            ))}
-                        </ScrollList>
-                        <BlankTemplateButtonWrapper>
-                            <ButtonSecondary
-                                disabled={isLoading}
-                                onClick={() => onSelect()}
-                                data-testid={"pb-new-page-dialog-use-blank-template-btn"}
-                            >
-                                Use a blank page template
-                            </ButtonSecondary>
-                        </BlankTemplateButtonWrapper>
-                    </ListContainer>
+                    <div className={"wby-flex wby-flex-col wby-justify-between wby-h-full"}>
+                        <div>
+                            <div>
+                                <div className={"wby-py-sm wby-px-md"}>
+                                    <DelayedOnChange value={search} onChange={setSearch}>
+                                        {({ value, onChange }) => (
+                                            <Input
+                                                value={value}
+                                                placeholder="Search templates..."
+                                                onChange={e => onChange(e.target.value)}
+                                                forwardEventOnChange={true}
+                                                startIcon={
+                                                    <Icon icon={<SearchIcon />} label="Search" />
+                                                }
+                                                variant={"ghost"}
+                                            />
+                                        )}
+                                    </DelayedOnChange>
+                                </div>
+                                <Separator />
+                            </div>
+                            <List data-testid={"pb-new-page-dialog-templates-list"}>
+                                {filteredPageTemplates.map(template => (
+                                    <List.Item
+                                        key={template.id}
+                                        title={template.title}
+                                        description={template.description}
+                                        activated={activeTemplate?.id === template.id}
+                                        onClick={() => {
+                                            setActiveTemplate(template);
+                                        }}
+                                    />
+                                ))}
+                            </List>
+                        </div>
+                        <div>
+                            <Separator />
+                            <div className={"wby-py-md wby-px-lg wby-flex"}>
+                                <Button
+                                    variant={"primary"}
+                                    size={"lg"}
+                                    text={"Use a blank page template"}
+                                    disabled={isLoading}
+                                    onClick={() => onSelect()}
+                                    data-testid={"pb-new-page-dialog-use-blank-template-btn"}
+                                    className={"wby-w-full"}
+                                    containerClassName={"wby-w-full"}
+                                />
+                            </div>
+                        </div>
+                    </div>
                 </LeftPanel>
                 <RightPanel span={9} data-testid={"pb-new-page-dialog-template-preview"}>
-                    {activeTemplate && (
-                        <DetailsContainer>
-                            <RenderBlock>
-                                <Elevation z={2}>
-                                    <div style={{ position: "relative" }}>
-                                        <HeaderTitle>
-                                            <PageTemplateTitle>
-                                                <Typography use="headline5">
-                                                    {activeTemplate.title}
-                                                </Typography>
-                                                <Typography use="body2">
-                                                    {activeTemplate.description}
-                                                </Typography>
-                                            </PageTemplateTitle>
-                                            <HeaderActions>
-                                                <ButtonSecondary
-                                                    disabled={isLoading}
-                                                    data-testid={
-                                                        "pb-new-page-dialog-use-template-btn"
-                                                    }
-                                                    onClick={() =>
-                                                        handleCreatePageFromTemplate(activeTemplate)
-                                                    }
-                                                >
-                                                    Use Template
-                                                </ButtonSecondary>
-                                            </HeaderActions>
-                                        </HeaderTitle>
-                                        <PageTemplateContentPreview template={activeTemplate} />
-                                    </div>
-                                </Elevation>
-                            </RenderBlock>
-                        </DetailsContainer>
+                    {activeTemplate ? (
+                        <SimpleForm size={"lg"}>
+                            <SimpleFormHeader title={activeTemplate.title}>
+                                <div className={"wby-flex wby-justify-end"}>
+                                    <Button
+                                        text={"Use Template"}
+                                        disabled={isLoading}
+                                        data-testid={"pb-new-page-dialog-use-template-btn"}
+                                        onClick={() => handleCreatePageFromTemplate(activeTemplate)}
+                                    />
+                                </div>
+                            </SimpleFormHeader>
+                            <SimpleFormContent>
+                                <PageTemplateContentPreview template={activeTemplate} />
+                            </SimpleFormContent>
+                            <SimpleFormFooter>{""}</SimpleFormFooter>
+                        </SimpleForm>
+                    ) : (
+                        <EmptyTemplateDetails />
                     )}
                 </RightPanel>
             </SplitView>
diff --git a/packages/app-page-builder/src/admin/views/Pages/PageTemplatesDialogStyled.tsx b/packages/app-page-builder/src/admin/views/Pages/PageTemplatesDialogStyled.tsx
deleted file mode 100644
index d809546728a..00000000000
--- a/packages/app-page-builder/src/admin/views/Pages/PageTemplatesDialogStyled.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import * as React from "react";
-import { css } from "emotion";
-import styled from "@emotion/styled";
-import { Typography } from "@webiny/ui/Typography";
-
-export const listStyle = css({
-    "&.mdc-deprecated-list": {
-        height: "100%",
-        padding: 0,
-        backgroundColor: "var(--mdc-theme-surface)"
-    }
-});
-
-export const listItem = css({
-    padding: "15px 20px !important",
-    cursor: "pointer",
-    overflow: "visible !important",
-    borderBottom: "1px solid var(--mdc-theme-background)",
-    height: "auto !important",
-    transition: "background 0.3s",
-    "&::before": {
-        display: "none"
-    },
-    "&::after": {
-        display: "none"
-    },
-    "&:last-child": {
-        borderBottom: "none"
-    },
-    ".mdc-deprecated-list-item__graphic": {
-        marginRight: 20
-    }
-});
-
-export const activeListItem = css({
-    background: "var(--mdc-theme-background) !important"
-});
-
-export const IconWrapper = styled("div")({
-    marginRight: 15
-});
-
-export const ListItemTitle = styled("div")({
-    fontWeight: 600,
-    marginBottom: 5
-});
-
-export const Title = (
-    <Typography
-        style={{ margin: "0 auto", color: "var(--mdc-theme-on-surface)" }}
-        use={"headline6"}
-    >
-        Page Settings
-    </Typography>
-);
-
-export const TitleContent = styled("div")({
-    display: "flex",
-    flexDirection: "column"
-});
diff --git a/packages/app-page-builder/src/admin/views/Pages/Table/styled.tsx b/packages/app-page-builder/src/admin/views/Pages/Table/styled.tsx
index 2dd6e9bec80..31acee30b51 100644
--- a/packages/app-page-builder/src/admin/views/Pages/Table/styled.tsx
+++ b/packages/app-page-builder/src/admin/views/Pages/Table/styled.tsx
@@ -21,7 +21,7 @@ export const Wrapper = styled("div")`
 `;
 
 export const SidebarContainer = styled("div")`
-    height: calc(100vh - 64px);
+    height: calc(100vh - 45px);
     padding: 10px 10px 0;
     overflow-y: scroll;
     background: var(--mdc-theme-surface);
diff --git a/packages/app-page-builder/src/editor/assets/icons/redo-icon.svg b/packages/app-page-builder/src/editor/assets/icons/redo-icon.svg
index adeaa9770a2..50226320575 100644
--- a/packages/app-page-builder/src/editor/assets/icons/redo-icon.svg
+++ b/packages/app-page-builder/src/editor/assets/icons/redo-icon.svg
@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="74px" viewBox="-5 -5 85 85" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg width="24px" viewBox="-5 -5 85 85" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
     <title>round-help_outline-24px (1) copy</title>
     <desc>Created with Sketch.</desc>
diff --git a/packages/app-page-builder/src/editor/assets/icons/undo-icon.svg b/packages/app-page-builder/src/editor/assets/icons/undo-icon.svg
index f040968a49e..869b859165b 100644
--- a/packages/app-page-builder/src/editor/assets/icons/undo-icon.svg
+++ b/packages/app-page-builder/src/editor/assets/icons/undo-icon.svg
@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="74px" viewBox="-5 -5 85 85" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg width="24px" viewBox="-5 -5 85 85" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
     <title>round-help_outline-24px (1)</title>
     <desc>Created with Sketch.</desc>
diff --git a/packages/app-page-builder/src/editor/components/Editor/DragPreview.tsx b/packages/app-page-builder/src/editor/components/Editor/DragPreview.tsx
index 60314e930ee..feee8343bab 100644
--- a/packages/app-page-builder/src/editor/components/Editor/DragPreview.tsx
+++ b/packages/app-page-builder/src/editor/components/Editor/DragPreview.tsx
@@ -1,16 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { DragLayerMonitor, useDragLayer } from "react-dnd";
 
-const layerStyles: React.CSSProperties = {
-    position: "fixed",
-    pointerEvents: "none",
-    zIndex: 100,
-    left: 0,
-    top: 0,
-    width: "100%",
-    height: "100%"
-};
-
 let subscribedToOffsetChange = false;
 let dragPreviewRef: HTMLDivElement | null = null;
 
@@ -79,23 +69,16 @@ const DragPreview = () => {
     }
 
     return (
-        <div style={layerStyles}>
+        <div
+            style={{ zIndex: 1001 }}
+            className="wby-fixed wby-pointer-events-none wby-left-0 wby-top-0 wby-w-full wby-h-full"
+        >
             <div
                 ref={el => (dragPreviewRef = el)}
-                style={{
-                    display: "block",
-                    opacity: dragHelperOpacity,
-                    transition: "opacity .25s ease-in-out"
-                }}
+                className="wby-transition-opacity wby-duration-250 wby-ease-in-out wby-block"
+                style={{ opacity: dragHelperOpacity }}
             >
-                <div
-                    style={{
-                        width: 30,
-                        height: 30,
-                        backgroundColor: "var(--mdc-theme-primary)",
-                        borderRadius: "50%"
-                    }}
-                />
+                <div className="wby-size-lg wby-rounded-full wby-bg-primary-default" />
             </div>
         </div>
     );
diff --git a/packages/app-page-builder/src/editor/components/Editor/Editor.tsx b/packages/app-page-builder/src/editor/components/Editor/Editor.tsx
index 791881afdec..4b33feb7d22 100644
--- a/packages/app-page-builder/src/editor/components/Editor/Editor.tsx
+++ b/packages/app-page-builder/src/editor/components/Editor/Editor.tsx
@@ -79,7 +79,7 @@ export const Editor = () => {
         "pb-editor-resizing": isResizing
     };
     return (
-        <div className={classSet(classes)}>
+        <div className={classSet("wby-w-full", classes)}>
             <EditorConfig.Ui.Layout />
             <Dialogs />
             <DragPreview />
diff --git a/packages/app-page-builder/src/editor/config/Toolbar/Drawers/Drawer.tsx b/packages/app-page-builder/src/editor/config/Toolbar/Drawers/Drawer.tsx
index 88f19838251..45c32334d3a 100644
--- a/packages/app-page-builder/src/editor/config/Toolbar/Drawers/Drawer.tsx
+++ b/packages/app-page-builder/src/editor/config/Toolbar/Drawers/Drawer.tsx
@@ -20,7 +20,7 @@ const drawerStyle = css({
         marginLeft: 54,
         position: "fixed",
         top: 64,
-        height: "calc(100vh - 64px)",
+        height: "calc(100vh - 45px)",
         width: "280px !important",
         maxWidth: "280px !important",
         ".mdc-drawer__content": {
diff --git a/packages/app-page-builder/src/editor/contexts/EditorPageElementsProvider/ElementControlHorizontalDropZones.tsx b/packages/app-page-builder/src/editor/contexts/EditorPageElementsProvider/ElementControlHorizontalDropZones.tsx
index 48473ed9987..81a840e0f8c 100644
--- a/packages/app-page-builder/src/editor/contexts/EditorPageElementsProvider/ElementControlHorizontalDropZones.tsx
+++ b/packages/app-page-builder/src/editor/contexts/EditorPageElementsProvider/ElementControlHorizontalDropZones.tsx
@@ -89,8 +89,6 @@ export const ElementControlHorizontalDropZones = () => {
     const { showSnackbar } = useSnackbar();
     const parentType = meta.parentElement.type;
 
-    const { type } = element;
-
     const canDrop = (item: DragObjectWithTypeWithTarget) => {
         if (!item) {
             return false;
@@ -129,7 +127,7 @@ export const ElementControlHorizontalDropZones = () => {
         );
     };
 
-    if (!isDragging) {
+    if (!isDragging || !element) {
         return null;
     }
 
@@ -142,7 +140,7 @@ export const ElementControlHorizontalDropZones = () => {
             <Droppable
                 isVisible={({ item }) => canDrop(item)}
                 onDrop={source => dropElementAction(source, meta.elementIndex)}
-                type={type}
+                type={element.type}
             >
                 {({ drop, isOver }) => (
                     <WrapperDroppable ref={drop} below={false} zIndex={zIndex}>
@@ -156,7 +154,7 @@ export const ElementControlHorizontalDropZones = () => {
                 <Droppable
                     isVisible={({ item }) => canDrop(item)}
                     onDrop={source => dropElementAction(source, meta.elementIndex + 1)}
-                    type={type}
+                    type={element.type}
                 >
                     {({ drop, isOver }) => (
                         <WrapperDroppable ref={drop} below zIndex={zIndex}>
diff --git a/packages/app-page-builder/src/editor/contexts/EditorPageElementsProvider/ElementControlsOverlay.tsx b/packages/app-page-builder/src/editor/contexts/EditorPageElementsProvider/ElementControlsOverlay.tsx
index 8c34e3d2f5b..c6d531b994a 100644
--- a/packages/app-page-builder/src/editor/contexts/EditorPageElementsProvider/ElementControlsOverlay.tsx
+++ b/packages/app-page-builder/src/editor/contexts/EditorPageElementsProvider/ElementControlsOverlay.tsx
@@ -267,7 +267,9 @@ export const ElementControlsOverlay = (props: Props) => {
             return "block | unknown";
         }
 
-        return getElementTitle(element.type, element.id);
+        const suffix = process.env.REACT_APP_DEBUG ? element.id : "";
+
+        return getElementTitle(element.type, suffix);
     }, [element.data.blockId]);
 
     // Z-index of element controls overlay depends on the depth of the page element.
diff --git a/packages/app-page-builder/src/editor/defaultConfig/DefaultEditorConfig.tsx b/packages/app-page-builder/src/editor/defaultConfig/DefaultEditorConfig.tsx
index 65f84772391..be4437c5534 100644
--- a/packages/app-page-builder/src/editor/defaultConfig/DefaultEditorConfig.tsx
+++ b/packages/app-page-builder/src/editor/defaultConfig/DefaultEditorConfig.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { ReactComponent as TouchIcon } from "@material-design-icons/svg/round/touch_app.svg";
+import { ReactComponent as TouchIcon } from "@webiny/icons/touch_app.svg";
 import { DisplayModeSelector } from "./TopBar/DisplayModeSelector";
 import { Breadcrumbs } from "./Content/Breadcrumbs";
 import { Background } from "./Content/Background";
diff --git a/packages/app-page-builder/src/editor/defaultConfig/Toolbar/AddElement/AddElementDrawer.tsx b/packages/app-page-builder/src/editor/defaultConfig/Toolbar/AddElement/AddElementDrawer.tsx
index 7384bb028d8..a3834fd6bf8 100644
--- a/packages/app-page-builder/src/editor/defaultConfig/Toolbar/AddElement/AddElementDrawer.tsx
+++ b/packages/app-page-builder/src/editor/defaultConfig/Toolbar/AddElement/AddElementDrawer.tsx
@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { css } from "emotion";
 import isEqual from "lodash/isEqual";
-import { ReactComponent as AddIcon } from "@material-design-icons/svg/round/add.svg";
+import { ReactComponent as AddIcon } from "@webiny/icons/add.svg";
 import { Typography } from "@webiny/ui/Typography";
 import { useSnackbar } from "@webiny/app-admin";
 import { ButtonFloating } from "@webiny/ui/Button";
diff --git a/packages/app-page-builder/src/editor/defaultConfig/Toolbar/Navigator/index.tsx b/packages/app-page-builder/src/editor/defaultConfig/Toolbar/Navigator/index.tsx
index 6742141a913..ddde7a2705d 100644
--- a/packages/app-page-builder/src/editor/defaultConfig/Toolbar/Navigator/index.tsx
+++ b/packages/app-page-builder/src/editor/defaultConfig/Toolbar/Navigator/index.tsx
@@ -10,7 +10,7 @@ const drawerClassName = css({
         maxWidth: "280px !important"
     },
     "&.mdc-drawer": {
-        height: "calc(100% - 64px)"
+        height: "calc(100% - 45px)"
     }
 });
 
diff --git a/packages/app-page-builder/src/editor/defaultConfig/TopBar/DropdownActions/PageOptionsDropdown.tsx b/packages/app-page-builder/src/editor/defaultConfig/TopBar/DropdownActions/PageOptionsDropdown.tsx
index d6f4c6c8a79..41c0ed1a21f 100644
--- a/packages/app-page-builder/src/editor/defaultConfig/TopBar/DropdownActions/PageOptionsDropdown.tsx
+++ b/packages/app-page-builder/src/editor/defaultConfig/TopBar/DropdownActions/PageOptionsDropdown.tsx
@@ -2,7 +2,7 @@ import React, { Fragment } from "react";
 import { css } from "emotion";
 import { Menu } from "@webiny/ui/Menu";
 import { IconButton } from "@webiny/ui/Button";
-import { ReactComponent as MoreVerticalIcon } from "@material-design-icons/svg/round/more_vert.svg";
+import { ReactComponent as MoreVerticalIcon } from "@webiny/icons/more_vert.svg";
 import { TopBar } from "~/editor/config/TopBar/TopBar";
 import { useEditorConfig } from "~/editor/config";
 
diff --git a/packages/app-page-builder/src/editor/plugins/defaultBar/components/ExportBlockButton/ExportBlockLoadingDialogContent.tsx b/packages/app-page-builder/src/editor/plugins/defaultBar/components/ExportBlockButton/ExportBlockLoadingDialogContent.tsx
index c126af480b4..f32559ba0ff 100644
--- a/packages/app-page-builder/src/editor/plugins/defaultBar/components/ExportBlockButton/ExportBlockLoadingDialogContent.tsx
+++ b/packages/app-page-builder/src/editor/plugins/defaultBar/components/ExportBlockButton/ExportBlockLoadingDialogContent.tsx
@@ -1,8 +1,10 @@
 import React, { useCallback, useEffect, useState } from "react";
 import { useQuery } from "@apollo/react-hooks";
 import { useSnackbar } from "@webiny/app-admin/hooks/useSnackbar";
-import { Typography } from "@webiny/ui/Typography";
 import { i18n } from "@webiny/app/i18n";
+import { Icon, Text } from "@webiny/admin-ui";
+import { ReactComponent as SuccessIcon } from "@webiny/icons/check_circle_outline.svg";
+import { ReactComponent as ErrorIcon } from "@webiny/icons/error_outline.svg";
 import {
     GET_BLOCK_IMPORT_EXPORT_TASK,
     GetBlockImportExportTaskResponse
@@ -87,42 +89,48 @@ const ExportBlockLoadingDialogContent = ({ taskId }: ExportBlockLoadingDialogCon
             <LoadingDialog.WrapperRight>
                 {error ? (
                     <LoadingDialog.TitleContainer>
-                        <LoadingDialog.CancelIcon />
-                        <Typography use={"subtitle1"}>{errorMessage}</Typography>
+                        <Icon
+                            icon={<ErrorIcon />}
+                            label="Error"
+                            size={"md"}
+                            className={"wby-fill-danger wby-mr-sm"}
+                        />
+                        <Text size={"md"}>{errorMessage}</Text>
                     </LoadingDialog.TitleContainer>
                 ) : status === ImportExportTaskStatus.COMPLETED ? (
                     <LoadingDialog.TitleContainer>
-                        <LoadingDialog.CheckMarkIcon />
-                        <Typography use={"subtitle1"}>{MESSAGES[status]}</Typography>
+                        <Icon
+                            icon={<SuccessIcon />}
+                            label="Success"
+                            size={"md"}
+                            className={"wby-fill-success wby-mr-sm"}
+                        />
+                        <Text size={"md"}>{MESSAGES[status]}</Text>
                     </LoadingDialog.TitleContainer>
                 ) : (
                     <LoadingDialog.TitleContainer>
                         <LoadingDialog.Pulse>
                             <div className="inner" />
                         </LoadingDialog.Pulse>
-                        <Typography use={"subtitle1"}>{MESSAGES[status]}</Typography>
+                        <Text size={"md"}>{MESSAGES[status]}</Text>
                     </LoadingDialog.TitleContainer>
                 )}
 
                 <LoadingDialog.StatsContainer>
                     {error && (
                         <LoadingDialog.StatusContainer>
-                            <LoadingDialog.StatusTitle use={"body2"}>
-                                {t`Error`}
-                            </LoadingDialog.StatusTitle>
-                            <LoadingDialog.StatusBody use={"body2"}>
-                                {error.message}
-                            </LoadingDialog.StatusBody>
+                            <Text size={"md"}>{t`Error`}</Text>
+                            <Text size={"sm"}>{error.message}</Text>
                         </LoadingDialog.StatusContainer>
                     )}
                     {stats && (
                         <LoadingDialog.ProgressContainer>
-                            <LoadingDialog.StatusTitle use={"body2"}>
+                            <Text size={"sm"}>
                                 {t`{completed} of {total} completed`({
                                     completed: `${stats.completed}`,
                                     total: `${stats.total}`
                                 })}
-                            </LoadingDialog.StatusTitle>
+                            </Text>
                             <ProgressBar
                                 value={stats.completed}
                                 max={stats.total}
diff --git a/packages/app-page-builder/src/editor/plugins/defaultBar/components/ExportBlockButton/useExportBlockDialog.tsx b/packages/app-page-builder/src/editor/plugins/defaultBar/components/ExportBlockButton/useExportBlockDialog.tsx
index 1aa35a3affb..917a02c304b 100644
--- a/packages/app-page-builder/src/editor/plugins/defaultBar/components/ExportBlockButton/useExportBlockDialog.tsx
+++ b/packages/app-page-builder/src/editor/plugins/defaultBar/components/ExportBlockButton/useExportBlockDialog.tsx
@@ -1,46 +1,14 @@
 import React, { useEffect } from "react";
-import { css } from "emotion";
 import { i18n } from "@webiny/app/i18n";
 import { useDialog } from "@webiny/app-admin/hooks/useDialog";
-import { ButtonIcon, ButtonSecondary, CopyButton } from "@webiny/ui/Button";
-import { Typography } from "@webiny/ui/Typography";
-import { Cell, Grid } from "@webiny/ui/Grid";
+import { CopyButton, Button, Text, OverlayLoader, Grid, Heading, Tooltip } from "@webiny/admin-ui";
+import { ReactComponent as FileDownloadIcon } from "@webiny/icons/file_download.svg";
 import { useSnackbar } from "@webiny/app-admin/hooks/useSnackbar";
-import { CircularProgress } from "@webiny/ui/Progress";
-import { ReactComponent as FileDownloadIcon } from "~/editor/assets/icons/file_download_black_24dp.svg";
 import ExportBlockLoadingDialogContent from "./ExportBlockLoadingDialogContent";
 import useExportBlock from "./useExportBlock";
 
 const t = i18n.ns("app-page-builder/editor/plugins/defaultBar/exportBlockButton");
 
-const confirmationMessageStyles = css`
-    width: 600px;
-`;
-
-const linkWrapper = css`
-    display: flex;
-    background-color: var(--mdc-theme-background);
-
-    & .link-text {
-        padding: 8px 0 8px 16px;
-        width: 100%;
-        overflow: hidden;
-    }
-`;
-
-const gridClass = css`
-    &.mdc-layout-grid {
-        padding-top: 0;
-        padding-bottom: 0;
-    }
-`;
-
-const spinnerWrapper = css`
-    position: relative;
-    width: 100%;
-    height: 180px;
-`;
-
 interface ExportBlockLoadingDialogProps {
     ids?: string[];
     where?: Record<string, any>;
@@ -54,10 +22,8 @@ const ExportBlockLoadingDialogMessage = (props: ExportBlockLoadingDialogProps) =
     }, []);
 
     return (
-        <div className={confirmationMessageStyles}>
-            <div className={spinnerWrapper}>
-                <CircularProgress label={t`Preparing your export...`} />
-            </div>
+        <div className={"wby-relative wby-h-[180px]"}>
+            <OverlayLoader text={t`Preparing your export...`} />
         </div>
     );
 };
@@ -70,45 +36,52 @@ const ExportBlockDialogMessage = ({ exportUrl }: ExportBlockDialogProps) => {
     const { showSnackbar } = useSnackbar();
 
     return (
-        <div className={confirmationMessageStyles}>
-            <Grid style={{ paddingTop: 0 }}>
-                <Cell span={12}>
-                    <Typography use={"subtitle1"}>{t`Copy the export URL:`}</Typography>
-                </Cell>
-                <Cell span={12}>
-                    <div className={linkWrapper}>
-                        <Typography
-                            use={"body2"}
-                            className={"link-text"}
-                            data-testid={"pb-blocks-export-dialog-export-url"}
-                        >
+        <div className={"wby-pb-lg"}>
+            <Grid>
+                <Grid.Column span={12}>
+                    <Heading level={6} className={"wby-mb-md"}>{t`Copy the export URL:`}</Heading>
+                    <div
+                        className={
+                            "wby-rounded-lg wby-bg-neutral-dimmed wby-p-sm wby-overflow-hidden wby-relative"
+                        }
+                    >
+                        <Text size={"sm"} data-testid={"pb-blocks-export-dialog-export-url"}>
                             {exportUrl}
-                        </Typography>
-                        <span>
-                            <CopyButton
-                                data-testid={"export-blocks.export-ready-dialog.copy-button"}
-                                value={exportUrl}
-                                onCopy={() => showSnackbar("Successfully copied!")}
+                        </Text>
+                        <span className={"wby-absolute wby-top-0 wby-right-0"}>
+                            <Tooltip
+                                trigger={
+                                    <CopyButton
+                                        variant={"ghost"}
+                                        data-testid={
+                                            "export-blocks.export-ready-dialog.copy-button"
+                                        }
+                                        value={exportUrl}
+                                        onCopy={() => showSnackbar("Successfully copied!")}
+                                    />
+                                }
+                                content={"Copy the export URL"}
                             />
                         </span>
                     </div>
-                </Cell>
+                </Grid.Column>
             </Grid>
-            <Grid className={gridClass}>
-                <Cell span={12}>
-                    <Typography use={"subtitle1"}>{t`Or download the ZIP archive:`}</Typography>
-                </Cell>
-                <Cell span={12}>
-                    <ButtonSecondary
+            <Grid className={"wby-mt-lg"}>
+                <Grid.Column span={12}>
+                    <Heading
+                        level={6}
+                        className={"wby-mb-md"}
+                    >{t`Or download the ZIP archive:`}</Heading>
+                    <Button
+                        variant={"primary"}
+                        text={"Download"}
+                        icon={<FileDownloadIcon />}
                         onClick={() => {
                             // Download the ZIP
                             window.open(exportUrl, "_blank", "noopener");
                         }}
-                    >
-                        <ButtonIcon icon={<FileDownloadIcon />} />
-                        Download
-                    </ButtonSecondary>
-                </Cell>
+                    />
+                </Grid.Column>
             </Grid>
         </div>
     );
@@ -128,27 +101,21 @@ const useExportBlockDialog = (): UseExportBlockDialog => {
         showExportBlockContentDialog: props => {
             showDialog(<ExportBlockDialogMessage {...props} />, {
                 title: t`Your export is now ready!`,
-                actions: {
-                    cancel: { label: t`Close` }
-                },
+                actions: {},
                 dataTestId: "export-blocks.export-ready-dialog"
             });
         },
         showExportBlockLoadingDialog: taskId => {
             showDialog(<ExportBlockLoadingDialogContent taskId={taskId} />, {
                 title: t`Preparing your export...`,
-                actions: {
-                    cancel: { label: t`Cancel` }
-                },
+                actions: {},
                 dataTestId: "export-blocks.loading-dialog"
             });
         },
         showExportBlockInitializeDialog: props => {
             showDialog(<ExportBlockLoadingDialogMessage {...props} />, {
                 title: t`Preparing your export...`,
-                actions: {
-                    cancel: { label: t`Cancel` }
-                },
+                actions: {},
                 dataTestId: "export-blocks.initial-dialog"
             });
         },
diff --git a/packages/app-page-builder/src/editor/plugins/defaultBar/components/ExportPageButton/ExportPageLoadingDialogContent.tsx b/packages/app-page-builder/src/editor/plugins/defaultBar/components/ExportPageButton/ExportPageLoadingDialogContent.tsx
index c968ccc8ac2..6f82ee7f5e1 100644
--- a/packages/app-page-builder/src/editor/plugins/defaultBar/components/ExportPageButton/ExportPageLoadingDialogContent.tsx
+++ b/packages/app-page-builder/src/editor/plugins/defaultBar/components/ExportPageButton/ExportPageLoadingDialogContent.tsx
@@ -6,8 +6,10 @@ import {
     GetPageExportTaskResponse,
     GetPageExportTaskVariables
 } from "~/admin/graphql/pageImportExport.gql";
-import { Typography } from "@webiny/ui/Typography";
 import { i18n } from "@webiny/app/i18n";
+import { Icon, Text } from "@webiny/admin-ui";
+import { ReactComponent as SuccessIcon } from "@webiny/icons/check_circle_outline.svg";
+import { ReactComponent as ErrorIcon } from "@webiny/icons/error_outline.svg";
 import { LoadingDialog } from "../ImportButton/styledComponents";
 import ProgressBar from "../ImportButton/ProgressBar";
 import useExportPageDialog from "./useExportPageDialog";
@@ -99,42 +101,48 @@ const ExportPageLoadingDialogContent = ({ taskId }: ExportPageLoadingDialogConte
             <LoadingDialog.WrapperRight>
                 {error ? (
                     <LoadingDialog.TitleContainer>
-                        <LoadingDialog.CancelIcon />
-                        <Typography use={"subtitle1"}>{errorMessage}</Typography>
+                        <Icon
+                            icon={<ErrorIcon />}
+                            label="Error"
+                            size={"md"}
+                            className={"wby-fill-danger wby-mr-sm"}
+                        />
+                        <Text size={"md"}>{errorMessage}</Text>
                     </LoadingDialog.TitleContainer>
                 ) : status === PbTaskStatus.success ? (
                     <LoadingDialog.TitleContainer>
-                        <LoadingDialog.CheckMarkIcon />
-                        <Typography use={"subtitle1"}>{MESSAGES[status]}</Typography>
+                        <Icon
+                            icon={<SuccessIcon />}
+                            label="Success"
+                            size={"md"}
+                            className={"wby-fill-success wby-mr-sm"}
+                        />
+                        <Text size={"md"}>{MESSAGES[status]}</Text>
                     </LoadingDialog.TitleContainer>
                 ) : (
                     <LoadingDialog.TitleContainer>
                         <LoadingDialog.Pulse>
                             <div className="inner" />
                         </LoadingDialog.Pulse>
-                        <Typography use={"subtitle1"}>{MESSAGES[status]}</Typography>
+                        <Text size={"md"}>{MESSAGES[status]}</Text>
                     </LoadingDialog.TitleContainer>
                 )}
 
                 <LoadingDialog.StatsContainer>
                     {error && (
                         <LoadingDialog.StatusContainer>
-                            <LoadingDialog.StatusTitle use={"body2"}>
-                                {t`Error`}
-                            </LoadingDialog.StatusTitle>
-                            <LoadingDialog.StatusBody use={"body2"}>
-                                {error.message}
-                            </LoadingDialog.StatusBody>
+                            <Text size={"md"}>{t`Error`}</Text>
+                            <Text size={"sm"}> {error.message}</Text>
                         </LoadingDialog.StatusContainer>
                     )}
                     {stats && (
                         <LoadingDialog.ProgressContainer>
-                            <LoadingDialog.StatusTitle use={"body2"}>
+                            <Text size={"sm"}>
                                 {t`{completed} of {total} completed`({
                                     completed: `${stats.completed}`,
                                     total: `${stats.total}`
                                 })}
-                            </LoadingDialog.StatusTitle>
+                            </Text>
                             <ProgressBar
                                 value={stats.completed}
                                 max={stats.total}
diff --git a/packages/app-page-builder/src/editor/plugins/defaultBar/components/ExportPageButton/useExportPageDialog.tsx b/packages/app-page-builder/src/editor/plugins/defaultBar/components/ExportPageButton/useExportPageDialog.tsx
index a6379304843..4e848dccefc 100644
--- a/packages/app-page-builder/src/editor/plugins/defaultBar/components/ExportPageButton/useExportPageDialog.tsx
+++ b/packages/app-page-builder/src/editor/plugins/defaultBar/components/ExportPageButton/useExportPageDialog.tsx
@@ -1,49 +1,16 @@
 import React, { useEffect } from "react";
-import { css } from "emotion";
 import { i18n } from "@webiny/app/i18n";
+import { CopyButton, Button, Text, OverlayLoader, Grid, Heading, Tooltip } from "@webiny/admin-ui";
+import { ReactComponent as FileDownloadIcon } from "@webiny/icons/file_download.svg";
 import { useDialog } from "@webiny/app-admin/hooks/useDialog";
-import { ButtonIcon, ButtonSecondary, CopyButton } from "@webiny/ui/Button";
-import { Typography } from "@webiny/ui/Typography";
-import { Cell, Grid } from "@webiny/ui/Grid";
 import { useSnackbar } from "@webiny/app-admin/hooks/useSnackbar";
-import { CircularProgress } from "@webiny/ui/Progress";
-
 import { usePageBuilder } from "~/hooks/usePageBuilder";
-import { ReactComponent as FileDownloadIcon } from "~/editor/assets/icons/file_download_black_24dp.svg";
 import ExportPageLoadingDialogContent from "./ExportPageLoadingDialogContent";
 import useExportPage from "./useExportPage";
 import { PbListPagesWhereInput } from "~/admin/graphql/types";
 
 const t = i18n.ns("app-page-builder/editor/plugins/defaultBar/exportPageButton");
 
-const confirmationMessageStyles = css`
-    width: 600px;
-`;
-
-const linkWrapper = css`
-    display: flex;
-    background-color: var(--mdc-theme-background);
-
-    & .link-text {
-        padding: 8px 0 8px 16px;
-        width: 100%;
-        overflow: hidden;
-    }
-`;
-
-const gridClass = css`
-    &.mdc-layout-grid {
-        padding-top: 0;
-        padding-bottom: 0;
-    }
-`;
-
-const spinnerWrapper = css`
-    position: relative;
-    width: 100%;
-    height: 180px;
-`;
-
 const createWhere = (where?: PbListPagesWhereInput, ids?: string[]) => {
     if (!ids?.length) {
         return where;
@@ -81,10 +48,8 @@ const ExportPageLoadingDialogMessage = (props: ExportPagesDialogProps) => {
     }, []);
 
     return (
-        <div className={confirmationMessageStyles}>
-            <div className={spinnerWrapper}>
-                <CircularProgress label={t`Preparing your export...`} />
-            </div>
+        <div className={"wby-relative wby-h-[180px]"}>
+            <OverlayLoader text={t`Preparing your export...`} />
         </div>
     );
 };
@@ -97,45 +62,50 @@ const ExportPageDialogMessage = ({ exportUrl }: ExportPageDialogProps) => {
     const { showSnackbar } = useSnackbar();
 
     return (
-        <div className={confirmationMessageStyles}>
-            <Grid style={{ paddingTop: 0 }}>
-                <Cell span={12}>
-                    <Typography use={"subtitle1"}>{t`Copy the export URL:`}</Typography>
-                </Cell>
-                <Cell span={12}>
-                    <div className={linkWrapper}>
-                        <Typography
-                            use={"body2"}
-                            className={"link-text"}
-                            data-testid={"pb-pages-export-dialog-export-url"}
-                        >
+        <div className={"wby-pb-lg"}>
+            <Grid>
+                <Grid.Column span={12}>
+                    <Heading level={6} className={"wby-mb-md"}>{t`Copy the export URL:`}</Heading>
+                    <div
+                        className={
+                            "wby-rounded-lg wby-bg-neutral-dimmed wby-p-sm wby-overflow-hidden wby-relative"
+                        }
+                    >
+                        <Text size={"sm"} data-testid={"pb-pages-export-dialog-export-url"}>
                             {exportUrl}
-                        </Typography>
-                        <span>
-                            <CopyButton
-                                data-testid={"export-pages.export-ready-dialog.copy-button"}
-                                value={exportUrl}
-                                onCopy={() => showSnackbar("Successfully copied!")}
+                        </Text>
+                        <span className={"wby-absolute wby-top-0 wby-right-0"}>
+                            <Tooltip
+                                trigger={
+                                    <CopyButton
+                                        variant={"ghost"}
+                                        data-testid={"export-pages.export-ready-dialog.copy-button"}
+                                        value={exportUrl}
+                                        onCopy={() => showSnackbar("Successfully copied!")}
+                                    />
+                                }
+                                content={"Copy the export URL"}
                             />
                         </span>
                     </div>
-                </Cell>
+                </Grid.Column>
             </Grid>
-            <Grid className={gridClass}>
-                <Cell span={12}>
-                    <Typography use={"subtitle1"}>{t`Or download the ZIP archive:`}</Typography>
-                </Cell>
-                <Cell span={12}>
-                    <ButtonSecondary
+            <Grid className={"wby-mt-lg"}>
+                <Grid.Column span={12}>
+                    <Heading
+                        level={6}
+                        className={"wby-mb-md"}
+                    >{t`Or download the ZIP archive:`}</Heading>
+                    <Button
+                        variant={"primary"}
+                        text={"Download"}
+                        icon={<FileDownloadIcon />}
                         onClick={() => {
                             // Download the ZIP
                             window.open(exportUrl, "_blank", "noopener");
                         }}
-                    >
-                        <ButtonIcon icon={<FileDownloadIcon />} />
-                        Download
-                    </ButtonSecondary>
-                </Cell>
+                    />
+                </Grid.Column>
             </Grid>
         </div>
     );
@@ -155,27 +125,21 @@ const useExportPageDialog = (): UseExportPageDialog => {
         showExportPageContentDialog: props => {
             showDialog(<ExportPageDialogMessage {...props} />, {
                 title: t`Your export is now ready!`,
-                actions: {
-                    cancel: { label: t`Close` }
-                },
+                actions: {},
                 dataTestId: "export-pages.export-ready-dialog"
             });
         },
         showExportPageLoadingDialog: taskId => {
             showDialog(<ExportPageLoadingDialogContent taskId={taskId} />, {
                 title: t`Preparing your export...`,
-                actions: {
-                    cancel: { label: t`Cancel` }
-                },
+                actions: {},
                 dataTestId: "export-pages.loading-dialog"
             });
         },
         showExportPageInitializeDialog: props => {
             showDialog(<ExportPageLoadingDialogMessage {...props} />, {
                 title: t`Preparing your export...`,
-                actions: {
-                    cancel: { label: t`Cancel` }
-                },
+                actions: {},
                 dataTestId: "export-pages.initial-dialog"
             });
         },
diff --git a/packages/app-page-builder/src/editor/plugins/defaultBar/components/ExportPageButton/useExportPageRevisionSelectorDialog.tsx b/packages/app-page-builder/src/editor/plugins/defaultBar/components/ExportPageButton/useExportPageRevisionSelectorDialog.tsx
index 9ba36876ac6..8ff9130449e 100644
--- a/packages/app-page-builder/src/editor/plugins/defaultBar/components/ExportPageButton/useExportPageRevisionSelectorDialog.tsx
+++ b/packages/app-page-builder/src/editor/plugins/defaultBar/components/ExportPageButton/useExportPageRevisionSelectorDialog.tsx
@@ -1,27 +1,14 @@
 import React from "react";
-import { css } from "emotion";
+import { Alert, Grid, RadioGroup, Text } from "@webiny/admin-ui";
 import { i18n } from "@webiny/app/i18n";
 import { useDialog } from "@webiny/app-admin/hooks/useDialog";
-import { Typography } from "@webiny/ui/Typography";
-import { Cell, Grid } from "@webiny/ui/Grid";
-import { Radio, RadioGroup } from "@webiny/ui/Radio";
 import { Form } from "@webiny/form";
-import { Alert } from "@webiny/ui/Alert";
 import { usePageBuilder } from "~/hooks/usePageBuilder";
 import { PbElementDataSettingsFormType } from "~/types";
 import { PbRevisionType } from "~/contexts/PageBuilder";
 
 const t = i18n.ns("app-page-builder/editor/plugins/defaultBar/exportPageButton");
 
-const confirmationMessageStyles = css`
-    width: 600px;
-`;
-
-const gridStyles = css`
-    &.mdc-layout-grid {
-        padding-top: 0;
-    }
-`;
 interface ExportPageDialogMessageProps {
     selected: string[];
 }
@@ -31,14 +18,14 @@ const ExportPageDialogMessage = ({ selected }: ExportPageDialogMessageProps) =>
     const { revisionType: value, setRevisionType: setValue } = exportPageData;
 
     return (
-        <div className={confirmationMessageStyles}>
-            <Grid className={gridStyles}>
-                <Cell span={12}>
-                    <Typography
-                        use={"subtitle1"}
-                    >{t`Choose which revision of the page(s) you want to export:`}</Typography>
-                </Cell>
-                <Cell span={12}>
+        <>
+            <Grid>
+                <Grid.Column span={12}>
+                    <Text
+                        size={"md"}
+                    >{t`Choose which revision of the page(s) you want to export:`}</Text>
+                </Grid.Column>
+                <Grid.Column span={12}>
                     <Form
                         data={{ revision: value }}
                         onChange={data => {
@@ -53,44 +40,32 @@ const ExportPageDialogMessage = ({ selected }: ExportPageDialogMessageProps) =>
                             <Bind name="revision">
                                 <RadioGroup
                                     label="Revision selection"
-                                    description={
+                                    note={
                                         "Note: If there is no published revision of a page the latest revision will be exported."
                                     }
-                                >
-                                    {({ onChange, getValue }) => (
-                                        <React.Fragment>
-                                            {[
-                                                { id: "published", name: "Published" },
-                                                {
-                                                    id: "latest",
-                                                    name: "Latest"
-                                                }
-                                            ].map(({ id, name }) => (
-                                                <Radio
-                                                    key={id}
-                                                    label={name}
-                                                    value={getValue(id)}
-                                                    onChange={onChange(id)}
-                                                />
-                                            ))}
-                                        </React.Fragment>
-                                    )}
-                                </RadioGroup>
+                                    items={[
+                                        { value: "published", label: "Published" },
+                                        {
+                                            value: "latest",
+                                            label: "Latest"
+                                        }
+                                    ]}
+                                />
                             </Bind>
                         )}
                     </Form>
-                </Cell>
+                </Grid.Column>
+                <>
+                    {selected.length === 0 && (
+                        <Grid.Column span={12}>
+                            <Alert title={t`Note`} type={"info"}>
+                                {t`You're about to export all pages. This operation might take a few minutes to complete.`}
+                            </Alert>
+                        </Grid.Column>
+                    )}
+                </>
             </Grid>
-            {selected.length === 0 && (
-                <Grid className={gridStyles}>
-                    <Cell span={12}>
-                        <Alert title={t`Note:`} type={"info"}>
-                            {t`You're about to export all pages. This operation might take a few minutes to complete.`}
-                        </Alert>
-                    </Cell>
-                </Grid>
-            )}
-        </div>
+        </>
     );
 };
 
@@ -98,19 +73,21 @@ interface UseExportPageRevisionSelectorDialogShowParams {
     onAccept: () => void;
     selected: string[];
 }
+
 interface UseExportPageRevisionSelectorDialog {
     showExportPageRevisionSelectorDialog: (
         params: UseExportPageRevisionSelectorDialogShowParams
     ) => void;
     hideDialog: () => void;
 }
+
 const useExportPageRevisionSelectorDialog = (): UseExportPageRevisionSelectorDialog => {
     const { showDialog, hideDialog } = useDialog();
 
     return {
         showExportPageRevisionSelectorDialog: ({ onAccept, selected }) => {
             showDialog(<ExportPageDialogMessage selected={selected} />, {
-                title: t`Select Page Revision`,
+                title: t`Select page revision`,
                 actions: {
                     cancel: { label: t`Cancel` },
                     accept: {
diff --git a/packages/app-page-builder/src/editor/plugins/defaultBar/components/ExportTemplateButton/ExportTemplateLoadingDialogContent.tsx b/packages/app-page-builder/src/editor/plugins/defaultBar/components/ExportTemplateButton/ExportTemplateLoadingDialogContent.tsx
index 00a22c0e7d1..5443902b195 100644
--- a/packages/app-page-builder/src/editor/plugins/defaultBar/components/ExportTemplateButton/ExportTemplateLoadingDialogContent.tsx
+++ b/packages/app-page-builder/src/editor/plugins/defaultBar/components/ExportTemplateButton/ExportTemplateLoadingDialogContent.tsx
@@ -5,7 +5,9 @@ import {
     GET_TEMPLATE_IMPORT_EXPORT_TASK,
     GetTemplateImportExportTaskResponse
 } from "~/admin/graphql/templateImportExport.gql";
-import { Typography } from "@webiny/ui/Typography";
+import { Icon, Text } from "@webiny/admin-ui";
+import { ReactComponent as SuccessIcon } from "@webiny/icons/check_circle_outline.svg";
+import { ReactComponent as ErrorIcon } from "@webiny/icons/error_outline.svg";
 import { i18n } from "@webiny/app/i18n";
 import { LoadingDialog } from "../ImportButton/styledComponents";
 import ProgressBar from "../ImportButton/ProgressBar";
@@ -95,42 +97,48 @@ const ExportTemplateLoadingDialogContent = ({ taskId }: ExportTemplateLoadingDia
             <LoadingDialog.WrapperRight>
                 {error ? (
                     <LoadingDialog.TitleContainer>
-                        <LoadingDialog.CancelIcon />
-                        <Typography use={"subtitle1"}>{errorMessage}</Typography>
+                        <Icon
+                            icon={<ErrorIcon />}
+                            label="Error"
+                            size={"md"}
+                            className={"wby-fill-danger wby-mr-sm"}
+                        />
+                        <Text size={"md"}>{errorMessage}</Text>
                     </LoadingDialog.TitleContainer>
                 ) : status === ImportExportTaskStatus.COMPLETED ? (
                     <LoadingDialog.TitleContainer>
-                        <LoadingDialog.CheckMarkIcon />
-                        <Typography use={"subtitle1"}>{MESSAGES[status]}</Typography>
+                        <Icon
+                            icon={<SuccessIcon />}
+                            label="Success"
+                            size={"md"}
+                            className={"wby-fill-success wby-mr-sm"}
+                        />
+                        <Text size={"md"}>{MESSAGES[status]}</Text>
                     </LoadingDialog.TitleContainer>
                 ) : (
                     <LoadingDialog.TitleContainer>
                         <LoadingDialog.Pulse>
                             <div className="inner" />
                         </LoadingDialog.Pulse>
-                        <Typography use={"subtitle1"}>{MESSAGES[status]}</Typography>
+                        <Text size={"md"}>{MESSAGES[status]}</Text>
                     </LoadingDialog.TitleContainer>
                 )}
 
                 <LoadingDialog.StatsContainer>
                     {error && (
                         <LoadingDialog.StatusContainer>
-                            <LoadingDialog.StatusTitle use={"body2"}>
-                                {t`Error`}
-                            </LoadingDialog.StatusTitle>
-                            <LoadingDialog.StatusBody use={"body2"}>
-                                {error.message}
-                            </LoadingDialog.StatusBody>
+                            <Text size={"md"}>{t`Error`}</Text>
+                            <Text size={"sm"}>{error.message}</Text>
                         </LoadingDialog.StatusContainer>
                     )}
                     {stats && (
                         <LoadingDialog.ProgressContainer>
-                            <LoadingDialog.StatusTitle use={"body2"}>
+                            <Text size={"sm"}>
                                 {t`{completed} of {total} completed`({
                                     completed: `${stats.completed}`,
                                     total: `${stats.total}`
                                 })}
-                            </LoadingDialog.StatusTitle>
+                            </Text>
                             <ProgressBar
                                 value={stats.completed}
                                 max={stats.total}
diff --git a/packages/app-page-builder/src/editor/plugins/defaultBar/components/ExportTemplateButton/index.tsx b/packages/app-page-builder/src/editor/plugins/defaultBar/components/ExportTemplateButton/index.tsx
index 45b47351ac8..3ee378c21da 100644
--- a/packages/app-page-builder/src/editor/plugins/defaultBar/components/ExportTemplateButton/index.tsx
+++ b/packages/app-page-builder/src/editor/plugins/defaultBar/components/ExportTemplateButton/index.tsx
@@ -1,10 +1,8 @@
 import React from "react";
-import { IconButton } from "@webiny/ui/Button";
-import { Tooltip } from "@webiny/ui/Tooltip";
 import { i18n } from "@webiny/app/i18n";
 import useExportTemplateDialog, { ExportTemplatesDialogProps } from "./useExportTemplateDialog";
-// assets
-import { ReactComponent as DownloadIcon } from "@webiny/app-admin/assets/icons/file_download.svg";
+import { ReactComponent as DownloadIcon } from "@webiny/icons/file_download.svg";
+import { IconButton, Tooltip } from "@webiny/admin-ui";
 
 const t = i18n.ns("app-page-builder/editor/plugins/defaultBar/exportTemplateButton");
 
@@ -31,12 +29,19 @@ export const ExportTemplatesButton = ({
     };
 
     return (
-        <Tooltip content={renderExportTemplatesTooltip(selected)} placement={"bottom"}>
-            <IconButton
-                data-testid={"export-template-button"}
-                icon={<DownloadIcon />}
-                onClick={() => showExportTemplateInitializeDialog({ ids: selected, ...restProps })}
-            />
-        </Tooltip>
+        <Tooltip
+            trigger={
+                <IconButton
+                    icon={<DownloadIcon />}
+                    size={"sm"}
+                    variant={"ghost"}
+                    data-testid={"export-template-button"}
+                    onClick={() =>
+                        showExportTemplateInitializeDialog({ ids: selected, ...restProps })
+                    }
+                />
+            }
+            content={renderExportTemplatesTooltip(selected)}
+        />
     );
 };
diff --git a/packages/app-page-builder/src/editor/plugins/defaultBar/components/ExportTemplateButton/useExportTemplateDialog.tsx b/packages/app-page-builder/src/editor/plugins/defaultBar/components/ExportTemplateButton/useExportTemplateDialog.tsx
index 861dc0fc688..23701e20dff 100644
--- a/packages/app-page-builder/src/editor/plugins/defaultBar/components/ExportTemplateButton/useExportTemplateDialog.tsx
+++ b/packages/app-page-builder/src/editor/plugins/defaultBar/components/ExportTemplateButton/useExportTemplateDialog.tsx
@@ -1,48 +1,15 @@
 import React, { useEffect } from "react";
-import { css } from "emotion";
 import { i18n } from "@webiny/app/i18n";
+import { CopyButton, Button, Text, OverlayLoader, Grid, Heading, Tooltip } from "@webiny/admin-ui";
+import { ReactComponent as FileDownloadIcon } from "@webiny/icons/file_download.svg";
 import { useDialog } from "@webiny/app-admin/hooks/useDialog";
-import { ButtonIcon, ButtonSecondary, CopyButton } from "@webiny/ui/Button";
-import { Typography } from "@webiny/ui/Typography";
-import { Cell, Grid } from "@webiny/ui/Grid";
 import { useSnackbar } from "@webiny/app-admin/hooks/useSnackbar";
-import { CircularProgress } from "@webiny/ui/Progress";
-
 import { usePageBuilder } from "~/hooks/usePageBuilder";
-import { ReactComponent as FileDownloadIcon } from "~/editor/assets/icons/file_download_black_24dp.svg";
 import ExportTemplateLoadingDialogContent from "./ExportTemplateLoadingDialogContent";
 import useExportTemplate from "./useExportTemplate";
 
 const t = i18n.ns("app-page-builder/editor/plugins/defaultBar/exportTemplateButton");
 
-const confirmationMessageStyles = css`
-    width: 600px;
-`;
-
-const linkWrapper = css`
-    display: flex;
-    background-color: var(--mdc-theme-background);
-
-    & .link-text {
-        padding: 8px 0 8px 16px;
-        width: 100%;
-        overflow: hidden;
-    }
-`;
-
-const gridClass = css`
-    &.mdc-layout-grid {
-        padding-top: 0;
-        padding-bottom: 0;
-    }
-`;
-
-const spinnerWrapper = css`
-    position: relative;
-    width: 100%;
-    height: 180px;
-`;
-
 export interface ExportTemplatesDialogProps {
     ids?: string[];
     where?: Record<string, any>;
@@ -66,10 +33,8 @@ const ExportTemplateLoadingDialogMessage = (props: ExportTemplatesDialogProps) =
     }, []);
 
     return (
-        <div className={confirmationMessageStyles}>
-            <div className={spinnerWrapper}>
-                <CircularProgress label={t`Preparing your export...`} />
-            </div>
+        <div className={"wby-relative wby-h-[180px]"}>
+            <OverlayLoader text={t`Preparing your export...`} />
         </div>
     );
 };
@@ -82,45 +47,54 @@ const ExportTemplateDialogMessage = ({ exportUrl }: ExportTemplateDialogProps) =
     const { showSnackbar } = useSnackbar();
 
     return (
-        <div className={confirmationMessageStyles}>
-            <Grid style={{ paddingTop: 0 }}>
-                <Cell span={12}>
-                    <Typography use={"subtitle1"}>{t`Copy the export URL:`}</Typography>
-                </Cell>
-                <Cell span={12}>
-                    <div className={linkWrapper}>
-                        <Typography
-                            use={"body2"}
-                            className={"link-text"}
-                            data-testid={"pb-templates-export-dialog-export-url"}
-                        >
+        <div className={"wby-pb-lg"}>
+            <Grid>
+                <Grid.Column span={12}>
+                    <Heading level={6} className={"wby-mb-md"}>{t`Copy the export URL:`}</Heading>
+
+                    <div
+                        className={
+                            "wby-rounded-lg wby-bg-neutral-dimmed wby-p-sm wby-overflow-hidden wby-relative"
+                        }
+                    >
+                        <Text size={"sm"} data-testid={"pb-templates-export-dialog-export-url"}>
                             {exportUrl}
-                        </Typography>
-                        <span>
-                            <CopyButton
-                                data-testid={"export-templates.export-ready-dialog.copy-button"}
-                                value={exportUrl}
-                                onCopy={() => showSnackbar("Successfully copied!")}
+                        </Text>
+                        <span className={"wby-absolute wby-top-0 wby-right-0"}>
+                            <Tooltip
+                                trigger={
+                                    <CopyButton
+                                        variant={"ghost"}
+                                        data-testid={
+                                            "export-templates.export-ready-dialog.copy-button"
+                                        }
+                                        value={exportUrl}
+                                        onCopy={() => showSnackbar("Successfully copied!")}
+                                    />
+                                }
+                                content={"Copy the export URL"}
                             />
                         </span>
                     </div>
-                </Cell>
+                </Grid.Column>
             </Grid>
-            <Grid className={gridClass}>
-                <Cell span={12}>
-                    <Typography use={"subtitle1"}>{t`Or download the ZIP archive:`}</Typography>
-                </Cell>
-                <Cell span={12}>
-                    <ButtonSecondary
+            <Grid className={"wby-mt-lg"}>
+                <Grid.Column span={12}>
+                    <Heading
+                        level={6}
+                        className={"wby-mb-md"}
+                    >{t`Or download the ZIP archive:`}</Heading>
+
+                    <Button
+                        variant={"primary"}
+                        text={"Download"}
+                        icon={<FileDownloadIcon />}
                         onClick={() => {
                             // Download the ZIP
                             window.open(exportUrl, "_blank", "noopener");
                         }}
-                    >
-                        <ButtonIcon icon={<FileDownloadIcon />} />
-                        Download
-                    </ButtonSecondary>
-                </Cell>
+                    />
+                </Grid.Column>
             </Grid>
         </div>
     );
@@ -140,27 +114,21 @@ const useExportTemplateDialog = (): UseExportTemplateDialog => {
         showExportTemplateContentDialog: props => {
             showDialog(<ExportTemplateDialogMessage {...props} />, {
                 title: t`Your export is now ready!`,
-                actions: {
-                    cancel: { label: t`Close` }
-                },
+                actions: {},
                 dataTestId: "export-templates.export-ready-dialog"
             });
         },
         showExportTemplateLoadingDialog: taskId => {
             showDialog(<ExportTemplateLoadingDialogContent taskId={taskId} />, {
                 title: t`Preparing your export...`,
-                actions: {
-                    cancel: { label: t`Cancel` }
-                },
+                actions: {},
                 dataTestId: "export-templates.loading-dialog"
             });
         },
         showExportTemplateInitializeDialog: props => {
             showDialog(<ExportTemplateLoadingDialogMessage {...props} />, {
                 title: t`Preparing your export...`,
-                actions: {
-                    cancel: { label: t`Cancel` }
-                },
+                actions: {},
                 dataTestId: "export-templates.initial-dialog"
             });
         },
diff --git a/packages/app-page-builder/src/editor/plugins/defaultBar/components/ImportButton/block/useImportBlockDialog.tsx b/packages/app-page-builder/src/editor/plugins/defaultBar/components/ImportButton/block/useImportBlockDialog.tsx
index 93f754097f1..d8472ffcfaf 100644
--- a/packages/app-page-builder/src/editor/plugins/defaultBar/components/ImportButton/block/useImportBlockDialog.tsx
+++ b/packages/app-page-builder/src/editor/plugins/defaultBar/components/ImportButton/block/useImportBlockDialog.tsx
@@ -1,37 +1,18 @@
 import React, { useCallback, useState } from "react";
-import { css } from "emotion";
 import dotProp from "dot-prop-immutable";
 import { i18n } from "@webiny/app/i18n";
 import { useDialog } from "@webiny/app-admin/hooks/useDialog";
-import { ButtonIcon, ButtonSecondary } from "@webiny/ui/Button";
-import { Input } from "@webiny/ui/Input";
-import { Typography } from "@webiny/ui/Typography";
-import { Cell, Grid } from "@webiny/ui/Grid";
+import { Button, Grid, Input, Text } from "@webiny/admin-ui";
 import { Form } from "@webiny/form";
 import { useUi } from "@webiny/app/hooks/useUi";
 import { validation } from "@webiny/validation";
 import { WrapperWithFileUpload } from "../index";
 // assets
-import { ReactComponent as UploadFileIcon } from "@webiny/app-admin/assets/icons/file_upload.svg";
-import { ReactComponent as LinkIcon } from "~/editor/assets/icons/link.svg";
+import { ReactComponent as UploadFileIcon } from "@webiny/icons/file_upload.svg";
+import { ReactComponent as LinkIcon } from "@webiny/icons/link.svg";
 
 const t = i18n.ns("app-page-builder/editor/plugins/defaultBar/importBlock");
 
-const contentContainer = css`
-    padding: 36px 0;
-`;
-
-const gridClass = css`
-    &.mdc-layout-grid {
-        padding-left: 0;
-        padding-right: 0;
-    }
-`;
-
-const separator = css`
-    margin: 0 24px;
-`;
-
 export const importBlockDialogTitle = t`Import block`;
 
 interface ImportBlockDialogContentProps {
@@ -42,23 +23,44 @@ export const ImportBlockDialogContent = ({ onFileLink }: ImportBlockDialogConten
     const ui = useUi();
     const [showLink, setShowLink] = useState<boolean>(false);
 
-    const setDialogStyles = useCallback(
-        (style: React.CSSProperties) => {
-            ui.setState(state => dotProp.set(state, "dialog.options.style", style));
-        },
-        [ui]
-    );
+    const setDialogStyles = useCallback(() => {
+        // Update the dialog options style to hide the dialog.
+        ui.setState(state => dotProp.set(state, "dialog.options.style", { display: "none" }));
+
+        // Get the overlay element and the body element.
+        const overlay = document.getElementById("wby-admin-ui.dialog-overlay");
+        const body = document.body;
+
+        // If the overlay exists, hide it and make the body clickable.
+        if (overlay) {
+            overlay.style.visibility = "hidden";
+            overlay.style.pointerEvents = "none";
+            body.style.pointerEvents = "auto";
+        }
+    }, [ui]);
+
+    const restoreDialogStyles = useCallback(() => {
+        // Get the overlay element and the body element.
+        const overlay = document.getElementById("wby-admin-ui.dialog-overlay");
+        const body = document.body;
+
+        // If the overlay exists, hide it and make the body clickable.
+        if (overlay) {
+            overlay.style.visibility = "visible";
+            overlay.style.pointerEvents = "auto";
+            body.style.pointerEvents = "none";
+        }
+    }, [ui]);
 
     const closeDialog = useCallback(() => {
         ui.setState(state => ({ ...state, dialog: null }));
     }, [ui]);
 
     return (
-        <div>
-            <Typography use={"subtitle1"}>
+        <div className={"wby-pb-lg"}>
+            <Text as={"div"} className={"wby-mb-lg"}>
                 {t`You can import block(s) by either uploading a Webiny Block Export ZIP or by pasting export file URL.`}
-            </Typography>
-
+            </Text>
             {showLink ? (
                 <Form
                     data={{ url: "" }}
@@ -68,51 +70,55 @@ export const ImportBlockDialogContent = ({ onFileLink }: ImportBlockDialogConten
                     }}
                 >
                     {({ Bind, submit }) => (
-                        <Grid className={gridClass}>
-                            <Cell span={12}>
+                        <Grid>
+                            <Grid.Column span={12}>
                                 <Bind name={"url"} validators={validation.create("required,url")}>
                                     <Input
-                                        description={t`The URL has to be public. We'll use it to download the export block data file.`}
+                                        note={t`The URL has to be public. We'll use it to download the export block data file.`}
                                         label={"File URL"}
                                         data-testid={"import-blocks.input-dialog.input-url"}
+                                        size={"lg"}
                                     />
                                 </Bind>
-                            </Cell>
-                            <Cell span={12}>
-                                <ButtonSecondary
+                            </Grid.Column>
+                            <Grid.Column span={12} className={"wby-text-right"}>
+                                <Button
+                                    text={"Import"}
                                     onClick={ev => {
                                         submit(ev);
                                     }}
-                                >
-                                    Continue
-                                </ButtonSecondary>
-                            </Cell>
+                                />
+                            </Grid.Column>
                         </Grid>
                     )}
                 </Form>
             ) : (
-                <div className={contentContainer}>
-                    <WrapperWithFileUpload onSelect={onFileLink}>
+                <div className={"wby-flex wby-items-center wby-gap-md"}>
+                    <WrapperWithFileUpload
+                        onSelect={file => {
+                            restoreDialogStyles();
+                            onFileLink(file);
+                        }}
+                    >
                         {({ showFileManager }) => (
-                            <ButtonSecondary
+                            <Button
+                                text={"Upload file"}
+                                icon={<UploadFileIcon />}
+                                variant={"secondary"}
                                 onClick={() => {
                                     showFileManager();
-                                    setDialogStyles({ display: "none" });
+                                    setDialogStyles();
                                 }}
-                            >
-                                <ButtonIcon icon={<UploadFileIcon />} />
-                                Upload File
-                            </ButtonSecondary>
+                            />
                         )}
                     </WrapperWithFileUpload>
-
-                    <span className={separator}>
-                        <Typography use={"overline"}>{t`Or`}</Typography>
-                    </span>
-                    <ButtonSecondary onClick={() => setShowLink(true)}>
-                        <ButtonIcon icon={<LinkIcon />} />
-                        Paste File URL
-                    </ButtonSecondary>
+                    <Text size={"sm"}>{t`OR`}</Text>
+                    <Button
+                        text={"Paste file URL"}
+                        icon={<LinkIcon />}
+                        variant={"secondary"}
+                        onClick={() => setShowLink(true)}
+                    />
                 </div>
             )}
         </div>
@@ -135,9 +141,7 @@ const useImportBlockDialog = () => {
                 />,
                 {
                     title: importBlockDialogTitle,
-                    actions: {
-                        cancel: { label: t`Cancel` }
-                    },
+                    actions: {},
                     dataTestId: "import-blocks.input-dialog"
                 }
             );
diff --git a/packages/app-page-builder/src/editor/plugins/defaultBar/components/ImportButton/block/useImportBlockLoadingDialog.tsx b/packages/app-page-builder/src/editor/plugins/defaultBar/components/ImportButton/block/useImportBlockLoadingDialog.tsx
index 6cefb4ed162..80a7a929fec 100644
--- a/packages/app-page-builder/src/editor/plugins/defaultBar/components/ImportButton/block/useImportBlockLoadingDialog.tsx
+++ b/packages/app-page-builder/src/editor/plugins/defaultBar/components/ImportButton/block/useImportBlockLoadingDialog.tsx
@@ -2,7 +2,9 @@ import React, { useCallback, useEffect, useState } from "react";
 import { useLazyQuery, useQuery } from "@apollo/react-hooks";
 import { i18n } from "@webiny/app/i18n";
 import { useDialog } from "@webiny/app-admin/hooks/useDialog";
-import { Typography } from "@webiny/ui/Typography";
+import { Icon, Text } from "@webiny/admin-ui";
+import { ReactComponent as SuccessIcon } from "@webiny/icons/check_circle_outline.svg";
+import { ReactComponent as ErrorIcon } from "@webiny/icons/error_outline.svg";
 import { useSnackbar } from "@webiny/app-admin/hooks/useSnackbar";
 import ImportBlocksDetails from "./useImportBlocksDetails";
 import ProgressBar from "../ProgressBar";
@@ -95,42 +97,48 @@ const ImportBlockLoadingDialogContent = ({ taskId }: ImportBlockLoadingDialogCon
             <LoadingDialog.WrapperRight>
                 {error ? (
                     <LoadingDialog.TitleContainer>
-                        <LoadingDialog.CancelIcon />
-                        <Typography use={"subtitle1"}>{errorMessage}</Typography>
+                        <Icon
+                            icon={<ErrorIcon />}
+                            label="Error"
+                            size={"md"}
+                            className={"wby-fill-danger wby-mr-sm"}
+                        />
+                        <Text size={"md"}>{errorMessage}</Text>
                     </LoadingDialog.TitleContainer>
                 ) : status === "completed" ? (
                     <LoadingDialog.TitleContainer>
-                        <LoadingDialog.CheckMarkIcon />
-                        <Typography use={"subtitle1"}>{MESSAGES[status]}</Typography>
+                        <Icon
+                            icon={<SuccessIcon />}
+                            label="Success"
+                            size={"md"}
+                            className={"wby-fill-success wby-mr-sm"}
+                        />
+                        <Text size={"md"}>{MESSAGES[status]}</Text>
                     </LoadingDialog.TitleContainer>
                 ) : (
                     <LoadingDialog.TitleContainer>
                         <LoadingDialog.Pulse>
                             <div className="inner" />
                         </LoadingDialog.Pulse>
-                        <Typography use={"subtitle1"}>{MESSAGES[status]}</Typography>
+                        <Text size={"md"}>{MESSAGES[status]}</Text>
                     </LoadingDialog.TitleContainer>
                 )}
 
                 <LoadingDialog.StatsContainer>
                     {error && (
                         <LoadingDialog.StatusContainer>
-                            <LoadingDialog.StatusTitle use={"body2"}>
-                                {t`Error`}
-                            </LoadingDialog.StatusTitle>
-                            <LoadingDialog.StatusBody use={"body2"}>
-                                {error.message}
-                            </LoadingDialog.StatusBody>
+                            <Text size={"md"}>{t`Error`}</Text>
+                            <Text size={"sm"}> {error.message}</Text>
                         </LoadingDialog.StatusContainer>
                     )}
                     {stats && (
                         <LoadingDialog.ProgressContainer>
-                            <LoadingDialog.StatusTitle use={"body2"}>
+                            <Text size={"sm"}>
                                 {t`{completed} of {total} completed`({
                                     completed: `${stats.completed}`,
                                     total: `${stats.total}`
                                 })}
-                            </LoadingDialog.StatusTitle>
+                            </Text>
                             <ProgressBar
                                 value={stats.completed}
                                 max={stats.total}
diff --git a/packages/app-page-builder/src/editor/plugins/defaultBar/components/ImportButton/block/useImportBlocksDetails.tsx b/packages/app-page-builder/src/editor/plugins/defaultBar/components/ImportButton/block/useImportBlocksDetails.tsx
index 8838b5e014c..8915b32a591 100644
--- a/packages/app-page-builder/src/editor/plugins/defaultBar/components/ImportButton/block/useImportBlocksDetails.tsx
+++ b/packages/app-page-builder/src/editor/plugins/defaultBar/components/ImportButton/block/useImportBlocksDetails.tsx
@@ -1,8 +1,7 @@
 import React from "react";
 import get from "lodash/get";
-import { Typography } from "@webiny/ui/Typography";
+import { Text, Scrollbar } from "@webiny/admin-ui";
 import { i18n } from "@webiny/app/i18n";
-import { Scrollbar } from "@webiny/ui/Scrollbar";
 import { ShowDetails } from "../styledComponents";
 import { ListBlockImportExportSubTasksResponse } from "~/admin/graphql/blockImportExport.gql";
 import { PageBuilderImportExportSubTask } from "~/types";
@@ -16,7 +15,7 @@ interface ImportBlocksDetailsProps {
 
 const ImportBlocksDetails = ({ loading, result }: ImportBlocksDetailsProps) => {
     if (loading || !result) {
-        return <Typography use={"caption"}> {t`Loading details...`} </Typography>;
+        return <Text size={"sm"}>{t`Loading details...`}</Text>;
     }
     const subtasks: PageBuilderImportExportSubTask[] = get(
         result,
@@ -31,13 +30,13 @@ const ImportBlocksDetails = ({ loading, result }: ImportBlocksDetailsProps) => {
                         height: 160
                     }}
                 >
-                    <ShowDetails.Label use={"body2"}>{t`Blocks imported:`}</ShowDetails.Label>
+                    <ShowDetails.Label size={"sm"}>{t`Blocks imported:`}</ShowDetails.Label>
                     <ShowDetails.List data-testid={"import-blocks-dialog.show-detail-list"}>
                         {subtasks.map(subtask => {
                             const { block } = subtask.data;
                             return (
                                 <ShowDetails.ListItem key={block.id}>
-                                    <Typography use={"body2"}>{block.name}</Typography>
+                                    <Text size={"sm"}>{block.name}</Text>
                                 </ShowDetails.ListItem>
                             );
                         })}
diff --git a/packages/app-page-builder/src/editor/plugins/defaultBar/components/ImportButton/page/useImportPageDialog.tsx b/packages/app-page-builder/src/editor/plugins/defaultBar/components/ImportButton/page/useImportPageDialog.tsx
index c4134ba53fa..89f43b80961 100644
--- a/packages/app-page-builder/src/editor/plugins/defaultBar/components/ImportButton/page/useImportPageDialog.tsx
+++ b/packages/app-page-builder/src/editor/plugins/defaultBar/components/ImportButton/page/useImportPageDialog.tsx
@@ -1,37 +1,18 @@
 import React, { useCallback, useState } from "react";
-import { css } from "emotion";
 import dotProp from "dot-prop-immutable";
+import { Button, Grid, Input, Text } from "@webiny/admin-ui";
 import { i18n } from "@webiny/app/i18n";
 import { useDialog } from "@webiny/app-admin/hooks/useDialog";
-import { ButtonIcon, ButtonSecondary } from "@webiny/ui/Button";
-import { Input } from "@webiny/ui/Input";
-import { Typography } from "@webiny/ui/Typography";
-import { Cell, Grid } from "@webiny/ui/Grid";
 import { Form } from "@webiny/form";
 import { useUi } from "@webiny/app/hooks/useUi";
 import { validation } from "@webiny/validation";
 import { WrapperWithFileUpload } from "../index";
 // assets
-import { ReactComponent as UploadFileIcon } from "@webiny/app-admin/assets/icons/file_upload.svg";
-import { ReactComponent as LinkIcon } from "~/editor/assets/icons/link.svg";
+import { ReactComponent as UploadFileIcon } from "@webiny/icons/file_upload.svg";
+import { ReactComponent as LinkIcon } from "@webiny/icons/link.svg";
 
 const t = i18n.ns("app-page-builder/editor/plugins/defaultBar/importPage");
 
-const contentContainer = css`
-    padding: 36px 0;
-`;
-
-const gridClass = css`
-    &.mdc-layout-grid {
-        padding-left: 0;
-        padding-right: 0;
-    }
-`;
-
-const separator = css`
-    margin: 0 24px;
-`;
-
 export const importPageDialogTitle = t`Import page`;
 
 interface ImportPageDialogContentProps {
@@ -42,23 +23,44 @@ export const ImportPageDialogContent = ({ onFileLink }: ImportPageDialogContentP
     const ui = useUi();
     const [showLink, setShowLink] = useState<boolean>(false);
 
-    const setDialogStyles = useCallback(
-        (style: React.CSSProperties) => {
-            ui.setState(state => dotProp.set(state, "dialog.options.style", style));
-        },
-        [ui]
-    );
+    const setDialogStyles = useCallback(() => {
+        // Update the dialog options style to hide the dialog.
+        ui.setState(state => dotProp.set(state, "dialog.options.style", { display: "none" }));
+
+        // Get the overlay element and the body element.
+        const overlay = document.getElementById("wby-admin-ui.dialog-overlay");
+        const body = document.body;
+
+        // If the overlay exists, hide it and make the body clickable.
+        if (overlay) {
+            overlay.style.visibility = "hidden";
+            overlay.style.pointerEvents = "none";
+            body.style.pointerEvents = "auto";
+        }
+    }, [ui]);
+
+    const restoreDialogStyles = useCallback(() => {
+        // Get the overlay element and the body element.
+        const overlay = document.getElementById("wby-admin-ui.dialog-overlay");
+        const body = document.body;
+
+        // If the overlay exists, hide it and make the body clickable.
+        if (overlay) {
+            overlay.style.visibility = "visible";
+            overlay.style.pointerEvents = "auto";
+            body.style.pointerEvents = "none";
+        }
+    }, [ui]);
 
     const closeDialog = useCallback(() => {
         ui.setState(state => ({ ...state, dialog: null }));
     }, [ui]);
 
     return (
-        <div>
-            <Typography use={"subtitle1"}>
+        <div className={"wby-pb-lg"}>
+            <Text as={"div"} className={"wby-mb-lg"}>
                 {t`You can import page(s) by either uploading a Webiny Page Export ZIP or by pasting export file URL.`}
-            </Typography>
-
+            </Text>
             {showLink ? (
                 <Form
                     data={{ url: "" }}
@@ -68,51 +70,55 @@ export const ImportPageDialogContent = ({ onFileLink }: ImportPageDialogContentP
                     }}
                 >
                     {({ Bind, submit }) => (
-                        <Grid className={gridClass}>
-                            <Cell span={12}>
+                        <Grid>
+                            <Grid.Column span={12}>
                                 <Bind name={"url"} validators={validation.create("required,url")}>
                                     <Input
-                                        description={t`The URL has to be public. We'll use it to download the export page data file.`}
-                                        label={"File URL"}
+                                        label={t`File URL`}
+                                        note={t`The URL has to be public. We'll use it to download the export page data file.`}
                                         data-testid={"import-pages.input-dialog.input-url"}
+                                        size={"lg"}
                                     />
                                 </Bind>
-                            </Cell>
-                            <Cell span={12}>
-                                <ButtonSecondary
+                            </Grid.Column>
+                            <Grid.Column span={12} className={"wby-text-right"}>
+                                <Button
+                                    text={"Import"}
                                     onClick={ev => {
                                         submit(ev);
                                     }}
-                                >
-                                    Continue
-                                </ButtonSecondary>
-                            </Cell>
+                                />
+                            </Grid.Column>
                         </Grid>
                     )}
                 </Form>
             ) : (
-                <div className={contentContainer}>
-                    <WrapperWithFileUpload onSelect={onFileLink}>
+                <div className={"wby-flex wby-items-center wby-gap-md"}>
+                    <WrapperWithFileUpload
+                        onSelect={file => {
+                            restoreDialogStyles();
+                            onFileLink(file);
+                        }}
+                    >
                         {({ showFileManager }) => (
-                            <ButtonSecondary
+                            <Button
+                                text={"Upload file"}
+                                icon={<UploadFileIcon />}
+                                variant={"secondary"}
                                 onClick={() => {
                                     showFileManager();
-                                    setDialogStyles({ display: "none" });
+                                    setDialogStyles();
                                 }}
-                            >
-                                <ButtonIcon icon={<UploadFileIcon />} />
-                                Upload File
-                            </ButtonSecondary>
+                            />
                         )}
                     </WrapperWithFileUpload>
-
-                    <span className={separator}>
-                        <Typography use={"overline"}>{t`Or`}</Typography>
-                    </span>
-                    <ButtonSecondary onClick={() => setShowLink(true)}>
-                        <ButtonIcon icon={<LinkIcon />} />
-                        Paste File URL
-                    </ButtonSecondary>
+                    <Text size={"sm"}>{t`OR`}</Text>
+                    <Button
+                        text={"Paste file URL"}
+                        icon={<LinkIcon />}
+                        variant={"secondary"}
+                        onClick={() => setShowLink(true)}
+                    />
                 </div>
             )}
         </div>
@@ -135,9 +141,7 @@ const useImportPageDialog = () => {
                 />,
                 {
                     title: importPageDialogTitle,
-                    actions: {
-                        cancel: { label: t`Cancel` }
-                    },
+                    actions: {},
                     dataTestId: "import-pages.input-dialog"
                 }
             );
diff --git a/packages/app-page-builder/src/editor/plugins/defaultBar/components/ImportButton/page/useImportPageLoadingDialog.tsx b/packages/app-page-builder/src/editor/plugins/defaultBar/components/ImportButton/page/useImportPageLoadingDialog.tsx
index eaeb9226fbd..17d5f32ff45 100644
--- a/packages/app-page-builder/src/editor/plugins/defaultBar/components/ImportButton/page/useImportPageLoadingDialog.tsx
+++ b/packages/app-page-builder/src/editor/plugins/defaultBar/components/ImportButton/page/useImportPageLoadingDialog.tsx
@@ -1,9 +1,11 @@
 import React, { useCallback, useEffect, useState } from "react";
 import { useQuery } from "@apollo/react-hooks";
+import { Icon, Text } from "@webiny/admin-ui";
 import { i18n } from "@webiny/app/i18n";
 import { useDialog } from "@webiny/app-admin/hooks/useDialog";
-import { Typography } from "@webiny/ui/Typography";
 import { useSnackbar } from "@webiny/app-admin/hooks/useSnackbar";
+import { ReactComponent as SuccessIcon } from "@webiny/icons/check_circle_outline.svg";
+import { ReactComponent as ErrorIcon } from "@webiny/icons/error_outline.svg";
 import ProgressBar from "../ProgressBar";
 import { LoadingDialog } from "../styledComponents";
 import {
@@ -124,39 +126,45 @@ const ImportPageLoadingDialogContent = ({ taskId }: ImportPageLoadingDialogConte
             <LoadingDialog.WrapperRight>
                 {error ? (
                     <LoadingDialog.TitleContainer>
-                        <LoadingDialog.CancelIcon />
-                        <Typography use={"subtitle1"}>{errorMessage}</Typography>
+                        <Icon
+                            icon={<ErrorIcon />}
+                            label="Error"
+                            size={"md"}
+                            className={"wby-fill-danger wby-mr-sm"}
+                        />
+                        <Text size={"md"}>{errorMessage}</Text>
                     </LoadingDialog.TitleContainer>
                 ) : status === PbTaskStatus.success ? (
                     <LoadingDialog.TitleContainer>
-                        <LoadingDialog.CheckMarkIcon />
-                        <Typography use={"subtitle1"}>{MESSAGES[status]}</Typography>
+                        <Icon
+                            icon={<SuccessIcon />}
+                            label="Success"
+                            size={"md"}
+                            className={"wby-fill-success wby-mr-sm"}
+                        />
+                        <Text size={"md"}>{MESSAGES[status]}</Text>
                     </LoadingDialog.TitleContainer>
                 ) : (
                     <LoadingDialog.TitleContainer>
                         <LoadingDialog.Pulse>
                             <div className="inner" />
                         </LoadingDialog.Pulse>
-                        <Typography use={"subtitle1"}>{MESSAGES[status]}</Typography>
+                        <Text size={"md"}>{MESSAGES[status]}</Text>
                     </LoadingDialog.TitleContainer>
                 )}
 
                 <LoadingDialog.StatsContainer>
                     {error && (
                         <LoadingDialog.StatusContainer>
-                            <LoadingDialog.StatusTitle use={"body2"}>
-                                {t`Error`}
-                            </LoadingDialog.StatusTitle>
-                            <LoadingDialog.StatusBody use={"body2"}>
-                                {error.message}
-                            </LoadingDialog.StatusBody>
+                            <Text size={"md"}>{t`Error`}</Text>
+                            <Text size={"sm"}> {error.message}</Text>
                         </LoadingDialog.StatusContainer>
                     )}
                     {stats && (
                         <LoadingDialog.ProgressContainer>
-                            <LoadingDialog.StatusTitle use={"body2"}>
+                            <Text size={"sm"}>
                                 <LoadingDialogStats stats={stats} />
-                            </LoadingDialog.StatusTitle>
+                            </Text>
                             <ProgressBar
                                 value={stats.completed}
                                 max={stats.total}
diff --git a/packages/app-page-builder/src/editor/plugins/defaultBar/components/ImportButton/page/useImportPagesDetails.tsx b/packages/app-page-builder/src/editor/plugins/defaultBar/components/ImportButton/page/useImportPagesDetails.tsx
index 2f7a021aa82..5f5dabf3270 100644
--- a/packages/app-page-builder/src/editor/plugins/defaultBar/components/ImportButton/page/useImportPagesDetails.tsx
+++ b/packages/app-page-builder/src/editor/plugins/defaultBar/components/ImportButton/page/useImportPagesDetails.tsx
@@ -1,7 +1,6 @@
 import React from "react";
-import { Typography } from "@webiny/ui/Typography";
+import { Text, Scrollbar } from "@webiny/admin-ui";
 import { i18n } from "@webiny/app/i18n";
-import { Scrollbar } from "@webiny/ui/Scrollbar";
 import { Link } from "@webiny/react-router";
 import { ShowDetails } from "../styledComponents";
 import { ListImportedPagesResponse } from "~/admin/graphql/pageImportExport.gql";
@@ -15,7 +14,7 @@ interface ImportPagesDetailsProps {
 
 const ImportPagesDetails = ({ loading, result }: ImportPagesDetailsProps) => {
     if (loading || !result) {
-        return <Typography use={"caption"}> {t`Loading details...`} </Typography>;
+        return <Text size={"sm"}>{t`Loading details...`}</Text>;
     }
 
     const { data: pages, error } = result.pageBuilder.listImportedPages;
@@ -36,21 +35,17 @@ const ImportPagesDetails = ({ loading, result }: ImportPagesDetailsProps) => {
                         height: 160
                     }}
                 >
-                    <ShowDetails.Label use={"body2"}>{t`Pages imported:`}</ShowDetails.Label>
+                    <ShowDetails.Label size={"sm"}>{t`Pages imported:`}</ShowDetails.Label>
                     <ShowDetails.List data-testid={"import-pages-dialog.show-detail-list"}>
                         {pages.map(page => {
                             return (
                                 <ShowDetails.ListItem key={page.id}>
-                                    <Typography use={"body2"}>
-                                        {`${page.title} (v${page.version})`}
-                                    </Typography>
+                                    <Text size={"sm"}>{`${page.title} (v${page.version})`}</Text>
                                     <Link
                                         to={`/page-builder/editor/${encodeURIComponent(page.id)}`}
                                         target={"_blank"}
                                     >
-                                        <ShowDetails.LinkText use={"body2"}>
-                                            {t`view`}
-                                        </ShowDetails.LinkText>
+                                        <Text size={"sm"}>{t`view`}</Text>
                                     </Link>
                                 </ShowDetails.ListItem>
                             );
diff --git a/packages/app-page-builder/src/editor/plugins/defaultBar/components/ImportButton/styledComponents.tsx b/packages/app-page-builder/src/editor/plugins/defaultBar/components/ImportButton/styledComponents.tsx
index c850dbb6e64..8211bad4afe 100644
--- a/packages/app-page-builder/src/editor/plugins/defaultBar/components/ImportButton/styledComponents.tsx
+++ b/packages/app-page-builder/src/editor/plugins/defaultBar/components/ImportButton/styledComponents.tsx
@@ -1,11 +1,9 @@
 import styled from "@emotion/styled";
-import { Typography } from "@webiny/ui/Typography";
+import { Text } from "@webiny/admin-ui";
 import Accordion from "~/editor/plugins/elementSettings/components/Accordion";
 // assets
 import { ReactComponent as UploadInProgressIcon } from "../assets/undraw-uploading.svg";
 import { ReactComponent as ExportInProgressIcon } from "../assets/undraw_export_files.svg";
-import { ReactComponent as CircleIcon } from "../assets/check-circle-24dp.svg";
-import { ReactComponent as CancelIcon } from "../assets/cancel-24dp.svg";
 
 export const ShowDetails = {
     Container: styled.div`
@@ -14,7 +12,7 @@ export const ShowDetails = {
     Accordion: styled(Accordion)`
         border: 1px solid var(--mdc-theme-on-background);
     `,
-    Label: styled(Typography)`
+    Label: styled(Text)`
         display: inline-block;
         color: var(--mdc-theme-text-secondary-on-background);
         padding-bottom: 8px;
@@ -26,7 +24,7 @@ export const ShowDetails = {
     ListItem: styled.li`
         padding-bottom: 8px;
     `,
-    LinkText: styled(Typography)`
+    LinkText: styled(Text)`
         margin-left: 8px;
     `
 };
@@ -34,7 +32,6 @@ export const ShowDetails = {
 export const LoadingDialog = {
     Wrapper: styled.div`
         display: flex;
-        width: 600px;
     `,
 
     WrapperLeft: styled.div`
@@ -95,12 +92,6 @@ export const LoadingDialog = {
         flex-direction: column;
         padding-right: 24px;
     `,
-    StatusTitle: styled(Typography)`
-        color: var(--mdc-theme-text-secondary-on-background);
-    `,
-    StatusBody: styled(Typography)`
-        text-transform: capitalize;
-    `,
     ProgressContainer: styled.div`
         display: flex;
         flex-direction: column;
@@ -115,13 +106,5 @@ export const LoadingDialog = {
         width: 100%;
         max-width: 300px;
         height: auto;
-    `,
-    CheckMarkIcon: styled(CircleIcon)`
-        margin-right: 16px;
-        fill: var(--mdc-theme-secondary);
-    `,
-    CancelIcon: styled(CancelIcon)`
-        margin-right: 16px;
-        fill: var(--mdc-theme-error);
     `
 };
diff --git a/packages/app-page-builder/src/editor/plugins/defaultBar/components/ImportButton/template/useImportTemplateDialog.tsx b/packages/app-page-builder/src/editor/plugins/defaultBar/components/ImportButton/template/useImportTemplateDialog.tsx
index db566ad56b7..bfe96e69921 100644
--- a/packages/app-page-builder/src/editor/plugins/defaultBar/components/ImportButton/template/useImportTemplateDialog.tsx
+++ b/packages/app-page-builder/src/editor/plugins/defaultBar/components/ImportButton/template/useImportTemplateDialog.tsx
@@ -1,37 +1,18 @@
 import React, { useCallback, useState } from "react";
-import { css } from "emotion";
 import dotProp from "dot-prop-immutable";
+import { Button, Grid, Input, Text } from "@webiny/admin-ui";
 import { i18n } from "@webiny/app/i18n";
 import { useDialog } from "@webiny/app-admin/hooks/useDialog";
-import { ButtonIcon, ButtonSecondary } from "@webiny/ui/Button";
-import { Input } from "@webiny/ui/Input";
-import { Typography } from "@webiny/ui/Typography";
-import { Cell, Grid } from "@webiny/ui/Grid";
 import { Form } from "@webiny/form";
 import { useUi } from "@webiny/app/hooks/useUi";
 import { validation } from "@webiny/validation";
 import { WrapperWithFileUpload } from "../index";
 // assets
-import { ReactComponent as UploadFileIcon } from "@webiny/app-admin/assets/icons/file_upload.svg";
-import { ReactComponent as LinkIcon } from "~/editor/assets/icons/link.svg";
+import { ReactComponent as UploadFileIcon } from "@webiny/icons/file_upload.svg";
+import { ReactComponent as LinkIcon } from "@webiny/icons/link.svg";
 
 const t = i18n.ns("app-page-builder/editor/plugins/defaultBar/importTemplate");
 
-const contentContainer = css`
-    padding: 36px 0;
-`;
-
-const gridClass = css`
-    &.mdc-layout-grid {
-        padding-left: 0;
-        padding-right: 0;
-    }
-`;
-
-const separator = css`
-    margin: 0 24px;
-`;
-
 export const importTemplateDialogTitle = t`Import template`;
 
 interface ImportTemplateDialogContentProps {
@@ -42,23 +23,44 @@ export const ImportTemplateDialogContent = ({ onFileLink }: ImportTemplateDialog
     const ui = useUi();
     const [showLink, setShowLink] = useState<boolean>(false);
 
-    const setDialogStyles = useCallback(
-        (style: React.CSSProperties) => {
-            ui.setState(state => dotProp.set(state, "dialog.options.style", style));
-        },
-        [ui]
-    );
+    const setDialogStyles = useCallback(() => {
+        // Update the dialog options style to hide the dialog.
+        ui.setState(state => dotProp.set(state, "dialog.options.style", { display: "none" }));
+
+        // Get the overlay element and the body element.
+        const overlay = document.getElementById("wby-admin-ui.dialog-overlay");
+        const body = document.body;
+
+        // If the overlay exists, hide it and make the body clickable.
+        if (overlay) {
+            overlay.style.visibility = "hidden";
+            overlay.style.pointerEvents = "none";
+            body.style.pointerEvents = "auto";
+        }
+    }, [ui]);
+
+    const restoreDialogStyles = useCallback(() => {
+        // Get the overlay element and the body element.
+        const overlay = document.getElementById("wby-admin-ui.dialog-overlay");
+        const body = document.body;
+
+        // If the overlay exists, hide it and make the body clickable.
+        if (overlay) {
+            overlay.style.visibility = "visible";
+            overlay.style.pointerEvents = "auto";
+            body.style.pointerEvents = "none";
+        }
+    }, [ui]);
 
     const closeDialog = useCallback(() => {
         ui.setState(state => ({ ...state, dialog: null }));
     }, [ui]);
 
     return (
-        <div>
-            <Typography use={"subtitle1"}>
+        <div className={"wby-pb-lg"}>
+            <Text as={"div"} className={"wby-mb-lg"}>
                 {t`You can import template(s) by either uploading a Webiny Template Export ZIP or by pasting export file URL.`}
-            </Typography>
-
+            </Text>
             {showLink ? (
                 <Form
                     data={{ url: "" }}
@@ -68,51 +70,55 @@ export const ImportTemplateDialogContent = ({ onFileLink }: ImportTemplateDialog
                     }}
                 >
                     {({ Bind, submit }) => (
-                        <Grid className={gridClass}>
-                            <Cell span={12}>
+                        <Grid>
+                            <Grid.Column span={12}>
                                 <Bind name={"url"} validators={validation.create("required,url")}>
                                     <Input
                                         description={t`The URL has to be public. We'll use it to download the export template data file.`}
                                         label={"File URL"}
                                         data-testid={"import-templates.input-dialog.input-url"}
+                                        size={"lg"}
                                     />
                                 </Bind>
-                            </Cell>
-                            <Cell span={12}>
-                                <ButtonSecondary
+                            </Grid.Column>
+                            <Grid.Column span={12} className={"wby-text-right"}>
+                                <Button
+                                    text={"Import"}
                                     onClick={ev => {
                                         submit(ev);
                                     }}
-                                >
-                                    Continue
-                                </ButtonSecondary>
-                            </Cell>
+                                />
+                            </Grid.Column>
                         </Grid>
                     )}
                 </Form>
             ) : (
-                <div className={contentContainer}>
-                    <WrapperWithFileUpload onSelect={onFileLink}>
+                <div className={"wby-flex wby-items-center wby-gap-md"}>
+                    <WrapperWithFileUpload
+                        onSelect={file => {
+                            restoreDialogStyles();
+                            onFileLink(file);
+                        }}
+                    >
                         {({ showFileManager }) => (
-                            <ButtonSecondary
+                            <Button
+                                text={"Upload file"}
+                                icon={<UploadFileIcon />}
+                                variant={"secondary"}
                                 onClick={() => {
                                     showFileManager();
-                                    setDialogStyles({ display: "none" });
+                                    setDialogStyles();
                                 }}
-                            >
-                                <ButtonIcon icon={<UploadFileIcon />} />
-                                Upload File
-                            </ButtonSecondary>
+                            />
                         )}
                     </WrapperWithFileUpload>
-
-                    <span className={separator}>
-                        <Typography use={"overline"}>{t`Or`}</Typography>
-                    </span>
-                    <ButtonSecondary onClick={() => setShowLink(true)}>
-                        <ButtonIcon icon={<LinkIcon />} />
-                        Paste File URL
-                    </ButtonSecondary>
+                    <Text size={"sm"}>{t`OR`}</Text>
+                    <Button
+                        text={"Paste file URL"}
+                        icon={<LinkIcon />}
+                        variant={"secondary"}
+                        onClick={() => setShowLink(true)}
+                    />
                 </div>
             )}
         </div>
@@ -135,9 +141,7 @@ const useImportTemplateDialog = () => {
                 />,
                 {
                     title: importTemplateDialogTitle,
-                    actions: {
-                        cancel: { label: t`Cancel` }
-                    },
+                    actions: {},
                     dataTestId: "import-templates.input-dialog"
                 }
             );
diff --git a/packages/app-page-builder/src/editor/plugins/defaultBar/components/ImportButton/template/useImportTemplateLoadingDialog.tsx b/packages/app-page-builder/src/editor/plugins/defaultBar/components/ImportButton/template/useImportTemplateLoadingDialog.tsx
index 70f267c2860..fb17e80bd99 100644
--- a/packages/app-page-builder/src/editor/plugins/defaultBar/components/ImportButton/template/useImportTemplateLoadingDialog.tsx
+++ b/packages/app-page-builder/src/editor/plugins/defaultBar/components/ImportButton/template/useImportTemplateLoadingDialog.tsx
@@ -2,7 +2,9 @@ import React, { useCallback, useEffect, useState } from "react";
 import { useLazyQuery, useQuery } from "@apollo/react-hooks";
 import { i18n } from "@webiny/app/i18n";
 import { useDialog } from "@webiny/app-admin/hooks/useDialog";
-import { Typography } from "@webiny/ui/Typography";
+import { Icon, Text } from "@webiny/admin-ui";
+import { ReactComponent as SuccessIcon } from "@webiny/icons/check_circle_outline.svg";
+import { ReactComponent as ErrorIcon } from "@webiny/icons/error_outline.svg";
 import { useSnackbar } from "@webiny/app-admin/hooks/useSnackbar";
 import ImportTemplatesDetails from "./useImportTemplatesDetails";
 import ProgressBar from "../ProgressBar";
@@ -105,42 +107,48 @@ const ImportTemplateLoadingDialogContent = ({
             <LoadingDialog.WrapperRight>
                 {error ? (
                     <LoadingDialog.TitleContainer>
-                        <LoadingDialog.CancelIcon />
-                        <Typography use={"subtitle1"}>{errorMessage}</Typography>
+                        <Icon
+                            icon={<ErrorIcon />}
+                            label="Error"
+                            size={"md"}
+                            className={"wby-fill-danger wby-mr-sm"}
+                        />
+                        <Text size={"md"}>{errorMessage}</Text>
                     </LoadingDialog.TitleContainer>
                 ) : status === "completed" ? (
                     <LoadingDialog.TitleContainer>
-                        <LoadingDialog.CheckMarkIcon />
-                        <Typography use={"subtitle1"}>{MESSAGES[status]}</Typography>
+                        <Icon
+                            icon={<SuccessIcon />}
+                            label="Success"
+                            size={"md"}
+                            className={"wby-fill-success wby-mr-sm"}
+                        />
+                        <Text size={"md"}>{MESSAGES[status]}</Text>
                     </LoadingDialog.TitleContainer>
                 ) : (
                     <LoadingDialog.TitleContainer>
                         <LoadingDialog.Pulse>
                             <div className="inner" />
                         </LoadingDialog.Pulse>
-                        <Typography use={"subtitle1"}>{MESSAGES[status]}</Typography>
+                        <Text size={"md"}>{MESSAGES[status]}</Text>
                     </LoadingDialog.TitleContainer>
                 )}
 
                 <LoadingDialog.StatsContainer>
                     {error && (
                         <LoadingDialog.StatusContainer>
-                            <LoadingDialog.StatusTitle use={"body2"}>
-                                {t`Error`}
-                            </LoadingDialog.StatusTitle>
-                            <LoadingDialog.StatusBody use={"body2"}>
-                                {error.message}
-                            </LoadingDialog.StatusBody>
+                            <Text size={"md"}>{t`Error`}</Text>
+                            <Text size={"sm"}> {error.message}</Text>
                         </LoadingDialog.StatusContainer>
                     )}
                     {stats && (
                         <LoadingDialog.ProgressContainer>
-                            <LoadingDialog.StatusTitle use={"body2"}>
+                            <Text size={"sm"}>
                                 {t`{completed} of {total} completed`({
                                     completed: `${stats.completed}`,
                                     total: `${stats.total}`
                                 })}
-                            </LoadingDialog.StatusTitle>
+                            </Text>
                             <ProgressBar
                                 value={stats.completed}
                                 max={stats.total}
diff --git a/packages/app-page-builder/src/editor/plugins/defaultBar/components/ImportButton/template/useImportTemplatesDetails.tsx b/packages/app-page-builder/src/editor/plugins/defaultBar/components/ImportButton/template/useImportTemplatesDetails.tsx
index 45a45c8b423..6a8dce3acfd 100644
--- a/packages/app-page-builder/src/editor/plugins/defaultBar/components/ImportButton/template/useImportTemplatesDetails.tsx
+++ b/packages/app-page-builder/src/editor/plugins/defaultBar/components/ImportButton/template/useImportTemplatesDetails.tsx
@@ -1,8 +1,7 @@
 import React from "react";
 import get from "lodash/get";
-import { Typography } from "@webiny/ui/Typography";
+import { Text, Scrollbar } from "@webiny/admin-ui";
 import { i18n } from "@webiny/app/i18n";
-import { Scrollbar } from "@webiny/ui/Scrollbar";
 import { Link } from "@webiny/react-router";
 import { ShowDetails } from "../styledComponents";
 import { ListTemplateImportExportSubTasksResponse } from "~/admin/graphql/templateImportExport.gql";
@@ -17,7 +16,7 @@ interface ImportTemplatesDetailsProps {
 
 const ImportTemplatesDetails = ({ loading, result }: ImportTemplatesDetailsProps) => {
     if (loading || !result) {
-        return <Typography use={"caption"}> {t`Loading details...`} </Typography>;
+        return <Text size={"sm"}>{t`Loading details...`}</Text>;
     }
     const subtasks: PageBuilderImportExportSubTask[] = get(
         result,
@@ -32,22 +31,20 @@ const ImportTemplatesDetails = ({ loading, result }: ImportTemplatesDetailsProps
                         height: 160
                     }}
                 >
-                    <ShowDetails.Label use={"body2"}>{t`Templates imported:`}</ShowDetails.Label>
+                    <ShowDetails.Label size={"sm"}>{t`Templates imported:`}</ShowDetails.Label>
                     <ShowDetails.List data-testid={"import-templates-dialog.show-detail-list"}>
                         {subtasks.map(subtask => {
                             const { template } = subtask.data;
                             return (
                                 <ShowDetails.ListItem key={template.id}>
-                                    <Typography use={"body2"}>{template.title}</Typography>
+                                    <Text size={"sm"}>{template.title}</Text>
                                     <Link
                                         to={`/page-builder/page-templates?id=${encodeURIComponent(
                                             template.id
                                         )}`}
                                         target={"_blank"}
                                     >
-                                        <ShowDetails.LinkText use={"body2"}>
-                                            {t`view`}
-                                        </ShowDetails.LinkText>
+                                        <Text size={"sm"}>{t`view`}</Text>
                                     </Link>
                                 </ShowDetails.ListItem>
                             );
diff --git a/packages/app-page-builder/src/editor/plugins/elementGroups/form/index.tsx b/packages/app-page-builder/src/editor/plugins/elementGroups/form/index.tsx
index 453c0421886..e5f7bd2d0ac 100644
--- a/packages/app-page-builder/src/editor/plugins/elementGroups/form/index.tsx
+++ b/packages/app-page-builder/src/editor/plugins/elementGroups/form/index.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { ReactComponent as FormIcon } from "@material-design-icons/svg/outlined/developer_board.svg";
+import { ReactComponent as FormIcon } from "@webiny/icons/developer_board.svg";
 import { PbEditorPageElementGroupPlugin } from "~/types";
 
 export default {
diff --git a/packages/app-page-builder/src/editor/plugins/elementGroups/layout/index.tsx b/packages/app-page-builder/src/editor/plugins/elementGroups/layout/index.tsx
index 6905fa986d1..87bea974e1f 100644
--- a/packages/app-page-builder/src/editor/plugins/elementGroups/layout/index.tsx
+++ b/packages/app-page-builder/src/editor/plugins/elementGroups/layout/index.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { ReactComponent as LayoutIcon } from "@material-design-icons/svg/outlined/view_quilt.svg";
+import { ReactComponent as LayoutIcon } from "@webiny/icons/view_quilt.svg";
 import { PbEditorPageElementGroupPlugin } from "~/types";
 
 const layoutGroup: PbEditorPageElementGroupPlugin = {
diff --git a/packages/app-page-builder/src/editor/plugins/elementGroups/saved/index.tsx b/packages/app-page-builder/src/editor/plugins/elementGroups/saved/index.tsx
index a879f2c12e2..1c0e628c9e8 100644
--- a/packages/app-page-builder/src/editor/plugins/elementGroups/saved/index.tsx
+++ b/packages/app-page-builder/src/editor/plugins/elementGroups/saved/index.tsx
@@ -1,6 +1,6 @@
 import React from "react";
-import { ReactComponent as SavedIcon } from "@material-design-icons/svg/outlined/favorite_border.svg";
-import { ReactComponent as ContentIcon } from "@material-design-icons/svg/outlined/insights.svg";
+import { ReactComponent as SavedIcon } from "@webiny/icons/favorite_border.svg";
+import { ReactComponent as ContentIcon } from "@webiny/icons/insights.svg";
 import { PbEditorPageElementGroupPlugin } from "~/types";
 import EmptyElementGroupView from "../../../components/EmptyElementGroupView";
 
diff --git a/packages/app-page-builder/src/editor/plugins/elementGroups/social/index.tsx b/packages/app-page-builder/src/editor/plugins/elementGroups/social/index.tsx
index 0b8d1474adb..d1083ecd76c 100644
--- a/packages/app-page-builder/src/editor/plugins/elementGroups/social/index.tsx
+++ b/packages/app-page-builder/src/editor/plugins/elementGroups/social/index.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { ReactComponent as SocialIcon } from "@material-design-icons/svg/outlined/people.svg";
+import { ReactComponent as SocialIcon } from "@webiny/icons/people.svg";
 import { PbEditorPageElementGroupPlugin } from "~/types";
 
 export default {
diff --git a/packages/app-page-builder/src/editor/plugins/elementSettings/save/SaveAction.tsx b/packages/app-page-builder/src/editor/plugins/elementSettings/save/SaveAction.tsx
index 6f44c2d8c2c..6c353f514ce 100644
--- a/packages/app-page-builder/src/editor/plugins/elementSettings/save/SaveAction.tsx
+++ b/packages/app-page-builder/src/editor/plugins/elementSettings/save/SaveAction.tsx
@@ -15,7 +15,7 @@ import {
     PbEditorElement
 } from "~/types";
 import { useEventActionHandler } from "~/editor/hooks/useEventActionHandler";
-import { removeElementId } from "~/editor/helpers";
+import { addElementId, removeElementId } from "~/editor/helpers";
 import { useActiveElement } from "~/editor/hooks/useActiveElement";
 import { usePageBlocks } from "~/admin/contexts/AdminPageBuilder/PageBlocks/usePageBlocks";
 
@@ -58,10 +58,12 @@ const SaveAction = ({ children }: { children: React.ReactElement }) => {
 
     const onSubmit = async (formData: SaveElementFormData | SaveBlockFormData) => {
         const pbElement = (await getElementTree({ element })) as PbElement;
-        const newContent = pluginOnSave(removeElementId(pbElement));
 
         if (formData.type === "block") {
-            // We can create a new block, or update an existing one.
+            // We need to create new element IDs when saving a block.
+            const newContent = pluginOnSave(addElementId(pbElement));
+
+            // We can create a new block or update an existing one.
             try {
                 if (formData.overwrite) {
                     await updateBlock({
@@ -89,6 +91,9 @@ const SaveAction = ({ children }: { children: React.ReactElement }) => {
                 </span>
             );
         } else {
+            // When saving a simple element, we remove all element IDs.
+            const newContent = pluginOnSave(removeElementId(pbElement));
+
             const { data: res } = await client.mutate({
                 mutation: CREATE_PAGE_ELEMENT,
                 variables: {
diff --git a/packages/app-page-builder/src/editor/plugins/elementSettings/variable/RichVariableInput.tsx b/packages/app-page-builder/src/editor/plugins/elementSettings/variable/RichVariableInput.tsx
index c8bc3ec3164..ece1aaea9d1 100644
--- a/packages/app-page-builder/src/editor/plugins/elementSettings/variable/RichVariableInput.tsx
+++ b/packages/app-page-builder/src/editor/plugins/elementSettings/variable/RichVariableInput.tsx
@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useState } from "react";
 import styled from "@emotion/styled";
 import { CoreOptions } from "medium-editor";
-import { ReactComponent as ExpandIcon } from "@material-design-icons/svg/filled/fullscreen.svg";
+import { ReactComponent as ExpandIcon } from "@webiny/icons/fullscreen.svg";
 import { makeDecoratable } from "@webiny/app-admin";
 import { Dialog, DialogActions, DialogContent } from "@webiny/ui/Dialog";
 import { ButtonPrimary, IconButton } from "@webiny/ui/Button";
diff --git a/packages/app-page-builder/src/editor/plugins/elements/accordion/index.tsx b/packages/app-page-builder/src/editor/plugins/elements/accordion/index.tsx
index 260184e0839..7b4304e4349 100644
--- a/packages/app-page-builder/src/editor/plugins/elements/accordion/index.tsx
+++ b/packages/app-page-builder/src/editor/plugins/elements/accordion/index.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import styled from "@emotion/styled";
 import kebabCase from "lodash/kebabCase";
-import { ReactComponent as AccordionIcon } from "@material-design-icons/svg/filled/view_day.svg";
+import { ReactComponent as AccordionIcon } from "@webiny/icons/view_day.svg";
 import { createInitialPerDeviceSettingValue } from "~/editor/plugins/elementSettings/elementSettingsUtils";
 import { createElement } from "~/editor/helpers";
 import Accordion from "./Accordion";
diff --git a/packages/app-page-builder/src/editor/plugins/elements/button/index.tsx b/packages/app-page-builder/src/editor/plugins/elements/button/index.tsx
index 8731c813c35..f1618227843 100644
--- a/packages/app-page-builder/src/editor/plugins/elements/button/index.tsx
+++ b/packages/app-page-builder/src/editor/plugins/elements/button/index.tsx
@@ -79,7 +79,7 @@ const buttonElementPluginsFactory = (args: PbEditorElementPluginArgs = {}) => {
                 return typeof args.create === "function" ? args.create(defaultValue) : defaultValue;
             },
             render({ element, ...rest }) {
-                return <ButtonRenderer element={element as Element} {...rest} />;
+                return <ButtonRenderer element={element as Element} {...rest} isEditor />;
             }
         } as PbEditorPageElementPlugin,
         {
diff --git a/packages/app-page-builder/src/editor/plugins/elements/carousel/index.tsx b/packages/app-page-builder/src/editor/plugins/elements/carousel/index.tsx
index 5c321138106..4fbc68d3f10 100644
--- a/packages/app-page-builder/src/editor/plugins/elements/carousel/index.tsx
+++ b/packages/app-page-builder/src/editor/plugins/elements/carousel/index.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import kebabCase from "lodash/kebabCase";
 import styled from "@emotion/styled";
 import { createElement } from "~/editor/helpers";
-import { ReactComponent as CarouselIcon } from "@material-design-icons/svg/round/view_carousel.svg";
+import { ReactComponent as CarouselIcon } from "@webiny/icons/view_carousel.svg";
 import { createInitialPerDeviceSettingValue } from "~/editor/plugins/elementSettings/elementSettingsUtils";
 import { PbEditorPageElementPlugin, PbEditorElementPluginArgs, DisplayMode } from "~/types";
 import Carousel from "./Carousel";
diff --git a/packages/app-page-builder/src/editor/plugins/elements/image/PeImage.tsx b/packages/app-page-builder/src/editor/plugins/elements/image/PeImage.tsx
index d586ca3b93d..174014321ec 100644
--- a/packages/app-page-builder/src/editor/plugins/elements/image/PeImage.tsx
+++ b/packages/app-page-builder/src/editor/plugins/elements/image/PeImage.tsx
@@ -1,13 +1,49 @@
 import React, { useCallback } from "react";
+import styled from "@emotion/styled";
 import { FileManager, SingleImageUploadProps } from "@webiny/app-admin";
 import { ImageRenderer } from "@webiny/app-page-builder-elements/renderers/image";
-import { AddImageIconWrapper, AddImageWrapper } from "@webiny/ui/ImageUpload/styled";
-import { ReactComponent as AddImageIcon } from "@webiny/ui/ImageUpload/icons/round-add_photo_alternate-24px.svg";
+import { ReactComponent as AddImageIcon } from "@webiny/icons/add_photo_alternate.svg";
 import { Typography } from "@webiny/ui/Typography";
 import { UpdateElementActionEvent } from "~/editor/recoil/actions";
 import { useEventActionHandler } from "~/editor/hooks/useEventActionHandler";
 import { PbElement } from "~/types";
 
+export const AddImageIconWrapper = styled("div")({
+    color: "var(--mdc-theme-text-secondary-on-background)",
+    ">svg": {
+        width: "100%",
+        height: "100%",
+        maxWidth: 50,
+        maxHeight: 50,
+        display: "block",
+        opacity: 0.5,
+        margin: "0 auto"
+    }
+});
+
+export const AddImageWrapper = styled("div")({
+    width: "100%",
+    height: "100%",
+    minHeight: 50,
+    minWidth: 50,
+    textAlign: "center",
+    backgroundColor: "var(--mdc-theme-on-background)",
+    borderRadius: 0,
+    borderBottom: "1px solid var(--mdc-theme-text-hint-on-background)",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-around",
+    flexDirection: "column",
+    transition: "color 0.2s",
+    cursor: "pointer",
+    padding: 10,
+    boxSizing: "border-box",
+    "&:hover": {
+        backgroundColor: "rgba(0,0,0, 0.5)",
+        borderBottom: "1px solid var(--mdc-theme-on-surface)"
+    }
+});
+
 const RenderBlank = (props: { onClick?: () => void }) => {
     return (
         <AddImageWrapper data-role={"select-image"} onClick={props.onClick}>
diff --git a/packages/app-page-builder/src/editor/plugins/elements/tabs/index.tsx b/packages/app-page-builder/src/editor/plugins/elements/tabs/index.tsx
index 7a22ead62b3..dd06c9a9a24 100644
--- a/packages/app-page-builder/src/editor/plugins/elements/tabs/index.tsx
+++ b/packages/app-page-builder/src/editor/plugins/elements/tabs/index.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import styled from "@emotion/styled";
 import kebabCase from "lodash/kebabCase";
-import { ReactComponent as TabsIcon } from "@material-design-icons/svg/round/tab.svg";
+import { ReactComponent as TabsIcon } from "@webiny/icons/tab.svg";
 import { createInitialPerDeviceSettingValue } from "~/editor/plugins/elementSettings/elementSettingsUtils";
 import { createElement } from "~/editor/helpers";
 import Tabs from "./Tabs";
diff --git a/packages/app-page-builder/src/modules/WebsiteSettings/WebsiteSettings.tsx b/packages/app-page-builder/src/modules/WebsiteSettings/WebsiteSettings.tsx
index 197d43a34e6..255d6c06469 100644
--- a/packages/app-page-builder/src/modules/WebsiteSettings/WebsiteSettings.tsx
+++ b/packages/app-page-builder/src/modules/WebsiteSettings/WebsiteSettings.tsx
@@ -1,7 +1,6 @@
 import React, { Fragment } from "react";
 import { HasPermission } from "@webiny/app-security";
-
-import { AddRoute, Layout } from "@webiny/app-admin";
+import { Layout } from "@webiny/app-admin";
 import { GeneralSettings } from "./settingsGroups/GeneralSettings";
 import { DefaultPages } from "./settingsGroups/DefaultPages";
 import { WebsiteSettingsView } from "./WebsiteSettingsView";
@@ -10,17 +9,27 @@ import { SocialMedia } from "./settingsGroups/SocialMedia";
 import { HtmlTags } from "./settingsGroups/HtmlTags";
 import { WebsiteSettingsWithConfig } from "./config/WebsiteSettingsConfig";
 
+import { AdminConfig } from "@webiny/app-admin";
+
+const { Route } = AdminConfig;
+
 export const WebsiteSettings = () => {
     return (
         <Fragment>
             <HasPermission name={"pb.settings"}>
-                <AddRoute path="/settings/page-builder/website">
-                    <Layout title={"Page Builder - Website Settings"}>
-                        <WebsiteSettingsWithConfig>
-                            <WebsiteSettingsView />
-                        </WebsiteSettingsWithConfig>
-                    </Layout>
-                </AddRoute>
+                <AdminConfig>
+                    <Route
+                        name={"pb.settings"}
+                        path="/settings/page-builder/website"
+                        element={
+                            <Layout title={"Page Builder - Website Settings"}>
+                                <WebsiteSettingsWithConfig>
+                                    <WebsiteSettingsView />
+                                </WebsiteSettingsWithConfig>
+                            </Layout>
+                        }
+                    />
+                </AdminConfig>
             </HasPermission>
             <GeneralSettings />
             <DefaultPages />
diff --git a/packages/app-page-builder/src/modules/WebsiteSettings/WebsiteSettingsView.tsx b/packages/app-page-builder/src/modules/WebsiteSettings/WebsiteSettingsView.tsx
index 5a8b8d91ef3..ed588c9cb66 100644
--- a/packages/app-page-builder/src/modules/WebsiteSettings/WebsiteSettingsView.tsx
+++ b/packages/app-page-builder/src/modules/WebsiteSettings/WebsiteSettingsView.tsx
@@ -1,8 +1,6 @@
 import React, { Fragment } from "react";
 import { CenteredView } from "@webiny/app-admin";
 import { Form } from "@webiny/form";
-import { ButtonPrimary } from "@webiny/ui/Button";
-import { CircularProgress } from "@webiny/ui/Progress";
 import {
     SimpleForm,
     SimpleFormContent,
@@ -11,7 +9,8 @@ import {
 } from "@webiny/app-admin/components/SimpleForm";
 import { usePbWebsiteSettings } from "./usePbWebsiteSettings";
 import { WebsiteSettingsConfig } from "~/modules/WebsiteSettings/config/WebsiteSettingsConfig";
-import { Cell, Grid } from "@webiny/ui/Grid";
+
+import { Button, Grid, OverlayLoader } from "@webiny/admin-ui";
 
 export const WebsiteSettingsView = () => {
     const { fetching, saving, settings, saveSettings } = usePbWebsiteSettings();
@@ -22,30 +21,29 @@ export const WebsiteSettingsView = () => {
             <Form data={settings} onSubmit={saveSettings}>
                 {({ submit }) => (
                     <SimpleForm>
-                        {fetching && <CircularProgress label={"Loading settings..."} />}
-                        {saving && <CircularProgress label={"Saving settings..."} />}
-                        {groups.map(group => (
+                        {fetching && <OverlayLoader text={"Loading settings..."} />}
+                        {saving && <OverlayLoader text={"Saving settings..."} />}
+                        {groups.map((group, index) => (
                             <Fragment key={group.name}>
-                                <SimpleFormHeader title={group.label} />
+                                <SimpleFormHeader title={group.label} rounded={index === 0} />
                                 <SimpleFormContent>
                                     <Grid>
                                         {(group.elements || []).map(el => (
-                                            <Cell key={el.name} span={12}>
+                                            <Grid.Column key={el.name} span={12}>
                                                 {el.element}
-                                            </Cell>
+                                            </Grid.Column>
                                         ))}
                                     </Grid>
                                 </SimpleFormContent>
                             </Fragment>
                         ))}
                         <SimpleFormFooter>
-                            <ButtonPrimary
+                            <Button
+                                text={"Save"}
                                 onClick={ev => {
                                     submit(ev);
                                 }}
-                            >
-                                Save
-                            </ButtonPrimary>
+                            />
                         </SimpleFormFooter>
                     </SimpleForm>
                 )}
diff --git a/packages/app-page-builder/src/modules/WebsiteSettings/settingsGroups/GeneralSettings.tsx b/packages/app-page-builder/src/modules/WebsiteSettings/settingsGroups/GeneralSettings.tsx
index 44db66e8add..b72fe1d3afe 100644
--- a/packages/app-page-builder/src/modules/WebsiteSettings/settingsGroups/GeneralSettings.tsx
+++ b/packages/app-page-builder/src/modules/WebsiteSettings/settingsGroups/GeneralSettings.tsx
@@ -65,7 +65,7 @@ const WebsitePreviewURL = () => {
 export const GeneralSettings = () => {
     return (
         <WebsiteSettingsConfig>
-            <Group name={"website"} label={"Website Settings"}>
+            <Group name={"website"} label={"Website settings"}>
                 <Element
                     name={"name"}
                     element={
diff --git a/packages/app-page-builder/src/pageEditor/config/Toolbar/UnlinkTemplate.tsx b/packages/app-page-builder/src/pageEditor/config/Toolbar/UnlinkTemplate.tsx
index 672177bda00..6dd41d17cd9 100644
--- a/packages/app-page-builder/src/pageEditor/config/Toolbar/UnlinkTemplate.tsx
+++ b/packages/app-page-builder/src/pageEditor/config/Toolbar/UnlinkTemplate.tsx
@@ -2,7 +2,7 @@ import React, { useCallback, useState } from "react";
 import { css } from "emotion";
 import { IconButton, ButtonPrimary } from "@webiny/ui/Button";
 import { Dialog, DialogCancel, DialogTitle, DialogActions, DialogContent } from "@webiny/ui/Dialog";
-import { ReactComponent as LockIcon } from "@material-design-icons/svg/outlined/lock.svg";
+import { ReactComponent as LockIcon } from "@webiny/icons/lock.svg";
 import { useTemplateMode } from "~/pageEditor/hooks/useTemplateMode";
 import { usePage } from "~/pageEditor/hooks/usePage";
 import { PageEditorConfig } from "~/pageEditor/editorConfig/PageEditorConfig";
diff --git a/packages/app-page-builder/src/pageEditor/config/TopBar/BackButton/BackButton.tsx b/packages/app-page-builder/src/pageEditor/config/TopBar/BackButton/BackButton.tsx
index c1064e9152e..2645c2e62bf 100644
--- a/packages/app-page-builder/src/pageEditor/config/TopBar/BackButton/BackButton.tsx
+++ b/packages/app-page-builder/src/pageEditor/config/TopBar/BackButton/BackButton.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { ReactComponent as BackIcon } from "@material-design-icons/svg/round/arrow_back.svg";
+import { ReactComponent as BackIcon } from "@webiny/icons/arrow_back.svg";
 import styled from "@emotion/styled";
 import { IconButton } from "@webiny/ui/Button";
 import { useNavigatePage } from "~/admin/hooks/useNavigatePage";
diff --git a/packages/app-page-builder/src/pageEditor/config/TopBar/PageSettings/PageSettingsButton.tsx b/packages/app-page-builder/src/pageEditor/config/TopBar/PageSettings/PageSettingsButton.tsx
index f4b14510d0a..e7e1a1370ab 100644
--- a/packages/app-page-builder/src/pageEditor/config/TopBar/PageSettings/PageSettingsButton.tsx
+++ b/packages/app-page-builder/src/pageEditor/config/TopBar/PageSettings/PageSettingsButton.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { IconButton } from "@webiny/ui/Button";
-import { ReactComponent as SettingsIcon } from "@material-design-icons/svg/round/settings.svg";
+import { ReactComponent as SettingsIcon } from "@webiny/icons/settings.svg";
 import { usePageSettings } from "./usePageSettings";
 
 export const PageSettingsButton = () => {
diff --git a/packages/app-page-builder/src/pageEditor/config/TopBar/PreviewPageOption/PreviewPageOption.tsx b/packages/app-page-builder/src/pageEditor/config/TopBar/PreviewPageOption/PreviewPageOption.tsx
index e99e3143409..5bd05d09607 100644
--- a/packages/app-page-builder/src/pageEditor/config/TopBar/PreviewPageOption/PreviewPageOption.tsx
+++ b/packages/app-page-builder/src/pageEditor/config/TopBar/PreviewPageOption/PreviewPageOption.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { ReactComponent as PreviewIcon } from "@material-design-icons/svg/round/visibility.svg";
+import { ReactComponent as PreviewIcon } from "@webiny/icons/visibility.svg";
 import { usePage } from "~/pageEditor/hooks/usePage";
 import { usePreviewPage } from "~/admin/hooks/usePreviewPage";
 import { PageEditorConfig } from "~/pageEditor/editorConfig/PageEditorConfig";
diff --git a/packages/app-page-builder/src/pageEditor/config/TopBar/Revisions/Revisions.tsx b/packages/app-page-builder/src/pageEditor/config/TopBar/Revisions/Revisions.tsx
index aac6ec6ee02..b4558b8e555 100644
--- a/packages/app-page-builder/src/pageEditor/config/TopBar/Revisions/Revisions.tsx
+++ b/packages/app-page-builder/src/pageEditor/config/TopBar/Revisions/Revisions.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { css } from "emotion";
-import { ReactComponent as DownButton } from "@material-design-icons/svg/round/arrow_drop_down.svg";
+import { ReactComponent as DownButton } from "@webiny/icons/arrow_drop_down.svg";
 import { Menu, MenuItem } from "@webiny/ui/Menu";
 import { ButtonDefault } from "@webiny/ui/Button";
 import { Icon } from "@webiny/ui/Icon";
diff --git a/packages/app-page-builder/src/pageEditor/config/TopBar/SetAsHomepageOption/SetAsHomepageOption.tsx b/packages/app-page-builder/src/pageEditor/config/TopBar/SetAsHomepageOption/SetAsHomepageOption.tsx
index 584c8e6e7ef..deef0daf2b7 100644
--- a/packages/app-page-builder/src/pageEditor/config/TopBar/SetAsHomepageOption/SetAsHomepageOption.tsx
+++ b/packages/app-page-builder/src/pageEditor/config/TopBar/SetAsHomepageOption/SetAsHomepageOption.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback } from "react";
-import { ReactComponent as HomeIcon } from "@material-design-icons/svg/round/home.svg";
+import { ReactComponent as HomeIcon } from "@webiny/icons/home.svg";
 import { useConfirmationDialog } from "@webiny/app-admin";
 import { useSnackbar } from "@webiny/app-admin/hooks/useSnackbar";
 import { useAdminPageBuilder } from "~/admin/hooks/useAdminPageBuilder";
diff --git a/packages/app-page-builder/src/plugins/PbEditorPageElementGroupPlugin.tsx b/packages/app-page-builder/src/plugins/PbEditorPageElementGroupPlugin.tsx
new file mode 100644
index 00000000000..f00e9f71c1e
--- /dev/null
+++ b/packages/app-page-builder/src/plugins/PbEditorPageElementGroupPlugin.tsx
@@ -0,0 +1,26 @@
+import React from "react";
+import { legacyPluginToReactComponent } from "@webiny/app/utils";
+
+interface PbEditorPageElementGroupPlugin {
+    name: string;
+    title: string;
+    icon: React.ReactNode;
+    emptyView?: React.ReactNode;
+}
+
+export const PbEditorPageElementGroupPlugin =
+    legacyPluginToReactComponent<PbEditorPageElementGroupPlugin>({
+        pluginType: "pb-editor-page-element-group",
+        componentDisplayName: "PbEditorPageElementGroupPlugin",
+        mapProps: props => {
+            const { title, icon, emptyView } = props;
+            return {
+                ...props,
+                group: {
+                    title,
+                    icon,
+                    emptyView
+                }
+            };
+        }
+    });
diff --git a/packages/app-page-builder/src/plugins/index.ts b/packages/app-page-builder/src/plugins/index.ts
index bef3be129d8..a55f7e15f46 100644
--- a/packages/app-page-builder/src/plugins/index.ts
+++ b/packages/app-page-builder/src/plugins/index.ts
@@ -1,4 +1,5 @@
 export * from "./PbPageLayoutPlugin";
 export * from "./PbEditorPageElementAdvancedSettingsPlugin";
 export * from "./PbRenderElementPlugin";
+export * from "./PbEditorPageElementGroupPlugin";
 export * from "./PbEditorPageElementPlugin";
diff --git a/packages/app-page-builder/src/render/plugins/elements/imagesList/components/Mosaic.tsx b/packages/app-page-builder/src/render/plugins/elements/imagesList/components/Mosaic.tsx
index 5db8dde4625..6ac63df2d0b 100644
--- a/packages/app-page-builder/src/render/plugins/elements/imagesList/components/Mosaic.tsx
+++ b/packages/app-page-builder/src/render/plugins/elements/imagesList/components/Mosaic.tsx
@@ -1,6 +1,10 @@
 import * as React from "react";
-import { Mosaic as UiMosaic } from "@webiny/ui/Mosaic";
 import Lightbox, { Image } from "react-images";
+/**
+ * Package react-columned does not have types.
+ */
+// @ts-expect-error
+import Columned from "react-columned";
 
 const { useReducer } = React;
 
@@ -50,15 +54,23 @@ const useLightbox = () => {
 
 export interface MosaicProps {
     data: Image[];
+
+    // Number of columns, per max screen size, eg. { "320": 1, "480": 2, "800": 3, "1366": 4 }.
+    columns?: {
+        [key: string]: number;
+    };
+
+    // Custom class for the mosaic container.
+    className?: string;
 }
 const MosaicComponent = (props: MosaicProps) => {
-    const { data } = props;
+    const { data, columns = { 320: 1, 480: 2, 800: 3, 1366: 4 }, className } = props;
     const { opened, open, close, next, prev, currentIndex } = useLightbox();
 
     if (Array.isArray(data)) {
         return (
             <>
-                <UiMosaic>
+                <Columned columns={columns} className={className}>
                     {data.map((item, i) => (
                         <img
                             onClick={() => open(i)}
@@ -67,7 +79,7 @@ const MosaicComponent = (props: MosaicProps) => {
                             src={item.src}
                         />
                     ))}
-                </UiMosaic>
+                </Columned>
 
                 <Lightbox
                     images={data}
diff --git a/packages/app-page-builder/src/templateEditor/config/Content/BlocksBrowser/AddBlock.tsx b/packages/app-page-builder/src/templateEditor/config/Content/BlocksBrowser/AddBlock.tsx
index c9d88667515..90dadd52692 100644
--- a/packages/app-page-builder/src/templateEditor/config/Content/BlocksBrowser/AddBlock.tsx
+++ b/packages/app-page-builder/src/templateEditor/config/Content/BlocksBrowser/AddBlock.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import styled from "@emotion/styled";
 import { ButtonFloating } from "@webiny/ui/Button";
-import { ReactComponent as AddIcon } from "@material-design-icons/svg/round/add.svg";
+import { ReactComponent as AddIcon } from "@webiny/icons/add.svg";
 import { useBlocksBrowser } from "./useBlocksBrowser";
 
 const SIDEBAR_WIDTH = 300;
diff --git a/packages/app-page-builder/src/templateEditor/config/Content/BlocksBrowser/AddContent.tsx b/packages/app-page-builder/src/templateEditor/config/Content/BlocksBrowser/AddContent.tsx
index e54937aed09..78f4fc3e13b 100644
--- a/packages/app-page-builder/src/templateEditor/config/Content/BlocksBrowser/AddContent.tsx
+++ b/packages/app-page-builder/src/templateEditor/config/Content/BlocksBrowser/AddContent.tsx
@@ -4,7 +4,7 @@ import { keyframes } from "emotion";
 import styled from "@emotion/styled";
 import { Elevation } from "@webiny/ui/Elevation";
 import { ButtonFloating } from "@webiny/ui/Button";
-import { ReactComponent as AddIcon } from "@material-design-icons/svg/round/add.svg";
+import { ReactComponent as AddIcon } from "@webiny/icons/add.svg";
 import { useDisplayMode } from "~/editor/hooks/useDisplayMode";
 import { elementsInContentTotalSelector } from "~/pageEditor/state";
 import { useBlocksBrowser } from "./useBlocksBrowser";
diff --git a/packages/app-page-builder/src/templateEditor/config/Content/BlocksBrowser/BlockPreview.tsx b/packages/app-page-builder/src/templateEditor/config/Content/BlocksBrowser/BlockPreview.tsx
index 5f40c58b662..4ab17efe4c1 100644
--- a/packages/app-page-builder/src/templateEditor/config/Content/BlocksBrowser/BlockPreview.tsx
+++ b/packages/app-page-builder/src/templateEditor/config/Content/BlocksBrowser/BlockPreview.tsx
@@ -6,8 +6,8 @@ import { Tooltip } from "@webiny/ui/Tooltip";
 import { Typography } from "@webiny/ui/Typography";
 import { CircularProgress } from "@webiny/ui/Progress";
 import { ConfirmationDialog } from "@webiny/ui/ConfirmationDialog";
-import { ReactComponent as EditIcon } from "@material-design-icons/svg/round/edit.svg";
-import { ReactComponent as DeleteIcon } from "@material-design-icons/svg/round/delete.svg";
+import { ReactComponent as EditIcon } from "@webiny/icons/edit.svg";
+import { ReactComponent as DeleteIcon } from "@webiny/icons/delete.svg";
 import * as Styled from "./StyledComponents";
 import kebabCase from "lodash/kebabCase";
 import { PbEditorBlockPlugin } from "~/types";
diff --git a/packages/app-page-builder/src/templateEditor/config/Content/BlocksBrowser/SearchBlocks.tsx b/packages/app-page-builder/src/templateEditor/config/Content/BlocksBrowser/SearchBlocks.tsx
index 9415ce5ab60..24f0df66608 100644
--- a/packages/app-page-builder/src/templateEditor/config/Content/BlocksBrowser/SearchBlocks.tsx
+++ b/packages/app-page-builder/src/templateEditor/config/Content/BlocksBrowser/SearchBlocks.tsx
@@ -16,7 +16,7 @@ import {
     SimpleFormHeader
 } from "@webiny/app-admin/components/SimpleForm";
 
-import { ReactComponent as AllIcon } from "@material-design-icons/svg/round/clear_all.svg";
+import { ReactComponent as AllIcon } from "@webiny/icons/clear_all.svg";
 import { DelayedOnChange } from "@webiny/ui/DelayedOnChange";
 import { BlocksList } from "./BlocksList";
 import EditBlockDialog from "./EditBlockDialog";
diff --git a/packages/app-page-builder/src/templateEditor/config/Sidebar/EditBlockAction.tsx b/packages/app-page-builder/src/templateEditor/config/Sidebar/EditBlockAction.tsx
index 35ce80b0508..d7a28ffda75 100644
--- a/packages/app-page-builder/src/templateEditor/config/Sidebar/EditBlockAction.tsx
+++ b/packages/app-page-builder/src/templateEditor/config/Sidebar/EditBlockAction.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { ReactComponent as EditIcon } from "@material-design-icons/svg/round/edit.svg";
+import { ReactComponent as EditIcon } from "@webiny/icons/edit.svg";
 import { TemplateEditorConfig } from "~/templateEditor/editorConfig/TemplateEditorConfig";
 import { useBlockReference } from "./useBlockReference";
 
diff --git a/packages/app-page-builder/src/templateEditor/config/Sidebar/RefreshBlockAction.tsx b/packages/app-page-builder/src/templateEditor/config/Sidebar/RefreshBlockAction.tsx
index 25676617773..60d5851e5e7 100644
--- a/packages/app-page-builder/src/templateEditor/config/Sidebar/RefreshBlockAction.tsx
+++ b/packages/app-page-builder/src/templateEditor/config/Sidebar/RefreshBlockAction.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { ReactComponent as RefreshIcon } from "@material-design-icons/svg/round/refresh.svg";
+import { ReactComponent as RefreshIcon } from "@webiny/icons/refresh.svg";
 import { TemplateEditorConfig } from "~/templateEditor/editorConfig/TemplateEditorConfig";
 import { useBlockReference } from "./useBlockReference";
 import { useRefreshBlock } from "~/editor/hooks/useRefreshBlock";
diff --git a/packages/app-page-builder/src/templateEditor/config/TopBar/BackButton/BackButton.tsx b/packages/app-page-builder/src/templateEditor/config/TopBar/BackButton/BackButton.tsx
index 2e579186974..ad2036cf4ac 100644
--- a/packages/app-page-builder/src/templateEditor/config/TopBar/BackButton/BackButton.tsx
+++ b/packages/app-page-builder/src/templateEditor/config/TopBar/BackButton/BackButton.tsx
@@ -2,7 +2,7 @@ import React, { useCallback } from "react";
 import { css } from "emotion";
 import { useNavigate } from "@webiny/react-router";
 import { IconButton } from "@webiny/ui/Button";
-import { ReactComponent as BackIcon } from "@material-design-icons/svg/round/arrow_back.svg";
+import { ReactComponent as BackIcon } from "@webiny/icons/arrow_back.svg";
 import { TopBar } from "~/editor/config/TopBar/TopBar";
 
 const backStyles = css({
diff --git a/packages/app-page-builder/src/templateEditor/config/TopBar/TemplateSettingsButton/TemplateSettingsButton.tsx b/packages/app-page-builder/src/templateEditor/config/TopBar/TemplateSettingsButton/TemplateSettingsButton.tsx
index 230cddd336f..d3fd8c8f1f4 100644
--- a/packages/app-page-builder/src/templateEditor/config/TopBar/TemplateSettingsButton/TemplateSettingsButton.tsx
+++ b/packages/app-page-builder/src/templateEditor/config/TopBar/TemplateSettingsButton/TemplateSettingsButton.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useCallback } from "react";
 import { IconButton } from "@webiny/ui/Button";
-import { ReactComponent as SettingsIcon } from "@material-design-icons/svg/round/settings.svg";
+import { ReactComponent as SettingsIcon } from "@webiny/icons/settings.svg";
 import TemplateSettingsModal from "./TemplateSettingsModal";
 
 export const TemplateSettingsButton = () => {
diff --git a/packages/app-page-builder/src/translations/ExtractTranslatableValues/CollectElementValues.tsx b/packages/app-page-builder/src/translations/ExtractTranslatableValues/CollectElementValues.tsx
index 8b1c86ca6a1..45957c92362 100644
--- a/packages/app-page-builder/src/translations/ExtractTranslatableValues/CollectElementValues.tsx
+++ b/packages/app-page-builder/src/translations/ExtractTranslatableValues/CollectElementValues.tsx
@@ -17,12 +17,15 @@ export interface CreateTranslatableItemParams {
     };
 }
 
-export interface CreateTranslatableItem {
-    (params: CreateTranslatableItemParams): Omit<TranslatableItem, "collectionId">;
+export type NewTranslatableItem = Omit<TranslatableItem, "collectionId"> &
+    Partial<Pick<TranslatableItem, "collectionId">>;
+
+export interface CreateTranslatableItems {
+    (params: CreateTranslatableItemParams): NewTranslatableItem[];
 }
 
 export const createElementRendererInputsDecorator = (
-    createTranslatableItem: CreateTranslatableItem
+    createTranslatableItems: CreateTranslatableItems
 ) => {
     return ElementRendererInputs.createDecorator(Original => {
         return function CollectElementValues(props) {
@@ -40,16 +43,20 @@ export const createElementRendererInputsDecorator = (
                         return;
                     }
 
-                    translations.setTranslationItem({
-                        collectionId: `page:${page.id}`,
-                        ...createTranslatableItem({
-                            element,
-                            value,
-                            input: {
-                                name: key,
-                                type: inputs[key].getType()
-                            }
-                        })
+                    const items = createTranslatableItems({
+                        element,
+                        value,
+                        input: {
+                            name: key,
+                            type: inputs[key].getType()
+                        }
+                    });
+
+                    items.forEach(({ collectionId, ...item }) => {
+                        translations.setTranslationItem({
+                            collectionId: collectionId ?? `page:${page.id}`,
+                            ...item
+                        });
                     });
                 });
             }, [element.id, values]);
diff --git a/packages/app-page-builder/src/translations/ExtractTranslatableValues/ExtractTranslatableValues.tsx b/packages/app-page-builder/src/translations/ExtractTranslatableValues/ExtractTranslatableValues.tsx
index e111f592bd1..6956b9694df 100644
--- a/packages/app-page-builder/src/translations/ExtractTranslatableValues/ExtractTranslatableValues.tsx
+++ b/packages/app-page-builder/src/translations/ExtractTranslatableValues/ExtractTranslatableValues.tsx
@@ -4,17 +4,20 @@ import { SaveTranslatableValues } from "~/translations/ExtractTranslatableValues
 import { PageEditorConfig } from "~/pageEditor";
 import {
     createElementRendererInputsDecorator,
-    CreateTranslatableItem
+    CreateTranslatableItems,
+    NewTranslatableItem
 } from "~/translations/ExtractTranslatableValues/CollectElementValues";
 
-interface ExtractTranslatableValuesProps {
-    createTranslatableItem: CreateTranslatableItem;
+export interface ExtractTranslatableValuesProps {
+    createTranslatableItems: CreateTranslatableItems;
 }
 
+export type { NewTranslatableItem, CreateTranslatableItems };
+
 export const ExtractTranslatableValues = ({
-    createTranslatableItem
+    createTranslatableItems
 }: ExtractTranslatableValuesProps) => {
-    const CollectElementValues = createElementRendererInputsDecorator(createTranslatableItem);
+    const CollectElementValues = createElementRendererInputsDecorator(createTranslatableItems);
 
     return (
         <>
diff --git a/packages/app-page-builder/src/translations/index.ts b/packages/app-page-builder/src/translations/index.ts
index 1ad01c48c4e..9bbdd54650b 100644
--- a/packages/app-page-builder/src/translations/index.ts
+++ b/packages/app-page-builder/src/translations/index.ts
@@ -4,5 +4,9 @@ export * from "./translatedCollection/getTranslatedCollection/useTranslatedColle
 export * from "./translatedCollection/saveTranslatedCollection/useSaveTranslatedCollection";
 
 export * from "./ExtractTranslatableValues/ExtractTranslatableValues";
+export type {
+    NewTranslatableItem,
+    CreateTranslatableItems
+} from "./ExtractTranslatableValues/ExtractTranslatableValues";
 export * from "./ListCache";
 export * from "./Loading";
diff --git a/packages/app-page-builder/src/types.ts b/packages/app-page-builder/src/types.ts
index 8d25240008b..56f0c043c3f 100644
--- a/packages/app-page-builder/src/types.ts
+++ b/packages/app-page-builder/src/types.ts
@@ -4,7 +4,6 @@ import { BaseEventAction, EventAction } from "./editor/recoil/eventActions";
 import { PbState } from "./editor/recoil/modules/types";
 import { GenericRecord, Plugin } from "@webiny/app/types";
 import { BindComponent } from "@webiny/form";
-import { IconName, IconPrefix } from "@fortawesome/fontawesome-svg-core";
 import { Icon } from "@webiny/app-admin/components/IconPicker/types";
 import { FormAPI, FormOnSubmit, FormSetValue, GenericFormData } from "@webiny/form/types";
 import { CoreOptions } from "medium-editor";
@@ -15,6 +14,7 @@ import { Theme } from "@webiny/app-theme/types";
 import { Renderer } from "@webiny/app-page-builder-elements/types";
 import { FolderTableItem, RecordTableItem, SearchRecordItem } from "@webiny/app-aco/table.types";
 import type { SourceType } from "dnd-core";
+import { IconPickerIconDto } from "@webiny/admin-ui";
 
 export type DragObjectWithType = {
     type: SourceType;
@@ -622,24 +622,9 @@ export interface PbEditorPageQueryFieldsPlugin extends Plugin {
     fields: string;
 }
 
-export type PbIcon = {
-    /**
-     * [ pack, icon ], ex: ["fab", "cog"]
-     */
-    id: [IconPrefix, IconName];
-    /**
-     * Icon name
-     */
-    name: string;
-    /**
-     * SVG element
-     */
-    svg: ReactElement;
-};
-
 export type PbIconsPlugin = Plugin & {
     type: "pb-icons";
-    getIcons(): PbIcon[];
+    getIcons(): IconPickerIconDto[];
 };
 
 export type PbEditorToolbarTopPlugin = Plugin & {
diff --git a/packages/app-page-builder/tsconfig.build.json b/packages/app-page-builder/tsconfig.build.json
index e644990fab3..3f0e3d937ee 100644
--- a/packages/app-page-builder/tsconfig.build.json
+++ b/packages/app-page-builder/tsconfig.build.json
@@ -2,6 +2,7 @@
   "extends": "../../tsconfig.build.json",
   "include": ["src"],
   "references": [
+    { "path": "../admin-ui/tsconfig.build.json" },
     { "path": "../app/tsconfig.build.json" },
     { "path": "../app-aco/tsconfig.build.json" },
     { "path": "../app-admin/tsconfig.build.json" },
diff --git a/packages/app-page-builder/tsconfig.json b/packages/app-page-builder/tsconfig.json
index e6864f52e6f..549729b6f6d 100644
--- a/packages/app-page-builder/tsconfig.json
+++ b/packages/app-page-builder/tsconfig.json
@@ -2,6 +2,7 @@
   "extends": "../../tsconfig.json",
   "include": ["src", "__tests__"],
   "references": [
+    { "path": "../admin-ui" },
     { "path": "../app" },
     { "path": "../app-aco" },
     { "path": "../app-admin" },
@@ -31,6 +32,8 @@
     "paths": {
       "~/*": ["./src/*"],
       "~tests/*": ["./__tests__/*"],
+      "@webiny/admin-ui/*": ["../admin-ui/src/*"],
+      "@webiny/admin-ui": ["../admin-ui/src"],
       "@webiny/app/*": ["../app/src/*"],
       "@webiny/app": ["../app/src"],
       "@webiny/app-aco/*": ["../app-aco/src/*"],
diff --git a/packages/app-plugin-admin-welcome-screen/src/types.ts b/packages/app-plugin-admin-welcome-screen/src/types.ts
index a9ef502b72e..0c6c40d1459 100644
--- a/packages/app-plugin-admin-welcome-screen/src/types.ts
+++ b/packages/app-plugin-admin-welcome-screen/src/types.ts
@@ -7,6 +7,7 @@ export type AdminWelcomeScreenWidgetPlugin = Plugin & {
     widget: {
         title: string;
         description: string;
+        icon?: React.ReactElement;
         cta: React.ReactNode;
     };
 };
diff --git a/packages/app-record-locking/package.json b/packages/app-record-locking/package.json
index 435c94b01a8..6ab6cce1cb3 100644
--- a/packages/app-record-locking/package.json
+++ b/packages/app-record-locking/package.json
@@ -14,8 +14,7 @@
   "license": "MIT",
   "dependencies": {
     "@apollo/react-hooks": "^3.1.5",
-    "@emotion/styled": "11.10.6",
-    "@material-design-icons/svg": "^0.14.13",
+    "@webiny/admin-ui": "0.0.0",
     "@webiny/app": "0.0.0",
     "@webiny/app-aco": "0.0.0",
     "@webiny/app-admin": "0.0.0",
@@ -25,9 +24,9 @@
     "@webiny/app-websockets": "0.0.0",
     "@webiny/error": "0.0.0",
     "@webiny/form": "0.0.0",
+    "@webiny/icons": "0.0.0",
     "@webiny/plugins": "0.0.0",
     "@webiny/react-router": "0.0.0",
-    "@webiny/ui": "0.0.0",
     "@webiny/utils": "0.0.0",
     "apollo-client": "^2.6.10",
     "apollo-link": "^1.2.14",
diff --git a/packages/app-record-locking/src/components/HeadlessCmsActionsAcoCell.tsx b/packages/app-record-locking/src/components/HeadlessCmsActionsAcoCell.tsx
index 8f80b705955..55a2e114389 100644
--- a/packages/app-record-locking/src/components/HeadlessCmsActionsAcoCell.tsx
+++ b/packages/app-record-locking/src/components/HeadlessCmsActionsAcoCell.tsx
@@ -1,21 +1,11 @@
 import React from "react";
 import { ContentEntryListConfig, useModel } from "@webiny/app-headless-cms";
-import { ReactComponent as LockedIcon } from "@material-design-icons/svg/round/lock.svg";
-import { Tooltip } from "@webiny/ui/Tooltip";
+import { ReactComponent as LockedIcon } from "@webiny/icons/lock.svg";
 import { useRecordLocking } from "~/hooks";
 import { UseContentEntriesListHookDecorator } from "./decorators/UseContentEntriesListHookDecorator";
-import styled from "@emotion/styled";
 import { UseSaveEntryDecorator } from "~/components/decorators/UseSaveEntryDecorator";
 import { UseRecordsDecorator } from "./decorators/UseRecordsDecorator";
-
-const CenterAlignment = styled.div`
-    display: block;
-    margin: 0 auto;
-    width: 28px;
-    svg {
-        fill: var(--mdc-theme-text-secondary-on-background);
-    }
-`;
+import { Icon, Tooltip } from "@webiny/admin-ui";
 
 const { Browser } = ContentEntryListConfig;
 
@@ -40,14 +30,11 @@ const ActionsCell = ({ children }: ActionsCellProps) => {
         return <>{children}</>;
     }
     return (
-        <CenterAlignment>
-            <Tooltip
-                placement={"left"}
-                content={`This ${model.name} is currently locked by ${entry.$locked.lockedBy.displayName}.`}
-            >
-                <LockedIcon />
-            </Tooltip>
-        </CenterAlignment>
+        <Tooltip
+            side={"left"}
+            content={`This ${model.name} is currently locked by ${entry.$locked.lockedBy.displayName}.`}
+            trigger={<Icon icon={<LockedIcon />} label={"Locked entry"} color={"neutral-light"} />}
+        />
     );
 };
 
diff --git a/packages/app-record-locking/src/components/HeadlessCmsContentEntry/ContentEntryGuard.tsx b/packages/app-record-locking/src/components/HeadlessCmsContentEntry/ContentEntryGuard.tsx
index c2d3e6d9e05..55f22822ef3 100644
--- a/packages/app-record-locking/src/components/HeadlessCmsContentEntry/ContentEntryGuard.tsx
+++ b/packages/app-record-locking/src/components/HeadlessCmsContentEntry/ContentEntryGuard.tsx
@@ -1,9 +1,9 @@
 import React, { useEffect, useState } from "react";
 import { useRecordLocking } from "~/hooks";
-import { CircularProgress } from "@webiny/ui/Progress";
 import { LockedRecord } from "../LockedRecord";
 import { IRecordLockingLockRecord } from "~/types";
 import { CmsContentEntry, CmsModel } from "@webiny/app-headless-cms/types";
+import { OverlayLoader } from "@webiny/admin-ui";
 
 export interface IContentEntryGuardProps {
     loading: boolean;
@@ -32,7 +32,11 @@ export const ContentEntryGuard = (props: IContentEntryGuardProps) => {
     }, [entry.id, loading]);
 
     if (locked === undefined) {
-        return <CircularProgress />;
+        return (
+            <div className={"wby-h-screen wby-w-screen wby-fixed wby-top-0 wby-left-0 wby-z-20"}>
+                <OverlayLoader />
+            </div>
+        );
     } else if (locked) {
         return <LockedRecord record={locked} />;
     }
diff --git a/packages/app-record-locking/src/components/HeadlessCmsContentEntry/ContentEntryLocker.tsx b/packages/app-record-locking/src/components/HeadlessCmsContentEntry/ContentEntryLocker.tsx
index 5d6e69da902..f209a9a0d68 100644
--- a/packages/app-record-locking/src/components/HeadlessCmsContentEntry/ContentEntryLocker.tsx
+++ b/packages/app-record-locking/src/components/HeadlessCmsContentEntry/ContentEntryLocker.tsx
@@ -1,20 +1,13 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useRef } from "react";
 import { useRecordLocking } from "~/hooks";
-import type {
-    IIsRecordLockedParams,
-    IRecordLockingIdentity,
-    IRecordLockingLockRecord
-} from "~/types";
+import type { IRecordLockingIdentity, IRecordLockingLockRecord } from "~/types";
 import type { IncomingGenericData } from "@webiny/app-websockets";
 import { useWebsockets } from "@webiny/app-websockets";
 import { parseIdentifier } from "@webiny/utils";
 import { useDialogs } from "@webiny/app-admin";
-import styled from "@emotion/styled";
 import { CmsContentEntry, CmsModel } from "@webiny/app-headless-cms/types";
 
-const Bold = styled.span`
-    font-weight: 600;
-`;
+const autoUpdateTimeout = 20;
 
 export interface IContentEntryLockerProps {
     entry: CmsContentEntry;
@@ -37,8 +30,8 @@ const ForceUnlocked = ({ user }: IForceUnlockedProps) => {
     return (
         <>
             The entry you were editing was forcefully unlocked by{" "}
-            <Bold>{user.displayName || "Unknown user"}</Bold>. Unfortunately, this means you lost
-            the unsaved changes.
+            <strong>{user.displayName || "Unknown user"}</strong>. Unfortunately, this means you
+            lost the unsaved changes.
         </>
     );
 };
@@ -50,32 +43,27 @@ export const ContentEntryLocker = ({
     model,
     children
 }: IContentEntryLockerProps) => {
-    const { updateEntryLock, unlockEntry, fetchLockedEntryLockRecord, removeEntryLock } =
-        useRecordLocking();
+    const { updateEntryLock, removeEntryLock } = useRecordLocking();
     const websockets = useWebsockets();
     const { showDialog } = useDialogs();
 
+    const entryLockerTimeout = useRef<number | null>(null);
+
     useEffect(() => {
         if (!entry.id) {
             return;
         }
         const { id: entryId } = parseIdentifier(entry.id);
 
-        const removeEntryLockCb = async () => {
-            const record: IIsRecordLockedParams = {
-                id: entryId,
-                $lockingType: model.modelId
-            };
-            removeEntryLock(record);
-            await unlockEntry(record);
-        };
-
         let onMessageSub = websockets.onMessage<IKickOutWebsocketsMessage>(
             `recordLocking.entry.kickOut.${entryId}`,
             async incoming => {
                 const { user } = incoming.data;
                 onDisablePrompt(true);
-                await removeEntryLockCb();
+                removeEntryLock({
+                    id: entryId,
+                    $lockingType: model.modelId
+                });
                 showDialog({
                     title: "Entry was forcefully unlocked!",
                     content: <ForceUnlocked user={user} />,
@@ -102,23 +90,44 @@ export const ContentEntryLocker = ({
             return;
         }
 
-        const record: IIsRecordLockedParams = {
-            id: entry.id,
-            $lockingType: model.modelId
+        if (entryLockerTimeout.current) {
+            return;
+        }
+
+        const updateLock = async () => {
+            const result = await updateEntryLock({
+                id: entry.id,
+                $lockingType: model.modelId
+            });
+            if (result.error) {
+                showDialog({
+                    title: "There was an error while updating the entry lock.",
+                    content: result.error.message,
+                    acceptLabel: "Ok",
+                    onClose: undefined,
+                    cancelLabel: undefined
+                });
+                onEntryUnlocked();
+                return;
+            }
+            createTimeout();
+        };
+
+        const createTimeout = () => {
+            entryLockerTimeout.current = window.setTimeout(() => {
+                updateLock();
+            }, autoUpdateTimeout * 1000);
         };
-        updateEntryLock(record);
 
+        updateLock();
         return () => {
-            (async () => {
-                const result = await fetchLockedEntryLockRecord(record);
-                if (result) {
-                    return;
-                }
-                removeEntryLock(record);
-                await unlockEntry(record);
-            })();
+            if (!entryLockerTimeout.current) {
+                return;
+            }
+            clearTimeout(entryLockerTimeout.current);
+            entryLockerTimeout.current = null;
         };
-    }, [entry.id]);
+    }, [entry.id, onEntryUnlocked]);
 
     return <>{children}</>;
 };
diff --git a/packages/app-record-locking/src/components/LockedRecord/LockedRecord.tsx b/packages/app-record-locking/src/components/LockedRecord/LockedRecord.tsx
index bccc2e4d271..83427fdbabf 100644
--- a/packages/app-record-locking/src/components/LockedRecord/LockedRecord.tsx
+++ b/packages/app-record-locking/src/components/LockedRecord/LockedRecord.tsx
@@ -1,93 +1,61 @@
 import React from "react";
-import styled from "@emotion/styled";
-import { Elevation as BaseElevation } from "@webiny/ui/Elevation";
+import { ReactComponent as LockIcon } from "@webiny/icons/lock.svg";
+import { Grid, Heading, Icon, Text } from "@webiny/admin-ui";
 import { useRecordLocking } from "~/hooks";
 import { useContentEntry } from "@webiny/app-headless-cms";
 import { LockedRecordForceUnlock } from "./LockedRecordForceUnlock";
-import { ReactComponent as LockIcon } from "@material-design-icons/svg/outlined/lock.svg";
 import { IRecordLockingLockRecord } from "~/types";
 
-const StyledWrapper = styled("div")({
-    width: "50%",
-    margin: "100px auto 0 auto",
-    backgroundColor: "var(--mdc-theme-surface)"
-});
-
-const InnerWrapper = styled("div")({
-    display: "flex"
-});
-
-const Content = styled("div")({
-    display: "flex",
-    flexDirection: "column",
-    justifyContent: "center"
-});
-
-const IconBox = styled("div")({
-    width: 250,
-    height: 250,
-    marginRight: 25,
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    flexDirection: "column",
-    backgroundColor: "var(--mdc-theme-background)",
-    svg: {
-        width: 150,
-        height: 150,
-        lineHeight: "100%",
-        display: "block",
-        fill: "var(--mdc-theme-primary)"
-    }
-});
-
-const Bold = styled("span")({
-    fontWeight: 600
-});
-
 interface IWrapperProps {
     children: React.ReactNode;
 }
 
 const Wrapper = ({ children }: IWrapperProps) => {
     return (
-        <StyledWrapper>
-            <Elevation z={2}>
-                <InnerWrapper>
-                    <IconBox>
-                        <LockIcon />
-                    </IconBox>
-                    <Content>{children}</Content>
-                </InnerWrapper>
-            </Elevation>
-        </StyledWrapper>
+        <>
+            <div className="wby-w-5/12 wby-absolute wby-top-1/2 wby-left-1/2 wby--translate-x-1/2 wby--translate-y-1/2 wby-z-50">
+                <div
+                    className={
+                        "wby-flex wby-p-lg wby-border-sm wby-border-neutral-dimmed-darker wby-rounded-3xl  wby-bg-neutral-base"
+                    }
+                >
+                    <Grid>
+                        <Grid.Column span={3}>
+                            <div className="wby-h-full wby-flex wby-items-center wby-justify-center wby-bg-neutral-dimmed wby-rounded-md wby-p-lg">
+                                <Icon
+                                    style={{
+                                        width: "64px",
+                                        height: "64px"
+                                    }}
+                                    icon={<LockIcon />}
+                                    label={"Locked Record"}
+                                    color={"accent"}
+                                    size={"lg"}
+                                />
+                            </div>
+                        </Grid.Column>
+                        <Grid.Column span={9}>
+                            <div className={"wby-flex wby-flex-col wby-justify-center"}>
+                                {children}
+                            </div>
+                        </Grid.Column>
+                    </Grid>
+                </div>
+            </div>
+            {/*<div className="wby-absolute wby-inset-0 wby-bg-neutral-dark/50 wby-z-45"></div>*/}
+        </>
     );
 };
 
-const StyledTitle = styled("h3")({
-    fontSize: 24,
-    marginBottom: "10px",
-    fontWeight: "600",
-    " > em": {
-        fontStyle: "italic"
-    }
-});
-
 const Title = () => {
     const { entry } = useContentEntry();
-    return <StyledTitle>Record ({entry.meta.title}) is locked!</StyledTitle>;
+    return (
+        <Heading level={4} className={"wby-mb-sm"}>
+            Record ({entry.meta.title}) is locked!
+        </Heading>
+    );
 };
 
-const Text = styled("p")({
-    fontSize: 16,
-    marginBottom: "10px",
-    lineHeight: "125%"
-});
-
-const Elevation = styled(BaseElevation)({
-    padding: "20px"
-});
-
 export interface ILockedRecordProps {
     record: IRecordLockingLockRecord;
 }
@@ -109,10 +77,8 @@ export const LockedRecord = ({ record: lockRecordEntry }: ILockedRecordProps) =>
                 <Title />
                 <Text>
                     This record is locked, but the system cannot find the user that created the
-                    record lock.
-                </Text>
-                <Text>
-                    A force-unlock is required to regain editing capabilities for this record.
+                    record lock. A force-unlock is required to regain editing capabilities for this
+                    record.
                 </Text>
                 <LockedRecordForceUnlock
                     id={lockRecordEntry.id}
@@ -126,12 +92,9 @@ export const LockedRecord = ({ record: lockRecordEntry }: ILockedRecordProps) =>
         <Wrapper>
             <Title />
             <Text>
-                It is locked because <Bold>{lockRecordEntry.lockedBy.displayName}</Bold> is
-                currently editing this record.
-            </Text>
-            <Text>
-                You can either contact the user and ask them to unlock the record, or you can wait
-                for the lock to expire.
+                It is locked because <strong>{lockRecordEntry.lockedBy.displayName}</strong> is
+                currently editing this record. You can either contact the user and ask them to
+                unlock the record, or you can wait for the lock to expire.
             </Text>
             <LockedRecordForceUnlock
                 id={lockRecordEntry.id}
diff --git a/packages/app-record-locking/src/components/LockedRecord/LockedRecordForceUnlock.tsx b/packages/app-record-locking/src/components/LockedRecord/LockedRecordForceUnlock.tsx
index effdf281bd9..ece951b64ed 100644
--- a/packages/app-record-locking/src/components/LockedRecord/LockedRecordForceUnlock.tsx
+++ b/packages/app-record-locking/src/components/LockedRecord/LockedRecordForceUnlock.tsx
@@ -1,25 +1,10 @@
 import React, { useCallback, useEffect, useState } from "react";
-import styled from "@emotion/styled";
+import { Alert, Button, Text } from "@webiny/admin-ui";
 import { IRecordLockingError, IRecordLockingIdentity } from "~/types";
 import { useConfirmationDialog, useSnackbar } from "@webiny/app-admin";
 import { useRecordLocking, usePermission } from "~/hooks";
 import { useRouter } from "@webiny/react-router";
 import { useContentEntriesList } from "@webiny/app-headless-cms";
-import { Alert } from "@webiny/ui/Alert";
-import { ButtonPrimary } from "@webiny/ui/Button";
-
-const Wrapper = styled("div")({
-    padding: "0",
-    backgroundColor: "white"
-});
-
-const Text = styled("p")({
-    lineHeight: "125%"
-});
-
-const Bold = styled("span")({
-    fontWeight: 600
-});
 
 export interface ILockedRecordForceUnlockProps {
     id: string;
@@ -32,16 +17,16 @@ const ErrorMessage = (props: ILockedRecordForceUnlockProps) => {
     const { title, lockedBy } = props;
     return (
         <div>
-            <Alert type="warning" title="Warning">
-                <Bold>{lockedBy?.displayName || "Unknown user"}</Bold> is currently editing this
+            <Alert type="warning" title="Warning" className={"wby-mb-md"}>
+                <strong>{lockedBy?.displayName || "Unknown user"}</strong> is currently editing this
                 record.
                 <br /> If you force unlock it, they could potentially lose their changes.
             </Alert>
-            <br />
-            <p>
-                You are about to forcefully unlock the <Bold>{title}</Bold> entry.
-            </p>
-            <p>Are you sure you want to continue?</p>
+
+            <Text>
+                You are about to forcefully unlock the <strong>{title}</strong> entry. Are you sure
+                you want to continue?
+            </Text>
         </div>
     );
 };
@@ -88,12 +73,11 @@ export const LockedRecordForceUnlock = (props: ILockedRecordForceUnlockProps) =>
     }
 
     return (
-        <Wrapper>
-            <Text>
+        <div className="wby-mt-md">
+            <Text as={"div"} className={"wby-mb-md"}>
                 Because you have a full access to the system, you can force unlock the record.
             </Text>
-            <br />
-            <ButtonPrimary onClick={onClick}>Unlock and go back</ButtonPrimary>
-        </Wrapper>
+            <Button onClick={onClick} text={"Unlock and go back"} />
+        </div>
     );
 };
diff --git a/packages/app-record-locking/src/components/RecordLockingProvider.tsx b/packages/app-record-locking/src/components/RecordLockingProvider.tsx
index ed94a1a90dc..fb0cad635a8 100644
--- a/packages/app-record-locking/src/components/RecordLockingProvider.tsx
+++ b/packages/app-record-locking/src/components/RecordLockingProvider.tsx
@@ -64,15 +64,19 @@ export const RecordLockingProvider = (props: IRecordLockingProviderProps) => {
             const result = await recordLocking.updateEntryLock(params);
             if (result.error) {
                 setError(result.error);
-                return;
+                return result;
             }
             const target = result.data;
             if (!target?.id) {
-                setError({
+                const error = {
                     message: "No data returned from server.",
                     code: "NO_DATA"
-                });
-                return;
+                };
+                setError(error);
+                return {
+                    error,
+                    data: null
+                };
             }
 
             setRecords(prev => {
@@ -86,6 +90,7 @@ export const RecordLockingProvider = (props: IRecordLockingProviderProps) => {
                     return item;
                 });
             });
+            return result;
         },
         async unlockEntry(params: IUnlockEntryParams) {
             return await recordLocking.unlockEntry(params);
diff --git a/packages/app-record-locking/src/components/assets/lock.svg b/packages/app-record-locking/src/components/assets/lock.svg
deleted file mode 100644
index 5f649d01e09..00000000000
--- a/packages/app-record-locking/src/components/assets/lock.svg
+++ /dev/null
@@ -1,13 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="24px" height="24px" version="1.1" xmlns="http://www.w3.org/2000/svg">
-    <g stroke-width="1" fill="none" fill-rule="evenodd">
-        <g>
-            <g>
-                <polygon points="0 0 24 0 24 24 0 24"/>
-                <polygon opacity="0.87" points="0 0 24 0 24 24 0 24"/>
-            </g>
-            <path d="M18,8 L17,8 L17,6 C17,3.24 14.76,1 12,1 C9.24,1 7,3.24 7,6 L7,8 L6,8 C4.9,8 4,8.9 4,10 L4,20 C4,21.1 4.9,22 6,22 L18,22 C19.1,22 20,21.1 20,20 L20,10 C20,8.9 19.1,8 18,8 Z M12,17 C10.9,17 10,16.1 10,15 C10,13.9 10.9,13 12,13 C13.1,13 14,13.9 14,15 C14,16.1 13.1,17 12,17 Z M9,8 L9,6 C9,4.34 10.34,3 12,3 C13.66,3 15,4.34 15,6 L15,8 L9,8 Z"
-                  fill="rgba(0, 0, 0, 0.54)" fill-rule="nonzero"/>
-        </g>
-    </g>
-</svg>
diff --git a/packages/app-record-locking/src/components/permissionRenderer/RecordLockingPermissions.tsx b/packages/app-record-locking/src/components/permissionRenderer/RecordLockingPermissions.tsx
index b6974f350fc..37fb2291ce5 100644
--- a/packages/app-record-locking/src/components/permissionRenderer/RecordLockingPermissions.tsx
+++ b/packages/app-record-locking/src/components/permissionRenderer/RecordLockingPermissions.tsx
@@ -1,10 +1,9 @@
-import React, { Fragment, useCallback, useMemo } from "react";
-import { Cell, Grid } from "@webiny/ui/Grid";
-import { Select } from "@webiny/ui/Select";
+import React, { useCallback, useMemo } from "react";
 import { i18n } from "@webiny/app/i18n";
-import { gridNoPaddingClass, PermissionInfo } from "@webiny/app-admin/components/Permissions";
+import { gridWithPaddingClass, PermissionInfo } from "@webiny/app-admin/components/Permissions";
 import { Form } from "@webiny/form";
 import { RecordLockingSecurityPermission } from "~/types";
+import { Grid, Select } from "@webiny/admin-ui";
 
 const t = i18n.ns("app-record-locking/components/permissionRenderer");
 
@@ -66,21 +65,23 @@ export const RecordLockingPermissions = ({ value, onChange }: RecordLockingPermi
         <Form<RecordLockingSecurityPermission> data={formData} onChange={onFormChange}>
             {({ Bind }) => {
                 return (
-                    <Fragment>
-                        <Grid className={gridNoPaddingClass}>
-                            <Cell span={6}>
+                    <>
+                        <Grid className={gridWithPaddingClass}>
+                            <Grid.Column span={6}>
                                 <PermissionInfo title={t`Advanced Record Locking`} />
-                            </Cell>
-                            <Cell span={6}>
+                            </Grid.Column>
+                            <Grid.Column span={6}>
                                 <Bind name={"canForceUnlock"}>
-                                    <Select label={t`Advanced Record Locking`}>
-                                        <option value={""}>{t`No Access`}</option>
-                                        <option value={"yes"}>{t`Full Access`}</option>
-                                    </Select>
+                                    <Select
+                                        options={[
+                                            { label: t`No Access`, value: "no" },
+                                            { label: t`Full Access`, value: "yes" }
+                                        ]}
+                                    ></Select>
                                 </Bind>
-                            </Cell>
+                            </Grid.Column>
                         </Grid>
-                    </Fragment>
+                    </>
                 );
             }}
         </Form>
diff --git a/packages/app-record-locking/src/components/permissionRenderer/index.tsx b/packages/app-record-locking/src/components/permissionRenderer/index.tsx
index 0f48fd6a3b9..8c8af11d4fe 100644
--- a/packages/app-record-locking/src/components/permissionRenderer/index.tsx
+++ b/packages/app-record-locking/src/components/permissionRenderer/index.tsx
@@ -1,22 +1,23 @@
 import React from "react";
-import { AccordionItem } from "@webiny/ui/Accordion";
+
 import { AdminAppPermissionRendererPlugin } from "@webiny/app-admin/types";
-import { ReactComponent as Icon } from "../assets/lock.svg";
+import { ReactComponent as LockIcon } from "@webiny/icons/lock.svg";
 import { RecordLockingPermissions } from "./RecordLockingPermissions";
+import { Accordion } from "@webiny/admin-ui";
 
 export const recordLockingPermissionRenderer: AdminAppPermissionRendererPlugin = {
     type: "admin-app-permissions-renderer",
     name: "admin-app-permissions-renderer-record-locking",
     render(props) {
         return (
-            <AccordionItem
-                icon={<Icon />}
+            <Accordion.Item
+                icon={<Accordion.Item.Icon label={"Record Locking"} icon={<LockIcon />} />}
                 title={"Record Locking"}
-                description={"Manage Record Locking Permissions."}
+                description={"Manage Record Locking permissions."}
                 data-testid={"permission.recordLocking"}
             >
                 <RecordLockingPermissions {...props} />
-            </AccordionItem>
+            </Accordion.Item>
         );
     }
 };
diff --git a/packages/app-record-locking/src/domain/RecordLocking.ts b/packages/app-record-locking/src/domain/RecordLocking.ts
index 9375fd3f09e..7614840e59a 100644
--- a/packages/app-record-locking/src/domain/RecordLocking.ts
+++ b/packages/app-record-locking/src/domain/RecordLocking.ts
@@ -1,44 +1,44 @@
-import { IRecordLocking, IRecordLockingUpdateEntryLockResult } from "./abstractions/IRecordLocking";
+import type {
+    IRecordLocking,
+    IRecordLockingUpdateEntryLockResult
+} from "./abstractions/IRecordLocking";
 import { ApolloClient } from "apollo-client";
 import { RecordLockingGetLockRecord } from "./RecordLockingGetLockRecord";
 import { RecordLockingIsEntryLocked } from "./RecordLockingIsEntryLocked";
 import { RecordLockingListLockRecords } from "./RecordLockingListLockRecords";
 import { RecordLockingLockEntry } from "./RecordLockingLockEntry";
 import { RecordLockingUnlockEntry } from "./RecordLockingUnlockEntry";
-import { RecordLockingUnlockEntryRequest } from "./RecordLockingUnlockEntryRequest";
 import { RecordLockingClient } from "./RecordLockingClient";
-import { IRecordLockingGetLockRecord } from "./abstractions/IRecordLockingGetLockRecord";
-import { IRecordLockingIsEntryLocked } from "./abstractions/IRecordLockingIsEntryLocked";
-import {
+import type { IRecordLockingGetLockRecord } from "./abstractions/IRecordLockingGetLockRecord";
+import type { IRecordLockingIsEntryLocked } from "./abstractions/IRecordLockingIsEntryLocked";
+import type {
     IRecordLockingListLockRecords,
     IRecordLockingListLockRecordsResult
 } from "./abstractions/IRecordLockingListLockRecords";
-import { IRecordLockingLockEntry } from "./abstractions/IRecordLockingLockEntry";
-import {
+import type { IRecordLockingLockEntry } from "./abstractions/IRecordLockingLockEntry";
+import type {
     IRecordLockingUnlockEntry,
     IRecordLockingUnlockEntryResult
 } from "./abstractions/IRecordLockingUnlockEntry";
-import { IRecordLockingUnlockEntryRequest } from "./abstractions/IRecordLockingUnlockEntryRequest";
-import {
+import type {
     IFetchLockedEntryLockRecordParams,
     IFetchLockRecordParams,
     IFetchLockRecordResult,
     IIsRecordLockedParams,
+    IPossiblyRecordLockingRecord,
     IRecordLockingError,
     IRecordLockingLockRecord,
     IRecordLockingRecord,
-    IPossiblyRecordLockingRecord,
     IUnlockEntryParams,
     IUpdateEntryLockParams
 } from "~/types";
-import { IRecordLockingClient } from "./abstractions/IRecordLockingClient";
 import { createRecordLockingError } from "./utils/createRecordLockingError";
 import { parseIdentifier } from "@webiny/utils/parseIdentifier";
 import { createCacheKey } from "~/utils/createCacheKey";
 import { RecordLockingUpdateEntryLock } from "~/domain/RecordLockingUpdateEntryLock";
-import { IRecordLockingUpdateEntryLock } from "~/domain/abstractions/IRecordLockingUpdateEntryLock";
+import type { IRecordLockingUpdateEntryLock } from "~/domain/abstractions/IRecordLockingUpdateEntryLock";
 import { RecordLockingGetLockedEntryLockRecord } from "~/domain/RecordLockingGetLockedEntryLockRecord";
-import { IRecordLockingGetLockedEntryLockRecord } from "./abstractions/IRecordLockingGetLockedEntryLockRecord";
+import type { IRecordLockingGetLockedEntryLockRecord } from "./abstractions/IRecordLockingGetLockedEntryLockRecord";
 
 export interface ICreateRecordLockingParams {
     client: ApolloClient<any>;
@@ -46,7 +46,6 @@ export interface ICreateRecordLockingParams {
 }
 
 export interface IRecordLockingParams {
-    client: IRecordLockingClient;
     setLoading: (loading: boolean) => void;
     getLockRecord: IRecordLockingGetLockRecord;
     getLockedEntryLockRecord: IRecordLockingGetLockedEntryLockRecord;
@@ -54,7 +53,6 @@ export interface IRecordLockingParams {
     listLockRecords: IRecordLockingListLockRecords;
     lockEntry: IRecordLockingLockEntry;
     unlockEntry: IRecordLockingUnlockEntry;
-    unlockEntryRequest: IRecordLockingUnlockEntryRequest;
     updateEntryLock: IRecordLockingUpdateEntryLock;
 }
 
@@ -71,29 +69,20 @@ class RecordLocking<T extends IPossiblyRecordLockingRecord = IPossiblyRecordLock
     private readonly _setLoading: (loading: boolean) => void;
     public loading = false;
     public records: IRecordLockingRecord[] = [];
-
-    private readonly client: IRecordLockingClient;
     private readonly _getLockRecord: IRecordLockingGetLockRecord;
-    private readonly _isEntryLocked: IRecordLockingIsEntryLocked;
     private readonly _getLockedEntryLockRecord: IRecordLockingGetLockedEntryLockRecord;
     private readonly _listLockRecords: IRecordLockingListLockRecords;
-    private readonly _lockEntry: IRecordLockingLockEntry;
     private readonly _unlockEntry: IRecordLockingUnlockEntry;
-    private readonly _unlockEntryRequest: IRecordLockingUnlockEntryRequest;
     private readonly _updateEntryLock: IRecordLockingUpdateEntryLock;
 
     private onErrorCb: IOnErrorCb | null = null;
 
     public constructor(params: IRecordLockingParams) {
-        this.client = params.client;
         this._setLoading = params.setLoading;
         this._getLockRecord = params.getLockRecord;
         this._getLockedEntryLockRecord = params.getLockedEntryLockRecord;
-        this._isEntryLocked = params.isEntryLocked;
         this._listLockRecords = params.listLockRecords;
-        this._lockEntry = params.lockEntry;
         this._unlockEntry = params.unlockEntry;
-        this._unlockEntryRequest = params.unlockEntryRequest;
         this._updateEntryLock = params.updateEntryLock;
     }
 
@@ -221,17 +210,9 @@ class RecordLocking<T extends IPossiblyRecordLockingRecord = IPossiblyRecordLock
             if (!id) {
                 return result;
             }
-            const index = this.records.findIndex(r => r.entryId === id);
-            if (index === -1) {
-                return result;
-            }
-
-            this.records[index] = {
-                ...this.records[index],
-                $locked: undefined,
-                $selectable: true
-            };
-
+            this.removeEntryLock({
+                ...params
+            });
             return result;
         } catch (ex) {
             this.triggerOnError(ex);
@@ -412,16 +393,12 @@ export const createRecordLocking = <T extends IRecordLockingRecord>(
     const unlockEntry = new RecordLockingUnlockEntry({
         client
     });
-    const unlockEntryRequest = new RecordLockingUnlockEntryRequest({
-        client
-    });
 
     const updateEntryLock = new RecordLockingUpdateEntryLock({
         client
     });
 
     return new RecordLocking<T>({
-        client,
         setLoading: config.setLoading,
         getLockRecord,
         getLockedEntryLockRecord,
@@ -429,7 +406,6 @@ export const createRecordLocking = <T extends IRecordLockingRecord>(
         listLockRecords,
         updateEntryLock,
         lockEntry,
-        unlockEntry,
-        unlockEntryRequest
+        unlockEntry
     });
 };
diff --git a/packages/app-record-locking/src/domain/RecordLockingUnlockEntryRequest.ts b/packages/app-record-locking/src/domain/RecordLockingUnlockEntryRequest.ts
deleted file mode 100644
index bea3e15637d..00000000000
--- a/packages/app-record-locking/src/domain/RecordLockingUnlockEntryRequest.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { WebinyError } from "@webiny/error";
-import {
-    IRecordLockingUnlockEntryRequest,
-    IRecordLockingUnlockEntryRequestParams,
-    IRecordLockingUnlockEntryRequestResult
-} from "~/domain/abstractions/IRecordLockingUnlockEntryRequest";
-import { IRecordLockingClient } from "./abstractions/IRecordLockingClient";
-
-interface Params {
-    client: IRecordLockingClient;
-}
-
-export class RecordLockingUnlockEntryRequest implements IRecordLockingUnlockEntryRequest {
-    // @eslint-disable-next-line
-    private readonly client: IRecordLockingClient;
-
-    public constructor(params: Params) {
-        this.client = params.client;
-    }
-    public async execute(
-        // eslint-disable-next-line
-        params: IRecordLockingUnlockEntryRequestParams
-    ): Promise<IRecordLockingUnlockEntryRequestResult> {
-        throw new WebinyError("Method not implemented.");
-    }
-}
diff --git a/packages/app-record-locking/src/domain/abstractions/IRecordLocking.ts b/packages/app-record-locking/src/domain/abstractions/IRecordLocking.ts
index 7310c16dfce..f7c56464d60 100644
--- a/packages/app-record-locking/src/domain/abstractions/IRecordLocking.ts
+++ b/packages/app-record-locking/src/domain/abstractions/IRecordLocking.ts
@@ -1,14 +1,14 @@
 import {
+    IFetchLockedEntryLockRecordParams,
+    IFetchLockRecordParams,
+    IFetchLockRecordResult,
     IIsRecordLockedParams,
-    IUpdateEntryLockParams,
-    IRecordLockingRecord,
     IPossiblyRecordLockingRecord,
     IRecordLockingError,
     IRecordLockingLockRecord,
+    IRecordLockingRecord,
     IUnlockEntryParams,
-    IFetchLockRecordParams,
-    IFetchLockRecordResult,
-    IFetchLockedEntryLockRecordParams
+    IUpdateEntryLockParams
 } from "~/types";
 import { IRecordLockingUnlockEntryResult } from "./IRecordLockingUnlockEntry";
 
@@ -35,26 +35,15 @@ export interface IRecordLocking<
         params: IFetchLockedEntryLockRecordParams
     ): Promise<IRecordLockingLockRecord | null>;
     updateEntryLock(params: IUpdateEntryLockParams): Promise<IRecordLockingUpdateEntryLockResult>;
+    /**
+     * Removes entry lock from the state - this is not an API call.
+     */
     removeEntryLock(params: IUnlockEntryParams): void;
+    /**
+     * Unlocks entry via an API call.
+     */
     unlockEntry(
         params: IUnlockEntryParams,
         force?: boolean
     ): Promise<IRecordLockingUnlockEntryResult>;
-    // lockEntry(params: IRecordLockingLockEntryParams): Promise<IRecordLockingLockEntryResult>;
-    // unlockEntryRequest(
-    //     params: IRecordLockingUnlockEntryRequestParams
-    // ): Promise<IRecordLockingUnlockEntryRequestResult>;
-    // isEntryLocked(
-    //     params: IRecordLockingIsEntryLockedParams
-    // ): Promise<IRecordLockingIsEntryLockedResult>;
-    // getLockRecord(
-    //     params: IRecordLockingGetLockRecordParams
-    // ): Promise<IRecordLockingGetLockRecordResult>;
-    // listLockRecords(
-    //     params: IRecordLockingListLockRecordsParams
-    // ): Promise<IRecordLockingListLockRecordsResult>;
-
-    // onRequestAccess(): Promise<void>;
-    // acceptAccessRequest(): Promise<void>;
-    // rejectAccessRequest(): Promise<void>;
 }
diff --git a/packages/app-record-locking/src/domain/abstractions/IRecordLockingUnlockEntryRequest.ts b/packages/app-record-locking/src/domain/abstractions/IRecordLockingUnlockEntryRequest.ts
deleted file mode 100644
index 3e3fdb13abc..00000000000
--- a/packages/app-record-locking/src/domain/abstractions/IRecordLockingUnlockEntryRequest.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { IRecordLockingError, IRecordLockingLockRecord } from "~/types";
-
-export interface IRecordLockingUnlockEntryRequestParams {
-    id: string;
-    type: string;
-}
-
-export interface IRecordLockingUnlockEntryRequestResult {
-    data: IRecordLockingLockRecord | null;
-    error: IRecordLockingError | null;
-}
-
-export interface IRecordLockingUnlockEntryRequest {
-    execute(
-        params: IRecordLockingUnlockEntryRequestParams
-    ): Promise<IRecordLockingUnlockEntryRequestResult>;
-}
diff --git a/packages/app-record-locking/src/domain/graphql/unlockEntryRequest.ts b/packages/app-record-locking/src/domain/graphql/unlockEntryRequest.ts
deleted file mode 100644
index fedc359c686..00000000000
--- a/packages/app-record-locking/src/domain/graphql/unlockEntryRequest.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import gql from "graphql-tag";
-import { ERROR_FIELDS, LOCK_RECORD_FIELDS } from "./fields";
-import { IRecordLockingError, IRecordLockingLockRecord } from "~/types";
-import { IRecordLockingUnlockEntryRequestParams } from "../abstractions/IRecordLockingUnlockEntryRequest";
-
-export type IRecordLockingUnlockEntryRequestVariables = IRecordLockingUnlockEntryRequestParams;
-
-export interface IRecordLockingUnlockEntryRequestResponse {
-    recordLocking: {
-        unlockEntryRequest: {
-            data: IRecordLockingLockRecord | null;
-            error: IRecordLockingError | null;
-        };
-    };
-}
-
-export const createUnlockEntryRequestGraphQL = () => {
-    return gql`
-        mutation RecordLockingUnlockEntryRequest($id: ID!, $type: String!) {
-            recordLocking {
-                unlockEntryRequest(id: $id, type: $type) {
-                    data {
-                        ${LOCK_RECORD_FIELDS}
-                    }
-                    error {
-                        ${ERROR_FIELDS}
-                    }
-                }
-            }
-        }
-    `;
-};
diff --git a/packages/app-record-locking/src/types.ts b/packages/app-record-locking/src/types.ts
index f77134d87ed..3e0573940f7 100644
--- a/packages/app-record-locking/src/types.ts
+++ b/packages/app-record-locking/src/types.ts
@@ -2,6 +2,7 @@ import { EntryTableItem } from "@webiny/app-headless-cms/types";
 import { GenericRecord } from "@webiny/app/types";
 import { IRecordLockingUnlockEntryResult } from "~/domain/abstractions/IRecordLockingUnlockEntry";
 import { SecurityPermission } from "@webiny/app-security/types";
+import type { IRecordLockingUpdateEntryLockResult } from "~/domain/abstractions/IRecordLocking.js";
 
 export interface IRecordLockingIdentity {
     id: string;
@@ -49,7 +50,7 @@ export interface IRecordLockingContext<
     readonly records: IPossiblyRecordLockingRecord[];
     readonly error?: IRecordLockingError | null;
     setRecords(folderId: string, type: string, records: T[]): Promise<void>;
-    updateEntryLock(params: IUpdateEntryLockParams): Promise<void>;
+    updateEntryLock(params: IUpdateEntryLockParams): Promise<IRecordLockingUpdateEntryLockResult>;
     isRecordLocked(params?: IIsRecordLockedParams): boolean;
     getLockRecordEntry(id: string): IRecordLockingRecord | undefined;
     fetchLockRecord(params: IFetchLockRecordParams): Promise<IFetchLockRecordResult>;
diff --git a/packages/app-record-locking/tsconfig.build.json b/packages/app-record-locking/tsconfig.build.json
index bdcd24b6355..62ce6c8e43a 100644
--- a/packages/app-record-locking/tsconfig.build.json
+++ b/packages/app-record-locking/tsconfig.build.json
@@ -2,6 +2,7 @@
   "extends": "../../tsconfig.build.json",
   "include": ["src"],
   "references": [
+    { "path": "../admin-ui/tsconfig.build.json" },
     { "path": "../app/tsconfig.build.json" },
     { "path": "../app-aco/tsconfig.build.json" },
     { "path": "../app-admin/tsconfig.build.json" },
@@ -13,7 +14,6 @@
     { "path": "../form/tsconfig.build.json" },
     { "path": "../plugins/tsconfig.build.json" },
     { "path": "../react-router/tsconfig.build.json" },
-    { "path": "../ui/tsconfig.build.json" },
     { "path": "../utils/tsconfig.build.json" }
   ],
   "compilerOptions": {
diff --git a/packages/app-record-locking/tsconfig.json b/packages/app-record-locking/tsconfig.json
index bd8e4991513..f170b02230e 100644
--- a/packages/app-record-locking/tsconfig.json
+++ b/packages/app-record-locking/tsconfig.json
@@ -2,6 +2,7 @@
   "extends": "../../tsconfig.json",
   "include": ["src", "__tests__"],
   "references": [
+    { "path": "../admin-ui" },
     { "path": "../app" },
     { "path": "../app-aco" },
     { "path": "../app-admin" },
@@ -13,7 +14,6 @@
     { "path": "../form" },
     { "path": "../plugins" },
     { "path": "../react-router" },
-    { "path": "../ui" },
     { "path": "../utils" }
   ],
   "compilerOptions": {
@@ -23,6 +23,8 @@
     "paths": {
       "~/*": ["./src/*"],
       "~tests/*": ["./__tests__/*"],
+      "@webiny/admin-ui/*": ["../admin-ui/src/*"],
+      "@webiny/admin-ui": ["../admin-ui/src"],
       "@webiny/app/*": ["../app/src/*"],
       "@webiny/app": ["../app/src"],
       "@webiny/app-aco/*": ["../app-aco/src/*"],
@@ -45,8 +47,6 @@
       "@webiny/plugins": ["../plugins/src"],
       "@webiny/react-router/*": ["../react-router/src/*"],
       "@webiny/react-router": ["../react-router/src"],
-      "@webiny/ui/*": ["../ui/src/*"],
-      "@webiny/ui": ["../ui/src"],
       "@webiny/utils/*": ["../utils/src/*"],
       "@webiny/utils": ["../utils/src"]
     },
diff --git a/packages/app-security-access-management/package.json b/packages/app-security-access-management/package.json
index c031d68b8e9..208e0a8f980 100644
--- a/packages/app-security-access-management/package.json
+++ b/packages/app-security-access-management/package.json
@@ -15,16 +15,16 @@
   "dependencies": {
     "@apollo/react-hooks": "^3.1.5",
     "@emotion/styled": "11.10.6",
-    "@material-design-icons/svg": "^0.14.13",
+    "@webiny/admin-ui": "0.0.0",
     "@webiny/app": "0.0.0",
     "@webiny/app-admin": "0.0.0",
     "@webiny/app-security": "0.0.0",
     "@webiny/form": "0.0.0",
+    "@webiny/icons": "0.0.0",
     "@webiny/plugins": "0.0.0",
     "@webiny/react-router": "0.0.0",
     "@webiny/ui": "0.0.0",
     "@webiny/validation": "0.0.0",
-    "emotion": "10.0.27",
     "graphql-tag": "^2.12.6",
     "lodash": "^4.17.21",
     "react": "18.2.0",
diff --git a/packages/app-security-access-management/src/components/NotAuthorizedError/NotAuthorizedError.tsx b/packages/app-security-access-management/src/components/NotAuthorizedError/NotAuthorizedError.tsx
index 324e847a04f..39bee51aee5 100644
--- a/packages/app-security-access-management/src/components/NotAuthorizedError/NotAuthorizedError.tsx
+++ b/packages/app-security-access-management/src/components/NotAuthorizedError/NotAuthorizedError.tsx
@@ -1,53 +1,29 @@
 import * as React from "react";
-import { Link } from "@webiny/react-router";
-import { css } from "emotion";
-import styled from "@emotion/styled";
 import Helmet from "react-helmet";
 import authErrorImg from "./SecureRouteError.svg";
-import { Typography } from "@webiny/ui/Typography";
-
-const ContentWrapper = styled("div")({
-    display: "block",
-    paddingTop: "15%",
-    textAlign: "center",
-    margin: "auto"
-});
-
-const styles = {
-    authErrorImgStyle: css({
-        width: "192px",
-        paddingBottom: "24px"
-    }),
-    bodyStyle: css({
-        color: "var(--mdc-theme-text-primary-on-background)",
-        display: "block"
-    }),
-    linkStyle: css({
-        textDecoration: "none",
-        "&:hover": {
-            textDecoration: "none"
-        }
-    })
-};
+import { Link, Text } from "@webiny/admin-ui";
 
 export const NotAuthorizedError = () => {
     return (
-        <ContentWrapper>
-            <Helmet title={"Not authorized"} />
-
-            <img className={styles.authErrorImgStyle} src={authErrorImg} alt="Not Authorized" />
-
-            <Typography use={"body1"} className={styles.bodyStyle}>
-                You are not authorized to view this route.
-            </Typography>
-
-            <Typography use={"body1"} className={styles.bodyStyle}>
-                Please contact your administrator to request access.
-            </Typography>
+        <div className={"wby-flex-1"}>
+            <div
+                className={
+                    "wby-h-full wby-flex wby-flex-col wby-items-center wby-justify-center wby-text-center wby-gap-xs"
+                }
+            >
+                <Helmet title={"Not authorized"} />
 
-            <Link to="/" className={styles.linkStyle}>
-                Take me back.
-            </Link>
-        </ContentWrapper>
+                <img
+                    width={200}
+                    height={200}
+                    src={authErrorImg}
+                    alt="Not Authorized"
+                    className={"wby-mb-xl"}
+                />
+                <Text>You are not authorized to view this route.</Text>
+                <Text>Please contact your administrator to request access.</Text>
+                <Link to="/">Take me back.</Link>
+            </div>
+        </div>
     );
 };
diff --git a/packages/app-security-access-management/src/index.tsx b/packages/app-security-access-management/src/index.tsx
index 48b9a02be86..43489f8a7d1 100644
--- a/packages/app-security-access-management/src/index.tsx
+++ b/packages/app-security-access-management/src/index.tsx
@@ -1,77 +1,92 @@
 import React, { memo } from "react";
 import { plugins } from "@webiny/plugins";
-import { AddMenu, AddRoute, Layout, Plugins, Wcp } from "@webiny/app-admin";
+import { Layout, Wcp } from "@webiny/app-admin";
 import { HasPermission } from "@webiny/app-security";
 import { Permission } from "~/plugins/constants";
 import { Groups } from "~/ui/views/Groups";
 import { Teams } from "~/ui/views/Teams";
 import { ApiKeys } from "~/ui/views/ApiKeys";
 import accessManagementPlugins from "./plugins";
+import { AdminConfig } from "@webiny/app-admin";
 
-/**
- * Backwards Compatibility.
- * A while back, these plugins were imported from user projects.
- */
-export default () => [];
+const { Menu, Route } = AdminConfig;
 
-export const AccessManagementExtension = () => {
+const AccessManagementExtension = () => {
     plugins.register(accessManagementPlugins());
 
     return (
-        <Plugins>
+        <AdminConfig>
             <HasPermission name={Permission.Groups}>
-                <AddRoute path={"/access-management/roles"}>
-                    <Layout title={"Access Management - Roles"}>
-                        <Groups />
-                    </Layout>
-                </AddRoute>
-            </HasPermission>{" "}
+                <Route
+                    name={"security.groups"}
+                    exact
+                    path={"/access-management/roles"}
+                    element={
+                        <Layout title={"Access Management - Roles"}>
+                            <Groups />
+                        </Layout>
+                    }
+                />
+            </HasPermission>
             <Wcp.CanUseTeams>
                 <HasPermission name={Permission.Teams}>
-                    <AddRoute path={"/access-management/teams"}>
-                        <Layout title={"Access Management - Teams"}>
-                            <Teams />
-                        </Layout>
-                    </AddRoute>
+                    <Route
+                        name={"security.teams"}
+                        exact
+                        path={"/access-management/teams"}
+                        element={
+                            <Layout title={"Access Management - Teams"}>
+                                <Teams />
+                            </Layout>
+                        }
+                    />
                 </HasPermission>
             </Wcp.CanUseTeams>
             <HasPermission name={Permission.ApiKeys}>
-                <AddRoute path={"/access-management/api-keys"}>
-                    <Layout title={"Access Management - API Keys"}>
-                        <ApiKeys />
-                    </Layout>
-                </AddRoute>
+                <Route
+                    name={"security.apiKeys"}
+                    exact
+                    path={"/access-management/api-keys"}
+                    element={
+                        <Layout title={"Access Management - API Keys"}>
+                            <ApiKeys />
+                        </Layout>
+                    }
+                />
             </HasPermission>
+
             <HasPermission any={[Permission.Groups, Permission.ApiKeys, Permission.Teams]}>
-                <AddMenu name={"settings"}>
-                    <AddMenu name={"settings.accessManagement"} label={"Access Management"}>
-                        <HasPermission name={Permission.Groups}>
-                            <AddMenu
-                                name={"settings.accessManagement.roles"}
-                                label={"Roles"}
-                                path={"/access-management/roles"}
-                            />
-                        </HasPermission>
-                        <Wcp.CanUseTeams>
-                            <HasPermission name={Permission.Teams}>
-                                <AddMenu
-                                    name={"settings.accessManagement.teams"}
-                                    label={"Teams"}
-                                    path={"/access-management/teams"}
-                                />
-                            </HasPermission>
-                        </Wcp.CanUseTeams>
-                        <HasPermission name={Permission.ApiKeys}>
-                            <AddMenu
-                                name={"settings.accessManagement.apiKeys"}
-                                label={"API Keys"}
-                                path={"/access-management/api-keys"}
-                            />
-                        </HasPermission>
-                    </AddMenu>
-                </AddMenu>
+                <Menu
+                    name={"security.settings"}
+                    parent={"settings"}
+                    element={<Menu.Group text={"Access Management"} />}
+                />
+            </HasPermission>
+            <HasPermission name={Permission.Groups}>
+                <Menu
+                    name={"security.roles"}
+                    parent={"settings"}
+                    element={<Menu.Link text={"Roles"} to={"/access-management/roles"} />}
+                />
+            </HasPermission>
+            <Wcp.CanUseTeams>
+                <HasPermission name={Permission.Teams}>
+                    <Menu
+                        name={"security.teams"}
+                        parent={"settings"}
+                        element={<Menu.Link text={"Teams"} to={"/access-management/teams"} />}
+                    />
+                </HasPermission>
+            </Wcp.CanUseTeams>
+
+            <HasPermission name={Permission.ApiKeys}>
+                <Menu
+                    name={"security.apiKeys"}
+                    parent={"settings"}
+                    element={<Menu.Link text={"API Keys"} to={"/access-management/api-keys"} />}
+                />
             </HasPermission>
-        </Plugins>
+        </AdminConfig>
     );
 };
 
diff --git a/packages/app-security-access-management/src/plugins/permissionRenderer/SecurityPermissions.tsx b/packages/app-security-access-management/src/plugins/permissionRenderer/SecurityPermissions.tsx
index 0f550b64e21..620efe4067d 100644
--- a/packages/app-security-access-management/src/plugins/permissionRenderer/SecurityPermissions.tsx
+++ b/packages/app-security-access-management/src/plugins/permissionRenderer/SecurityPermissions.tsx
@@ -5,11 +5,10 @@ import { i18n } from "@webiny/app/i18n";
 import {
     CannotUseAaclAlert,
     PermissionInfo,
-    gridNoPaddingClass
+    gridWithPaddingClass,
+    PermissionsGroup
 } from "@webiny/app-admin/components/Permissions";
 import { Form } from "@webiny/form";
-import { Elevation } from "@webiny/ui/Elevation";
-import { Typography } from "@webiny/ui/Typography";
 import { SecurityPermission } from "@webiny/app-security/types";
 import { useSecurity } from "@webiny/app-security";
 import { AaclPermission, useWcp } from "@webiny/app-admin";
@@ -122,20 +121,20 @@ export const SecurityPermissions = ({ value, onChange }: SecurityPermissionsProp
             {({ data, Bind }) => {
                 return (
                     <Fragment>
-                        <Grid className={gridNoPaddingClass}>
+                        <Grid className={gridWithPaddingClass}>
                             <Cell span={12}>
                                 {data.accessLevel === "custom" && cannotUseAacl && (
                                     <CannotUseAaclAlert />
                                 )}
                             </Cell>
                         </Grid>
-                        <Grid className={gridNoPaddingClass}>
+                        <Grid className={gridWithPaddingClass}>
                             <Cell span={6}>
                                 <PermissionInfo title={t`Access Level`} />
                             </Cell>
                             <Cell span={6}>
                                 <Bind name={"accessLevel"}>
-                                    <Select label={t`Access Level`}>
+                                    <Select>
                                         <option value={NO_ACCESS}>{t`No access`}</option>
                                         <option value={FULL_ACCESS}>{t`Full access`}</option>
                                         <option value={CUSTOM_ACCESS}>{t`Custom access`}</option>
@@ -144,12 +143,9 @@ export const SecurityPermissions = ({ value, onChange }: SecurityPermissionsProp
                             </Cell>
                         </Grid>
                         {data.accessLevel === CUSTOM_ACCESS && (
-                            <React.Fragment>
-                                <Elevation z={1} style={{ marginTop: 10 }}>
+                            <div className={"wby-mt-lg"}>
+                                <PermissionsGroup title={t`API Keys`}>
                                     <Grid>
-                                        <Cell span={12}>
-                                            <Typography use={"overline"}>{t`API Keys`}</Typography>
-                                        </Cell>
                                         <Cell span={12}>
                                             <Bind name={"apiKeyAccessScope"}>
                                                 <Select
@@ -166,12 +162,9 @@ export const SecurityPermissions = ({ value, onChange }: SecurityPermissionsProp
                                             </Bind>
                                         </Cell>
                                     </Grid>
-                                </Elevation>
-                                <Elevation z={1} style={{ marginTop: 10 }}>
+                                </PermissionsGroup>
+                                <PermissionsGroup title={t`Roles`}>
                                     <Grid>
-                                        <Cell span={12}>
-                                            <Typography use={"overline"}>{t`Roles`}</Typography>
-                                        </Cell>
                                         <Cell span={12}>
                                             <Bind name={"groupAccessScope"}>
                                                 <Select
@@ -188,13 +181,10 @@ export const SecurityPermissions = ({ value, onChange }: SecurityPermissionsProp
                                             </Bind>
                                         </Cell>
                                     </Grid>
-                                </Elevation>
+                                </PermissionsGroup>
                                 {teams && (
-                                    <Elevation z={1} style={{ marginTop: 10 }}>
+                                    <PermissionsGroup title={t`Teams`}>
                                         <Grid>
-                                            <Cell span={12}>
-                                                <Typography use={"overline"}>{t`Teams`}</Typography>
-                                            </Cell>
                                             <Cell span={12}>
                                                 <Bind name={"teamAccessScope"}>
                                                     <Select
@@ -211,9 +201,9 @@ export const SecurityPermissions = ({ value, onChange }: SecurityPermissionsProp
                                                 </Bind>
                                             </Cell>
                                         </Grid>
-                                    </Elevation>
+                                    </PermissionsGroup>
                                 )}
-                            </React.Fragment>
+                            </div>
                         )}
                     </Fragment>
                 );
diff --git a/packages/app-security-access-management/src/plugins/permissionRenderer/index.tsx b/packages/app-security-access-management/src/plugins/permissionRenderer/index.tsx
index 7f51a61b72a..a3c32384246 100644
--- a/packages/app-security-access-management/src/plugins/permissionRenderer/index.tsx
+++ b/packages/app-security-access-management/src/plugins/permissionRenderer/index.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { i18n } from "@webiny/app/i18n";
-import { AccordionItem } from "@webiny/ui/Accordion";
-import { ReactComponent as SecurityIcon } from "@webiny/app-admin/assets/icons/baseline-security-24px.svg";
+import { Accordion } from "@webiny/admin-ui";
+import { ReactComponent as PermissionsIcon } from "@webiny/icons/security.svg";
 import { SecurityPermissions } from "./SecurityPermissions";
 import { PermissionRendererPlugin } from "@webiny/app-admin/plugins/PermissionRendererPlugin";
 
@@ -10,14 +10,19 @@ const t = i18n.ns("app-security-admin-users/plugins/permissionRenderer");
 export default new PermissionRendererPlugin({
     render(props) {
         return (
-            <AccordionItem
-                icon={<SecurityIcon />}
+            <Accordion.Item
+                icon={
+                    <Accordion.Item.Icon
+                        icon={<PermissionsIcon />}
+                        label={"Security Permissions"}
+                    />
+                }
                 title={t`Security`}
                 description={t`Manage Security app access permissions.`}
                 data-testid={"permission.security"}
             >
                 <SecurityPermissions {...props} />
-            </AccordionItem>
+            </Accordion.Item>
         );
     }
 });
diff --git a/packages/app-security-access-management/src/ui/views/ApiKeys/ApiKeyForm.tsx b/packages/app-security-access-management/src/ui/views/ApiKeys/ApiKeyForm.tsx
index 912ba562289..f9e004bc589 100644
--- a/packages/app-security-access-management/src/ui/views/ApiKeys/ApiKeyForm.tsx
+++ b/packages/app-security-access-management/src/ui/views/ApiKeys/ApiKeyForm.tsx
@@ -4,17 +4,6 @@ import get from "lodash/get";
 import { useRouter } from "@webiny/react-router";
 import { i18n } from "@webiny/app/i18n";
 import { Form } from "@webiny/form";
-import { Grid, Cell } from "@webiny/ui/Grid";
-import { Input } from "@webiny/ui/Input";
-import {
-    ButtonDefault,
-    ButtonIcon,
-    ButtonPrimary,
-    CopyButton,
-    IconButton
-} from "@webiny/ui/Button";
-import { CircularProgress } from "@webiny/ui/Progress";
-import { FormElementMessage } from "@webiny/ui/FormElementMessage";
 import { Permissions } from "@webiny/app-admin/components/Permissions";
 import { validation } from "@webiny/validation";
 import {
@@ -23,31 +12,30 @@ import {
     SimpleFormContent,
     SimpleFormHeader
 } from "@webiny/app-admin/components/SimpleForm";
-import { Typography } from "@webiny/ui/Typography";
 import { useSnackbar } from "@webiny/app-admin/hooks/useSnackbar";
 import { pickDataForAPI } from "./utils";
 import * as GQL from "./graphql";
-import { SnackbarAction } from "@webiny/ui/Snackbar";
 import isEmpty from "lodash/isEmpty";
 import EmptyView from "@webiny/app-admin/components/EmptyView";
-import { ReactComponent as AddIcon } from "@webiny/app-admin/assets/icons/add-18px.svg";
-import { ReactComponent as CopyIcon } from "@material-design-icons/svg/outlined/content_copy.svg";
-import styled from "@emotion/styled";
+import { ReactComponent as AddIcon } from "@webiny/icons/add.svg";
+import { ReactComponent as CopyIcon } from "@webiny/icons/content_copy.svg";
+import { ReactComponent as SettingsIcon } from "@webiny/icons/settings.svg";
 import { ApiKey } from "~/types";
-import { Tooltip } from "@webiny/ui/Tooltip";
+import {
+    Alert,
+    Button,
+    CopyButton,
+    Grid,
+    IconButton,
+    Input,
+    Label,
+    OverlayLoader,
+    Textarea,
+    Tooltip
+} from "@webiny/admin-ui";
 
 const t = i18n.ns("app-security-admin-users/admin/api-keys/form");
 
-const ButtonWrapper = styled("div")({
-    display: "flex",
-    justifyContent: "space-between"
-});
-
-const PermissionsTitleCell = styled(Cell)`
-    display: flex;
-    align-items: center;
-`;
-
 export interface ApiKeyFormProps {
     // TODO @ts-refactor delete and go up the tree and sort it out
     [key: string]: any;
@@ -90,8 +78,7 @@ export const ApiKeyForm = () => {
             if (!formData.permissions || !formData.permissions.length) {
                 showSnackbar(t`You must configure permissions before saving!`, {
                     timeout: 60000,
-                    dismissesOnAction: true,
-                    action: <SnackbarAction label={"OK"} />
+                    dismissesOnAction: true
                 });
                 return;
             }
@@ -123,14 +110,15 @@ export const ApiKeyForm = () => {
     if (showEmptyView) {
         return (
             <EmptyView
+                icon={<SettingsIcon />}
                 title={t`Click on the left side list to display API key details or create a...`}
                 action={
-                    <ButtonDefault
+                    <Button
+                        icon={<AddIcon />}
+                        text={t`New API Key`}
                         data-testid="new-record-button"
                         onClick={() => history.push("/access-management/api-keys?new=true")}
-                    >
-                        <ButtonIcon icon={<AddIcon />} /> {t`New API Key`}
-                    </ButtonDefault>
+                    />
                 }
             />
         );
@@ -140,113 +128,104 @@ export const ApiKeyForm = () => {
         <Form data={data} onSubmit={onSubmit}>
             {({ data, form, Bind }) => {
                 return (
-                    <SimpleForm>
-                        {loading && <CircularProgress />}
+                    <SimpleForm size={"lg"}>
+                        {loading && <OverlayLoader />}
                         <SimpleFormHeader title={data.name ? data.name : "Untitled"} />
                         <SimpleFormContent>
                             <Grid>
-                                <Cell span={12}>
+                                <Grid.Column span={12}>
                                     <Bind name="name" validators={validation.create("required")}>
                                         <Input
+                                            size={"lg"}
                                             label={t`Name`}
                                             data-testid="sam.key.new.form.name"
                                         />
                                     </Bind>
-                                </Cell>
-                            </Grid>
-                            <Grid>
-                                <Cell span={12}>
+                                </Grid.Column>
+                                <Grid.Column span={12}>
                                     <Bind
                                         name="description"
                                         validators={validation.create("required")}
                                     >
-                                        <Input
+                                        <Textarea
+                                            size={"lg"}
                                             label={t`Description`}
                                             rows={4}
                                             data-testid="sam.key.new.form.description"
                                         />
                                     </Bind>
-                                </Cell>
-                            </Grid>
-                            <Grid>
-                                <Cell span={12}>
+                                </Grid.Column>
+                                <Grid.Column span={12}>
                                     <div>
-                                        <Typography use={"subtitle1"}>{t`Token`}</Typography>
+                                        <Label text={t`Token`} />
                                         {data.token ? (
                                             <div
-                                                style={{
-                                                    background: "var(--mdc-theme-background)",
-                                                    padding: "8px",
-                                                    paddingLeft: "16px"
-                                                }}
+                                                className={
+                                                    "wby-py-sm wby-pl-sm-extra wby-pr-xs wby-rounded-md wby-mt-xs wby-bg-neutral-disabled wby-flex wby-justify-between wby-items-center"
+                                                }
                                             >
-                                                <span
-                                                    style={{
-                                                        lineHeight: "48px",
-                                                        verticalAlign: "middle"
-                                                    }}
-                                                >
-                                                    {data.token}
-                                                </span>
-                                                <span
-                                                    style={{ position: "absolute", right: "32px" }}
-                                                >
-                                                    <CopyButton
-                                                        value={data.token}
-                                                        onCopy={() =>
-                                                            showSnackbar("Successfully copied!")
-                                                        }
-                                                    />
-                                                </span>
+                                                <div>{data.token}</div>
+                                                <CopyButton
+                                                    variant={"ghost"}
+                                                    value={data.token}
+                                                    onCopy={() =>
+                                                        showSnackbar("Successfully copied!")
+                                                    }
+                                                />
                                             </div>
                                         ) : (
-                                            <FormElementMessage>
-                                                Your token will be shown once you submit the form.
-                                            </FormElementMessage>
+                                            <Alert className={"wby-mt-xs"}>
+                                                {
+                                                    "Your token will be shown once you submit the form."
+                                                }
+                                            </Alert>
                                         )}
                                     </div>
-                                </Cell>
+                                </Grid.Column>
                             </Grid>
+                        </SimpleFormContent>
+                        <SimpleFormHeader title={"Permissions"} rounded={false}>
+                            <div className={"wby-flex wby-justify-end"}>
+                                <Tooltip
+                                    content="Copy permissions as JSON"
+                                    trigger={
+                                        <IconButton
+                                            variant={"ghost"}
+                                            icon={<CopyIcon />}
+                                            onClick={() => {
+                                                navigator.clipboard.writeText(
+                                                    JSON.stringify(data.permissions, null, 2)
+                                                );
+                                                showSnackbar("JSON data copied to clipboard.");
+                                            }}
+                                        />
+                                    }
+                                />
+                            </div>
+                        </SimpleFormHeader>
+                        <SimpleFormContent>
                             <Grid>
-                                <Cell span={12}>
-                                    <PermissionsTitleCell span={12}>
-                                        <Typography use={"subtitle1"}>{t`Permissions`}</Typography>
-                                        <Tooltip
-                                            content="Copy permissions as JSON"
-                                            placement={"top"}
-                                        >
-                                            <IconButton
-                                                icon={<CopyIcon />}
-                                                onClick={() => {
-                                                    navigator.clipboard.writeText(
-                                                        JSON.stringify(data.permissions, null, 2)
-                                                    );
-                                                    showSnackbar("JSON data copied to clipboard.");
-                                                }}
-                                            />
-                                        </Tooltip>
-                                    </PermissionsTitleCell>
-                                </Cell>
-                                <Cell span={12}>
+                                <Grid.Column span={12}>
                                     <Bind name={"permissions"} defaultValue={[]}>
                                         {bind => <Permissions id={data.id || "new"} {...bind} />}
                                     </Bind>
-                                </Cell>
+                                </Grid.Column>
                             </Grid>
                         </SimpleFormContent>
                         <SimpleFormFooter>
-                            <ButtonWrapper>
-                                <ButtonDefault
-                                    onClick={() => history.push("/access-management/api-keys")}
-                                    data-testid="sam.key.new.form.button.cancel"
-                                >{t`Cancel`}</ButtonDefault>
-                                <ButtonPrimary
-                                    onClick={ev => {
-                                        form.submit(ev);
-                                    }}
-                                    data-testid="sam.key.new.form.button.save"
-                                >{t`Save API key`}</ButtonPrimary>
-                            </ButtonWrapper>
+                            <Button
+                                variant={"secondary"}
+                                text={t`Cancel`}
+                                onClick={() => history.push("/access-management/api-keys")}
+                                data-testid="sam.key.new.form.button.cancel"
+                            />
+                            <Button
+                                text={t`Save`}
+                                data-testid="sam.key.new.form.button.save"
+                                onClick={ev => {
+                                    form.submit(ev);
+                                }}
+                            />
                         </SimpleFormFooter>
                     </SimpleForm>
                 );
diff --git a/packages/app-security-access-management/src/ui/views/ApiKeys/ApiKeysDataList.tsx b/packages/app-security-access-management/src/ui/views/ApiKeys/ApiKeysDataList.tsx
index 1f6802dc19f..819274dc8d6 100644
--- a/packages/app-security-access-management/src/ui/views/ApiKeys/ApiKeysDataList.tsx
+++ b/packages/app-security-access-management/src/ui/views/ApiKeys/ApiKeysDataList.tsx
@@ -1,5 +1,7 @@
 import React, { useCallback, useMemo, useState } from "react";
 import orderBy from "lodash/orderBy";
+import { Button, Grid, Select } from "@webiny/admin-ui";
+import { ReactComponent as AddIcon } from "@webiny/icons/add.svg";
 import { i18n } from "@webiny/app/i18n";
 import {
     DataList,
@@ -10,20 +12,16 @@ import {
     ListItemMeta,
     ListActions,
     DataListModalOverlayAction,
-    DataListModalOverlay
+    DataListModalOverlay,
+    ListItemTextPrimary
 } from "@webiny/ui/List";
-import { ButtonIcon, ButtonSecondary } from "@webiny/ui/Button";
 import { DeleteIcon } from "@webiny/ui/List/DataList/icons";
-import { Cell, Grid } from "@webiny/ui/Grid";
-import { Select } from "@webiny/ui/Select";
 import { useRouter } from "@webiny/react-router";
 import SearchUI from "@webiny/app-admin/components/SearchUI";
 import { useSnackbar } from "@webiny/app-admin/hooks/useSnackbar";
 import { useQuery, useMutation } from "@apollo/react-hooks";
 import { useConfirmationDialog } from "@webiny/app-admin/hooks/useConfirmationDialog";
 import * as GQL from "./graphql";
-import { ReactComponent as AddIcon } from "@webiny/app-admin/assets/icons/add-18px.svg";
-import { ReactComponent as FilterIcon } from "@webiny/app-admin/assets/icons/filter-24px.svg";
 import { deserializeSorters } from "../utils";
 import { ApiKey } from "~/types";
 
@@ -118,17 +116,19 @@ export const ApiKeysDataList = () => {
         () => (
             <DataListModalOverlay>
                 <Grid>
-                    <Cell span={12}>
-                        <Select value={sort} onChange={setSort} label={t`Sort by`}>
-                            {SORTERS.map(({ label, sorter }) => {
-                                return (
-                                    <option key={label} value={sorter}>
-                                        {label}
-                                    </option>
-                                );
+                    <Grid.Column span={12}>
+                        <Select
+                            value={sort}
+                            onChange={setSort}
+                            label={t`Sort by`}
+                            options={SORTERS.map(({ label, sorter: value }) => {
+                                return {
+                                    label,
+                                    value
+                                };
                             })}
-                        </Select>
-                    </Cell>
+                        />
+                    </Grid.Column>
                 </Grid>
             </DataListModalOverlay>
         ),
@@ -140,14 +140,16 @@ export const ApiKeysDataList = () => {
 
     return (
         <DataList
-            title={t`API Keys`}
+            title={t`API keys`}
             actions={
-                <ButtonSecondary
+                <Button
+                    text={t`New`}
+                    icon={<AddIcon />}
+                    size={"sm"}
+                    className={"wby-ml-xs"}
                     data-testid="new-record-button"
                     onClick={() => history.push("/access-management/api-keys?new=true")}
-                >
-                    <ButtonIcon icon={<AddIcon />} /> {t`New API Key`}
-                </ButtonSecondary>
+                />
             }
             data={list}
             loading={listLoading || deleteLoading}
@@ -155,15 +157,12 @@ export const ApiKeysDataList = () => {
                 <SearchUI
                     value={filter}
                     onChange={setFilter}
-                    inputPlaceholder={t`Search API keys`}
+                    inputPlaceholder={t`Search API keys...`}
                 />
             }
             modalOverlay={groupsDataListModalOverlay}
             modalOverlayAction={
-                <DataListModalOverlayAction
-                    icon={<FilterIcon />}
-                    data-testid={"default-data-list.filter"}
-                />
+                <DataListModalOverlayAction data-testid={"default-data-list.filter"} />
             }
         >
             {({ data }: { data: ApiKey[] }) => (
@@ -175,7 +174,7 @@ export const ApiKeysDataList = () => {
                                     history.push(`/access-management/api-keys?id=${item.id}`)
                                 }
                             >
-                                {item.name}
+                                <ListItemTextPrimary>{item.name}</ListItemTextPrimary>
                                 <ListItemTextSecondary>{item.description}</ListItemTextSecondary>
                             </ListItemText>
 
diff --git a/packages/app-security-access-management/src/ui/views/Groups/GroupsDataList.tsx b/packages/app-security-access-management/src/ui/views/Groups/GroupsDataList.tsx
index 6d4ce515a44..ee6ae2a6515 100644
--- a/packages/app-security-access-management/src/ui/views/Groups/GroupsDataList.tsx
+++ b/packages/app-security-access-management/src/ui/views/Groups/GroupsDataList.tsx
@@ -10,7 +10,8 @@ import {
     ListItemMeta,
     ListActions,
     DataListModalOverlayAction,
-    DataListModalOverlay
+    DataListModalOverlay,
+    ListItemTextPrimary
 } from "@webiny/ui/List";
 import { DeleteIcon } from "@webiny/ui/List/DataList/icons";
 import { useRouter } from "@webiny/react-router";
@@ -18,15 +19,11 @@ import { useSnackbar } from "@webiny/app-admin/hooks/useSnackbar";
 import { useQuery, useMutation } from "@apollo/react-hooks";
 import { useConfirmationDialog } from "@webiny/app-admin/hooks/useConfirmationDialog";
 import { LIST_GROUPS, DELETE_GROUP, ListGroupsResponse } from "./graphql";
-import { Tooltip } from "@webiny/ui/Tooltip";
-import { ButtonIcon, ButtonSecondary } from "@webiny/ui/Button";
-import { Cell, Grid } from "@webiny/ui/Grid";
-import { Select } from "@webiny/ui/Select";
 import SearchUI from "@webiny/app-admin/components/SearchUI";
-import { ReactComponent as AddIcon } from "@webiny/app-admin/assets/icons/add-18px.svg";
-import { ReactComponent as FilterIcon } from "@webiny/app-admin/assets/icons/filter-24px.svg";
 import { deserializeSorters } from "../utils";
 import { Group } from "~/types";
+import { Button, Grid, Select, Tooltip } from "@webiny/admin-ui";
+import { ReactComponent as AddIcon } from "@webiny/icons/add.svg";
 
 const t = i18n.ns("app-security/admin/roles/data-list");
 
@@ -120,17 +117,17 @@ export const GroupsDataList = () => {
         () => (
             <DataListModalOverlay>
                 <Grid>
-                    <Cell span={12}>
-                        <Select value={sort} onChange={setSort} label={t`Sort by`}>
-                            {SORTERS.map(({ label, sorter }) => {
-                                return (
-                                    <option key={label} value={sorter}>
-                                        {label}
-                                    </option>
-                                );
-                            })}
-                        </Select>
-                    </Cell>
+                    <Grid.Column span={12}>
+                        <Select
+                            value={sort}
+                            onChange={setSort}
+                            label={t`Sort by`}
+                            options={SORTERS.map(({ label, sorter: value }) => ({
+                                label,
+                                value
+                            }))}
+                        />
+                    </Grid.Column>
                 </Grid>
             </DataListModalOverlay>
         ),
@@ -144,24 +141,27 @@ export const GroupsDataList = () => {
         <DataList
             title={t`Roles`}
             actions={
-                <ButtonSecondary
+                <Button
+                    text={t`New`}
+                    icon={<AddIcon />}
+                    size={"sm"}
+                    className={"wby-ml-xs"}
                     data-testid="new-record-button"
                     onClick={() => history.push("/access-management/roles?new=true")}
-                >
-                    <ButtonIcon icon={<AddIcon />} /> {t`New Role`}
-                </ButtonSecondary>
+                />
             }
             data={groupList}
             loading={listLoading || deleteLoading}
             search={
-                <SearchUI value={filter} onChange={setFilter} inputPlaceholder={t`Search Roles`} />
+                <SearchUI
+                    value={filter}
+                    onChange={setFilter}
+                    inputPlaceholder={t`Search roles...`}
+                />
             }
             modalOverlay={groupsDataListModalOverlay}
             modalOverlayAction={
-                <DataListModalOverlayAction
-                    icon={<FilterIcon />}
-                    data-testid={"default-data-list.filter"}
-                />
+                <DataListModalOverlayAction data-testid={"default-data-list.filter"} />
             }
         >
             {({ data }: { data: Group[] }) => (
@@ -173,7 +173,7 @@ export const GroupsDataList = () => {
                                     history.push(`/access-management/roles?id=${item.id}`)
                                 }
                             >
-                                {item.name}
+                                <ListItemTextPrimary>{item.name}</ListItemTextPrimary>
                                 <ListItemTextSecondary>{item.description}</ListItemTextSecondary>
                             </ListItemText>
 
@@ -181,7 +181,6 @@ export const GroupsDataList = () => {
                                 <ListActions>
                                     {item.system || item.plugin ? (
                                         <Tooltip
-                                            placement={"bottom"}
                                             content={
                                                 <span>
                                                     {item.system
@@ -189,9 +188,8 @@ export const GroupsDataList = () => {
                                                         : t`Cannot delete roles registered via extensions.`}
                                                 </span>
                                             }
-                                        >
-                                            <DeleteIcon disabled />
-                                        </Tooltip>
+                                            trigger={<DeleteIcon disabled />}
+                                        />
                                     ) : (
                                         <DeleteIcon
                                             onClick={() => deleteItem(item)}
diff --git a/packages/app-security-access-management/src/ui/views/Groups/GroupsForm.tsx b/packages/app-security-access-management/src/ui/views/Groups/GroupsForm.tsx
index 68dfbd9d86b..1029d36e37b 100644
--- a/packages/app-security-access-management/src/ui/views/Groups/GroupsForm.tsx
+++ b/packages/app-security-access-management/src/ui/views/Groups/GroupsForm.tsx
@@ -1,16 +1,10 @@
 import React, { useCallback } from "react";
 import { useMutation, useQuery } from "@apollo/react-hooks";
-import styled from "@emotion/styled";
 import pick from "lodash/pick";
 import get from "lodash/get";
 import { useRouter } from "@webiny/react-router";
 import { i18n } from "@webiny/app/i18n";
 import { Form } from "@webiny/form";
-import { Grid, Cell } from "@webiny/ui/Grid";
-import { Input } from "@webiny/ui/Input";
-import { Alert } from "@webiny/ui/Alert";
-import { ButtonDefault, ButtonIcon, ButtonPrimary, IconButton } from "@webiny/ui/Button";
-import { CircularProgress } from "@webiny/ui/Progress";
 import { validation } from "@webiny/validation";
 import {
     SimpleForm,
@@ -18,30 +12,28 @@ import {
     SimpleFormContent,
     SimpleFormHeader
 } from "@webiny/app-admin/components/SimpleForm";
-import { Typography } from "@webiny/ui/Typography";
 import { Permissions } from "@webiny/app-admin/components/Permissions";
 import { useSnackbar } from "@webiny/app-admin/hooks/useSnackbar";
 import { CREATE_GROUP, LIST_GROUPS, READ_GROUP, UPDATE_GROUP } from "./graphql";
-import { SnackbarAction } from "@webiny/ui/Snackbar";
 import isEmpty from "lodash/isEmpty";
 import EmptyView from "@webiny/app-admin/components/EmptyView";
-import { ReactComponent as AddIcon } from "@webiny/app-admin/assets/icons/add-18px.svg";
-import { Tooltip } from "@webiny/ui/Tooltip";
-import { ReactComponent as CopyIcon } from "@material-design-icons/svg/outlined/content_copy.svg";
+import { ReactComponent as AddIcon } from "@webiny/icons/add.svg";
+import { ReactComponent as CopyIcon } from "@webiny/icons/content_copy.svg";
+import { ReactComponent as SettingsIcon } from "@webiny/icons/settings.svg";
 import { Group } from "~/types";
+import {
+    Alert,
+    Button,
+    Grid,
+    IconButton,
+    Input,
+    OverlayLoader,
+    Textarea,
+    Tooltip
+} from "@webiny/admin-ui";
 
 const t = i18n.ns("app-security/admin/roles/form");
 
-const ButtonWrapper = styled.div`
-    display: flex;
-    justify-content: space-between;
-`;
-
-const PermissionsTitleCell = styled(Cell)`
-    display: flex;
-    align-items: center;
-`;
-
 export interface GroupsFormProps {
     // TODO @ts-refactor delete and go up the tree and sort it out
     [key: string]: any;
@@ -84,8 +76,7 @@ export const GroupsForm = () => {
             if (!formData.permissions || !formData.permissions.length) {
                 showSnackbar(t`You must configure permissions before saving!`, {
                     timeout: 60000,
-                    dismissesOnAction: true,
-                    action: <SnackbarAction label={"OK"} />
+                    dismissesOnAction: true
                 });
                 return;
             }
@@ -134,15 +125,15 @@ export const GroupsForm = () => {
     if (showEmptyView) {
         return (
             <EmptyView
+                icon={<SettingsIcon />}
                 title={t`Click on the left side list to display role details or create a...`}
                 action={
-                    <ButtonDefault
+                    <Button
+                        icon={<AddIcon />}
+                        text={t`New Role`}
                         data-testid="new-record-button"
                         onClick={() => history.push("/access-management/roles?new=true")}
-                    >
-                        <ButtonIcon icon={<AddIcon />} />
-                        {t`New Role`}
-                    </ButtonDefault>
+                    />
                 }
             />
         );
@@ -152,115 +143,130 @@ export const GroupsForm = () => {
         <Form data={data} onSubmit={onSubmit}>
             {({ data, form, Bind }) => {
                 return (
-                    <SimpleForm>
-                        {loading && <CircularProgress />}
+                    <SimpleForm size={"lg"}>
+                        {loading && <OverlayLoader />}
                         <SimpleFormHeader title={data.name ? data.name : "Untitled"} />
                         <SimpleFormContent>
-                            {systemGroup && (
-                                <Grid>
-                                    <Cell span={12}>
-                                        <Alert type={"info"} title={"Permissions are locked"}>
-                                            This is a protected system role and you can&apos;t
-                                            modify its permissions.
-                                        </Alert>
-                                    </Cell>
-                                </Grid>
-                            )}
-                            {pluginGroup && (
-                                <Grid>
-                                    <Cell span={12}>
-                                        <Alert type={"info"} title={"Permissions are locked"}>
-                                            This role is registered via an extension, and cannot be
-                                            modified.
-                                        </Alert>
-                                    </Cell>
-                                </Grid>
-                            )}
-                            <Grid>
-                                <Cell span={6}>
-                                    <Bind
-                                        name="name"
-                                        validators={validation.create("required,minLength:3")}
-                                    >
-                                        <Input
-                                            label={t`Name`}
-                                            disabled={!canModifyGroup}
-                                            data-testid="admin.am.group.new.name"
-                                        />
-                                    </Bind>
-                                </Cell>
-                                <Cell span={6}>
-                                    <Bind
-                                        name="slug"
-                                        validators={validation.create("required,minLength:3")}
-                                    >
-                                        <Input
-                                            disabled={!canModifyGroup || !newGroup}
-                                            label={t`Slug`}
-                                            data-testid="admin.am.group.new.slug"
-                                        />
-                                    </Bind>
-                                </Cell>
-                            </Grid>
                             <Grid>
-                                <Cell span={12}>
-                                    <Bind
-                                        name="description"
-                                        validators={validation.create("maxLength:500")}
-                                    >
-                                        <Input
-                                            label={t`Description`}
-                                            rows={3}
-                                            disabled={!canModifyGroup}
-                                            data-testid="admin.am.group.new.description"
-                                        />
-                                    </Bind>
-                                </Cell>
-                            </Grid>
-                            {canModifyGroup && (
-                                <Grid>
-                                    <PermissionsTitleCell span={12}>
-                                        <Typography use={"subtitle1"}>{t`Permissions`}</Typography>
-                                        <Tooltip
-                                            content="Copy permissions as JSON"
-                                            placement={"top"}
+                                <>
+                                    {systemGroup && (
+                                        <Grid.Column span={12}>
+                                            <Alert
+                                                type={"warning"}
+                                                title={"Permissions are locked"}
+                                            >
+                                                This is a protected system role and you can&apos;t
+                                                modify its permissions.
+                                            </Alert>
+                                        </Grid.Column>
+                                    )}
+                                    {pluginGroup && (
+                                        <Grid.Column span={12}>
+                                            <Alert
+                                                type={"warning"}
+                                                title={"Permissions are locked"}
+                                            >
+                                                This role is registered via an extension, and cannot
+                                                be modified.
+                                            </Alert>
+                                        </Grid.Column>
+                                    )}
+                                    <Grid.Column span={6}>
+                                        <Bind
+                                            name="name"
+                                            validators={validation.create("required,minLength:3")}
                                         >
-                                            <IconButton
-                                                icon={<CopyIcon />}
-                                                onClick={() => {
-                                                    navigator.clipboard.writeText(
-                                                        JSON.stringify(data.permissions, null, 2)
-                                                    );
-                                                    showSnackbar("JSON data copied to clipboard.");
-                                                }}
+                                            <Input
+                                                size={"lg"}
+                                                label={t`Name`}
+                                                disabled={!canModifyGroup}
+                                                data-testid="admin.am.group.new.name"
                                             />
-                                        </Tooltip>
-                                    </PermissionsTitleCell>
-                                    <Cell span={12}>
-                                        <Bind name={"permissions"} defaultValue={[]}>
-                                            {bind => (
-                                                <Permissions id={data.id || "new"} {...bind} />
-                                            )}
                                         </Bind>
-                                    </Cell>
-                                </Grid>
-                            )}
+                                    </Grid.Column>
+                                    <Grid.Column span={6}>
+                                        <Bind
+                                            name="slug"
+                                            validators={validation.create("required,minLength:3")}
+                                        >
+                                            <Input
+                                                size={"lg"}
+                                                disabled={!canModifyGroup || !newGroup}
+                                                label={t`Slug`}
+                                                data-testid="admin.am.group.new.slug"
+                                            />
+                                        </Bind>
+                                    </Grid.Column>
+                                    <Grid.Column span={12}>
+                                        <Bind
+                                            name="description"
+                                            validators={validation.create("maxLength:500")}
+                                        >
+                                            <Textarea
+                                                size={"lg"}
+                                                label={t`Description`}
+                                                rows={3}
+                                                disabled={!canModifyGroup}
+                                                data-testid="admin.am.group.new.description"
+                                            />
+                                        </Bind>
+                                    </Grid.Column>
+                                </>
+                            </Grid>
                         </SimpleFormContent>
-                        {canModifyGroup && (
-                            <SimpleFormFooter>
-                                <ButtonWrapper>
-                                    <ButtonDefault
+                        <SimpleFormHeader title={"Permissions"} rounded={false}>
+                            <div className={"wby-flex wby-justify-end"}>
+                                <Tooltip
+                                    content="Copy permissions as JSON"
+                                    trigger={
+                                        <IconButton
+                                            variant={"ghost"}
+                                            icon={<CopyIcon />}
+                                            onClick={() => {
+                                                navigator.clipboard.writeText(
+                                                    JSON.stringify(data.permissions, null, 2)
+                                                );
+                                                showSnackbar("JSON data copied to clipboard.");
+                                            }}
+                                        />
+                                    }
+                                />
+                            </div>
+                        </SimpleFormHeader>
+                        <SimpleFormContent>
+                            <Grid>
+                                <>
+                                    {canModifyGroup && (
+                                        <Grid.Column span={12}>
+                                            <Bind name={"permissions"} defaultValue={[]}>
+                                                {bind => (
+                                                    <Permissions id={data.id || "new"} {...bind} />
+                                                )}
+                                            </Bind>
+                                        </Grid.Column>
+                                    )}
+                                </>
+                            </Grid>
+                        </SimpleFormContent>
+                        <SimpleFormFooter>
+                            {canModifyGroup && (
+                                <>
+                                    <Button
+                                        variant={"secondary"}
+                                        text={t`Cancel`}
                                         onClick={() => history.push("/access-management/roles")}
-                                    >{t`Cancel`}</ButtonDefault>
-                                    <ButtonPrimary
+                                        data-testid="pb.category.new.form.button.cancel"
+                                    />
+                                    <Button
+                                        text={t`Save`}
                                         data-testid="admin.am.group.new.save"
                                         onClick={ev => {
                                             form.submit(ev);
                                         }}
-                                    >{t`Save role`}</ButtonPrimary>
-                                </ButtonWrapper>
-                            </SimpleFormFooter>
-                        )}
+                                    />
+                                </>
+                            )}
+                        </SimpleFormFooter>
                     </SimpleForm>
                 );
             }}
diff --git a/packages/app-security-access-management/src/ui/views/Teams/TeamsDataList.tsx b/packages/app-security-access-management/src/ui/views/Teams/TeamsDataList.tsx
index 32bdb4bf1cf..b011354c3c0 100644
--- a/packages/app-security-access-management/src/ui/views/Teams/TeamsDataList.tsx
+++ b/packages/app-security-access-management/src/ui/views/Teams/TeamsDataList.tsx
@@ -1,5 +1,7 @@
 import React, { useCallback, useMemo, useState } from "react";
 import orderBy from "lodash/orderBy";
+import { Button, Grid, Select, Tooltip } from "@webiny/admin-ui";
+import { ReactComponent as AddIcon } from "@webiny/icons/add.svg";
 import { i18n } from "@webiny/app/i18n";
 import {
     DataList,
@@ -9,7 +11,9 @@ import {
     ListItemTextSecondary,
     ListItemMeta,
     DataListModalOverlayAction,
-    DataListModalOverlay
+    DataListModalOverlay,
+    ListItemTextPrimary,
+    ListActions
 } from "@webiny/ui/List";
 import { DeleteIcon } from "@webiny/ui/List/DataList/icons";
 import { useRouter } from "@webiny/react-router";
@@ -17,13 +21,7 @@ import { useSnackbar } from "@webiny/app-admin/hooks/useSnackbar";
 import { useQuery, useMutation } from "@apollo/react-hooks";
 import { useConfirmationDialog } from "@webiny/app-admin/hooks/useConfirmationDialog";
 import { LIST_TEAMS, DELETE_TEAM, ListTeamsResponse } from "./graphql";
-import { Tooltip } from "@webiny/ui/Tooltip";
-import { ButtonIcon, ButtonSecondary } from "@webiny/ui/Button";
-import { Cell, Grid } from "@webiny/ui/Grid";
-import { Select } from "@webiny/ui/Select";
 import SearchUI from "@webiny/app-admin/components/SearchUI";
-import { ReactComponent as AddIcon } from "@webiny/app-admin/assets/icons/add-18px.svg";
-import { ReactComponent as FilterIcon } from "@webiny/app-admin/assets/icons/filter-24px.svg";
 import { deserializeSorters } from "../utils";
 import { Team } from "~/types";
 
@@ -119,17 +117,19 @@ export const TeamsDataList = () => {
         () => (
             <DataListModalOverlay>
                 <Grid>
-                    <Cell span={12}>
-                        <Select value={sort} onChange={setSort} label={t`Sort by`}>
-                            {SORTERS.map(({ label, sorter }) => {
-                                return (
-                                    <option key={label} value={sorter}>
-                                        {label}
-                                    </option>
-                                );
+                    <Grid.Column span={12}>
+                        <Select
+                            value={sort}
+                            onChange={setSort}
+                            label={t`Sort by`}
+                            options={SORTERS.map(({ label, sorter: value }) => {
+                                return {
+                                    label,
+                                    value
+                                };
                             })}
-                        </Select>
-                    </Cell>
+                        />
+                    </Grid.Column>
                 </Grid>
             </DataListModalOverlay>
         ),
@@ -143,24 +143,27 @@ export const TeamsDataList = () => {
         <DataList
             title={t`Teams`}
             actions={
-                <ButtonSecondary
+                <Button
+                    text={t`New`}
+                    icon={<AddIcon />}
+                    size={"sm"}
+                    className={"wby-ml-xs"}
                     data-testid="new-record-button"
                     onClick={() => history.push("/access-management/teams?new=true")}
-                >
-                    <ButtonIcon icon={<AddIcon />} /> {t`New Team`}
-                </ButtonSecondary>
+                />
             }
             data={teamList}
             loading={listLoading || deleteLoading}
             search={
-                <SearchUI value={filter} onChange={setFilter} inputPlaceholder={t`Search Teams`} />
+                <SearchUI
+                    value={filter}
+                    onChange={setFilter}
+                    inputPlaceholder={t`Search teams...`}
+                />
             }
             modalOverlay={teamsDataListModalOverlay}
             modalOverlayAction={
-                <DataListModalOverlayAction
-                    icon={<FilterIcon />}
-                    data-testid={"default-data-list.filter"}
-                />
+                <DataListModalOverlayAction data-testid={"default-data-list.filter"} />
             }
         >
             {({ data }: { data: Team[] }) => (
@@ -172,30 +175,30 @@ export const TeamsDataList = () => {
                                     history.push(`/access-management/teams?id=${item.id}`)
                                 }
                             >
-                                {item.name}
+                                <ListItemTextPrimary>{item.name}</ListItemTextPrimary>
                                 <ListItemTextSecondary>{item.description}</ListItemTextSecondary>
                             </ListItemText>
 
                             <ListItemMeta>
-                                {item.system || item.plugin ? (
-                                    <Tooltip
-                                        placement={"bottom"}
-                                        content={
-                                            <span>
-                                                {item.system
-                                                    ? t`Cannot delete system teams.`
-                                                    : t`Cannot delete teams created via extensions.`}
-                                            </span>
-                                        }
-                                    >
-                                        <DeleteIcon disabled />
-                                    </Tooltip>
-                                ) : (
-                                    <DeleteIcon
-                                        onClick={() => deleteItem(item)}
-                                        data-testid={"default-data-list.delete"}
-                                    />
-                                )}
+                                <ListActions>
+                                    {item.system || item.plugin ? (
+                                        <Tooltip
+                                            content={
+                                                <span>
+                                                    {item.system
+                                                        ? t`Cannot delete system teams.`
+                                                        : t`Cannot delete teams created via extensions.`}
+                                                </span>
+                                            }
+                                            trigger={<DeleteIcon disabled />}
+                                        />
+                                    ) : (
+                                        <DeleteIcon
+                                            onClick={() => deleteItem(item)}
+                                            data-testid={"default-data-list.delete"}
+                                        />
+                                    )}
+                                </ListActions>
                             </ListItemMeta>
                         </ListItem>
                     ))}
diff --git a/packages/app-security-access-management/src/ui/views/Teams/TeamsForm.tsx b/packages/app-security-access-management/src/ui/views/Teams/TeamsForm.tsx
index 605206e46a2..78b24543c6b 100644
--- a/packages/app-security-access-management/src/ui/views/Teams/TeamsForm.tsx
+++ b/packages/app-security-access-management/src/ui/views/Teams/TeamsForm.tsx
@@ -1,15 +1,10 @@
 import React, { useCallback } from "react";
 import { useMutation, useQuery } from "@apollo/react-hooks";
-import styled from "@emotion/styled";
 import pick from "lodash/pick";
 import get from "lodash/get";
 import { useRouter } from "@webiny/react-router";
 import { i18n } from "@webiny/app/i18n";
 import { Form } from "@webiny/form";
-import { Grid, Cell } from "@webiny/ui/Grid";
-import { Input } from "@webiny/ui/Input";
-import { ButtonDefault, ButtonIcon, ButtonPrimary } from "@webiny/ui/Button";
-import { CircularProgress } from "@webiny/ui/Progress";
 import { validation } from "@webiny/validation";
 import {
     SimpleForm,
@@ -24,15 +19,11 @@ import EmptyView from "@webiny/app-admin/components/EmptyView";
 import { ReactComponent as AddIcon } from "@webiny/app-admin/assets/icons/add-18px.svg";
 import { GroupsMultiAutocomplete } from "~/components/GroupsMultiAutocomplete";
 import { Team } from "~/types";
-import { Alert } from "@webiny/ui/Alert";
+import { ReactComponent as SettingsIcon } from "@webiny/icons/settings.svg";
+import { Alert, Button, Grid, Input, OverlayLoader, Textarea } from "@webiny/admin-ui";
 
 const t = i18n.ns("app-security/admin/teams/form");
 
-const ButtonWrapper = styled("div")({
-    display: "flex",
-    justifyContent: "space-between"
-});
-
 export interface TeamsFormProps {
     // TODO @ts-refactor delete and go up the tree and sort it out
     [key: string]: any;
@@ -116,15 +107,15 @@ export const TeamsForm = () => {
     if (showEmptyView) {
         return (
             <EmptyView
+                icon={<SettingsIcon />}
                 title={t`Click on the left side list to display team details or create a...`}
                 action={
-                    <ButtonDefault
+                    <Button
+                        text={t`New Team`}
+                        icon={<AddIcon />}
                         data-testid="new-record-button"
                         onClick={() => history.push("/access-management/teams?new=true")}
-                    >
-                        <ButtonIcon icon={<AddIcon />} />
-                        {t`New Team`}
-                    </ButtonDefault>
+                    />
                 }
             />
         );
@@ -135,72 +126,69 @@ export const TeamsForm = () => {
             {({ data, form, Bind }) => {
                 return (
                     <SimpleForm>
-                        {loading && <CircularProgress />}
+                        {loading && <OverlayLoader />}
                         <SimpleFormHeader title={data.name ? data.name : "Untitled"} />
                         <SimpleFormContent>
-                            {systemTeam && (
-                                <Grid>
-                                    <Cell span={12}>
-                                        <Alert type={"info"} title={"Permissions are locked"}>
-                                            This is a protected system team and you can&apos;t
-                                            modify its permissions.
-                                        </Alert>
-                                    </Cell>
-                                </Grid>
-                            )}
-                            {pluginTeam && (
-                                <Grid>
-                                    <Cell span={12}>
-                                        <Alert type={"info"} title={"Important"}>
-                                            This team is registered via an extension, and cannot be
-                                            modified.
-                                        </Alert>
-                                    </Cell>
-                                </Grid>
-                            )}
                             <Grid>
-                                <Cell span={6}>
+                                <>
+                                    {systemTeam && (
+                                        <Grid.Column span={12}>
+                                            <Alert type={"info"} title={"Permissions are locked"}>
+                                                This is a protected system team and you can&apos;t
+                                                modify its permissions.
+                                            </Alert>
+                                        </Grid.Column>
+                                    )}
+                                    {pluginTeam && (
+                                        <Grid.Column span={12}>
+                                            <Alert type={"info"} title={"Important"}>
+                                                This team is registered via an extension, and cannot
+                                                be modified.
+                                            </Alert>
+                                        </Grid.Column>
+                                    )}
+                                </>
+                                <Grid.Column span={6}>
                                     <Bind
                                         name="name"
                                         validators={validation.create("required,minLength:3")}
                                     >
                                         <Input
+                                            size={"lg"}
                                             disabled={!canModifyTeam}
                                             label={t`Name`}
                                             data-testid="admin.am.team.new.name"
                                         />
                                     </Bind>
-                                </Cell>
-                                <Cell span={6}>
+                                </Grid.Column>
+                                <Grid.Column span={6}>
                                     <Bind
                                         name="slug"
                                         validators={validation.create("required,minLength:3")}
                                     >
                                         <Input
+                                            size={"lg"}
                                             disabled={!canModifyTeam || !newTeam}
                                             label={t`Slug`}
                                             data-testid="admin.am.team.new.slug"
                                         />
                                     </Bind>
-                                </Cell>
-                            </Grid>
-                            <Grid>
-                                <Cell span={12}>
+                                </Grid.Column>
+                                <Grid.Column span={12}>
                                     <Bind
                                         name="description"
                                         validators={validation.create("maxLength:500")}
                                     >
-                                        <Input
+                                        <Textarea
+                                            size={"lg"}
                                             disabled={!canModifyTeam}
                                             label={t`Description`}
                                             rows={3}
                                             data-testid="admin.am.team.new.description"
                                         />
                                     </Bind>
-                                </Cell>
-                            </Grid>
-                            <Grid>
-                                <Cell span={12}>
+                                </Grid.Column>
+                                <Grid.Column span={12}>
                                     <Bind name="groups" validators={validation.create("required")}>
                                         <GroupsMultiAutocomplete
                                             disabled={!canModifyTeam}
@@ -208,24 +196,25 @@ export const TeamsForm = () => {
                                             data-testid="admin.am.team.new.groups"
                                         />
                                     </Bind>
-                                </Cell>
+                                </Grid.Column>
                             </Grid>
                         </SimpleFormContent>
-                        {canModifyTeam && (
-                            <SimpleFormFooter>
-                                <ButtonWrapper>
-                                    <ButtonDefault
-                                        onClick={() => history.push("/access-management/teams")}
-                                    >{t`Cancel`}</ButtonDefault>
-                                    <ButtonPrimary
-                                        data-testid="admin.am.team.new.save"
-                                        onClick={ev => {
-                                            form.submit(ev);
-                                        }}
-                                    >{t`Save team`}</ButtonPrimary>
-                                </ButtonWrapper>
-                            </SimpleFormFooter>
-                        )}
+                        <SimpleFormFooter>
+                            <Button
+                                variant={"secondary"}
+                                text={t`Cancel`}
+                                onClick={() => history.push("/access-management/teams")}
+                            />
+                            {canModifyTeam && (
+                                <Button
+                                    text={t`Save`}
+                                    data-testid="admin.am.team.new.save"
+                                    onClick={ev => {
+                                        form.submit(ev);
+                                    }}
+                                />
+                            )}
+                        </SimpleFormFooter>
                     </SimpleForm>
                 );
             }}
diff --git a/packages/app-security-access-management/tsconfig.build.json b/packages/app-security-access-management/tsconfig.build.json
index f14235ad0f4..89c37719634 100644
--- a/packages/app-security-access-management/tsconfig.build.json
+++ b/packages/app-security-access-management/tsconfig.build.json
@@ -2,6 +2,7 @@
   "extends": "../../tsconfig.build.json",
   "include": ["src"],
   "references": [
+    { "path": "../admin-ui/tsconfig.build.json" },
     { "path": "../app/tsconfig.build.json" },
     { "path": "../app-admin/tsconfig.build.json" },
     { "path": "../app-security/tsconfig.build.json" },
diff --git a/packages/app-security-access-management/tsconfig.json b/packages/app-security-access-management/tsconfig.json
index 03fc0bb2e5f..315ff718e64 100644
--- a/packages/app-security-access-management/tsconfig.json
+++ b/packages/app-security-access-management/tsconfig.json
@@ -2,6 +2,7 @@
   "extends": "../../tsconfig.json",
   "include": ["src", "__tests__"],
   "references": [
+    { "path": "../admin-ui" },
     { "path": "../app" },
     { "path": "../app-admin" },
     { "path": "../app-security" },
@@ -18,6 +19,8 @@
     "paths": {
       "~/*": ["./src/*"],
       "~tests/*": ["./__tests__/*"],
+      "@webiny/admin-ui/*": ["../admin-ui/src/*"],
+      "@webiny/admin-ui": ["../admin-ui/src"],
       "@webiny/app/*": ["../app/src/*"],
       "@webiny/app": ["../app/src"],
       "@webiny/app-admin/*": ["../app-admin/src/*"],
diff --git a/packages/app-serverless-cms/package.json b/packages/app-serverless-cms/package.json
index 06043630e1a..4f9a7424e39 100644
--- a/packages/app-serverless-cms/package.json
+++ b/packages/app-serverless-cms/package.json
@@ -13,7 +13,7 @@
     "@webiny/app": "0.0.0",
     "@webiny/app-aco": "0.0.0",
     "@webiny/app-admin": "0.0.0",
-    "@webiny/app-admin-rmwc": "0.0.0",
+    "@webiny/app-admin-ui": "0.0.0",
     "@webiny/app-apw": "0.0.0",
     "@webiny/app-audit-logs": "0.0.0",
     "@webiny/app-dynamic-pages": "0.0.0",
@@ -35,6 +35,7 @@
     "@webiny/app-websockets": "0.0.0",
     "@webiny/lexical-editor-actions": "0.0.0",
     "@webiny/lexical-editor-pb-element": "0.0.0",
+    "@webiny/lexical-theme": "0.0.0",
     "@webiny/plugins": "0.0.0",
     "apollo-cache": "^1.3.5",
     "apollo-client": "^2.6.10",
@@ -63,5 +64,12 @@
     "plugins": {
       "removeViewBox": false
     }
+  },
+  "adio": {
+    "ignore": {
+      "dependencies": [
+        "@webiny/lexical-theme"
+      ]
+    }
   }
 }
diff --git a/packages/app-serverless-cms/src/Admin.tsx b/packages/app-serverless-cms/src/Admin.tsx
index 16f8f8ec7d3..4af6edb07e9 100644
--- a/packages/app-serverless-cms/src/Admin.tsx
+++ b/packages/app-serverless-cms/src/Admin.tsx
@@ -13,7 +13,7 @@ import { I18NContent } from "@webiny/app-i18n-content";
 import { PageBuilder } from "@webiny/app-page-builder";
 import { FormBuilder } from "@webiny/app-form-builder";
 import { HeadlessCMS } from "@webiny/app-headless-cms";
-import { RMWC } from "@webiny/app-admin-rmwc";
+import { AdminUI } from "@webiny/app-admin-ui";
 import { FileManager } from "@webiny/app-file-manager/app";
 import { GraphQLPlayground } from "@webiny/app-graphql-playground";
 import { AccessManagement } from "@webiny/app-security-access-management";
@@ -47,7 +47,7 @@ const App = (props: AdminProps) => {
 
     return (
         <BaseAdmin createApolloClient={createApolloClient}>
-            <RMWC />
+            <AdminUI />
             <Tenancy />
             <Security />
             <AccessManagement />
diff --git a/packages/app-serverless-cms/src/index.tsx b/packages/app-serverless-cms/src/index.tsx
index ea278badc57..5e571c3d0c2 100644
--- a/packages/app-serverless-cms/src/index.tsx
+++ b/packages/app-serverless-cms/src/index.tsx
@@ -3,15 +3,7 @@ export type { AdminProps } from "./Admin";
 export {
     useApp,
     useWcp,
-    useUserMenuItem,
-    useUserMenu,
-    useMenuItem,
-    useNavigation,
     useTags,
-    AddLogo,
-    AddMenu,
-    AddRoute,
-    AddUserMenuItem,
     Dashboard,
     DashboardRenderer,
     Layout,
@@ -27,22 +19,19 @@ export {
     CompositionScope,
     Plugins,
     Plugin,
+    AdminConfig,
     makeComposable,
     makeDecoratable,
     createComponentPlugin,
     createProviderPlugin,
     createDecorator,
     createProvider,
-    MenuItem,
-    MenuItemRenderer,
-    MenuItems,
     Navigation,
     NavigationRenderer,
     Tags,
     UserMenu,
     UserMenuHandle,
     UserMenuHandleRenderer,
-    UserMenuItems,
     UserMenuItem,
     UserMenuItemRenderer,
     AddGraphQLQuerySelection
@@ -53,14 +42,7 @@ export type {
     Decorator,
     ProviderProps,
     LayoutProps,
-    LoginScreenProps,
-    MenuContext,
-    MenuData,
-    MenuItemsProps,
-    MenuProps,
-    UserMenuItemsProps,
-    UserMenuItemProps,
-    UserMenuItemData
+    LoginScreenProps
 } from "@webiny/app-admin";
 
 export { HasPermission, useSecurity, usePermission } from "@webiny/app-security";
@@ -68,4 +50,11 @@ export { HasPermission, useSecurity, usePermission } from "@webiny/app-security"
 export { useTenancy } from "@webiny/app-tenancy";
 export type { Tenant } from "@webiny/app-tenancy";
 
+export {
+    IsTenant,
+    IsRootTenant,
+    IsNotRootTenant,
+    useCurrentTenant
+} from "@webiny/app-tenant-manager";
+
 export * from "./apolloClientFactory";
diff --git a/packages/app-serverless-cms/src/styles.scss b/packages/app-serverless-cms/src/styles.scss
index d567de7b819..8decc7555b4 100644
--- a/packages/app-serverless-cms/src/styles.scss
+++ b/packages/app-serverless-cms/src/styles.scss
@@ -1,9 +1,16 @@
-// Import admin app styles
-@import "~@webiny/app-admin/styles.scss";
-//
+// Import `app-admin-ui` styles
+@import "~@webiny/app-admin-ui/styles.scss";
+
+// Import `ui` styles
+// ⚠️ DEPRECATED but needed for backward compatibility ⚠️
+@import "~@webiny/ui/styles.scss";
+
 // Import `RichTextEditor` styles
 @import "~@webiny/app-admin/components/RichTextEditor/styles.scss";
 @import "~@webiny/app-admin/components/RichTextEditor/tools/header/styles.scss";
 @import "~@webiny/app-admin/components/RichTextEditor/tools/paragraph/styles.scss";
 @import "~@webiny/app-admin/components/RichTextEditor/tools/textColor/styles.scss";
 @import "~@webiny/app-admin/components/RichTextEditor/tools/image/styles.scss";
+
+// Import Lexical theme styles
+@import "~@webiny/lexical-theme/theme.css";
diff --git a/packages/app-serverless-cms/tsconfig.build.json b/packages/app-serverless-cms/tsconfig.build.json
index 421e090f48e..dce453970db 100644
--- a/packages/app-serverless-cms/tsconfig.build.json
+++ b/packages/app-serverless-cms/tsconfig.build.json
@@ -5,7 +5,7 @@
     { "path": "../app/tsconfig.build.json" },
     { "path": "../app-aco/tsconfig.build.json" },
     { "path": "../app-admin/tsconfig.build.json" },
-    { "path": "../app-admin-rmwc/tsconfig.build.json" },
+    { "path": "../app-admin-ui/tsconfig.build.json" },
     { "path": "../app-apw/tsconfig.build.json" },
     { "path": "../app-audit-logs/tsconfig.build.json" },
     { "path": "../app-dynamic-pages/tsconfig.build.json" },
@@ -27,6 +27,7 @@
     { "path": "../app-websockets/tsconfig.build.json" },
     { "path": "../lexical-editor-actions/tsconfig.build.json" },
     { "path": "../lexical-editor-pb-element/tsconfig.build.json" },
+    { "path": "../lexical-theme/tsconfig.build.json" },
     { "path": "../plugins/tsconfig.build.json" }
   ],
   "compilerOptions": {
diff --git a/packages/app-serverless-cms/tsconfig.json b/packages/app-serverless-cms/tsconfig.json
index 3838a1c5e85..9b97827216e 100644
--- a/packages/app-serverless-cms/tsconfig.json
+++ b/packages/app-serverless-cms/tsconfig.json
@@ -5,7 +5,7 @@
     { "path": "../app" },
     { "path": "../app-aco" },
     { "path": "../app-admin" },
-    { "path": "../app-admin-rmwc" },
+    { "path": "../app-admin-ui" },
     { "path": "../app-apw" },
     { "path": "../app-audit-logs" },
     { "path": "../app-dynamic-pages" },
@@ -27,6 +27,7 @@
     { "path": "../app-websockets" },
     { "path": "../lexical-editor-actions" },
     { "path": "../lexical-editor-pb-element" },
+    { "path": "../lexical-theme" },
     { "path": "../plugins" }
   ],
   "compilerOptions": {
@@ -42,8 +43,8 @@
       "@webiny/app-aco": ["../app-aco/src"],
       "@webiny/app-admin/*": ["../app-admin/src/*"],
       "@webiny/app-admin": ["../app-admin/src"],
-      "@webiny/app-admin-rmwc/*": ["../app-admin-rmwc/src/*"],
-      "@webiny/app-admin-rmwc": ["../app-admin-rmwc/src"],
+      "@webiny/app-admin-ui/*": ["../app-admin-ui/src/*"],
+      "@webiny/app-admin-ui": ["../app-admin-ui/src"],
       "@webiny/app-apw/*": ["../app-apw/src/*"],
       "@webiny/app-apw": ["../app-apw/src"],
       "@webiny/app-audit-logs/*": ["../app-audit-logs/src/*"],
@@ -86,6 +87,8 @@
       "@webiny/lexical-editor-actions": ["../lexical-editor-actions/src"],
       "@webiny/lexical-editor-pb-element/*": ["../lexical-editor-pb-element/src/*"],
       "@webiny/lexical-editor-pb-element": ["../lexical-editor-pb-element/src"],
+      "@webiny/lexical-theme/*": ["../lexical-theme/src/*"],
+      "@webiny/lexical-theme": ["../lexical-theme/src"],
       "@webiny/plugins/*": ["../plugins/src/*"],
       "@webiny/plugins": ["../plugins/src"]
     },
diff --git a/packages/app-tenant-manager/package.json b/packages/app-tenant-manager/package.json
index acea440814b..8308bf80863 100644
--- a/packages/app-tenant-manager/package.json
+++ b/packages/app-tenant-manager/package.json
@@ -10,14 +10,14 @@
   "license": "Webiny Enterprise",
   "dependencies": {
     "@apollo/react-hooks": "^3.1.5",
-    "@emotion/react": "11.10.8",
-    "@emotion/styled": "11.10.6",
     "@types/react": "18.2.79",
+    "@webiny/admin-ui": "0.0.0",
     "@webiny/app": "0.0.0",
     "@webiny/app-admin": "0.0.0",
     "@webiny/app-security": "0.0.0",
     "@webiny/app-tenancy": "0.0.0",
     "@webiny/form": "0.0.0",
+    "@webiny/icons": "0.0.0",
     "@webiny/react-router": "0.0.0",
     "@webiny/ui": "0.0.0",
     "@webiny/validation": "0.0.0",
@@ -25,7 +25,6 @@
     "apollo-client": "^2.6.10",
     "apollo-link": "^1.2.14",
     "apollo-utilities": "^1.3.4",
-    "emotion": "10.0.27",
     "graphql": "^15.9.0",
     "graphql-tag": "^2.12.6",
     "lodash": "^4.17.21",
@@ -34,7 +33,6 @@
     "react-dom": "18.2.0"
   },
   "devDependencies": {
-    "@emotion/babel-plugin": "^11.11.0",
     "@webiny/project-utils": "0.0.0",
     "rimraf": "^6.0.1",
     "typescript": "5.3.3"
diff --git a/packages/app-tenant-manager/src/assets/business_black_24dp.svg b/packages/app-tenant-manager/src/assets/business_black_24dp.svg
deleted file mode 100644
index bd3029450f0..00000000000
--- a/packages/app-tenant-manager/src/assets/business_black_24dp.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 7V5c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V9c0-1.1-.9-2-2-2h-8zM6 19H4v-2h2v2zm0-4H4v-2h2v2zm0-4H4V9h2v2zm0-4H4V5h2v2zm4 12H8v-2h2v2zm0-4H8v-2h2v2zm0-4H8V9h2v2zm0-4H8V5h2v2zm9 12h-7v-2h2v-2h-2v-2h2v-2h-2V9h7c.55 0 1 .45 1 1v8c0 .55-.45 1-1 1zm-1-8h-2v2h2v-2zm0 4h-2v2h2v-2z"/></svg>
diff --git a/packages/app-tenant-manager/src/components/CurrentTenant.tsx b/packages/app-tenant-manager/src/components/CurrentTenant.tsx
new file mode 100644
index 00000000000..a7b0a1528fb
--- /dev/null
+++ b/packages/app-tenant-manager/src/components/CurrentTenant.tsx
@@ -0,0 +1,48 @@
+import React, { useCallback, useState } from "react";
+import { useSecurity } from "@webiny/app-security";
+import { SettingsDialog } from "./CurrentTenant/SettingsDialog";
+import { Button } from "@webiny/admin-ui";
+import { makeDecoratable } from "@webiny/app-admin";
+
+export const CurrentTenant = makeDecoratable("CurrentTenantWidget", () => {
+    const { identity } = useSecurity();
+    const [settingsShown, showSettings] = useState(false);
+
+    const { currentTenant, defaultTenant } = identity || {
+        currentTenant: null,
+        defaultTenant: null
+    };
+
+    const currentTenantId = currentTenant ? currentTenant.id : "unknown";
+    const defaultTenantId = defaultTenant ? defaultTenant.id : "unknown";
+
+    const closeDialog = useCallback(() => showSettings(false), []);
+
+    if (currentTenantId === "root") {
+        return (
+            <>
+                <SettingsDialog open={settingsShown} onClose={closeDialog} />
+                <Button
+                    variant={"ghost"}
+                    size={"md"}
+                    text={"Root tenant"}
+                    onClick={() => showSettings(true)}
+                />
+            </>
+        );
+    }
+
+    if (currentTenantId !== "root" && currentTenantId !== defaultTenantId) {
+        return (
+            <Button
+                disabled
+                variant={"ghost"}
+                size={"md"}
+                text={currentTenant.name}
+                onClick={() => showSettings(true)}
+            />
+        );
+    }
+
+    return null;
+});
diff --git a/packages/app-tenant-manager/src/components/CurrentTenant/SettingsDialog.tsx b/packages/app-tenant-manager/src/components/CurrentTenant/SettingsDialog.tsx
index a10ee32b06a..a4822e56d8c 100644
--- a/packages/app-tenant-manager/src/components/CurrentTenant/SettingsDialog.tsx
+++ b/packages/app-tenant-manager/src/components/CurrentTenant/SettingsDialog.tsx
@@ -1,45 +1,38 @@
 import React from "react";
-import { css } from "emotion";
 import { Form } from "@webiny/form";
-import { Dialog, DialogActions, DialogCancel, DialogContent, DialogTitle } from "@webiny/ui/Dialog";
 import { useTenant } from "./useTenant";
-import { CircularProgress } from "@webiny/ui/Progress";
 import { Domains } from "../Domains";
-import { ButtonPrimary } from "@webiny/ui/Button";
+import { Dialog, OverlayLoader } from "@webiny/admin-ui";
 
 interface Props {
     open: boolean;
     onClose: () => void;
 }
 
-const narrowDialog = css({
-    ".mdc-dialog__surface": {
-        width: 600,
-        minWidth: 600
-    }
-});
-
 export const SettingsDialog = ({ open, onClose }: Props) => {
     const { tenant, loading, saving, update } = useTenant({ onSaved: onClose });
 
     return (
-        <Dialog open={open} onClose={onClose} className={narrowDialog}>
-            <Form onSubmit={update} data={tenant}>
-                {({ submit }) => (
-                    <React.Fragment>
-                        {loading && <CircularProgress label={"Loading Settings..."} />}
-                        {saving && <CircularProgress label={"Saving Settings..."} />}
-                        <DialogTitle>Tenant Settings</DialogTitle>
-                        <DialogContent>
-                            <Domains />
-                        </DialogContent>
-                        <DialogActions>
-                            <DialogCancel>Cancel</DialogCancel>
-                            <ButtonPrimary onClick={submit}>Save</ButtonPrimary>
-                        </DialogActions>
-                    </React.Fragment>
-                )}
-            </Form>
-        </Dialog>
+        <Form onSubmit={update} data={tenant}>
+            {({ submit }) => (
+                <Dialog
+                    open={open}
+                    onClose={onClose}
+                    title={"Tenant settings"}
+                    actions={
+                        <>
+                            <Dialog.CancelButton />
+                            <Dialog.ConfirmButton text={"Save"} onClick={submit} />
+                        </>
+                    }
+                >
+                    <>
+                        {loading && <OverlayLoader text={"Loading Settings..."} />}
+                        {saving && <OverlayLoader text={"Saving Settings..."} />}
+                        <Domains />
+                    </>
+                </Dialog>
+            )}
+        </Form>
     );
 };
diff --git a/packages/app-tenant-manager/src/components/CurrentTenantWidget.tsx b/packages/app-tenant-manager/src/components/CurrentTenantWidget.tsx
deleted file mode 100644
index 7935de8dd74..00000000000
--- a/packages/app-tenant-manager/src/components/CurrentTenantWidget.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import React, { Fragment, useCallback, useState } from "react";
-import { useSecurity } from "@webiny/app-security";
-import { makeDecoratable } from "@webiny/app-admin";
-import { ReactComponent as TenantIcon } from "~/assets/business_black_24dp.svg";
-import { SettingsDialog } from "./CurrentTenant/SettingsDialog";
-import { ButtonDefault, ButtonIcon, ButtonPrimary } from "@webiny/ui/Button";
-
-export const CurrentTenantWidget = makeDecoratable("CurrentTenantWidget", () => {
-    const { identity } = useSecurity();
-    const [settingsShown, showSettings] = useState(false);
-
-    const { currentTenant, defaultTenant } = identity || {
-        currentTenant: null,
-        defaultTenant: null
-    };
-
-    const currentTenantId = currentTenant ? currentTenant.id : "unknown";
-    const defaultTenantId = defaultTenant ? defaultTenant.id : "unknown";
-
-    const closeDialog = useCallback(() => showSettings(false), []);
-
-    if (currentTenantId === "root") {
-        return (
-            <Fragment>
-                <SettingsDialog open={settingsShown} onClose={closeDialog} />
-                <ButtonPrimary flat onClick={() => showSettings(true)}>
-                    <ButtonIcon icon={<TenantIcon />} />
-                    Root Tenant
-                </ButtonPrimary>
-            </Fragment>
-        );
-    }
-
-    if (currentTenantId !== "root" && currentTenantId !== defaultTenantId) {
-        return (
-            <ButtonDefault flat disabled style={{ color: "white" }}>
-                <ButtonIcon icon={<TenantIcon />} />
-                {currentTenant.name}
-            </ButtonDefault>
-        );
-    }
-
-    return null;
-});
diff --git a/packages/app-tenant-manager/src/components/Domains.tsx b/packages/app-tenant-manager/src/components/Domains.tsx
index 72bf0956907..da53bf41de9 100644
--- a/packages/app-tenant-manager/src/components/Domains.tsx
+++ b/packages/app-tenant-manager/src/components/Domains.tsx
@@ -1,30 +1,26 @@
 import React, { Fragment, useMemo } from "react";
-import { DynamicFieldset } from "@webiny/ui/DynamicFieldset";
-import { Input } from "@webiny/ui/Input";
-import styled from "@emotion/styled";
-import { Typography } from "@webiny/ui/Typography";
-import { ButtonSecondary, ButtonDefault } from "@webiny/ui/Button";
 import { validation } from "@webiny/validation";
 import { Bind } from "@webiny/form";
-import { Cell, Grid } from "@webiny/ui/Grid";
+import {
+    Button,
+    cn,
+    DynamicFieldset,
+    Grid,
+    IconButton,
+    Input,
+    Label,
+    Text
+} from "@webiny/admin-ui";
+import { ReactComponent as DeleteIcon } from "@webiny/icons/delete.svg";
+import { ReactComponent as AddIcon } from "@webiny/icons/add.svg";
 
-const Fieldset = styled("div")({
-    position: "relative",
-    width: "100%",
-    marginBottom: 15,
-    ".webiny-ui-button": {
-        position: "absolute",
-        display: "block",
-        right: 10,
-        top: 13
-    }
-});
-
-const Header = styled("div")({
-    display: "flex",
-    justifyContent: "space-between",
-    marginBottom: 15
-});
+const Header = ({ className, children, ...props }: React.HTMLAttributes<HTMLDivElement>) => {
+    return (
+        <div className={cn("wby-flex wby-justify-between", className)} {...props}>
+            {children}
+        </div>
+    );
+};
 
 interface Domain {
     fqdn: string;
@@ -68,44 +64,55 @@ export const DomainsFieldset = (props: DomainsProps) => {
             {({ actions, header, row, empty }) => (
                 <>
                     {row(({ index }) => (
-                        <Fieldset>
-                            <Bind
-                                validators={fqdnValidator}
-                                name={`settings.domains.${index}.fqdn`}
-                            >
-                                <Input
-                                    label={props.inputLabel}
-                                    description={
-                                        "Enter a fully qualified domain name to use for this tenant."
-                                    }
+                        <div className={"wby-mt-md"}>
+                            <Text size={"sm"} as={"div"} className={"wby-mb-sm"}>
+                                {"Enter a fully qualified domain name to use for this tenant."}
+                            </Text>
+                            <div className={"wby-flex wby-items-start wby-gap-sm"}>
+                                <Bind
+                                    validators={fqdnValidator}
+                                    name={`settings.domains.${index}.fqdn`}
+                                >
+                                    <Input size={"lg"} placeholder={props.inputLabel} />
+                                </Bind>
+                                <IconButton
+                                    variant={"ghost"}
+                                    size={"lg"}
+                                    icon={<DeleteIcon />}
+                                    onClick={actions.remove(index)}
                                 />
-                            </Bind>
-                            <ButtonSecondary small onClick={actions.remove(index)}>
-                                Remove
-                            </ButtonSecondary>
-                        </Fieldset>
+                            </div>
+                        </div>
                     ))}
                     {empty(() => (
-                        <Fragment>
+                        <>
                             <Header>
-                                <Typography use={"overline"}>{props.title}</Typography>
-                                <ButtonDefault onClick={addDomain}>
-                                    {props.addButtonLabel}
-                                </ButtonDefault>
+                                <Label text={props.title} />
+                                <Button
+                                    onClick={addDomain}
+                                    text={props.addButtonLabel}
+                                    icon={<AddIcon />}
+                                    variant={"secondary"}
+                                    size={"sm"}
+                                />
                             </Header>
-                            <Typography use={"body1"}>
+                            <Text size={"sm"} as={"div"} className={"wby-mt-sm"}>
                                 To make your tenant accessible via custom domains, you must define
                                 them here. Webiny will use these entries to route the incoming
                                 requests.
-                            </Typography>
-                        </Fragment>
+                            </Text>
+                        </>
                     ))}
                     {header(() => (
                         <Header>
-                            <Typography use={"overline"}>{props.title}</Typography>
-                            <ButtonDefault onClick={addDomain}>
-                                {props.addButtonLabel}
-                            </ButtonDefault>
+                            <Label text={props.title} />
+                            <Button
+                                onClick={addDomain}
+                                text={props.addButtonLabel}
+                                icon={<AddIcon />}
+                                variant={"secondary"}
+                                size={"sm"}
+                            />
                         </Header>
                     ))}
                 </>
@@ -116,16 +123,14 @@ export const DomainsFieldset = (props: DomainsProps) => {
 
 export const Domains = () => {
     return (
-        <Grid>
-            <Cell span={12}>
-                <Bind name={"settings.domains"} defaultValue={[]}>
-                    <DomainsFieldset
-                        title={"Custom Domains"}
-                        inputLabel={"FQDN"}
-                        addButtonLabel={"+ Add FQDN"}
-                    />
-                </Bind>
-            </Cell>
-        </Grid>
+        <Grid.Column span={12}>
+            <Bind name={"settings.domains"} defaultValue={[]}>
+                <DomainsFieldset
+                    title={"Custom Domains"}
+                    inputLabel={"FQDN"}
+                    addButtonLabel={"Add FQDN"}
+                />
+            </Bind>
+        </Grid.Column>
     );
 };
diff --git a/packages/app-tenant-manager/src/graphql/index.ts b/packages/app-tenant-manager/src/graphql/index.ts
index 5ddf7c64afe..a345ad19c98 100644
--- a/packages/app-tenant-manager/src/graphql/index.ts
+++ b/packages/app-tenant-manager/src/graphql/index.ts
@@ -6,6 +6,7 @@ const fields = /* GraphQL */ `
         id
         name
         description
+        image
         tags
         parent
     }
diff --git a/packages/app-tenant-manager/src/index.tsx b/packages/app-tenant-manager/src/index.tsx
index e3e094b9acc..fd695a7aad4 100644
--- a/packages/app-tenant-manager/src/index.tsx
+++ b/packages/app-tenant-manager/src/index.tsx
@@ -1,33 +1,50 @@
-import { Compose, LocaleSelector, useWcp } from "@webiny/app-admin";
+import { TenantSelector as BaseTenantSelector, Plugins, useWcp } from "@webiny/app-admin";
 import React, { Fragment, memo } from "react";
 import { AddTenantFormField } from "./components/AddTenantFormField";
-import { CurrentTenantWidget } from "./components/CurrentTenantWidget";
+import { CurrentTenant } from "./components/CurrentTenant";
 import { DomainsModule } from "./modules/domains";
 import { TenantsModule } from "./modules/tenants";
+import { AdminConfig } from "@webiny/app-admin";
+import { useSecurity } from "@webiny/app-security";
 
-const TenantIndicator = (LocaleSelector: React.ComponentType) => {
-    return function TenantIndicator() {
-        return (
-            <Fragment>
-                <CurrentTenantWidget />
-                <LocaleSelector />
-            </Fragment>
-        );
+const { Tenant } = AdminConfig;
+
+const TenantSelector = BaseTenantSelector.createDecorator(() => {
+    return function TenantSelector() {
+        return <CurrentTenant />;
     };
-};
+});
 
-let mounted = 0;
+const TenantNameLogoBase = () => {
+    const { identity } = useSecurity();
+    if (!identity) {
+        return null;
+    }
 
-const TenantManagerExtension = () => {
-    // Make sure only a single instance of this component is mounted.
-    // `useEffect` is too slow, because several elements mount at almost the same time.
-    // That's the nature of this component, and we only need this precaution for pre-5.29.0 projects.
-    if (mounted > 0) {
+    const { currentTenant } = identity;
+    if (currentTenant.id === "root") {
         return null;
     }
 
-    mounted++;
+    const { image, name } = currentTenant;
+    return (
+        <AdminConfig.Public>
+            <Tenant>
+                {image && <Tenant.Logo element={<img src={currentTenant.image.src} />} />}
+                <Tenant.Name value={name} />
+            </Tenant>
+        </AdminConfig.Public>
+    );
+};
 
+const TenantNameLogo = () => {
+    return (
+        <Plugins>
+            <TenantNameLogoBase />
+        </Plugins>
+    );
+};
+const TenantManagerExtension = () => {
     const wcp = useWcp();
     if (!wcp.canUseFeature("multiTenancy")) {
         return null;
@@ -35,7 +52,8 @@ const TenantManagerExtension = () => {
 
     return (
         <Fragment>
-            <Compose component={LocaleSelector} with={TenantIndicator} />
+            <TenantNameLogo />
+            <TenantSelector />
             <TenantsModule />
             <DomainsModule />
         </Fragment>
@@ -46,4 +64,4 @@ export const TenantManager: React.ComponentType = memo(TenantManagerExtension);
 
 export { useCurrentTenant } from "./hooks/useCurrentTenant";
 export { IsRootTenant, IsNotRootTenant, IsTenant } from "./components/IsRootTenant";
-export { AddTenantFormField, CurrentTenantWidget };
+export { AddTenantFormField };
diff --git a/packages/app-tenant-manager/src/modules/tenants/TenantDataList.tsx b/packages/app-tenant-manager/src/modules/tenants/TenantDataList.tsx
index 4de1fa0c89f..8a9f9b9a025 100644
--- a/packages/app-tenant-manager/src/modules/tenants/TenantDataList.tsx
+++ b/packages/app-tenant-manager/src/modules/tenants/TenantDataList.tsx
@@ -1,4 +1,6 @@
 import React, { useMemo } from "react";
+import { Button, Grid, Select } from "@webiny/admin-ui";
+import { ReactComponent as AddIcon } from "@webiny/icons/add.svg";
 import { i18n } from "@webiny/app/i18n";
 import {
     DataList,
@@ -9,16 +11,11 @@ import {
     ListActions,
     ListItemTextSecondary,
     DataListModalOverlay,
-    DataListModalOverlayAction
+    DataListModalOverlayAction,
+    ListItemTextPrimary,
+    LoginIcon
 } from "@webiny/ui/List";
-
-import { ButtonIcon, ButtonSecondary, IconButton } from "@webiny/ui/Button";
-import { Cell, Grid } from "@webiny/ui/Grid";
-import { Select } from "@webiny/ui/Select";
 import SearchUI from "@webiny/app-admin/components/SearchUI";
-import { ReactComponent as AddIcon } from "@webiny/app-admin/assets/icons/add-18px.svg";
-import { ReactComponent as FilterIcon } from "@webiny/app-admin/assets/icons/filter-24px.svg";
-import { ReactComponent as LoginIcon } from "~/assets/login_black_24dp.svg";
 import { useTenantsList } from "./hooks/useTenantsList";
 import { useTenancy } from "@webiny/app-tenancy";
 import { TenantItem } from "~/types";
@@ -59,17 +56,19 @@ const TenantDataList = () => {
         () => (
             <DataListModalOverlay>
                 <Grid>
-                    <Cell span={12}>
-                        <Select value={sort || ""} onChange={setSort} label={t`Sort by`}>
-                            {SORTERS.map(({ label, sorter }) => {
-                                return (
-                                    <option key={label} value={sorter}>
-                                        {label}
-                                    </option>
-                                );
+                    <Grid.Column span={12}>
+                        <Select
+                            value={sort || ""}
+                            onChange={setSort}
+                            label={t`Sort by`}
+                            options={SORTERS.map(({ label, sorter: value }) => {
+                                return {
+                                    label,
+                                    value
+                                };
                             })}
-                        </Select>
-                    </Cell>
+                        />
+                    </Grid.Column>
                 </Grid>
             </DataListModalOverlay>
         ),
@@ -80,9 +79,14 @@ const TenantDataList = () => {
         <DataList
             loading={loading}
             actions={
-                <ButtonSecondary data-testid="new-record-button" onClick={createTenant}>
-                    <ButtonIcon icon={<AddIcon />} /> {t`New Tenant`}
-                </ButtonSecondary>
+                <Button
+                    text={t`New`}
+                    icon={<AddIcon />}
+                    size={"sm"}
+                    className={"wby-ml-xs"}
+                    ata-testid="new-record-button"
+                    onClick={createTenant}
+                />
             }
             data={tenants}
             title={t`Tenants`}
@@ -91,27 +95,25 @@ const TenantDataList = () => {
                 <SearchUI
                     value={filter}
                     onChange={setFilter}
-                    inputPlaceholder={t`Search tenants`}
+                    inputPlaceholder={t`Search tenants...`}
+                    dataTestId={"tenants.data-list.search-input"}
                 />
             }
             modalOverlay={tenantsDataListModalOverlay}
-            modalOverlayAction={<DataListModalOverlayAction icon={<FilterIcon />} />}
+            modalOverlayAction={<DataListModalOverlayAction />}
         >
             {({ data }: { data: TenantItem[] }) => (
                 <ScrollList data-testid="default-data-list">
                     {data.map(item => (
                         <ListItem key={item.id} selected={item.id === currentTenantId}>
                             <ListItemText onClick={() => editTenant(item.id)}>
-                                {item.name}
+                                <ListItemTextPrimary>{item.name}</ListItemTextPrimary>
                                 <ListItemTextSecondary>{item.description}</ListItemTextSecondary>
                             </ListItemText>
 
                             <ListItemMeta>
                                 <ListActions>
-                                    <IconButton
-                                        icon={<LoginIcon />}
-                                        onClick={() => setTenant(item.id)}
-                                    />
+                                    <LoginIcon onClick={() => setTenant(item.id)} />
                                     {/* <DeleteIcon
                                         onClick={() => deleteTenant(item)}
                                         data-testid={"default-data-list.delete"}
diff --git a/packages/app-tenant-manager/src/modules/tenants/TenantForm.tsx b/packages/app-tenant-manager/src/modules/tenants/TenantForm.tsx
index 6eafb122fe0..dfb51071dbc 100644
--- a/packages/app-tenant-manager/src/modules/tenants/TenantForm.tsx
+++ b/packages/app-tenant-manager/src/modules/tenants/TenantForm.tsx
@@ -1,10 +1,9 @@
 import React from "react";
 import { i18n } from "@webiny/app/i18n";
+import { ReactComponent as AddIcon } from "@webiny/icons/add.svg";
+import { ReactComponent as TenantIcon } from "@webiny/icons/domain.svg";
 import { Form } from "@webiny/form";
 import { Tags } from "@webiny/ui/Tags";
-import { Grid, Cell } from "@webiny/ui/Grid";
-import { ButtonDefault, ButtonIcon, ButtonPrimary } from "@webiny/ui/Button";
-import { CircularProgress } from "@webiny/ui/Progress";
 import {
     SimpleForm,
     SimpleFormFooter,
@@ -13,10 +12,10 @@ import {
 } from "@webiny/app-admin/components/SimpleForm";
 import { validation } from "@webiny/validation";
 import EmptyView from "@webiny/app-admin/components/EmptyView";
-import { ReactComponent as AddIcon } from "@webiny/app-admin/assets/icons/add-18px.svg";
 import { useTenantForm } from "./hooks/useTenantForm";
-import { Input } from "@webiny/ui/Input";
 import { TenantFormFields } from "~/components/TenantFormFields";
+import SingleImageUpload from "@webiny/app-admin/components/SingleImageUpload";
+import { Button, Grid, Input, OverlayLoader, Textarea } from "@webiny/admin-ui";
 
 const t = i18n.ns("app-i18n/admin/locales/form");
 
@@ -28,11 +27,15 @@ const TenantForm = () => {
     if (showEmptyView) {
         return (
             <EmptyView
+                icon={<TenantIcon />}
                 title={t`Click on the left side list to display tenant details or create a...`}
                 action={
-                    <ButtonDefault data-testid="new-record-button" onClick={createTenant}>
-                        <ButtonIcon icon={<AddIcon />} /> {t`New Tenant`}
-                    </ButtonDefault>
+                    <Button
+                        text={t`New Tenant`}
+                        icon={<AddIcon />}
+                        data-testid="new-record-button"
+                        onClick={createTenant}
+                    />
                 }
             />
         );
@@ -42,21 +45,26 @@ const TenantForm = () => {
         <Form data={{ ...tenant }} onSubmit={onSubmit}>
             {({ data, form, Bind }) => (
                 <SimpleForm data-testid={"tenant-form"}>
-                    {loading && <CircularProgress />}
+                    {loading && <OverlayLoader />}
                     <SimpleFormHeader title={data.name || t`New tenant`} />
                     <SimpleFormContent>
                         <Grid>
-                            <Cell span={12}>
+                            <Grid.Column span={12}>
                                 <Bind name="name" validators={validation.create("required")}>
-                                    <Input label={"Name"} />
+                                    <Input size="lg" label={"Name"} />
                                 </Bind>
-                            </Cell>
-                            <Cell span={12}>
+                            </Grid.Column>
+                            <Grid.Column span={12}>
                                 <Bind name="description" validators={validation.create("required")}>
-                                    <Input label={"Description"} rows={4} />
+                                    <Textarea size={"lg"} label={"Description"} rows={4} />
                                 </Bind>
-                            </Cell>
-                            <Cell span={12}>
+                            </Grid.Column>
+                            <Grid.Column span={12}>
+                                <Bind name={"image"}>
+                                    <SingleImageUpload label="Logo" />
+                                </Bind>
+                            </Grid.Column>
+                            <Grid.Column span={12}>
                                 <Bind
                                     name="tags"
                                     validators={validation.create("required")}
@@ -64,13 +72,22 @@ const TenantForm = () => {
                                 >
                                     <Tags label={"Tags"} />
                                 </Bind>
-                            </Cell>
+                            </Grid.Column>
+                            <TenantFormFields />
                         </Grid>
-                        <TenantFormFields />
                     </SimpleFormContent>
                     <SimpleFormFooter>
-                        <ButtonDefault onClick={cancelEditing}>{t`Cancel`}</ButtonDefault>
-                        <ButtonPrimary onClick={form.submit}>{t`Save tenant`}</ButtonPrimary>
+                        <Button
+                            variant={"secondary"}
+                            text={t`Cancel`}
+                            onClick={cancelEditing}
+                            data-testid="tenant.new.form.button.cancel"
+                        />
+                        <Button
+                            text={t`Save`}
+                            data-testid="tenant.new.form.button.save"
+                            onClick={form.submit}
+                        />
                     </SimpleFormFooter>
                 </SimpleForm>
             )}
diff --git a/packages/app-tenant-manager/src/modules/tenants/index.tsx b/packages/app-tenant-manager/src/modules/tenants/index.tsx
index ceb1eb9ec32..833251f6245 100644
--- a/packages/app-tenant-manager/src/modules/tenants/index.tsx
+++ b/packages/app-tenant-manager/src/modules/tenants/index.tsx
@@ -1,11 +1,13 @@
 import React from "react";
 import { SplitView, LeftPanel, RightPanel } from "@webiny/app-admin/components/SplitView";
-import { AddMenu, AddRoute, Layout } from "@webiny/app-admin";
-import { ReactComponent as TenantIcon } from "~/assets/business_black_24dp.svg";
+import { Layout } from "@webiny/app-admin";
 import TenantDataList from "./TenantDataList";
 import TenantForm from "./TenantForm";
-import { Plugins } from "@webiny/app-admin";
 import { IsRootTenant } from "~/components/IsRootTenant";
+import { ReactComponent as TenantManagerIcon } from "@webiny/icons/domain.svg";
+import { AdminConfig } from "@webiny/app-admin";
+
+const { Menu, Route } = AdminConfig;
 
 export const TenantsView = () => {
     return (
@@ -22,17 +24,35 @@ export const TenantsView = () => {
 
 export const TenantsModule = () => {
     return (
-        <Plugins>
+        <AdminConfig>
             <IsRootTenant>
-                <AddMenu name="tenantManager" label={`Tenant Manager`} icon={<TenantIcon />}>
-                    <AddMenu name={"tenantManager.tenants"} label={`Tenants`} path="/tenants" />
-                </AddMenu>
-                <AddRoute exact path={"/tenants"}>
-                    <Layout title={"Tenant Manager - Tenants"}>
-                        <TenantsView />
-                    </Layout>
-                </AddRoute>
+                <Menu
+                    name={"tenantManager"}
+                    element={
+                        <Menu.Link
+                            icon={
+                                <Menu.Link.Icon
+                                    element={<TenantManagerIcon />}
+                                    label={"Tenant Manager"}
+                                />
+                            }
+                            text={"Tenant Manager"}
+                            to={"/tenants"}
+                        />
+                    }
+                />
+
+                <Route
+                    name={"tenantManager.tenants"}
+                    exact
+                    path={"/tenants"}
+                    element={
+                        <Layout title={"Tenant Manager - Tenants"}>
+                            <TenantsView />
+                        </Layout>
+                    }
+                />
             </IsRootTenant>
-        </Plugins>
+        </AdminConfig>
     );
 };
diff --git a/packages/app-tenant-manager/tsconfig.build.json b/packages/app-tenant-manager/tsconfig.build.json
index cd8acdfe177..6dee3f45ddc 100644
--- a/packages/app-tenant-manager/tsconfig.build.json
+++ b/packages/app-tenant-manager/tsconfig.build.json
@@ -2,6 +2,7 @@
   "extends": "../../tsconfig.build.json",
   "include": ["src"],
   "references": [
+    { "path": "../admin-ui/tsconfig.build.json" },
     { "path": "../app/tsconfig.build.json" },
     { "path": "../app-admin/tsconfig.build.json" },
     { "path": "../app-security/tsconfig.build.json" },
diff --git a/packages/app-tenant-manager/tsconfig.json b/packages/app-tenant-manager/tsconfig.json
index 3a885d11134..d0a0da46576 100644
--- a/packages/app-tenant-manager/tsconfig.json
+++ b/packages/app-tenant-manager/tsconfig.json
@@ -2,6 +2,7 @@
   "extends": "../../tsconfig.json",
   "include": ["src", "__tests__"],
   "references": [
+    { "path": "../admin-ui" },
     { "path": "../app" },
     { "path": "../app-admin" },
     { "path": "../app-security" },
@@ -18,6 +19,8 @@
     "paths": {
       "~/*": ["./src/*"],
       "~tests/*": ["./__tests__/*"],
+      "@webiny/admin-ui/*": ["../admin-ui/src/*"],
+      "@webiny/admin-ui": ["../admin-ui/src"],
       "@webiny/app/*": ["../app/src/*"],
       "@webiny/app": ["../app/src"],
       "@webiny/app-admin/*": ["../app-admin/src/*"],
diff --git a/packages/app-trash-bin/package.json b/packages/app-trash-bin/package.json
index 7ff54fa0e45..2d8927899e4 100644
--- a/packages/app-trash-bin/package.json
+++ b/packages/app-trash-bin/package.json
@@ -11,11 +11,11 @@
   "author": "Webiny Ltd.",
   "license": "MIT",
   "dependencies": {
-    "@emotion/styled": "11.10.6",
-    "@material-design-icons/svg": "^0.14.13",
+    "@webiny/admin-ui": "0.0.0",
     "@webiny/app-aco": "0.0.0",
     "@webiny/app-admin": "0.0.0",
     "@webiny/app-utils": "0.0.0",
+    "@webiny/icons": "0.0.0",
     "@webiny/react-composition": "0.0.0",
     "@webiny/react-properties": "0.0.0",
     "@webiny/ui": "0.0.0",
diff --git a/packages/app-trash-bin/src/Presentation/TrashBinConfigs/TrashBinConfigs.tsx b/packages/app-trash-bin/src/Presentation/TrashBinConfigs/TrashBinConfigs.tsx
index f93e568b272..ae95fd5709e 100644
--- a/packages/app-trash-bin/src/Presentation/TrashBinConfigs/TrashBinConfigs.tsx
+++ b/packages/app-trash-bin/src/Presentation/TrashBinConfigs/TrashBinConfigs.tsx
@@ -43,10 +43,10 @@ export const TrashBinConfigs = () => {
                 />
                 <Browser.Table.Column
                     name={"actions"}
-                    header={" "}
+                    header={""}
                     cell={<CellActions />}
-                    size={80}
-                    className={"rmwc-data-table__cell--align-end"}
+                    size={56}
+                    className={"wby-text-right"}
                     hideable={false}
                     resizable={false}
                 />
diff --git a/packages/app-trash-bin/src/Presentation/components/Actions/DeleteItem/DeleteItem.tsx b/packages/app-trash-bin/src/Presentation/components/Actions/DeleteItem/DeleteItem.tsx
index ee6f3a7a9ad..410a9797599 100644
--- a/packages/app-trash-bin/src/Presentation/components/Actions/DeleteItem/DeleteItem.tsx
+++ b/packages/app-trash-bin/src/Presentation/components/Actions/DeleteItem/DeleteItem.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { ReactComponent as Delete } from "@material-design-icons/svg/outlined/delete.svg";
+import { ReactComponent as Delete } from "@webiny/icons/delete.svg";
 import { useDeleteTrashBinItem, useTrashBinItem } from "~/Presentation/hooks";
 import { TrashBinListConfig } from "~/Presentation/configs";
 
@@ -8,5 +8,12 @@ export const DeleteItemAction = () => {
     const { openDialogDeleteItem } = useDeleteTrashBinItem({ item });
     const { OptionsMenuItem } = TrashBinListConfig.Browser.EntryAction;
 
-    return <OptionsMenuItem icon={<Delete />} label={"Delete"} onAction={openDialogDeleteItem} />;
+    return (
+        <OptionsMenuItem
+            icon={<Delete />}
+            label={"Delete"}
+            onAction={openDialogDeleteItem}
+            className={"!wby-text-destructive-primary [&_svg]:wby-fill-destructive"}
+        />
+    );
 };
diff --git a/packages/app-trash-bin/src/Presentation/components/Actions/RestoreItem/RestoreItem.tsx b/packages/app-trash-bin/src/Presentation/components/Actions/RestoreItem/RestoreItem.tsx
index 90378125478..ad6bb82bded 100644
--- a/packages/app-trash-bin/src/Presentation/components/Actions/RestoreItem/RestoreItem.tsx
+++ b/packages/app-trash-bin/src/Presentation/components/Actions/RestoreItem/RestoreItem.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { ReactComponent as Restore } from "@material-design-icons/svg/outlined/restore.svg";
+import { ReactComponent as Restore } from "@webiny/icons/restore.svg";
 import { useRestoreTrashBinItem, useTrashBinItem } from "~/Presentation/hooks";
 import { TrashBinListConfig } from "~/Presentation/configs";
 
diff --git a/packages/app-trash-bin/src/Presentation/components/BottomInfoBar/BottomInfoBar.styled.tsx b/packages/app-trash-bin/src/Presentation/components/BottomInfoBar/BottomInfoBar.styled.tsx
deleted file mode 100644
index 46d00e7ff0b..00000000000
--- a/packages/app-trash-bin/src/Presentation/components/BottomInfoBar/BottomInfoBar.styled.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import styled from "@emotion/styled";
-
-export const BottomInfoBarWrapper = styled("div")`
-    font-size: 0.8rem;
-    position: sticky;
-    bottom: 0;
-    height: 30px;
-    color: var(--mdc-theme-text-secondary-on-background);
-    border-top: 1px solid var(--mdc-theme-on-background);
-    background: var(--mdc-theme-surface);
-    width: 100%;
-    transform: translateZ(0);
-    overflow: hidden;
-    display: flex;
-    align-items: center;
-    z-index: 1;
-`;
-
-export const BottomInfoBarInner = styled("div")`
-    padding: 0 10px;
-    width: 100%;
-`;
-
-export const StatusWrapper = styled("div")`
-    color: var(--mdc-theme-primary);
-    position: absolute;
-    right: 0;
-    bottom: 10px;
-    margin-right: 10px;
-    display: flex;
-    align-items: center;
-    > div {
-        display: inline-block;
-    }
-`;
-
-export const CircularProgressHolder = styled("div")`
-    position: relative;
-    height: 12px;
-    width: 12px;
-`;
-
-export const UploadingLabel = styled("div")`
-    margin-right: 5px;
-`;
diff --git a/packages/app-trash-bin/src/Presentation/components/BottomInfoBar/BottomInfoBar.tsx b/packages/app-trash-bin/src/Presentation/components/BottomInfoBar/BottomInfoBar.tsx
index ee57f635869..7d47d2ad597 100644
--- a/packages/app-trash-bin/src/Presentation/components/BottomInfoBar/BottomInfoBar.tsx
+++ b/packages/app-trash-bin/src/Presentation/components/BottomInfoBar/BottomInfoBar.tsx
@@ -1,7 +1,7 @@
 import React from "react";
+import { Separator } from "@webiny/admin-ui";
 import { ListMeta } from "./ListMeta";
 import { ListStatus } from "./ListStatus";
-import { BottomInfoBarInner, BottomInfoBarWrapper } from "./BottomInfoBar.styled";
 import { LoadingActions } from "~/types";
 import { useTrashBin } from "~/Presentation/hooks";
 
@@ -9,15 +9,20 @@ export const BottomInfoBar = () => {
     const { vm } = useTrashBin();
 
     return (
-        <BottomInfoBarWrapper>
-            <BottomInfoBarInner>
+        <div className="wby-sticky wby-bottom-0 wby-z-5 wby-bg-neutral-base wby-w-full wby-transform wby-translate-z-0 wby-overflow-hidden">
+            <Separator />
+            <div
+                className={
+                    "wby-h-xl wby-px-md wby-py-sm wby-flex wby-items-center wby-justify-between"
+                }
+            >
                 <ListMeta
                     loading={vm.loading[LoadingActions.list]}
                     totalCount={vm.meta.totalCount}
                     currentCount={vm.items.length}
                 />
                 <ListStatus loading={vm.loading[LoadingActions.listMore]} />
-            </BottomInfoBarInner>
-        </BottomInfoBarWrapper>
+            </div>
+        </div>
     );
 };
diff --git a/packages/app-trash-bin/src/Presentation/components/BottomInfoBar/ListMeta.tsx b/packages/app-trash-bin/src/Presentation/components/BottomInfoBar/ListMeta.tsx
index daa0fde97f9..5628c2bb978 100644
--- a/packages/app-trash-bin/src/Presentation/components/BottomInfoBar/ListMeta.tsx
+++ b/packages/app-trash-bin/src/Presentation/components/BottomInfoBar/ListMeta.tsx
@@ -1,4 +1,5 @@
 import React, { useCallback } from "react";
+import { Text } from "@webiny/admin-ui";
 
 export interface ListMetaProps {
     loading: boolean;
@@ -15,5 +16,9 @@ export const ListMeta = (props: ListMetaProps) => {
         return null;
     }
 
-    return <span>{`Showing ${props.currentCount} out of ${getLabel(props.totalCount)}.`}</span>;
+    return (
+        <Text size={"sm"} as={"div"} className={"wby-text-neutral-strong"}>{`Showing ${
+            props.currentCount
+        } out of ${getLabel(props.totalCount)}.`}</Text>
+    );
 };
diff --git a/packages/app-trash-bin/src/Presentation/components/BottomInfoBar/ListStatus.tsx b/packages/app-trash-bin/src/Presentation/components/BottomInfoBar/ListStatus.tsx
index f55afb9df69..ebad16ef002 100644
--- a/packages/app-trash-bin/src/Presentation/components/BottomInfoBar/ListStatus.tsx
+++ b/packages/app-trash-bin/src/Presentation/components/BottomInfoBar/ListStatus.tsx
@@ -1,6 +1,5 @@
 import React from "react";
-import { CircularProgress } from "@webiny/ui/Progress";
-import { CircularProgressHolder, StatusWrapper, UploadingLabel } from "./BottomInfoBar.styled";
+import { Loader, Text } from "@webiny/admin-ui";
 
 export interface ListStatusProps {
     loading: boolean;
@@ -12,11 +11,11 @@ export const ListStatus = ({ loading }: ListStatusProps) => {
     }
 
     return (
-        <StatusWrapper>
-            <UploadingLabel>{"Loading more items..."}</UploadingLabel>
-            <CircularProgressHolder>
-                <CircularProgress size={10} spinnerWidth={1} />
-            </CircularProgressHolder>
-        </StatusWrapper>
+        <div className="wby-flex wby-items-center wby-gap-sm">
+            <Text size={"sm"} as={"div"} className={"wby-text-neutral-strong"}>
+                {"Loading more items..."}
+            </Text>
+            <Loader size={"xs"} />
+        </div>
     );
 };
diff --git a/packages/app-trash-bin/src/Presentation/components/BulkActions/BulkActions/BulkActions.styled.tsx b/packages/app-trash-bin/src/Presentation/components/BulkActions/BulkActions/BulkActions.styled.tsx
deleted file mode 100644
index c8ed13ba467..00000000000
--- a/packages/app-trash-bin/src/Presentation/components/BulkActions/BulkActions/BulkActions.styled.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import styled from "@emotion/styled";
-import { ButtonContainer } from "@webiny/app-admin";
-
-export const BulkActionsContainer = styled.div`
-    width: 100%;
-    height: 64px;
-    background-color: var(--mdc-theme-surface);
-    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: 4;
-`;
-
-export const BulkActionsInner = styled.div`
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 0 16px;
-`;
-
-export const ButtonsContainer = styled.div`
-    display: flex;
-    align-items: center;
-
-    ${ButtonContainer} {
-        margin: 0;
-    }
-`;
diff --git a/packages/app-trash-bin/src/Presentation/components/BulkActions/BulkActions/BulkActions.tsx b/packages/app-trash-bin/src/Presentation/components/BulkActions/BulkActions/BulkActions.tsx
index d16ef7cde0b..1dbf40dcb72 100644
--- a/packages/app-trash-bin/src/Presentation/components/BulkActions/BulkActions/BulkActions.tsx
+++ b/packages/app-trash-bin/src/Presentation/components/BulkActions/BulkActions/BulkActions.tsx
@@ -1,11 +1,9 @@
 import React, { useMemo } from "react";
-import { ReactComponent as Close } from "@material-design-icons/svg/outlined/close.svg";
+import { Text, IconButton, Button } from "@webiny/admin-ui";
+import { ReactComponent as Close } from "@webiny/icons/close.svg";
 import { Buttons } from "@webiny/app-admin";
-import { IconButton } from "@webiny/ui/Button";
-import { Typography } from "@webiny/ui/Typography";
 import { useTrashBinListConfig } from "~/Presentation/configs";
 import { useTrashBin } from "~/Presentation/hooks";
-import { BulkActionsContainer, BulkActionsInner, ButtonsContainer } from "./BulkActions.styled";
 
 export const getEntriesLabel = (count: number, isSelectedAll: boolean): string => {
     if (isSelectedAll) {
@@ -17,14 +15,14 @@ export const getEntriesLabel = (count: number, isSelectedAll: boolean): string =
 
 export const BulkActions = () => {
     const { browser } = useTrashBinListConfig();
-    const { vm, selectItems } = useTrashBin();
+    const { vm, selectItems, selectAllItems, unselectAllItems } = useTrashBin();
 
     const headline = useMemo((): string => {
         if (vm.isSelectedAll) {
-            return "All entries selected:";
+            return "All items selected";
         }
 
-        return getEntriesLabel(vm.selectedItems.length, vm.isSelectedAll) + ` selected:`;
+        return getEntriesLabel(vm.selectedItems.length, vm.isSelectedAll) + ` selected`;
     }, [vm.selectedItems, vm.isSelectedAll]);
 
     if (!vm.selectedItems.length) {
@@ -32,14 +30,39 @@ export const BulkActions = () => {
     }
 
     return (
-        <BulkActionsContainer>
-            <BulkActionsInner>
-                <ButtonsContainer>
-                    <Typography use={"headline6"}>{headline}</Typography>
+        <div className={"wby-w-full wby-bg-neutral-disabled wby-px-md wby-py-sm"}>
+            <div className={"wby-flex wby-items-center wby-justify-between wby-gap-sm"}>
+                <div className={"wby-flex wby-items-center wby-gap-sm"}>
+                    <Text size={"sm"} className={"wby-text-neutral-strong"}>
+                        {headline}
+                    </Text>
+                    {vm.isSelectedAll ? (
+                        <Button
+                            text={"Clear selection"}
+                            onClick={unselectAllItems}
+                            size={"sm"}
+                            variant={"ghost"}
+                        />
+                    ) : (
+                        <Button
+                            text={"Select all remaining items"}
+                            onClick={selectAllItems}
+                            size={"sm"}
+                            variant={"secondary"}
+                        />
+                    )}
+                </div>
+
+                <div className={"wby-flex wby-items-center wby-gap-sm"}>
                     <Buttons actions={browser.bulkActions} />
-                </ButtonsContainer>
-                <IconButton icon={<Close />} onClick={() => selectItems([])} />
-            </BulkActionsInner>
-        </BulkActionsContainer>
+                    <IconButton
+                        variant={"ghost"}
+                        size={"sm"}
+                        icon={<Close />}
+                        onClick={() => selectItems([])}
+                    />
+                </div>
+            </div>
+        </div>
     );
 };
diff --git a/packages/app-trash-bin/src/Presentation/components/BulkActions/DeleteItems/DeleteItems.tsx b/packages/app-trash-bin/src/Presentation/components/BulkActions/DeleteItems/DeleteItems.tsx
index 003b1847f5e..be77632630b 100644
--- a/packages/app-trash-bin/src/Presentation/components/BulkActions/DeleteItems/DeleteItems.tsx
+++ b/packages/app-trash-bin/src/Presentation/components/BulkActions/DeleteItems/DeleteItems.tsx
@@ -1,17 +1,18 @@
 import React, { useMemo } from "react";
-import { ReactComponent as DeleteIcon } from "@material-design-icons/svg/outlined/delete.svg";
+import { ReactComponent as DeleteIcon } from "@webiny/icons/delete.svg";
 import { observer } from "mobx-react-lite";
 import { useSnackbar } from "@webiny/app-admin";
 import { TrashBinListConfig } from "~/Presentation/configs";
 import { useTrashBin } from "~/Presentation/hooks";
 import { getEntriesLabel } from "../BulkActions";
+import { Tooltip } from "@webiny/admin-ui";
 
 export const BulkActionsDeleteItems = observer(() => {
     const { deleteItem, deleteBulkAction } = useTrashBin();
     const { showSnackbar } = useSnackbar();
 
     const { useWorker, useButtons, useDialog } = TrashBinListConfig.Browser.BulkAction;
-    const { IconButton } = useButtons();
+    const { ButtonDefault } = useButtons();
     const worker = useWorker();
     const { showConfirmationDialog, showResultsDialog } = useDialog();
 
@@ -64,11 +65,14 @@ export const BulkActionsDeleteItems = observer(() => {
         });
 
     return (
-        <IconButton
-            icon={<DeleteIcon />}
-            onAction={openDeleteEntriesDialog}
-            label={`Delete ${entriesLabel}`}
-            tooltipPlacement={"bottom"}
+        <Tooltip
+            side={"bottom"}
+            content={`Delete ${entriesLabel}`}
+            trigger={
+                <ButtonDefault icon={<DeleteIcon />} onAction={openDeleteEntriesDialog} size={"sm"}>
+                    {"Delete"}
+                </ButtonDefault>
+            }
         />
     );
 });
diff --git a/packages/app-trash-bin/src/Presentation/components/BulkActions/RestoreItems/RestoreItems.tsx b/packages/app-trash-bin/src/Presentation/components/BulkActions/RestoreItems/RestoreItems.tsx
index 9f70a6d713c..8659010e1c6 100644
--- a/packages/app-trash-bin/src/Presentation/components/BulkActions/RestoreItems/RestoreItems.tsx
+++ b/packages/app-trash-bin/src/Presentation/components/BulkActions/RestoreItems/RestoreItems.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback, useMemo } from "react";
-import { ReactComponent as RestoreIcon } from "@material-design-icons/svg/outlined/restore.svg";
+import { ReactComponent as RestoreIcon } from "@webiny/icons/restore.svg";
 import { observer } from "mobx-react-lite";
 import { useSnackbar } from "@webiny/app-admin";
 import { TrashBinListConfig } from "~/Presentation/configs";
@@ -7,6 +7,7 @@ import { useTrashBin } from "~/Presentation/hooks";
 import { getEntriesLabel } from "../BulkActions";
 import { RestoreItemsReportMessage } from "~/Presentation/components/BulkActions/RestoreItems/RestoreItemsReportMessage";
 import { TrashBinItemDTO } from "~/Domain";
+import { Tooltip } from "@webiny/admin-ui";
 
 export const BulkActionsRestoreItems = observer(() => {
     const { restoreItem, onItemAfterRestore, getRestoredItemById, restoreBulkAction } =
@@ -14,7 +15,7 @@ export const BulkActionsRestoreItems = observer(() => {
     const { showSnackbar } = useSnackbar();
 
     const { useWorker, useButtons, useDialog } = TrashBinListConfig.Browser.BulkAction;
-    const { IconButton } = useButtons();
+    const { ButtonDefault } = useButtons();
     const worker = useWorker();
     const { showConfirmationDialog, showResultsDialog, hideResultsDialog } = useDialog();
 
@@ -81,11 +82,18 @@ export const BulkActionsRestoreItems = observer(() => {
         });
 
     return (
-        <IconButton
-            icon={<RestoreIcon />}
-            onAction={openRestoreEntriesDialog}
-            label={`Restore ${entriesLabel}`}
-            tooltipPlacement={"bottom"}
+        <Tooltip
+            side={"bottom"}
+            content={`Restore ${entriesLabel}`}
+            trigger={
+                <ButtonDefault
+                    icon={<RestoreIcon />}
+                    onAction={openRestoreEntriesDialog}
+                    size={"sm"}
+                >
+                    {"Restore"}
+                </ButtonDefault>
+            }
         />
     );
 });
diff --git a/packages/app-trash-bin/src/Presentation/components/BulkActions/RestoreItems/RestoreItemsReportMessage.tsx b/packages/app-trash-bin/src/Presentation/components/BulkActions/RestoreItems/RestoreItemsReportMessage.tsx
index 8cda4543cdb..b9e63f4391e 100644
--- a/packages/app-trash-bin/src/Presentation/components/BulkActions/RestoreItems/RestoreItemsReportMessage.tsx
+++ b/packages/app-trash-bin/src/Presentation/components/BulkActions/RestoreItems/RestoreItemsReportMessage.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { LocationAction } from "./RestoredItems.styled";
+import { Text } from "@webiny/admin-ui";
 
 export interface RestoreItemsReportMessageProps {
     onLocationClick: () => void;
@@ -7,12 +7,12 @@ export interface RestoreItemsReportMessageProps {
 
 export const RestoreItemsReportMessage = (props: RestoreItemsReportMessageProps) => {
     return (
-        <>
+        <div className={"wby-cursor-pointer"} onClick={() => props.onLocationClick()}>
             Item successfully restored (
-            <LocationAction onClick={() => props.onLocationClick()}>
+            <Text size={"sm"} className={"wby-text-accent-primary wby-underline"}>
                 {"see location"}
-            </LocationAction>
+            </Text>
             ).
-        </>
+        </div>
     );
 };
diff --git a/packages/app-trash-bin/src/Presentation/components/BulkActions/RestoreItems/RestoredItems.styled.tsx b/packages/app-trash-bin/src/Presentation/components/BulkActions/RestoreItems/RestoredItems.styled.tsx
deleted file mode 100644
index 65221a98176..00000000000
--- a/packages/app-trash-bin/src/Presentation/components/BulkActions/RestoreItems/RestoredItems.styled.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import styled from "@emotion/styled";
-
-export const LocationAction = styled.span`
-    color: var(--mdc-theme-primary);
-    cursor: pointer;
-`;
diff --git a/packages/app-trash-bin/src/Presentation/components/Cells/CellTitle/CellTitle.styled.tsx b/packages/app-trash-bin/src/Presentation/components/Cells/CellTitle/CellTitle.styled.tsx
deleted file mode 100644
index efbefa38ec5..00000000000
--- a/packages/app-trash-bin/src/Presentation/components/Cells/CellTitle/CellTitle.styled.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import styled from "@emotion/styled";
-import { Typography } from "@webiny/ui/Typography";
-
-export const RowTitle = styled("div")`
-    display: flex;
-    align-items: center;
-`;
-
-export const RowIcon = styled("div")`
-    margin-right: 8px;
-    height: 24px;
-`;
-
-export const RowText = styled(Typography)`
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-`;
diff --git a/packages/app-trash-bin/src/Presentation/components/Cells/CellTitle/CellTitle.tsx b/packages/app-trash-bin/src/Presentation/components/Cells/CellTitle/CellTitle.tsx
index a5c45b14d74..312d542998d 100644
--- a/packages/app-trash-bin/src/Presentation/components/Cells/CellTitle/CellTitle.tsx
+++ b/packages/app-trash-bin/src/Presentation/components/Cells/CellTitle/CellTitle.tsx
@@ -1,18 +1,16 @@
 import React from "react";
-import { ReactComponent as File } from "@material-design-icons/svg/outlined/description.svg";
-import { RowIcon, RowText, RowTitle } from "./CellTitle.styled";
+import { ReactComponent as File } from "@webiny/icons/description.svg";
 import { TrashBinListConfig } from "~/Presentation/configs";
+import { Icon, Text } from "@webiny/admin-ui";
 
 export const CellTitle = () => {
     const { useTableRow } = TrashBinListConfig.Browser.Table.Column;
     const { row } = useTableRow();
 
     return (
-        <RowTitle>
-            <RowIcon>
-                <File />
-            </RowIcon>
-            <RowText use={"subtitle2"}>{row.title}</RowText>
-        </RowTitle>
+        <div className={"wby-flex wby-items-center wby-gap-sm wby-truncate"}>
+            <Icon size={"sm"} color={"neutral-strong"} icon={<File />} label={"Item"} />
+            <Text className={"wby-truncate wby-min-w-0 wby-flex-shrink"}>{row.title}</Text>
+        </div>
     );
 };
diff --git a/packages/app-trash-bin/src/Presentation/components/Empty/Empty.styled.tsx b/packages/app-trash-bin/src/Presentation/components/Empty/Empty.styled.tsx
deleted file mode 100644
index 6b35c57e6bb..00000000000
--- a/packages/app-trash-bin/src/Presentation/components/Empty/Empty.styled.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import styled from "@emotion/styled";
-
-export const EmptyWrapper = styled("div")`
-    width: 100%;
-    height: calc(100% - 95px);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-`;
-
-export const EmptyOuter = styled("div")`
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-`;
diff --git a/packages/app-trash-bin/src/Presentation/components/Empty/Empty.tsx b/packages/app-trash-bin/src/Presentation/components/Empty/Empty.tsx
index e731dd18ff7..325d4134044 100644
--- a/packages/app-trash-bin/src/Presentation/components/Empty/Empty.tsx
+++ b/packages/app-trash-bin/src/Presentation/components/Empty/Empty.tsx
@@ -1,16 +1,15 @@
 import React from "react";
-import { ReactComponent as SearchIcon } from "@material-design-icons/svg/outlined/search.svg";
-import { ReactComponent as TrashIcon } from "@material-design-icons/svg/outlined/delete_forever.svg";
+import { ReactComponent as SearchIcon } from "@webiny/icons/search.svg";
+import { ReactComponent as TrashIcon } from "@webiny/icons/delete_forever.svg";
 import EmptyView from "@webiny/app-admin/components/EmptyView";
-import { EmptyOuter, EmptyWrapper } from "./Empty.styled";
 import { useTrashBin } from "~/Presentation/hooks";
 
 export const Empty = () => {
     const { vm } = useTrashBin();
 
     return (
-        <EmptyWrapper>
-            <EmptyOuter>
+        <div className={"wby-flex wby-items-center wby-justify-center wby-w-full wby-h-full"}>
+            <div className={"wby-flex wby-items-center wby-flex-cols"}>
                 {vm.isSearchView ? (
                     <EmptyView icon={<SearchIcon />} title={"No items found."} action={null} />
                 ) : (
@@ -20,7 +19,7 @@ export const Empty = () => {
                         action={null}
                     />
                 )}
-            </EmptyOuter>
-        </EmptyWrapper>
+            </div>
+        </div>
     );
 };
diff --git a/packages/app-trash-bin/src/Presentation/components/SearchInput/SearchInput.styled.tsx b/packages/app-trash-bin/src/Presentation/components/SearchInput/SearchInput.styled.tsx
deleted file mode 100644
index ae7329721fb..00000000000
--- a/packages/app-trash-bin/src/Presentation/components/SearchInput/SearchInput.styled.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import styled from "@emotion/styled";
-import { Icon } from "@webiny/ui/Icon";
-import { IconButton } from "@webiny/ui/Button";
-
-export const SearchIconContainer = styled(Icon)`
-    &.mdc-button__icon {
-        color: var(--mdc-theme-text-secondary-on-background);
-        position: absolute;
-        width: 24px;
-        height: 24px;
-        left: 8px;
-        top: 8px;
-    }
-`;
-
-export const FilterButton = styled(IconButton)`
-    position: absolute;
-    top: -4px;
-    right: -3px;
-`;
-
-export const InputContainer = styled.div`
-    background-color: var(--mdc-theme-on-background);
-    position: relative;
-    height: 32px;
-    padding: 3px;
-    width: 100%;
-    border-radius: 2px;
-    > input {
-        border: none;
-        font-size: 14px;
-        width: calc(100% - 10px);
-        height: 100%;
-        margin-left: 32px;
-        background-color: transparent;
-        outline: none;
-        color: var(--mdc-theme-text-primary-on-background);
-    }
-`;
diff --git a/packages/app-trash-bin/src/Presentation/components/SearchInput/SearchInput.tsx b/packages/app-trash-bin/src/Presentation/components/SearchInput/SearchInput.tsx
index 83a38b3c3ab..042d1ee7a95 100644
--- a/packages/app-trash-bin/src/Presentation/components/SearchInput/SearchInput.tsx
+++ b/packages/app-trash-bin/src/Presentation/components/SearchInput/SearchInput.tsx
@@ -1,34 +1,34 @@
 import React from "react";
-import { ReactComponent as SearchIcon } from "@material-design-icons/svg/outlined/search.svg";
-import { DelayedOnChange } from "@webiny/ui/DelayedOnChange";
-import { InputContainer, SearchIconContainer } from "./SearchInput.styled";
+import { ReactComponent as SearchIcon } from "@webiny/icons/search.svg";
+import { DelayedOnChange, Icon, Input } from "@webiny/admin-ui";
 import { useTrashBin } from "~/Presentation/hooks";
 
 export const SearchInput = () => {
     const { vm, searchItems } = useTrashBin();
 
     return (
-        <InputContainer>
-            <SearchIconContainer icon={<SearchIcon />} />
-            <DelayedOnChange
-                value={vm.searchQuery}
-                onChange={value => {
-                    if (value === vm.searchQuery) {
-                        return;
-                    }
-                    searchItems(value);
-                }}
-            >
-                {({ value, onChange }) => (
-                    <input
-                        id={"trash-bin__search-input"}
-                        value={value}
-                        onChange={e => onChange(e.target.value)}
-                        placeholder={vm.searchLabel}
-                        data-testid={"trash-bin.search-input"}
-                    />
-                )}
-            </DelayedOnChange>
-        </InputContainer>
+        <DelayedOnChange
+            value={vm.searchQuery}
+            onChange={value => {
+                if (value === vm.searchQuery) {
+                    return;
+                }
+                searchItems(value);
+            }}
+        >
+            {({ value, onChange }) => (
+                <Input
+                    id={"trash-bin__search-input"}
+                    value={value}
+                    onChange={e => onChange(e.target.value)}
+                    forwardEventOnChange={true}
+                    placeholder={vm.searchLabel}
+                    data-testid={"trash-bin.search-input"}
+                    startIcon={<Icon icon={<SearchIcon />} label="Search" />}
+                    size={"md"}
+                    variant={"ghost"}
+                />
+            )}
+        </DelayedOnChange>
     );
 };
diff --git a/packages/app-trash-bin/src/Presentation/components/SelectAll/Messages.tsx b/packages/app-trash-bin/src/Presentation/components/SelectAll/Messages.tsx
deleted file mode 100644
index 429c372789a..00000000000
--- a/packages/app-trash-bin/src/Presentation/components/SelectAll/Messages.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import React from "react";
-import { Typography } from "@webiny/ui/Typography";
-import { getEntriesLabel } from "./SelectAll";
-import { Button, MessageContainer } from "./SelectAll.styled";
-
-export interface MessagesProps {
-    onClick: () => void;
-    selected: number;
-}
-
-export const SelectAllMessage = (props: MessagesProps) => {
-    return (
-        <MessageContainer>
-            <Typography use={"body1"}>{`${getEntriesLabel(props.selected)} selected.`}</Typography>
-            <Button small={true} onClick={props.onClick}>{`Select all remaining items`}</Button>
-        </MessageContainer>
-    );
-};
-
-export const ClearSelectionMessage = (props: MessagesProps) => {
-    return (
-        <MessageContainer>
-            <Typography use={"body1"}>{`All items are selected.`}</Typography>
-            <Button small={true} onClick={props.onClick}>{`Clear selection`}</Button>
-        </MessageContainer>
-    );
-};
diff --git a/packages/app-trash-bin/src/Presentation/components/SelectAll/SelectAll.styled.tsx b/packages/app-trash-bin/src/Presentation/components/SelectAll/SelectAll.styled.tsx
deleted file mode 100644
index bb1889b79e5..00000000000
--- a/packages/app-trash-bin/src/Presentation/components/SelectAll/SelectAll.styled.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import styled from "@emotion/styled";
-import { ButtonDefault } from "@webiny/ui/Button";
-
-export const SelectAllContainer = styled.div`
-    width: 100%;
-    height: auto;
-    background-color: var(--mdc-theme-background);
-    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
-    padding: 16px;
-    text-align: center;
-`;
-
-export const MessageContainer = styled.div`
-    display: flex;
-    align-items: center;
-    justify-content: center;
-`;
-
-export const Button = styled(ButtonDefault)`
-    margin-left: 8px;
-`;
diff --git a/packages/app-trash-bin/src/Presentation/components/SelectAll/SelectAll.tsx b/packages/app-trash-bin/src/Presentation/components/SelectAll/SelectAll.tsx
deleted file mode 100644
index 60e86234f15..00000000000
--- a/packages/app-trash-bin/src/Presentation/components/SelectAll/SelectAll.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import React from "react";
-import { useTrashBin } from "~/Presentation/hooks";
-import { ClearSelectionMessage, SelectAllMessage } from "./Messages";
-import { SelectAllContainer } from "./SelectAll.styled";
-
-export const getEntriesLabel = (count = 0): string => {
-    return `${count} ${count === 1 ? "item" : "items"}`;
-};
-
-export const SelectAll = () => {
-    const { vm, selectAllItems, unselectAllItems } = useTrashBin();
-
-    if (!vm.allowSelectAll) {
-        return null;
-    }
-
-    return (
-        <SelectAllContainer data-testid={"select-all-container"}>
-            {vm.isSelectedAll ? (
-                <ClearSelectionMessage
-                    onClick={unselectAllItems}
-                    selected={vm.selectedItems.length}
-                />
-            ) : (
-                <SelectAllMessage onClick={selectAllItems} selected={vm.selectedItems.length} />
-            )}
-        </SelectAllContainer>
-    );
-};
diff --git a/packages/app-trash-bin/src/Presentation/components/SelectAll/index.ts b/packages/app-trash-bin/src/Presentation/components/SelectAll/index.ts
deleted file mode 100644
index 72c9bbafe39..00000000000
--- a/packages/app-trash-bin/src/Presentation/components/SelectAll/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./SelectAll";
diff --git a/packages/app-trash-bin/src/Presentation/components/Title/Title.styled.tsx b/packages/app-trash-bin/src/Presentation/components/Title/Title.styled.tsx
deleted file mode 100644
index 5a0da8f8674..00000000000
--- a/packages/app-trash-bin/src/Presentation/components/Title/Title.styled.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import styled from "@emotion/styled";
-import { Typography, TypographyProps } from "@webiny/ui/Typography";
-
-export const Name = styled(Typography)<TypographyProps>`
-    color: var(--mdc-theme-text-primary-on-background);
-    padding-left: 8px;
-    line-height: 48px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-`;
diff --git a/packages/app-trash-bin/src/Presentation/components/Title/Title.tsx b/packages/app-trash-bin/src/Presentation/components/Title/Title.tsx
index c7f8107915a..e0c53bf0ff9 100644
--- a/packages/app-trash-bin/src/Presentation/components/Title/Title.tsx
+++ b/packages/app-trash-bin/src/Presentation/components/Title/Title.tsx
@@ -1,15 +1,16 @@
 import React from "react";
-import { Skeleton } from "@webiny/ui/Skeleton";
-import { Name } from "./Title.styled";
+import { Skeleton, Heading } from "@webiny/admin-ui";
 
 export interface TitleProps {
     title?: string;
 }
 
 export const Title = ({ title }: TitleProps) => {
-    return (
-        <Name use={"headline6"} tag={"h1"}>
-            {title || <Skeleton theme={"dark"} />}
-        </Name>
+    return title ? (
+        <Heading level={5} className={"wby-text-neutral-primary"}>
+            {title}
+        </Heading>
+    ) : (
+        <Skeleton size={"md"} />
     );
 };
diff --git a/packages/app-trash-bin/src/Presentation/components/TrashBinOverlay/TrashBinOverlay.tsx b/packages/app-trash-bin/src/Presentation/components/TrashBinOverlay/TrashBinOverlay.tsx
index 272ec3555ac..e179d17fba3 100644
--- a/packages/app-trash-bin/src/Presentation/components/TrashBinOverlay/TrashBinOverlay.tsx
+++ b/packages/app-trash-bin/src/Presentation/components/TrashBinOverlay/TrashBinOverlay.tsx
@@ -1,13 +1,12 @@
 import React from "react";
 import debounce from "lodash/debounce";
 import { OverlayLayout } from "@webiny/app-admin";
-import { Scrollbar } from "@webiny/ui/Scrollbar";
+import { Scrollbar } from "@webiny/admin-ui";
 import { Title } from "~/Presentation/components/Title";
 import { SearchInput } from "~/Presentation/components/SearchInput";
 import { BulkActions } from "~/Presentation/components/BulkActions";
 import { Empty } from "~/Presentation/components/Empty";
 import { Table } from "~/Presentation/components/Table";
-import { SelectAll } from "~/Presentation/components/SelectAll";
 import { BottomInfoBar } from "~/Presentation/components/BottomInfoBar";
 import { useTrashBin } from "~/Presentation/hooks";
 
@@ -32,7 +31,6 @@ export const TrashBinOverlay = (props: TrashBinOverlayProps) => {
             barMiddle={<SearchInput />}
         >
             <BulkActions />
-            <SelectAll />
             <Scrollbar onScrollFrame={scrollFrame => onTableScroll({ scrollFrame })}>
                 {vm.isEmptyView ? <Empty /> : <Table />}
             </Scrollbar>
diff --git a/packages/app-trash-bin/src/Presentation/configs/list/Browser/Table/Column.tsx b/packages/app-trash-bin/src/Presentation/configs/list/Browser/Table/Column.tsx
index 14462c1d997..84a5cb0cd8b 100644
--- a/packages/app-trash-bin/src/Presentation/configs/list/Browser/Table/Column.tsx
+++ b/packages/app-trash-bin/src/Presentation/configs/list/Browser/Table/Column.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-import { CompositionScope } from "@webiny/react-composition";
 import { AcoConfig, TableColumnConfig as ColumnConfig } from "@webiny/app-aco";
 import { TrashBinItemDTO } from "~/Domain";
 
@@ -11,11 +10,9 @@ type ColumnProps = React.ComponentProps<typeof AcoConfig.Table.Column>;
 
 const BaseColumn = (props: ColumnProps) => {
     return (
-        <CompositionScope name={"trash"}>
-            <AcoConfig>
-                <Table.Column {...props} />
-            </AcoConfig>
-        </CompositionScope>
+        <AcoConfig>
+            <Table.Column {...props} />
+        </AcoConfig>
     );
 };
 
diff --git a/packages/app-trash-bin/src/Presentation/configs/list/Browser/Table/Sorting.tsx b/packages/app-trash-bin/src/Presentation/configs/list/Browser/Table/Sorting.tsx
index cf282678ce9..de3bd4c283d 100644
--- a/packages/app-trash-bin/src/Presentation/configs/list/Browser/Table/Sorting.tsx
+++ b/packages/app-trash-bin/src/Presentation/configs/list/Browser/Table/Sorting.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-import { CompositionScope } from "@webiny/react-composition";
 import { AcoConfig, TableSortingConfig as SortingConfig } from "@webiny/app-aco";
 
 const { Table } = AcoConfig;
@@ -10,10 +9,8 @@ type SortingProps = React.ComponentProps<typeof AcoConfig.Table.Sorting>;
 
 export const Sorting = (props: SortingProps) => {
     return (
-        <CompositionScope name={"trash"}>
-            <AcoConfig>
-                <Table.Sorting {...props} />
-            </AcoConfig>
-        </CompositionScope>
+        <AcoConfig>
+            <Table.Sorting {...props} />
+        </AcoConfig>
     );
 };
diff --git a/packages/app-trash-bin/src/Presentation/configs/list/TrashBinListConfig.tsx b/packages/app-trash-bin/src/Presentation/configs/list/TrashBinListConfig.tsx
index 2960021e3c2..378cf77d120 100644
--- a/packages/app-trash-bin/src/Presentation/configs/list/TrashBinListConfig.tsx
+++ b/packages/app-trash-bin/src/Presentation/configs/list/TrashBinListConfig.tsx
@@ -1,10 +1,21 @@
-import { useMemo } from "react";
+import React, { useMemo } from "react";
 import { createConfigurableComponent } from "@webiny/react-properties";
 import { Browser, BrowserConfig } from "./Browser";
+import { CompositionScope } from "@webiny/react-composition";
 
 const base = createConfigurableComponent<TrashBinListConfig>("TrashBinListConfig");
 
-export const TrashBinListConfig = Object.assign(base.Config, { Browser });
+const ScopedTrashBinListConfig = ({ children }: { children: React.ReactNode }) => {
+    return (
+        <CompositionScope name={"trash"}>
+            <base.Config>{children}</base.Config>
+        </CompositionScope>
+    );
+};
+
+ScopedTrashBinListConfig.displayName = "TrashBinListConfig";
+
+export const TrashBinListConfig = Object.assign(ScopedTrashBinListConfig, { Browser });
 export const TrashBinListWithConfig = base.WithConfig;
 
 interface TrashBinListConfig {
diff --git a/packages/app-trash-bin/tsconfig.build.json b/packages/app-trash-bin/tsconfig.build.json
index 46d65875e03..bf15cec63c2 100644
--- a/packages/app-trash-bin/tsconfig.build.json
+++ b/packages/app-trash-bin/tsconfig.build.json
@@ -2,6 +2,7 @@
   "extends": "../../tsconfig.build.json",
   "include": ["src"],
   "references": [
+    { "path": "../admin-ui/tsconfig.build.json" },
     { "path": "../app-aco/tsconfig.build.json" },
     { "path": "../app-admin/tsconfig.build.json" },
     { "path": "../app-utils/tsconfig.build.json" },
diff --git a/packages/app-trash-bin/tsconfig.json b/packages/app-trash-bin/tsconfig.json
index af2773b4eae..984c3f1d7c1 100644
--- a/packages/app-trash-bin/tsconfig.json
+++ b/packages/app-trash-bin/tsconfig.json
@@ -2,6 +2,7 @@
   "extends": "../../tsconfig.json",
   "include": ["src", "__tests__"],
   "references": [
+    { "path": "../admin-ui" },
     { "path": "../app-aco" },
     { "path": "../app-admin" },
     { "path": "../app-utils" },
@@ -16,6 +17,8 @@
     "paths": {
       "~/*": ["./src/*"],
       "~tests/*": ["./__tests__/*"],
+      "@webiny/admin-ui/*": ["../admin-ui/src/*"],
+      "@webiny/admin-ui": ["../admin-ui/src"],
       "@webiny/app-aco/*": ["../app-aco/src/*"],
       "@webiny/app-aco": ["../app-aco/src"],
       "@webiny/app-admin/*": ["../app-admin/src/*"],
diff --git a/packages/app-utils/src/fta/Domain/Repositories/Loading/ILoadingRepository.ts b/packages/app-utils/src/fta/Domain/Repositories/Loading/ILoadingRepository.ts
index d52ed3be714..d10341f83c2 100644
--- a/packages/app-utils/src/fta/Domain/Repositories/Loading/ILoadingRepository.ts
+++ b/packages/app-utils/src/fta/Domain/Repositories/Loading/ILoadingRepository.ts
@@ -2,4 +2,6 @@ export interface ILoadingRepository {
     get: () => Record<string, boolean>;
     set: (action: string, isLoading?: boolean) => Promise<void>;
     runCallBack: <T>(callback: Promise<T>, action: string) => Promise<T>;
+    isLoading: (action: string) => boolean;
+    hasLoading: () => boolean;
 }
diff --git a/packages/app-utils/src/fta/Domain/Repositories/Loading/LoadingRepository.ts b/packages/app-utils/src/fta/Domain/Repositories/Loading/LoadingRepository.ts
index 52274e3a05d..51b687e95d0 100644
--- a/packages/app-utils/src/fta/Domain/Repositories/Loading/LoadingRepository.ts
+++ b/packages/app-utils/src/fta/Domain/Repositories/Loading/LoadingRepository.ts
@@ -13,6 +13,14 @@ export class LoadingRepository implements ILoadingRepository {
         return Object.fromEntries(this.loadings);
     }
 
+    hasLoading() {
+        return [...this.loadings.values()].some(Boolean);
+    }
+
+    isLoading(action: string) {
+        return this.loadings.get(action) ?? false;
+    }
+
     async set(action: string, isLoading = true) {
         this.loadings.set(action, isLoading);
     }
diff --git a/packages/app-wcp/src/WcpProvider.tsx b/packages/app-wcp/src/WcpProvider.tsx
index 185fb62fdf7..aa5a7674706 100644
--- a/packages/app-wcp/src/WcpProvider.tsx
+++ b/packages/app-wcp/src/WcpProvider.tsx
@@ -3,10 +3,12 @@ import { WcpContextProvider } from "./contexts";
 import { useQuery } from "@apollo/react-hooks";
 import gql from "graphql-tag";
 import { GetWcpProjectGqlResponse } from "~/types";
-import { ILicense } from "@webiny/wcp/types";
+import { DecryptedWcpProjectLicense, ILicense } from "@webiny/wcp/types";
 import { License, NullLicense } from "@webiny/wcp";
 import { ReactLicense } from "./ReactLicense";
 
+const LOCAL_STORAGE_KEY = `webiny_wcp_project`;
+
 export const GET_WCP_PROJECT = gql`
     query GetWcpProject {
         wcp {
@@ -59,6 +61,19 @@ interface WcpProviderProps {
     children: React.ReactNode;
 }
 
+const projectFromLocalStorage = () => {
+    try {
+        const localData = localStorage.getItem(LOCAL_STORAGE_KEY);
+        if (localData) {
+            const parsedData = JSON.parse(localData) as DecryptedWcpProjectLicense;
+            return new ReactLicense(License.fromLicenseDto(parsedData));
+        }
+    } catch {}
+
+    // Do nothing.
+    return undefined;
+};
+
 export const WcpProvider = ({ children, loader }: WcpProviderProps) => {
     // If `REACT_APP_WCP_PROJECT_ID` environment variable is missing, we can immediately exit.
     if (!process.env.REACT_APP_WCP_PROJECT_ID) {
@@ -69,9 +84,9 @@ export const WcpProvider = ({ children, loader }: WcpProviderProps) => {
         );
     }
 
-    const [project, setProject] = useState<ILicense | undefined>(undefined);
+    const [project, setProject] = useState<ILicense | undefined>(projectFromLocalStorage);
+
     useQuery<GetWcpProjectGqlResponse>(GET_WCP_PROJECT, {
-        skip: project !== undefined,
         context: {
             headers: {
                 "x-tenant": "root"
@@ -79,6 +94,7 @@ export const WcpProvider = ({ children, loader }: WcpProviderProps) => {
         },
         onCompleted: response => {
             setProject(new ReactLicense(License.fromLicenseDto(response.wcp.getProject.data)));
+            localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(response.wcp.getProject.data));
         }
     });
 
diff --git a/packages/app-website/package.json b/packages/app-website/package.json
index 2386d567bb6..d2edf9797e3 100644
--- a/packages/app-website/package.json
+++ b/packages/app-website/package.json
@@ -19,6 +19,7 @@
     "@webiny/app-page-builder": "0.0.0",
     "@webiny/app-page-builder-elements": "0.0.0",
     "@webiny/app-theme": "0.0.0",
+    "@webiny/lexical-theme": "0.0.0",
     "@webiny/plugins": "0.0.0",
     "@webiny/react-router": "0.0.0",
     "apollo-client": "^2.6.10",
@@ -47,6 +48,7 @@
   "adio": {
     "ignore": {
       "dependencies": [
+        "@webiny/lexical-theme",
         "reset-css"
       ]
     }
diff --git a/packages/app-website/src/Menu.tsx b/packages/app-website/src/Menu.tsx
index 8fd500ffe52..0fdbba82497 100644
--- a/packages/app-website/src/Menu.tsx
+++ b/packages/app-website/src/Menu.tsx
@@ -7,7 +7,7 @@ export interface PublishedMenuItemData {
     title: string;
     path: string;
     url: string;
-    children: PublishedMenuItemData;
+    children: PublishedMenuItemData[];
 }
 
 export interface PublishedMenuData {
diff --git a/packages/app-website/src/index.tsx b/packages/app-website/src/index.tsx
index 7639cd8bed8..ab7606ccfde 100644
--- a/packages/app-website/src/index.tsx
+++ b/packages/app-website/src/index.tsx
@@ -5,8 +5,7 @@ export {
     createProvider,
     Plugin,
     RoutePlugin,
-    useApp,
-    AddRoute
+    useApp
 } from "@webiny/app";
 
 export type {
diff --git a/packages/app-website/src/styles.scss b/packages/app-website/src/styles.scss
index 974f4c0e466..3ee8c038df9 100644
--- a/packages/app-website/src/styles.scss
+++ b/packages/app-website/src/styles.scss
@@ -1 +1,2 @@
 @import "./styles/reset";
+@import "~@webiny/lexical-theme/theme.css";
diff --git a/packages/app-website/tsconfig.build.json b/packages/app-website/tsconfig.build.json
index 64363676bf8..05fbee7c027 100644
--- a/packages/app-website/tsconfig.build.json
+++ b/packages/app-website/tsconfig.build.json
@@ -6,6 +6,7 @@
     { "path": "../app-page-builder/tsconfig.build.json" },
     { "path": "../app-page-builder-elements/tsconfig.build.json" },
     { "path": "../app-theme/tsconfig.build.json" },
+    { "path": "../lexical-theme/tsconfig.build.json" },
     { "path": "../plugins/tsconfig.build.json" },
     { "path": "../react-router/tsconfig.build.json" }
   ],
diff --git a/packages/app-website/tsconfig.json b/packages/app-website/tsconfig.json
index 345217cbf85..d9c74336f3f 100644
--- a/packages/app-website/tsconfig.json
+++ b/packages/app-website/tsconfig.json
@@ -6,6 +6,7 @@
     { "path": "../app-page-builder" },
     { "path": "../app-page-builder-elements" },
     { "path": "../app-theme" },
+    { "path": "../lexical-theme" },
     { "path": "../plugins" },
     { "path": "../react-router" }
   ],
@@ -24,6 +25,8 @@
       "@webiny/app-page-builder-elements": ["../app-page-builder-elements/src"],
       "@webiny/app-theme/*": ["../app-theme/src/*"],
       "@webiny/app-theme": ["../app-theme/src"],
+      "@webiny/lexical-theme/*": ["../lexical-theme/src/*"],
+      "@webiny/lexical-theme": ["../lexical-theme/src"],
       "@webiny/plugins/*": ["../plugins/src/*"],
       "@webiny/plugins": ["../plugins/src"],
       "@webiny/react-router/*": ["../react-router/src/*"],
diff --git a/packages/app/package.json b/packages/app/package.json
index 53b4cdd4034..25f434d668d 100644
--- a/packages/app/package.json
+++ b/packages/app/package.json
@@ -21,6 +21,7 @@
     "@webiny/i18n-react": "0.0.0",
     "@webiny/plugins": "0.0.0",
     "@webiny/react-composition": "0.0.0",
+    "@webiny/react-properties": "0.0.0",
     "@webiny/react-router": "0.0.0",
     "@webiny/ui": "0.0.0",
     "apollo-cache": "^1.3.5",
diff --git a/packages/app/src/App.tsx b/packages/app/src/App.tsx
index c4f4f5d5ca5..e49b3f4ff6f 100644
--- a/packages/app/src/App.tsx
+++ b/packages/app/src/App.tsx
@@ -1,38 +1,26 @@
-import React, {
-    createContext,
-    useContext,
-    useMemo,
-    useState,
-    useCallback,
-    FunctionComponentElement,
-    ReactElement
-} from "react";
+import React, { createContext, useContext, useMemo, useState, useCallback } from "react";
 import { BrowserRouter, RouteProps, Route } from "@webiny/react-router";
 import {
     CompositionProvider,
     GenericComponent,
     compose,
     Decorator,
-    HigherOrderComponent,
     DecoratorsCollection
 } from "@webiny/react-composition";
 import { Routes as SortRoutes } from "./core/Routes";
 import { DebounceRender } from "./core/DebounceRender";
 import { PluginsProvider } from "./core/Plugins";
-
-type RoutesByPath = {
-    [key: string]: ReactElement<RouteProps>;
-};
+import { RouterWithConfig, useRouterConfig } from "./config/RouterConfig";
+import { AppContainer } from "./AppContainer";
 
 interface State {
-    routes: RoutesByPath;
     plugins: JSX.Element[];
     providers: Decorator<GenericComponent<ProviderProps>>[];
 }
 
 interface AppContext extends State {
-    addRoute(route: JSX.Element): void;
     addProvider(hoc: Decorator<GenericComponent<ProviderProps>>): void;
+
     addPlugin(plugin: React.ReactNode): void;
 }
 
@@ -64,31 +52,18 @@ interface ProviderProps {
 
 type ComponentWithChildren = React.ComponentType<{ children?: React.ReactNode }>;
 
-export const App = ({
+export const AppBase = ({
     debounceRender = 50,
     routes = [],
     providers = [],
-    decorators = [],
     children
 }: AppProps) => {
     const [state, setState] = useState<State>({
-        routes: routes.reduce<RoutesByPath>((acc, item) => {
-            return { ...acc, [item.path as string]: <Route {...item} /> };
-        }, {}),
         plugins: [],
         providers
     });
 
-    const addRoute = useCallback((route: FunctionComponentElement<RouteProps>) => {
-        setState(state => {
-            return {
-                ...state,
-                routes: { ...state.routes, [route.props.path as string]: route }
-            };
-        });
-    }, []);
-
-    const addProvider = useCallback((component: HigherOrderComponent<any, any>) => {
+    const addProvider = useCallback((component: Decorator<any>) => {
         setState(state => {
             if (state.providers.findIndex(m => m === component) > -1) {
                 return state;
@@ -113,7 +88,6 @@ export const App = ({
     const appContext = useMemo(
         () => ({
             ...state,
-            addRoute,
             addProvider,
             addPlugin
         }),
@@ -122,10 +96,14 @@ export const App = ({
 
     const AppRouter = useMemo(() => {
         return function AppRouter() {
-            const routes = Object.values(state.routes);
-            return <SortRoutes key={routes.length} routes={routes} />;
+            const routerConfig = useRouterConfig();
+            const combinedRoutes = [...routes, ...routerConfig.routes].map(r => {
+                return <Route path={r.path} element={r.element} key={r.path} />;
+            });
+
+            return <SortRoutes key={routes.length} routes={combinedRoutes} />;
         };
-    }, [state.routes]);
+    }, [routes]);
 
     const Providers = useMemo(() => {
         return compose(...(state.providers || []))(({ children }: ProviderProps) => {
@@ -137,19 +115,27 @@ export const App = ({
 
     return (
         <AppContext.Provider value={appContext}>
-            <CompositionProvider decorators={decorators}>
-                {children}
+            {children}
+            <AppContainer>
                 <BrowserRouter>
                     <Providers>
                         <PluginsProvider>{state.plugins}</PluginsProvider>
                         <DebounceRender wait={debounceRender}>
-                            <AppRouter />
+                            <RouterWithConfig>
+                                <AppRouter />
+                            </RouterWithConfig>
                         </DebounceRender>
                     </Providers>
                 </BrowserRouter>
-            </CompositionProvider>
+            </AppContainer>
         </AppContext.Provider>
     );
 };
 
-App.displayName = "App";
+export const App = ({ decorators, ...props }: AppProps) => {
+    return (
+        <CompositionProvider decorators={decorators}>
+            <AppBase decorators={decorators} {...props} />
+        </CompositionProvider>
+    );
+};
diff --git a/packages/app/src/AppContainer.tsx b/packages/app/src/AppContainer.tsx
new file mode 100644
index 00000000000..0b1201c1cc2
--- /dev/null
+++ b/packages/app/src/AppContainer.tsx
@@ -0,0 +1,10 @@
+import React from "react";
+import { makeDecoratable } from "@webiny/react-composition";
+
+export interface AppContentProps {
+    children: React.ReactNode;
+}
+
+export const AppContainer = makeDecoratable("AppContainer", ({ children }: AppContentProps) => {
+    return <>{children}</>;
+});
diff --git a/packages/app/src/config/RouterConfig.tsx b/packages/app/src/config/RouterConfig.tsx
new file mode 100644
index 00000000000..41676330c31
--- /dev/null
+++ b/packages/app/src/config/RouterConfig.tsx
@@ -0,0 +1,25 @@
+import { createConfigurableComponent } from "@webiny/react-properties";
+import { Route, type RouteConfig } from "./RouterConfig/Route";
+
+const base = createConfigurableComponent<RouterConfig>("RouterConfig");
+
+export const RouterWithConfig = Object.assign(base.WithConfig, {
+    displayName: "RouterWithConfig"
+});
+
+interface RouterConfig {
+    routes: RouteConfig[];
+}
+
+export const useRouterConfig = () => {
+    const baseConfig = base.useConfig();
+
+    return {
+        routes: baseConfig.routes ?? []
+    };
+};
+
+export const RouterConfig = Object.assign(base.Config, {
+    Route,
+    useRouterConfig
+});
diff --git a/packages/app/src/config/RouterConfig/Route.tsx b/packages/app/src/config/RouterConfig/Route.tsx
new file mode 100644
index 00000000000..878a8436be4
--- /dev/null
+++ b/packages/app/src/config/RouterConfig/Route.tsx
@@ -0,0 +1,41 @@
+import React from "react";
+import { makeDecoratable } from "@webiny/react-composition";
+import { Property, useIdGenerator } from "@webiny/react-properties";
+
+export interface RouteProps {
+    name: string;
+    path: string;
+    exact?: boolean;
+    element: React.ReactElement;
+    remove?: boolean;
+    before?: string;
+    after?: string;
+}
+
+export type RouteConfig = Pick<RouteProps, "name" | "path" | "element">;
+
+export const Route = makeDecoratable(
+    "Route",
+    ({ name, path, element, exact, remove, before, after }: RouteProps) => {
+        const getId = useIdGenerator("Route");
+
+        const placeAfter = after !== undefined ? getId(after) : undefined;
+        const placeBefore = before !== undefined ? getId(before) : undefined;
+
+        return (
+            <Property
+                id={getId(name)}
+                name={"routes"}
+                remove={remove}
+                array={true}
+                before={placeBefore}
+                after={placeAfter}
+            >
+                <Property id={getId(name, "name")} name={"name"} value={name} />
+                <Property id={getId(name, "path")} name={"path"} value={path} />
+                <Property id={getId(name, "exact")} name={"exact"} value={exact} />
+                <Property id={getId(name, "element")} name={"element"} value={element} />
+            </Property>
+        );
+    }
+);
diff --git a/packages/app/src/core/AddRoute.tsx b/packages/app/src/core/AddRoute.tsx
deleted file mode 100644
index 7eefa9c5f78..00000000000
--- a/packages/app/src/core/AddRoute.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React, { useEffect } from "react";
-import { Route, RouteProps } from "@webiny/react-router";
-import { useApp } from "~/App";
-import { makeDecoratable } from "@webiny/react-composition";
-
-export const AddRoute = makeDecoratable("AddRoute", (props: RouteProps) => {
-    const { addRoute } = useApp();
-
-    useEffect(() => {
-        addRoute(<Route {...props} />);
-    }, []);
-
-    return null;
-});
diff --git a/packages/app/src/hooks/useUi.ts b/packages/app/src/hooks/useUi.ts
index 414d9a9f442..fea08197bf1 100644
--- a/packages/app/src/hooks/useUi.ts
+++ b/packages/app/src/hooks/useUi.ts
@@ -1,5 +1,5 @@
 import { useContext } from "react";
-import { UiContext, UiContextValue } from "./../contexts/Ui";
+import { UiContext, UiContextValue } from "~/contexts/Ui";
 
 export const useUi = () => {
     return useContext(UiContext) as UiContextValue;
diff --git a/packages/app/src/index.ts b/packages/app/src/index.ts
index ab60cc97a3c..9d784ab5edb 100644
--- a/packages/app/src/index.ts
+++ b/packages/app/src/index.ts
@@ -9,11 +9,11 @@ export type { HigherOrderComponent, ComposeProps, ComposableFC } from "@webiny/r
 
 // App framework
 export * from "./App";
+export * from "./AppContainer";
 export type { AppProps } from "./App";
 export * from "./core/Plugins";
 export * from "./core/Plugin";
 export * from "./core/Provider";
-export * from "./core/AddRoute";
 export * from "./core/DebounceRender";
 export * from "./core/createProvider";
 export * from "./core/createProviderPlugin";
diff --git a/packages/app/tsconfig.build.json b/packages/app/tsconfig.build.json
index e6a3b45386a..b8a963adfb3 100644
--- a/packages/app/tsconfig.build.json
+++ b/packages/app/tsconfig.build.json
@@ -6,6 +6,7 @@
     { "path": "../i18n-react/tsconfig.build.json" },
     { "path": "../plugins/tsconfig.build.json" },
     { "path": "../react-composition/tsconfig.build.json" },
+    { "path": "../react-properties/tsconfig.build.json" },
     { "path": "../react-router/tsconfig.build.json" },
     { "path": "../ui/tsconfig.build.json" }
   ],
diff --git a/packages/app/tsconfig.json b/packages/app/tsconfig.json
index e55e0f5acef..f2fc28c8214 100644
--- a/packages/app/tsconfig.json
+++ b/packages/app/tsconfig.json
@@ -6,6 +6,7 @@
     { "path": "../i18n-react" },
     { "path": "../plugins" },
     { "path": "../react-composition" },
+    { "path": "../react-properties" },
     { "path": "../react-router" },
     { "path": "../ui" }
   ],
@@ -24,6 +25,8 @@
       "@webiny/plugins": ["../plugins/src"],
       "@webiny/react-composition/*": ["../react-composition/src/*"],
       "@webiny/react-composition": ["../react-composition/src"],
+      "@webiny/react-properties/*": ["../react-properties/src/*"],
+      "@webiny/react-properties": ["../react-properties/src"],
       "@webiny/react-router/*": ["../react-router/src/*"],
       "@webiny/react-router": ["../react-router/src"],
       "@webiny/ui/*": ["../ui/src/*"],
diff --git a/packages/aws-helpers/package.json b/packages/aws-helpers/package.json
index 6654efc5818..06f250d709e 100644
--- a/packages/aws-helpers/package.json
+++ b/packages/aws-helpers/package.json
@@ -31,6 +31,10 @@
     "cheerio": "^1.0.0-rc.10",
     "srcset": "^4.0.0"
   },
+  "scripts": {
+    "build": "node ../cli/bin.js run build",
+    "watch": "node ../cli/bin.js run watch"
+  },
   "devDependencies": {
     "@webiny/project-utils": "0.0.0"
   },
diff --git a/packages/cli-plugin-dependencies/package.json b/packages/cli-plugin-dependencies/package.json
index 874be2cab90..6d3ad1f98ad 100644
--- a/packages/cli-plugin-dependencies/package.json
+++ b/packages/cli-plugin-dependencies/package.json
@@ -14,7 +14,7 @@
   ],
   "description": "A tool to generate and verify dependency sync files for Webiny.",
   "dependencies": {
-    "@babel/runtime": "7.26.7",
+    "@babel/runtime": "7.26.10",
     "@webiny/cli": "0.0.0",
     "chalk": "^4.1.2",
     "get-yarn-workspaces": "^1.0.2",
diff --git a/packages/cli-plugin-deploy-pulumi/src/commands/deploy/executeRefresh.ts b/packages/cli-plugin-deploy-pulumi/src/commands/deploy/executeRefresh.ts
index 30a74a03b1e..4393e57b365 100644
--- a/packages/cli-plugin-deploy-pulumi/src/commands/deploy/executeRefresh.ts
+++ b/packages/cli-plugin-deploy-pulumi/src/commands/deploy/executeRefresh.ts
@@ -2,7 +2,7 @@ import { Context, IPulumi, IUserCommandInput } from "~/types";
 import { measureDuration } from "~/utils";
 import ora from "ora";
 import { isCI } from "ci-info";
-import { getMustRefreshBeforeDeploy } from "~/utils";
+import { getMustRefreshBeforeDeploy, unsetMustRefreshBeforeDeploy } from "~/utils";
 import {
     createEnvConfiguration,
     withEnv,
@@ -57,6 +57,8 @@ export const executeRefresh = async ({ inputs, context, pulumi }: IExecuteRefres
             await subprocess;
         }
 
+        unsetMustRefreshBeforeDeploy(context);
+
         const message = `Pulumi state refreshed in ${getDeploymentDuration()}.`;
 
         if (showDeploymentLogs) {
diff --git a/packages/cli-plugin-deploy-pulumi/src/commands/index.ts b/packages/cli-plugin-deploy-pulumi/src/commands/index.ts
index 35e94573857..8e35bccd990 100644
--- a/packages/cli-plugin-deploy-pulumi/src/commands/index.ts
+++ b/packages/cli-plugin-deploy-pulumi/src/commands/index.ts
@@ -488,6 +488,44 @@ export const commands: CliCommandPlugin[] = [
                 }
             );
 
+            yargs.command(
+                "refresh <folder>",
+                `Refreshes Pulumi state for given project application and environment`,
+                yargs => {
+                    yargs.example("$0 refresh api --env=dev --json", "");
+                    yargs.positional("folder", {
+                        describe: `Project application folder`,
+                        type: "string"
+                    });
+                    yargs
+                        .option("region", {
+                            describe: `Region to target`,
+                            type: "string",
+                            required: false
+                        })
+                        .check(validateRegion);
+                    yargs.option("env", {
+                        required: true,
+                        describe: `Environment`,
+                        type: "string"
+                    });
+                    yargs.option("variant", {
+                        describe: `Variant`,
+                        type: "string",
+                        required: false
+                    });
+                    yargs.option("debug", {
+                        default: false,
+                        describe: `Turn on debug logs`,
+                        type: "boolean"
+                    });
+                },
+                async argv => {
+                    const { refreshCommand } = require("./refresh");
+                    return refreshCommand(argv, context);
+                }
+            );
+
             yargs.command(
                 "pulumi <folder>",
                 `Runs a Pulumi command in the provided project application folder. Note: make sure to use "--" before the actual Pulumi command.`,
@@ -531,7 +569,7 @@ export const commands: CliCommandPlugin[] = [
 
             yargs.command(
                 "execute-migrations [pattern]",
-                `Execute data migrations Lambda. If pattern is provided, only the matching migrations will be executed.`,
+                `Execute data migrations Lambda. If pattern is provided, only the matching migrations will be executed`,
                 () => {
                     yargs.example("$0 execute-migrations --env dev", "");
                     yargs.example("$0 execute-migrations 5.35.0-001 --env dev", "");
diff --git a/packages/cli-plugin-deploy-pulumi/src/commands/newWatch/listPackages.ts b/packages/cli-plugin-deploy-pulumi/src/commands/newWatch/listPackages.ts
index bbb9654fd59..79a7e48b811 100644
--- a/packages/cli-plugin-deploy-pulumi/src/commands/newWatch/listPackages.ts
+++ b/packages/cli-plugin-deploy-pulumi/src/commands/newWatch/listPackages.ts
@@ -22,6 +22,9 @@ export const listPackages = async ({ inputs }: IListPackagesParams) => {
     if (inputs.package) {
         packagesList = Array.isArray(inputs.package) ? [...inputs.package] : [inputs.package];
 
+        // Also split by commas.
+        packagesList = packagesList.map(item => item.split(",")).flat();
+
         // When providing packages manually, we also allow providing names of Webiny packages
         // without the `@webiny` scope. In that case, we need to add the scope to the package name.
         const webinyPrefixedPackagesToAdd = [];
diff --git a/packages/cli-plugin-deploy-pulumi/src/commands/primaryVariant/executeSetPrimaryVariantCommand.ts b/packages/cli-plugin-deploy-pulumi/src/commands/primaryVariant/executeSetPrimaryVariantCommand.ts
index 4e6c7318371..202e03bbb1c 100644
--- a/packages/cli-plugin-deploy-pulumi/src/commands/primaryVariant/executeSetPrimaryVariantCommand.ts
+++ b/packages/cli-plugin-deploy-pulumi/src/commands/primaryVariant/executeSetPrimaryVariantCommand.ts
@@ -42,11 +42,4 @@ export const executeSetPrimaryVariantCommand = async (
     }
 
     await connection.deploy();
-
-    console.log(
-        JSON.stringify({
-            primary,
-            secondary
-        })
-    );
 };
diff --git a/packages/cli-plugin-deploy-pulumi/src/commands/refresh.ts b/packages/cli-plugin-deploy-pulumi/src/commands/refresh.ts
new file mode 100644
index 00000000000..dafe4eebb0b
--- /dev/null
+++ b/packages/cli-plugin-deploy-pulumi/src/commands/refresh.ts
@@ -0,0 +1,10 @@
+import { createPulumiCommand } from "~/utils";
+import { pulumiRunCommand } from "./pulumiRun";
+
+export const refreshCommand = createPulumiCommand({
+    name: "refresh",
+    createProjectApplicationWorkspace: false,
+    command: async ({ inputs, context }) => {
+        return pulumiRunCommand({ ...inputs, _: ["", "refresh", "--yes"] }, context);
+    }
+});
diff --git a/packages/cli-plugin-deploy-pulumi/src/commands/watch.ts b/packages/cli-plugin-deploy-pulumi/src/commands/watch.ts
index 1903709d537..a99879e2d71 100644
--- a/packages/cli-plugin-deploy-pulumi/src/commands/watch.ts
+++ b/packages/cli-plugin-deploy-pulumi/src/commands/watch.ts
@@ -37,6 +37,15 @@ const PULUMI_WATCH_SUPPORTED = os.platform() !== "win32";
 // Note: we are not using `createPulumiCommand` here because this command has a bit specific
 // behaviour which is not encapsulated by `createPulumiCommand`. Maybe we can improve in the future.
 export const watchCommand = async (inputs: IUserCommandInput, context: Context) => {
+    context.info(
+        `With the %s release, we've introduced %s — a major update to the %s command and the overall backend development experience. This feature is currently in beta, but if you're interested in trying it out or learning more, check out the docs: https://webiny.link/local-aws-lambda-development`,
+        "5.41.0",
+        "local AWS Lambda development",
+        "webiny watch"
+    );
+
+    console.log();
+
     // 1. Initial checks for deploy and build commands.
     if (!inputs.folder && !inputs.package) {
         throw new Error(
diff --git a/packages/cli-plugin-deploy-pulumi/src/utils/getStackOutput.ts b/packages/cli-plugin-deploy-pulumi/src/utils/getStackOutput.ts
index 4d319342bea..3cd9deb2c58 100644
--- a/packages/cli-plugin-deploy-pulumi/src/utils/getStackOutput.ts
+++ b/packages/cli-plugin-deploy-pulumi/src/utils/getStackOutput.ts
@@ -9,14 +9,18 @@ export interface IGetOutputJsonParams {
     env: string;
     cwd?: string | undefined;
     variant: string | undefined;
+    skipCache?: boolean;
 }
 
-const getOutputJson = ({ folder, env, cwd, variant }: IGetOutputJsonParams) => {
+const getOutputJson = (params: IGetOutputJsonParams) => {
+    const { folder, env, cwd, variant } = params;
     const project = getProject();
 
     const cacheKey = [folder, env, variant].filter(Boolean).join("_");
 
-    if (cache[cacheKey]) {
+    const skipCache = params.skipCache === true;
+
+    if (cache[cacheKey] && !skipCache) {
         return structuredClone(cache[cacheKey]);
     }
 
@@ -57,6 +61,7 @@ export interface IGetStackOutputParams {
     variant: string | undefined;
     cwd?: string;
     map?: Record<string, any>;
+    skipCache?: boolean;
 }
 
 export interface IStackOutput {
@@ -141,7 +146,8 @@ export const getStackOutput = <T extends IStackOutput = IDefaultStackOutput>(
         folder: args.folder,
         env: args.env,
         variant: args.variant,
-        cwd: args.cwd
+        cwd: args.cwd,
+        skipCache: args.skipCache
     });
     if (!output) {
         return output;
diff --git a/packages/cli-plugin-deploy-pulumi/src/utils/notify.ts b/packages/cli-plugin-deploy-pulumi/src/utils/notify.ts
index f49387b9d06..5fae1c00ec8 100644
--- a/packages/cli-plugin-deploy-pulumi/src/utils/notify.ts
+++ b/packages/cli-plugin-deploy-pulumi/src/utils/notify.ts
@@ -17,5 +17,8 @@ export const notify = ({ message, timeout }: INotifyParams) => {
         });
 
         setTimeout(resolve, 100);
+    }).catch(() => {
+        // Suppress any unexpected promise rejections to ensure smooth user experience.
+        // Notification errors are non-critical and can be safely ignored.
     });
 };
diff --git a/packages/cli-plugin-deploy-pulumi/src/utils/refreshBeforeDeploy.ts b/packages/cli-plugin-deploy-pulumi/src/utils/refreshBeforeDeploy.ts
index 759d819468e..a8df6d9b620 100644
--- a/packages/cli-plugin-deploy-pulumi/src/utils/refreshBeforeDeploy.ts
+++ b/packages/cli-plugin-deploy-pulumi/src/utils/refreshBeforeDeploy.ts
@@ -1,9 +1,15 @@
 import { type CliContext } from "@webiny/cli/types";
 
+const KEY = "must-refresh-before-deploy";
+
 export const setMustRefreshBeforeDeploy = (context: CliContext) => {
-    return context.localStorage.set("watch-command-must-refresh-before-deploy", true);
+    return context.localStorage.set(KEY, true);
+};
+
+export const unsetMustRefreshBeforeDeploy = (context: CliContext) => {
+    return context.localStorage.set(KEY, false);
 };
 
 export const getMustRefreshBeforeDeploy = (context: CliContext) => {
-    return context.localStorage.get("watch-command-must-refresh-before-deploy");
+    return context.localStorage.get(KEY);
 };
diff --git a/packages/cli-plugin-deploy-pulumi/src/utils/stacks/getApplicationsStacks.ts b/packages/cli-plugin-deploy-pulumi/src/utils/stacks/getApplicationsStacks.ts
index 632cbde7a1c..46ad6d132a1 100644
--- a/packages/cli-plugin-deploy-pulumi/src/utils/stacks/getApplicationsStacks.ts
+++ b/packages/cli-plugin-deploy-pulumi/src/utils/stacks/getApplicationsStacks.ts
@@ -52,11 +52,6 @@ export const getApplicationsStacks = (params: IGetStacksParams): IApplicationSta
                 const { env, variant } = splitStackName(part);
 
                 if (variants && variant && !variants.includes(variant)) {
-                    console.log({
-                        env,
-                        variants,
-                        variant
-                    });
                     return null;
                 }
 
diff --git a/packages/cli-plugin-extensions/package.json b/packages/cli-plugin-extensions/package.json
index 8ab2a3cbce7..cb963fa2c28 100644
--- a/packages/cli-plugin-extensions/package.json
+++ b/packages/cli-plugin-extensions/package.json
@@ -13,7 +13,7 @@
   ],
   "description": "A tool to bootstrap a Webiny project.",
   "dependencies": {
-    "@babel/runtime": "7.26.7",
+    "@babel/runtime": "7.26.10",
     "@webiny/aws-sdk": "0.0.0",
     "@webiny/cli": "0.0.0",
     "@webiny/cli-plugin-scaffold": "0.0.0",
diff --git a/packages/cli-plugin-extensions/src/extensions/Extension.ts b/packages/cli-plugin-extensions/src/extensions/Extension.ts
index 76e8fd4dc52..aeedb87da8c 100644
--- a/packages/cli-plugin-extensions/src/extensions/Extension.ts
+++ b/packages/cli-plugin-extensions/src/extensions/Extension.ts
@@ -84,6 +84,8 @@ export class Extension extends AbstractExtension {
             }
         }
 
-        throw new Error(`Could not determine the extension type from the downloaded extension.`);
+        throw new Error(
+            `Could not determine the extension type from the downloaded extension (package name: ${loadedPkgJson.name}). Make sure the package.json file contains the "keywords" field with the "webiny-extension-type:<type>" keyword.`
+        );
     }
 }
diff --git a/packages/cli/bin.js b/packages/cli/bin.js
index e5c5b4db738..03987b19965 100755
--- a/packages/cli/bin.js
+++ b/packages/cli/bin.js
@@ -6,6 +6,9 @@ require("./utils/suppressPunycodeWarnings");
 // Ensure system requirements are met.
 require("@webiny/system-requirements").ensureSystemRequirements();
 
+// Detect different Webiny package versions.
+require("./utils/ensureSameWebinyPackageVersions").ensureSameWebinyPackageVersions();
+
 const yargs = require("yargs");
 
 // Disable help processing until after plugins are imported.
diff --git a/packages/cli/files/duplicates.json b/packages/cli/files/duplicates.json
index f7e59d3dd6d..fe51488c706 100644
--- a/packages/cli/files/duplicates.json
+++ b/packages/cli/files/duplicates.json
@@ -1 +1 @@
-[{"name":"@babel/runtime","versions":[{"version":"7.26.7","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-dependencies/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-extensions/package.json","types":["dependencies"]},{"file":"/packages/project-utils/package.json","types":["dependencies"]}]},{"version":"7.26.0","files":[{"file":"/package.json","types":["resolutions"]}]}]},{"name":"downshift","versions":[{"version":"3.1.2","files":[{"file":"/packages/app-admin/package.json","types":["dependencies"]}]},{"version":"2.1.5","files":[{"file":"/packages/ui/package.json","types":["dependencies"]}]}]},{"name":"typescript","versions":[{"version":"5.3.3","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/api/package.json","types":["devDependencies"]},{"file":"/packages/api-aco/package.json","types":["devDependencies"]},{"file":"/packages/api-admin-settings/package.json","types":["devDependencies"]},{"file":"/packages/api-admin-users/package.json","types":["devDependencies"]},{"file":"/packages/api-admin-users-so-ddb/package.json","types":["devDependencies"]},{"file":"/packages/api-apw/package.json","types":["devDependencies"]},{"file":"/packages/api-apw-scheduler-so-ddb/package.json","types":["devDependencies"]},{"file":"/packages/api-audit-logs/package.json","types":["devDependencies"]},{"file":"/packages/api-authentication/package.json","types":["devDependencies"]},{"file":"/packages/api-authentication-cognito/package.json","types":["devDependencies"]},{"file":"/packages/api-background-tasks-ddb/package.json","types":["devDependencies"]},{"file":"/packages/api-background-tasks-es/package.json","types":["devDependencies"]},{"file":"/packages/api-background-tasks-os/package.json","types":["devDependencies"]},{"file":"/packages/api-cognito-authenticator/package.json","types":["devDependencies"]},{"file":"/packages/api-dynamodb-to-elasticsearch/package.json","types":["devDependencies"]},{"file":"/packages/api-elasticsearch/package.json","types":["devDependencies"]},{"file":"/packages/api-elasticsearch-tasks/package.json","types":["devDependencies"]},{"file":"/packages/api-file-manager/package.json","types":["devDependencies"]},{"file":"/packages/api-file-manager-ddb/package.json","types":["devDependencies"]},{"file":"/packages/api-file-manager-s3/package.json","types":["devDependencies"]},{"file":"/packages/api-form-builder/package.json","types":["devDependencies"]},{"file":"/packages/api-form-builder-so-ddb/package.json","types":["devDependencies"]},{"file":"/packages/api-form-builder-so-ddb-es/package.json","types":["devDependencies"]},{"file":"/packages/api-headless-cms/package.json","types":["devDependencies"]},{"file":"/packages/api-headless-cms-aco/package.json","types":["devDependencies"]},{"file":"/packages/api-headless-cms-bulk-actions/package.json","types":["devDependencies"]},{"file":"/packages/api-headless-cms-ddb/package.json","types":["devDependencies"]},{"file":"/packages/api-headless-cms-ddb-es/package.json","types":["devDependencies"]},{"file":"/packages/api-headless-cms-es-tasks/package.json","types":["devDependencies"]},{"file":"/packages/api-headless-cms-import-export/package.json","types":["devDependencies"]},{"file":"/packages/api-headless-cms-tasks/package.json","types":["devDependencies"]},{"file":"/packages/api-headless-cms-tasks-ddb-es/package.json","types":["devDependencies"]},{"file":"/packages/api-i18n/package.json","types":["devDependencies"]},{"file":"/packages/api-i18n-content/package.json","types":["devDependencies"]},{"file":"/packages/api-i18n-ddb/package.json","types":["devDependencies"]},{"file":"/packages/api-log/package.json","types":["devDependencies"]},{"file":"/packages/api-mailer/package.json","types":["devDependencies"]},{"file":"/packages/api-page-builder/package.json","types":["devDependencies"]},{"file":"/packages/api-page-builder-aco/package.json","types":["devDependencies"]},{"file":"/packages/api-page-builder-import-export/package.json","types":["devDependencies"]},{"file":"/packages/api-page-builder-import-export-so-ddb/package.json","types":["devDependencies"]},{"file":"/packages/api-page-builder-so-ddb/package.json","types":["devDependencies"]},{"file":"/packages/api-page-builder-so-ddb-es/package.json","types":["devDependencies"]},{"file":"/packages/api-prerendering-service/package.json","types":["devDependencies"]},{"file":"/packages/api-prerendering-service-aws/package.json","types":["devDependencies"]},{"file":"/packages/api-prerendering-service-so-ddb/package.json","types":["devDependencies"]},{"file":"/packages/api-record-locking/package.json","types":["devDependencies"]},{"file":"/packages/api-security/package.json","types":["devDependencies"]},{"file":"/packages/api-security-auth0/package.json","types":["devDependencies"]},{"file":"/packages/api-security-cognito/package.json","types":["devDependencies"]},{"file":"/packages/api-security-okta/package.json","types":["devDependencies"]},{"file":"/packages/api-security-so-ddb/package.json","types":["devDependencies"]},{"file":"/packages/api-serverless-cms/package.json","types":["devDependencies"]},{"file":"/packages/api-tenancy/package.json","types":["devDependencies"]},{"file":"/packages/api-tenancy-so-ddb/package.json","types":["devDependencies"]},{"file":"/packages/api-tenant-manager/package.json","types":["devDependencies"]},{"file":"/packages/api-theme-manager/package.json","types":["devDependencies"]},{"file":"/packages/api-wcp/package.json","types":["devDependencies"]},{"file":"/packages/api-websockets/package.json","types":["devDependencies"]},{"file":"/packages/app/package.json","types":["devDependencies"]},{"file":"/packages/app-aco/package.json","types":["devDependencies"]},{"file":"/packages/app-admin/package.json","types":["devDependencies"]},{"file":"/packages/app-admin-auth0/package.json","types":["devDependencies"]},{"file":"/packages/app-admin-cognito/package.json","types":["devDependencies"]},{"file":"/packages/app-admin-okta/package.json","types":["devDependencies"]},{"file":"/packages/app-admin-rmwc/package.json","types":["devDependencies"]},{"file":"/packages/app-admin-users-cognito/package.json","types":["devDependencies"]},{"file":"/packages/app-apw/package.json","types":["devDependencies"]},{"file":"/packages/app-audit-logs/package.json","types":["devDependencies"]},{"file":"/packages/app-cognito-authenticator/package.json","types":["devDependencies"]},{"file":"/packages/app-dynamic-pages/package.json","types":["devDependencies"]},{"file":"/packages/app-file-manager/package.json","types":["devDependencies"]},{"file":"/packages/app-file-manager-s3/package.json","types":["devDependencies"]},{"file":"/packages/app-form-builder/package.json","types":["devDependencies"]},{"file":"/packages/app-graphql-playground/package.json","types":["devDependencies"]},{"file":"/packages/app-headless-cms/package.json","types":["devDependencies"]},{"file":"/packages/app-headless-cms-common/package.json","types":["devDependencies"]},{"file":"/packages/app-i18n/package.json","types":["devDependencies"]},{"file":"/packages/app-i18n-content/package.json","types":["devDependencies"]},{"file":"/packages/app-mailer/package.json","types":["devDependencies"]},{"file":"/packages/app-page-builder/package.json","types":["devDependencies"]},{"file":"/packages/app-page-builder-elements/package.json","types":["devDependencies"]},{"file":"/packages/app-plugin-admin-welcome-screen/package.json","types":["devDependencies"]},{"file":"/packages/app-record-locking/package.json","types":["devDependencies"]},{"file":"/packages/app-security/package.json","types":["devDependencies"]},{"file":"/packages/app-security-access-management/package.json","types":["devDependencies"]},{"file":"/packages/app-serverless-cms/package.json","types":["devDependencies"]},{"file":"/packages/app-tenancy/package.json","types":["devDependencies"]},{"file":"/packages/app-tenant-manager/package.json","types":["devDependencies"]},{"file":"/packages/app-theme/package.json","types":["devDependencies"]},{"file":"/packages/app-theme-manager/package.json","types":["devDependencies"]},{"file":"/packages/app-trash-bin/package.json","types":["devDependencies"]},{"file":"/packages/app-utils/package.json","types":["devDependencies"]},{"file":"/packages/app-wcp/package.json","types":["devDependencies"]},{"file":"/packages/app-website/package.json","types":["devDependencies"]},{"file":"/packages/app-websockets/package.json","types":["devDependencies"]},{"file":"/packages/aws-sdk/package.json","types":["devDependencies"]},{"file":"/packages/cli/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-dependencies/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-deploy-pulumi/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-extensions/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-scaffold/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-scaffold-admin-app-module/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-scaffold-ci/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-scaffold-extensions/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-scaffold-graphql-service/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-scaffold-react-component/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-scaffold-react-component/template/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-scaffold-workspaces/package.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-es/dependencies.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-os/dependencies.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb/dependencies.json","types":["devDependencies"]},{"file":"/packages/data-migration/package.json","types":["devDependencies"]},{"file":"/packages/db/package.json","types":["devDependencies"]},{"file":"/packages/db-dynamodb/package.json","types":["devDependencies"]},{"file":"/packages/di-container/package.json","types":["devDependencies"]},{"file":"/packages/error/package.json","types":["devDependencies"]},{"file":"/packages/feature-flags/package.json","types":["devDependencies"]},{"file":"/packages/form/package.json","types":["devDependencies"]},{"file":"/packages/handler/package.json","types":["devDependencies"]},{"file":"/packages/handler-aws/package.json","types":["devDependencies"]},{"file":"/packages/handler-client/package.json","types":["devDependencies"]},{"file":"/packages/handler-db/package.json","types":["devDependencies"]},{"file":"/packages/handler-graphql/package.json","types":["devDependencies"]},{"file":"/packages/i18n/package.json","types":["devDependencies"]},{"file":"/packages/i18n-react/package.json","types":["devDependencies"]},{"file":"/packages/ioc/package.json","types":["devDependencies"]},{"file":"/packages/logger/package.json","types":["devDependencies"]},{"file":"/packages/migrations/package.json","types":["devDependencies"]},{"file":"/packages/plugins/package.json","types":["devDependencies"]},{"file":"/packages/project-utils/package.json","types":["dependencies"]},{"file":"/packages/pubsub/package.json","types":["devDependencies"]},{"file":"/packages/pulumi/package.json","types":["devDependencies"]},{"file":"/packages/pulumi-aws/package.json","types":["devDependencies"]},{"file":"/packages/pulumi-sdk/package.json","types":["devDependencies"]},{"file":"/packages/react-composition/package.json","types":["devDependencies"]},{"file":"/packages/react-rich-text-renderer/package.json","types":["devDependencies"]},{"file":"/packages/react-router/package.json","types":["devDependencies"]},{"file":"/packages/serverless-cms-aws/package.json","types":["devDependencies"]},{"file":"/packages/tasks/package.json","types":["devDependencies"]},{"file":"/packages/theme/package.json","types":["devDependencies"]},{"file":"/packages/ui/package.json","types":["devDependencies"]},{"file":"/packages/ui-composer/package.json","types":["devDependencies"]},{"file":"/packages/utils/package.json","types":["devDependencies"]},{"file":"/packages/validation/package.json","types":["devDependencies"]},{"file":"/packages/wcp/package.json","types":["devDependencies"]},{"file":"/cypress-tests/package.json","types":["devDependencies"]}]},{"version":"4.9.5","files":[{"file":"/packages/api-file-manager-aco/package.json","types":["devDependencies"]}]}]}]
+[]
diff --git a/packages/cli/files/references.json b/packages/cli/files/references.json
index bd6c8e415b0..e061d21fd02 100644
--- a/packages/cli/files/references.json
+++ b/packages/cli/files/references.json
@@ -1 +1 @@
-{"dependencies":[{"name":"@apollo/react-common","version":"3.1.4","files":["/packages/app-file-manager/package.json","/packages/app-form-builder/package.json","/packages/app-headless-cms/package.json","/packages/app-page-builder/package.json"]},{"name":"@apollo/react-components","version":"3.1.5","files":["/packages/app-admin/package.json","/packages/app-file-manager/package.json","/packages/app-mailer/package.json","/packages/app-page-builder/package.json"]},{"name":"@apollo/react-hooks","version":"3.1.5","files":["/packages/app/package.json","/packages/app-aco/package.json","/packages/app-admin/package.json","/packages/app-admin-auth0/package.json","/packages/app-admin-cognito/package.json","/packages/app-admin-okta/package.json","/packages/app-admin-users-cognito/package.json","/packages/app-apw/package.json","/packages/app-audit-logs/package.json","/packages/app-file-manager/package.json","/packages/app-form-builder/package.json","/packages/app-headless-cms/package.json","/packages/app-i18n/package.json","/packages/app-page-builder/package.json","/packages/app-record-locking/package.json","/packages/app-security-access-management/package.json","/packages/app-tenancy/package.json","/packages/app-tenant-manager/package.json","/packages/app-theme-manager/package.json","/packages/app-wcp/package.json","/packages/app-website/package.json","/packages/cwp-template-aws/template/common/extensions/theme/package.json","/extensions/theme/package.json"]},{"name":"@auth0/auth0-react","version":"2.2.4","files":["/packages/app-admin-auth0/package.json"]},{"name":"@aws-amplify/auth","version":"5.6.15","files":["/packages/app-admin-cognito/package.json","/packages/app-cognito-authenticator/package.json"]},{"name":"@aws-sdk/client-apigatewaymanagementapi","version":"3.734.0","files":["/packages/aws-sdk/package.json"]},{"name":"@aws-sdk/client-cloudfront","version":"3.734.0","files":["/packages/aws-sdk/package.json"]},{"name":"@aws-sdk/client-cloudwatch-events","version":"3.734.0","files":["/packages/aws-sdk/package.json"]},{"name":"@aws-sdk/client-cloudwatch-logs","version":"3.734.0","files":["/packages/aws-sdk/package.json"]},{"name":"@aws-sdk/client-cognito-identity-provider","version":"3.734.0","files":["/packages/aws-sdk/package.json"]},{"name":"@aws-sdk/client-dynamodb","version":"3.734.0","files":["/packages/aws-sdk/package.json"]},{"name":"@aws-sdk/client-dynamodb-streams","version":"3.734.0","files":["/packages/aws-sdk/package.json"]},{"name":"@aws-sdk/client-eventbridge","version":"3.734.0","files":["/packages/aws-sdk/package.json"]},{"name":"@aws-sdk/client-iam","version":"3.734.0","files":["/packages/aws-sdk/package.json"]},{"name":"@aws-sdk/client-iot","version":"3.734.0","files":["/packages/aws-sdk/package.json"]},{"name":"@aws-sdk/client-lambda","version":"3.734.0","files":["/packages/aws-sdk/package.json"]},{"name":"@aws-sdk/client-s3","version":"3.735.0","files":["/packages/aws-sdk/package.json"]},{"name":"@aws-sdk/client-sfn","version":"3.734.0","files":["/packages/aws-sdk/package.json"]},{"name":"@aws-sdk/client-sqs","version":"3.734.0","files":["/packages/aws-sdk/package.json"]},{"name":"@aws-sdk/client-sts","version":"3.734.0","files":["/packages/aws-sdk/package.json"]},{"name":"@aws-sdk/credential-providers","version":"3.734.0","files":["/packages/aws-sdk/package.json"]},{"name":"@aws-sdk/lib-dynamodb","version":"3.734.0","files":["/packages/aws-sdk/package.json"]},{"name":"@aws-sdk/lib-storage","version":"3.735.0","files":["/packages/aws-sdk/package.json"]},{"name":"@aws-sdk/s3-presigned-post","version":"3.735.0","files":["/packages/aws-sdk/package.json"]},{"name":"@aws-sdk/s3-request-presigner","version":"3.735.0","files":["/packages/aws-sdk/package.json"]},{"name":"@aws-sdk/util-dynamodb","version":"3.734.0","files":["/packages/aws-sdk/package.json"]},{"name":"@babel/cli","version":"7.26.4","files":["/packages/project-utils/package.json"]},{"name":"@babel/code-frame","version":"7.26.2","files":["/packages/api-headless-cms/package.json"]},{"name":"@babel/core","version":"7.26.7","files":["/packages/project-utils/package.json"]},{"name":"@babel/plugin-proposal-class-properties","version":"7.18.6","files":["/packages/project-utils/package.json"]},{"name":"@babel/plugin-proposal-object-rest-spread","version":"7.20.7","files":["/packages/project-utils/package.json"]},{"name":"@babel/plugin-proposal-throw-expressions","version":"7.25.9","files":["/packages/project-utils/package.json"]},{"name":"@babel/plugin-syntax-object-rest-spread","version":"7.8.3","files":["/packages/project-utils/package.json"]},{"name":"@babel/preset-env","version":"7.26.7","files":["/packages/project-utils/package.json"]},{"name":"@babel/preset-react","version":"7.26.3","files":["/packages/project-utils/package.json"]},{"name":"@babel/preset-typescript","version":"7.26.0","files":["/packages/project-utils/package.json"]},{"name":"@babel/runtime","version":"7.26.7","files":["/packages/cli-plugin-dependencies/package.json","/packages/cli-plugin-extensions/package.json","/packages/project-utils/package.json"]},{"name":"@dnd-kit/core","version":"6.1.0","files":["/packages/app-form-builder/package.json"]},{"name":"@dnd-kit/sortable","version":"8.0.0","files":["/packages/app-form-builder/package.json"]},{"name":"@dnd-kit/utilities","version":"3.2.2","files":["/packages/app-form-builder/package.json"]},{"name":"@editorjs/delimiter","version":"1.4.2","files":["/packages/cwp-template-aws/template/common/apps/admin/package.json","/apps/admin/package.json"]},{"name":"@editorjs/editorjs","version":"2.26.5","files":["/packages/app-admin/package.json","/packages/app-form-builder/package.json","/packages/react-rich-text-renderer/package.json","/packages/ui/package.json"]},{"name":"@editorjs/list","version":"1.10.0","files":["/packages/cwp-template-aws/template/common/apps/admin/package.json","/apps/admin/package.json"]},{"name":"@editorjs/quote","version":"2.7.2","files":["/packages/cwp-template-aws/template/common/apps/admin/package.json","/apps/admin/package.json"]},{"name":"@editorjs/underline","version":"1.2.1","files":["/packages/cwp-template-aws/template/common/apps/admin/package.json","/apps/admin/package.json"]},{"name":"@elastic/elasticsearch","version":"7.12.0","files":["/packages/api-elasticsearch/package.json","/packages/api-form-builder-so-ddb-es/package.json","/packages/data-migration/package.json","/packages/migrations/package.json"]},{"name":"@emotion/cache","version":"11.10.5","files":["/packages/app-website/package.json"]},{"name":"@emotion/is-prop-valid","version":"1.1.1","files":["/packages/app-apw/package.json"]},{"name":"@emotion/react","version":"11.10.8","files":["/packages/app-aco/package.json","/packages/app-admin/package.json","/packages/app-apw/package.json","/packages/app-audit-logs/package.json","/packages/app-dynamic-pages/package.json","/packages/app-file-manager/package.json","/packages/app-form-builder/package.json","/packages/app-graphql-playground/package.json","/packages/app-headless-cms/package.json","/packages/app-headless-cms-common/package.json","/packages/app-i18n/package.json","/packages/app-mailer/package.json","/packages/app-page-builder/package.json","/packages/app-page-builder-elements/package.json","/packages/app-serverless-cms/package.json","/packages/app-tenant-manager/package.json","/packages/app-theme-manager/package.json","/packages/app-wcp/package.json","/packages/app-website/package.json","/packages/cwp-template-aws/template/common/apps/website/package.json","/packages/cwp-template-aws/template/common/extensions/theme/package.json","/packages/lexical-editor/package.json","/packages/lexical-theme/package.json","/packages/theme/package.json","/packages/ui/package.json","/apps/website/package.json","/extensions/theme/package.json"]},{"name":"@emotion/styled","version":"11.10.6","files":["/packages/app/package.json","/packages/app-aco/package.json","/packages/app-admin/package.json","/packages/app-admin-auth0/package.json","/packages/app-admin-cognito/package.json","/packages/app-admin-okta/package.json","/packages/app-admin-rmwc/package.json","/packages/app-admin-users-cognito/package.json","/packages/app-apw/package.json","/packages/app-audit-logs/package.json","/packages/app-dynamic-pages/package.json","/packages/app-file-manager/package.json","/packages/app-form-builder/package.json","/packages/app-graphql-playground/package.json","/packages/app-headless-cms/package.json","/packages/app-headless-cms-common/package.json","/packages/app-i18n/package.json","/packages/app-page-builder/package.json","/packages/app-page-builder-elements/package.json","/packages/app-record-locking/package.json","/packages/app-security-access-management/package.json","/packages/app-tenancy/package.json","/packages/app-tenant-manager/package.json","/packages/app-theme-manager/package.json","/packages/app-trash-bin/package.json","/packages/app-website/package.json","/packages/cwp-template-aws/template/common/extensions/theme/package.json","/packages/lexical-editor-actions/package.json","/packages/lexical-editor-pb-element/package.json","/packages/ui/package.json","/extensions/theme/package.json"]},{"name":"@fastify/aws-lambda","version":"4.1.0","files":["/packages/handler-aws/package.json"]},{"name":"@fastify/compress","version":"7.0.3","files":["/packages/handler/package.json"]},{"name":"@fastify/cookie","version":"9.4.0","files":["/packages/handler/package.json"]},{"name":"@fortawesome/fontawesome-common-types","version":"0.3.0","files":["/packages/app-headless-cms/package.json","/packages/app-page-builder/package.json"]},{"name":"@fortawesome/fontawesome-svg-core","version":"1.3.0","files":["/packages/app-dynamic-pages/package.json","/packages/app-headless-cms/package.json","/packages/app-headless-cms-common/package.json","/packages/app-page-builder/package.json"]},{"name":"@fortawesome/free-brands-svg-icons","version":"6.0.0","files":["/packages/app-headless-cms/package.json","/packages/app-page-builder/package.json"]},{"name":"@fortawesome/free-regular-svg-icons","version":"6.0.0","files":["/packages/app-headless-cms/package.json","/packages/app-page-builder/package.json"]},{"name":"@fortawesome/free-solid-svg-icons","version":"6.0.0","files":["/packages/app-headless-cms/package.json","/packages/app-page-builder/package.json"]},{"name":"@fortawesome/react-fontawesome","version":"0.1.17","files":["/packages/app-dynamic-pages/package.json","/packages/app-headless-cms/package.json","/packages/app-page-builder/package.json"]},{"name":"@graphql-tools/merge","version":"9.0.4","files":["/packages/api-headless-cms/package.json","/packages/handler-graphql/package.json"]},{"name":"@graphql-tools/resolvers-composition","version":"7.0.1","files":["/packages/handler-graphql/package.json"]},{"name":"@graphql-tools/schema","version":"10.0.6","files":["/packages/api-headless-cms/package.json","/packages/handler-graphql/package.json"]},{"name":"@graphql-tools/utils","version":"10.3.1","files":["/packages/handler-graphql/package.json"]},{"name":"@iconify/json","version":"2.2.142","files":["/packages/app-admin/package.json"]},{"name":"@lexical/code","version":"0.23.1","files":["/packages/lexical-editor/package.json","/packages/lexical-nodes/package.json"]},{"name":"@lexical/hashtag","version":"0.23.1","files":["/packages/lexical-nodes/package.json"]},{"name":"@lexical/headless","version":"0.23.1","files":["/packages/lexical-converter/package.json"]},{"name":"@lexical/history","version":"0.23.1","files":["/packages/lexical-editor/package.json","/packages/lexical-nodes/package.json"]},{"name":"@lexical/html","version":"0.23.1","files":["/packages/lexical-converter/package.json"]},{"name":"@lexical/list","version":"0.23.1","files":["/packages/lexical-nodes/package.json"]},{"name":"@lexical/mark","version":"0.23.1","files":["/packages/lexical-nodes/package.json"]},{"name":"@lexical/overflow","version":"0.23.1","files":["/packages/lexical-nodes/package.json"]},{"name":"@lexical/react","version":"0.23.1","files":["/packages/lexical-editor/package.json","/packages/lexical-nodes/package.json"]},{"name":"@lexical/rich-text","version":"0.23.1","files":["/packages/lexical-editor/package.json","/packages/lexical-nodes/package.json"]},{"name":"@lexical/selection","version":"0.23.1","files":["/packages/lexical-editor/package.json","/packages/lexical-editor-actions/package.json","/packages/lexical-nodes/package.json"]},{"name":"@lexical/text","version":"0.23.1","files":["/packages/lexical-editor/package.json"]},{"name":"@lexical/utils","version":"0.23.1","files":["/packages/app-headless-cms/package.json","/packages/lexical-editor/package.json","/packages/lexical-editor-pb-element/package.json","/packages/lexical-nodes/package.json"]},{"name":"@material-design-icons/svg","version":"0.14.13","files":["/packages/app-aco/package.json","/packages/app-admin/package.json","/packages/app-admin-rmwc/package.json","/packages/app-dynamic-pages/package.json","/packages/app-file-manager/package.json","/packages/app-form-builder/package.json","/packages/app-headless-cms/package.json","/packages/app-page-builder/package.json","/packages/app-record-locking/package.json","/packages/app-security-access-management/package.json","/packages/app-trash-bin/package.json","/packages/lexical-editor-pb-element/package.json","/packages/ui/package.json"]},{"name":"@material-symbols/svg-400","version":"0.4.1","files":["/packages/app-aco/package.json","/packages/app-form-builder/package.json"]},{"name":"@minoru/react-dnd-treeview","version":"3.2.1","files":["/packages/app-aco/package.json"]},{"name":"@monaco-editor/react","version":"4.7.0","files":["/packages/app-admin/package.json"]},{"name":"@okta/okta-auth-js","version":"5.3.1","files":["/packages/app-admin-okta/package.json"]},{"name":"@okta/okta-react","version":"6.1.0","files":["/packages/app-admin-okta/package.json"]},{"name":"@okta/okta-signin-widget","version":"5.9.4","files":["/packages/app-admin-okta/package.json"]},{"name":"@pmmmwh/react-refresh-webpack-plugin","version":"0.5.15","files":["/packages/project-utils/package.json"]},{"name":"@pulumi/aws","version":"6.67.0","files":["/packages/pulumi-aws/package.json","/packages/pulumi-sdk/package.json","/packages/serverless-cms-aws/package.json"]},{"name":"@pulumi/pulumi","version":"3.147.0","files":["/packages/pulumi/package.json","/packages/pulumi-aws/package.json","/packages/pulumi-sdk/package.json","/packages/serverless-cms-aws/package.json"]},{"name":"@pulumi/random","version":"4.17.0","files":["/packages/pulumi-aws/package.json"]},{"name":"@rmwc/base","version":"14.3.5","files":["/packages/app-admin-rmwc/package.json"]},{"name":"@rmwc/button","version":"14.3.5","files":["/packages/ui/package.json"]},{"name":"@rmwc/checkbox","version":"14.3.5","files":["/packages/ui/package.json"]},{"name":"@rmwc/chip","version":"14.3.5","files":["/packages/ui/package.json"]},{"name":"@rmwc/data-table","version":"14.3.5","files":["/packages/ui/package.json"]},{"name":"@rmwc/dialog","version":"14.3.5","files":["/packages/ui/package.json"]},{"name":"@rmwc/drawer","version":"14.3.5","files":["/packages/ui/package.json"]},{"name":"@rmwc/elevation","version":"14.3.5","files":["/packages/ui/package.json"]},{"name":"@rmwc/fab","version":"14.3.5","files":["/packages/ui/package.json"]},{"name":"@rmwc/grid","version":"14.3.5","files":["/packages/ui/package.json"]},{"name":"@rmwc/icon-button","version":"14.3.5","files":["/packages/ui/package.json"]},{"name":"@rmwc/list","version":"14.3.5","files":["/packages/ui/package.json"]},{"name":"@rmwc/menu","version":"14.3.5","files":["/packages/ui/package.json"]},{"name":"@rmwc/provider","version":"14.3.5","files":["/packages/app-admin-rmwc/package.json"]},{"name":"@rmwc/radio","version":"14.3.5","files":["/packages/ui/package.json"]},{"name":"@rmwc/ripple","version":"14.3.5","files":["/packages/ui/package.json"]},{"name":"@rmwc/select","version":"14.3.5","files":["/packages/ui/package.json"]},{"name":"@rmwc/slider","version":"14.3.5","files":["/packages/ui/package.json"]},{"name":"@rmwc/snackbar","version":"14.3.5","files":["/packages/ui/package.json"]},{"name":"@rmwc/switch","version":"14.3.5","files":["/packages/ui/package.json"]},{"name":"@rmwc/tabs","version":"14.3.5","files":["/packages/ui/package.json"]},{"name":"@rmwc/textfield","version":"14.3.5","files":["/packages/ui/package.json"]},{"name":"@rmwc/top-app-bar","version":"14.3.5","files":["/packages/ui/package.json"]},{"name":"@rmwc/touch-target","version":"14.3.5","files":["/packages/ui/package.json"]},{"name":"@rmwc/typography","version":"14.3.5","files":["/packages/ui/package.json"]},{"name":"@rspack/core","version":"1.2.2","files":["/packages/project-utils/package.json"]},{"name":"@smithy/node-http-handler","version":"2.1.6","files":["/packages/api-headless-cms-import-export/package.json","/packages/api-page-builder-import-export/package.json"]},{"name":"@sparticuz/chromium","version":"131.0.1","files":["/packages/api-prerendering-service/package.json"]},{"name":"@svgr/webpack","version":"6.1.1","files":["/packages/app-admin/package.json","/packages/app-form-builder/package.json","/packages/app-headless-cms/package.json","/packages/app-page-builder/package.json","/packages/project-utils/package.json","/packages/ui/package.json"]},{"name":"@tanstack/react-table","version":"8.5.22","files":["/packages/ui/package.json"]},{"name":"@types/aws-lambda","version":"8.10.145","files":["/packages/aws-helpers/package.json","/packages/aws-sdk/package.json"]},{"name":"@types/hoist-non-react-statics","version":"3.3.5","files":["/package.json"]},{"name":"@types/medium-editor","version":"5.0.3","files":["/packages/app-page-builder/package.json"]},{"name":"@types/mime","version":"2.0.3","files":["/packages/app-admin/package.json"]},{"name":"@types/prismjs","version":"1.26.4","files":["/packages/lexical-nodes/package.json"]},{"name":"@types/react","version":"18.2.79","files":["/packages/app/package.json","/packages/app-admin/package.json","/packages/app-admin-rmwc/package.json","/packages/app-apw/package.json","/packages/app-dynamic-pages/package.json","/packages/app-file-manager/package.json","/packages/app-form-builder/package.json","/packages/app-headless-cms/package.json","/packages/app-i18n/package.json","/packages/app-page-builder/package.json","/packages/app-tenancy/package.json","/packages/app-tenant-manager/package.json","/packages/app-theme-manager/package.json","/packages/cwp-template-aws/template/common/apps/admin/package.json","/packages/cwp-template-aws/template/common/apps/website/package.json","/packages/react-composition/package.json","/packages/react-properties/package.json","/packages/react-rich-text-lexical-renderer/package.json","/packages/react-rich-text-renderer/package.json","/apps/admin/package.json","/apps/website/package.json"]},{"name":"@types/webpack-env","version":"1.18.5","files":["/packages/project-utils/package.json"]},{"name":"accept-language-parser","version":"1.5.0","files":["/packages/api-i18n/package.json"]},{"name":"accounting","version":"0.4.1","files":["/packages/i18n/package.json"]},{"name":"aos","version":"2.3.4","files":["/packages/app-page-builder/package.json"]},{"name":"apollo-cache","version":"1.3.5","files":["/packages/app/package.json","/packages/app-admin/package.json","/packages/app-apw/package.json","/packages/app-file-manager/package.json","/packages/app-form-builder/package.json","/packages/app-graphql-playground/package.json","/packages/app-headless-cms/package.json","/packages/app-i18n/package.json","/packages/app-mailer/package.json","/packages/app-page-builder/package.json","/packages/app-serverless-cms/package.json","/packages/app-tenant-manager/package.json","/packages/app-theme-manager/package.json","/packages/app-wcp/package.json"]},{"name":"apollo-cache-inmemory","version":"1.6.6","files":["/packages/app/package.json"]},{"name":"apollo-client","version":"2.6.10","files":["/packages/app/package.json","/packages/app-admin/package.json","/packages/app-admin-auth0/package.json","/packages/app-admin-cognito/package.json","/packages/app-admin-okta/package.json","/packages/app-admin-users-cognito/package.json","/packages/app-apw/package.json","/packages/app-dynamic-pages/package.json","/packages/app-file-manager/package.json","/packages/app-form-builder/package.json","/packages/app-graphql-playground/package.json","/packages/app-headless-cms/package.json","/packages/app-i18n/package.json","/packages/app-mailer/package.json","/packages/app-page-builder/package.json","/packages/app-record-locking/package.json","/packages/app-serverless-cms/package.json","/packages/app-tenancy/package.json","/packages/app-tenant-manager/package.json","/packages/app-theme-manager/package.json","/packages/app-wcp/package.json","/packages/app-website/package.json","/packages/cwp-template-aws/template/common/apps/website/package.json","/packages/react-router/package.json","/apps/website/package.json"]},{"name":"apollo-link","version":"1.2.14","files":["/packages/app/package.json","/packages/app-admin/package.json","/packages/app-apw/package.json","/packages/app-file-manager/package.json","/packages/app-graphql-playground/package.json","/packages/app-headless-cms/package.json","/packages/app-i18n/package.json","/packages/app-mailer/package.json","/packages/app-page-builder/package.json","/packages/app-record-locking/package.json","/packages/app-serverless-cms/package.json","/packages/app-tenant-manager/package.json","/packages/app-theme-manager/package.json","/packages/app-wcp/package.json","/packages/app-website/package.json","/packages/cwp-template-aws/template/common/apps/website/package.json","/apps/website/package.json"]},{"name":"apollo-link-batch-http","version":"1.2.14","files":["/packages/app-serverless-cms/package.json","/packages/app-website/package.json"]},{"name":"apollo-link-context","version":"1.0.20","files":["/packages/app/package.json","/packages/app-admin-auth0/package.json","/packages/app-admin-cognito/package.json","/packages/app-admin-okta/package.json","/packages/app-graphql-playground/package.json","/packages/app-i18n/package.json"]},{"name":"apollo-link-error","version":"1.1.13","files":["/packages/app/package.json"]},{"name":"apollo-link-http-common","version":"0.2.16","files":["/packages/app/package.json"]},{"name":"apollo-utilities","version":"1.3.4","files":["/packages/app/package.json","/packages/app-admin/package.json","/packages/app-apw/package.json","/packages/app-file-manager/package.json","/packages/app-form-builder/package.json","/packages/app-graphql-playground/package.json","/packages/app-headless-cms/package.json","/packages/app-i18n/package.json","/packages/app-mailer/package.json","/packages/app-page-builder/package.json","/packages/app-serverless-cms/package.json","/packages/app-tenant-manager/package.json","/packages/app-theme-manager/package.json","/packages/app-wcp/package.json"]},{"name":"archiver","version":"7.0.1","files":["/packages/api-headless-cms-import-export/package.json","/packages/api-page-builder/package.json","/packages/api-page-builder-import-export/package.json"]},{"name":"archy","version":"1.0.0","files":["/packages/cli-plugin-workspaces/package.json"]},{"name":"assert-browserify","version":"2.0.0","files":["/packages/project-utils/package.json"]},{"name":"babel-loader","version":"9.2.1","files":["/packages/project-utils/package.json"]},{"name":"boolean","version":"3.2.0","files":["/packages/app/package.json","/packages/cli/package.json","/packages/handler-graphql/package.json"]},{"name":"brace","version":"0.11.1","files":["/packages/ui/package.json"]},{"name":"buffer","version":"6.0.3","files":["/packages/project-utils/package.json"]},{"name":"bufferutil","version":"4.0.1","files":["/packages/project-utils/package.json"]},{"name":"bytes","version":"3.1.2","files":["/packages/api-headless-cms-import-export/package.json","/packages/app/package.json","/packages/app-file-manager/package.json"]},{"name":"cache-control-parser","version":"2.0.6","files":["/packages/api-file-manager/package.json"]},{"name":"camelcase","version":"6.3.0","files":["/packages/cli/package.json","/packages/project-utils/package.json"]},{"name":"case","version":"1.6.3","files":["/packages/cli-plugin-extensions/package.json","/packages/cli-plugin-scaffold-admin-app-module/package.json","/packages/cli-plugin-scaffold-graphql-service/package.json","/packages/cli-plugin-scaffold-react-component/package.json","/packages/cli-plugin-scaffold-workspaces/package.json"]},{"name":"case-sensitive-paths-webpack-plugin","version":"2.4.0","files":["/packages/project-utils/package.json"]},{"name":"center-align","version":"1.0.1","files":["/packages/data-migration/package.json"]},{"name":"chalk","version":"4.1.2","files":["/packages/aws-layers/package.json","/packages/cli/package.json","/packages/cli-plugin-dependencies/package.json","/packages/cli-plugin-deploy-pulumi/package.json","/packages/cli-plugin-extensions/package.json","/packages/cli-plugin-scaffold-admin-app-module/package.json","/packages/cli-plugin-scaffold-ci/package.json","/packages/cli-plugin-scaffold-graphql-service/package.json","/packages/cli-plugin-scaffold-react-component/package.json","/packages/cli-plugin-workspaces/package.json","/packages/create-webiny-project/package.json","/packages/cwp-template-aws/package.json","/packages/data-migration/package.json","/packages/project-utils/package.json","/packages/serverless-cms-aws/package.json","/packages/system-requirements/package.json","/scripts/buildPackages/package.json","/scripts/prepublishOnly/package.json"]},{"name":"cheerio","version":"1.0.0-rc.10","files":["/packages/aws-helpers/package.json"]},{"name":"ci-info","version":"4.1.0","files":["/packages/cli/package.json","/packages/cli-plugin-deploy-pulumi/package.json","/packages/cwp-template-aws/package.json","/packages/project-utils/package.json","/packages/telemetry/package.json"]},{"name":"classnames","version":"2.5.1","files":["/packages/app-admin/package.json","/packages/app-admin-rmwc/package.json","/packages/app-headless-cms/package.json","/packages/app-headless-cms-common/package.json","/packages/app-page-builder/package.json","/packages/react-rich-text-renderer/package.json","/packages/ui/package.json"]},{"name":"cli-table3","version":"0.6.5","files":["/packages/system-requirements/package.json"]},{"name":"color","version":"4.2.3","files":["/packages/cli-plugin-workspaces/package.json"]},{"name":"core-js","version":"3.39.0","files":["/packages/cwp-template-aws/template/common/apps/admin/package.json","/packages/cwp-template-aws/template/common/apps/website/package.json","/apps/admin/package.json","/apps/website/package.json"]},{"name":"cropperjs","version":"1.4.3","files":["/packages/ui/package.json"]},{"name":"cross-fetch","version":"3.1.5","files":["/packages/cwp-template-aws/template/common/apps/admin/package.json","/packages/cwp-template-aws/template/common/apps/website/package.json","/apps/admin/package.json","/apps/website/package.json"]},{"name":"crypto-browserify","version":"3.12.0","files":["/packages/project-utils/package.json"]},{"name":"crypto-hash","version":"3.0.0","files":["/packages/app-record-locking/package.json"]},{"name":"crypto-js","version":"4.2.0","files":["/packages/api-mailer/package.json"]},{"name":"css-loader","version":"6.10.0","files":["/packages/project-utils/package.json"]},{"name":"css-minimizer-webpack-plugin","version":"7.0.0","files":["/packages/project-utils/package.json"]},{"name":"dataloader","version":"2.2.2","files":["/packages/api-admin-users/package.json","/packages/api-headless-cms-ddb/package.json","/packages/api-headless-cms-ddb-es/package.json","/packages/api-page-builder/package.json","/packages/api-page-builder-so-ddb/package.json","/packages/api-page-builder-so-ddb-es/package.json","/packages/api-tenancy/package.json"]},{"name":"dataurl-to-blob","version":"0.0.1","files":["/packages/app-file-manager/package.json"]},{"name":"date-fns","version":"2.22.1","files":["/packages/api-form-builder/package.json","/packages/app-audit-logs/package.json","/packages/db-dynamodb/package.json"]},{"name":"dayjs","version":"1.11.13","files":["/packages/api-apw/package.json","/packages/app-apw/package.json","/packages/app-file-manager/package.json"]},{"name":"decompress","version":"4.2.1","files":["/packages/pulumi-sdk/package.json"]},{"name":"deep-equal","version":"2.2.3","files":["/packages/api-security/package.json","/packages/api-security-cognito/package.json","/packages/tasks/package.json"]},{"name":"dnd-core","version":"16.0.1","files":["/packages/app-form-builder/package.json","/packages/app-headless-cms/package.json","/packages/app-headless-cms-common/package.json","/packages/app-page-builder/package.json"]},{"name":"dnd-kit-sortable-tree","version":"0.1.73","files":["/packages/app-page-builder/package.json"]},{"name":"dot-prop","version":"6.0.1","files":["/packages/api-headless-cms/package.json","/packages/api-headless-cms-ddb/package.json","/packages/db-dynamodb/package.json"]},{"name":"dot-prop-immutable","version":"2.1.1","files":["/packages/api-page-builder-import-export/package.json","/packages/app-aco/package.json","/packages/app-admin/package.json","/packages/app-apw/package.json","/packages/app-file-manager/package.json","/packages/app-form-builder/package.json","/packages/app-headless-cms/package.json","/packages/app-mailer/package.json","/packages/app-page-builder/package.json","/packages/ui/package.json"]},{"name":"dotenv","version":"8.2.0","files":["/packages/cli/package.json"]},{"name":"downshift","version":"3.1.2","files":["/packages/app-admin/package.json"]},{"name":"downshift","version":"2.1.5","files":["/packages/ui/package.json"]},{"name":"dynamodb-toolbox","version":"0.9.2","files":["/packages/db-dynamodb/package.json"]},{"name":"elastic-ts","version":"0.12.0","files":["/packages/api-elasticsearch/package.json","/packages/api-form-builder-so-ddb-es/package.json","/packages/api-page-builder-so-ddb-es/package.json"]},{"name":"emotion","version":"10.0.27","files":["/packages/app-admin/package.json","/packages/app-admin-auth0/package.json","/packages/app-admin-cognito/package.json","/packages/app-admin-okta/package.json","/packages/app-admin-rmwc/package.json","/packages/app-admin-users-cognito/package.json","/packages/app-apw/package.json","/packages/app-audit-logs/package.json","/packages/app-dynamic-pages/package.json","/packages/app-file-manager/package.json","/packages/app-form-builder/package.json","/packages/app-headless-cms/package.json","/packages/app-i18n-content/package.json","/packages/app-page-builder/package.json","/packages/app-security-access-management/package.json","/packages/app-tenant-manager/package.json","/packages/lexical-editor/package.json","/packages/lexical-editor-actions/package.json","/packages/lexical-theme/package.json","/packages/ui/package.json"]},{"name":"eslint","version":"8.57.1","files":["/packages/project-utils/package.json"]},{"name":"eslint-config-react-app","version":"6.0.0","files":["/packages/project-utils/package.json"]},{"name":"eslint-webpack-plugin","version":"4.2.0","files":["/packages/project-utils/package.json"]},{"name":"execa","version":"5.1.1","files":["/packages/cli/package.json","/packages/cli-plugin-deploy-pulumi/package.json","/packages/cli-plugin-extensions/package.json","/packages/cli-plugin-scaffold-graphql-service/package.json","/packages/cli-plugin-scaffold-react-component/package.json","/packages/cli-plugin-scaffold-workspaces/package.json","/packages/cli-plugin-workspaces/package.json","/packages/create-webiny-project/package.json","/packages/cwp-template-aws/package.json","/packages/pulumi-sdk/package.json","/packages/system-requirements/package.json","/scripts/buildPackages/package.json"]},{"name":"exit-hook","version":"4.0.0","files":["/packages/cli-plugin-deploy-pulumi/package.json"]},{"name":"extract-zip","version":"1.6.7","files":["/packages/api-page-builder/package.json"]},{"name":"facepaint","version":"1.2.1","files":["/packages/app-page-builder-elements/package.json"]},{"name":"fast-glob","version":"3.2.7","files":["/packages/cli/package.json","/packages/cli-plugin-deploy-pulumi/package.json","/packages/cli-plugin-extensions/package.json","/packages/cwp-template-aws/package.json","/packages/serverless-cms-aws/package.json"]},{"name":"fastify","version":"4.29.0","files":["/packages/handler/package.json","/packages/handler-aws/package.json"]},{"name":"fecha","version":"2.3.3","files":["/packages/i18n/package.json"]},{"name":"file-loader","version":"6.2.0","files":["/packages/project-utils/package.json"]},{"name":"find-up","version":"5.0.0","files":["/packages/cli/package.json","/packages/cli-plugin-scaffold-admin-app-module/package.json","/packages/cli-plugin-scaffold-graphql-service/package.json","/packages/create-webiny-project/package.json","/packages/pulumi/package.json","/packages/serverless-cms-aws/package.json","/scripts/prepublishOnly/package.json"]},{"name":"folder-hash","version":"4.0.4","files":["/scripts/buildPackages/package.json"]},{"name":"fork-ts-checker-webpack-plugin","version":"9.0.2","files":["/packages/project-utils/package.json"]},{"name":"form-data","version":"4.0.0","files":["/packages/api-file-manager-s3/package.json","/packages/pulumi-aws/package.json"]},{"name":"fs-extra","version":"11.2.0","files":["/packages/api-page-builder/package.json","/packages/api-page-builder-import-export/package.json","/packages/cli/package.json","/packages/create-webiny-project/package.json","/packages/cwp-template-aws/package.json","/packages/project-utils/package.json","/packages/pulumi-sdk/package.json","/scripts/buildPackages/package.json","/scripts/prepublishOnly/package.json"]},{"name":"fuse.js","version":"7.0.0","files":["/packages/db-dynamodb/package.json"]},{"name":"get-yarn-workspaces","version":"1.0.2","files":["/packages/cli-plugin-dependencies/package.json","/packages/cwp-template-aws/package.json","/packages/project-utils/package.json","/scripts/prepublishOnly/package.json"]},{"name":"glob","version":"7.2.3","files":["/packages/cli-plugin-dependencies/package.json","/packages/cli-plugin-extensions/package.json","/packages/project-utils/package.json"]},{"name":"graphlib","version":"2.1.8","files":["/packages/app-admin/package.json","/packages/cli-plugin-workspaces/package.json"]},{"name":"graphql","version":"15.9.0","files":["/packages/api-headless-cms/package.json","/packages/api-i18n-content/package.json","/packages/app/package.json","/packages/app-aco/package.json","/packages/app-admin/package.json","/packages/app-admin-auth0/package.json","/packages/app-admin-okta/package.json","/packages/app-admin-users-cognito/package.json","/packages/app-apw/package.json","/packages/app-dynamic-pages/package.json","/packages/app-file-manager/package.json","/packages/app-form-builder/package.json","/packages/app-graphql-playground/package.json","/packages/app-headless-cms/package.json","/packages/app-headless-cms-common/package.json","/packages/app-i18n/package.json","/packages/app-mailer/package.json","/packages/app-page-builder/package.json","/packages/app-tenant-manager/package.json","/packages/app-theme-manager/package.json","/packages/app-trash-bin/package.json","/packages/cwp-template-aws/template/common/apps/website/package.json","/packages/cwp-template-aws/template/common/extensions/theme/package.json","/packages/handler-graphql/package.json","/packages/react-router/package.json","/apps/website/package.json","/extensions/theme/package.json"]},{"name":"graphql-request","version":"3.7.0","files":["/packages/cli/package.json"]},{"name":"graphql-scalars","version":"1.12.0","files":["/packages/handler-graphql/package.json"]},{"name":"graphql-tag","version":"2.12.6","files":["/packages/api-headless-cms/package.json","/packages/app-aco/package.json","/packages/app-admin/package.json","/packages/app-admin-auth0/package.json","/packages/app-admin-okta/package.json","/packages/app-admin-users-cognito/package.json","/packages/app-apw/package.json","/packages/app-audit-logs/package.json","/packages/app-file-manager/package.json","/packages/app-file-manager-s3/package.json","/packages/app-form-builder/package.json","/packages/app-headless-cms/package.json","/packages/app-headless-cms-common/package.json","/packages/app-i18n/package.json","/packages/app-mailer/package.json","/packages/app-page-builder/package.json","/packages/app-record-locking/package.json","/packages/app-security-access-management/package.json","/packages/app-tenancy/package.json","/packages/app-tenant-manager/package.json","/packages/app-theme-manager/package.json","/packages/app-wcp/package.json","/packages/app-website/package.json","/packages/handler-graphql/package.json"]},{"name":"history","version":"5.3.0","files":["/packages/app-form-builder/package.json","/packages/app-page-builder/package.json","/packages/react-router/package.json"]},{"name":"html-webpack-plugin","version":"5.6.3","files":["/packages/project-utils/package.json"]},{"name":"humanize-duration","version":"3.32.1","files":["/packages/cli-plugin-deploy-pulumi/package.json"]},{"name":"i18n-locales","version":"0.0.5","files":["/packages/api-i18n/package.json"]},{"name":"indent-string","version":"5.0.0","files":["/packages/cli-plugin-scaffold-react-component/package.json"]},{"name":"inquirer","version":"8.2.6","files":["/packages/cli/package.json","/packages/cli-plugin-extensions/package.json","/packages/cli-plugin-scaffold/package.json","/packages/cli-plugin-scaffold-ci/package.json","/packages/cwp-template-aws/package.json"]},{"name":"invariant","version":"2.2.4","files":["/packages/app/package.json","/packages/app-page-builder/package.json","/packages/cwp-template-aws/template/common/apps/admin/package.json","/packages/serverless-cms-aws/package.json"]},{"name":"inversify","version":"6.1.6","files":["/packages/ioc/package.json"]},{"name":"is-hotkey","version":"0.2.0","files":["/packages/app-admin/package.json","/packages/app-page-builder/package.json"]},{"name":"isnumeric","version":"0.3.3","files":["/packages/validation/package.json"]},{"name":"js-base64","version":"3.7.7","files":["/packages/cli-plugin-scaffold-ci/package.json"]},{"name":"js-yaml","version":"3.14.1","files":["/packages/create-webiny-project/package.json"]},{"name":"jsdom","version":"25.0.1","files":["/packages/api-headless-cms/package.json"]},{"name":"jsesc","version":"3.0.2","files":["/packages/telemetry/package.json"]},{"name":"json2csv","version":"4.5.4","files":["/packages/api-form-builder/package.json","/packages/app-form-builder/package.json"]},{"name":"jsonpack","version":"1.1.5","files":["/packages/api-headless-cms-ddb/package.json","/packages/api-headless-cms-ddb-es/package.json","/packages/api-page-builder/package.json"]},{"name":"jsonwebtoken","version":"9.0.1","files":["/packages/api-cognito-authenticator/package.json","/packages/api-security/package.json","/packages/api-security-auth0/package.json","/packages/api-security-okta/package.json"]},{"name":"jwk-to-pem","version":"2.0.1","files":["/packages/api-cognito-authenticator/package.json","/packages/api-security-auth0/package.json","/packages/api-security-okta/package.json"]},{"name":"keycode","version":"2.2.0","files":["/packages/ui/package.json"]},{"name":"lexical","version":"0.23.1","files":["/packages/lexical-converter/package.json","/packages/lexical-editor/package.json","/packages/lexical-nodes/package.json","/packages/lexical-theme/package.json"]},{"name":"listr","version":"0.14.3","files":["/packages/cli-plugin-deploy-pulumi/package.json","/packages/create-webiny-project/package.json"]},{"name":"listr2","version":"5.0.8","files":["/scripts/buildPackages/package.json"]},{"name":"load-json-file","version":"6.2.0","files":["/packages/api-page-builder/package.json","/packages/api-page-builder-import-export/package.json","/packages/cli-plugin-dependencies/package.json","/packages/cli-plugin-extensions/package.json","/packages/cli-plugin-scaffold/package.json","/packages/cli-plugin-scaffold-admin-app-module/package.json","/packages/cli-plugin-scaffold-graphql-service/package.json","/packages/cli-plugin-scaffold-react-component/package.json","/packages/cli-plugin-scaffold-workspaces/package.json","/packages/create-webiny-project/package.json","/packages/cwp-template-aws/package.json","/packages/global-config/package.json","/scripts/buildPackages/package.json","/scripts/prepublishOnly/package.json"]},{"name":"load-script","version":"1.0.0","files":["/packages/app-graphql-playground/package.json","/packages/ui/package.json"]},{"name":"lodash","version":"4.17.21","files":["/packages/api-aco/package.json","/packages/api-admin-users/package.json","/packages/api-apw/package.json","/packages/api-file-manager/package.json","/packages/api-form-builder/package.json","/packages/api-headless-cms/package.json","/packages/api-headless-cms-ddb/package.json","/packages/api-headless-cms-ddb-es/package.json","/packages/api-mailer/package.json","/packages/api-page-builder/package.json","/packages/api-page-builder-aco/package.json","/packages/api-page-builder-import-export/package.json","/packages/api-page-builder-so-ddb-es/package.json","/packages/api-prerendering-service/package.json","/packages/api-prerendering-service-aws/package.json","/packages/app/package.json","/packages/app-aco/package.json","/packages/app-admin/package.json","/packages/app-admin-auth0/package.json","/packages/app-admin-okta/package.json","/packages/app-admin-rmwc/package.json","/packages/app-admin-users-cognito/package.json","/packages/app-apw/package.json","/packages/app-audit-logs/package.json","/packages/app-cognito-authenticator/package.json","/packages/app-file-manager/package.json","/packages/app-form-builder/package.json","/packages/app-headless-cms/package.json","/packages/app-headless-cms-common/package.json","/packages/app-i18n/package.json","/packages/app-page-builder/package.json","/packages/app-page-builder-elements/package.json","/packages/app-security-access-management/package.json","/packages/app-tenant-manager/package.json","/packages/app-theme-manager/package.json","/packages/app-trash-bin/package.json","/packages/cli-plugin-deploy-pulumi/package.json","/packages/cwp-template-aws/package.json","/packages/db-dynamodb/package.json","/packages/form/package.json","/packages/i18n/package.json","/packages/i18n-react/package.json","/packages/lexical-editor/package.json","/packages/migrations/package.json","/packages/project-utils/package.json","/packages/pulumi/package.json","/packages/pulumi-aws/package.json","/packages/pulumi-sdk/package.json","/packages/tasks/package.json","/packages/ui/package.json","/packages/validation/package.json","/scripts/prepublishOnly/package.json"]},{"name":"log-update","version":"4.0.0","files":["/packages/cli-plugin-deploy-pulumi/package.json"]},{"name":"lz-string","version":"1.5.0","files":["/packages/app-website/package.json"]},{"name":"material-components-web","version":"14.0.0","files":["/packages/ui/package.json"]},{"name":"md5","version":"2.3.0","files":["/packages/api-admin-users/package.json"]},{"name":"mdbid","version":"1.0.0","files":["/packages/utils/package.json"]},{"name":"medium-editor","version":"5.23.3","files":["/packages/app-page-builder/package.json"]},{"name":"mime","version":"3.0.0","files":["/packages/api-file-manager-s3/package.json","/packages/app-file-manager/package.json","/packages/cli-plugin-deploy-pulumi/package.json"]},{"name":"mini-css-extract-plugin","version":"2.4.5","files":["/packages/project-utils/package.json"]},{"name":"minimatch","version":"5.1.6","files":["/packages/api-security/package.json","/packages/app/package.json","/packages/app-file-manager/package.json","/packages/app-security/package.json","/packages/cli-plugin-deploy-pulumi/package.json","/packages/data-migration/package.json"]},{"name":"mobx","version":"6.9.0","files":["/packages/app-aco/package.json","/packages/app-admin/package.json","/packages/app-dynamic-pages/package.json","/packages/app-file-manager/package.json","/packages/app-headless-cms/package.json","/packages/app-page-builder/package.json","/packages/app-trash-bin/package.json","/packages/app-utils/package.json"]},{"name":"mobx-react-lite","version":"3.4.3","files":["/packages/app-aco/package.json","/packages/app-admin/package.json","/packages/app-file-manager/package.json","/packages/app-headless-cms/package.json","/packages/app-page-builder/package.json","/packages/app-trash-bin/package.json"]},{"name":"mqtt","version":"5.10.3","files":["/packages/cli-plugin-deploy-pulumi/package.json"]},{"name":"multimatch","version":"5.0.0","files":["/packages/cli-plugin-workspaces/package.json"]},{"name":"nanoid","version":"3.3.8","files":["/packages/app/package.json","/packages/app-page-builder/package.json","/packages/react-properties/package.json","/packages/utils/package.json"]},{"name":"nanoid-dictionary","version":"4.3.0","files":["/packages/utils/package.json"]},{"name":"ncp","version":"2.0.0","files":["/packages/cli/package.json","/packages/cli-plugin-deploy-pulumi/package.json","/packages/cli-plugin-scaffold-admin-app-module/package.json","/packages/cli-plugin-scaffold-graphql-service/package.json","/packages/cli-plugin-scaffold-react-component/package.json","/packages/cli-plugin-scaffold-workspaces/package.json"]},{"name":"node-fetch","version":"2.6.7","files":["/packages/api-cognito-authenticator/package.json","/packages/api-file-manager-s3/package.json","/packages/api-form-builder/package.json","/packages/api-page-builder/package.json","/packages/api-page-builder-import-export/package.json","/packages/api-security-auth0/package.json","/packages/api-security-okta/package.json","/packages/api-wcp/package.json","/packages/create-webiny-project/package.json","/packages/pulumi-aws/package.json","/packages/pulumi-sdk/package.json","/packages/serverless-cms-aws/package.json","/packages/wcp/package.json"]},{"name":"node-notifier","version":"10.0.1","files":["/packages/cli-plugin-deploy-pulumi/package.json"]},{"name":"nodemailer","version":"6.9.16","files":["/packages/api-mailer/package.json"]},{"name":"nprogress","version":"0.2.0","files":["/packages/ui/package.json"]},{"name":"nuka-carousel","version":"4.7.1","files":["/packages/ui/package.json"]},{"name":"null-loader","version":"4.0.1","files":["/packages/project-utils/package.json"]},{"name":"object-hash","version":"3.0.0","files":["/packages/api-file-manager/package.json","/packages/api-file-manager-s3/package.json","/packages/api-prerendering-service/package.json"]},{"name":"object-merge-advanced","version":"12.1.0","files":["/packages/tasks/package.json"]},{"name":"object-sizeof","version":"2.6.4","files":["/packages/tasks/package.json"]},{"name":"octokit","version":"3.1.2","files":["/packages/cli-plugin-scaffold-ci/package.json"]},{"name":"open","version":"8.4.2","files":["/packages/cli/package.json","/packages/cli-plugin-scaffold-ci/package.json","/packages/cwp-template-aws/package.json"]},{"name":"ora","version":"4.1.1","files":["/packages/cli-plugin-deploy-pulumi/package.json","/packages/cli-plugin-extensions/package.json","/packages/cli-plugin-scaffold/package.json","/packages/cwp-template-aws/package.json","/packages/serverless-cms-aws/package.json"]},{"name":"os","version":"0.1.1","files":["/packages/create-webiny-project/package.json"]},{"name":"os-browserify","version":"0.3.0","files":["/packages/project-utils/package.json"]},{"name":"p-map","version":"4.0.0","files":["/packages/api-file-manager-s3/package.json","/packages/api-headless-cms/package.json","/packages/cli-plugin-workspaces/package.json"]},{"name":"p-reduce","version":"2.1.0","files":["/packages/api-file-manager-s3/package.json","/packages/api-headless-cms/package.json"]},{"name":"p-retry","version":"4.6.2","files":["/packages/api-dynamodb-to-elasticsearch/package.json","/packages/app-file-manager-s3/package.json","/packages/cli-plugin-deploy-pulumi/package.json","/packages/create-webiny-project/package.json","/packages/utils/package.json"]},{"name":"p-wait-for","version":"4.1.0","files":["/packages/ui-composer/package.json"]},{"name":"pako","version":"2.1.0","files":["/packages/app-aco/package.json","/packages/app-page-builder/package.json"]},{"name":"path-browserify","version":"1.0.1","files":["/packages/project-utils/package.json"]},{"name":"pino-pretty","version":"9.4.0","files":["/packages/data-migration/package.json"]},{"name":"pirates","version":"4.0.6","files":["/packages/cli/package.json"]},{"name":"platform","version":"1.3.5","files":["/packages/app-page-builder/package.json"]},{"name":"pluralize","version":"8.0.0","files":["/packages/api-headless-cms/package.json","/packages/api-prerendering-service/package.json","/packages/cli-plugin-scaffold-admin-app-module/package.json","/packages/cli-plugin-scaffold-graphql-service/package.json","/packages/cli-plugin-scaffold-react-component/package.json"]},{"name":"postcss-flexbugs-fixes","version":"5.0.2","files":["/packages/project-utils/package.json"]},{"name":"postcss-loader","version":"6.2.1","files":["/packages/project-utils/package.json"]},{"name":"postcss-normalize","version":"10.0.1","files":["/packages/project-utils/package.json"]},{"name":"postcss-preset-env","version":"9.4.0","files":["/packages/project-utils/package.json"]},{"name":"posthtml","version":"0.15.0","files":["/packages/api-prerendering-service/package.json"]},{"name":"posthtml-noopener","version":"1.0.5","files":["/packages/api-prerendering-service/package.json"]},{"name":"posthtml-plugin-link-preload","version":"1.0.0","files":["/packages/api-prerendering-service/package.json"]},{"name":"process","version":"0.11.10","files":["/packages/project-utils/package.json"]},{"name":"prop-types","version":"15.8.1","files":["/packages/app-admin/package.json","/packages/app-apw/package.json","/packages/app-file-manager/package.json","/packages/app-form-builder/package.json","/packages/app-graphql-playground/package.json","/packages/app-headless-cms/package.json","/packages/app-headless-cms-common/package.json","/packages/app-i18n/package.json","/packages/app-mailer/package.json","/packages/app-page-builder/package.json","/packages/app-tenant-manager/package.json","/packages/app-theme-manager/package.json","/packages/cwp-template-aws/template/common/apps/admin/package.json","/apps/admin/package.json"]},{"name":"puppeteer-core","version":"23.11.1","files":["/packages/api-prerendering-service/package.json"]},{"name":"raw-loader","version":"4.0.2","files":["/packages/project-utils/package.json"]},{"name":"raw.macro","version":"0.4.2","files":["/packages/app-headless-cms/package.json"]},{"name":"rc-tooltip","version":"5.3.1","files":["/packages/ui/package.json"]},{"name":"react","version":"18.2.0","files":["/packages/app/package.json","/packages/app-aco/package.json","/packages/app-admin/package.json","/packages/app-admin-auth0/package.json","/packages/app-admin-cognito/package.json","/packages/app-admin-okta/package.json","/packages/app-admin-rmwc/package.json","/packages/app-admin-users-cognito/package.json","/packages/app-apw/package.json","/packages/app-cognito-authenticator/package.json","/packages/app-dynamic-pages/package.json","/packages/app-file-manager/package.json","/packages/app-form-builder/package.json","/packages/app-graphql-playground/package.json","/packages/app-headless-cms/package.json","/packages/app-headless-cms-common/package.json","/packages/app-i18n/package.json","/packages/app-i18n-content/package.json","/packages/app-mailer/package.json","/packages/app-page-builder/package.json","/packages/app-plugin-admin-welcome-screen/package.json","/packages/app-record-locking/package.json","/packages/app-security/package.json","/packages/app-security-access-management/package.json","/packages/app-serverless-cms/package.json","/packages/app-tenancy/package.json","/packages/app-tenant-manager/package.json","/packages/app-theme-manager/package.json","/packages/app-trash-bin/package.json","/packages/app-wcp/package.json","/packages/app-website/package.json","/packages/app-websockets/package.json","/packages/cli-plugin-extensions/templates/admin/package.json","/packages/cli-plugin-extensions/templates/pbElement/package.json","/packages/cli-plugin-extensions/templates/website/package.json","/packages/cli-plugin-scaffold-react-component/template/package.json","/packages/cwp-template-aws/template/common/apps/admin/package.json","/packages/cwp-template-aws/template/common/apps/website/package.json","/packages/cwp-template-aws/template/common/extensions/theme/package.json","/packages/lexical-editor/package.json","/packages/lexical-editor-actions/package.json","/packages/lexical-editor-pb-element/package.json","/packages/project-utils/package.json","/packages/react-composition/package.json","/packages/react-properties/package.json","/packages/react-rich-text-lexical-renderer/package.json","/packages/react-rich-text-renderer/package.json","/packages/react-router/package.json","/packages/ui-composer/package.json","/apps/admin/package.json","/apps/website/package.json","/extensions/theme/package.json"]},{"name":"react-ace","version":"6.1.4","files":["/packages/ui/package.json"]},{"name":"react-butterfiles","version":"1.3.3","files":["/packages/app-file-manager/package.json","/packages/app-headless-cms/package.json","/packages/ui/package.json"]},{"name":"react-color","version":"2.19.3","files":["/packages/app-page-builder/package.json","/packages/lexical-editor-actions/package.json","/packages/ui/package.json"]},{"name":"react-columned","version":"1.1.3","files":["/packages/ui/package.json"]},{"name":"react-custom-scrollbars","version":"4.2.1","files":["/packages/app-file-manager/package.json","/packages/app-headless-cms/package.json","/packages/ui/package.json"]},{"name":"react-dev-utils","version":"12.0.1","files":["/packages/project-utils/package.json"]},{"name":"react-dnd","version":"16.0.1","files":["/packages/app-aco/package.json","/packages/app-form-builder/package.json","/packages/app-headless-cms/package.json","/packages/app-page-builder/package.json"]},{"name":"react-dnd-html5-backend","version":"16.0.1","files":["/packages/app-form-builder/package.json","/packages/app-headless-cms/package.json","/packages/app-page-builder/package.json"]},{"name":"react-dom","version":"18.2.0","files":["/packages/app/package.json","/packages/app-aco/package.json","/packages/app-admin/package.json","/packages/app-admin-auth0/package.json","/packages/app-admin-cognito/package.json","/packages/app-admin-okta/package.json","/packages/app-admin-rmwc/package.json","/packages/app-admin-users-cognito/package.json","/packages/app-apw/package.json","/packages/app-cognito-authenticator/package.json","/packages/app-dynamic-pages/package.json","/packages/app-file-manager/package.json","/packages/app-form-builder/package.json","/packages/app-graphql-playground/package.json","/packages/app-headless-cms/package.json","/packages/app-i18n/package.json","/packages/app-i18n-content/package.json","/packages/app-mailer/package.json","/packages/app-page-builder/package.json","/packages/app-plugin-admin-welcome-screen/package.json","/packages/app-record-locking/package.json","/packages/app-security/package.json","/packages/app-security-access-management/package.json","/packages/app-serverless-cms/package.json","/packages/app-tenancy/package.json","/packages/app-tenant-manager/package.json","/packages/app-theme-manager/package.json","/packages/app-trash-bin/package.json","/packages/app-wcp/package.json","/packages/app-website/package.json","/packages/app-websockets/package.json","/packages/cwp-template-aws/template/common/apps/admin/package.json","/packages/cwp-template-aws/template/common/apps/website/package.json","/packages/lexical-editor/package.json","/packages/lexical-editor-actions/package.json","/packages/lexical-editor-pb-element/package.json","/packages/project-utils/package.json","/packages/react-composition/package.json","/packages/react-router/package.json","/packages/ui-composer/package.json","/apps/admin/package.json","/apps/website/package.json"]},{"name":"react-draggable","version":"4.4.6","files":["/packages/app-admin/package.json"]},{"name":"react-google-recaptcha","version":"1.1.0","files":["/packages/app-form-builder/package.json"]},{"name":"react-hamburger-menu","version":"1.2.1","files":["/packages/cwp-template-aws/template/common/extensions/theme/package.json","/extensions/theme/package.json"]},{"name":"react-helmet","version":"6.1.0","files":["/packages/app-admin-auth0/package.json","/packages/app-admin-okta/package.json","/packages/app-admin-rmwc/package.json","/packages/app-admin-users-cognito/package.json","/packages/app-apw/package.json","/packages/app-headless-cms/package.json","/packages/app-mailer/package.json","/packages/app-page-builder/package.json","/packages/app-security-access-management/package.json","/packages/app-website/package.json"]},{"name":"react-hotkeyz","version":"1.0.4","files":["/packages/app-aco/package.json","/packages/app-admin/package.json","/packages/app-admin-rmwc/package.json","/packages/app-file-manager/package.json","/packages/app-form-builder/package.json","/packages/app-headless-cms/package.json"]},{"name":"react-images","version":"0.5.19","files":["/packages/app-page-builder/package.json"]},{"name":"react-in-viewport","version":"1.0.0-alpha.30","files":["/packages/app-page-builder/package.json"]},{"name":"react-lazy-load","version":"3.1.14","files":["/packages/app-file-manager/package.json"]},{"name":"react-loading-skeleton","version":"3.1.0","files":["/packages/ui/package.json"]},{"name":"react-refresh","version":"0.11.0","files":["/packages/project-utils/package.json"]},{"name":"react-resizable","version":"3.0.5","files":["/packages/app-admin/package.json"]},{"name":"react-resizable-panels","version":"2.0.19","files":["/packages/app-admin/package.json"]},{"name":"react-router-dom","version":"6.3.0","files":["/packages/react-router/package.json"]},{"name":"react-sortable","version":"2.0.0","files":["/packages/app-page-builder/package.json"]},{"name":"react-spinner-material","version":"1.1.4","files":["/packages/app-apw/package.json","/packages/ui/package.json"]},{"name":"react-style-object-to-css","version":"1.1.2","files":["/packages/lexical-theme/package.json"]},{"name":"react-transition-group","version":"4.4.5","files":["/packages/app-admin/package.json","/packages/app-admin-rmwc/package.json","/packages/ui/package.json"]},{"name":"react-virtualized","version":"9.22.5","files":["/packages/app-admin/package.json","/packages/app-headless-cms/package.json","/packages/app-page-builder/package.json"]},{"name":"read-json-sync","version":"2.0.1","files":["/packages/project-utils/package.json"]},{"name":"recoil","version":"0.7.7","files":["/packages/app-page-builder/package.json"]},{"name":"reflect-metadata","version":"0.2.2","files":["/packages/di-container/package.json","/packages/ioc/package.json"]},{"name":"regenerator-runtime","version":"0.13.11","files":["/packages/cwp-template-aws/template/common/apps/admin/package.json","/packages/cwp-template-aws/template/common/apps/website/package.json","/apps/admin/package.json","/apps/website/package.json"]},{"name":"replace-in-path","version":"1.1.0","files":["/packages/cli-plugin-deploy-pulumi/package.json","/packages/cli-plugin-extensions/package.json","/packages/cli-plugin-scaffold-admin-app-module/package.json","/packages/cli-plugin-scaffold-graphql-service/package.json","/packages/cli-plugin-scaffold-react-component/package.json","/packages/cli-plugin-scaffold-workspaces/package.json"]},{"name":"reset-css","version":"5.0.1","files":["/packages/app-admin/package.json","/packages/app-website/package.json"]},{"name":"resolve","version":"1.22.8","files":["/packages/project-utils/package.json"]},{"name":"resolve-url-loader","version":"5.0.0","files":["/packages/project-utils/package.json"]},{"name":"rimraf","version":"6.0.1","files":["/packages/create-webiny-project/package.json","/packages/project-utils/package.json"]},{"name":"sanitize-filename","version":"1.6.3","files":["/packages/api-file-manager-s3/package.json"]},{"name":"sanitize-html","version":"2.12.1","files":["/packages/react-rich-text-renderer/package.json"]},{"name":"sass","version":"1.44.0","files":["/packages/project-utils/package.json"]},{"name":"sass-loader","version":"12.3.0","files":["/packages/project-utils/package.json"]},{"name":"scheduler","version":"0.19.1","files":["/packages/project-utils/package.json"]},{"name":"semver","version":"7.6.3","files":["/packages/api-headless-cms/package.json","/packages/cli/package.json","/packages/cli-plugin-dependencies/package.json","/packages/create-webiny-project/package.json","/packages/data-migration/package.json","/packages/pulumi-sdk/package.json","/packages/system-requirements/package.json"]},{"name":"serialize-error","version":"8.0.0","files":["/packages/cli-plugin-deploy-pulumi/package.json"]},{"name":"sharp","version":"0.32.6","files":["/packages/api-file-manager-s3/package.json"]},{"name":"short-hash","version":"1.0.0","files":["/packages/i18n/package.json"]},{"name":"slugify","version":"1.6.6","files":["/packages/api-form-builder/package.json","/packages/api-headless-cms/package.json","/packages/app-aco/package.json","/packages/app-dynamic-pages/package.json","/packages/app-page-builder/package.json"]},{"name":"source-map-loader","version":"1.1.3","files":["/packages/project-utils/package.json"]},{"name":"source-map-support","version":"0.5.21","files":["/packages/project-utils/package.json"]},{"name":"srcset","version":"4.0.0","files":["/packages/api-prerendering-service/package.json","/packages/aws-helpers/package.json"]},{"name":"store","version":"2.0.12","files":["/packages/app-aco/package.json","/packages/app-admin/package.json","/packages/app-admin-rmwc/package.json","/packages/app-page-builder/package.json","/packages/app-tenancy/package.json"]},{"name":"stream","version":"0.0.3","files":["/packages/api-page-builder/package.json","/packages/api-page-builder-import-export/package.json"]},{"name":"strip-ansi","version":"6.0.1","files":["/packages/telemetry/package.json"]},{"name":"style-loader","version":"3.3.1","files":["/packages/project-utils/package.json"]},{"name":"swiper","version":"9.3.2","files":["/packages/app-page-builder/package.json"]},{"name":"tar","version":"6.2.1","files":["/packages/pulumi-sdk/package.json"]},{"name":"terminal-link","version":"2.1.1","files":["/packages/cli-plugin-scaffold-admin-app-module/package.json","/packages/cli-plugin-scaffold-ci/package.json","/packages/cli-plugin-scaffold-graphql-service/package.json"]},{"name":"terser-webpack-plugin","version":"5.3.10","files":["/packages/project-utils/package.json"]},{"name":"theme","version":"1.0.0","files":["/packages/cwp-template-aws/template/common/apps/admin/package.json","/packages/cwp-template-aws/template/common/apps/website/package.json","/apps/admin/package.json","/apps/website/package.json"]},{"name":"timeago-react","version":"3.0.6","files":["/packages/ui/package.json"]},{"name":"ts-checker-rspack-plugin","version":"1.0.3","files":["/packages/project-utils/package.json"]},{"name":"ts-invariant","version":"0.10.3","files":["/packages/app/package.json"]},{"name":"ts-morph","version":"11.0.0","files":["/packages/cli/package.json","/packages/cli-plugin-extensions/package.json","/packages/cli-plugin-scaffold/package.json","/packages/cli-plugin-scaffold-graphql-service/package.json"]},{"name":"ts-patch","version":"3.3.0","files":["/packages/project-utils/package.json"]},{"name":"tslib","version":"2.8.1","files":["/packages/cwp-template-aws/template/common/apps/admin/package.json","/apps/admin/package.json"]},{"name":"type-fest","version":"4.14.0","files":["/packages/api-websockets/package.json","/packages/db/package.json"]},{"name":"typescript","version":"5.3.3","files":["/packages/cli/package.json","/packages/project-utils/package.json"]},{"name":"unicode-emoji-json","version":"0.4.0","files":["/packages/app-admin/package.json"]},{"name":"uniqid","version":"5.4.0","files":["/packages/api-headless-cms-import-export/package.json","/packages/api-page-builder/package.json","/packages/api-page-builder-import-export/package.json","/packages/app-page-builder/package.json","/packages/cli/package.json","/packages/plugins/package.json"]},{"name":"unzipper","version":"0.12.3","files":["/packages/api-headless-cms-import-export/package.json"]},{"name":"url","version":"0.11.4","files":["/packages/project-utils/package.json"]},{"name":"url-loader","version":"4.1.1","files":["/packages/project-utils/package.json"]},{"name":"use-deep-compare-effect","version":"1.8.1","files":["/packages/app-headless-cms/package.json"]},{"name":"utf-8-validate","version":"5.0.2","files":["/packages/project-utils/package.json"]},{"name":"uuid","version":"9.0.1","files":["/packages/create-webiny-project/package.json","/packages/global-config/package.json"]},{"name":"validate-npm-package-name","version":"3.0.0","files":["/packages/cli-plugin-extensions/package.json","/packages/cli-plugin-scaffold-ci/package.json","/packages/cli-plugin-scaffold-react-component/package.json","/packages/cli-plugin-scaffold-workspaces/package.json","/packages/create-webiny-project/package.json"]},{"name":"vm-browserify","version":"1.1.2","files":["/packages/project-utils/package.json"]},{"name":"warning","version":"4.0.2","files":["/packages/app/package.json"]},{"name":"webpack","version":"5.97.0","files":["/packages/project-utils/package.json","/packages/serverless-cms-aws/package.json"]},{"name":"webpack-dev-server","version":"4.15.2","files":["/packages/project-utils/package.json"]},{"name":"webpack-manifest-plugin","version":"5.0.0","files":["/packages/project-utils/package.json"]},{"name":"webpackbar","version":"7.0.0","files":["/packages/project-utils/package.json"]},{"name":"write-json-file","version":"4.3.0","files":["/packages/cli-plugin-dependencies/package.json","/packages/cli-plugin-extensions/package.json","/packages/cli-plugin-scaffold/package.json","/packages/cli-plugin-scaffold-graphql-service/package.json","/packages/cli-plugin-scaffold-react-component/package.json","/packages/cli-plugin-scaffold-workspaces/package.json","/packages/create-webiny-project/package.json","/packages/cwp-template-aws/package.json","/packages/global-config/package.json","/scripts/buildPackages/package.json","/scripts/prepublishOnly/package.json"]},{"name":"wts-client","version":"1.0.1","files":["/packages/telemetry/package.json"]},{"name":"yargs","version":"17.7.2","files":["/packages/cli/package.json","/packages/cli-plugin-deploy-pulumi/package.json","/packages/create-webiny-project/package.json","/packages/i18n/package.json","/scripts/buildPackages/package.json"]},{"name":"yauzl","version":"2.10.0","files":["/packages/api-page-builder-import-export/package.json"]},{"name":"yesno","version":"0.4.0","files":["/packages/create-webiny-project/package.json"]},{"name":"zod","version":"3.23.8","files":["/packages/api-admin-users/package.json","/packages/api-apw/package.json","/packages/api-file-manager/package.json","/packages/api-form-builder/package.json","/packages/api-headless-cms/package.json","/packages/api-headless-cms-import-export/package.json","/packages/api-headless-cms-tasks/package.json","/packages/api-log/package.json","/packages/api-mailer/package.json","/packages/api-page-builder/package.json","/packages/api-page-builder-import-export/package.json","/packages/api-security/package.json","/packages/api-websockets/package.json","/packages/app-aco/package.json","/packages/app-file-manager/package.json","/packages/pulumi-aws/package.json","/packages/tasks/package.json"]}],"devDependencies":[{"name":"@4tw/cypress-drag-drop","version":"1.4.0","files":["/cypress-tests/package.json"]},{"name":"@babel/cli","version":"7.26.4","files":["/package.json","/packages/cli-plugin-scaffold-react-component/template/package.json","/packages/cwp-template-aws/template/ddb-es/dependencies.json","/packages/cwp-template-aws/template/ddb-os/dependencies.json","/packages/cwp-template-aws/template/ddb/dependencies.json"]},{"name":"@babel/code-frame","version":"7.26.2","files":["/package.json"]},{"name":"@babel/compat-data","version":"7.26.5","files":["/package.json"]},{"name":"@babel/core","version":"7.26.7","files":["/package.json","/packages/cli-plugin-scaffold-react-component/template/package.json","/packages/cwp-template-aws/template/ddb-es/dependencies.json","/packages/cwp-template-aws/template/ddb-os/dependencies.json","/packages/cwp-template-aws/template/ddb/dependencies.json"]},{"name":"@babel/helper-define-polyfill-provider","version":"0.6.3","files":["/package.json"]},{"name":"@babel/helper-environment-visitor","version":"7.24.7","files":["/package.json"]},{"name":"@babel/parser","version":"7.26.7","files":["/package.json"]},{"name":"@babel/plugin-proposal-class-properties","version":"7.18.6","files":["/package.json"]},{"name":"@babel/plugin-proposal-object-rest-spread","version":"7.20.7","files":["/package.json"]},{"name":"@babel/plugin-proposal-throw-expressions","version":"7.25.9","files":["/package.json"]},{"name":"@babel/plugin-syntax-object-rest-spread","version":"7.8.3","files":["/package.json"]},{"name":"@babel/plugin-transform-modules-commonjs","version":"7.26.3","files":["/package.json"]},{"name":"@babel/plugin-transform-runtime","version":"7.25.9","files":["/package.json","/packages/cwp-template-aws/template/ddb-es/dependencies.json","/packages/cwp-template-aws/template/ddb-os/dependencies.json","/packages/cwp-template-aws/template/ddb/dependencies.json"]},{"name":"@babel/preset-env","version":"7.26.7","files":["/package.json","/packages/cwp-template-aws/template/ddb-es/dependencies.json","/packages/cwp-template-aws/template/ddb-os/dependencies.json","/packages/cwp-template-aws/template/ddb/dependencies.json"]},{"name":"@babel/preset-react","version":"7.26.3","files":["/package.json","/packages/cli-plugin-scaffold-react-component/template/package.json"]},{"name":"@babel/preset-typescript","version":"7.26.0","files":["/package.json","/packages/cli-plugin-scaffold-react-component/template/package.json","/packages/cwp-template-aws/template/ddb-es/dependencies.json","/packages/cwp-template-aws/template/ddb-os/dependencies.json","/packages/cwp-template-aws/template/ddb/dependencies.json"]},{"name":"@babel/register","version":"7.25.9","files":["/package.json","/packages/i18n/package.json"]},{"name":"@babel/runtime","version":"7.26.7","files":["/package.json"]},{"name":"@babel/template","version":"7.25.9","files":["/package.json"]},{"name":"@babel/traverse","version":"7.26.7","files":["/package.json"]},{"name":"@babel/types","version":"7.26.7","files":["/package.json"]},{"name":"@commitlint/cli","version":"11.0.0","files":["/package.json"]},{"name":"@commitlint/config-conventional","version":"11.0.0","files":["/package.json"]},{"name":"@elastic/elasticsearch","version":"7.12.0","files":["/packages/api-headless-cms-ddb-es/package.json","/packages/api-page-builder-so-ddb-es/package.json","/packages/project-utils/package.json"]},{"name":"@emotion/babel-plugin","version":"11.11.0","files":["/packages/app-admin/package.json","/packages/app-admin-rmwc/package.json","/packages/app-apw/package.json","/packages/app-dynamic-pages/package.json","/packages/app-form-builder/package.json","/packages/app-graphql-playground/package.json","/packages/app-headless-cms/package.json","/packages/app-headless-cms-common/package.json","/packages/app-i18n/package.json","/packages/app-i18n-content/package.json","/packages/app-mailer/package.json","/packages/app-page-builder/package.json","/packages/app-security/package.json","/packages/app-security-access-management/package.json","/packages/app-serverless-cms/package.json","/packages/app-tenancy/package.json","/packages/app-tenant-manager/package.json","/packages/app-theme/package.json","/packages/app-theme-manager/package.json","/packages/theme/package.json","/packages/ui/package.json"]},{"name":"@emotion/react","version":"11.10.8","files":["/packages/react-rich-text-lexical-renderer/package.json"]},{"name":"@faker-js/faker","version":"9.3.0","files":["/packages/api-headless-cms-es-tasks/package.json"]},{"name":"@grpc/grpc-js","version":"1.11.1","files":["/package.json"]},{"name":"@lexical/code","version":"0.23.1","files":["/package.json"]},{"name":"@lexical/hashtag","version":"0.23.1","files":["/package.json"]},{"name":"@lexical/headless","version":"0.23.1","files":["/package.json"]},{"name":"@lexical/history","version":"0.23.1","files":["/package.json"]},{"name":"@lexical/html","version":"0.23.1","files":["/package.json"]},{"name":"@lexical/list","version":"0.23.1","files":["/package.json"]},{"name":"@lexical/mark","version":"0.23.1","files":["/package.json"]},{"name":"@lexical/overflow","version":"0.23.1","files":["/package.json"]},{"name":"@lexical/react","version":"0.23.1","files":["/package.json"]},{"name":"@lexical/rich-text","version":"0.23.1","files":["/package.json"]},{"name":"@lexical/selection","version":"0.23.1","files":["/package.json"]},{"name":"@lexical/text","version":"0.23.1","files":["/package.json"]},{"name":"@lexical/utils","version":"0.23.1","files":["/package.json"]},{"name":"@material-design-icons/svg","version":"0.14.13","files":["/packages/app-audit-logs/package.json"]},{"name":"@material-symbols/svg-400","version":"0.4.1","files":["/packages/app-audit-logs/package.json"]},{"name":"@octokit/rest","version":"20.0.2","files":["/package.json"]},{"name":"@svgr/webpack","version":"6.1.1","files":["/packages/app-file-manager/package.json"]},{"name":"@testing-library/cypress","version":"10.0.0","files":["/cypress-tests/package.json"]},{"name":"@testing-library/react","version":"15.0.7","files":["/packages/form/package.json","/packages/react-composition/package.json","/packages/react-properties/package.json","/packages/react-rich-text-lexical-renderer/package.json","/packages/ui/package.json"]},{"name":"@testing-library/user-event","version":"14.5.2","files":["/packages/form/package.json"]},{"name":"@types/accept-language-parser","version":"1.5.3","files":["/packages/api-i18n/package.json"]},{"name":"@types/accounting","version":"0.4.2","files":["/packages/i18n/package.json"]},{"name":"@types/adm-zip","version":"0.5.5","files":["/packages/api-headless-cms-import-export/package.json"]},{"name":"@types/aos","version":"3.0.4","files":["/packages/app-page-builder/package.json"]},{"name":"@types/archiver","version":"5.3.1","files":["/packages/api-page-builder-import-export/package.json"]},{"name":"@types/babel__code-frame","version":"7.0.6","files":["/packages/api-headless-cms/package.json"]},{"name":"@types/bytes","version":"3.1.4","files":["/packages/app-admin/package.json"]},{"name":"@types/center-align","version":"1.0.0","files":["/packages/data-migration/package.json"]},{"name":"@types/crypto-js","version":"4.2.2","files":["/packages/api-mailer/package.json"]},{"name":"@types/extract-zip","version":"1.6.2","files":["/packages/api-page-builder/package.json"]},{"name":"@types/facepaint","version":"1.2.2","files":["/packages/app-page-builder-elements/package.json"]},{"name":"@types/folder-hash","version":"4.0.4","files":["/scripts/buildPackages/package.json"]},{"name":"@types/fs-extra","version":"11.0.4","files":["/package.json"]},{"name":"@types/graphlib","version":"2.1.12","files":["/packages/app-admin/package.json"]},{"name":"@types/gtag.js","version":"0.0.20","files":["/packages/app-form-builder/package.json"]},{"name":"@types/humanize-duration","version":"3.27.4","files":["/packages/cli-plugin-deploy-pulumi/package.json"]},{"name":"@types/inquirer","version":"8.2.10","files":["/packages/cli-plugin-extensions/package.json","/packages/cli-plugin-scaffold/package.json","/packages/cli-plugin-scaffold-admin-app-module/package.json","/packages/cli-plugin-scaffold-ci/package.json","/packages/cli-plugin-scaffold-extensions/package.json","/packages/cli-plugin-scaffold-graphql-service/package.json","/packages/cli-plugin-scaffold-react-component/package.json","/packages/cli-plugin-scaffold-workspaces/package.json"]},{"name":"@types/invariant","version":"2.2.35","files":["/packages/form/package.json"]},{"name":"@types/is-hotkey","version":"0.1.10","files":["/packages/app-admin/package.json","/packages/app-page-builder/package.json"]},{"name":"@types/is-number","version":"7.0.5","files":["/packages/db-dynamodb/package.json"]},{"name":"@types/jest","version":"29.5.14","files":["/package.json","/packages/cwp-template-aws/template/ddb-es/dependencies.json","/packages/cwp-template-aws/template/ddb-os/dependencies.json","/packages/cwp-template-aws/template/ddb/dependencies.json"]},{"name":"@types/jsdom","version":"21.1.6","files":["/packages/lexical-converter/package.json"]},{"name":"@types/json2csv","version":"4.5.1","files":["/packages/api-form-builder/package.json","/packages/app-form-builder/package.json"]},{"name":"@types/jsonpack","version":"1.1.6","files":["/packages/api-headless-cms-ddb/package.json","/packages/api-headless-cms-ddb-es/package.json"]},{"name":"@types/jsonwebtoken","version":"9.0.2","files":["/packages/api-admin-users/package.json","/packages/api-cognito-authenticator/package.json","/packages/api-security/package.json","/packages/api-security-auth0/package.json","/packages/api-security-cognito/package.json"]},{"name":"@types/jwk-to-pem","version":"2.0.1","files":["/packages/api-cognito-authenticator/package.json","/packages/api-security-auth0/package.json"]},{"name":"@types/listr","version":"0.14.9","files":["/packages/cli-plugin-deploy-pulumi/package.json"]},{"name":"@types/lodash","version":"4.17.13","files":["/packages/app/package.json","/packages/app-cognito-authenticator/package.json","/packages/form/package.json","/packages/i18n/package.json","/packages/pulumi/package.json","/packages/pulumi-sdk/package.json","/packages/validation/package.json"]},{"name":"@types/md5","version":"2.3.2","files":["/packages/api-admin-users/package.json"]},{"name":"@types/ncp","version":"2.0.4","files":["/packages/cli-plugin-scaffold-admin-app-module/package.json","/packages/cli-plugin-scaffold-ci/package.json","/packages/cli-plugin-scaffold-extensions/package.json","/packages/cli-plugin-scaffold-graphql-service/package.json","/packages/cli-plugin-scaffold-react-component/package.json","/packages/cli-plugin-scaffold-workspaces/package.json"]},{"name":"@types/node","version":"20.17.10","files":["/package.json","/packages/cwp-template-aws/template/ddb-es/dependencies.json","/packages/cwp-template-aws/template/ddb-os/dependencies.json","/packages/cwp-template-aws/template/ddb/dependencies.json"]},{"name":"@types/node-fetch","version":"2.6.1","files":["/packages/api-cognito-authenticator/package.json","/packages/api-file-manager-s3/package.json","/packages/api-form-builder/package.json","/packages/api-page-builder/package.json","/packages/api-page-builder-import-export/package.json","/packages/api-security-auth0/package.json","/packages/api-security-okta/package.json"]},{"name":"@types/node-notifier","version":"8.0.5","files":["/packages/cli-plugin-deploy-pulumi/package.json"]},{"name":"@types/nodemailer","version":"6.4.17","files":["/packages/api-mailer/package.json"]},{"name":"@types/nprogress","version":"0.2.0","files":["/packages/ui/package.json"]},{"name":"@types/object-hash","version":"2.2.1","files":["/packages/api-prerendering-service/package.json"]},{"name":"@types/pako","version":"2.0.3","files":["/packages/app-page-builder/package.json"]},{"name":"@types/platform","version":"1.3.4","files":["/packages/app-page-builder/package.json"]},{"name":"@types/pluralize","version":"0.0.29","files":["/packages/cli-plugin-scaffold-admin-app-module/package.json","/packages/cli-plugin-scaffold-ci/package.json","/packages/cli-plugin-scaffold-extensions/package.json","/packages/cli-plugin-scaffold-graphql-service/package.json","/packages/cli-plugin-scaffold-react-component/package.json","/packages/cli-plugin-scaffold-workspaces/package.json"]},{"name":"@types/prettier","version":"2.7.3","files":["/package.json"]},{"name":"@types/react","version":"18.2.79","files":["/package.json","/packages/app-aco/package.json","/packages/app-audit-logs/package.json","/packages/app-headless-cms-common/package.json","/packages/app-mailer/package.json","/packages/app-page-builder-elements/package.json","/packages/app-theme/package.json","/packages/app-trash-bin/package.json","/packages/cli-plugin-scaffold-react-component/template/package.json","/packages/cwp-template-aws/template/ddb-es/dependencies.json","/packages/cwp-template-aws/template/ddb-os/dependencies.json","/packages/cwp-template-aws/template/ddb/dependencies.json","/packages/theme/package.json"]},{"name":"@types/react-color","version":"2.17.11","files":["/packages/lexical-editor-actions/package.json","/packages/ui/package.json"]},{"name":"@types/react-custom-scrollbars","version":"4.0.10","files":["/packages/ui/package.json"]},{"name":"@types/react-dom","version":"18.2.25","files":["/package.json","/packages/cwp-template-aws/template/ddb-es/dependencies.json","/packages/cwp-template-aws/template/ddb-os/dependencies.json","/packages/cwp-template-aws/template/ddb/dependencies.json"]},{"name":"@types/react-google-recaptcha","version":"1.1.2","files":["/packages/app-form-builder/package.json"]},{"name":"@types/react-hamburger-menu","version":"0.0.4","files":["/packages/cwp-template-aws/template/common/extensions/theme/package.json","/extensions/theme/package.json"]},{"name":"@types/react-helmet","version":"6.1.11","files":["/packages/app-admin-rmwc/package.json","/packages/app-security-access-management/package.json","/packages/cwp-template-aws/template/common/apps/website/package.json","/apps/website/package.json"]},{"name":"@types/react-images","version":"0.5.3","files":["/packages/app-page-builder/package.json"]},{"name":"@types/react-resizable","version":"3.0.8","files":["/packages/app-admin/package.json"]},{"name":"@types/react-transition-group","version":"4.4.4","files":["/packages/ui/package.json"]},{"name":"@types/react-virtualized","version":"9.21.16","files":["/packages/app-page-builder/package.json"]},{"name":"@types/resize-observer-browser","version":"0.1.4","files":["/packages/app-page-builder/package.json"]},{"name":"@types/rimraf","version":"3.0.2","files":["/packages/api-page-builder/package.json"]},{"name":"@types/sanitize-html","version":"2.9.0","files":["/packages/react-rich-text-renderer/package.json"]},{"name":"@types/semver","version":"7.3.4","files":["/packages/data-migration/package.json"]},{"name":"@types/store","version":"2.0.2","files":["/packages/app-admin/package.json","/packages/app-page-builder/package.json"]},{"name":"@types/uniqid","version":"5.3.2","files":["/packages/feature-flags/package.json","/packages/plugins/package.json"]},{"name":"@types/unzipper","version":"0.10.10","files":["/packages/api-headless-cms-import-export/package.json"]},{"name":"@types/validate-npm-package-name","version":"3.0.3","files":["/packages/cli-plugin-scaffold-ci/package.json","/packages/cli-plugin-scaffold-extensions/package.json","/packages/cli-plugin-scaffold-react-component/package.json","/packages/cli-plugin-scaffold-workspaces/package.json"]},{"name":"@types/warning","version":"3.0.0","files":["/packages/app/package.json"]},{"name":"@types/yargs","version":"17.0.8","files":["/scripts/buildPackages/package.json"]},{"name":"@types/yauzl","version":"2.9.2","files":["/packages/api-page-builder-import-export/package.json"]},{"name":"@typescript-eslint/eslint-plugin","version":"6.21.0","files":["/package.json","/packages/cwp-template-aws/template/ddb-es/dependencies.json","/packages/cwp-template-aws/template/ddb-os/dependencies.json","/packages/cwp-template-aws/template/ddb/dependencies.json"]},{"name":"@typescript-eslint/parser","version":"6.21.0","files":["/package.json","/packages/cwp-template-aws/template/ddb-es/dependencies.json","/packages/cwp-template-aws/template/ddb-os/dependencies.json","/packages/cwp-template-aws/template/ddb/dependencies.json"]},{"name":"adio","version":"1.0.1","files":["/package.json"]},{"name":"adm-zip","version":"0.5.14","files":["/packages/api-headless-cms-import-export/package.json"]},{"name":"amazon-cognito-identity-js","version":"4.5.3","files":["/cypress-tests/package.json"]},{"name":"apollo-client","version":"2.6.10","files":["/packages/app-aco/package.json","/packages/app-trash-bin/package.json"]},{"name":"apollo-graphql","version":"0.9.5","files":["/packages/api-admin-settings/package.json","/packages/api-headless-cms/package.json"]},{"name":"apollo-link","version":"1.2.14","files":["/packages/app-aco/package.json","/packages/app-trash-bin/package.json"]},{"name":"aws-sdk-client-mock","version":"4.1.0","files":["/packages/api-headless-cms-import-export/package.json"]},{"name":"axios","version":"1.7.9","files":["/package.json"]},{"name":"babel-jest","version":"29.7.0","files":["/package.json"]},{"name":"babel-loader","version":"9.2.1","files":["/package.json","/packages/ui/package.json"]},{"name":"babel-plugin-dynamic-import-node","version":"2.3.3","files":["/package.json","/packages/cwp-template-aws/template/ddb-es/dependencies.json","/packages/cwp-template-aws/template/ddb-os/dependencies.json","/packages/cwp-template-aws/template/ddb/dependencies.json"]},{"name":"babel-plugin-macros","version":"3.1.0","files":["/package.json"]},{"name":"babel-plugin-module-resolver","version":"5.0.2","files":["/package.json","/packages/app-headless-cms/package.json","/packages/app-headless-cms-common/package.json","/packages/cwp-template-aws/template/ddb-es/dependencies.json","/packages/cwp-template-aws/template/ddb-os/dependencies.json","/packages/cwp-template-aws/template/ddb/dependencies.json"]},{"name":"babel-plugin-named-asset-import","version":"1.0.0-next.3e165448","files":["/packages/app-admin-rmwc/package.json","/packages/app-serverless-cms/package.json","/packages/app-theme-manager/package.json"]},{"name":"bytes","version":"3.1.2","files":["/packages/api-page-builder/package.json"]},{"name":"chalk","version":"4.1.2","files":["/package.json","/packages/cli-plugin-extensions/package.json","/packages/cli-plugin-scaffold/package.json","/packages/cwp-template-aws/template/ddb-es/dependencies.json","/packages/cwp-template-aws/template/ddb-os/dependencies.json","/packages/cwp-template-aws/template/ddb/dependencies.json","/packages/pulumi-aws/package.json"]},{"name":"cross-env","version":"5.2.1","files":["/package.json","/packages/cwp-template-aws/template/common/apps/admin/package.json","/packages/cwp-template-aws/template/common/apps/website/package.json","/packages/cwp-template-aws/template/ddb-es/dependencies.json","/packages/cwp-template-aws/template/ddb-os/dependencies.json","/packages/cwp-template-aws/template/ddb/dependencies.json","/apps/admin/package.json","/apps/website/package.json"]},{"name":"cross-spawn","version":"6.0.6","files":["/package.json"]},{"name":"csvtojson","version":"2.0.10","files":["/packages/api-form-builder/package.json","/packages/api-form-builder-so-ddb/package.json","/packages/api-form-builder-so-ddb-es/package.json"]},{"name":"cypress","version":"13.16.0","files":["/cypress-tests/package.json"]},{"name":"cypress-image-snapshot","version":"4.0.1","files":["/cypress-tests/package.json"]},{"name":"cypress-mailosaur","version":"2.7.0","files":["/cypress-tests/package.json"]},{"name":"cypress-wait-until","version":"1.7.1","files":["/cypress-tests/package.json"]},{"name":"deepmerge","version":"4.3.1","files":["/package.json"]},{"name":"del","version":"6.0.0","files":["/cypress-tests/package.json"]},{"name":"dotenv","version":"8.2.0","files":["/packages/cwp-template-aws/package.json"]},{"name":"elastic-ts","version":"0.12.0","files":["/packages/migrations/package.json"]},{"name":"elliptic","version":"6.6.1","files":["/package.json"]},{"name":"env-ci","version":"2.0.1","files":["/package.json"]},{"name":"eslint","version":"8.57.1","files":["/package.json","/packages/cwp-template-aws/template/ddb-es/dependencies.json","/packages/cwp-template-aws/template/ddb-os/dependencies.json","/packages/cwp-template-aws/template/ddb/dependencies.json"]},{"name":"eslint-config-standard","version":"16.0.3","files":["/package.json","/packages/cwp-template-aws/template/ddb-es/dependencies.json","/packages/cwp-template-aws/template/ddb-os/dependencies.json","/packages/cwp-template-aws/template/ddb/dependencies.json"]},{"name":"eslint-import-resolver-babel-module","version":"5.3.2","files":["/package.json","/packages/cwp-template-aws/template/ddb-es/dependencies.json","/packages/cwp-template-aws/template/ddb-os/dependencies.json","/packages/cwp-template-aws/template/ddb/dependencies.json"]},{"name":"eslint-plugin-import","version":"2.27.5","files":["/package.json","/packages/cwp-template-aws/template/ddb-es/dependencies.json","/packages/cwp-template-aws/template/ddb-os/dependencies.json","/packages/cwp-template-aws/template/ddb/dependencies.json"]},{"name":"eslint-plugin-jest","version":"25.7.0","files":["/package.json","/packages/cwp-template-aws/template/ddb-es/dependencies.json","/packages/cwp-template-aws/template/ddb-os/dependencies.json","/packages/cwp-template-aws/template/ddb/dependencies.json"]},{"name":"eslint-plugin-lodash","version":"7.4.0","files":["/package.json"]},{"name":"eslint-plugin-node","version":"11.1.0","files":["/package.json","/packages/cwp-template-aws/template/ddb-es/dependencies.json","/packages/cwp-template-aws/template/ddb-os/dependencies.json","/packages/cwp-template-aws/template/ddb/dependencies.json"]},{"name":"eslint-plugin-promise","version":"5.2.0","files":["/package.json","/packages/cwp-template-aws/template/ddb-es/dependencies.json","/packages/cwp-template-aws/template/ddb-os/dependencies.json","/packages/cwp-template-aws/template/ddb/dependencies.json"]},{"name":"eslint-plugin-react","version":"7.32.2","files":["/package.json","/packages/cwp-template-aws/template/ddb-es/dependencies.json","/packages/cwp-template-aws/template/ddb-os/dependencies.json","/packages/cwp-template-aws/template/ddb/dependencies.json"]},{"name":"eslint-plugin-standard","version":"5.0.0","files":["/package.json","/packages/cwp-template-aws/template/ddb-es/dependencies.json","/packages/cwp-template-aws/template/ddb-os/dependencies.json","/packages/cwp-template-aws/template/ddb/dependencies.json"]},{"name":"execa","version":"5.1.1","files":["/package.json","/packages/app-audit-logs/package.json","/packages/app-page-builder/package.json","/packages/app-page-builder-elements/package.json","/packages/app-theme/package.json","/packages/cli-plugin-dependencies/package.json","/packages/cli-plugin-extensions/package.json","/packages/cli-plugin-scaffold/package.json","/packages/cwp-template-aws/template/ddb-es/dependencies.json","/packages/cwp-template-aws/template/ddb-os/dependencies.json","/packages/cwp-template-aws/template/ddb/dependencies.json","/packages/theme/package.json","/packages/ui/package.json"]},{"name":"fast-glob","version":"3.2.7","files":["/packages/cli-plugin-extensions/package.json","/packages/cli-plugin-scaffold/package.json"]},{"name":"find-up","version":"5.0.0","files":["/packages/cli-plugin-extensions/package.json","/packages/cli-plugin-scaffold/package.json"]},{"name":"folder-hash","version":"4.0.4","files":["/package.json"]},{"name":"fs-extra","version":"11.2.0","files":["/package.json","/packages/api-form-builder/package.json"]},{"name":"get-stream","version":"3.0.0","files":["/package.json"]},{"name":"get-yarn-workspaces","version":"1.0.2","files":["/package.json"]},{"name":"git-cz","version":"1.7.1","files":["/package.json"]},{"name":"github-actions-wac","version":"1.4.1","files":["/package.json"]},{"name":"glob","version":"7.2.3","files":["/package.json","/packages/i18n/package.json"]},{"name":"graphql","version":"15.9.0","files":["/package.json","/packages/api-aco/package.json","/packages/api-apw/package.json","/packages/api-audit-logs/package.json","/packages/api-file-manager-aco/package.json","/packages/api-headless-cms/package.json","/packages/api-headless-cms-aco/package.json","/packages/api-headless-cms-bulk-actions/package.json","/packages/api-headless-cms-import-export/package.json","/packages/api-mailer/package.json","/packages/api-page-builder-aco/package.json","/packages/api-page-builder-so-ddb-es/package.json","/packages/api-record-locking/package.json","/packages/api-serverless-cms/package.json","/packages/api-websockets/package.json"]},{"name":"graphql-request","version":"3.7.0","files":["/cypress-tests/package.json","/apps/api/graphql/package.json"]},{"name":"husky","version":"4.2.5","files":["/package.json"]},{"name":"identity-obj-proxy","version":"3.0.0","files":["/packages/react-rich-text-lexical-renderer/package.json"]},{"name":"inquirer","version":"8.2.6","files":["/package.json"]},{"name":"inquirer-autocomplete-prompt","version":"1.0.1","files":["/package.json"]},{"name":"inquirer-checkbox-plus-prompt","version":"1.0.1","files":["/package.json"]},{"name":"inquirer-maxlength-input-prompt","version":"1.0.0","files":["/package.json"]},{"name":"jest","version":"29.7.0","files":["/package.json","/packages/api-admin-settings/package.json","/packages/api-admin-users-so-ddb/package.json","/packages/api-apw/package.json","/packages/api-apw-scheduler-so-ddb/package.json","/packages/api-file-manager/package.json","/packages/api-file-manager-ddb/package.json","/packages/api-form-builder/package.json","/packages/api-form-builder-so-ddb/package.json","/packages/api-form-builder-so-ddb-es/package.json","/packages/api-headless-cms/package.json","/packages/api-headless-cms-ddb/package.json","/packages/api-headless-cms-ddb-es/package.json","/packages/api-i18n/package.json","/packages/api-i18n-ddb/package.json","/packages/api-log/package.json","/packages/api-mailer/package.json","/packages/api-page-builder/package.json","/packages/api-page-builder-import-export/package.json","/packages/api-page-builder-import-export-so-ddb/package.json","/packages/api-page-builder-so-ddb/package.json","/packages/api-page-builder-so-ddb-es/package.json","/packages/api-security-so-ddb/package.json","/packages/api-tenancy/package.json","/packages/api-tenancy-so-ddb/package.json","/packages/api-tenant-manager/package.json","/packages/api-theme-manager/package.json","/packages/cwp-template-aws/template/ddb-es/dependencies.json","/packages/cwp-template-aws/template/ddb-os/dependencies.json","/packages/cwp-template-aws/template/ddb/dependencies.json","/packages/data-migration/package.json","/packages/db-dynamodb/package.json","/packages/handler-client/package.json","/packages/handler-graphql/package.json","/packages/validation/package.json"]},{"name":"jest-dynalite","version":"3.6.1","files":["/packages/api-admin-settings/package.json","/packages/api-admin-users-so-ddb/package.json","/packages/api-apw-scheduler-so-ddb/package.json","/packages/api-authentication/package.json","/packages/api-file-manager-ddb/package.json","/packages/api-form-builder/package.json","/packages/api-form-builder-so-ddb/package.json","/packages/api-form-builder-so-ddb-es/package.json","/packages/api-headless-cms-ddb/package.json","/packages/api-headless-cms-ddb-es/package.json","/packages/api-i18n-ddb/package.json","/packages/api-log/package.json","/packages/api-mailer/package.json","/packages/api-page-builder-import-export/package.json","/packages/api-page-builder-import-export-so-ddb/package.json","/packages/api-page-builder-so-ddb/package.json","/packages/api-page-builder-so-ddb-es/package.json","/packages/api-prerendering-service-so-ddb/package.json","/packages/api-security-so-ddb/package.json","/packages/api-tenancy/package.json","/packages/api-tenancy-so-ddb/package.json","/packages/api-tenant-manager/package.json","/packages/api-wcp/package.json","/packages/data-migration/package.json","/packages/db-dynamodb/package.json","/packages/migrations/package.json","/packages/project-utils/package.json"]},{"name":"jest-environment-jsdom","version":"29.7.0","files":["/package.json"]},{"name":"jest-extended","version":"4.0.2","files":["/package.json"]},{"name":"jest-mock-console","version":"2.0.0","files":["/packages/data-migration/package.json","/packages/handler-graphql/package.json"]},{"name":"jsdom","version":"25.0.1","files":["/packages/lexical-converter/package.json"]},{"name":"jsonpack","version":"1.1.5","files":["/packages/api-file-manager-ddb/package.json"]},{"name":"lerna","version":"8.1.2","files":["/package.json"]},{"name":"lexical","version":"0.23.1","files":["/package.json"]},{"name":"lint-staged","version":"15.3.0","files":["/package.json"]},{"name":"listr","version":"0.14.3","files":["/package.json"]},{"name":"listr2","version":"5.0.8","files":["/packages/project-utils/package.json"]},{"name":"load-json-file","version":"6.2.0","files":["/package.json","/packages/project-utils/package.json"]},{"name":"lodash","version":"4.17.21","files":["/package.json","/cypress-tests/package.json"]},{"name":"longest","version":"2.0.1","files":["/package.json"]},{"name":"md5","version":"2.3.0","files":["/packages/api-security-cognito/package.json"]},{"name":"merge","version":"2.1.1","files":["/packages/cwp-template-aws/template/ddb-es/dependencies.json","/packages/cwp-template-aws/template/ddb-os/dependencies.json","/packages/cwp-template-aws/template/ddb/dependencies.json"]},{"name":"micromatch","version":"4.0.8","files":["/package.json"]},{"name":"mime","version":"3.0.0","files":["/packages/pulumi-aws/package.json"]},{"name":"minimatch","version":"5.1.6","files":["/package.json"]},{"name":"mobx","version":"6.9.0","files":["/packages/form/package.json"]},{"name":"mobx-react-lite","version":"3.4.3","files":["/packages/form/package.json"]},{"name":"monaco-editor","version":"0.52.2","files":["/packages/app-admin/package.json"]},{"name":"nanoid","version":"3.3.8","files":["/package.json","/cypress-tests/package.json"]},{"name":"ncp","version":"2.0.0","files":["/packages/ui/package.json"]},{"name":"node-fetch","version":"2.6.7","files":["/package.json","/cypress-tests/package.json"]},{"name":"pino","version":"8.21.0","files":["/packages/logger/package.json","/packages/project-utils/package.json"]},{"name":"pino-pretty","version":"9.4.0","files":["/packages/project-utils/package.json"]},{"name":"pm2","version":"5.4.3","files":["/package.json"]},{"name":"prettier","version":"2.8.8","files":["/package.json","/packages/api-aco/package.json","/packages/api-admin-settings/package.json","/packages/api-apw/package.json","/packages/api-headless-cms/package.json","/packages/api-headless-cms-ddb-es/package.json","/packages/api-page-builder/package.json","/packages/api-prerendering-service/package.json","/packages/api-prerendering-service-so-ddb/package.json","/packages/cli-plugin-dependencies/package.json","/packages/cli-plugin-extensions/package.json","/packages/cli-plugin-scaffold/package.json","/packages/cwp-template-aws/template/ddb-es/dependencies.json","/packages/cwp-template-aws/template/ddb-os/dependencies.json","/packages/cwp-template-aws/template/ddb/dependencies.json","/packages/react-properties/package.json","/packages/react-rich-text-lexical-renderer/package.json"]},{"name":"raw-loader","version":"4.0.2","files":["/packages/ui/package.json"]},{"name":"react","version":"18.2.0","files":["/packages/lexical-nodes/package.json"]},{"name":"rimraf","version":"6.0.1","files":["/packages/api/package.json","/packages/api-aco/package.json","/packages/api-admin-settings/package.json","/packages/api-admin-users/package.json","/packages/api-admin-users-so-ddb/package.json","/packages/api-apw/package.json","/packages/api-apw-scheduler-so-ddb/package.json","/packages/api-authentication/package.json","/packages/api-authentication-cognito/package.json","/packages/api-background-tasks-ddb/package.json","/packages/api-background-tasks-es/package.json","/packages/api-background-tasks-os/package.json","/packages/api-cognito-authenticator/package.json","/packages/api-elasticsearch/package.json","/packages/api-elasticsearch-tasks/package.json","/packages/api-file-manager/package.json","/packages/api-file-manager-ddb/package.json","/packages/api-file-manager-s3/package.json","/packages/api-form-builder/package.json","/packages/api-form-builder-so-ddb/package.json","/packages/api-form-builder-so-ddb-es/package.json","/packages/api-headless-cms/package.json","/packages/api-headless-cms-ddb-es/package.json","/packages/api-i18n/package.json","/packages/api-i18n-content/package.json","/packages/api-i18n-ddb/package.json","/packages/api-log/package.json","/packages/api-mailer/package.json","/packages/api-page-builder/package.json","/packages/api-page-builder-import-export/package.json","/packages/api-page-builder-import-export-so-ddb/package.json","/packages/api-page-builder-so-ddb/package.json","/packages/api-page-builder-so-ddb-es/package.json","/packages/api-prerendering-service/package.json","/packages/api-prerendering-service-aws/package.json","/packages/api-prerendering-service-so-ddb/package.json","/packages/api-record-locking/package.json","/packages/api-security/package.json","/packages/api-security-auth0/package.json","/packages/api-security-cognito/package.json","/packages/api-security-okta/package.json","/packages/api-security-so-ddb/package.json","/packages/api-serverless-cms/package.json","/packages/api-tenancy/package.json","/packages/api-tenancy-so-ddb/package.json","/packages/api-tenant-manager/package.json","/packages/api-theme-manager/package.json","/packages/api-wcp/package.json","/packages/api-websockets/package.json","/packages/app/package.json","/packages/app-aco/package.json","/packages/app-admin/package.json","/packages/app-admin-auth0/package.json","/packages/app-admin-cognito/package.json","/packages/app-admin-okta/package.json","/packages/app-admin-rmwc/package.json","/packages/app-admin-users-cognito/package.json","/packages/app-apw/package.json","/packages/app-audit-logs/package.json","/packages/app-cognito-authenticator/package.json","/packages/app-dynamic-pages/package.json","/packages/app-file-manager/package.json","/packages/app-file-manager-s3/package.json","/packages/app-form-builder/package.json","/packages/app-graphql-playground/package.json","/packages/app-headless-cms/package.json","/packages/app-headless-cms-common/package.json","/packages/app-i18n/package.json","/packages/app-i18n-content/package.json","/packages/app-mailer/package.json","/packages/app-page-builder/package.json","/packages/app-page-builder-elements/package.json","/packages/app-plugin-admin-welcome-screen/package.json","/packages/app-record-locking/package.json","/packages/app-security/package.json","/packages/app-security-access-management/package.json","/packages/app-serverless-cms/package.json","/packages/app-tenancy/package.json","/packages/app-tenant-manager/package.json","/packages/app-theme/package.json","/packages/app-theme-manager/package.json","/packages/app-trash-bin/package.json","/packages/app-wcp/package.json","/packages/app-website/package.json","/packages/app-websockets/package.json","/packages/aws-sdk/package.json","/packages/cli-plugin-dependencies/package.json","/packages/cli-plugin-deploy-pulumi/package.json","/packages/cli-plugin-extensions/package.json","/packages/cli-plugin-scaffold/package.json","/packages/cli-plugin-scaffold-admin-app-module/package.json","/packages/cli-plugin-scaffold-ci/package.json","/packages/cli-plugin-scaffold-extensions/package.json","/packages/cli-plugin-scaffold-graphql-service/package.json","/packages/cli-plugin-scaffold-react-component/package.json","/packages/cli-plugin-scaffold-react-component/template/package.json","/packages/cli-plugin-scaffold-workspaces/package.json","/packages/data-migration/package.json","/packages/db/package.json","/packages/db-dynamodb/package.json","/packages/error/package.json","/packages/feature-flags/package.json","/packages/form/package.json","/packages/handler/package.json","/packages/handler-aws/package.json","/packages/handler-client/package.json","/packages/handler-db/package.json","/packages/handler-graphql/package.json","/packages/i18n/package.json","/packages/i18n-react/package.json","/packages/logger/package.json","/packages/plugins/package.json","/packages/pubsub/package.json","/packages/pulumi/package.json","/packages/pulumi-aws/package.json","/packages/pulumi-sdk/package.json","/packages/react-rich-text-renderer/package.json","/packages/react-router/package.json","/packages/tasks/package.json","/packages/theme/package.json","/packages/ui/package.json","/packages/ui-composer/package.json","/packages/utils/package.json","/packages/validation/package.json","/packages/wcp/package.json"]},{"name":"semver","version":"7.6.3","files":["/package.json"]},{"name":"source-map-explorer","version":"2.5.3","files":["/apps/website/package.json"]},{"name":"ts-expect","version":"1.3.0","files":["/package.json"]},{"name":"ts-jest","version":"29.1.5","files":["/package.json","/packages/cwp-template-aws/template/ddb-es/dependencies.json","/packages/cwp-template-aws/template/ddb-os/dependencies.json","/packages/cwp-template-aws/template/ddb/dependencies.json"]},{"name":"ts-node","version":"10.9.2","files":["/package.json","/scripts/buildPackages/package.json","/scripts/prepublishOnly/package.json"]},{"name":"ttypescript","version":"1.5.15","files":["/packages/api-file-manager-aco/package.json","/packages/app-dynamic-pages/package.json"]},{"name":"type-fest","version":"4.14.0","files":["/package.json","/packages/api-elasticsearch-tasks/package.json","/packages/api-record-locking/package.json","/packages/cli-plugin-dependencies/package.json","/packages/tasks/package.json","/scripts/prepublishOnly/package.json"]},{"name":"typescript","version":"5.3.3","files":["/package.json","/packages/api/package.json","/packages/api-aco/package.json","/packages/api-admin-settings/package.json","/packages/api-admin-users/package.json","/packages/api-admin-users-so-ddb/package.json","/packages/api-apw/package.json","/packages/api-apw-scheduler-so-ddb/package.json","/packages/api-audit-logs/package.json","/packages/api-authentication/package.json","/packages/api-authentication-cognito/package.json","/packages/api-background-tasks-ddb/package.json","/packages/api-background-tasks-es/package.json","/packages/api-background-tasks-os/package.json","/packages/api-cognito-authenticator/package.json","/packages/api-dynamodb-to-elasticsearch/package.json","/packages/api-elasticsearch/package.json","/packages/api-elasticsearch-tasks/package.json","/packages/api-file-manager/package.json","/packages/api-file-manager-ddb/package.json","/packages/api-file-manager-s3/package.json","/packages/api-form-builder/package.json","/packages/api-form-builder-so-ddb/package.json","/packages/api-form-builder-so-ddb-es/package.json","/packages/api-headless-cms/package.json","/packages/api-headless-cms-aco/package.json","/packages/api-headless-cms-bulk-actions/package.json","/packages/api-headless-cms-ddb/package.json","/packages/api-headless-cms-ddb-es/package.json","/packages/api-headless-cms-es-tasks/package.json","/packages/api-headless-cms-import-export/package.json","/packages/api-headless-cms-tasks/package.json","/packages/api-headless-cms-tasks-ddb-es/package.json","/packages/api-i18n/package.json","/packages/api-i18n-content/package.json","/packages/api-i18n-ddb/package.json","/packages/api-log/package.json","/packages/api-mailer/package.json","/packages/api-page-builder/package.json","/packages/api-page-builder-aco/package.json","/packages/api-page-builder-import-export/package.json","/packages/api-page-builder-import-export-so-ddb/package.json","/packages/api-page-builder-so-ddb/package.json","/packages/api-page-builder-so-ddb-es/package.json","/packages/api-prerendering-service/package.json","/packages/api-prerendering-service-aws/package.json","/packages/api-prerendering-service-so-ddb/package.json","/packages/api-record-locking/package.json","/packages/api-security/package.json","/packages/api-security-auth0/package.json","/packages/api-security-cognito/package.json","/packages/api-security-okta/package.json","/packages/api-security-so-ddb/package.json","/packages/api-serverless-cms/package.json","/packages/api-tenancy/package.json","/packages/api-tenancy-so-ddb/package.json","/packages/api-tenant-manager/package.json","/packages/api-theme-manager/package.json","/packages/api-wcp/package.json","/packages/api-websockets/package.json","/packages/app/package.json","/packages/app-aco/package.json","/packages/app-admin/package.json","/packages/app-admin-auth0/package.json","/packages/app-admin-cognito/package.json","/packages/app-admin-okta/package.json","/packages/app-admin-rmwc/package.json","/packages/app-admin-users-cognito/package.json","/packages/app-apw/package.json","/packages/app-audit-logs/package.json","/packages/app-cognito-authenticator/package.json","/packages/app-dynamic-pages/package.json","/packages/app-file-manager/package.json","/packages/app-file-manager-s3/package.json","/packages/app-form-builder/package.json","/packages/app-graphql-playground/package.json","/packages/app-headless-cms/package.json","/packages/app-headless-cms-common/package.json","/packages/app-i18n/package.json","/packages/app-i18n-content/package.json","/packages/app-mailer/package.json","/packages/app-page-builder/package.json","/packages/app-page-builder-elements/package.json","/packages/app-plugin-admin-welcome-screen/package.json","/packages/app-record-locking/package.json","/packages/app-security/package.json","/packages/app-security-access-management/package.json","/packages/app-serverless-cms/package.json","/packages/app-tenancy/package.json","/packages/app-tenant-manager/package.json","/packages/app-theme/package.json","/packages/app-theme-manager/package.json","/packages/app-trash-bin/package.json","/packages/app-utils/package.json","/packages/app-wcp/package.json","/packages/app-website/package.json","/packages/app-websockets/package.json","/packages/aws-sdk/package.json","/packages/cli-plugin-dependencies/package.json","/packages/cli-plugin-deploy-pulumi/package.json","/packages/cli-plugin-extensions/package.json","/packages/cli-plugin-scaffold/package.json","/packages/cli-plugin-scaffold-admin-app-module/package.json","/packages/cli-plugin-scaffold-ci/package.json","/packages/cli-plugin-scaffold-extensions/package.json","/packages/cli-plugin-scaffold-graphql-service/package.json","/packages/cli-plugin-scaffold-react-component/package.json","/packages/cli-plugin-scaffold-react-component/template/package.json","/packages/cli-plugin-scaffold-workspaces/package.json","/packages/cwp-template-aws/template/ddb-es/dependencies.json","/packages/cwp-template-aws/template/ddb-os/dependencies.json","/packages/cwp-template-aws/template/ddb/dependencies.json","/packages/data-migration/package.json","/packages/db/package.json","/packages/db-dynamodb/package.json","/packages/di-container/package.json","/packages/error/package.json","/packages/feature-flags/package.json","/packages/form/package.json","/packages/handler/package.json","/packages/handler-aws/package.json","/packages/handler-client/package.json","/packages/handler-db/package.json","/packages/handler-graphql/package.json","/packages/i18n/package.json","/packages/i18n-react/package.json","/packages/ioc/package.json","/packages/logger/package.json","/packages/migrations/package.json","/packages/plugins/package.json","/packages/pubsub/package.json","/packages/pulumi/package.json","/packages/pulumi-aws/package.json","/packages/pulumi-sdk/package.json","/packages/react-composition/package.json","/packages/react-rich-text-renderer/package.json","/packages/react-router/package.json","/packages/serverless-cms-aws/package.json","/packages/tasks/package.json","/packages/theme/package.json","/packages/ui/package.json","/packages/ui-composer/package.json","/packages/utils/package.json","/packages/validation/package.json","/packages/wcp/package.json","/cypress-tests/package.json"]},{"name":"typescript","version":"4.9.5","files":["/packages/api-file-manager-aco/package.json"]},{"name":"typescript-transform-paths","version":"3.5.3","files":["/package.json"]},{"name":"uniqid","version":"5.4.0","files":["/cypress-tests/package.json"]},{"name":"verdaccio","version":"6.0.5","files":["/package.json"]},{"name":"write-json-file","version":"4.3.0","files":["/package.json","/packages/api-headless-cms/package.json"]},{"name":"yargs","version":"17.7.2","files":["/package.json","/packages/project-utils/package.json"]},{"name":"zod","version":"3.23.8","files":["/packages/ioc/package.json"]}],"peerDependencies":[{"name":"@editorjs/editorjs","version":"2.26.5","files":["/packages/app-page-builder-elements/package.json"]},{"name":"aos","version":"2.3.4","files":["/packages/app-page-builder-elements/package.json"]},{"name":"minimatch","version":"5.1.6","files":["/packages/ui/package.json"]},{"name":"react","version":"18.2.0","files":["/packages/app-audit-logs/package.json","/packages/app-page-builder-elements/package.json","/packages/app-theme/package.json","/packages/form/package.json","/packages/i18n/package.json","/packages/i18n-react/package.json","/packages/react-router/package.json","/packages/theme/package.json","/packages/ui/package.json"]},{"name":"react-columned","version":"1.1.3","files":["/packages/app-page-builder-elements/package.json"]},{"name":"react-dom","version":"18.2.0","files":["/packages/ui/package.json"]},{"name":"react-google-recaptcha","version":"1.1.0","files":["/packages/app-page-builder-elements/package.json"]},{"name":"react-images","version":"0.5.19","files":["/packages/app-page-builder-elements/package.json"]},{"name":"swiper","version":"9.3.2","files":["/packages/app-page-builder-elements/package.json"]},{"name":"zod","version":"3.23.8","files":["/packages/utils/package.json"]}],"resolutions":[{"name":"@babel/runtime","version":"7.26.0","files":["/package.json"]},{"name":"@emotion/react","version":"11.10.8","files":["/package.json","/packages/cwp-template-aws/template/ddb-es/dependencies.json","/packages/cwp-template-aws/template/ddb-os/dependencies.json","/packages/cwp-template-aws/template/ddb/dependencies.json"]},{"name":"@grpc/grpc-js","version":"1.11.1","files":["/package.json"]},{"name":"@octokit/rest","version":"20.0.2","files":["/package.json"]},{"name":"@types/react","version":"18.2.79","files":["/package.json","/packages/cwp-template-aws/template/ddb-es/dependencies.json","/packages/cwp-template-aws/template/ddb-os/dependencies.json","/packages/cwp-template-aws/template/ddb/dependencies.json"]},{"name":"@types/react-dom","version":"18.2.25","files":["/package.json"]},{"name":"@types/webpack","version":"5.28.0","files":["/package.json"]},{"name":"postcss","version":"8.4.35","files":["/package.json"]},{"name":"react","version":"18.2.0","files":["/package.json","/packages/cwp-template-aws/template/ddb-es/dependencies.json","/packages/cwp-template-aws/template/ddb-os/dependencies.json","/packages/cwp-template-aws/template/ddb/dependencies.json"]},{"name":"react-dom","version":"18.2.0","files":["/package.json","/packages/cwp-template-aws/template/ddb-es/dependencies.json","/packages/cwp-template-aws/template/ddb-os/dependencies.json","/packages/cwp-template-aws/template/ddb/dependencies.json"]},{"name":"semver","version":"7.6.3","files":["/package.json"]},{"name":"systeminformation","version":"5.23.18","files":["/package.json"]},{"name":"tar","version":"6.2.1","files":["/package.json"]}],"references":[{"name":"@types/hoist-non-react-statics","versions":[{"version":"3.3.5","files":[{"file":"/package.json","types":["dependencies"]}]}]},{"name":"@babel/cli","versions":[{"version":"7.26.4","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-scaffold-react-component/template/package.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-es/dependencies.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-os/dependencies.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb/dependencies.json","types":["devDependencies"]},{"file":"/packages/project-utils/package.json","types":["dependencies"]}]}]},{"name":"@babel/code-frame","versions":[{"version":"7.26.2","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/api-headless-cms/package.json","types":["dependencies"]}]}]},{"name":"@babel/compat-data","versions":[{"version":"7.26.5","files":[{"file":"/package.json","types":["devDependencies"]}]}]},{"name":"@babel/core","versions":[{"version":"7.26.7","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-scaffold-react-component/template/package.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-es/dependencies.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-os/dependencies.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb/dependencies.json","types":["devDependencies"]},{"file":"/packages/project-utils/package.json","types":["dependencies"]}]}]},{"name":"@babel/helper-define-polyfill-provider","versions":[{"version":"0.6.3","files":[{"file":"/package.json","types":["devDependencies"]}]}]},{"name":"@babel/helper-environment-visitor","versions":[{"version":"7.24.7","files":[{"file":"/package.json","types":["devDependencies"]}]}]},{"name":"@babel/parser","versions":[{"version":"7.26.7","files":[{"file":"/package.json","types":["devDependencies"]}]}]},{"name":"@babel/plugin-proposal-class-properties","versions":[{"version":"7.18.6","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/project-utils/package.json","types":["dependencies"]}]}]},{"name":"@babel/plugin-proposal-object-rest-spread","versions":[{"version":"7.20.7","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/project-utils/package.json","types":["dependencies"]}]}]},{"name":"@babel/plugin-proposal-throw-expressions","versions":[{"version":"7.25.9","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/project-utils/package.json","types":["dependencies"]}]}]},{"name":"@babel/plugin-syntax-object-rest-spread","versions":[{"version":"7.8.3","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/project-utils/package.json","types":["dependencies"]}]}]},{"name":"@babel/plugin-transform-modules-commonjs","versions":[{"version":"7.26.3","files":[{"file":"/package.json","types":["devDependencies"]}]}]},{"name":"@babel/plugin-transform-runtime","versions":[{"version":"7.25.9","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-es/dependencies.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-os/dependencies.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb/dependencies.json","types":["devDependencies"]}]}]},{"name":"@babel/preset-env","versions":[{"version":"7.26.7","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-es/dependencies.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-os/dependencies.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb/dependencies.json","types":["devDependencies"]},{"file":"/packages/project-utils/package.json","types":["dependencies"]}]}]},{"name":"@babel/preset-react","versions":[{"version":"7.26.3","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-scaffold-react-component/template/package.json","types":["devDependencies"]},{"file":"/packages/project-utils/package.json","types":["dependencies"]}]}]},{"name":"@babel/preset-typescript","versions":[{"version":"7.26.0","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-scaffold-react-component/template/package.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-es/dependencies.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-os/dependencies.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb/dependencies.json","types":["devDependencies"]},{"file":"/packages/project-utils/package.json","types":["dependencies"]}]}]},{"name":"@babel/register","versions":[{"version":"7.25.9","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/i18n/package.json","types":["devDependencies"]}]}]},{"name":"@babel/runtime","versions":[{"version":"7.26.7","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-dependencies/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-extensions/package.json","types":["dependencies"]},{"file":"/packages/project-utils/package.json","types":["dependencies"]}]},{"version":"7.26.0","files":[{"file":"/package.json","types":["resolutions"]}]}]},{"name":"@babel/template","versions":[{"version":"7.25.9","files":[{"file":"/package.json","types":["devDependencies"]}]}]},{"name":"@babel/traverse","versions":[{"version":"7.26.7","files":[{"file":"/package.json","types":["devDependencies"]}]}]},{"name":"@babel/types","versions":[{"version":"7.26.7","files":[{"file":"/package.json","types":["devDependencies"]}]}]},{"name":"@commitlint/cli","versions":[{"version":"11.0.0","files":[{"file":"/package.json","types":["devDependencies"]}]}]},{"name":"@commitlint/config-conventional","versions":[{"version":"11.0.0","files":[{"file":"/package.json","types":["devDependencies"]}]}]},{"name":"@grpc/grpc-js","versions":[{"version":"1.11.1","files":[{"file":"/package.json","types":["devDependencies","resolutions"]}]}]},{"name":"@lexical/code","versions":[{"version":"0.23.1","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/lexical-editor/package.json","types":["dependencies"]},{"file":"/packages/lexical-nodes/package.json","types":["dependencies"]}]}]},{"name":"@lexical/hashtag","versions":[{"version":"0.23.1","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/lexical-nodes/package.json","types":["dependencies"]}]}]},{"name":"@lexical/headless","versions":[{"version":"0.23.1","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/lexical-converter/package.json","types":["dependencies"]}]}]},{"name":"@lexical/history","versions":[{"version":"0.23.1","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/lexical-editor/package.json","types":["dependencies"]},{"file":"/packages/lexical-nodes/package.json","types":["dependencies"]}]}]},{"name":"@lexical/html","versions":[{"version":"0.23.1","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/lexical-converter/package.json","types":["dependencies"]}]}]},{"name":"@lexical/list","versions":[{"version":"0.23.1","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/lexical-nodes/package.json","types":["dependencies"]}]}]},{"name":"@lexical/mark","versions":[{"version":"0.23.1","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/lexical-nodes/package.json","types":["dependencies"]}]}]},{"name":"@lexical/overflow","versions":[{"version":"0.23.1","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/lexical-nodes/package.json","types":["dependencies"]}]}]},{"name":"@lexical/react","versions":[{"version":"0.23.1","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/lexical-editor/package.json","types":["dependencies"]},{"file":"/packages/lexical-nodes/package.json","types":["dependencies"]}]}]},{"name":"@lexical/rich-text","versions":[{"version":"0.23.1","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/lexical-editor/package.json","types":["dependencies"]},{"file":"/packages/lexical-nodes/package.json","types":["dependencies"]}]}]},{"name":"@lexical/selection","versions":[{"version":"0.23.1","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/lexical-editor/package.json","types":["dependencies"]},{"file":"/packages/lexical-editor-actions/package.json","types":["dependencies"]},{"file":"/packages/lexical-nodes/package.json","types":["dependencies"]}]}]},{"name":"@lexical/text","versions":[{"version":"0.23.1","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/lexical-editor/package.json","types":["dependencies"]}]}]},{"name":"@lexical/utils","versions":[{"version":"0.23.1","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/app-headless-cms/package.json","types":["dependencies"]},{"file":"/packages/lexical-editor/package.json","types":["dependencies"]},{"file":"/packages/lexical-editor-pb-element/package.json","types":["dependencies"]},{"file":"/packages/lexical-nodes/package.json","types":["dependencies"]}]}]},{"name":"@octokit/rest","versions":[{"version":"20.0.2","files":[{"file":"/package.json","types":["devDependencies","resolutions"]}]}]},{"name":"@types/fs-extra","versions":[{"version":"11.0.4","files":[{"file":"/package.json","types":["devDependencies"]}]}]},{"name":"@types/jest","versions":[{"version":"29.5.14","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-es/dependencies.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-os/dependencies.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb/dependencies.json","types":["devDependencies"]}]}]},{"name":"@types/node","versions":[{"version":"20.17.10","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-es/dependencies.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-os/dependencies.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb/dependencies.json","types":["devDependencies"]}]}]},{"name":"@types/prettier","versions":[{"version":"2.7.3","files":[{"file":"/package.json","types":["devDependencies"]}]}]},{"name":"@types/react","versions":[{"version":"18.2.79","files":[{"file":"/package.json","types":["devDependencies","resolutions"]},{"file":"/packages/app/package.json","types":["dependencies"]},{"file":"/packages/app-aco/package.json","types":["devDependencies"]},{"file":"/packages/app-admin/package.json","types":["dependencies"]},{"file":"/packages/app-admin-rmwc/package.json","types":["dependencies"]},{"file":"/packages/app-apw/package.json","types":["dependencies"]},{"file":"/packages/app-audit-logs/package.json","types":["devDependencies"]},{"file":"/packages/app-dynamic-pages/package.json","types":["dependencies"]},{"file":"/packages/app-file-manager/package.json","types":["dependencies"]},{"file":"/packages/app-form-builder/package.json","types":["dependencies"]},{"file":"/packages/app-headless-cms/package.json","types":["dependencies"]},{"file":"/packages/app-headless-cms-common/package.json","types":["devDependencies"]},{"file":"/packages/app-i18n/package.json","types":["dependencies"]},{"file":"/packages/app-mailer/package.json","types":["devDependencies"]},{"file":"/packages/app-page-builder/package.json","types":["dependencies"]},{"file":"/packages/app-page-builder-elements/package.json","types":["devDependencies"]},{"file":"/packages/app-tenancy/package.json","types":["dependencies"]},{"file":"/packages/app-tenant-manager/package.json","types":["dependencies"]},{"file":"/packages/app-theme/package.json","types":["devDependencies"]},{"file":"/packages/app-theme-manager/package.json","types":["dependencies"]},{"file":"/packages/app-trash-bin/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-scaffold-react-component/template/package.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/common/apps/admin/package.json","types":["dependencies"]},{"file":"/packages/cwp-template-aws/template/common/apps/website/package.json","types":["dependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-es/dependencies.json","types":["devDependencies","resolutions"]},{"file":"/packages/cwp-template-aws/template/ddb-os/dependencies.json","types":["devDependencies","resolutions"]},{"file":"/packages/cwp-template-aws/template/ddb/dependencies.json","types":["devDependencies","resolutions"]},{"file":"/packages/react-composition/package.json","types":["dependencies"]},{"file":"/packages/react-properties/package.json","types":["dependencies"]},{"file":"/packages/react-rich-text-lexical-renderer/package.json","types":["dependencies"]},{"file":"/packages/react-rich-text-renderer/package.json","types":["dependencies"]},{"file":"/packages/theme/package.json","types":["devDependencies"]},{"file":"/apps/admin/package.json","types":["dependencies"]},{"file":"/apps/website/package.json","types":["dependencies"]}]}]},{"name":"@types/react-dom","versions":[{"version":"18.2.25","files":[{"file":"/package.json","types":["devDependencies","resolutions"]},{"file":"/packages/cwp-template-aws/template/ddb-es/dependencies.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-os/dependencies.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb/dependencies.json","types":["devDependencies"]}]}]},{"name":"@typescript-eslint/eslint-plugin","versions":[{"version":"6.21.0","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-es/dependencies.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-os/dependencies.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb/dependencies.json","types":["devDependencies"]}]}]},{"name":"@typescript-eslint/parser","versions":[{"version":"6.21.0","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-es/dependencies.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-os/dependencies.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb/dependencies.json","types":["devDependencies"]}]}]},{"name":"adio","versions":[{"version":"1.0.1","files":[{"file":"/package.json","types":["devDependencies"]}]}]},{"name":"axios","versions":[{"version":"1.7.9","files":[{"file":"/package.json","types":["devDependencies"]}]}]},{"name":"babel-jest","versions":[{"version":"29.7.0","files":[{"file":"/package.json","types":["devDependencies"]}]}]},{"name":"babel-loader","versions":[{"version":"9.2.1","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/project-utils/package.json","types":["dependencies"]},{"file":"/packages/ui/package.json","types":["devDependencies"]}]}]},{"name":"babel-plugin-dynamic-import-node","versions":[{"version":"2.3.3","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-es/dependencies.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-os/dependencies.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb/dependencies.json","types":["devDependencies"]}]}]},{"name":"babel-plugin-macros","versions":[{"version":"3.1.0","files":[{"file":"/package.json","types":["devDependencies"]}]}]},{"name":"babel-plugin-module-resolver","versions":[{"version":"5.0.2","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/app-headless-cms/package.json","types":["devDependencies"]},{"file":"/packages/app-headless-cms-common/package.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-es/dependencies.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-os/dependencies.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb/dependencies.json","types":["devDependencies"]}]}]},{"name":"chalk","versions":[{"version":"4.1.2","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/aws-layers/package.json","types":["dependencies"]},{"file":"/packages/cli/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-dependencies/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-deploy-pulumi/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-extensions/package.json","types":["dependencies","devDependencies"]},{"file":"/packages/cli-plugin-scaffold/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-scaffold-admin-app-module/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-scaffold-ci/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-scaffold-graphql-service/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-scaffold-react-component/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-workspaces/package.json","types":["dependencies"]},{"file":"/packages/create-webiny-project/package.json","types":["dependencies"]},{"file":"/packages/cwp-template-aws/package.json","types":["dependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-es/dependencies.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-os/dependencies.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb/dependencies.json","types":["devDependencies"]},{"file":"/packages/data-migration/package.json","types":["dependencies"]},{"file":"/packages/project-utils/package.json","types":["dependencies"]},{"file":"/packages/pulumi-aws/package.json","types":["devDependencies"]},{"file":"/packages/serverless-cms-aws/package.json","types":["dependencies"]},{"file":"/packages/system-requirements/package.json","types":["dependencies"]},{"file":"/scripts/buildPackages/package.json","types":["dependencies"]},{"file":"/scripts/prepublishOnly/package.json","types":["dependencies"]}]}]},{"name":"cross-env","versions":[{"version":"5.2.1","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/common/apps/admin/package.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/common/apps/website/package.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-es/dependencies.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-os/dependencies.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb/dependencies.json","types":["devDependencies"]},{"file":"/apps/admin/package.json","types":["devDependencies"]},{"file":"/apps/website/package.json","types":["devDependencies"]}]}]},{"name":"cross-spawn","versions":[{"version":"6.0.6","files":[{"file":"/package.json","types":["devDependencies"]}]}]},{"name":"deepmerge","versions":[{"version":"4.3.1","files":[{"file":"/package.json","types":["devDependencies"]}]}]},{"name":"elliptic","versions":[{"version":"6.6.1","files":[{"file":"/package.json","types":["devDependencies"]}]}]},{"name":"env-ci","versions":[{"version":"2.0.1","files":[{"file":"/package.json","types":["devDependencies"]}]}]},{"name":"eslint","versions":[{"version":"8.57.1","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-es/dependencies.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-os/dependencies.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb/dependencies.json","types":["devDependencies"]},{"file":"/packages/project-utils/package.json","types":["dependencies"]}]}]},{"name":"eslint-config-standard","versions":[{"version":"16.0.3","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-es/dependencies.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-os/dependencies.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb/dependencies.json","types":["devDependencies"]}]}]},{"name":"eslint-import-resolver-babel-module","versions":[{"version":"5.3.2","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-es/dependencies.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-os/dependencies.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb/dependencies.json","types":["devDependencies"]}]}]},{"name":"eslint-plugin-import","versions":[{"version":"2.27.5","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-es/dependencies.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-os/dependencies.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb/dependencies.json","types":["devDependencies"]}]}]},{"name":"eslint-plugin-jest","versions":[{"version":"25.7.0","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-es/dependencies.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-os/dependencies.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb/dependencies.json","types":["devDependencies"]}]}]},{"name":"eslint-plugin-lodash","versions":[{"version":"7.4.0","files":[{"file":"/package.json","types":["devDependencies"]}]}]},{"name":"eslint-plugin-node","versions":[{"version":"11.1.0","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-es/dependencies.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-os/dependencies.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb/dependencies.json","types":["devDependencies"]}]}]},{"name":"eslint-plugin-promise","versions":[{"version":"5.2.0","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-es/dependencies.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-os/dependencies.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb/dependencies.json","types":["devDependencies"]}]}]},{"name":"eslint-plugin-react","versions":[{"version":"7.32.2","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-es/dependencies.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-os/dependencies.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb/dependencies.json","types":["devDependencies"]}]}]},{"name":"eslint-plugin-standard","versions":[{"version":"5.0.0","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-es/dependencies.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-os/dependencies.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb/dependencies.json","types":["devDependencies"]}]}]},{"name":"execa","versions":[{"version":"5.1.1","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/app-audit-logs/package.json","types":["devDependencies"]},{"file":"/packages/app-page-builder/package.json","types":["devDependencies"]},{"file":"/packages/app-page-builder-elements/package.json","types":["devDependencies"]},{"file":"/packages/app-theme/package.json","types":["devDependencies"]},{"file":"/packages/cli/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-dependencies/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-deploy-pulumi/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-extensions/package.json","types":["dependencies","devDependencies"]},{"file":"/packages/cli-plugin-scaffold/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-scaffold-graphql-service/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-scaffold-react-component/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-scaffold-workspaces/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-workspaces/package.json","types":["dependencies"]},{"file":"/packages/create-webiny-project/package.json","types":["dependencies"]},{"file":"/packages/cwp-template-aws/package.json","types":["dependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-es/dependencies.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-os/dependencies.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb/dependencies.json","types":["devDependencies"]},{"file":"/packages/pulumi-sdk/package.json","types":["dependencies"]},{"file":"/packages/system-requirements/package.json","types":["dependencies"]},{"file":"/packages/theme/package.json","types":["devDependencies"]},{"file":"/packages/ui/package.json","types":["devDependencies"]},{"file":"/scripts/buildPackages/package.json","types":["dependencies"]}]}]},{"name":"folder-hash","versions":[{"version":"4.0.4","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/scripts/buildPackages/package.json","types":["dependencies"]}]}]},{"name":"fs-extra","versions":[{"version":"11.2.0","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/api-form-builder/package.json","types":["devDependencies"]},{"file":"/packages/api-page-builder/package.json","types":["dependencies"]},{"file":"/packages/api-page-builder-import-export/package.json","types":["dependencies"]},{"file":"/packages/cli/package.json","types":["dependencies"]},{"file":"/packages/create-webiny-project/package.json","types":["dependencies"]},{"file":"/packages/cwp-template-aws/package.json","types":["dependencies"]},{"file":"/packages/project-utils/package.json","types":["dependencies"]},{"file":"/packages/pulumi-sdk/package.json","types":["dependencies"]},{"file":"/scripts/buildPackages/package.json","types":["dependencies"]},{"file":"/scripts/prepublishOnly/package.json","types":["dependencies"]}]}]},{"name":"get-stream","versions":[{"version":"3.0.0","files":[{"file":"/package.json","types":["devDependencies"]}]}]},{"name":"get-yarn-workspaces","versions":[{"version":"1.0.2","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-dependencies/package.json","types":["dependencies"]},{"file":"/packages/cwp-template-aws/package.json","types":["dependencies"]},{"file":"/packages/project-utils/package.json","types":["dependencies"]},{"file":"/scripts/prepublishOnly/package.json","types":["dependencies"]}]}]},{"name":"git-cz","versions":[{"version":"1.7.1","files":[{"file":"/package.json","types":["devDependencies"]}]}]},{"name":"github-actions-wac","versions":[{"version":"1.4.1","files":[{"file":"/package.json","types":["devDependencies"]}]}]},{"name":"glob","versions":[{"version":"7.2.3","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-dependencies/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-extensions/package.json","types":["dependencies"]},{"file":"/packages/i18n/package.json","types":["devDependencies"]},{"file":"/packages/project-utils/package.json","types":["dependencies"]}]}]},{"name":"graphql","versions":[{"version":"15.9.0","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/api-aco/package.json","types":["devDependencies"]},{"file":"/packages/api-apw/package.json","types":["devDependencies"]},{"file":"/packages/api-audit-logs/package.json","types":["devDependencies"]},{"file":"/packages/api-file-manager-aco/package.json","types":["devDependencies"]},{"file":"/packages/api-headless-cms/package.json","types":["dependencies","devDependencies"]},{"file":"/packages/api-headless-cms-aco/package.json","types":["devDependencies"]},{"file":"/packages/api-headless-cms-bulk-actions/package.json","types":["devDependencies"]},{"file":"/packages/api-headless-cms-import-export/package.json","types":["devDependencies"]},{"file":"/packages/api-i18n-content/package.json","types":["dependencies"]},{"file":"/packages/api-mailer/package.json","types":["devDependencies"]},{"file":"/packages/api-page-builder-aco/package.json","types":["devDependencies"]},{"file":"/packages/api-page-builder-so-ddb-es/package.json","types":["devDependencies"]},{"file":"/packages/api-record-locking/package.json","types":["devDependencies"]},{"file":"/packages/api-serverless-cms/package.json","types":["devDependencies"]},{"file":"/packages/api-websockets/package.json","types":["devDependencies"]},{"file":"/packages/app/package.json","types":["dependencies"]},{"file":"/packages/app-aco/package.json","types":["dependencies"]},{"file":"/packages/app-admin/package.json","types":["dependencies"]},{"file":"/packages/app-admin-auth0/package.json","types":["dependencies"]},{"file":"/packages/app-admin-okta/package.json","types":["dependencies"]},{"file":"/packages/app-admin-users-cognito/package.json","types":["dependencies"]},{"file":"/packages/app-apw/package.json","types":["dependencies"]},{"file":"/packages/app-dynamic-pages/package.json","types":["dependencies"]},{"file":"/packages/app-file-manager/package.json","types":["dependencies"]},{"file":"/packages/app-form-builder/package.json","types":["dependencies"]},{"file":"/packages/app-graphql-playground/package.json","types":["dependencies"]},{"file":"/packages/app-headless-cms/package.json","types":["dependencies"]},{"file":"/packages/app-headless-cms-common/package.json","types":["dependencies"]},{"file":"/packages/app-i18n/package.json","types":["dependencies"]},{"file":"/packages/app-mailer/package.json","types":["dependencies"]},{"file":"/packages/app-page-builder/package.json","types":["dependencies"]},{"file":"/packages/app-tenant-manager/package.json","types":["dependencies"]},{"file":"/packages/app-theme-manager/package.json","types":["dependencies"]},{"file":"/packages/app-trash-bin/package.json","types":["dependencies"]},{"file":"/packages/cwp-template-aws/template/common/apps/website/package.json","types":["dependencies"]},{"file":"/packages/cwp-template-aws/template/common/extensions/theme/package.json","types":["dependencies"]},{"file":"/packages/handler-graphql/package.json","types":["dependencies"]},{"file":"/packages/react-router/package.json","types":["dependencies"]},{"file":"/apps/website/package.json","types":["dependencies"]},{"file":"/extensions/theme/package.json","types":["dependencies"]}]}]},{"name":"husky","versions":[{"version":"4.2.5","files":[{"file":"/package.json","types":["devDependencies"]}]}]},{"name":"inquirer","versions":[{"version":"8.2.6","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/cli/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-extensions/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-scaffold/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-scaffold-ci/package.json","types":["dependencies"]},{"file":"/packages/cwp-template-aws/package.json","types":["dependencies"]}]}]},{"name":"inquirer-autocomplete-prompt","versions":[{"version":"1.0.1","files":[{"file":"/package.json","types":["devDependencies"]}]}]},{"name":"inquirer-checkbox-plus-prompt","versions":[{"version":"1.0.1","files":[{"file":"/package.json","types":["devDependencies"]}]}]},{"name":"inquirer-maxlength-input-prompt","versions":[{"version":"1.0.0","files":[{"file":"/package.json","types":["devDependencies"]}]}]},{"name":"jest","versions":[{"version":"29.7.0","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/api-admin-settings/package.json","types":["devDependencies"]},{"file":"/packages/api-admin-users-so-ddb/package.json","types":["devDependencies"]},{"file":"/packages/api-apw/package.json","types":["devDependencies"]},{"file":"/packages/api-apw-scheduler-so-ddb/package.json","types":["devDependencies"]},{"file":"/packages/api-file-manager/package.json","types":["devDependencies"]},{"file":"/packages/api-file-manager-ddb/package.json","types":["devDependencies"]},{"file":"/packages/api-form-builder/package.json","types":["devDependencies"]},{"file":"/packages/api-form-builder-so-ddb/package.json","types":["devDependencies"]},{"file":"/packages/api-form-builder-so-ddb-es/package.json","types":["devDependencies"]},{"file":"/packages/api-headless-cms/package.json","types":["devDependencies"]},{"file":"/packages/api-headless-cms-ddb/package.json","types":["devDependencies"]},{"file":"/packages/api-headless-cms-ddb-es/package.json","types":["devDependencies"]},{"file":"/packages/api-i18n/package.json","types":["devDependencies"]},{"file":"/packages/api-i18n-ddb/package.json","types":["devDependencies"]},{"file":"/packages/api-log/package.json","types":["devDependencies"]},{"file":"/packages/api-mailer/package.json","types":["devDependencies"]},{"file":"/packages/api-page-builder/package.json","types":["devDependencies"]},{"file":"/packages/api-page-builder-import-export/package.json","types":["devDependencies"]},{"file":"/packages/api-page-builder-import-export-so-ddb/package.json","types":["devDependencies"]},{"file":"/packages/api-page-builder-so-ddb/package.json","types":["devDependencies"]},{"file":"/packages/api-page-builder-so-ddb-es/package.json","types":["devDependencies"]},{"file":"/packages/api-security-so-ddb/package.json","types":["devDependencies"]},{"file":"/packages/api-tenancy/package.json","types":["devDependencies"]},{"file":"/packages/api-tenancy-so-ddb/package.json","types":["devDependencies"]},{"file":"/packages/api-tenant-manager/package.json","types":["devDependencies"]},{"file":"/packages/api-theme-manager/package.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-es/dependencies.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-os/dependencies.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb/dependencies.json","types":["devDependencies"]},{"file":"/packages/data-migration/package.json","types":["devDependencies"]},{"file":"/packages/db-dynamodb/package.json","types":["devDependencies"]},{"file":"/packages/handler-client/package.json","types":["devDependencies"]},{"file":"/packages/handler-graphql/package.json","types":["devDependencies"]},{"file":"/packages/validation/package.json","types":["devDependencies"]}]}]},{"name":"jest-environment-jsdom","versions":[{"version":"29.7.0","files":[{"file":"/package.json","types":["devDependencies"]}]}]},{"name":"jest-extended","versions":[{"version":"4.0.2","files":[{"file":"/package.json","types":["devDependencies"]}]}]},{"name":"lerna","versions":[{"version":"8.1.2","files":[{"file":"/package.json","types":["devDependencies"]}]}]},{"name":"lexical","versions":[{"version":"0.23.1","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/lexical-converter/package.json","types":["dependencies"]},{"file":"/packages/lexical-editor/package.json","types":["dependencies"]},{"file":"/packages/lexical-nodes/package.json","types":["dependencies"]},{"file":"/packages/lexical-theme/package.json","types":["dependencies"]}]}]},{"name":"lint-staged","versions":[{"version":"15.3.0","files":[{"file":"/package.json","types":["devDependencies"]}]}]},{"name":"listr","versions":[{"version":"0.14.3","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-deploy-pulumi/package.json","types":["dependencies"]},{"file":"/packages/create-webiny-project/package.json","types":["dependencies"]}]}]},{"name":"load-json-file","versions":[{"version":"6.2.0","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/api-page-builder/package.json","types":["dependencies"]},{"file":"/packages/api-page-builder-import-export/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-dependencies/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-extensions/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-scaffold/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-scaffold-admin-app-module/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-scaffold-graphql-service/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-scaffold-react-component/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-scaffold-workspaces/package.json","types":["dependencies"]},{"file":"/packages/create-webiny-project/package.json","types":["dependencies"]},{"file":"/packages/cwp-template-aws/package.json","types":["dependencies"]},{"file":"/packages/global-config/package.json","types":["dependencies"]},{"file":"/packages/project-utils/package.json","types":["devDependencies"]},{"file":"/scripts/buildPackages/package.json","types":["dependencies"]},{"file":"/scripts/prepublishOnly/package.json","types":["dependencies"]}]}]},{"name":"lodash","versions":[{"version":"4.17.21","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/api-aco/package.json","types":["dependencies"]},{"file":"/packages/api-admin-users/package.json","types":["dependencies"]},{"file":"/packages/api-apw/package.json","types":["dependencies"]},{"file":"/packages/api-file-manager/package.json","types":["dependencies"]},{"file":"/packages/api-form-builder/package.json","types":["dependencies"]},{"file":"/packages/api-headless-cms/package.json","types":["dependencies"]},{"file":"/packages/api-headless-cms-ddb/package.json","types":["dependencies"]},{"file":"/packages/api-headless-cms-ddb-es/package.json","types":["dependencies"]},{"file":"/packages/api-mailer/package.json","types":["dependencies"]},{"file":"/packages/api-page-builder/package.json","types":["dependencies"]},{"file":"/packages/api-page-builder-aco/package.json","types":["dependencies"]},{"file":"/packages/api-page-builder-import-export/package.json","types":["dependencies"]},{"file":"/packages/api-page-builder-so-ddb-es/package.json","types":["dependencies"]},{"file":"/packages/api-prerendering-service/package.json","types":["dependencies"]},{"file":"/packages/api-prerendering-service-aws/package.json","types":["dependencies"]},{"file":"/packages/app/package.json","types":["dependencies"]},{"file":"/packages/app-aco/package.json","types":["dependencies"]},{"file":"/packages/app-admin/package.json","types":["dependencies"]},{"file":"/packages/app-admin-auth0/package.json","types":["dependencies"]},{"file":"/packages/app-admin-okta/package.json","types":["dependencies"]},{"file":"/packages/app-admin-rmwc/package.json","types":["dependencies"]},{"file":"/packages/app-admin-users-cognito/package.json","types":["dependencies"]},{"file":"/packages/app-apw/package.json","types":["dependencies"]},{"file":"/packages/app-audit-logs/package.json","types":["dependencies"]},{"file":"/packages/app-cognito-authenticator/package.json","types":["dependencies"]},{"file":"/packages/app-file-manager/package.json","types":["dependencies"]},{"file":"/packages/app-form-builder/package.json","types":["dependencies"]},{"file":"/packages/app-headless-cms/package.json","types":["dependencies"]},{"file":"/packages/app-headless-cms-common/package.json","types":["dependencies"]},{"file":"/packages/app-i18n/package.json","types":["dependencies"]},{"file":"/packages/app-page-builder/package.json","types":["dependencies"]},{"file":"/packages/app-page-builder-elements/package.json","types":["dependencies"]},{"file":"/packages/app-security-access-management/package.json","types":["dependencies"]},{"file":"/packages/app-tenant-manager/package.json","types":["dependencies"]},{"file":"/packages/app-theme-manager/package.json","types":["dependencies"]},{"file":"/packages/app-trash-bin/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-deploy-pulumi/package.json","types":["dependencies"]},{"file":"/packages/cwp-template-aws/package.json","types":["dependencies"]},{"file":"/packages/db-dynamodb/package.json","types":["dependencies"]},{"file":"/packages/form/package.json","types":["dependencies"]},{"file":"/packages/i18n/package.json","types":["dependencies"]},{"file":"/packages/i18n-react/package.json","types":["dependencies"]},{"file":"/packages/lexical-editor/package.json","types":["dependencies"]},{"file":"/packages/migrations/package.json","types":["dependencies"]},{"file":"/packages/project-utils/package.json","types":["dependencies"]},{"file":"/packages/pulumi/package.json","types":["dependencies"]},{"file":"/packages/pulumi-aws/package.json","types":["dependencies"]},{"file":"/packages/pulumi-sdk/package.json","types":["dependencies"]},{"file":"/packages/tasks/package.json","types":["dependencies"]},{"file":"/packages/ui/package.json","types":["dependencies"]},{"file":"/packages/validation/package.json","types":["dependencies"]},{"file":"/cypress-tests/package.json","types":["devDependencies"]},{"file":"/scripts/prepublishOnly/package.json","types":["dependencies"]}]}]},{"name":"longest","versions":[{"version":"2.0.1","files":[{"file":"/package.json","types":["devDependencies"]}]}]},{"name":"micromatch","versions":[{"version":"4.0.8","files":[{"file":"/package.json","types":["devDependencies"]}]}]},{"name":"minimatch","versions":[{"version":"5.1.6","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/api-security/package.json","types":["dependencies"]},{"file":"/packages/app/package.json","types":["dependencies"]},{"file":"/packages/app-file-manager/package.json","types":["dependencies"]},{"file":"/packages/app-security/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-deploy-pulumi/package.json","types":["dependencies"]},{"file":"/packages/data-migration/package.json","types":["dependencies"]},{"file":"/packages/ui/package.json","types":["peerDependencies"]}]}]},{"name":"nanoid","versions":[{"version":"3.3.8","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/app/package.json","types":["dependencies"]},{"file":"/packages/app-page-builder/package.json","types":["dependencies"]},{"file":"/packages/react-properties/package.json","types":["dependencies"]},{"file":"/packages/utils/package.json","types":["dependencies"]},{"file":"/cypress-tests/package.json","types":["devDependencies"]}]}]},{"name":"node-fetch","versions":[{"version":"2.6.7","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/api-cognito-authenticator/package.json","types":["dependencies"]},{"file":"/packages/api-file-manager-s3/package.json","types":["dependencies"]},{"file":"/packages/api-form-builder/package.json","types":["dependencies"]},{"file":"/packages/api-page-builder/package.json","types":["dependencies"]},{"file":"/packages/api-page-builder-import-export/package.json","types":["dependencies"]},{"file":"/packages/api-security-auth0/package.json","types":["dependencies"]},{"file":"/packages/api-security-okta/package.json","types":["dependencies"]},{"file":"/packages/api-wcp/package.json","types":["dependencies"]},{"file":"/packages/create-webiny-project/package.json","types":["dependencies"]},{"file":"/packages/pulumi-aws/package.json","types":["dependencies"]},{"file":"/packages/pulumi-sdk/package.json","types":["dependencies"]},{"file":"/packages/serverless-cms-aws/package.json","types":["dependencies"]},{"file":"/packages/wcp/package.json","types":["dependencies"]},{"file":"/cypress-tests/package.json","types":["devDependencies"]}]}]},{"name":"pm2","versions":[{"version":"5.4.3","files":[{"file":"/package.json","types":["devDependencies"]}]}]},{"name":"prettier","versions":[{"version":"2.8.8","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/api-aco/package.json","types":["devDependencies"]},{"file":"/packages/api-admin-settings/package.json","types":["devDependencies"]},{"file":"/packages/api-apw/package.json","types":["devDependencies"]},{"file":"/packages/api-headless-cms/package.json","types":["devDependencies"]},{"file":"/packages/api-headless-cms-ddb-es/package.json","types":["devDependencies"]},{"file":"/packages/api-page-builder/package.json","types":["devDependencies"]},{"file":"/packages/api-prerendering-service/package.json","types":["devDependencies"]},{"file":"/packages/api-prerendering-service-so-ddb/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-dependencies/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-extensions/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-scaffold/package.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-es/dependencies.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-os/dependencies.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb/dependencies.json","types":["devDependencies"]},{"file":"/packages/react-properties/package.json","types":["devDependencies"]},{"file":"/packages/react-rich-text-lexical-renderer/package.json","types":["devDependencies"]}]}]},{"name":"semver","versions":[{"version":"7.6.3","files":[{"file":"/package.json","types":["devDependencies","resolutions"]},{"file":"/packages/api-headless-cms/package.json","types":["dependencies"]},{"file":"/packages/cli/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-dependencies/package.json","types":["dependencies"]},{"file":"/packages/create-webiny-project/package.json","types":["dependencies"]},{"file":"/packages/data-migration/package.json","types":["dependencies"]},{"file":"/packages/pulumi-sdk/package.json","types":["dependencies"]},{"file":"/packages/system-requirements/package.json","types":["dependencies"]}]}]},{"name":"ts-expect","versions":[{"version":"1.3.0","files":[{"file":"/package.json","types":["devDependencies"]}]}]},{"name":"ts-jest","versions":[{"version":"29.1.5","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-es/dependencies.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-os/dependencies.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb/dependencies.json","types":["devDependencies"]}]}]},{"name":"ts-node","versions":[{"version":"10.9.2","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/scripts/buildPackages/package.json","types":["devDependencies"]},{"file":"/scripts/prepublishOnly/package.json","types":["devDependencies"]}]}]},{"name":"type-fest","versions":[{"version":"4.14.0","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/api-elasticsearch-tasks/package.json","types":["devDependencies"]},{"file":"/packages/api-record-locking/package.json","types":["devDependencies"]},{"file":"/packages/api-websockets/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-dependencies/package.json","types":["devDependencies"]},{"file":"/packages/db/package.json","types":["dependencies"]},{"file":"/packages/tasks/package.json","types":["devDependencies"]},{"file":"/scripts/prepublishOnly/package.json","types":["devDependencies"]}]}]},{"name":"typescript","versions":[{"version":"5.3.3","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/api/package.json","types":["devDependencies"]},{"file":"/packages/api-aco/package.json","types":["devDependencies"]},{"file":"/packages/api-admin-settings/package.json","types":["devDependencies"]},{"file":"/packages/api-admin-users/package.json","types":["devDependencies"]},{"file":"/packages/api-admin-users-so-ddb/package.json","types":["devDependencies"]},{"file":"/packages/api-apw/package.json","types":["devDependencies"]},{"file":"/packages/api-apw-scheduler-so-ddb/package.json","types":["devDependencies"]},{"file":"/packages/api-audit-logs/package.json","types":["devDependencies"]},{"file":"/packages/api-authentication/package.json","types":["devDependencies"]},{"file":"/packages/api-authentication-cognito/package.json","types":["devDependencies"]},{"file":"/packages/api-background-tasks-ddb/package.json","types":["devDependencies"]},{"file":"/packages/api-background-tasks-es/package.json","types":["devDependencies"]},{"file":"/packages/api-background-tasks-os/package.json","types":["devDependencies"]},{"file":"/packages/api-cognito-authenticator/package.json","types":["devDependencies"]},{"file":"/packages/api-dynamodb-to-elasticsearch/package.json","types":["devDependencies"]},{"file":"/packages/api-elasticsearch/package.json","types":["devDependencies"]},{"file":"/packages/api-elasticsearch-tasks/package.json","types":["devDependencies"]},{"file":"/packages/api-file-manager/package.json","types":["devDependencies"]},{"file":"/packages/api-file-manager-ddb/package.json","types":["devDependencies"]},{"file":"/packages/api-file-manager-s3/package.json","types":["devDependencies"]},{"file":"/packages/api-form-builder/package.json","types":["devDependencies"]},{"file":"/packages/api-form-builder-so-ddb/package.json","types":["devDependencies"]},{"file":"/packages/api-form-builder-so-ddb-es/package.json","types":["devDependencies"]},{"file":"/packages/api-headless-cms/package.json","types":["devDependencies"]},{"file":"/packages/api-headless-cms-aco/package.json","types":["devDependencies"]},{"file":"/packages/api-headless-cms-bulk-actions/package.json","types":["devDependencies"]},{"file":"/packages/api-headless-cms-ddb/package.json","types":["devDependencies"]},{"file":"/packages/api-headless-cms-ddb-es/package.json","types":["devDependencies"]},{"file":"/packages/api-headless-cms-es-tasks/package.json","types":["devDependencies"]},{"file":"/packages/api-headless-cms-import-export/package.json","types":["devDependencies"]},{"file":"/packages/api-headless-cms-tasks/package.json","types":["devDependencies"]},{"file":"/packages/api-headless-cms-tasks-ddb-es/package.json","types":["devDependencies"]},{"file":"/packages/api-i18n/package.json","types":["devDependencies"]},{"file":"/packages/api-i18n-content/package.json","types":["devDependencies"]},{"file":"/packages/api-i18n-ddb/package.json","types":["devDependencies"]},{"file":"/packages/api-log/package.json","types":["devDependencies"]},{"file":"/packages/api-mailer/package.json","types":["devDependencies"]},{"file":"/packages/api-page-builder/package.json","types":["devDependencies"]},{"file":"/packages/api-page-builder-aco/package.json","types":["devDependencies"]},{"file":"/packages/api-page-builder-import-export/package.json","types":["devDependencies"]},{"file":"/packages/api-page-builder-import-export-so-ddb/package.json","types":["devDependencies"]},{"file":"/packages/api-page-builder-so-ddb/package.json","types":["devDependencies"]},{"file":"/packages/api-page-builder-so-ddb-es/package.json","types":["devDependencies"]},{"file":"/packages/api-prerendering-service/package.json","types":["devDependencies"]},{"file":"/packages/api-prerendering-service-aws/package.json","types":["devDependencies"]},{"file":"/packages/api-prerendering-service-so-ddb/package.json","types":["devDependencies"]},{"file":"/packages/api-record-locking/package.json","types":["devDependencies"]},{"file":"/packages/api-security/package.json","types":["devDependencies"]},{"file":"/packages/api-security-auth0/package.json","types":["devDependencies"]},{"file":"/packages/api-security-cognito/package.json","types":["devDependencies"]},{"file":"/packages/api-security-okta/package.json","types":["devDependencies"]},{"file":"/packages/api-security-so-ddb/package.json","types":["devDependencies"]},{"file":"/packages/api-serverless-cms/package.json","types":["devDependencies"]},{"file":"/packages/api-tenancy/package.json","types":["devDependencies"]},{"file":"/packages/api-tenancy-so-ddb/package.json","types":["devDependencies"]},{"file":"/packages/api-tenant-manager/package.json","types":["devDependencies"]},{"file":"/packages/api-theme-manager/package.json","types":["devDependencies"]},{"file":"/packages/api-wcp/package.json","types":["devDependencies"]},{"file":"/packages/api-websockets/package.json","types":["devDependencies"]},{"file":"/packages/app/package.json","types":["devDependencies"]},{"file":"/packages/app-aco/package.json","types":["devDependencies"]},{"file":"/packages/app-admin/package.json","types":["devDependencies"]},{"file":"/packages/app-admin-auth0/package.json","types":["devDependencies"]},{"file":"/packages/app-admin-cognito/package.json","types":["devDependencies"]},{"file":"/packages/app-admin-okta/package.json","types":["devDependencies"]},{"file":"/packages/app-admin-rmwc/package.json","types":["devDependencies"]},{"file":"/packages/app-admin-users-cognito/package.json","types":["devDependencies"]},{"file":"/packages/app-apw/package.json","types":["devDependencies"]},{"file":"/packages/app-audit-logs/package.json","types":["devDependencies"]},{"file":"/packages/app-cognito-authenticator/package.json","types":["devDependencies"]},{"file":"/packages/app-dynamic-pages/package.json","types":["devDependencies"]},{"file":"/packages/app-file-manager/package.json","types":["devDependencies"]},{"file":"/packages/app-file-manager-s3/package.json","types":["devDependencies"]},{"file":"/packages/app-form-builder/package.json","types":["devDependencies"]},{"file":"/packages/app-graphql-playground/package.json","types":["devDependencies"]},{"file":"/packages/app-headless-cms/package.json","types":["devDependencies"]},{"file":"/packages/app-headless-cms-common/package.json","types":["devDependencies"]},{"file":"/packages/app-i18n/package.json","types":["devDependencies"]},{"file":"/packages/app-i18n-content/package.json","types":["devDependencies"]},{"file":"/packages/app-mailer/package.json","types":["devDependencies"]},{"file":"/packages/app-page-builder/package.json","types":["devDependencies"]},{"file":"/packages/app-page-builder-elements/package.json","types":["devDependencies"]},{"file":"/packages/app-plugin-admin-welcome-screen/package.json","types":["devDependencies"]},{"file":"/packages/app-record-locking/package.json","types":["devDependencies"]},{"file":"/packages/app-security/package.json","types":["devDependencies"]},{"file":"/packages/app-security-access-management/package.json","types":["devDependencies"]},{"file":"/packages/app-serverless-cms/package.json","types":["devDependencies"]},{"file":"/packages/app-tenancy/package.json","types":["devDependencies"]},{"file":"/packages/app-tenant-manager/package.json","types":["devDependencies"]},{"file":"/packages/app-theme/package.json","types":["devDependencies"]},{"file":"/packages/app-theme-manager/package.json","types":["devDependencies"]},{"file":"/packages/app-trash-bin/package.json","types":["devDependencies"]},{"file":"/packages/app-utils/package.json","types":["devDependencies"]},{"file":"/packages/app-wcp/package.json","types":["devDependencies"]},{"file":"/packages/app-website/package.json","types":["devDependencies"]},{"file":"/packages/app-websockets/package.json","types":["devDependencies"]},{"file":"/packages/aws-sdk/package.json","types":["devDependencies"]},{"file":"/packages/cli/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-dependencies/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-deploy-pulumi/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-extensions/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-scaffold/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-scaffold-admin-app-module/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-scaffold-ci/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-scaffold-extensions/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-scaffold-graphql-service/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-scaffold-react-component/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-scaffold-react-component/template/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-scaffold-workspaces/package.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-es/dependencies.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-os/dependencies.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb/dependencies.json","types":["devDependencies"]},{"file":"/packages/data-migration/package.json","types":["devDependencies"]},{"file":"/packages/db/package.json","types":["devDependencies"]},{"file":"/packages/db-dynamodb/package.json","types":["devDependencies"]},{"file":"/packages/di-container/package.json","types":["devDependencies"]},{"file":"/packages/error/package.json","types":["devDependencies"]},{"file":"/packages/feature-flags/package.json","types":["devDependencies"]},{"file":"/packages/form/package.json","types":["devDependencies"]},{"file":"/packages/handler/package.json","types":["devDependencies"]},{"file":"/packages/handler-aws/package.json","types":["devDependencies"]},{"file":"/packages/handler-client/package.json","types":["devDependencies"]},{"file":"/packages/handler-db/package.json","types":["devDependencies"]},{"file":"/packages/handler-graphql/package.json","types":["devDependencies"]},{"file":"/packages/i18n/package.json","types":["devDependencies"]},{"file":"/packages/i18n-react/package.json","types":["devDependencies"]},{"file":"/packages/ioc/package.json","types":["devDependencies"]},{"file":"/packages/logger/package.json","types":["devDependencies"]},{"file":"/packages/migrations/package.json","types":["devDependencies"]},{"file":"/packages/plugins/package.json","types":["devDependencies"]},{"file":"/packages/project-utils/package.json","types":["dependencies"]},{"file":"/packages/pubsub/package.json","types":["devDependencies"]},{"file":"/packages/pulumi/package.json","types":["devDependencies"]},{"file":"/packages/pulumi-aws/package.json","types":["devDependencies"]},{"file":"/packages/pulumi-sdk/package.json","types":["devDependencies"]},{"file":"/packages/react-composition/package.json","types":["devDependencies"]},{"file":"/packages/react-rich-text-renderer/package.json","types":["devDependencies"]},{"file":"/packages/react-router/package.json","types":["devDependencies"]},{"file":"/packages/serverless-cms-aws/package.json","types":["devDependencies"]},{"file":"/packages/tasks/package.json","types":["devDependencies"]},{"file":"/packages/theme/package.json","types":["devDependencies"]},{"file":"/packages/ui/package.json","types":["devDependencies"]},{"file":"/packages/ui-composer/package.json","types":["devDependencies"]},{"file":"/packages/utils/package.json","types":["devDependencies"]},{"file":"/packages/validation/package.json","types":["devDependencies"]},{"file":"/packages/wcp/package.json","types":["devDependencies"]},{"file":"/cypress-tests/package.json","types":["devDependencies"]}]},{"version":"4.9.5","files":[{"file":"/packages/api-file-manager-aco/package.json","types":["devDependencies"]}]}]},{"name":"typescript-transform-paths","versions":[{"version":"3.5.3","files":[{"file":"/package.json","types":["devDependencies"]}]}]},{"name":"verdaccio","versions":[{"version":"6.0.5","files":[{"file":"/package.json","types":["devDependencies"]}]}]},{"name":"write-json-file","versions":[{"version":"4.3.0","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/api-headless-cms/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-dependencies/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-extensions/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-scaffold/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-scaffold-graphql-service/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-scaffold-react-component/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-scaffold-workspaces/package.json","types":["dependencies"]},{"file":"/packages/create-webiny-project/package.json","types":["dependencies"]},{"file":"/packages/cwp-template-aws/package.json","types":["dependencies"]},{"file":"/packages/global-config/package.json","types":["dependencies"]},{"file":"/scripts/buildPackages/package.json","types":["dependencies"]},{"file":"/scripts/prepublishOnly/package.json","types":["dependencies"]}]}]},{"name":"yargs","versions":[{"version":"17.7.2","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/cli/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-deploy-pulumi/package.json","types":["dependencies"]},{"file":"/packages/create-webiny-project/package.json","types":["dependencies"]},{"file":"/packages/i18n/package.json","types":["dependencies"]},{"file":"/packages/project-utils/package.json","types":["devDependencies"]},{"file":"/scripts/buildPackages/package.json","types":["dependencies"]}]}]},{"name":"systeminformation","versions":[{"version":"5.23.18","files":[{"file":"/package.json","types":["resolutions"]}]}]},{"name":"@emotion/react","versions":[{"version":"11.10.8","files":[{"file":"/package.json","types":["resolutions"]},{"file":"/packages/app-aco/package.json","types":["dependencies"]},{"file":"/packages/app-admin/package.json","types":["dependencies"]},{"file":"/packages/app-apw/package.json","types":["dependencies"]},{"file":"/packages/app-audit-logs/package.json","types":["dependencies"]},{"file":"/packages/app-dynamic-pages/package.json","types":["dependencies"]},{"file":"/packages/app-file-manager/package.json","types":["dependencies"]},{"file":"/packages/app-form-builder/package.json","types":["dependencies"]},{"file":"/packages/app-graphql-playground/package.json","types":["dependencies"]},{"file":"/packages/app-headless-cms/package.json","types":["dependencies"]},{"file":"/packages/app-headless-cms-common/package.json","types":["dependencies"]},{"file":"/packages/app-i18n/package.json","types":["dependencies"]},{"file":"/packages/app-mailer/package.json","types":["dependencies"]},{"file":"/packages/app-page-builder/package.json","types":["dependencies"]},{"file":"/packages/app-page-builder-elements/package.json","types":["dependencies"]},{"file":"/packages/app-serverless-cms/package.json","types":["dependencies"]},{"file":"/packages/app-tenant-manager/package.json","types":["dependencies"]},{"file":"/packages/app-theme-manager/package.json","types":["dependencies"]},{"file":"/packages/app-wcp/package.json","types":["dependencies"]},{"file":"/packages/app-website/package.json","types":["dependencies"]},{"file":"/packages/cwp-template-aws/template/common/apps/website/package.json","types":["dependencies"]},{"file":"/packages/cwp-template-aws/template/common/extensions/theme/package.json","types":["dependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-es/dependencies.json","types":["resolutions"]},{"file":"/packages/cwp-template-aws/template/ddb-os/dependencies.json","types":["resolutions"]},{"file":"/packages/cwp-template-aws/template/ddb/dependencies.json","types":["resolutions"]},{"file":"/packages/lexical-editor/package.json","types":["dependencies"]},{"file":"/packages/lexical-theme/package.json","types":["dependencies"]},{"file":"/packages/react-rich-text-lexical-renderer/package.json","types":["devDependencies"]},{"file":"/packages/theme/package.json","types":["dependencies"]},{"file":"/packages/ui/package.json","types":["dependencies"]},{"file":"/apps/website/package.json","types":["dependencies"]},{"file":"/extensions/theme/package.json","types":["dependencies"]}]}]},{"name":"@types/webpack","versions":[{"version":"5.28.0","files":[{"file":"/package.json","types":["resolutions"]}]}]},{"name":"react","versions":[{"version":"18.2.0","files":[{"file":"/package.json","types":["resolutions"]},{"file":"/packages/app/package.json","types":["dependencies"]},{"file":"/packages/app-aco/package.json","types":["dependencies"]},{"file":"/packages/app-admin/package.json","types":["dependencies"]},{"file":"/packages/app-admin-auth0/package.json","types":["dependencies"]},{"file":"/packages/app-admin-cognito/package.json","types":["dependencies"]},{"file":"/packages/app-admin-okta/package.json","types":["dependencies"]},{"file":"/packages/app-admin-rmwc/package.json","types":["dependencies"]},{"file":"/packages/app-admin-users-cognito/package.json","types":["dependencies"]},{"file":"/packages/app-apw/package.json","types":["dependencies"]},{"file":"/packages/app-audit-logs/package.json","types":["peerDependencies"]},{"file":"/packages/app-cognito-authenticator/package.json","types":["dependencies"]},{"file":"/packages/app-dynamic-pages/package.json","types":["dependencies"]},{"file":"/packages/app-file-manager/package.json","types":["dependencies"]},{"file":"/packages/app-form-builder/package.json","types":["dependencies"]},{"file":"/packages/app-graphql-playground/package.json","types":["dependencies"]},{"file":"/packages/app-headless-cms/package.json","types":["dependencies"]},{"file":"/packages/app-headless-cms-common/package.json","types":["dependencies"]},{"file":"/packages/app-i18n/package.json","types":["dependencies"]},{"file":"/packages/app-i18n-content/package.json","types":["dependencies"]},{"file":"/packages/app-mailer/package.json","types":["dependencies"]},{"file":"/packages/app-page-builder/package.json","types":["dependencies"]},{"file":"/packages/app-page-builder-elements/package.json","types":["peerDependencies"]},{"file":"/packages/app-plugin-admin-welcome-screen/package.json","types":["dependencies"]},{"file":"/packages/app-record-locking/package.json","types":["dependencies"]},{"file":"/packages/app-security/package.json","types":["dependencies"]},{"file":"/packages/app-security-access-management/package.json","types":["dependencies"]},{"file":"/packages/app-serverless-cms/package.json","types":["dependencies"]},{"file":"/packages/app-tenancy/package.json","types":["dependencies"]},{"file":"/packages/app-tenant-manager/package.json","types":["dependencies"]},{"file":"/packages/app-theme/package.json","types":["peerDependencies"]},{"file":"/packages/app-theme-manager/package.json","types":["dependencies"]},{"file":"/packages/app-trash-bin/package.json","types":["dependencies"]},{"file":"/packages/app-wcp/package.json","types":["dependencies"]},{"file":"/packages/app-website/package.json","types":["dependencies"]},{"file":"/packages/app-websockets/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-extensions/templates/admin/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-extensions/templates/pbElement/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-extensions/templates/website/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-scaffold-react-component/template/package.json","types":["dependencies"]},{"file":"/packages/cwp-template-aws/template/common/apps/admin/package.json","types":["dependencies"]},{"file":"/packages/cwp-template-aws/template/common/apps/website/package.json","types":["dependencies"]},{"file":"/packages/cwp-template-aws/template/common/extensions/theme/package.json","types":["dependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-es/dependencies.json","types":["resolutions"]},{"file":"/packages/cwp-template-aws/template/ddb-os/dependencies.json","types":["resolutions"]},{"file":"/packages/cwp-template-aws/template/ddb/dependencies.json","types":["resolutions"]},{"file":"/packages/form/package.json","types":["peerDependencies"]},{"file":"/packages/i18n/package.json","types":["peerDependencies"]},{"file":"/packages/i18n-react/package.json","types":["peerDependencies"]},{"file":"/packages/lexical-editor/package.json","types":["dependencies"]},{"file":"/packages/lexical-editor-actions/package.json","types":["dependencies"]},{"file":"/packages/lexical-editor-pb-element/package.json","types":["dependencies"]},{"file":"/packages/lexical-nodes/package.json","types":["devDependencies"]},{"file":"/packages/project-utils/package.json","types":["dependencies"]},{"file":"/packages/react-composition/package.json","types":["dependencies"]},{"file":"/packages/react-properties/package.json","types":["dependencies"]},{"file":"/packages/react-rich-text-lexical-renderer/package.json","types":["dependencies"]},{"file":"/packages/react-rich-text-renderer/package.json","types":["dependencies"]},{"file":"/packages/react-router/package.json","types":["dependencies","peerDependencies"]},{"file":"/packages/theme/package.json","types":["peerDependencies"]},{"file":"/packages/ui/package.json","types":["peerDependencies"]},{"file":"/packages/ui-composer/package.json","types":["dependencies"]},{"file":"/apps/admin/package.json","types":["dependencies"]},{"file":"/apps/website/package.json","types":["dependencies"]},{"file":"/extensions/theme/package.json","types":["dependencies"]}]}]},{"name":"react-dom","versions":[{"version":"18.2.0","files":[{"file":"/package.json","types":["resolutions"]},{"file":"/packages/app/package.json","types":["dependencies"]},{"file":"/packages/app-aco/package.json","types":["dependencies"]},{"file":"/packages/app-admin/package.json","types":["dependencies"]},{"file":"/packages/app-admin-auth0/package.json","types":["dependencies"]},{"file":"/packages/app-admin-cognito/package.json","types":["dependencies"]},{"file":"/packages/app-admin-okta/package.json","types":["dependencies"]},{"file":"/packages/app-admin-rmwc/package.json","types":["dependencies"]},{"file":"/packages/app-admin-users-cognito/package.json","types":["dependencies"]},{"file":"/packages/app-apw/package.json","types":["dependencies"]},{"file":"/packages/app-cognito-authenticator/package.json","types":["dependencies"]},{"file":"/packages/app-dynamic-pages/package.json","types":["dependencies"]},{"file":"/packages/app-file-manager/package.json","types":["dependencies"]},{"file":"/packages/app-form-builder/package.json","types":["dependencies"]},{"file":"/packages/app-graphql-playground/package.json","types":["dependencies"]},{"file":"/packages/app-headless-cms/package.json","types":["dependencies"]},{"file":"/packages/app-i18n/package.json","types":["dependencies"]},{"file":"/packages/app-i18n-content/package.json","types":["dependencies"]},{"file":"/packages/app-mailer/package.json","types":["dependencies"]},{"file":"/packages/app-page-builder/package.json","types":["dependencies"]},{"file":"/packages/app-plugin-admin-welcome-screen/package.json","types":["dependencies"]},{"file":"/packages/app-record-locking/package.json","types":["dependencies"]},{"file":"/packages/app-security/package.json","types":["dependencies"]},{"file":"/packages/app-security-access-management/package.json","types":["dependencies"]},{"file":"/packages/app-serverless-cms/package.json","types":["dependencies"]},{"file":"/packages/app-tenancy/package.json","types":["dependencies"]},{"file":"/packages/app-tenant-manager/package.json","types":["dependencies"]},{"file":"/packages/app-theme-manager/package.json","types":["dependencies"]},{"file":"/packages/app-trash-bin/package.json","types":["dependencies"]},{"file":"/packages/app-wcp/package.json","types":["dependencies"]},{"file":"/packages/app-website/package.json","types":["dependencies"]},{"file":"/packages/app-websockets/package.json","types":["dependencies"]},{"file":"/packages/cwp-template-aws/template/common/apps/admin/package.json","types":["dependencies"]},{"file":"/packages/cwp-template-aws/template/common/apps/website/package.json","types":["dependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-es/dependencies.json","types":["resolutions"]},{"file":"/packages/cwp-template-aws/template/ddb-os/dependencies.json","types":["resolutions"]},{"file":"/packages/cwp-template-aws/template/ddb/dependencies.json","types":["resolutions"]},{"file":"/packages/lexical-editor/package.json","types":["dependencies"]},{"file":"/packages/lexical-editor-actions/package.json","types":["dependencies"]},{"file":"/packages/lexical-editor-pb-element/package.json","types":["dependencies"]},{"file":"/packages/project-utils/package.json","types":["dependencies"]},{"file":"/packages/react-composition/package.json","types":["dependencies"]},{"file":"/packages/react-router/package.json","types":["dependencies"]},{"file":"/packages/ui/package.json","types":["peerDependencies"]},{"file":"/packages/ui-composer/package.json","types":["dependencies"]},{"file":"/apps/admin/package.json","types":["dependencies"]},{"file":"/apps/website/package.json","types":["dependencies"]}]}]},{"name":"tar","versions":[{"version":"6.2.1","files":[{"file":"/package.json","types":["resolutions"]},{"file":"/packages/pulumi-sdk/package.json","types":["dependencies"]}]}]},{"name":"postcss","versions":[{"version":"8.4.35","files":[{"file":"/package.json","types":["resolutions"]}]}]},{"name":"rimraf","versions":[{"version":"6.0.1","files":[{"file":"/packages/api/package.json","types":["devDependencies"]},{"file":"/packages/api-aco/package.json","types":["devDependencies"]},{"file":"/packages/api-admin-settings/package.json","types":["devDependencies"]},{"file":"/packages/api-admin-users/package.json","types":["devDependencies"]},{"file":"/packages/api-admin-users-so-ddb/package.json","types":["devDependencies"]},{"file":"/packages/api-apw/package.json","types":["devDependencies"]},{"file":"/packages/api-apw-scheduler-so-ddb/package.json","types":["devDependencies"]},{"file":"/packages/api-authentication/package.json","types":["devDependencies"]},{"file":"/packages/api-authentication-cognito/package.json","types":["devDependencies"]},{"file":"/packages/api-background-tasks-ddb/package.json","types":["devDependencies"]},{"file":"/packages/api-background-tasks-es/package.json","types":["devDependencies"]},{"file":"/packages/api-background-tasks-os/package.json","types":["devDependencies"]},{"file":"/packages/api-cognito-authenticator/package.json","types":["devDependencies"]},{"file":"/packages/api-elasticsearch/package.json","types":["devDependencies"]},{"file":"/packages/api-elasticsearch-tasks/package.json","types":["devDependencies"]},{"file":"/packages/api-file-manager/package.json","types":["devDependencies"]},{"file":"/packages/api-file-manager-ddb/package.json","types":["devDependencies"]},{"file":"/packages/api-file-manager-s3/package.json","types":["devDependencies"]},{"file":"/packages/api-form-builder/package.json","types":["devDependencies"]},{"file":"/packages/api-form-builder-so-ddb/package.json","types":["devDependencies"]},{"file":"/packages/api-form-builder-so-ddb-es/package.json","types":["devDependencies"]},{"file":"/packages/api-headless-cms/package.json","types":["devDependencies"]},{"file":"/packages/api-headless-cms-ddb-es/package.json","types":["devDependencies"]},{"file":"/packages/api-i18n/package.json","types":["devDependencies"]},{"file":"/packages/api-i18n-content/package.json","types":["devDependencies"]},{"file":"/packages/api-i18n-ddb/package.json","types":["devDependencies"]},{"file":"/packages/api-log/package.json","types":["devDependencies"]},{"file":"/packages/api-mailer/package.json","types":["devDependencies"]},{"file":"/packages/api-page-builder/package.json","types":["devDependencies"]},{"file":"/packages/api-page-builder-import-export/package.json","types":["devDependencies"]},{"file":"/packages/api-page-builder-import-export-so-ddb/package.json","types":["devDependencies"]},{"file":"/packages/api-page-builder-so-ddb/package.json","types":["devDependencies"]},{"file":"/packages/api-page-builder-so-ddb-es/package.json","types":["devDependencies"]},{"file":"/packages/api-prerendering-service/package.json","types":["devDependencies"]},{"file":"/packages/api-prerendering-service-aws/package.json","types":["devDependencies"]},{"file":"/packages/api-prerendering-service-so-ddb/package.json","types":["devDependencies"]},{"file":"/packages/api-record-locking/package.json","types":["devDependencies"]},{"file":"/packages/api-security/package.json","types":["devDependencies"]},{"file":"/packages/api-security-auth0/package.json","types":["devDependencies"]},{"file":"/packages/api-security-cognito/package.json","types":["devDependencies"]},{"file":"/packages/api-security-okta/package.json","types":["devDependencies"]},{"file":"/packages/api-security-so-ddb/package.json","types":["devDependencies"]},{"file":"/packages/api-serverless-cms/package.json","types":["devDependencies"]},{"file":"/packages/api-tenancy/package.json","types":["devDependencies"]},{"file":"/packages/api-tenancy-so-ddb/package.json","types":["devDependencies"]},{"file":"/packages/api-tenant-manager/package.json","types":["devDependencies"]},{"file":"/packages/api-theme-manager/package.json","types":["devDependencies"]},{"file":"/packages/api-wcp/package.json","types":["devDependencies"]},{"file":"/packages/api-websockets/package.json","types":["devDependencies"]},{"file":"/packages/app/package.json","types":["devDependencies"]},{"file":"/packages/app-aco/package.json","types":["devDependencies"]},{"file":"/packages/app-admin/package.json","types":["devDependencies"]},{"file":"/packages/app-admin-auth0/package.json","types":["devDependencies"]},{"file":"/packages/app-admin-cognito/package.json","types":["devDependencies"]},{"file":"/packages/app-admin-okta/package.json","types":["devDependencies"]},{"file":"/packages/app-admin-rmwc/package.json","types":["devDependencies"]},{"file":"/packages/app-admin-users-cognito/package.json","types":["devDependencies"]},{"file":"/packages/app-apw/package.json","types":["devDependencies"]},{"file":"/packages/app-audit-logs/package.json","types":["devDependencies"]},{"file":"/packages/app-cognito-authenticator/package.json","types":["devDependencies"]},{"file":"/packages/app-dynamic-pages/package.json","types":["devDependencies"]},{"file":"/packages/app-file-manager/package.json","types":["devDependencies"]},{"file":"/packages/app-file-manager-s3/package.json","types":["devDependencies"]},{"file":"/packages/app-form-builder/package.json","types":["devDependencies"]},{"file":"/packages/app-graphql-playground/package.json","types":["devDependencies"]},{"file":"/packages/app-headless-cms/package.json","types":["devDependencies"]},{"file":"/packages/app-headless-cms-common/package.json","types":["devDependencies"]},{"file":"/packages/app-i18n/package.json","types":["devDependencies"]},{"file":"/packages/app-i18n-content/package.json","types":["devDependencies"]},{"file":"/packages/app-mailer/package.json","types":["devDependencies"]},{"file":"/packages/app-page-builder/package.json","types":["devDependencies"]},{"file":"/packages/app-page-builder-elements/package.json","types":["devDependencies"]},{"file":"/packages/app-plugin-admin-welcome-screen/package.json","types":["devDependencies"]},{"file":"/packages/app-record-locking/package.json","types":["devDependencies"]},{"file":"/packages/app-security/package.json","types":["devDependencies"]},{"file":"/packages/app-security-access-management/package.json","types":["devDependencies"]},{"file":"/packages/app-serverless-cms/package.json","types":["devDependencies"]},{"file":"/packages/app-tenancy/package.json","types":["devDependencies"]},{"file":"/packages/app-tenant-manager/package.json","types":["devDependencies"]},{"file":"/packages/app-theme/package.json","types":["devDependencies"]},{"file":"/packages/app-theme-manager/package.json","types":["devDependencies"]},{"file":"/packages/app-trash-bin/package.json","types":["devDependencies"]},{"file":"/packages/app-wcp/package.json","types":["devDependencies"]},{"file":"/packages/app-website/package.json","types":["devDependencies"]},{"file":"/packages/app-websockets/package.json","types":["devDependencies"]},{"file":"/packages/aws-sdk/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-dependencies/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-deploy-pulumi/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-extensions/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-scaffold/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-scaffold-admin-app-module/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-scaffold-ci/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-scaffold-extensions/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-scaffold-graphql-service/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-scaffold-react-component/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-scaffold-react-component/template/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-scaffold-workspaces/package.json","types":["devDependencies"]},{"file":"/packages/create-webiny-project/package.json","types":["dependencies"]},{"file":"/packages/data-migration/package.json","types":["devDependencies"]},{"file":"/packages/db/package.json","types":["devDependencies"]},{"file":"/packages/db-dynamodb/package.json","types":["devDependencies"]},{"file":"/packages/error/package.json","types":["devDependencies"]},{"file":"/packages/feature-flags/package.json","types":["devDependencies"]},{"file":"/packages/form/package.json","types":["devDependencies"]},{"file":"/packages/handler/package.json","types":["devDependencies"]},{"file":"/packages/handler-aws/package.json","types":["devDependencies"]},{"file":"/packages/handler-client/package.json","types":["devDependencies"]},{"file":"/packages/handler-db/package.json","types":["devDependencies"]},{"file":"/packages/handler-graphql/package.json","types":["devDependencies"]},{"file":"/packages/i18n/package.json","types":["devDependencies"]},{"file":"/packages/i18n-react/package.json","types":["devDependencies"]},{"file":"/packages/logger/package.json","types":["devDependencies"]},{"file":"/packages/plugins/package.json","types":["devDependencies"]},{"file":"/packages/project-utils/package.json","types":["dependencies"]},{"file":"/packages/pubsub/package.json","types":["devDependencies"]},{"file":"/packages/pulumi/package.json","types":["devDependencies"]},{"file":"/packages/pulumi-aws/package.json","types":["devDependencies"]},{"file":"/packages/pulumi-sdk/package.json","types":["devDependencies"]},{"file":"/packages/react-rich-text-renderer/package.json","types":["devDependencies"]},{"file":"/packages/react-router/package.json","types":["devDependencies"]},{"file":"/packages/tasks/package.json","types":["devDependencies"]},{"file":"/packages/theme/package.json","types":["devDependencies"]},{"file":"/packages/ui/package.json","types":["devDependencies"]},{"file":"/packages/ui-composer/package.json","types":["devDependencies"]},{"file":"/packages/utils/package.json","types":["devDependencies"]},{"file":"/packages/validation/package.json","types":["devDependencies"]},{"file":"/packages/wcp/package.json","types":["devDependencies"]}]}]},{"name":"apollo-graphql","versions":[{"version":"0.9.5","files":[{"file":"/packages/api-admin-settings/package.json","types":["devDependencies"]},{"file":"/packages/api-headless-cms/package.json","types":["devDependencies"]}]}]},{"name":"jest-dynalite","versions":[{"version":"3.6.1","files":[{"file":"/packages/api-admin-settings/package.json","types":["devDependencies"]},{"file":"/packages/api-admin-users-so-ddb/package.json","types":["devDependencies"]},{"file":"/packages/api-apw-scheduler-so-ddb/package.json","types":["devDependencies"]},{"file":"/packages/api-authentication/package.json","types":["devDependencies"]},{"file":"/packages/api-file-manager-ddb/package.json","types":["devDependencies"]},{"file":"/packages/api-form-builder/package.json","types":["devDependencies"]},{"file":"/packages/api-form-builder-so-ddb/package.json","types":["devDependencies"]},{"file":"/packages/api-form-builder-so-ddb-es/package.json","types":["devDependencies"]},{"file":"/packages/api-headless-cms-ddb/package.json","types":["devDependencies"]},{"file":"/packages/api-headless-cms-ddb-es/package.json","types":["devDependencies"]},{"file":"/packages/api-i18n-ddb/package.json","types":["devDependencies"]},{"file":"/packages/api-log/package.json","types":["devDependencies"]},{"file":"/packages/api-mailer/package.json","types":["devDependencies"]},{"file":"/packages/api-page-builder-import-export/package.json","types":["devDependencies"]},{"file":"/packages/api-page-builder-import-export-so-ddb/package.json","types":["devDependencies"]},{"file":"/packages/api-page-builder-so-ddb/package.json","types":["devDependencies"]},{"file":"/packages/api-page-builder-so-ddb-es/package.json","types":["devDependencies"]},{"file":"/packages/api-prerendering-service-so-ddb/package.json","types":["devDependencies"]},{"file":"/packages/api-security-so-ddb/package.json","types":["devDependencies"]},{"file":"/packages/api-tenancy/package.json","types":["devDependencies"]},{"file":"/packages/api-tenancy-so-ddb/package.json","types":["devDependencies"]},{"file":"/packages/api-tenant-manager/package.json","types":["devDependencies"]},{"file":"/packages/api-wcp/package.json","types":["devDependencies"]},{"file":"/packages/data-migration/package.json","types":["devDependencies"]},{"file":"/packages/db-dynamodb/package.json","types":["devDependencies"]},{"file":"/packages/migrations/package.json","types":["devDependencies"]},{"file":"/packages/project-utils/package.json","types":["devDependencies"]}]}]},{"name":"dataloader","versions":[{"version":"2.2.2","files":[{"file":"/packages/api-admin-users/package.json","types":["dependencies"]},{"file":"/packages/api-headless-cms-ddb/package.json","types":["dependencies"]},{"file":"/packages/api-headless-cms-ddb-es/package.json","types":["dependencies"]},{"file":"/packages/api-page-builder/package.json","types":["dependencies"]},{"file":"/packages/api-page-builder-so-ddb/package.json","types":["dependencies"]},{"file":"/packages/api-page-builder-so-ddb-es/package.json","types":["dependencies"]},{"file":"/packages/api-tenancy/package.json","types":["dependencies"]}]}]},{"name":"md5","versions":[{"version":"2.3.0","files":[{"file":"/packages/api-admin-users/package.json","types":["dependencies"]},{"file":"/packages/api-security-cognito/package.json","types":["devDependencies"]}]}]},{"name":"zod","versions":[{"version":"3.23.8","files":[{"file":"/packages/api-admin-users/package.json","types":["dependencies"]},{"file":"/packages/api-apw/package.json","types":["dependencies"]},{"file":"/packages/api-file-manager/package.json","types":["dependencies"]},{"file":"/packages/api-form-builder/package.json","types":["dependencies"]},{"file":"/packages/api-headless-cms/package.json","types":["dependencies"]},{"file":"/packages/api-headless-cms-import-export/package.json","types":["dependencies"]},{"file":"/packages/api-headless-cms-tasks/package.json","types":["dependencies"]},{"file":"/packages/api-log/package.json","types":["dependencies"]},{"file":"/packages/api-mailer/package.json","types":["dependencies"]},{"file":"/packages/api-page-builder/package.json","types":["dependencies"]},{"file":"/packages/api-page-builder-import-export/package.json","types":["dependencies"]},{"file":"/packages/api-security/package.json","types":["dependencies"]},{"file":"/packages/api-websockets/package.json","types":["dependencies"]},{"file":"/packages/app-aco/package.json","types":["dependencies"]},{"file":"/packages/app-file-manager/package.json","types":["dependencies"]},{"file":"/packages/ioc/package.json","types":["devDependencies"]},{"file":"/packages/pulumi-aws/package.json","types":["dependencies"]},{"file":"/packages/tasks/package.json","types":["dependencies"]},{"file":"/packages/utils/package.json","types":["peerDependencies"]}]}]},{"name":"@types/jsonwebtoken","versions":[{"version":"9.0.2","files":[{"file":"/packages/api-admin-users/package.json","types":["devDependencies"]},{"file":"/packages/api-cognito-authenticator/package.json","types":["devDependencies"]},{"file":"/packages/api-security/package.json","types":["devDependencies"]},{"file":"/packages/api-security-auth0/package.json","types":["devDependencies"]},{"file":"/packages/api-security-cognito/package.json","types":["devDependencies"]}]}]},{"name":"@types/md5","versions":[{"version":"2.3.2","files":[{"file":"/packages/api-admin-users/package.json","types":["devDependencies"]}]}]},{"name":"dayjs","versions":[{"version":"1.11.13","files":[{"file":"/packages/api-apw/package.json","types":["dependencies"]},{"file":"/packages/app-apw/package.json","types":["dependencies"]},{"file":"/packages/app-file-manager/package.json","types":["dependencies"]}]}]},{"name":"jsonwebtoken","versions":[{"version":"9.0.1","files":[{"file":"/packages/api-cognito-authenticator/package.json","types":["dependencies"]},{"file":"/packages/api-security/package.json","types":["dependencies"]},{"file":"/packages/api-security-auth0/package.json","types":["dependencies"]},{"file":"/packages/api-security-okta/package.json","types":["dependencies"]}]}]},{"name":"jwk-to-pem","versions":[{"version":"2.0.1","files":[{"file":"/packages/api-cognito-authenticator/package.json","types":["dependencies"]},{"file":"/packages/api-security-auth0/package.json","types":["dependencies"]},{"file":"/packages/api-security-okta/package.json","types":["dependencies"]}]}]},{"name":"@types/jwk-to-pem","versions":[{"version":"2.0.1","files":[{"file":"/packages/api-cognito-authenticator/package.json","types":["devDependencies"]},{"file":"/packages/api-security-auth0/package.json","types":["devDependencies"]}]}]},{"name":"@types/node-fetch","versions":[{"version":"2.6.1","files":[{"file":"/packages/api-cognito-authenticator/package.json","types":["devDependencies"]},{"file":"/packages/api-file-manager-s3/package.json","types":["devDependencies"]},{"file":"/packages/api-form-builder/package.json","types":["devDependencies"]},{"file":"/packages/api-page-builder/package.json","types":["devDependencies"]},{"file":"/packages/api-page-builder-import-export/package.json","types":["devDependencies"]},{"file":"/packages/api-security-auth0/package.json","types":["devDependencies"]},{"file":"/packages/api-security-okta/package.json","types":["devDependencies"]}]}]},{"name":"p-retry","versions":[{"version":"4.6.2","files":[{"file":"/packages/api-dynamodb-to-elasticsearch/package.json","types":["dependencies"]},{"file":"/packages/app-file-manager-s3/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-deploy-pulumi/package.json","types":["dependencies"]},{"file":"/packages/create-webiny-project/package.json","types":["dependencies"]},{"file":"/packages/utils/package.json","types":["dependencies"]}]}]},{"name":"@elastic/elasticsearch","versions":[{"version":"7.12.0","files":[{"file":"/packages/api-elasticsearch/package.json","types":["dependencies"]},{"file":"/packages/api-form-builder-so-ddb-es/package.json","types":["dependencies"]},{"file":"/packages/api-headless-cms-ddb-es/package.json","types":["devDependencies"]},{"file":"/packages/api-page-builder-so-ddb-es/package.json","types":["devDependencies"]},{"file":"/packages/data-migration/package.json","types":["dependencies"]},{"file":"/packages/migrations/package.json","types":["dependencies"]},{"file":"/packages/project-utils/package.json","types":["devDependencies"]}]}]},{"name":"elastic-ts","versions":[{"version":"0.12.0","files":[{"file":"/packages/api-elasticsearch/package.json","types":["dependencies"]},{"file":"/packages/api-form-builder-so-ddb-es/package.json","types":["dependencies"]},{"file":"/packages/api-page-builder-so-ddb-es/package.json","types":["dependencies"]},{"file":"/packages/migrations/package.json","types":["devDependencies"]}]}]},{"name":"cache-control-parser","versions":[{"version":"2.0.6","files":[{"file":"/packages/api-file-manager/package.json","types":["dependencies"]}]}]},{"name":"object-hash","versions":[{"version":"3.0.0","files":[{"file":"/packages/api-file-manager/package.json","types":["dependencies"]},{"file":"/packages/api-file-manager-s3/package.json","types":["dependencies"]},{"file":"/packages/api-prerendering-service/package.json","types":["dependencies"]}]}]},{"name":"ttypescript","versions":[{"version":"1.5.15","files":[{"file":"/packages/api-file-manager-aco/package.json","types":["devDependencies"]},{"file":"/packages/app-dynamic-pages/package.json","types":["devDependencies"]}]}]},{"name":"jsonpack","versions":[{"version":"1.1.5","files":[{"file":"/packages/api-file-manager-ddb/package.json","types":["devDependencies"]},{"file":"/packages/api-headless-cms-ddb/package.json","types":["dependencies"]},{"file":"/packages/api-headless-cms-ddb-es/package.json","types":["dependencies"]},{"file":"/packages/api-page-builder/package.json","types":["dependencies"]}]}]},{"name":"form-data","versions":[{"version":"4.0.0","files":[{"file":"/packages/api-file-manager-s3/package.json","types":["dependencies"]},{"file":"/packages/pulumi-aws/package.json","types":["dependencies"]}]}]},{"name":"mime","versions":[{"version":"3.0.0","files":[{"file":"/packages/api-file-manager-s3/package.json","types":["dependencies"]},{"file":"/packages/app-file-manager/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-deploy-pulumi/package.json","types":["dependencies"]},{"file":"/packages/pulumi-aws/package.json","types":["devDependencies"]}]}]},{"name":"p-map","versions":[{"version":"4.0.0","files":[{"file":"/packages/api-file-manager-s3/package.json","types":["dependencies"]},{"file":"/packages/api-headless-cms/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-workspaces/package.json","types":["dependencies"]}]}]},{"name":"p-reduce","versions":[{"version":"2.1.0","files":[{"file":"/packages/api-file-manager-s3/package.json","types":["dependencies"]},{"file":"/packages/api-headless-cms/package.json","types":["dependencies"]}]}]},{"name":"sanitize-filename","versions":[{"version":"1.6.3","files":[{"file":"/packages/api-file-manager-s3/package.json","types":["dependencies"]}]}]},{"name":"sharp","versions":[{"version":"0.32.6","files":[{"file":"/packages/api-file-manager-s3/package.json","types":["dependencies"]}]}]},{"name":"date-fns","versions":[{"version":"2.22.1","files":[{"file":"/packages/api-form-builder/package.json","types":["dependencies"]},{"file":"/packages/app-audit-logs/package.json","types":["dependencies"]},{"file":"/packages/db-dynamodb/package.json","types":["dependencies"]}]}]},{"name":"json2csv","versions":[{"version":"4.5.4","files":[{"file":"/packages/api-form-builder/package.json","types":["dependencies"]},{"file":"/packages/app-form-builder/package.json","types":["dependencies"]}]}]},{"name":"slugify","versions":[{"version":"1.6.6","files":[{"file":"/packages/api-form-builder/package.json","types":["dependencies"]},{"file":"/packages/api-headless-cms/package.json","types":["dependencies"]},{"file":"/packages/app-aco/package.json","types":["dependencies"]},{"file":"/packages/app-dynamic-pages/package.json","types":["dependencies"]},{"file":"/packages/app-page-builder/package.json","types":["dependencies"]}]}]},{"name":"@types/json2csv","versions":[{"version":"4.5.1","files":[{"file":"/packages/api-form-builder/package.json","types":["devDependencies"]},{"file":"/packages/app-form-builder/package.json","types":["devDependencies"]}]}]},{"name":"csvtojson","versions":[{"version":"2.0.10","files":[{"file":"/packages/api-form-builder/package.json","types":["devDependencies"]},{"file":"/packages/api-form-builder-so-ddb/package.json","types":["devDependencies"]},{"file":"/packages/api-form-builder-so-ddb-es/package.json","types":["devDependencies"]}]}]},{"name":"@graphql-tools/merge","versions":[{"version":"9.0.4","files":[{"file":"/packages/api-headless-cms/package.json","types":["dependencies"]},{"file":"/packages/handler-graphql/package.json","types":["dependencies"]}]}]},{"name":"@graphql-tools/schema","versions":[{"version":"10.0.6","files":[{"file":"/packages/api-headless-cms/package.json","types":["dependencies"]},{"file":"/packages/handler-graphql/package.json","types":["dependencies"]}]}]},{"name":"dot-prop","versions":[{"version":"6.0.1","files":[{"file":"/packages/api-headless-cms/package.json","types":["dependencies"]},{"file":"/packages/api-headless-cms-ddb/package.json","types":["dependencies"]},{"file":"/packages/db-dynamodb/package.json","types":["dependencies"]}]}]},{"name":"graphql-tag","versions":[{"version":"2.12.6","files":[{"file":"/packages/api-headless-cms/package.json","types":["dependencies"]},{"file":"/packages/app-aco/package.json","types":["dependencies"]},{"file":"/packages/app-admin/package.json","types":["dependencies"]},{"file":"/packages/app-admin-auth0/package.json","types":["dependencies"]},{"file":"/packages/app-admin-okta/package.json","types":["dependencies"]},{"file":"/packages/app-admin-users-cognito/package.json","types":["dependencies"]},{"file":"/packages/app-apw/package.json","types":["dependencies"]},{"file":"/packages/app-audit-logs/package.json","types":["dependencies"]},{"file":"/packages/app-file-manager/package.json","types":["dependencies"]},{"file":"/packages/app-file-manager-s3/package.json","types":["dependencies"]},{"file":"/packages/app-form-builder/package.json","types":["dependencies"]},{"file":"/packages/app-headless-cms/package.json","types":["dependencies"]},{"file":"/packages/app-headless-cms-common/package.json","types":["dependencies"]},{"file":"/packages/app-i18n/package.json","types":["dependencies"]},{"file":"/packages/app-mailer/package.json","types":["dependencies"]},{"file":"/packages/app-page-builder/package.json","types":["dependencies"]},{"file":"/packages/app-record-locking/package.json","types":["dependencies"]},{"file":"/packages/app-security-access-management/package.json","types":["dependencies"]},{"file":"/packages/app-tenancy/package.json","types":["dependencies"]},{"file":"/packages/app-tenant-manager/package.json","types":["dependencies"]},{"file":"/packages/app-theme-manager/package.json","types":["dependencies"]},{"file":"/packages/app-wcp/package.json","types":["dependencies"]},{"file":"/packages/app-website/package.json","types":["dependencies"]},{"file":"/packages/handler-graphql/package.json","types":["dependencies"]}]}]},{"name":"jsdom","versions":[{"version":"25.0.1","files":[{"file":"/packages/api-headless-cms/package.json","types":["dependencies"]},{"file":"/packages/lexical-converter/package.json","types":["devDependencies"]}]}]},{"name":"pluralize","versions":[{"version":"8.0.0","files":[{"file":"/packages/api-headless-cms/package.json","types":["dependencies"]},{"file":"/packages/api-prerendering-service/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-scaffold-admin-app-module/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-scaffold-graphql-service/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-scaffold-react-component/package.json","types":["dependencies"]}]}]},{"name":"@types/babel__code-frame","versions":[{"version":"7.0.6","files":[{"file":"/packages/api-headless-cms/package.json","types":["devDependencies"]}]}]},{"name":"@types/jsonpack","versions":[{"version":"1.1.6","files":[{"file":"/packages/api-headless-cms-ddb/package.json","types":["devDependencies"]},{"file":"/packages/api-headless-cms-ddb-es/package.json","types":["devDependencies"]}]}]},{"name":"@faker-js/faker","versions":[{"version":"9.3.0","files":[{"file":"/packages/api-headless-cms-es-tasks/package.json","types":["devDependencies"]}]}]},{"name":"@smithy/node-http-handler","versions":[{"version":"2.1.6","files":[{"file":"/packages/api-headless-cms-import-export/package.json","types":["dependencies"]},{"file":"/packages/api-page-builder-import-export/package.json","types":["dependencies"]}]}]},{"name":"archiver","versions":[{"version":"7.0.1","files":[{"file":"/packages/api-headless-cms-import-export/package.json","types":["dependencies"]},{"file":"/packages/api-page-builder/package.json","types":["dependencies"]},{"file":"/packages/api-page-builder-import-export/package.json","types":["dependencies"]}]}]},{"name":"bytes","versions":[{"version":"3.1.2","files":[{"file":"/packages/api-headless-cms-import-export/package.json","types":["dependencies"]},{"file":"/packages/api-page-builder/package.json","types":["devDependencies"]},{"file":"/packages/app/package.json","types":["dependencies"]},{"file":"/packages/app-file-manager/package.json","types":["dependencies"]}]}]},{"name":"uniqid","versions":[{"version":"5.4.0","files":[{"file":"/packages/api-headless-cms-import-export/package.json","types":["dependencies"]},{"file":"/packages/api-page-builder/package.json","types":["dependencies"]},{"file":"/packages/api-page-builder-import-export/package.json","types":["dependencies"]},{"file":"/packages/app-page-builder/package.json","types":["dependencies"]},{"file":"/packages/cli/package.json","types":["dependencies"]},{"file":"/packages/plugins/package.json","types":["dependencies"]},{"file":"/cypress-tests/package.json","types":["devDependencies"]}]}]},{"name":"unzipper","versions":[{"version":"0.12.3","files":[{"file":"/packages/api-headless-cms-import-export/package.json","types":["dependencies"]}]}]},{"name":"@types/adm-zip","versions":[{"version":"0.5.5","files":[{"file":"/packages/api-headless-cms-import-export/package.json","types":["devDependencies"]}]}]},{"name":"@types/unzipper","versions":[{"version":"0.10.10","files":[{"file":"/packages/api-headless-cms-import-export/package.json","types":["devDependencies"]}]}]},{"name":"adm-zip","versions":[{"version":"0.5.14","files":[{"file":"/packages/api-headless-cms-import-export/package.json","types":["devDependencies"]}]}]},{"name":"aws-sdk-client-mock","versions":[{"version":"4.1.0","files":[{"file":"/packages/api-headless-cms-import-export/package.json","types":["devDependencies"]}]}]},{"name":"accept-language-parser","versions":[{"version":"1.5.0","files":[{"file":"/packages/api-i18n/package.json","types":["dependencies"]}]}]},{"name":"i18n-locales","versions":[{"version":"0.0.5","files":[{"file":"/packages/api-i18n/package.json","types":["dependencies"]}]}]},{"name":"@types/accept-language-parser","versions":[{"version":"1.5.3","files":[{"file":"/packages/api-i18n/package.json","types":["devDependencies"]}]}]},{"name":"crypto-js","versions":[{"version":"4.2.0","files":[{"file":"/packages/api-mailer/package.json","types":["dependencies"]}]}]},{"name":"nodemailer","versions":[{"version":"6.9.16","files":[{"file":"/packages/api-mailer/package.json","types":["dependencies"]}]}]},{"name":"@types/crypto-js","versions":[{"version":"4.2.2","files":[{"file":"/packages/api-mailer/package.json","types":["devDependencies"]}]}]},{"name":"@types/nodemailer","versions":[{"version":"6.4.17","files":[{"file":"/packages/api-mailer/package.json","types":["devDependencies"]}]}]},{"name":"extract-zip","versions":[{"version":"1.6.7","files":[{"file":"/packages/api-page-builder/package.json","types":["dependencies"]}]}]},{"name":"stream","versions":[{"version":"0.0.3","files":[{"file":"/packages/api-page-builder/package.json","types":["dependencies"]},{"file":"/packages/api-page-builder-import-export/package.json","types":["dependencies"]}]}]},{"name":"@types/extract-zip","versions":[{"version":"1.6.2","files":[{"file":"/packages/api-page-builder/package.json","types":["devDependencies"]}]}]},{"name":"@types/rimraf","versions":[{"version":"3.0.2","files":[{"file":"/packages/api-page-builder/package.json","types":["devDependencies"]}]}]},{"name":"dot-prop-immutable","versions":[{"version":"2.1.1","files":[{"file":"/packages/api-page-builder-import-export/package.json","types":["dependencies"]},{"file":"/packages/app-aco/package.json","types":["dependencies"]},{"file":"/packages/app-admin/package.json","types":["dependencies"]},{"file":"/packages/app-apw/package.json","types":["dependencies"]},{"file":"/packages/app-file-manager/package.json","types":["dependencies"]},{"file":"/packages/app-form-builder/package.json","types":["dependencies"]},{"file":"/packages/app-headless-cms/package.json","types":["dependencies"]},{"file":"/packages/app-mailer/package.json","types":["dependencies"]},{"file":"/packages/app-page-builder/package.json","types":["dependencies"]},{"file":"/packages/ui/package.json","types":["dependencies"]}]}]},{"name":"yauzl","versions":[{"version":"2.10.0","files":[{"file":"/packages/api-page-builder-import-export/package.json","types":["dependencies"]}]}]},{"name":"@types/archiver","versions":[{"version":"5.3.1","files":[{"file":"/packages/api-page-builder-import-export/package.json","types":["devDependencies"]}]}]},{"name":"@types/yauzl","versions":[{"version":"2.9.2","files":[{"file":"/packages/api-page-builder-import-export/package.json","types":["devDependencies"]}]}]},{"name":"@sparticuz/chromium","versions":[{"version":"131.0.1","files":[{"file":"/packages/api-prerendering-service/package.json","types":["dependencies"]}]}]},{"name":"posthtml","versions":[{"version":"0.15.0","files":[{"file":"/packages/api-prerendering-service/package.json","types":["dependencies"]}]}]},{"name":"posthtml-noopener","versions":[{"version":"1.0.5","files":[{"file":"/packages/api-prerendering-service/package.json","types":["dependencies"]}]}]},{"name":"posthtml-plugin-link-preload","versions":[{"version":"1.0.0","files":[{"file":"/packages/api-prerendering-service/package.json","types":["dependencies"]}]}]},{"name":"puppeteer-core","versions":[{"version":"23.11.1","files":[{"file":"/packages/api-prerendering-service/package.json","types":["dependencies"]}]}]},{"name":"srcset","versions":[{"version":"4.0.0","files":[{"file":"/packages/api-prerendering-service/package.json","types":["dependencies"]},{"file":"/packages/aws-helpers/package.json","types":["dependencies"]}]}]},{"name":"@types/object-hash","versions":[{"version":"2.2.1","files":[{"file":"/packages/api-prerendering-service/package.json","types":["devDependencies"]}]}]},{"name":"deep-equal","versions":[{"version":"2.2.3","files":[{"file":"/packages/api-security/package.json","types":["dependencies"]},{"file":"/packages/api-security-cognito/package.json","types":["dependencies"]},{"file":"/packages/tasks/package.json","types":["dependencies"]}]}]},{"name":"@apollo/react-hooks","versions":[{"version":"3.1.5","files":[{"file":"/packages/app/package.json","types":["dependencies"]},{"file":"/packages/app-aco/package.json","types":["dependencies"]},{"file":"/packages/app-admin/package.json","types":["dependencies"]},{"file":"/packages/app-admin-auth0/package.json","types":["dependencies"]},{"file":"/packages/app-admin-cognito/package.json","types":["dependencies"]},{"file":"/packages/app-admin-okta/package.json","types":["dependencies"]},{"file":"/packages/app-admin-users-cognito/package.json","types":["dependencies"]},{"file":"/packages/app-apw/package.json","types":["dependencies"]},{"file":"/packages/app-audit-logs/package.json","types":["dependencies"]},{"file":"/packages/app-file-manager/package.json","types":["dependencies"]},{"file":"/packages/app-form-builder/package.json","types":["dependencies"]},{"file":"/packages/app-headless-cms/package.json","types":["dependencies"]},{"file":"/packages/app-i18n/package.json","types":["dependencies"]},{"file":"/packages/app-page-builder/package.json","types":["dependencies"]},{"file":"/packages/app-record-locking/package.json","types":["dependencies"]},{"file":"/packages/app-security-access-management/package.json","types":["dependencies"]},{"file":"/packages/app-tenancy/package.json","types":["dependencies"]},{"file":"/packages/app-tenant-manager/package.json","types":["dependencies"]},{"file":"/packages/app-theme-manager/package.json","types":["dependencies"]},{"file":"/packages/app-wcp/package.json","types":["dependencies"]},{"file":"/packages/app-website/package.json","types":["dependencies"]},{"file":"/packages/cwp-template-aws/template/common/extensions/theme/package.json","types":["dependencies"]},{"file":"/extensions/theme/package.json","types":["dependencies"]}]}]},{"name":"@emotion/styled","versions":[{"version":"11.10.6","files":[{"file":"/packages/app/package.json","types":["dependencies"]},{"file":"/packages/app-aco/package.json","types":["dependencies"]},{"file":"/packages/app-admin/package.json","types":["dependencies"]},{"file":"/packages/app-admin-auth0/package.json","types":["dependencies"]},{"file":"/packages/app-admin-cognito/package.json","types":["dependencies"]},{"file":"/packages/app-admin-okta/package.json","types":["dependencies"]},{"file":"/packages/app-admin-rmwc/package.json","types":["dependencies"]},{"file":"/packages/app-admin-users-cognito/package.json","types":["dependencies"]},{"file":"/packages/app-apw/package.json","types":["dependencies"]},{"file":"/packages/app-audit-logs/package.json","types":["dependencies"]},{"file":"/packages/app-dynamic-pages/package.json","types":["dependencies"]},{"file":"/packages/app-file-manager/package.json","types":["dependencies"]},{"file":"/packages/app-form-builder/package.json","types":["dependencies"]},{"file":"/packages/app-graphql-playground/package.json","types":["dependencies"]},{"file":"/packages/app-headless-cms/package.json","types":["dependencies"]},{"file":"/packages/app-headless-cms-common/package.json","types":["dependencies"]},{"file":"/packages/app-i18n/package.json","types":["dependencies"]},{"file":"/packages/app-page-builder/package.json","types":["dependencies"]},{"file":"/packages/app-page-builder-elements/package.json","types":["dependencies"]},{"file":"/packages/app-record-locking/package.json","types":["dependencies"]},{"file":"/packages/app-security-access-management/package.json","types":["dependencies"]},{"file":"/packages/app-tenancy/package.json","types":["dependencies"]},{"file":"/packages/app-tenant-manager/package.json","types":["dependencies"]},{"file":"/packages/app-theme-manager/package.json","types":["dependencies"]},{"file":"/packages/app-trash-bin/package.json","types":["dependencies"]},{"file":"/packages/app-website/package.json","types":["dependencies"]},{"file":"/packages/cwp-template-aws/template/common/extensions/theme/package.json","types":["dependencies"]},{"file":"/packages/lexical-editor-actions/package.json","types":["dependencies"]},{"file":"/packages/lexical-editor-pb-element/package.json","types":["dependencies"]},{"file":"/packages/ui/package.json","types":["dependencies"]},{"file":"/extensions/theme/package.json","types":["dependencies"]}]}]},{"name":"apollo-cache","versions":[{"version":"1.3.5","files":[{"file":"/packages/app/package.json","types":["dependencies"]},{"file":"/packages/app-admin/package.json","types":["dependencies"]},{"file":"/packages/app-apw/package.json","types":["dependencies"]},{"file":"/packages/app-file-manager/package.json","types":["dependencies"]},{"file":"/packages/app-form-builder/package.json","types":["dependencies"]},{"file":"/packages/app-graphql-playground/package.json","types":["dependencies"]},{"file":"/packages/app-headless-cms/package.json","types":["dependencies"]},{"file":"/packages/app-i18n/package.json","types":["dependencies"]},{"file":"/packages/app-mailer/package.json","types":["dependencies"]},{"file":"/packages/app-page-builder/package.json","types":["dependencies"]},{"file":"/packages/app-serverless-cms/package.json","types":["dependencies"]},{"file":"/packages/app-tenant-manager/package.json","types":["dependencies"]},{"file":"/packages/app-theme-manager/package.json","types":["dependencies"]},{"file":"/packages/app-wcp/package.json","types":["dependencies"]}]}]},{"name":"apollo-cache-inmemory","versions":[{"version":"1.6.6","files":[{"file":"/packages/app/package.json","types":["dependencies"]}]}]},{"name":"apollo-client","versions":[{"version":"2.6.10","files":[{"file":"/packages/app/package.json","types":["dependencies"]},{"file":"/packages/app-aco/package.json","types":["devDependencies"]},{"file":"/packages/app-admin/package.json","types":["dependencies"]},{"file":"/packages/app-admin-auth0/package.json","types":["dependencies"]},{"file":"/packages/app-admin-cognito/package.json","types":["dependencies"]},{"file":"/packages/app-admin-okta/package.json","types":["dependencies"]},{"file":"/packages/app-admin-users-cognito/package.json","types":["dependencies"]},{"file":"/packages/app-apw/package.json","types":["dependencies"]},{"file":"/packages/app-dynamic-pages/package.json","types":["dependencies"]},{"file":"/packages/app-file-manager/package.json","types":["dependencies"]},{"file":"/packages/app-form-builder/package.json","types":["dependencies"]},{"file":"/packages/app-graphql-playground/package.json","types":["dependencies"]},{"file":"/packages/app-headless-cms/package.json","types":["dependencies"]},{"file":"/packages/app-i18n/package.json","types":["dependencies"]},{"file":"/packages/app-mailer/package.json","types":["dependencies"]},{"file":"/packages/app-page-builder/package.json","types":["dependencies"]},{"file":"/packages/app-record-locking/package.json","types":["dependencies"]},{"file":"/packages/app-serverless-cms/package.json","types":["dependencies"]},{"file":"/packages/app-tenancy/package.json","types":["dependencies"]},{"file":"/packages/app-tenant-manager/package.json","types":["dependencies"]},{"file":"/packages/app-theme-manager/package.json","types":["dependencies"]},{"file":"/packages/app-trash-bin/package.json","types":["devDependencies"]},{"file":"/packages/app-wcp/package.json","types":["dependencies"]},{"file":"/packages/app-website/package.json","types":["dependencies"]},{"file":"/packages/cwp-template-aws/template/common/apps/website/package.json","types":["dependencies"]},{"file":"/packages/react-router/package.json","types":["dependencies"]},{"file":"/apps/website/package.json","types":["dependencies"]}]}]},{"name":"apollo-link","versions":[{"version":"1.2.14","files":[{"file":"/packages/app/package.json","types":["dependencies"]},{"file":"/packages/app-aco/package.json","types":["devDependencies"]},{"file":"/packages/app-admin/package.json","types":["dependencies"]},{"file":"/packages/app-apw/package.json","types":["dependencies"]},{"file":"/packages/app-file-manager/package.json","types":["dependencies"]},{"file":"/packages/app-graphql-playground/package.json","types":["dependencies"]},{"file":"/packages/app-headless-cms/package.json","types":["dependencies"]},{"file":"/packages/app-i18n/package.json","types":["dependencies"]},{"file":"/packages/app-mailer/package.json","types":["dependencies"]},{"file":"/packages/app-page-builder/package.json","types":["dependencies"]},{"file":"/packages/app-record-locking/package.json","types":["dependencies"]},{"file":"/packages/app-serverless-cms/package.json","types":["dependencies"]},{"file":"/packages/app-tenant-manager/package.json","types":["dependencies"]},{"file":"/packages/app-theme-manager/package.json","types":["dependencies"]},{"file":"/packages/app-trash-bin/package.json","types":["devDependencies"]},{"file":"/packages/app-wcp/package.json","types":["dependencies"]},{"file":"/packages/app-website/package.json","types":["dependencies"]},{"file":"/packages/cwp-template-aws/template/common/apps/website/package.json","types":["dependencies"]},{"file":"/apps/website/package.json","types":["dependencies"]}]}]},{"name":"apollo-link-context","versions":[{"version":"1.0.20","files":[{"file":"/packages/app/package.json","types":["dependencies"]},{"file":"/packages/app-admin-auth0/package.json","types":["dependencies"]},{"file":"/packages/app-admin-cognito/package.json","types":["dependencies"]},{"file":"/packages/app-admin-okta/package.json","types":["dependencies"]},{"file":"/packages/app-graphql-playground/package.json","types":["dependencies"]},{"file":"/packages/app-i18n/package.json","types":["dependencies"]}]}]},{"name":"apollo-link-error","versions":[{"version":"1.1.13","files":[{"file":"/packages/app/package.json","types":["dependencies"]}]}]},{"name":"apollo-link-http-common","versions":[{"version":"0.2.16","files":[{"file":"/packages/app/package.json","types":["dependencies"]}]}]},{"name":"apollo-utilities","versions":[{"version":"1.3.4","files":[{"file":"/packages/app/package.json","types":["dependencies"]},{"file":"/packages/app-admin/package.json","types":["dependencies"]},{"file":"/packages/app-apw/package.json","types":["dependencies"]},{"file":"/packages/app-file-manager/package.json","types":["dependencies"]},{"file":"/packages/app-form-builder/package.json","types":["dependencies"]},{"file":"/packages/app-graphql-playground/package.json","types":["dependencies"]},{"file":"/packages/app-headless-cms/package.json","types":["dependencies"]},{"file":"/packages/app-i18n/package.json","types":["dependencies"]},{"file":"/packages/app-mailer/package.json","types":["dependencies"]},{"file":"/packages/app-page-builder/package.json","types":["dependencies"]},{"file":"/packages/app-serverless-cms/package.json","types":["dependencies"]},{"file":"/packages/app-tenant-manager/package.json","types":["dependencies"]},{"file":"/packages/app-theme-manager/package.json","types":["dependencies"]},{"file":"/packages/app-wcp/package.json","types":["dependencies"]}]}]},{"name":"boolean","versions":[{"version":"3.2.0","files":[{"file":"/packages/app/package.json","types":["dependencies"]},{"file":"/packages/cli/package.json","types":["dependencies"]},{"file":"/packages/handler-graphql/package.json","types":["dependencies"]}]}]},{"name":"invariant","versions":[{"version":"2.2.4","files":[{"file":"/packages/app/package.json","types":["dependencies"]},{"file":"/packages/app-page-builder/package.json","types":["dependencies"]},{"file":"/packages/cwp-template-aws/template/common/apps/admin/package.json","types":["dependencies"]},{"file":"/packages/serverless-cms-aws/package.json","types":["dependencies"]}]}]},{"name":"ts-invariant","versions":[{"version":"0.10.3","files":[{"file":"/packages/app/package.json","types":["dependencies"]}]}]},{"name":"warning","versions":[{"version":"4.0.2","files":[{"file":"/packages/app/package.json","types":["dependencies"]}]}]},{"name":"@types/lodash","versions":[{"version":"4.17.13","files":[{"file":"/packages/app/package.json","types":["devDependencies"]},{"file":"/packages/app-cognito-authenticator/package.json","types":["devDependencies"]},{"file":"/packages/form/package.json","types":["devDependencies"]},{"file":"/packages/i18n/package.json","types":["devDependencies"]},{"file":"/packages/pulumi/package.json","types":["devDependencies"]},{"file":"/packages/pulumi-sdk/package.json","types":["devDependencies"]},{"file":"/packages/validation/package.json","types":["devDependencies"]}]}]},{"name":"@types/warning","versions":[{"version":"3.0.0","files":[{"file":"/packages/app/package.json","types":["devDependencies"]}]}]},{"name":"@material-design-icons/svg","versions":[{"version":"0.14.13","files":[{"file":"/packages/app-aco/package.json","types":["dependencies"]},{"file":"/packages/app-admin/package.json","types":["dependencies"]},{"file":"/packages/app-admin-rmwc/package.json","types":["dependencies"]},{"file":"/packages/app-audit-logs/package.json","types":["devDependencies"]},{"file":"/packages/app-dynamic-pages/package.json","types":["dependencies"]},{"file":"/packages/app-file-manager/package.json","types":["dependencies"]},{"file":"/packages/app-form-builder/package.json","types":["dependencies"]},{"file":"/packages/app-headless-cms/package.json","types":["dependencies"]},{"file":"/packages/app-page-builder/package.json","types":["dependencies"]},{"file":"/packages/app-record-locking/package.json","types":["dependencies"]},{"file":"/packages/app-security-access-management/package.json","types":["dependencies"]},{"file":"/packages/app-trash-bin/package.json","types":["dependencies"]},{"file":"/packages/lexical-editor-pb-element/package.json","types":["dependencies"]},{"file":"/packages/ui/package.json","types":["dependencies"]}]}]},{"name":"@material-symbols/svg-400","versions":[{"version":"0.4.1","files":[{"file":"/packages/app-aco/package.json","types":["dependencies"]},{"file":"/packages/app-audit-logs/package.json","types":["devDependencies"]},{"file":"/packages/app-form-builder/package.json","types":["dependencies"]}]}]},{"name":"@minoru/react-dnd-treeview","versions":[{"version":"3.2.1","files":[{"file":"/packages/app-aco/package.json","types":["dependencies"]}]}]},{"name":"mobx","versions":[{"version":"6.9.0","files":[{"file":"/packages/app-aco/package.json","types":["dependencies"]},{"file":"/packages/app-admin/package.json","types":["dependencies"]},{"file":"/packages/app-dynamic-pages/package.json","types":["dependencies"]},{"file":"/packages/app-file-manager/package.json","types":["dependencies"]},{"file":"/packages/app-headless-cms/package.json","types":["dependencies"]},{"file":"/packages/app-page-builder/package.json","types":["dependencies"]},{"file":"/packages/app-trash-bin/package.json","types":["dependencies"]},{"file":"/packages/app-utils/package.json","types":["dependencies"]},{"file":"/packages/form/package.json","types":["devDependencies"]}]}]},{"name":"mobx-react-lite","versions":[{"version":"3.4.3","files":[{"file":"/packages/app-aco/package.json","types":["dependencies"]},{"file":"/packages/app-admin/package.json","types":["dependencies"]},{"file":"/packages/app-file-manager/package.json","types":["dependencies"]},{"file":"/packages/app-headless-cms/package.json","types":["dependencies"]},{"file":"/packages/app-page-builder/package.json","types":["dependencies"]},{"file":"/packages/app-trash-bin/package.json","types":["dependencies"]},{"file":"/packages/form/package.json","types":["devDependencies"]}]}]},{"name":"pako","versions":[{"version":"2.1.0","files":[{"file":"/packages/app-aco/package.json","types":["dependencies"]},{"file":"/packages/app-page-builder/package.json","types":["dependencies"]}]}]},{"name":"react-dnd","versions":[{"version":"16.0.1","files":[{"file":"/packages/app-aco/package.json","types":["dependencies"]},{"file":"/packages/app-form-builder/package.json","types":["dependencies"]},{"file":"/packages/app-headless-cms/package.json","types":["dependencies"]},{"file":"/packages/app-page-builder/package.json","types":["dependencies"]}]}]},{"name":"react-hotkeyz","versions":[{"version":"1.0.4","files":[{"file":"/packages/app-aco/package.json","types":["dependencies"]},{"file":"/packages/app-admin/package.json","types":["dependencies"]},{"file":"/packages/app-admin-rmwc/package.json","types":["dependencies"]},{"file":"/packages/app-file-manager/package.json","types":["dependencies"]},{"file":"/packages/app-form-builder/package.json","types":["dependencies"]},{"file":"/packages/app-headless-cms/package.json","types":["dependencies"]}]}]},{"name":"store","versions":[{"version":"2.0.12","files":[{"file":"/packages/app-aco/package.json","types":["dependencies"]},{"file":"/packages/app-admin/package.json","types":["dependencies"]},{"file":"/packages/app-admin-rmwc/package.json","types":["dependencies"]},{"file":"/packages/app-page-builder/package.json","types":["dependencies"]},{"file":"/packages/app-tenancy/package.json","types":["dependencies"]}]}]},{"name":"@apollo/react-components","versions":[{"version":"3.1.5","files":[{"file":"/packages/app-admin/package.json","types":["dependencies"]},{"file":"/packages/app-file-manager/package.json","types":["dependencies"]},{"file":"/packages/app-mailer/package.json","types":["dependencies"]},{"file":"/packages/app-page-builder/package.json","types":["dependencies"]}]}]},{"name":"@editorjs/editorjs","versions":[{"version":"2.26.5","files":[{"file":"/packages/app-admin/package.json","types":["dependencies"]},{"file":"/packages/app-form-builder/package.json","types":["dependencies"]},{"file":"/packages/app-page-builder-elements/package.json","types":["peerDependencies"]},{"file":"/packages/react-rich-text-renderer/package.json","types":["dependencies"]},{"file":"/packages/ui/package.json","types":["dependencies"]}]}]},{"name":"@iconify/json","versions":[{"version":"2.2.142","files":[{"file":"/packages/app-admin/package.json","types":["dependencies"]}]}]},{"name":"@monaco-editor/react","versions":[{"version":"4.7.0","files":[{"file":"/packages/app-admin/package.json","types":["dependencies"]}]}]},{"name":"@svgr/webpack","versions":[{"version":"6.1.1","files":[{"file":"/packages/app-admin/package.json","types":["dependencies"]},{"file":"/packages/app-file-manager/package.json","types":["devDependencies"]},{"file":"/packages/app-form-builder/package.json","types":["dependencies"]},{"file":"/packages/app-headless-cms/package.json","types":["dependencies"]},{"file":"/packages/app-page-builder/package.json","types":["dependencies"]},{"file":"/packages/project-utils/package.json","types":["dependencies"]},{"file":"/packages/ui/package.json","types":["dependencies"]}]}]},{"name":"@types/mime","versions":[{"version":"2.0.3","files":[{"file":"/packages/app-admin/package.json","types":["dependencies"]}]}]},{"name":"classnames","versions":[{"version":"2.5.1","files":[{"file":"/packages/app-admin/package.json","types":["dependencies"]},{"file":"/packages/app-admin-rmwc/package.json","types":["dependencies"]},{"file":"/packages/app-headless-cms/package.json","types":["dependencies"]},{"file":"/packages/app-headless-cms-common/package.json","types":["dependencies"]},{"file":"/packages/app-page-builder/package.json","types":["dependencies"]},{"file":"/packages/react-rich-text-renderer/package.json","types":["dependencies"]},{"file":"/packages/ui/package.json","types":["dependencies"]}]}]},{"name":"downshift","versions":[{"version":"3.1.2","files":[{"file":"/packages/app-admin/package.json","types":["dependencies"]}]},{"version":"2.1.5","files":[{"file":"/packages/ui/package.json","types":["dependencies"]}]}]},{"name":"emotion","versions":[{"version":"10.0.27","files":[{"file":"/packages/app-admin/package.json","types":["dependencies"]},{"file":"/packages/app-admin-auth0/package.json","types":["dependencies"]},{"file":"/packages/app-admin-cognito/package.json","types":["dependencies"]},{"file":"/packages/app-admin-okta/package.json","types":["dependencies"]},{"file":"/packages/app-admin-rmwc/package.json","types":["dependencies"]},{"file":"/packages/app-admin-users-cognito/package.json","types":["dependencies"]},{"file":"/packages/app-apw/package.json","types":["dependencies"]},{"file":"/packages/app-audit-logs/package.json","types":["dependencies"]},{"file":"/packages/app-dynamic-pages/package.json","types":["dependencies"]},{"file":"/packages/app-file-manager/package.json","types":["dependencies"]},{"file":"/packages/app-form-builder/package.json","types":["dependencies"]},{"file":"/packages/app-headless-cms/package.json","types":["dependencies"]},{"file":"/packages/app-i18n-content/package.json","types":["dependencies"]},{"file":"/packages/app-page-builder/package.json","types":["dependencies"]},{"file":"/packages/app-security-access-management/package.json","types":["dependencies"]},{"file":"/packages/app-tenant-manager/package.json","types":["dependencies"]},{"file":"/packages/lexical-editor/package.json","types":["dependencies"]},{"file":"/packages/lexical-editor-actions/package.json","types":["dependencies"]},{"file":"/packages/lexical-theme/package.json","types":["dependencies"]},{"file":"/packages/ui/package.json","types":["dependencies"]}]}]},{"name":"graphlib","versions":[{"version":"2.1.8","files":[{"file":"/packages/app-admin/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-workspaces/package.json","types":["dependencies"]}]}]},{"name":"is-hotkey","versions":[{"version":"0.2.0","files":[{"file":"/packages/app-admin/package.json","types":["dependencies"]},{"file":"/packages/app-page-builder/package.json","types":["dependencies"]}]}]},{"name":"prop-types","versions":[{"version":"15.8.1","files":[{"file":"/packages/app-admin/package.json","types":["dependencies"]},{"file":"/packages/app-apw/package.json","types":["dependencies"]},{"file":"/packages/app-file-manager/package.json","types":["dependencies"]},{"file":"/packages/app-form-builder/package.json","types":["dependencies"]},{"file":"/packages/app-graphql-playground/package.json","types":["dependencies"]},{"file":"/packages/app-headless-cms/package.json","types":["dependencies"]},{"file":"/packages/app-headless-cms-common/package.json","types":["dependencies"]},{"file":"/packages/app-i18n/package.json","types":["dependencies"]},{"file":"/packages/app-mailer/package.json","types":["dependencies"]},{"file":"/packages/app-page-builder/package.json","types":["dependencies"]},{"file":"/packages/app-tenant-manager/package.json","types":["dependencies"]},{"file":"/packages/app-theme-manager/package.json","types":["dependencies"]},{"file":"/packages/cwp-template-aws/template/common/apps/admin/package.json","types":["dependencies"]},{"file":"/apps/admin/package.json","types":["dependencies"]}]}]},{"name":"react-draggable","versions":[{"version":"4.4.6","files":[{"file":"/packages/app-admin/package.json","types":["dependencies"]}]}]},{"name":"react-resizable","versions":[{"version":"3.0.5","files":[{"file":"/packages/app-admin/package.json","types":["dependencies"]}]}]},{"name":"react-resizable-panels","versions":[{"version":"2.0.19","files":[{"file":"/packages/app-admin/package.json","types":["dependencies"]}]}]},{"name":"react-transition-group","versions":[{"version":"4.4.5","files":[{"file":"/packages/app-admin/package.json","types":["dependencies"]},{"file":"/packages/app-admin-rmwc/package.json","types":["dependencies"]},{"file":"/packages/ui/package.json","types":["dependencies"]}]}]},{"name":"react-virtualized","versions":[{"version":"9.22.5","files":[{"file":"/packages/app-admin/package.json","types":["dependencies"]},{"file":"/packages/app-headless-cms/package.json","types":["dependencies"]},{"file":"/packages/app-page-builder/package.json","types":["dependencies"]}]}]},{"name":"reset-css","versions":[{"version":"5.0.1","files":[{"file":"/packages/app-admin/package.json","types":["dependencies"]},{"file":"/packages/app-website/package.json","types":["dependencies"]}]}]},{"name":"unicode-emoji-json","versions":[{"version":"0.4.0","files":[{"file":"/packages/app-admin/package.json","types":["dependencies"]}]}]},{"name":"@emotion/babel-plugin","versions":[{"version":"11.11.0","files":[{"file":"/packages/app-admin/package.json","types":["devDependencies"]},{"file":"/packages/app-admin-rmwc/package.json","types":["devDependencies"]},{"file":"/packages/app-apw/package.json","types":["devDependencies"]},{"file":"/packages/app-dynamic-pages/package.json","types":["devDependencies"]},{"file":"/packages/app-form-builder/package.json","types":["devDependencies"]},{"file":"/packages/app-graphql-playground/package.json","types":["devDependencies"]},{"file":"/packages/app-headless-cms/package.json","types":["devDependencies"]},{"file":"/packages/app-headless-cms-common/package.json","types":["devDependencies"]},{"file":"/packages/app-i18n/package.json","types":["devDependencies"]},{"file":"/packages/app-i18n-content/package.json","types":["devDependencies"]},{"file":"/packages/app-mailer/package.json","types":["devDependencies"]},{"file":"/packages/app-page-builder/package.json","types":["devDependencies"]},{"file":"/packages/app-security/package.json","types":["devDependencies"]},{"file":"/packages/app-security-access-management/package.json","types":["devDependencies"]},{"file":"/packages/app-serverless-cms/package.json","types":["devDependencies"]},{"file":"/packages/app-tenancy/package.json","types":["devDependencies"]},{"file":"/packages/app-tenant-manager/package.json","types":["devDependencies"]},{"file":"/packages/app-theme/package.json","types":["devDependencies"]},{"file":"/packages/app-theme-manager/package.json","types":["devDependencies"]},{"file":"/packages/theme/package.json","types":["devDependencies"]},{"file":"/packages/ui/package.json","types":["devDependencies"]}]}]},{"name":"@types/bytes","versions":[{"version":"3.1.4","files":[{"file":"/packages/app-admin/package.json","types":["devDependencies"]}]}]},{"name":"@types/graphlib","versions":[{"version":"2.1.12","files":[{"file":"/packages/app-admin/package.json","types":["devDependencies"]}]}]},{"name":"@types/is-hotkey","versions":[{"version":"0.1.10","files":[{"file":"/packages/app-admin/package.json","types":["devDependencies"]},{"file":"/packages/app-page-builder/package.json","types":["devDependencies"]}]}]},{"name":"@types/react-resizable","versions":[{"version":"3.0.8","files":[{"file":"/packages/app-admin/package.json","types":["devDependencies"]}]}]},{"name":"@types/store","versions":[{"version":"2.0.2","files":[{"file":"/packages/app-admin/package.json","types":["devDependencies"]},{"file":"/packages/app-page-builder/package.json","types":["devDependencies"]}]}]},{"name":"monaco-editor","versions":[{"version":"0.52.2","files":[{"file":"/packages/app-admin/package.json","types":["devDependencies"]}]}]},{"name":"@auth0/auth0-react","versions":[{"version":"2.2.4","files":[{"file":"/packages/app-admin-auth0/package.json","types":["dependencies"]}]}]},{"name":"react-helmet","versions":[{"version":"6.1.0","files":[{"file":"/packages/app-admin-auth0/package.json","types":["dependencies"]},{"file":"/packages/app-admin-okta/package.json","types":["dependencies"]},{"file":"/packages/app-admin-rmwc/package.json","types":["dependencies"]},{"file":"/packages/app-admin-users-cognito/package.json","types":["dependencies"]},{"file":"/packages/app-apw/package.json","types":["dependencies"]},{"file":"/packages/app-headless-cms/package.json","types":["dependencies"]},{"file":"/packages/app-mailer/package.json","types":["dependencies"]},{"file":"/packages/app-page-builder/package.json","types":["dependencies"]},{"file":"/packages/app-security-access-management/package.json","types":["dependencies"]},{"file":"/packages/app-website/package.json","types":["dependencies"]}]}]},{"name":"@aws-amplify/auth","versions":[{"version":"5.6.15","files":[{"file":"/packages/app-admin-cognito/package.json","types":["dependencies"]},{"file":"/packages/app-cognito-authenticator/package.json","types":["dependencies"]}]}]},{"name":"@okta/okta-auth-js","versions":[{"version":"5.3.1","files":[{"file":"/packages/app-admin-okta/package.json","types":["dependencies"]}]}]},{"name":"@okta/okta-react","versions":[{"version":"6.1.0","files":[{"file":"/packages/app-admin-okta/package.json","types":["dependencies"]}]}]},{"name":"@okta/okta-signin-widget","versions":[{"version":"5.9.4","files":[{"file":"/packages/app-admin-okta/package.json","types":["dependencies"]}]}]},{"name":"@rmwc/base","versions":[{"version":"14.3.5","files":[{"file":"/packages/app-admin-rmwc/package.json","types":["dependencies"]}]}]},{"name":"@rmwc/provider","versions":[{"version":"14.3.5","files":[{"file":"/packages/app-admin-rmwc/package.json","types":["dependencies"]}]}]},{"name":"@types/react-helmet","versions":[{"version":"6.1.11","files":[{"file":"/packages/app-admin-rmwc/package.json","types":["devDependencies"]},{"file":"/packages/app-security-access-management/package.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/common/apps/website/package.json","types":["devDependencies"]},{"file":"/apps/website/package.json","types":["devDependencies"]}]}]},{"name":"babel-plugin-named-asset-import","versions":[{"version":"1.0.0-next.3e165448","files":[{"file":"/packages/app-admin-rmwc/package.json","types":["devDependencies"]},{"file":"/packages/app-serverless-cms/package.json","types":["devDependencies"]},{"file":"/packages/app-theme-manager/package.json","types":["devDependencies"]}]}]},{"name":"@emotion/is-prop-valid","versions":[{"version":"1.1.1","files":[{"file":"/packages/app-apw/package.json","types":["dependencies"]}]}]},{"name":"react-spinner-material","versions":[{"version":"1.1.4","files":[{"file":"/packages/app-apw/package.json","types":["dependencies"]},{"file":"/packages/ui/package.json","types":["dependencies"]}]}]},{"name":"@fortawesome/fontawesome-svg-core","versions":[{"version":"1.3.0","files":[{"file":"/packages/app-dynamic-pages/package.json","types":["dependencies"]},{"file":"/packages/app-headless-cms/package.json","types":["dependencies"]},{"file":"/packages/app-headless-cms-common/package.json","types":["dependencies"]},{"file":"/packages/app-page-builder/package.json","types":["dependencies"]}]}]},{"name":"@fortawesome/react-fontawesome","versions":[{"version":"0.1.17","files":[{"file":"/packages/app-dynamic-pages/package.json","types":["dependencies"]},{"file":"/packages/app-headless-cms/package.json","types":["dependencies"]},{"file":"/packages/app-page-builder/package.json","types":["dependencies"]}]}]},{"name":"@apollo/react-common","versions":[{"version":"3.1.4","files":[{"file":"/packages/app-file-manager/package.json","types":["dependencies"]},{"file":"/packages/app-form-builder/package.json","types":["dependencies"]},{"file":"/packages/app-headless-cms/package.json","types":["dependencies"]},{"file":"/packages/app-page-builder/package.json","types":["dependencies"]}]}]},{"name":"dataurl-to-blob","versions":[{"version":"0.0.1","files":[{"file":"/packages/app-file-manager/package.json","types":["dependencies"]}]}]},{"name":"react-butterfiles","versions":[{"version":"1.3.3","files":[{"file":"/packages/app-file-manager/package.json","types":["dependencies"]},{"file":"/packages/app-headless-cms/package.json","types":["dependencies"]},{"file":"/packages/ui/package.json","types":["dependencies"]}]}]},{"name":"react-custom-scrollbars","versions":[{"version":"4.2.1","files":[{"file":"/packages/app-file-manager/package.json","types":["dependencies"]},{"file":"/packages/app-headless-cms/package.json","types":["dependencies"]},{"file":"/packages/ui/package.json","types":["dependencies"]}]}]},{"name":"react-lazy-load","versions":[{"version":"3.1.14","files":[{"file":"/packages/app-file-manager/package.json","types":["dependencies"]}]}]},{"name":"@dnd-kit/core","versions":[{"version":"6.1.0","files":[{"file":"/packages/app-form-builder/package.json","types":["dependencies"]}]}]},{"name":"@dnd-kit/sortable","versions":[{"version":"8.0.0","files":[{"file":"/packages/app-form-builder/package.json","types":["dependencies"]}]}]},{"name":"@dnd-kit/utilities","versions":[{"version":"3.2.2","files":[{"file":"/packages/app-form-builder/package.json","types":["dependencies"]}]}]},{"name":"dnd-core","versions":[{"version":"16.0.1","files":[{"file":"/packages/app-form-builder/package.json","types":["dependencies"]},{"file":"/packages/app-headless-cms/package.json","types":["dependencies"]},{"file":"/packages/app-headless-cms-common/package.json","types":["dependencies"]},{"file":"/packages/app-page-builder/package.json","types":["dependencies"]}]}]},{"name":"history","versions":[{"version":"5.3.0","files":[{"file":"/packages/app-form-builder/package.json","types":["dependencies"]},{"file":"/packages/app-page-builder/package.json","types":["dependencies"]},{"file":"/packages/react-router/package.json","types":["dependencies"]}]}]},{"name":"react-dnd-html5-backend","versions":[{"version":"16.0.1","files":[{"file":"/packages/app-form-builder/package.json","types":["dependencies"]},{"file":"/packages/app-headless-cms/package.json","types":["dependencies"]},{"file":"/packages/app-page-builder/package.json","types":["dependencies"]}]}]},{"name":"react-google-recaptcha","versions":[{"version":"1.1.0","files":[{"file":"/packages/app-form-builder/package.json","types":["dependencies"]},{"file":"/packages/app-page-builder-elements/package.json","types":["peerDependencies"]}]}]},{"name":"@types/gtag.js","versions":[{"version":"0.0.20","files":[{"file":"/packages/app-form-builder/package.json","types":["devDependencies"]}]}]},{"name":"@types/react-google-recaptcha","versions":[{"version":"1.1.2","files":[{"file":"/packages/app-form-builder/package.json","types":["devDependencies"]}]}]},{"name":"load-script","versions":[{"version":"1.0.0","files":[{"file":"/packages/app-graphql-playground/package.json","types":["dependencies"]},{"file":"/packages/ui/package.json","types":["dependencies"]}]}]},{"name":"@fortawesome/fontawesome-common-types","versions":[{"version":"0.3.0","files":[{"file":"/packages/app-headless-cms/package.json","types":["dependencies"]},{"file":"/packages/app-page-builder/package.json","types":["dependencies"]}]}]},{"name":"@fortawesome/free-brands-svg-icons","versions":[{"version":"6.0.0","files":[{"file":"/packages/app-headless-cms/package.json","types":["dependencies"]},{"file":"/packages/app-page-builder/package.json","types":["dependencies"]}]}]},{"name":"@fortawesome/free-regular-svg-icons","versions":[{"version":"6.0.0","files":[{"file":"/packages/app-headless-cms/package.json","types":["dependencies"]},{"file":"/packages/app-page-builder/package.json","types":["dependencies"]}]}]},{"name":"@fortawesome/free-solid-svg-icons","versions":[{"version":"6.0.0","files":[{"file":"/packages/app-headless-cms/package.json","types":["dependencies"]},{"file":"/packages/app-page-builder/package.json","types":["dependencies"]}]}]},{"name":"raw.macro","versions":[{"version":"0.4.2","files":[{"file":"/packages/app-headless-cms/package.json","types":["dependencies"]}]}]},{"name":"use-deep-compare-effect","versions":[{"version":"1.8.1","files":[{"file":"/packages/app-headless-cms/package.json","types":["dependencies"]}]}]},{"name":"@types/medium-editor","versions":[{"version":"5.0.3","files":[{"file":"/packages/app-page-builder/package.json","types":["dependencies"]}]}]},{"name":"aos","versions":[{"version":"2.3.4","files":[{"file":"/packages/app-page-builder/package.json","types":["dependencies"]},{"file":"/packages/app-page-builder-elements/package.json","types":["peerDependencies"]}]}]},{"name":"dnd-kit-sortable-tree","versions":[{"version":"0.1.73","files":[{"file":"/packages/app-page-builder/package.json","types":["dependencies"]}]}]},{"name":"medium-editor","versions":[{"version":"5.23.3","files":[{"file":"/packages/app-page-builder/package.json","types":["dependencies"]}]}]},{"name":"platform","versions":[{"version":"1.3.5","files":[{"file":"/packages/app-page-builder/package.json","types":["dependencies"]}]}]},{"name":"react-color","versions":[{"version":"2.19.3","files":[{"file":"/packages/app-page-builder/package.json","types":["dependencies"]},{"file":"/packages/lexical-editor-actions/package.json","types":["dependencies"]},{"file":"/packages/ui/package.json","types":["dependencies"]}]}]},{"name":"react-images","versions":[{"version":"0.5.19","files":[{"file":"/packages/app-page-builder/package.json","types":["dependencies"]},{"file":"/packages/app-page-builder-elements/package.json","types":["peerDependencies"]}]}]},{"name":"react-in-viewport","versions":[{"version":"1.0.0-alpha.30","files":[{"file":"/packages/app-page-builder/package.json","types":["dependencies"]}]}]},{"name":"react-sortable","versions":[{"version":"2.0.0","files":[{"file":"/packages/app-page-builder/package.json","types":["dependencies"]}]}]},{"name":"recoil","versions":[{"version":"0.7.7","files":[{"file":"/packages/app-page-builder/package.json","types":["dependencies"]}]}]},{"name":"swiper","versions":[{"version":"9.3.2","files":[{"file":"/packages/app-page-builder/package.json","types":["dependencies"]},{"file":"/packages/app-page-builder-elements/package.json","types":["peerDependencies"]}]}]},{"name":"@types/aos","versions":[{"version":"3.0.4","files":[{"file":"/packages/app-page-builder/package.json","types":["devDependencies"]}]}]},{"name":"@types/pako","versions":[{"version":"2.0.3","files":[{"file":"/packages/app-page-builder/package.json","types":["devDependencies"]}]}]},{"name":"@types/platform","versions":[{"version":"1.3.4","files":[{"file":"/packages/app-page-builder/package.json","types":["devDependencies"]}]}]},{"name":"@types/react-images","versions":[{"version":"0.5.3","files":[{"file":"/packages/app-page-builder/package.json","types":["devDependencies"]}]}]},{"name":"@types/react-virtualized","versions":[{"version":"9.21.16","files":[{"file":"/packages/app-page-builder/package.json","types":["devDependencies"]}]}]},{"name":"@types/resize-observer-browser","versions":[{"version":"0.1.4","files":[{"file":"/packages/app-page-builder/package.json","types":["devDependencies"]}]}]},{"name":"facepaint","versions":[{"version":"1.2.1","files":[{"file":"/packages/app-page-builder-elements/package.json","types":["dependencies"]}]}]},{"name":"@types/facepaint","versions":[{"version":"1.2.2","files":[{"file":"/packages/app-page-builder-elements/package.json","types":["devDependencies"]}]}]},{"name":"react-columned","versions":[{"version":"1.1.3","files":[{"file":"/packages/app-page-builder-elements/package.json","types":["peerDependencies"]},{"file":"/packages/ui/package.json","types":["dependencies"]}]}]},{"name":"crypto-hash","versions":[{"version":"3.0.0","files":[{"file":"/packages/app-record-locking/package.json","types":["dependencies"]}]}]},{"name":"apollo-link-batch-http","versions":[{"version":"1.2.14","files":[{"file":"/packages/app-serverless-cms/package.json","types":["dependencies"]},{"file":"/packages/app-website/package.json","types":["dependencies"]}]}]},{"name":"@emotion/cache","versions":[{"version":"11.10.5","files":[{"file":"/packages/app-website/package.json","types":["dependencies"]}]}]},{"name":"lz-string","versions":[{"version":"1.5.0","files":[{"file":"/packages/app-website/package.json","types":["dependencies"]}]}]},{"name":"@types/aws-lambda","versions":[{"version":"8.10.145","files":[{"file":"/packages/aws-helpers/package.json","types":["dependencies"]},{"file":"/packages/aws-sdk/package.json","types":["dependencies"]}]}]},{"name":"cheerio","versions":[{"version":"1.0.0-rc.10","files":[{"file":"/packages/aws-helpers/package.json","types":["dependencies"]}]}]},{"name":"@aws-sdk/client-apigatewaymanagementapi","versions":[{"version":"3.734.0","files":[{"file":"/packages/aws-sdk/package.json","types":["dependencies"]}]}]},{"name":"@aws-sdk/client-cloudfront","versions":[{"version":"3.734.0","files":[{"file":"/packages/aws-sdk/package.json","types":["dependencies"]}]}]},{"name":"@aws-sdk/client-cloudwatch-events","versions":[{"version":"3.734.0","files":[{"file":"/packages/aws-sdk/package.json","types":["dependencies"]}]}]},{"name":"@aws-sdk/client-cloudwatch-logs","versions":[{"version":"3.734.0","files":[{"file":"/packages/aws-sdk/package.json","types":["dependencies"]}]}]},{"name":"@aws-sdk/client-cognito-identity-provider","versions":[{"version":"3.734.0","files":[{"file":"/packages/aws-sdk/package.json","types":["dependencies"]}]}]},{"name":"@aws-sdk/client-dynamodb","versions":[{"version":"3.734.0","files":[{"file":"/packages/aws-sdk/package.json","types":["dependencies"]}]}]},{"name":"@aws-sdk/client-dynamodb-streams","versions":[{"version":"3.734.0","files":[{"file":"/packages/aws-sdk/package.json","types":["dependencies"]}]}]},{"name":"@aws-sdk/client-eventbridge","versions":[{"version":"3.734.0","files":[{"file":"/packages/aws-sdk/package.json","types":["dependencies"]}]}]},{"name":"@aws-sdk/client-iam","versions":[{"version":"3.734.0","files":[{"file":"/packages/aws-sdk/package.json","types":["dependencies"]}]}]},{"name":"@aws-sdk/client-iot","versions":[{"version":"3.734.0","files":[{"file":"/packages/aws-sdk/package.json","types":["dependencies"]}]}]},{"name":"@aws-sdk/client-lambda","versions":[{"version":"3.734.0","files":[{"file":"/packages/aws-sdk/package.json","types":["dependencies"]}]}]},{"name":"@aws-sdk/client-s3","versions":[{"version":"3.735.0","files":[{"file":"/packages/aws-sdk/package.json","types":["dependencies"]}]}]},{"name":"@aws-sdk/client-sfn","versions":[{"version":"3.734.0","files":[{"file":"/packages/aws-sdk/package.json","types":["dependencies"]}]}]},{"name":"@aws-sdk/client-sqs","versions":[{"version":"3.734.0","files":[{"file":"/packages/aws-sdk/package.json","types":["dependencies"]}]}]},{"name":"@aws-sdk/client-sts","versions":[{"version":"3.734.0","files":[{"file":"/packages/aws-sdk/package.json","types":["dependencies"]}]}]},{"name":"@aws-sdk/credential-providers","versions":[{"version":"3.734.0","files":[{"file":"/packages/aws-sdk/package.json","types":["dependencies"]}]}]},{"name":"@aws-sdk/lib-dynamodb","versions":[{"version":"3.734.0","files":[{"file":"/packages/aws-sdk/package.json","types":["dependencies"]}]}]},{"name":"@aws-sdk/lib-storage","versions":[{"version":"3.735.0","files":[{"file":"/packages/aws-sdk/package.json","types":["dependencies"]}]}]},{"name":"@aws-sdk/s3-presigned-post","versions":[{"version":"3.735.0","files":[{"file":"/packages/aws-sdk/package.json","types":["dependencies"]}]}]},{"name":"@aws-sdk/s3-request-presigner","versions":[{"version":"3.735.0","files":[{"file":"/packages/aws-sdk/package.json","types":["dependencies"]}]}]},{"name":"@aws-sdk/util-dynamodb","versions":[{"version":"3.734.0","files":[{"file":"/packages/aws-sdk/package.json","types":["dependencies"]}]}]},{"name":"camelcase","versions":[{"version":"6.3.0","files":[{"file":"/packages/cli/package.json","types":["dependencies"]},{"file":"/packages/project-utils/package.json","types":["dependencies"]}]}]},{"name":"ci-info","versions":[{"version":"4.1.0","files":[{"file":"/packages/cli/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-deploy-pulumi/package.json","types":["dependencies"]},{"file":"/packages/cwp-template-aws/package.json","types":["dependencies"]},{"file":"/packages/project-utils/package.json","types":["dependencies"]},{"file":"/packages/telemetry/package.json","types":["dependencies"]}]}]},{"name":"dotenv","versions":[{"version":"8.2.0","files":[{"file":"/packages/cli/package.json","types":["dependencies"]},{"file":"/packages/cwp-template-aws/package.json","types":["devDependencies"]}]}]},{"name":"fast-glob","versions":[{"version":"3.2.7","files":[{"file":"/packages/cli/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-deploy-pulumi/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-extensions/package.json","types":["dependencies","devDependencies"]},{"file":"/packages/cli-plugin-scaffold/package.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/package.json","types":["dependencies"]},{"file":"/packages/serverless-cms-aws/package.json","types":["dependencies"]}]}]},{"name":"find-up","versions":[{"version":"5.0.0","files":[{"file":"/packages/cli/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-extensions/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-scaffold/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-scaffold-admin-app-module/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-scaffold-graphql-service/package.json","types":["dependencies"]},{"file":"/packages/create-webiny-project/package.json","types":["dependencies"]},{"file":"/packages/pulumi/package.json","types":["dependencies"]},{"file":"/packages/serverless-cms-aws/package.json","types":["dependencies"]},{"file":"/scripts/prepublishOnly/package.json","types":["dependencies"]}]}]},{"name":"graphql-request","versions":[{"version":"3.7.0","files":[{"file":"/packages/cli/package.json","types":["dependencies"]},{"file":"/cypress-tests/package.json","types":["devDependencies"]},{"file":"/apps/api/graphql/package.json","types":["devDependencies"]}]}]},{"name":"ncp","versions":[{"version":"2.0.0","files":[{"file":"/packages/cli/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-deploy-pulumi/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-scaffold-admin-app-module/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-scaffold-graphql-service/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-scaffold-react-component/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-scaffold-workspaces/package.json","types":["dependencies"]},{"file":"/packages/ui/package.json","types":["devDependencies"]}]}]},{"name":"open","versions":[{"version":"8.4.2","files":[{"file":"/packages/cli/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-scaffold-ci/package.json","types":["dependencies"]},{"file":"/packages/cwp-template-aws/package.json","types":["dependencies"]}]}]},{"name":"pirates","versions":[{"version":"4.0.6","files":[{"file":"/packages/cli/package.json","types":["dependencies"]}]}]},{"name":"ts-morph","versions":[{"version":"11.0.0","files":[{"file":"/packages/cli/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-extensions/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-scaffold/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-scaffold-graphql-service/package.json","types":["dependencies"]}]}]},{"name":"exit-hook","versions":[{"version":"4.0.0","files":[{"file":"/packages/cli-plugin-deploy-pulumi/package.json","types":["dependencies"]}]}]},{"name":"humanize-duration","versions":[{"version":"3.32.1","files":[{"file":"/packages/cli-plugin-deploy-pulumi/package.json","types":["dependencies"]}]}]},{"name":"log-update","versions":[{"version":"4.0.0","files":[{"file":"/packages/cli-plugin-deploy-pulumi/package.json","types":["dependencies"]}]}]},{"name":"mqtt","versions":[{"version":"5.10.3","files":[{"file":"/packages/cli-plugin-deploy-pulumi/package.json","types":["dependencies"]}]}]},{"name":"node-notifier","versions":[{"version":"10.0.1","files":[{"file":"/packages/cli-plugin-deploy-pulumi/package.json","types":["dependencies"]}]}]},{"name":"ora","versions":[{"version":"4.1.1","files":[{"file":"/packages/cli-plugin-deploy-pulumi/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-extensions/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-scaffold/package.json","types":["dependencies"]},{"file":"/packages/cwp-template-aws/package.json","types":["dependencies"]},{"file":"/packages/serverless-cms-aws/package.json","types":["dependencies"]}]}]},{"name":"replace-in-path","versions":[{"version":"1.1.0","files":[{"file":"/packages/cli-plugin-deploy-pulumi/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-extensions/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-scaffold-admin-app-module/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-scaffold-graphql-service/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-scaffold-react-component/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-scaffold-workspaces/package.json","types":["dependencies"]}]}]},{"name":"serialize-error","versions":[{"version":"8.0.0","files":[{"file":"/packages/cli-plugin-deploy-pulumi/package.json","types":["dependencies"]}]}]},{"name":"@types/humanize-duration","versions":[{"version":"3.27.4","files":[{"file":"/packages/cli-plugin-deploy-pulumi/package.json","types":["devDependencies"]}]}]},{"name":"@types/listr","versions":[{"version":"0.14.9","files":[{"file":"/packages/cli-plugin-deploy-pulumi/package.json","types":["devDependencies"]}]}]},{"name":"@types/node-notifier","versions":[{"version":"8.0.5","files":[{"file":"/packages/cli-plugin-deploy-pulumi/package.json","types":["devDependencies"]}]}]},{"name":"case","versions":[{"version":"1.6.3","files":[{"file":"/packages/cli-plugin-extensions/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-scaffold-admin-app-module/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-scaffold-graphql-service/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-scaffold-react-component/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-scaffold-workspaces/package.json","types":["dependencies"]}]}]},{"name":"validate-npm-package-name","versions":[{"version":"3.0.0","files":[{"file":"/packages/cli-plugin-extensions/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-scaffold-ci/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-scaffold-react-component/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-scaffold-workspaces/package.json","types":["dependencies"]},{"file":"/packages/create-webiny-project/package.json","types":["dependencies"]}]}]},{"name":"@types/inquirer","versions":[{"version":"8.2.10","files":[{"file":"/packages/cli-plugin-extensions/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-scaffold/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-scaffold-admin-app-module/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-scaffold-ci/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-scaffold-extensions/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-scaffold-graphql-service/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-scaffold-react-component/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-scaffold-workspaces/package.json","types":["devDependencies"]}]}]},{"name":"terminal-link","versions":[{"version":"2.1.1","files":[{"file":"/packages/cli-plugin-scaffold-admin-app-module/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-scaffold-ci/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-scaffold-graphql-service/package.json","types":["dependencies"]}]}]},{"name":"@types/ncp","versions":[{"version":"2.0.4","files":[{"file":"/packages/cli-plugin-scaffold-admin-app-module/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-scaffold-ci/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-scaffold-extensions/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-scaffold-graphql-service/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-scaffold-react-component/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-scaffold-workspaces/package.json","types":["devDependencies"]}]}]},{"name":"@types/pluralize","versions":[{"version":"0.0.29","files":[{"file":"/packages/cli-plugin-scaffold-admin-app-module/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-scaffold-ci/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-scaffold-extensions/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-scaffold-graphql-service/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-scaffold-react-component/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-scaffold-workspaces/package.json","types":["devDependencies"]}]}]},{"name":"js-base64","versions":[{"version":"3.7.7","files":[{"file":"/packages/cli-plugin-scaffold-ci/package.json","types":["dependencies"]}]}]},{"name":"octokit","versions":[{"version":"3.1.2","files":[{"file":"/packages/cli-plugin-scaffold-ci/package.json","types":["dependencies"]}]}]},{"name":"@types/validate-npm-package-name","versions":[{"version":"3.0.3","files":[{"file":"/packages/cli-plugin-scaffold-ci/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-scaffold-extensions/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-scaffold-react-component/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-scaffold-workspaces/package.json","types":["devDependencies"]}]}]},{"name":"indent-string","versions":[{"version":"5.0.0","files":[{"file":"/packages/cli-plugin-scaffold-react-component/package.json","types":["dependencies"]}]}]},{"name":"archy","versions":[{"version":"1.0.0","files":[{"file":"/packages/cli-plugin-workspaces/package.json","types":["dependencies"]}]}]},{"name":"color","versions":[{"version":"4.2.3","files":[{"file":"/packages/cli-plugin-workspaces/package.json","types":["dependencies"]}]}]},{"name":"multimatch","versions":[{"version":"5.0.0","files":[{"file":"/packages/cli-plugin-workspaces/package.json","types":["dependencies"]}]}]},{"name":"js-yaml","versions":[{"version":"3.14.1","files":[{"file":"/packages/create-webiny-project/package.json","types":["dependencies"]}]}]},{"name":"os","versions":[{"version":"0.1.1","files":[{"file":"/packages/create-webiny-project/package.json","types":["dependencies"]}]}]},{"name":"uuid","versions":[{"version":"9.0.1","files":[{"file":"/packages/create-webiny-project/package.json","types":["dependencies"]},{"file":"/packages/global-config/package.json","types":["dependencies"]}]}]},{"name":"yesno","versions":[{"version":"0.4.0","files":[{"file":"/packages/create-webiny-project/package.json","types":["dependencies"]}]}]},{"name":"@editorjs/delimiter","versions":[{"version":"1.4.2","files":[{"file":"/packages/cwp-template-aws/template/common/apps/admin/package.json","types":["dependencies"]},{"file":"/apps/admin/package.json","types":["dependencies"]}]}]},{"name":"@editorjs/list","versions":[{"version":"1.10.0","files":[{"file":"/packages/cwp-template-aws/template/common/apps/admin/package.json","types":["dependencies"]},{"file":"/apps/admin/package.json","types":["dependencies"]}]}]},{"name":"@editorjs/quote","versions":[{"version":"2.7.2","files":[{"file":"/packages/cwp-template-aws/template/common/apps/admin/package.json","types":["dependencies"]},{"file":"/apps/admin/package.json","types":["dependencies"]}]}]},{"name":"@editorjs/underline","versions":[{"version":"1.2.1","files":[{"file":"/packages/cwp-template-aws/template/common/apps/admin/package.json","types":["dependencies"]},{"file":"/apps/admin/package.json","types":["dependencies"]}]}]},{"name":"core-js","versions":[{"version":"3.39.0","files":[{"file":"/packages/cwp-template-aws/template/common/apps/admin/package.json","types":["dependencies"]},{"file":"/packages/cwp-template-aws/template/common/apps/website/package.json","types":["dependencies"]},{"file":"/apps/admin/package.json","types":["dependencies"]},{"file":"/apps/website/package.json","types":["dependencies"]}]}]},{"name":"cross-fetch","versions":[{"version":"3.1.5","files":[{"file":"/packages/cwp-template-aws/template/common/apps/admin/package.json","types":["dependencies"]},{"file":"/packages/cwp-template-aws/template/common/apps/website/package.json","types":["dependencies"]},{"file":"/apps/admin/package.json","types":["dependencies"]},{"file":"/apps/website/package.json","types":["dependencies"]}]}]},{"name":"regenerator-runtime","versions":[{"version":"0.13.11","files":[{"file":"/packages/cwp-template-aws/template/common/apps/admin/package.json","types":["dependencies"]},{"file":"/packages/cwp-template-aws/template/common/apps/website/package.json","types":["dependencies"]},{"file":"/apps/admin/package.json","types":["dependencies"]},{"file":"/apps/website/package.json","types":["dependencies"]}]}]},{"name":"theme","versions":[{"version":"1.0.0","files":[{"file":"/packages/cwp-template-aws/template/common/apps/admin/package.json","types":["dependencies"]},{"file":"/packages/cwp-template-aws/template/common/apps/website/package.json","types":["dependencies"]},{"file":"/apps/admin/package.json","types":["dependencies"]},{"file":"/apps/website/package.json","types":["dependencies"]}]}]},{"name":"tslib","versions":[{"version":"2.8.1","files":[{"file":"/packages/cwp-template-aws/template/common/apps/admin/package.json","types":["dependencies"]},{"file":"/apps/admin/package.json","types":["dependencies"]}]}]},{"name":"react-hamburger-menu","versions":[{"version":"1.2.1","files":[{"file":"/packages/cwp-template-aws/template/common/extensions/theme/package.json","types":["dependencies"]},{"file":"/extensions/theme/package.json","types":["dependencies"]}]}]},{"name":"@types/react-hamburger-menu","versions":[{"version":"0.0.4","files":[{"file":"/packages/cwp-template-aws/template/common/extensions/theme/package.json","types":["devDependencies"]},{"file":"/extensions/theme/package.json","types":["devDependencies"]}]}]},{"name":"merge","versions":[{"version":"2.1.1","files":[{"file":"/packages/cwp-template-aws/template/ddb-es/dependencies.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-os/dependencies.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb/dependencies.json","types":["devDependencies"]}]}]},{"name":"center-align","versions":[{"version":"1.0.1","files":[{"file":"/packages/data-migration/package.json","types":["dependencies"]}]}]},{"name":"pino-pretty","versions":[{"version":"9.4.0","files":[{"file":"/packages/data-migration/package.json","types":["dependencies"]},{"file":"/packages/project-utils/package.json","types":["devDependencies"]}]}]},{"name":"@types/center-align","versions":[{"version":"1.0.0","files":[{"file":"/packages/data-migration/package.json","types":["devDependencies"]}]}]},{"name":"@types/semver","versions":[{"version":"7.3.4","files":[{"file":"/packages/data-migration/package.json","types":["devDependencies"]}]}]},{"name":"jest-mock-console","versions":[{"version":"2.0.0","files":[{"file":"/packages/data-migration/package.json","types":["devDependencies"]},{"file":"/packages/handler-graphql/package.json","types":["devDependencies"]}]}]},{"name":"dynamodb-toolbox","versions":[{"version":"0.9.2","files":[{"file":"/packages/db-dynamodb/package.json","types":["dependencies"]}]}]},{"name":"fuse.js","versions":[{"version":"7.0.0","files":[{"file":"/packages/db-dynamodb/package.json","types":["dependencies"]}]}]},{"name":"@types/is-number","versions":[{"version":"7.0.5","files":[{"file":"/packages/db-dynamodb/package.json","types":["devDependencies"]}]}]},{"name":"reflect-metadata","versions":[{"version":"0.2.2","files":[{"file":"/packages/di-container/package.json","types":["dependencies"]},{"file":"/packages/ioc/package.json","types":["dependencies"]}]}]},{"name":"@types/uniqid","versions":[{"version":"5.3.2","files":[{"file":"/packages/feature-flags/package.json","types":["devDependencies"]},{"file":"/packages/plugins/package.json","types":["devDependencies"]}]}]},{"name":"@testing-library/react","versions":[{"version":"15.0.7","files":[{"file":"/packages/form/package.json","types":["devDependencies"]},{"file":"/packages/react-composition/package.json","types":["devDependencies"]},{"file":"/packages/react-properties/package.json","types":["devDependencies"]},{"file":"/packages/react-rich-text-lexical-renderer/package.json","types":["devDependencies"]},{"file":"/packages/ui/package.json","types":["devDependencies"]}]}]},{"name":"@testing-library/user-event","versions":[{"version":"14.5.2","files":[{"file":"/packages/form/package.json","types":["devDependencies"]}]}]},{"name":"@types/invariant","versions":[{"version":"2.2.35","files":[{"file":"/packages/form/package.json","types":["devDependencies"]}]}]},{"name":"@fastify/compress","versions":[{"version":"7.0.3","files":[{"file":"/packages/handler/package.json","types":["dependencies"]}]}]},{"name":"@fastify/cookie","versions":[{"version":"9.4.0","files":[{"file":"/packages/handler/package.json","types":["dependencies"]}]}]},{"name":"fastify","versions":[{"version":"4.29.0","files":[{"file":"/packages/handler/package.json","types":["dependencies"]},{"file":"/packages/handler-aws/package.json","types":["dependencies"]}]}]},{"name":"@fastify/aws-lambda","versions":[{"version":"4.1.0","files":[{"file":"/packages/handler-aws/package.json","types":["dependencies"]}]}]},{"name":"@graphql-tools/resolvers-composition","versions":[{"version":"7.0.1","files":[{"file":"/packages/handler-graphql/package.json","types":["dependencies"]}]}]},{"name":"@graphql-tools/utils","versions":[{"version":"10.3.1","files":[{"file":"/packages/handler-graphql/package.json","types":["dependencies"]}]}]},{"name":"graphql-scalars","versions":[{"version":"1.12.0","files":[{"file":"/packages/handler-graphql/package.json","types":["dependencies"]}]}]},{"name":"accounting","versions":[{"version":"0.4.1","files":[{"file":"/packages/i18n/package.json","types":["dependencies"]}]}]},{"name":"fecha","versions":[{"version":"2.3.3","files":[{"file":"/packages/i18n/package.json","types":["dependencies"]}]}]},{"name":"short-hash","versions":[{"version":"1.0.0","files":[{"file":"/packages/i18n/package.json","types":["dependencies"]}]}]},{"name":"@types/accounting","versions":[{"version":"0.4.2","files":[{"file":"/packages/i18n/package.json","types":["devDependencies"]}]}]},{"name":"inversify","versions":[{"version":"6.1.6","files":[{"file":"/packages/ioc/package.json","types":["dependencies"]}]}]},{"name":"@types/jsdom","versions":[{"version":"21.1.6","files":[{"file":"/packages/lexical-converter/package.json","types":["devDependencies"]}]}]},{"name":"@types/react-color","versions":[{"version":"2.17.11","files":[{"file":"/packages/lexical-editor-actions/package.json","types":["devDependencies"]},{"file":"/packages/ui/package.json","types":["devDependencies"]}]}]},{"name":"@types/prismjs","versions":[{"version":"1.26.4","files":[{"file":"/packages/lexical-nodes/package.json","types":["dependencies"]}]}]},{"name":"react-style-object-to-css","versions":[{"version":"1.1.2","files":[{"file":"/packages/lexical-theme/package.json","types":["dependencies"]}]}]},{"name":"pino","versions":[{"version":"8.21.0","files":[{"file":"/packages/logger/package.json","types":["devDependencies"]},{"file":"/packages/project-utils/package.json","types":["devDependencies"]}]}]},{"name":"@pmmmwh/react-refresh-webpack-plugin","versions":[{"version":"0.5.15","files":[{"file":"/packages/project-utils/package.json","types":["dependencies"]}]}]},{"name":"@rspack/core","versions":[{"version":"1.2.2","files":[{"file":"/packages/project-utils/package.json","types":["dependencies"]}]}]},{"name":"@types/webpack-env","versions":[{"version":"1.18.5","files":[{"file":"/packages/project-utils/package.json","types":["dependencies"]}]}]},{"name":"assert-browserify","versions":[{"version":"2.0.0","files":[{"file":"/packages/project-utils/package.json","types":["dependencies"]}]}]},{"name":"buffer","versions":[{"version":"6.0.3","files":[{"file":"/packages/project-utils/package.json","types":["dependencies"]}]}]},{"name":"bufferutil","versions":[{"version":"4.0.1","files":[{"file":"/packages/project-utils/package.json","types":["dependencies"]}]}]},{"name":"case-sensitive-paths-webpack-plugin","versions":[{"version":"2.4.0","files":[{"file":"/packages/project-utils/package.json","types":["dependencies"]}]}]},{"name":"crypto-browserify","versions":[{"version":"3.12.0","files":[{"file":"/packages/project-utils/package.json","types":["dependencies"]}]}]},{"name":"css-loader","versions":[{"version":"6.10.0","files":[{"file":"/packages/project-utils/package.json","types":["dependencies"]}]}]},{"name":"css-minimizer-webpack-plugin","versions":[{"version":"7.0.0","files":[{"file":"/packages/project-utils/package.json","types":["dependencies"]}]}]},{"name":"eslint-config-react-app","versions":[{"version":"6.0.0","files":[{"file":"/packages/project-utils/package.json","types":["dependencies"]}]}]},{"name":"eslint-webpack-plugin","versions":[{"version":"4.2.0","files":[{"file":"/packages/project-utils/package.json","types":["dependencies"]}]}]},{"name":"file-loader","versions":[{"version":"6.2.0","files":[{"file":"/packages/project-utils/package.json","types":["dependencies"]}]}]},{"name":"fork-ts-checker-webpack-plugin","versions":[{"version":"9.0.2","files":[{"file":"/packages/project-utils/package.json","types":["dependencies"]}]}]},{"name":"html-webpack-plugin","versions":[{"version":"5.6.3","files":[{"file":"/packages/project-utils/package.json","types":["dependencies"]}]}]},{"name":"mini-css-extract-plugin","versions":[{"version":"2.4.5","files":[{"file":"/packages/project-utils/package.json","types":["dependencies"]}]}]},{"name":"null-loader","versions":[{"version":"4.0.1","files":[{"file":"/packages/project-utils/package.json","types":["dependencies"]}]}]},{"name":"os-browserify","versions":[{"version":"0.3.0","files":[{"file":"/packages/project-utils/package.json","types":["dependencies"]}]}]},{"name":"path-browserify","versions":[{"version":"1.0.1","files":[{"file":"/packages/project-utils/package.json","types":["dependencies"]}]}]},{"name":"postcss-flexbugs-fixes","versions":[{"version":"5.0.2","files":[{"file":"/packages/project-utils/package.json","types":["dependencies"]}]}]},{"name":"postcss-loader","versions":[{"version":"6.2.1","files":[{"file":"/packages/project-utils/package.json","types":["dependencies"]}]}]},{"name":"postcss-normalize","versions":[{"version":"10.0.1","files":[{"file":"/packages/project-utils/package.json","types":["dependencies"]}]}]},{"name":"postcss-preset-env","versions":[{"version":"9.4.0","files":[{"file":"/packages/project-utils/package.json","types":["dependencies"]}]}]},{"name":"process","versions":[{"version":"0.11.10","files":[{"file":"/packages/project-utils/package.json","types":["dependencies"]}]}]},{"name":"raw-loader","versions":[{"version":"4.0.2","files":[{"file":"/packages/project-utils/package.json","types":["dependencies"]},{"file":"/packages/ui/package.json","types":["devDependencies"]}]}]},{"name":"react-dev-utils","versions":[{"version":"12.0.1","files":[{"file":"/packages/project-utils/package.json","types":["dependencies"]}]}]},{"name":"react-refresh","versions":[{"version":"0.11.0","files":[{"file":"/packages/project-utils/package.json","types":["dependencies"]}]}]},{"name":"read-json-sync","versions":[{"version":"2.0.1","files":[{"file":"/packages/project-utils/package.json","types":["dependencies"]}]}]},{"name":"resolve","versions":[{"version":"1.22.8","files":[{"file":"/packages/project-utils/package.json","types":["dependencies"]}]}]},{"name":"resolve-url-loader","versions":[{"version":"5.0.0","files":[{"file":"/packages/project-utils/package.json","types":["dependencies"]}]}]},{"name":"sass","versions":[{"version":"1.44.0","files":[{"file":"/packages/project-utils/package.json","types":["dependencies"]}]}]},{"name":"sass-loader","versions":[{"version":"12.3.0","files":[{"file":"/packages/project-utils/package.json","types":["dependencies"]}]}]},{"name":"scheduler","versions":[{"version":"0.19.1","files":[{"file":"/packages/project-utils/package.json","types":["dependencies"]}]}]},{"name":"source-map-loader","versions":[{"version":"1.1.3","files":[{"file":"/packages/project-utils/package.json","types":["dependencies"]}]}]},{"name":"source-map-support","versions":[{"version":"0.5.21","files":[{"file":"/packages/project-utils/package.json","types":["dependencies"]}]}]},{"name":"style-loader","versions":[{"version":"3.3.1","files":[{"file":"/packages/project-utils/package.json","types":["dependencies"]}]}]},{"name":"terser-webpack-plugin","versions":[{"version":"5.3.10","files":[{"file":"/packages/project-utils/package.json","types":["dependencies"]}]}]},{"name":"ts-checker-rspack-plugin","versions":[{"version":"1.0.3","files":[{"file":"/packages/project-utils/package.json","types":["dependencies"]}]}]},{"name":"ts-patch","versions":[{"version":"3.3.0","files":[{"file":"/packages/project-utils/package.json","types":["dependencies"]}]}]},{"name":"url","versions":[{"version":"0.11.4","files":[{"file":"/packages/project-utils/package.json","types":["dependencies"]}]}]},{"name":"url-loader","versions":[{"version":"4.1.1","files":[{"file":"/packages/project-utils/package.json","types":["dependencies"]}]}]},{"name":"utf-8-validate","versions":[{"version":"5.0.2","files":[{"file":"/packages/project-utils/package.json","types":["dependencies"]}]}]},{"name":"vm-browserify","versions":[{"version":"1.1.2","files":[{"file":"/packages/project-utils/package.json","types":["dependencies"]}]}]},{"name":"webpack","versions":[{"version":"5.97.0","files":[{"file":"/packages/project-utils/package.json","types":["dependencies"]},{"file":"/packages/serverless-cms-aws/package.json","types":["dependencies"]}]}]},{"name":"webpack-dev-server","versions":[{"version":"4.15.2","files":[{"file":"/packages/project-utils/package.json","types":["dependencies"]}]}]},{"name":"webpack-manifest-plugin","versions":[{"version":"5.0.0","files":[{"file":"/packages/project-utils/package.json","types":["dependencies"]}]}]},{"name":"webpackbar","versions":[{"version":"7.0.0","files":[{"file":"/packages/project-utils/package.json","types":["dependencies"]}]}]},{"name":"listr2","versions":[{"version":"5.0.8","files":[{"file":"/packages/project-utils/package.json","types":["devDependencies"]},{"file":"/scripts/buildPackages/package.json","types":["dependencies"]}]}]},{"name":"@pulumi/pulumi","versions":[{"version":"3.147.0","files":[{"file":"/packages/pulumi/package.json","types":["dependencies"]},{"file":"/packages/pulumi-aws/package.json","types":["dependencies"]},{"file":"/packages/pulumi-sdk/package.json","types":["dependencies"]},{"file":"/packages/serverless-cms-aws/package.json","types":["dependencies"]}]}]},{"name":"@pulumi/aws","versions":[{"version":"6.67.0","files":[{"file":"/packages/pulumi-aws/package.json","types":["dependencies"]},{"file":"/packages/pulumi-sdk/package.json","types":["dependencies"]},{"file":"/packages/serverless-cms-aws/package.json","types":["dependencies"]}]}]},{"name":"@pulumi/random","versions":[{"version":"4.17.0","files":[{"file":"/packages/pulumi-aws/package.json","types":["dependencies"]}]}]},{"name":"decompress","versions":[{"version":"4.2.1","files":[{"file":"/packages/pulumi-sdk/package.json","types":["dependencies"]}]}]},{"name":"identity-obj-proxy","versions":[{"version":"3.0.0","files":[{"file":"/packages/react-rich-text-lexical-renderer/package.json","types":["devDependencies"]}]}]},{"name":"sanitize-html","versions":[{"version":"2.12.1","files":[{"file":"/packages/react-rich-text-renderer/package.json","types":["dependencies"]}]}]},{"name":"@types/sanitize-html","versions":[{"version":"2.9.0","files":[{"file":"/packages/react-rich-text-renderer/package.json","types":["devDependencies"]}]}]},{"name":"react-router-dom","versions":[{"version":"6.3.0","files":[{"file":"/packages/react-router/package.json","types":["dependencies"]}]}]},{"name":"cli-table3","versions":[{"version":"0.6.5","files":[{"file":"/packages/system-requirements/package.json","types":["dependencies"]}]}]},{"name":"object-merge-advanced","versions":[{"version":"12.1.0","files":[{"file":"/packages/tasks/package.json","types":["dependencies"]}]}]},{"name":"object-sizeof","versions":[{"version":"2.6.4","files":[{"file":"/packages/tasks/package.json","types":["dependencies"]}]}]},{"name":"jsesc","versions":[{"version":"3.0.2","files":[{"file":"/packages/telemetry/package.json","types":["dependencies"]}]}]},{"name":"strip-ansi","versions":[{"version":"6.0.1","files":[{"file":"/packages/telemetry/package.json","types":["dependencies"]}]}]},{"name":"wts-client","versions":[{"version":"1.0.1","files":[{"file":"/packages/telemetry/package.json","types":["dependencies"]}]}]},{"name":"@rmwc/button","versions":[{"version":"14.3.5","files":[{"file":"/packages/ui/package.json","types":["dependencies"]}]}]},{"name":"@rmwc/checkbox","versions":[{"version":"14.3.5","files":[{"file":"/packages/ui/package.json","types":["dependencies"]}]}]},{"name":"@rmwc/chip","versions":[{"version":"14.3.5","files":[{"file":"/packages/ui/package.json","types":["dependencies"]}]}]},{"name":"@rmwc/data-table","versions":[{"version":"14.3.5","files":[{"file":"/packages/ui/package.json","types":["dependencies"]}]}]},{"name":"@rmwc/dialog","versions":[{"version":"14.3.5","files":[{"file":"/packages/ui/package.json","types":["dependencies"]}]}]},{"name":"@rmwc/drawer","versions":[{"version":"14.3.5","files":[{"file":"/packages/ui/package.json","types":["dependencies"]}]}]},{"name":"@rmwc/elevation","versions":[{"version":"14.3.5","files":[{"file":"/packages/ui/package.json","types":["dependencies"]}]}]},{"name":"@rmwc/fab","versions":[{"version":"14.3.5","files":[{"file":"/packages/ui/package.json","types":["dependencies"]}]}]},{"name":"@rmwc/grid","versions":[{"version":"14.3.5","files":[{"file":"/packages/ui/package.json","types":["dependencies"]}]}]},{"name":"@rmwc/icon-button","versions":[{"version":"14.3.5","files":[{"file":"/packages/ui/package.json","types":["dependencies"]}]}]},{"name":"@rmwc/list","versions":[{"version":"14.3.5","files":[{"file":"/packages/ui/package.json","types":["dependencies"]}]}]},{"name":"@rmwc/menu","versions":[{"version":"14.3.5","files":[{"file":"/packages/ui/package.json","types":["dependencies"]}]}]},{"name":"@rmwc/radio","versions":[{"version":"14.3.5","files":[{"file":"/packages/ui/package.json","types":["dependencies"]}]}]},{"name":"@rmwc/ripple","versions":[{"version":"14.3.5","files":[{"file":"/packages/ui/package.json","types":["dependencies"]}]}]},{"name":"@rmwc/select","versions":[{"version":"14.3.5","files":[{"file":"/packages/ui/package.json","types":["dependencies"]}]}]},{"name":"@rmwc/slider","versions":[{"version":"14.3.5","files":[{"file":"/packages/ui/package.json","types":["dependencies"]}]}]},{"name":"@rmwc/snackbar","versions":[{"version":"14.3.5","files":[{"file":"/packages/ui/package.json","types":["dependencies"]}]}]},{"name":"@rmwc/switch","versions":[{"version":"14.3.5","files":[{"file":"/packages/ui/package.json","types":["dependencies"]}]}]},{"name":"@rmwc/tabs","versions":[{"version":"14.3.5","files":[{"file":"/packages/ui/package.json","types":["dependencies"]}]}]},{"name":"@rmwc/textfield","versions":[{"version":"14.3.5","files":[{"file":"/packages/ui/package.json","types":["dependencies"]}]}]},{"name":"@rmwc/top-app-bar","versions":[{"version":"14.3.5","files":[{"file":"/packages/ui/package.json","types":["dependencies"]}]}]},{"name":"@rmwc/touch-target","versions":[{"version":"14.3.5","files":[{"file":"/packages/ui/package.json","types":["dependencies"]}]}]},{"name":"@rmwc/typography","versions":[{"version":"14.3.5","files":[{"file":"/packages/ui/package.json","types":["dependencies"]}]}]},{"name":"@tanstack/react-table","versions":[{"version":"8.5.22","files":[{"file":"/packages/ui/package.json","types":["dependencies"]}]}]},{"name":"brace","versions":[{"version":"0.11.1","files":[{"file":"/packages/ui/package.json","types":["dependencies"]}]}]},{"name":"cropperjs","versions":[{"version":"1.4.3","files":[{"file":"/packages/ui/package.json","types":["dependencies"]}]}]},{"name":"keycode","versions":[{"version":"2.2.0","files":[{"file":"/packages/ui/package.json","types":["dependencies"]}]}]},{"name":"material-components-web","versions":[{"version":"14.0.0","files":[{"file":"/packages/ui/package.json","types":["dependencies"]}]}]},{"name":"nprogress","versions":[{"version":"0.2.0","files":[{"file":"/packages/ui/package.json","types":["dependencies"]}]}]},{"name":"nuka-carousel","versions":[{"version":"4.7.1","files":[{"file":"/packages/ui/package.json","types":["dependencies"]}]}]},{"name":"rc-tooltip","versions":[{"version":"5.3.1","files":[{"file":"/packages/ui/package.json","types":["dependencies"]}]}]},{"name":"react-ace","versions":[{"version":"6.1.4","files":[{"file":"/packages/ui/package.json","types":["dependencies"]}]}]},{"name":"react-loading-skeleton","versions":[{"version":"3.1.0","files":[{"file":"/packages/ui/package.json","types":["dependencies"]}]}]},{"name":"timeago-react","versions":[{"version":"3.0.6","files":[{"file":"/packages/ui/package.json","types":["dependencies"]}]}]},{"name":"@types/nprogress","versions":[{"version":"0.2.0","files":[{"file":"/packages/ui/package.json","types":["devDependencies"]}]}]},{"name":"@types/react-custom-scrollbars","versions":[{"version":"4.0.10","files":[{"file":"/packages/ui/package.json","types":["devDependencies"]}]}]},{"name":"@types/react-transition-group","versions":[{"version":"4.4.4","files":[{"file":"/packages/ui/package.json","types":["devDependencies"]}]}]},{"name":"p-wait-for","versions":[{"version":"4.1.0","files":[{"file":"/packages/ui-composer/package.json","types":["dependencies"]}]}]},{"name":"mdbid","versions":[{"version":"1.0.0","files":[{"file":"/packages/utils/package.json","types":["dependencies"]}]}]},{"name":"nanoid-dictionary","versions":[{"version":"4.3.0","files":[{"file":"/packages/utils/package.json","types":["dependencies"]}]}]},{"name":"isnumeric","versions":[{"version":"0.3.3","files":[{"file":"/packages/validation/package.json","types":["dependencies"]}]}]},{"name":"@4tw/cypress-drag-drop","versions":[{"version":"1.4.0","files":[{"file":"/cypress-tests/package.json","types":["devDependencies"]}]}]},{"name":"@testing-library/cypress","versions":[{"version":"10.0.0","files":[{"file":"/cypress-tests/package.json","types":["devDependencies"]}]}]},{"name":"amazon-cognito-identity-js","versions":[{"version":"4.5.3","files":[{"file":"/cypress-tests/package.json","types":["devDependencies"]}]}]},{"name":"cypress","versions":[{"version":"13.16.0","files":[{"file":"/cypress-tests/package.json","types":["devDependencies"]}]}]},{"name":"cypress-image-snapshot","versions":[{"version":"4.0.1","files":[{"file":"/cypress-tests/package.json","types":["devDependencies"]}]}]},{"name":"cypress-mailosaur","versions":[{"version":"2.7.0","files":[{"file":"/cypress-tests/package.json","types":["devDependencies"]}]}]},{"name":"cypress-wait-until","versions":[{"version":"1.7.1","files":[{"file":"/cypress-tests/package.json","types":["devDependencies"]}]}]},{"name":"del","versions":[{"version":"6.0.0","files":[{"file":"/cypress-tests/package.json","types":["devDependencies"]}]}]},{"name":"source-map-explorer","versions":[{"version":"2.5.3","files":[{"file":"/apps/website/package.json","types":["devDependencies"]}]}]},{"name":"@types/folder-hash","versions":[{"version":"4.0.4","files":[{"file":"/scripts/buildPackages/package.json","types":["devDependencies"]}]}]},{"name":"@types/yargs","versions":[{"version":"17.0.8","files":[{"file":"/scripts/buildPackages/package.json","types":["devDependencies"]}]}]}]}
+{"dependencies":[{"name":"@apollo/react-common","version":"3.1.4","files":["/packages/app-file-manager/package.json","/packages/app-form-builder/package.json","/packages/app-headless-cms/package.json","/packages/app-page-builder/package.json"]},{"name":"@apollo/react-components","version":"3.1.5","files":["/packages/app-admin/package.json","/packages/app-file-manager/package.json","/packages/app-mailer/package.json","/packages/app-page-builder/package.json"]},{"name":"@apollo/react-hooks","version":"3.1.5","files":["/packages/app/package.json","/packages/app-aco/package.json","/packages/app-admin/package.json","/packages/app-admin-auth0/package.json","/packages/app-admin-cognito/package.json","/packages/app-admin-okta/package.json","/packages/app-admin-users-cognito/package.json","/packages/app-apw/package.json","/packages/app-audit-logs/package.json","/packages/app-file-manager/package.json","/packages/app-form-builder/package.json","/packages/app-headless-cms/package.json","/packages/app-i18n/package.json","/packages/app-page-builder/package.json","/packages/app-record-locking/package.json","/packages/app-security-access-management/package.json","/packages/app-tenancy/package.json","/packages/app-tenant-manager/package.json","/packages/app-theme-manager/package.json","/packages/app-wcp/package.json","/packages/app-website/package.json","/packages/cwp-template-aws/template/common/extensions/theme/package.json","/extensions/theme/package.json"]},{"name":"@auth0/auth0-react","version":"2.2.4","files":["/packages/app-admin-auth0/package.json"]},{"name":"@aws-amplify/auth","version":"5.6.15","files":["/packages/app-admin-cognito/package.json","/packages/app-cognito-authenticator/package.json"]},{"name":"@aws-sdk/client-apigatewaymanagementapi","version":"3.734.0","files":["/packages/aws-sdk/package.json"]},{"name":"@aws-sdk/client-cloudfront","version":"3.734.0","files":["/packages/aws-sdk/package.json"]},{"name":"@aws-sdk/client-cloudwatch-events","version":"3.734.0","files":["/packages/aws-sdk/package.json"]},{"name":"@aws-sdk/client-cloudwatch-logs","version":"3.734.0","files":["/packages/aws-sdk/package.json"]},{"name":"@aws-sdk/client-cognito-identity-provider","version":"3.734.0","files":["/packages/aws-sdk/package.json"]},{"name":"@aws-sdk/client-dynamodb","version":"3.734.0","files":["/packages/aws-sdk/package.json"]},{"name":"@aws-sdk/client-dynamodb-streams","version":"3.734.0","files":["/packages/aws-sdk/package.json"]},{"name":"@aws-sdk/client-eventbridge","version":"3.734.0","files":["/packages/aws-sdk/package.json"]},{"name":"@aws-sdk/client-iam","version":"3.734.0","files":["/packages/aws-sdk/package.json"]},{"name":"@aws-sdk/client-iot","version":"3.734.0","files":["/packages/aws-sdk/package.json"]},{"name":"@aws-sdk/client-lambda","version":"3.734.0","files":["/packages/aws-sdk/package.json"]},{"name":"@aws-sdk/client-s3","version":"3.735.0","files":["/packages/aws-sdk/package.json"]},{"name":"@aws-sdk/client-sfn","version":"3.734.0","files":["/packages/aws-sdk/package.json"]},{"name":"@aws-sdk/client-sqs","version":"3.734.0","files":["/packages/aws-sdk/package.json"]},{"name":"@aws-sdk/client-sts","version":"3.734.0","files":["/packages/aws-sdk/package.json"]},{"name":"@aws-sdk/credential-providers","version":"3.734.0","files":["/packages/aws-sdk/package.json"]},{"name":"@aws-sdk/lib-dynamodb","version":"3.734.0","files":["/packages/aws-sdk/package.json"]},{"name":"@aws-sdk/lib-storage","version":"3.735.0","files":["/packages/aws-sdk/package.json"]},{"name":"@aws-sdk/s3-presigned-post","version":"3.735.0","files":["/packages/aws-sdk/package.json"]},{"name":"@aws-sdk/s3-request-presigner","version":"3.735.0","files":["/packages/aws-sdk/package.json"]},{"name":"@aws-sdk/util-dynamodb","version":"3.734.0","files":["/packages/aws-sdk/package.json"]},{"name":"@babel/cli","version":"7.26.4","files":["/packages/project-utils/package.json"]},{"name":"@babel/code-frame","version":"7.26.2","files":["/packages/api-headless-cms/package.json"]},{"name":"@babel/core","version":"7.26.7","files":["/packages/project-utils/package.json"]},{"name":"@babel/plugin-proposal-class-properties","version":"7.18.6","files":["/packages/project-utils/package.json"]},{"name":"@babel/plugin-proposal-object-rest-spread","version":"7.20.7","files":["/packages/project-utils/package.json"]},{"name":"@babel/plugin-proposal-throw-expressions","version":"7.25.9","files":["/packages/project-utils/package.json"]},{"name":"@babel/plugin-syntax-object-rest-spread","version":"7.8.3","files":["/packages/project-utils/package.json"]},{"name":"@babel/preset-env","version":"7.26.7","files":["/packages/project-utils/package.json"]},{"name":"@babel/preset-react","version":"7.26.3","files":["/packages/project-utils/package.json"]},{"name":"@babel/preset-typescript","version":"7.26.0","files":["/packages/project-utils/package.json"]},{"name":"@babel/runtime","version":"7.26.10","files":["/packages/cli-plugin-dependencies/package.json","/packages/cli-plugin-extensions/package.json","/packages/project-utils/package.json"]},{"name":"@dnd-kit/core","version":"6.1.0","files":["/packages/app-form-builder/package.json"]},{"name":"@dnd-kit/sortable","version":"8.0.0","files":["/packages/app-form-builder/package.json"]},{"name":"@dnd-kit/utilities","version":"3.2.2","files":["/packages/app-form-builder/package.json"]},{"name":"@editorjs/delimiter","version":"1.4.2","files":["/packages/cwp-template-aws/template/common/apps/admin/package.json","/apps/admin/package.json"]},{"name":"@editorjs/editorjs","version":"2.26.5","files":["/packages/admin-ui/package.json","/packages/app-admin/package.json","/packages/app-form-builder/package.json","/packages/react-rich-text-renderer/package.json"]},{"name":"@editorjs/list","version":"1.10.0","files":["/packages/cwp-template-aws/template/common/apps/admin/package.json","/apps/admin/package.json"]},{"name":"@editorjs/quote","version":"2.7.2","files":["/packages/cwp-template-aws/template/common/apps/admin/package.json","/apps/admin/package.json"]},{"name":"@editorjs/underline","version":"1.2.1","files":["/packages/cwp-template-aws/template/common/apps/admin/package.json","/apps/admin/package.json"]},{"name":"@elastic/elasticsearch","version":"7.12.0","files":["/packages/api-elasticsearch/package.json","/packages/api-form-builder-so-ddb-es/package.json","/packages/data-migration/package.json","/packages/migrations/package.json"]},{"name":"@emotion/cache","version":"11.10.5","files":["/packages/app-website/package.json"]},{"name":"@emotion/css","version":"11.10.6","files":["/packages/app-headless-cms/package.json"]},{"name":"@emotion/is-prop-valid","version":"1.1.1","files":["/packages/app-apw/package.json"]},{"name":"@emotion/react","version":"11.10.8","files":["/packages/app-admin/package.json","/packages/app-apw/package.json","/packages/app-audit-logs/package.json","/packages/app-dynamic-pages/package.json","/packages/app-form-builder/package.json","/packages/app-graphql-playground/package.json","/packages/app-headless-cms/package.json","/packages/app-headless-cms-common/package.json","/packages/app-page-builder/package.json","/packages/app-page-builder-elements/package.json","/packages/app-serverless-cms/package.json","/packages/app-theme-manager/package.json","/packages/app-wcp/package.json","/packages/app-website/package.json","/packages/cwp-template-aws/template/common/apps/website/package.json","/packages/cwp-template-aws/template/common/extensions/theme/package.json","/packages/lexical-editor/package.json","/packages/lexical-theme/package.json","/packages/theme/package.json","/apps/website/package.json","/extensions/theme/package.json"]},{"name":"@emotion/styled","version":"11.10.6","files":["/packages/app/package.json","/packages/app-admin/package.json","/packages/app-admin-auth0/package.json","/packages/app-admin-okta/package.json","/packages/app-admin-users-cognito/package.json","/packages/app-apw/package.json","/packages/app-audit-logs/package.json","/packages/app-dynamic-pages/package.json","/packages/app-form-builder/package.json","/packages/app-graphql-playground/package.json","/packages/app-headless-cms/package.json","/packages/app-headless-cms-common/package.json","/packages/app-page-builder/package.json","/packages/app-page-builder-elements/package.json","/packages/app-security-access-management/package.json","/packages/app-tenancy/package.json","/packages/app-theme-manager/package.json","/packages/app-website/package.json","/packages/cwp-template-aws/template/common/extensions/theme/package.json","/packages/lexical-editor-actions/package.json","/packages/lexical-editor-pb-element/package.json","/extensions/theme/package.json"]},{"name":"@fastify/aws-lambda","version":"4.1.0","files":["/packages/handler-aws/package.json"]},{"name":"@fastify/compress","version":"7.0.3","files":["/packages/handler/package.json"]},{"name":"@fastify/cookie","version":"9.4.0","files":["/packages/handler/package.json"]},{"name":"@fortawesome/fontawesome-common-types","version":"0.3.0","files":["/packages/app-headless-cms/package.json","/packages/app-page-builder/package.json"]},{"name":"@fortawesome/fontawesome-svg-core","version":"1.3.0","files":["/packages/admin-ui/package.json","/packages/app-dynamic-pages/package.json","/packages/app-headless-cms/package.json","/packages/app-headless-cms-common/package.json","/packages/app-page-builder/package.json"]},{"name":"@fortawesome/free-brands-svg-icons","version":"6.0.0","files":["/packages/app-headless-cms/package.json","/packages/app-page-builder/package.json"]},{"name":"@fortawesome/free-regular-svg-icons","version":"6.0.0","files":["/packages/app-headless-cms/package.json","/packages/app-page-builder/package.json"]},{"name":"@fortawesome/free-solid-svg-icons","version":"6.0.0","files":["/packages/app-headless-cms/package.json","/packages/app-page-builder/package.json"]},{"name":"@fortawesome/react-fontawesome","version":"0.1.17","files":["/packages/admin-ui/package.json","/packages/app-dynamic-pages/package.json","/packages/app-headless-cms/package.json","/packages/app-page-builder/package.json"]},{"name":"@graphql-tools/merge","version":"9.0.4","files":["/packages/api-headless-cms/package.json","/packages/handler-graphql/package.json"]},{"name":"@graphql-tools/resolvers-composition","version":"7.0.1","files":["/packages/handler-graphql/package.json"]},{"name":"@graphql-tools/schema","version":"10.0.6","files":["/packages/api-headless-cms/package.json","/packages/handler-graphql/package.json"]},{"name":"@graphql-tools/utils","version":"10.3.1","files":["/packages/handler-graphql/package.json"]},{"name":"@iconify/json","version":"2.2.142","files":["/packages/app-admin/package.json"]},{"name":"@lexical/code","version":"0.23.1","files":["/packages/lexical-editor/package.json","/packages/lexical-nodes/package.json"]},{"name":"@lexical/hashtag","version":"0.23.1","files":["/packages/lexical-nodes/package.json"]},{"name":"@lexical/headless","version":"0.23.1","files":["/packages/lexical-converter/package.json"]},{"name":"@lexical/history","version":"0.23.1","files":["/packages/lexical-editor/package.json","/packages/lexical-nodes/package.json"]},{"name":"@lexical/html","version":"0.23.1","files":["/packages/lexical-converter/package.json"]},{"name":"@lexical/list","version":"0.23.1","files":["/packages/lexical-nodes/package.json"]},{"name":"@lexical/mark","version":"0.23.1","files":["/packages/lexical-nodes/package.json"]},{"name":"@lexical/overflow","version":"0.23.1","files":["/packages/lexical-nodes/package.json"]},{"name":"@lexical/react","version":"0.23.1","files":["/packages/lexical-editor/package.json","/packages/lexical-nodes/package.json"]},{"name":"@lexical/rich-text","version":"0.23.1","files":["/packages/lexical-editor/package.json","/packages/lexical-nodes/package.json"]},{"name":"@lexical/selection","version":"0.23.1","files":["/packages/lexical-editor/package.json","/packages/lexical-editor-actions/package.json","/packages/lexical-nodes/package.json"]},{"name":"@lexical/text","version":"0.23.1","files":["/packages/lexical-editor/package.json"]},{"name":"@lexical/utils","version":"0.23.1","files":["/packages/app-headless-cms/package.json","/packages/lexical-editor/package.json","/packages/lexical-editor-pb-element/package.json","/packages/lexical-nodes/package.json"]},{"name":"@minoru/react-dnd-treeview","version":"3.2.1","files":["/packages/app-aco/package.json"]},{"name":"@monaco-editor/react","version":"4.7.0","files":["/packages/app-admin/package.json"]},{"name":"@okta/okta-auth-js","version":"5.3.1","files":["/packages/app-admin-okta/package.json"]},{"name":"@okta/okta-react","version":"6.1.0","files":["/packages/app-admin-okta/package.json"]},{"name":"@okta/okta-signin-widget","version":"5.9.4","files":["/packages/app-admin-okta/package.json"]},{"name":"@pmmmwh/react-refresh-webpack-plugin","version":"0.5.15","files":["/packages/project-utils/package.json"]},{"name":"@pulumi/aws","version":"6.67.0","files":["/packages/pulumi-aws/package.json","/packages/pulumi-sdk/package.json","/packages/serverless-cms-aws/package.json"]},{"name":"@pulumi/pulumi","version":"3.147.0","files":["/packages/pulumi/package.json","/packages/pulumi-aws/package.json","/packages/pulumi-sdk/package.json","/packages/serverless-cms-aws/package.json"]},{"name":"@pulumi/random","version":"4.17.0","files":["/packages/pulumi-aws/package.json"]},{"name":"@radix-ui/react-accessible-icon","version":"1.1.2","files":["/packages/admin-ui/package.json"]},{"name":"@radix-ui/react-avatar","version":"1.1.3","files":["/packages/admin-ui/package.json"]},{"name":"@radix-ui/react-checkbox","version":"1.1.4","files":["/packages/admin-ui/package.json"]},{"name":"@radix-ui/react-collapsible","version":"1.1.3","files":["/packages/admin-ui/package.json"]},{"name":"@radix-ui/react-dialog","version":"1.1.6","files":["/packages/admin-ui/package.json"]},{"name":"@radix-ui/react-dropdown-menu","version":"2.1.6","files":["/packages/admin-ui/package.json"]},{"name":"@radix-ui/react-label","version":"2.1.2","files":["/packages/admin-ui/package.json"]},{"name":"@radix-ui/react-popover","version":"1.1.6","files":["/packages/admin-ui/package.json"]},{"name":"@radix-ui/react-progress","version":"1.1.7","files":["/packages/admin-ui/package.json"]},{"name":"@radix-ui/react-radio-group","version":"1.2.3","files":["/packages/admin-ui/package.json"]},{"name":"@radix-ui/react-select","version":"2.1.6","files":["/packages/admin-ui/package.json"]},{"name":"@radix-ui/react-separator","version":"1.1.2","files":["/packages/admin-ui/package.json"]},{"name":"@radix-ui/react-slider","version":"1.2.3","files":["/packages/admin-ui/package.json"]},{"name":"@radix-ui/react-slot","version":"1.1.2","files":["/packages/admin-ui/package.json"]},{"name":"@radix-ui/react-switch","version":"1.1.3","files":["/packages/admin-ui/package.json"]},{"name":"@radix-ui/react-tabs","version":"1.1.3","files":["/packages/admin-ui/package.json"]},{"name":"@radix-ui/react-tooltip","version":"1.1.8","files":["/packages/admin-ui/package.json"]},{"name":"@rspack/core","version":"1.2.2","files":["/packages/project-utils/package.json"]},{"name":"@smithy/node-http-handler","version":"2.1.6","files":["/packages/api-headless-cms-import-export/package.json","/packages/api-page-builder-import-export/package.json"]},{"name":"@sparticuz/chromium","version":"131.0.1","files":["/packages/api-prerendering-service/package.json"]},{"name":"@svgr/webpack","version":"6.1.1","files":["/packages/app-admin/package.json","/packages/app-form-builder/package.json","/packages/app-headless-cms/package.json","/packages/app-page-builder/package.json","/packages/project-utils/package.json","/packages/ui/package.json"]},{"name":"@tanstack/react-table","version":"8.20.6","files":["/packages/admin-ui/package.json"]},{"name":"@types/aws-lambda","version":"8.10.145","files":["/packages/aws-helpers/package.json","/packages/aws-sdk/package.json"]},{"name":"@types/hoist-non-react-statics","version":"3.3.5","files":["/package.json"]},{"name":"@types/medium-editor","version":"5.0.3","files":["/packages/app-page-builder/package.json"]},{"name":"@types/mime","version":"2.0.3","files":["/packages/app-admin/package.json"]},{"name":"@types/prismjs","version":"1.26.4","files":["/packages/lexical-nodes/package.json"]},{"name":"@types/react","version":"18.2.79","files":["/packages/app/package.json","/packages/app-admin/package.json","/packages/app-admin-ui/package.json","/packages/app-apw/package.json","/packages/app-dynamic-pages/package.json","/packages/app-file-manager/package.json","/packages/app-form-builder/package.json","/packages/app-headless-cms/package.json","/packages/app-i18n/package.json","/packages/app-page-builder/package.json","/packages/app-tenancy/package.json","/packages/app-tenant-manager/package.json","/packages/app-theme-manager/package.json","/packages/cwp-template-aws/template/common/apps/admin/package.json","/packages/cwp-template-aws/template/common/apps/website/package.json","/packages/react-composition/package.json","/packages/react-properties/package.json","/packages/react-rich-text-lexical-renderer/package.json","/packages/react-rich-text-renderer/package.json","/apps/admin/package.json","/apps/website/package.json"]},{"name":"@types/webpack-env","version":"1.18.5","files":["/packages/project-utils/package.json"]},{"name":"accept-language-parser","version":"1.5.0","files":["/packages/api-i18n/package.json"]},{"name":"accounting","version":"0.4.1","files":["/packages/i18n/package.json"]},{"name":"ace-builds","version":"1.37.1","files":["/packages/admin-ui/package.json"]},{"name":"aos","version":"2.3.4","files":["/packages/app-page-builder/package.json"]},{"name":"apollo-cache","version":"1.3.5","files":["/packages/app/package.json","/packages/app-admin/package.json","/packages/app-apw/package.json","/packages/app-file-manager/package.json","/packages/app-form-builder/package.json","/packages/app-graphql-playground/package.json","/packages/app-headless-cms/package.json","/packages/app-i18n/package.json","/packages/app-mailer/package.json","/packages/app-page-builder/package.json","/packages/app-serverless-cms/package.json","/packages/app-tenant-manager/package.json","/packages/app-theme-manager/package.json","/packages/app-wcp/package.json"]},{"name":"apollo-cache-inmemory","version":"1.6.6","files":["/packages/app/package.json"]},{"name":"apollo-client","version":"2.6.10","files":["/packages/app/package.json","/packages/app-admin/package.json","/packages/app-admin-auth0/package.json","/packages/app-admin-cognito/package.json","/packages/app-admin-okta/package.json","/packages/app-admin-users-cognito/package.json","/packages/app-apw/package.json","/packages/app-dynamic-pages/package.json","/packages/app-file-manager/package.json","/packages/app-form-builder/package.json","/packages/app-graphql-playground/package.json","/packages/app-headless-cms/package.json","/packages/app-i18n/package.json","/packages/app-mailer/package.json","/packages/app-page-builder/package.json","/packages/app-record-locking/package.json","/packages/app-serverless-cms/package.json","/packages/app-tenancy/package.json","/packages/app-tenant-manager/package.json","/packages/app-theme-manager/package.json","/packages/app-wcp/package.json","/packages/app-website/package.json","/packages/cwp-template-aws/template/common/apps/website/package.json","/packages/react-router/package.json","/apps/website/package.json"]},{"name":"apollo-link","version":"1.2.14","files":["/packages/app/package.json","/packages/app-admin/package.json","/packages/app-apw/package.json","/packages/app-file-manager/package.json","/packages/app-graphql-playground/package.json","/packages/app-headless-cms/package.json","/packages/app-i18n/package.json","/packages/app-mailer/package.json","/packages/app-page-builder/package.json","/packages/app-record-locking/package.json","/packages/app-serverless-cms/package.json","/packages/app-tenant-manager/package.json","/packages/app-theme-manager/package.json","/packages/app-wcp/package.json","/packages/app-website/package.json","/packages/cwp-template-aws/template/common/apps/website/package.json","/apps/website/package.json"]},{"name":"apollo-link-batch-http","version":"1.2.14","files":["/packages/app-serverless-cms/package.json","/packages/app-website/package.json"]},{"name":"apollo-link-context","version":"1.0.20","files":["/packages/app/package.json","/packages/app-admin-auth0/package.json","/packages/app-admin-cognito/package.json","/packages/app-admin-okta/package.json","/packages/app-graphql-playground/package.json","/packages/app-i18n/package.json"]},{"name":"apollo-link-error","version":"1.1.13","files":["/packages/app/package.json"]},{"name":"apollo-link-http-common","version":"0.2.16","files":["/packages/app/package.json"]},{"name":"apollo-utilities","version":"1.3.4","files":["/packages/app/package.json","/packages/app-admin/package.json","/packages/app-apw/package.json","/packages/app-file-manager/package.json","/packages/app-form-builder/package.json","/packages/app-graphql-playground/package.json","/packages/app-headless-cms/package.json","/packages/app-i18n/package.json","/packages/app-mailer/package.json","/packages/app-page-builder/package.json","/packages/app-serverless-cms/package.json","/packages/app-tenant-manager/package.json","/packages/app-theme-manager/package.json","/packages/app-wcp/package.json"]},{"name":"archiver","version":"7.0.1","files":["/packages/api-headless-cms-import-export/package.json","/packages/api-page-builder/package.json","/packages/api-page-builder-import-export/package.json"]},{"name":"archy","version":"1.0.0","files":["/packages/cli-plugin-workspaces/package.json"]},{"name":"assert-browserify","version":"2.0.0","files":["/packages/project-utils/package.json"]},{"name":"babel-loader","version":"9.2.1","files":["/packages/project-utils/package.json"]},{"name":"boolean","version":"3.2.0","files":["/packages/app/package.json","/packages/cli/package.json","/packages/handler-graphql/package.json"]},{"name":"buffer","version":"6.0.3","files":["/packages/project-utils/package.json"]},{"name":"bufferutil","version":"4.0.1","files":["/packages/project-utils/package.json"]},{"name":"bytes","version":"3.1.2","files":["/packages/admin-ui/package.json","/packages/api-headless-cms-import-export/package.json","/packages/app/package.json","/packages/app-file-manager/package.json"]},{"name":"cache-control-parser","version":"2.0.6","files":["/packages/api-file-manager/package.json"]},{"name":"camelcase","version":"6.3.0","files":["/packages/cli/package.json","/packages/project-utils/package.json"]},{"name":"case","version":"1.6.3","files":["/packages/cli-plugin-extensions/package.json","/packages/cli-plugin-scaffold-admin-app-module/package.json","/packages/cli-plugin-scaffold-graphql-service/package.json","/packages/cli-plugin-scaffold-react-component/package.json","/packages/cli-plugin-scaffold-workspaces/package.json"]},{"name":"case-sensitive-paths-webpack-plugin","version":"2.4.0","files":["/packages/project-utils/package.json"]},{"name":"center-align","version":"1.0.1","files":["/packages/data-migration/package.json"]},{"name":"chalk","version":"4.1.2","files":["/packages/aws-layers/package.json","/packages/cli/package.json","/packages/cli-plugin-dependencies/package.json","/packages/cli-plugin-deploy-pulumi/package.json","/packages/cli-plugin-extensions/package.json","/packages/cli-plugin-scaffold-admin-app-module/package.json","/packages/cli-plugin-scaffold-ci/package.json","/packages/cli-plugin-scaffold-graphql-service/package.json","/packages/cli-plugin-scaffold-react-component/package.json","/packages/cli-plugin-workspaces/package.json","/packages/create-webiny-project/package.json","/packages/cwp-template-aws/package.json","/packages/data-migration/package.json","/packages/project-utils/package.json","/packages/serverless-cms-aws/package.json","/packages/system-requirements/package.json","/scripts/buildPackages/package.json","/scripts/prepublishOnly/package.json"]},{"name":"cheerio","version":"1.0.0-rc.10","files":["/packages/aws-helpers/package.json"]},{"name":"ci-info","version":"4.1.0","files":["/packages/cli/package.json","/packages/cli-plugin-deploy-pulumi/package.json","/packages/cwp-template-aws/package.json","/packages/project-utils/package.json","/packages/telemetry/package.json"]},{"name":"class-variance-authority","version":"0.7.0","files":["/packages/admin-ui/package.json"]},{"name":"classnames","version":"2.5.1","files":["/packages/app-admin/package.json","/packages/app-headless-cms/package.json","/packages/app-page-builder/package.json","/packages/react-rich-text-renderer/package.json","/packages/ui/package.json"]},{"name":"cli-table3","version":"0.6.5","files":["/packages/system-requirements/package.json"]},{"name":"clsx","version":"2.1.1","files":["/packages/admin-ui/package.json"]},{"name":"cmdk","version":"1.0.4","files":["/packages/admin-ui/package.json"]},{"name":"color","version":"4.2.3","files":["/packages/cli-plugin-workspaces/package.json"]},{"name":"core-js","version":"3.39.0","files":["/packages/cwp-template-aws/template/common/apps/admin/package.json","/packages/cwp-template-aws/template/common/apps/website/package.json","/apps/admin/package.json","/apps/website/package.json"]},{"name":"cropperjs","version":"1.4.3","files":["/packages/app-file-manager/package.json"]},{"name":"cross-fetch","version":"3.1.5","files":["/packages/cwp-template-aws/template/common/apps/admin/package.json","/packages/cwp-template-aws/template/common/apps/website/package.json","/apps/admin/package.json","/apps/website/package.json"]},{"name":"crypto-browserify","version":"3.12.0","files":["/packages/project-utils/package.json"]},{"name":"crypto-hash","version":"3.0.0","files":["/packages/app-record-locking/package.json"]},{"name":"crypto-js","version":"4.2.0","files":["/packages/api-mailer/package.json"]},{"name":"css-loader","version":"6.10.0","files":["/packages/project-utils/package.json"]},{"name":"css-minimizer-webpack-plugin","version":"7.0.0","files":["/packages/project-utils/package.json"]},{"name":"dataloader","version":"2.2.2","files":["/packages/api-admin-users/package.json","/packages/api-headless-cms-ddb/package.json","/packages/api-headless-cms-ddb-es/package.json","/packages/api-page-builder/package.json","/packages/api-page-builder-so-ddb/package.json","/packages/api-page-builder-so-ddb-es/package.json","/packages/api-tenancy/package.json"]},{"name":"dataurl-to-blob","version":"0.0.1","files":["/packages/app-file-manager/package.json"]},{"name":"date-fns","version":"2.22.1","files":["/packages/api-form-builder/package.json","/packages/app-audit-logs/package.json","/packages/db-dynamodb/package.json"]},{"name":"dayjs","version":"1.11.13","files":["/packages/api-apw/package.json","/packages/app-apw/package.json","/packages/app-file-manager/package.json"]},{"name":"decompress","version":"4.2.1","files":["/packages/pulumi-sdk/package.json"]},{"name":"deep-equal","version":"2.2.3","files":["/packages/api-security/package.json","/packages/api-security-cognito/package.json","/packages/tasks/package.json"]},{"name":"dnd-core","version":"16.0.1","files":["/packages/app-form-builder/package.json","/packages/app-headless-cms/package.json","/packages/app-headless-cms-common/package.json","/packages/app-page-builder/package.json"]},{"name":"dnd-kit-sortable-tree","version":"0.1.73","files":["/packages/app-page-builder/package.json"]},{"name":"dot-prop","version":"6.0.1","files":["/packages/api-headless-cms/package.json","/packages/api-headless-cms-ddb/package.json","/packages/db-dynamodb/package.json"]},{"name":"dot-prop-immutable","version":"2.1.1","files":["/packages/api-page-builder-import-export/package.json","/packages/app-aco/package.json","/packages/app-admin/package.json","/packages/app-apw/package.json","/packages/app-file-manager/package.json","/packages/app-form-builder/package.json","/packages/app-headless-cms/package.json","/packages/app-mailer/package.json","/packages/app-page-builder/package.json"]},{"name":"dotenv","version":"8.2.0","files":["/packages/cli/package.json"]},{"name":"dynamodb-toolbox","version":"0.9.2","files":["/packages/db-dynamodb/package.json"]},{"name":"elastic-ts","version":"0.12.0","files":["/packages/api-elasticsearch/package.json","/packages/api-form-builder-so-ddb-es/package.json","/packages/api-page-builder-so-ddb-es/package.json"]},{"name":"emotion","version":"10.0.27","files":["/packages/app-admin/package.json","/packages/app-admin-auth0/package.json","/packages/app-admin-okta/package.json","/packages/app-admin-users-cognito/package.json","/packages/app-apw/package.json","/packages/app-audit-logs/package.json","/packages/app-dynamic-pages/package.json","/packages/app-form-builder/package.json","/packages/app-page-builder/package.json","/packages/lexical-editor/package.json","/packages/lexical-editor-actions/package.json","/packages/lexical-theme/package.json"]},{"name":"eslint","version":"8.57.1","files":["/packages/project-utils/package.json"]},{"name":"eslint-config-react-app","version":"6.0.0","files":["/packages/project-utils/package.json"]},{"name":"eslint-webpack-plugin","version":"4.2.0","files":["/packages/project-utils/package.json"]},{"name":"execa","version":"5.1.1","files":["/packages/cli/package.json","/packages/cli-plugin-deploy-pulumi/package.json","/packages/cli-plugin-extensions/package.json","/packages/cli-plugin-scaffold-graphql-service/package.json","/packages/cli-plugin-scaffold-react-component/package.json","/packages/cli-plugin-scaffold-workspaces/package.json","/packages/cli-plugin-workspaces/package.json","/packages/create-webiny-project/package.json","/packages/cwp-template-aws/package.json","/packages/pulumi-sdk/package.json","/packages/system-requirements/package.json","/scripts/buildPackages/package.json"]},{"name":"exit-hook","version":"4.0.0","files":["/packages/cli-plugin-deploy-pulumi/package.json"]},{"name":"extract-zip","version":"1.6.7","files":["/packages/api-page-builder/package.json"]},{"name":"facepaint","version":"1.2.1","files":["/packages/app-page-builder-elements/package.json"]},{"name":"fast-glob","version":"3.2.7","files":["/packages/cli/package.json","/packages/cli-plugin-deploy-pulumi/package.json","/packages/cli-plugin-extensions/package.json","/packages/cwp-template-aws/package.json","/packages/serverless-cms-aws/package.json"]},{"name":"fastify","version":"4.29.0","files":["/packages/handler/package.json","/packages/handler-aws/package.json"]},{"name":"fecha","version":"2.3.3","files":["/packages/i18n/package.json"]},{"name":"file-loader","version":"6.2.0","files":["/packages/project-utils/package.json"]},{"name":"find-up","version":"5.0.0","files":["/packages/cli/package.json","/packages/cli-plugin-scaffold-admin-app-module/package.json","/packages/cli-plugin-scaffold-graphql-service/package.json","/packages/create-webiny-project/package.json","/packages/pulumi/package.json","/packages/serverless-cms-aws/package.json","/scripts/prepublishOnly/package.json"]},{"name":"folder-hash","version":"4.0.4","files":["/scripts/buildPackages/package.json"]},{"name":"fork-ts-checker-webpack-plugin","version":"9.0.2","files":["/packages/project-utils/package.json"]},{"name":"form-data","version":"4.0.0","files":["/packages/api-file-manager-s3/package.json","/packages/pulumi-aws/package.json"]},{"name":"fs-extra","version":"11.2.0","files":["/packages/api-page-builder/package.json","/packages/api-page-builder-import-export/package.json","/packages/cli/package.json","/packages/create-webiny-project/package.json","/packages/cwp-template-aws/package.json","/packages/project-utils/package.json","/packages/pulumi-sdk/package.json","/scripts/buildPackages/package.json","/scripts/prepublishOnly/package.json"]},{"name":"fuse.js","version":"7.0.0","files":["/packages/db-dynamodb/package.json"]},{"name":"get-yarn-workspaces","version":"1.0.2","files":["/packages/cli-plugin-dependencies/package.json","/packages/cwp-template-aws/package.json","/packages/project-utils/package.json","/scripts/prepublishOnly/package.json"]},{"name":"glob","version":"7.2.3","files":["/packages/cli-plugin-dependencies/package.json","/packages/cli-plugin-extensions/package.json","/packages/project-utils/package.json"]},{"name":"graphlib","version":"2.1.8","files":["/packages/app-admin/package.json","/packages/cli-plugin-workspaces/package.json"]},{"name":"graphql","version":"15.9.0","files":["/packages/api-headless-cms/package.json","/packages/api-i18n-content/package.json","/packages/app/package.json","/packages/app-aco/package.json","/packages/app-admin/package.json","/packages/app-admin-auth0/package.json","/packages/app-admin-okta/package.json","/packages/app-admin-users-cognito/package.json","/packages/app-apw/package.json","/packages/app-dynamic-pages/package.json","/packages/app-file-manager/package.json","/packages/app-form-builder/package.json","/packages/app-graphql-playground/package.json","/packages/app-headless-cms/package.json","/packages/app-headless-cms-common/package.json","/packages/app-i18n/package.json","/packages/app-mailer/package.json","/packages/app-page-builder/package.json","/packages/app-tenant-manager/package.json","/packages/app-theme-manager/package.json","/packages/app-trash-bin/package.json","/packages/cwp-template-aws/template/common/apps/website/package.json","/packages/cwp-template-aws/template/common/extensions/theme/package.json","/packages/handler-graphql/package.json","/packages/react-router/package.json","/apps/website/package.json","/extensions/theme/package.json"]},{"name":"graphql-request","version":"3.7.0","files":["/packages/cli/package.json"]},{"name":"graphql-scalars","version":"1.12.0","files":["/packages/handler-graphql/package.json"]},{"name":"graphql-tag","version":"2.12.6","files":["/packages/api-headless-cms/package.json","/packages/app-aco/package.json","/packages/app-admin/package.json","/packages/app-admin-auth0/package.json","/packages/app-admin-okta/package.json","/packages/app-admin-users-cognito/package.json","/packages/app-apw/package.json","/packages/app-audit-logs/package.json","/packages/app-file-manager/package.json","/packages/app-file-manager-s3/package.json","/packages/app-form-builder/package.json","/packages/app-headless-cms/package.json","/packages/app-headless-cms-common/package.json","/packages/app-i18n/package.json","/packages/app-mailer/package.json","/packages/app-page-builder/package.json","/packages/app-record-locking/package.json","/packages/app-security-access-management/package.json","/packages/app-tenancy/package.json","/packages/app-tenant-manager/package.json","/packages/app-theme-manager/package.json","/packages/app-wcp/package.json","/packages/app-website/package.json","/packages/handler-graphql/package.json"]},{"name":"history","version":"5.3.0","files":["/packages/app-form-builder/package.json","/packages/app-page-builder/package.json","/packages/react-router/package.json"]},{"name":"html-webpack-plugin","version":"5.6.3","files":["/packages/project-utils/package.json"]},{"name":"humanize-duration","version":"3.32.1","files":["/packages/cli-plugin-deploy-pulumi/package.json"]},{"name":"i18n-locales","version":"0.0.5","files":["/packages/api-i18n/package.json"]},{"name":"indent-string","version":"5.0.0","files":["/packages/cli-plugin-scaffold-react-component/package.json"]},{"name":"inquirer","version":"8.2.6","files":["/packages/cli/package.json","/packages/cli-plugin-extensions/package.json","/packages/cli-plugin-scaffold/package.json","/packages/cli-plugin-scaffold-ci/package.json","/packages/cwp-template-aws/package.json"]},{"name":"invariant","version":"2.2.4","files":["/packages/app/package.json","/packages/app-page-builder/package.json","/packages/cwp-template-aws/template/common/apps/admin/package.json","/packages/serverless-cms-aws/package.json"]},{"name":"inversify","version":"6.1.6","files":["/packages/ioc/package.json"]},{"name":"is-hotkey","version":"0.2.0","files":["/packages/app-admin/package.json","/packages/app-page-builder/package.json"]},{"name":"isnumeric","version":"0.3.3","files":["/packages/validation/package.json"]},{"name":"js-base64","version":"3.7.7","files":["/packages/cli-plugin-scaffold-ci/package.json"]},{"name":"js-yaml","version":"3.14.1","files":["/packages/create-webiny-project/package.json"]},{"name":"jsdom","version":"25.0.1","files":["/packages/api-headless-cms/package.json"]},{"name":"jsesc","version":"3.0.2","files":["/packages/telemetry/package.json"]},{"name":"json2csv","version":"4.5.4","files":["/packages/api-form-builder/package.json","/packages/app-form-builder/package.json"]},{"name":"jsonpack","version":"1.1.5","files":["/packages/api-page-builder/package.json","/packages/utils/package.json"]},{"name":"jsonwebtoken","version":"9.0.1","files":["/packages/api-cognito-authenticator/package.json","/packages/api-security/package.json","/packages/api-security-auth0/package.json","/packages/api-security-okta/package.json"]},{"name":"jwk-to-pem","version":"2.0.1","files":["/packages/api-cognito-authenticator/package.json","/packages/api-security-auth0/package.json","/packages/api-security-okta/package.json"]},{"name":"keycode","version":"2.2.0","files":["/packages/ui/package.json"]},{"name":"lexical","version":"0.23.1","files":["/packages/lexical-converter/package.json","/packages/lexical-editor/package.json","/packages/lexical-nodes/package.json","/packages/lexical-theme/package.json"]},{"name":"listr","version":"0.14.3","files":["/packages/cli-plugin-deploy-pulumi/package.json","/packages/create-webiny-project/package.json"]},{"name":"listr2","version":"5.0.8","files":["/scripts/buildPackages/package.json"]},{"name":"load-json-file","version":"6.2.0","files":["/packages/api-page-builder/package.json","/packages/api-page-builder-import-export/package.json","/packages/cli-plugin-dependencies/package.json","/packages/cli-plugin-extensions/package.json","/packages/cli-plugin-scaffold/package.json","/packages/cli-plugin-scaffold-admin-app-module/package.json","/packages/cli-plugin-scaffold-graphql-service/package.json","/packages/cli-plugin-scaffold-react-component/package.json","/packages/cli-plugin-scaffold-workspaces/package.json","/packages/create-webiny-project/package.json","/packages/cwp-template-aws/package.json","/packages/global-config/package.json","/scripts/buildPackages/package.json","/scripts/prepublishOnly/package.json"]},{"name":"load-script","version":"1.0.0","files":["/packages/app-file-manager/package.json","/packages/app-graphql-playground/package.json"]},{"name":"lodash","version":"4.17.21","files":["/packages/admin-ui/package.json","/packages/api-aco/package.json","/packages/api-admin-users/package.json","/packages/api-apw/package.json","/packages/api-file-manager/package.json","/packages/api-form-builder/package.json","/packages/api-headless-cms/package.json","/packages/api-headless-cms-ddb/package.json","/packages/api-headless-cms-ddb-es/package.json","/packages/api-mailer/package.json","/packages/api-page-builder/package.json","/packages/api-page-builder-aco/package.json","/packages/api-page-builder-import-export/package.json","/packages/api-page-builder-so-ddb-es/package.json","/packages/api-prerendering-service/package.json","/packages/api-prerendering-service-aws/package.json","/packages/app/package.json","/packages/app-aco/package.json","/packages/app-admin/package.json","/packages/app-admin-auth0/package.json","/packages/app-admin-okta/package.json","/packages/app-admin-users-cognito/package.json","/packages/app-apw/package.json","/packages/app-audit-logs/package.json","/packages/app-cognito-authenticator/package.json","/packages/app-file-manager/package.json","/packages/app-form-builder/package.json","/packages/app-headless-cms/package.json","/packages/app-headless-cms-common/package.json","/packages/app-i18n/package.json","/packages/app-page-builder/package.json","/packages/app-page-builder-elements/package.json","/packages/app-security-access-management/package.json","/packages/app-tenant-manager/package.json","/packages/app-theme-manager/package.json","/packages/app-trash-bin/package.json","/packages/cli-plugin-deploy-pulumi/package.json","/packages/cwp-template-aws/package.json","/packages/db-dynamodb/package.json","/packages/form/package.json","/packages/i18n/package.json","/packages/i18n-react/package.json","/packages/migrations/package.json","/packages/project-utils/package.json","/packages/pulumi/package.json","/packages/pulumi-aws/package.json","/packages/pulumi-sdk/package.json","/packages/tasks/package.json","/packages/ui/package.json","/packages/validation/package.json","/scripts/prepublishOnly/package.json"]},{"name":"log-update","version":"4.0.0","files":["/packages/cli-plugin-deploy-pulumi/package.json"]},{"name":"lz-string","version":"1.5.0","files":["/packages/app-website/package.json"]},{"name":"md5","version":"2.3.0","files":["/packages/api-admin-users/package.json"]},{"name":"mdbid","version":"1.0.0","files":["/packages/utils/package.json"]},{"name":"medium-editor","version":"5.23.3","files":["/packages/app-page-builder/package.json"]},{"name":"mime","version":"3.0.0","files":["/packages/api-file-manager-s3/package.json","/packages/app-file-manager/package.json","/packages/cli-plugin-deploy-pulumi/package.json"]},{"name":"mini-css-extract-plugin","version":"2.4.5","files":["/packages/project-utils/package.json"]},{"name":"minimatch","version":"5.1.6","files":["/packages/api-security/package.json","/packages/app/package.json","/packages/app-file-manager/package.json","/packages/app-security/package.json","/packages/cli-plugin-deploy-pulumi/package.json","/packages/data-migration/package.json"]},{"name":"mobx","version":"6.9.0","files":["/packages/admin-ui/package.json","/packages/app-aco/package.json","/packages/app-admin/package.json","/packages/app-dynamic-pages/package.json","/packages/app-file-manager/package.json","/packages/app-headless-cms/package.json","/packages/app-page-builder/package.json","/packages/app-trash-bin/package.json","/packages/app-utils/package.json"]},{"name":"mobx-react-lite","version":"3.4.3","files":["/packages/app-aco/package.json","/packages/app-admin/package.json","/packages/app-file-manager/package.json","/packages/app-headless-cms/package.json","/packages/app-page-builder/package.json","/packages/app-trash-bin/package.json"]},{"name":"mqtt","version":"5.10.3","files":["/packages/cli-plugin-deploy-pulumi/package.json"]},{"name":"multimatch","version":"5.0.0","files":["/packages/cli-plugin-workspaces/package.json"]},{"name":"nanoid","version":"3.3.8","files":["/packages/app/package.json","/packages/app-page-builder/package.json","/packages/react-properties/package.json","/packages/utils/package.json"]},{"name":"nanoid-dictionary","version":"4.3.0","files":["/packages/utils/package.json"]},{"name":"ncp","version":"2.0.0","files":["/packages/cli/package.json","/packages/cli-plugin-deploy-pulumi/package.json","/packages/cli-plugin-scaffold-admin-app-module/package.json","/packages/cli-plugin-scaffold-graphql-service/package.json","/packages/cli-plugin-scaffold-react-component/package.json","/packages/cli-plugin-scaffold-workspaces/package.json"]},{"name":"node-fetch","version":"2.6.7","files":["/packages/api-cognito-authenticator/package.json","/packages/api-file-manager-s3/package.json","/packages/api-form-builder/package.json","/packages/api-page-builder/package.json","/packages/api-page-builder-import-export/package.json","/packages/api-security-auth0/package.json","/packages/api-security-okta/package.json","/packages/api-wcp/package.json","/packages/create-webiny-project/package.json","/packages/pulumi-aws/package.json","/packages/pulumi-sdk/package.json","/packages/serverless-cms-aws/package.json","/packages/wcp/package.json"]},{"name":"node-notifier","version":"10.0.1","files":["/packages/cli-plugin-deploy-pulumi/package.json"]},{"name":"nodemailer","version":"6.9.16","files":["/packages/api-mailer/package.json"]},{"name":"null-loader","version":"4.0.1","files":["/packages/project-utils/package.json"]},{"name":"object-hash","version":"3.0.0","files":["/packages/api-file-manager/package.json","/packages/api-file-manager-s3/package.json","/packages/api-prerendering-service/package.json"]},{"name":"object-merge-advanced","version":"12.1.0","files":["/packages/tasks/package.json"]},{"name":"object-sizeof","version":"2.6.4","files":["/packages/tasks/package.json"]},{"name":"octokit","version":"3.1.2","files":["/packages/cli-plugin-scaffold-ci/package.json"]},{"name":"open","version":"8.4.2","files":["/packages/cli/package.json","/packages/cli-plugin-scaffold-ci/package.json","/packages/cwp-template-aws/package.json"]},{"name":"ora","version":"4.1.1","files":["/packages/cli-plugin-deploy-pulumi/package.json","/packages/cli-plugin-extensions/package.json","/packages/cli-plugin-scaffold/package.json","/packages/cwp-template-aws/package.json","/packages/serverless-cms-aws/package.json"]},{"name":"os","version":"0.1.1","files":["/packages/create-webiny-project/package.json"]},{"name":"os-browserify","version":"0.3.0","files":["/packages/project-utils/package.json"]},{"name":"p-map","version":"4.0.0","files":["/packages/api-file-manager-s3/package.json","/packages/api-headless-cms/package.json","/packages/cli-plugin-workspaces/package.json"]},{"name":"p-reduce","version":"2.1.0","files":["/packages/api-file-manager-s3/package.json","/packages/api-headless-cms/package.json"]},{"name":"p-retry","version":"4.6.2","files":["/packages/api-dynamodb-to-elasticsearch/package.json","/packages/app-file-manager-s3/package.json","/packages/cli-plugin-deploy-pulumi/package.json","/packages/create-webiny-project/package.json","/packages/utils/package.json"]},{"name":"p-wait-for","version":"4.1.0","files":["/packages/ui-composer/package.json"]},{"name":"pako","version":"2.1.0","files":["/packages/app-aco/package.json","/packages/app-page-builder/package.json"]},{"name":"path-browserify","version":"1.0.1","files":["/packages/project-utils/package.json"]},{"name":"pino-pretty","version":"9.4.0","files":["/packages/data-migration/package.json"]},{"name":"pirates","version":"4.0.6","files":["/packages/cli/package.json"]},{"name":"platform","version":"1.3.5","files":["/packages/app-page-builder/package.json"]},{"name":"pluralize","version":"8.0.0","files":["/packages/api-headless-cms/package.json","/packages/api-prerendering-service/package.json","/packages/cli-plugin-scaffold-admin-app-module/package.json","/packages/cli-plugin-scaffold-graphql-service/package.json","/packages/cli-plugin-scaffold-react-component/package.json"]},{"name":"postcss-flexbugs-fixes","version":"5.0.2","files":["/packages/project-utils/package.json"]},{"name":"postcss-loader","version":"6.2.1","files":["/packages/project-utils/package.json"]},{"name":"postcss-normalize","version":"10.0.1","files":["/packages/project-utils/package.json"]},{"name":"postcss-preset-env","version":"9.4.0","files":["/packages/project-utils/package.json"]},{"name":"posthtml","version":"0.15.0","files":["/packages/api-prerendering-service/package.json"]},{"name":"posthtml-noopener","version":"1.0.5","files":["/packages/api-prerendering-service/package.json"]},{"name":"posthtml-plugin-link-preload","version":"1.0.0","files":["/packages/api-prerendering-service/package.json"]},{"name":"process","version":"0.11.10","files":["/packages/project-utils/package.json"]},{"name":"prop-types","version":"15.8.1","files":["/packages/app-admin/package.json","/packages/app-apw/package.json","/packages/app-file-manager/package.json","/packages/app-form-builder/package.json","/packages/app-graphql-playground/package.json","/packages/app-headless-cms/package.json","/packages/app-headless-cms-common/package.json","/packages/app-i18n/package.json","/packages/app-mailer/package.json","/packages/app-page-builder/package.json","/packages/app-tenant-manager/package.json","/packages/app-theme-manager/package.json","/packages/cwp-template-aws/template/common/apps/admin/package.json","/apps/admin/package.json"]},{"name":"puppeteer-core","version":"23.11.1","files":["/packages/api-prerendering-service/package.json"]},{"name":"raw-loader","version":"4.0.2","files":["/packages/project-utils/package.json"]},{"name":"raw.macro","version":"0.4.2","files":["/packages/app-headless-cms/package.json"]},{"name":"react","version":"18.2.0","files":["/packages/admin-ui/package.json","/packages/app/package.json","/packages/app-aco/package.json","/packages/app-admin/package.json","/packages/app-admin-auth0/package.json","/packages/app-admin-cognito/package.json","/packages/app-admin-okta/package.json","/packages/app-admin-ui/package.json","/packages/app-admin-users-cognito/package.json","/packages/app-apw/package.json","/packages/app-cognito-authenticator/package.json","/packages/app-dynamic-pages/package.json","/packages/app-file-manager/package.json","/packages/app-form-builder/package.json","/packages/app-graphql-playground/package.json","/packages/app-headless-cms/package.json","/packages/app-headless-cms-common/package.json","/packages/app-i18n/package.json","/packages/app-i18n-content/package.json","/packages/app-mailer/package.json","/packages/app-page-builder/package.json","/packages/app-plugin-admin-welcome-screen/package.json","/packages/app-record-locking/package.json","/packages/app-security/package.json","/packages/app-security-access-management/package.json","/packages/app-serverless-cms/package.json","/packages/app-tenancy/package.json","/packages/app-tenant-manager/package.json","/packages/app-theme-manager/package.json","/packages/app-trash-bin/package.json","/packages/app-wcp/package.json","/packages/app-website/package.json","/packages/app-websockets/package.json","/packages/cli-plugin-extensions/templates/admin/package.json","/packages/cli-plugin-extensions/templates/pbElement/package.json","/packages/cli-plugin-extensions/templates/website/package.json","/packages/cli-plugin-scaffold-react-component/template/package.json","/packages/cwp-template-aws/template/common/apps/admin/package.json","/packages/cwp-template-aws/template/common/apps/website/package.json","/packages/cwp-template-aws/template/common/extensions/theme/package.json","/packages/lexical-editor/package.json","/packages/lexical-editor-actions/package.json","/packages/lexical-editor-pb-element/package.json","/packages/project-utils/package.json","/packages/react-composition/package.json","/packages/react-properties/package.json","/packages/react-rich-text-lexical-renderer/package.json","/packages/react-rich-text-renderer/package.json","/packages/react-router/package.json","/packages/ui-composer/package.json","/apps/admin/package.json","/apps/website/package.json","/extensions/theme/package.json"]},{"name":"react-ace","version":"13.0.0","files":["/packages/admin-ui/package.json"]},{"name":"react-butterfiles","version":"1.3.3","files":["/packages/app-file-manager/package.json","/packages/app-headless-cms/package.json"]},{"name":"react-color","version":"2.19.3","files":["/packages/admin-ui/package.json","/packages/app-page-builder/package.json","/packages/lexical-editor-actions/package.json"]},{"name":"react-columned","version":"1.1.3","files":["/packages/app-page-builder/package.json"]},{"name":"react-custom-scrollbars","version":"4.2.1","files":["/packages/admin-ui/package.json","/packages/app-file-manager/package.json","/packages/app-headless-cms/package.json"]},{"name":"react-dev-utils","version":"12.0.1","files":["/packages/project-utils/package.json"]},{"name":"react-dnd","version":"16.0.1","files":["/packages/app-aco/package.json","/packages/app-form-builder/package.json","/packages/app-headless-cms/package.json","/packages/app-page-builder/package.json"]},{"name":"react-dnd-html5-backend","version":"16.0.1","files":["/packages/app-form-builder/package.json","/packages/app-headless-cms/package.json","/packages/app-page-builder/package.json"]},{"name":"react-dom","version":"18.2.0","files":["/packages/app/package.json","/packages/app-aco/package.json","/packages/app-admin/package.json","/packages/app-admin-auth0/package.json","/packages/app-admin-cognito/package.json","/packages/app-admin-okta/package.json","/packages/app-admin-ui/package.json","/packages/app-admin-users-cognito/package.json","/packages/app-apw/package.json","/packages/app-cognito-authenticator/package.json","/packages/app-dynamic-pages/package.json","/packages/app-file-manager/package.json","/packages/app-form-builder/package.json","/packages/app-graphql-playground/package.json","/packages/app-headless-cms/package.json","/packages/app-i18n/package.json","/packages/app-i18n-content/package.json","/packages/app-mailer/package.json","/packages/app-page-builder/package.json","/packages/app-plugin-admin-welcome-screen/package.json","/packages/app-record-locking/package.json","/packages/app-security/package.json","/packages/app-security-access-management/package.json","/packages/app-serverless-cms/package.json","/packages/app-tenancy/package.json","/packages/app-tenant-manager/package.json","/packages/app-theme-manager/package.json","/packages/app-trash-bin/package.json","/packages/app-wcp/package.json","/packages/app-website/package.json","/packages/app-websockets/package.json","/packages/cwp-template-aws/template/common/apps/admin/package.json","/packages/cwp-template-aws/template/common/apps/website/package.json","/packages/lexical-editor/package.json","/packages/lexical-editor-actions/package.json","/packages/lexical-editor-pb-element/package.json","/packages/project-utils/package.json","/packages/react-composition/package.json","/packages/react-router/package.json","/packages/ui-composer/package.json","/apps/admin/package.json","/apps/website/package.json"]},{"name":"react-draggable","version":"4.4.6","files":["/packages/app-admin/package.json"]},{"name":"react-google-recaptcha","version":"1.1.0","files":["/packages/app-form-builder/package.json"]},{"name":"react-hamburger-menu","version":"1.2.1","files":["/packages/cwp-template-aws/template/common/extensions/theme/package.json","/extensions/theme/package.json"]},{"name":"react-helmet","version":"6.1.0","files":["/packages/app-admin-auth0/package.json","/packages/app-admin-okta/package.json","/packages/app-admin-ui/package.json","/packages/app-admin-users-cognito/package.json","/packages/app-apw/package.json","/packages/app-headless-cms/package.json","/packages/app-mailer/package.json","/packages/app-page-builder/package.json","/packages/app-security-access-management/package.json","/packages/app-website/package.json"]},{"name":"react-hotkeyz","version":"1.0.4","files":["/packages/app-aco/package.json","/packages/app-file-manager/package.json","/packages/app-form-builder/package.json","/packages/app-headless-cms/package.json"]},{"name":"react-images","version":"0.5.19","files":["/packages/app-page-builder/package.json"]},{"name":"react-in-viewport","version":"1.0.0-alpha.30","files":["/packages/app-page-builder/package.json"]},{"name":"react-lazy-load","version":"3.1.14","files":["/packages/app-file-manager/package.json"]},{"name":"react-refresh","version":"0.11.0","files":["/packages/project-utils/package.json"]},{"name":"react-resizable","version":"3.0.5","files":["/packages/app-admin/package.json"]},{"name":"react-resizable-panels","version":"2.0.19","files":["/packages/app-admin/package.json"]},{"name":"react-router-dom","version":"6.3.0","files":["/packages/react-router/package.json"]},{"name":"react-sortable","version":"2.0.0","files":["/packages/app-page-builder/package.json"]},{"name":"react-spinner-material","version":"1.1.4","files":["/packages/app-apw/package.json"]},{"name":"react-style-object-to-css","version":"1.1.2","files":["/packages/lexical-theme/package.json"]},{"name":"react-transition-group","version":"4.4.5","files":["/packages/app-admin/package.json"]},{"name":"react-virtualized","version":"9.22.5","files":["/packages/admin-ui/package.json","/packages/app-admin/package.json"]},{"name":"read-json-sync","version":"2.0.1","files":["/packages/project-utils/package.json"]},{"name":"recoil","version":"0.7.7","files":["/packages/app-page-builder/package.json"]},{"name":"reflect-metadata","version":"0.2.2","files":["/packages/di-container/package.json","/packages/ioc/package.json"]},{"name":"regenerator-runtime","version":"0.13.11","files":["/packages/cwp-template-aws/template/common/apps/admin/package.json","/packages/cwp-template-aws/template/common/apps/website/package.json","/apps/admin/package.json","/apps/website/package.json"]},{"name":"replace-in-path","version":"1.1.0","files":["/packages/cli-plugin-deploy-pulumi/package.json","/packages/cli-plugin-extensions/package.json","/packages/cli-plugin-scaffold-admin-app-module/package.json","/packages/cli-plugin-scaffold-graphql-service/package.json","/packages/cli-plugin-scaffold-react-component/package.json","/packages/cli-plugin-scaffold-workspaces/package.json"]},{"name":"reset-css","version":"5.0.1","files":["/packages/app-admin/package.json","/packages/app-website/package.json"]},{"name":"resolve","version":"1.22.8","files":["/packages/project-utils/package.json"]},{"name":"resolve-url-loader","version":"5.0.0","files":["/packages/project-utils/package.json"]},{"name":"rimraf","version":"6.0.1","files":["/packages/create-webiny-project/package.json","/packages/project-utils/package.json"]},{"name":"sanitize-filename","version":"1.6.3","files":["/packages/api-file-manager-s3/package.json"]},{"name":"sanitize-html","version":"2.12.1","files":["/packages/react-rich-text-renderer/package.json"]},{"name":"sass","version":"1.44.0","files":["/packages/project-utils/package.json"]},{"name":"sass-loader","version":"12.3.0","files":["/packages/project-utils/package.json"]},{"name":"scheduler","version":"0.19.1","files":["/packages/project-utils/package.json"]},{"name":"semver","version":"7.6.3","files":["/packages/api-headless-cms/package.json","/packages/cli/package.json","/packages/cli-plugin-dependencies/package.json","/packages/create-webiny-project/package.json","/packages/data-migration/package.json","/packages/pulumi-sdk/package.json","/packages/system-requirements/package.json"]},{"name":"serialize-error","version":"8.0.0","files":["/packages/cli-plugin-deploy-pulumi/package.json"]},{"name":"sharp","version":"0.32.6","files":["/packages/api-file-manager-s3/package.json"]},{"name":"short-hash","version":"1.0.0","files":["/packages/i18n/package.json"]},{"name":"slugify","version":"1.6.6","files":["/packages/api-form-builder/package.json","/packages/api-headless-cms/package.json","/packages/app-aco/package.json","/packages/app-dynamic-pages/package.json","/packages/app-page-builder/package.json"]},{"name":"sonner","version":"2.0.1","files":["/packages/admin-ui/package.json"]},{"name":"source-map-loader","version":"1.1.3","files":["/packages/project-utils/package.json"]},{"name":"source-map-support","version":"0.5.21","files":["/packages/project-utils/package.json"]},{"name":"srcset","version":"4.0.0","files":["/packages/api-prerendering-service/package.json","/packages/aws-helpers/package.json"]},{"name":"store","version":"2.0.12","files":["/packages/app-aco/package.json","/packages/app-admin/package.json","/packages/app-page-builder/package.json","/packages/app-tenancy/package.json"]},{"name":"stream","version":"0.0.3","files":["/packages/api-page-builder/package.json","/packages/api-page-builder-import-export/package.json"]},{"name":"strip-ansi","version":"6.0.1","files":["/packages/telemetry/package.json"]},{"name":"style-loader","version":"3.3.1","files":["/packages/project-utils/package.json"]},{"name":"swiper","version":"9.3.2","files":["/packages/app-page-builder/package.json"]},{"name":"tailwind-merge","version":"2.4.0","files":["/packages/admin-ui/package.json"]},{"name":"tailwindcss","version":"3.4.6","files":["/packages/admin-ui/package.json","/packages/serverless-cms-aws/package.json"]},{"name":"tailwindcss-animate","version":"1.0.7","files":["/packages/admin-ui/package.json"]},{"name":"tar","version":"6.2.1","files":["/packages/pulumi-sdk/package.json"]},{"name":"terminal-link","version":"2.1.1","files":["/packages/cli-plugin-scaffold-admin-app-module/package.json","/packages/cli-plugin-scaffold-ci/package.json","/packages/cli-plugin-scaffold-graphql-service/package.json"]},{"name":"terser-webpack-plugin","version":"5.3.10","files":["/packages/project-utils/package.json"]},{"name":"theme","version":"1.0.0","files":["/packages/cwp-template-aws/template/common/apps/admin/package.json","/packages/cwp-template-aws/template/common/apps/website/package.json","/apps/admin/package.json","/apps/website/package.json"]},{"name":"timeago-react","version":"3.0.6","files":["/packages/admin-ui/package.json"]},{"name":"tinycolor2","version":"1.6.0","files":["/packages/app-admin/package.json"]},{"name":"ts-checker-rspack-plugin","version":"1.0.3","files":["/packages/project-utils/package.json"]},{"name":"ts-invariant","version":"0.10.3","files":["/packages/app/package.json"]},{"name":"ts-morph","version":"11.0.0","files":["/packages/cli/package.json","/packages/cli-plugin-extensions/package.json","/packages/cli-plugin-scaffold/package.json","/packages/cli-plugin-scaffold-graphql-service/package.json"]},{"name":"ts-patch","version":"3.3.0","files":["/packages/project-utils/package.json"]},{"name":"tslib","version":"2.8.1","files":["/packages/cwp-template-aws/template/common/apps/admin/package.json","/apps/admin/package.json"]},{"name":"type-fest","version":"4.14.0","files":["/packages/api-websockets/package.json","/packages/db/package.json"]},{"name":"typescript","version":"5.3.3","files":["/packages/cli/package.json","/packages/project-utils/package.json"]},{"name":"unicode-emoji-json","version":"0.4.0","files":["/packages/app-admin/package.json"]},{"name":"uniqid","version":"5.4.0","files":["/packages/api-headless-cms-import-export/package.json","/packages/api-page-builder/package.json","/packages/api-page-builder-import-export/package.json","/packages/app-page-builder/package.json","/packages/cli/package.json","/packages/plugins/package.json"]},{"name":"unzipper","version":"0.12.3","files":["/packages/api-headless-cms-import-export/package.json"]},{"name":"url","version":"0.11.4","files":["/packages/project-utils/package.json"]},{"name":"url-loader","version":"4.1.1","files":["/packages/project-utils/package.json"]},{"name":"use-deep-compare-effect","version":"1.8.1","files":["/packages/app-headless-cms/package.json"]},{"name":"utf-8-validate","version":"5.0.2","files":["/packages/project-utils/package.json"]},{"name":"uuid","version":"9.0.1","files":["/packages/create-webiny-project/package.json","/packages/global-config/package.json"]},{"name":"validate-npm-package-name","version":"3.0.0","files":["/packages/cli-plugin-extensions/package.json","/packages/cli-plugin-scaffold-ci/package.json","/packages/cli-plugin-scaffold-react-component/package.json","/packages/cli-plugin-scaffold-workspaces/package.json","/packages/create-webiny-project/package.json"]},{"name":"vm-browserify","version":"1.1.2","files":["/packages/project-utils/package.json"]},{"name":"warning","version":"4.0.2","files":["/packages/app/package.json"]},{"name":"webpack","version":"5.97.0","files":["/packages/project-utils/package.json","/packages/serverless-cms-aws/package.json"]},{"name":"webpack-dev-server","version":"4.15.2","files":["/packages/project-utils/package.json"]},{"name":"webpack-manifest-plugin","version":"5.0.0","files":["/packages/project-utils/package.json"]},{"name":"webpackbar","version":"7.0.0","files":["/packages/project-utils/package.json"]},{"name":"write-json-file","version":"4.3.0","files":["/packages/cli-plugin-dependencies/package.json","/packages/cli-plugin-extensions/package.json","/packages/cli-plugin-scaffold/package.json","/packages/cli-plugin-scaffold-graphql-service/package.json","/packages/cli-plugin-scaffold-react-component/package.json","/packages/cli-plugin-scaffold-workspaces/package.json","/packages/create-webiny-project/package.json","/packages/cwp-template-aws/package.json","/packages/global-config/package.json","/scripts/buildPackages/package.json","/scripts/prepublishOnly/package.json"]},{"name":"wts-client","version":"1.0.1","files":["/packages/telemetry/package.json"]},{"name":"yargs","version":"17.7.2","files":["/packages/cli/package.json","/packages/cli-plugin-deploy-pulumi/package.json","/packages/create-webiny-project/package.json","/packages/i18n/package.json","/scripts/buildPackages/package.json"]},{"name":"yauzl","version":"2.10.0","files":["/packages/api-page-builder-import-export/package.json"]},{"name":"yesno","version":"0.4.0","files":["/packages/create-webiny-project/package.json"]},{"name":"zod","version":"3.23.8","files":["/packages/api-admin-users/package.json","/packages/api-apw/package.json","/packages/api-file-manager/package.json","/packages/api-form-builder/package.json","/packages/api-headless-cms/package.json","/packages/api-headless-cms-import-export/package.json","/packages/api-headless-cms-tasks/package.json","/packages/api-log/package.json","/packages/api-mailer/package.json","/packages/api-page-builder/package.json","/packages/api-page-builder-import-export/package.json","/packages/api-security/package.json","/packages/api-websockets/package.json","/packages/app-aco/package.json","/packages/app-file-manager/package.json","/packages/pulumi-aws/package.json","/packages/tasks/package.json"]}],"devDependencies":[{"name":"@4tw/cypress-drag-drop","version":"1.4.0","files":["/cypress-tests/package.json"]},{"name":"@babel/cli","version":"7.26.4","files":["/package.json","/packages/cli-plugin-scaffold-react-component/template/package.json","/packages/cwp-template-aws/template/ddb-es/dependencies.json","/packages/cwp-template-aws/template/ddb-os/dependencies.json","/packages/cwp-template-aws/template/ddb/dependencies.json"]},{"name":"@babel/code-frame","version":"7.26.2","files":["/package.json"]},{"name":"@babel/compat-data","version":"7.26.5","files":["/package.json"]},{"name":"@babel/core","version":"7.26.7","files":["/package.json","/packages/cli-plugin-scaffold-react-component/template/package.json","/packages/cwp-template-aws/template/ddb-es/dependencies.json","/packages/cwp-template-aws/template/ddb-os/dependencies.json","/packages/cwp-template-aws/template/ddb/dependencies.json"]},{"name":"@babel/helper-define-polyfill-provider","version":"0.6.3","files":["/package.json"]},{"name":"@babel/helper-environment-visitor","version":"7.24.7","files":["/package.json"]},{"name":"@babel/parser","version":"7.26.7","files":["/package.json"]},{"name":"@babel/plugin-proposal-class-properties","version":"7.18.6","files":["/package.json"]},{"name":"@babel/plugin-proposal-object-rest-spread","version":"7.20.7","files":["/package.json"]},{"name":"@babel/plugin-proposal-throw-expressions","version":"7.25.9","files":["/package.json"]},{"name":"@babel/plugin-syntax-object-rest-spread","version":"7.8.3","files":["/package.json"]},{"name":"@babel/plugin-transform-modules-commonjs","version":"7.26.3","files":["/package.json"]},{"name":"@babel/plugin-transform-runtime","version":"7.25.9","files":["/package.json","/packages/cwp-template-aws/template/ddb-es/dependencies.json","/packages/cwp-template-aws/template/ddb-os/dependencies.json","/packages/cwp-template-aws/template/ddb/dependencies.json"]},{"name":"@babel/preset-env","version":"7.26.7","files":["/package.json","/packages/cwp-template-aws/template/ddb-es/dependencies.json","/packages/cwp-template-aws/template/ddb-os/dependencies.json","/packages/cwp-template-aws/template/ddb/dependencies.json"]},{"name":"@babel/preset-react","version":"7.26.3","files":["/package.json","/packages/cli-plugin-scaffold-react-component/template/package.json"]},{"name":"@babel/preset-typescript","version":"7.26.0","files":["/package.json","/packages/cli-plugin-scaffold-react-component/template/package.json","/packages/cwp-template-aws/template/ddb-es/dependencies.json","/packages/cwp-template-aws/template/ddb-os/dependencies.json","/packages/cwp-template-aws/template/ddb/dependencies.json"]},{"name":"@babel/register","version":"7.25.9","files":["/package.json","/packages/i18n/package.json"]},{"name":"@babel/runtime","version":"7.26.10","files":["/package.json"]},{"name":"@babel/template","version":"7.25.9","files":["/package.json"]},{"name":"@babel/traverse","version":"7.26.7","files":["/package.json"]},{"name":"@babel/types","version":"7.26.7","files":["/package.json"]},{"name":"@commitlint/cli","version":"11.0.0","files":["/package.json"]},{"name":"@commitlint/config-conventional","version":"11.0.0","files":["/package.json"]},{"name":"@elastic/elasticsearch","version":"7.12.0","files":["/packages/api-headless-cms-ddb-es/package.json","/packages/api-page-builder-so-ddb-es/package.json","/packages/project-utils/package.json"]},{"name":"@emotion/babel-plugin","version":"11.11.0","files":["/packages/app-admin/package.json","/packages/app-admin-ui/package.json","/packages/app-apw/package.json","/packages/app-dynamic-pages/package.json","/packages/app-form-builder/package.json","/packages/app-graphql-playground/package.json","/packages/app-headless-cms/package.json","/packages/app-headless-cms-common/package.json","/packages/app-i18n-content/package.json","/packages/app-page-builder/package.json","/packages/app-security/package.json","/packages/app-security-access-management/package.json","/packages/app-serverless-cms/package.json","/packages/app-tenancy/package.json","/packages/app-theme/package.json","/packages/app-theme-manager/package.json","/packages/theme/package.json","/packages/ui/package.json"]},{"name":"@emotion/react","version":"11.10.8","files":["/packages/react-rich-text-lexical-renderer/package.json"]},{"name":"@faker-js/faker","version":"9.3.0","files":["/packages/api-headless-cms-es-tasks/package.json"]},{"name":"@fortawesome/free-solid-svg-icons","version":"6.0.0","files":["/packages/admin-ui/package.json"]},{"name":"@grpc/grpc-js","version":"1.11.1","files":["/package.json"]},{"name":"@lexical/code","version":"0.23.1","files":["/package.json"]},{"name":"@lexical/hashtag","version":"0.23.1","files":["/package.json"]},{"name":"@lexical/headless","version":"0.23.1","files":["/package.json"]},{"name":"@lexical/history","version":"0.23.1","files":["/package.json"]},{"name":"@lexical/html","version":"0.23.1","files":["/package.json"]},{"name":"@lexical/list","version":"0.23.1","files":["/package.json"]},{"name":"@lexical/mark","version":"0.23.1","files":["/package.json"]},{"name":"@lexical/overflow","version":"0.23.1","files":["/package.json"]},{"name":"@lexical/react","version":"0.23.1","files":["/package.json"]},{"name":"@lexical/rich-text","version":"0.23.1","files":["/package.json"]},{"name":"@lexical/selection","version":"0.23.1","files":["/package.json"]},{"name":"@lexical/text","version":"0.23.1","files":["/package.json"]},{"name":"@lexical/utils","version":"0.23.1","files":["/package.json"]},{"name":"@material-design-icons/svg","version":"0.14.15","files":["/packages/icons/package.json"]},{"name":"@octokit/rest","version":"20.0.2","files":["/package.json"]},{"name":"@storybook/addon-a11y","version":"7.6.20","files":["/packages/admin-ui/package.json"]},{"name":"@storybook/addon-essentials","version":"7.6.20","files":["/packages/admin-ui/package.json"]},{"name":"@storybook/react","version":"7.6.20","files":["/packages/admin-ui/package.json"]},{"name":"@storybook/react-webpack5","version":"7.6.20","files":["/packages/admin-ui/package.json"]},{"name":"@storybook/theming","version":"7.6.20","files":["/packages/admin-ui/package.json"]},{"name":"@svgr/webpack","version":"6.1.1","files":["/packages/admin-ui/package.json","/packages/app-file-manager/package.json"]},{"name":"@testing-library/cypress","version":"10.0.0","files":["/cypress-tests/package.json"]},{"name":"@testing-library/react","version":"15.0.7","files":["/packages/form/package.json","/packages/react-composition/package.json","/packages/react-properties/package.json","/packages/react-rich-text-lexical-renderer/package.json","/packages/ui/package.json"]},{"name":"@testing-library/user-event","version":"14.5.2","files":["/packages/form/package.json"]},{"name":"@types/accept-language-parser","version":"1.5.3","files":["/packages/api-i18n/package.json"]},{"name":"@types/accounting","version":"0.4.2","files":["/packages/i18n/package.json"]},{"name":"@types/adm-zip","version":"0.5.5","files":["/packages/api-headless-cms-import-export/package.json"]},{"name":"@types/aos","version":"3.0.4","files":["/packages/app-page-builder/package.json"]},{"name":"@types/archiver","version":"5.3.1","files":["/packages/api-page-builder-import-export/package.json"]},{"name":"@types/babel__code-frame","version":"7.0.6","files":["/packages/api-headless-cms/package.json"]},{"name":"@types/bytes","version":"3.1.4","files":["/packages/app-admin/package.json"]},{"name":"@types/center-align","version":"1.0.0","files":["/packages/data-migration/package.json"]},{"name":"@types/crypto-js","version":"4.2.2","files":["/packages/api-mailer/package.json"]},{"name":"@types/extract-zip","version":"1.6.2","files":["/packages/api-page-builder/package.json"]},{"name":"@types/facepaint","version":"1.2.2","files":["/packages/app-page-builder-elements/package.json"]},{"name":"@types/folder-hash","version":"4.0.4","files":["/scripts/buildPackages/package.json"]},{"name":"@types/fs-extra","version":"11.0.4","files":["/package.json"]},{"name":"@types/graphlib","version":"2.1.12","files":["/packages/app-admin/package.json"]},{"name":"@types/gtag.js","version":"0.0.20","files":["/packages/app-form-builder/package.json"]},{"name":"@types/humanize-duration","version":"3.27.4","files":["/packages/cli-plugin-deploy-pulumi/package.json"]},{"name":"@types/inquirer","version":"8.2.10","files":["/packages/cli-plugin-extensions/package.json","/packages/cli-plugin-scaffold/package.json","/packages/cli-plugin-scaffold-admin-app-module/package.json","/packages/cli-plugin-scaffold-ci/package.json","/packages/cli-plugin-scaffold-extensions/package.json","/packages/cli-plugin-scaffold-graphql-service/package.json","/packages/cli-plugin-scaffold-react-component/package.json","/packages/cli-plugin-scaffold-workspaces/package.json"]},{"name":"@types/invariant","version":"2.2.35","files":["/packages/form/package.json"]},{"name":"@types/is-hotkey","version":"0.1.10","files":["/packages/app-admin/package.json","/packages/app-page-builder/package.json"]},{"name":"@types/is-number","version":"7.0.5","files":["/packages/db-dynamodb/package.json"]},{"name":"@types/jest","version":"29.5.14","files":["/package.json","/packages/cwp-template-aws/template/ddb-es/dependencies.json","/packages/cwp-template-aws/template/ddb-os/dependencies.json","/packages/cwp-template-aws/template/ddb/dependencies.json"]},{"name":"@types/jsdom","version":"21.1.6","files":["/packages/lexical-converter/package.json"]},{"name":"@types/json2csv","version":"4.5.1","files":["/packages/api-form-builder/package.json","/packages/app-form-builder/package.json"]},{"name":"@types/jsonpack","version":"1.1.6","files":["/packages/api-headless-cms-ddb/package.json","/packages/api-headless-cms-ddb-es/package.json"]},{"name":"@types/jsonwebtoken","version":"9.0.2","files":["/packages/api-admin-users/package.json","/packages/api-cognito-authenticator/package.json","/packages/api-security/package.json","/packages/api-security-auth0/package.json","/packages/api-security-cognito/package.json"]},{"name":"@types/jwk-to-pem","version":"2.0.1","files":["/packages/api-cognito-authenticator/package.json","/packages/api-security-auth0/package.json"]},{"name":"@types/listr","version":"0.14.9","files":["/packages/cli-plugin-deploy-pulumi/package.json"]},{"name":"@types/lodash","version":"4.17.13","files":["/packages/app/package.json","/packages/app-cognito-authenticator/package.json","/packages/form/package.json","/packages/i18n/package.json","/packages/pulumi/package.json","/packages/pulumi-sdk/package.json","/packages/validation/package.json"]},{"name":"@types/md5","version":"2.3.2","files":["/packages/api-admin-users/package.json"]},{"name":"@types/ncp","version":"2.0.4","files":["/packages/cli-plugin-scaffold-admin-app-module/package.json","/packages/cli-plugin-scaffold-ci/package.json","/packages/cli-plugin-scaffold-extensions/package.json","/packages/cli-plugin-scaffold-graphql-service/package.json","/packages/cli-plugin-scaffold-react-component/package.json","/packages/cli-plugin-scaffold-workspaces/package.json"]},{"name":"@types/node","version":"20.17.10","files":["/package.json","/packages/cwp-template-aws/template/ddb-es/dependencies.json","/packages/cwp-template-aws/template/ddb-os/dependencies.json","/packages/cwp-template-aws/template/ddb/dependencies.json"]},{"name":"@types/node-fetch","version":"2.6.1","files":["/packages/api-cognito-authenticator/package.json","/packages/api-file-manager-s3/package.json","/packages/api-form-builder/package.json","/packages/api-page-builder/package.json","/packages/api-page-builder-import-export/package.json","/packages/api-security-auth0/package.json","/packages/api-security-okta/package.json"]},{"name":"@types/node-notifier","version":"8.0.5","files":["/packages/cli-plugin-deploy-pulumi/package.json"]},{"name":"@types/nodemailer","version":"6.4.17","files":["/packages/api-mailer/package.json"]},{"name":"@types/object-hash","version":"2.2.1","files":["/packages/api-prerendering-service/package.json"]},{"name":"@types/pako","version":"2.0.3","files":["/packages/app-page-builder/package.json"]},{"name":"@types/platform","version":"1.3.4","files":["/packages/app-page-builder/package.json"]},{"name":"@types/pluralize","version":"0.0.29","files":["/packages/cli-plugin-scaffold-admin-app-module/package.json","/packages/cli-plugin-scaffold-ci/package.json","/packages/cli-plugin-scaffold-extensions/package.json","/packages/cli-plugin-scaffold-graphql-service/package.json","/packages/cli-plugin-scaffold-react-component/package.json","/packages/cli-plugin-scaffold-workspaces/package.json"]},{"name":"@types/prettier","version":"2.7.3","files":["/package.json"]},{"name":"@types/react","version":"18.2.79","files":["/package.json","/packages/admin-ui/package.json","/packages/app-aco/package.json","/packages/app-audit-logs/package.json","/packages/app-headless-cms-common/package.json","/packages/app-mailer/package.json","/packages/app-page-builder-elements/package.json","/packages/app-theme/package.json","/packages/app-trash-bin/package.json","/packages/cli-plugin-scaffold-react-component/template/package.json","/packages/cwp-template-aws/template/ddb-es/dependencies.json","/packages/cwp-template-aws/template/ddb-os/dependencies.json","/packages/cwp-template-aws/template/ddb/dependencies.json","/packages/theme/package.json"]},{"name":"@types/react-color","version":"2.17.11","files":["/packages/admin-ui/package.json","/packages/lexical-editor-actions/package.json"]},{"name":"@types/react-custom-scrollbars","version":"4.0.10","files":["/packages/admin-ui/package.json"]},{"name":"@types/react-dom","version":"18.2.25","files":["/package.json","/packages/cwp-template-aws/template/ddb-es/dependencies.json","/packages/cwp-template-aws/template/ddb-os/dependencies.json","/packages/cwp-template-aws/template/ddb/dependencies.json"]},{"name":"@types/react-google-recaptcha","version":"1.1.2","files":["/packages/app-form-builder/package.json"]},{"name":"@types/react-hamburger-menu","version":"0.0.4","files":["/packages/cwp-template-aws/template/common/extensions/theme/package.json","/extensions/theme/package.json"]},{"name":"@types/react-helmet","version":"6.1.11","files":["/packages/app-admin-ui/package.json","/packages/app-security-access-management/package.json","/packages/cwp-template-aws/template/common/apps/website/package.json","/apps/website/package.json"]},{"name":"@types/react-images","version":"0.5.3","files":["/packages/app-page-builder/package.json"]},{"name":"@types/react-resizable","version":"3.0.8","files":["/packages/app-admin/package.json"]},{"name":"@types/react-transition-group","version":"4.4.12","files":["/packages/app-admin/package.json"]},{"name":"@types/react-virtualized","version":"9.22.0","files":["/packages/admin-ui/package.json"]},{"name":"@types/resize-observer-browser","version":"0.1.4","files":["/packages/app-page-builder/package.json"]},{"name":"@types/rimraf","version":"3.0.2","files":["/packages/api-page-builder/package.json"]},{"name":"@types/sanitize-html","version":"2.9.0","files":["/packages/react-rich-text-renderer/package.json"]},{"name":"@types/semver","version":"7.3.4","files":["/packages/data-migration/package.json"]},{"name":"@types/store","version":"2.0.2","files":["/packages/app-admin/package.json","/packages/app-page-builder/package.json"]},{"name":"@types/tinycolor2","version":"1.4.6","files":["/packages/app-admin/package.json"]},{"name":"@types/uniqid","version":"5.3.2","files":["/packages/feature-flags/package.json","/packages/plugins/package.json"]},{"name":"@types/unzipper","version":"0.10.10","files":["/packages/api-headless-cms-import-export/package.json"]},{"name":"@types/validate-npm-package-name","version":"3.0.3","files":["/packages/cli-plugin-scaffold-ci/package.json","/packages/cli-plugin-scaffold-extensions/package.json","/packages/cli-plugin-scaffold-react-component/package.json","/packages/cli-plugin-scaffold-workspaces/package.json"]},{"name":"@types/warning","version":"3.0.0","files":["/packages/app/package.json"]},{"name":"@types/yargs","version":"17.0.8","files":["/scripts/buildPackages/package.json"]},{"name":"@types/yauzl","version":"2.9.2","files":["/packages/api-page-builder-import-export/package.json"]},{"name":"@typescript-eslint/eslint-plugin","version":"6.21.0","files":["/package.json","/packages/cwp-template-aws/template/ddb-es/dependencies.json","/packages/cwp-template-aws/template/ddb-os/dependencies.json","/packages/cwp-template-aws/template/ddb/dependencies.json"]},{"name":"@typescript-eslint/parser","version":"6.21.0","files":["/package.json","/packages/cwp-template-aws/template/ddb-es/dependencies.json","/packages/cwp-template-aws/template/ddb-os/dependencies.json","/packages/cwp-template-aws/template/ddb/dependencies.json"]},{"name":"adio","version":"1.0.1","files":["/package.json"]},{"name":"adm-zip","version":"0.5.14","files":["/packages/api-headless-cms-import-export/package.json"]},{"name":"amazon-cognito-identity-js","version":"4.5.3","files":["/cypress-tests/package.json"]},{"name":"apollo-client","version":"2.6.10","files":["/packages/app-aco/package.json","/packages/app-trash-bin/package.json"]},{"name":"apollo-graphql","version":"0.9.5","files":["/packages/api-admin-settings/package.json","/packages/api-headless-cms/package.json"]},{"name":"apollo-link","version":"1.2.14","files":["/packages/app-aco/package.json","/packages/app-trash-bin/package.json"]},{"name":"aws-sdk-client-mock","version":"4.1.0","files":["/packages/api-headless-cms-import-export/package.json"]},{"name":"axios","version":"1.7.9","files":["/package.json"]},{"name":"babel-jest","version":"29.7.0","files":["/package.json"]},{"name":"babel-loader","version":"9.2.1","files":["/package.json","/packages/ui/package.json"]},{"name":"babel-plugin-dynamic-import-node","version":"2.3.3","files":["/package.json","/packages/cwp-template-aws/template/ddb-es/dependencies.json","/packages/cwp-template-aws/template/ddb-os/dependencies.json","/packages/cwp-template-aws/template/ddb/dependencies.json"]},{"name":"babel-plugin-macros","version":"3.1.0","files":["/package.json"]},{"name":"babel-plugin-module-resolver","version":"5.0.2","files":["/package.json","/packages/app-headless-cms/package.json","/packages/app-headless-cms-common/package.json","/packages/cwp-template-aws/template/ddb-es/dependencies.json","/packages/cwp-template-aws/template/ddb-os/dependencies.json","/packages/cwp-template-aws/template/ddb/dependencies.json"]},{"name":"babel-plugin-named-asset-import","version":"1.0.0-next.3e165448","files":["/packages/app-admin-ui/package.json","/packages/app-serverless-cms/package.json","/packages/app-theme-manager/package.json"]},{"name":"bytes","version":"3.1.2","files":["/packages/api-page-builder/package.json"]},{"name":"chalk","version":"4.1.2","files":["/package.json","/packages/admin-ui/package.json","/packages/cli-plugin-extensions/package.json","/packages/cli-plugin-scaffold/package.json","/packages/cwp-template-aws/template/ddb-es/dependencies.json","/packages/cwp-template-aws/template/ddb-os/dependencies.json","/packages/cwp-template-aws/template/ddb/dependencies.json","/packages/pulumi-aws/package.json"]},{"name":"cross-env","version":"5.2.1","files":["/package.json","/packages/cwp-template-aws/template/common/apps/admin/package.json","/packages/cwp-template-aws/template/common/apps/website/package.json","/packages/cwp-template-aws/template/ddb-es/dependencies.json","/packages/cwp-template-aws/template/ddb-os/dependencies.json","/packages/cwp-template-aws/template/ddb/dependencies.json","/apps/admin/package.json","/apps/website/package.json"]},{"name":"cross-spawn","version":"6.0.6","files":["/package.json"]},{"name":"css-loader","version":"6.10.0","files":["/packages/admin-ui/package.json"]},{"name":"csvtojson","version":"2.0.10","files":["/packages/api-form-builder/package.json","/packages/api-form-builder-so-ddb/package.json","/packages/api-form-builder-so-ddb-es/package.json"]},{"name":"cypress","version":"13.16.0","files":["/cypress-tests/package.json"]},{"name":"cypress-image-snapshot","version":"4.0.1","files":["/cypress-tests/package.json"]},{"name":"cypress-mailosaur","version":"2.7.0","files":["/cypress-tests/package.json"]},{"name":"cypress-wait-until","version":"1.7.1","files":["/cypress-tests/package.json"]},{"name":"deepmerge","version":"4.3.1","files":["/package.json"]},{"name":"del","version":"6.0.0","files":["/cypress-tests/package.json"]},{"name":"dotenv","version":"8.2.0","files":["/packages/cwp-template-aws/package.json"]},{"name":"elastic-ts","version":"0.12.0","files":["/packages/migrations/package.json"]},{"name":"elliptic","version":"6.6.1","files":["/package.json"]},{"name":"env-ci","version":"2.0.1","files":["/package.json"]},{"name":"eslint","version":"8.57.1","files":["/package.json","/packages/cwp-template-aws/template/ddb-es/dependencies.json","/packages/cwp-template-aws/template/ddb-os/dependencies.json","/packages/cwp-template-aws/template/ddb/dependencies.json"]},{"name":"eslint-config-standard","version":"16.0.3","files":["/package.json","/packages/cwp-template-aws/template/ddb-es/dependencies.json","/packages/cwp-template-aws/template/ddb-os/dependencies.json","/packages/cwp-template-aws/template/ddb/dependencies.json"]},{"name":"eslint-import-resolver-babel-module","version":"5.3.2","files":["/package.json","/packages/cwp-template-aws/template/ddb-es/dependencies.json","/packages/cwp-template-aws/template/ddb-os/dependencies.json","/packages/cwp-template-aws/template/ddb/dependencies.json"]},{"name":"eslint-plugin-import","version":"2.27.5","files":["/package.json","/packages/cwp-template-aws/template/ddb-es/dependencies.json","/packages/cwp-template-aws/template/ddb-os/dependencies.json","/packages/cwp-template-aws/template/ddb/dependencies.json"]},{"name":"eslint-plugin-jest","version":"25.7.0","files":["/package.json","/packages/cwp-template-aws/template/ddb-es/dependencies.json","/packages/cwp-template-aws/template/ddb-os/dependencies.json","/packages/cwp-template-aws/template/ddb/dependencies.json"]},{"name":"eslint-plugin-lodash","version":"7.4.0","files":["/package.json"]},{"name":"eslint-plugin-node","version":"11.1.0","files":["/package.json","/packages/cwp-template-aws/template/ddb-es/dependencies.json","/packages/cwp-template-aws/template/ddb-os/dependencies.json","/packages/cwp-template-aws/template/ddb/dependencies.json"]},{"name":"eslint-plugin-promise","version":"5.2.0","files":["/package.json","/packages/cwp-template-aws/template/ddb-es/dependencies.json","/packages/cwp-template-aws/template/ddb-os/dependencies.json","/packages/cwp-template-aws/template/ddb/dependencies.json"]},{"name":"eslint-plugin-react","version":"7.32.2","files":["/package.json","/packages/cwp-template-aws/template/ddb-es/dependencies.json","/packages/cwp-template-aws/template/ddb-os/dependencies.json","/packages/cwp-template-aws/template/ddb/dependencies.json"]},{"name":"eslint-plugin-standard","version":"5.0.0","files":["/package.json","/packages/cwp-template-aws/template/ddb-es/dependencies.json","/packages/cwp-template-aws/template/ddb-os/dependencies.json","/packages/cwp-template-aws/template/ddb/dependencies.json"]},{"name":"execa","version":"5.1.1","files":["/package.json","/packages/app-audit-logs/package.json","/packages/app-page-builder/package.json","/packages/app-page-builder-elements/package.json","/packages/app-theme/package.json","/packages/cli-plugin-dependencies/package.json","/packages/cli-plugin-extensions/package.json","/packages/cli-plugin-scaffold/package.json","/packages/cwp-template-aws/template/ddb-es/dependencies.json","/packages/cwp-template-aws/template/ddb-os/dependencies.json","/packages/cwp-template-aws/template/ddb/dependencies.json","/packages/theme/package.json","/packages/ui/package.json"]},{"name":"fast-glob","version":"3.2.7","files":["/packages/cli-plugin-extensions/package.json","/packages/cli-plugin-scaffold/package.json"]},{"name":"file-loader","version":"6.2.0","files":["/packages/admin-ui/package.json"]},{"name":"find-up","version":"5.0.0","files":["/packages/cli-plugin-extensions/package.json","/packages/cli-plugin-scaffold/package.json"]},{"name":"folder-hash","version":"4.0.4","files":["/package.json"]},{"name":"fs-extra","version":"11.2.0","files":["/package.json","/packages/api-form-builder/package.json"]},{"name":"get-stream","version":"3.0.0","files":["/package.json"]},{"name":"get-yarn-workspaces","version":"1.0.2","files":["/package.json"]},{"name":"git-cz","version":"1.7.1","files":["/package.json"]},{"name":"github-actions-wac","version":"1.4.1","files":["/package.json"]},{"name":"glob","version":"7.2.3","files":["/package.json","/packages/i18n/package.json"]},{"name":"graphql","version":"15.9.0","files":["/package.json","/packages/api-aco/package.json","/packages/api-apw/package.json","/packages/api-audit-logs/package.json","/packages/api-file-manager-aco/package.json","/packages/api-headless-cms/package.json","/packages/api-headless-cms-aco/package.json","/packages/api-headless-cms-bulk-actions/package.json","/packages/api-headless-cms-import-export/package.json","/packages/api-mailer/package.json","/packages/api-page-builder-aco/package.json","/packages/api-page-builder-so-ddb-es/package.json","/packages/api-record-locking/package.json","/packages/api-serverless-cms/package.json","/packages/api-websockets/package.json"]},{"name":"graphql-request","version":"3.7.0","files":["/cypress-tests/package.json","/apps/api/graphql/package.json"]},{"name":"husky","version":"4.2.5","files":["/package.json"]},{"name":"identity-obj-proxy","version":"3.0.0","files":["/packages/react-rich-text-lexical-renderer/package.json"]},{"name":"inquirer","version":"8.2.6","files":["/package.json"]},{"name":"inquirer-autocomplete-prompt","version":"1.0.1","files":["/package.json"]},{"name":"inquirer-checkbox-plus-prompt","version":"1.0.1","files":["/package.json"]},{"name":"inquirer-maxlength-input-prompt","version":"1.0.0","files":["/package.json"]},{"name":"jest","version":"29.7.0","files":["/package.json","/packages/api-admin-settings/package.json","/packages/api-admin-users-so-ddb/package.json","/packages/api-apw/package.json","/packages/api-apw-scheduler-so-ddb/package.json","/packages/api-file-manager/package.json","/packages/api-file-manager-ddb/package.json","/packages/api-form-builder/package.json","/packages/api-form-builder-so-ddb/package.json","/packages/api-form-builder-so-ddb-es/package.json","/packages/api-headless-cms/package.json","/packages/api-headless-cms-ddb/package.json","/packages/api-headless-cms-ddb-es/package.json","/packages/api-i18n/package.json","/packages/api-i18n-ddb/package.json","/packages/api-log/package.json","/packages/api-mailer/package.json","/packages/api-page-builder/package.json","/packages/api-page-builder-import-export/package.json","/packages/api-page-builder-import-export-so-ddb/package.json","/packages/api-page-builder-so-ddb/package.json","/packages/api-page-builder-so-ddb-es/package.json","/packages/api-security-so-ddb/package.json","/packages/api-tenancy/package.json","/packages/api-tenancy-so-ddb/package.json","/packages/api-tenant-manager/package.json","/packages/api-theme-manager/package.json","/packages/cwp-template-aws/template/ddb-es/dependencies.json","/packages/cwp-template-aws/template/ddb-os/dependencies.json","/packages/cwp-template-aws/template/ddb/dependencies.json","/packages/data-migration/package.json","/packages/db-dynamodb/package.json","/packages/handler-client/package.json","/packages/handler-graphql/package.json","/packages/validation/package.json"]},{"name":"jest-dynalite","version":"3.6.1","files":["/packages/api-admin-settings/package.json","/packages/api-admin-users-so-ddb/package.json","/packages/api-apw-scheduler-so-ddb/package.json","/packages/api-authentication/package.json","/packages/api-file-manager-ddb/package.json","/packages/api-form-builder/package.json","/packages/api-form-builder-so-ddb/package.json","/packages/api-form-builder-so-ddb-es/package.json","/packages/api-headless-cms-ddb/package.json","/packages/api-headless-cms-ddb-es/package.json","/packages/api-i18n-ddb/package.json","/packages/api-log/package.json","/packages/api-mailer/package.json","/packages/api-page-builder-import-export/package.json","/packages/api-page-builder-import-export-so-ddb/package.json","/packages/api-page-builder-so-ddb/package.json","/packages/api-page-builder-so-ddb-es/package.json","/packages/api-prerendering-service-so-ddb/package.json","/packages/api-security-so-ddb/package.json","/packages/api-tenancy/package.json","/packages/api-tenancy-so-ddb/package.json","/packages/api-tenant-manager/package.json","/packages/api-wcp/package.json","/packages/data-migration/package.json","/packages/db-dynamodb/package.json","/packages/migrations/package.json","/packages/project-utils/package.json"]},{"name":"jest-environment-jsdom","version":"29.7.0","files":["/package.json"]},{"name":"jest-extended","version":"4.0.2","files":["/package.json"]},{"name":"jest-mock-console","version":"2.0.0","files":["/packages/data-migration/package.json","/packages/handler-graphql/package.json"]},{"name":"jsdom","version":"25.0.1","files":["/packages/lexical-converter/package.json"]},{"name":"jsonpack","version":"1.1.5","files":["/packages/api-file-manager-ddb/package.json"]},{"name":"lerna","version":"8.1.2","files":["/package.json"]},{"name":"lexical","version":"0.23.1","files":["/package.json"]},{"name":"lint-staged","version":"15.3.0","files":["/package.json"]},{"name":"listr","version":"0.14.3","files":["/package.json"]},{"name":"listr2","version":"5.0.8","files":["/packages/project-utils/package.json"]},{"name":"load-json-file","version":"6.2.0","files":["/package.json","/packages/project-utils/package.json"]},{"name":"lodash","version":"4.17.21","files":["/package.json","/cypress-tests/package.json"]},{"name":"longest","version":"2.0.1","files":["/package.json"]},{"name":"md5","version":"2.3.0","files":["/packages/api-security-cognito/package.json"]},{"name":"merge","version":"2.1.1","files":["/packages/cwp-template-aws/template/ddb-es/dependencies.json","/packages/cwp-template-aws/template/ddb-os/dependencies.json","/packages/cwp-template-aws/template/ddb/dependencies.json"]},{"name":"micromatch","version":"4.0.8","files":["/package.json"]},{"name":"mime","version":"3.0.0","files":["/packages/pulumi-aws/package.json"]},{"name":"minimatch","version":"5.1.6","files":["/package.json"]},{"name":"mobx","version":"6.9.0","files":["/packages/form/package.json"]},{"name":"mobx-react-lite","version":"3.4.3","files":["/packages/form/package.json"]},{"name":"monaco-editor","version":"0.52.2","files":["/packages/app-admin/package.json"]},{"name":"nanoid","version":"3.3.8","files":["/package.json","/cypress-tests/package.json"]},{"name":"ncp","version":"2.0.0","files":["/packages/ui/package.json"]},{"name":"node-fetch","version":"2.6.7","files":["/package.json","/cypress-tests/package.json"]},{"name":"pino","version":"8.21.0","files":["/packages/logger/package.json","/packages/project-utils/package.json"]},{"name":"pino-pretty","version":"9.4.0","files":["/packages/project-utils/package.json"]},{"name":"pm2","version":"5.4.3","files":["/package.json"]},{"name":"postcss-loader","version":"6.2.1","files":["/packages/admin-ui/package.json"]},{"name":"prettier","version":"2.8.8","files":["/package.json","/packages/admin-ui/package.json","/packages/api-aco/package.json","/packages/api-admin-settings/package.json","/packages/api-apw/package.json","/packages/api-headless-cms/package.json","/packages/api-headless-cms-ddb-es/package.json","/packages/api-page-builder/package.json","/packages/api-prerendering-service/package.json","/packages/api-prerendering-service-so-ddb/package.json","/packages/cli-plugin-dependencies/package.json","/packages/cli-plugin-extensions/package.json","/packages/cli-plugin-scaffold/package.json","/packages/cwp-template-aws/template/ddb-es/dependencies.json","/packages/cwp-template-aws/template/ddb-os/dependencies.json","/packages/cwp-template-aws/template/ddb/dependencies.json","/packages/react-properties/package.json","/packages/react-rich-text-lexical-renderer/package.json"]},{"name":"raw-loader","version":"4.0.2","files":["/packages/ui/package.json"]},{"name":"react","version":"18.2.0","files":["/packages/lexical-nodes/package.json"]},{"name":"rimraf","version":"6.0.1","files":["/packages/admin-ui/package.json","/packages/api/package.json","/packages/api-aco/package.json","/packages/api-admin-settings/package.json","/packages/api-admin-users/package.json","/packages/api-admin-users-so-ddb/package.json","/packages/api-apw/package.json","/packages/api-apw-scheduler-so-ddb/package.json","/packages/api-authentication/package.json","/packages/api-authentication-cognito/package.json","/packages/api-background-tasks-ddb/package.json","/packages/api-background-tasks-es/package.json","/packages/api-background-tasks-os/package.json","/packages/api-cognito-authenticator/package.json","/packages/api-elasticsearch/package.json","/packages/api-elasticsearch-tasks/package.json","/packages/api-file-manager/package.json","/packages/api-file-manager-ddb/package.json","/packages/api-file-manager-s3/package.json","/packages/api-form-builder/package.json","/packages/api-form-builder-so-ddb/package.json","/packages/api-form-builder-so-ddb-es/package.json","/packages/api-headless-cms/package.json","/packages/api-headless-cms-ddb-es/package.json","/packages/api-i18n/package.json","/packages/api-i18n-content/package.json","/packages/api-i18n-ddb/package.json","/packages/api-log/package.json","/packages/api-mailer/package.json","/packages/api-page-builder/package.json","/packages/api-page-builder-import-export/package.json","/packages/api-page-builder-import-export-so-ddb/package.json","/packages/api-page-builder-so-ddb/package.json","/packages/api-page-builder-so-ddb-es/package.json","/packages/api-prerendering-service/package.json","/packages/api-prerendering-service-aws/package.json","/packages/api-prerendering-service-so-ddb/package.json","/packages/api-record-locking/package.json","/packages/api-security/package.json","/packages/api-security-auth0/package.json","/packages/api-security-cognito/package.json","/packages/api-security-okta/package.json","/packages/api-security-so-ddb/package.json","/packages/api-serverless-cms/package.json","/packages/api-tenancy/package.json","/packages/api-tenancy-so-ddb/package.json","/packages/api-tenant-manager/package.json","/packages/api-theme-manager/package.json","/packages/api-wcp/package.json","/packages/api-websockets/package.json","/packages/app/package.json","/packages/app-aco/package.json","/packages/app-admin/package.json","/packages/app-admin-auth0/package.json","/packages/app-admin-cognito/package.json","/packages/app-admin-okta/package.json","/packages/app-admin-ui/package.json","/packages/app-admin-users-cognito/package.json","/packages/app-apw/package.json","/packages/app-audit-logs/package.json","/packages/app-cognito-authenticator/package.json","/packages/app-dynamic-pages/package.json","/packages/app-file-manager/package.json","/packages/app-file-manager-s3/package.json","/packages/app-form-builder/package.json","/packages/app-graphql-playground/package.json","/packages/app-headless-cms/package.json","/packages/app-headless-cms-common/package.json","/packages/app-i18n/package.json","/packages/app-i18n-content/package.json","/packages/app-mailer/package.json","/packages/app-page-builder/package.json","/packages/app-page-builder-elements/package.json","/packages/app-plugin-admin-welcome-screen/package.json","/packages/app-record-locking/package.json","/packages/app-security/package.json","/packages/app-security-access-management/package.json","/packages/app-serverless-cms/package.json","/packages/app-tenancy/package.json","/packages/app-tenant-manager/package.json","/packages/app-theme/package.json","/packages/app-theme-manager/package.json","/packages/app-trash-bin/package.json","/packages/app-wcp/package.json","/packages/app-website/package.json","/packages/app-websockets/package.json","/packages/aws-sdk/package.json","/packages/cli-plugin-dependencies/package.json","/packages/cli-plugin-deploy-pulumi/package.json","/packages/cli-plugin-extensions/package.json","/packages/cli-plugin-scaffold/package.json","/packages/cli-plugin-scaffold-admin-app-module/package.json","/packages/cli-plugin-scaffold-ci/package.json","/packages/cli-plugin-scaffold-extensions/package.json","/packages/cli-plugin-scaffold-graphql-service/package.json","/packages/cli-plugin-scaffold-react-component/package.json","/packages/cli-plugin-scaffold-react-component/template/package.json","/packages/cli-plugin-scaffold-workspaces/package.json","/packages/data-migration/package.json","/packages/db/package.json","/packages/db-dynamodb/package.json","/packages/error/package.json","/packages/feature-flags/package.json","/packages/form/package.json","/packages/handler/package.json","/packages/handler-aws/package.json","/packages/handler-client/package.json","/packages/handler-db/package.json","/packages/handler-graphql/package.json","/packages/i18n/package.json","/packages/i18n-react/package.json","/packages/icons/package.json","/packages/logger/package.json","/packages/plugins/package.json","/packages/pubsub/package.json","/packages/pulumi/package.json","/packages/pulumi-aws/package.json","/packages/pulumi-sdk/package.json","/packages/react-rich-text-renderer/package.json","/packages/react-router/package.json","/packages/tasks/package.json","/packages/theme/package.json","/packages/ui/package.json","/packages/ui-composer/package.json","/packages/utils/package.json","/packages/validation/package.json","/packages/wcp/package.json"]},{"name":"sass","version":"1.44.0","files":["/packages/admin-ui/package.json"]},{"name":"semver","version":"7.6.3","files":["/package.json"]},{"name":"source-map-explorer","version":"2.5.3","files":["/apps/website/package.json"]},{"name":"storybook","version":"7.6.20","files":["/packages/admin-ui/package.json"]},{"name":"tailwindcss","version":"3.4.6","files":["/packages/admin-ui/package.json"]},{"name":"ts-expect","version":"1.3.0","files":["/package.json"]},{"name":"ts-jest","version":"29.1.5","files":["/package.json","/packages/cwp-template-aws/template/ddb-es/dependencies.json","/packages/cwp-template-aws/template/ddb-os/dependencies.json","/packages/cwp-template-aws/template/ddb/dependencies.json"]},{"name":"ts-node","version":"10.9.2","files":["/package.json","/scripts/buildPackages/package.json","/scripts/prepublishOnly/package.json"]},{"name":"ttypescript","version":"1.5.15","files":["/packages/api-file-manager-aco/package.json"]},{"name":"type-fest","version":"4.14.0","files":["/package.json","/packages/api-elasticsearch-tasks/package.json","/packages/api-record-locking/package.json","/packages/cli-plugin-dependencies/package.json","/packages/tasks/package.json","/scripts/prepublishOnly/package.json"]},{"name":"typescript","version":"5.3.3","files":["/package.json","/packages/admin-ui/package.json","/packages/api/package.json","/packages/api-aco/package.json","/packages/api-admin-settings/package.json","/packages/api-admin-users/package.json","/packages/api-admin-users-so-ddb/package.json","/packages/api-apw/package.json","/packages/api-apw-scheduler-so-ddb/package.json","/packages/api-audit-logs/package.json","/packages/api-authentication/package.json","/packages/api-authentication-cognito/package.json","/packages/api-background-tasks-ddb/package.json","/packages/api-background-tasks-es/package.json","/packages/api-background-tasks-os/package.json","/packages/api-cognito-authenticator/package.json","/packages/api-dynamodb-to-elasticsearch/package.json","/packages/api-elasticsearch/package.json","/packages/api-elasticsearch-tasks/package.json","/packages/api-file-manager/package.json","/packages/api-file-manager-aco/package.json","/packages/api-file-manager-ddb/package.json","/packages/api-file-manager-s3/package.json","/packages/api-form-builder/package.json","/packages/api-form-builder-so-ddb/package.json","/packages/api-form-builder-so-ddb-es/package.json","/packages/api-headless-cms/package.json","/packages/api-headless-cms-aco/package.json","/packages/api-headless-cms-bulk-actions/package.json","/packages/api-headless-cms-ddb/package.json","/packages/api-headless-cms-ddb-es/package.json","/packages/api-headless-cms-es-tasks/package.json","/packages/api-headless-cms-import-export/package.json","/packages/api-headless-cms-tasks/package.json","/packages/api-headless-cms-tasks-ddb-es/package.json","/packages/api-i18n/package.json","/packages/api-i18n-content/package.json","/packages/api-i18n-ddb/package.json","/packages/api-log/package.json","/packages/api-mailer/package.json","/packages/api-page-builder/package.json","/packages/api-page-builder-aco/package.json","/packages/api-page-builder-import-export/package.json","/packages/api-page-builder-import-export-so-ddb/package.json","/packages/api-page-builder-so-ddb/package.json","/packages/api-page-builder-so-ddb-es/package.json","/packages/api-prerendering-service/package.json","/packages/api-prerendering-service-aws/package.json","/packages/api-prerendering-service-so-ddb/package.json","/packages/api-record-locking/package.json","/packages/api-security/package.json","/packages/api-security-auth0/package.json","/packages/api-security-cognito/package.json","/packages/api-security-okta/package.json","/packages/api-security-so-ddb/package.json","/packages/api-serverless-cms/package.json","/packages/api-tenancy/package.json","/packages/api-tenancy-so-ddb/package.json","/packages/api-tenant-manager/package.json","/packages/api-theme-manager/package.json","/packages/api-wcp/package.json","/packages/api-websockets/package.json","/packages/app/package.json","/packages/app-aco/package.json","/packages/app-admin/package.json","/packages/app-admin-auth0/package.json","/packages/app-admin-cognito/package.json","/packages/app-admin-okta/package.json","/packages/app-admin-ui/package.json","/packages/app-admin-users-cognito/package.json","/packages/app-apw/package.json","/packages/app-audit-logs/package.json","/packages/app-cognito-authenticator/package.json","/packages/app-dynamic-pages/package.json","/packages/app-file-manager/package.json","/packages/app-file-manager-s3/package.json","/packages/app-form-builder/package.json","/packages/app-graphql-playground/package.json","/packages/app-headless-cms/package.json","/packages/app-headless-cms-common/package.json","/packages/app-i18n/package.json","/packages/app-i18n-content/package.json","/packages/app-mailer/package.json","/packages/app-page-builder/package.json","/packages/app-page-builder-elements/package.json","/packages/app-plugin-admin-welcome-screen/package.json","/packages/app-record-locking/package.json","/packages/app-security/package.json","/packages/app-security-access-management/package.json","/packages/app-serverless-cms/package.json","/packages/app-tenancy/package.json","/packages/app-tenant-manager/package.json","/packages/app-theme/package.json","/packages/app-theme-manager/package.json","/packages/app-trash-bin/package.json","/packages/app-utils/package.json","/packages/app-wcp/package.json","/packages/app-website/package.json","/packages/app-websockets/package.json","/packages/aws-sdk/package.json","/packages/cli-plugin-dependencies/package.json","/packages/cli-plugin-deploy-pulumi/package.json","/packages/cli-plugin-extensions/package.json","/packages/cli-plugin-scaffold/package.json","/packages/cli-plugin-scaffold-admin-app-module/package.json","/packages/cli-plugin-scaffold-ci/package.json","/packages/cli-plugin-scaffold-extensions/package.json","/packages/cli-plugin-scaffold-graphql-service/package.json","/packages/cli-plugin-scaffold-react-component/package.json","/packages/cli-plugin-scaffold-react-component/template/package.json","/packages/cli-plugin-scaffold-workspaces/package.json","/packages/cwp-template-aws/template/ddb-es/dependencies.json","/packages/cwp-template-aws/template/ddb-os/dependencies.json","/packages/cwp-template-aws/template/ddb/dependencies.json","/packages/data-migration/package.json","/packages/db/package.json","/packages/db-dynamodb/package.json","/packages/di-container/package.json","/packages/error/package.json","/packages/feature-flags/package.json","/packages/form/package.json","/packages/handler/package.json","/packages/handler-aws/package.json","/packages/handler-client/package.json","/packages/handler-db/package.json","/packages/handler-graphql/package.json","/packages/i18n/package.json","/packages/i18n-react/package.json","/packages/ioc/package.json","/packages/logger/package.json","/packages/migrations/package.json","/packages/plugins/package.json","/packages/pubsub/package.json","/packages/pulumi/package.json","/packages/pulumi-aws/package.json","/packages/pulumi-sdk/package.json","/packages/react-composition/package.json","/packages/react-rich-text-renderer/package.json","/packages/react-router/package.json","/packages/serverless-cms-aws/package.json","/packages/shared-aco/package.json","/packages/tasks/package.json","/packages/theme/package.json","/packages/ui/package.json","/packages/ui-composer/package.json","/packages/utils/package.json","/packages/validation/package.json","/packages/wcp/package.json","/cypress-tests/package.json"]},{"name":"typescript-transform-paths","version":"3.5.3","files":["/package.json"]},{"name":"uniqid","version":"5.4.0","files":["/cypress-tests/package.json"]},{"name":"verdaccio","version":"6.0.5","files":["/package.json"]},{"name":"write-json-file","version":"4.3.0","files":["/package.json","/packages/api-headless-cms/package.json"]},{"name":"yargs","version":"17.7.2","files":["/package.json","/packages/project-utils/package.json"]},{"name":"zod","version":"3.23.8","files":["/packages/ioc/package.json"]}],"peerDependencies":[{"name":"@editorjs/editorjs","version":"2.26.5","files":["/packages/app-page-builder-elements/package.json"]},{"name":"aos","version":"2.3.4","files":["/packages/app-page-builder-elements/package.json"]},{"name":"minimatch","version":"5.1.6","files":["/packages/ui/package.json"]},{"name":"react","version":"18.2.0","files":["/packages/app-audit-logs/package.json","/packages/app-page-builder-elements/package.json","/packages/app-theme/package.json","/packages/form/package.json","/packages/i18n/package.json","/packages/i18n-react/package.json","/packages/react-router/package.json","/packages/theme/package.json","/packages/ui/package.json"]},{"name":"react-columned","version":"1.1.3","files":["/packages/app-page-builder-elements/package.json"]},{"name":"react-dom","version":"18.2.0","files":["/packages/ui/package.json"]},{"name":"react-google-recaptcha","version":"1.1.0","files":["/packages/app-page-builder-elements/package.json"]},{"name":"react-images","version":"0.5.19","files":["/packages/app-page-builder-elements/package.json"]},{"name":"swiper","version":"9.3.2","files":["/packages/app-page-builder-elements/package.json"]},{"name":"zod","version":"3.23.8","files":["/packages/utils/package.json"]}],"resolutions":[{"name":"@babel/runtime","version":"7.26.10","files":["/package.json"]},{"name":"@emotion/react","version":"11.10.8","files":["/package.json","/packages/cwp-template-aws/template/ddb-es/dependencies.json","/packages/cwp-template-aws/template/ddb-os/dependencies.json","/packages/cwp-template-aws/template/ddb/dependencies.json"]},{"name":"@grpc/grpc-js","version":"1.11.1","files":["/package.json"]},{"name":"@octokit/rest","version":"20.0.2","files":["/package.json"]},{"name":"@types/react","version":"18.2.79","files":["/package.json","/packages/cwp-template-aws/template/ddb-es/dependencies.json","/packages/cwp-template-aws/template/ddb-os/dependencies.json","/packages/cwp-template-aws/template/ddb/dependencies.json"]},{"name":"@types/react-dom","version":"18.2.25","files":["/package.json"]},{"name":"@types/webpack","version":"5.28.0","files":["/package.json"]},{"name":"postcss","version":"8.4.35","files":["/package.json"]},{"name":"react","version":"18.2.0","files":["/package.json","/packages/cwp-template-aws/template/ddb-es/dependencies.json","/packages/cwp-template-aws/template/ddb-os/dependencies.json","/packages/cwp-template-aws/template/ddb/dependencies.json"]},{"name":"react-dom","version":"18.2.0","files":["/package.json","/packages/cwp-template-aws/template/ddb-es/dependencies.json","/packages/cwp-template-aws/template/ddb-os/dependencies.json","/packages/cwp-template-aws/template/ddb/dependencies.json"]},{"name":"semver","version":"7.6.3","files":["/package.json"]},{"name":"systeminformation","version":"5.23.18","files":["/package.json"]},{"name":"tar","version":"6.2.1","files":["/package.json"]}],"references":[{"name":"@types/hoist-non-react-statics","versions":[{"version":"3.3.5","files":[{"file":"/package.json","types":["dependencies"]}]}]},{"name":"@babel/cli","versions":[{"version":"7.26.4","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-scaffold-react-component/template/package.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-es/dependencies.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-os/dependencies.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb/dependencies.json","types":["devDependencies"]},{"file":"/packages/project-utils/package.json","types":["dependencies"]}]}]},{"name":"@babel/code-frame","versions":[{"version":"7.26.2","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/api-headless-cms/package.json","types":["dependencies"]}]}]},{"name":"@babel/compat-data","versions":[{"version":"7.26.5","files":[{"file":"/package.json","types":["devDependencies"]}]}]},{"name":"@babel/core","versions":[{"version":"7.26.7","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-scaffold-react-component/template/package.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-es/dependencies.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-os/dependencies.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb/dependencies.json","types":["devDependencies"]},{"file":"/packages/project-utils/package.json","types":["dependencies"]}]}]},{"name":"@babel/helper-define-polyfill-provider","versions":[{"version":"0.6.3","files":[{"file":"/package.json","types":["devDependencies"]}]}]},{"name":"@babel/helper-environment-visitor","versions":[{"version":"7.24.7","files":[{"file":"/package.json","types":["devDependencies"]}]}]},{"name":"@babel/parser","versions":[{"version":"7.26.7","files":[{"file":"/package.json","types":["devDependencies"]}]}]},{"name":"@babel/plugin-proposal-class-properties","versions":[{"version":"7.18.6","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/project-utils/package.json","types":["dependencies"]}]}]},{"name":"@babel/plugin-proposal-object-rest-spread","versions":[{"version":"7.20.7","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/project-utils/package.json","types":["dependencies"]}]}]},{"name":"@babel/plugin-proposal-throw-expressions","versions":[{"version":"7.25.9","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/project-utils/package.json","types":["dependencies"]}]}]},{"name":"@babel/plugin-syntax-object-rest-spread","versions":[{"version":"7.8.3","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/project-utils/package.json","types":["dependencies"]}]}]},{"name":"@babel/plugin-transform-modules-commonjs","versions":[{"version":"7.26.3","files":[{"file":"/package.json","types":["devDependencies"]}]}]},{"name":"@babel/plugin-transform-runtime","versions":[{"version":"7.25.9","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-es/dependencies.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-os/dependencies.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb/dependencies.json","types":["devDependencies"]}]}]},{"name":"@babel/preset-env","versions":[{"version":"7.26.7","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-es/dependencies.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-os/dependencies.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb/dependencies.json","types":["devDependencies"]},{"file":"/packages/project-utils/package.json","types":["dependencies"]}]}]},{"name":"@babel/preset-react","versions":[{"version":"7.26.3","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-scaffold-react-component/template/package.json","types":["devDependencies"]},{"file":"/packages/project-utils/package.json","types":["dependencies"]}]}]},{"name":"@babel/preset-typescript","versions":[{"version":"7.26.0","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-scaffold-react-component/template/package.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-es/dependencies.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-os/dependencies.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb/dependencies.json","types":["devDependencies"]},{"file":"/packages/project-utils/package.json","types":["dependencies"]}]}]},{"name":"@babel/register","versions":[{"version":"7.25.9","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/i18n/package.json","types":["devDependencies"]}]}]},{"name":"@babel/runtime","versions":[{"version":"7.26.10","files":[{"file":"/package.json","types":["devDependencies","resolutions"]},{"file":"/packages/cli-plugin-dependencies/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-extensions/package.json","types":["dependencies"]},{"file":"/packages/project-utils/package.json","types":["dependencies"]}]}]},{"name":"@babel/template","versions":[{"version":"7.25.9","files":[{"file":"/package.json","types":["devDependencies"]}]}]},{"name":"@babel/traverse","versions":[{"version":"7.26.7","files":[{"file":"/package.json","types":["devDependencies"]}]}]},{"name":"@babel/types","versions":[{"version":"7.26.7","files":[{"file":"/package.json","types":["devDependencies"]}]}]},{"name":"@commitlint/cli","versions":[{"version":"11.0.0","files":[{"file":"/package.json","types":["devDependencies"]}]}]},{"name":"@commitlint/config-conventional","versions":[{"version":"11.0.0","files":[{"file":"/package.json","types":["devDependencies"]}]}]},{"name":"@grpc/grpc-js","versions":[{"version":"1.11.1","files":[{"file":"/package.json","types":["devDependencies","resolutions"]}]}]},{"name":"@lexical/code","versions":[{"version":"0.23.1","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/lexical-editor/package.json","types":["dependencies"]},{"file":"/packages/lexical-nodes/package.json","types":["dependencies"]}]}]},{"name":"@lexical/hashtag","versions":[{"version":"0.23.1","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/lexical-nodes/package.json","types":["dependencies"]}]}]},{"name":"@lexical/headless","versions":[{"version":"0.23.1","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/lexical-converter/package.json","types":["dependencies"]}]}]},{"name":"@lexical/history","versions":[{"version":"0.23.1","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/lexical-editor/package.json","types":["dependencies"]},{"file":"/packages/lexical-nodes/package.json","types":["dependencies"]}]}]},{"name":"@lexical/html","versions":[{"version":"0.23.1","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/lexical-converter/package.json","types":["dependencies"]}]}]},{"name":"@lexical/list","versions":[{"version":"0.23.1","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/lexical-nodes/package.json","types":["dependencies"]}]}]},{"name":"@lexical/mark","versions":[{"version":"0.23.1","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/lexical-nodes/package.json","types":["dependencies"]}]}]},{"name":"@lexical/overflow","versions":[{"version":"0.23.1","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/lexical-nodes/package.json","types":["dependencies"]}]}]},{"name":"@lexical/react","versions":[{"version":"0.23.1","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/lexical-editor/package.json","types":["dependencies"]},{"file":"/packages/lexical-nodes/package.json","types":["dependencies"]}]}]},{"name":"@lexical/rich-text","versions":[{"version":"0.23.1","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/lexical-editor/package.json","types":["dependencies"]},{"file":"/packages/lexical-nodes/package.json","types":["dependencies"]}]}]},{"name":"@lexical/selection","versions":[{"version":"0.23.1","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/lexical-editor/package.json","types":["dependencies"]},{"file":"/packages/lexical-editor-actions/package.json","types":["dependencies"]},{"file":"/packages/lexical-nodes/package.json","types":["dependencies"]}]}]},{"name":"@lexical/text","versions":[{"version":"0.23.1","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/lexical-editor/package.json","types":["dependencies"]}]}]},{"name":"@lexical/utils","versions":[{"version":"0.23.1","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/app-headless-cms/package.json","types":["dependencies"]},{"file":"/packages/lexical-editor/package.json","types":["dependencies"]},{"file":"/packages/lexical-editor-pb-element/package.json","types":["dependencies"]},{"file":"/packages/lexical-nodes/package.json","types":["dependencies"]}]}]},{"name":"@octokit/rest","versions":[{"version":"20.0.2","files":[{"file":"/package.json","types":["devDependencies","resolutions"]}]}]},{"name":"@types/fs-extra","versions":[{"version":"11.0.4","files":[{"file":"/package.json","types":["devDependencies"]}]}]},{"name":"@types/jest","versions":[{"version":"29.5.14","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-es/dependencies.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-os/dependencies.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb/dependencies.json","types":["devDependencies"]}]}]},{"name":"@types/node","versions":[{"version":"20.17.10","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-es/dependencies.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-os/dependencies.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb/dependencies.json","types":["devDependencies"]}]}]},{"name":"@types/prettier","versions":[{"version":"2.7.3","files":[{"file":"/package.json","types":["devDependencies"]}]}]},{"name":"@types/react","versions":[{"version":"18.2.79","files":[{"file":"/package.json","types":["devDependencies","resolutions"]},{"file":"/packages/admin-ui/package.json","types":["devDependencies"]},{"file":"/packages/app/package.json","types":["dependencies"]},{"file":"/packages/app-aco/package.json","types":["devDependencies"]},{"file":"/packages/app-admin/package.json","types":["dependencies"]},{"file":"/packages/app-admin-ui/package.json","types":["dependencies"]},{"file":"/packages/app-apw/package.json","types":["dependencies"]},{"file":"/packages/app-audit-logs/package.json","types":["devDependencies"]},{"file":"/packages/app-dynamic-pages/package.json","types":["dependencies"]},{"file":"/packages/app-file-manager/package.json","types":["dependencies"]},{"file":"/packages/app-form-builder/package.json","types":["dependencies"]},{"file":"/packages/app-headless-cms/package.json","types":["dependencies"]},{"file":"/packages/app-headless-cms-common/package.json","types":["devDependencies"]},{"file":"/packages/app-i18n/package.json","types":["dependencies"]},{"file":"/packages/app-mailer/package.json","types":["devDependencies"]},{"file":"/packages/app-page-builder/package.json","types":["dependencies"]},{"file":"/packages/app-page-builder-elements/package.json","types":["devDependencies"]},{"file":"/packages/app-tenancy/package.json","types":["dependencies"]},{"file":"/packages/app-tenant-manager/package.json","types":["dependencies"]},{"file":"/packages/app-theme/package.json","types":["devDependencies"]},{"file":"/packages/app-theme-manager/package.json","types":["dependencies"]},{"file":"/packages/app-trash-bin/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-scaffold-react-component/template/package.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/common/apps/admin/package.json","types":["dependencies"]},{"file":"/packages/cwp-template-aws/template/common/apps/website/package.json","types":["dependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-es/dependencies.json","types":["devDependencies","resolutions"]},{"file":"/packages/cwp-template-aws/template/ddb-os/dependencies.json","types":["devDependencies","resolutions"]},{"file":"/packages/cwp-template-aws/template/ddb/dependencies.json","types":["devDependencies","resolutions"]},{"file":"/packages/react-composition/package.json","types":["dependencies"]},{"file":"/packages/react-properties/package.json","types":["dependencies"]},{"file":"/packages/react-rich-text-lexical-renderer/package.json","types":["dependencies"]},{"file":"/packages/react-rich-text-renderer/package.json","types":["dependencies"]},{"file":"/packages/theme/package.json","types":["devDependencies"]},{"file":"/apps/admin/package.json","types":["dependencies"]},{"file":"/apps/website/package.json","types":["dependencies"]}]}]},{"name":"@types/react-dom","versions":[{"version":"18.2.25","files":[{"file":"/package.json","types":["devDependencies","resolutions"]},{"file":"/packages/cwp-template-aws/template/ddb-es/dependencies.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-os/dependencies.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb/dependencies.json","types":["devDependencies"]}]}]},{"name":"@typescript-eslint/eslint-plugin","versions":[{"version":"6.21.0","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-es/dependencies.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-os/dependencies.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb/dependencies.json","types":["devDependencies"]}]}]},{"name":"@typescript-eslint/parser","versions":[{"version":"6.21.0","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-es/dependencies.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-os/dependencies.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb/dependencies.json","types":["devDependencies"]}]}]},{"name":"adio","versions":[{"version":"1.0.1","files":[{"file":"/package.json","types":["devDependencies"]}]}]},{"name":"axios","versions":[{"version":"1.7.9","files":[{"file":"/package.json","types":["devDependencies"]}]}]},{"name":"babel-jest","versions":[{"version":"29.7.0","files":[{"file":"/package.json","types":["devDependencies"]}]}]},{"name":"babel-loader","versions":[{"version":"9.2.1","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/project-utils/package.json","types":["dependencies"]},{"file":"/packages/ui/package.json","types":["devDependencies"]}]}]},{"name":"babel-plugin-dynamic-import-node","versions":[{"version":"2.3.3","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-es/dependencies.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-os/dependencies.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb/dependencies.json","types":["devDependencies"]}]}]},{"name":"babel-plugin-macros","versions":[{"version":"3.1.0","files":[{"file":"/package.json","types":["devDependencies"]}]}]},{"name":"babel-plugin-module-resolver","versions":[{"version":"5.0.2","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/app-headless-cms/package.json","types":["devDependencies"]},{"file":"/packages/app-headless-cms-common/package.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-es/dependencies.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-os/dependencies.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb/dependencies.json","types":["devDependencies"]}]}]},{"name":"chalk","versions":[{"version":"4.1.2","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/admin-ui/package.json","types":["devDependencies"]},{"file":"/packages/aws-layers/package.json","types":["dependencies"]},{"file":"/packages/cli/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-dependencies/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-deploy-pulumi/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-extensions/package.json","types":["dependencies","devDependencies"]},{"file":"/packages/cli-plugin-scaffold/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-scaffold-admin-app-module/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-scaffold-ci/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-scaffold-graphql-service/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-scaffold-react-component/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-workspaces/package.json","types":["dependencies"]},{"file":"/packages/create-webiny-project/package.json","types":["dependencies"]},{"file":"/packages/cwp-template-aws/package.json","types":["dependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-es/dependencies.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-os/dependencies.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb/dependencies.json","types":["devDependencies"]},{"file":"/packages/data-migration/package.json","types":["dependencies"]},{"file":"/packages/project-utils/package.json","types":["dependencies"]},{"file":"/packages/pulumi-aws/package.json","types":["devDependencies"]},{"file":"/packages/serverless-cms-aws/package.json","types":["dependencies"]},{"file":"/packages/system-requirements/package.json","types":["dependencies"]},{"file":"/scripts/buildPackages/package.json","types":["dependencies"]},{"file":"/scripts/prepublishOnly/package.json","types":["dependencies"]}]}]},{"name":"cross-env","versions":[{"version":"5.2.1","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/common/apps/admin/package.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/common/apps/website/package.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-es/dependencies.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-os/dependencies.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb/dependencies.json","types":["devDependencies"]},{"file":"/apps/admin/package.json","types":["devDependencies"]},{"file":"/apps/website/package.json","types":["devDependencies"]}]}]},{"name":"cross-spawn","versions":[{"version":"6.0.6","files":[{"file":"/package.json","types":["devDependencies"]}]}]},{"name":"deepmerge","versions":[{"version":"4.3.1","files":[{"file":"/package.json","types":["devDependencies"]}]}]},{"name":"elliptic","versions":[{"version":"6.6.1","files":[{"file":"/package.json","types":["devDependencies"]}]}]},{"name":"env-ci","versions":[{"version":"2.0.1","files":[{"file":"/package.json","types":["devDependencies"]}]}]},{"name":"eslint","versions":[{"version":"8.57.1","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-es/dependencies.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-os/dependencies.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb/dependencies.json","types":["devDependencies"]},{"file":"/packages/project-utils/package.json","types":["dependencies"]}]}]},{"name":"eslint-config-standard","versions":[{"version":"16.0.3","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-es/dependencies.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-os/dependencies.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb/dependencies.json","types":["devDependencies"]}]}]},{"name":"eslint-import-resolver-babel-module","versions":[{"version":"5.3.2","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-es/dependencies.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-os/dependencies.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb/dependencies.json","types":["devDependencies"]}]}]},{"name":"eslint-plugin-import","versions":[{"version":"2.27.5","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-es/dependencies.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-os/dependencies.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb/dependencies.json","types":["devDependencies"]}]}]},{"name":"eslint-plugin-jest","versions":[{"version":"25.7.0","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-es/dependencies.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-os/dependencies.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb/dependencies.json","types":["devDependencies"]}]}]},{"name":"eslint-plugin-lodash","versions":[{"version":"7.4.0","files":[{"file":"/package.json","types":["devDependencies"]}]}]},{"name":"eslint-plugin-node","versions":[{"version":"11.1.0","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-es/dependencies.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-os/dependencies.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb/dependencies.json","types":["devDependencies"]}]}]},{"name":"eslint-plugin-promise","versions":[{"version":"5.2.0","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-es/dependencies.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-os/dependencies.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb/dependencies.json","types":["devDependencies"]}]}]},{"name":"eslint-plugin-react","versions":[{"version":"7.32.2","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-es/dependencies.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-os/dependencies.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb/dependencies.json","types":["devDependencies"]}]}]},{"name":"eslint-plugin-standard","versions":[{"version":"5.0.0","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-es/dependencies.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-os/dependencies.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb/dependencies.json","types":["devDependencies"]}]}]},{"name":"execa","versions":[{"version":"5.1.1","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/app-audit-logs/package.json","types":["devDependencies"]},{"file":"/packages/app-page-builder/package.json","types":["devDependencies"]},{"file":"/packages/app-page-builder-elements/package.json","types":["devDependencies"]},{"file":"/packages/app-theme/package.json","types":["devDependencies"]},{"file":"/packages/cli/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-dependencies/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-deploy-pulumi/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-extensions/package.json","types":["dependencies","devDependencies"]},{"file":"/packages/cli-plugin-scaffold/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-scaffold-graphql-service/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-scaffold-react-component/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-scaffold-workspaces/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-workspaces/package.json","types":["dependencies"]},{"file":"/packages/create-webiny-project/package.json","types":["dependencies"]},{"file":"/packages/cwp-template-aws/package.json","types":["dependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-es/dependencies.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-os/dependencies.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb/dependencies.json","types":["devDependencies"]},{"file":"/packages/pulumi-sdk/package.json","types":["dependencies"]},{"file":"/packages/system-requirements/package.json","types":["dependencies"]},{"file":"/packages/theme/package.json","types":["devDependencies"]},{"file":"/packages/ui/package.json","types":["devDependencies"]},{"file":"/scripts/buildPackages/package.json","types":["dependencies"]}]}]},{"name":"folder-hash","versions":[{"version":"4.0.4","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/scripts/buildPackages/package.json","types":["dependencies"]}]}]},{"name":"fs-extra","versions":[{"version":"11.2.0","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/api-form-builder/package.json","types":["devDependencies"]},{"file":"/packages/api-page-builder/package.json","types":["dependencies"]},{"file":"/packages/api-page-builder-import-export/package.json","types":["dependencies"]},{"file":"/packages/cli/package.json","types":["dependencies"]},{"file":"/packages/create-webiny-project/package.json","types":["dependencies"]},{"file":"/packages/cwp-template-aws/package.json","types":["dependencies"]},{"file":"/packages/project-utils/package.json","types":["dependencies"]},{"file":"/packages/pulumi-sdk/package.json","types":["dependencies"]},{"file":"/scripts/buildPackages/package.json","types":["dependencies"]},{"file":"/scripts/prepublishOnly/package.json","types":["dependencies"]}]}]},{"name":"get-stream","versions":[{"version":"3.0.0","files":[{"file":"/package.json","types":["devDependencies"]}]}]},{"name":"get-yarn-workspaces","versions":[{"version":"1.0.2","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-dependencies/package.json","types":["dependencies"]},{"file":"/packages/cwp-template-aws/package.json","types":["dependencies"]},{"file":"/packages/project-utils/package.json","types":["dependencies"]},{"file":"/scripts/prepublishOnly/package.json","types":["dependencies"]}]}]},{"name":"git-cz","versions":[{"version":"1.7.1","files":[{"file":"/package.json","types":["devDependencies"]}]}]},{"name":"github-actions-wac","versions":[{"version":"1.4.1","files":[{"file":"/package.json","types":["devDependencies"]}]}]},{"name":"glob","versions":[{"version":"7.2.3","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-dependencies/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-extensions/package.json","types":["dependencies"]},{"file":"/packages/i18n/package.json","types":["devDependencies"]},{"file":"/packages/project-utils/package.json","types":["dependencies"]}]}]},{"name":"graphql","versions":[{"version":"15.9.0","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/api-aco/package.json","types":["devDependencies"]},{"file":"/packages/api-apw/package.json","types":["devDependencies"]},{"file":"/packages/api-audit-logs/package.json","types":["devDependencies"]},{"file":"/packages/api-file-manager-aco/package.json","types":["devDependencies"]},{"file":"/packages/api-headless-cms/package.json","types":["dependencies","devDependencies"]},{"file":"/packages/api-headless-cms-aco/package.json","types":["devDependencies"]},{"file":"/packages/api-headless-cms-bulk-actions/package.json","types":["devDependencies"]},{"file":"/packages/api-headless-cms-import-export/package.json","types":["devDependencies"]},{"file":"/packages/api-i18n-content/package.json","types":["dependencies"]},{"file":"/packages/api-mailer/package.json","types":["devDependencies"]},{"file":"/packages/api-page-builder-aco/package.json","types":["devDependencies"]},{"file":"/packages/api-page-builder-so-ddb-es/package.json","types":["devDependencies"]},{"file":"/packages/api-record-locking/package.json","types":["devDependencies"]},{"file":"/packages/api-serverless-cms/package.json","types":["devDependencies"]},{"file":"/packages/api-websockets/package.json","types":["devDependencies"]},{"file":"/packages/app/package.json","types":["dependencies"]},{"file":"/packages/app-aco/package.json","types":["dependencies"]},{"file":"/packages/app-admin/package.json","types":["dependencies"]},{"file":"/packages/app-admin-auth0/package.json","types":["dependencies"]},{"file":"/packages/app-admin-okta/package.json","types":["dependencies"]},{"file":"/packages/app-admin-users-cognito/package.json","types":["dependencies"]},{"file":"/packages/app-apw/package.json","types":["dependencies"]},{"file":"/packages/app-dynamic-pages/package.json","types":["dependencies"]},{"file":"/packages/app-file-manager/package.json","types":["dependencies"]},{"file":"/packages/app-form-builder/package.json","types":["dependencies"]},{"file":"/packages/app-graphql-playground/package.json","types":["dependencies"]},{"file":"/packages/app-headless-cms/package.json","types":["dependencies"]},{"file":"/packages/app-headless-cms-common/package.json","types":["dependencies"]},{"file":"/packages/app-i18n/package.json","types":["dependencies"]},{"file":"/packages/app-mailer/package.json","types":["dependencies"]},{"file":"/packages/app-page-builder/package.json","types":["dependencies"]},{"file":"/packages/app-tenant-manager/package.json","types":["dependencies"]},{"file":"/packages/app-theme-manager/package.json","types":["dependencies"]},{"file":"/packages/app-trash-bin/package.json","types":["dependencies"]},{"file":"/packages/cwp-template-aws/template/common/apps/website/package.json","types":["dependencies"]},{"file":"/packages/cwp-template-aws/template/common/extensions/theme/package.json","types":["dependencies"]},{"file":"/packages/handler-graphql/package.json","types":["dependencies"]},{"file":"/packages/react-router/package.json","types":["dependencies"]},{"file":"/apps/website/package.json","types":["dependencies"]},{"file":"/extensions/theme/package.json","types":["dependencies"]}]}]},{"name":"husky","versions":[{"version":"4.2.5","files":[{"file":"/package.json","types":["devDependencies"]}]}]},{"name":"inquirer","versions":[{"version":"8.2.6","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/cli/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-extensions/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-scaffold/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-scaffold-ci/package.json","types":["dependencies"]},{"file":"/packages/cwp-template-aws/package.json","types":["dependencies"]}]}]},{"name":"inquirer-autocomplete-prompt","versions":[{"version":"1.0.1","files":[{"file":"/package.json","types":["devDependencies"]}]}]},{"name":"inquirer-checkbox-plus-prompt","versions":[{"version":"1.0.1","files":[{"file":"/package.json","types":["devDependencies"]}]}]},{"name":"inquirer-maxlength-input-prompt","versions":[{"version":"1.0.0","files":[{"file":"/package.json","types":["devDependencies"]}]}]},{"name":"jest","versions":[{"version":"29.7.0","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/api-admin-settings/package.json","types":["devDependencies"]},{"file":"/packages/api-admin-users-so-ddb/package.json","types":["devDependencies"]},{"file":"/packages/api-apw/package.json","types":["devDependencies"]},{"file":"/packages/api-apw-scheduler-so-ddb/package.json","types":["devDependencies"]},{"file":"/packages/api-file-manager/package.json","types":["devDependencies"]},{"file":"/packages/api-file-manager-ddb/package.json","types":["devDependencies"]},{"file":"/packages/api-form-builder/package.json","types":["devDependencies"]},{"file":"/packages/api-form-builder-so-ddb/package.json","types":["devDependencies"]},{"file":"/packages/api-form-builder-so-ddb-es/package.json","types":["devDependencies"]},{"file":"/packages/api-headless-cms/package.json","types":["devDependencies"]},{"file":"/packages/api-headless-cms-ddb/package.json","types":["devDependencies"]},{"file":"/packages/api-headless-cms-ddb-es/package.json","types":["devDependencies"]},{"file":"/packages/api-i18n/package.json","types":["devDependencies"]},{"file":"/packages/api-i18n-ddb/package.json","types":["devDependencies"]},{"file":"/packages/api-log/package.json","types":["devDependencies"]},{"file":"/packages/api-mailer/package.json","types":["devDependencies"]},{"file":"/packages/api-page-builder/package.json","types":["devDependencies"]},{"file":"/packages/api-page-builder-import-export/package.json","types":["devDependencies"]},{"file":"/packages/api-page-builder-import-export-so-ddb/package.json","types":["devDependencies"]},{"file":"/packages/api-page-builder-so-ddb/package.json","types":["devDependencies"]},{"file":"/packages/api-page-builder-so-ddb-es/package.json","types":["devDependencies"]},{"file":"/packages/api-security-so-ddb/package.json","types":["devDependencies"]},{"file":"/packages/api-tenancy/package.json","types":["devDependencies"]},{"file":"/packages/api-tenancy-so-ddb/package.json","types":["devDependencies"]},{"file":"/packages/api-tenant-manager/package.json","types":["devDependencies"]},{"file":"/packages/api-theme-manager/package.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-es/dependencies.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-os/dependencies.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb/dependencies.json","types":["devDependencies"]},{"file":"/packages/data-migration/package.json","types":["devDependencies"]},{"file":"/packages/db-dynamodb/package.json","types":["devDependencies"]},{"file":"/packages/handler-client/package.json","types":["devDependencies"]},{"file":"/packages/handler-graphql/package.json","types":["devDependencies"]},{"file":"/packages/validation/package.json","types":["devDependencies"]}]}]},{"name":"jest-environment-jsdom","versions":[{"version":"29.7.0","files":[{"file":"/package.json","types":["devDependencies"]}]}]},{"name":"jest-extended","versions":[{"version":"4.0.2","files":[{"file":"/package.json","types":["devDependencies"]}]}]},{"name":"lerna","versions":[{"version":"8.1.2","files":[{"file":"/package.json","types":["devDependencies"]}]}]},{"name":"lexical","versions":[{"version":"0.23.1","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/lexical-converter/package.json","types":["dependencies"]},{"file":"/packages/lexical-editor/package.json","types":["dependencies"]},{"file":"/packages/lexical-nodes/package.json","types":["dependencies"]},{"file":"/packages/lexical-theme/package.json","types":["dependencies"]}]}]},{"name":"lint-staged","versions":[{"version":"15.3.0","files":[{"file":"/package.json","types":["devDependencies"]}]}]},{"name":"listr","versions":[{"version":"0.14.3","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-deploy-pulumi/package.json","types":["dependencies"]},{"file":"/packages/create-webiny-project/package.json","types":["dependencies"]}]}]},{"name":"load-json-file","versions":[{"version":"6.2.0","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/api-page-builder/package.json","types":["dependencies"]},{"file":"/packages/api-page-builder-import-export/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-dependencies/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-extensions/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-scaffold/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-scaffold-admin-app-module/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-scaffold-graphql-service/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-scaffold-react-component/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-scaffold-workspaces/package.json","types":["dependencies"]},{"file":"/packages/create-webiny-project/package.json","types":["dependencies"]},{"file":"/packages/cwp-template-aws/package.json","types":["dependencies"]},{"file":"/packages/global-config/package.json","types":["dependencies"]},{"file":"/packages/project-utils/package.json","types":["devDependencies"]},{"file":"/scripts/buildPackages/package.json","types":["dependencies"]},{"file":"/scripts/prepublishOnly/package.json","types":["dependencies"]}]}]},{"name":"lodash","versions":[{"version":"4.17.21","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/admin-ui/package.json","types":["dependencies"]},{"file":"/packages/api-aco/package.json","types":["dependencies"]},{"file":"/packages/api-admin-users/package.json","types":["dependencies"]},{"file":"/packages/api-apw/package.json","types":["dependencies"]},{"file":"/packages/api-file-manager/package.json","types":["dependencies"]},{"file":"/packages/api-form-builder/package.json","types":["dependencies"]},{"file":"/packages/api-headless-cms/package.json","types":["dependencies"]},{"file":"/packages/api-headless-cms-ddb/package.json","types":["dependencies"]},{"file":"/packages/api-headless-cms-ddb-es/package.json","types":["dependencies"]},{"file":"/packages/api-mailer/package.json","types":["dependencies"]},{"file":"/packages/api-page-builder/package.json","types":["dependencies"]},{"file":"/packages/api-page-builder-aco/package.json","types":["dependencies"]},{"file":"/packages/api-page-builder-import-export/package.json","types":["dependencies"]},{"file":"/packages/api-page-builder-so-ddb-es/package.json","types":["dependencies"]},{"file":"/packages/api-prerendering-service/package.json","types":["dependencies"]},{"file":"/packages/api-prerendering-service-aws/package.json","types":["dependencies"]},{"file":"/packages/app/package.json","types":["dependencies"]},{"file":"/packages/app-aco/package.json","types":["dependencies"]},{"file":"/packages/app-admin/package.json","types":["dependencies"]},{"file":"/packages/app-admin-auth0/package.json","types":["dependencies"]},{"file":"/packages/app-admin-okta/package.json","types":["dependencies"]},{"file":"/packages/app-admin-users-cognito/package.json","types":["dependencies"]},{"file":"/packages/app-apw/package.json","types":["dependencies"]},{"file":"/packages/app-audit-logs/package.json","types":["dependencies"]},{"file":"/packages/app-cognito-authenticator/package.json","types":["dependencies"]},{"file":"/packages/app-file-manager/package.json","types":["dependencies"]},{"file":"/packages/app-form-builder/package.json","types":["dependencies"]},{"file":"/packages/app-headless-cms/package.json","types":["dependencies"]},{"file":"/packages/app-headless-cms-common/package.json","types":["dependencies"]},{"file":"/packages/app-i18n/package.json","types":["dependencies"]},{"file":"/packages/app-page-builder/package.json","types":["dependencies"]},{"file":"/packages/app-page-builder-elements/package.json","types":["dependencies"]},{"file":"/packages/app-security-access-management/package.json","types":["dependencies"]},{"file":"/packages/app-tenant-manager/package.json","types":["dependencies"]},{"file":"/packages/app-theme-manager/package.json","types":["dependencies"]},{"file":"/packages/app-trash-bin/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-deploy-pulumi/package.json","types":["dependencies"]},{"file":"/packages/cwp-template-aws/package.json","types":["dependencies"]},{"file":"/packages/db-dynamodb/package.json","types":["dependencies"]},{"file":"/packages/form/package.json","types":["dependencies"]},{"file":"/packages/i18n/package.json","types":["dependencies"]},{"file":"/packages/i18n-react/package.json","types":["dependencies"]},{"file":"/packages/migrations/package.json","types":["dependencies"]},{"file":"/packages/project-utils/package.json","types":["dependencies"]},{"file":"/packages/pulumi/package.json","types":["dependencies"]},{"file":"/packages/pulumi-aws/package.json","types":["dependencies"]},{"file":"/packages/pulumi-sdk/package.json","types":["dependencies"]},{"file":"/packages/tasks/package.json","types":["dependencies"]},{"file":"/packages/ui/package.json","types":["dependencies"]},{"file":"/packages/validation/package.json","types":["dependencies"]},{"file":"/cypress-tests/package.json","types":["devDependencies"]},{"file":"/scripts/prepublishOnly/package.json","types":["dependencies"]}]}]},{"name":"longest","versions":[{"version":"2.0.1","files":[{"file":"/package.json","types":["devDependencies"]}]}]},{"name":"micromatch","versions":[{"version":"4.0.8","files":[{"file":"/package.json","types":["devDependencies"]}]}]},{"name":"minimatch","versions":[{"version":"5.1.6","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/api-security/package.json","types":["dependencies"]},{"file":"/packages/app/package.json","types":["dependencies"]},{"file":"/packages/app-file-manager/package.json","types":["dependencies"]},{"file":"/packages/app-security/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-deploy-pulumi/package.json","types":["dependencies"]},{"file":"/packages/data-migration/package.json","types":["dependencies"]},{"file":"/packages/ui/package.json","types":["peerDependencies"]}]}]},{"name":"nanoid","versions":[{"version":"3.3.8","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/app/package.json","types":["dependencies"]},{"file":"/packages/app-page-builder/package.json","types":["dependencies"]},{"file":"/packages/react-properties/package.json","types":["dependencies"]},{"file":"/packages/utils/package.json","types":["dependencies"]},{"file":"/cypress-tests/package.json","types":["devDependencies"]}]}]},{"name":"node-fetch","versions":[{"version":"2.6.7","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/api-cognito-authenticator/package.json","types":["dependencies"]},{"file":"/packages/api-file-manager-s3/package.json","types":["dependencies"]},{"file":"/packages/api-form-builder/package.json","types":["dependencies"]},{"file":"/packages/api-page-builder/package.json","types":["dependencies"]},{"file":"/packages/api-page-builder-import-export/package.json","types":["dependencies"]},{"file":"/packages/api-security-auth0/package.json","types":["dependencies"]},{"file":"/packages/api-security-okta/package.json","types":["dependencies"]},{"file":"/packages/api-wcp/package.json","types":["dependencies"]},{"file":"/packages/create-webiny-project/package.json","types":["dependencies"]},{"file":"/packages/pulumi-aws/package.json","types":["dependencies"]},{"file":"/packages/pulumi-sdk/package.json","types":["dependencies"]},{"file":"/packages/serverless-cms-aws/package.json","types":["dependencies"]},{"file":"/packages/wcp/package.json","types":["dependencies"]},{"file":"/cypress-tests/package.json","types":["devDependencies"]}]}]},{"name":"pm2","versions":[{"version":"5.4.3","files":[{"file":"/package.json","types":["devDependencies"]}]}]},{"name":"prettier","versions":[{"version":"2.8.8","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/admin-ui/package.json","types":["devDependencies"]},{"file":"/packages/api-aco/package.json","types":["devDependencies"]},{"file":"/packages/api-admin-settings/package.json","types":["devDependencies"]},{"file":"/packages/api-apw/package.json","types":["devDependencies"]},{"file":"/packages/api-headless-cms/package.json","types":["devDependencies"]},{"file":"/packages/api-headless-cms-ddb-es/package.json","types":["devDependencies"]},{"file":"/packages/api-page-builder/package.json","types":["devDependencies"]},{"file":"/packages/api-prerendering-service/package.json","types":["devDependencies"]},{"file":"/packages/api-prerendering-service-so-ddb/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-dependencies/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-extensions/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-scaffold/package.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-es/dependencies.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-os/dependencies.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb/dependencies.json","types":["devDependencies"]},{"file":"/packages/react-properties/package.json","types":["devDependencies"]},{"file":"/packages/react-rich-text-lexical-renderer/package.json","types":["devDependencies"]}]}]},{"name":"semver","versions":[{"version":"7.6.3","files":[{"file":"/package.json","types":["devDependencies","resolutions"]},{"file":"/packages/api-headless-cms/package.json","types":["dependencies"]},{"file":"/packages/cli/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-dependencies/package.json","types":["dependencies"]},{"file":"/packages/create-webiny-project/package.json","types":["dependencies"]},{"file":"/packages/data-migration/package.json","types":["dependencies"]},{"file":"/packages/pulumi-sdk/package.json","types":["dependencies"]},{"file":"/packages/system-requirements/package.json","types":["dependencies"]}]}]},{"name":"ts-expect","versions":[{"version":"1.3.0","files":[{"file":"/package.json","types":["devDependencies"]}]}]},{"name":"ts-jest","versions":[{"version":"29.1.5","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-es/dependencies.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-os/dependencies.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb/dependencies.json","types":["devDependencies"]}]}]},{"name":"ts-node","versions":[{"version":"10.9.2","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/scripts/buildPackages/package.json","types":["devDependencies"]},{"file":"/scripts/prepublishOnly/package.json","types":["devDependencies"]}]}]},{"name":"type-fest","versions":[{"version":"4.14.0","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/api-elasticsearch-tasks/package.json","types":["devDependencies"]},{"file":"/packages/api-record-locking/package.json","types":["devDependencies"]},{"file":"/packages/api-websockets/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-dependencies/package.json","types":["devDependencies"]},{"file":"/packages/db/package.json","types":["dependencies"]},{"file":"/packages/tasks/package.json","types":["devDependencies"]},{"file":"/scripts/prepublishOnly/package.json","types":["devDependencies"]}]}]},{"name":"typescript","versions":[{"version":"5.3.3","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/admin-ui/package.json","types":["devDependencies"]},{"file":"/packages/api/package.json","types":["devDependencies"]},{"file":"/packages/api-aco/package.json","types":["devDependencies"]},{"file":"/packages/api-admin-settings/package.json","types":["devDependencies"]},{"file":"/packages/api-admin-users/package.json","types":["devDependencies"]},{"file":"/packages/api-admin-users-so-ddb/package.json","types":["devDependencies"]},{"file":"/packages/api-apw/package.json","types":["devDependencies"]},{"file":"/packages/api-apw-scheduler-so-ddb/package.json","types":["devDependencies"]},{"file":"/packages/api-audit-logs/package.json","types":["devDependencies"]},{"file":"/packages/api-authentication/package.json","types":["devDependencies"]},{"file":"/packages/api-authentication-cognito/package.json","types":["devDependencies"]},{"file":"/packages/api-background-tasks-ddb/package.json","types":["devDependencies"]},{"file":"/packages/api-background-tasks-es/package.json","types":["devDependencies"]},{"file":"/packages/api-background-tasks-os/package.json","types":["devDependencies"]},{"file":"/packages/api-cognito-authenticator/package.json","types":["devDependencies"]},{"file":"/packages/api-dynamodb-to-elasticsearch/package.json","types":["devDependencies"]},{"file":"/packages/api-elasticsearch/package.json","types":["devDependencies"]},{"file":"/packages/api-elasticsearch-tasks/package.json","types":["devDependencies"]},{"file":"/packages/api-file-manager/package.json","types":["devDependencies"]},{"file":"/packages/api-file-manager-aco/package.json","types":["devDependencies"]},{"file":"/packages/api-file-manager-ddb/package.json","types":["devDependencies"]},{"file":"/packages/api-file-manager-s3/package.json","types":["devDependencies"]},{"file":"/packages/api-form-builder/package.json","types":["devDependencies"]},{"file":"/packages/api-form-builder-so-ddb/package.json","types":["devDependencies"]},{"file":"/packages/api-form-builder-so-ddb-es/package.json","types":["devDependencies"]},{"file":"/packages/api-headless-cms/package.json","types":["devDependencies"]},{"file":"/packages/api-headless-cms-aco/package.json","types":["devDependencies"]},{"file":"/packages/api-headless-cms-bulk-actions/package.json","types":["devDependencies"]},{"file":"/packages/api-headless-cms-ddb/package.json","types":["devDependencies"]},{"file":"/packages/api-headless-cms-ddb-es/package.json","types":["devDependencies"]},{"file":"/packages/api-headless-cms-es-tasks/package.json","types":["devDependencies"]},{"file":"/packages/api-headless-cms-import-export/package.json","types":["devDependencies"]},{"file":"/packages/api-headless-cms-tasks/package.json","types":["devDependencies"]},{"file":"/packages/api-headless-cms-tasks-ddb-es/package.json","types":["devDependencies"]},{"file":"/packages/api-i18n/package.json","types":["devDependencies"]},{"file":"/packages/api-i18n-content/package.json","types":["devDependencies"]},{"file":"/packages/api-i18n-ddb/package.json","types":["devDependencies"]},{"file":"/packages/api-log/package.json","types":["devDependencies"]},{"file":"/packages/api-mailer/package.json","types":["devDependencies"]},{"file":"/packages/api-page-builder/package.json","types":["devDependencies"]},{"file":"/packages/api-page-builder-aco/package.json","types":["devDependencies"]},{"file":"/packages/api-page-builder-import-export/package.json","types":["devDependencies"]},{"file":"/packages/api-page-builder-import-export-so-ddb/package.json","types":["devDependencies"]},{"file":"/packages/api-page-builder-so-ddb/package.json","types":["devDependencies"]},{"file":"/packages/api-page-builder-so-ddb-es/package.json","types":["devDependencies"]},{"file":"/packages/api-prerendering-service/package.json","types":["devDependencies"]},{"file":"/packages/api-prerendering-service-aws/package.json","types":["devDependencies"]},{"file":"/packages/api-prerendering-service-so-ddb/package.json","types":["devDependencies"]},{"file":"/packages/api-record-locking/package.json","types":["devDependencies"]},{"file":"/packages/api-security/package.json","types":["devDependencies"]},{"file":"/packages/api-security-auth0/package.json","types":["devDependencies"]},{"file":"/packages/api-security-cognito/package.json","types":["devDependencies"]},{"file":"/packages/api-security-okta/package.json","types":["devDependencies"]},{"file":"/packages/api-security-so-ddb/package.json","types":["devDependencies"]},{"file":"/packages/api-serverless-cms/package.json","types":["devDependencies"]},{"file":"/packages/api-tenancy/package.json","types":["devDependencies"]},{"file":"/packages/api-tenancy-so-ddb/package.json","types":["devDependencies"]},{"file":"/packages/api-tenant-manager/package.json","types":["devDependencies"]},{"file":"/packages/api-theme-manager/package.json","types":["devDependencies"]},{"file":"/packages/api-wcp/package.json","types":["devDependencies"]},{"file":"/packages/api-websockets/package.json","types":["devDependencies"]},{"file":"/packages/app/package.json","types":["devDependencies"]},{"file":"/packages/app-aco/package.json","types":["devDependencies"]},{"file":"/packages/app-admin/package.json","types":["devDependencies"]},{"file":"/packages/app-admin-auth0/package.json","types":["devDependencies"]},{"file":"/packages/app-admin-cognito/package.json","types":["devDependencies"]},{"file":"/packages/app-admin-okta/package.json","types":["devDependencies"]},{"file":"/packages/app-admin-ui/package.json","types":["devDependencies"]},{"file":"/packages/app-admin-users-cognito/package.json","types":["devDependencies"]},{"file":"/packages/app-apw/package.json","types":["devDependencies"]},{"file":"/packages/app-audit-logs/package.json","types":["devDependencies"]},{"file":"/packages/app-cognito-authenticator/package.json","types":["devDependencies"]},{"file":"/packages/app-dynamic-pages/package.json","types":["devDependencies"]},{"file":"/packages/app-file-manager/package.json","types":["devDependencies"]},{"file":"/packages/app-file-manager-s3/package.json","types":["devDependencies"]},{"file":"/packages/app-form-builder/package.json","types":["devDependencies"]},{"file":"/packages/app-graphql-playground/package.json","types":["devDependencies"]},{"file":"/packages/app-headless-cms/package.json","types":["devDependencies"]},{"file":"/packages/app-headless-cms-common/package.json","types":["devDependencies"]},{"file":"/packages/app-i18n/package.json","types":["devDependencies"]},{"file":"/packages/app-i18n-content/package.json","types":["devDependencies"]},{"file":"/packages/app-mailer/package.json","types":["devDependencies"]},{"file":"/packages/app-page-builder/package.json","types":["devDependencies"]},{"file":"/packages/app-page-builder-elements/package.json","types":["devDependencies"]},{"file":"/packages/app-plugin-admin-welcome-screen/package.json","types":["devDependencies"]},{"file":"/packages/app-record-locking/package.json","types":["devDependencies"]},{"file":"/packages/app-security/package.json","types":["devDependencies"]},{"file":"/packages/app-security-access-management/package.json","types":["devDependencies"]},{"file":"/packages/app-serverless-cms/package.json","types":["devDependencies"]},{"file":"/packages/app-tenancy/package.json","types":["devDependencies"]},{"file":"/packages/app-tenant-manager/package.json","types":["devDependencies"]},{"file":"/packages/app-theme/package.json","types":["devDependencies"]},{"file":"/packages/app-theme-manager/package.json","types":["devDependencies"]},{"file":"/packages/app-trash-bin/package.json","types":["devDependencies"]},{"file":"/packages/app-utils/package.json","types":["devDependencies"]},{"file":"/packages/app-wcp/package.json","types":["devDependencies"]},{"file":"/packages/app-website/package.json","types":["devDependencies"]},{"file":"/packages/app-websockets/package.json","types":["devDependencies"]},{"file":"/packages/aws-sdk/package.json","types":["devDependencies"]},{"file":"/packages/cli/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-dependencies/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-deploy-pulumi/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-extensions/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-scaffold/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-scaffold-admin-app-module/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-scaffold-ci/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-scaffold-extensions/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-scaffold-graphql-service/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-scaffold-react-component/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-scaffold-react-component/template/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-scaffold-workspaces/package.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-es/dependencies.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-os/dependencies.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb/dependencies.json","types":["devDependencies"]},{"file":"/packages/data-migration/package.json","types":["devDependencies"]},{"file":"/packages/db/package.json","types":["devDependencies"]},{"file":"/packages/db-dynamodb/package.json","types":["devDependencies"]},{"file":"/packages/di-container/package.json","types":["devDependencies"]},{"file":"/packages/error/package.json","types":["devDependencies"]},{"file":"/packages/feature-flags/package.json","types":["devDependencies"]},{"file":"/packages/form/package.json","types":["devDependencies"]},{"file":"/packages/handler/package.json","types":["devDependencies"]},{"file":"/packages/handler-aws/package.json","types":["devDependencies"]},{"file":"/packages/handler-client/package.json","types":["devDependencies"]},{"file":"/packages/handler-db/package.json","types":["devDependencies"]},{"file":"/packages/handler-graphql/package.json","types":["devDependencies"]},{"file":"/packages/i18n/package.json","types":["devDependencies"]},{"file":"/packages/i18n-react/package.json","types":["devDependencies"]},{"file":"/packages/ioc/package.json","types":["devDependencies"]},{"file":"/packages/logger/package.json","types":["devDependencies"]},{"file":"/packages/migrations/package.json","types":["devDependencies"]},{"file":"/packages/plugins/package.json","types":["devDependencies"]},{"file":"/packages/project-utils/package.json","types":["dependencies"]},{"file":"/packages/pubsub/package.json","types":["devDependencies"]},{"file":"/packages/pulumi/package.json","types":["devDependencies"]},{"file":"/packages/pulumi-aws/package.json","types":["devDependencies"]},{"file":"/packages/pulumi-sdk/package.json","types":["devDependencies"]},{"file":"/packages/react-composition/package.json","types":["devDependencies"]},{"file":"/packages/react-rich-text-renderer/package.json","types":["devDependencies"]},{"file":"/packages/react-router/package.json","types":["devDependencies"]},{"file":"/packages/serverless-cms-aws/package.json","types":["devDependencies"]},{"file":"/packages/shared-aco/package.json","types":["devDependencies"]},{"file":"/packages/tasks/package.json","types":["devDependencies"]},{"file":"/packages/theme/package.json","types":["devDependencies"]},{"file":"/packages/ui/package.json","types":["devDependencies"]},{"file":"/packages/ui-composer/package.json","types":["devDependencies"]},{"file":"/packages/utils/package.json","types":["devDependencies"]},{"file":"/packages/validation/package.json","types":["devDependencies"]},{"file":"/packages/wcp/package.json","types":["devDependencies"]},{"file":"/cypress-tests/package.json","types":["devDependencies"]}]}]},{"name":"typescript-transform-paths","versions":[{"version":"3.5.3","files":[{"file":"/package.json","types":["devDependencies"]}]}]},{"name":"verdaccio","versions":[{"version":"6.0.5","files":[{"file":"/package.json","types":["devDependencies"]}]}]},{"name":"write-json-file","versions":[{"version":"4.3.0","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/api-headless-cms/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-dependencies/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-extensions/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-scaffold/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-scaffold-graphql-service/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-scaffold-react-component/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-scaffold-workspaces/package.json","types":["dependencies"]},{"file":"/packages/create-webiny-project/package.json","types":["dependencies"]},{"file":"/packages/cwp-template-aws/package.json","types":["dependencies"]},{"file":"/packages/global-config/package.json","types":["dependencies"]},{"file":"/scripts/buildPackages/package.json","types":["dependencies"]},{"file":"/scripts/prepublishOnly/package.json","types":["dependencies"]}]}]},{"name":"yargs","versions":[{"version":"17.7.2","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/cli/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-deploy-pulumi/package.json","types":["dependencies"]},{"file":"/packages/create-webiny-project/package.json","types":["dependencies"]},{"file":"/packages/i18n/package.json","types":["dependencies"]},{"file":"/packages/project-utils/package.json","types":["devDependencies"]},{"file":"/scripts/buildPackages/package.json","types":["dependencies"]}]}]},{"name":"systeminformation","versions":[{"version":"5.23.18","files":[{"file":"/package.json","types":["resolutions"]}]}]},{"name":"@emotion/react","versions":[{"version":"11.10.8","files":[{"file":"/package.json","types":["resolutions"]},{"file":"/packages/app-admin/package.json","types":["dependencies"]},{"file":"/packages/app-apw/package.json","types":["dependencies"]},{"file":"/packages/app-audit-logs/package.json","types":["dependencies"]},{"file":"/packages/app-dynamic-pages/package.json","types":["dependencies"]},{"file":"/packages/app-form-builder/package.json","types":["dependencies"]},{"file":"/packages/app-graphql-playground/package.json","types":["dependencies"]},{"file":"/packages/app-headless-cms/package.json","types":["dependencies"]},{"file":"/packages/app-headless-cms-common/package.json","types":["dependencies"]},{"file":"/packages/app-page-builder/package.json","types":["dependencies"]},{"file":"/packages/app-page-builder-elements/package.json","types":["dependencies"]},{"file":"/packages/app-serverless-cms/package.json","types":["dependencies"]},{"file":"/packages/app-theme-manager/package.json","types":["dependencies"]},{"file":"/packages/app-wcp/package.json","types":["dependencies"]},{"file":"/packages/app-website/package.json","types":["dependencies"]},{"file":"/packages/cwp-template-aws/template/common/apps/website/package.json","types":["dependencies"]},{"file":"/packages/cwp-template-aws/template/common/extensions/theme/package.json","types":["dependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-es/dependencies.json","types":["resolutions"]},{"file":"/packages/cwp-template-aws/template/ddb-os/dependencies.json","types":["resolutions"]},{"file":"/packages/cwp-template-aws/template/ddb/dependencies.json","types":["resolutions"]},{"file":"/packages/lexical-editor/package.json","types":["dependencies"]},{"file":"/packages/lexical-theme/package.json","types":["dependencies"]},{"file":"/packages/react-rich-text-lexical-renderer/package.json","types":["devDependencies"]},{"file":"/packages/theme/package.json","types":["dependencies"]},{"file":"/apps/website/package.json","types":["dependencies"]},{"file":"/extensions/theme/package.json","types":["dependencies"]}]}]},{"name":"@types/webpack","versions":[{"version":"5.28.0","files":[{"file":"/package.json","types":["resolutions"]}]}]},{"name":"react","versions":[{"version":"18.2.0","files":[{"file":"/package.json","types":["resolutions"]},{"file":"/packages/admin-ui/package.json","types":["dependencies"]},{"file":"/packages/app/package.json","types":["dependencies"]},{"file":"/packages/app-aco/package.json","types":["dependencies"]},{"file":"/packages/app-admin/package.json","types":["dependencies"]},{"file":"/packages/app-admin-auth0/package.json","types":["dependencies"]},{"file":"/packages/app-admin-cognito/package.json","types":["dependencies"]},{"file":"/packages/app-admin-okta/package.json","types":["dependencies"]},{"file":"/packages/app-admin-ui/package.json","types":["dependencies"]},{"file":"/packages/app-admin-users-cognito/package.json","types":["dependencies"]},{"file":"/packages/app-apw/package.json","types":["dependencies"]},{"file":"/packages/app-audit-logs/package.json","types":["peerDependencies"]},{"file":"/packages/app-cognito-authenticator/package.json","types":["dependencies"]},{"file":"/packages/app-dynamic-pages/package.json","types":["dependencies"]},{"file":"/packages/app-file-manager/package.json","types":["dependencies"]},{"file":"/packages/app-form-builder/package.json","types":["dependencies"]},{"file":"/packages/app-graphql-playground/package.json","types":["dependencies"]},{"file":"/packages/app-headless-cms/package.json","types":["dependencies"]},{"file":"/packages/app-headless-cms-common/package.json","types":["dependencies"]},{"file":"/packages/app-i18n/package.json","types":["dependencies"]},{"file":"/packages/app-i18n-content/package.json","types":["dependencies"]},{"file":"/packages/app-mailer/package.json","types":["dependencies"]},{"file":"/packages/app-page-builder/package.json","types":["dependencies"]},{"file":"/packages/app-page-builder-elements/package.json","types":["peerDependencies"]},{"file":"/packages/app-plugin-admin-welcome-screen/package.json","types":["dependencies"]},{"file":"/packages/app-record-locking/package.json","types":["dependencies"]},{"file":"/packages/app-security/package.json","types":["dependencies"]},{"file":"/packages/app-security-access-management/package.json","types":["dependencies"]},{"file":"/packages/app-serverless-cms/package.json","types":["dependencies"]},{"file":"/packages/app-tenancy/package.json","types":["dependencies"]},{"file":"/packages/app-tenant-manager/package.json","types":["dependencies"]},{"file":"/packages/app-theme/package.json","types":["peerDependencies"]},{"file":"/packages/app-theme-manager/package.json","types":["dependencies"]},{"file":"/packages/app-trash-bin/package.json","types":["dependencies"]},{"file":"/packages/app-wcp/package.json","types":["dependencies"]},{"file":"/packages/app-website/package.json","types":["dependencies"]},{"file":"/packages/app-websockets/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-extensions/templates/admin/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-extensions/templates/pbElement/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-extensions/templates/website/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-scaffold-react-component/template/package.json","types":["dependencies"]},{"file":"/packages/cwp-template-aws/template/common/apps/admin/package.json","types":["dependencies"]},{"file":"/packages/cwp-template-aws/template/common/apps/website/package.json","types":["dependencies"]},{"file":"/packages/cwp-template-aws/template/common/extensions/theme/package.json","types":["dependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-es/dependencies.json","types":["resolutions"]},{"file":"/packages/cwp-template-aws/template/ddb-os/dependencies.json","types":["resolutions"]},{"file":"/packages/cwp-template-aws/template/ddb/dependencies.json","types":["resolutions"]},{"file":"/packages/form/package.json","types":["peerDependencies"]},{"file":"/packages/i18n/package.json","types":["peerDependencies"]},{"file":"/packages/i18n-react/package.json","types":["peerDependencies"]},{"file":"/packages/lexical-editor/package.json","types":["dependencies"]},{"file":"/packages/lexical-editor-actions/package.json","types":["dependencies"]},{"file":"/packages/lexical-editor-pb-element/package.json","types":["dependencies"]},{"file":"/packages/lexical-nodes/package.json","types":["devDependencies"]},{"file":"/packages/project-utils/package.json","types":["dependencies"]},{"file":"/packages/react-composition/package.json","types":["dependencies"]},{"file":"/packages/react-properties/package.json","types":["dependencies"]},{"file":"/packages/react-rich-text-lexical-renderer/package.json","types":["dependencies"]},{"file":"/packages/react-rich-text-renderer/package.json","types":["dependencies"]},{"file":"/packages/react-router/package.json","types":["dependencies","peerDependencies"]},{"file":"/packages/theme/package.json","types":["peerDependencies"]},{"file":"/packages/ui/package.json","types":["peerDependencies"]},{"file":"/packages/ui-composer/package.json","types":["dependencies"]},{"file":"/apps/admin/package.json","types":["dependencies"]},{"file":"/apps/website/package.json","types":["dependencies"]},{"file":"/extensions/theme/package.json","types":["dependencies"]}]}]},{"name":"react-dom","versions":[{"version":"18.2.0","files":[{"file":"/package.json","types":["resolutions"]},{"file":"/packages/app/package.json","types":["dependencies"]},{"file":"/packages/app-aco/package.json","types":["dependencies"]},{"file":"/packages/app-admin/package.json","types":["dependencies"]},{"file":"/packages/app-admin-auth0/package.json","types":["dependencies"]},{"file":"/packages/app-admin-cognito/package.json","types":["dependencies"]},{"file":"/packages/app-admin-okta/package.json","types":["dependencies"]},{"file":"/packages/app-admin-ui/package.json","types":["dependencies"]},{"file":"/packages/app-admin-users-cognito/package.json","types":["dependencies"]},{"file":"/packages/app-apw/package.json","types":["dependencies"]},{"file":"/packages/app-cognito-authenticator/package.json","types":["dependencies"]},{"file":"/packages/app-dynamic-pages/package.json","types":["dependencies"]},{"file":"/packages/app-file-manager/package.json","types":["dependencies"]},{"file":"/packages/app-form-builder/package.json","types":["dependencies"]},{"file":"/packages/app-graphql-playground/package.json","types":["dependencies"]},{"file":"/packages/app-headless-cms/package.json","types":["dependencies"]},{"file":"/packages/app-i18n/package.json","types":["dependencies"]},{"file":"/packages/app-i18n-content/package.json","types":["dependencies"]},{"file":"/packages/app-mailer/package.json","types":["dependencies"]},{"file":"/packages/app-page-builder/package.json","types":["dependencies"]},{"file":"/packages/app-plugin-admin-welcome-screen/package.json","types":["dependencies"]},{"file":"/packages/app-record-locking/package.json","types":["dependencies"]},{"file":"/packages/app-security/package.json","types":["dependencies"]},{"file":"/packages/app-security-access-management/package.json","types":["dependencies"]},{"file":"/packages/app-serverless-cms/package.json","types":["dependencies"]},{"file":"/packages/app-tenancy/package.json","types":["dependencies"]},{"file":"/packages/app-tenant-manager/package.json","types":["dependencies"]},{"file":"/packages/app-theme-manager/package.json","types":["dependencies"]},{"file":"/packages/app-trash-bin/package.json","types":["dependencies"]},{"file":"/packages/app-wcp/package.json","types":["dependencies"]},{"file":"/packages/app-website/package.json","types":["dependencies"]},{"file":"/packages/app-websockets/package.json","types":["dependencies"]},{"file":"/packages/cwp-template-aws/template/common/apps/admin/package.json","types":["dependencies"]},{"file":"/packages/cwp-template-aws/template/common/apps/website/package.json","types":["dependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-es/dependencies.json","types":["resolutions"]},{"file":"/packages/cwp-template-aws/template/ddb-os/dependencies.json","types":["resolutions"]},{"file":"/packages/cwp-template-aws/template/ddb/dependencies.json","types":["resolutions"]},{"file":"/packages/lexical-editor/package.json","types":["dependencies"]},{"file":"/packages/lexical-editor-actions/package.json","types":["dependencies"]},{"file":"/packages/lexical-editor-pb-element/package.json","types":["dependencies"]},{"file":"/packages/project-utils/package.json","types":["dependencies"]},{"file":"/packages/react-composition/package.json","types":["dependencies"]},{"file":"/packages/react-router/package.json","types":["dependencies"]},{"file":"/packages/ui/package.json","types":["peerDependencies"]},{"file":"/packages/ui-composer/package.json","types":["dependencies"]},{"file":"/apps/admin/package.json","types":["dependencies"]},{"file":"/apps/website/package.json","types":["dependencies"]}]}]},{"name":"tar","versions":[{"version":"6.2.1","files":[{"file":"/package.json","types":["resolutions"]},{"file":"/packages/pulumi-sdk/package.json","types":["dependencies"]}]}]},{"name":"postcss","versions":[{"version":"8.4.35","files":[{"file":"/package.json","types":["resolutions"]}]}]},{"name":"@editorjs/editorjs","versions":[{"version":"2.26.5","files":[{"file":"/packages/admin-ui/package.json","types":["dependencies"]},{"file":"/packages/app-admin/package.json","types":["dependencies"]},{"file":"/packages/app-form-builder/package.json","types":["dependencies"]},{"file":"/packages/app-page-builder-elements/package.json","types":["peerDependencies"]},{"file":"/packages/react-rich-text-renderer/package.json","types":["dependencies"]}]}]},{"name":"@fortawesome/fontawesome-svg-core","versions":[{"version":"1.3.0","files":[{"file":"/packages/admin-ui/package.json","types":["dependencies"]},{"file":"/packages/app-dynamic-pages/package.json","types":["dependencies"]},{"file":"/packages/app-headless-cms/package.json","types":["dependencies"]},{"file":"/packages/app-headless-cms-common/package.json","types":["dependencies"]},{"file":"/packages/app-page-builder/package.json","types":["dependencies"]}]}]},{"name":"@fortawesome/react-fontawesome","versions":[{"version":"0.1.17","files":[{"file":"/packages/admin-ui/package.json","types":["dependencies"]},{"file":"/packages/app-dynamic-pages/package.json","types":["dependencies"]},{"file":"/packages/app-headless-cms/package.json","types":["dependencies"]},{"file":"/packages/app-page-builder/package.json","types":["dependencies"]}]}]},{"name":"@radix-ui/react-accessible-icon","versions":[{"version":"1.1.2","files":[{"file":"/packages/admin-ui/package.json","types":["dependencies"]}]}]},{"name":"@radix-ui/react-avatar","versions":[{"version":"1.1.3","files":[{"file":"/packages/admin-ui/package.json","types":["dependencies"]}]}]},{"name":"@radix-ui/react-checkbox","versions":[{"version":"1.1.4","files":[{"file":"/packages/admin-ui/package.json","types":["dependencies"]}]}]},{"name":"@radix-ui/react-collapsible","versions":[{"version":"1.1.3","files":[{"file":"/packages/admin-ui/package.json","types":["dependencies"]}]}]},{"name":"@radix-ui/react-dialog","versions":[{"version":"1.1.6","files":[{"file":"/packages/admin-ui/package.json","types":["dependencies"]}]}]},{"name":"@radix-ui/react-dropdown-menu","versions":[{"version":"2.1.6","files":[{"file":"/packages/admin-ui/package.json","types":["dependencies"]}]}]},{"name":"@radix-ui/react-label","versions":[{"version":"2.1.2","files":[{"file":"/packages/admin-ui/package.json","types":["dependencies"]}]}]},{"name":"@radix-ui/react-popover","versions":[{"version":"1.1.6","files":[{"file":"/packages/admin-ui/package.json","types":["dependencies"]}]}]},{"name":"@radix-ui/react-progress","versions":[{"version":"1.1.7","files":[{"file":"/packages/admin-ui/package.json","types":["dependencies"]}]}]},{"name":"@radix-ui/react-radio-group","versions":[{"version":"1.2.3","files":[{"file":"/packages/admin-ui/package.json","types":["dependencies"]}]}]},{"name":"@radix-ui/react-select","versions":[{"version":"2.1.6","files":[{"file":"/packages/admin-ui/package.json","types":["dependencies"]}]}]},{"name":"@radix-ui/react-separator","versions":[{"version":"1.1.2","files":[{"file":"/packages/admin-ui/package.json","types":["dependencies"]}]}]},{"name":"@radix-ui/react-slider","versions":[{"version":"1.2.3","files":[{"file":"/packages/admin-ui/package.json","types":["dependencies"]}]}]},{"name":"@radix-ui/react-slot","versions":[{"version":"1.1.2","files":[{"file":"/packages/admin-ui/package.json","types":["dependencies"]}]}]},{"name":"@radix-ui/react-switch","versions":[{"version":"1.1.3","files":[{"file":"/packages/admin-ui/package.json","types":["dependencies"]}]}]},{"name":"@radix-ui/react-tabs","versions":[{"version":"1.1.3","files":[{"file":"/packages/admin-ui/package.json","types":["dependencies"]}]}]},{"name":"@radix-ui/react-tooltip","versions":[{"version":"1.1.8","files":[{"file":"/packages/admin-ui/package.json","types":["dependencies"]}]}]},{"name":"@tanstack/react-table","versions":[{"version":"8.20.6","files":[{"file":"/packages/admin-ui/package.json","types":["dependencies"]}]}]},{"name":"ace-builds","versions":[{"version":"1.37.1","files":[{"file":"/packages/admin-ui/package.json","types":["dependencies"]}]}]},{"name":"bytes","versions":[{"version":"3.1.2","files":[{"file":"/packages/admin-ui/package.json","types":["dependencies"]},{"file":"/packages/api-headless-cms-import-export/package.json","types":["dependencies"]},{"file":"/packages/api-page-builder/package.json","types":["devDependencies"]},{"file":"/packages/app/package.json","types":["dependencies"]},{"file":"/packages/app-file-manager/package.json","types":["dependencies"]}]}]},{"name":"class-variance-authority","versions":[{"version":"0.7.0","files":[{"file":"/packages/admin-ui/package.json","types":["dependencies"]}]}]},{"name":"clsx","versions":[{"version":"2.1.1","files":[{"file":"/packages/admin-ui/package.json","types":["dependencies"]}]}]},{"name":"cmdk","versions":[{"version":"1.0.4","files":[{"file":"/packages/admin-ui/package.json","types":["dependencies"]}]}]},{"name":"mobx","versions":[{"version":"6.9.0","files":[{"file":"/packages/admin-ui/package.json","types":["dependencies"]},{"file":"/packages/app-aco/package.json","types":["dependencies"]},{"file":"/packages/app-admin/package.json","types":["dependencies"]},{"file":"/packages/app-dynamic-pages/package.json","types":["dependencies"]},{"file":"/packages/app-file-manager/package.json","types":["dependencies"]},{"file":"/packages/app-headless-cms/package.json","types":["dependencies"]},{"file":"/packages/app-page-builder/package.json","types":["dependencies"]},{"file":"/packages/app-trash-bin/package.json","types":["dependencies"]},{"file":"/packages/app-utils/package.json","types":["dependencies"]},{"file":"/packages/form/package.json","types":["devDependencies"]}]}]},{"name":"react-ace","versions":[{"version":"13.0.0","files":[{"file":"/packages/admin-ui/package.json","types":["dependencies"]}]}]},{"name":"react-color","versions":[{"version":"2.19.3","files":[{"file":"/packages/admin-ui/package.json","types":["dependencies"]},{"file":"/packages/app-page-builder/package.json","types":["dependencies"]},{"file":"/packages/lexical-editor-actions/package.json","types":["dependencies"]}]}]},{"name":"react-custom-scrollbars","versions":[{"version":"4.2.1","files":[{"file":"/packages/admin-ui/package.json","types":["dependencies"]},{"file":"/packages/app-file-manager/package.json","types":["dependencies"]},{"file":"/packages/app-headless-cms/package.json","types":["dependencies"]}]}]},{"name":"react-virtualized","versions":[{"version":"9.22.5","files":[{"file":"/packages/admin-ui/package.json","types":["dependencies"]},{"file":"/packages/app-admin/package.json","types":["dependencies"]}]}]},{"name":"sonner","versions":[{"version":"2.0.1","files":[{"file":"/packages/admin-ui/package.json","types":["dependencies"]}]}]},{"name":"tailwind-merge","versions":[{"version":"2.4.0","files":[{"file":"/packages/admin-ui/package.json","types":["dependencies"]}]}]},{"name":"tailwindcss","versions":[{"version":"3.4.6","files":[{"file":"/packages/admin-ui/package.json","types":["dependencies","devDependencies"]},{"file":"/packages/serverless-cms-aws/package.json","types":["dependencies"]}]}]},{"name":"tailwindcss-animate","versions":[{"version":"1.0.7","files":[{"file":"/packages/admin-ui/package.json","types":["dependencies"]}]}]},{"name":"timeago-react","versions":[{"version":"3.0.6","files":[{"file":"/packages/admin-ui/package.json","types":["dependencies"]}]}]},{"name":"@fortawesome/free-solid-svg-icons","versions":[{"version":"6.0.0","files":[{"file":"/packages/admin-ui/package.json","types":["devDependencies"]},{"file":"/packages/app-headless-cms/package.json","types":["dependencies"]},{"file":"/packages/app-page-builder/package.json","types":["dependencies"]}]}]},{"name":"@storybook/addon-a11y","versions":[{"version":"7.6.20","files":[{"file":"/packages/admin-ui/package.json","types":["devDependencies"]}]}]},{"name":"@storybook/addon-essentials","versions":[{"version":"7.6.20","files":[{"file":"/packages/admin-ui/package.json","types":["devDependencies"]}]}]},{"name":"@storybook/react","versions":[{"version":"7.6.20","files":[{"file":"/packages/admin-ui/package.json","types":["devDependencies"]}]}]},{"name":"@storybook/react-webpack5","versions":[{"version":"7.6.20","files":[{"file":"/packages/admin-ui/package.json","types":["devDependencies"]}]}]},{"name":"@storybook/theming","versions":[{"version":"7.6.20","files":[{"file":"/packages/admin-ui/package.json","types":["devDependencies"]}]}]},{"name":"@svgr/webpack","versions":[{"version":"6.1.1","files":[{"file":"/packages/admin-ui/package.json","types":["devDependencies"]},{"file":"/packages/app-admin/package.json","types":["dependencies"]},{"file":"/packages/app-file-manager/package.json","types":["devDependencies"]},{"file":"/packages/app-form-builder/package.json","types":["dependencies"]},{"file":"/packages/app-headless-cms/package.json","types":["dependencies"]},{"file":"/packages/app-page-builder/package.json","types":["dependencies"]},{"file":"/packages/project-utils/package.json","types":["dependencies"]},{"file":"/packages/ui/package.json","types":["dependencies"]}]}]},{"name":"@types/react-color","versions":[{"version":"2.17.11","files":[{"file":"/packages/admin-ui/package.json","types":["devDependencies"]},{"file":"/packages/lexical-editor-actions/package.json","types":["devDependencies"]}]}]},{"name":"@types/react-custom-scrollbars","versions":[{"version":"4.0.10","files":[{"file":"/packages/admin-ui/package.json","types":["devDependencies"]}]}]},{"name":"@types/react-virtualized","versions":[{"version":"9.22.0","files":[{"file":"/packages/admin-ui/package.json","types":["devDependencies"]}]}]},{"name":"css-loader","versions":[{"version":"6.10.0","files":[{"file":"/packages/admin-ui/package.json","types":["devDependencies"]},{"file":"/packages/project-utils/package.json","types":["dependencies"]}]}]},{"name":"file-loader","versions":[{"version":"6.2.0","files":[{"file":"/packages/admin-ui/package.json","types":["devDependencies"]},{"file":"/packages/project-utils/package.json","types":["dependencies"]}]}]},{"name":"postcss-loader","versions":[{"version":"6.2.1","files":[{"file":"/packages/admin-ui/package.json","types":["devDependencies"]},{"file":"/packages/project-utils/package.json","types":["dependencies"]}]}]},{"name":"rimraf","versions":[{"version":"6.0.1","files":[{"file":"/packages/admin-ui/package.json","types":["devDependencies"]},{"file":"/packages/api/package.json","types":["devDependencies"]},{"file":"/packages/api-aco/package.json","types":["devDependencies"]},{"file":"/packages/api-admin-settings/package.json","types":["devDependencies"]},{"file":"/packages/api-admin-users/package.json","types":["devDependencies"]},{"file":"/packages/api-admin-users-so-ddb/package.json","types":["devDependencies"]},{"file":"/packages/api-apw/package.json","types":["devDependencies"]},{"file":"/packages/api-apw-scheduler-so-ddb/package.json","types":["devDependencies"]},{"file":"/packages/api-authentication/package.json","types":["devDependencies"]},{"file":"/packages/api-authentication-cognito/package.json","types":["devDependencies"]},{"file":"/packages/api-background-tasks-ddb/package.json","types":["devDependencies"]},{"file":"/packages/api-background-tasks-es/package.json","types":["devDependencies"]},{"file":"/packages/api-background-tasks-os/package.json","types":["devDependencies"]},{"file":"/packages/api-cognito-authenticator/package.json","types":["devDependencies"]},{"file":"/packages/api-elasticsearch/package.json","types":["devDependencies"]},{"file":"/packages/api-elasticsearch-tasks/package.json","types":["devDependencies"]},{"file":"/packages/api-file-manager/package.json","types":["devDependencies"]},{"file":"/packages/api-file-manager-ddb/package.json","types":["devDependencies"]},{"file":"/packages/api-file-manager-s3/package.json","types":["devDependencies"]},{"file":"/packages/api-form-builder/package.json","types":["devDependencies"]},{"file":"/packages/api-form-builder-so-ddb/package.json","types":["devDependencies"]},{"file":"/packages/api-form-builder-so-ddb-es/package.json","types":["devDependencies"]},{"file":"/packages/api-headless-cms/package.json","types":["devDependencies"]},{"file":"/packages/api-headless-cms-ddb-es/package.json","types":["devDependencies"]},{"file":"/packages/api-i18n/package.json","types":["devDependencies"]},{"file":"/packages/api-i18n-content/package.json","types":["devDependencies"]},{"file":"/packages/api-i18n-ddb/package.json","types":["devDependencies"]},{"file":"/packages/api-log/package.json","types":["devDependencies"]},{"file":"/packages/api-mailer/package.json","types":["devDependencies"]},{"file":"/packages/api-page-builder/package.json","types":["devDependencies"]},{"file":"/packages/api-page-builder-import-export/package.json","types":["devDependencies"]},{"file":"/packages/api-page-builder-import-export-so-ddb/package.json","types":["devDependencies"]},{"file":"/packages/api-page-builder-so-ddb/package.json","types":["devDependencies"]},{"file":"/packages/api-page-builder-so-ddb-es/package.json","types":["devDependencies"]},{"file":"/packages/api-prerendering-service/package.json","types":["devDependencies"]},{"file":"/packages/api-prerendering-service-aws/package.json","types":["devDependencies"]},{"file":"/packages/api-prerendering-service-so-ddb/package.json","types":["devDependencies"]},{"file":"/packages/api-record-locking/package.json","types":["devDependencies"]},{"file":"/packages/api-security/package.json","types":["devDependencies"]},{"file":"/packages/api-security-auth0/package.json","types":["devDependencies"]},{"file":"/packages/api-security-cognito/package.json","types":["devDependencies"]},{"file":"/packages/api-security-okta/package.json","types":["devDependencies"]},{"file":"/packages/api-security-so-ddb/package.json","types":["devDependencies"]},{"file":"/packages/api-serverless-cms/package.json","types":["devDependencies"]},{"file":"/packages/api-tenancy/package.json","types":["devDependencies"]},{"file":"/packages/api-tenancy-so-ddb/package.json","types":["devDependencies"]},{"file":"/packages/api-tenant-manager/package.json","types":["devDependencies"]},{"file":"/packages/api-theme-manager/package.json","types":["devDependencies"]},{"file":"/packages/api-wcp/package.json","types":["devDependencies"]},{"file":"/packages/api-websockets/package.json","types":["devDependencies"]},{"file":"/packages/app/package.json","types":["devDependencies"]},{"file":"/packages/app-aco/package.json","types":["devDependencies"]},{"file":"/packages/app-admin/package.json","types":["devDependencies"]},{"file":"/packages/app-admin-auth0/package.json","types":["devDependencies"]},{"file":"/packages/app-admin-cognito/package.json","types":["devDependencies"]},{"file":"/packages/app-admin-okta/package.json","types":["devDependencies"]},{"file":"/packages/app-admin-ui/package.json","types":["devDependencies"]},{"file":"/packages/app-admin-users-cognito/package.json","types":["devDependencies"]},{"file":"/packages/app-apw/package.json","types":["devDependencies"]},{"file":"/packages/app-audit-logs/package.json","types":["devDependencies"]},{"file":"/packages/app-cognito-authenticator/package.json","types":["devDependencies"]},{"file":"/packages/app-dynamic-pages/package.json","types":["devDependencies"]},{"file":"/packages/app-file-manager/package.json","types":["devDependencies"]},{"file":"/packages/app-file-manager-s3/package.json","types":["devDependencies"]},{"file":"/packages/app-form-builder/package.json","types":["devDependencies"]},{"file":"/packages/app-graphql-playground/package.json","types":["devDependencies"]},{"file":"/packages/app-headless-cms/package.json","types":["devDependencies"]},{"file":"/packages/app-headless-cms-common/package.json","types":["devDependencies"]},{"file":"/packages/app-i18n/package.json","types":["devDependencies"]},{"file":"/packages/app-i18n-content/package.json","types":["devDependencies"]},{"file":"/packages/app-mailer/package.json","types":["devDependencies"]},{"file":"/packages/app-page-builder/package.json","types":["devDependencies"]},{"file":"/packages/app-page-builder-elements/package.json","types":["devDependencies"]},{"file":"/packages/app-plugin-admin-welcome-screen/package.json","types":["devDependencies"]},{"file":"/packages/app-record-locking/package.json","types":["devDependencies"]},{"file":"/packages/app-security/package.json","types":["devDependencies"]},{"file":"/packages/app-security-access-management/package.json","types":["devDependencies"]},{"file":"/packages/app-serverless-cms/package.json","types":["devDependencies"]},{"file":"/packages/app-tenancy/package.json","types":["devDependencies"]},{"file":"/packages/app-tenant-manager/package.json","types":["devDependencies"]},{"file":"/packages/app-theme/package.json","types":["devDependencies"]},{"file":"/packages/app-theme-manager/package.json","types":["devDependencies"]},{"file":"/packages/app-trash-bin/package.json","types":["devDependencies"]},{"file":"/packages/app-wcp/package.json","types":["devDependencies"]},{"file":"/packages/app-website/package.json","types":["devDependencies"]},{"file":"/packages/app-websockets/package.json","types":["devDependencies"]},{"file":"/packages/aws-sdk/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-dependencies/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-deploy-pulumi/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-extensions/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-scaffold/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-scaffold-admin-app-module/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-scaffold-ci/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-scaffold-extensions/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-scaffold-graphql-service/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-scaffold-react-component/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-scaffold-react-component/template/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-scaffold-workspaces/package.json","types":["devDependencies"]},{"file":"/packages/create-webiny-project/package.json","types":["dependencies"]},{"file":"/packages/data-migration/package.json","types":["devDependencies"]},{"file":"/packages/db/package.json","types":["devDependencies"]},{"file":"/packages/db-dynamodb/package.json","types":["devDependencies"]},{"file":"/packages/error/package.json","types":["devDependencies"]},{"file":"/packages/feature-flags/package.json","types":["devDependencies"]},{"file":"/packages/form/package.json","types":["devDependencies"]},{"file":"/packages/handler/package.json","types":["devDependencies"]},{"file":"/packages/handler-aws/package.json","types":["devDependencies"]},{"file":"/packages/handler-client/package.json","types":["devDependencies"]},{"file":"/packages/handler-db/package.json","types":["devDependencies"]},{"file":"/packages/handler-graphql/package.json","types":["devDependencies"]},{"file":"/packages/i18n/package.json","types":["devDependencies"]},{"file":"/packages/i18n-react/package.json","types":["devDependencies"]},{"file":"/packages/icons/package.json","types":["devDependencies"]},{"file":"/packages/logger/package.json","types":["devDependencies"]},{"file":"/packages/plugins/package.json","types":["devDependencies"]},{"file":"/packages/project-utils/package.json","types":["dependencies"]},{"file":"/packages/pubsub/package.json","types":["devDependencies"]},{"file":"/packages/pulumi/package.json","types":["devDependencies"]},{"file":"/packages/pulumi-aws/package.json","types":["devDependencies"]},{"file":"/packages/pulumi-sdk/package.json","types":["devDependencies"]},{"file":"/packages/react-rich-text-renderer/package.json","types":["devDependencies"]},{"file":"/packages/react-router/package.json","types":["devDependencies"]},{"file":"/packages/tasks/package.json","types":["devDependencies"]},{"file":"/packages/theme/package.json","types":["devDependencies"]},{"file":"/packages/ui/package.json","types":["devDependencies"]},{"file":"/packages/ui-composer/package.json","types":["devDependencies"]},{"file":"/packages/utils/package.json","types":["devDependencies"]},{"file":"/packages/validation/package.json","types":["devDependencies"]},{"file":"/packages/wcp/package.json","types":["devDependencies"]}]}]},{"name":"sass","versions":[{"version":"1.44.0","files":[{"file":"/packages/admin-ui/package.json","types":["devDependencies"]},{"file":"/packages/project-utils/package.json","types":["dependencies"]}]}]},{"name":"storybook","versions":[{"version":"7.6.20","files":[{"file":"/packages/admin-ui/package.json","types":["devDependencies"]}]}]},{"name":"apollo-graphql","versions":[{"version":"0.9.5","files":[{"file":"/packages/api-admin-settings/package.json","types":["devDependencies"]},{"file":"/packages/api-headless-cms/package.json","types":["devDependencies"]}]}]},{"name":"jest-dynalite","versions":[{"version":"3.6.1","files":[{"file":"/packages/api-admin-settings/package.json","types":["devDependencies"]},{"file":"/packages/api-admin-users-so-ddb/package.json","types":["devDependencies"]},{"file":"/packages/api-apw-scheduler-so-ddb/package.json","types":["devDependencies"]},{"file":"/packages/api-authentication/package.json","types":["devDependencies"]},{"file":"/packages/api-file-manager-ddb/package.json","types":["devDependencies"]},{"file":"/packages/api-form-builder/package.json","types":["devDependencies"]},{"file":"/packages/api-form-builder-so-ddb/package.json","types":["devDependencies"]},{"file":"/packages/api-form-builder-so-ddb-es/package.json","types":["devDependencies"]},{"file":"/packages/api-headless-cms-ddb/package.json","types":["devDependencies"]},{"file":"/packages/api-headless-cms-ddb-es/package.json","types":["devDependencies"]},{"file":"/packages/api-i18n-ddb/package.json","types":["devDependencies"]},{"file":"/packages/api-log/package.json","types":["devDependencies"]},{"file":"/packages/api-mailer/package.json","types":["devDependencies"]},{"file":"/packages/api-page-builder-import-export/package.json","types":["devDependencies"]},{"file":"/packages/api-page-builder-import-export-so-ddb/package.json","types":["devDependencies"]},{"file":"/packages/api-page-builder-so-ddb/package.json","types":["devDependencies"]},{"file":"/packages/api-page-builder-so-ddb-es/package.json","types":["devDependencies"]},{"file":"/packages/api-prerendering-service-so-ddb/package.json","types":["devDependencies"]},{"file":"/packages/api-security-so-ddb/package.json","types":["devDependencies"]},{"file":"/packages/api-tenancy/package.json","types":["devDependencies"]},{"file":"/packages/api-tenancy-so-ddb/package.json","types":["devDependencies"]},{"file":"/packages/api-tenant-manager/package.json","types":["devDependencies"]},{"file":"/packages/api-wcp/package.json","types":["devDependencies"]},{"file":"/packages/data-migration/package.json","types":["devDependencies"]},{"file":"/packages/db-dynamodb/package.json","types":["devDependencies"]},{"file":"/packages/migrations/package.json","types":["devDependencies"]},{"file":"/packages/project-utils/package.json","types":["devDependencies"]}]}]},{"name":"dataloader","versions":[{"version":"2.2.2","files":[{"file":"/packages/api-admin-users/package.json","types":["dependencies"]},{"file":"/packages/api-headless-cms-ddb/package.json","types":["dependencies"]},{"file":"/packages/api-headless-cms-ddb-es/package.json","types":["dependencies"]},{"file":"/packages/api-page-builder/package.json","types":["dependencies"]},{"file":"/packages/api-page-builder-so-ddb/package.json","types":["dependencies"]},{"file":"/packages/api-page-builder-so-ddb-es/package.json","types":["dependencies"]},{"file":"/packages/api-tenancy/package.json","types":["dependencies"]}]}]},{"name":"md5","versions":[{"version":"2.3.0","files":[{"file":"/packages/api-admin-users/package.json","types":["dependencies"]},{"file":"/packages/api-security-cognito/package.json","types":["devDependencies"]}]}]},{"name":"zod","versions":[{"version":"3.23.8","files":[{"file":"/packages/api-admin-users/package.json","types":["dependencies"]},{"file":"/packages/api-apw/package.json","types":["dependencies"]},{"file":"/packages/api-file-manager/package.json","types":["dependencies"]},{"file":"/packages/api-form-builder/package.json","types":["dependencies"]},{"file":"/packages/api-headless-cms/package.json","types":["dependencies"]},{"file":"/packages/api-headless-cms-import-export/package.json","types":["dependencies"]},{"file":"/packages/api-headless-cms-tasks/package.json","types":["dependencies"]},{"file":"/packages/api-log/package.json","types":["dependencies"]},{"file":"/packages/api-mailer/package.json","types":["dependencies"]},{"file":"/packages/api-page-builder/package.json","types":["dependencies"]},{"file":"/packages/api-page-builder-import-export/package.json","types":["dependencies"]},{"file":"/packages/api-security/package.json","types":["dependencies"]},{"file":"/packages/api-websockets/package.json","types":["dependencies"]},{"file":"/packages/app-aco/package.json","types":["dependencies"]},{"file":"/packages/app-file-manager/package.json","types":["dependencies"]},{"file":"/packages/ioc/package.json","types":["devDependencies"]},{"file":"/packages/pulumi-aws/package.json","types":["dependencies"]},{"file":"/packages/tasks/package.json","types":["dependencies"]},{"file":"/packages/utils/package.json","types":["peerDependencies"]}]}]},{"name":"@types/jsonwebtoken","versions":[{"version":"9.0.2","files":[{"file":"/packages/api-admin-users/package.json","types":["devDependencies"]},{"file":"/packages/api-cognito-authenticator/package.json","types":["devDependencies"]},{"file":"/packages/api-security/package.json","types":["devDependencies"]},{"file":"/packages/api-security-auth0/package.json","types":["devDependencies"]},{"file":"/packages/api-security-cognito/package.json","types":["devDependencies"]}]}]},{"name":"@types/md5","versions":[{"version":"2.3.2","files":[{"file":"/packages/api-admin-users/package.json","types":["devDependencies"]}]}]},{"name":"dayjs","versions":[{"version":"1.11.13","files":[{"file":"/packages/api-apw/package.json","types":["dependencies"]},{"file":"/packages/app-apw/package.json","types":["dependencies"]},{"file":"/packages/app-file-manager/package.json","types":["dependencies"]}]}]},{"name":"jsonwebtoken","versions":[{"version":"9.0.1","files":[{"file":"/packages/api-cognito-authenticator/package.json","types":["dependencies"]},{"file":"/packages/api-security/package.json","types":["dependencies"]},{"file":"/packages/api-security-auth0/package.json","types":["dependencies"]},{"file":"/packages/api-security-okta/package.json","types":["dependencies"]}]}]},{"name":"jwk-to-pem","versions":[{"version":"2.0.1","files":[{"file":"/packages/api-cognito-authenticator/package.json","types":["dependencies"]},{"file":"/packages/api-security-auth0/package.json","types":["dependencies"]},{"file":"/packages/api-security-okta/package.json","types":["dependencies"]}]}]},{"name":"@types/jwk-to-pem","versions":[{"version":"2.0.1","files":[{"file":"/packages/api-cognito-authenticator/package.json","types":["devDependencies"]},{"file":"/packages/api-security-auth0/package.json","types":["devDependencies"]}]}]},{"name":"@types/node-fetch","versions":[{"version":"2.6.1","files":[{"file":"/packages/api-cognito-authenticator/package.json","types":["devDependencies"]},{"file":"/packages/api-file-manager-s3/package.json","types":["devDependencies"]},{"file":"/packages/api-form-builder/package.json","types":["devDependencies"]},{"file":"/packages/api-page-builder/package.json","types":["devDependencies"]},{"file":"/packages/api-page-builder-import-export/package.json","types":["devDependencies"]},{"file":"/packages/api-security-auth0/package.json","types":["devDependencies"]},{"file":"/packages/api-security-okta/package.json","types":["devDependencies"]}]}]},{"name":"p-retry","versions":[{"version":"4.6.2","files":[{"file":"/packages/api-dynamodb-to-elasticsearch/package.json","types":["dependencies"]},{"file":"/packages/app-file-manager-s3/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-deploy-pulumi/package.json","types":["dependencies"]},{"file":"/packages/create-webiny-project/package.json","types":["dependencies"]},{"file":"/packages/utils/package.json","types":["dependencies"]}]}]},{"name":"@elastic/elasticsearch","versions":[{"version":"7.12.0","files":[{"file":"/packages/api-elasticsearch/package.json","types":["dependencies"]},{"file":"/packages/api-form-builder-so-ddb-es/package.json","types":["dependencies"]},{"file":"/packages/api-headless-cms-ddb-es/package.json","types":["devDependencies"]},{"file":"/packages/api-page-builder-so-ddb-es/package.json","types":["devDependencies"]},{"file":"/packages/data-migration/package.json","types":["dependencies"]},{"file":"/packages/migrations/package.json","types":["dependencies"]},{"file":"/packages/project-utils/package.json","types":["devDependencies"]}]}]},{"name":"elastic-ts","versions":[{"version":"0.12.0","files":[{"file":"/packages/api-elasticsearch/package.json","types":["dependencies"]},{"file":"/packages/api-form-builder-so-ddb-es/package.json","types":["dependencies"]},{"file":"/packages/api-page-builder-so-ddb-es/package.json","types":["dependencies"]},{"file":"/packages/migrations/package.json","types":["devDependencies"]}]}]},{"name":"cache-control-parser","versions":[{"version":"2.0.6","files":[{"file":"/packages/api-file-manager/package.json","types":["dependencies"]}]}]},{"name":"object-hash","versions":[{"version":"3.0.0","files":[{"file":"/packages/api-file-manager/package.json","types":["dependencies"]},{"file":"/packages/api-file-manager-s3/package.json","types":["dependencies"]},{"file":"/packages/api-prerendering-service/package.json","types":["dependencies"]}]}]},{"name":"ttypescript","versions":[{"version":"1.5.15","files":[{"file":"/packages/api-file-manager-aco/package.json","types":["devDependencies"]}]}]},{"name":"jsonpack","versions":[{"version":"1.1.5","files":[{"file":"/packages/api-file-manager-ddb/package.json","types":["devDependencies"]},{"file":"/packages/api-page-builder/package.json","types":["dependencies"]},{"file":"/packages/utils/package.json","types":["dependencies"]}]}]},{"name":"form-data","versions":[{"version":"4.0.0","files":[{"file":"/packages/api-file-manager-s3/package.json","types":["dependencies"]},{"file":"/packages/pulumi-aws/package.json","types":["dependencies"]}]}]},{"name":"mime","versions":[{"version":"3.0.0","files":[{"file":"/packages/api-file-manager-s3/package.json","types":["dependencies"]},{"file":"/packages/app-file-manager/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-deploy-pulumi/package.json","types":["dependencies"]},{"file":"/packages/pulumi-aws/package.json","types":["devDependencies"]}]}]},{"name":"p-map","versions":[{"version":"4.0.0","files":[{"file":"/packages/api-file-manager-s3/package.json","types":["dependencies"]},{"file":"/packages/api-headless-cms/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-workspaces/package.json","types":["dependencies"]}]}]},{"name":"p-reduce","versions":[{"version":"2.1.0","files":[{"file":"/packages/api-file-manager-s3/package.json","types":["dependencies"]},{"file":"/packages/api-headless-cms/package.json","types":["dependencies"]}]}]},{"name":"sanitize-filename","versions":[{"version":"1.6.3","files":[{"file":"/packages/api-file-manager-s3/package.json","types":["dependencies"]}]}]},{"name":"sharp","versions":[{"version":"0.32.6","files":[{"file":"/packages/api-file-manager-s3/package.json","types":["dependencies"]}]}]},{"name":"date-fns","versions":[{"version":"2.22.1","files":[{"file":"/packages/api-form-builder/package.json","types":["dependencies"]},{"file":"/packages/app-audit-logs/package.json","types":["dependencies"]},{"file":"/packages/db-dynamodb/package.json","types":["dependencies"]}]}]},{"name":"json2csv","versions":[{"version":"4.5.4","files":[{"file":"/packages/api-form-builder/package.json","types":["dependencies"]},{"file":"/packages/app-form-builder/package.json","types":["dependencies"]}]}]},{"name":"slugify","versions":[{"version":"1.6.6","files":[{"file":"/packages/api-form-builder/package.json","types":["dependencies"]},{"file":"/packages/api-headless-cms/package.json","types":["dependencies"]},{"file":"/packages/app-aco/package.json","types":["dependencies"]},{"file":"/packages/app-dynamic-pages/package.json","types":["dependencies"]},{"file":"/packages/app-page-builder/package.json","types":["dependencies"]}]}]},{"name":"@types/json2csv","versions":[{"version":"4.5.1","files":[{"file":"/packages/api-form-builder/package.json","types":["devDependencies"]},{"file":"/packages/app-form-builder/package.json","types":["devDependencies"]}]}]},{"name":"csvtojson","versions":[{"version":"2.0.10","files":[{"file":"/packages/api-form-builder/package.json","types":["devDependencies"]},{"file":"/packages/api-form-builder-so-ddb/package.json","types":["devDependencies"]},{"file":"/packages/api-form-builder-so-ddb-es/package.json","types":["devDependencies"]}]}]},{"name":"@graphql-tools/merge","versions":[{"version":"9.0.4","files":[{"file":"/packages/api-headless-cms/package.json","types":["dependencies"]},{"file":"/packages/handler-graphql/package.json","types":["dependencies"]}]}]},{"name":"@graphql-tools/schema","versions":[{"version":"10.0.6","files":[{"file":"/packages/api-headless-cms/package.json","types":["dependencies"]},{"file":"/packages/handler-graphql/package.json","types":["dependencies"]}]}]},{"name":"dot-prop","versions":[{"version":"6.0.1","files":[{"file":"/packages/api-headless-cms/package.json","types":["dependencies"]},{"file":"/packages/api-headless-cms-ddb/package.json","types":["dependencies"]},{"file":"/packages/db-dynamodb/package.json","types":["dependencies"]}]}]},{"name":"graphql-tag","versions":[{"version":"2.12.6","files":[{"file":"/packages/api-headless-cms/package.json","types":["dependencies"]},{"file":"/packages/app-aco/package.json","types":["dependencies"]},{"file":"/packages/app-admin/package.json","types":["dependencies"]},{"file":"/packages/app-admin-auth0/package.json","types":["dependencies"]},{"file":"/packages/app-admin-okta/package.json","types":["dependencies"]},{"file":"/packages/app-admin-users-cognito/package.json","types":["dependencies"]},{"file":"/packages/app-apw/package.json","types":["dependencies"]},{"file":"/packages/app-audit-logs/package.json","types":["dependencies"]},{"file":"/packages/app-file-manager/package.json","types":["dependencies"]},{"file":"/packages/app-file-manager-s3/package.json","types":["dependencies"]},{"file":"/packages/app-form-builder/package.json","types":["dependencies"]},{"file":"/packages/app-headless-cms/package.json","types":["dependencies"]},{"file":"/packages/app-headless-cms-common/package.json","types":["dependencies"]},{"file":"/packages/app-i18n/package.json","types":["dependencies"]},{"file":"/packages/app-mailer/package.json","types":["dependencies"]},{"file":"/packages/app-page-builder/package.json","types":["dependencies"]},{"file":"/packages/app-record-locking/package.json","types":["dependencies"]},{"file":"/packages/app-security-access-management/package.json","types":["dependencies"]},{"file":"/packages/app-tenancy/package.json","types":["dependencies"]},{"file":"/packages/app-tenant-manager/package.json","types":["dependencies"]},{"file":"/packages/app-theme-manager/package.json","types":["dependencies"]},{"file":"/packages/app-wcp/package.json","types":["dependencies"]},{"file":"/packages/app-website/package.json","types":["dependencies"]},{"file":"/packages/handler-graphql/package.json","types":["dependencies"]}]}]},{"name":"jsdom","versions":[{"version":"25.0.1","files":[{"file":"/packages/api-headless-cms/package.json","types":["dependencies"]},{"file":"/packages/lexical-converter/package.json","types":["devDependencies"]}]}]},{"name":"pluralize","versions":[{"version":"8.0.0","files":[{"file":"/packages/api-headless-cms/package.json","types":["dependencies"]},{"file":"/packages/api-prerendering-service/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-scaffold-admin-app-module/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-scaffold-graphql-service/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-scaffold-react-component/package.json","types":["dependencies"]}]}]},{"name":"@types/babel__code-frame","versions":[{"version":"7.0.6","files":[{"file":"/packages/api-headless-cms/package.json","types":["devDependencies"]}]}]},{"name":"@types/jsonpack","versions":[{"version":"1.1.6","files":[{"file":"/packages/api-headless-cms-ddb/package.json","types":["devDependencies"]},{"file":"/packages/api-headless-cms-ddb-es/package.json","types":["devDependencies"]}]}]},{"name":"@faker-js/faker","versions":[{"version":"9.3.0","files":[{"file":"/packages/api-headless-cms-es-tasks/package.json","types":["devDependencies"]}]}]},{"name":"@smithy/node-http-handler","versions":[{"version":"2.1.6","files":[{"file":"/packages/api-headless-cms-import-export/package.json","types":["dependencies"]},{"file":"/packages/api-page-builder-import-export/package.json","types":["dependencies"]}]}]},{"name":"archiver","versions":[{"version":"7.0.1","files":[{"file":"/packages/api-headless-cms-import-export/package.json","types":["dependencies"]},{"file":"/packages/api-page-builder/package.json","types":["dependencies"]},{"file":"/packages/api-page-builder-import-export/package.json","types":["dependencies"]}]}]},{"name":"uniqid","versions":[{"version":"5.4.0","files":[{"file":"/packages/api-headless-cms-import-export/package.json","types":["dependencies"]},{"file":"/packages/api-page-builder/package.json","types":["dependencies"]},{"file":"/packages/api-page-builder-import-export/package.json","types":["dependencies"]},{"file":"/packages/app-page-builder/package.json","types":["dependencies"]},{"file":"/packages/cli/package.json","types":["dependencies"]},{"file":"/packages/plugins/package.json","types":["dependencies"]},{"file":"/cypress-tests/package.json","types":["devDependencies"]}]}]},{"name":"unzipper","versions":[{"version":"0.12.3","files":[{"file":"/packages/api-headless-cms-import-export/package.json","types":["dependencies"]}]}]},{"name":"@types/adm-zip","versions":[{"version":"0.5.5","files":[{"file":"/packages/api-headless-cms-import-export/package.json","types":["devDependencies"]}]}]},{"name":"@types/unzipper","versions":[{"version":"0.10.10","files":[{"file":"/packages/api-headless-cms-import-export/package.json","types":["devDependencies"]}]}]},{"name":"adm-zip","versions":[{"version":"0.5.14","files":[{"file":"/packages/api-headless-cms-import-export/package.json","types":["devDependencies"]}]}]},{"name":"aws-sdk-client-mock","versions":[{"version":"4.1.0","files":[{"file":"/packages/api-headless-cms-import-export/package.json","types":["devDependencies"]}]}]},{"name":"accept-language-parser","versions":[{"version":"1.5.0","files":[{"file":"/packages/api-i18n/package.json","types":["dependencies"]}]}]},{"name":"i18n-locales","versions":[{"version":"0.0.5","files":[{"file":"/packages/api-i18n/package.json","types":["dependencies"]}]}]},{"name":"@types/accept-language-parser","versions":[{"version":"1.5.3","files":[{"file":"/packages/api-i18n/package.json","types":["devDependencies"]}]}]},{"name":"crypto-js","versions":[{"version":"4.2.0","files":[{"file":"/packages/api-mailer/package.json","types":["dependencies"]}]}]},{"name":"nodemailer","versions":[{"version":"6.9.16","files":[{"file":"/packages/api-mailer/package.json","types":["dependencies"]}]}]},{"name":"@types/crypto-js","versions":[{"version":"4.2.2","files":[{"file":"/packages/api-mailer/package.json","types":["devDependencies"]}]}]},{"name":"@types/nodemailer","versions":[{"version":"6.4.17","files":[{"file":"/packages/api-mailer/package.json","types":["devDependencies"]}]}]},{"name":"extract-zip","versions":[{"version":"1.6.7","files":[{"file":"/packages/api-page-builder/package.json","types":["dependencies"]}]}]},{"name":"stream","versions":[{"version":"0.0.3","files":[{"file":"/packages/api-page-builder/package.json","types":["dependencies"]},{"file":"/packages/api-page-builder-import-export/package.json","types":["dependencies"]}]}]},{"name":"@types/extract-zip","versions":[{"version":"1.6.2","files":[{"file":"/packages/api-page-builder/package.json","types":["devDependencies"]}]}]},{"name":"@types/rimraf","versions":[{"version":"3.0.2","files":[{"file":"/packages/api-page-builder/package.json","types":["devDependencies"]}]}]},{"name":"dot-prop-immutable","versions":[{"version":"2.1.1","files":[{"file":"/packages/api-page-builder-import-export/package.json","types":["dependencies"]},{"file":"/packages/app-aco/package.json","types":["dependencies"]},{"file":"/packages/app-admin/package.json","types":["dependencies"]},{"file":"/packages/app-apw/package.json","types":["dependencies"]},{"file":"/packages/app-file-manager/package.json","types":["dependencies"]},{"file":"/packages/app-form-builder/package.json","types":["dependencies"]},{"file":"/packages/app-headless-cms/package.json","types":["dependencies"]},{"file":"/packages/app-mailer/package.json","types":["dependencies"]},{"file":"/packages/app-page-builder/package.json","types":["dependencies"]}]}]},{"name":"yauzl","versions":[{"version":"2.10.0","files":[{"file":"/packages/api-page-builder-import-export/package.json","types":["dependencies"]}]}]},{"name":"@types/archiver","versions":[{"version":"5.3.1","files":[{"file":"/packages/api-page-builder-import-export/package.json","types":["devDependencies"]}]}]},{"name":"@types/yauzl","versions":[{"version":"2.9.2","files":[{"file":"/packages/api-page-builder-import-export/package.json","types":["devDependencies"]}]}]},{"name":"@sparticuz/chromium","versions":[{"version":"131.0.1","files":[{"file":"/packages/api-prerendering-service/package.json","types":["dependencies"]}]}]},{"name":"posthtml","versions":[{"version":"0.15.0","files":[{"file":"/packages/api-prerendering-service/package.json","types":["dependencies"]}]}]},{"name":"posthtml-noopener","versions":[{"version":"1.0.5","files":[{"file":"/packages/api-prerendering-service/package.json","types":["dependencies"]}]}]},{"name":"posthtml-plugin-link-preload","versions":[{"version":"1.0.0","files":[{"file":"/packages/api-prerendering-service/package.json","types":["dependencies"]}]}]},{"name":"puppeteer-core","versions":[{"version":"23.11.1","files":[{"file":"/packages/api-prerendering-service/package.json","types":["dependencies"]}]}]},{"name":"srcset","versions":[{"version":"4.0.0","files":[{"file":"/packages/api-prerendering-service/package.json","types":["dependencies"]},{"file":"/packages/aws-helpers/package.json","types":["dependencies"]}]}]},{"name":"@types/object-hash","versions":[{"version":"2.2.1","files":[{"file":"/packages/api-prerendering-service/package.json","types":["devDependencies"]}]}]},{"name":"deep-equal","versions":[{"version":"2.2.3","files":[{"file":"/packages/api-security/package.json","types":["dependencies"]},{"file":"/packages/api-security-cognito/package.json","types":["dependencies"]},{"file":"/packages/tasks/package.json","types":["dependencies"]}]}]},{"name":"@apollo/react-hooks","versions":[{"version":"3.1.5","files":[{"file":"/packages/app/package.json","types":["dependencies"]},{"file":"/packages/app-aco/package.json","types":["dependencies"]},{"file":"/packages/app-admin/package.json","types":["dependencies"]},{"file":"/packages/app-admin-auth0/package.json","types":["dependencies"]},{"file":"/packages/app-admin-cognito/package.json","types":["dependencies"]},{"file":"/packages/app-admin-okta/package.json","types":["dependencies"]},{"file":"/packages/app-admin-users-cognito/package.json","types":["dependencies"]},{"file":"/packages/app-apw/package.json","types":["dependencies"]},{"file":"/packages/app-audit-logs/package.json","types":["dependencies"]},{"file":"/packages/app-file-manager/package.json","types":["dependencies"]},{"file":"/packages/app-form-builder/package.json","types":["dependencies"]},{"file":"/packages/app-headless-cms/package.json","types":["dependencies"]},{"file":"/packages/app-i18n/package.json","types":["dependencies"]},{"file":"/packages/app-page-builder/package.json","types":["dependencies"]},{"file":"/packages/app-record-locking/package.json","types":["dependencies"]},{"file":"/packages/app-security-access-management/package.json","types":["dependencies"]},{"file":"/packages/app-tenancy/package.json","types":["dependencies"]},{"file":"/packages/app-tenant-manager/package.json","types":["dependencies"]},{"file":"/packages/app-theme-manager/package.json","types":["dependencies"]},{"file":"/packages/app-wcp/package.json","types":["dependencies"]},{"file":"/packages/app-website/package.json","types":["dependencies"]},{"file":"/packages/cwp-template-aws/template/common/extensions/theme/package.json","types":["dependencies"]},{"file":"/extensions/theme/package.json","types":["dependencies"]}]}]},{"name":"@emotion/styled","versions":[{"version":"11.10.6","files":[{"file":"/packages/app/package.json","types":["dependencies"]},{"file":"/packages/app-admin/package.json","types":["dependencies"]},{"file":"/packages/app-admin-auth0/package.json","types":["dependencies"]},{"file":"/packages/app-admin-okta/package.json","types":["dependencies"]},{"file":"/packages/app-admin-users-cognito/package.json","types":["dependencies"]},{"file":"/packages/app-apw/package.json","types":["dependencies"]},{"file":"/packages/app-audit-logs/package.json","types":["dependencies"]},{"file":"/packages/app-dynamic-pages/package.json","types":["dependencies"]},{"file":"/packages/app-form-builder/package.json","types":["dependencies"]},{"file":"/packages/app-graphql-playground/package.json","types":["dependencies"]},{"file":"/packages/app-headless-cms/package.json","types":["dependencies"]},{"file":"/packages/app-headless-cms-common/package.json","types":["dependencies"]},{"file":"/packages/app-page-builder/package.json","types":["dependencies"]},{"file":"/packages/app-page-builder-elements/package.json","types":["dependencies"]},{"file":"/packages/app-security-access-management/package.json","types":["dependencies"]},{"file":"/packages/app-tenancy/package.json","types":["dependencies"]},{"file":"/packages/app-theme-manager/package.json","types":["dependencies"]},{"file":"/packages/app-website/package.json","types":["dependencies"]},{"file":"/packages/cwp-template-aws/template/common/extensions/theme/package.json","types":["dependencies"]},{"file":"/packages/lexical-editor-actions/package.json","types":["dependencies"]},{"file":"/packages/lexical-editor-pb-element/package.json","types":["dependencies"]},{"file":"/extensions/theme/package.json","types":["dependencies"]}]}]},{"name":"apollo-cache","versions":[{"version":"1.3.5","files":[{"file":"/packages/app/package.json","types":["dependencies"]},{"file":"/packages/app-admin/package.json","types":["dependencies"]},{"file":"/packages/app-apw/package.json","types":["dependencies"]},{"file":"/packages/app-file-manager/package.json","types":["dependencies"]},{"file":"/packages/app-form-builder/package.json","types":["dependencies"]},{"file":"/packages/app-graphql-playground/package.json","types":["dependencies"]},{"file":"/packages/app-headless-cms/package.json","types":["dependencies"]},{"file":"/packages/app-i18n/package.json","types":["dependencies"]},{"file":"/packages/app-mailer/package.json","types":["dependencies"]},{"file":"/packages/app-page-builder/package.json","types":["dependencies"]},{"file":"/packages/app-serverless-cms/package.json","types":["dependencies"]},{"file":"/packages/app-tenant-manager/package.json","types":["dependencies"]},{"file":"/packages/app-theme-manager/package.json","types":["dependencies"]},{"file":"/packages/app-wcp/package.json","types":["dependencies"]}]}]},{"name":"apollo-cache-inmemory","versions":[{"version":"1.6.6","files":[{"file":"/packages/app/package.json","types":["dependencies"]}]}]},{"name":"apollo-client","versions":[{"version":"2.6.10","files":[{"file":"/packages/app/package.json","types":["dependencies"]},{"file":"/packages/app-aco/package.json","types":["devDependencies"]},{"file":"/packages/app-admin/package.json","types":["dependencies"]},{"file":"/packages/app-admin-auth0/package.json","types":["dependencies"]},{"file":"/packages/app-admin-cognito/package.json","types":["dependencies"]},{"file":"/packages/app-admin-okta/package.json","types":["dependencies"]},{"file":"/packages/app-admin-users-cognito/package.json","types":["dependencies"]},{"file":"/packages/app-apw/package.json","types":["dependencies"]},{"file":"/packages/app-dynamic-pages/package.json","types":["dependencies"]},{"file":"/packages/app-file-manager/package.json","types":["dependencies"]},{"file":"/packages/app-form-builder/package.json","types":["dependencies"]},{"file":"/packages/app-graphql-playground/package.json","types":["dependencies"]},{"file":"/packages/app-headless-cms/package.json","types":["dependencies"]},{"file":"/packages/app-i18n/package.json","types":["dependencies"]},{"file":"/packages/app-mailer/package.json","types":["dependencies"]},{"file":"/packages/app-page-builder/package.json","types":["dependencies"]},{"file":"/packages/app-record-locking/package.json","types":["dependencies"]},{"file":"/packages/app-serverless-cms/package.json","types":["dependencies"]},{"file":"/packages/app-tenancy/package.json","types":["dependencies"]},{"file":"/packages/app-tenant-manager/package.json","types":["dependencies"]},{"file":"/packages/app-theme-manager/package.json","types":["dependencies"]},{"file":"/packages/app-trash-bin/package.json","types":["devDependencies"]},{"file":"/packages/app-wcp/package.json","types":["dependencies"]},{"file":"/packages/app-website/package.json","types":["dependencies"]},{"file":"/packages/cwp-template-aws/template/common/apps/website/package.json","types":["dependencies"]},{"file":"/packages/react-router/package.json","types":["dependencies"]},{"file":"/apps/website/package.json","types":["dependencies"]}]}]},{"name":"apollo-link","versions":[{"version":"1.2.14","files":[{"file":"/packages/app/package.json","types":["dependencies"]},{"file":"/packages/app-aco/package.json","types":["devDependencies"]},{"file":"/packages/app-admin/package.json","types":["dependencies"]},{"file":"/packages/app-apw/package.json","types":["dependencies"]},{"file":"/packages/app-file-manager/package.json","types":["dependencies"]},{"file":"/packages/app-graphql-playground/package.json","types":["dependencies"]},{"file":"/packages/app-headless-cms/package.json","types":["dependencies"]},{"file":"/packages/app-i18n/package.json","types":["dependencies"]},{"file":"/packages/app-mailer/package.json","types":["dependencies"]},{"file":"/packages/app-page-builder/package.json","types":["dependencies"]},{"file":"/packages/app-record-locking/package.json","types":["dependencies"]},{"file":"/packages/app-serverless-cms/package.json","types":["dependencies"]},{"file":"/packages/app-tenant-manager/package.json","types":["dependencies"]},{"file":"/packages/app-theme-manager/package.json","types":["dependencies"]},{"file":"/packages/app-trash-bin/package.json","types":["devDependencies"]},{"file":"/packages/app-wcp/package.json","types":["dependencies"]},{"file":"/packages/app-website/package.json","types":["dependencies"]},{"file":"/packages/cwp-template-aws/template/common/apps/website/package.json","types":["dependencies"]},{"file":"/apps/website/package.json","types":["dependencies"]}]}]},{"name":"apollo-link-context","versions":[{"version":"1.0.20","files":[{"file":"/packages/app/package.json","types":["dependencies"]},{"file":"/packages/app-admin-auth0/package.json","types":["dependencies"]},{"file":"/packages/app-admin-cognito/package.json","types":["dependencies"]},{"file":"/packages/app-admin-okta/package.json","types":["dependencies"]},{"file":"/packages/app-graphql-playground/package.json","types":["dependencies"]},{"file":"/packages/app-i18n/package.json","types":["dependencies"]}]}]},{"name":"apollo-link-error","versions":[{"version":"1.1.13","files":[{"file":"/packages/app/package.json","types":["dependencies"]}]}]},{"name":"apollo-link-http-common","versions":[{"version":"0.2.16","files":[{"file":"/packages/app/package.json","types":["dependencies"]}]}]},{"name":"apollo-utilities","versions":[{"version":"1.3.4","files":[{"file":"/packages/app/package.json","types":["dependencies"]},{"file":"/packages/app-admin/package.json","types":["dependencies"]},{"file":"/packages/app-apw/package.json","types":["dependencies"]},{"file":"/packages/app-file-manager/package.json","types":["dependencies"]},{"file":"/packages/app-form-builder/package.json","types":["dependencies"]},{"file":"/packages/app-graphql-playground/package.json","types":["dependencies"]},{"file":"/packages/app-headless-cms/package.json","types":["dependencies"]},{"file":"/packages/app-i18n/package.json","types":["dependencies"]},{"file":"/packages/app-mailer/package.json","types":["dependencies"]},{"file":"/packages/app-page-builder/package.json","types":["dependencies"]},{"file":"/packages/app-serverless-cms/package.json","types":["dependencies"]},{"file":"/packages/app-tenant-manager/package.json","types":["dependencies"]},{"file":"/packages/app-theme-manager/package.json","types":["dependencies"]},{"file":"/packages/app-wcp/package.json","types":["dependencies"]}]}]},{"name":"boolean","versions":[{"version":"3.2.0","files":[{"file":"/packages/app/package.json","types":["dependencies"]},{"file":"/packages/cli/package.json","types":["dependencies"]},{"file":"/packages/handler-graphql/package.json","types":["dependencies"]}]}]},{"name":"invariant","versions":[{"version":"2.2.4","files":[{"file":"/packages/app/package.json","types":["dependencies"]},{"file":"/packages/app-page-builder/package.json","types":["dependencies"]},{"file":"/packages/cwp-template-aws/template/common/apps/admin/package.json","types":["dependencies"]},{"file":"/packages/serverless-cms-aws/package.json","types":["dependencies"]}]}]},{"name":"ts-invariant","versions":[{"version":"0.10.3","files":[{"file":"/packages/app/package.json","types":["dependencies"]}]}]},{"name":"warning","versions":[{"version":"4.0.2","files":[{"file":"/packages/app/package.json","types":["dependencies"]}]}]},{"name":"@types/lodash","versions":[{"version":"4.17.13","files":[{"file":"/packages/app/package.json","types":["devDependencies"]},{"file":"/packages/app-cognito-authenticator/package.json","types":["devDependencies"]},{"file":"/packages/form/package.json","types":["devDependencies"]},{"file":"/packages/i18n/package.json","types":["devDependencies"]},{"file":"/packages/pulumi/package.json","types":["devDependencies"]},{"file":"/packages/pulumi-sdk/package.json","types":["devDependencies"]},{"file":"/packages/validation/package.json","types":["devDependencies"]}]}]},{"name":"@types/warning","versions":[{"version":"3.0.0","files":[{"file":"/packages/app/package.json","types":["devDependencies"]}]}]},{"name":"@minoru/react-dnd-treeview","versions":[{"version":"3.2.1","files":[{"file":"/packages/app-aco/package.json","types":["dependencies"]}]}]},{"name":"mobx-react-lite","versions":[{"version":"3.4.3","files":[{"file":"/packages/app-aco/package.json","types":["dependencies"]},{"file":"/packages/app-admin/package.json","types":["dependencies"]},{"file":"/packages/app-file-manager/package.json","types":["dependencies"]},{"file":"/packages/app-headless-cms/package.json","types":["dependencies"]},{"file":"/packages/app-page-builder/package.json","types":["dependencies"]},{"file":"/packages/app-trash-bin/package.json","types":["dependencies"]},{"file":"/packages/form/package.json","types":["devDependencies"]}]}]},{"name":"pako","versions":[{"version":"2.1.0","files":[{"file":"/packages/app-aco/package.json","types":["dependencies"]},{"file":"/packages/app-page-builder/package.json","types":["dependencies"]}]}]},{"name":"react-dnd","versions":[{"version":"16.0.1","files":[{"file":"/packages/app-aco/package.json","types":["dependencies"]},{"file":"/packages/app-form-builder/package.json","types":["dependencies"]},{"file":"/packages/app-headless-cms/package.json","types":["dependencies"]},{"file":"/packages/app-page-builder/package.json","types":["dependencies"]}]}]},{"name":"react-hotkeyz","versions":[{"version":"1.0.4","files":[{"file":"/packages/app-aco/package.json","types":["dependencies"]},{"file":"/packages/app-file-manager/package.json","types":["dependencies"]},{"file":"/packages/app-form-builder/package.json","types":["dependencies"]},{"file":"/packages/app-headless-cms/package.json","types":["dependencies"]}]}]},{"name":"store","versions":[{"version":"2.0.12","files":[{"file":"/packages/app-aco/package.json","types":["dependencies"]},{"file":"/packages/app-admin/package.json","types":["dependencies"]},{"file":"/packages/app-page-builder/package.json","types":["dependencies"]},{"file":"/packages/app-tenancy/package.json","types":["dependencies"]}]}]},{"name":"@apollo/react-components","versions":[{"version":"3.1.5","files":[{"file":"/packages/app-admin/package.json","types":["dependencies"]},{"file":"/packages/app-file-manager/package.json","types":["dependencies"]},{"file":"/packages/app-mailer/package.json","types":["dependencies"]},{"file":"/packages/app-page-builder/package.json","types":["dependencies"]}]}]},{"name":"@iconify/json","versions":[{"version":"2.2.142","files":[{"file":"/packages/app-admin/package.json","types":["dependencies"]}]}]},{"name":"@monaco-editor/react","versions":[{"version":"4.7.0","files":[{"file":"/packages/app-admin/package.json","types":["dependencies"]}]}]},{"name":"@types/mime","versions":[{"version":"2.0.3","files":[{"file":"/packages/app-admin/package.json","types":["dependencies"]}]}]},{"name":"classnames","versions":[{"version":"2.5.1","files":[{"file":"/packages/app-admin/package.json","types":["dependencies"]},{"file":"/packages/app-headless-cms/package.json","types":["dependencies"]},{"file":"/packages/app-page-builder/package.json","types":["dependencies"]},{"file":"/packages/react-rich-text-renderer/package.json","types":["dependencies"]},{"file":"/packages/ui/package.json","types":["dependencies"]}]}]},{"name":"emotion","versions":[{"version":"10.0.27","files":[{"file":"/packages/app-admin/package.json","types":["dependencies"]},{"file":"/packages/app-admin-auth0/package.json","types":["dependencies"]},{"file":"/packages/app-admin-okta/package.json","types":["dependencies"]},{"file":"/packages/app-admin-users-cognito/package.json","types":["dependencies"]},{"file":"/packages/app-apw/package.json","types":["dependencies"]},{"file":"/packages/app-audit-logs/package.json","types":["dependencies"]},{"file":"/packages/app-dynamic-pages/package.json","types":["dependencies"]},{"file":"/packages/app-form-builder/package.json","types":["dependencies"]},{"file":"/packages/app-page-builder/package.json","types":["dependencies"]},{"file":"/packages/lexical-editor/package.json","types":["dependencies"]},{"file":"/packages/lexical-editor-actions/package.json","types":["dependencies"]},{"file":"/packages/lexical-theme/package.json","types":["dependencies"]}]}]},{"name":"graphlib","versions":[{"version":"2.1.8","files":[{"file":"/packages/app-admin/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-workspaces/package.json","types":["dependencies"]}]}]},{"name":"is-hotkey","versions":[{"version":"0.2.0","files":[{"file":"/packages/app-admin/package.json","types":["dependencies"]},{"file":"/packages/app-page-builder/package.json","types":["dependencies"]}]}]},{"name":"prop-types","versions":[{"version":"15.8.1","files":[{"file":"/packages/app-admin/package.json","types":["dependencies"]},{"file":"/packages/app-apw/package.json","types":["dependencies"]},{"file":"/packages/app-file-manager/package.json","types":["dependencies"]},{"file":"/packages/app-form-builder/package.json","types":["dependencies"]},{"file":"/packages/app-graphql-playground/package.json","types":["dependencies"]},{"file":"/packages/app-headless-cms/package.json","types":["dependencies"]},{"file":"/packages/app-headless-cms-common/package.json","types":["dependencies"]},{"file":"/packages/app-i18n/package.json","types":["dependencies"]},{"file":"/packages/app-mailer/package.json","types":["dependencies"]},{"file":"/packages/app-page-builder/package.json","types":["dependencies"]},{"file":"/packages/app-tenant-manager/package.json","types":["dependencies"]},{"file":"/packages/app-theme-manager/package.json","types":["dependencies"]},{"file":"/packages/cwp-template-aws/template/common/apps/admin/package.json","types":["dependencies"]},{"file":"/apps/admin/package.json","types":["dependencies"]}]}]},{"name":"react-draggable","versions":[{"version":"4.4.6","files":[{"file":"/packages/app-admin/package.json","types":["dependencies"]}]}]},{"name":"react-resizable","versions":[{"version":"3.0.5","files":[{"file":"/packages/app-admin/package.json","types":["dependencies"]}]}]},{"name":"react-resizable-panels","versions":[{"version":"2.0.19","files":[{"file":"/packages/app-admin/package.json","types":["dependencies"]}]}]},{"name":"react-transition-group","versions":[{"version":"4.4.5","files":[{"file":"/packages/app-admin/package.json","types":["dependencies"]}]}]},{"name":"reset-css","versions":[{"version":"5.0.1","files":[{"file":"/packages/app-admin/package.json","types":["dependencies"]},{"file":"/packages/app-website/package.json","types":["dependencies"]}]}]},{"name":"tinycolor2","versions":[{"version":"1.6.0","files":[{"file":"/packages/app-admin/package.json","types":["dependencies"]}]}]},{"name":"unicode-emoji-json","versions":[{"version":"0.4.0","files":[{"file":"/packages/app-admin/package.json","types":["dependencies"]}]}]},{"name":"@emotion/babel-plugin","versions":[{"version":"11.11.0","files":[{"file":"/packages/app-admin/package.json","types":["devDependencies"]},{"file":"/packages/app-admin-ui/package.json","types":["devDependencies"]},{"file":"/packages/app-apw/package.json","types":["devDependencies"]},{"file":"/packages/app-dynamic-pages/package.json","types":["devDependencies"]},{"file":"/packages/app-form-builder/package.json","types":["devDependencies"]},{"file":"/packages/app-graphql-playground/package.json","types":["devDependencies"]},{"file":"/packages/app-headless-cms/package.json","types":["devDependencies"]},{"file":"/packages/app-headless-cms-common/package.json","types":["devDependencies"]},{"file":"/packages/app-i18n-content/package.json","types":["devDependencies"]},{"file":"/packages/app-page-builder/package.json","types":["devDependencies"]},{"file":"/packages/app-security/package.json","types":["devDependencies"]},{"file":"/packages/app-security-access-management/package.json","types":["devDependencies"]},{"file":"/packages/app-serverless-cms/package.json","types":["devDependencies"]},{"file":"/packages/app-tenancy/package.json","types":["devDependencies"]},{"file":"/packages/app-theme/package.json","types":["devDependencies"]},{"file":"/packages/app-theme-manager/package.json","types":["devDependencies"]},{"file":"/packages/theme/package.json","types":["devDependencies"]},{"file":"/packages/ui/package.json","types":["devDependencies"]}]}]},{"name":"@types/bytes","versions":[{"version":"3.1.4","files":[{"file":"/packages/app-admin/package.json","types":["devDependencies"]}]}]},{"name":"@types/graphlib","versions":[{"version":"2.1.12","files":[{"file":"/packages/app-admin/package.json","types":["devDependencies"]}]}]},{"name":"@types/is-hotkey","versions":[{"version":"0.1.10","files":[{"file":"/packages/app-admin/package.json","types":["devDependencies"]},{"file":"/packages/app-page-builder/package.json","types":["devDependencies"]}]}]},{"name":"@types/react-resizable","versions":[{"version":"3.0.8","files":[{"file":"/packages/app-admin/package.json","types":["devDependencies"]}]}]},{"name":"@types/react-transition-group","versions":[{"version":"4.4.12","files":[{"file":"/packages/app-admin/package.json","types":["devDependencies"]}]}]},{"name":"@types/store","versions":[{"version":"2.0.2","files":[{"file":"/packages/app-admin/package.json","types":["devDependencies"]},{"file":"/packages/app-page-builder/package.json","types":["devDependencies"]}]}]},{"name":"@types/tinycolor2","versions":[{"version":"1.4.6","files":[{"file":"/packages/app-admin/package.json","types":["devDependencies"]}]}]},{"name":"monaco-editor","versions":[{"version":"0.52.2","files":[{"file":"/packages/app-admin/package.json","types":["devDependencies"]}]}]},{"name":"@auth0/auth0-react","versions":[{"version":"2.2.4","files":[{"file":"/packages/app-admin-auth0/package.json","types":["dependencies"]}]}]},{"name":"react-helmet","versions":[{"version":"6.1.0","files":[{"file":"/packages/app-admin-auth0/package.json","types":["dependencies"]},{"file":"/packages/app-admin-okta/package.json","types":["dependencies"]},{"file":"/packages/app-admin-ui/package.json","types":["dependencies"]},{"file":"/packages/app-admin-users-cognito/package.json","types":["dependencies"]},{"file":"/packages/app-apw/package.json","types":["dependencies"]},{"file":"/packages/app-headless-cms/package.json","types":["dependencies"]},{"file":"/packages/app-mailer/package.json","types":["dependencies"]},{"file":"/packages/app-page-builder/package.json","types":["dependencies"]},{"file":"/packages/app-security-access-management/package.json","types":["dependencies"]},{"file":"/packages/app-website/package.json","types":["dependencies"]}]}]},{"name":"@aws-amplify/auth","versions":[{"version":"5.6.15","files":[{"file":"/packages/app-admin-cognito/package.json","types":["dependencies"]},{"file":"/packages/app-cognito-authenticator/package.json","types":["dependencies"]}]}]},{"name":"@okta/okta-auth-js","versions":[{"version":"5.3.1","files":[{"file":"/packages/app-admin-okta/package.json","types":["dependencies"]}]}]},{"name":"@okta/okta-react","versions":[{"version":"6.1.0","files":[{"file":"/packages/app-admin-okta/package.json","types":["dependencies"]}]}]},{"name":"@okta/okta-signin-widget","versions":[{"version":"5.9.4","files":[{"file":"/packages/app-admin-okta/package.json","types":["dependencies"]}]}]},{"name":"@types/react-helmet","versions":[{"version":"6.1.11","files":[{"file":"/packages/app-admin-ui/package.json","types":["devDependencies"]},{"file":"/packages/app-security-access-management/package.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/common/apps/website/package.json","types":["devDependencies"]},{"file":"/apps/website/package.json","types":["devDependencies"]}]}]},{"name":"babel-plugin-named-asset-import","versions":[{"version":"1.0.0-next.3e165448","files":[{"file":"/packages/app-admin-ui/package.json","types":["devDependencies"]},{"file":"/packages/app-serverless-cms/package.json","types":["devDependencies"]},{"file":"/packages/app-theme-manager/package.json","types":["devDependencies"]}]}]},{"name":"@emotion/is-prop-valid","versions":[{"version":"1.1.1","files":[{"file":"/packages/app-apw/package.json","types":["dependencies"]}]}]},{"name":"react-spinner-material","versions":[{"version":"1.1.4","files":[{"file":"/packages/app-apw/package.json","types":["dependencies"]}]}]},{"name":"@apollo/react-common","versions":[{"version":"3.1.4","files":[{"file":"/packages/app-file-manager/package.json","types":["dependencies"]},{"file":"/packages/app-form-builder/package.json","types":["dependencies"]},{"file":"/packages/app-headless-cms/package.json","types":["dependencies"]},{"file":"/packages/app-page-builder/package.json","types":["dependencies"]}]}]},{"name":"cropperjs","versions":[{"version":"1.4.3","files":[{"file":"/packages/app-file-manager/package.json","types":["dependencies"]}]}]},{"name":"dataurl-to-blob","versions":[{"version":"0.0.1","files":[{"file":"/packages/app-file-manager/package.json","types":["dependencies"]}]}]},{"name":"load-script","versions":[{"version":"1.0.0","files":[{"file":"/packages/app-file-manager/package.json","types":["dependencies"]},{"file":"/packages/app-graphql-playground/package.json","types":["dependencies"]}]}]},{"name":"react-butterfiles","versions":[{"version":"1.3.3","files":[{"file":"/packages/app-file-manager/package.json","types":["dependencies"]},{"file":"/packages/app-headless-cms/package.json","types":["dependencies"]}]}]},{"name":"react-lazy-load","versions":[{"version":"3.1.14","files":[{"file":"/packages/app-file-manager/package.json","types":["dependencies"]}]}]},{"name":"@dnd-kit/core","versions":[{"version":"6.1.0","files":[{"file":"/packages/app-form-builder/package.json","types":["dependencies"]}]}]},{"name":"@dnd-kit/sortable","versions":[{"version":"8.0.0","files":[{"file":"/packages/app-form-builder/package.json","types":["dependencies"]}]}]},{"name":"@dnd-kit/utilities","versions":[{"version":"3.2.2","files":[{"file":"/packages/app-form-builder/package.json","types":["dependencies"]}]}]},{"name":"dnd-core","versions":[{"version":"16.0.1","files":[{"file":"/packages/app-form-builder/package.json","types":["dependencies"]},{"file":"/packages/app-headless-cms/package.json","types":["dependencies"]},{"file":"/packages/app-headless-cms-common/package.json","types":["dependencies"]},{"file":"/packages/app-page-builder/package.json","types":["dependencies"]}]}]},{"name":"history","versions":[{"version":"5.3.0","files":[{"file":"/packages/app-form-builder/package.json","types":["dependencies"]},{"file":"/packages/app-page-builder/package.json","types":["dependencies"]},{"file":"/packages/react-router/package.json","types":["dependencies"]}]}]},{"name":"react-dnd-html5-backend","versions":[{"version":"16.0.1","files":[{"file":"/packages/app-form-builder/package.json","types":["dependencies"]},{"file":"/packages/app-headless-cms/package.json","types":["dependencies"]},{"file":"/packages/app-page-builder/package.json","types":["dependencies"]}]}]},{"name":"react-google-recaptcha","versions":[{"version":"1.1.0","files":[{"file":"/packages/app-form-builder/package.json","types":["dependencies"]},{"file":"/packages/app-page-builder-elements/package.json","types":["peerDependencies"]}]}]},{"name":"@types/gtag.js","versions":[{"version":"0.0.20","files":[{"file":"/packages/app-form-builder/package.json","types":["devDependencies"]}]}]},{"name":"@types/react-google-recaptcha","versions":[{"version":"1.1.2","files":[{"file":"/packages/app-form-builder/package.json","types":["devDependencies"]}]}]},{"name":"@emotion/css","versions":[{"version":"11.10.6","files":[{"file":"/packages/app-headless-cms/package.json","types":["dependencies"]}]}]},{"name":"@fortawesome/fontawesome-common-types","versions":[{"version":"0.3.0","files":[{"file":"/packages/app-headless-cms/package.json","types":["dependencies"]},{"file":"/packages/app-page-builder/package.json","types":["dependencies"]}]}]},{"name":"@fortawesome/free-brands-svg-icons","versions":[{"version":"6.0.0","files":[{"file":"/packages/app-headless-cms/package.json","types":["dependencies"]},{"file":"/packages/app-page-builder/package.json","types":["dependencies"]}]}]},{"name":"@fortawesome/free-regular-svg-icons","versions":[{"version":"6.0.0","files":[{"file":"/packages/app-headless-cms/package.json","types":["dependencies"]},{"file":"/packages/app-page-builder/package.json","types":["dependencies"]}]}]},{"name":"raw.macro","versions":[{"version":"0.4.2","files":[{"file":"/packages/app-headless-cms/package.json","types":["dependencies"]}]}]},{"name":"use-deep-compare-effect","versions":[{"version":"1.8.1","files":[{"file":"/packages/app-headless-cms/package.json","types":["dependencies"]}]}]},{"name":"@types/medium-editor","versions":[{"version":"5.0.3","files":[{"file":"/packages/app-page-builder/package.json","types":["dependencies"]}]}]},{"name":"aos","versions":[{"version":"2.3.4","files":[{"file":"/packages/app-page-builder/package.json","types":["dependencies"]},{"file":"/packages/app-page-builder-elements/package.json","types":["peerDependencies"]}]}]},{"name":"dnd-kit-sortable-tree","versions":[{"version":"0.1.73","files":[{"file":"/packages/app-page-builder/package.json","types":["dependencies"]}]}]},{"name":"medium-editor","versions":[{"version":"5.23.3","files":[{"file":"/packages/app-page-builder/package.json","types":["dependencies"]}]}]},{"name":"platform","versions":[{"version":"1.3.5","files":[{"file":"/packages/app-page-builder/package.json","types":["dependencies"]}]}]},{"name":"react-columned","versions":[{"version":"1.1.3","files":[{"file":"/packages/app-page-builder/package.json","types":["dependencies"]},{"file":"/packages/app-page-builder-elements/package.json","types":["peerDependencies"]}]}]},{"name":"react-images","versions":[{"version":"0.5.19","files":[{"file":"/packages/app-page-builder/package.json","types":["dependencies"]},{"file":"/packages/app-page-builder-elements/package.json","types":["peerDependencies"]}]}]},{"name":"react-in-viewport","versions":[{"version":"1.0.0-alpha.30","files":[{"file":"/packages/app-page-builder/package.json","types":["dependencies"]}]}]},{"name":"react-sortable","versions":[{"version":"2.0.0","files":[{"file":"/packages/app-page-builder/package.json","types":["dependencies"]}]}]},{"name":"recoil","versions":[{"version":"0.7.7","files":[{"file":"/packages/app-page-builder/package.json","types":["dependencies"]}]}]},{"name":"swiper","versions":[{"version":"9.3.2","files":[{"file":"/packages/app-page-builder/package.json","types":["dependencies"]},{"file":"/packages/app-page-builder-elements/package.json","types":["peerDependencies"]}]}]},{"name":"@types/aos","versions":[{"version":"3.0.4","files":[{"file":"/packages/app-page-builder/package.json","types":["devDependencies"]}]}]},{"name":"@types/pako","versions":[{"version":"2.0.3","files":[{"file":"/packages/app-page-builder/package.json","types":["devDependencies"]}]}]},{"name":"@types/platform","versions":[{"version":"1.3.4","files":[{"file":"/packages/app-page-builder/package.json","types":["devDependencies"]}]}]},{"name":"@types/react-images","versions":[{"version":"0.5.3","files":[{"file":"/packages/app-page-builder/package.json","types":["devDependencies"]}]}]},{"name":"@types/resize-observer-browser","versions":[{"version":"0.1.4","files":[{"file":"/packages/app-page-builder/package.json","types":["devDependencies"]}]}]},{"name":"facepaint","versions":[{"version":"1.2.1","files":[{"file":"/packages/app-page-builder-elements/package.json","types":["dependencies"]}]}]},{"name":"@types/facepaint","versions":[{"version":"1.2.2","files":[{"file":"/packages/app-page-builder-elements/package.json","types":["devDependencies"]}]}]},{"name":"crypto-hash","versions":[{"version":"3.0.0","files":[{"file":"/packages/app-record-locking/package.json","types":["dependencies"]}]}]},{"name":"apollo-link-batch-http","versions":[{"version":"1.2.14","files":[{"file":"/packages/app-serverless-cms/package.json","types":["dependencies"]},{"file":"/packages/app-website/package.json","types":["dependencies"]}]}]},{"name":"@emotion/cache","versions":[{"version":"11.10.5","files":[{"file":"/packages/app-website/package.json","types":["dependencies"]}]}]},{"name":"lz-string","versions":[{"version":"1.5.0","files":[{"file":"/packages/app-website/package.json","types":["dependencies"]}]}]},{"name":"@types/aws-lambda","versions":[{"version":"8.10.145","files":[{"file":"/packages/aws-helpers/package.json","types":["dependencies"]},{"file":"/packages/aws-sdk/package.json","types":["dependencies"]}]}]},{"name":"cheerio","versions":[{"version":"1.0.0-rc.10","files":[{"file":"/packages/aws-helpers/package.json","types":["dependencies"]}]}]},{"name":"@aws-sdk/client-apigatewaymanagementapi","versions":[{"version":"3.734.0","files":[{"file":"/packages/aws-sdk/package.json","types":["dependencies"]}]}]},{"name":"@aws-sdk/client-cloudfront","versions":[{"version":"3.734.0","files":[{"file":"/packages/aws-sdk/package.json","types":["dependencies"]}]}]},{"name":"@aws-sdk/client-cloudwatch-events","versions":[{"version":"3.734.0","files":[{"file":"/packages/aws-sdk/package.json","types":["dependencies"]}]}]},{"name":"@aws-sdk/client-cloudwatch-logs","versions":[{"version":"3.734.0","files":[{"file":"/packages/aws-sdk/package.json","types":["dependencies"]}]}]},{"name":"@aws-sdk/client-cognito-identity-provider","versions":[{"version":"3.734.0","files":[{"file":"/packages/aws-sdk/package.json","types":["dependencies"]}]}]},{"name":"@aws-sdk/client-dynamodb","versions":[{"version":"3.734.0","files":[{"file":"/packages/aws-sdk/package.json","types":["dependencies"]}]}]},{"name":"@aws-sdk/client-dynamodb-streams","versions":[{"version":"3.734.0","files":[{"file":"/packages/aws-sdk/package.json","types":["dependencies"]}]}]},{"name":"@aws-sdk/client-eventbridge","versions":[{"version":"3.734.0","files":[{"file":"/packages/aws-sdk/package.json","types":["dependencies"]}]}]},{"name":"@aws-sdk/client-iam","versions":[{"version":"3.734.0","files":[{"file":"/packages/aws-sdk/package.json","types":["dependencies"]}]}]},{"name":"@aws-sdk/client-iot","versions":[{"version":"3.734.0","files":[{"file":"/packages/aws-sdk/package.json","types":["dependencies"]}]}]},{"name":"@aws-sdk/client-lambda","versions":[{"version":"3.734.0","files":[{"file":"/packages/aws-sdk/package.json","types":["dependencies"]}]}]},{"name":"@aws-sdk/client-s3","versions":[{"version":"3.735.0","files":[{"file":"/packages/aws-sdk/package.json","types":["dependencies"]}]}]},{"name":"@aws-sdk/client-sfn","versions":[{"version":"3.734.0","files":[{"file":"/packages/aws-sdk/package.json","types":["dependencies"]}]}]},{"name":"@aws-sdk/client-sqs","versions":[{"version":"3.734.0","files":[{"file":"/packages/aws-sdk/package.json","types":["dependencies"]}]}]},{"name":"@aws-sdk/client-sts","versions":[{"version":"3.734.0","files":[{"file":"/packages/aws-sdk/package.json","types":["dependencies"]}]}]},{"name":"@aws-sdk/credential-providers","versions":[{"version":"3.734.0","files":[{"file":"/packages/aws-sdk/package.json","types":["dependencies"]}]}]},{"name":"@aws-sdk/lib-dynamodb","versions":[{"version":"3.734.0","files":[{"file":"/packages/aws-sdk/package.json","types":["dependencies"]}]}]},{"name":"@aws-sdk/lib-storage","versions":[{"version":"3.735.0","files":[{"file":"/packages/aws-sdk/package.json","types":["dependencies"]}]}]},{"name":"@aws-sdk/s3-presigned-post","versions":[{"version":"3.735.0","files":[{"file":"/packages/aws-sdk/package.json","types":["dependencies"]}]}]},{"name":"@aws-sdk/s3-request-presigner","versions":[{"version":"3.735.0","files":[{"file":"/packages/aws-sdk/package.json","types":["dependencies"]}]}]},{"name":"@aws-sdk/util-dynamodb","versions":[{"version":"3.734.0","files":[{"file":"/packages/aws-sdk/package.json","types":["dependencies"]}]}]},{"name":"camelcase","versions":[{"version":"6.3.0","files":[{"file":"/packages/cli/package.json","types":["dependencies"]},{"file":"/packages/project-utils/package.json","types":["dependencies"]}]}]},{"name":"ci-info","versions":[{"version":"4.1.0","files":[{"file":"/packages/cli/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-deploy-pulumi/package.json","types":["dependencies"]},{"file":"/packages/cwp-template-aws/package.json","types":["dependencies"]},{"file":"/packages/project-utils/package.json","types":["dependencies"]},{"file":"/packages/telemetry/package.json","types":["dependencies"]}]}]},{"name":"dotenv","versions":[{"version":"8.2.0","files":[{"file":"/packages/cli/package.json","types":["dependencies"]},{"file":"/packages/cwp-template-aws/package.json","types":["devDependencies"]}]}]},{"name":"fast-glob","versions":[{"version":"3.2.7","files":[{"file":"/packages/cli/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-deploy-pulumi/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-extensions/package.json","types":["dependencies","devDependencies"]},{"file":"/packages/cli-plugin-scaffold/package.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/package.json","types":["dependencies"]},{"file":"/packages/serverless-cms-aws/package.json","types":["dependencies"]}]}]},{"name":"find-up","versions":[{"version":"5.0.0","files":[{"file":"/packages/cli/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-extensions/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-scaffold/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-scaffold-admin-app-module/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-scaffold-graphql-service/package.json","types":["dependencies"]},{"file":"/packages/create-webiny-project/package.json","types":["dependencies"]},{"file":"/packages/pulumi/package.json","types":["dependencies"]},{"file":"/packages/serverless-cms-aws/package.json","types":["dependencies"]},{"file":"/scripts/prepublishOnly/package.json","types":["dependencies"]}]}]},{"name":"graphql-request","versions":[{"version":"3.7.0","files":[{"file":"/packages/cli/package.json","types":["dependencies"]},{"file":"/cypress-tests/package.json","types":["devDependencies"]},{"file":"/apps/api/graphql/package.json","types":["devDependencies"]}]}]},{"name":"ncp","versions":[{"version":"2.0.0","files":[{"file":"/packages/cli/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-deploy-pulumi/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-scaffold-admin-app-module/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-scaffold-graphql-service/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-scaffold-react-component/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-scaffold-workspaces/package.json","types":["dependencies"]},{"file":"/packages/ui/package.json","types":["devDependencies"]}]}]},{"name":"open","versions":[{"version":"8.4.2","files":[{"file":"/packages/cli/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-scaffold-ci/package.json","types":["dependencies"]},{"file":"/packages/cwp-template-aws/package.json","types":["dependencies"]}]}]},{"name":"pirates","versions":[{"version":"4.0.6","files":[{"file":"/packages/cli/package.json","types":["dependencies"]}]}]},{"name":"ts-morph","versions":[{"version":"11.0.0","files":[{"file":"/packages/cli/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-extensions/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-scaffold/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-scaffold-graphql-service/package.json","types":["dependencies"]}]}]},{"name":"exit-hook","versions":[{"version":"4.0.0","files":[{"file":"/packages/cli-plugin-deploy-pulumi/package.json","types":["dependencies"]}]}]},{"name":"humanize-duration","versions":[{"version":"3.32.1","files":[{"file":"/packages/cli-plugin-deploy-pulumi/package.json","types":["dependencies"]}]}]},{"name":"log-update","versions":[{"version":"4.0.0","files":[{"file":"/packages/cli-plugin-deploy-pulumi/package.json","types":["dependencies"]}]}]},{"name":"mqtt","versions":[{"version":"5.10.3","files":[{"file":"/packages/cli-plugin-deploy-pulumi/package.json","types":["dependencies"]}]}]},{"name":"node-notifier","versions":[{"version":"10.0.1","files":[{"file":"/packages/cli-plugin-deploy-pulumi/package.json","types":["dependencies"]}]}]},{"name":"ora","versions":[{"version":"4.1.1","files":[{"file":"/packages/cli-plugin-deploy-pulumi/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-extensions/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-scaffold/package.json","types":["dependencies"]},{"file":"/packages/cwp-template-aws/package.json","types":["dependencies"]},{"file":"/packages/serverless-cms-aws/package.json","types":["dependencies"]}]}]},{"name":"replace-in-path","versions":[{"version":"1.1.0","files":[{"file":"/packages/cli-plugin-deploy-pulumi/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-extensions/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-scaffold-admin-app-module/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-scaffold-graphql-service/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-scaffold-react-component/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-scaffold-workspaces/package.json","types":["dependencies"]}]}]},{"name":"serialize-error","versions":[{"version":"8.0.0","files":[{"file":"/packages/cli-plugin-deploy-pulumi/package.json","types":["dependencies"]}]}]},{"name":"@types/humanize-duration","versions":[{"version":"3.27.4","files":[{"file":"/packages/cli-plugin-deploy-pulumi/package.json","types":["devDependencies"]}]}]},{"name":"@types/listr","versions":[{"version":"0.14.9","files":[{"file":"/packages/cli-plugin-deploy-pulumi/package.json","types":["devDependencies"]}]}]},{"name":"@types/node-notifier","versions":[{"version":"8.0.5","files":[{"file":"/packages/cli-plugin-deploy-pulumi/package.json","types":["devDependencies"]}]}]},{"name":"case","versions":[{"version":"1.6.3","files":[{"file":"/packages/cli-plugin-extensions/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-scaffold-admin-app-module/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-scaffold-graphql-service/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-scaffold-react-component/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-scaffold-workspaces/package.json","types":["dependencies"]}]}]},{"name":"validate-npm-package-name","versions":[{"version":"3.0.0","files":[{"file":"/packages/cli-plugin-extensions/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-scaffold-ci/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-scaffold-react-component/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-scaffold-workspaces/package.json","types":["dependencies"]},{"file":"/packages/create-webiny-project/package.json","types":["dependencies"]}]}]},{"name":"@types/inquirer","versions":[{"version":"8.2.10","files":[{"file":"/packages/cli-plugin-extensions/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-scaffold/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-scaffold-admin-app-module/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-scaffold-ci/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-scaffold-extensions/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-scaffold-graphql-service/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-scaffold-react-component/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-scaffold-workspaces/package.json","types":["devDependencies"]}]}]},{"name":"terminal-link","versions":[{"version":"2.1.1","files":[{"file":"/packages/cli-plugin-scaffold-admin-app-module/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-scaffold-ci/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-scaffold-graphql-service/package.json","types":["dependencies"]}]}]},{"name":"@types/ncp","versions":[{"version":"2.0.4","files":[{"file":"/packages/cli-plugin-scaffold-admin-app-module/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-scaffold-ci/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-scaffold-extensions/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-scaffold-graphql-service/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-scaffold-react-component/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-scaffold-workspaces/package.json","types":["devDependencies"]}]}]},{"name":"@types/pluralize","versions":[{"version":"0.0.29","files":[{"file":"/packages/cli-plugin-scaffold-admin-app-module/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-scaffold-ci/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-scaffold-extensions/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-scaffold-graphql-service/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-scaffold-react-component/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-scaffold-workspaces/package.json","types":["devDependencies"]}]}]},{"name":"js-base64","versions":[{"version":"3.7.7","files":[{"file":"/packages/cli-plugin-scaffold-ci/package.json","types":["dependencies"]}]}]},{"name":"octokit","versions":[{"version":"3.1.2","files":[{"file":"/packages/cli-plugin-scaffold-ci/package.json","types":["dependencies"]}]}]},{"name":"@types/validate-npm-package-name","versions":[{"version":"3.0.3","files":[{"file":"/packages/cli-plugin-scaffold-ci/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-scaffold-extensions/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-scaffold-react-component/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-scaffold-workspaces/package.json","types":["devDependencies"]}]}]},{"name":"indent-string","versions":[{"version":"5.0.0","files":[{"file":"/packages/cli-plugin-scaffold-react-component/package.json","types":["dependencies"]}]}]},{"name":"archy","versions":[{"version":"1.0.0","files":[{"file":"/packages/cli-plugin-workspaces/package.json","types":["dependencies"]}]}]},{"name":"color","versions":[{"version":"4.2.3","files":[{"file":"/packages/cli-plugin-workspaces/package.json","types":["dependencies"]}]}]},{"name":"multimatch","versions":[{"version":"5.0.0","files":[{"file":"/packages/cli-plugin-workspaces/package.json","types":["dependencies"]}]}]},{"name":"js-yaml","versions":[{"version":"3.14.1","files":[{"file":"/packages/create-webiny-project/package.json","types":["dependencies"]}]}]},{"name":"os","versions":[{"version":"0.1.1","files":[{"file":"/packages/create-webiny-project/package.json","types":["dependencies"]}]}]},{"name":"uuid","versions":[{"version":"9.0.1","files":[{"file":"/packages/create-webiny-project/package.json","types":["dependencies"]},{"file":"/packages/global-config/package.json","types":["dependencies"]}]}]},{"name":"yesno","versions":[{"version":"0.4.0","files":[{"file":"/packages/create-webiny-project/package.json","types":["dependencies"]}]}]},{"name":"@editorjs/delimiter","versions":[{"version":"1.4.2","files":[{"file":"/packages/cwp-template-aws/template/common/apps/admin/package.json","types":["dependencies"]},{"file":"/apps/admin/package.json","types":["dependencies"]}]}]},{"name":"@editorjs/list","versions":[{"version":"1.10.0","files":[{"file":"/packages/cwp-template-aws/template/common/apps/admin/package.json","types":["dependencies"]},{"file":"/apps/admin/package.json","types":["dependencies"]}]}]},{"name":"@editorjs/quote","versions":[{"version":"2.7.2","files":[{"file":"/packages/cwp-template-aws/template/common/apps/admin/package.json","types":["dependencies"]},{"file":"/apps/admin/package.json","types":["dependencies"]}]}]},{"name":"@editorjs/underline","versions":[{"version":"1.2.1","files":[{"file":"/packages/cwp-template-aws/template/common/apps/admin/package.json","types":["dependencies"]},{"file":"/apps/admin/package.json","types":["dependencies"]}]}]},{"name":"core-js","versions":[{"version":"3.39.0","files":[{"file":"/packages/cwp-template-aws/template/common/apps/admin/package.json","types":["dependencies"]},{"file":"/packages/cwp-template-aws/template/common/apps/website/package.json","types":["dependencies"]},{"file":"/apps/admin/package.json","types":["dependencies"]},{"file":"/apps/website/package.json","types":["dependencies"]}]}]},{"name":"cross-fetch","versions":[{"version":"3.1.5","files":[{"file":"/packages/cwp-template-aws/template/common/apps/admin/package.json","types":["dependencies"]},{"file":"/packages/cwp-template-aws/template/common/apps/website/package.json","types":["dependencies"]},{"file":"/apps/admin/package.json","types":["dependencies"]},{"file":"/apps/website/package.json","types":["dependencies"]}]}]},{"name":"regenerator-runtime","versions":[{"version":"0.13.11","files":[{"file":"/packages/cwp-template-aws/template/common/apps/admin/package.json","types":["dependencies"]},{"file":"/packages/cwp-template-aws/template/common/apps/website/package.json","types":["dependencies"]},{"file":"/apps/admin/package.json","types":["dependencies"]},{"file":"/apps/website/package.json","types":["dependencies"]}]}]},{"name":"theme","versions":[{"version":"1.0.0","files":[{"file":"/packages/cwp-template-aws/template/common/apps/admin/package.json","types":["dependencies"]},{"file":"/packages/cwp-template-aws/template/common/apps/website/package.json","types":["dependencies"]},{"file":"/apps/admin/package.json","types":["dependencies"]},{"file":"/apps/website/package.json","types":["dependencies"]}]}]},{"name":"tslib","versions":[{"version":"2.8.1","files":[{"file":"/packages/cwp-template-aws/template/common/apps/admin/package.json","types":["dependencies"]},{"file":"/apps/admin/package.json","types":["dependencies"]}]}]},{"name":"react-hamburger-menu","versions":[{"version":"1.2.1","files":[{"file":"/packages/cwp-template-aws/template/common/extensions/theme/package.json","types":["dependencies"]},{"file":"/extensions/theme/package.json","types":["dependencies"]}]}]},{"name":"@types/react-hamburger-menu","versions":[{"version":"0.0.4","files":[{"file":"/packages/cwp-template-aws/template/common/extensions/theme/package.json","types":["devDependencies"]},{"file":"/extensions/theme/package.json","types":["devDependencies"]}]}]},{"name":"merge","versions":[{"version":"2.1.1","files":[{"file":"/packages/cwp-template-aws/template/ddb-es/dependencies.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-os/dependencies.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb/dependencies.json","types":["devDependencies"]}]}]},{"name":"center-align","versions":[{"version":"1.0.1","files":[{"file":"/packages/data-migration/package.json","types":["dependencies"]}]}]},{"name":"pino-pretty","versions":[{"version":"9.4.0","files":[{"file":"/packages/data-migration/package.json","types":["dependencies"]},{"file":"/packages/project-utils/package.json","types":["devDependencies"]}]}]},{"name":"@types/center-align","versions":[{"version":"1.0.0","files":[{"file":"/packages/data-migration/package.json","types":["devDependencies"]}]}]},{"name":"@types/semver","versions":[{"version":"7.3.4","files":[{"file":"/packages/data-migration/package.json","types":["devDependencies"]}]}]},{"name":"jest-mock-console","versions":[{"version":"2.0.0","files":[{"file":"/packages/data-migration/package.json","types":["devDependencies"]},{"file":"/packages/handler-graphql/package.json","types":["devDependencies"]}]}]},{"name":"dynamodb-toolbox","versions":[{"version":"0.9.2","files":[{"file":"/packages/db-dynamodb/package.json","types":["dependencies"]}]}]},{"name":"fuse.js","versions":[{"version":"7.0.0","files":[{"file":"/packages/db-dynamodb/package.json","types":["dependencies"]}]}]},{"name":"@types/is-number","versions":[{"version":"7.0.5","files":[{"file":"/packages/db-dynamodb/package.json","types":["devDependencies"]}]}]},{"name":"reflect-metadata","versions":[{"version":"0.2.2","files":[{"file":"/packages/di-container/package.json","types":["dependencies"]},{"file":"/packages/ioc/package.json","types":["dependencies"]}]}]},{"name":"@types/uniqid","versions":[{"version":"5.3.2","files":[{"file":"/packages/feature-flags/package.json","types":["devDependencies"]},{"file":"/packages/plugins/package.json","types":["devDependencies"]}]}]},{"name":"@testing-library/react","versions":[{"version":"15.0.7","files":[{"file":"/packages/form/package.json","types":["devDependencies"]},{"file":"/packages/react-composition/package.json","types":["devDependencies"]},{"file":"/packages/react-properties/package.json","types":["devDependencies"]},{"file":"/packages/react-rich-text-lexical-renderer/package.json","types":["devDependencies"]},{"file":"/packages/ui/package.json","types":["devDependencies"]}]}]},{"name":"@testing-library/user-event","versions":[{"version":"14.5.2","files":[{"file":"/packages/form/package.json","types":["devDependencies"]}]}]},{"name":"@types/invariant","versions":[{"version":"2.2.35","files":[{"file":"/packages/form/package.json","types":["devDependencies"]}]}]},{"name":"@fastify/compress","versions":[{"version":"7.0.3","files":[{"file":"/packages/handler/package.json","types":["dependencies"]}]}]},{"name":"@fastify/cookie","versions":[{"version":"9.4.0","files":[{"file":"/packages/handler/package.json","types":["dependencies"]}]}]},{"name":"fastify","versions":[{"version":"4.29.0","files":[{"file":"/packages/handler/package.json","types":["dependencies"]},{"file":"/packages/handler-aws/package.json","types":["dependencies"]}]}]},{"name":"@fastify/aws-lambda","versions":[{"version":"4.1.0","files":[{"file":"/packages/handler-aws/package.json","types":["dependencies"]}]}]},{"name":"@graphql-tools/resolvers-composition","versions":[{"version":"7.0.1","files":[{"file":"/packages/handler-graphql/package.json","types":["dependencies"]}]}]},{"name":"@graphql-tools/utils","versions":[{"version":"10.3.1","files":[{"file":"/packages/handler-graphql/package.json","types":["dependencies"]}]}]},{"name":"graphql-scalars","versions":[{"version":"1.12.0","files":[{"file":"/packages/handler-graphql/package.json","types":["dependencies"]}]}]},{"name":"accounting","versions":[{"version":"0.4.1","files":[{"file":"/packages/i18n/package.json","types":["dependencies"]}]}]},{"name":"fecha","versions":[{"version":"2.3.3","files":[{"file":"/packages/i18n/package.json","types":["dependencies"]}]}]},{"name":"short-hash","versions":[{"version":"1.0.0","files":[{"file":"/packages/i18n/package.json","types":["dependencies"]}]}]},{"name":"@types/accounting","versions":[{"version":"0.4.2","files":[{"file":"/packages/i18n/package.json","types":["devDependencies"]}]}]},{"name":"@material-design-icons/svg","versions":[{"version":"0.14.15","files":[{"file":"/packages/icons/package.json","types":["devDependencies"]}]}]},{"name":"inversify","versions":[{"version":"6.1.6","files":[{"file":"/packages/ioc/package.json","types":["dependencies"]}]}]},{"name":"@types/jsdom","versions":[{"version":"21.1.6","files":[{"file":"/packages/lexical-converter/package.json","types":["devDependencies"]}]}]},{"name":"@types/prismjs","versions":[{"version":"1.26.4","files":[{"file":"/packages/lexical-nodes/package.json","types":["dependencies"]}]}]},{"name":"react-style-object-to-css","versions":[{"version":"1.1.2","files":[{"file":"/packages/lexical-theme/package.json","types":["dependencies"]}]}]},{"name":"pino","versions":[{"version":"8.21.0","files":[{"file":"/packages/logger/package.json","types":["devDependencies"]},{"file":"/packages/project-utils/package.json","types":["devDependencies"]}]}]},{"name":"@pmmmwh/react-refresh-webpack-plugin","versions":[{"version":"0.5.15","files":[{"file":"/packages/project-utils/package.json","types":["dependencies"]}]}]},{"name":"@rspack/core","versions":[{"version":"1.2.2","files":[{"file":"/packages/project-utils/package.json","types":["dependencies"]}]}]},{"name":"@types/webpack-env","versions":[{"version":"1.18.5","files":[{"file":"/packages/project-utils/package.json","types":["dependencies"]}]}]},{"name":"assert-browserify","versions":[{"version":"2.0.0","files":[{"file":"/packages/project-utils/package.json","types":["dependencies"]}]}]},{"name":"buffer","versions":[{"version":"6.0.3","files":[{"file":"/packages/project-utils/package.json","types":["dependencies"]}]}]},{"name":"bufferutil","versions":[{"version":"4.0.1","files":[{"file":"/packages/project-utils/package.json","types":["dependencies"]}]}]},{"name":"case-sensitive-paths-webpack-plugin","versions":[{"version":"2.4.0","files":[{"file":"/packages/project-utils/package.json","types":["dependencies"]}]}]},{"name":"crypto-browserify","versions":[{"version":"3.12.0","files":[{"file":"/packages/project-utils/package.json","types":["dependencies"]}]}]},{"name":"css-minimizer-webpack-plugin","versions":[{"version":"7.0.0","files":[{"file":"/packages/project-utils/package.json","types":["dependencies"]}]}]},{"name":"eslint-config-react-app","versions":[{"version":"6.0.0","files":[{"file":"/packages/project-utils/package.json","types":["dependencies"]}]}]},{"name":"eslint-webpack-plugin","versions":[{"version":"4.2.0","files":[{"file":"/packages/project-utils/package.json","types":["dependencies"]}]}]},{"name":"fork-ts-checker-webpack-plugin","versions":[{"version":"9.0.2","files":[{"file":"/packages/project-utils/package.json","types":["dependencies"]}]}]},{"name":"html-webpack-plugin","versions":[{"version":"5.6.3","files":[{"file":"/packages/project-utils/package.json","types":["dependencies"]}]}]},{"name":"mini-css-extract-plugin","versions":[{"version":"2.4.5","files":[{"file":"/packages/project-utils/package.json","types":["dependencies"]}]}]},{"name":"null-loader","versions":[{"version":"4.0.1","files":[{"file":"/packages/project-utils/package.json","types":["dependencies"]}]}]},{"name":"os-browserify","versions":[{"version":"0.3.0","files":[{"file":"/packages/project-utils/package.json","types":["dependencies"]}]}]},{"name":"path-browserify","versions":[{"version":"1.0.1","files":[{"file":"/packages/project-utils/package.json","types":["dependencies"]}]}]},{"name":"postcss-flexbugs-fixes","versions":[{"version":"5.0.2","files":[{"file":"/packages/project-utils/package.json","types":["dependencies"]}]}]},{"name":"postcss-normalize","versions":[{"version":"10.0.1","files":[{"file":"/packages/project-utils/package.json","types":["dependencies"]}]}]},{"name":"postcss-preset-env","versions":[{"version":"9.4.0","files":[{"file":"/packages/project-utils/package.json","types":["dependencies"]}]}]},{"name":"process","versions":[{"version":"0.11.10","files":[{"file":"/packages/project-utils/package.json","types":["dependencies"]}]}]},{"name":"raw-loader","versions":[{"version":"4.0.2","files":[{"file":"/packages/project-utils/package.json","types":["dependencies"]},{"file":"/packages/ui/package.json","types":["devDependencies"]}]}]},{"name":"react-dev-utils","versions":[{"version":"12.0.1","files":[{"file":"/packages/project-utils/package.json","types":["dependencies"]}]}]},{"name":"react-refresh","versions":[{"version":"0.11.0","files":[{"file":"/packages/project-utils/package.json","types":["dependencies"]}]}]},{"name":"read-json-sync","versions":[{"version":"2.0.1","files":[{"file":"/packages/project-utils/package.json","types":["dependencies"]}]}]},{"name":"resolve","versions":[{"version":"1.22.8","files":[{"file":"/packages/project-utils/package.json","types":["dependencies"]}]}]},{"name":"resolve-url-loader","versions":[{"version":"5.0.0","files":[{"file":"/packages/project-utils/package.json","types":["dependencies"]}]}]},{"name":"sass-loader","versions":[{"version":"12.3.0","files":[{"file":"/packages/project-utils/package.json","types":["dependencies"]}]}]},{"name":"scheduler","versions":[{"version":"0.19.1","files":[{"file":"/packages/project-utils/package.json","types":["dependencies"]}]}]},{"name":"source-map-loader","versions":[{"version":"1.1.3","files":[{"file":"/packages/project-utils/package.json","types":["dependencies"]}]}]},{"name":"source-map-support","versions":[{"version":"0.5.21","files":[{"file":"/packages/project-utils/package.json","types":["dependencies"]}]}]},{"name":"style-loader","versions":[{"version":"3.3.1","files":[{"file":"/packages/project-utils/package.json","types":["dependencies"]}]}]},{"name":"terser-webpack-plugin","versions":[{"version":"5.3.10","files":[{"file":"/packages/project-utils/package.json","types":["dependencies"]}]}]},{"name":"ts-checker-rspack-plugin","versions":[{"version":"1.0.3","files":[{"file":"/packages/project-utils/package.json","types":["dependencies"]}]}]},{"name":"ts-patch","versions":[{"version":"3.3.0","files":[{"file":"/packages/project-utils/package.json","types":["dependencies"]}]}]},{"name":"url","versions":[{"version":"0.11.4","files":[{"file":"/packages/project-utils/package.json","types":["dependencies"]}]}]},{"name":"url-loader","versions":[{"version":"4.1.1","files":[{"file":"/packages/project-utils/package.json","types":["dependencies"]}]}]},{"name":"utf-8-validate","versions":[{"version":"5.0.2","files":[{"file":"/packages/project-utils/package.json","types":["dependencies"]}]}]},{"name":"vm-browserify","versions":[{"version":"1.1.2","files":[{"file":"/packages/project-utils/package.json","types":["dependencies"]}]}]},{"name":"webpack","versions":[{"version":"5.97.0","files":[{"file":"/packages/project-utils/package.json","types":["dependencies"]},{"file":"/packages/serverless-cms-aws/package.json","types":["dependencies"]}]}]},{"name":"webpack-dev-server","versions":[{"version":"4.15.2","files":[{"file":"/packages/project-utils/package.json","types":["dependencies"]}]}]},{"name":"webpack-manifest-plugin","versions":[{"version":"5.0.0","files":[{"file":"/packages/project-utils/package.json","types":["dependencies"]}]}]},{"name":"webpackbar","versions":[{"version":"7.0.0","files":[{"file":"/packages/project-utils/package.json","types":["dependencies"]}]}]},{"name":"listr2","versions":[{"version":"5.0.8","files":[{"file":"/packages/project-utils/package.json","types":["devDependencies"]},{"file":"/scripts/buildPackages/package.json","types":["dependencies"]}]}]},{"name":"@pulumi/pulumi","versions":[{"version":"3.147.0","files":[{"file":"/packages/pulumi/package.json","types":["dependencies"]},{"file":"/packages/pulumi-aws/package.json","types":["dependencies"]},{"file":"/packages/pulumi-sdk/package.json","types":["dependencies"]},{"file":"/packages/serverless-cms-aws/package.json","types":["dependencies"]}]}]},{"name":"@pulumi/aws","versions":[{"version":"6.67.0","files":[{"file":"/packages/pulumi-aws/package.json","types":["dependencies"]},{"file":"/packages/pulumi-sdk/package.json","types":["dependencies"]},{"file":"/packages/serverless-cms-aws/package.json","types":["dependencies"]}]}]},{"name":"@pulumi/random","versions":[{"version":"4.17.0","files":[{"file":"/packages/pulumi-aws/package.json","types":["dependencies"]}]}]},{"name":"decompress","versions":[{"version":"4.2.1","files":[{"file":"/packages/pulumi-sdk/package.json","types":["dependencies"]}]}]},{"name":"identity-obj-proxy","versions":[{"version":"3.0.0","files":[{"file":"/packages/react-rich-text-lexical-renderer/package.json","types":["devDependencies"]}]}]},{"name":"sanitize-html","versions":[{"version":"2.12.1","files":[{"file":"/packages/react-rich-text-renderer/package.json","types":["dependencies"]}]}]},{"name":"@types/sanitize-html","versions":[{"version":"2.9.0","files":[{"file":"/packages/react-rich-text-renderer/package.json","types":["devDependencies"]}]}]},{"name":"react-router-dom","versions":[{"version":"6.3.0","files":[{"file":"/packages/react-router/package.json","types":["dependencies"]}]}]},{"name":"cli-table3","versions":[{"version":"0.6.5","files":[{"file":"/packages/system-requirements/package.json","types":["dependencies"]}]}]},{"name":"object-merge-advanced","versions":[{"version":"12.1.0","files":[{"file":"/packages/tasks/package.json","types":["dependencies"]}]}]},{"name":"object-sizeof","versions":[{"version":"2.6.4","files":[{"file":"/packages/tasks/package.json","types":["dependencies"]}]}]},{"name":"jsesc","versions":[{"version":"3.0.2","files":[{"file":"/packages/telemetry/package.json","types":["dependencies"]}]}]},{"name":"strip-ansi","versions":[{"version":"6.0.1","files":[{"file":"/packages/telemetry/package.json","types":["dependencies"]}]}]},{"name":"wts-client","versions":[{"version":"1.0.1","files":[{"file":"/packages/telemetry/package.json","types":["dependencies"]}]}]},{"name":"keycode","versions":[{"version":"2.2.0","files":[{"file":"/packages/ui/package.json","types":["dependencies"]}]}]},{"name":"p-wait-for","versions":[{"version":"4.1.0","files":[{"file":"/packages/ui-composer/package.json","types":["dependencies"]}]}]},{"name":"mdbid","versions":[{"version":"1.0.0","files":[{"file":"/packages/utils/package.json","types":["dependencies"]}]}]},{"name":"nanoid-dictionary","versions":[{"version":"4.3.0","files":[{"file":"/packages/utils/package.json","types":["dependencies"]}]}]},{"name":"isnumeric","versions":[{"version":"0.3.3","files":[{"file":"/packages/validation/package.json","types":["dependencies"]}]}]},{"name":"@4tw/cypress-drag-drop","versions":[{"version":"1.4.0","files":[{"file":"/cypress-tests/package.json","types":["devDependencies"]}]}]},{"name":"@testing-library/cypress","versions":[{"version":"10.0.0","files":[{"file":"/cypress-tests/package.json","types":["devDependencies"]}]}]},{"name":"amazon-cognito-identity-js","versions":[{"version":"4.5.3","files":[{"file":"/cypress-tests/package.json","types":["devDependencies"]}]}]},{"name":"cypress","versions":[{"version":"13.16.0","files":[{"file":"/cypress-tests/package.json","types":["devDependencies"]}]}]},{"name":"cypress-image-snapshot","versions":[{"version":"4.0.1","files":[{"file":"/cypress-tests/package.json","types":["devDependencies"]}]}]},{"name":"cypress-mailosaur","versions":[{"version":"2.7.0","files":[{"file":"/cypress-tests/package.json","types":["devDependencies"]}]}]},{"name":"cypress-wait-until","versions":[{"version":"1.7.1","files":[{"file":"/cypress-tests/package.json","types":["devDependencies"]}]}]},{"name":"del","versions":[{"version":"6.0.0","files":[{"file":"/cypress-tests/package.json","types":["devDependencies"]}]}]},{"name":"source-map-explorer","versions":[{"version":"2.5.3","files":[{"file":"/apps/website/package.json","types":["devDependencies"]}]}]},{"name":"@types/folder-hash","versions":[{"version":"4.0.4","files":[{"file":"/scripts/buildPackages/package.json","types":["devDependencies"]}]}]},{"name":"@types/yargs","versions":[{"version":"17.0.8","files":[{"file":"/scripts/buildPackages/package.json","types":["devDependencies"]}]}]}]}
diff --git a/packages/cli/utils/ensureSameWebinyPackageVersions.js b/packages/cli/utils/ensureSameWebinyPackageVersions.js
new file mode 100644
index 00000000000..5a159aec140
--- /dev/null
+++ b/packages/cli/utils/ensureSameWebinyPackageVersions.js
@@ -0,0 +1,99 @@
+const execa = require("execa");
+const logger = require("./log");
+
+const DEBUG_FLAG = "--debug";
+const usingDebugFlag = process.argv.includes(DEBUG_FLAG);
+
+const SKIP_WEBINY_VERSIONS_CHECK_FLAG = "--no-package-versions-check";
+const skippingWebinyVersionsCheck = process.argv.includes(SKIP_WEBINY_VERSIONS_CHECK_FLAG);
+
+function listWebinyPackageVersions() {
+    const { stdout } = execa.sync("yarn", ["info", "@webiny/*", "--name-only", "--all", "--json"], {
+        encoding: "utf-8"
+    });
+
+    // Each line is a JSON string, so parse them individually
+    const lines = stdout
+        .trim()
+        .split("\n")
+        .map(line => JSON.parse(line));
+
+    const versionMap = new Map();
+
+    for (const entry of lines) {
+        // An example entry: "@webiny/cli@npm:5.42.3"
+        const match = entry.match(/^(@webiny\/[^@]+)@npm:(.+)$/);
+        if (!match) {
+            continue;
+        }
+
+        const [, pkg, version] = match;
+        if (!versionMap.has(pkg)) {
+            versionMap.set(pkg, new Set());
+        }
+
+        versionMap.get(pkg).add(version);
+    }
+
+    return versionMap;
+}
+
+function ensureSameWebinyPackageVersions() {
+    // Just in case, we want to allow users to skip the check.
+    if (skippingWebinyVersionsCheck) {
+        return;
+    }
+
+    let webinyVersions;
+    try {
+        webinyVersions = listWebinyPackageVersions();
+    } catch (e) {
+        const message = ["Failed to inspect Webiny package versions."];
+
+        if (!usingDebugFlag) {
+            message.push(
+                `For more information, try running with ${logger.warning.hl(DEBUG_FLAG)}.`
+            );
+        }
+
+        message.push("Learn more: https://webiny.link/webiny-package-versions-check");
+
+        logger.warning(message.join(" "));
+        if (usingDebugFlag) {
+            logger.debug(e);
+        }
+
+        console.log();
+        return;
+    }
+
+    let hasMismatch = false;
+    const mismatchedPackages = [];
+    for (const [pkg, versions] of webinyVersions.entries()) {
+        if (versions.size > 1) {
+            hasMismatch = true;
+            mismatchedPackages.push([pkg, versions]);
+        }
+    }
+
+    if (hasMismatch) {
+        const message = [
+            "The following Webiny packages have mismatched versions:",
+            "",
+            ...mismatchedPackages.map(([pkg, versions]) => {
+                return `‣ ${pkg}: ${Array.from(versions).join(", ")}`;
+            }),
+            "",
+            `Please ensure all Webiny packages are using the same version. If you think this is a mistake, you can also skip this check by appending the ${logger.error.hl(
+                SKIP_WEBINY_VERSIONS_CHECK_FLAG
+            )} flag. Learn more: https://webiny.link/webiny-package-versions-check`
+        ];
+
+        logger.error(message.join("\n"));
+        process.exit(1);
+    }
+}
+
+module.exports = {
+    ensureSameWebinyPackageVersions
+};
diff --git a/packages/cwp-template-aws/template/common/apps/admin/src/App.scss b/packages/cwp-template-aws/template/common/apps/admin/src/App.scss
index 086b65a2dfd..73697e8f192 100644
--- a/packages/cwp-template-aws/template/common/apps/admin/src/App.scss
+++ b/packages/cwp-template-aws/template/common/apps/admin/src/App.scss
@@ -1,17 +1,2 @@
-// Webiny theme variables
-$webiny-theme-light-primary: #fa5723;
-$webiny-theme-light-secondary: #00ccb0;
-$webiny-theme-light-background: #f2f2f2;
-$webiny-theme-light-surface: #fff;
-$webiny-theme-light-on-primary: #ffffff;
-$webiny-theme-light-on-secondary: #ffffff;
-$webiny-theme-light-on-surface: #000000;
-$webiny-theme-light-on-background: rgba(212, 212, 212, 0.5);
-$webiny-theme-light-text-primary-on-background: rgba(0, 0, 0, 0.87);
-$webiny-theme-light-text-secondary-on-background: rgba(0, 0, 0, 0.54);
-$webiny-theme-light-text-hint-on-dark: rgba(255, 255, 255, 0.5);
-$webiny-theme-light-caret-down: url("data:image/svg+xml,%3Csvg%20width%3D%2210px%22%20height%3D%225px%22%20viewBox%3D%227%2010%2010%205%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%20%20%3Cpolygon%20id%3D%22Shape%22%20stroke%3D%22none%22%20fill%3D%22%23000000%22%20fill-rule%3D%22evenodd%22%20opacity%3D%220.54%22%20points%3D%227%2010%2012%2015%2017%2010%22%3E%3C%2Fpolygon%3E%0A%3C%2Fsvg%3E");
-$webiny-theme-typography-font-family: "Source Sans Pro";
-
 // Import admin app styles
 @import "~@webiny/app-serverless-cms/styles.scss";
diff --git a/packages/cwp-template-aws/template/ddb-es/apps/api/graphql/src/index.ts b/packages/cwp-template-aws/template/ddb-es/apps/api/graphql/src/index.ts
index 6c8054f61b7..2844338ad31 100644
--- a/packages/cwp-template-aws/template/ddb-es/apps/api/graphql/src/index.ts
+++ b/packages/cwp-template-aws/template/ddb-es/apps/api/graphql/src/index.ts
@@ -16,10 +16,7 @@ import prerenderingServicePlugins from "@webiny/api-prerendering-service-aws/cli
 import dbPlugins from "@webiny/handler-db";
 import { DynamoDbDriver } from "@webiny/db-dynamodb";
 import dynamoDbPlugins from "@webiny/db-dynamodb/plugins";
-import elasticsearchClientContext, {
-    createElasticsearchClient,
-    createGzipCompression
-} from "@webiny/api-elasticsearch";
+import elasticsearchClientContext, { createElasticsearchClient } from "@webiny/api-elasticsearch";
 import { createFileManagerContext, createFileManagerGraphQL } from "@webiny/api-file-manager";
 import { createFileManagerStorageOperations } from "@webiny/api-file-manager-ddb";
 import logsPlugins from "@webiny/handler-logs";
@@ -113,12 +110,13 @@ export const handler = createHandler({
                 elasticsearch: elasticsearchClient
             })
         }),
-        createGzipCompression(),
         createApwGraphQL(),
         createApwPageBuilderContext({
             storageOperations: createApwSaStorageOperations({ documentClient })
         }),
-        createAco(),
+        createAco({
+            documentClient
+        }),
         createAcoPageBuilderContext(),
         createAcoHcmsContext(),
         createHcmsTasks(),
diff --git a/packages/cwp-template-aws/template/ddb-os/apps/api/graphql/src/index.ts b/packages/cwp-template-aws/template/ddb-os/apps/api/graphql/src/index.ts
index b2973364a13..0e6d2a51493 100644
--- a/packages/cwp-template-aws/template/ddb-os/apps/api/graphql/src/index.ts
+++ b/packages/cwp-template-aws/template/ddb-os/apps/api/graphql/src/index.ts
@@ -16,10 +16,7 @@ import prerenderingServicePlugins from "@webiny/api-prerendering-service-aws/cli
 import dbPlugins from "@webiny/handler-db";
 import { DynamoDbDriver } from "@webiny/db-dynamodb";
 import dynamoDbPlugins from "@webiny/db-dynamodb/plugins";
-import elasticsearchClientContext, {
-    createElasticsearchClient,
-    createGzipCompression
-} from "@webiny/api-elasticsearch";
+import elasticsearchClientContext, { createElasticsearchClient } from "@webiny/api-elasticsearch";
 import { createFileManagerContext, createFileManagerGraphQL } from "@webiny/api-file-manager";
 import { createFileManagerStorageOperations } from "@webiny/api-file-manager-ddb";
 import logsPlugins from "@webiny/handler-logs";
@@ -113,12 +110,13 @@ export const handler = createHandler({
                 elasticsearch: elasticsearchClient
             })
         }),
-        createGzipCompression(),
         createApwGraphQL(),
         createApwPageBuilderContext({
             storageOperations: createApwSaStorageOperations({ documentClient })
         }),
-        createAco(),
+        createAco({
+            documentClient
+        }),
         createAcoPageBuilderContext(),
         createAcoHcmsContext(),
         createHcmsTasks(),
diff --git a/packages/cwp-template-aws/template/ddb/apps/api/graphql/src/index.ts b/packages/cwp-template-aws/template/ddb/apps/api/graphql/src/index.ts
index a5ba267cb6b..0dd19816a62 100644
--- a/packages/cwp-template-aws/template/ddb/apps/api/graphql/src/index.ts
+++ b/packages/cwp-template-aws/template/ddb/apps/api/graphql/src/index.ts
@@ -103,7 +103,9 @@ export const handler = createHandler({
         createApwPageBuilderContext({
             storageOperations: createApwSaStorageOperations({ documentClient })
         }),
-        createAco(),
+        createAco({
+            documentClient
+        }),
         createAcoPageBuilderContext(),
         createAuditLogs(),
         createAcoHcmsContext(),
diff --git a/packages/feature-flags/src/index.ts b/packages/feature-flags/src/index.ts
index 1a0058ec1ca..07bc6e172d2 100644
--- a/packages/feature-flags/src/index.ts
+++ b/packages/feature-flags/src/index.ts
@@ -1,5 +1,4 @@
 export type FeatureFlags<TFeatureFlags = Record<string, any>> = {
-    experimentalAdminOmniSearch?: boolean;
     allowCmsLegacyRichTextInput?: boolean;
     cmsLegacyEntryEditor?: boolean;
     experimentalDynamicPages?: boolean;
diff --git a/packages/handler-graphql/src/createGraphQLHandler.ts b/packages/handler-graphql/src/createGraphQLHandler.ts
index ca9327ca19e..c896792c976 100644
--- a/packages/handler-graphql/src/createGraphQLHandler.ts
+++ b/packages/handler-graphql/src/createGraphQLHandler.ts
@@ -96,6 +96,13 @@ export default (options: HandlerGraphQLOptions = {}): Plugin[] => {
             }
             try {
                 const result = await processRequestBody(body, schema, context);
+                /**
+                 * IMPORTANT! Do not send anything if reply was already sent.
+                 */
+                if (reply.sent) {
+                    console.warn("Reply already sent, cannot send the result (handler-graphql).");
+                    return reply;
+                }
                 return reply.status(200).send(result);
             } catch (ex) {
                 console.error(`Error while processing the body request.`);
diff --git a/packages/handler-graphql/src/createGraphQLSchema.ts b/packages/handler-graphql/src/createGraphQLSchema.ts
index f3f54f400ac..2693ba2a42e 100644
--- a/packages/handler-graphql/src/createGraphQLSchema.ts
+++ b/packages/handler-graphql/src/createGraphQLSchema.ts
@@ -51,6 +51,18 @@ export const createGraphQLSchema = (context: Context) => {
             # as a way to tell the Prerendering Service whether the GraphQL query needs to be
             # cached or not.
             directive @ps(cache: Boolean) on QUERY
+
+            type Error {
+                code: String
+                message: String
+                data: JSON
+                stack: String
+            }
+
+            type BooleanResponse {
+                data: Boolean
+                error: Error
+            }
         `
     ];
 
diff --git a/packages/handler/src/PreHandler/SendEarlyOptionsResponse.ts b/packages/handler/src/PreHandler/SendEarlyOptionsResponse.ts
index 6e8afe99c5f..0a0a48c7c59 100644
--- a/packages/handler/src/PreHandler/SendEarlyOptionsResponse.ts
+++ b/packages/handler/src/PreHandler/SendEarlyOptionsResponse.ts
@@ -11,6 +11,9 @@ export class SendEarlyOptionsResponse implements IPreHandler {
     }
 
     async execute(request: FastifyRequest, reply: FastifyReply): Promise<Action> {
+        /**
+         * IMPORTANT! Do not send anything if reply was already sent.
+         */
         if (reply.sent) {
             /**
              * At this point throwing an exception will not do anything with the response. So just log it.
diff --git a/packages/handler/src/fastify.ts b/packages/handler/src/fastify.ts
index b987a1d7079..9a32ed8d5f1 100644
--- a/packages/handler/src/fastify.ts
+++ b/packages/handler/src/fastify.ts
@@ -268,6 +268,11 @@ export const createHandler = (params: CreateHandlerParams) => {
     app.addHook("preHandler", async (request, reply) => {
         app.webiny.request = request;
         app.webiny.reply = reply;
+        /**
+         * Default code to 200 - so we do not need to set it again.
+         * Usually we set errors manually when we use reply.send.
+         */
+        reply.code(200);
 
         const handlerOnRequestPlugins = app.webiny.plugins.byType<HandlerOnRequestPlugin>(
             HandlerOnRequestPlugin.type
@@ -317,6 +322,13 @@ export const createHandler = (params: CreateHandlerParams) => {
     });
 
     app.setErrorHandler<WebinyError>(async (error, _, reply) => {
+        /**
+         * IMPORTANT! Do not send anything if reply was already sent.
+         */
+        if (reply.sent) {
+            console.warn("Reply already sent, cannot send the result (handler:setErrorHandler).");
+            return reply;
+        }
         return reply
             .status(500)
             .headers({
@@ -347,22 +359,28 @@ export const createHandler = (params: CreateHandlerParams) => {
             console.log(error);
             console.error("Stringify error:", ex);
         }
-
-        reply
-            .status(500)
-            .headers({
-                "Cache-Control": "no-store"
-            })
-            .send(
-                /**
-                 * When we are sending the error in the response, we cannot send the whole error object, as it might contain some sensitive data.
-                 */
-                JSON.stringify({
-                    message: error.message,
-                    code: error.code,
-                    data: error.data
+        /**
+         * IMPORTANT! Do not send anything if reply was already sent.
+         */
+        if (!reply.sent) {
+            reply
+                .status(500)
+                .headers({
+                    "Cache-Control": "no-store"
                 })
-            );
+                .send(
+                    /**
+                     * When we are sending the error in the response, we cannot send the whole error object, as it might contain some sensitive data.
+                     */
+                    JSON.stringify({
+                        message: error.message,
+                        code: error.code,
+                        data: error.data
+                    })
+                );
+        } else {
+            console.warn("Reply already sent, cannot send the result (handler:addHook:onError).");
+        }
 
         const handler = middleware(
             plugins.map(pl => {
diff --git a/packages/icons/LICENSE b/packages/icons/LICENSE
new file mode 100644
index 00000000000..f772d04d4db
--- /dev/null
+++ b/packages/icons/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) Webiny
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/packages/icons/README.md b/packages/icons/README.md
new file mode 100644
index 00000000000..e571be9228d
--- /dev/null
+++ b/packages/icons/README.md
@@ -0,0 +1,6 @@
+# `@webiny/icons`
+
+This package contains icons used throughout the Webiny's Admin UI applications.
+
+> [!NOTE]
+> This package is included in every Webiny project by default, and it's not meant to be used as a standalone package.
diff --git a/packages/icons/extraIcons/push_pin_off.svg b/packages/icons/extraIcons/push_pin_off.svg
new file mode 100644
index 00000000000..a6c9b495c4b
--- /dev/null
+++ b/packages/icons/extraIcons/push_pin_off.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
+    <path d="M14 4v5c0 1.12.37 2.16 1 3H9c.65-.86 1-1.9 1-3V4h4m3-2H7c-.55 0-1 .45-1 1s.45 1 1 1h1v5c0 1.66-1.34 3-3 3v2h5.97v7l1 1 1-1v-7H19v-2c-1.66 0-3-1.34-3-3V4h1c.55 0 1-.45 1-1s-.45-1-1-1z"/>
+    <path d="M3 3l18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
+</svg>
\ No newline at end of file
diff --git a/packages/icons/package.json b/packages/icons/package.json
new file mode 100644
index 00000000000..29bad246ac2
--- /dev/null
+++ b/packages/icons/package.json
@@ -0,0 +1,24 @@
+{
+  "name": "@webiny/icons",
+  "version": "0.0.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/webiny/webiny-js.git"
+  },
+  "description": "This package contains icons used throughout the Webiny's Admin UI applications.",
+  "author": "Webiny Ltd.",
+  "license": "MIT",
+  "devDependencies": {
+    "@material-design-icons/svg": "^0.14.15",
+    "@webiny/cli": "0.0.0",
+    "rimraf": "^6.0.1"
+  },
+  "publishConfig": {
+    "access": "public",
+    "directory": "dist"
+  },
+  "scripts": {
+    "build": "yarn webiny run build"
+  },
+  "gitHead": "8476da73b653c89cc1474d968baf55c1b0ae0e5f"
+}
diff --git a/packages/icons/webiny.config.js b/packages/icons/webiny.config.js
new file mode 100644
index 00000000000..de348a81c4d
--- /dev/null
+++ b/packages/icons/webiny.config.js
@@ -0,0 +1,47 @@
+const rimraf = require("rimraf");
+const { join } = require("path");
+const fs = require("fs");
+const path = require("path");
+
+module.exports = {
+    commands: {
+        build: async () => {
+            rimraf.sync(join(__dirname, "./dist"));
+            const destDir = path.resolve(__dirname, "dist");
+            fs.mkdirSync(destDir, { recursive: true });
+
+            copyToDist("package.json");
+            copyToDist("LICENSE");
+            copyToDist("README.md");
+
+            // Copy all icons from `@material-design-icons/svg/outlined` folder to `dist` folder.
+            // We're doing this because simply re-exporting icons from `@material-ui/icons` package
+            // was not possible.
+            const pkgDirPath = path.dirname(
+                require.resolve("@material-design-icons/svg/package.json")
+            );
+            const outlinedIconsDirPath = path.resolve(pkgDirPath, "outlined");
+
+            fs.readdirSync(outlinedIconsDirPath).forEach(file => {
+                const sourceFile = path.join(outlinedIconsDirPath, file);
+                const destFile = path.join(destDir, file);
+                fs.copyFileSync(sourceFile, destFile);
+            });
+
+            // Copy all icons from `extraIcons` folder to `dist` folder.
+            const extraIconsFolderPath = "./extraIcons";
+
+            fs.readdirSync(extraIconsFolderPath).forEach(file => {
+                const sourceFile = path.join(extraIconsFolderPath, file);
+                const destFile = path.join(destDir, file);
+                fs.copyFileSync(sourceFile, destFile);
+            });
+        }
+    }
+};
+
+const copyToDist = path => {
+    const from = join(__dirname, path);
+    const to = join(__dirname, "dist", path);
+    fs.copyFileSync(from, to);
+};
diff --git a/packages/lexical-editor-pb-element/package.json b/packages/lexical-editor-pb-element/package.json
index a0655d873ad..451d69a4e31 100644
--- a/packages/lexical-editor-pb-element/package.json
+++ b/packages/lexical-editor-pb-element/package.json
@@ -4,10 +4,10 @@
   "dependencies": {
     "@emotion/styled": "11.10.6",
     "@lexical/utils": "0.23.1",
-    "@material-design-icons/svg": "^0.14.13",
     "@webiny/app-admin": "0.0.0",
     "@webiny/app-page-builder": "0.0.0",
     "@webiny/app-page-builder-elements": "0.0.0",
+    "@webiny/icons": "0.0.0",
     "@webiny/lexical-editor": "0.0.0",
     "@webiny/lexical-nodes": "0.0.0",
     "@webiny/lexical-theme": "0.0.0",
diff --git a/packages/lexical-editor-pb-element/src/index.tsx b/packages/lexical-editor-pb-element/src/index.tsx
index 48a3440f4b4..8449f332b5c 100644
--- a/packages/lexical-editor-pb-element/src/index.tsx
+++ b/packages/lexical-editor-pb-element/src/index.tsx
@@ -14,11 +14,13 @@ export * from "./LexicalEditor";
 export const LexicalEditorPlugin = () => {
     return (
         <>
-            <CompositionScope name={"pb.paragraph"}>
-                <ParagraphEditorPreset />
-            </CompositionScope>
-            <CompositionScope name={"pb.heading"}>
-                <HeadingEditorPreset />
+            <CompositionScope name={"pb.pageEditor"}>
+                <CompositionScope name={"pb.paragraph"}>
+                    <ParagraphEditorPreset />
+                </CompositionScope>
+                <CompositionScope name={"pb.heading"}>
+                    <HeadingEditorPreset />
+                </CompositionScope>
             </CompositionScope>
             <TypographyAction.TypographyDropDown element={<TypographyDropDown />} />
             {/* Block editor variables */}
diff --git a/packages/lexical-editor-pb-element/src/plugins/elementSettings/variables/LexicalVariableInputPlugin.tsx b/packages/lexical-editor-pb-element/src/plugins/elementSettings/variables/LexicalVariableInputPlugin.tsx
index 038fc2fa9d5..040fe59dd31 100644
--- a/packages/lexical-editor-pb-element/src/plugins/elementSettings/variables/LexicalVariableInputPlugin.tsx
+++ b/packages/lexical-editor-pb-element/src/plugins/elementSettings/variables/LexicalVariableInputPlugin.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useState } from "react";
-import { ReactComponent as ExpandIcon } from "@material-design-icons/svg/filled/fullscreen.svg";
+import { ReactComponent as ExpandIcon } from "@webiny/icons/fullscreen.svg";
 import { Dialog, DialogActions, DialogContent } from "@webiny/ui/Dialog";
 import { ButtonPrimary, IconButton } from "@webiny/ui/Button";
 import { useVariable } from "@webiny/app-page-builder/hooks/useVariable";
diff --git a/packages/lexical-editor/package.json b/packages/lexical-editor/package.json
index d9b4a4ed0c1..f61e58f798f 100644
--- a/packages/lexical-editor/package.json
+++ b/packages/lexical-editor/package.json
@@ -21,7 +21,6 @@
     "@webiny/react-properties": "0.0.0",
     "emotion": "10.0.27",
     "lexical": "0.23.1",
-    "lodash": "4.17.21",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },
diff --git a/packages/lexical-editor/src/commands/index.ts b/packages/lexical-editor/src/commands/index.ts
index c49e77dead5..8bd94941554 100644
--- a/packages/lexical-editor/src/commands/index.ts
+++ b/packages/lexical-editor/src/commands/index.ts
@@ -1,3 +1,4 @@
 export * from "~/commands/image";
 export * from "~/commands/list";
 export * from "~/commands/quote";
+export * from "~/commands/toolbar";
diff --git a/packages/lexical-editor/src/commands/toolbar.ts b/packages/lexical-editor/src/commands/toolbar.ts
new file mode 100644
index 00000000000..675c35273e6
--- /dev/null
+++ b/packages/lexical-editor/src/commands/toolbar.ts
@@ -0,0 +1,3 @@
+import { createCommand } from "lexical";
+
+export const HIDE_FLOATING_TOOLBAR = createCommand("HIDE_FLOATING_TOOLBAR_COMMAND");
diff --git a/packages/lexical-editor/src/components/Toolbar/Toolbar.tsx b/packages/lexical-editor/src/components/Toolbar/Toolbar.tsx
index 93df7cf33a0..481549ba4b5 100644
--- a/packages/lexical-editor/src/components/Toolbar/Toolbar.tsx
+++ b/packages/lexical-editor/src/components/Toolbar/Toolbar.tsx
@@ -15,6 +15,7 @@ import { useLexicalEditorConfig } from "~/components/LexicalEditorConfig/Lexical
 import { useDeriveValueFromSelection } from "~/hooks/useCurrentSelection";
 import { useRichTextEditor } from "~/hooks";
 import { isChildOfFloatingToolbar } from "~/utils/isChildOfFloatingToolbar";
+import { HIDE_FLOATING_TOOLBAR } from "~/commands";
 
 interface FloatingToolbarProps {
     anchorElem: HTMLElement;
@@ -127,6 +128,17 @@ const FloatingToolbar: FC<FloatingToolbarProps> = ({ anchorElem, editor }) => {
                 });
             }),
 
+            editor.registerCommand(
+                HIDE_FLOATING_TOOLBAR,
+                () => {
+                    setTimeout(() => {
+                        setIsVisible(false);
+                    }, 10);
+                    return true;
+                },
+                COMMAND_PRIORITY_LOW
+            ),
+
             editor.registerCommand(
                 SELECTION_CHANGE_COMMAND,
                 () => {
diff --git a/packages/lexical-editor/src/plugins/FloatingLinkEditorPlugin/FloatingLinkEditorPlugin.tsx b/packages/lexical-editor/src/plugins/FloatingLinkEditorPlugin/FloatingLinkEditorPlugin.tsx
index 6bb9bc04bc6..f52d53033b2 100644
--- a/packages/lexical-editor/src/plugins/FloatingLinkEditorPlugin/FloatingLinkEditorPlugin.tsx
+++ b/packages/lexical-editor/src/plugins/FloatingLinkEditorPlugin/FloatingLinkEditorPlugin.tsx
@@ -78,6 +78,7 @@ export function FloatingLinkEditor({ editor, isVisible, anchorElem }: FloatingLi
         const rootElement = editor.getRootElement();
 
         if (
+            isVisible &&
             selection !== null &&
             nativeSelection !== null &&
             rootElement !== null &&
@@ -107,7 +108,7 @@ export function FloatingLinkEditor({ editor, isVisible, anchorElem }: FloatingLi
         }
 
         return true;
-    }, [anchorElem, editor]);
+    }, [isVisible, anchorElem, editor]);
 
     const removeLink = () => {
         editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);
diff --git a/packages/lexical-editor/src/plugins/FloatingLinkEditorPlugin/useFloatingLinkEditor.tsx b/packages/lexical-editor/src/plugins/FloatingLinkEditorPlugin/useFloatingLinkEditor.tsx
index cad6ec0723d..73e78ee1272 100644
--- a/packages/lexical-editor/src/plugins/FloatingLinkEditorPlugin/useFloatingLinkEditor.tsx
+++ b/packages/lexical-editor/src/plugins/FloatingLinkEditorPlugin/useFloatingLinkEditor.tsx
@@ -1,10 +1,10 @@
-import React, { useCallback, useState, useEffect } from "react";
+import React, { useState, useEffect, useRef } from "react";
 import { createPortal } from "react-dom";
 import { useRichTextEditor } from "~/hooks";
 import { getSelectedNode } from "~/utils/getSelectedNode";
+import { BaseSelection } from "lexical";
 import { $isAutoLinkNode, $isLinkNode, TOGGLE_LINK_COMMAND } from "@webiny/lexical-nodes";
 import { isChildOfLinkEditor } from "~/plugins/FloatingLinkEditorPlugin/isChildOfLinkEditor";
-import debounce from "lodash/debounce";
 import {
     $getSelection,
     $isRangeSelection,
@@ -15,55 +15,81 @@ import {
 } from "lexical";
 import { $findMatchingParent, mergeRegister } from "@lexical/utils";
 import { FloatingLinkEditor } from "./FloatingLinkEditorPlugin";
+import { HIDE_FLOATING_TOOLBAR } from "~/commands";
 
-export function useFloatingLinkEditor(anchorElem: HTMLElement): JSX.Element | null {
-    const { editor } = useRichTextEditor();
-    const [isLink, setIsLink] = useState(false);
+const isLink = (selection: BaseSelection | null) => {
+    if (!$isRangeSelection(selection)) {
+        return;
+    }
 
-    const debounceSetIsLink = useCallback(debounce(setIsLink, 50), []);
+    const node = getSelectedNode(selection);
+    const linkParent = $findMatchingParent(node, $isLinkNode);
+    const autoLinkParent = $findMatchingParent(node, $isAutoLinkNode);
+    const isLinkOrChildOfLink = Boolean($isLinkNode(node) || linkParent);
 
-    const updateToolbar = useCallback(() => {
-        const selection = $getSelection();
-        if (!$isRangeSelection(selection)) {
-            return;
-        }
+    if (!isLinkOrChildOfLink) {
+        return false;
+    }
 
-        const node = getSelectedNode(selection);
-        const linkParent = $findMatchingParent(node, $isLinkNode);
-        const autoLinkParent = $findMatchingParent(node, $isAutoLinkNode);
-        const isLinkOrChildOfLink = Boolean($isLinkNode(node) || linkParent);
+    return linkParent !== null && autoLinkParent == null;
+};
 
-        if (!isLinkOrChildOfLink) {
-            // When hiding the toolbar, we want to hide immediately.
-            setIsLink(false);
-        }
+const isSelectionCollapsed = (selection: BaseSelection | null) => {
+    return $isRangeSelection(selection) && selection.isCollapsed();
+};
+
+const isLinkFocused = (selection: BaseSelection | null) => {
+    return isLink(selection) && isSelectionCollapsed(selection);
+};
+
+const isLinkSelected = (selection: BaseSelection | null) => {
+    return isLink(selection) && !isSelectionCollapsed(selection);
+};
 
-        if (selection.dirty) {
-            // We don't want this menu to open for auto links.
-            if (linkParent != null && autoLinkParent == null) {
-                // When showing the toolbar, we want to debounce it, because sometimes selection gets updated
-                // multiple times, and the `selection.dirty` flag goes from true to false multiple times,
-                // eventually settling on `false`, which we want to set once it has settled.
-                debounceSetIsLink(true);
-            }
+export function useFloatingLinkEditor(anchorElem: HTMLElement): JSX.Element | null {
+    const { editor } = useRichTextEditor();
+    const [isLinkEditorVisible, setShowLinkEditor] = useState(false);
+    const newLinkRef = useRef(false);
+
+    const showLinkEditor = (state: boolean) => {
+        setShowLinkEditor(state);
+        if (!state) {
+            newLinkRef.current = false;
         }
-    }, []);
+    };
 
     useEffect(() => {
         return mergeRegister(
             editor.registerCommand(
                 SELECTION_CHANGE_COMMAND,
                 () => {
-                    updateToolbar();
+                    const selection = $getSelection();
+
+                    if (isLinkFocused(selection)) {
+                        showLinkEditor(true);
+                        return false;
+                    }
+
+                    if (isLinkSelected(selection) && newLinkRef.current) {
+                        return false;
+                    }
+
+                    if (isLinkSelected(selection) && !newLinkRef.current) {
+                        showLinkEditor(false);
+                        return false;
+                    }
+
+                    showLinkEditor(false);
+
                     return false;
                 },
-                COMMAND_PRIORITY_CRITICAL
+                COMMAND_PRIORITY_LOW
             ),
             editor.registerCommand(
                 BLUR_COMMAND,
                 payload => {
                     if (!isChildOfLinkEditor(payload.relatedTarget as HTMLElement)) {
-                        setIsLink(false);
+                        showLinkEditor(false);
                     }
 
                     return false;
@@ -73,16 +99,28 @@ export function useFloatingLinkEditor(anchorElem: HTMLElement): JSX.Element | nu
             editor.registerCommand(
                 TOGGLE_LINK_COMMAND,
                 payload => {
-                    setIsLink(!!payload);
+                    const addLink = !!payload;
+
+                    if (addLink) {
+                        newLinkRef.current = true;
+                        showLinkEditor(true);
+                        editor.dispatchCommand(HIDE_FLOATING_TOOLBAR, {});
+                    } else {
+                        showLinkEditor(false);
+                    }
                     return false;
                 },
                 COMMAND_PRIORITY_CRITICAL
             )
         );
-    }, [editor, updateToolbar]);
+    }, [editor]);
 
     return createPortal(
-        <FloatingLinkEditor isVisible={isLink} editor={editor} anchorElem={anchorElem} />,
+        <FloatingLinkEditor
+            isVisible={isLinkEditorVisible}
+            editor={editor}
+            anchorElem={anchorElem}
+        />,
         anchorElem
     );
 }
diff --git a/packages/lexical-editor/src/utils/setFloatingElemPosition.ts b/packages/lexical-editor/src/utils/setFloatingElemPosition.ts
index 6260d67b88f..a50c9f4b2a8 100644
--- a/packages/lexical-editor/src/utils/setFloatingElemPosition.ts
+++ b/packages/lexical-editor/src/utils/setFloatingElemPosition.ts
@@ -1,46 +1,42 @@
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
 const VERTICAL_GAP = 10;
 const HORIZONTAL_OFFSET = 5;
 
 export function setFloatingElemPosition(
-    targetRect: ClientRect | null,
-    floatingElem: HTMLElement,
+    basePosition: ClientRect | null,
+    elementToPosition: HTMLElement,
     anchorElem: HTMLElement,
     verticalGap: number = VERTICAL_GAP,
     horizontalOffset: number = HORIZONTAL_OFFSET
 ): void {
-    const scrollerElem = anchorElem.parentElement;
+    // A small timeout gives enough time for DOM to update and provides us with correct bounding rect values.
+    setTimeout(() => {
+        const scrollerElem = anchorElem.parentElement;
 
-    if (targetRect === null || !scrollerElem) {
-        floatingElem.style.opacity = "0";
-        floatingElem.style.transform = "translate(-10000px, -10000px)";
-        return;
-    }
+        if (basePosition === null || !scrollerElem) {
+            elementToPosition.style.opacity = "0";
+            elementToPosition.style.transform = "translate(-10000px, -10000px)";
+            return;
+        }
 
-    const floatingElemRect = floatingElem.getBoundingClientRect();
-    const anchorElementRect = anchorElem.getBoundingClientRect();
-    const editorScrollerRect = scrollerElem.getBoundingClientRect();
+        const rectToPosition = elementToPosition.getBoundingClientRect();
+        const anchorElementRect = anchorElem.getBoundingClientRect();
+        const editorScrollerRect = scrollerElem.getBoundingClientRect();
 
-    let top = targetRect.top - floatingElemRect.height - verticalGap;
-    let left = targetRect.left - horizontalOffset;
+        let top = basePosition.top - rectToPosition.height - verticalGap;
+        let left = basePosition.left - horizontalOffset;
 
-    if (top < editorScrollerRect.top) {
-        top += floatingElemRect.height + targetRect.height + verticalGap * 2;
-    }
+        if (top < editorScrollerRect.top) {
+            top += rectToPosition.height + basePosition.height + verticalGap * 2;
+        }
 
-    if (left + floatingElemRect.width > editorScrollerRect.right) {
-        left = editorScrollerRect.right - floatingElemRect.width - horizontalOffset;
-    }
+        if (left + rectToPosition.width > editorScrollerRect.right) {
+            left = editorScrollerRect.right - rectToPosition.width - horizontalOffset;
+        }
 
-    top -= anchorElementRect.top;
-    left -= anchorElementRect.left;
+        top -= anchorElementRect.top;
+        left -= anchorElementRect.left;
 
-    floatingElem.style.opacity = "1";
-    floatingElem.style.transform = `translate(${left}px, ${top}px)`;
+        elementToPosition.style.opacity = "1";
+        elementToPosition.style.transform = `translate(${left}px, ${top}px)`;
+    }, 10);
 }
diff --git a/packages/lexical-theme/src/createTheme.ts b/packages/lexical-theme/src/createTheme.ts
index 450a03f1364..c81ff17c79e 100644
--- a/packages/lexical-theme/src/createTheme.ts
+++ b/packages/lexical-theme/src/createTheme.ts
@@ -1,6 +1,4 @@
 import type { EditorThemeClasses } from "lexical";
-
-import "./theme.css";
 import { ThemeEmotionMap } from "~/types";
 
 export type EditorTheme = {
diff --git a/packages/migrations/__tests__/migrations/5.41.0/001/001.data.ts b/packages/migrations/__tests__/migrations/5.41.0/001/001.data.ts
deleted file mode 100644
index 1722df993e2..00000000000
--- a/packages/migrations/__tests__/migrations/5.41.0/001/001.data.ts
+++ /dev/null
@@ -1,96 +0,0 @@
-export const testData = [
-    {
-        PK: "T#root",
-        SK: "A",
-        data: {
-            createdOn: "2023-01-25T09:37:58.183Z",
-            description: "The top-level Webiny tenant.",
-            id: "root",
-            name: "Root",
-            savedOn: "2023-01-25T09:37:58.183Z",
-            settings: {
-                domains: []
-            },
-            status: "active"
-        },
-
-        GSI1_PK: "TENANTS",
-        GSI1_SK: "T#null#2023-01-25T09:37:58.183Z",
-        TYPE: "tenancy.tenant",
-        webinyVersion: "0.0.0",
-        _ct: "2023-01-25T09:37:58.220Z",
-        _et: "TenancyTenant",
-        _md: "2023-01-25T09:37:58.220Z"
-    },
-    {
-        PK: "T#root#ADMIN_USER#e6ea2871-ba36-4494-87ac-afb73d4e7eb2",
-        SK: "A",
-        GSI1_PK: "T#root#ADMIN_USERS",
-        GSI1_SK: "admin@webiny.com",
-        id: "e6ea2871-ba36-4494-87ac-afb73d4e7eb2",
-        TYPE: "adminUsers.user",
-        _ct: "2023-01-25T09:38:16.764Z",
-        _et: "AdminUsers.User",
-        _md: "2023-01-25T09:38:16.764Z",
-        data: {
-            createdOn: "2023-01-25T09:38:16.226Z",
-            email: "admin@webiny.com",
-            firstName: "Pavel",
-            group: "63d0f879ce8f180008bb6051",
-            lastName: "Denisjuk",
-            tenant: "root",
-            webinyVersion: "0.0.0"
-        }
-    },
-    {
-        PK: "T#root#ADMIN_USER#4e1adbe9-abf4-4360-b7f4-3f00bce096d9",
-        SK: "A",
-        GSI1_PK: "T#root#ADMIN_USERS",
-        GSI1_SK: "user1@webiny.com",
-        id: "4e1adbe9-abf4-4360-b7f4-3f00bce096d9",
-        TYPE: "adminUsers.user",
-        _ct: "2023-03-10T08:44:26.330Z",
-        _et: "AdminUsers.User",
-        _md: "2023-03-10T08:44:26.331Z",
-        data: {
-            createdBy: {
-                displayName: "Pavel Denisjuk",
-                id: "e6ea2871-ba36-4494-87ac-afb73d4e7eb2",
-                type: "admin"
-            },
-            createdOn: "2023-03-10T08:44:24.401Z",
-            email: "user1@webiny.com",
-            firstName: "User 1",
-            group: "63d0f879ce8f180008bb6051",
-            lastName: "Last 1",
-            tenant: "root",
-            webinyVersion: "5.35.0-dev"
-        }
-    },
-    {
-        PK: "T#root#ADMIN_USER#640af04d40bae30008a097c5",
-        SK: "A",
-        GSI1_PK: "T#root#ADMIN_USERS",
-        GSI1_SK: "user2@webiny.com",
-        id: "640af04d40bae30008a097c5",
-        TYPE: "adminUsers.user",
-        _ct: "2023-03-10T09:03:27.732Z",
-        _et: "AdminUsers.User",
-        _md: "2023-03-10T09:03:27.733Z",
-        data: {
-            createdBy: {
-                displayName: "Pavel Denisjuk",
-                id: "e6ea2871-ba36-4494-87ac-afb73d4e7eb2",
-                type: "admin"
-            },
-            createdOn: "2023-03-10T08:54:37.618Z",
-            email: "user2@webiny.com",
-            firstName: "Modern",
-            group: "63d0f879ce8f180008bb6051",
-            team: "random-team-id",
-            lastName: "User",
-            tenant: "root",
-            webinyVersion: "5.35.0-dev"
-        }
-    }
-];
diff --git a/packages/migrations/__tests__/migrations/5.41.0/001/001.test.ts b/packages/migrations/__tests__/migrations/5.41.0/001/001.test.ts
deleted file mode 100644
index 4178a0acaac..00000000000
--- a/packages/migrations/__tests__/migrations/5.41.0/001/001.test.ts
+++ /dev/null
@@ -1,83 +0,0 @@
-import { AdminUsers_5_41_0_001 } from "~/migrations/5.41.0/001";
-import {
-    assertNotError,
-    createDdbMigrationHandler,
-    getPrimaryDynamoDbTable,
-    groupMigrations,
-    insertDynamoDbTestData,
-    logTestNameBeforeEachTest,
-    scanTable
-} from "~tests/utils";
-import { testData } from "./001.data";
-
-jest.retryTimes(0);
-
-describe("5.41.0-001", () => {
-    const table = getPrimaryDynamoDbTable();
-
-    logTestNameBeforeEachTest();
-
-    it("should not run if system is not installed", async () => {
-        const handler = createDdbMigrationHandler({ table, migrations: [AdminUsers_5_41_0_001] });
-
-        const { data, error } = await handler();
-
-        assertNotError(error);
-        const grouped = groupMigrations(data.migrations);
-
-        expect(grouped.executed.length).toBe(0);
-        expect(grouped.skipped.length).toBe(1);
-        expect(grouped.notApplicable.length).toBe(0);
-    });
-
-    it("should execute migration", async () => {
-        await insertDynamoDbTestData(table, testData);
-        const handler = createDdbMigrationHandler({ table, migrations: [AdminUsers_5_41_0_001] });
-        const { data, error } = await handler();
-
-        assertNotError(error);
-        const grouped = groupMigrations(data.migrations);
-
-        expect(grouped.executed.length).toBe(1);
-        expect(grouped.skipped.length).toBe(0);
-        expect(grouped.notApplicable.length).toBe(0);
-
-        const allUsers = await scanTable(table, {
-            index: "GSI1",
-            filters: [{ attr: "GSI1_PK", eq: "T#root#ADMIN_USERS" }]
-        });
-
-        expect(allUsers.length).toEqual(3);
-        expect(allUsers[0].data.groups).toEqual([allUsers[0].data.group]);
-        expect(allUsers[0].data.teams).toEqual([]);
-        expect(allUsers[1].data.groups).toEqual([allUsers[1].data.group]);
-        expect(allUsers[1].data.teams).toEqual([]);
-        expect(allUsers[2].data.groups).toEqual([allUsers[2].data.group]);
-        expect(allUsers[2].data.teams).toEqual(["random-team-id"]);
-    });
-
-    it("should not run migration if data is already in the expected shape", async () => {
-        await insertDynamoDbTestData(table, testData);
-        const handler = createDdbMigrationHandler({ table, migrations: [AdminUsers_5_41_0_001] });
-
-        // Should run the migration
-        {
-            process.stdout.write("[First run]\n");
-            const { data, error } = await handler();
-            assertNotError(error);
-            const grouped = groupMigrations(data.migrations);
-            expect(grouped.executed.length).toBe(1);
-        }
-
-        // Should skip the migration
-        {
-            process.stdout.write("[Second run]\n");
-            const { data, error } = await handler();
-            assertNotError(error);
-            const grouped = groupMigrations(data.migrations);
-            expect(grouped.executed.length).toBe(0);
-            expect(grouped.skipped.length).toBe(1);
-            expect(grouped.notApplicable.length).toBe(0);
-        }
-    });
-});
diff --git a/packages/migrations/__tests__/migrations/5.43.0/001/common/createdBy.ts b/packages/migrations/__tests__/migrations/5.43.0/001/common/createdBy.ts
new file mode 100644
index 00000000000..3b3faad778e
--- /dev/null
+++ b/packages/migrations/__tests__/migrations/5.43.0/001/common/createdBy.ts
@@ -0,0 +1,7 @@
+import type { CreatedBy } from "../types";
+
+export const createdBy: CreatedBy = {
+    id: "admin",
+    type: "admin",
+    displayName: "Admin"
+};
diff --git a/packages/migrations/__tests__/migrations/5.43.0/001/common/index.ts b/packages/migrations/__tests__/migrations/5.43.0/001/common/index.ts
new file mode 100644
index 00000000000..2f8412efb12
--- /dev/null
+++ b/packages/migrations/__tests__/migrations/5.43.0/001/common/index.ts
@@ -0,0 +1,3 @@
+export * from "./createdBy";
+export * from "./locales";
+export * from "./tenants";
diff --git a/packages/migrations/__tests__/migrations/5.43.0/001/common/locales.ts b/packages/migrations/__tests__/migrations/5.43.0/001/common/locales.ts
new file mode 100644
index 00000000000..50a55d122e8
--- /dev/null
+++ b/packages/migrations/__tests__/migrations/5.43.0/001/common/locales.ts
@@ -0,0 +1,57 @@
+import type { LocaleDdbItem } from "../types";
+import { createdBy } from "./createdBy";
+
+export const createLocalesData = (): LocaleDdbItem[] => {
+    return [
+        {
+            PK: `T#root#I18N#L`,
+            SK: "en-US",
+            code: "en-US",
+            default: true,
+            createdOn: "2023-01-25T09:37:58.220Z",
+            createdBy,
+            tenant: "root",
+            webinyVersion: "0.0.0"
+        },
+        {
+            PK: `T#root#I18N#L`,
+            SK: "de-DE",
+            code: "de-DE",
+            default: false,
+            createdOn: "2023-01-25T09:37:58.220Z",
+            createdBy,
+            tenant: "root",
+            webinyVersion: "0.0.0"
+        },
+        {
+            PK: `T#root#I18N#L`,
+            SK: "fr-FR",
+            code: "fr-FR",
+            default: false,
+            createdOn: "2023-01-25T09:37:58.220Z",
+            createdBy,
+            tenant: "root",
+            webinyVersion: "0.0.0"
+        },
+        {
+            PK: `T#otherTenant#I18N#L`,
+            SK: "fr-FR",
+            code: "fr-FR",
+            default: false,
+            createdOn: "2023-01-25T09:37:58.220Z",
+            createdBy,
+            tenant: "otherTenant",
+            webinyVersion: "0.0.0"
+        },
+        {
+            PK: `T#otherTenant#I18N#L`,
+            SK: "de-DE",
+            code: "de-DE",
+            default: true,
+            createdOn: "2023-01-25T09:37:58.220Z",
+            createdBy,
+            tenant: "otherTenant",
+            webinyVersion: "0.0.0"
+        }
+    ];
+};
diff --git a/packages/migrations/__tests__/migrations/5.43.0/001/common/tenants.ts b/packages/migrations/__tests__/migrations/5.43.0/001/common/tenants.ts
new file mode 100644
index 00000000000..23917e57794
--- /dev/null
+++ b/packages/migrations/__tests__/migrations/5.43.0/001/common/tenants.ts
@@ -0,0 +1,48 @@
+import type { TenantDdbItem } from "../types";
+import { createdBy } from "./createdBy";
+
+export const createTenantsData = (): TenantDdbItem[] => {
+    return [
+        {
+            PK: "T#root",
+            SK: "A",
+            createdOn: "2023-01-25T09:37:58.183Z",
+            description: "The top-level Webiny tenant.",
+            GSI1_PK: "TENANTS",
+            GSI1_SK: "T#null#2023-01-25T09:37:58.183Z",
+            data: {
+                id: "root",
+                name: "Root",
+                savedOn: "2023-01-25T09:37:58.183Z",
+                settings: {
+                    domains: []
+                },
+                status: "active",
+                TYPE: "tenancy.tenant",
+                webinyVersion: "0.0.0",
+                createdBy
+            }
+        },
+        {
+            PK: "T#otherTenant",
+            SK: "A",
+            createdOn: "2023-03-11T09:59:17.327Z",
+            description: "Tenant #1",
+            GSI1_PK: "TENANTS",
+            GSI1_SK: "T#root#2023-03-11T09:59:17.327Z",
+            data: {
+                id: "otherTenant",
+                name: "Other Tenant",
+                parent: "root",
+                savedOn: "2023-03-11T09:59:17.327Z",
+                settings: {
+                    domains: []
+                },
+                status: "active",
+                TYPE: "tenancy.tenant",
+                webinyVersion: "0.0.0",
+                createdBy
+            }
+        }
+    ];
+};
diff --git a/packages/migrations/__tests__/migrations/5.43.0/001/constants.ts b/packages/migrations/__tests__/migrations/5.43.0/001/constants.ts
new file mode 100644
index 00000000000..91c79d4c2c6
--- /dev/null
+++ b/packages/migrations/__tests__/migrations/5.43.0/001/constants.ts
@@ -0,0 +1,2 @@
+export const ACO_FOLDER_MODEL_ID = "acoFolder";
+export const TASK_MODEL_ID = "webinyTask";
diff --git a/packages/migrations/__tests__/migrations/5.43.0/001/data.ts b/packages/migrations/__tests__/migrations/5.43.0/001/data.ts
new file mode 100644
index 00000000000..0f9bddfcf0c
--- /dev/null
+++ b/packages/migrations/__tests__/migrations/5.43.0/001/data.ts
@@ -0,0 +1,133 @@
+export const createFolderData = () => {
+    return [
+        // Root folders with their own permissions
+        {
+            id: "test1",
+            parentId: null,
+            title: "Test 1",
+            slug: "test-1",
+            permissions: [
+                {
+                    target: "admin:user-1",
+                    level: "owner"
+                },
+                {
+                    target: "team:team-1",
+                    level: "viewer"
+                }
+            ]
+        },
+        {
+            id: "test2",
+            parentId: null,
+            title: "Test 2",
+            slug: "test-2",
+            permissions: [
+                {
+                    target: "admin:user-2",
+                    level: "owner"
+                }
+            ]
+        },
+        {
+            id: "test3",
+            parentId: null,
+            title: "Test 3",
+            slug: "test-3",
+            permissions: null // Null permissions
+        },
+        // Test1 children with inherited permissions
+        {
+            id: "test1-1",
+            parentId: "test1",
+            title: "Test 1-1",
+            slug: "test-1-1",
+            permissions: null // Null permissions
+        },
+        {
+            id: "test1-2",
+            parentId: "test1",
+            title: "Test 1-2",
+            slug: "test-1-2",
+            permissions: [
+                {
+                    target: "team:team-1",
+                    level: "editor" // Override inherited permission
+                }
+            ]
+        },
+        // Test2 children with mixed permissions
+        {
+            id: "test2-1",
+            parentId: "test2",
+            title: "Test 2-1",
+            slug: "test-2-1",
+            permissions: [
+                {
+                    target: "admin:user-2",
+                    level: "editor" // Override inherited permission
+                },
+                {
+                    target: "admin:user-1",
+                    level: "editor" // Additional permission
+                }
+            ]
+        },
+        {
+            id: "test2-2",
+            parentId: "test2",
+            title: "Test 2-2",
+            slug: "test-2-2",
+            permissions: null // Null permissions
+        },
+        // Test3 children with various scenarios
+        {
+            id: "test3-1",
+            parentId: "test3",
+            title: "Test 3-1",
+            slug: "test-3-1",
+            permissions: [
+                {
+                    target: "team:team-1",
+                    level: "owner"
+                }
+            ]
+        },
+        {
+            id: "test3-2",
+            parentId: "test3",
+            title: "Test 3-2",
+            slug: "test-3-2",
+            permissions: null // Null permissions
+        },
+        {
+            id: "test3-3",
+            parentId: "test3",
+            title: "Test 3-3",
+            slug: "test-3-3",
+            permissions: [
+                {
+                    target: "admin:user-1",
+                    level: "viewer"
+                },
+                {
+                    target: "admin:user-2",
+                    level: "editor"
+                }
+            ]
+        },
+        // Deep nested folder with inherited permissions from ancestor
+        {
+            id: "test1-1-1",
+            parentId: "test1-1",
+            title: "Test 1-1-1",
+            slug: "test-1-1-1",
+            permissions: [
+                {
+                    target: "team:team-1",
+                    level: "owner" // Override inherited permission
+                }
+            ]
+        }
+    ];
+};
diff --git a/packages/migrations/__tests__/migrations/5.43.0/001/ddb-es/001.test.ts b/packages/migrations/__tests__/migrations/5.43.0/001/ddb-es/001.test.ts
new file mode 100644
index 00000000000..b8365875beb
--- /dev/null
+++ b/packages/migrations/__tests__/migrations/5.43.0/001/ddb-es/001.test.ts
@@ -0,0 +1,172 @@
+import { createElasticsearchClient } from "@webiny/project-utils/testing/elasticsearch/createClient";
+
+import {
+    assertNotError,
+    createDdbEsMigrationHandler,
+    getDynamoToEsTable,
+    getPrimaryDynamoDbTable,
+    groupMigrations,
+    insertDynamoDbTestData as insertTestData,
+    logTestNameBeforeEachTest
+} from "~tests/utils";
+import { Flp_5_43_0_001 } from "~/migrations/5.43.0/001/ddb-es";
+import { createLocalesData, createTenantsData } from "../common";
+
+import { StepFunctionService } from "@webiny/tasks/service/StepFunctionServicePlugin";
+import { esCreateIndex } from "~/utils";
+import { ACO_FOLDER_MODEL_ID } from "~tests/migrations/5.43.0/001/constants";
+
+jest.mock("@webiny/tasks/service/StepFunctionServicePlugin", () => {
+    const sendMock = jest.fn().mockResolvedValue({
+        tenant: "mockTenant",
+        locale: "mockLocale",
+        id: "mockId",
+        definitionId: "mockDefId",
+        name: "mockTask",
+        input: { type: "*" }
+    });
+
+    const StepFunctionService = jest.fn().mockImplementation(() => ({
+        send: sendMock
+    }));
+
+    // Explicitly mock the prototype's send method
+    StepFunctionService.prototype.send = sendMock;
+
+    return {
+        StepFunctionService,
+        __esModule: true,
+        sendMock // Export the mock for testing
+    };
+});
+
+jest.retryTimes(0);
+jest.setTimeout(900000);
+
+describe("5.43.0-001 DDB + ES", () => {
+    const ddbTable = getPrimaryDynamoDbTable();
+    const ddbToEsTable = getDynamoToEsTable();
+    const elasticsearchClient = createElasticsearchClient();
+
+    beforeEach(async () => {
+        process.env.ELASTIC_SEARCH_INDEX_PREFIX =
+            new Date().toISOString().replace(/\.|\:/g, "-").toLowerCase() + "-";
+
+        await elasticsearchClient.indices.deleteAll();
+    });
+
+    afterEach(async () => {
+        await elasticsearchClient.indices.deleteAll();
+    });
+
+    const insertEmptyFolderIndexes = async () => {
+        const tenants = createTenantsData().map(tenant => tenant.data.id);
+        const testLocales = createLocalesData();
+
+        for (const tenant of tenants) {
+            const locales = testLocales
+                .filter(item => item.PK === `T#${tenant}#I18N#L`)
+                .map(locale => locale.code) as string[];
+
+            for (const locale of locales) {
+                await esCreateIndex({
+                    elasticsearchClient,
+                    tenant,
+                    locale,
+                    type: ACO_FOLDER_MODEL_ID,
+                    isHeadlessCmsModel: true
+                });
+            }
+        }
+    };
+
+    logTestNameBeforeEachTest();
+
+    it("should not run if no tenant found", async () => {
+        const handler = createDdbEsMigrationHandler({
+            primaryTable: ddbTable,
+            dynamoToEsTable: ddbToEsTable,
+            elasticsearchClient,
+            migrations: [Flp_5_43_0_001]
+        });
+
+        const { data, error } = await handler();
+
+        assertNotError(error);
+        const grouped = groupMigrations(data.migrations);
+
+        expect(grouped.executed.length).toBe(0);
+        expect(grouped.skipped.length).toBe(1);
+        expect(grouped.notApplicable.length).toBe(0);
+    });
+
+    it("should not run if no locale found", async () => {
+        await insertTestData(ddbTable, [...createTenantsData()]);
+
+        const handler = createDdbEsMigrationHandler({
+            primaryTable: ddbTable,
+            dynamoToEsTable: ddbToEsTable,
+            elasticsearchClient,
+            migrations: [Flp_5_43_0_001]
+        });
+
+        const { data, error } = await handler();
+
+        assertNotError(error);
+        const grouped = groupMigrations(data.migrations);
+
+        expect(grouped.executed.length).toBe(0);
+        expect(grouped.skipped.length).toBe(1);
+        expect(grouped.notApplicable.length).toBe(0);
+    });
+
+    it("should not run if no folders found", async () => {
+        await insertTestData(ddbTable, [...createTenantsData(), ...createLocalesData()]);
+
+        const handler = createDdbEsMigrationHandler({
+            primaryTable: ddbTable,
+            dynamoToEsTable: ddbToEsTable,
+            elasticsearchClient,
+            migrations: [Flp_5_43_0_001]
+        });
+
+        const { data, error } = await handler();
+
+        assertNotError(error);
+        const grouped = groupMigrations(data.migrations);
+
+        expect(grouped.executed.length).toBe(0);
+        expect(grouped.skipped.length).toBe(1);
+        expect(grouped.notApplicable.length).toBe(0);
+    });
+
+    it("should execute migration", async () => {
+        await insertTestData(ddbTable, [...createTenantsData(), ...createLocalesData()]);
+        await insertEmptyFolderIndexes();
+
+        const handler = createDdbEsMigrationHandler({
+            primaryTable: ddbTable,
+            dynamoToEsTable: ddbToEsTable,
+            elasticsearchClient,
+            migrations: [Flp_5_43_0_001]
+        });
+
+        const { data, error } = await handler();
+
+        assertNotError(error);
+        const grouped = groupMigrations(data.migrations);
+
+        expect(grouped.executed.length).toBe(1);
+        expect(grouped.skipped.length).toBe(0);
+        expect(grouped.notApplicable.length).toBe(0);
+
+        expect(StepFunctionService.prototype.send).toHaveBeenCalledTimes(5);
+        expect(StepFunctionService.prototype.send).toHaveBeenCalledWith(
+            {
+                definitionId: "acoSyncFlp",
+                id: expect.any(String)
+            },
+            0
+        );
+    });
+});
diff --git a/packages/migrations/__tests__/migrations/5.43.0/001/ddb/001.test.ts b/packages/migrations/__tests__/migrations/5.43.0/001/ddb/001.test.ts
new file mode 100644
index 00000000000..62cc09dc3aa
--- /dev/null
+++ b/packages/migrations/__tests__/migrations/5.43.0/001/ddb/001.test.ts
@@ -0,0 +1,115 @@
+import {
+    assertNotError,
+    createDdbMigrationHandler,
+    getPrimaryDynamoDbTable,
+    groupMigrations,
+    insertDynamoDbTestData as insertTestData,
+    logTestNameBeforeEachTest
+} from "~tests/utils";
+import { Flp_5_43_0_001 } from "~/migrations/5.43.0/001/ddb";
+import { insertTestFolders } from "../insertTestFolders";
+import { createLocalesData, createTenantsData } from "../common";
+
+import { StepFunctionService } from "@webiny/tasks/service/StepFunctionServicePlugin";
+jest.mock("@webiny/tasks/service/StepFunctionServicePlugin", () => {
+    const sendMock = jest.fn().mockResolvedValue({
+        tenant: "mockTenant",
+        locale: "mockLocale",
+        id: "mockId",
+        definitionId: "mockDefId",
+        name: "mockTask",
+        input: { type: "*" }
+    });
+
+    const StepFunctionService = jest.fn().mockImplementation(() => ({
+        send: sendMock
+    }));
+
+    // Explicitly mock the prototype's send method
+    StepFunctionService.prototype.send = sendMock;
+
+    return {
+        StepFunctionService,
+        __esModule: true,
+        sendMock // Export the mock for testing
+    };
+});
+
+jest.retryTimes(0);
+jest.setTimeout(900000);
+
+describe("5.43.0-001 - DDB", () => {
+    const table = getPrimaryDynamoDbTable();
+
+    logTestNameBeforeEachTest();
+
+    it("should not run if no tenant found", async () => {
+        const handler = createDdbMigrationHandler({ table, migrations: [Flp_5_43_0_001] });
+
+        const { data, error } = await handler();
+
+        assertNotError(error);
+        const grouped = groupMigrations(data.migrations);
+
+        expect(grouped.executed.length).toBe(0);
+        expect(grouped.skipped.length).toBe(1);
+        expect(grouped.notApplicable.length).toBe(0);
+    });
+
+    it("should not run if no locale found", async () => {
+        await insertTestData(table, [...createTenantsData()]);
+
+        const handler = createDdbMigrationHandler({ table, migrations: [Flp_5_43_0_001] });
+
+        const { data, error } = await handler();
+
+        assertNotError(error);
+        const grouped = groupMigrations(data.migrations);
+
+        expect(grouped.executed.length).toBe(0);
+        expect(grouped.skipped.length).toBe(1);
+        expect(grouped.notApplicable.length).toBe(0);
+    });
+
+    it("should not run if no folders found", async () => {
+        await insertTestData(table, [...createTenantsData(), ...createLocalesData()]);
+
+        const handler = createDdbMigrationHandler({ table, migrations: [Flp_5_43_0_001] });
+
+        const { data, error } = await handler();
+
+        assertNotError(error);
+        const grouped = groupMigrations(data.migrations);
+
+        expect(grouped.executed.length).toBe(0);
+        expect(grouped.skipped.length).toBe(1);
+        expect(grouped.notApplicable.length).toBe(0);
+    });
+
+    it("should execute migration", async () => {
+        await insertTestData(table, [...createTenantsData(), ...createLocalesData()]);
+        await insertTestFolders(table, "cms:article");
+
+        const handler = createDdbMigrationHandler({
+            table,
+            migrations: [Flp_5_43_0_001]
+        });
+        const { data, error } = await handler();
+
+        assertNotError(error);
+        const grouped = groupMigrations(data.migrations);
+
+        expect(grouped.executed.length).toBe(1);
+        expect(grouped.skipped.length).toBe(0);
+        expect(grouped.notApplicable.length).toBe(0);
+
+        expect(StepFunctionService.prototype.send).toHaveBeenCalledTimes(5);
+        expect(StepFunctionService.prototype.send).toHaveBeenCalledWith(
+            {
+                definitionId: "acoSyncFlp",
+                id: expect.any(String)
+            },
+            0
+        );
+    });
+});
diff --git a/packages/migrations/__tests__/migrations/5.43.0/001/insertTestFolders.ts b/packages/migrations/__tests__/migrations/5.43.0/001/insertTestFolders.ts
new file mode 100644
index 00000000000..4136cae625b
--- /dev/null
+++ b/packages/migrations/__tests__/migrations/5.43.0/001/insertTestFolders.ts
@@ -0,0 +1,81 @@
+import { Table } from "@webiny/db-dynamodb/toolbox";
+import { insertDynamoDbTestData } from "~tests/utils";
+import { ACO_FOLDER_MODEL_ID } from "~/migrations/5.43.0/001/constants";
+import { createFolderData } from "./data";
+import { createLocalesData, createTenantsData } from "./common";
+
+export const insertTestFolders = async (table: Table<string, string, string>, type: string) => {
+    const tenants = createTenantsData().map(tenant => tenant.data.id);
+    const testLocales = createLocalesData();
+
+    const data = [];
+    const items = [];
+
+    for (const tenant of tenants) {
+        const locales = testLocales
+            .filter(item => item.PK === `T#${tenant}#I18N#L`)
+            .map(locale => locale.code);
+        for (const locale of locales) {
+            const foldersData = createFolderData();
+
+            data.push(...foldersData);
+
+            for (const folder of foldersData) {
+                const { id, parentId, title, slug, permissions } = folder;
+
+                const partitionKey = `T#${tenant}#L#${locale}#CMS#CME#CME#${id}`;
+
+                const values = {
+                    "text@title": title,
+                    "text@slug": slug,
+                    "text@parentId": parentId ? `${parentId}#0001` : null,
+                    "object@permissions": permissions,
+                    "text@type": type
+                };
+                /**
+                 * Exact entry revision.
+                 */
+                items.push({
+                    PK: partitionKey,
+                    SK: "REV#0001",
+                    GSI1_PK: `T#${tenant}#L#${locale}#CMS#CME#M#${ACO_FOLDER_MODEL_ID}#A`,
+                    GSI1_SK: `${id}#0001`,
+                    id: `${id}#0001`,
+                    entryId: id,
+                    locale,
+                    locked: false,
+                    modelId: ACO_FOLDER_MODEL_ID,
+                    status: "draft",
+                    tenant,
+                    TYPE: "cms.entry",
+                    values
+                });
+                /**
+                 * Latest entry revision.
+                 */
+                items.push({
+                    PK: partitionKey,
+                    SK: "L",
+                    GSI1_PK: `T#${tenant}#L#${locale}#CMS#CME#M#${ACO_FOLDER_MODEL_ID}#L`,
+                    GSI1_SK: `${id}#0001`,
+                    id: `${id}#0001`,
+                    entryId: id,
+                    locale,
+                    locked: false,
+                    modelId: ACO_FOLDER_MODEL_ID,
+                    status: "draft",
+                    tenant,
+                    TYPE: "cms.entry.l",
+                    values
+                });
+            }
+        }
+    }
+
+    await insertDynamoDbTestData(table, items);
+
+    return {
+        foldersData: data,
+        folderItems: items
+    };
+};
diff --git a/packages/migrations/__tests__/migrations/5.43.0/001/types.ts b/packages/migrations/__tests__/migrations/5.43.0/001/types.ts
new file mode 100644
index 00000000000..6bce9ac031d
--- /dev/null
+++ b/packages/migrations/__tests__/migrations/5.43.0/001/types.ts
@@ -0,0 +1,38 @@
+export interface CreatedBy {
+    id: string;
+    type: string;
+    displayName: string;
+}
+
+export interface LocaleDdbItem {
+    PK: string;
+    SK: string;
+    code: string;
+    default: boolean;
+    createdOn: string;
+    createdBy: CreatedBy;
+    tenant: string;
+    webinyVersion: string;
+}
+
+export interface TenantDdbItem {
+    PK: string;
+    SK: string;
+    createdOn: string;
+    description: string;
+    GSI1_PK: string;
+    GSI1_SK: string;
+    data: {
+        id: string;
+        name: string;
+        parent?: string | null;
+        savedOn: string;
+        settings: {
+            domains: string[];
+        };
+        status: string;
+        TYPE: string;
+        webinyVersion: string;
+        createdBy: CreatedBy;
+    };
+}
diff --git a/packages/migrations/__tests__/utils/getDecompressedData.ts b/packages/migrations/__tests__/utils/getDecompressedData.ts
index 1c75693b159..9fff3b6aa3d 100644
--- a/packages/migrations/__tests__/utils/getDecompressedData.ts
+++ b/packages/migrations/__tests__/utils/getDecompressedData.ts
@@ -1,7 +1,10 @@
-import { createGzipCompression } from "@webiny/api-elasticsearch";
+import { PluginsContainer } from "@webiny/plugins";
+import { createDefaultCompressor } from "@webiny/utils/compression";
 
-export const getDecompressedData = async <R = any>(data: any): Promise<R> => {
-    const compression = createGzipCompression();
+const compressor = createDefaultCompressor({
+    plugins: new PluginsContainer()
+});
 
-    return (await compression.decompress(data)) as unknown as R;
+export const getDecompressedData = async <R = any>(data: any): Promise<R> => {
+    return await compressor.decompress<R>(data);
 };
diff --git a/packages/migrations/package.json b/packages/migrations/package.json
index 3ece05716d8..4bbcdba85f0 100644
--- a/packages/migrations/package.json
+++ b/packages/migrations/package.json
@@ -14,6 +14,7 @@
     "@webiny/error": "0.0.0",
     "@webiny/ioc": "0.0.0",
     "@webiny/logger": "0.0.0",
+    "@webiny/tasks": "0.0.0",
     "@webiny/utils": "0.0.0",
     "lodash": "^4.17.21"
   },
diff --git a/packages/migrations/src/ddb-es.ts b/packages/migrations/src/ddb-es.ts
index 508e0be1d07..c589b6fd0f5 100644
--- a/packages/migrations/src/ddb-es.ts
+++ b/packages/migrations/src/ddb-es.ts
@@ -1,8 +1,8 @@
 // We only list current version migrations here. No need to have them all
 // listed, as we only need the latest version migrations to be executed.
 // This also helps with keeping the bundle size down / faster boot times.
-import { AdminUsers_5_41_0_001 } from "~/migrations/5.41.0/001";
+import { Flp_5_43_0_001 } from "~/migrations/5.43.0/001/ddb-es/";
 
 export const migrations = () => {
-    return [AdminUsers_5_41_0_001];
+    return [Flp_5_43_0_001];
 };
diff --git a/packages/migrations/src/ddb.ts b/packages/migrations/src/ddb.ts
index 508e0be1d07..370e440af39 100644
--- a/packages/migrations/src/ddb.ts
+++ b/packages/migrations/src/ddb.ts
@@ -1,8 +1,8 @@
 // We only list current version migrations here. No need to have them all
 // listed, as we only need the latest version migrations to be executed.
 // This also helps with keeping the bundle size down / faster boot times.
-import { AdminUsers_5_41_0_001 } from "~/migrations/5.41.0/001";
+import { Flp_5_43_0_001 } from "~/migrations/5.43.0/001/ddb";
 
 export const migrations = () => {
-    return [AdminUsers_5_41_0_001];
+    return [Flp_5_43_0_001];
 };
diff --git a/packages/migrations/src/migrations/5.41.0/001/createTenantEntity.ts b/packages/migrations/src/migrations/5.41.0/001/createTenantEntity.ts
deleted file mode 100644
index 92d093f5100..00000000000
--- a/packages/migrations/src/migrations/5.41.0/001/createTenantEntity.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import { Table } from "@webiny/db-dynamodb/toolbox";
-import { createLegacyEntity } from "~/utils";
-
-export const createTenantEntity = (table: Table<string, string, string>) => {
-    return createLegacyEntity(table, "TenancyTenant", {
-        id: {
-            type: "string"
-        },
-        name: {
-            type: "string"
-        },
-        description: {
-            type: "string"
-        },
-        status: {
-            type: "string",
-            default: "active"
-        },
-        createdOn: {
-            type: "string"
-        },
-        savedOn: {
-            type: "string"
-        },
-        createdBy: {
-            type: "map"
-        },
-        parent: {
-            type: "string"
-        },
-        webinyVersion: {
-            type: "string"
-        },
-        settings: {
-            type: "map",
-            default: {}
-        }
-    });
-};
diff --git a/packages/migrations/src/migrations/5.41.0/001/createUserEntity.ts b/packages/migrations/src/migrations/5.41.0/001/createUserEntity.ts
deleted file mode 100644
index 03a3f6fb35d..00000000000
--- a/packages/migrations/src/migrations/5.41.0/001/createUserEntity.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-import { Table } from "@webiny/db-dynamodb/toolbox";
-import { createLegacyEntity, createStandardEntity } from "~/utils";
-
-const attributes: Parameters<typeof createLegacyEntity>[2] = {
-    id: {
-        type: "string"
-    },
-    tenant: {
-        type: "string"
-    },
-    email: {
-        type: "string"
-    },
-    firstName: {
-        type: "string"
-    },
-    lastName: {
-        type: "string"
-    },
-    avatar: {
-        type: "map"
-    },
-    createdBy: {
-        type: "map"
-    },
-    createdOn: {
-        type: "string"
-    },
-    group: {
-        type: "string"
-    },
-    team: {
-        type: "string"
-    },
-    groups: {
-        type: "map"
-    },
-    teams: {
-        type: "map"
-    },
-    webinyVersion: {
-        type: "string"
-    }
-};
-
-export const createUserEntity = (table: Table<string, string, string>) => {
-    return createStandardEntity(table, "AdminUsers.User", attributes);
-};
diff --git a/packages/migrations/src/migrations/5.41.0/001/index.ts b/packages/migrations/src/migrations/5.41.0/001/index.ts
deleted file mode 100644
index 0b03031b3f0..00000000000
--- a/packages/migrations/src/migrations/5.41.0/001/index.ts
+++ /dev/null
@@ -1,99 +0,0 @@
-import { Table } from "@webiny/db-dynamodb/toolbox";
-import { DataMigrationContext } from "@webiny/data-migration";
-import { PrimaryDynamoTableSymbol } from "@webiny/data-migration/symbols";
-import { queryAll, queryOne } from "~/utils";
-import { createTenantEntity } from "./createTenantEntity";
-import { createUserEntity } from "./createUserEntity";
-import { inject, makeInjectable } from "@webiny/ioc";
-import { executeWithRetry } from "@webiny/utils";
-import { createEntityWriteBatch } from "@webiny/db-dynamodb";
-
-export class AdminUsers_5_41_0_001 {
-    private readonly newUserEntity: ReturnType<typeof createUserEntity>;
-    private readonly tenantEntity: ReturnType<typeof createTenantEntity>;
-
-    constructor(table: Table<string, string, string>) {
-        this.newUserEntity = createUserEntity(table);
-        this.tenantEntity = createTenantEntity(table);
-    }
-
-    getId() {
-        return "5.41.0-001";
-    }
-
-    getDescription() {
-        return "Introduce 'groups' and 'teams` properties (old 'group' and 'team' are no longer in use)";
-    }
-
-    async shouldExecute({ logger }: DataMigrationContext): Promise<boolean> {
-        const user = await queryOne<{ data: any }>({
-            entity: this.newUserEntity,
-            partitionKey: `T#root#ADMIN_USERS`,
-            options: {
-                index: "GSI1",
-                gt: " "
-            }
-        });
-
-        if (!user) {
-            logger.info(`No users were found; skipping migration.`);
-            return false;
-        }
-
-        if (Array.isArray(user.data.groups)) {
-            logger.info(`User records seems to be in order; skipping migration.`);
-            return false;
-        }
-
-        return true;
-    }
-
-    async execute({ logger }: DataMigrationContext): Promise<void> {
-        const tenants = await queryAll<{ data: { id: string; name: string } }>({
-            entity: this.tenantEntity,
-            partitionKey: "TENANTS",
-            options: {
-                index: "GSI1",
-                gt: " "
-            }
-        });
-
-        for (const tenant of tenants) {
-            const users = await queryAll<{ id: string; email: string; data?: any }>({
-                entity: this.newUserEntity,
-                partitionKey: `T#${tenant.data.id}#ADMIN_USERS`,
-                options: {
-                    index: "GSI1",
-                    gt: " "
-                }
-            });
-
-            if (users.length === 0) {
-                logger.info(`No users found on tenant "${tenant.data.id}".`);
-                continue;
-            }
-
-            const newUsersEntityBatch = createEntityWriteBatch({
-                entity: this.newUserEntity,
-                put: users
-                    .filter(user => !Array.isArray(user.data.groups))
-                    .map(user => {
-                        return {
-                            ...user,
-                            data: {
-                                ...user.data,
-                                groups: [user.data.group].filter(Boolean),
-                                teams: [user.data.team].filter(Boolean)
-                            }
-                        };
-                    })
-            });
-
-            await executeWithRetry(async () => {
-                return await newUsersEntityBatch.execute();
-            });
-        }
-    }
-}
-
-makeInjectable(AdminUsers_5_41_0_001, [inject(PrimaryDynamoTableSymbol)]);
diff --git a/packages/migrations/src/migrations/5.43.0/001/constants.ts b/packages/migrations/src/migrations/5.43.0/001/constants.ts
new file mode 100644
index 00000000000..91c79d4c2c6
--- /dev/null
+++ b/packages/migrations/src/migrations/5.43.0/001/constants.ts
@@ -0,0 +1,2 @@
+export const ACO_FOLDER_MODEL_ID = "acoFolder";
+export const TASK_MODEL_ID = "webinyTask";
diff --git a/packages/migrations/src/migrations/5.43.0/001/ddb-es/index.ts b/packages/migrations/src/migrations/5.43.0/001/ddb-es/index.ts
new file mode 100644
index 00000000000..81871ca23c6
--- /dev/null
+++ b/packages/migrations/src/migrations/5.43.0/001/ddb-es/index.ts
@@ -0,0 +1,304 @@
+import { Table } from "@webiny/db-dynamodb/toolbox";
+import { Client } from "@elastic/elasticsearch";
+import { inject, makeInjectable } from "@webiny/ioc";
+import { DataMigration, DataMigrationContext } from "@webiny/data-migration";
+import {
+    PrimaryDynamoTableSymbol,
+    ElasticsearchDynamoTableSymbol,
+    ElasticsearchClientSymbol
+} from "@webiny/data-migration/symbols";
+import {
+    forEachTenantLocale,
+    esGetIndexExist,
+    batchWriteAll,
+    esGetIndexName,
+    getCompressedData
+} from "~/utils";
+import { createDdbEntryEntity, createDdbEsEntryEntity } from "../entities/createEntryEntity";
+import { ACO_FOLDER_MODEL_ID, TASK_MODEL_ID } from "../constants";
+import type { TaskEntryEventPayload } from "~/migrations/5.43.0/001/types";
+import { generateAlphaNumericId, parseIdentifier, executeWithRetry } from "@webiny/utils";
+import { StepFunctionService } from "@webiny/tasks/service/StepFunctionServicePlugin";
+
+export class Flp_5_43_0_001 implements DataMigration {
+    private readonly table: Table<string, string, string>;
+    private readonly elasticsearchClient: Client;
+    private readonly ddbEntryEntity: ReturnType<typeof createDdbEntryEntity>;
+    private readonly ddbEsEntryEntity: ReturnType<typeof createDdbEsEntryEntity>;
+
+    constructor(
+        table: Table<string, string, string>,
+        esTable: Table<string, string, string>,
+        elasticsearchClient: Client
+    ) {
+        this.table = table;
+        this.elasticsearchClient = elasticsearchClient;
+        this.ddbEntryEntity = createDdbEntryEntity(table);
+        this.ddbEsEntryEntity = createDdbEsEntryEntity(esTable);
+    }
+
+    getId() {
+        return "5.43.0-001";
+    }
+
+    getDescription() {
+        return "Introduce 'flp' entities";
+    }
+
+    async shouldExecute({ logger }: DataMigrationContext) {
+        let shouldExecute = false;
+
+        await forEachTenantLocale({
+            table: this.table,
+            logger,
+            callback: async ({ tenantId, localeCode }) => {
+                shouldExecute = true;
+
+                const indexExists = await esGetIndexExist({
+                    elasticsearchClient: this.elasticsearchClient,
+                    tenant: tenantId,
+                    locale: localeCode,
+                    type: ACO_FOLDER_MODEL_ID,
+                    isHeadlessCmsModel: true
+                });
+
+                if (!indexExists) {
+                    logger.info(
+                        `No Elasticsearch index found for folders in tenant "${tenantId}" and locale "${localeCode}"; skipping.`
+                    );
+                    shouldExecute = false;
+                    return false;
+                }
+
+                // Continue to the next locale.
+                return shouldExecute;
+            }
+        });
+
+        return shouldExecute;
+    }
+
+    async execute({ logger }: DataMigrationContext) {
+        await forEachTenantLocale({
+            table: this.table,
+            logger,
+            callback: async ({ tenantId, localeCode }) => {
+                logger.info(`Starting migration for tenant ${tenantId} / locale ${localeCode}`);
+
+                const indexExists = await esGetIndexExist({
+                    elasticsearchClient: this.elasticsearchClient,
+                    tenant: tenantId,
+                    locale: localeCode,
+                    type: ACO_FOLDER_MODEL_ID,
+                    isHeadlessCmsModel: true
+                });
+
+                if (!indexExists) {
+                    logger.info(
+                        `No Elasticsearch index found for folders in tenant "${tenantId}" and locale "${localeCode}"; skipping.`
+                    );
+                    return true;
+                }
+
+                const event: TaskEntryEventPayload = {
+                    tenant: tenantId,
+                    locale: localeCode,
+                    id: `5_43_0_001_migration_${generateAlphaNumericId()}`,
+                    definitionId: "acoSyncFlp",
+                    name: "5_43_0_001_migration",
+                    input: {
+                        type: "*"
+                    }
+                };
+
+                await this.storeTaskDdbEntry(event);
+
+                const service = new StepFunctionService({
+                    getTenant: () => tenantId,
+                    getLocale: () => localeCode
+                });
+
+                const startTaskExecution = async () => {
+                    const result = await service.send(
+                        {
+                            definitionId: event.definitionId,
+                            id: event.id
+                        },
+                        0
+                    );
+
+                    if (!result) {
+                        throw new Error(
+                            `Failed to trigger task for tenant ${tenantId} / locale ${localeCode}. Check the above log.`
+                        );
+                    }
+
+                    return result;
+                };
+
+                try {
+                    await executeWithRetry(startTaskExecution, {
+                        onFailedAttempt: async error => {
+                            logger.error(
+                                `Attempt #${error.attemptNumber} failed to trigger task for tenant ${tenantId} / locale ${localeCode}.`
+                            );
+                        }
+                    });
+
+                    logger.info(
+                        `Successfully triggered task for tenant ${tenantId} / locale ${localeCode}. FLP records will be synced via background task.`
+                    );
+                } catch (e) {
+                    logger.error(
+                        `Failed to trigger task for tenant ${tenantId} / locale ${localeCode}. Check the above logs for more info.`,
+                        e
+                    );
+                }
+
+                return true;
+            }
+        });
+
+        logger.info("Finished updating all FLP entities across all tenants and locales.");
+    }
+
+    private async storeTaskDdbEntry(event: TaskEntryEventPayload): Promise<void> {
+        const { tenant, locale, id: entryId, definitionId, name, input } = event;
+
+        try {
+            const values = {
+                "number@iterations": 0,
+                "text@taskStatus": "pending",
+                "text@definitionId": definitionId,
+                "text@name": name,
+                "object@input": input
+            };
+
+            const partitionKey = `T#${tenant}#L#${locale}#CMS#CME#${entryId}`;
+
+            const ddbItems = [
+                // Exact entry revision
+                this.ddbEntryEntity.putBatch({
+                    PK: partitionKey,
+                    SK: "REV#0001",
+                    id: this.createRevisionId(entryId),
+                    entryId,
+                    locale,
+                    location: {
+                        folderId: "root"
+                    },
+                    locked: false,
+                    meta: {},
+                    modelId: TASK_MODEL_ID,
+                    status: "draft",
+                    tenant,
+                    TYPE: "cms.entry",
+                    version: 1,
+                    webinyVersion: process.env.WEBINY_VERSION,
+                    modifiedOn: new Date().toISOString(),
+                    revisionCreatedOn: new Date().toISOString(),
+                    revisionModifiedOn: new Date().toISOString(),
+                    revisionSavedOn: new Date().toISOString(),
+                    savedOn: new Date().toISOString(),
+                    createdOn: new Date().toISOString(),
+                    values
+                }),
+                // Latest entry revision
+                this.ddbEntryEntity.putBatch({
+                    PK: partitionKey,
+                    SK: "L",
+                    id: this.createRevisionId(entryId),
+                    entryId,
+                    locale,
+                    location: {
+                        folderId: "root"
+                    },
+                    locked: false,
+                    meta: {},
+                    modelId: TASK_MODEL_ID,
+                    status: "draft",
+                    tenant,
+                    TYPE: "cms.entry.l",
+                    version: 1,
+                    webinyVersion: process.env.WEBINY_VERSION,
+                    modifiedOn: new Date().toISOString(),
+                    revisionCreatedOn: new Date().toISOString(),
+                    revisionModifiedOn: new Date().toISOString(),
+                    revisionSavedOn: new Date().toISOString(),
+                    savedOn: new Date().toISOString(),
+                    createdOn: new Date().toISOString(),
+                    values
+                })
+            ];
+
+            const rawDatas = {
+                modelId: TASK_MODEL_ID,
+                revisionCreatedOn: new Date().toISOString(),
+                revisionSavedOn: new Date().toString(),
+                revisionModifiedOn: new Date().toString(),
+                createdOn: new Date().toString(),
+                modifiedOn: new Date().toString(),
+                status: "draft",
+                meta: {},
+                entryId,
+                id: this.createRevisionId(entryId),
+                version: 1,
+                location: { folderId: "root" },
+                locale,
+                values: {
+                    "number@iterations": 0,
+                    "text@taskStatus": "pending",
+                    "text@definitionId": definitionId,
+                    "text@name": name
+                },
+                tenant,
+                locked: false,
+                webinyVersion: process.env.WEBINY_VERSION,
+                latest: true,
+                TYPE: "cms.entry.l",
+                __type: "cms.entry.l",
+                rawValues: {
+                    "object@input": input
+                }
+            };
+
+            const ddbEsItems = [
+                this.ddbEsEntryEntity.putBatch({
+                    PK: partitionKey,
+                    SK: "L",
+                    data: await getCompressedData(rawDatas),
+                    index: esGetIndexName({
+                        tenant,
+                        locale,
+                        type: TASK_MODEL_ID,
+                        isHeadlessCmsModel: true
+                    })
+                })
+            ];
+
+            await batchWriteAll({
+                table: this.ddbEntryEntity.table,
+                items: ddbItems
+            });
+
+            await batchWriteAll({
+                table: this.ddbEsEntryEntity.table,
+                items: ddbEsItems
+            });
+        } catch (e) {
+            console.log("Error while storing task entry.", event);
+            console.error(e);
+        }
+    }
+
+    private createRevisionId(id: string) {
+        const { id: entryId } = parseIdentifier(id);
+        return `${entryId}#0001`;
+    }
+}
+
+makeInjectable(Flp_5_43_0_001, [
+    inject(PrimaryDynamoTableSymbol),
+    inject(ElasticsearchDynamoTableSymbol),
+    inject(ElasticsearchClientSymbol)
+]);
diff --git a/packages/migrations/src/migrations/5.43.0/001/ddb/index.ts b/packages/migrations/src/migrations/5.43.0/001/ddb/index.ts
new file mode 100644
index 00000000000..23974fc892c
--- /dev/null
+++ b/packages/migrations/src/migrations/5.43.0/001/ddb/index.ts
@@ -0,0 +1,232 @@
+import { Table } from "@webiny/db-dynamodb/toolbox";
+import { count } from "@webiny/db-dynamodb";
+import { inject, makeInjectable } from "@webiny/ioc";
+import { DataMigration, DataMigrationContext } from "@webiny/data-migration";
+import { PrimaryDynamoTableSymbol } from "@webiny/data-migration/symbols";
+import { StepFunctionService } from "@webiny/tasks/service/StepFunctionServicePlugin";
+import { createDdbEntryEntity } from "../entities/createEntryEntity";
+import { forEachTenantLocale, batchWriteAll } from "~/utils";
+import { ACO_FOLDER_MODEL_ID, TASK_MODEL_ID } from "../constants";
+import { generateAlphaNumericId, parseIdentifier, executeWithRetry } from "@webiny/utils";
+import type { TaskEntryEventPayload } from "../types";
+
+export class Flp_5_43_0_001 implements DataMigration {
+    private readonly table: Table<string, string, string>;
+    private readonly entryEntity: ReturnType<typeof createDdbEntryEntity>;
+
+    constructor(table: Table<string, string, string>) {
+        this.table = table;
+        this.entryEntity = createDdbEntryEntity(table);
+    }
+
+    getId() {
+        return "5.43.0-001";
+    }
+
+    getDescription() {
+        return "Introduce 'flp' entities";
+    }
+
+    async shouldExecute({ logger }: DataMigrationContext) {
+        let shouldExecute = false;
+
+        await forEachTenantLocale({
+            table: this.table,
+            logger,
+            callback: async ({ tenantId, localeCode }) => {
+                shouldExecute = true;
+
+                // Let's find out if there are any folders stored in the system.
+                const foldersCount = await count({
+                    entity: this.entryEntity,
+                    partitionKey: `T#${tenantId}#L#${localeCode}#CMS#CME#M#${ACO_FOLDER_MODEL_ID}#L`,
+                    options: {
+                        index: "GSI1"
+                    }
+                });
+
+                if (foldersCount === 0) {
+                    logger.info("No folders found: skipping migration!");
+                    shouldExecute = false;
+                    return false;
+                }
+
+                // Continue to the next locale.
+                return shouldExecute;
+            }
+        });
+
+        return shouldExecute;
+    }
+
+    async execute({ logger }: DataMigrationContext) {
+        await forEachTenantLocale({
+            table: this.table,
+            logger,
+            callback: async ({ tenantId, localeCode }) => {
+                logger.info(`Starting migration for tenant ${tenantId} / locale ${localeCode}`);
+                // Let's find out if there are any folders stored for the current tenant / locale.
+                const foldersCount = await count({
+                    entity: this.entryEntity,
+                    partitionKey: `T#${tenantId}#L#${localeCode}#CMS#CME#M#${ACO_FOLDER_MODEL_ID}#L`,
+                    options: {
+                        index: "GSI1"
+                    }
+                });
+
+                if (foldersCount === 0) {
+                    logger.info("No folders found: skipping migration!");
+                    return true;
+                }
+
+                const event: TaskEntryEventPayload = {
+                    tenant: tenantId,
+                    locale: localeCode,
+                    id: `5_43_0_001_migration_${generateAlphaNumericId()}`,
+                    definitionId: "acoSyncFlp",
+                    name: "5_43_0_001_migration",
+                    input: {
+                        type: "*"
+                    }
+                };
+
+                await this.storeTaskDdbEntry(event);
+
+                const service = new StepFunctionService({
+                    getTenant: () => tenantId,
+                    getLocale: () => localeCode
+                });
+
+                const startTaskExecution = async () => {
+                    const result = await service.send(
+                        {
+                            definitionId: event.definitionId,
+                            id: event.id
+                        },
+                        0
+                    );
+
+                    if (!result) {
+                        throw new Error(
+                            `Failed to trigger task for tenant ${tenantId} / locale ${localeCode}. Check the above log.`
+                        );
+                    }
+
+                    return result;
+                };
+
+                try {
+                    await executeWithRetry(startTaskExecution, {
+                        onFailedAttempt: async error => {
+                            logger.error(
+                                `Attempt #${error.attemptNumber} failed to trigger task for tenant ${tenantId} / locale ${localeCode}.`
+                            );
+                        }
+                    });
+
+                    logger.info(
+                        `Successfully triggered task for tenant ${tenantId} / locale ${localeCode}. FLP records will be synced via background task.`
+                    );
+                } catch (e) {
+                    logger.error(
+                        `Failed to trigger task for tenant ${tenantId} / locale ${localeCode}. Check the above logs for more info.`,
+                        e
+                    );
+                }
+
+                return true;
+            }
+        });
+
+        logger.info("Finished updating all FLP entities across all tenants and locales.");
+    }
+
+    private async storeTaskDdbEntry(event: TaskEntryEventPayload): Promise<void> {
+        const { tenant, locale, id: entryId, definitionId, name, input } = event;
+
+        try {
+            const values = {
+                "number@iterations": 0,
+                "text@taskStatus": "pending",
+                "text@definitionId": definitionId,
+                "text@name": name,
+                "object@input": input
+            };
+
+            const partitionKey = `T#${tenant}#L#${locale}#CMS#CME#CME#${entryId}`;
+
+            const items = [
+                // Exact entry revision
+                this.entryEntity.putBatch({
+                    PK: partitionKey,
+                    SK: "REV#0001",
+                    GSI1_PK: `T#${tenant}#L#${locale}#CMS#CME#M#${TASK_MODEL_ID}#A`,
+                    GSI1_SK: this.createRevisionId(entryId),
+                    id: this.createRevisionId(entryId),
+                    entryId,
+                    locale,
+                    location: {
+                        folderId: "root"
+                    },
+                    locked: false,
+                    modelId: TASK_MODEL_ID,
+                    status: "draft",
+                    tenant,
+                    TYPE: "cms.entry",
+                    version: 1,
+                    modifiedOn: new Date().toISOString(),
+                    revisionCreatedOn: new Date().toISOString(),
+                    revisionModifiedOn: new Date().toISOString(),
+                    revisionSavedOn: new Date().toISOString(),
+                    savedOn: new Date().toISOString(),
+                    createdOn: new Date().toISOString(),
+                    webinyVersion: process.env.WEBINY_VERSION,
+                    values
+                }),
+                // Latest entry revision
+                this.entryEntity.putBatch({
+                    PK: partitionKey,
+                    SK: "L",
+                    GSI1_PK: `T#${tenant}#L#${locale}#CMS#CME#M#${TASK_MODEL_ID}#L`,
+                    GSI1_SK: this.createRevisionId(entryId),
+                    id: this.createRevisionId(entryId),
+                    entryId,
+                    locale,
+                    location: {
+                        folderId: "root"
+                    },
+                    locked: false,
+                    meta: {},
+                    modelId: TASK_MODEL_ID,
+                    modifiedOn: new Date().toISOString(),
+                    revisionCreatedOn: new Date().toISOString(),
+                    revisionModifiedOn: new Date().toISOString(),
+                    revisionSavedOn: new Date().toISOString(),
+                    savedOn: new Date().toISOString(),
+                    createdOn: new Date().toISOString(),
+                    status: "draft",
+                    tenant,
+                    TYPE: "cms.entry.l",
+                    version: 1,
+                    webinyVersion: process.env.WEBINY_VERSION,
+                    values
+                })
+            ];
+
+            await batchWriteAll({
+                items,
+                table: this.entryEntity.table
+            });
+        } catch (e) {
+            console.log("Error while storing task entry.", event);
+            console.error(e);
+        }
+    }
+
+    private createRevisionId(id: string) {
+        const { id: entryId } = parseIdentifier(id);
+        return `${entryId}#0001`;
+    }
+}
+
+makeInjectable(Flp_5_43_0_001, [inject(PrimaryDynamoTableSymbol)]);
diff --git a/packages/migrations/src/migrations/5.43.0/001/entities/createEntryEntity.ts b/packages/migrations/src/migrations/5.43.0/001/entities/createEntryEntity.ts
new file mode 100644
index 00000000000..3a81dfbd5f1
--- /dev/null
+++ b/packages/migrations/src/migrations/5.43.0/001/entities/createEntryEntity.ts
@@ -0,0 +1,127 @@
+import { Table } from "@webiny/db-dynamodb/toolbox";
+import { createLegacyEntity, createStandardEntity } from "~/utils";
+
+const ddbAttributes: Parameters<typeof createLegacyEntity>[2] = {
+    PK: {
+        type: "string",
+        partitionKey: true
+    },
+    SK: {
+        type: "string",
+        sortKey: true
+    },
+    GSI1_PK: {
+        type: "string"
+    },
+    GSI1_SK: {
+        type: "string"
+    },
+    TYPE: {
+        type: "string"
+    },
+    __type: {
+        type: "string"
+    },
+    webinyVersion: {
+        type: "string"
+    },
+    tenant: {
+        type: "string"
+    },
+    entryId: {
+        type: "string"
+    },
+    id: {
+        type: "string"
+    },
+    modelId: {
+        type: "string"
+    },
+    locale: {
+        type: "string"
+    },
+
+    /**
+     * Revision-level meta fields. 👇
+     */
+    revisionCreatedOn: { type: "string" },
+    revisionSavedOn: { type: "string" },
+    revisionModifiedOn: { type: "string" },
+    revisionDeletedOn: { type: "string" },
+    revisionRestoredOn: { type: "string" },
+    revisionFirstPublishedOn: { type: "string" },
+    revisionLastPublishedOn: { type: "string" },
+    revisionCreatedBy: { type: "map" },
+    revisionSavedBy: { type: "map" },
+    revisionModifiedBy: { type: "map" },
+    revisionDeletedBy: { type: "map" },
+    revisionRestoredBy: { type: "map" },
+    revisionFirstPublishedBy: { type: "map" },
+    revisionLastPublishedBy: { type: "map" },
+
+    /**
+     * Entry-level meta fields. 👇
+     */
+    createdOn: { type: "string" },
+    savedOn: { type: "string" },
+    modifiedOn: { type: "string" },
+    deletedOn: { type: "string" },
+    restoredOn: { type: "string" },
+    firstPublishedOn: { type: "string" },
+    lastPublishedOn: { type: "string" },
+    createdBy: { type: "map" },
+    savedBy: { type: "map" },
+    modifiedBy: { type: "map" },
+    deletedBy: { type: "map" },
+    restoredBy: { type: "map" },
+    firstPublishedBy: { type: "map" },
+    lastPublishedBy: { type: "map" },
+
+    // Deprecated fields.
+    ownedBy: { type: "map" },
+    publishedOn: { type: "string" },
+
+    version: {
+        type: "number"
+    },
+    locked: {
+        type: "boolean"
+    },
+    status: {
+        type: "string"
+    },
+    values: {
+        type: "map"
+    },
+    meta: {
+        type: "map"
+    },
+    location: {
+        type: "map"
+    }
+};
+
+const ddbEsAttributes: Parameters<typeof createStandardEntity>[2] = {
+    PK: {
+        type: "string",
+        partitionKey: true
+    },
+    SK: {
+        type: "string",
+        sortKey: true
+    },
+    index: {
+        type: "string"
+    },
+    data: {
+        type: "map"
+    }
+};
+
+export const createDdbEntryEntity = (table: Table<string, string, string>) => {
+    return createLegacyEntity(table, "CmsEntries", ddbAttributes);
+};
+
+export const createDdbEsEntryEntity = (table: Table<string, string, string>) => {
+    return createStandardEntity(table, "CmsEntriesElasticsearch", ddbEsAttributes);
+};
diff --git a/packages/migrations/src/migrations/5.43.0/001/types.ts b/packages/migrations/src/migrations/5.43.0/001/types.ts
new file mode 100644
index 00000000000..c55561d7e22
--- /dev/null
+++ b/packages/migrations/src/migrations/5.43.0/001/types.ts
@@ -0,0 +1,53 @@
+export interface Tenant {
+    data: {
+        id: string;
+        name: string;
+    };
+}
+
+export interface I18NLocale {
+    code: string;
+}
+
+export interface Identity {
+    id: string;
+    displayName: string | null;
+    type: string;
+}
+
+export interface CmsEntryValues {
+    [key: string]: any;
+}
+
+export type CmsEntryStatus = "published" | "unpublished" | "draft";
+
+export interface CmsEntry<TValues = CmsEntryValues> {
+    webinyVersion: string;
+    tenant: string;
+    entryId: string;
+    id: string;
+    createdBy: Identity;
+    ownedBy: Identity;
+    modifiedBy?: Identity | null;
+    createdOn: string;
+    savedOn: string;
+    modelId: string;
+    locale: string;
+    publishedOn?: string;
+    version: number;
+    locked: boolean;
+    status: CmsEntryStatus;
+    values: TValues;
+    meta?: {
+        [key: string]: any;
+    };
+}
+
+export interface TaskEntryEventPayload {
+    tenant: string;
+    locale: string;
+    id: string;
+    definitionId: string;
+    name: string;
+    input: Record<string, any>;
+}
diff --git a/packages/migrations/src/utils/getCompressedData.ts b/packages/migrations/src/utils/getCompressedData.ts
new file mode 100644
index 00000000000..31f77e45314
--- /dev/null
+++ b/packages/migrations/src/utils/getCompressedData.ts
@@ -0,0 +1,13 @@
+import { compress as gzip } from "@webiny/utils/compression/gzip";
+
+const GZIP = "gzip";
+const TO_STORAGE_ENCODING = "base64";
+
+export const getCompressedData = async (data: any) => {
+    const value = await gzip(JSON.stringify(data));
+
+    return {
+        compression: GZIP,
+        value: value.toString(TO_STORAGE_ENCODING)
+    };
+};
diff --git a/packages/migrations/src/utils/index.ts b/packages/migrations/src/utils/index.ts
index 4a0d608ed35..d10b6d40ebe 100644
--- a/packages/migrations/src/utils/index.ts
+++ b/packages/migrations/src/utils/index.ts
@@ -4,3 +4,4 @@ export * from "./forEachTenantLocale";
 export * from "./createEntity";
 export * from "./createLocaleEntity";
 export * from "./createTenantEntity";
+export * from "./getCompressedData";
diff --git a/packages/migrations/tsconfig.build.json b/packages/migrations/tsconfig.build.json
index d9eb90c7e40..7ace8748b02 100644
--- a/packages/migrations/tsconfig.build.json
+++ b/packages/migrations/tsconfig.build.json
@@ -9,6 +9,7 @@
     { "path": "../error/tsconfig.build.json" },
     { "path": "../ioc/tsconfig.build.json" },
     { "path": "../logger/tsconfig.build.json" },
+    { "path": "../tasks/tsconfig.build.json" },
     { "path": "../utils/tsconfig.build.json" },
     { "path": "../api-headless-cms/tsconfig.build.json" },
     { "path": "../api-headless-cms-ddb-es/tsconfig.build.json" },
diff --git a/packages/migrations/tsconfig.json b/packages/migrations/tsconfig.json
index 32204ade9aa..dafdedaf864 100644
--- a/packages/migrations/tsconfig.json
+++ b/packages/migrations/tsconfig.json
@@ -9,6 +9,7 @@
     { "path": "../error" },
     { "path": "../ioc" },
     { "path": "../logger" },
+    { "path": "../tasks" },
     { "path": "../utils" },
     { "path": "../api-headless-cms" },
     { "path": "../api-headless-cms-ddb-es" },
@@ -38,6 +39,8 @@
       "@webiny/logger": ["../logger/src"],
       "@webiny/utils/*": ["../utils/src/*"],
       "@webiny/utils": ["../utils/src"],
+      "@webiny/tasks/*": ["../tasks/src/*"],
+      "@webiny/tasks": ["../tasks/src"],
       "@webiny/api-headless-cms/*": ["../api-headless-cms/src/*"],
       "@webiny/api-headless-cms": ["../api-headless-cms/src"],
       "@webiny/api-headless-cms-ddb-es/*": ["../api-headless-cms-ddb-es/src/*"],
diff --git a/packages/project-utils/bundling/app/config/webpack.config.js b/packages/project-utils/bundling/app/config/webpack.config.js
index 8d822a84e93..30d4087ed24 100644
--- a/packages/project-utils/bundling/app/config/webpack.config.js
+++ b/packages/project-utils/bundling/app/config/webpack.config.js
@@ -21,12 +21,7 @@ const WebpackBar = require("webpackbar");
 const ReactRefreshWebpackPlugin = require("@pmmmwh/react-refresh-webpack-plugin");
 const { getProjectApplication } = require("@webiny/cli/utils");
 
-const materialNodeModules = require.resolve("@material/base/package.json").split("@material")[0];
-const sassIncludePaths = [
-    path.resolve("./src"),
-    path.resolve("./node_modules"),
-    materialNodeModules
-];
+const sassIncludePaths = [path.resolve("./src"), path.resolve("./node_modules")];
 
 // Generates a unique static folder name, for example "static-mi7aan0cqpo".
 const STATIC_FOLDER = "static";
diff --git a/packages/project-utils/package.json b/packages/project-utils/package.json
index 877ac2217cb..b6b998ac57b 100644
--- a/packages/project-utils/package.json
+++ b/packages/project-utils/package.json
@@ -22,7 +22,7 @@
     "@babel/preset-env": "7.26.7",
     "@babel/preset-react": "^7.26.3",
     "@babel/preset-typescript": "^7.26.0",
-    "@babel/runtime": "7.26.7",
+    "@babel/runtime": "7.26.10",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.15",
     "@rspack/core": "^1.2.2",
     "@svgr/webpack": "^6.1.1",
@@ -33,7 +33,7 @@
     "@webiny/global-config": "0.0.0",
     "@webiny/telemetry": "0.0.0",
     "assert-browserify": "^2.0.0",
-    "babel-loader": "^9.2.1",
+    "babel-loader": "9.2.1",
     "buffer": "^6.0.3",
     "bufferutil": "^4.0.1",
     "camelcase": "^6.3.0",
diff --git a/packages/project-utils/testing/elasticsearch/getElasticsearchClient.ts b/packages/project-utils/testing/elasticsearch/getElasticsearchClient.ts
index de4826793d2..f3c40045b4c 100644
--- a/packages/project-utils/testing/elasticsearch/getElasticsearchClient.ts
+++ b/packages/project-utils/testing/elasticsearch/getElasticsearchClient.ts
@@ -1,7 +1,6 @@
 import path from "path";
 import { ContextPlugin } from "@webiny/api";
 import elasticsearchClientContextPlugin, {
-    createGzipCompression,
     getElasticsearchOperators
 } from "@webiny/api-elasticsearch";
 import { logger } from "../logger";
@@ -73,9 +72,7 @@ export class ElasticsearchClientConfig {
         /**
          * Intercept DocumentClient operations and trigger dynamoToElastic function (almost like a DynamoDB Stream trigger)
          */
-        const gzipCompression = createGzipCompression();
         const simulationContext = new ContextPlugin<ElasticsearchContext>(async context => {
-            context.plugins.register(gzipCompression);
             await elasticsearchClientContext.apply(context);
         });
 
@@ -98,11 +95,7 @@ export class ElasticsearchClientConfig {
             }
         });
 
-        this.plugins = [
-            elasticsearchClientContext,
-            gzipCompression,
-            ...getElasticsearchOperators()
-        ];
+        this.plugins = [elasticsearchClientContext, ...getElasticsearchOperators()];
     }
 
     setOnBeforeEach(name: string, cb: OnBeforeEach) {
diff --git a/packages/pulumi-aws/src/apps/api/ApiMigration.ts b/packages/pulumi-aws/src/apps/api/ApiMigration.ts
index 67927969dd6..823bbd04f32 100644
--- a/packages/pulumi-aws/src/apps/api/ApiMigration.ts
+++ b/packages/pulumi-aws/src/apps/api/ApiMigration.ts
@@ -5,7 +5,7 @@ import { createAppModule, PulumiApp, PulumiAppModule } from "@webiny/pulumi";
 
 import { createLambdaRole, getCommonLambdaEnvVariables } from "../lambdaUtils";
 import { CoreOutput, VpcConfig } from "../common";
-import { ApiGraphql } from "~/apps";
+import { ApiBackgroundTask, ApiGraphql } from "~/apps";
 import { LAMBDA_RUNTIME } from "~/constants";
 import { getEnvVariableAwsRegion } from "~/env/awsRegion";
 
@@ -16,6 +16,7 @@ export const ApiMigration = createAppModule({
     config(app: PulumiApp) {
         const core = app.getModule(CoreOutput);
         const graphql = app.getModule(ApiGraphql);
+        const backgroundTask = app.getModule(ApiBackgroundTask);
 
         const role = createLambdaRole(app, {
             name: "migration-lambda-role",
@@ -54,6 +55,35 @@ export const ApiMigration = createAppModule({
             }
         });
 
+        // Add IAM policy to allow states:StartExecution for the background task Step Function
+        const stepFunctionPolicy = app.addResource(aws.iam.Policy, {
+            name: "migration-lambda-step-function-policy",
+            config: {
+                policy: {
+                    Version: "2012-10-17",
+                    Statement: [
+                        {
+                            Effect: "Allow",
+                            Action: ["states:StartExecution"],
+                            Resource: [
+                                pulumi.interpolate`${backgroundTask.stepFunction.output.arn}`,
+                                pulumi.interpolate`${backgroundTask.stepFunction.output.arn}/*`
+                            ]
+                        }
+                    ]
+                }
+            }
+        });
+
+        // Attach policy to the Lambda role
+        app.addResource(aws.iam.RolePolicyAttachment, {
+            name: "migration-lambda-attach-step-function-policy",
+            config: {
+                role: role.output.name,
+                policyArn: stepFunctionPolicy.output.arn
+            }
+        });
+
         return {
             function: migration
         };
diff --git a/packages/pulumi-aws/src/apps/api/createApiPulumiApp.ts b/packages/pulumi-aws/src/apps/api/createApiPulumiApp.ts
index 20835427910..838983e5f7f 100644
--- a/packages/pulumi-aws/src/apps/api/createApiPulumiApp.ts
+++ b/packages/pulumi-aws/src/apps/api/createApiPulumiApp.ts
@@ -251,6 +251,7 @@ export const createApiPulumiApp = (projectAppParams: CreateApiPulumiAppParams =
             });
 
             const cloudfront = app.addModule(ApiCloudfront);
+            const backgroundTask = app.addModule(ApiBackgroundTask);
             const migration = app.addModule(ApiMigration);
 
             const domains = app.getParam(projectAppParams.domains);
@@ -258,8 +259,6 @@ export const createApiPulumiApp = (projectAppParams: CreateApiPulumiAppParams =
                 applyCustomDomain(cloudfront, domains);
             }
 
-            const backgroundTask = app.addModule(ApiBackgroundTask);
-
             app.addOutputs({
                 region: aws.config.region,
                 cognitoUserPoolId: core.cognitoUserPoolId,
diff --git a/packages/pulumi-aws/src/apps/core/createCorePulumiApp.ts b/packages/pulumi-aws/src/apps/core/createCorePulumiApp.ts
index 387cd44182d..2687d4592b8 100644
--- a/packages/pulumi-aws/src/apps/core/createCorePulumiApp.ts
+++ b/packages/pulumi-aws/src/apps/core/createCorePulumiApp.ts
@@ -87,7 +87,7 @@ export interface CoreAppLegacyConfig {
 }
 
 export function createCorePulumiApp(projectAppParams: CreateCorePulumiAppParams = {}) {
-    const app = createPulumiApp({
+    const baseApp = createPulumiApp({
         name: "core",
         path: "apps/core",
         config: projectAppParams,
@@ -223,8 +223,8 @@ export function createCorePulumiApp(projectAppParams: CreateCorePulumiAppParams
         }
     });
 
-    return withServiceManifest(app, manifests => {
-        const dynamoTable = app.resources.dynamoDbTable;
+    const app = withServiceManifest(baseApp, manifests => {
+        const dynamoTable = baseApp.resources.dynamoDbTable;
 
         const table: TableDefinition = {
             tableName: dynamoTable.output.name,
@@ -232,6 +232,26 @@ export function createCorePulumiApp(projectAppParams: CreateCorePulumiAppParams
             rangeKey: dynamoTable.output.rangeKey
         };
 
-        manifests.forEach(manifest => addServiceManifestTableItem(app, table, manifest));
+        manifests.forEach(manifest => addServiceManifestTableItem(baseApp, table, manifest));
     });
+
+    app.addHandler(() => {
+        app.addServiceManifest({
+            name: "core",
+            manifest: {
+                eventBus: {
+                    arn: baseApp.resources.eventBus.output.arn,
+                    name: baseApp.resources.eventBus.output.name
+                },
+                dynamodbTable: {
+                    arn: baseApp.resources.dynamoDbTable.output.arn,
+                    name: baseApp.resources.dynamoDbTable.output.name,
+                    hashKey: baseApp.resources.dynamoDbTable.output.hashKey,
+                    rangeKey: baseApp.resources.dynamoDbTable.output.rangeKey
+                }
+            }
+        });
+    });
+
+    return app;
 }
diff --git a/packages/react-composition/src/Compose.tsx b/packages/react-composition/src/Compose.tsx
index b91a8f7c288..4849668d235 100644
--- a/packages/react-composition/src/Compose.tsx
+++ b/packages/react-composition/src/Compose.tsx
@@ -16,6 +16,9 @@ export const Compose = (props: ComposeProps) => {
     const targetFn = (props.function ?? props.component) as Decoratable;
 
     useEffect(() => {
+        if (!targetFn) {
+            console.warn("You must provide a function or a component to compose with!", props);
+        }
         if (typeof targetFn.original === "undefined") {
             console.warn(
                 `You must make your function "${
diff --git a/packages/react-composition/src/makeDecoratable.tsx b/packages/react-composition/src/makeDecoratable.tsx
index eeea12f73b7..9310b10463d 100644
--- a/packages/react-composition/src/makeDecoratable.tsx
+++ b/packages/react-composition/src/makeDecoratable.tsx
@@ -77,7 +77,9 @@ export function makeDecoratable<T extends GenericComponent>(
 ): ReturnType<typeof makeDecoratableComponent<T>>;
 export function makeDecoratable(hookOrName: any, Component?: any) {
     if (Component) {
-        return makeDecoratableComponent(hookOrName, React.memo(Component));
+        const component = makeDecoratableComponent(hookOrName, React.memo(Component));
+        component.original.displayName = hookOrName;
+        return component;
     }
 
     return makeDecoratableHook(hookOrName);
diff --git a/packages/react-properties/__tests__/properties.test.tsx b/packages/react-properties/__tests__/properties.test.tsx
index bd2f5529f7f..68db928f710 100644
--- a/packages/react-properties/__tests__/properties.test.tsx
+++ b/packages/react-properties/__tests__/properties.test.tsx
@@ -40,7 +40,8 @@ const Field = ({ name, label, replace, after, before, remove = false }: FieldPro
     const placeBefore = before !== undefined ? `${id}:field:${before}` : undefined;
 
     const getId = useCallback(
-        (suffix = undefined) => [id, "field", name, suffix].filter(Boolean).join(":"),
+        (suffix: string | undefined = undefined) =>
+            [id, "field", name, suffix].filter(Boolean).join(":"),
         []
     );
     const toReplace = replace !== undefined ? `${id}:field:${replace}` : undefined;
@@ -74,8 +75,24 @@ describe("Test Properties", () => {
         render(view);
 
         expect(onChange).toHaveBeenLastCalledWith([
-            { id: "label", name: "label", value: "Label", parent: "", array: false },
-            { id: expect.any(String), name: "name", value: "basic", parent: "", array: false }
+            {
+                id: "label",
+                name: "label",
+                value: "Label",
+                parent: "",
+                array: false,
+                $isFirst: false,
+                $isLast: false
+            },
+            {
+                id: expect.any(String),
+                name: "name",
+                value: "basic",
+                parent: "",
+                array: false,
+                $isFirst: false,
+                $isLast: false
+            }
         ]);
     });
 
@@ -96,17 +113,51 @@ describe("Test Properties", () => {
         render(view);
 
         expect(onChange).toHaveBeenLastCalledWith([
-            { id: expect.any(String), name: "name", value: "layout", parent: "1", array: false },
-            { id: expect.any(String), name: "label", value: "Layout", parent: "1", array: false },
-            { id: expect.any(String), name: "name", value: "basic", parent: "2", array: false },
+            {
+                id: expect.any(String),
+                name: "name",
+                value: "layout",
+                parent: "1",
+                array: false,
+                $isFirst: false,
+                $isLast: false
+            },
+            {
+                id: expect.any(String),
+                name: "label",
+                value: "Layout",
+                parent: "1",
+                array: false,
+                $isFirst: false,
+                $isLast: false
+            },
+            {
+                id: expect.any(String),
+                name: "name",
+                value: "basic",
+                parent: "2",
+                array: false,
+                $isFirst: false,
+                $isLast: false
+            },
             {
                 id: expect.any(String),
                 name: "toolbar",
                 value: undefined,
                 parent: "1",
-                array: false
+                array: false,
+                $isFirst: false,
+                $isLast: false
             },
-            { id: "1", name: "group", value: undefined, parent: "", array: false }
+            {
+                id: "1",
+                name: "group",
+                value: undefined,
+                parent: "",
+                array: false,
+                $isFirst: false,
+                $isLast: false
+            }
         ]);
     });
 
diff --git a/packages/react-properties/src/Properties.tsx b/packages/react-properties/src/Properties.tsx
index 091c56f520c..50f72b48345 100644
--- a/packages/react-properties/src/Properties.tsx
+++ b/packages/react-properties/src/Properties.tsx
@@ -1,12 +1,27 @@
 import React, { createContext, useContext, useEffect, useMemo, useState } from "react";
 import { getUniqueId, toObject } from "./utils";
 
+const PropertiesTargetContext = createContext<string | undefined>(undefined);
+
+export interface ConnectToPropertiesProps {
+    name: string;
+    children: React.ReactNode;
+}
+
+export const ConnectToProperties = ({ name, children }: ConnectToPropertiesProps) => {
+    return (
+        <PropertiesTargetContext.Provider value={name}>{children}</PropertiesTargetContext.Provider>
+    );
+};
+
 export interface Property {
     id: string;
     parent: string;
     name: string;
     value?: unknown;
     array?: boolean;
+    $isFirst?: boolean;
+    $isLast?: boolean;
 }
 
 function removeByParent(id: string, properties: Property[]): Property[] {
@@ -26,7 +41,9 @@ interface AddPropertyOptions {
 }
 
 interface PropertiesContext {
+    name?: string;
     properties: Property[];
+    getAncestor(name: string): PropertiesContext | undefined;
     getObject<T = unknown>(): T;
     addProperty(property: Property, options?: AddPropertyOptions): void;
     removeProperty(id: string): void;
@@ -92,12 +109,20 @@ function mergeProperty(properties: Property[], property: Property) {
 const PropertiesContext = createContext<PropertiesContext | undefined>(undefined);
 
 interface PropertiesProps {
+    name?: string;
     onChange?(properties: Property[]): void;
     children: React.ReactNode;
 }
 
-export const Properties = ({ onChange, children }: PropertiesProps) => {
+export const Properties = ({ name, onChange, children }: PropertiesProps) => {
     const [properties, setProperties] = useState<Property[]>([]);
+    let parent: PropertiesContext;
+
+    try {
+        parent = useProperties();
+    } catch {
+        // Do nothing, if there's no parent.
+    }
 
     useEffect(() => {
         if (onChange) {
@@ -107,7 +132,17 @@ export const Properties = ({ onChange, children }: PropertiesProps) => {
 
     const context: PropertiesContext = useMemo(
         () => ({
+            name,
             properties,
+            getAncestor(ancestorName: string) {
+                if (!parent) {
+                    return undefined;
+                }
+
+                return parent && parent.name === ancestorName
+                    ? parent
+                    : parent.getAncestor(ancestorName);
+            },
             getObject<T>() {
                 return toObject(properties) as T;
             },
@@ -177,6 +212,22 @@ export function useProperties() {
     return properties;
 }
 
+export function useAncestorByName(name: string | undefined) {
+    const parent = useProperties();
+
+    return useMemo(() => {
+        if (!name) {
+            return undefined;
+        }
+
+        if (parent.name === name) {
+            return parent;
+        }
+
+        return parent.getAncestor(name);
+    }, [name]);
+}
+
 interface PropertyProps {
     id?: string;
     name: string;
@@ -240,9 +291,13 @@ export const Property = ({
     root = false,
     parent = undefined
 }: PropertyProps) => {
+    const targetName = useContext(PropertiesTargetContext);
     const uniqueId = useMemo(() => id || getUniqueId(), []);
     const parentProperty = useParentProperty();
-    const properties = useProperties();
+    const immediateProperties = useProperties();
+    const ancestorByName = useAncestorByName(targetName);
+
+    const properties = targetName ? ancestorByName : immediateProperties;
 
     if (!properties) {
         throw Error("<Properties> provider is missing higher in the hierarchy!");
@@ -263,7 +318,10 @@ export const Property = ({
             return;
         }
 
-        addProperty(property, { after, before });
+        const $isFirst = before === "$first";
+        const $isLast = after === "$last";
+
+        addProperty({ ...property, $isFirst, $isLast }, { after, before });
 
         return () => {
             removeProperty(uniqueId);
diff --git a/packages/react-properties/src/index.ts b/packages/react-properties/src/index.ts
index 78581ec6437..95a755e688d 100644
--- a/packages/react-properties/src/index.ts
+++ b/packages/react-properties/src/index.ts
@@ -1,4 +1,5 @@
 export * from "./utils";
 export * from "./Properties";
+export * from "./useDebugConfig";
 export * from "./useIdGenerator";
 export * from "./createConfigurableComponent";
diff --git a/packages/react-properties/src/useIdGenerator.ts b/packages/react-properties/src/useIdGenerator.ts
index bd8bb53725d..bfc88bd681d 100644
--- a/packages/react-properties/src/useIdGenerator.ts
+++ b/packages/react-properties/src/useIdGenerator.ts
@@ -1,11 +1,16 @@
 import { useCallback } from "react";
 import { useParentProperty } from "~/Properties";
 
+const keywords = ["$first", "$last"];
+
 export function useIdGenerator(name: string) {
     const parentProperty = useParentProperty();
 
     return useCallback(
         (...parts: string[]) => {
+            if (keywords.includes(parts[0])) {
+                return parts[0];
+            }
             return [parentProperty?.id, name, ...parts].filter(Boolean).join(":");
         },
         [name, parentProperty]
diff --git a/packages/react-properties/src/utils.ts b/packages/react-properties/src/utils.ts
index 601e4538f8e..541a5e772c0 100644
--- a/packages/react-properties/src/utils.ts
+++ b/packages/react-properties/src/utils.ts
@@ -2,13 +2,35 @@ import { customAlphabet } from "nanoid";
 const nanoid = customAlphabet("1234567890abcdef");
 import { Property } from "./Properties";
 
+const sortPropertiesToTheTop = (a: Property, b: Property) => {
+    if (a.$isFirst && b.$isFirst) {
+        return -1;
+    }
+
+    return Number(b.$isFirst) - Number(a.$isFirst);
+};
+
+const sortPropertiesToTheBottom = (a: Property, b: Property) => {
+    if (a.$isLast && b.$isLast) {
+        return 1;
+    }
+
+    return Number(a.$isLast) - Number(b.$isLast);
+};
+
+const sortProperties = (properties: Property[]) => {
+    return properties.sort(sortPropertiesToTheTop).sort(sortPropertiesToTheBottom);
+};
+
 function buildRoots(roots: Property[], properties: Property[]) {
-    const obj: Record<string, unknown> = roots.reduce((acc, item) => {
-        const isArray = item.array === true || roots.filter(r => r.name === item.name).length > 1;
+    const sortedRoots = sortProperties(roots);
+    const obj: Record<string, unknown> = sortedRoots.reduce((acc, item) => {
+        const isArray =
+            item.array === true || sortedRoots.filter(r => r.name === item.name).length > 1;
         return { ...acc, [item.name]: isArray ? [] : {} };
     }, {});
 
-    roots.forEach(root => {
+    sortedRoots.forEach(root => {
         const isArray = root.array === true || Array.isArray(obj[root.name]);
         if (root.value !== undefined) {
             obj[root.name] = isArray ? [...(obj[root.name] as Array<any>), root.value] : root.value;
diff --git a/packages/serverless-cms-aws/handlers/ddb-es/api/pageBuilder/export/combine/src/index.ts b/packages/serverless-cms-aws/handlers/ddb-es/api/pageBuilder/export/combine/src/index.ts
index 7d0e4bd30e2..d61e2a6f4bd 100644
--- a/packages/serverless-cms-aws/handlers/ddb-es/api/pageBuilder/export/combine/src/index.ts
+++ b/packages/serverless-cms-aws/handlers/ddb-es/api/pageBuilder/export/combine/src/index.ts
@@ -5,8 +5,8 @@ import i18nDynamoDbStorageOperations from "@webiny/api-i18n-ddb";
 import { createFormBuilder } from "@webiny/api-form-builder";
 import { createFormBuilderStorageOperations } from "@webiny/api-form-builder-so-ddb-es";
 import {
-    createPageBuilderGraphQL,
-    createPageBuilderContext
+    createPageBuilderContext,
+    createPageBuilderGraphQL
 } from "@webiny/api-page-builder/graphql";
 import { createStorageOperations as createPageBuilderStorageOperations } from "@webiny/api-page-builder-so-ddb-es";
 import pageBuilderImportExportPlugins from "@webiny/api-page-builder-import-export/graphql";
@@ -15,10 +15,7 @@ import exportCombinePlugins from "@webiny/api-page-builder-import-export/export/
 import dbPlugins from "@webiny/handler-db";
 import { DynamoDbDriver } from "@webiny/db-dynamodb";
 import dynamoDbPlugins from "@webiny/db-dynamodb/plugins";
-import elasticSearch, {
-    createElasticsearchClient,
-    createGzipCompression
-} from "@webiny/api-elasticsearch";
+import elasticSearch, { createElasticsearchClient } from "@webiny/api-elasticsearch";
 import securityPlugins from "./security";
 
 const documentClient = getDocumentClient();
@@ -32,7 +29,6 @@ const debug = process.env.DEBUG === "true";
 export const handler = createHandler({
     plugins: [
         dynamoDbPlugins(),
-        createGzipCompression(),
         elasticSearch(elasticsearchClient),
         dbPlugins({
             table: process.env.DB_TABLE,
diff --git a/packages/serverless-cms-aws/handlers/ddb-es/api/pageBuilder/export/process/src/index.ts b/packages/serverless-cms-aws/handlers/ddb-es/api/pageBuilder/export/process/src/index.ts
index 2fd5577a2d0..2ea934fe60f 100644
--- a/packages/serverless-cms-aws/handlers/ddb-es/api/pageBuilder/export/process/src/index.ts
+++ b/packages/serverless-cms-aws/handlers/ddb-es/api/pageBuilder/export/process/src/index.ts
@@ -12,10 +12,7 @@ import exportProcessPlugins from "@webiny/api-page-builder-import-export/export/
 import dbPlugins from "@webiny/handler-db";
 import { DynamoDbDriver } from "@webiny/db-dynamodb";
 import dynamoDbPlugins from "@webiny/db-dynamodb/plugins";
-import elasticSearch, {
-    createElasticsearchClient,
-    createGzipCompression
-} from "@webiny/api-elasticsearch";
+import elasticSearch, { createElasticsearchClient } from "@webiny/api-elasticsearch";
 import { CmsParametersPlugin, createHeadlessCmsContext } from "@webiny/api-headless-cms";
 import { createStorageOperations as createHeadlessCmsStorageOperations } from "@webiny/api-headless-cms-ddb-es";
 import { createFileManagerContext } from "@webiny/api-file-manager";
@@ -34,7 +31,6 @@ const debug = process.env.DEBUG === "true";
 export const handler = createHandler({
     plugins: [
         dynamoDbPlugins(),
-        createGzipCompression(),
         elasticSearch(elasticsearchClient),
         dbPlugins({
             table: process.env.DB_TABLE,
diff --git a/packages/serverless-cms-aws/handlers/ddb-es/api/pageBuilder/import/create/src/index.ts b/packages/serverless-cms-aws/handlers/ddb-es/api/pageBuilder/import/create/src/index.ts
index ec84066fb87..086da4fe49d 100644
--- a/packages/serverless-cms-aws/handlers/ddb-es/api/pageBuilder/import/create/src/index.ts
+++ b/packages/serverless-cms-aws/handlers/ddb-es/api/pageBuilder/import/create/src/index.ts
@@ -5,8 +5,8 @@ import i18nDynamoDbStorageOperations from "@webiny/api-i18n-ddb";
 import { createFormBuilder } from "@webiny/api-form-builder";
 import { createFormBuilderStorageOperations } from "@webiny/api-form-builder-so-ddb-es";
 import {
-    createPageBuilderGraphQL,
-    createPageBuilderContext
+    createPageBuilderContext,
+    createPageBuilderGraphQL
 } from "@webiny/api-page-builder/graphql";
 import { createStorageOperations as createPageBuilderStorageOperations } from "@webiny/api-page-builder-so-ddb-es";
 import pageBuilderImportExportPlugins from "@webiny/api-page-builder-import-export/graphql";
@@ -15,10 +15,7 @@ import importCreatePlugins from "@webiny/api-page-builder-import-export/import/c
 import dbPlugins from "@webiny/handler-db";
 import { DynamoDbDriver } from "@webiny/db-dynamodb";
 import dynamoDbPlugins from "@webiny/db-dynamodb/plugins";
-import elasticSearch, {
-    createElasticsearchClient,
-    createGzipCompression
-} from "@webiny/api-elasticsearch";
+import elasticSearch, { createElasticsearchClient } from "@webiny/api-elasticsearch";
 import securityPlugins from "./security";
 
 const documentClient = getDocumentClient();
@@ -32,7 +29,6 @@ const debug = process.env.DEBUG === "true";
 export const handler = createHandler({
     plugins: [
         dynamoDbPlugins(),
-        createGzipCompression(),
         elasticSearch(elasticsearchClient),
         dbPlugins({
             table: process.env.DB_TABLE,
diff --git a/packages/serverless-cms-aws/handlers/ddb-es/api/pageBuilder/import/process/src/index.ts b/packages/serverless-cms-aws/handlers/ddb-es/api/pageBuilder/import/process/src/index.ts
index fe30b77c17c..2428d809ccc 100644
--- a/packages/serverless-cms-aws/handlers/ddb-es/api/pageBuilder/import/process/src/index.ts
+++ b/packages/serverless-cms-aws/handlers/ddb-es/api/pageBuilder/import/process/src/index.ts
@@ -12,10 +12,7 @@ import importProcessPlugins from "@webiny/api-page-builder-import-export/import/
 import dbPlugins from "@webiny/handler-db";
 import { DynamoDbDriver } from "@webiny/db-dynamodb";
 import dynamoDbPlugins from "@webiny/db-dynamodb/plugins";
-import elasticSearch, {
-    createElasticsearchClient,
-    createGzipCompression
-} from "@webiny/api-elasticsearch";
+import elasticSearch, { createElasticsearchClient } from "@webiny/api-elasticsearch";
 import { createFileManagerContext } from "@webiny/api-file-manager";
 import { createFileManagerStorageOperations } from "@webiny/api-file-manager-ddb";
 import fileManagerS3 from "@webiny/api-file-manager-s3";
@@ -35,7 +32,6 @@ const debug = process.env.DEBUG === "true";
 
 export const handler = createHandler({
     plugins: [
-        createGzipCompression(),
         dynamoDbPlugins(),
         elasticSearch(elasticsearchClient),
         dbPlugins({
@@ -84,7 +80,7 @@ export const handler = createHandler({
         importProcessPlugins({
             handlers: { process: process.env.AWS_LAMBDA_FUNCTION_NAME }
         }),
-        createAco({ useFolderLevelPermissions: false }),
+        createAco({ documentClient, useFolderLevelPermissions: false }),
         createAcoPageBuilderImportExportContext()
     ],
     debug
diff --git a/packages/serverless-cms-aws/handlers/ddb-es/core/dynamoToElastic/src/index.ts b/packages/serverless-cms-aws/handlers/ddb-es/core/dynamoToElastic/src/index.ts
index 4f18abb286c..adc558289d2 100644
--- a/packages/serverless-cms-aws/handlers/ddb-es/core/dynamoToElastic/src/index.ts
+++ b/packages/serverless-cms-aws/handlers/ddb-es/core/dynamoToElastic/src/index.ts
@@ -1,5 +1,5 @@
 import { createHandler } from "@webiny/handler-aws";
-import elasticsearchClientContextPlugin, { createGzipCompression } from "@webiny/api-elasticsearch";
+import elasticsearchClientContextPlugin from "@webiny/api-elasticsearch";
 import { createEventHandler } from "@webiny/api-dynamodb-to-elasticsearch";
 import { getDocumentClient } from "@webiny/aws-sdk/client-dynamodb";
 import { createLogger } from "@webiny/api-log";
@@ -20,7 +20,6 @@ export const handler = createHandler({
         elasticsearchClientContextPlugin({
             endpoint: `https://${process.env.ELASTIC_SEARCH_ENDPOINT}`
         }),
-        createGzipCompression(),
         createEventHandler()
     ],
     options: {
diff --git a/packages/serverless-cms-aws/handlers/ddb/api/pageBuilder/import/process/src/index.ts b/packages/serverless-cms-aws/handlers/ddb/api/pageBuilder/import/process/src/index.ts
index 106e215256c..39bdb9fec3a 100644
--- a/packages/serverless-cms-aws/handlers/ddb/api/pageBuilder/import/process/src/index.ts
+++ b/packages/serverless-cms-aws/handlers/ddb/api/pageBuilder/import/process/src/index.ts
@@ -73,7 +73,7 @@ export const handler = createHandler({
                 process: String(process.env.AWS_LAMBDA_FUNCTION_NAME)
             }
         }),
-        createAco({ useFolderLevelPermissions: false }),
+        createAco({ documentClient, useFolderLevelPermissions: false }),
         createAcoPageBuilderImportExportContext()
     ],
     debug
diff --git a/packages/serverless-cms-aws/package.json b/packages/serverless-cms-aws/package.json
index 7b37ae58689..d22907823a5 100644
--- a/packages/serverless-cms-aws/package.json
+++ b/packages/serverless-cms-aws/package.json
@@ -15,6 +15,7 @@
   "dependencies": {
     "@pulumi/aws": "6.67.0",
     "@pulumi/pulumi": "3.147.0",
+    "@webiny/admin-ui": "0.0.0",
     "@webiny/api-aco": "0.0.0",
     "@webiny/api-apw": "0.0.0",
     "@webiny/api-apw-scheduler-so-ddb": "0.0.0",
@@ -63,6 +64,7 @@
     "invariant": "^2.2.4",
     "node-fetch": "2.6.7",
     "ora": "^4.1.1",
+    "tailwindcss": "^3.4.6",
     "webpack": "^5.97.0"
   },
   "devDependencies": {
diff --git a/packages/serverless-cms-aws/src/api/plugins/executeDataMigrations.ts b/packages/serverless-cms-aws/src/api/plugins/executeDataMigrations.ts
index 45f51def4b2..f02331f3cfd 100644
--- a/packages/serverless-cms-aws/src/api/plugins/executeDataMigrations.ts
+++ b/packages/serverless-cms-aws/src/api/plugins/executeDataMigrations.ts
@@ -56,7 +56,8 @@ export const executeDataMigrations = {
         const apiOutput = getStackOutput({
             folder: "apps/api",
             env,
-            variant: inputs.variant || ""
+            variant: inputs.variant || "",
+            skipCache: true
         });
 
         context.info("Executing data migrations AWS Lambda function...");
diff --git a/packages/serverless-cms-aws/src/createAdminAppConfig.ts b/packages/serverless-cms-aws/src/createAdminAppConfig.ts
index 21acfc6707e..ae7b3098391 100644
--- a/packages/serverless-cms-aws/src/createAdminAppConfig.ts
+++ b/packages/serverless-cms-aws/src/createAdminAppConfig.ts
@@ -1,5 +1,9 @@
 import { createReactAppConfig, ReactAppConfigModifier } from "~/createReactAppConfig";
 import { ApiOutput } from "@webiny/pulumi-aws";
+import tailwindcss from "tailwindcss";
+
+// @ts-expect-error No types available for this package yet.
+import { traverseLoaders } from "@webiny/project-utils/traverseLoaders";
 
 export const createAdminAppConfig = (modifier?: ReactAppConfigModifier) => {
     return createReactAppConfig(baseParams => {
@@ -32,6 +36,22 @@ export const createAdminAppConfig = (modifier?: ReactAppConfigModifier) => {
             };
         });
 
+        /**
+         * Add Tailwind loader to webpack configuration.
+         */
+        config.webpack(config => {
+            traverseLoaders(config.module?.rules, (loader: any) => {
+                if (loader.loader && loader.loader.includes("postcss-loader")) {
+                    loader.options.postcssOptions.plugins = [
+                        ...loader.options.postcssOptions.plugins(),
+                        tailwindcss({ config: require.resolve("@webiny/admin-ui/tailwind.config") })
+                    ];
+                }
+            });
+
+            return config;
+        });
+
         if (modifier) {
             modifier(baseParams);
         }
diff --git a/packages/serverless-cms-aws/src/createWebsiteApp.ts b/packages/serverless-cms-aws/src/createWebsiteApp.ts
index fedda38a69a..3de37d5488f 100644
--- a/packages/serverless-cms-aws/src/createWebsiteApp.ts
+++ b/packages/serverless-cms-aws/src/createWebsiteApp.ts
@@ -4,13 +4,15 @@ import {
     generateCommonHandlers,
     lambdaEdgeWarning,
     renderWebsite,
-    telemetryNoLongerNewUser
+    telemetryNoLongerNewUser,
+    IRenderWebsiteParams
 } from "./website/plugins";
 import { createEnsureApiDeployedPlugins } from "~/utils/ensureApiDeployed";
 
 import { uploadAppToS3 } from "./react/plugins";
 
 export interface CreateWebsiteAppParams extends CreateWebsitePulumiAppParams {
+    renderWebsiteAfterDeploy?: (params: IRenderWebsiteParams) => boolean;
     plugins?: PluginCollection;
 }
 
@@ -19,7 +21,7 @@ export function createWebsiteApp(projectAppParams: CreateWebsiteAppParams = {})
         uploadAppToS3({ folder: "apps/website" }),
         generateCommonHandlers,
         lambdaEdgeWarning,
-        renderWebsite,
+        renderWebsite({ prerender: projectAppParams.renderWebsiteAfterDeploy ?? (() => true) }),
         telemetryNoLongerNewUser,
         ...createEnsureApiDeployedPlugins("website")
     ];
diff --git a/packages/serverless-cms-aws/src/enterprise/createWebsiteApp.ts b/packages/serverless-cms-aws/src/enterprise/createWebsiteApp.ts
index 5aa17a284c7..6259b2e2a8a 100644
--- a/packages/serverless-cms-aws/src/enterprise/createWebsiteApp.ts
+++ b/packages/serverless-cms-aws/src/enterprise/createWebsiteApp.ts
@@ -7,13 +7,15 @@ import {
     generateCommonHandlers,
     lambdaEdgeWarning,
     renderWebsite,
-    telemetryNoLongerNewUser
+    telemetryNoLongerNewUser,
+    IRenderWebsiteParams
 } from "~/website/plugins";
 import { createEnsureApiDeployedPlugins } from "~/utils/ensureApiDeployed";
 
 import { uploadAppToS3 } from "~/react/plugins";
 
 export interface CreateWebsiteAppParams extends CreateWebsitePulumiAppParams {
+    renderWebsiteAfterDeploy?: (params: IRenderWebsiteParams) => boolean;
     plugins?: PluginCollection;
 }
 
@@ -22,7 +24,7 @@ export function createWebsiteApp(projectAppParams: CreateWebsiteAppParams = {})
         uploadAppToS3({ folder: "apps/website" }),
         generateCommonHandlers,
         lambdaEdgeWarning,
-        renderWebsite,
+        renderWebsite({ prerender: projectAppParams.renderWebsiteAfterDeploy ?? (() => true) }),
         telemetryNoLongerNewUser,
         ...createEnsureApiDeployedPlugins("website")
     ];
diff --git a/packages/serverless-cms-aws/src/website/plugins/renderWebsite.ts b/packages/serverless-cms-aws/src/website/plugins/renderWebsite.ts
index 6815c669e03..6bf5630269e 100644
--- a/packages/serverless-cms-aws/src/website/plugins/renderWebsite.ts
+++ b/packages/serverless-cms-aws/src/website/plugins/renderWebsite.ts
@@ -2,72 +2,82 @@ import { EventBridgeClient, PutEventsCommand } from "@webiny/aws-sdk/client-even
 import { CliContext } from "@webiny/cli/types";
 import { getStackOutput } from "@webiny/cli-plugin-deploy-pulumi/utils";
 
+export interface IRenderWebsiteParams {
+    env: string;
+    inputs: IRenderWebsiteParamsInputs;
+    variant: string;
+}
+
 export interface IRenderWebsiteParamsInputs {
     preview?: boolean;
     build?: boolean;
 }
 
-export interface IRenderWebsiteParams {
-    env: string;
-    variant: string;
-    inputs: IRenderWebsiteParamsInputs;
+interface RenderWebsiteParams {
+    prerender: (params: IRenderWebsiteParams) => boolean;
 }
+
 /**
  * On every deployment of the Website project application, this plugin ensures all pages created
  * with the Webiny Page Builder application are re-rendered.
  */
-export const renderWebsite = {
-    type: "hook-after-deploy",
-    name: "hook-after-deploy-website-render",
-    async hook(params: IRenderWebsiteParams, context: CliContext) {
-        if (params.inputs.build === false) {
-            context.info(`"--no-build" argument detected - skipping Website re-rendering.`);
-            return;
-        }
+export const renderWebsite = (renderWebsiteParams: RenderWebsiteParams) => {
+    return {
+        type: "hook-after-deploy",
+        name: "hook-after-deploy-website-render",
+        async hook(params: IRenderWebsiteParams, context: CliContext) {
+            if (params.inputs.build === false) {
+                context.info(`"--no-build" argument detected - skipping Website re-rendering.`);
+                return;
+            }
 
-        // No need to re-render the website if we're doing a preview.
-        if (params.inputs.preview) {
-            return;
-        }
+            // No need to re-render the website if we're doing a preview.
+            if (params.inputs.preview) {
+                return;
+            }
 
-        const coreOutput = getStackOutput({
-            folder: "apps/core",
-            env: params.env,
-            variant: params.variant
-        });
+            if (!renderWebsiteParams.prerender(params)) {
+                context.info("Skipping complete website rendering.");
+                return;
+            }
 
-        context.info("Issuing a complete website render job...");
+            const coreOutput = getStackOutput({
+                folder: "apps/core",
+                env: params.env,
+                variant: params.variant
+            });
 
-        try {
-            const client = new EventBridgeClient({ region: coreOutput["region"] });
+            context.info("Issuing a complete website rendering job...");
 
-            const result = await client.send(
-                new PutEventsCommand({
-                    Entries: [
-                        {
-                            Source: "webiny-cli",
-                            EventBusName: coreOutput["eventBusArn"],
-                            DetailType: "RenderPages",
-                            Detail: JSON.stringify({ path: "*", tenant: "*" })
-                        }
-                    ]
-                })
-            );
+            try {
+                const client = new EventBridgeClient({ region: coreOutput["region"] });
 
-            const entry = result.Entries?.[0];
-            if (entry?.ErrorMessage) {
-                throw new Error(entry.ErrorMessage);
-            }
+                const result = await client.send(
+                    new PutEventsCommand({
+                        Entries: [
+                            {
+                                Source: "webiny-cli",
+                                EventBusName: coreOutput["eventBusArn"],
+                                DetailType: "RenderPages",
+                                Detail: JSON.stringify({ path: "*", tenant: "*" })
+                            }
+                        ]
+                    })
+                );
 
-            context.success("Website re-render job successfully issued.");
-            context.info(
-                "Please note that it can take a couple of minutes for the website to be fully updated."
-            );
-        } catch (e) {
-            context.error(
-                `An error occurred while trying to update default Page Builder app's settings!`
-            );
-            console.log(e);
+                const entry = result.Entries?.[0];
+                if (entry?.ErrorMessage) {
+                    throw new Error(entry.ErrorMessage);
+                }
+
+                context.success("Website rendering job successfully issued.");
+                context.info(
+                    "Please note that it can take a couple of minutes for the website to be fully updated."
+                );
+            } catch (e) {
+                context.error(`An error occurred while issuing a website rendering job!`);
+                console.log(e);
+            }
         }
-    }
+    };
 };
diff --git a/packages/serverless-cms-aws/tsconfig.build.json b/packages/serverless-cms-aws/tsconfig.build.json
index 3bfa5088b8f..15d705bd3ca 100644
--- a/packages/serverless-cms-aws/tsconfig.build.json
+++ b/packages/serverless-cms-aws/tsconfig.build.json
@@ -2,6 +2,7 @@
   "extends": "../../tsconfig.build.json",
   "include": ["src"],
   "references": [
+    { "path": "../admin-ui/tsconfig.build.json" },
     { "path": "../api-aco/tsconfig.build.json" },
     { "path": "../api-apw/tsconfig.build.json" },
     { "path": "../api-apw-scheduler-so-ddb/tsconfig.build.json" },
diff --git a/packages/serverless-cms-aws/tsconfig.json b/packages/serverless-cms-aws/tsconfig.json
index 035298374e0..a6fdcb1ff61 100644
--- a/packages/serverless-cms-aws/tsconfig.json
+++ b/packages/serverless-cms-aws/tsconfig.json
@@ -2,6 +2,7 @@
   "extends": "../../tsconfig.json",
   "include": ["src", "__tests__"],
   "references": [
+    { "path": "../admin-ui" },
     { "path": "../api-aco" },
     { "path": "../api-apw" },
     { "path": "../api-apw-scheduler-so-ddb" },
@@ -51,6 +52,8 @@
     "paths": {
       "~/*": ["./src/*"],
       "~tests/*": ["./__tests__/*"],
+      "@webiny/admin-ui/*": ["../admin-ui/src/*"],
+      "@webiny/admin-ui": ["../admin-ui/src"],
       "@webiny/api-aco/*": ["../api-aco/src/*"],
       "@webiny/api-aco": ["../api-aco/src"],
       "@webiny/api-apw/*": ["../api-apw/src/*"],
diff --git a/packages/shared-aco/.babelrc.js b/packages/shared-aco/.babelrc.js
new file mode 100644
index 00000000000..9da7674cb52
--- /dev/null
+++ b/packages/shared-aco/.babelrc.js
@@ -0,0 +1 @@
+module.exports = require("@webiny/project-utils").createBabelConfigForNode({ path: __dirname });
diff --git a/packages/shared-aco/LICENSE b/packages/shared-aco/LICENSE
new file mode 100644
index 00000000000..f772d04d4db
--- /dev/null
+++ b/packages/shared-aco/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) Webiny
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/packages/shared-aco/README.md b/packages/shared-aco/README.md
new file mode 100644
index 00000000000..02afe6e5b00
--- /dev/null
+++ b/packages/shared-aco/README.md
@@ -0,0 +1,18 @@
+# @webiny/api-headless-cms-aco
+
+[![](https://img.shields.io/npm/dw/@webiny/api-headless-cms-aco.svg)](https://www.npmjs.com/package/@webiny/api-headless-cms-aco)
+[![](https://img.shields.io/npm/v/@webiny/api-headless-cms-aco.svg)](https://www.npmjs.com/package/@webiny/api-headless-cms-aco)
+[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
+[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
+
+## Install
+
+```
+npm install --save @webiny/api-headless-cms-aco
+```
+
+Or if you prefer yarn:
+
+```
+yarn add @webiny/api-headless-cms-aco
+```
\ No newline at end of file
diff --git a/packages/shared-aco/package.json b/packages/shared-aco/package.json
new file mode 100644
index 00000000000..03cf7c48b7f
--- /dev/null
+++ b/packages/shared-aco/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "@webiny/shared-aco",
+  "version": "0.0.0",
+  "main": "index.js",
+  "keywords": [
+    "shared-aco:base"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/webiny/webiny-js.git",
+    "directory": "packages/shared-aco"
+  },
+  "description": "Shared utilities for the ACO api and admin packages.",
+  "author": "Webiny Ltd.",
+  "license": "MIT",
+  "scripts": {
+    "build": "node ../cli/bin.js run build",
+    "watch": "node ../cli/bin.js run watch"
+  },
+  "publishConfig": {
+    "access": "public",
+    "directory": "dist"
+  },
+  "devDependencies": {
+    "@webiny/project-utils": "0.0.0",
+    "typescript": "5.3.3"
+  }
+}
diff --git a/packages/api-aco/src/utils/decorators/constants.ts b/packages/shared-aco/src/constants.ts
similarity index 100%
rename from packages/api-aco/src/utils/decorators/constants.ts
rename to packages/shared-aco/src/constants.ts
diff --git a/packages/shared-aco/src/flp/Path.ts b/packages/shared-aco/src/flp/Path.ts
new file mode 100644
index 00000000000..6075963b22b
--- /dev/null
+++ b/packages/shared-aco/src/flp/Path.ts
@@ -0,0 +1,11 @@
+import { ROOT_FOLDER } from "~/constants";
+
+export class Path {
+    static create(slug: string, parentPath?: string) {
+        if (parentPath) {
+            return `${parentPath}/${slug}`;
+        }
+
+        return `${ROOT_FOLDER}/${slug}`;
+    }
+}
diff --git a/packages/shared-aco/src/flp/Permissions.ts b/packages/shared-aco/src/flp/Permissions.ts
new file mode 100644
index 00000000000..68c357c7fdd
--- /dev/null
+++ b/packages/shared-aco/src/flp/Permissions.ts
@@ -0,0 +1,55 @@
+import type { FolderLevelPermission, FolderPermission } from "~/flp/flp.types";
+
+export class Permissions {
+    public static create(
+        permissions?: FolderPermission[],
+        parentFlp?: Pick<FolderLevelPermission, "id" | "permissions"> | null
+    ): FolderPermission[] {
+        const parentFolderPermissions = parentFlp?.permissions || [];
+        const currentFolderPermissions =
+            permissions?.filter(p => p.inheritedFrom !== `parent:${parentFlp?.id}`) || [];
+
+        if (!parentFolderPermissions.length) {
+            return currentFolderPermissions;
+        }
+
+        // Merge parent and current folder permissions:
+        // - current folder permissions take precedence over parent permissions
+        // - only if parent permission's level is set to `no-access`, then we ignore the current folder permission
+        const permissionsInheritedFromParentFolder: FolderPermission[] = [];
+
+        for (const parentFolderPermission of parentFolderPermissions) {
+            if (parentFolderPermission.level === "no-access") {
+                permissionsInheritedFromParentFolder.push({
+                    ...parentFolderPermission,
+                    inheritedFrom: `parent:${parentFlp!.id}`
+                });
+                continue;
+            }
+
+            const currentFolderHasOverridePermission = currentFolderPermissions.some(
+                permission => permission.target === parentFolderPermission.target
+            );
+
+            if (currentFolderHasOverridePermission) {
+                continue;
+            }
+
+            permissionsInheritedFromParentFolder.push({
+                ...parentFolderPermission,
+                inheritedFrom: `parent:${parentFlp!.id}`
+            });
+        }
+
+        // Add current folder permissions that are not present in the parent folder permissions.
+        const applicableCurrentFolderPermissions = currentFolderPermissions.filter(permission => {
+            const alreadyInInheritedPermissions = permissionsInheritedFromParentFolder.some(
+                p => p.target === permission.target
+            );
+
+            return !alreadyInInheritedPermissions;
+        });
+
+        return [...applicableCurrentFolderPermissions, ...permissionsInheritedFromParentFolder];
+    }
+}
diff --git a/packages/shared-aco/src/flp/flp.types.ts b/packages/shared-aco/src/flp/flp.types.ts
new file mode 100644
index 00000000000..678e350e3fd
--- /dev/null
+++ b/packages/shared-aco/src/flp/flp.types.ts
@@ -0,0 +1,16 @@
+export type FolderAccessLevel = "owner" | "viewer" | "editor" | "public" | "no-access";
+
+export interface FolderPermission {
+    target: `admin:${string}` | `team:${string}`;
+    level: FolderAccessLevel;
+    inheritedFrom?: string;
+}
+
+export interface FolderLevelPermission {
+    id: string;
+    parentId: string;
+    slug: string;
+    path: string;
+    permissions: FolderPermission[];
+    type: string;
+}
diff --git a/packages/shared-aco/src/flp/index.ts b/packages/shared-aco/src/flp/index.ts
new file mode 100644
index 00000000000..49811bd6f70
--- /dev/null
+++ b/packages/shared-aco/src/flp/index.ts
@@ -0,0 +1,2 @@
+export * from "./Path";
+export * from "./Permissions";
diff --git a/packages/shared-aco/src/index.ts b/packages/shared-aco/src/index.ts
new file mode 100644
index 00000000000..72dc1328695
--- /dev/null
+++ b/packages/shared-aco/src/index.ts
@@ -0,0 +1,2 @@
+export * from "./flp";
+export * from "./constants";
diff --git a/packages/shared-aco/src/types.ts b/packages/shared-aco/src/types.ts
new file mode 100644
index 00000000000..ff5a5b395c1
--- /dev/null
+++ b/packages/shared-aco/src/types.ts
@@ -0,0 +1 @@
+export * from "./flp/flp.types";
diff --git a/packages/shared-aco/tsconfig.build.json b/packages/shared-aco/tsconfig.build.json
new file mode 100644
index 00000000000..5e7843d3c8c
--- /dev/null
+++ b/packages/shared-aco/tsconfig.build.json
@@ -0,0 +1,12 @@
+{
+  "extends": "../../tsconfig.build.json",
+  "include": ["src"],
+  "references": [],
+  "compilerOptions": {
+    "rootDir": "./src",
+    "outDir": "./dist",
+    "declarationDir": "./dist",
+    "paths": { "~/*": ["./src/*"], "~tests/*": ["./__tests__/*"] },
+    "baseUrl": "."
+  }
+}
diff --git a/packages/shared-aco/tsconfig.json b/packages/shared-aco/tsconfig.json
new file mode 100644
index 00000000000..6ca26f3c929
--- /dev/null
+++ b/packages/shared-aco/tsconfig.json
@@ -0,0 +1,12 @@
+{
+  "extends": "../../tsconfig.json",
+  "include": ["src", "__tests__"],
+  "references": [],
+  "compilerOptions": {
+    "rootDirs": ["./src", "./__tests__"],
+    "outDir": "./dist",
+    "declarationDir": "./dist",
+    "paths": { "~/*": ["./src/*"], "~tests/*": ["./__tests__/*"] },
+    "baseUrl": "."
+  }
+}
diff --git a/packages/shared-aco/webiny.config.js b/packages/shared-aco/webiny.config.js
new file mode 100644
index 00000000000..6dff86766c9
--- /dev/null
+++ b/packages/shared-aco/webiny.config.js
@@ -0,0 +1,8 @@
+const { createWatchPackage, createBuildPackage } = require("@webiny/project-utils");
+
+module.exports = {
+    commands: {
+        build: createBuildPackage({ cwd: __dirname }),
+        watch: createWatchPackage({ cwd: __dirname })
+    }
+};
diff --git a/packages/system-requirements/package.json b/packages/system-requirements/package.json
index 86fad990b43..9964341f723 100644
--- a/packages/system-requirements/package.json
+++ b/packages/system-requirements/package.json
@@ -2,9 +2,6 @@
   "name": "@webiny/system-requirements",
   "version": "0.0.0",
   "main": "index.js",
-  "bin": {
-    "webiny": "./bin.js"
-  },
   "repository": {
     "type": "git",
     "url": "https://github.com/webiny/webiny-js.git",
diff --git a/packages/tasks/src/plugins/TaskServicePlugin.ts b/packages/tasks/src/plugins/TaskServicePlugin.ts
index be0beaa223d..ed88368fb8b 100644
--- a/packages/tasks/src/plugins/TaskServicePlugin.ts
+++ b/packages/tasks/src/plugins/TaskServicePlugin.ts
@@ -1,8 +1,7 @@
 import { Plugin } from "@webiny/plugins";
-import { Context, ITask } from "~/types";
+import type { ITask } from "~/types";
 
 export interface ITaskServiceCreatePluginParams {
-    context: Context;
     getTenant(): string;
     getLocale(): string;
 }
diff --git a/packages/tasks/src/service/EventBridgeEventTransportPlugin.ts b/packages/tasks/src/service/EventBridgeEventTransportPlugin.ts
index 1c2672e0e9c..fe0d2678351 100644
--- a/packages/tasks/src/service/EventBridgeEventTransportPlugin.ts
+++ b/packages/tasks/src/service/EventBridgeEventTransportPlugin.ts
@@ -4,14 +4,13 @@ import {
     ITaskServiceTask,
     TaskServicePlugin
 } from "~/plugins";
-import { Context, ITaskEventInput } from "~/types";
+import type { ITaskEventInput } from "~/types";
 import type { PutEventsCommandOutput } from "@webiny/aws-sdk/client-eventbridge";
 import { EventBridgeClient, PutEventsCommand } from "@webiny/aws-sdk/client-eventbridge";
 import { WebinyError } from "@webiny/error";
 import { GenericRecord } from "@webiny/api/types";
 
 class EventBridgeService implements ITaskService {
-    protected readonly context: Context;
     protected readonly getTenant: () => string;
     protected readonly getLocale: () => string;
     private readonly client: EventBridgeClient;
@@ -20,7 +19,6 @@ class EventBridgeService implements ITaskService {
         this.client = new EventBridgeClient({
             region: process.env.AWS_REGION
         });
-        this.context = params.context;
         this.getTenant = params.getTenant;
         this.getLocale = params.getLocale;
     }
diff --git a/packages/tasks/src/service/StepFunctionServicePlugin.ts b/packages/tasks/src/service/StepFunctionServicePlugin.ts
index aa7fc82e608..4ea49be39dc 100644
--- a/packages/tasks/src/service/StepFunctionServicePlugin.ts
+++ b/packages/tasks/src/service/StepFunctionServicePlugin.ts
@@ -1,19 +1,15 @@
-import {
-    ITaskService,
-    ITaskServiceCreatePluginParams,
-    ITaskServiceTask,
-    TaskServicePlugin
-} from "~/plugins";
+import type { ITaskService, ITaskServiceCreatePluginParams, ITaskServiceTask } from "~/plugins";
+import { TaskServicePlugin } from "~/plugins";
 import {
     createStepFunctionClient,
     DescribeExecutionCommandOutput,
     describeExecutionFactory,
     triggerStepFunctionFactory
 } from "@webiny/aws-sdk/client-sfn";
-import { ITaskEventInput } from "~/handler/types";
+import type { ITaskEventInput } from "~/handler/types";
 import { generateAlphaNumericId } from "@webiny/utils";
 import { ServiceDiscovery } from "@webiny/api";
-import { ITask } from "~/types";
+import type { ITask } from "~/types";
 
 export type IStepFunctionServiceFetchResult = DescribeExecutionCommandOutput;
 
@@ -21,7 +17,7 @@ export interface IDetailWrapper<T> {
     detail: T;
 }
 
-class StepFunctionService implements ITaskService {
+export class StepFunctionService implements ITaskService {
     private readonly getTenant: () => string;
     private readonly getLocale: () => string;
     private readonly trigger: ReturnType<typeof triggerStepFunctionFactory>;
diff --git a/packages/tasks/src/service/createService.ts b/packages/tasks/src/service/createService.ts
index e36620dc440..05a35dea341 100644
--- a/packages/tasks/src/service/createService.ts
+++ b/packages/tasks/src/service/createService.ts
@@ -26,7 +26,6 @@ export const createService = (params: ICreateTransport): ITaskService => {
     };
 
     return plugin.createService({
-        context: params.context,
         getTenant,
         getLocale
     });
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 2aef2d49097..0822f1b4bb2 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -14,71 +14,20 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "@editorjs/editorjs": "2.26.5",
-    "@emotion/react": "11.10.8",
-    "@emotion/styled": "11.10.6",
-    "@material-design-icons/svg": "^0.14.13",
-    "@rmwc/button": "14.3.5",
-    "@rmwc/checkbox": "14.3.5",
-    "@rmwc/chip": "14.3.5",
-    "@rmwc/data-table": "14.3.5",
-    "@rmwc/dialog": "14.3.5",
-    "@rmwc/drawer": "14.3.5",
-    "@rmwc/elevation": "14.3.5",
-    "@rmwc/fab": "14.3.5",
-    "@rmwc/grid": "14.3.5",
-    "@rmwc/icon-button": "14.3.5",
-    "@rmwc/list": "14.3.5",
-    "@rmwc/menu": "14.3.5",
-    "@rmwc/radio": "14.3.5",
-    "@rmwc/ripple": "14.3.5",
-    "@rmwc/select": "14.3.5",
-    "@rmwc/slider": "14.3.5",
-    "@rmwc/snackbar": "14.3.5",
-    "@rmwc/switch": "14.3.5",
-    "@rmwc/tabs": "14.3.5",
-    "@rmwc/textfield": "14.3.5",
-    "@rmwc/top-app-bar": "14.3.5",
-    "@rmwc/touch-target": "14.3.5",
-    "@rmwc/typography": "14.3.5",
     "@svgr/webpack": "^6.1.1",
-    "@tanstack/react-table": "^8.5.22",
-    "@webiny/form": "0.0.0",
+    "@webiny/admin-ui": "0.0.0",
     "@webiny/utils": "0.0.0",
-    "brace": "^0.11.1",
     "classnames": "^2.5.1",
-    "cropperjs": "^1.4.3",
-    "dot-prop-immutable": "^2.1.1",
-    "downshift": "^2.1.5",
-    "emotion": "10.0.27",
     "keycode": "^2.2.0",
-    "load-script": "^1.0.0",
-    "lodash": "^4.17.21",
-    "material-components-web": "^14.0.0",
-    "nprogress": "^0.2.0",
-    "nuka-carousel": "4.7.1",
-    "rc-tooltip": "^5.3.1",
-    "react-ace": "^6.1.4",
-    "react-butterfiles": "^1.3.3",
-    "react-color": "^2.19.3",
-    "react-columned": "^1.1.3",
-    "react-custom-scrollbars": "^4.2.1",
-    "react-loading-skeleton": "^3.1.0",
-    "react-spinner-material": "1.1.4",
-    "react-transition-group": "^4.4.5",
-    "timeago-react": "^3.0.6"
+    "lodash": "^4.17.21"
   },
   "devDependencies": {
     "@emotion/babel-plugin": "^11.11.0",
     "@testing-library/react": "^15.0.7",
-    "@types/nprogress": "^0.2.0",
-    "@types/react-color": "^2.17.11",
-    "@types/react-custom-scrollbars": "^4.0.10",
-    "@types/react-transition-group": "^4.4.4",
     "@webiny/cli": "0.0.0",
     "@webiny/project-utils": "0.0.0",
     "@webiny/validation": "0.0.0",
-    "babel-loader": "^9.2.1",
+    "babel-loader": "9.2.1",
     "execa": "^5.1.1",
     "ncp": "^2.0.0",
     "raw-loader": "^4.0.2",
@@ -107,10 +56,7 @@
   "adio": {
     "ignore": {
       "dependencies": [
-        "@svgr/webpack",
-        "material-components-web",
-        "@emotion/react",
-        "@rmwc/touch-target"
+        "@svgr/webpack"
       ]
     }
   },
diff --git a/packages/ui/src/Accordion/Accordion.tsx b/packages/ui/src/Accordion/Accordion.tsx
index 8f2b724b896..4947e17a883 100644
--- a/packages/ui/src/Accordion/Accordion.tsx
+++ b/packages/ui/src/Accordion/Accordion.tsx
@@ -1,11 +1,9 @@
 import React from "react";
-import { List, ListItem } from "../List";
-import { AccordionItem } from "./AccordionItem";
-import { Elevation } from "../Elevation";
-import { css } from "emotion";
-import classNames from "classnames";
+import { Accordion as AdminUiAccordion } from "@webiny/admin-ui";
+import { ListItem } from "../List";
+import { type AccordionItem } from "./AccordionItem";
 
-export interface AccordionProps {
+interface AccordionProps {
     /**
      * Element displayed when accordion is expanded.
      */
@@ -25,25 +23,12 @@ export interface AccordionProps {
     className?: string;
 }
 
-const listStyle = css`
-    &.mdc-deprecated-list {
-        padding: 0;
-        &.mdc-deprecated-list--two-line .mdc-deprecated-list-item {
-            height: 48px;
-            padding: 8px 20px;
-        }
-    }
-`;
-
+/**
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please use the `Accordion` component from the `@webiny/admin-ui` package instead.
+ */
 const Accordion = (props: AccordionProps) => {
-    const { children, elevation = 2, className, ...other } = props;
-    return (
-        <Elevation z={elevation} className={classNames("webiny-ui-accordion", className)}>
-            <List twoLine className={listStyle} {...other}>
-                {children}
-            </List>
-        </Elevation>
-    );
+    return <AdminUiAccordion>{props.children}</AdminUiAccordion>;
 };
 
-export { Accordion };
+export { Accordion, type AccordionProps };
diff --git a/packages/ui/src/Accordion/AccordionItem.tsx b/packages/ui/src/Accordion/AccordionItem.tsx
index 109c11633f0..1eb810d1c2d 100644
--- a/packages/ui/src/Accordion/AccordionItem.tsx
+++ b/packages/ui/src/Accordion/AccordionItem.tsx
@@ -1,226 +1,84 @@
-import React, { CSSProperties, useCallback, useEffect, useState } from "react";
-import { ListItem, ListItemGraphic, ListItemMeta } from "~/List";
-import Transition, { TransitionStatus } from "react-transition-group/Transition";
-import { Icon } from "~/Icon";
-import styled from "@emotion/styled";
-import { css } from "emotion";
-import { Typography } from "~/Typography";
-import { ReactComponent as UpArrow } from "./icons/round-keyboard_arrow_up-24px.svg";
-import { ReactComponent as DownArrow } from "./icons/round-keyboard_arrow_down-24px.svg";
-import classNames from "classnames";
-import {
-    AccordionItemAction,
-    AccordionItemActions,
-    AccordionItemElement
-} from "~/Accordion/AccordionItemActions";
-
-const Content = styled.div`
-    width: 100%;
-    border-right: 1px solid var(--mdc-theme-background);
-    border-bottom: 1px solid var(--mdc-theme-background);
-    border-left: 1px solid var(--mdc-theme-background);
-    box-sizing: border-box;
-    > .mdc-layout-grid {
-        margin: -24px;
-    }
-`;
-
-const listItem = css`
-    cursor: pointer;
-    border-bottom: 1px solid var(--mdc-theme-background);
-    &:last-child {
-        border-bottom: none;
-    }
-    .mdc-deprecated-list-item__graphic {
-        margin-right: 20px;
-    }
-`;
-
-const ListItemTitle = styled.div`
-    font-weight: 600;
-    line-height: 100%;
-`;
-
-const ListItemDescription = styled.div`
-    line-height: 100%;
-`;
-
-const TitleContent = styled.div`
-    display: flex;
-    flex-direction: column;
-`;
-
-const openedState = css`
-    background-color: var(--mdc-theme-on-background);
-`;
-
-const nonInteractive = css`
-    background-color: var(--mdc-theme-surface);
-`;
-
-const duration = 150;
-const defaultStyle: CSSProperties = {
-    transition: `all ${duration}ms ease-in-out`,
-    opacity: 0,
-    height: 0,
-    pointerEvents: "auto",
-    overflow: "hidden"
-};
-
-const transitionStyles: Record<string, CSSProperties> = {
-    entering: {
-        opacity: 0,
-        height: 0,
-        padding: "20px",
-        pointerEvents: "auto",
-        overflow: "initial"
-    },
-    entered: {
-        opacity: 1,
-        height: "auto",
-        padding: "20px",
-        pointerEvents: "auto",
-        overflow: "initial"
-    },
-    exiting: {
-        height: "auto",
-        padding: "20px",
-        pointerEvents: "auto",
-        overflow: "initial"
-    }
-};
-
-const Divider = styled.span`
-    width: 1px;
-    margin: 0 15px;
-    height: 100%;
-    background-color: var(--mdc-theme-on-background);
-`;
-
-const Actions = styled(ListItemMeta)`
-    display: flex;
-    height: 40%;
-    align-items: center;
-`;
+import React, { useMemo, useEffect, useState } from "react";
+import { Accordion as AdminUiAccordion } from "@webiny/admin-ui";
+import { withStaticProps } from "@webiny/admin-ui/utils";
 
 export interface AccordionItemProps {
     /**
-     * Can user toggle the accordion item by clicking it? Defaults to `true`.
-     */
-    interactive?: boolean;
-    /**
-     * Actions to show on the right side of the accordion item
-     */
-    actions?: React.ReactElement | null;
-    /**
-     * Left side icon
+     * Element displayed when accordion is expanded.
      */
-    icon?: React.ReactElement | null;
-
-    /**
-     * Accordion title
-     */
-    title?: React.ReactNode;
+    children: React.ReactNode;
 
     /**
-     * Optional description
+     * @deprecated This prop no longer has any effect.
+     * Elevation number, default set to 2
      */
-    description?: string;
+    elevation?: number;
 
     /**
      * Append a class name
      */
     className?: string;
 
-    /**
-     * Render item opened by default
-     */
+    value?: string;
+
+    title?: React.ReactNode;
+
+    description?: React.ReactNode;
+
     open?: boolean;
+
+    interactive?: boolean;
+
+    handle?: React.ReactNode;
+
+    actions?: React.ReactNode;
+
+    icon?: React.ReactNode;
+
     /**
-     * For testing purpose
-     */
-    "data-testid"?: string;
-    /**
-     * Append a class name to Icon
+     * @deprecated This prop no longer has any effect.
      */
     iconClassName?: string;
-
-    children: React.ReactNode;
 }
 
-const AccordionItemComponent = (props: AccordionItemProps) => {
-    const [open, setState] = useState<boolean>(props.open ? props.open : false);
-    const { interactive = true, actions } = props;
-
-    const toggleState = useCallback(() => {
-        setState(!open);
-    }, [open]);
-
-    const onClick = interactive ? toggleState : undefined;
-    const divider = interactive && actions ? <Divider /> : null;
-    const arrowIcon = interactive ? <Icon icon={!open ? <DownArrow /> : <UpArrow />} /> : null;
+const AccordionItemBase = (props: AccordionItemProps) => {
+    const [open, setOpen] = useState<boolean>(props.open ?? false);
 
     useEffect(() => {
-        setState(!!props.open);
+        setOpen(!!props.open);
     }, [props.open]);
 
+    const icon = useMemo(() => {
+        return props.icon ? (
+            <AdminUiAccordion.Item.Icon
+                icon={props.icon}
+                label={typeof props.title === "string" ? props.title : ""}
+            />
+        ) : null;
+    }, [props.icon]);
+
     return (
-        <div className={classNames("webiny-ui-accordion-item", props.className)}>
-            <ListItem
-                disabled={!interactive}
-                className={classNames(
-                    listItem,
-                    { [openedState]: open },
-                    { [nonInteractive]: !interactive },
-                    "webiny-ui-accordion-item__list-item"
-                )}
-                onClick={onClick}
-                data-testid={props["data-testid"]}
-            >
-                {props.icon && (
-                    <ListItemGraphic>
-                        <Icon icon={props.icon} className={props.iconClassName} />
-                    </ListItemGraphic>
-                )}
-
-                <TitleContent className="webiny-ui-accordion-item__title">
-                    <ListItemTitle>{props.title}</ListItemTitle>
-                    {props.description && (
-                        <ListItemDescription>
-                            <Typography use={"body2"}>{props.description}</Typography>
-                        </ListItemDescription>
-                    )}
-                </TitleContent>
-                <Actions>
-                    {props.actions ? props.actions : null}
-                    {divider}
-                    {arrowIcon}
-                </Actions>
-            </ListItem>
-            <Transition in={open} timeout={duration}>
-                {(state: TransitionStatus) => (
-                    <Content
-                        style={{ ...defaultStyle, ...transitionStyles[state] }}
-                        className="webiny-ui-accordion-item__content"
-                    >
-                        {props.children}
-                    </Content>
-                )}
-            </Transition>
-        </div>
+        <AdminUiAccordion.Item
+            {...props}
+            open={open}
+            onOpenChange={open => setOpen(open)}
+            icon={icon}
+            title={props.title || ""}
+        >
+            {props.children as React.ReactElement}
+        </AdminUiAccordion.Item>
     );
 };
 
-type AccordionItem = React.ComponentType<AccordionItemProps> & {
-    Divider: typeof Divider;
-    Actions: typeof AccordionItemActions;
-    Action: typeof AccordionItemAction;
-    Element: typeof AccordionItemElement;
-};
-
-export const AccordionItem: AccordionItem = Object.assign(AccordionItemComponent, {
-    Divider,
-    Action: AccordionItemAction,
-    Actions: AccordionItemActions,
-    Element: AccordionItemElement
+/**
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please use the `Accordion.Item` component from the `@webiny/admin-ui` package instead.
+ */
+export const AccordionItem = withStaticProps(AccordionItemBase, {
+    Divider: AdminUiAccordion.Item.Action.Separator,
+    Action: AdminUiAccordion.Item.Action,
+    Handle: AdminUiAccordion.Item.Handle,
+    Icon: AdminUiAccordion.Item.Icon,
+    Actions: (props: any) => <>{props.children}</>,
+    Element: (props: any) => <div data-role={"accordion-element"} {...props} />
 });
diff --git a/packages/ui/src/Accordion/AccordionItemActions.tsx b/packages/ui/src/Accordion/AccordionItemActions.tsx
index d62af463c22..168171efcba 100644
--- a/packages/ui/src/Accordion/AccordionItemActions.tsx
+++ b/packages/ui/src/Accordion/AccordionItemActions.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 import { IconButton } from "~/Button";
+import { Tooltip } from "~/Tooltip";
 
 interface AccordionItemActionsProps {
     children: React.ReactNode;
@@ -12,11 +13,21 @@ export const AccordionItemActions = ({ children }: AccordionItemActionsProps) =>
 export interface AccordionItemActionProps {
     icon: JSX.Element;
     onClick: () => void;
+    tooltip?: string;
     disabled?: boolean;
 }
 
-export const AccordionItemAction = ({ icon, onClick, disabled }: AccordionItemActionProps) => {
-    return (
+/**
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please use the `Accordion.Item.Action` component from the `@webiny/admin-ui` package instead.
+ */
+export const AccordionItemAction = ({
+    icon,
+    onClick,
+    tooltip,
+    disabled
+}: AccordionItemActionProps) => {
+    const iconButton = (
         <IconButton
             disabled={disabled}
             icon={icon}
@@ -26,12 +37,26 @@ export const AccordionItemAction = ({ icon, onClick, disabled }: AccordionItemAc
             }}
         />
     );
+
+    if (!tooltip) {
+        return iconButton;
+    }
+
+    return (
+        <Tooltip placement={"bottom"} content={tooltip}>
+            {iconButton}
+        </Tooltip>
+    );
 };
 
 export interface AccordionItemElementProps {
     element: JSX.Element;
 }
 
+/**
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please use the `Accordion.Item.Action` component from the `@webiny/admin-ui` package instead.
+ */
 export const AccordionItemElement = ({ element }: AccordionItemElementProps) => {
     return <div onClick={e => e.stopPropagation()}>{element}</div>;
 };
diff --git a/packages/ui/src/Accordion/README.md b/packages/ui/src/Accordion/README.md
deleted file mode 100644
index 9b9cc5702c3..00000000000
--- a/packages/ui/src/Accordion/README.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# Accordion
-
-### Description
-
-Use `Accordion` component to display a set of `AccordionItems`.
-
-### Import
-
-```js
-import { Accordion, AccordionItem } from "@webiny/ui/Accordion";
-```
diff --git a/packages/ui/src/Accordion/icons/round-keyboard_arrow_down-24px.svg b/packages/ui/src/Accordion/icons/round-keyboard_arrow_down-24px.svg
deleted file mode 100644
index e6e61d82b4f..00000000000
--- a/packages/ui/src/Accordion/icons/round-keyboard_arrow_down-24px.svg
+++ /dev/null
@@ -1,16 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px"
-	 height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
-<g id="Bounding_Boxes" display="none">
-	<g id="ui_x5F_spec_x5F_header_copy_3" display="inline">
-	</g>
-	<path display="inline" fill="none" d="M0,0h24v24H0V0z"/>
-</g>
-<g id="Rounded">
-	<g id="ui_x5F_spec_x5F_header_copy_6">
-	</g>
-	<path fill="currentColor" d="M8.12,9.29L12,13.17l3.88-3.88c0.39-0.39,1.02-0.39,1.41,0l0,0c0.39,0.39,0.39,1.02,0,1.41l-4.59,4.59
-		c-0.39,0.39-1.02,0.39-1.41,0l-4.59-4.59c-0.39-0.39-0.39-1.02,0-1.41l0,0C7.09,8.91,7.73,8.9,8.12,9.29z"/>
-</g>
-</svg>
diff --git a/packages/ui/src/Accordion/icons/round-keyboard_arrow_up-24px.svg b/packages/ui/src/Accordion/icons/round-keyboard_arrow_up-24px.svg
deleted file mode 100644
index d01ff104e3d..00000000000
--- a/packages/ui/src/Accordion/icons/round-keyboard_arrow_up-24px.svg
+++ /dev/null
@@ -1,16 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px"
-	 height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
-<g id="Bounding_Boxes" display="none">
-	<g id="ui_x5F_spec_x5F_header_copy_3" display="inline">
-	</g>
-	<path display="inline" fill="none" d="M0,0h24v24H0V0z"/>
-</g>
-<g id="Rounded">
-	<g id="ui_x5F_spec_x5F_header_copy_6">
-	</g>
-	<path fill="currentColor" d="M8.12,14.71L12,10.83l3.88,3.88c0.39,0.39,1.02,0.39,1.41,0l0,0c0.39-0.39,0.39-1.02,0-1.41l-4.59-4.59
-		c-0.39-0.39-1.02-0.39-1.41,0l-4.59,4.59c-0.39,0.39-0.39,1.02,0,1.41l0,0C7.09,15.09,7.73,15.1,8.12,14.71z"/>
-</g>
-</svg>
diff --git a/packages/ui/src/Accordion/icons/round-settings-24px.svg b/packages/ui/src/Accordion/icons/round-settings-24px.svg
deleted file mode 100644
index 3b477d7500a..00000000000
--- a/packages/ui/src/Accordion/icons/round-settings-24px.svg
+++ /dev/null
@@ -1,21 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 51.1 (57501) - http://www.bohemiancoding.com/sketch -->
-    <title>round-settings-24px (2)</title>
-    <desc>Created with Sketch.</desc>
-    <defs></defs>
-    <g id="Webiny---Site-Manager" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Site-Settings" transform="translate(-291.000000, -161.000000)">
-            <g id="General-settings" transform="translate(264.000000, 151.000000)">
-                <g id="round-settings-24px-(2)" transform="translate(25.000000, 8.000000)">
-                    <g id="Bounding_Boxes">
-                        <polygon id="Shape" points="0 0 24 0 24 24 0 24"></polygon>
-                    </g>
-                    <g id="Rounded" transform="translate(2.000000, 2.000000)" fill="#4A4A4A" fill-rule="nonzero">
-                        <path d="M17.43,10.98 C17.47,10.66 17.5,10.34 17.5,10 C17.5,9.66 17.47,9.34 17.43,9.02 L19.54,7.37 C19.73,7.22 19.78,6.95 19.66,6.73 L17.66,3.27 C17.54,3.05 17.27,2.97 17.05,3.05 L14.56,4.05 C14.04,3.65 13.48,3.32 12.87,3.07 L12.49,0.42 C12.46,0.18 12.25,0 12,0 L8,0 C7.75,0 7.54,0.18 7.51,0.42 L7.13,3.07 C6.52,3.32 5.96,3.66 5.44,4.05 L2.95,3.05 C2.72,2.96 2.46,3.05 2.34,3.27 L0.34,6.73 C0.21,6.95 0.27,7.22 0.46,7.37 L2.57,9.02 C2.53,9.34 2.5,9.67 2.5,10 C2.5,10.33 2.53,10.66 2.57,10.98 L0.46,12.63 C0.27,12.78 0.22,13.05 0.34,13.27 L2.34,16.73 C2.46,16.95 2.73,17.03 2.95,16.95 L5.44,15.95 C5.96,16.35 6.52,16.68 7.13,16.93 L7.51,19.58 C7.54,19.82 7.75,20 8,20 L12,20 C12.25,20 12.46,19.82 12.49,19.58 L12.87,16.93 C13.48,16.68 14.04,16.34 14.56,15.95 L17.05,16.95 C17.28,17.04 17.54,16.95 17.66,16.73 L19.66,13.27 C19.78,13.05 19.73,12.78 19.54,12.63 L17.43,10.98 Z M10,13.5 C8.07,13.5 6.5,11.93 6.5,10 C6.5,8.07 8.07,6.5 10,6.5 C11.93,6.5 13.5,8.07 13.5,10 C13.5,11.93 11.93,13.5 10,13.5 Z" id="Shape"></path>
-                    </g>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>
\ No newline at end of file
diff --git a/packages/ui/src/Alert/Alert.tsx b/packages/ui/src/Alert/Alert.tsx
index cdb0f221e06..dc351ed61ba 100644
--- a/packages/ui/src/Alert/Alert.tsx
+++ b/packages/ui/src/Alert/Alert.tsx
@@ -1,34 +1,5 @@
 import React from "react";
-import { css } from "emotion";
-
-const alertStyles = css({
-    borderLeft: "3px solid red",
-    margin: "5px 0 15px 0",
-    padding: "2px 0 2px 10px",
-    ".webiny-ui-alert__title": {
-        fontWeight: 600,
-        lineHeight: "150%",
-        color: "var(--mdc-theme-on-surface)",
-        marginBottom: 5
-    },
-    ".webiny-ui-alert__message": {
-        lineHeight: "120%",
-        fontSize: 14,
-        color: "var(--mdc-theme-on-surface)"
-    },
-    "&.webiny-ui-alert--success": {
-        borderColor: "#21CEAF"
-    },
-    "&.webiny-ui-alert--info": {
-        borderColor: "#29A9DB"
-    },
-    "&.webiny-ui-alert--warning": {
-        borderColor: "#F45C3C"
-    },
-    "&.webiny-ui-alert--danger": {
-        borderColor: "#E4495C"
-    }
-});
+import { Alert as AdminUiAlert } from "@webiny/admin-ui";
 
 export type AlertType = "success" | "info" | "warning" | "danger";
 
@@ -50,16 +21,19 @@ export interface AlertProps {
 }
 
 /**
- * Use Alert component to display user's avatar.
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please use the `Alert` component from the `@webiny/admin-ui` package instead.
  */
 const Alert = (props: AlertProps) => {
     const { title, type, children, ...rest } = props;
 
     return (
-        <div {...rest} className={alertStyles + " webiny-ui-alert webiny-ui-alert--" + type}>
-            <p className={"webiny-ui-alert__title"}>{title}</p>
-            <p className={"webiny-ui-alert__message"}>{children}</p>
-        </div>
+        <AdminUiAlert type={type} variant={"subtle"} {...rest}>
+            <div>
+                <strong>{title}</strong>
+            </div>
+            <div>{children}</div>
+        </AdminUiAlert>
     );
 };
 
diff --git a/packages/ui/src/Alert/README.md b/packages/ui/src/Alert/README.md
deleted file mode 100644
index ccff4eedf83..00000000000
--- a/packages/ui/src/Alert/README.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# Alert
-
-### Description
-
-Use `Alert` component to display inline messages.
-
-### Import
-
-```js
-import { Alert } from "@webiny/ui/Alert";
-```
diff --git a/packages/ui/src/AutoComplete/AutoComplete.tsx b/packages/ui/src/AutoComplete/AutoComplete.tsx
index 74621fe00e6..e7651bc03c4 100644
--- a/packages/ui/src/AutoComplete/AutoComplete.tsx
+++ b/packages/ui/src/AutoComplete/AutoComplete.tsx
@@ -1,31 +1,6 @@
-import React from "react";
-import Downshift, { ControllerStateAndHelpers, PropGetters } from "downshift";
-import { Input } from "~/Input";
-import classNames from "classnames";
-import { Elevation } from "~/Elevation";
-import { Typography } from "~/Typography";
-import keycode from "keycode";
-import { autoCompleteStyle, suggestionList } from "./styles";
+import React, { useCallback, useMemo } from "react";
 import { AutoCompleteBaseProps } from "./types";
-import { getOptionValue, getOptionText, findInAliases } from "./utils";
-import isEqual from "lodash/isEqual";
-import MaterialSpinner from "react-spinner-material";
-import { css } from "emotion";
-
-const menuStyles = css({
-    top: "unset !important",
-    bottom: 75
-});
-
-const listStyles = css({
-    "&.autocomplete__options-list": {
-        listStyle: "none",
-        paddingLeft: 0,
-        "& li": {
-            margin: 0
-        }
-    }
-});
+import { AutoComplete as AdminAutoComplete } from "@webiny/admin-ui";
 
 export enum Placement {
     top = "top",
@@ -47,311 +22,87 @@ export interface AutoCompleteProps extends Omit<AutoCompleteBaseProps, "onChange
 
     // Size - small, medium or large
     size?: "small" | "medium" | "large";
-}
-
-interface State {
-    inputValue: string;
-}
 
-const Spinner = () => {
-    return (
-        <MaterialSpinner
-            size={24}
-            spinnerColor={"var(--mdc-theme-primary)"}
-            spinnerWidth={2}
-            visible
-        />
-    );
-};
-
-interface RenderOptionsParams
-    extends Omit<ControllerStateAndHelpers<any>, "getInputProps" | "openMenu"> {
-    options: AutoCompleteProps["options"];
-    placement?: Placement;
+    // Indicates if the reset action should be displayed.
+    displayResetAction?: boolean;
 }
 
-interface OptionsListProps {
-    placement?: Placement;
-    getMenuProps: PropGetters<Record<string, any>>["getMenuProps"];
-    children: React.ReactNode;
-}
-
-const OptionsList = ({ placement, getMenuProps, children }: OptionsListProps) => {
-    return (
-        <Elevation
-            z={1}
-            className={classNames({
-                [menuStyles]: placement === Placement.top
-            })}
-        >
-            <ul
-                className={classNames("autocomplete__options-list", listStyles)}
-                {...getMenuProps()}
-            >
-                {children}
-            </ul>
-        </Elevation>
-    );
-};
-
-class AutoComplete extends React.Component<AutoCompleteProps, State> {
-    static defaultProps: Partial<AutoCompleteProps> = {
-        valueProp: "id",
-        textProp: "name",
-        options: [],
-        placement: Placement.bottom,
-        /**
-         * We cast this as AutoComplete because renderItem() is executed via .call() where AutoComplete instance is assigned as this.
-         */
-        renderItem(item: any) {
-            return (
-                <Typography use={"body2"}>
-                    {getOptionText(item, (this as unknown as AutoComplete).props)}
-                </Typography>
-            );
-        }
-    };
-
-    public override state: State = {
-        inputValue: ""
-    };
-
-    /**
-     * Helps us trigger some of the downshift's methods (eg. clearSelection) and helps us to avoid adding state.
-     */
-    downshift: any = React.createRef();
-
-    public override componentDidUpdate(previousProps: AutoCompleteProps) {
-        const { value, options } = this.props;
-        const { value: previousValue } = previousProps;
-
-        if (!isEqual(value, previousValue)) {
-            let item = null;
-
-            if (value) {
-                if (typeof value === "object") {
-                    item = value;
-                } else {
-                    item =
-                        options.find(option => {
-                            return value === getOptionValue(option, this.props);
-                        }) || null;
-                }
-            }
-
-            const { current: downshift } = this.downshift;
-            downshift && downshift.selectItem(item);
-        }
-    }
-
-    /**
-     * Renders options - based on user's input. It will try to match input text with available options.
-     */
-    private renderOptions({
-        options,
-        isOpen,
-        highlightedIndex,
-        selectedItem,
-        getMenuProps,
-        getItemProps,
-        placement
-    }: RenderOptionsParams) {
-        if (!isOpen) {
-            return null;
+/**
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please use the `AutoComplete` component from the `@webiny/admin-ui` package instead.
+ */
+export const AutoComplete = ({
+    size,
+    onChange,
+    valueProp = "id",
+    textProp = "name",
+    renderItem,
+    noResultFound,
+    useSimpleValues,
+    onInput,
+    ...props
+}: AutoCompleteProps) => {
+    const inputSize = useMemo(() => {
+        if (size === "medium") {
+            return "md";
         }
-        /**
-         * Suggest user to start typing when there are no options available to choose from.
-         */
-        if (!this.state.inputValue && !options.length) {
-            return (
-                <OptionsList placement={placement} getMenuProps={getMenuProps}>
-                    <li>
-                        <Typography use={"body2"}>Start typing to find entry</Typography>
-                    </li>
-                </OptionsList>
-            );
-        }
-
-        const { renderItem } = this.props;
 
-        const filtered = options.filter(item => {
-            // 2) At the end, we want to show only options that are matched by typed text.
-            if (!this.state.inputValue) {
-                return true;
-            }
+        return "lg";
+    }, [size]);
 
-            if (item.aliases) {
-                return findInAliases(item, this.state.inputValue);
+    const options = useMemo(() => {
+        return props.options.map(option => {
+            if (useSimpleValues) {
+                return {
+                    label: option,
+                    value: option
+                };
             }
 
-            return getOptionText(item, this.props)
-                .toLowerCase()
-                .includes(this.state.inputValue.toLowerCase());
+            return {
+                label: option[textProp],
+                value: option[valueProp],
+                disabled: option.disabled,
+                item: option
+            };
         });
+    }, [props.options, textProp, valueProp, useSimpleValues]);
 
-        if (!filtered.length) {
-            return (
-                <OptionsList placement={placement} getMenuProps={getMenuProps}>
-                    <li>
-                        <Typography use={"body2"}>No results.</Typography>
-                        {this.props.noResultFound}
-                    </li>
-                </OptionsList>
-            );
+    const value = useMemo(() => {
+        if (!props.value) {
+            return undefined;
         }
 
-        return (
-            <OptionsList placement={placement} getMenuProps={getMenuProps}>
-                {filtered.map((item, index) => {
-                    const itemValue = getOptionValue(item, this.props);
-
-                    // Base classes.
-                    const itemClassNames = {
-                        [suggestionList]: true,
-                        highlighted: highlightedIndex === index,
-                        selected: false
-                    };
-
-                    // Add "selected" class if the item is selected.
-                    if (selectedItem && getOptionValue(selectedItem, this.props) === itemValue) {
-                        itemClassNames.selected = true;
-                    }
+        if (useSimpleValues && typeof props.value === "string") {
+            return props.value;
+        }
 
-                    // Render the item.
-                    return (
-                        <li
-                            key={itemValue}
-                            {...getItemProps({
-                                index,
-                                item,
-                                className: classNames(itemClassNames)
-                            })}
-                        >
-                            {renderItem.call(this, item, index)}
-                        </li>
-                    );
-                })}
-            </OptionsList>
-        );
-    }
+        return props.value[valueProp as keyof AutoCompleteProps["value"]] as string;
+    }, [props.value, valueProp]);
 
-    public override render() {
-        const {
-            className,
-            options,
-            onChange,
-            value,
-            // valueProp,
-            // textProp,
-            onInput,
-            validation = {
-                isValid: null,
-                message: null
-            },
-            placement,
-            ...otherInputProps
-        } = this.props;
+    const onValueChange = useCallback(
+        (value: any) => {
+            const option = options.find(option => option.value === value);
 
-        // Downshift related props.
-        const downshiftProps = {
-            className: autoCompleteStyle,
-            itemToString: (item: any) => getOptionText(item, this.props),
-            defaultSelectedItem: value,
-            onChange: (selection: string) => {
-                if (!selection || !onChange) {
-                    return;
-                }
-                onChange(getOptionValue(selection, this.props), selection);
-                this.setState(state => ({
-                    ...state,
-                    inputValue: ""
-                }));
+            if (!option) {
+                return;
             }
-        };
 
-        return (
-            <div
-                className={classNames(
-                    autoCompleteStyle,
-                    this.props.size ? `webiny-ui-autocomplete--size-${this.props.size}` : null,
-                    className
-                )}
-            >
-                <Downshift {...downshiftProps} ref={this.downshift}>
-                    {({ getInputProps, openMenu, ...rest }) => (
-                        <div>
-                            <Input
-                                {...getInputProps({
-                                    // This prop is above `otherInputProps` since it can be overridden by the user.
-                                    trailingIcon: this.props.loading && <Spinner />,
-                                    ...otherInputProps,
-                                    // @ts-expect-error
-                                    size: this.props.size,
-                                    validation,
-                                    rawOnChange: true,
-                                    onChange: ev => ev,
-                                    onBlur: ev => ev,
-                                    onFocus: ev => {
-                                        openMenu();
-                                        otherInputProps.onFocus && otherInputProps.onFocus(ev);
-                                    },
-                                    onKeyDown: (ev: React.KeyboardEvent<HTMLInputElement>) => {
-                                        const keyCode: string = keycode(ev as unknown as Event);
-
-                                        if (keyCode === "backspace") {
-                                            setTimeout(() => {
-                                                if (onChange) {
-                                                    onChange(null);
-                                                    openMenu();
-                                                }
-                                            }, 50);
-                                        }
-                                    },
-                                    onKeyUp: (ev: React.KeyboardEvent<HTMLInputElement>) => {
-                                        const keyCode: string = keycode(ev as unknown as Event);
-
-                                        const target = ev.currentTarget;
-                                        const inputValue = target.value || "";
-
-                                        // If user pressed 'esc', 'enter' or similar...
-                                        if (
-                                            keyCode &&
-                                            keyCode.length > 1 &&
-                                            keyCode !== "backspace"
-                                        ) {
-                                            return;
-                                        }
-
-                                        // If values are the same, exit, do not update current search term.
-                                        if (inputValue === this.state.inputValue) {
-                                            return;
-                                        }
-
-                                        this.setState(
-                                            state => ({
-                                                ...state,
-                                                inputValue
-                                            }),
-                                            () => {
-                                                onInput && onInput(inputValue);
-                                            }
-                                        );
-                                    }
-                                })}
-                            />
-                            {!otherInputProps.disabled &&
-                                !otherInputProps.readOnly &&
-                                this.renderOptions({
-                                    ...rest,
-                                    options,
-                                    placement
-                                })}
-                        </div>
-                    )}
-                </Downshift>
-            </div>
-        );
-    }
-}
+            onChange?.(value, option.item);
+        },
+        [onChange, options]
+    );
 
-export { AutoComplete };
+    return (
+        <AdminAutoComplete
+            {...props}
+            value={value}
+            options={options}
+            onValueChange={onValueChange}
+            onValueSearch={onInput}
+            size={inputSize}
+            optionRenderer={renderItem}
+            emptyMessage={noResultFound}
+        />
+    );
+};
diff --git a/packages/ui/src/AutoComplete/AutoCompleteReadme.md b/packages/ui/src/AutoComplete/AutoCompleteReadme.md
deleted file mode 100644
index 3bfd93b5368..00000000000
--- a/packages/ui/src/AutoComplete/AutoCompleteReadme.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# AutoComplete
-
-### Description
-
-`AutoComplete` component lets users select a value from a list of suggestions (created based on their input).
-
-### Import
-
-```js
-import { AutoComplete } from "@webiny/ui/AutoComplete";
-```
diff --git a/packages/ui/src/AutoComplete/MultiAutoComplete.tsx b/packages/ui/src/AutoComplete/MultiAutoComplete.tsx
index 5e3f61941dd..749e39f7dd5 100644
--- a/packages/ui/src/AutoComplete/MultiAutoComplete.tsx
+++ b/packages/ui/src/AutoComplete/MultiAutoComplete.tsx
@@ -1,74 +1,6 @@
-import React from "react";
-import Downshift, { ControllerStateAndHelpers, PropGetters } from "downshift";
-import MaterialSpinner from "react-spinner-material";
-import { Input } from "~/Input";
-import { Chips, Chip } from "../Chips";
-import { getOptionValue, getOptionText, findInAliases } from "./utils";
-import { List, ListItem, ListItemMeta } from "~/List";
-import { IconButton } from "~/Button";
-import classNames from "classnames";
-import { Elevation } from "~/Elevation";
-import { Typography } from "~/Typography";
-import { autoCompleteStyle, suggestionList } from "./styles";
+import React, { useCallback, useMemo } from "react";
 import { AutoCompleteBaseProps } from "./types";
-import { FormElementMessage } from "~/FormElementMessage";
-import { ReactComponent as BaselineCloseIcon } from "./icons/baseline-close-24px.svg";
-import { ReactComponent as PrevIcon } from "./icons/navigate_before-24px.svg";
-import { ReactComponent as NextIcon } from "./icons/navigate_next-24px.svg";
-import { ReactComponent as PrevAllIcon } from "./icons/skip_previous-24px.svg";
-import { ReactComponent as NextAllIcon } from "./icons/skip_next-24px.svg";
-import { ReactComponent as DeleteIcon } from "./icons/baseline-close-24px.svg";
-import { ReactComponent as ReorderIcon } from "./icons/reorder_black_24dp.svg";
-import { css } from "emotion";
-import { ListItemGraphic } from "~/List";
-import { AutoCompleteProps } from "~/AutoComplete/AutoComplete";
-
-const listItemMetaClassName = css({
-    display: "table"
-});
-
-const iconButtonClassName = css({
-    display: "table-cell !important"
-});
-
-const style = {
-    pagination: {
-        bar: css({
-            display: "flex",
-            justifyContent: "space-between",
-            alignItems: "center",
-            borderBottom: "2px solid var(--mdc-theme-primary, #fa5723)",
-            padding: "6px 0"
-        }),
-        pages: css({
-            display: "flex",
-            justifyContent: "space-between",
-            alignItems: "center"
-        }),
-        searchInput: css({
-            height: "42px !important"
-        }),
-        list: css({
-            padding: "0 0 5px 0 !important",
-            ".mdc-deprecated-list-item": {
-                borderBottom: "1px solid var(--mdc-theme-on-background)"
-            }
-        }),
-        secondaryText: css({
-            color: "var(--mdc-theme-text-secondary-on-background)"
-        })
-    }
-};
-
-const listStyles = css({
-    "&.multi-autocomplete__options-list": {
-        listStyle: "none",
-        paddingLeft: 0,
-        "& li": {
-            margin: 0
-        }
-    }
-});
+import { MultiAutoComplete as AdminMultiAutoComplete } from "@webiny/admin-ui";
 
 interface SelectionItem {
     name: string;
@@ -80,7 +12,7 @@ export interface MultiAutoCompleteProps extends Omit<AutoCompleteBaseProps, "val
     /**
      * Prevents adding the same item to the list twice.
      */
-    unique: boolean;
+    unique?: boolean;
 
     /**
      * Set if custom values (not from list of suggestions) are allowed.
@@ -95,7 +27,7 @@ export interface MultiAutoCompleteProps extends Omit<AutoCompleteBaseProps, "val
     /**
      * Use custom renderer for selected items.
      */
-    renderMultipleSelection?: ((items: any) => React.ReactNode | null) | null;
+    renderMultipleSelection?: ((items: any, index: number) => React.ReactNode | null) | null;
 
     /**
      * Use data list instead of default Chips component. Useful when expecting a lot of data.
@@ -106,608 +38,133 @@ export interface MultiAutoCompleteProps extends Omit<AutoCompleteBaseProps, "val
      * Render list item when `useMultipleSelectionList` is used.
      */
     renderListItemLabel?: (item: any) => React.ReactNode;
+
     /**
      * Render in meta wrapper
      */
     renderListItemOptions?: (item: any) => React.ReactNode | null;
 
-    /* A component that renders supporting UI in case of no result found. */
+    /**
+     *  A component that renders supporting UI in case of no result found.
+     */
     noResultFound?: React.ReactNode;
+
     /**
      * Value is an array of strings. But can be undefined.
      */
     value?: MultiAutoCompletePropsValue;
-}
-
-interface MultiAutoCompleteState {
-    inputValue: string;
-    multipleSelectionPage: number;
-    multipleSelectionSearch: string;
-    reorderFormVisible: string;
-    reorderFormValue: string;
-}
-
-const Spinner = () => {
-    return (
-        <MaterialSpinner
-            size={24}
-            spinnerColor={"var(--mdc-theme-primary, #fa5723)"}
-            spinnerWidth={2}
-            visible
-        />
-    );
-};
-
-interface RenderOptionsParams
-    extends Omit<ControllerStateAndHelpers<any>, "getInputProps" | "openMenu"> {
-    options: AutoCompleteProps["options"];
-    unique: boolean;
-}
-
-interface OptionsListProps {
-    getMenuProps: PropGetters<Record<string, any>>["getMenuProps"];
-    children: React.ReactNode;
-}
-
-interface AssignedValueAfterClearing {
-    set: boolean;
-    selection: string | null;
-}
-
-const OptionsList = ({ getMenuProps, children }: OptionsListProps) => {
-    return (
-        <Elevation z={1}>
-            <ul
-                className={classNames("multi-autocomplete__options-list", listStyles)}
-                {...getMenuProps()}
-            >
-                {children}
-            </ul>
-        </Elevation>
-    );
-};
-
-export class MultiAutoComplete extends React.Component<
-    MultiAutoCompleteProps,
-    MultiAutoCompleteState
-> {
-    static defaultProps: Partial<MultiAutoCompleteProps> = {
-        valueProp: "id",
-        textProp: "name",
-        unique: true,
-        options: [],
-        useSimpleValues: false,
-        useMultipleSelectionList: false,
-        /**
-         * We cast this as MultiAutoComplete because renderItem() is executed via .call() where this is MultiAutoComplete instance.
-         */
-        renderItem(item: any) {
-            return (
-                <Typography use={"body2"}>
-                    {getOptionText(item, (this as unknown as MultiAutoComplete).props)}
-                </Typography>
-            );
-        },
-        /**
-         * We cast this as MultiAutoComplete because renderListItemLabel() is executed via .call() where this is MultiAutoComplete instance.
-         */
-        renderListItemLabel(item: any) {
-            return getOptionText(item, (this as unknown as MultiAutoComplete).props);
-        }
-    };
-
-    public override state: MultiAutoCompleteState = {
-        inputValue: "",
-        multipleSelectionPage: 0,
-        multipleSelectionSearch: "",
-        reorderFormVisible: "",
-        reorderFormValue: ""
-    };
 
     /**
-     * Helps us trigger some of the downshift's methods (eg. clearSelection) and helps us to avoid adding state.
+     * Indicates if the reset action should be displayed.
      */
-    private downshift = React.createRef<any>();
-
-    private assignedValueAfterClearing: AssignedValueAfterClearing = {
-        set: false,
-        selection: null
-    };
-
-    setMultipleSelectionPage = (multipleSelectionPage: number): void => {
-        this.setState({ multipleSelectionPage });
-    };
-
-    setMultipleSelectionSearch = (multipleSelectionSearch: string): void => {
-        this.setState({ multipleSelectionSearch });
-    };
-
-    getOptions() {
-        const { unique, value, allowFreeInput, useSimpleValues, options } = this.props;
-
-        const values = Array.isArray(value) ? [...value] : [];
-
-        const filtered = [...options];
+    displayResetAction?: boolean;
+}
 
-        // If free input is allowed, prepend typed value to the list.
-        if (allowFreeInput && this.state.inputValue) {
+/**
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please use the `MultiAutoComplete` component from the `@webiny/admin-ui` package instead.
+ */
+export const MultiAutoComplete = ({
+    onChange,
+    value = [],
+    valueProp = "id",
+    textProp = "name",
+    renderItem,
+    noResultFound,
+    useSimpleValues,
+    loading,
+    allowFreeInput,
+    unique = true,
+    renderMultipleSelection,
+    onInput,
+    ...props
+}: MultiAutoCompleteProps) => {
+    const getOption = useCallback(
+        (option: any) => {
             if (useSimpleValues) {
-                const existingValue = filtered.includes(this.state.inputValue);
-                if (!existingValue) {
-                    filtered.unshift(this.state.inputValue);
-                }
-            } else {
-                const existingValue = filtered.find(
-                    item => this.state.inputValue === getOptionText(item, this.props)
-                );
-                if (!existingValue) {
-                    filtered.unshift({ [this.props.textProp]: this.state.inputValue });
-                }
-            }
-        }
-
-        return filtered.filter(item => {
-            // We need to filter received options.
-            // 1) If "unique" prop was passed, we don't want to show already picked options again.
-            if (unique) {
-                if (Array.isArray(values)) {
-                    if (
-                        values.find(
-                            value =>
-                                getOptionValue(value, this.props) ===
-                                getOptionValue(item, this.props)
-                        )
-                    ) {
-                        return false;
-                    }
-                }
-            }
-
-            // 2) At the end, we want to show only options that are matched by typed text.
-            if (!this.state.inputValue) {
-                return true;
+                return {
+                    label: option,
+                    value: option,
+                    item: option
+                };
             }
 
-            if (item.aliases) {
-                return findInAliases(item, this.state.inputValue);
-            }
+            return {
+                label: option[textProp],
+                value: option[valueProp],
+                disabled: option.disabled,
+                item: option
+            };
+        },
+        [textProp, valueProp, useSimpleValues]
+    );
 
-            return getOptionText(item, this.props)
-                .toLowerCase()
-                .includes(this.state.inputValue.toLowerCase());
+    const options = useMemo(() => {
+        return props.options.map(option => {
+            return getOption(option);
         });
-    }
-
-    /**
-     * Renders options - based on user's input. It will try to match input text with available options.
-     */
-    private renderOptions(params: RenderOptionsParams) {
-        const { options, isOpen, highlightedIndex, getMenuProps, getItemProps } = params;
-        if (!isOpen) {
-            return null;
-        }
-
-        /**
-         * Suggest user to start typing when there are no options available to choose from.
-         */
-        if (!this.state.inputValue && !options.length) {
-            return (
-                <OptionsList getMenuProps={getMenuProps}>
-                    <li>
-                        <Typography use={"body2"}>Start typing to find entry</Typography>
-                    </li>
-                </OptionsList>
-            );
-        }
+    }, [props.options]);
 
-        if (!options.length) {
-            return (
-                <Elevation z={1}>
-                    <ul
-                        className={classNames("multi-autocomplete__options-list", listStyles)}
-                        {...getMenuProps()}
-                    >
-                        <li>
-                            <Typography use={"body2"}>No results.</Typography>
-                            {this.props.noResultFound}
-                        </li>
-                    </ul>
-                </Elevation>
-            );
+    const values = useMemo(() => {
+        if (!value) {
+            return [];
         }
 
-        const { renderItem } = this.props;
-        return (
-            <Elevation z={1}>
-                <ul
-                    className={classNames("multi-autocomplete__options-list", listStyles)}
-                    {...getMenuProps()}
-                >
-                    {options.map((item, index) => {
-                        const itemValue = getOptionValue(item, this.props);
-
-                        // Base classes.
-                        const itemClassNames = {
-                            [suggestionList]: true,
-                            highlighted: highlightedIndex === index,
-                            selected: false
-                        };
-
-                        // Render the item.
-                        return (
-                            <li
-                                key={itemValue + index}
-                                {...getItemProps({
-                                    index,
-                                    item,
-                                    className: classNames(itemClassNames)
-                                })}
-                            >
-                                {renderItem.call(this, item, index)}
-                            </li>
-                        );
-                    })}
-                </ul>
-            </Elevation>
-        );
-    }
-
-    paginateMultipleSelection() {
-        const { value } = this.props;
-        const limit = 10;
-        let page = this.state.multipleSelectionPage;
-        const search = this.state.multipleSelectionSearch;
-
-        // Assign a real index, so that later when we press delete, we know what is the actual index we're deleting.
-        let data = Array.isArray(value)
-            ? value.map((option, index) => {
-                  return { option, index };
-              })
-            : [];
-
-        if (search) {
-            data = data.filter(item => {
-                return getOptionText(item.option, this.props)
-                    .toLowerCase()
-                    .includes(search.toLowerCase());
-            });
-        }
-
-        const lastPage = Math.ceil(data.length / limit);
-        const totalCount = data.length;
-
-        page = page || lastPage;
-        data = data.slice((page - 1) * limit, page * limit);
-
-        let from = 0;
-        let to = 0;
-        if (data.length) {
-            from = (page - 1) * limit + 1;
-            to = from + (data.length - 1);
-        }
+        return value
+            .map((val: SelectionItem | string) => {
+                if (typeof val === "string") {
+                    return val;
+                }
 
-        const meta = {
-            hasData: data.length > 0,
-            totalCount,
-            from,
-            to,
-            page: page,
-            lastPage,
-            limit,
-            hasPrevious: page > 1,
-            hasNext: page < lastPage
-        };
+                return val[valueProp as keyof SelectionItem] as string;
+            })
+            .filter(Boolean);
+    }, [value, valueProp]);
 
-        return { data, meta };
-    }
+    const onValuesChange = useCallback(
+        (values: any) => {
+            const selectedOptions = [];
 
-    /**
-     * Once added, items can also be removed by clicking on the ✕ icon. This is the method that is responsible for
-     * rendering selected items (we are using already existing "Chips" component).
-     */
-    public renderMultipleSelection() {
-        const {
-            value,
-            onChange,
-            disabled,
-            useMultipleSelectionList,
-            description,
-            renderListItemLabel,
-            renderMultipleSelection,
-            renderListItemOptions
-        } = this.props;
+            for (const value of values) {
+                const option = options.find(option => option.value === value);
 
-        if (renderMultipleSelection !== undefined) {
-            if (renderMultipleSelection === null) {
-                return null;
+                if (option) {
+                    selectedOptions.push(option);
+                } else {
+                    selectedOptions.push(getOption(value));
+                }
             }
 
-            return renderMultipleSelection.call(this, this.props);
-        }
-
-        if (useMultipleSelectionList) {
-            const { data, meta } = this.paginateMultipleSelection();
-
-            return (
-                <>
-                    <div className={style.pagination.bar}>
-                        <div>
-                            <Input
-                                className={style.pagination.searchInput}
-                                placeholder={"Search selected..."}
-                                value={this.state.multipleSelectionSearch}
-                                data-testid="pb.pagination.search"
-                                onChange={value => {
-                                    this.setMultipleSelectionSearch(value);
-                                    this.setMultipleSelectionPage(value ? 1 : 0);
-                                }}
-                            />
-                        </div>
-
-                        <div className={style.pagination.pages}>
-                            <div className={meta.hasData ? "" : style.pagination.secondaryText}>
-                                {meta.from} - {meta.to} of {meta.totalCount}
-                            </div>
-                            <div>
-                                <IconButton
-                                    icon={<PrevAllIcon />}
-                                    disabled={!meta.hasData || meta.page === 1}
-                                    onClick={() => this.setMultipleSelectionPage(1)}
-                                />
-                                <IconButton
-                                    icon={<PrevIcon />}
-                                    disabled={!meta.hasData || !meta.hasPrevious}
-                                    onClick={() => this.setMultipleSelectionPage(meta.page - 1)}
-                                />
-                                <IconButton
-                                    icon={<NextIcon />}
-                                    disabled={!meta.hasData || !meta.hasNext}
-                                    onClick={() => this.setMultipleSelectionPage(meta.page + 1)}
-                                />
-                                <IconButton
-                                    icon={<NextAllIcon />}
-                                    disabled={!meta.hasData || meta.page === meta.lastPage}
-                                    onClick={() => this.setMultipleSelectionPage(meta.lastPage)}
-                                />
-                            </div>
-                        </div>
-                    </div>
-
-                    <List className={style.pagination.list}>
-                        {meta.hasData ? (
-                            data.map((item, index) => {
-                                const key = `${getOptionValue(item.option, this.props)}-${index}`;
-                                if (this.state.reorderFormVisible === key) {
-                                    return (
-                                        <ListItem key={key}>
-                                            <ListItemGraphic>
-                                                <IconButton disabled icon={<ReorderIcon />} />
-                                            </ListItemGraphic>
-                                            <Input
-                                                value={this.state.reorderFormValue}
-                                                data-testid="pb.pagination.input"
-                                                onKeyDown={(e: any) => {
-                                                    const key = e.key;
-                                                    if (key !== "Escape" && key !== "Enter") {
-                                                        return;
-                                                    }
+            const selectedItems = selectedOptions.map(option => option.item);
 
-                                                    if (key === "Enter") {
-                                                        // Reorder the item.
-                                                        const newValue = [
-                                                            ...(value as SelectionItem[])
-                                                        ];
-                                                        newValue.splice(
-                                                            e.target.value - 1,
-                                                            0,
-                                                            newValue.splice(item.index, 1)[0]
-                                                        );
-
-                                                        if (onChange) {
-                                                            onChange(newValue);
-                                                        }
-                                                    }
-
-                                                    this.setState({
-                                                        reorderFormVisible: "",
-                                                        reorderFormValue: ""
-                                                    });
-                                                }}
-                                                onChange={value =>
-                                                    this.setState({ reorderFormValue: value })
-                                                }
-                                                type={"number"}
-                                                autoFocus
-                                                className={style.pagination.searchInput}
-                                                placeholder={
-                                                    "Type a new order number and press Enter, or press Esc to cancel."
-                                                }
-                                            />
-                                            <ListItemMeta>
-                                                <IconButton icon={<DeleteIcon />} disabled />
-                                            </ListItemMeta>
-                                        </ListItem>
-                                    );
-                                }
-
-                                return (
-                                    <ListItem key={key}>
-                                        <ListItemGraphic>
-                                            <IconButton
-                                                icon={<ReorderIcon />}
-                                                onClick={() => {
-                                                    this.setState({ reorderFormVisible: key });
-                                                }}
-                                            />
-                                        </ListItemGraphic>
-                                        <div
-                                            style={{
-                                                color: "var(--mdc-theme-text-secondary-on-background)",
-                                                marginRight: 8,
-                                                minWidth: 32
-                                            }}
-                                        >
-                                            {item.index + 1}.
-                                        </div>{" "}
-                                        {renderListItemLabel &&
-                                            renderListItemLabel.call(this, item.option)}
-                                        <ListItemMeta className={listItemMetaClassName}>
-                                            {renderListItemOptions &&
-                                                renderListItemOptions.call(this, item.option)}
-                                            <IconButton
-                                                icon={<DeleteIcon />}
-                                                className={iconButtonClassName}
-                                                onClick={() => {
-                                                    if (!onChange) {
-                                                        return;
-                                                    }
-                                                    onChange([
-                                                        ...(value as SelectionItem[]).slice(
-                                                            0,
-                                                            item.index
-                                                        ),
-                                                        ...(value as SelectionItem[]).slice(
-                                                            item.index + 1
-                                                        )
-                                                    ]);
-                                                }}
-                                            />
-                                        </ListItemMeta>
-                                    </ListItem>
-                                );
-                            })
-                        ) : (
-                            <ListItem>
-                                <span className={style.pagination.secondaryText}>
-                                    Nothing to show.
-                                </span>
-                            </ListItem>
-                        )}
-                    </List>
-                    <div>
-                        <FormElementMessage>{description}</FormElementMessage>
-                    </div>
-                </>
-            );
-        }
+            onChange?.(selectedItems);
+        },
+        [onChange, options]
+    );
 
-        const hasItems = Array.isArray(value) && value.length;
-        if (!hasItems) {
-            return null;
+    const selectedOptionRenderer = useMemo(() => {
+        if (renderMultipleSelection === null) {
+            return () => null;
         }
+        return renderMultipleSelection;
+    }, [renderMultipleSelection]);
 
-        return (
-            <Chips disabled={disabled}>
-                {(value as SelectionItem[]).map((item, index) => (
-                    <Chip
-                        label={getOptionText(item, this.props)}
-                        key={`${getOptionValue(item, this.props)}-${index}`}
-                        trailingIcon={<BaselineCloseIcon />}
-                        onRemove={() => {
-                            if (!onChange) {
-                                return;
-                            }
-                            onChange([
-                                ...(value as SelectionItem[]).slice(0, index),
-                                ...(value as SelectionItem[]).slice(index + 1)
-                            ]);
-                        }}
-                    />
-                ))}
-            </Chips>
-        );
-    }
-
-    public override render() {
-        const {
-            props,
-            props: {
-                // options: rawOptions,
-                // allowFreeInput,
-                // useSimpleValues,
-                unique,
-                value,
-                onChange,
-                // valueProp,
-                // textProp,
-                onInput,
-                validation = { isValid: null, message: null },
-                useMultipleSelectionList,
-                description,
-                ...otherInputProps
-            }
-        } = this;
-
-        const options = this.getOptions();
-
-        return (
-            <div className={classNames(autoCompleteStyle, props.className)}>
-                <Downshift
-                    defaultSelectedItem={null}
-                    // @ts-expect-error there is no className on Downshift
-                    className={autoCompleteStyle}
-                    itemToString={item => item && getOptionText(item, props)}
-                    ref={this.downshift}
-                    onChange={selection => {
-                        if (!this.assignedValueAfterClearing.set) {
-                            this.assignedValueAfterClearing = {
-                                set: true,
-                                selection
-                            };
-                            this.downshift.current.clearSelection();
-                            this.setMultipleSelectionPage(0);
-                            return;
-                        }
-
-                        if (this.assignedValueAfterClearing.set) {
-                            this.setState({ inputValue: "" });
-                            this.assignedValueAfterClearing.set = false;
-                            if (Array.isArray(value)) {
-                                onChange &&
-                                    onChange([...value, this.assignedValueAfterClearing.selection]);
-                            } else {
-                                onChange && onChange([this.assignedValueAfterClearing.selection]);
-                            }
-                        }
-                    }}
-                >
-                    {/* "getInputProps" and "openMenu" are not needed in renderOptions method. */}
-                    {({ getInputProps, openMenu, ...rest }) => (
-                        <div>
-                            <Input
-                                {...getInputProps({
-                                    ...otherInputProps,
-                                    // @ts-expect-error
-                                    validation,
-
-                                    // Only pass description if not using "useMultipleSelectionList".
-                                    description: useMultipleSelectionList ? null : description,
-                                    rawOnChange: true,
-                                    trailingIcon: this.props.loading && <Spinner />,
-                                    onChange: e => e,
-                                    onBlur: e => e,
-                                    onKeyUp: (e: any) => {
-                                        const inputValue = e.target.value || "";
-
-                                        // Set current input value into state and trigger onInput if different.
-                                        if (inputValue !== this.state.inputValue) {
-                                            this.setState({ inputValue }, () => {
-                                                onInput && onInput(inputValue);
-                                            });
-                                        }
-                                    },
-                                    onFocus: e => {
-                                        openMenu();
-                                        otherInputProps.onFocus && otherInputProps.onFocus(e);
-                                    }
-                                })}
-                            />
-                            {this.renderOptions({ ...rest, unique, options })}
-                            {this.renderMultipleSelection()}
-                        </div>
-                    )}
-                </Downshift>
-            </div>
-        );
-    }
-}
+    return (
+        <>
+            <AdminMultiAutoComplete
+                {...props}
+                size={"lg"}
+                values={values}
+                options={options}
+                optionRenderer={renderItem}
+                selectedOptionRenderer={selectedOptionRenderer}
+                emptyMessage={noResultFound}
+                onValuesChange={onValuesChange}
+                onValueSearch={onInput}
+                loading={loading}
+                allowFreeInput={allowFreeInput}
+                uniqueValues={unique}
+            />
+        </>
+    );
+};
diff --git a/packages/ui/src/AutoComplete/MultiAutoCompleteReadme.md b/packages/ui/src/AutoComplete/MultiAutoCompleteReadme.md
deleted file mode 100644
index 8d9b298ca7a..00000000000
--- a/packages/ui/src/AutoComplete/MultiAutoCompleteReadme.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# MultiAutoComplete
-
-### Description
-
-`MultiAutoComplete` component lets users select multiple values from a list of suggestions (created based on their input).
-
-### Import
-
-```js
-import { MultiAutoComplete } from "@webiny/ui/MultiAutoComplete";
-```
diff --git a/packages/ui/src/AutoComplete/icons/baseline-close-24px.svg b/packages/ui/src/AutoComplete/icons/baseline-close-24px.svg
deleted file mode 100644
index eb1ae606077..00000000000
--- a/packages/ui/src/AutoComplete/icons/baseline-close-24px.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
-    <path fill="currentColor" d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
-    <path d="M0 0h24v24H0z" fill="none"/>
-</svg>
diff --git a/packages/ui/src/AutoComplete/icons/delete.svg b/packages/ui/src/AutoComplete/icons/delete.svg
deleted file mode 100644
index d5ec271650b..00000000000
--- a/packages/ui/src/AutoComplete/icons/delete.svg
+++ /dev/null
@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px"
-	 height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
-<g id="Rounded">
-	<g id="ui_x5F_spec_x5F_header_copy_5">
-	</g>
-	<path fill="currentColor" d="M6,19c0,1.1,0.9,2,2,2h8c1.1,0,2-0.9,2-2V9c0-1.1-0.9-2-2-2H8C6.9,7,6,7.9,6,9V19z M18,4h-2.5l-0.71-0.71
-		C14.61,3.11,14.35,3,14.09,3H9.91C9.65,3,9.39,3.11,9.21,3.29L8.5,4H6C5.45,4,5,4.45,5,5v0c0,0.55,0.45,1,1,1h12c0.55,0,1-0.45,1-1
-		v0C19,4.45,18.55,4,18,4z"/>
-</g>
-</svg>
diff --git a/packages/ui/src/AutoComplete/icons/navigate_before-24px.svg b/packages/ui/src/AutoComplete/icons/navigate_before-24px.svg
deleted file mode 100644
index d656abf83f1..00000000000
--- a/packages/ui/src/AutoComplete/icons/navigate_before-24px.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M14.91 6.71c-.39-.39-1.02-.39-1.41 0L8.91 11.3c-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L11.03 12l3.88-3.88c.38-.39.38-1.03 0-1.41z"/></svg>
\ No newline at end of file
diff --git a/packages/ui/src/AutoComplete/icons/navigate_next-24px.svg b/packages/ui/src/AutoComplete/icons/navigate_next-24px.svg
deleted file mode 100644
index 6badba091b7..00000000000
--- a/packages/ui/src/AutoComplete/icons/navigate_next-24px.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M9.31 6.71c-.39.39-.39 1.02 0 1.41L13.19 12l-3.88 3.88c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41L10.72 6.7c-.38-.38-1.02-.38-1.41.01z"/></svg>
\ No newline at end of file
diff --git a/packages/ui/src/AutoComplete/icons/reorder_black_24dp.svg b/packages/ui/src/AutoComplete/icons/reorder_black_24dp.svg
deleted file mode 100644
index afe7dea9fc5..00000000000
--- a/packages/ui/src/AutoComplete/icons/reorder_black_24dp.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M3 15h18v-2H3v2zm0 4h18v-2H3v2zm0-8h18V9H3v2zm0-6v2h18V5H3z"/></svg>
diff --git a/packages/ui/src/AutoComplete/icons/skip_next-24px.svg b/packages/ui/src/AutoComplete/icons/skip_next-24px.svg
deleted file mode 100644
index 1ce626cb579..00000000000
--- a/packages/ui/src/AutoComplete/icons/skip_next-24px.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M7.58 16.89l5.77-4.07c.56-.4.56-1.24 0-1.63L7.58 7.11C6.91 6.65 6 7.12 6 7.93v8.14c0 .81.91 1.28 1.58.82zM16 7v10c0 .55.45 1 1 1s1-.45 1-1V7c0-.55-.45-1-1-1s-1 .45-1 1z"/></svg>
\ No newline at end of file
diff --git a/packages/ui/src/AutoComplete/icons/skip_previous-24px.svg b/packages/ui/src/AutoComplete/icons/skip_previous-24px.svg
deleted file mode 100644
index 1ffd92d231a..00000000000
--- a/packages/ui/src/AutoComplete/icons/skip_previous-24px.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M7 6c.55 0 1 .45 1 1v10c0 .55-.45 1-1 1s-1-.45-1-1V7c0-.55.45-1 1-1zm3.66 6.82l5.77 4.07c.66.47 1.58-.01 1.58-.82V7.93c0-.81-.91-1.28-1.58-.82l-5.77 4.07c-.57.4-.57 1.24 0 1.64z"/></svg>
\ No newline at end of file
diff --git a/packages/ui/src/AutoComplete/icons/spinner.svg b/packages/ui/src/AutoComplete/icons/spinner.svg
deleted file mode 100644
index 018b1538b6b..00000000000
--- a/packages/ui/src/AutoComplete/icons/spinner.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg class="spinner" width="65px" height="65px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
-    <circle class="path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
-</svg>
diff --git a/packages/ui/src/AutoComplete/styles.ts b/packages/ui/src/AutoComplete/styles.ts
deleted file mode 100644
index 6879deca1ef..00000000000
--- a/packages/ui/src/AutoComplete/styles.ts
+++ /dev/null
@@ -1,60 +0,0 @@
-import { css } from "emotion";
-
-export const autoCompleteStyle = css({
-    position: "relative",
-    ".mdc-elevation--z1": {
-        position: "absolute",
-        width: "calc(100% - 2px)",
-        left: 1,
-        top: 56,
-        zIndex: 10,
-        maxHeight: 200,
-        overflowY: "scroll",
-        backgroundColor: "var(--mdc-theme-surface)"
-    },
-    ul: {
-        listStyle: "none",
-        width: "100%",
-        padding: 0,
-        li: {
-            padding: 10,
-            cursor: "pointer",
-            span: {
-                color: "var(--mdc-theme-on-surface)"
-            }
-        }
-    },
-    "&.webiny-ui-autocomplete--size-medium": {
-        ".mdc-elevation--z1": {
-            top: 40
-        },
-        ul: {
-            li: {
-                padding: 8
-            }
-        }
-    },
-    "&.webiny-ui-autocomplete--size-small": {
-        ".mdc-elevation--z1": {
-            top: 30
-        },
-        ul: {
-            li: {
-                padding: 5
-            }
-        }
-    }
-});
-
-export const suggestionList = css({
-    fontWeight: "normal",
-    backgroundColor: "var(--mdc-theme-surface)",
-    transition: "background-color 0.2s",
-    color: "var(--mdc-theme-text-primary-on-background)",
-    "&.selected": {
-        fontWeight: "bold"
-    },
-    "&.highlighted": {
-        backgroundColor: "var(--mdc-theme-on-background)"
-    }
-});
diff --git a/packages/ui/src/AutoComplete/types.ts b/packages/ui/src/AutoComplete/types.ts
index dbd80d9041a..fe999c832e4 100644
--- a/packages/ui/src/AutoComplete/types.ts
+++ b/packages/ui/src/AutoComplete/types.ts
@@ -40,17 +40,17 @@ export interface AutoCompleteBaseProps extends FormComponentProps {
     /**
      * Default structure of value, an object consisting of "id" and "name" keys. Different keys can be set using "valueProp" and "textProp" props.
      */
-    value?: { id: string; name: string };
+    value?: { id: string; name: string } | string;
 
     /**
      * Key in a single option object that will be used as option's value (by default, "id" key will be used).
      */
-    valueProp: string;
+    valueProp?: string;
 
     /**
      * Key in a single option object that will be used as option's text (by default, "name" key will be used).
      */
-    textProp: string;
+    textProp?: string;
 
     /**
      * Callback that gets executed on change of input value.
@@ -70,5 +70,5 @@ export interface AutoCompleteBaseProps extends FormComponentProps {
     /**
      * Renders a single suggestion item.
      */
-    renderItem: (item: any, index?: number) => React.ReactNode;
+    renderItem?: (item: any, index?: number) => React.ReactNode;
 }
diff --git a/packages/ui/src/AutoComplete/utils.ts b/packages/ui/src/AutoComplete/utils.ts
index 5b7cbdfb1f7..ed495a3e2c0 100644
--- a/packages/ui/src/AutoComplete/utils.ts
+++ b/packages/ui/src/AutoComplete/utils.ts
@@ -10,7 +10,7 @@ interface Props {
     textProp?: string;
 }
 
-export const getOptionValue = (option: Option | string, props: Props): string => {
+export const getOptionValue = (option: any, props: Props): string => {
     if (option) {
         return props.useSimpleValues
             ? (option as string)
diff --git a/packages/ui/src/Avatar/Avatar.tsx b/packages/ui/src/Avatar/Avatar.tsx
index 5a8dda42a01..d6a56c9e630 100644
--- a/packages/ui/src/Avatar/Avatar.tsx
+++ b/packages/ui/src/Avatar/Avatar.tsx
@@ -1,38 +1,5 @@
 import React from "react";
-import { css } from "emotion";
-import classNames from "classnames";
-const avatar = css({
-    borderRadius: "50%",
-    display: "block",
-    //alignItems: "center",
-    //justifyContent: "center",
-    width: 38,
-    height: 38,
-    position: "relative",
-    top: -7,
-    right: 7,
-    overflow: "hidden",
-    background: "var(--mdc-theme-background)",
-    color: "var(--mdc-theme-text-secondary-on-background)",
-    div: {
-        textAlign: "center",
-        display: "flex",
-        alignContent: "center",
-        justifyContent: "center",
-        flexDirection: "column",
-        width: 38,
-        height: 38,
-        fontSize: "1rem",
-        span: {
-            paddingBottom: 2
-        }
-    },
-    img: {
-        width: "100% !important",
-        height: "100% !important",
-        objectFit: "cover"
-    }
-});
+import { Avatar as AdminUiAvatar } from "@webiny/admin-ui";
 
 export interface AvatarProps {
     /**
@@ -78,52 +45,19 @@ export interface AvatarProps {
 }
 
 /**
- * Use Avatar component to display user's avatar.
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please use the `Avatar` component from the `@webiny/admin-ui` package instead.
  */
 export const Avatar = (props: AvatarProps) => {
-    const {
-        className,
-        width = 38,
-        height = 38,
-        src,
-        alt,
-        fallbackText,
-        renderImage,
-        ...rest
-    } = props;
-
-    let renderedImage;
-    const imageProps = { src, alt };
-    if (src) {
-        if (typeof renderImage === "function") {
-            renderedImage = renderImage({
-                ...imageProps,
-                src
-            });
-        } else {
-            renderedImage = <img {...imageProps} alt={alt} src={src} />;
-        }
-    }
+    // Note that we're ignoring `renderImage` prop, as it's not supported in the new `Avatar` component.
+    const { className, style, src, alt, width, height, fallbackText } = props;
 
     return (
-        <div
-            {...rest}
-            className={classNames(avatar, className)}
-            style={{ ...props.style, width, height }}
-        >
-            {props.src ? (
-                renderedImage
-            ) : (
-                <div>
-                    <span>
-                        {fallbackText
-                            .split(" ")
-                            .map(word => word.charAt(0))
-                            .join("")
-                            .toUpperCase()}
-                    </span>
-                </div>
-            )}
-        </div>
+        <AdminUiAvatar
+            className={className}
+            style={{ width, height, ...style }}
+            image={<AdminUiAvatar.Image src={src || ""} alt={alt} width={width} height={height} />}
+            fallback={<AdminUiAvatar.Fallback delayMs={0}>{fallbackText}</AdminUiAvatar.Fallback>}
+        />
     );
 };
diff --git a/packages/ui/src/Avatar/README.md b/packages/ui/src/Avatar/README.md
deleted file mode 100644
index a481be2a0f7..00000000000
--- a/packages/ui/src/Avatar/README.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# Avatar
-
-### Description
-
-Use `Avatar` component to display an avatar.
-
-### Import
-
-```js
-import { Avatar } from "@webiny/ui/Avatar";
-```
diff --git a/packages/ui/src/Button/Button.styles.ts b/packages/ui/src/Button/Button.styles.ts
deleted file mode 100644
index e8696acbf46..00000000000
--- a/packages/ui/src/Button/Button.styles.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { css } from "emotion";
-
-/**
- * Controls the button styles
- * @type {string}
- */
-const webinyButtonStyles = css`
-    &.webiny-ui-button--secondary:not(:disabled) {
-            border-color: var(--mdc-theme-primary);
-        }
-    }
-`;
-
-export { webinyButtonStyles };
diff --git a/packages/ui/src/Button/Button.tsx b/packages/ui/src/Button/Button.tsx
index 16ac2660594..b915687b9d9 100644
--- a/packages/ui/src/Button/Button.tsx
+++ b/packages/ui/src/Button/Button.tsx
@@ -1,12 +1,8 @@
 import React from "react";
-import * as RmwcButton from "@rmwc/button";
-import { Fab, FabProps } from "@rmwc/fab";
-import { Icon, IconProps } from "../Icon/Icon";
-import classNames from "classnames";
-import { SyntheticEvent } from "react";
-import { webinyButtonStyles } from "./Button.styles";
+import { Button as AdminUiButton } from "@webiny/admin-ui/Button";
+import { useMappedButtonProps } from "~/Button/useMappedButtonProps";
 
-export interface ButtonProps {
+interface ButtonProps {
     /**
      * Make button flat (only applicable to Primary button).
      */
@@ -56,129 +52,17 @@ export interface ButtonProps {
 }
 
 /**
- * Shows a default button, used typically when action is not of high priority.
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please use the `Button` component from the `@webiny/admin-ui` package instead.
  */
-export const ButtonDefault = (props: ButtonProps) => {
-    const { disabled, onClick, children, small, ripple, className = "", style } = props;
-
-    return (
-        <RmwcButton.Button
-            style={style}
-            disabled={disabled}
-            dense={small}
-            onClick={onClick}
-            ripple={ripple}
-            className={classNames("webiny-ui-button", className)}
-            data-testid={props["data-testid"]}
-        >
-            {children}
-        </RmwcButton.Button>
-    );
-};
-
-/**
- * Shows primary button, eg. for submitting forms.
- */
-export const ButtonPrimary = (props: ButtonProps) => {
-    const {
-        disabled,
-        onClick,
-        children,
-        small = false,
-        flat = false,
-        ripple,
-        style = {},
-        className = null
-    } = props;
-    return (
-        <RmwcButton.Button
-            raised={!flat}
-            dense={small}
-            disabled={disabled}
-            unelevated={flat}
-            ripple={ripple}
-            onClick={onClick}
-            style={style}
-            className={classNames("webiny-ui-button webiny-ui-button--primary", className)}
-            data-testid={props["data-testid"]}
-        >
-            {children}
-        </RmwcButton.Button>
-    );
+const Button = (props: ButtonProps) => {
+    const mappedProps = useMappedButtonProps(props);
+    return <AdminUiButton {...mappedProps} />;
 };
 
-/**
- * Shows a secondary button - eg. for doing a reset on a form.
- */
-export const ButtonSecondary = (props: ButtonProps) => {
-    const {
-        disabled,
-        onClick,
-        children,
-        small = false,
-        ripple,
-        className = null,
-        style = {}
-    } = props;
+Button.displayName = "Button";
 
-    return (
-        <RmwcButton.Button
-            disabled={disabled}
-            outlined
-            dense={small}
-            ripple={ripple}
-            onClick={onClick}
-            style={style}
-            className={classNames(
-                "webiny-ui-button webiny-ui-button--secondary",
-                webinyButtonStyles,
-                className
-            )}
-            data-testid={props["data-testid"]}
-        >
-            {children}
-        </RmwcButton.Button>
-    );
-};
+export { Button, ButtonProps };
 
-export type ButtonFloatingProps = ButtonProps &
-    Omit<FabProps, "icon"> & {
-        label?: string | JSX.Element;
-        icon?: JSX.Element;
-        onMouseDown?: (e: SyntheticEvent) => void;
-        onMouseUp?: (e: SyntheticEvent) => void;
-    };
-
-/**
- * A floating button, shown on the side of the screen, typically used for creating new content or accessing settings.
- */
-export const ButtonFloating = (props: ButtonFloatingProps) => {
-    const {
-        disabled,
-        label,
-        icon,
-        onClick,
-        small = false,
-        ripple,
-        className = null,
-        ...rest
-    } = props;
-    return (
-        <Fab
-            data-testid={props["data-testid"]}
-            disabled={disabled}
-            mini={small}
-            onClick={onClick}
-            label={label}
-            ripple={ripple}
-            icon={icon}
-            className={classNames("webiny-ui-button--floating", className)}
-            {...rest}
-        />
-    );
-};
-
-/**
- * Shows an icon, suitable to be shown inside of a button.
- */
-export const ButtonIcon = (props: IconProps) => <Icon {...props} />;
+// Needed for backward compatibility.
+export default Button;
diff --git a/packages/ui/src/Button/ButtonDefault.tsx b/packages/ui/src/Button/ButtonDefault.tsx
new file mode 100644
index 00000000000..0bbff34d15a
--- /dev/null
+++ b/packages/ui/src/Button/ButtonDefault.tsx
@@ -0,0 +1,13 @@
+import React from "react";
+import { ButtonProps } from "./Button";
+import { useMappedButtonProps } from "~/Button/useMappedButtonProps";
+import { Button as AdminUiButton } from "@webiny/admin-ui";
+
+/**
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please use the `Button` component from the `@webiny/admin-ui` package instead.
+ */
+export const ButtonDefault = (props: ButtonProps) => {
+    const mappedProps = useMappedButtonProps(props);
+    return <AdminUiButton {...mappedProps} variant={"secondary"} />;
+};
diff --git a/packages/ui/src/Button/ButtonFloating.tsx b/packages/ui/src/Button/ButtonFloating.tsx
new file mode 100644
index 00000000000..472bb05aa0f
--- /dev/null
+++ b/packages/ui/src/Button/ButtonFloating.tsx
@@ -0,0 +1,10 @@
+import React from "react";
+import { IconButton, IconButtonProps } from "./IconButton";
+
+/**
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please use the `Button` component from the `@webiny/admin-ui` package instead.
+ */
+export const ButtonFloating = (props: IconButtonProps) => {
+    return <IconButton {...props} />;
+};
diff --git a/packages/ui/src/Button/ButtonIcon.tsx b/packages/ui/src/Button/ButtonIcon.tsx
new file mode 100644
index 00000000000..cb2068f19e8
--- /dev/null
+++ b/packages/ui/src/Button/ButtonIcon.tsx
@@ -0,0 +1,14 @@
+import React from "react";
+import { Icon } from "~/Icon";
+
+export interface ButtonIconProps {
+    icon: React.ReactElement;
+}
+
+/**
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please use the `Icon` component from the `@webiny/admin-ui` package instead.
+ */
+export const ButtonIcon = (props: ButtonIconProps) => {
+    return <Icon {...props} />;
+};
diff --git a/packages/ui/src/Button/ButtonPrimary.tsx b/packages/ui/src/Button/ButtonPrimary.tsx
new file mode 100644
index 00000000000..de24124f2ae
--- /dev/null
+++ b/packages/ui/src/Button/ButtonPrimary.tsx
@@ -0,0 +1,13 @@
+import React from "react";
+import { ButtonProps } from "./Button";
+import { useMappedButtonProps } from "~/Button/useMappedButtonProps";
+import { Button as AdminUiButton } from "@webiny/admin-ui";
+
+/**
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please use the `Button` component from the `@webiny/admin-ui` package instead.
+ */
+export const ButtonPrimary = function ButtonPrimary(props: ButtonProps) {
+    const mappedProps = useMappedButtonProps(props);
+    return <AdminUiButton {...mappedProps} variant={"primary"} />;
+};
diff --git a/packages/ui/src/Button/ButtonSecondary.tsx b/packages/ui/src/Button/ButtonSecondary.tsx
new file mode 100644
index 00000000000..e98cc004653
--- /dev/null
+++ b/packages/ui/src/Button/ButtonSecondary.tsx
@@ -0,0 +1,13 @@
+import React from "react";
+import { ButtonProps } from "./Button";
+import { useMappedButtonProps } from "~/Button/useMappedButtonProps";
+import { Button as AdminUiButton } from "@webiny/admin-ui";
+
+/**
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please use the `Button` component from the `@webiny/admin-ui` package instead.
+ */
+export const ButtonSecondary = (props: ButtonProps) => {
+    const mappedProps = useMappedButtonProps(props);
+    return <AdminUiButton {...mappedProps} variant={"secondary"} />;
+};
diff --git a/packages/ui/src/Button/CopyButton.tsx b/packages/ui/src/Button/CopyButton.tsx
new file mode 100644
index 00000000000..23d4317aa2c
--- /dev/null
+++ b/packages/ui/src/Button/CopyButton.tsx
@@ -0,0 +1,24 @@
+import React from "react";
+import { CopyButton as AdminUiCopyButton } from "@webiny/admin-ui";
+
+interface CopyButtonProps {
+    /**
+     * Value to copy to clipboard.
+     */
+    value: string;
+
+    /**
+     * Callback function that is executed after the value is copied to the clipboard.
+     */
+    onCopy?: () => void;
+}
+
+/**
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please use the `CopyButton` component from the `@webiny/admin-ui` package instead.
+ */
+const CopyButton = (props: CopyButtonProps) => {
+    return <AdminUiCopyButton {...props} />;
+};
+
+export { CopyButton, CopyButtonProps };
diff --git a/packages/ui/src/Button/CopyButton/CopyButton.tsx b/packages/ui/src/Button/CopyButton/CopyButton.tsx
deleted file mode 100644
index fae54f6dfea..00000000000
--- a/packages/ui/src/Button/CopyButton/CopyButton.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import React from "react";
-import { ReactComponent as CopyToClipboardIcon } from "../assets/file_copy-24px.svg";
-import { IconButton } from "../index";
-import { FormComponentProps } from "../../types";
-import { useCallback } from "react";
-
-export interface CopyButtonProps extends FormComponentProps {
-    value: string;
-    onCopy?: () => void;
-}
-
-/**
- * Shows the icon button.
- */
-const CopyButton = (props: CopyButtonProps) => {
-    const { value, onCopy, ...otherProps } = props;
-
-    const copyToClipboard = useCallback(() => {
-        navigator.clipboard.writeText(value);
-        if (typeof onCopy === "function") {
-            onCopy();
-        }
-    }, [value]);
-
-    return <IconButton {...otherProps} onClick={copyToClipboard} icon={<CopyToClipboardIcon />} />;
-};
-
-export { CopyButton };
diff --git a/packages/ui/src/Button/CopyButton/README.md b/packages/ui/src/Button/CopyButton/README.md
deleted file mode 100644
index 92eda823367..00000000000
--- a/packages/ui/src/Button/CopyButton/README.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# Copy Button
-
-### Description
-
-Provides a button that allows you to copy its passed `value` to the clipboard.
-
-### Import
-
-```js
-import { CopyButton } from "@webiny/ui/Button";
-```
diff --git a/packages/ui/src/Button/IconButton.tsx b/packages/ui/src/Button/IconButton.tsx
new file mode 100644
index 00000000000..b3c1cb2b034
--- /dev/null
+++ b/packages/ui/src/Button/IconButton.tsx
@@ -0,0 +1,26 @@
+import React, { SyntheticEvent } from "react";
+import { ButtonProps } from "./Button";
+import { useMappedButtonProps } from "~/Button/useMappedButtonProps";
+import { IconButton as AdminUiBIconButton } from "@webiny/admin-ui";
+
+export interface IconButtonProps extends ButtonProps {
+    /**
+     * Icon should be provided as an SvgComponent.
+     */
+    icon: React.ReactNode;
+
+    label?: string;
+
+    onMouseDown?: (e: SyntheticEvent) => void;
+
+    onMouseUp?: (e: SyntheticEvent) => void;
+}
+
+/**
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please use the `Button` component from the `@webiny/admin-ui` package instead.
+ */
+export const IconButton = (props: IconButtonProps) => {
+    const mappedProps = useMappedButtonProps(props);
+    return <AdminUiBIconButton {...mappedProps} variant={"ghost"} />;
+};
diff --git a/packages/ui/src/Button/IconButton/IconButton.tsx b/packages/ui/src/Button/IconButton/IconButton.tsx
deleted file mode 100644
index ba165bdf0a4..00000000000
--- a/packages/ui/src/Button/IconButton/IconButton.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import React from "react";
-import {
-    IconButton as RIconButton,
-    IconButtonProps as RmwcIconButtonProps
-} from "@rmwc/icon-button";
-import styled from "@emotion/styled";
-
-import { FormComponentProps } from "../../types";
-
-const StyledRIconButton = styled(RIconButton)`
-    i {
-        all: unset;
-        pointer-events: none;
-    }
-`;
-
-export interface IconButtonProps extends Omit<FormComponentProps, "onChange">, RmwcIconButtonProps {
-    id?: string;
-    /**
-     * Icon should be provided as an SvgComponent.
-     */
-    icon: React.ReactNode;
-
-    /**
-     * Button label
-     */
-    label?: string;
-
-    /**
-     * onClick handler
-     * @param event
-     */
-    onClick?: (event: React.MouseEvent) => void;
-
-    /**
-     * Custom CSS class
-     */
-    className?: string;
-    /**
-     * For testing purposes.
-     */
-
-    "data-testid"?: string;
-
-    /**
-     * Should icon be disabled?
-     */
-    disabled?: boolean;
-
-    children?: React.ReactNode;
-}
-
-/**
- * Shows the icon button.
- */
-const IconButton = (props: IconButtonProps) => {
-    const { id, icon, label, onClick, className, disabled, ripple } = props;
-
-    return (
-        <StyledRIconButton
-            id={id}
-            data-testid={props["data-testid"]}
-            onClick={onClick}
-            disabled={disabled}
-            className={className}
-            label={label}
-            icon={icon}
-            ripple={ripple}
-        />
-    );
-};
-
-export { IconButton };
diff --git a/packages/ui/src/Button/IconButton/README.md b/packages/ui/src/Button/IconButton/README.md
deleted file mode 100644
index 065cd94dee1..00000000000
--- a/packages/ui/src/Button/IconButton/README.md
+++ /dev/null
@@ -1,15 +0,0 @@
-# Icon Button
-
-### Design
-
-<a href="https://material.io/design/components/buttons.html" target="_blank">https://material.io/design/components/buttons.html</a>
-
-### Description
-
-`IconButton` component provides a simple icon button component with ripple effect.
-
-### Import
-
-```js
-import { IconButton } from "@webiny/ui/Button";
-```
diff --git a/packages/ui/src/Button/README.md b/packages/ui/src/Button/README.md
deleted file mode 100644
index a8452e459c0..00000000000
--- a/packages/ui/src/Button/README.md
+++ /dev/null
@@ -1,28 +0,0 @@
-# Button
-
-### Design
-
-<a href="https://material.io/design/components/buttons.html" target="_blank">https://material.io/design/components/buttons.html</a>
-
-### Description
-
-`Button` component provides 4 commonly used button types:
-
-- `Default`
-- `Primary`
-- `Secondary`
-- `Floating`
-
-To create buttons with icon, use a `<Button.Icon/>` component.
-
-### Import
-
-```js
-import {
-  ButtonPrimary,
-  ButtonSecondary,
-  ButtonDefault,
-  ButtonFloating,
-  ButtonIcon
-} from "@webiny/ui/Button";
-```
diff --git a/packages/ui/src/Button/assets/baseline-cloud_done-24px.svg b/packages/ui/src/Button/assets/baseline-cloud_done-24px.svg
deleted file mode 100644
index f764634431f..00000000000
--- a/packages/ui/src/Button/assets/baseline-cloud_done-24px.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-    <path fill="currentColor" d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM10 17l-3.5-3.5 1.41-1.41L10 14.17 15.18 9l1.41 1.41L10 17z"/>
-</svg>
diff --git a/packages/ui/src/Button/assets/file_copy-24px.svg b/packages/ui/src/Button/assets/file_copy-24px.svg
deleted file mode 100644
index 5efb5612879..00000000000
--- a/packages/ui/src/Button/assets/file_copy-24px.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4l6 6v10c0 1.1-.9 2-2 2H7.99C6.89 23 6 22.1 6 21l.01-14c0-1.1.89-2 1.99-2h7zm-1 7h5.5L14 6.5V12z"/></svg>
\ No newline at end of file
diff --git a/packages/ui/src/Button/assets/round-more_vert-24px.svg b/packages/ui/src/Button/assets/round-more_vert-24px.svg
deleted file mode 100644
index b92cdd99458..00000000000
--- a/packages/ui/src/Button/assets/round-more_vert-24px.svg
+++ /dev/null
@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px"
-	 height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
-<g id="Bounding_Boxes">
-	<path fill="none" d="M0,0h24v24H0V0z"/>
-</g>
-<g id="Rounded">
-	<path d="M12,8c1.1,0,2-0.9,2-2s-0.9-2-2-2s-2,0.9-2,2S10.9,8,12,8z M12,10c-1.1,0-2,0.9-2,2s0.9,2,2,2s2-0.9,2-2S13.1,10,12,10z
-		 M12,16c-1.1,0-2,0.9-2,2s0.9,2,2,2s2-0.9,2-2S13.1,16,12,16z"/>
-</g>
-</svg>
diff --git a/packages/ui/src/Button/index.ts b/packages/ui/src/Button/index.ts
index fed2d2ba66e..d8d51cc968a 100644
--- a/packages/ui/src/Button/index.ts
+++ b/packages/ui/src/Button/index.ts
@@ -1,3 +1,8 @@
 export * from "./Button";
-export * from "./IconButton/IconButton";
-export * from "./CopyButton/CopyButton";
+export * from "./ButtonPrimary";
+export * from "./ButtonSecondary";
+export * from "./ButtonDefault";
+export * from "./ButtonFloating";
+export * from "./ButtonIcon";
+export * from "./CopyButton";
+export * from "./IconButton";
diff --git a/packages/ui/src/Button/useMappedButtonProps.ts b/packages/ui/src/Button/useMappedButtonProps.ts
new file mode 100644
index 00000000000..e8829be0059
--- /dev/null
+++ b/packages/ui/src/Button/useMappedButtonProps.ts
@@ -0,0 +1,24 @@
+import { useMemo } from "react";
+import omit from "lodash/omit";
+import { ButtonProps as AdminUiButtonProps } from "@webiny/admin-ui";
+import { ButtonProps } from "~/Button/Button";
+
+export const useMappedButtonProps = (props: ButtonProps) => {
+    return useMemo(() => {
+        const mappedButtonProps: Pick<AdminUiButtonProps, "size" | "text"> = {};
+
+        if (props.small === true) {
+            mappedButtonProps.size = "sm";
+        }
+
+        if (props.children) {
+            mappedButtonProps.text = props.children;
+        }
+
+        // Return all remaining props omitting unused ones.
+        return {
+            ...omit(props, ["flat", "ripple", "small"]),
+            ...mappedButtonProps
+        };
+    }, [props]);
+};
diff --git a/packages/ui/src/Carousel/Carousel.tsx b/packages/ui/src/Carousel/Carousel.tsx
index a50a5029689..3c49b52f76f 100644
--- a/packages/ui/src/Carousel/Carousel.tsx
+++ b/packages/ui/src/Carousel/Carousel.tsx
@@ -1,63 +1,16 @@
 import React from "react";
-import NukaCarousel, { CarouselProps, CarouselRenderControl } from "nuka-carousel";
-import pick from "lodash/pick";
 
-interface Props extends CarouselProps {
-    // slides as set of HTMLElements
+interface Props extends Record<string, any> {
     children: React.ReactNode;
-
-    // render method for the next slide button
-    renderNextSlide?: CarouselRenderControl | null;
-
-    // render method for the previous slide button
-    renderPreviousSlide?: CarouselRenderControl | null;
-
-    // render method for the central navigation
-    renderBottomNav?: CarouselRenderControl | null;
 }
 
-class Carousel extends React.Component<Props> {
-    static defaultProps = {
-        swiping: true,
-        dragging: false,
-        heightMode: "first",
-        easing: "easeExpInOut"
-    };
-
-    static nukaProps = [
-        "children",
-        "afterSlide",
-        "autoplay",
-        "autoplayInterval",
-        "beforeSlide",
-        "dragging",
-        "easing",
-        "heightMode",
-        "pauseOnHover",
-        "slideIndex",
-        "speed",
-        "swiping",
-        "transitionMode"
-    ];
-
-    public override render() {
-        return (
-            <NukaCarousel
-                {...pick(this.props, Carousel.nukaProps)}
-                {...(this.props.renderPreviousSlide
-                    ? { renderCenterLeftControls: this.props.renderPreviousSlide }
-                    : {})}
-                {...(this.props.renderNextSlide
-                    ? { renderCenterRightControls: this.props.renderNextSlide }
-                    : {})}
-                {...(this.props.renderBottomNav
-                    ? { renderBottomCenterControls: this.props.renderBottomNav }
-                    : {})}
-            >
-                {this.props.children}
-            </NukaCarousel>
-        );
-    }
-}
+/**
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please implement your own `Carousel` component or reach out on Slack.
+ */
+const Carousel = (props: Props) => {
+    console.warn("The `Carousel` component is deprecated and will be removed in future releases.");
+    return <>{props.children}</>;
+};
 
 export default Carousel;
diff --git a/packages/ui/src/Carousel/README.md b/packages/ui/src/Carousel/README.md
deleted file mode 100644
index c009cc5d199..00000000000
--- a/packages/ui/src/Carousel/README.md
+++ /dev/null
@@ -1,15 +0,0 @@
-# Carousel
-
-### Additional information
-
-<a href="https://www.npmjs.com/package/nuka-carousel" target="_blank">https://www.npmjs.com/package/nuka-carousel</a>
-
-### Description
-
-Use `Carousel` component to display two or more items, in a carousel.
-
-### Import
-
-```js
-import { Carousel } from "@webiny/ui/Carousel";
-```
diff --git a/packages/ui/src/Checkbox/Checkbox.styles.ts b/packages/ui/src/Checkbox/Checkbox.styles.ts
deleted file mode 100644
index 011c3a76e49..00000000000
--- a/packages/ui/src/Checkbox/Checkbox.styles.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { css } from "emotion";
-
-/**
- * Controls the helper text below the checkbox.
- * @type {string}
- */
-const webinyCheckboxTitle = css(
-    {},
-    {
-        "&.mdc-text-field-helper-text": {
-            //paddingLeft: 10,
-            textTransform: "uppercase",
-            fontWeight: "bold",
-            marginBottom: "5px"
-        }
-    }
-);
-
-export { webinyCheckboxTitle };
diff --git a/packages/ui/src/Checkbox/Checkbox.tsx b/packages/ui/src/Checkbox/Checkbox.tsx
index 0ce5777ab1b..2e8d11c9746 100644
--- a/packages/ui/src/Checkbox/Checkbox.tsx
+++ b/packages/ui/src/Checkbox/Checkbox.tsx
@@ -1,7 +1,6 @@
 import React from "react";
-import { Checkbox as RmwcCheckbox } from "@rmwc/checkbox";
-import { FormElementMessage } from "~/FormElementMessage";
 import { FormComponentProps } from "~/types";
+import { Checkbox as AdminCheckbox } from "@webiny/admin-ui";
 
 interface Props extends FormComponentProps {
     // Component id.
@@ -29,42 +28,31 @@ interface Props extends FormComponentProps {
 }
 
 /**
- * Single Checkbox component can be used to store simple boolean values.
- *
- * Grouping multiple Checkbox components with CheckboxGroup will allow to store an array of selected values.
- * In that case, each Checkbox component must receive value and onChange callback via props.
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please use the `Checkbox` component from the `@webiny/admin-ui` package instead.
  */
 class Checkbox extends React.Component<Props> {
-    onChange = (e: React.SyntheticEvent<HTMLInputElement>) => {
-        this.props.onChange && this.props.onChange((e.target as HTMLInputElement).checked);
+    onChange = (checked: boolean) => {
+        this.props.onChange && this.props.onChange(checked);
     };
 
     public override render() {
         const { id, value, label, disabled, indeterminate, description, validation, onClick } =
             this.props;
 
-        const { isValid: validationIsValid, message: validationMessage } = validation || {};
-
         return (
-            <React.Fragment>
-                <RmwcCheckbox
-                    id={id}
-                    indeterminate={indeterminate}
-                    disabled={disabled}
-                    checked={Boolean(value)}
-                    onChange={this.onChange}
-                    onClick={() => typeof onClick === "function" && onClick(Boolean(value))}
-                    label={label}
-                    data-testid={this.props["data-testid"]}
-                />
-                {validationIsValid === false && (
-                    <FormElementMessage error>{validationMessage}</FormElementMessage>
-                )}
-
-                {validationIsValid !== false && description && (
-                    <FormElementMessage>{description}</FormElementMessage>
-                )}
-            </React.Fragment>
+            <AdminCheckbox
+                id={id}
+                indeterminate={indeterminate}
+                disabled={disabled}
+                checked={Boolean(value)}
+                onChange={this.onChange}
+                onClick={() => typeof onClick === "function" && onClick(Boolean(value))}
+                label={label}
+                data-testid={this.props["data-testid"]}
+                description={description}
+                validation={validation}
+            />
         );
     }
 }
diff --git a/packages/ui/src/Checkbox/CheckboxGroup.tsx b/packages/ui/src/Checkbox/CheckboxGroup.tsx
index b489d1190b9..0d610510dfe 100644
--- a/packages/ui/src/Checkbox/CheckboxGroup.tsx
+++ b/packages/ui/src/Checkbox/CheckboxGroup.tsx
@@ -1,7 +1,10 @@
 import React from "react";
-import { FormComponentProps } from "./../types";
-import { webinyCheckboxTitle } from "./Checkbox.styles";
-import { FormElementMessage } from "../FormElementMessage";
+import { FormComponentProps } from "~/types";
+import {
+    FormComponentDescription,
+    FormComponentErrorMessage,
+    FormComponentLabel
+} from "@webiny/admin-ui";
 
 export interface ChildrenRenderProp {
     onChange: (id: string | number) => () => void;
@@ -19,23 +22,19 @@ type Props = FormComponentProps & {
     children: (props: ChildrenRenderProp) => React.ReactNode;
 };
 
+/**
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please use the `CheckboxGroup` component from the `@webiny/admin-ui` package instead.
+ */
 class CheckboxGroup extends React.Component<Props> {
     public override render() {
-        const { description, label, validation = { isValid: null, message: null } } = this.props;
+        const { description, label, validation } = this.props;
+        const { isValid: validationIsValid, message: validationMessage } = validation || {};
 
         return (
-            <React.Fragment>
-                {label && (
-                    <div
-                        className={
-                            "mdc-text-field-helper-text mdc-text-field-helper-text--persistent " +
-                            webinyCheckboxTitle
-                        }
-                    >
-                        {label}
-                    </div>
-                )}
-
+            <div className={"w-full"}>
+                <FormComponentLabel text={label} />
+                <FormComponentDescription text={description} />
                 {this.props.children({
                     onChange: value => {
                         return () => {
@@ -57,15 +56,11 @@ class CheckboxGroup extends React.Component<Props> {
                         return values.includes(id);
                     }
                 })}
-
-                {validation.isValid === false && (
-                    <FormElementMessage error>{validation.message}</FormElementMessage>
-                )}
-
-                {validation.isValid !== false && description && (
-                    <FormElementMessage>{description}</FormElementMessage>
-                )}
-            </React.Fragment>
+                <FormComponentErrorMessage
+                    invalid={Boolean(validationIsValid === false)}
+                    text={validationMessage}
+                />
+            </div>
         );
     }
 }
diff --git a/packages/ui/src/Checkbox/README_Checkbox.md b/packages/ui/src/Checkbox/README_Checkbox.md
deleted file mode 100644
index 2e368f9f3ed..00000000000
--- a/packages/ui/src/Checkbox/README_Checkbox.md
+++ /dev/null
@@ -1,15 +0,0 @@
-# Checkbox
-
-### Design
-
-<a href="https://material.io/design/components/selection-controls.html#checkboxes" target="_blank">https://material.io/design/components/selection-controls.html#checkboxes</a>
-
-### Description
-
-Single `Checkbox` component can be used to store simple boolean values.
-
-### Import
-
-```js
-import { Checkbox } from "@webiny/ui/Checkbox";
-```
diff --git a/packages/ui/src/Checkbox/README_CheckboxGroup.md b/packages/ui/src/Checkbox/README_CheckboxGroup.md
deleted file mode 100644
index 48d3499ea07..00000000000
--- a/packages/ui/src/Checkbox/README_CheckboxGroup.md
+++ /dev/null
@@ -1,19 +0,0 @@
-# Group
-
-### Design
-
-<a href="https://material.io/design/components/selection-controls.html#checkboxes" target="_blank">https://material.io/design/components/selection-controls.html#checkboxes</a>
-
-### Description
-
-Unlike single `Checkbox` which is used to store simple boolean values, grouping multiple `Checkbox` components
-with `CheckboxGroup` will allow you to store an array of selected values.
-
-Each `Checkbox` component must receive `value` and `onChange` callback via props.
-
-### Import
-To use, import base `Checkbox` component.
-
-```js
-import { CheckboxGroup, Checkbox } from "@webiny/ui/Checkbox";
-```
diff --git a/packages/ui/src/Chips/Chip.tsx b/packages/ui/src/Chips/Chip.tsx
index 69198138458..0036a1dd744 100644
--- a/packages/ui/src/Chips/Chip.tsx
+++ b/packages/ui/src/Chips/Chip.tsx
@@ -1,36 +1,104 @@
 import React, { useCallback } from "react";
-import { Chip as RmwcChip, ChipProps as RmwcChipProps } from "@rmwc/chip";
+import { Tag as AdminTag } from "@webiny/admin-ui";
+import omit from "lodash/omit";
+
+export interface RmwcChipProps {
+    /** Text for your Chip. */
+    label?: React.ReactNode;
+    /** @deprecated makes the Chip appear selected. */
+    selected?: boolean;
+    /** @deprecated Instance of an Icon Component. */
+    icon?: any;
+    /** @deprecated Instance of an Icon Component. */
+    trailingIcon?: any;
+    /** @deprecated Defaults to true. Set this to false if your trailing icon is something other than a remove button. */
+    trailingIconRemovesChip?: boolean;
+    /** An optional chip ID that will be included in callback evt.detail. If this is not passed, RMWC will attempt to use the "key" prop if present.  */
+    id?: string;
+    /** @deprecated Includes an optional checkmark for the chips selected state. */
+    checkmark?: boolean;
+    /** @deprecated Additional children will be rendered in the text area. */
+    children?: React.ReactNode;
+    /** A callback for click or enter key. This should be used over onClick for accessibility reasons. evt.detail = { chipId: string }  */
+    onInteraction?: (evt: any) => void;
+    /** @deprecated A callback for click or enter key for the trailing icon. material-components-web always treats this as an intent to remove the chip. evt.detail = { chipId: string } */
+    onTrailingIconInteraction?: (evt: any) => void;
+    /** A callback that is fired once the chip is in an exited state from removing it. evt.detail = { chipId: string } */
+    onRemove?: (evt: any) => void;
+    /** @deprecated Advanced: A reference to the MDCFoundation. */
+    foundationRef?: any;
+}
 
 export interface ChipProps extends Omit<RmwcChipProps, "onRemove" | "trailingIcon"> {
-    onRemove: (ev: React.MouseEvent<HTMLSpanElement>) => void;
+    onRemove?: (
+        ev: React.MouseEvent<HTMLSpanElement> | React.SyntheticEvent<HTMLSpanElement>
+    ) => void;
     trailingIcon?: React.ReactNode;
 }
 
+/**
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please use the `Tag` component from the `@webiny/admin-ui` package instead.
+ */
 export const Chip = (props: ChipProps) => {
-    const { children, trailingIcon, onRemove, ...rest } = props;
+    const { children, label, trailingIcon, onRemove, onInteraction, ...rest } = props;
+
+    const getEventWithDetails = useCallback(
+        (ev: React.SyntheticEvent<HTMLSpanElement>) => {
+            return {
+                ...ev,
+                detail: {
+                    chipId: props.id
+                }
+            };
+        },
+        [props.id]
+    );
 
     const onRemoveCb = useCallback(
-        (ev: React.MouseEvent<HTMLSpanElement>) => {
+        (ev: React.SyntheticEvent<HTMLSpanElement>) => {
             if (!onRemove) {
                 return;
             }
-            onRemove(ev);
+
+            onRemove(getEventWithDetails(ev));
         },
         [onRemove]
     );
 
-    let trailingIconElement = null;
-    if (trailingIcon) {
-        trailingIconElement = (
-            <span className={"mdc-chip__icon mdc-chip__icon--trailing"} onClick={onRemoveCb}>
-                {trailingIcon}
-            </span>
-        );
-    }
+    const onClick = useCallback(
+        (ev: React.SyntheticEvent<HTMLSpanElement>) => {
+            if (!onInteraction) {
+                return;
+            }
+
+            onInteraction(getEventWithDetails(ev));
+        },
+        [onInteraction]
+    );
+
+    const createIconElement = useCallback((icon: React.ReactNode) => {
+        if (React.isValidElement(icon)) {
+            return icon;
+        }
+
+        return undefined;
+    }, []);
 
     return (
-        <RmwcChip {...rest}>
-            {children} {trailingIconElement}
-        </RmwcChip>
+        <AdminTag
+            {...omit(rest, [
+                "selected",
+                "icon",
+                "trailingIconRemovesChip",
+                "onTrailingIconInteraction",
+                "checkmark",
+                "foundationRef"
+            ])}
+            content={children || label}
+            dismissIconElement={createIconElement(trailingIcon)}
+            onDismiss={onRemove ? onRemoveCb : undefined}
+            onClick={onClick}
+        />
     );
 };
diff --git a/packages/ui/src/Chips/Chips.tsx b/packages/ui/src/Chips/Chips.tsx
index 2069c250cd2..e101e2053fa 100644
--- a/packages/ui/src/Chips/Chips.tsx
+++ b/packages/ui/src/Chips/Chips.tsx
@@ -1,8 +1,6 @@
 import React from "react";
-import classNames from "classnames";
-import { ChipSet } from "@rmwc/chip";
+import { cn } from "@webiny/admin-ui";
 import { Chip } from "./Chip";
-import { chipIconWrapper, disabledChips } from "./styles";
 
 export interface ChipsProps {
     /**
@@ -26,17 +24,19 @@ export interface ChipsProps {
     style?: React.CSSProperties;
 }
 
+/**
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please use the `Tag` component from the `@webiny/admin-ui` package instead.
+ */
 export const Chips = (props: ChipsProps) => {
-    const { children, className, disabled, ...rest } = props;
+    const { children, className, ...rest } = props;
 
     return (
-        <ChipSet
+        <div
             {...rest}
-            className={classNames("mdc-evolution-chip-set", className, chipIconWrapper, {
-                [disabledChips]: disabled
-            })}
+            className={cn("mdc-evolution-chip-set wby-flex wby-gap-sm wby-py-sm", className)}
         >
             {children}
-        </ChipSet>
+        </div>
     );
 };
diff --git a/packages/ui/src/Chips/README.md b/packages/ui/src/Chips/README.md
deleted file mode 100644
index b8b18c48097..00000000000
--- a/packages/ui/src/Chips/README.md
+++ /dev/null
@@ -1,15 +0,0 @@
-# Chips
-
-### Design
-
-<a href="https://material.io/design/components/chips.html" target="_blank">https://material.io/design/components/chips.html</a>
-
-### Description
-
-`Chips` allow users to enter information, make selections, filter content, or trigger actions.
-
-### Import
-
-```js
-import { Chips, Chip, ChipText, ChipIcon } from "@webiny/ui/Chips";
-```
diff --git a/packages/ui/src/Chips/icons/baseline-done-24px.svg b/packages/ui/src/Chips/icons/baseline-done-24px.svg
deleted file mode 100644
index 0482857b7b8..00000000000
--- a/packages/ui/src/Chips/icons/baseline-done-24px.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" viewBox="0 0 24 24">
-    <path fill="none" d="M0 0h24v24H0z"/>
-    <path fill="currentColor" d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/>
-</svg>
diff --git a/packages/ui/src/Chips/icons/baseline-email-24px.svg b/packages/ui/src/Chips/icons/baseline-email-24px.svg
deleted file mode 100644
index b7fb8349408..00000000000
--- a/packages/ui/src/Chips/icons/baseline-email-24px.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" viewBox="0 0 24 24">
-    <path fill="currentColor" d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/>
-</svg>
diff --git a/packages/ui/src/Chips/styles.ts b/packages/ui/src/Chips/styles.ts
deleted file mode 100644
index 6306cba64c9..00000000000
--- a/packages/ui/src/Chips/styles.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { css } from "emotion";
-
-export const chipIconWrapper = css({
-    ".mdc-evolution-chip__text-label": {
-        display: "flex",
-        alignItems: "center",
-        ".mdc-chip__icon": {
-            svg: {
-                width: 18,
-                height: 18
-            }
-        }
-    }
-});
-
-export const disabledChips = css({
-    opacity: 0.75,
-    pointerEvents: "none"
-});
diff --git a/packages/ui/src/CodeEditor/CodeEditor.tsx b/packages/ui/src/CodeEditor/CodeEditor.tsx
index 00f21480cd9..1fd9eae1556 100644
--- a/packages/ui/src/CodeEditor/CodeEditor.tsx
+++ b/packages/ui/src/CodeEditor/CodeEditor.tsx
@@ -1,31 +1,6 @@
 import React from "react";
+import { CodeEditor as AdminCodeEditor } from "@webiny/admin-ui";
 import { FormComponentProps } from "~/types";
-import { css } from "emotion";
-
-import AceEditor from "react-ace";
-// Modes
-import "brace/mode/html";
-import "brace/mode/json";
-// Extensions
-import "brace/ext/searchbox";
-// Themes
-import "brace/theme/github";
-import "brace/theme/twilight";
-import "brace/theme/chrome";
-import { FormElementMessage } from "~/FormElementMessage";
-
-/**
- * Controls the helper text below the checkbox.
- * @type {string}
- */
-const webinyCheckboxHelperText = css(
-    {},
-    {
-        "&.mdc-text-field-helper-text": {
-            paddingTop: 5
-        }
-    }
-);
 
 interface Props extends FormComponentProps {
     mode: string;
@@ -39,46 +14,9 @@ interface Props extends FormComponentProps {
 }
 
 /**
- * CodeEditor component can be used to store simple boolean values.
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please find out the new `CodeEditor` component props from the `@webiny/admin-ui` package instead.
  */
-class CodeEditor extends React.Component<Props> {
-    onChange = (value: string) => {
-        this.props.onChange && this.props.onChange(value);
-    };
-
-    public override render() {
-        const { value, description, validation, theme = "github", ...rest } = this.props;
-
-        const { isValid: validationIsValid, message: validationMessage } = validation || {};
-
-        return (
-            <React.Fragment>
-                <AceEditor
-                    value={value ? String(value) : ""}
-                    theme={theme}
-                    onChange={this.onChange}
-                    {...rest}
-                    width="100%"
-                    className={"mdc-text-field"}
-                    editorProps={{
-                        $blockScrolling: Infinity // Suppresses scrolling warning in console.
-                    }}
-                />
-
-                {validationIsValid === false && (
-                    <FormElementMessage error className={webinyCheckboxHelperText}>
-                        {validationMessage}
-                    </FormElementMessage>
-                )}
-
-                {validationIsValid !== false && description && (
-                    <FormElementMessage className={webinyCheckboxHelperText}>
-                        {description}
-                    </FormElementMessage>
-                )}
-            </React.Fragment>
-        );
-    }
-}
-
-export { CodeEditor };
+export const CodeEditor = ({ readOnly, ...props }: Props) => {
+    return <AdminCodeEditor disabled={readOnly} {...props} />;
+};
diff --git a/packages/ui/src/CodeEditor/README.md b/packages/ui/src/CodeEditor/README.md
deleted file mode 100644
index 4902697b07a..00000000000
--- a/packages/ui/src/CodeEditor/README.md
+++ /dev/null
@@ -1,21 +0,0 @@
-# CodeEditor
-
-### Additional information
-
-<a href="https://github.com/securingsincity/react-ace" target="_blank">https://github.com/securingsincity/react-ace</a>
-
-### Description
-
-`CodeEditor` is a wrapper around one of the most popular code editors called `Ace` editor. Have in mind that you still
-have to import `brace` as a dependency (after importing `CodeEditor`) for different code formats and editor types.
-
-### Import
-
-```js
-import brace from "brace";
-import { CodeEditor } from "@webiny/ui/CodeEditor";
-
-// Make sure to import this after CodeEditor. Check official docs for available modes and themes.
-import "brace/mode/json";
-import "brace/theme/github";
-```
diff --git a/packages/ui/src/ColorPicker/ColorPicker.tsx b/packages/ui/src/ColorPicker/ColorPicker.tsx
index f210357b8c5..1e8350fb5f9 100644
--- a/packages/ui/src/ColorPicker/ColorPicker.tsx
+++ b/packages/ui/src/ColorPicker/ColorPicker.tsx
@@ -1,53 +1,8 @@
-import React from "react";
-import { SketchPicker, ColorState } from "react-color";
-import { css } from "emotion";
-import styled from "@emotion/styled";
+import React, { useCallback, useMemo } from "react";
+import { ColorPicker as AdminColorPicker } from "@webiny/admin-ui";
 import { FormComponentProps } from "~/types";
-import { FormElementMessage } from "~/FormElementMessage";
-import classNames from "classnames";
 
-const classes = {
-    label: css({
-        marginBottom: "10px !important"
-    }),
-    color: css({
-        width: "36px",
-        minHeight: "14px",
-        height: "inherit",
-        borderRadius: "2px"
-    }),
-    swatch: css({
-        padding: "5px",
-        background: "#fff",
-        borderRadius: "1px",
-        boxShadow: "0 0 0 1px rgba(0,0,0,.1)",
-        display: "inline-block",
-        cursor: "pointer"
-    }),
-    classNames: css({
-        position: "fixed",
-        top: "0px",
-        right: "0px",
-        bottom: "0px",
-        left: "0px"
-    }),
-    disable: css({
-        opacity: 0.7,
-        pointerEvents: "none"
-    })
-};
-
-const Popover = styled.div<{ align?: string }>`
-    position: absolute;
-    z-index: 2;
-    right: ${({ align }) => (align === "right" ? "10px" : "auto")};
-`;
-
-interface ColorPickerState {
-    showColorPicker: boolean;
-}
-
-interface ColorPickerProps extends FormComponentProps {
+interface ColorPickerProps extends FormComponentProps<string> {
     // Component label.
     label?: string;
 
@@ -62,102 +17,25 @@ interface ColorPickerProps extends FormComponentProps {
 }
 
 /**
- * Use ColorPicker component to display a list of choices, once the handler is triggered.
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please use the `ColorPicker` component from the `@webiny/admin-ui` package instead.
  */
-class ColorPicker extends React.Component<ColorPickerProps, ColorPickerState> {
-    colorPickerRef = React.createRef<HTMLDivElement>();
+const ColorPicker = ({ value, onChange, align: originalAlign, ...props }: ColorPickerProps) => {
+    const onValueChange = useCallback((value: string) => onChange && onChange(value), [onChange]);
 
-    public override state = {
-        showColorPicker: false
-    };
-
-    public override componentDidMount() {
-        document.addEventListener("click", this.handleClickOutside);
-    }
-
-    public override componentWillUnmount() {
-        document.removeEventListener("click", this.handleClickOutside);
-    }
-
-    handleClickOutside = (event: MouseEvent) => {
-        if (
-            this.colorPickerRef.current &&
-            !this.colorPickerRef.current.contains(event.target as Node)
-        ) {
-            this.setState({ showColorPicker: false });
+    const align = useMemo(() => {
+        if (!originalAlign) {
+            return undefined;
         }
-    };
-
-    handleClick = (e: React.MouseEvent) => {
-        e.stopPropagation();
-        this.setState({ showColorPicker: !this.state.showColorPicker });
-    };
 
-    handleClose = (e: React.MouseEvent) => {
-        e.stopPropagation();
-        this.setState({ showColorPicker: false });
-    };
-
-    handleChange = (color: ColorState) => {
-        const { onChange } = this.props;
-        onChange && onChange(color.hex);
-    };
-
-    public override render() {
-        const { value, label, disable, description, validation, align } = this.props;
-
-        let backgroundColorStyle = {};
-        if (value) {
-            backgroundColorStyle = {
-                background: `${value}`
-            };
+        if (originalAlign === "right") {
+            return "end";
         }
 
-        const { isValid: validationIsValid, message: validationMessage } = validation || {};
-
-        return (
-            <div
-                ref={this.colorPickerRef}
-                className={classNames({ [classes.disable]: disable })}
-                data-role={"color-picker-container"}
-            >
-                {label && (
-                    <div
-                        className={classNames(
-                            "mdc-text-field-helper-text mdc-text-field-helper-text--persistent",
-                            classes.label
-                        )}
-                    >
-                        {label}
-                    </div>
-                )}
+        return "start";
+    }, [originalAlign]);
 
-                <div>
-                    <div
-                        className={classes.swatch}
-                        onClick={this.handleClick}
-                        data-role={"color-picker-swatch"}
-                    >
-                        <div className={classes.color} style={backgroundColorStyle} />
-                    </div>
-                    {this.state.showColorPicker ? (
-                        <Popover align={align}>
-                            <div className={classes.classNames} onClick={this.handleClose} />
-                            <SketchPicker color={value || ""} onChange={this.handleChange} />
-                        </Popover>
-                    ) : null}
-                </div>
-
-                {validationIsValid === false && (
-                    <FormElementMessage error>{validationMessage}</FormElementMessage>
-                )}
-
-                {validationIsValid !== false && description && (
-                    <FormElementMessage>{description}</FormElementMessage>
-                )}
-            </div>
-        );
-    }
-}
+    return <AdminColorPicker {...props} value={value} onChange={onValueChange} align={align} />;
+};
 
 export { ColorPicker };
diff --git a/packages/ui/src/ColorPicker/README.md b/packages/ui/src/ColorPicker/README.md
deleted file mode 100644
index 5b38941017c..00000000000
--- a/packages/ui/src/ColorPicker/README.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# ColorPicker
-
-### Description
-
-`ColorPicker` component is used to pick a color, eg. for font or background color.
-
-### Import
-
-```js
-import { ColorPicker } from "@webiny/ui/ColorPicker";
-```
diff --git a/packages/ui/src/ConfirmationDialog/README.md b/packages/ui/src/ConfirmationDialog/README.md
deleted file mode 100644
index 4902bed7bd3..00000000000
--- a/packages/ui/src/ConfirmationDialog/README.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# ConfirmationDialog
-
-### Description
-
-`ConfirmationDialog` component is used to represent interactive surfaces.
-
-### Import
-
-```js
-import { ConfirmationDialog } from "@webiny/ui/ConfirmationDialog";
-```
diff --git a/packages/ui/src/DataTable/ColumnDirection.tsx b/packages/ui/src/DataTable/ColumnDirection.tsx
deleted file mode 100644
index 1c0fe21b2d0..00000000000
--- a/packages/ui/src/DataTable/ColumnDirection.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from "react";
-import { ColumnDirectionIcon, ColumnDirectionWrapper } from "~/DataTable/styled";
-
-export interface ColumnDirectionProps {
-    direction?: "asc" | "desc";
-}
-
-export const ColumnDirection = (props: ColumnDirectionProps) => {
-    if (props.direction) {
-        return (
-            <ColumnDirectionWrapper>
-                <ColumnDirectionIcon direction={props.direction} />
-            </ColumnDirectionWrapper>
-        );
-    }
-
-    return null;
-};
diff --git a/packages/ui/src/DataTable/ColumnsVisibility.tsx b/packages/ui/src/DataTable/ColumnsVisibility.tsx
deleted file mode 100644
index 6e93f63f95d..00000000000
--- a/packages/ui/src/DataTable/ColumnsVisibility.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-import React, { useCallback, useMemo } from "react";
-import { ReactComponent as SettingsIcon } from "@material-design-icons/svg/outlined/settings.svg";
-import { Column } from "@tanstack/react-table";
-import { IconButton } from "~/Button";
-import { Checkbox } from "~/Checkbox";
-import { Menu, MenuDivider } from "~/Menu";
-import { ColumnsVisibilityMenuHeader, ColumnsVisibilityMenuItem } from "~/DataTable/styled";
-
-interface ColumnsVisibilityProps<T> {
-    columns: Column<T>[];
-}
-
-interface Option {
-    id: string;
-    header: string;
-    onChange: (value?: boolean | undefined) => void;
-    getValue: () => boolean;
-}
-
-export const ColumnsVisibility = <T,>(props: ColumnsVisibilityProps<T>) => {
-    /**
-     * `@tanstack/react-table` does not have a simple method to return the header component.
-     * The only possible way is to use `flexRenderer`, but this is not working with the current implementation
-     * since we don't have access to the header context.
-     */
-    const getHeaderName = useCallback((column: Column<T>) => {
-        const { header } = column.columnDef;
-
-        if (typeof header === "string") {
-            return header;
-        }
-
-        if (typeof header === "function") {
-            // @ts-expect-error
-            return header();
-        }
-
-        return column.id;
-    }, []);
-
-    const options: Option[] = useMemo(() => {
-        return props.columns
-            .filter(column => column.getCanHide())
-            .map(column => {
-                return {
-                    id: column.id,
-                    header: getHeaderName(column),
-                    onChange: column.toggleVisibility,
-                    getValue: column.getIsVisible
-                };
-            });
-    }, [props.columns]);
-
-    if (options.length === 0) {
-        return null;
-    }
-
-    return (
-        <Menu handle={<IconButton icon={<SettingsIcon />} />}>
-            <ColumnsVisibilityMenuHeader use={"subtitle2"} tag={"h6"}>
-                {"Toggle column visibility"}
-            </ColumnsVisibilityMenuHeader>
-            <MenuDivider />
-            {options.map(option => {
-                return (
-                    <ColumnsVisibilityMenuItem key={option.id}>
-                        <Checkbox
-                            label={option.header}
-                            onChange={option.onChange}
-                            value={option.getValue()}
-                        />
-                    </ColumnsVisibilityMenuItem>
-                );
-            })}
-        </Menu>
-    );
-};
diff --git a/packages/ui/src/DataTable/DataTable.tsx b/packages/ui/src/DataTable/DataTable.tsx
index bb23a3cced9..8f52b958b22 100644
--- a/packages/ui/src/DataTable/DataTable.tsx
+++ b/packages/ui/src/DataTable/DataTable.tsx
@@ -1,552 +1,91 @@
-import React, {
-    memo,
-    ReactElement,
-    useCallback,
-    useEffect,
-    useMemo,
-    useRef,
-    useState
-} from "react";
-
-import {
-    DataTableBody,
-    DataTableCellProps,
-    DataTableContent,
-    DataTableHead,
-    DataTableRow
-} from "@rmwc/data-table";
-
-import {
-    Cell,
-    Column as DefaultColumn,
-    ColumnDef,
-    ColumnSort,
-    flexRender,
-    getCoreRowModel,
-    getSortedRowModel,
-    OnChangeFn,
-    Row,
-    RowSelectionState,
-    SortingState,
-    useReactTable,
-    VisibilityState
-} from "@tanstack/react-table";
-
-import { Checkbox } from "~/Checkbox";
-import { Skeleton } from "~/Skeleton";
-import { ColumnDirectionProps } from "~/DataTable/ColumnDirection";
-import { ColumnsVisibility } from "~/DataTable/ColumnsVisibility";
-
-import "@rmwc/data-table/data-table.css";
+import React from "react";
 import {
-    ColumnCellWrapper,
-    ColumnDirectionIcon,
-    ColumnDirectionWrapper,
-    ColumnHeaderWrapper,
-    DataTableCell,
-    Resizer,
-    Table,
-    TableHeadCell
-} from "./styled";
-
-export interface Column<T> {
-    /*
-     * Column header component.
-     */
-    header: string | number | JSX.Element;
-    /*
-     * Cell renderer, receives the full row and returns the value to render inside the cell.
-     */
-    cell?: (row: T) => string | number | JSX.Element | null;
-    /*
-     * Additional props to add to both header and row cells. Refer to RMWC documentation.
-     */
-    meta?: DataTableCellProps;
-    /*
-     * Column size.
-     */
-    size?: number;
-    /*
-     * Column class names.
-     */
-    className?: string;
-    /*
-     * Enable column sorting.
-     */
-    enableSorting?: boolean;
-    /*
-     * Enable column resizing.
-     */
-    enableResizing?: boolean;
-    /*
-     * Enable column visibility toggling.
-     */
-    enableHiding?: boolean;
-}
-
-export type Columns<T> = {
-    [P in keyof T]?: Column<T>;
-};
+    DataTable as AdminDataTable,
+    DataTableColumn,
+    DataTableColumns,
+    DataTableColumnSort,
+    DataTableColumnVisibility,
+    DataTableDefaultData,
+    DataTableProps as AdminDataTableProps,
+    DataTableRow,
+    DataTableSorting,
+    OnDataTableColumnVisibilityChange,
+    OnDataTableSortingChange
+} from "@webiny/admin-ui";
 
-export type DefaultData = {
-    id: string;
-    /*
-     * Define if a specific row can be selected.
-     */
-    $selectable?: boolean;
-};
-
-export type TableRow<T> = Row<DefaultData & T>;
-
-export type Sorting = SortingState;
-
-export { ColumnSort };
-
-export type OnSortingChange = OnChangeFn<Sorting>;
-
-export type ColumnVisibility = VisibilityState;
-
-export type OnColumnVisibilityChange = OnChangeFn<ColumnVisibility>;
+/**
+ * @deprecated @webiny/ui package is deprecated and will be removed in future releases.
+ * Please check `DataTable` types from the `@webiny/admin-ui` package instead.
+ */
+type Column<T> = DataTableColumn<T>;
+/**
+ * @deprecated @webiny/ui package is deprecated and will be removed in future releases.
+ * Please check `DataTable` types from the `@webiny/admin-ui` package instead.
+ */
+type ColumnSort = DataTableColumnSort;
+/**
+ * @deprecated @webiny/ui package is deprecated and will be removed in future releases.
+ * Please check `DataTable` types from the `@webiny/admin-ui` package instead.
+ */
+type ColumnVisibility = DataTableColumnVisibility;
+/**
+ * @deprecated @webiny/ui package is deprecated and will be removed in future releases.
+ * Please check `DataTable` types from the `@webiny/admin-ui` package instead.
+ */
+type Columns<T> = DataTableColumns<T>;
+/**
+ * @deprecated @webiny/ui package is deprecated and will be removed in future releases.
+ * Please check `DataTable` types from the `@webiny/admin-ui` package instead.
+ */
+type DefaultData = DataTableDefaultData;
+/**
+ * @deprecated @webiny/ui package is deprecated and will be removed in future releases.
+ * Please check `DataTable` types from the `@webiny/admin-ui` package instead.
+ */
+type OnColumnVisibilityChange = OnDataTableColumnVisibilityChange;
+/**
+ * @deprecated @webiny/ui package is deprecated and will be removed in future releases.
+ * Please check `DataTable` types from the `@webiny/admin-ui` package instead.
+ */
+type OnSortingChange = OnDataTableSortingChange;
+/**
+ * @deprecated @webiny/ui package is deprecated and will be removed in future releases.
+ * Please check `DataTable` types from the `@webiny/admin-ui` package instead.
+ */
+type Sorting = DataTableSorting;
+/**
+ * @deprecated @webiny/ui package is deprecated and will be removed in future releases.
+ * Please check `DataTable` types from the `@webiny/admin-ui` package instead.
+ */
+type TableRow<T> = DataTableRow<T>;
 
-interface Props<T> {
-    /**
-     * Show or hide borders.
-     */
-    bordered?: boolean;
-    /**
-     * Controls whether "select all" action is allowed.
-     */
-    canSelectAllRows?: boolean;
-    /**
-     * Columns definition.
-     */
-    columns: Columns<T>;
-    /**
-     * The column visibility state.
-     */
-    columnVisibility?: ColumnVisibility;
-    /**
-     * Callback that receives current column visibility state.
-     */
-    onColumnVisibilityChange?: OnColumnVisibilityChange;
-    /**
-     * Data to display into DataTable body.
-     */
-    data: T[];
-    /**
-     * Callback that is called to determine if the row is selectable.
-     */
-    isRowSelectable?: (row: Row<T>) => boolean;
-    /**
-     * Render the skeleton state at the initial data loading.
-     */
-    loadingInitial?: boolean;
-    /**
-     * Callback that receives the selected rows.
-     */
-    onSelectRow?: (rows: T[]) => void;
-    /**
-     * Callback that receives the toggled row.
-     */
-    onToggleRow?: (row: T) => void;
-    /**
-     * Callback that receives current sorting state.
-     */
-    onSortingChange?: OnSortingChange;
-    /**
-     * Selected rows.
-     */
-    selectedRows?: T[];
-    /**
-     * Sorting state.
-     */
-    sorting?: Sorting;
-    /**
-     * Initial sorting state.
-     */
-    initialSorting?: Sorting;
-    /**
-     * The number of columns to affix to the side of the table when scrolling.
-     */
-    stickyColumns?: number;
-    /**
-     * The number of rows to affix to the top of the table when scrolling.
-     */
+interface DataTableProps<TEntry>
+    extends Omit<AdminDataTableProps<TEntry>, "loading" | "stickyHeader"> {
+    loadingInitial?: AdminDataTableProps<TEntry>["loading"];
     stickyRows?: number;
 }
 
-interface DefineColumnsOptions<T> {
-    canSelectAllRows: boolean;
-    onSelectRow?: Props<T>["onSelectRow"];
-    onToggleRow: Props<T>["onToggleRow"];
-    loadingInitial: Props<T>["loadingInitial"];
-}
-
-const defineColumns = <T,>(
-    columns: Props<T>["columns"],
-    options: DefineColumnsOptions<T>
-): ColumnDef<T>[] => {
-    const { canSelectAllRows, onSelectRow, onToggleRow, loadingInitial } = options;
-
-    return useMemo(() => {
-        const columnsList = Object.keys(columns).map(key => ({
-            id: key,
-            ...columns[key as keyof typeof columns]
-        }));
-
-        const defaults: ColumnDef<T>[] = columnsList.map(column => {
-            const {
-                cell,
-                className,
-                enableHiding = true,
-                enableResizing = true,
-                enableSorting = false,
-                header,
-                id,
-                meta,
-                size = 100
-            } = column;
-
-            return {
-                id,
-                accessorKey: id,
-                header: () => header,
-                cell: info => {
-                    if (cell && typeof cell === "function") {
-                        return cell(info.row.original);
-                    } else {
-                        // Automatically convert any cell value to a string for rendering,
-                        // ensuring the table displays values correctly. This aligns with React's
-                        // rendering, which expects JSX, strings or null.
-                        // https://github.com/TanStack/table/issues/1042
-                        return info.getValue() ? String(info.getValue()) : null;
-                    }
-                },
-                enableSorting,
-                meta: {
-                    ...meta,
-                    className
-                },
-                enableResizing,
-                size,
-                enableHiding
-            };
-        });
-
-        const isSelectable = onToggleRow || onSelectRow;
-
-        const select: ColumnDef<T>[] = isSelectable
-            ? [
-                  {
-                      id: "datatable-select-column",
-                      header: ({ table }) => {
-                          if (!canSelectAllRows) {
-                              return null;
-                          }
-
-                          return (
-                              !loadingInitial && (
-                                  <Checkbox
-                                      indeterminate={table.getIsSomeRowsSelected()}
-                                      value={table.getIsAllRowsSelected()}
-                                      onChange={e => table.toggleAllPageRowsSelected(e)}
-                                  />
-                              )
-                          );
-                      },
-                      cell: info => {
-                          if (!info.row.getCanSelect()) {
-                              return <></>;
-                          }
-                          return (
-                              <Checkbox
-                                  indeterminate={info.row.getIsSomeSelected()}
-                                  value={info.row.getIsSelected()}
-                                  onChange={info.row.getToggleSelectedHandler()}
-                              />
-                          );
-                      },
-                      enableSorting: false,
-                      enableResizing: false,
-                      enableHiding: false,
-                      size: 56
-                  }
-              ]
-            : [];
-
-        return [...select, ...defaults].map(column => {
-            if (loadingInitial) {
-                return {
-                    ...column,
-                    cell: () => <Skeleton containerClassName="table-skeleton-container" />
-                };
-            }
-
-            return column;
-        });
-    }, [columns, onSelectRow, onToggleRow, loadingInitial]);
-};
-
-const ColumnDirection = ({ direction }: ColumnDirectionProps): ReactElement | null => {
-    if (direction) {
-        return (
-            <ColumnDirectionWrapper>
-                <ColumnDirectionIcon direction={direction} />
-            </ColumnDirectionWrapper>
-        );
-    }
-
-    return null;
-};
-
-const typedMemo: <T>(component: T) => T = memo;
-
-interface TableCellProps<T> {
-    cell: Cell<T, unknown>;
-    getColumnWidth: (column: DefaultColumn<T>) => number;
-    selected: boolean;
-}
-
-const TableCell = <T,>({ cell, getColumnWidth }: TableCellProps<T>) => {
-    const width = getColumnWidth(cell.column);
-
-    return (
-        <DataTableCell {...cell.column.columnDef.meta} style={{ width, maxWidth: width }}>
-            <ColumnCellWrapper>
-                {flexRender(cell.column.columnDef.cell, cell.getContext())}
-            </ColumnCellWrapper>
-        </DataTableCell>
-    );
-};
-
-const MemoTableCell = typedMemo(TableCell);
-
-interface TableRowProps<T> {
-    selected: boolean;
-    cells: Cell<T, unknown>[];
-    getColumnWidth: (column: DefaultColumn<T>) => number;
-}
-
-const TableRow = <T,>({ selected, cells, getColumnWidth }: TableRowProps<T>) => {
-    return (
-        <DataTableRow selected={selected}>
-            {cells.map(cell => (
-                <MemoTableCell<T>
-                    key={cell.id}
-                    cell={cell}
-                    getColumnWidth={getColumnWidth}
-                    selected={selected}
-                />
-            ))}
-        </DataTableRow>
-    );
-};
-
-const MemoTableRow = typedMemo(TableRow);
-
 /**
- * Empty array must be defined outside of the React component so it does not force rerendering of the DataTable
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please use the `DataTable` component from the `@webiny/admin-ui` package instead.
  */
-const emptyArray = Array(10).fill({});
-
-export const DataTable = <T extends Record<string, any> & DefaultData>({
-    data: initialData,
-    columns: initialColumns,
-    onSelectRow,
-    onToggleRow,
+const DataTable = <T extends Record<string, any> & DataTableDefaultData>({
     loadingInitial,
-    stickyColumns,
     stickyRows,
-    bordered,
-    sorting,
-    columnVisibility,
-    onColumnVisibilityChange,
-    onSortingChange,
-    isRowSelectable,
-    canSelectAllRows = true,
-    selectedRows = [],
-    initialSorting
-}: Props<T>) => {
-    const tableRef = useRef<HTMLDivElement>(null);
-    const [tableWidth, setTableWidth] = useState(1);
-
-    const data = loadingInitial ? emptyArray : initialData;
-
-    useEffect(() => {
-        const updateElementWidth = () => {
-            if (tableRef.current) {
-                const width = tableRef.current.clientWidth;
-                setTableWidth(width);
-            }
-        };
-
-        updateElementWidth();
-
-        window.addEventListener("resize", updateElementWidth);
-
-        return () => {
-            window.removeEventListener("resize", updateElementWidth);
-        };
-    }, [tableRef.current]);
-
-    const rowSelection = useMemo(() => {
-        return selectedRows.reduce<RowSelectionState>((acc, item) => {
-            const recordIndex = data.findIndex(rec => rec.id === item.id);
-            return { ...acc, [recordIndex]: true };
-        }, {});
-    }, [selectedRows, data]);
-
-    const onRowSelectionChange: OnChangeFn<RowSelectionState> = updater => {
-        const newSelection = typeof updater === "function" ? updater(rowSelection) : updater;
-
-        /**
-         * `@tanstack/react-table` isn't telling us what row was selected or deselected. It simply gives us
-         * the new selection state (an object with row indexes that are currently selected).
-         *
-         * To figure out what row was toggled, we need to calculate the difference between the old selection
-         * and the new selection. What we're doing here is:
-         * - find all items that were present in the previous selection, but are no longer present in the new selection
-         * - find all items that are present in the new selection, but were not present in the previous selection
-         */
-        const toggledRows = [
-            ...Object.keys(rowSelection).filter(x => !(x in newSelection)),
-            ...Object.keys(newSelection).filter(x => !(x in rowSelection))
-        ];
-
-        // If the difference is only 1 item, and `onToggleRow` is available, execute that.
-        if (toggledRows.length === 1 && typeof onToggleRow === "function") {
-            onToggleRow(data[parseInt(toggledRows[0])]);
-            return;
-        } else if (typeof onSelectRow === "function") {
-            const selection = Object.keys(newSelection).map(key => data[parseInt(key)]);
-            onSelectRow(selection);
-        }
-    };
-
-    const tableSorting = useMemo(() => {
-        if (!Array.isArray(sorting) || !sorting.length) {
-            return initialSorting;
-        }
-        return sorting;
-    }, [sorting]);
-
-    const columns = defineColumns(initialColumns, {
-        canSelectAllRows,
-        onSelectRow,
-        onToggleRow,
-        loadingInitial
-    });
-
-    const table = useReactTable<T>({
-        data,
-        columns,
-        enableColumnResizing: true,
-        columnResizeMode: "onChange",
-        getCoreRowModel: getCoreRowModel(),
-        getSortedRowModel: getSortedRowModel(),
-        state: {
-            rowSelection,
-            sorting: tableSorting,
-            columnVisibility
-        },
-        enableRowSelection: isRowSelectable,
-        onRowSelectionChange,
-        enableSorting: !!onSortingChange,
-        enableSortingRemoval: false,
-        manualSorting: true,
-        onSortingChange,
-        enableHiding: !!onColumnVisibilityChange,
-        onColumnVisibilityChange
-    });
-
-    const getColumnWidth = useCallback(
-        (column: DefaultColumn<T>): number => {
-            if (!column.getCanResize()) {
-                return column.getSize();
-            }
-
-            const tableSize = table.getTotalSize();
-            const columnSize = column.getSize();
-
-            return Math.ceil((columnSize * tableWidth) / tableSize);
-        },
-        [table, tableWidth]
-    );
-    /**
-     * Had to memoize the rows to avoid browser freeze.
-     */
-    const tableRows = useMemo(() => {
-        return table.getRowModel().rows;
-    }, [table, data, columns]);
-
-    return (
-        <div ref={tableRef}>
-            <Table stickyColumns={stickyColumns} stickyRows={stickyRows} bordered={bordered}>
-                <DataTableContent>
-                    <DataTableHead>
-                        {table.getHeaderGroups().map(headerGroup => (
-                            <DataTableRow key={headerGroup.id}>
-                                {headerGroup.headers.map((header, index) => {
-                                    const isLastCell = index === headerGroup.headers.length - 1;
-                                    const width = getColumnWidth(header.column);
+    ...props
+}: DataTableProps<T>) => {
+    return <AdminDataTable {...props} loading={loadingInitial} stickyHeader={!!stickyRows} />;
+};
 
-                                    return (
-                                        <TableHeadCell
-                                            key={header.id}
-                                            {...header.column.columnDef.meta}
-                                            colSpan={header.colSpan}
-                                            style={{ width, maxWidth: width }}
-                                        >
-                                            {header.isPlaceholder ? null : (
-                                                <ColumnHeaderWrapper
-                                                    onClick={header.column.getToggleSortingHandler()}
-                                                    sortable={header.column.getCanSort()}
-                                                    isLastCell={isLastCell}
-                                                >
-                                                    {flexRender(
-                                                        header.column.columnDef.header,
-                                                        header.getContext()
-                                                    )}
-                                                    <ColumnDirection
-                                                        direction={
-                                                            header.column.getIsSorted() || undefined
-                                                        }
-                                                    />
-                                                    {isLastCell && (
-                                                        <ColumnsVisibility
-                                                            columns={table.getAllColumns()}
-                                                        />
-                                                    )}
-                                                </ColumnHeaderWrapper>
-                                            )}
-                                            {header.column.getCanResize() && (
-                                                <Resizer
-                                                    onMouseDown={header.getResizeHandler()}
-                                                    onTouchStart={header.getResizeHandler()}
-                                                    isResizing={header.column.getIsResizing()}
-                                                />
-                                            )}
-                                        </TableHeadCell>
-                                    );
-                                })}
-                            </DataTableRow>
-                        ))}
-                    </DataTableHead>
-                    <DataTableBody>
-                        {tableRows.map(row => {
-                            const id = row.original.id || row.id;
-                            return (
-                                <MemoTableRow<T>
-                                    key={id}
-                                    cells={row.getVisibleCells()}
-                                    selected={row.getIsSelected()}
-                                    getColumnWidth={getColumnWidth}
-                                />
-                            );
-                        })}
-                    </DataTableBody>
-                </DataTableContent>
-            </Table>
-        </div>
-    );
+export {
+    DataTable,
+    type Column,
+    type ColumnSort,
+    type ColumnVisibility,
+    type Columns,
+    type DefaultData,
+    type OnColumnVisibilityChange,
+    type OnSortingChange,
+    type Sorting,
+    type TableRow
 };
diff --git a/packages/ui/src/DataTable/README.md b/packages/ui/src/DataTable/README.md
deleted file mode 100644
index ea0d2535a9b..00000000000
--- a/packages/ui/src/DataTable/README.md
+++ /dev/null
@@ -1,72 +0,0 @@
-# DataTable
-
-### Design
-
-https://material.io/components/data-tables
-
-### Description
-
-Use `DataTable` components to display sets of data across rows and columns.
-
-### Usage
-
-```tsx
-import { DataTable, Columns } from "@webiny/ui/DataTable";
-
-// Declare the data structure.
-interface Entry {
-    name: string;
-    createdBy: string;
-    lastModified: string;
-    status: string;
-}
-
-// Define the data you want to display.
-const data: Entry[] = [
-    {
-        name: "Page 1",
-        createdBy: "John Doe",
-        lastModified: "3 days ago",
-        status: "Draft"
-    },
-    {
-        name: "Page 2",
-        createdBy: "John Doe",
-        lastModified: "1 day ago",
-        status: "Published"
-    },
-    {
-        name: "Page 3",
-        createdBy: "John Doe",
-        lastModified: "1 hour ago",
-        status: "Published"
-    }
-];
-
-// Define the columns structure for your table.
-const columns: Columns<Entry> = {
-    name: {
-        header: "Title"
-    },
-    createdBy: {
-        header: "Author",
-        cell: row => <em>{row.createdBy.toUpperCase()}</em>
-    },
-    lastModified: {
-        header: "Last Modified"
-    },
-    status: {
-        header: "Status",
-        meta: {
-            alignEnd: true
-        }
-    }
-};
-
-...
-
-// Use the <DataTable /> component within your code.
-return(
-    <DataTable data={data} columns={columns} />
-)
-```
diff --git a/packages/ui/src/DataTable/styled.tsx b/packages/ui/src/DataTable/styled.tsx
deleted file mode 100644
index f67d5cc331e..00000000000
--- a/packages/ui/src/DataTable/styled.tsx
+++ /dev/null
@@ -1,146 +0,0 @@
-import { CSSProperties } from "react";
-import styled from "@emotion/styled";
-
-import { ReactComponent as ArrowDown } from "@material-design-icons/svg/outlined/arrow_downward.svg";
-import {
-    DataTable as RmwcDataTable,
-    DataTableCell as RmwcDataTableCell,
-    DataTableHeadCell as RmwcDataTableHeadCell,
-    DataTableProps,
-    DataTableHeadCellProps,
-    DataTableCellProps
-} from "@rmwc/data-table";
-import { ColumnDirectionProps } from "~/DataTable/ColumnDirection";
-import { Typography } from "~/Typography";
-
-interface TableProps extends DataTableProps {
-    bordered?: boolean;
-}
-
-export const Table = styled(RmwcDataTable)<TableProps>`
-    overflow-y: hidden;
-    overflow-x: scroll;
-    max-width: 100%;
-    display: block !important;
-    border-width: ${props => (props.bordered ? "1px" : "0px")};
-
-    th,
-    td {
-        vertical-align: middle;
-    }
-`;
-
-interface ResizerProps {
-    isResizing: boolean;
-}
-
-export const Resizer = styled("div")<ResizerProps>`
-    position: absolute;
-    right: 0;
-    top: 0;
-    height: 100%;
-    width: 4px;
-    background: ${props =>
-        props.isResizing
-            ? "var(--mdc-theme-text-hint-on-light)"
-            : "var(--mdc-theme-on-background)"};
-    cursor: col-resize;
-    user-select: none;
-    touch-action: none;
-    opacity: ${props => (props.isResizing ? 1 : 0)};
-`;
-
-interface TableHeadCell extends DataTableHeadCellProps {
-    colSpan: number;
-    style?: CSSProperties;
-}
-
-export const TableHeadCell = styled(RmwcDataTableHeadCell)<TableHeadCell>`
-    position: relative;
-    width: auto;
-
-    &:hover ${Resizer} {
-        opacity: 1;
-    }
-`;
-
-interface DataTableCell extends DataTableCellProps {
-    style?: CSSProperties;
-}
-
-export const DataTableCell = styled(RmwcDataTableCell)<DataTableCell>`
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-`;
-
-export const ColumnCellWrapper = styled.div`
-    display: flex;
-    align-items: center;
-    justify-content: start;
-
-    // TODO: refactor in case of RMWC removal
-    .rmwc-data-table__cell--align-start & {
-        justify-content: start;
-    }
-
-    .rmwc-data-table__cell--align-middle & {
-        justify-content: center;
-    }
-
-    .rmwc-data-table__cell--align-end & {
-        justify-content: flex-end;
-    }
-
-    // Needed to solve skeleton width equal to 0 (https://github.com/dvtng/react-loading-skeleton#troubleshooting)
-    .table-skeleton-container {
-        flex: 1;
-    }
-`;
-
-interface ColumnHeaderWrapperProps {
-    sortable: boolean;
-    isLastCell: boolean;
-}
-
-export const ColumnHeaderWrapper = styled("div")<ColumnHeaderWrapperProps>`
-    cursor: ${props => (props.sortable ? "pointer" : "cursor")};
-    display: flex;
-    align-items: center;
-    justify-content: ${props => (props.isLastCell ? "flex-end" : "start")};
-
-    // TODO: refactor in case of RMWC removal
-    .rmwc-data-table__cell--align-start & {
-        justify-content: start;
-    }
-
-    .rmwc-data-table__cell--align-middle & {
-        justify-content: center;
-    }
-
-    .rmwc-data-table__cell--align-end & {
-        justify-content: flex-end;
-    }
-`;
-
-export const ColumnDirectionWrapper = styled("span")`
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    height: 16px;
-    width: 16px;
-    margin: 0 0 0 4px;
-`;
-
-export const ColumnDirectionIcon = styled(ArrowDown)<ColumnDirectionProps>`
-    transform: ${props => (props.direction === "asc" ? "rotate(180deg)" : "rotate(0deg)")};
-`;
-
-export const ColumnsVisibilityMenuHeader = styled(Typography)`
-    padding: 4px 16px 12px;
-    font-weight: 600;
-`;
-
-export const ColumnsVisibilityMenuItem = styled("div")`
-    padding: 0 16px;
-`;
diff --git a/packages/ui/src/DelayedOnChange/index.ts b/packages/ui/src/DelayedOnChange/index.ts
index 2b44c2c57c6..7e3c27111ee 100644
--- a/packages/ui/src/DelayedOnChange/index.ts
+++ b/packages/ui/src/DelayedOnChange/index.ts
@@ -1 +1,17 @@
-export * from "./DelayedOnChange";
+import {
+    type ApplyValueCb,
+    DelayedOnChange,
+    type DelayedOnChangeProps,
+    type OnChangeCallable
+} from "@webiny/admin-ui";
+
+export {
+    /**
+     * @deprecated This component is deprecated and will be removed in future releases.
+     * Please use the `DelayedOnChange` component from the `@webiny/admin-ui` package instead.
+     */
+    DelayedOnChange,
+    type DelayedOnChangeProps,
+    type ApplyValueCb,
+    type OnChangeCallable
+};
diff --git a/packages/ui/src/Dialog/Dialog.tsx b/packages/ui/src/Dialog/Dialog.tsx
index 1772c2c817b..fcca2c71e95 100644
--- a/packages/ui/src/Dialog/Dialog.tsx
+++ b/packages/ui/src/Dialog/Dialog.tsx
@@ -1,178 +1,125 @@
 import React from "react";
-import ReactDOM from "react-dom";
 import {
-    Dialog as RmwcDialog,
-    DialogActions as RmwcDialogActions,
-    DialogActionsProps as RmwcDialogActionsProps,
-    DialogButton as RmwcDialogButton,
-    DialogButtonProps as RmwcDialogButtonProps,
-    DialogContent as RmwcDialogContent,
-    DialogContentProps as RmwcDialogContentProps,
-    DialogOnCloseEventT,
-    DialogProps as RmwcDialogProps,
-    DialogTitle as RmwcDialogTitle,
-    DialogTitleProps as RmwcDialogTitleProps
-} from "@rmwc/dialog";
-import { css } from "emotion";
-import { getClasses } from "~/Helpers";
-
-export type DialogOnClose = (event: DialogOnCloseEventT) => void;
-
-export interface DialogProps extends RmwcDialogProps {
-    className?: string;
-
-    // Component's custom in-line styles.
-    style?: React.CSSProperties;
-
-    onClose?: (evt: DialogOnCloseEventT) => void;
-
-    preventOutsideDismiss?: boolean;
-
-    children?: React.ReactNode;
-}
-
-export class Dialog extends React.Component<DialogProps> {
-    container: HTMLElement;
-
-    constructor(props: DialogProps) {
-        super(props);
-        /**
-         * We can safely cast
-         */
-        this.container = document.getElementById("dialog-container") as HTMLElement;
-
-        if (!this.container) {
-            this.container = document.createElement("div");
-            this.container.setAttribute("id", "dialog-container");
-            const container = this.container;
-            document.body && document.body.appendChild(container);
-        }
-    }
-
-    public override render() {
-        const { children, ...props } = this.props;
-        const container = this.container;
-
-        // Let's pass "permanent" / "persistent" / "temporary" flags as "mode" prop instead.
-        return ReactDOM.createPortal(
-            <RmwcDialog {...getClasses(props, "webiny-ui-dialog")}>{children}</RmwcDialog>,
-            container
-        );
-    }
-}
-
-export interface DialogTitleProps extends RmwcDialogTitleProps {
-    /**
-     * Title text.
-     */
+    Button as AdminUiButton,
+    type ButtonProps as AdminUiButtonProps,
+    Dialog as AdminUiDialog,
+    type DialogProps as AdminUiDialogProps
+} from "@webiny/admin-ui";
+import { DialogHeader as AdminUiDialogHeader } from "@webiny/admin-ui/Dialog/components/DialogHeader";
+import { DialogFooter as AdminUiDialogFooter } from "@webiny/admin-ui/Dialog/components/DialogFooter";
+import { DialogClosePrimitive as AdminUiDialogClose } from "@webiny/admin-ui/Dialog/components/DialogClose";
+import { DialogBody } from "@webiny/admin-ui/Dialog/components/DialogBody";
+
+export interface DialogActionsProps {
     children: React.ReactNode[] | React.ReactNode;
 }
 
 /**
- * Dialog's header, which can accept DialogHeaderTitle component or any other set of components.
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please use the `Dialog` component from the `@webiny/admin-ui` package instead.
  */
-export const DialogTitle = (props: DialogTitleProps) => (
-    <RmwcDialogTitle
-        {...getClasses(props, "webiny-ui-dialog__title")}
-        style={{ marginBottom: "0" }}
-    />
-);
-
-export type DialogContentProps = RmwcDialogContentProps & {
-    /**
-     * Dialog content.
-     */
-    children: React.ReactNode[] | React.ReactNode;
-
-    className?: string;
+export const DialogActions = (props: DialogActionsProps) => {
+    return <AdminUiDialogFooter actions={props.children} />;
 };
 
+export interface DialogButtonProps extends AdminUiButtonProps {
+    children?: React.ReactNode[] | React.ReactNode;
+}
+
 /**
- * A simple component for showing dialog's body.
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please use the `Dialog` component from the `@webiny/admin-ui` package instead.
  */
-export const DialogContent = (props: DialogContentProps) => (
-    <RmwcDialogContent {...getClasses(props, "webiny-ui-dialog__content")} />
-);
-
-export interface DialogActionsProps extends RmwcDialogActionsProps {
-    /**
-     * Action buttons.
-     */
-    children: React.ReactNode[] | React.ReactNode;
+export const DialogButton = (props: DialogButtonProps) => {
+    return <AdminUiButton {...props} variant={"secondary"} text={props.text || props.children} />;
+};
 
-    // Dialog component's custom in-line styles.
-    style?: React.CSSProperties;
+export interface DialogAcceptProps extends AdminUiButtonProps {
+    children?: React.ReactNode[] | React.ReactNode;
 }
 
-const addMargin = css`
-    button:last-of-type {
-        margin-left: 8px;
-    }
-`;
+/**
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please use the `Dialog` component from the `@webiny/admin-ui` package instead.
+ */
+export const DialogAccept = (props: DialogAcceptProps) => {
+    return <AdminUiButton {...props} variant={"primary"} text={props.text || props.children} />;
+};
 
 /**
- * Can be used to show accept and cancel buttons.
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please use the `Dialog` component from the `@webiny/admin-ui` package instead.
  */
-export const DialogActions = (props: DialogActionsProps) => (
-    <RmwcDialogActions {...getClasses(props, [addMargin, "webiny-ui-dialog__actions"])} />
-);
+export const DialogCancel = (props: DialogButtonProps) => {
+    return (
+        <AdminUiDialogClose asChild>
+            <AdminUiButton {...props} variant={"secondary"} text={props.text || props.children} />
+        </AdminUiDialogClose>
+    );
+};
 
-interface DialogButtonProps extends RmwcDialogButtonProps {
-    /**
-     * Callback to execute then button is clicked.
-     */
-    onClick?: (e: React.MouseEvent) => void;
+DialogActions.displayName = "DialogActions";
 
-    className?: string;
+export interface DialogContentProps {
+    children: React.ReactNode[] | React.ReactNode;
 }
 
 /**
- * Use this to show a simple button.
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please use the `Dialog` component from the `@webiny/admin-ui` package instead.
  */
-export const DialogButton = (props: DialogButtonProps) => (
-    <RmwcDialogButton {...getClasses(props, "webiny-ui-dialog__button")} />
-);
-
-interface DialogCancelProps extends RmwcDialogButtonProps {
-    /**
-     * Callback to execute then button is clicked.
-     */
-    onClick?: (e: React.MouseEvent) => void;
+export const DialogContent = (props: DialogContentProps) => {
+    return <DialogBody>{props.children}</DialogBody>;
+};
+
+DialogContent.displayName = "DialogContent";
+
+export interface DialogTitleProps {
+    children: React.ReactNode[] | React.ReactNode;
 }
 
 /**
- * Use this to close the dialog without taking any additional action.
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please use the `Dialog` component from the `@webiny/admin-ui` package instead.
  */
-export const DialogCancel = (props: DialogCancelProps) => {
-    return (
-        <DialogButton
-            {...getClasses(props, "webiny-ui-dialog__button webiny-ui-dialog__button--cancel")}
-            action="close"
-            data-testid="dialog-cancel"
-        >
-            {props.children}
-        </DialogButton>
-    );
+export const DialogTitle = (props: DialogTitleProps) => {
+    return <AdminUiDialogHeader title={props.children} />;
 };
 
-interface DialogAcceptProps extends RmwcDialogButtonProps {
-    /**
-     * Callback to execute then button is clicked.
-     */
-    onClick?: (e: React.MouseEvent) => void;
+DialogTitle.displayName = "DialogTitle";
+
+export type DialogOnClose = () => void;
+
+export interface DialogProps extends AdminUiDialogProps {
+    onClose?: DialogOnClose;
+    onOpened?: () => void;
+    preventOutsideDismiss?: boolean;
 }
 
 /**
- * Use this to close the dialog without taking any additional action.
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please use the `Dialog` component from the `@webiny/admin-ui` package instead.
  */
-export const DialogAccept = (props: DialogAcceptProps) => {
+export const Dialog = ({
+    onClose,
+    onOpened,
+    open,
+    showCloseButton,
+    children,
+    preventOutsideDismiss,
+    ...rest
+}: DialogProps) => {
     return (
-        <DialogButton
-            {...getClasses(props, "webiny-ui-dialog__button webiny-ui-dialog__button--accept")}
-            action="accept"
-            data-testid="dialog-accept"
+        <AdminUiDialog
+            open={open}
+            bodyPadding={false}
+            dismissible={preventOutsideDismiss === true ? false : true}
+            showCloseButton={showCloseButton}
+            onClose={onClose}
+            onOpen={onOpened}
+            {...rest}
         >
-            {props.children}
-        </DialogButton>
+            {children}
+        </AdminUiDialog>
     );
 };
diff --git a/packages/ui/src/Dialog/README.md b/packages/ui/src/Dialog/README.md
deleted file mode 100644
index ffc88d6f86c..00000000000
--- a/packages/ui/src/Dialog/README.md
+++ /dev/null
@@ -1,23 +0,0 @@
-# Dialog
-
-### Design
-
-<a href="https://material.io/design/components/dialogs.html" target="_blank">https://material.io/design/components/dialogs.html</a>
-
-### Description
-
-Use `Dialog` component to display an informative or alert message and allow users to act upon it.
-
-### Import
-
-```js
-import {
-  Dialog,
-  DialogAccept,
-  DialogCancel,
-  DialogFooter,
-  DialogHeader,
-  DialogHeaderTitle,
-  DialogBody
-} from "@webiny/ui/Dialog";
-```
diff --git a/packages/ui/src/Drawer/Drawer.tsx b/packages/ui/src/Drawer/Drawer.tsx
index de9b7204290..e178561e142 100644
--- a/packages/ui/src/Drawer/Drawer.tsx
+++ b/packages/ui/src/Drawer/Drawer.tsx
@@ -1,33 +1,37 @@
-import React, { useMemo } from "react";
-import { CSSObject } from "@emotion/react";
-import styled from "@emotion/styled";
-import {
-    Drawer as RmwcDrawer,
-    DrawerContent as RmwcDrawerContent,
-    DrawerHeader as RmwcDrawerHeader,
-    DrawerProps as RmwcDrawerProps,
-    DrawerHeaderProps as RmwcDrawerHeaderProps,
-    DrawerContentProps as RmwcDrawerContentProps
-} from "@rmwc/drawer";
+import React from "react";
+import { Drawer as AdminUiDrawer, type DrawerProps as AdminUiDrawerProps } from "@webiny/admin-ui";
+import { DrawerHeader as AdminUiDrawerHeader } from "@webiny/admin-ui/Drawer/components/DrawerHeader";
 
-type DrawerHeaderProps = RmwcDrawerHeaderProps & {
-    /**
-     * Drawer content.
-     */
-    children: React.ReactNode;
+/**
+ * Use Drawer component to display navigation for the whole app or just a small section of it.
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please use the `Drawer` component from the `@webiny/admin-ui` package instead.
+ */
+const Drawer = ({ children, ...props }: DrawerProps) => {
+    return (
+        <AdminUiDrawer side={"left"} {...props}>
+            {children}
+        </AdminUiDrawer>
+    );
+};
 
-    /**
-     * CSS class name
-     */
-    className?: string;
+/**
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please use the `Drawer` component from the `@webiny/admin-ui` package instead.
+ */
+const DrawerRight = (props: DrawerProps) => {
+    return <Drawer side={"right"} {...props} />;
 };
 
 /**
- * Shows header of the drawer.
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please use the `Drawer` component from the `@webiny/admin-ui` package instead.
  */
-const DrawerHeader = (props: DrawerHeaderProps) => <RmwcDrawerHeader {...props} />;
+const DrawerLeft = (props: DrawerProps) => {
+    return <Drawer side={"left"} {...props} />;
+};
 
-export type DrawerContentProps = RmwcDrawerContentProps & {
+type DrawerHeaderProps = {
     /**
      * Drawer content.
      */
@@ -40,11 +44,14 @@ export type DrawerContentProps = RmwcDrawerContentProps & {
 };
 
 /**
- * Shows drawer content. It can be anything, but commonly a List component would suffice here.
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please use the `Dialog` component from the `@webiny/admin-ui` package instead.
  */
-const DrawerContent = (props: DrawerContentProps) => <RmwcDrawerContent {...props} />;
+const DrawerHeader = (props: DrawerHeaderProps) => {
+    return <AdminUiDrawerHeader title={props.children} description={""} />;
+};
 
-type DrawerProps = RmwcDrawerProps & {
+export type DrawerContentProps = {
     /**
      * Drawer content.
      */
@@ -54,53 +61,23 @@ type DrawerProps = RmwcDrawerProps & {
      * CSS class name
      */
     className?: string;
-
-    style?: CSSObject;
 };
 
-const DirectionRTL = styled.div`
-    .mdc-drawer.mdc-drawer--modal,
-    .mdc-drawer.mdc-drawer--dismissable {
-        left: initial;
-        right: 0;
-    }
-
-    .mdc-drawer--animate {
-        -webkit-transform: translateX(100%);
-        transform: translateX(100%);
-    }
-
-    .mdc-drawer.mdc-drawer--opening {
-        -webkit-transform: translateX(0%) !important;
-        transform: translateX(0%) !important;
-    }
-
-    .mdc-drawer.mdc-drawer--closing {
-        -webkit-transform: translateX(100%) !important;
-        transform: translateX(100%) !important;
-    }
-`;
-
 /**
- * Use Drawer component to display navigation for the whole app or just a small section of it.
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please use the `Drawer` component from the `@webiny/admin-ui` package instead.
  */
-const Drawer = ({ style, children, ...props }: DrawerProps) => {
-    // Style the drawer using the styles that were passed in.
-    const Drawer = useMemo(() => (style ? styled(RmwcDrawer)(style) : RmwcDrawer), [style]);
-
-    return <Drawer {...props}>{children}</Drawer>;
+const DrawerContent = (props: DrawerContentProps) => {
+    return <>{props.children}</>;
 };
 
-const DrawerRight = (props: DrawerProps) => {
-    return (
-        <DirectionRTL>
-            <Drawer {...props} />
-        </DirectionRTL>
-    );
-};
+export interface DrawerProps extends AdminUiDrawerProps {
+    /**
+     * @deprecated Property is no longer supported.
+     */
+    dismissible?: boolean;
 
-const DrawerLeft = (props: DrawerProps) => {
-    return <Drawer {...props} />;
-};
+    onClose?: () => void;
+}
 
 export { Drawer, DrawerHeader, DrawerContent, DrawerRight, DrawerLeft };
diff --git a/packages/ui/src/Drawer/README.md b/packages/ui/src/Drawer/README.md
deleted file mode 100644
index e5ebba377a5..00000000000
--- a/packages/ui/src/Drawer/README.md
+++ /dev/null
@@ -1,15 +0,0 @@
-# Drawer
-
-### Design
-
-<a href="https://material.io/design/components/navigation-drawer.html" target="_blank">https://material.io/design/components/navigation-drawer.html</a>
-
-### Description
-
-Use `Drawer` component to display navigation for the whole app or just a small section of it.
-
-### Import
-
-```js
-import { Drawer } from "@webiny/ui/Drawer";
-```
diff --git a/packages/ui/src/DynamicFieldset/Fieldset.tsx b/packages/ui/src/DynamicFieldset/Fieldset.tsx
deleted file mode 100644
index 96a5d741924..00000000000
--- a/packages/ui/src/DynamicFieldset/Fieldset.tsx
+++ /dev/null
@@ -1,150 +0,0 @@
-import React from "react";
-import dotProp from "dot-prop-immutable";
-import { FormElementMessage } from "~/FormElementMessage";
-import styled from "@emotion/styled";
-
-interface ChildrenRenderPropRowCallableParams {
-    index: number;
-    data: any;
-}
-interface ChildrenRenderPropRowCallable {
-    (params: ChildrenRenderPropRowCallableParams): React.ReactNode;
-}
-
-interface ChildrenRenderPropHeaderCallable {
-    (): React.ReactNode;
-}
-interface ChildrenRenderPropEmptyCallable {
-    (): React.ReactNode;
-}
-interface ChildrenRenderProp {
-    actions: {
-        add: (index?: number) => () => void;
-        remove: (index: number) => () => void;
-    };
-    header: (cb: ChildrenRenderPropHeaderCallable) => React.ReactNode;
-    row: (cb: ChildrenRenderPropRowCallable) => React.ReactNode;
-    empty: (cb: ChildrenRenderPropEmptyCallable) => React.ReactNode;
-}
-
-interface FieldsetProps {
-    value?: any[];
-    description?: string;
-    validation?: { isValid: null | boolean; message?: string };
-    onChange: (value: any) => void;
-    children: (props: ChildrenRenderProp) => React.ReactNode;
-}
-
-const DynamicFieldsetRow = styled("div")({
-    paddingBottom: 10,
-    "> .mdc-layout-grid": {
-        padding: 0,
-        "> .mdc-layout-grid__inner": {
-            display: "block"
-        }
-    }
-});
-
-class Fieldset extends React.Component<FieldsetProps> {
-    static defaultProps: Partial<FieldsetProps> = {
-        value: []
-    };
-
-    header: React.ReactNode = null;
-    rows: React.ReactNode = null;
-    empty: React.ReactNode = null;
-
-    actions = {
-        add:
-            (index = -1) =>
-            () =>
-                this.addData(index),
-        remove:
-            (index = -1) =>
-            () =>
-                this.removeData(index)
-    };
-
-    removeData = (index: number) => {
-        const { value, onChange } = this.props;
-        onChange(dotProp.delete(value, index));
-    };
-
-    addData = (index = -1) => {
-        const { onChange } = this.props;
-        let value = this.props.value;
-        if (!value) {
-            value = [];
-        }
-        if (index < 0) {
-            onChange([...value, {}]);
-        } else {
-            onChange([...value.slice(0, index + 1), {}, ...value.slice(index + 1)]);
-        }
-    };
-
-    renderHeader = (cb: () => React.ReactNode): React.ReactNode => {
-        this.header = cb();
-        return null;
-    };
-
-    renderRow = (cb: ChildrenRenderPropRowCallable): React.ReactNode => {
-        const { value } = this.props;
-        if (!value) {
-            return null;
-        }
-        this.rows = value.map((record, index) => {
-            return (
-                <DynamicFieldsetRow key={index}>{cb({ data: record, index })}</DynamicFieldsetRow>
-            );
-        });
-        return null;
-    };
-
-    renderEmpty = (cb: () => React.ReactNode): React.ReactNode => {
-        this.empty = cb();
-        return null;
-    };
-
-    public renderComponent(): React.ReactNode {
-        const { value } = this.props;
-        const { children } = this.props;
-
-        children({
-            actions: this.actions,
-            header: this.renderHeader,
-            row: this.renderRow,
-            empty: this.renderEmpty
-        });
-
-        if (!value || value.length === 0) {
-            return this.empty;
-        }
-
-        return (
-            <React.Fragment>
-                {this.header}
-                {this.rows}
-            </React.Fragment>
-        );
-    }
-
-    public override render() {
-        const { description, validation = { isValid: null } } = this.props;
-
-        return (
-            <>
-                {this.renderComponent()}
-                {validation.isValid === false && (
-                    <FormElementMessage error>{validation.message}</FormElementMessage>
-                )}
-
-                {validation.isValid !== false && description && (
-                    <FormElementMessage>{description}</FormElementMessage>
-                )}
-            </>
-        );
-    }
-}
-
-export default Fieldset;
diff --git a/packages/ui/src/DynamicFieldset/index.ts b/packages/ui/src/DynamicFieldset/index.ts
index a2b6435b2d3..dbd00df0eeb 100644
--- a/packages/ui/src/DynamicFieldset/index.ts
+++ b/packages/ui/src/DynamicFieldset/index.ts
@@ -1 +1,10 @@
-export { default as DynamicFieldset } from "./Fieldset";
+import { DynamicFieldset, type DynamicFieldsetProps } from "@webiny/admin-ui";
+
+export {
+    /**
+     * @deprecated This component is deprecated and will be removed in future releases.
+     * Please use the `DynamicFieldset` component from the `@webiny/admin-ui` package instead.
+     */
+    DynamicFieldset,
+    type DynamicFieldsetProps
+};
diff --git a/packages/ui/src/Elevation/Elevation.tsx b/packages/ui/src/Elevation/Elevation.tsx
index 44cc58a2167..c57d9c3f0f5 100644
--- a/packages/ui/src/Elevation/Elevation.tsx
+++ b/packages/ui/src/Elevation/Elevation.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Elevation as RmwcElevation } from "@rmwc/elevation";
+import { cn } from "@webiny/admin-ui";
 
 export type ElevationProps = {
     // Any element that needs to be highlighted.
@@ -19,15 +19,16 @@ export type ElevationProps = {
 };
 
 /**
- * Elevation component visually raises any content by applying shadow.
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please use the `Card` component from the `@webiny/admin-ui` package instead.
  */
-const Elevation = React.forwardRef((props: ElevationProps, ref: React.Ref<any>) => {
+const Elevation = ({ className, ...props }: ElevationProps) => {
     return (
-        <RmwcElevation ref={ref} {...props}>
+        <div {...props} className={cn("wby-bg-white wby-shadow-md wby-p-4", className)}>
             {props.children}
-        </RmwcElevation>
+        </div>
     );
-});
+};
 
 Elevation.displayName = "Elevation";
 
diff --git a/packages/ui/src/Elevation/README.md b/packages/ui/src/Elevation/README.md
deleted file mode 100644
index 9cbe6160e99..00000000000
--- a/packages/ui/src/Elevation/README.md
+++ /dev/null
@@ -1,15 +0,0 @@
-# Elevation
-
-### Design
-
-<a href="https://material.io/develop/web/components/elevation/" target="_blank">https://material.io/develop/web/components/elevation/</a>
-
-### Description
-
-`Elevation` component visually raises any content by applying shadow.
-
-### Import
-
-```js
-import { Elevation } from "@webiny/ui/Elevation";
-```
diff --git a/packages/ui/src/FormElementMessage/FormElementMessage.tsx b/packages/ui/src/FormElementMessage/FormElementMessage.tsx
index ccc68619a10..97ec59b1732 100644
--- a/packages/ui/src/FormElementMessage/FormElementMessage.tsx
+++ b/packages/ui/src/FormElementMessage/FormElementMessage.tsx
@@ -1,7 +1,7 @@
 import React from "react";
-import classnames from "classnames";
+import { FormComponentErrorMessage, FormComponentNote } from "@webiny/admin-ui";
 
-type Props = {
+type FormElementMessageProps = {
     // message to display
     children: React.ReactNode;
 
@@ -12,14 +12,16 @@ type Props = {
     error?: boolean;
 };
 
-const FormElementMessage = (props: Props) => {
-    const classNames = classnames(
-        "mdc-text-field-helper-text mdc-text-field-helper-text--persistent",
-        props.className,
-        { "mdc-text-field-helper-text--error": props.error }
-    );
+/**
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please use the `FormComponent` components from the `@webiny/admin-ui` package instead.
+ */
+const FormElementMessage = ({ error, children, ...props }: FormElementMessageProps) => {
+    if (error) {
+        return <FormComponentErrorMessage {...props} invalid={error} text={children} />;
+    }
 
-    return <div className={classNames}>{props.children}</div>;
+    return <FormComponentNote {...props} text={children} />;
 };
 
 export { FormElementMessage };
diff --git a/packages/ui/src/FullName/FullName.ts b/packages/ui/src/FullName/FullName.ts
index acfe40d88e5..baa608cdbc7 100644
--- a/packages/ui/src/FullName/FullName.ts
+++ b/packages/ui/src/FullName/FullName.ts
@@ -5,7 +5,12 @@ type Props = {
     };
 };
 
+/**
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please implement your own `FullName` component or reach out on Slack.
+ */
 const FullName = (props: Props) => {
+    console.warn("The `FullName` component is deprecated and will be removed in future releases.");
     const { data } = props;
 
     if (!data) {
diff --git a/packages/ui/src/FullName/README.md b/packages/ui/src/FullName/README.md
deleted file mode 100644
index 47edeec1dd9..00000000000
--- a/packages/ui/src/FullName/README.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# FullName
-
-### Description
-
-Use `FullName` component to display first name and last name of users.
-
-### Import
-
-```js
-import { FullName } from "@webiny/ui/FullName";
-```
diff --git a/packages/ui/src/Grid/Grid.tsx b/packages/ui/src/Grid/Grid.tsx
index bf130d81d87..9e4421174c6 100644
--- a/packages/ui/src/Grid/Grid.tsx
+++ b/packages/ui/src/Grid/Grid.tsx
@@ -1,12 +1,30 @@
-import React from "react";
-import {
-    Grid as RmwcGrid,
-    GridCell as RmwcGridCell,
-    GridRow as RmwcGridInner,
-    GridCellProps as RmwcGridCellProps,
-    GridProps as RmwcGridProps
-} from "@rmwc/grid";
-import { CSSProperties } from "react";
+import React, { CSSProperties } from "react";
+import cn from "classnames";
+import { Grid as AdminUiGrid, ColumnProps as AdminUiColumnProps } from "@webiny/admin-ui";
+
+export interface RmwcGridProps {
+    /** Specifies the grid should have fixed column width. */
+    fixedColumnWidth?: boolean;
+    /** Specifies the alignment of the whole grid. */
+    align?: "left" | "right";
+    /** Children for the Grid */
+    children?: React.ReactNode;
+}
+
+export interface RmwcGridCellProps {
+    /** Default number of columns to span. */
+    span?: number;
+    /** Number of columns to span on a phone. */
+    phone?: number;
+    /** Number of columns to span on a tablet. */
+    tablet?: number;
+    /** Number of columns to span on a desktop. */
+    desktop?: number;
+    /** Specifies the order of the cell. */
+    order?: number;
+    /** Specifies the alignment of cell */
+    align?: "top" | "middle" | "bottom";
+}
 
 export type CellProps = RmwcGridCellProps & {
     // One or more Cell components.
@@ -18,16 +36,23 @@ export type CellProps = RmwcGridCellProps & {
     style?: { [key: string]: any };
 };
 
-export type GridProps = RmwcGridProps & {
-    className?: string;
-    style?: CSSProperties;
-};
-
 /**
  * Cell must be direct children of Grid component.
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please use the `Grid` component from the `@webiny/admin-ui` package instead.
  */
 export const Cell = (props: CellProps) => {
-    return <RmwcGridCell {...props}>{props.children}</RmwcGridCell>;
+    const { children, style, className, align } = props;
+    return (
+        <AdminUiGrid.Column
+            className={className}
+            style={style}
+            span={props.span as AdminUiColumnProps["span"]}
+            align={align}
+        >
+            {children}
+        </AdminUiGrid.Column>
+    );
 };
 
 export type GridInnerProps = {
@@ -40,15 +65,38 @@ export type GridInnerProps = {
     className?: string;
 };
 
-export const GridInner = (props: GridInnerProps) => {
-    return <RmwcGridInner {...props}>{props.children}</RmwcGridInner>;
+export const GridInner = ({ className, ...props }: GridInnerProps) => {
+    return (
+        <div
+            {...props}
+            className={cn(
+                "wby-grid wby-grid-cols-12 wby-gap-6 wby-m-0 wby-flex wby-flex-wrap wby-items-stretch",
+                className
+            )}
+        >
+            {props.children}
+        </div>
+    );
 };
 
 GridInner.displayName = "GridInner";
 
+export type GridProps = RmwcGridProps & {
+    className?: string;
+    style?: CSSProperties;
+};
+
 /**
  * Use Grid component to display a list of choices, once the handler is triggered.
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please use the `Grid` component from the `@webiny/admin-ui` package instead.
  */
 export const Grid = (props: GridProps) => {
-    return <RmwcGrid {...props}>{props.children}</RmwcGrid>;
+    const { children, style, className } = props;
+
+    return (
+        <AdminUiGrid className={className} style={style}>
+            {children as React.ReactElement<AdminUiColumnProps, typeof AdminUiGrid.Column>}
+        </AdminUiGrid>
+    );
 };
diff --git a/packages/ui/src/Grid/README.md b/packages/ui/src/Grid/README.md
deleted file mode 100644
index a9b489c61e3..00000000000
--- a/packages/ui/src/Grid/README.md
+++ /dev/null
@@ -1,15 +0,0 @@
-# Grid
-
-### Design
-
-<a href="https://material.io/design/layout/responsive-layout-grid.html#columns-gutters-margins" target="_blank">https://material.io/design/layout/responsive-layout-grid.html#columns-gutters-margins</a>
-
-### Description
-
-Use `Grid` and `Cell` components to display content and UI in an organized and responsive way.
-
-### Import
-
-```js
-import `{ Grid, Cell }` from "@webiny/ui/Grid";
-```
diff --git a/packages/ui/src/Helpers/ClassNames.ts b/packages/ui/src/Helpers/ClassNames.ts
index 2dbdb3e9f70..786f1e90daa 100644
--- a/packages/ui/src/Helpers/ClassNames.ts
+++ b/packages/ui/src/Helpers/ClassNames.ts
@@ -1,25 +1,24 @@
-import classnames from "classnames";
-import clone from "lodash/clone";
-
 /**
  * This is a pass-through that modifies your object's props and creates the required className prop by merging
  * the provided appendClasses(string) and any class names defined inside your props.
  * To you the function just do: {...getClasses (props)}
  * and make sure you are not spreading the `props` element, as this will clone and spread your current `props` element already.
- */
-/**
- * TODO @ts-refactor figure out propList type
+ *
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please implement your own `getClasses` function or reach out on Slack.
  */
 const getClasses = (propList: any, appendClasses: string[] | string) => {
     let classes = "";
-    const props = clone(propList);
-    if (propList.hasOwnProperty("className")) {
-        classes = classnames(propList.className);
+    const props = { ...propList };
+    if (propList.className) {
+        classes = propList.className;
         delete props.className;
     }
 
-    if (typeof appendClasses !== "undefined") {
-        classes = classnames(classes, appendClasses);
+    if (appendClasses) {
+        classes = `${classes} ${
+            Array.isArray(appendClasses) ? appendClasses.join(" ") : appendClasses
+        }`.trim();
     }
 
     props.className = classes;
diff --git a/packages/ui/src/Icon/Icon.tsx b/packages/ui/src/Icon/Icon.tsx
index 0f3f82a135a..96ea9ef8c42 100644
--- a/packages/ui/src/Icon/Icon.tsx
+++ b/packages/ui/src/Icon/Icon.tsx
@@ -1,6 +1,5 @@
 import React from "react";
-import { css } from "emotion";
-import classNames from "classnames";
+import { Icon as AdminUiIcon } from "@webiny/admin-ui/Icon";
 
 export type IconProps = {
     /**
@@ -20,28 +19,19 @@ export type IconProps = {
 
     // For testing purposes.
     "data-testid"?: string;
-};
 
-const webinyIcon = css(
-    {},
-    {
-        "&.mdc-button__icon": {
-            marginLeft: 0,
-            width: "inherit",
-            display: "block"
-        }
-    }
-);
+    /**
+     * Aria label
+     */
+    label?: string;
+};
 
 /**
- * Use Icon component to display an icon.
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please use the `Icon` component from the `@webiny/admin-ui` package instead.
  */
 const Icon = (props: IconProps) => {
-    return React.cloneElement(props.icon, {
-        "data-testid": props["data-testid"],
-        className: classNames("mdc-button__icon webiny-ui-icon", webinyIcon, props.className),
-        onClick: props.onClick
-    });
+    return <AdminUiIcon {...props} label={props.label || ""} />;
 };
 
 export { Icon };
diff --git a/packages/ui/src/Icon/README.md b/packages/ui/src/Icon/README.md
deleted file mode 100644
index 18434e84af1..00000000000
--- a/packages/ui/src/Icon/README.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# Icon
-
-### Description
-
-Use `Icon` component to display an icon.
-
-### Import
-
-```js
-import { Icon } from "@webiny/ui/Icon";
-```
diff --git a/packages/ui/src/Icon/svg/baseline-autorenew-24px.svg b/packages/ui/src/Icon/svg/baseline-autorenew-24px.svg
deleted file mode 100644
index f79fa263d10..00000000000
--- a/packages/ui/src/Icon/svg/baseline-autorenew-24px.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-    <path d="M12 6v3l4-4-4-4v3c-4.42 0-8 3.58-8 8 0 1.57.46 3.03 1.24 4.26L6.7 14.8c-.45-.83-.7-1.79-.7-2.8 0-3.31 2.69-6 6-6zm6.76 1.74L17.3 9.2c.44.84.7 1.79.7 2.8 0 3.31-2.69 6-6 6v-3l-4 4 4 4v-3c4.42 0 8-3.58 8-8 0-1.57-.46-3.03-1.24-4.26z"/>
-    <path d="M0 0h24v24H0z" fill="none"/>
-</svg>
diff --git a/packages/ui/src/Icon/svg/baseline-cloud_done-24px.svg b/packages/ui/src/Icon/svg/baseline-cloud_done-24px.svg
deleted file mode 100644
index ef9bea0eed4..00000000000
--- a/packages/ui/src/Icon/svg/baseline-cloud_done-24px.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-    <path d="M0 0h24v24H0z" fill="none"/>
-    <path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM10 17l-3.5-3.5 1.41-1.41L10 14.17 15.18 9l1.41 1.41L10 17z"/>
-</svg>
diff --git a/packages/ui/src/Icon/svg/baseline-delete-24px.svg b/packages/ui/src/Icon/svg/baseline-delete-24px.svg
deleted file mode 100644
index 9308f4df566..00000000000
--- a/packages/ui/src/Icon/svg/baseline-delete-24px.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-    <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/>
-    <path d="M0 0h24v24H0z" fill="none"/>
-</svg>
diff --git a/packages/ui/src/Icon/svg/baseline-done-24px.svg b/packages/ui/src/Icon/svg/baseline-done-24px.svg
deleted file mode 100644
index 8541f456ba6..00000000000
--- a/packages/ui/src/Icon/svg/baseline-done-24px.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-    <path fill="none" d="M0 0h24v24H0z"/>
-    <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/>
-</svg>
diff --git a/packages/ui/src/Image/README.md b/packages/ui/src/Image/README.md
deleted file mode 100644
index 3f94f40b2bd..00000000000
--- a/packages/ui/src/Image/README.md
+++ /dev/null
@@ -1,12 +0,0 @@
-# Image
-
-### Description
-
-Use `Image` component instead of plain `<img>` element to display images more efficiently. Internally it uses
-`react-image` component.
-
-### Import
-
-```js
-import { Image } from "@webiny/ui/Image";
-```
diff --git a/packages/ui/src/Image/index.ts b/packages/ui/src/Image/index.ts
index 321f81e82aa..a4fa9b4ac2e 100644
--- a/packages/ui/src/Image/index.ts
+++ b/packages/ui/src/Image/index.ts
@@ -1 +1,7 @@
-export * from "./Image";
+import { Image } from "@webiny/admin-ui";
+
+/**
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please use the `Image` component from the `@webiny/admin-ui` package instead.
+ */
+export { Image };
diff --git a/packages/ui/src/ImageEditor/ImageEditor.tsx b/packages/ui/src/ImageEditor/ImageEditor.tsx
index 28fb7986b9d..e8cd433cd68 100644
--- a/packages/ui/src/ImageEditor/ImageEditor.tsx
+++ b/packages/ui/src/ImageEditor/ImageEditor.tsx
@@ -1,68 +1,10 @@
 import React from "react";
-import { flip, filter, crop, rotate } from "./toolbar";
-import { ImageEditorTool, ToolbarTool } from "./toolbar/types";
-import styled from "@emotion/styled";
-import classNames from "classnames";
-import { ButtonSecondary, ButtonPrimary } from "../Button";
-/**
- * Package load-script does not have types.
- */
-// @ts-expect-error
-import loadScript from "load-script";
-
-const toolbar = {
-    flip,
-    filter,
-    crop,
-    rotate
-};
-
-const Toolbar = styled("div")({
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "center",
-    backgroundColor: "var(--mdc-theme-secondary)",
-    margin: "-24px -24px 0px -24px",
-    padding: 2,
-    position: "absolute",
-    width: "100%",
-    boxSizing: "border-box",
-    zIndex: 10,
-    "> div.disabled": {
-        opacity: 0.5,
-        pointerEvents: "none"
-    }
-});
-
-const ToolOptions = styled("div")({
-    margin: "50px -24px 10px -24px",
-    boxSizing: "border-box",
-    padding: 10,
-    backgroundColor: "var(--mdc-theme-background)",
-    borderTop: "1px solid var(--mdc-theme-on-background)"
-});
-
-const ApplyCancelActions = styled("div")({
-    textAlign: "center"
-});
-
-const initScripts = (): Promise<string> => {
-    return new Promise((resolve: any) => {
-        // @ts-expect-error
-        if (window.Caman) {
-            return resolve();
-        }
-        return loadScript(
-            "https://cdnjs.cloudflare.com/ajax/libs/camanjs/4.1.2/caman.full.min.js",
-            resolve
-        );
-    });
-};
+import { Alert } from "@webiny/admin-ui";
 
 interface RenderPropArgs {
     render: () => React.ReactNode;
     getCanvasDataUrl: () => string;
-    activeTool: ImageEditorTool | null;
+    activeTool: any;
     applyActiveTool: () => Promise<void>;
     cancelActiveTool: () => Promise<void>;
 }
@@ -73,7 +15,7 @@ interface ImageEditorPropsPropsOptions {
 
 interface ImageEditorProps {
     src: string;
-    tools: ToolbarTool[];
+    tools: any[];
     options?: {
         flip: ImageEditorPropsPropsOptions;
         filter: ImageEditorPropsPropsOptions;
@@ -85,216 +27,16 @@ interface ImageEditorProps {
     children?: (props: RenderPropArgs) => React.ReactNode;
 }
 
-interface ImageEditorState {
-    tool: ImageEditorTool | null;
-    src: string;
-}
-
-class ImageEditor extends React.Component<ImageEditorProps, ImageEditorState> {
-    static defaultProps: Partial<ImageEditorProps> = {
-        tools: ["crop", "flip", "rotate", "filter"]
-    };
-
-    public override state: ImageEditorState = {
-        tool: null,
-        src: ""
-    };
-
-    public canvas = React.createRef<HTMLCanvasElement>();
-    public image?: HTMLImageElement;
-
-    public override componentDidMount() {
-        initScripts().then(() => {
-            this.updateCanvas();
-            setTimeout(() => {
-                const { options } = this.props;
-                if (!options || typeof options !== "object") {
-                    return;
-                }
-                for (const key in options) {
-                    const option = options[key as ToolbarTool];
-                    if (option.autoEnable === true) {
-                        const tool: ImageEditorTool | null = toolbar[key as ToolbarTool];
-                        tool && this.activateTool(tool);
-                        break;
-                    }
-                }
-            }, 250);
-        });
-    }
-
-    private readonly updateCanvas = (): void => {
-        const { src } = this.props;
-        this.image = new window.Image();
-        const canvas = this.canvas.current;
-        if (canvas) {
-            this.image.onload = () => {
-                if (this.image) {
-                    canvas.width = this.image.width;
-                    canvas.height = this.image.height;
-                    const ctx = canvas.getContext("2d") as CanvasRenderingContext2D;
-                    ctx.drawImage(this.image, 0, 0);
-                }
-            };
-
-            this.image.src = src;
-        }
-    };
-
-    private readonly activateTool = (tool: ToolbarTool | ImageEditorTool): void => {
-        if (typeof tool === "string") {
-            tool = toolbar[tool];
-        }
-
-        this.setState({ tool }, () => {
-            const tt = tool as ImageEditorTool;
-            typeof tt.onActivate === "function" &&
-                tt.onActivate({ canvas: this.canvas, options: this.getToolOptions(tt) });
-        });
-    };
-
-    private readonly deactivateTool = (): void => {
-        this.setState({
-            tool: null
-        });
-    };
-
-    public readonly getCanvasDataUrl = (): string => {
-        const canvas = this.canvas.current as HTMLCanvasElement;
-        if (canvas) {
-            const { src } = this.props;
-            if (src.startsWith("data:image/jpeg;")) {
-                return canvas.toDataURL("image/jpeg", 1.0);
+/**
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please check the `ImageEditor` component inside the `@webiny/app-file-manager` package instead.
+ */
+export const ImageEditor = ({}: ImageEditorProps) => {
+    return (
+        <Alert type="danger" variant={"strong"}>
+            {
+                "Deprecated component! The original code has been moved to `@webiny/app-file-manager` package."
             }
-
-            return canvas.toDataURL();
-        }
-
-        return "";
-    };
-
-    private readonly applyActiveTool = async (): Promise<void> => {
-        const { tool } = this.state;
-        if (!tool) {
-            return;
-        }
-
-        if (tool.apply) {
-            await tool.apply({
-                canvas: this.canvas
-            });
-        }
-        this.deactivateTool();
-    };
-
-    private readonly cancelActiveTool = async (): Promise<void> => {
-        const { tool } = this.state;
-        if (!tool) {
-            return;
-        }
-
-        if (tool.cancel) {
-            await tool.cancel({
-                canvas: this.canvas
-            });
-        }
-        this.deactivateTool();
-    };
-
-    private readonly getToolOptions = (
-        tool: ImageEditorTool
-    ): Partial<ImageEditorPropsPropsOptions> => {
-        const { options } = this.props;
-        if (!options || typeof options !== "object") {
-            return {};
-        }
-
-        return options[tool.name as ToolbarTool] || {};
-    };
-
-    public override render(): React.ReactNode {
-        const { src, tools, children } = this.props;
-        const { tool } = this.state;
-        const editor = (
-            <React.Fragment>
-                <Toolbar>
-                    {tools.map(key => {
-                        const tool: ImageEditorTool = toolbar[key];
-                        if (!tool) {
-                            return null;
-                        }
-
-                        return (
-                            <div key={key} className={classNames({ disabled: this.state.tool })}>
-                                {tool.icon({
-                                    activateTool: () => this.activateTool(tool)
-                                })}
-                            </div>
-                        );
-                    })}
-                </Toolbar>
-
-                <ToolOptions>
-                    {tool ? (
-                        <>
-                            {typeof tool.renderForm === "function" &&
-                                tool.renderForm({
-                                    options: this.getToolOptions(tool as ImageEditorTool),
-                                    image: this.image as HTMLImageElement,
-                                    canvas: this.canvas
-                                })}
-
-                            <ApplyCancelActions>
-                                <ButtonSecondary
-                                    data-testid="button-cancel"
-                                    onClick={() => {
-                                        this.cancelActiveTool();
-                                    }}
-                                >
-                                    Cancel
-                                </ButtonSecondary>
-                                &nbsp;
-                                <ButtonPrimary
-                                    data-testid="button-apply"
-                                    onClick={() => {
-                                        this.applyActiveTool();
-                                    }}
-                                >
-                                    Apply
-                                </ButtonPrimary>
-                            </ApplyCancelActions>
-                        </>
-                    ) : (
-                        <div style={{ textAlign: "center" }}>
-                            Select a tool to start working on your image.
-                        </div>
-                    )}
-                </ToolOptions>
-
-                <div style={{ margin: "0 auto", textAlign: "center" }}>
-                    <canvas
-                        key={src}
-                        id={"canvas"}
-                        style={{ maxWidth: 700 }}
-                        ref={this.canvas as React.Ref<any>}
-                    />
-                </div>
-            </React.Fragment>
-        );
-
-        if (typeof children === "function") {
-            return children({
-                render: () => editor,
-                // canvas: this.canvas,
-                getCanvasDataUrl: this.getCanvasDataUrl,
-                activeTool: this.state.tool,
-                applyActiveTool: this.applyActiveTool,
-                cancelActiveTool: this.cancelActiveTool
-            });
-        }
-
-        return editor;
-    }
-}
-
-export { ImageEditor };
+        </Alert>
+    );
+};
diff --git a/packages/ui/src/ImageEditor/toolbar/flip.tsx b/packages/ui/src/ImageEditor/toolbar/flip.tsx
deleted file mode 100644
index 38f8307d7e7..00000000000
--- a/packages/ui/src/ImageEditor/toolbar/flip.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-import React from "react";
-import { ImageEditorTool } from "./types";
-import { ReactComponent as FlipIcon } from "./icons/flip.svg";
-import Cropper from "cropperjs";
-import "cropperjs/dist/cropper.css";
-
-import { IconButton, ButtonDefault } from "../../Button";
-import { Tooltip } from "~/Tooltip";
-
-let cropper: Cropper;
-
-const flipped = { x: 1, y: 1 };
-
-const renderForm = () => {
-    return (
-        <div style={{ textAlign: "center" }}>
-            <ButtonDefault
-                onClick={() => {
-                    if (!cropper) {
-                        return;
-                    }
-
-                    flipped.x = flipped.x === 1 ? -1 : 1;
-                    cropper.scaleX(flipped.x);
-                }}
-            >
-                FlipX
-            </ButtonDefault>
-            <ButtonDefault
-                onClick={() => {
-                    if (!cropper) {
-                        return;
-                    }
-
-                    flipped.y = flipped.y === 1 ? -1 : 1;
-                    cropper.scaleY(flipped.y);
-                }}
-            >
-                FlipY
-            </ButtonDefault>
-        </div>
-    );
-};
-
-const tool: ImageEditorTool = {
-    name: "flip",
-    icon({ activateTool }) {
-        return (
-            <Tooltip placement={"bottom"} content={"Flip"}>
-                <IconButton
-                    icon={<FlipIcon />}
-                    onClick={() => activateTool("flip")}
-                    data-testid={"flip-item"}
-                />
-            </Tooltip>
-        );
-    },
-    renderForm,
-    cancel: () => cropper && cropper.destroy(),
-    onActivate: ({ canvas }) => {
-        cropper = new Cropper(canvas.current as HTMLCanvasElement, {
-            background: false,
-            modal: false,
-            guides: false,
-            dragMode: "none",
-            highlight: false,
-            autoCrop: false
-        });
-    },
-    apply: ({ canvas }) => {
-        return new Promise((resolve: any) => {
-            if (!cropper) {
-                resolve();
-                return;
-            }
-
-            const current = canvas.current;
-            const src = cropper.getCroppedCanvas().toDataURL();
-            if (current) {
-                const image = new window.Image();
-                const ctx = current.getContext("2d") as CanvasRenderingContext2D;
-                image.onload = () => {
-                    ctx.drawImage(image, 0, 0);
-                    current.width = image.width;
-                    current.height = image.height;
-
-                    ctx.drawImage(image, 0, 0);
-                    resolve();
-                };
-                image.src = src;
-            }
-
-            cropper.destroy();
-        });
-    }
-};
-
-export default tool;
diff --git a/packages/ui/src/ImageEditor/toolbar/icons/crop.svg b/packages/ui/src/ImageEditor/toolbar/icons/crop.svg
deleted file mode 100644
index 6354f939cf0..00000000000
--- a/packages/ui/src/ImageEditor/toolbar/icons/crop.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" viewBox="0 0 24 24">
-    <path d="M0 0h24v24H0z" fill="none"/>
-    <path fill="currentColor" d="M17 15h2V7c0-1.1-.9-2-2-2H9v2h8v8zM7 17V1H5v4H1v2h4v10c0 1.1.9 2 2 2h10v4h2v-4h4v-2H7z"/>
-</svg>
\ No newline at end of file
diff --git a/packages/ui/src/ImageEditor/toolbar/icons/draw.svg b/packages/ui/src/ImageEditor/toolbar/icons/draw.svg
deleted file mode 100644
index 1360e7bf4bf..00000000000
--- a/packages/ui/src/ImageEditor/toolbar/icons/draw.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" viewBox="0 0 24 24">
-    <path fill="currentColor" d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/>
-    <path d="M0 0h24v24H0z" fill="none"/>
-</svg>
\ No newline at end of file
diff --git a/packages/ui/src/ImageEditor/toolbar/icons/filter.svg b/packages/ui/src/ImageEditor/toolbar/icons/filter.svg
deleted file mode 100644
index 67efbafc5f4..00000000000
--- a/packages/ui/src/ImageEditor/toolbar/icons/filter.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" viewBox="0 0 24 24">
-    <path d="M0 0h24v24H0z" fill="none"/>
-    <path fill="currentColor" d="M3 17v2h6v-2H3zM3 5v2h10V5H3zm10 16v-2h8v-2h-8v-2h-2v6h2zM7 9v2H3v2h4v2h2V9H7zm14 4v-2H11v2h10zm-6-4h2V7h4V5h-4V3h-2v6z"/>
-</svg>
\ No newline at end of file
diff --git a/packages/ui/src/ImageEditor/toolbar/icons/flip.svg b/packages/ui/src/ImageEditor/toolbar/icons/flip.svg
deleted file mode 100644
index c077a6342ff..00000000000
--- a/packages/ui/src/ImageEditor/toolbar/icons/flip.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" viewBox="0 0 24 24">
-    <path d="M0 0h24v24H0z" fill="none"/>
-    <path fill="currentColor" d="M15 21h2v-2h-2v2zm4-12h2V7h-2v2zM3 5v14c0 1.1.9 2 2 2h4v-2H5V5h4V3H5c-1.1 0-2 .9-2 2zm16-2v2h2c0-1.1-.9-2-2-2zm-8 20h2V1h-2v22zm8-6h2v-2h-2v2zM15 5h2V3h-2v2zm4 8h2v-2h-2v2zm0 8c1.1 0 2-.9 2-2h-2v2z"/>
-</svg>
\ No newline at end of file
diff --git a/packages/ui/src/ImageEditor/toolbar/icons/index.ts b/packages/ui/src/ImageEditor/toolbar/icons/index.ts
deleted file mode 100644
index f6f5bf04cfc..00000000000
--- a/packages/ui/src/ImageEditor/toolbar/icons/index.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-export { ReactComponent as CropIcon } from "./crop.svg";
-export { ReactComponent as DrawIcon } from "./draw.svg";
-export { ReactComponent as FilterIcon } from "./filter.svg";
-export { ReactComponent as FlipIcon } from "./flip.svg";
-export { ReactComponent as RedoIcon } from "./redo.svg";
-export { ReactComponent as RotateLeftIcon } from "./rotateLeft.svg";
-export { ReactComponent as RotateRightIcon } from "./rotateRight.svg";
-export { ReactComponent as UndoIcon } from "./undo.svg";
diff --git a/packages/ui/src/ImageEditor/toolbar/icons/redo.svg b/packages/ui/src/ImageEditor/toolbar/icons/redo.svg
deleted file mode 100644
index d13533f9bb5..00000000000
--- a/packages/ui/src/ImageEditor/toolbar/icons/redo.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" viewBox="0 0 24 24">
-    <path d="M0 0h24v24H0z" fill="none"/>
-    <path fill="currentColor" d="M18.4 10.6C16.55 8.99 14.15 8 11.5 8c-4.65 0-8.58 3.03-9.96 7.22L3.9 16c1.05-3.19 4.05-5.5 7.6-5.5 1.95 0 3.73.72 5.12 1.88L13 16h9V7l-3.6 3.6z"/>
-</svg>
\ No newline at end of file
diff --git a/packages/ui/src/ImageEditor/toolbar/icons/rotateLeft.svg b/packages/ui/src/ImageEditor/toolbar/icons/rotateLeft.svg
deleted file mode 100644
index 5d22f1f36f1..00000000000
--- a/packages/ui/src/ImageEditor/toolbar/icons/rotateLeft.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" viewBox="0 0 24 24">
-    <path d="M0 0h24v24H0z" fill="none"/>
-    <path fill="currentColor" d="M7.11 8.53L5.7 7.11C4.8 8.27 4.24 9.61 4.07 11h2.02c.14-.87.49-1.72 1.02-2.47zM6.09 13H4.07c.17 1.39.72 2.73 1.62 3.89l1.41-1.42c-.52-.75-.87-1.59-1.01-2.47zm1.01 5.32c1.16.9 2.51 1.44 3.9 1.61V17.9c-.87-.15-1.71-.49-2.46-1.03L7.1 18.32zM13 4.07V1L8.45 5.55 13 10V6.09c2.84.48 5 2.94 5 5.91s-2.16 5.43-5 5.91v2.02c3.95-.49 7-3.85 7-7.93s-3.05-7.44-7-7.93z"/>
-</svg>
\ No newline at end of file
diff --git a/packages/ui/src/ImageEditor/toolbar/icons/rotateRight.svg b/packages/ui/src/ImageEditor/toolbar/icons/rotateRight.svg
deleted file mode 100644
index 5afdee63a87..00000000000
--- a/packages/ui/src/ImageEditor/toolbar/icons/rotateRight.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" viewBox="0 0 24 24">
-    <path d="M0 0h24v24H0z" fill="none"/>
-    <path fill="currentColor" d="M15.55 5.55L11 1v3.07C7.06 4.56 4 7.92 4 12s3.05 7.44 7 7.93v-2.02c-2.84-.48-5-2.94-5-5.91s2.16-5.43 5-5.91V10l4.55-4.45zM19.93 11c-.17-1.39-.72-2.73-1.62-3.89l-1.42 1.42c.54.75.88 1.6 1.02 2.47h2.02zM13 17.9v2.02c1.39-.17 2.74-.71 3.9-1.61l-1.44-1.44c-.75.54-1.59.89-2.46 1.03zm3.89-2.42l1.42 1.41c.9-1.16 1.45-2.5 1.62-3.89h-2.02c-.14.87-.48 1.72-1.02 2.48z"/>
-</svg>
\ No newline at end of file
diff --git a/packages/ui/src/ImageEditor/toolbar/icons/undo.svg b/packages/ui/src/ImageEditor/toolbar/icons/undo.svg
deleted file mode 100644
index 35860c47293..00000000000
--- a/packages/ui/src/ImageEditor/toolbar/icons/undo.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" viewBox="0 0 24 24">
-    <path d="M0 0h24v24H0z" fill="none"/>
-    <path fill="currentColor" d="M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z"/>
-</svg>
\ No newline at end of file
diff --git a/packages/ui/src/ImageEditor/toolbar/rotate.tsx b/packages/ui/src/ImageEditor/toolbar/rotate.tsx
deleted file mode 100644
index 1ab7451212b..00000000000
--- a/packages/ui/src/ImageEditor/toolbar/rotate.tsx
+++ /dev/null
@@ -1,100 +0,0 @@
-import React from "react";
-import { ReactComponent as RotateRight } from "./icons/rotateRight.svg";
-import { ImageEditorTool } from "./types";
-import { Slider } from "../../Slider";
-import { Tooltip } from "~/Tooltip";
-import { IconButton } from "~/Button";
-
-import Cropper from "cropperjs";
-import "cropperjs/dist/cropper.css";
-
-let cropper: Cropper;
-
-class RenderForm extends React.Component<any, any> {
-    public override state = {
-        rangeInput: 0
-    };
-
-    public override render() {
-        return (
-            <div style={{ width: "500px", margin: "0 auto" }}>
-                <Slider
-                    label={"Range Input"}
-                    value={this.state.rangeInput}
-                    min={0}
-                    max={360}
-                    step={10}
-                    discrete={true}
-                    displayMarkers={true}
-                    onInput={(value: string) => {
-                        this.setState({ rangeInput: value }, async () => {
-                            if (cropper) {
-                                cropper.rotateTo(parseInt(value, 10));
-                            }
-                        });
-                    }}
-                />
-            </div>
-        );
-    }
-}
-
-const tool: ImageEditorTool = {
-    name: "rotate",
-    icon({ activateTool }) {
-        return (
-            <Tooltip placement={"bottom"} content={"Rotate"}>
-                <IconButton
-                    icon={<RotateRight />}
-                    onClick={() => activateTool("rotate")}
-                    data-testid={"rotate-item"}
-                />
-            </Tooltip>
-        );
-    },
-    renderForm(props) {
-        return <RenderForm {...props} />;
-    },
-    onActivate: ({ canvas }) => {
-        /**
-         * We can safely cast canvas.current as HTMLCanvasElement
-         */
-        cropper = new Cropper(canvas.current as HTMLCanvasElement, {
-            background: false,
-            modal: false,
-            guides: false,
-            dragMode: "none",
-            highlight: false,
-            autoCrop: false
-        });
-    },
-    cancel: () => cropper && cropper.destroy(),
-    apply: ({ canvas }) => {
-        return new Promise((resolve: any) => {
-            if (!cropper) {
-                resolve();
-                return;
-            }
-
-            const current = canvas.current;
-            const src = cropper.getCroppedCanvas().toDataURL();
-            if (current) {
-                const image = new window.Image();
-                const ctx = current.getContext("2d") as CanvasRenderingContext2D;
-                image.onload = () => {
-                    ctx.drawImage(image, 0, 0);
-                    current.width = image.width;
-                    current.height = image.height;
-
-                    ctx.drawImage(image, 0, 0);
-                };
-                image.src = src;
-                resolve();
-            }
-
-            cropper.destroy();
-        });
-    }
-};
-
-export default tool;
diff --git a/packages/ui/src/ImageUpload/Image.tsx b/packages/ui/src/ImageUpload/Image.tsx
index fbab065c35e..f15b0f6a1d7 100644
--- a/packages/ui/src/ImageUpload/Image.tsx
+++ b/packages/ui/src/ImageUpload/Image.tsx
@@ -1,125 +1,30 @@
 import React from "react";
-import classNames from "classnames";
-import { ReactComponent as AddImageIcon } from "./icons/round-add_photo_alternate-24px.svg";
-import { ReactComponent as RemoveImageIcon } from "./icons/round-close-24px.svg";
-import { ReactComponent as EditImageIcon } from "./icons/round-edit-24px.svg";
-import { Typography } from "../Typography";
-import { CircularProgress } from "../Progress";
-import {
-    AddImageIconWrapper,
-    AddImageWrapper,
-    AddImageWrapperRound,
-    EditImage,
-    ImagePreviewWrapper,
-    RemoveImage
-} from "./styled";
-import { BrowseFilesParams } from "react-butterfiles";
+import { Alert } from "@webiny/admin-ui";
 
 interface ImageProps {
     uploadImage: () => void;
     removeImage?: (value: string | null) => void;
-    editImage?: (value: BrowseFilesParams | undefined) => void;
+    editImage?: (value: any | undefined) => void;
     value?: any;
     disabled?: boolean;
     loading?: boolean;
-    placeholder: string;
+    placeholder?: string;
     style?: React.CSSProperties;
     renderImagePreview?: (props: any) => React.ReactElement<any>;
     round?: boolean;
     containerStyle?: React.CSSProperties;
 }
 
-class Image extends React.Component<ImageProps> {
-    static defaultProps = {
-        placeholder: "Select an image",
-        containerStyle: { height: "100%" }
-    };
-
-    renderBlank() {
-        const { uploadImage, round } = this.props;
-
-        const ImageWrapper = round ? AddImageWrapperRound : AddImageWrapper;
-
-        return (
-            <ImageWrapper
-                data-role={"select-image"}
-                onClick={() => {
-                    uploadImage();
-                }}
-            >
-                <AddImageIconWrapper>
-                    <AddImageIcon />
-                    <Typography use={"caption"}>{this.props.placeholder}</Typography>
-                </AddImageIconWrapper>
-            </ImageWrapper>
-        );
-    }
-
-    renderImg() {
-        const { removeImage, editImage, uploadImage, value, renderImagePreview } = this.props;
-
-        const imagePreviewProps: any = {
-            src: value ? value.src : null,
-            style: this.props.style ? this.props.style : null,
-            onClick: () => uploadImage()
-        };
-
-        if (!imagePreviewProps.style) {
-            imagePreviewProps.style = {};
-        }
-
-        if (!imagePreviewProps.style.width && !imagePreviewProps.style.height) {
-            imagePreviewProps.style.width = "100%";
-            imagePreviewProps.style.height = "100%";
-        }
-
-        let imagePreview = null;
-        if (typeof renderImagePreview === "function") {
-            imagePreview = renderImagePreview(imagePreviewProps);
-        } else {
-            imagePreview = <img {...imagePreviewProps} />;
-        }
-
-        return (
-            <ImagePreviewWrapper data-testid={"image-preview"}>
-                {imagePreview}
-
-                {typeof removeImage === "function" && (
-                    <RemoveImage onClick={() => removeImage(null)} data-testid={"remove-image"}>
-                        <RemoveImageIcon />
-                    </RemoveImage>
-                )}
-
-                {typeof editImage === "function" && (
-                    <EditImage onClick={() => editImage(value)}>
-                        <EditImageIcon />
-                    </EditImage>
-                )}
-
-                <AddImageWrapper
-                    data-role={"select-image"}
-                    onClick={() => {
-                        uploadImage();
-                    }}
-                >
-                    <AddImageIconWrapper>
-                        <AddImageIcon />
-                        <Typography use={"caption"}>{this.props.placeholder}</Typography>
-                    </AddImageIconWrapper>
-                </AddImageWrapper>
-            </ImagePreviewWrapper>
-        );
-    }
-
-    public override render() {
-        const { value, disabled, containerStyle } = this.props;
-        return (
-            <div className={classNames({ disabled })} style={containerStyle}>
-                {this.props.loading && <CircularProgress />}
-                {value && value.src ? this.renderImg() : this.renderBlank()}
-            </div>
-        );
-    }
-}
-
-export default Image;
+/**
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please use the `FilePicker` component from the `@webiny/admin-ui` package instead.
+ */
+export const Image = ({}: ImageProps) => {
+    return (
+        <Alert type="danger" variant={"strong"}>
+            {
+                "Deprecated component! The original code has been moved to `@webiny/admin-ui` package."
+            }
+        </Alert>
+    );
+};
diff --git a/packages/ui/src/ImageUpload/ImageEditorDialog.tsx b/packages/ui/src/ImageUpload/ImageEditorDialog.tsx
index 29ec56ccf7d..298f0355624 100644
--- a/packages/ui/src/ImageUpload/ImageEditorDialog.tsx
+++ b/packages/ui/src/ImageUpload/ImageEditorDialog.tsx
@@ -1,9 +1,6 @@
-import React, { useState } from "react";
-import { ImageEditor } from "~/ImageEditor";
-import { Tooltip } from "~/Tooltip";
-import { css } from "emotion";
-import { Dialog, DialogCancel, DialogActions, DialogContent, DialogOnClose } from "../Dialog";
-import { ButtonPrimary } from "~/Button";
+import React from "react";
+import { DialogOnClose } from "../Dialog";
+import { Alert } from "@webiny/admin-ui";
 
 interface ImageEditorDialogProps {
     dialogZIndex?: number;
@@ -19,74 +16,16 @@ interface ImageEditorDialogProps {
     "data-testid"?: string;
 }
 
-const imageEditorDialog = css({
-    width: "100vw",
-    height: "100vh",
-    ".mdc-dialog__surface": {
-        maxWidth: "100% !important",
-        maxHeight: "100% !important",
-        ".webiny-ui-dialog__content": {
-            maxWidth: "100% !important",
-            maxHeight: "100% !important",
-            width: "100vw",
-            height: "100vh",
-            paddingTop: "0 !important"
-        }
-    }
-});
-
-export const ImageEditorDialog = (props: ImageEditorDialogProps) => {
-    const { src, options, onAccept, open, dialogZIndex, ...dialogProps } = props;
-    const imageEditor = React.createRef<ImageEditor>();
-    const [isSaving, setIsSaving] = useState(false);
-
-    const onSave = async () => {
-        try {
-            setIsSaving(true);
-            const url = imageEditor.current ? imageEditor.current.getCanvasDataUrl() : "";
-            await onAccept(url);
-        } catch (e) {
-            console.log(e);
-        } finally {
-            setIsSaving(false);
-        }
-    };
-
+/**
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please check the `ImageEditorDialog` component inside the `@webiny/app-file-manager` package instead.
+ */
+export const ImageEditorDialog = ({}: ImageEditorDialogProps) => {
     return (
-        <Dialog
-            className={imageEditorDialog}
-            style={{ zIndex: dialogZIndex }}
-            open={open}
-            {...dialogProps}
-        >
-            {open && (
-                <ImageEditor ref={imageEditor} src={src} options={options}>
-                    {({ render, activeTool }) => (
-                        <>
-                            <DialogContent>{render()}</DialogContent>
-                            <DialogActions>
-                                <DialogCancel>Cancel</DialogCancel>
-                                {activeTool ? (
-                                    <Tooltip
-                                        content={"Please close currently active tool."}
-                                        placement={"top"}
-                                    >
-                                        <ButtonPrimary disabled>Save</ButtonPrimary>
-                                    </Tooltip>
-                                ) : (
-                                    <ButtonPrimary
-                                        data-testid="dialog-accept"
-                                        onClick={onSave}
-                                        disabled={isSaving}
-                                    >
-                                        {isSaving ? "Saving..." : "Save"}
-                                    </ButtonPrimary>
-                                )}
-                            </DialogActions>
-                        </>
-                    )}
-                </ImageEditor>
-            )}
-        </Dialog>
+        <Alert type="danger" variant={"strong"}>
+            {
+                "Deprecated component! The original code has been moved to `@webiny/app-file-manager` package."
+            }
+        </Alert>
     );
 };
diff --git a/packages/ui/src/ImageUpload/MultiImageUpload.tsx b/packages/ui/src/ImageUpload/MultiImageUpload.tsx
index ee797dc5027..5d92136febb 100644
--- a/packages/ui/src/ImageUpload/MultiImageUpload.tsx
+++ b/packages/ui/src/ImageUpload/MultiImageUpload.tsx
@@ -1,36 +1,6 @@
 import React from "react";
-import BrowseFiles, { SelectedFile, FileError } from "react-butterfiles";
-import { css } from "emotion";
-import classNames from "classnames";
-import { FormElementMessage } from "../FormElementMessage";
-import Image from "./Image";
-import { ImageEditorDialog } from "./ImageEditorDialog";
 import { FormComponentProps } from "../types";
-
-const imagesStyle = css({
-    ".disabled": {
-        opacity: 0.75,
-        pointerEvents: "none"
-    },
-    "ul.images": {
-        listStyle: "none",
-        li: {
-            verticalAlign: "top",
-            margin: 2,
-            display: "inline-block",
-            width: 150,
-            height: 150,
-            "&:last-child": {
-                border: "1px solid lightgray",
-                cursor: "pointer",
-                textAlign: "center"
-            }
-        }
-    }
-});
-
-// Do not apply editping for following image types.
-// const noImageEditorTypes = ["image/svg+xml", "image/gif"];
+import { Alert } from "@webiny/admin-ui";
 
 interface MultiImageUploadProps extends FormComponentProps {
     // Component label.
@@ -69,281 +39,16 @@ interface MultiImageUploadProps extends FormComponentProps {
     cropper?: { [key: string]: any };
 }
 
-interface State {
-    errors?: FileError[];
-    selectedImages: Record<string, any>;
-    loading: boolean;
-    imageEditor: {
-        image: SelectedFile | null;
-        open: boolean;
-        index?: number;
-    };
-}
-
-class MultiImageUpload extends React.Component<MultiImageUploadProps, State> {
-    static defaultProps: Partial<MultiImageUploadProps> = {
-        accept: ["image/jpeg", "image/png", "image/gif", "image/svg+xml"],
-        maxSize: "5mb",
-        imageEditor: {},
-        errorMessages: {
-            maxSizeExceeded: "Max size exceeded.",
-            unsupportedFileType: "Unsupported file type.",
-            default: "An error occurred."
-        }
-    };
-
-    public override state: State = {
-        errors: undefined,
-        selectedImages: {},
-        loading: false,
-        imageEditor: {
-            open: false,
-            image: null,
-            index: undefined
-        }
-    };
-
-    onChange = async (value: any) => {
-        const { onChange, validate } = this.props;
-        onChange && (await onChange(value));
-        validate && (await validate());
-    };
-
-    handleSelectedImages = async (images: Array<SelectedFile>, selectedIndex = 0) => {
-        this.setState(
+/**
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please check the `MultiFilePicker` component inside the `@webiny/admin-ui` package instead.
+ */
+export const MultiImageUpload = ({}: MultiImageUploadProps) => {
+    return (
+        <Alert type="danger" variant={"strong"}>
             {
-                errors: undefined,
-                loading: true
-            },
-            async () => {
-                const selectedImages: Record<number, any> = {};
-                for (let i = 0; i < images.length; i++) {
-                    const image = images[i];
-                    selectedImages[selectedIndex + i] = { ...image };
-                }
-
-                this.setState({ selectedImages }, async () => {
-                    const newValue = Array.isArray(this.props.value) ? [...this.props.value] : [];
-
-                    const convertedImages = [];
-                    for (let i = 0; i < images.length; i++) {
-                        const image = images[i];
-                        convertedImages.push({
-                            src: image.src.base64,
-                            name: image.name,
-                            size: image.size,
-                            type: image.type
-                        });
-                    }
-
-                    newValue.splice(selectedIndex, 0, ...convertedImages);
-                    await this.onChange(newValue);
-                    this.setState({ loading: false });
-                });
+                "Deprecated component! The original code has been moved to `@webiny/admin-ui` package."
             }
-        );
-    };
-
-    handleErrors = (errors: Array<FileError>) => {
-        this.setState({ errors });
-    };
-
-    removeImage = (image: SelectedFile) => {
-        const { value, onChange } = this.props;
-        if (!onChange) {
-            return;
-        }
-
-        const images = Array.isArray(value) ? [...value] : [];
-        images.splice(images.indexOf(image), 1);
-        onChange(images);
-    };
-
-    public override render() {
-        const {
-            value,
-            validation,
-            label,
-            description,
-            disabled,
-            imageEditor,
-            accept,
-            maxSize,
-            className
-        } = this.props;
-        /**
-         * TODO: figure out the correct type
-         */
-        let imageEditorImageSrc = "";
-        if (this.state.imageEditor.image) {
-            // @ts-expect-error
-            imageEditorImageSrc = this.state.imageEditor.image.src;
-            console.warn("Figure out correct type if this.state.imageEditor.image.src");
-            console.log(this.state.imageEditor.image.src);
-        }
-
-        const { isValid: validationIsValid, message: validationMessage } = validation || {};
-        /**
-         * accept can safely be cast because we have default value
-         */
-        return (
-            <div className={classNames(imagesStyle, className)}>
-                {label && (
-                    <div className="mdc-floating-label mdc-floating-label--float-above">
-                        {label}
-                    </div>
-                )}
-
-                <ImageEditorDialog
-                    options={imageEditor}
-                    open={this.state.imageEditor.open}
-                    src={imageEditorImageSrc}
-                    onClose={() => {
-                        this.setState(state => {
-                            state.imageEditor.open = false;
-                            return state;
-                        });
-                    }}
-                    onAccept={src => {
-                        // We wrapped everything into setTimeout - prevents dialog freeze when larger image is selected.
-                        setTimeout(() => {
-                            this.setState({ loading: true }, async () => {
-                                const newValue = Array.isArray(this.props.value)
-                                    ? [...this.props.value]
-                                    : [];
-
-                                const imageEditorImageIndex = this.state.imageEditor
-                                    .index as number;
-                                newValue[imageEditorImageIndex].src = src;
-
-                                await this.onChange(newValue);
-                                this.setState({
-                                    loading: false,
-                                    imageEditor: {
-                                        image: null,
-                                        open: false,
-                                        index: undefined
-                                    }
-                                });
-                            });
-                        });
-                    }}
-                />
-
-                <BrowseFiles
-                    accept={accept as string[]}
-                    maxSize={maxSize}
-                    multiple
-                    convertToBase64
-                    onSuccess={files => {
-                        this.handleSelectedImages(files, Array.isArray(value) ? value.length : 0);
-                    }}
-                    onError={errors => this.handleErrors(errors)}
-                >
-                    {({ browseFiles, getDropZoneProps }) => {
-                        const images = Array.isArray(value) ? [...value] : [];
-
-                        return (
-                            <div {...getDropZoneProps({ className: classNames({ disabled }) })}>
-                                <ul className="images">
-                                    {images.map((image, index) => (
-                                        <li key={index}>
-                                            <Image
-                                                loading={
-                                                    this.state.selectedImages[index] &&
-                                                    this.state.loading
-                                                }
-                                                value={image.file || image}
-                                                removeImage={() =>
-                                                    this.removeImage(image.file || image)
-                                                }
-                                                editImage={
-                                                    this.state.selectedImages[index] &&
-                                                    (() => {
-                                                        this.setState({
-                                                            imageEditor: {
-                                                                index,
-                                                                open: true,
-                                                                image: this.state.selectedImages[
-                                                                    index
-                                                                ]
-                                                            }
-                                                        });
-                                                    })
-                                                }
-                                                uploadImage={() => {
-                                                    browseFiles({
-                                                        onSuccess: files => {
-                                                            this.handleSelectedImages(
-                                                                files,
-                                                                index + 1
-                                                            );
-                                                        },
-                                                        onError: errors => this.handleErrors(errors)
-                                                    });
-                                                }}
-                                            />
-                                        </li>
-                                    ))}
-                                    <li>
-                                        <Image
-                                            disabled={this.state.loading}
-                                            uploadImage={() => {
-                                                browseFiles({
-                                                    onSuccess: files => {
-                                                        this.handleSelectedImages(
-                                                            files,
-                                                            Array.isArray(value) ? value.length : 0
-                                                        );
-                                                    },
-                                                    onError: errors => this.handleErrors(errors)
-                                                });
-                                            }}
-                                        />
-                                    </li>
-                                </ul>
-                            </div>
-                        );
-                    }}
-                </BrowseFiles>
-
-                {validationIsValid === false && (
-                    <FormElementMessage error>{validationMessage}</FormElementMessage>
-                )}
-
-                {validationIsValid !== false && description && (
-                    <FormElementMessage>{description}</FormElementMessage>
-                )}
-
-                {Array.isArray(this.state.errors) && (
-                    <FormElementMessage error>
-                        Your selection of images failed because of the following images:
-                        <ul>
-                            {this.state.errors.map((error: FileError, index) => {
-                                /**
-                                 * We need to cast as existing keys in errorMessages, otherwise TS throws an error
-                                 */
-                                const errorType = error.type as
-                                    | "maxSizeExceeded"
-                                    | "unsupportedFileType"
-                                    | "default";
-                                const message = this.props.errorMessages[errorType];
-
-                                const errorFileName = error.file ? error.file.name : "";
-
-                                return (
-                                    <li key={errorFileName + index}>
-                                        {index + 1}. <strong>{errorFileName}</strong> -&nbsp;
-                                        {message || this.props.errorMessages.default}
-                                    </li>
-                                );
-                            })}
-                        </ul>
-                    </FormElementMessage>
-                )}
-            </div>
-        );
-    }
-}
-
-export { MultiImageUpload };
+        </Alert>
+    );
+};
diff --git a/packages/ui/src/ImageUpload/README.md b/packages/ui/src/ImageUpload/README.md
deleted file mode 100644
index d6ddd37461c..00000000000
--- a/packages/ui/src/ImageUpload/README.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# ImageUpload
-
-### Description
-
-`ImageUpload` component lets users select a image (eg. to be uploaded to a server), or multiple images.
-
-### Import
-
-```js
-import { SingleImageUpload, MultiImageUpload } from "@webiny/ui/ImageUpload";
-```
diff --git a/packages/ui/src/ImageUpload/SingleImageUpload.tsx b/packages/ui/src/ImageUpload/SingleImageUpload.tsx
index 6e71a758889..79cf9cd81c2 100644
--- a/packages/ui/src/ImageUpload/SingleImageUpload.tsx
+++ b/packages/ui/src/ImageUpload/SingleImageUpload.tsx
@@ -1,28 +1,6 @@
 import React from "react";
 import { FormComponentProps } from "~/types";
-import BrowseFiles, { SelectedFile, FileError } from "react-butterfiles";
-import { FormElementMessage } from "~/FormElementMessage";
-import styled from "@emotion/styled";
-import classNames from "classnames";
-import Image from "./Image";
-import { ImageEditorDialog } from "./ImageEditorDialog";
-
-const ImageUploadWrapper = styled("div")({
-    position: "relative",
-    ".disabled": {
-        opacity: 0.75,
-        pointerEvents: "none"
-    },
-    ".mdc-floating-label--float-above": {
-        transform: "scale(0.75)",
-        top: 10,
-        left: 10,
-        color: "var(--mdc-theme-text-secondary-on-background)"
-    },
-    ".mdc-text-field-helper-text": {
-        color: "var(--mdc-theme-text-secondary-on-background)"
-    }
-});
+import { Alert } from "@webiny/admin-ui";
 
 interface SingleImageUploadProps extends FormComponentProps {
     // Component label.
@@ -66,179 +44,16 @@ interface SingleImageUploadProps extends FormComponentProps {
     };
 }
 
-interface StateImage {
-    name: string;
-    type: string;
-    size: number;
-    src?: string;
-}
-interface State {
-    loading: boolean;
-    error: FileError | null;
-    imageEditor: {
-        image: StateImage | null;
-        open: boolean;
-    };
-}
-
-// Do not apply editing for following image types.
-const noImageEditingTypes = ["image/svg+xml", "image/gif"];
-
-type ErrorType =
-    | "maxSizeExceeded"
-    | "unsupportedFileType"
-    | "default"
-    | "multipleNotAllowed"
-    | "multipleMaxSizeExceeded";
-
-export class SingleImageUpload extends React.Component<SingleImageUploadProps, State> {
-    static defaultProps: Partial<SingleImageUploadProps> = {
-        maxSize: "10mb",
-        imageEditor: {},
-        accept: ["image/jpeg", "image/png", "image/gif", "image/svg+xml"],
-        showRemoveImageButton: true,
-        errorMessages: {
-            maxSizeExceeded: "Max size exceeded.",
-            multipleMaxSizeExceeded: "Selected fields exceed max file size.",
-            multipleNotAllowed: "Multiple selection not allowed.",
-            unsupportedFileType: "Unsupported file type.",
-            default: "An error occurred."
-        }
-    };
-
-    public override state: State = {
-        loading: false,
-        error: null,
-        imageEditor: {
-            open: false,
-            image: null
-        }
-    };
-
-    handleFiles = (images: SelectedFile[]) => {
-        const { onChange, imageEditor } = this.props;
-        const image = {
-            name: images[0].name,
-            type: images[0].type,
-            size: images[0].size,
-            src: images[0].src.base64
-        };
-
-        this.setState({ error: null }, () => {
-            if (imageEditor && !noImageEditingTypes.includes(image.type)) {
-                this.setState({ imageEditor: { image, open: true } });
-            } else {
-                onChange && onChange(image);
+/**
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please check the `FilePicker` component inside the `@webiny/admin-ui` package instead.
+ */
+export const SingleImageUpload = ({}: SingleImageUploadProps) => {
+    return (
+        <Alert type="danger" variant={"strong"}>
+            {
+                "Deprecated component! The original code has been moved to `@webiny/admin-ui` package."
             }
-        });
-    };
-
-    handleErrors = (errors: FileError[]) => {
-        const [error] = errors;
-        this.setState({ error });
-    };
-
-    public override render() {
-        const {
-            className,
-            value,
-            validation,
-            label,
-            description,
-            accept,
-            maxSize,
-            onChange,
-            imageEditor,
-            showRemoveImageButton,
-            renderImagePreview
-        } = this.props;
-
-        let imageEditorImageSrc = "";
-        if (this.state.imageEditor.image && this.state.imageEditor.image.src) {
-            imageEditorImageSrc = this.state.imageEditor.image.src;
-        }
-
-        const src = value ? value.src : null;
-
-        const errorType = this.state.error ? (this.state.error.type as ErrorType) : null;
-
-        const { isValid: validationIsValid, message: validationMessage } = validation || {};
-        /**
-         * accept can be safely cast because of default value
-         * errorType as keyof Props["errorMessages"] can be safely
-         */
-        return (
-            <ImageUploadWrapper className={classNames(className)}>
-                {label && !src && (
-                    <div className="mdc-floating-label mdc-floating-label--float-above">
-                        {label}
-                    </div>
-                )}
-
-                <ImageEditorDialog
-                    options={imageEditor}
-                    open={this.state.imageEditor.open}
-                    src={imageEditorImageSrc}
-                    onClose={() => {
-                        this.setState(state => {
-                            state.imageEditor.open = false;
-                            return state;
-                        });
-                    }}
-                    onAccept={src => {
-                        // We wrapped everything into setTimeout - prevents dialog freeze when larger image is selected.
-                        setTimeout(() => {
-                            this.setState({ loading: true }, async () => {
-                                onChange &&
-                                    (await onChange({ ...this.state.imageEditor.image, src }));
-                                this.setState({
-                                    loading: false,
-                                    imageEditor: {
-                                        image: null,
-                                        open: false
-                                    }
-                                });
-                            });
-                        });
-                    }}
-                />
-                <BrowseFiles
-                    accept={accept as string[]}
-                    maxSize={maxSize}
-                    convertToBase64
-                    onSuccess={this.handleFiles}
-                    onError={this.handleErrors}
-                >
-                    {({ browseFiles, getDropZoneProps }) => (
-                        <div {...getDropZoneProps()}>
-                            <Image
-                                renderImagePreview={renderImagePreview}
-                                loading={this.state.loading}
-                                value={value}
-                                removeImage={showRemoveImageButton ? onChange : undefined}
-                                uploadImage={browseFiles}
-                                editImage={browseFiles}
-                            />
-                        </div>
-                    )}
-                </BrowseFiles>
-
-                {validationIsValid === false && (
-                    <FormElementMessage error>{validationMessage}</FormElementMessage>
-                )}
-
-                {validationIsValid !== false && description && (
-                    <FormElementMessage>{description}</FormElementMessage>
-                )}
-
-                {this.state.error && (
-                    <FormElementMessage error>
-                        {this.props.errorMessages[
-                            errorType as keyof SingleImageUploadProps["errorMessages"]
-                        ] || this.props.errorMessages.default}
-                    </FormElementMessage>
-                )}
-            </ImageUploadWrapper>
-        );
-    }
-}
+        </Alert>
+    );
+};
diff --git a/packages/ui/src/ImageUpload/icons/round-add_photo_alternate-24px.svg b/packages/ui/src/ImageUpload/icons/round-add_photo_alternate-24px.svg
deleted file mode 100644
index d8a04c59301..00000000000
--- a/packages/ui/src/ImageUpload/icons/round-add_photo_alternate-24px.svg
+++ /dev/null
@@ -1,23 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
-<g id="Bounding_Boxes">
-	<g id="ui_x5F_spec_x5F_header_copy_3">
-	</g>
-	<path fill="none" d="M0,0h24v24H0V0z"/>
-</g>
-<g id="Rounded">
-	<g id="ui_x5F_spec_x5F_header_copy_7">
-	</g>
-	<g>
-		<path fill="currentColor" d="M21.02,5H19V2.98C19,2.44,18.56,2,18.02,2h-0.03C17.44,2,17,2.44,17,2.98V5h-2.01C14.45,5,14.01,5.44,14,5.98
-			c0,0.01,0,0.02,0,0.03C14,6.56,14.44,7,14.99,7H17v2.01c0,0.54,0.44,0.99,0.99,0.98c0.01,0,0.02,0,0.03,0
-			c0.54,0,0.98-0.44,0.98-0.98V7h2.02C21.56,7,22,6.56,22,6.02V5.98C22,5.44,21.56,5,21.02,5z"/>
-		<path fill="currentColor" d="M16,9.01V8h-1.01c-0.53,0-1.03-0.21-1.41-0.58C13.21,7.04,13,6.54,13,5.98c0-0.36,0.1-0.69,0.27-0.98H5C3.9,5,3,5.9,3,7
-			v12c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2v-8.28c-0.3,0.17-0.64,0.28-1.02,0.28C16.89,10.99,16,10.1,16,9.01z M15.96,19H6
-			c-0.41,0-0.65-0.47-0.4-0.8l1.98-2.63c0.21-0.28,0.62-0.26,0.82,0.02L10,18l2.61-3.48c0.2-0.26,0.59-0.27,0.79-0.01l2.95,3.68
-			C16.61,18.52,16.38,19,15.96,19z"/>
-	</g>
-</g>
-</svg>
diff --git a/packages/ui/src/ImageUpload/icons/round-close-24px.svg b/packages/ui/src/ImageUpload/icons/round-close-24px.svg
deleted file mode 100644
index ee49567f053..00000000000
--- a/packages/ui/src/ImageUpload/icons/round-close-24px.svg
+++ /dev/null
@@ -1,13 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
-<g id="Bounding_Boxes">
-	<path fill="none" d="M0,0h24v24H0V0z"/>
-</g>
-<g id="Rounded">
-	<path fill="currentColor" d="M18.3,5.71L18.3,5.71c-0.39-0.39-1.02-0.39-1.41,0L12,10.59L7.11,5.7c-0.39-0.39-1.02-0.39-1.41,0l0,0
-		c-0.39,0.39-0.39,1.02,0,1.41L10.59,12L5.7,16.89c-0.39,0.39-0.39,1.02,0,1.41h0c0.39,0.39,1.02,0.39,1.41,0L12,13.41l4.89,4.89
-		c0.39,0.39,1.02,0.39,1.41,0l0,0c0.39-0.39,0.39-1.02,0-1.41L13.41,12l4.89-4.89C18.68,6.73,18.68,6.09,18.3,5.71z"/>
-</g>
-</svg>
diff --git a/packages/ui/src/ImageUpload/icons/round-edit-24px.svg b/packages/ui/src/ImageUpload/icons/round-edit-24px.svg
deleted file mode 100644
index 77ebdee629d..00000000000
--- a/packages/ui/src/ImageUpload/icons/round-edit-24px.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-    <path fill="currentColor" d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/>
-    <path d="M0 0h24v24H0z" fill="none"/>
-</svg>
\ No newline at end of file
diff --git a/packages/ui/src/ImageUpload/image.jpeg b/packages/ui/src/ImageUpload/image.jpeg
deleted file mode 100644
index 8aefd60a11d..00000000000
Binary files a/packages/ui/src/ImageUpload/image.jpeg and /dev/null differ
diff --git a/packages/ui/src/ImageUpload/index.ts b/packages/ui/src/ImageUpload/index.ts
index b079baaf414..f838785e8d8 100644
--- a/packages/ui/src/ImageUpload/index.ts
+++ b/packages/ui/src/ImageUpload/index.ts
@@ -1,4 +1,4 @@
 export { SingleImageUpload } from "./SingleImageUpload";
 export { MultiImageUpload } from "./MultiImageUpload";
-export { default as Image } from "./Image";
+export { Image } from "./Image";
 export { ImageEditorDialog } from "./ImageEditorDialog";
diff --git a/packages/ui/src/ImageUpload/styled.ts b/packages/ui/src/ImageUpload/styled.ts
deleted file mode 100644
index 5130ba66e2e..00000000000
--- a/packages/ui/src/ImageUpload/styled.ts
+++ /dev/null
@@ -1,116 +0,0 @@
-import styled from "@emotion/styled";
-
-export const AddImageIconWrapper = styled("div")({
-    color: "var(--mdc-theme-text-secondary-on-background)",
-    ">svg": {
-        width: "100%",
-        height: "100%",
-        maxWidth: 50,
-        maxHeight: 50,
-        display: "block",
-        opacity: 0.5,
-        margin: "0 auto"
-    }
-});
-
-export const AddImageWrapper = styled("div")({
-    width: "100%",
-    height: "100%",
-    minHeight: 50,
-    minWidth: 50,
-    textAlign: "center",
-    backgroundColor: "var(--mdc-theme-on-background)",
-    borderRadius: 0,
-    borderBottom: "1px solid var(--mdc-theme-text-hint-on-background)",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "space-around",
-    flexDirection: "column",
-    transition: "color 0.2s",
-    cursor: "pointer",
-    padding: 10,
-    boxSizing: "border-box",
-    "&:hover": {
-        backgroundColor: "rgba(0,0,0, 0.5)",
-        borderBottom: "1px solid var(--mdc-theme-on-surface)"
-    }
-});
-
-export const AddImageWrapperRound = styled(AddImageWrapper)({
-    margin: "auto",
-    width: "150px",
-    height: "150px",
-    borderRadius: "50%"
-});
-
-export const RemoveImage = styled("div")({
-    position: "absolute",
-    cursor: "pointer",
-    top: 10,
-    right: 10,
-    display: "none",
-    color: "white",
-    opacity: 0.5,
-    "&:hover": {
-        opacity: 0.75
-    }
-});
-
-export const EditImage = styled("div")({
-    position: "absolute",
-    cursor: "pointer",
-    top: 10,
-    left: 10,
-    display: "none",
-    color: "white",
-    opacity: 0.5,
-    "&:hover": {
-        opacity: 0.75
-    }
-});
-
-export const ImagePreviewWrapper = styled("div")({
-    width: "100%",
-    height: "100%",
-    minHeight: 50,
-    minWidth: 50,
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "space-around",
-    flexDirection: "column",
-    boxSizing: "border-box",
-    position: "relative",
-    // @ts-expect-error
-    [AddImageWrapper]: {
-        position: "absolute",
-        display: "none",
-        top: 0,
-        height: "100%",
-        zIndex: 1,
-        backgroundColor: "rgba(0,0,0, 0.75)",
-        // @ts-expect-error
-        [AddImageIconWrapper]: {
-            top: "50%",
-            left: "50%",
-            transform: "translateY(-50%) translateX(-50%)",
-            position: "absolute",
-            color: "white"
-        }
-    },
-    "&:hover": {
-        // @ts-expect-error
-        [AddImageWrapper]: {
-            display: "block"
-        },
-        // @ts-expect-error
-        [RemoveImage]: {
-            display: "block",
-            zIndex: 2
-        },
-        // @ts-expect-error
-        [EditImage]: {
-            display: "block",
-            zIndex: 2
-        }
-    }
-});
diff --git a/packages/ui/src/Input/Input.tsx b/packages/ui/src/Input/Input.tsx
index 4ad8615df6d..da0e709c75f 100644
--- a/packages/ui/src/Input/Input.tsx
+++ b/packages/ui/src/Input/Input.tsx
@@ -1,11 +1,61 @@
-import React, { useCallback } from "react";
-import { TextField, TextFieldProps } from "@rmwc/textfield";
-import { FormElementMessage } from "~/FormElementMessage";
+import React, { useCallback, useMemo, ReactElement } from "react";
 import pick from "lodash/pick";
 import { FormComponentProps } from "~/types";
-import { ReactElement } from "react";
-import classNames from "classnames";
-import { webinyInputStyles } from "./styled";
+import { Input as AdminInput, Textarea as AdminTextarea } from "@webiny/admin-ui";
+
+export interface TextFieldHelperTextProps {
+    /** Make the help text always visible */
+    persistent?: boolean;
+    /** Make the help a validation message style */
+    validationMsg?: boolean;
+    /** Content for the help text */
+    children: React.ReactNode;
+}
+
+export interface TextFieldProps {
+    /** Sets the value for controlled TextFields. */
+    value?: string | number;
+    /** Adds help text to the field */
+    helpText?: React.ReactNode | TextFieldHelperTextProps;
+    /** Shows the character count, must be used in conjunction with maxLength. */
+    characterCount?: boolean;
+    /** Makes the TextField visually invalid. This is sometimes automatically applied in cases where required or pattern is used.  */
+    invalid?: boolean;
+    /** Makes the Textfield disabled. */
+    disabled?: boolean;
+    /** Makes the Textfield required. */
+    required?: boolean;
+    /** Outline the TextField. */
+    outlined?: boolean;
+    /** How to align the text inside the TextField. Defaults to 'start'. */
+    align?: "start" | "end";
+    /** A label for the input. */
+    label?: React.ReactNode;
+    /** The label floats automatically based on value, but you can use this prop for manual control. */
+    floatLabel?: boolean;
+    /** Makes a multiline TextField. */
+    textarea?: boolean;
+    /** Makes the TextField fullwidth. */
+    fullwidth?: boolean;
+    /** Add a leading icon. */
+    icon?: any;
+    /** Add a trailing icon. */
+    trailingIcon?: any;
+    /** By default, props spread to the input. These props are for the component's root container. */
+    rootProps?: any;
+    /** A reference to the native input or textarea. */
+    inputRef?: React.Ref<HTMLInputElement | HTMLTextAreaElement | null>;
+    /** The type of input field to render, search, number, etc */
+    type?: string;
+    /** Add prefix. */
+    prefix?: string;
+    /** Add suffix. */
+    suffix?: string;
+    /** Advanced: A reference to the MDCFoundation. */
+    foundationRef?: any;
+    /** Make textarea resizeable */
+    resizeable?: boolean;
+}
 
 export type InputProps<TValue = any> = FormComponentProps<TValue> &
     TextFieldProps & {
@@ -30,9 +80,9 @@ export type InputProps<TValue = any> = FormComponentProps<TValue> &
         maxLength?: number;
 
         // A callback that is executed when input focus is lost.
-        onBlur?: (e: React.SyntheticEvent<HTMLInputElement>) => any;
+        onBlur?: (e: React.SyntheticEvent<any>) => any;
 
-        onKeyDown?: (e: React.SyntheticEvent<HTMLInputElement>) => any;
+        onKeyDown?: (e: React.SyntheticEvent<any>) => any;
 
         // A callback that gets triggered when the user presses the "Enter" key.
         onEnter?: () => any;
@@ -49,9 +99,6 @@ export type InputProps<TValue = any> = FormComponentProps<TValue> &
         children?: React.ReactNode;
     };
 
-export type InputOnKeyDownProps = React.SyntheticEvent<HTMLInputElement> & {
-    key?: string;
-};
 /**
  * Use Input component to store short string values, like first name, last name, e-mail etc.
  * Additionally, with rows prop, it can also be turned into a text area, to store longer strings.
@@ -61,63 +108,40 @@ export type InputOnKeyDownProps = React.SyntheticEvent<HTMLInputElement> & {
 const rmwcProps = [
     "label",
     "type",
-    "step",
     "disabled",
     "readOnly",
     "placeholder",
-    "outlined",
     "onKeyDown",
+    "onEnter",
     "onKeyPress",
     "onKeyUp",
     "onFocus",
-    "rootProps",
-    "fullwidth",
-    "inputRef",
     "className",
     "maxLength",
-    "characterCount"
+    "characterCount",
+    "autoComplete",
+    "maxLength"
 ];
 
+/**
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please use the `Input` component from the `@webiny/admin-ui` package instead.
+ */
 export const Input = (props: InputProps) => {
-    const onChange = useCallback(
-        (e: React.SyntheticEvent<HTMLInputElement>) => {
-            const { onChange, rawOnChange } = props;
-            if (!onChange) {
-                return;
-            }
-
-            // @ts-expect-error
-            onChange(rawOnChange ? e : e.target.value);
-        },
-        [props.onChange, props.rawOnChange]
-    );
-
-    const onBlur = useCallback(
-        async (e: React.SyntheticEvent<HTMLInputElement>) => {
-            const { validate, onBlur } = props;
-            if (validate) {
-                // Since we are accessing event in an async operation, we need to persist it.
-                // See https://reactjs.org/docs/events.html#event-pooling.
-                e.persist();
-                await validate();
-            }
-            onBlur && onBlur(e);
-        },
-        [props.validate, props.onBlur]
-    );
-
     const {
         autoFocus,
         value,
-        label,
         description,
         placeholder,
         rows,
         validation,
         icon,
         trailingIcon,
-        onEnter,
-        size,
+        onBlur,
+        onChange,
+        rawOnChange,
+        required,
+        inputRef,
         ...rest
     } = props;
 
@@ -126,50 +150,66 @@ export const Input = (props: InputProps) => {
         inputValue = "";
     }
 
-    const { isValid: validationIsValid, message: validationMessage } = validation || {};
+    const size = useMemo(() => {
+        if (props.size === "medium") {
+            return "md";
+        }
 
-    const inputOnKeyDown = useCallback(
-        (e: InputOnKeyDownProps) => {
-            if (typeof onEnter === "function" && e.key === "Enter") {
-                onEnter();
-            }
+        if (props.size === "large") {
+            return "lg";
+        }
 
-            if (typeof rest.onKeyDown === "function") {
-                return rest.onKeyDown(e);
-            }
-        },
-        [rest.onKeyDown, onEnter]
-    );
+        return "lg";
+    }, [props.size]);
 
-    return (
-        <React.Fragment>
-            <TextField
+    const getValidIcon = useCallback((icon: React.ReactNode) => {
+        if (React.isValidElement(icon)) {
+            return icon;
+        }
+
+        return undefined;
+    }, []);
+
+    if (Boolean(rows)) {
+        return (
+            <AdminTextarea
                 {...pick(rest, rmwcProps)}
-                onKeyDown={inputOnKeyDown}
                 autoFocus={autoFocus}
-                textarea={Boolean(rows)}
                 value={inputValue}
                 onChange={onChange}
-                onBlur={onBlur}
-                label={label}
-                icon={icon}
                 placeholder={placeholder}
-                trailingIcon={trailingIcon}
-                rows={rows}
-                className={classNames(
-                    "webiny-ui-input",
-                    webinyInputStyles,
-                    props.size ? `webiny-ui-input--size-${size}` : null
-                )}
+                size={size}
+                className={"webiny-ui-input"}
                 data-testid={props["data-testid"]}
+                validation={validation}
+                description={description}
+                required={required}
+                rows={rows}
+                forwardEventOnChange={rawOnChange}
+                textareaRef={inputRef as React.Ref<HTMLTextAreaElement> | undefined}
+                onBlur={onBlur}
             />
+        );
+    }
 
-            {validationIsValid === false && (
-                <FormElementMessage error>{validationMessage}</FormElementMessage>
-            )}
-            {validationIsValid !== false && description && (
-                <FormElementMessage>{description}</FormElementMessage>
-            )}
-        </React.Fragment>
+    return (
+        <AdminInput
+            {...pick(rest, rmwcProps)}
+            autoFocus={autoFocus}
+            value={inputValue}
+            onChange={onChange}
+            startIcon={getValidIcon(icon)}
+            endIcon={getValidIcon(trailingIcon)}
+            placeholder={placeholder}
+            size={size}
+            className={"webiny-ui-input"}
+            data-testid={props["data-testid"]}
+            validation={validation}
+            description={description}
+            required={required}
+            forwardEventOnChange={rawOnChange}
+            inputRef={inputRef as React.Ref<HTMLInputElement> | undefined}
+            onBlur={onBlur}
+        />
     );
 };
diff --git a/packages/ui/src/Input/README.md b/packages/ui/src/Input/README.md
deleted file mode 100644
index 08b676cfdee..00000000000
--- a/packages/ui/src/Input/README.md
+++ /dev/null
@@ -1,16 +0,0 @@
-# Input
-
-### Design
-
-<a href="https://material.io/design/components/text-fields.html" target="_blank">https://material.io/design/components/text-fields.html</a>
-
-### Description
-
-Use `Input` component to store short string values, like first name, last name, e-mail etc.
-Additionally, with `rows` prop, it can also be turned into a text area, to store longer strings.
-
-### Import
-
-```js
-import { Input } from "@webiny/ui/Input";
-```
diff --git a/packages/ui/src/Input/__tests__/Input.test.tsx b/packages/ui/src/Input/__tests__/Input.test.tsx
deleted file mode 100644
index 95b0739d354..00000000000
--- a/packages/ui/src/Input/__tests__/Input.test.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-import React from "react";
-import { Input } from "../index";
-import { cleanup, render } from "@testing-library/react";
-
-afterEach(cleanup);
-
-interface SetupProps {
-    onChange?: () => void;
-}
-
-function setup(props: SetupProps = {}) {
-    const renderArg = {
-        // eslint-disable-next-line
-        onChange: (_: string) => {},
-        value: null
-    };
-
-    // We cast "as unknown as React.ReactNode" here because renderProp has a "jest.Mock<null, [controllerArg: any]>" type,
-    // but the "Input" component expect React.ReactNode to be the type of the "children" property.
-    const renderProp = jest.fn(controllerArg => {
-        Object.assign(renderArg, controllerArg);
-        return null;
-    }) as unknown as React.ReactNode;
-
-    const onChange = props.onChange
-        ? props.onChange
-        : () => {
-              return void 0;
-          };
-
-    class Test extends React.Component {
-        public override state = { value: "init-value" };
-
-        onChange = (value: string) => {
-            this.setState({ value });
-        };
-
-        public override render() {
-            return (
-                <Input
-                    {...props}
-                    value={this.state.value}
-                    onChange={callAll(onChange, this.onChange)}
-                >
-                    {renderProp}
-                </Input>
-            );
-        }
-    }
-
-    const utils = render(<Test />);
-
-    return { renderArg, ...utils };
-}
-
-/**
- * This return a function that will call all the given functions with
- * the arguments with which it's called. It does a null-check before
- * attempting to call the functions and can take any number of functions.
- * @param {...Function} fns the functions to call
- * @return {Function} the function that calls all the functions
- */
-function callAll(...fns: ((...params: any) => void)[]) {
-    return (...args: any) => {
-        fns.forEach(fn => {
-            fn && fn(...args);
-        });
-    };
-}
-
-describe("Input tests", () => {
-    test("passes expected props to render prop", () => {
-        const { renderArg } = setup();
-
-        expect(renderArg).toContainKeys(["value", "validation", "onChange", "onBlur"]);
-    });
-
-    test("updates value via onChange", () => {
-        const { renderArg } = setup();
-        expect(renderArg.value).toBe("init-value");
-        renderArg.onChange("new-value");
-        expect(renderArg.value).toBe("new-value");
-        renderArg.onChange("third-value");
-        expect(renderArg.value).toBe("third-value");
-    });
-});
diff --git a/packages/ui/src/Input/styled.tsx b/packages/ui/src/Input/styled.tsx
deleted file mode 100644
index f1fca81b309..00000000000
--- a/packages/ui/src/Input/styled.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import { css } from "emotion";
-
-/**
- * @type {string}
- */
-export const webinyInputStyles = css`
-    //  fix label position when autofilled
-
-    .mdc-text-field__input:-webkit-autofill + .mdc-floating-label {
-        transform: translateY(-106%) scale(0.75);
-    }
-
-    .mdc-floating-label {
-        margin-left: 0 !important;
-    }
-
-    .mdc-text-field__input::-webkit-calendar-picker-indicator {
-        display: initial;
-    }
-
-    // medium input styles
-    &.webiny-ui-input--size-medium {
-        &.mdc-text-field {
-            height: 40px;
-            font-size: 0.85em;
-        }
-    }
-
-    // small input styles
-    &.webiny-ui-input--size-small {
-        &.mdc-text-field {
-            height: 30px;
-            font-size: 0.75em;
-        }
-    }
-
-    // textarea
-    &.mdc-text-field--textarea {
-        display: flex;
-        flex-direction: row;
-
-        &.mdc-text-field--with-trailing-icon {
-            padding-left: 0;
-            padding-right: 0;
-
-            .mdc-text-field__input {
-                padding-right: 0;
-            }
-        }
-    }
-`;
diff --git a/packages/ui/src/Input/svg/baseline-autorenew-24px.svg b/packages/ui/src/Input/svg/baseline-autorenew-24px.svg
deleted file mode 100644
index f79fa263d10..00000000000
--- a/packages/ui/src/Input/svg/baseline-autorenew-24px.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-    <path d="M12 6v3l4-4-4-4v3c-4.42 0-8 3.58-8 8 0 1.57.46 3.03 1.24 4.26L6.7 14.8c-.45-.83-.7-1.79-.7-2.8 0-3.31 2.69-6 6-6zm6.76 1.74L17.3 9.2c.44.84.7 1.79.7 2.8 0 3.31-2.69 6-6 6v-3l-4 4 4 4v-3c4.42 0 8-3.58 8-8 0-1.57-.46-3.03-1.24-4.26z"/>
-    <path d="M0 0h24v24H0z" fill="none"/>
-</svg>
diff --git a/packages/ui/src/Input/svg/baseline-cloud_done-24px.svg b/packages/ui/src/Input/svg/baseline-cloud_done-24px.svg
deleted file mode 100644
index ef9bea0eed4..00000000000
--- a/packages/ui/src/Input/svg/baseline-cloud_done-24px.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-    <path d="M0 0h24v24H0z" fill="none"/>
-    <path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM10 17l-3.5-3.5 1.41-1.41L10 14.17 15.18 9l1.41 1.41L10 17z"/>
-</svg>
diff --git a/packages/ui/src/Input/svg/baseline-delete-24px.svg b/packages/ui/src/Input/svg/baseline-delete-24px.svg
deleted file mode 100644
index 9308f4df566..00000000000
--- a/packages/ui/src/Input/svg/baseline-delete-24px.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-    <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/>
-    <path d="M0 0h24v24H0z" fill="none"/>
-</svg>
diff --git a/packages/ui/src/Input/svg/baseline-done-24px.svg b/packages/ui/src/Input/svg/baseline-done-24px.svg
deleted file mode 100644
index 8541f456ba6..00000000000
--- a/packages/ui/src/Input/svg/baseline-done-24px.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-    <path fill="none" d="M0 0h24v24H0z"/>
-    <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/>
-</svg>
diff --git a/packages/ui/src/List/CollapsibleList/README.md b/packages/ui/src/List/CollapsibleList/README.md
deleted file mode 100644
index 92bb5525129..00000000000
--- a/packages/ui/src/List/CollapsibleList/README.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# CollapsibleList
-
-### Description
-
-Use `CollapsibleList` to display a list of items that are made visible when you click the assigned `handle` element.
-
-### Import
-
-```js
-import { CollapsibleList, SimpleListItem } from "@webiny/ui/List";
-```
diff --git a/packages/ui/src/List/CollapsibleList/index.css b/packages/ui/src/List/CollapsibleList/index.css
deleted file mode 100644
index d052423d979..00000000000
--- a/packages/ui/src/List/CollapsibleList/index.css
+++ /dev/null
@@ -1,31 +0,0 @@
-.rmwc-collapsible-list {
-  width: 100%;
-}
-
-.rmwc-collapsible-list__children {
-  overflow: hidden;
-  max-height: 0;
-  transition: max-height 0.3s, opacity 0.3s;
-  opacity: 0;
-}
-
-.rmwc-collapsible-list--open > .rmwc-collapsible-list__children {
-  opacity: 1;
-}
-
-.rmwc-collapsible-list__handle .mdc-deprecated-list-item__meta {
-  transition: transform 0.3s;
-  user-select: none;
-}
-
-.rmwc-collapsible-list--open > .rmwc-collapsible-list__handle .mdc-deprecated-list-item__meta {
-  transform: rotate(90deg);
-}
-
-.rmwc-collapsible-list__children .mdc-deprecated-list-item {
-  padding-left: 2rem;
-}
-
-.rmwc-collapsible-list__children-inner {
-  overflow: auto;
-}
diff --git a/packages/ui/src/List/CollapsibleList/index.tsx b/packages/ui/src/List/CollapsibleList/index.tsx
index 6a573284d7d..ea906c9a56a 100644
--- a/packages/ui/src/List/CollapsibleList/index.tsx
+++ b/packages/ui/src/List/CollapsibleList/index.tsx
@@ -1,16 +1,32 @@
-import "./index.css";
 import React from "react";
-import {
-    CollapsibleList as RmwcCollapsibleList,
-    CollapsibleListProps as RmwcCollapsibleListProps
-} from "@rmwc/list";
 
-export type CollapsibleListProps = RmwcCollapsibleListProps & {
+export interface CollapsibleListProps {
+    /** The handle that opens and closes the collapsible section. Usually a ListItem. */
+    handle: React.ReactElement<any>;
+    /** Starts the collapsible list as open. */
+    defaultOpen?: boolean;
+    /** Callback for when the collapsible list opens. */
+    onOpen?: () => void;
+    /** Callback for when the collapsible list closes. */
+    onClose?: () => void;
+
+    /** CollapsibleState */
+    open: boolean;
+    childrenStyle: React.CSSProperties;
+
+    /** Component props */
     children: React.ReactNode;
-};
+}
 
+/**
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please use the `List` component from the `@webiny/admin-ui` package instead.
+ */
 export const CollapsibleList = (props: CollapsibleListProps) => {
-    return <RmwcCollapsibleList {...props} />;
+    console.warn(
+        "The `CollapsibleList` component is deprecated and will be removed in future releases. Please refer to the documentation for the recommended alternative."
+    );
+    return <>{props.children}</>;
 };
 
 export default CollapsibleList;
diff --git a/packages/ui/src/List/DataList/DataList.tsx b/packages/ui/src/List/DataList/DataList.tsx
index 2000eb3d0df..350d3910d15 100644
--- a/packages/ui/src/List/DataList/DataList.tsx
+++ b/packages/ui/src/List/DataList/DataList.tsx
@@ -1,448 +1,24 @@
-import React, { useMemo } from "react";
-import styled from "@emotion/styled";
-import classNames from "classnames";
-import Loader from "./Loader";
-import NoData from "./NoData";
-import { Typography } from "~/Typography";
-import { css } from "emotion";
-import noop from "lodash/noop";
-import isEmpty from "lodash/isEmpty";
-import { Checkbox } from "../../Checkbox";
-import { Menu, MenuItem } from "~/Menu";
+import React from "react";
+import { DataList as AdminDatalist, List } from "@webiny/admin-ui";
+import { ListProps, ListItemProps } from "../List";
+import { DataListProps } from "@webiny/admin-ui/DataList/types";
 
-import {
-    FilterIcon,
-    NextPageIcon,
-    OptionsIcon,
-    PreviousPageIcon,
-    RefreshIcon,
-    SortIcon
-} from "./icons";
-import { List, ListItem, ListProps } from "..";
-import { DataListModalOverlayProvider } from "./DataListModalOverlay";
-import { PaginationProp, SortersProp } from "./types";
-
-const ListContainer = styled("div")({
-    position: "relative",
-    height: "100%",
-    ".mdc-deprecated-list": {
-        paddingBottom: 0,
-        paddingTop: 0
-    },
-    ".mdc-deprecated-list-item": {
-        borderBottom: "1px solid var(--mdc-theme-on-background)",
-        padding: "10px 20px 10px 20px",
-        height: "auto",
-        minHeight: 40,
-        ".mdc-deprecated-list-item__text, .mdc-deprecated-list-item__secondary-text, .webiny-list-text-overline":
-            {
-                display: "block"
-            },
-        ".mdc-deprecated-list-item__graphic": {
-            marginRight: 20
-        },
-        ".mdc-deprecated-list-item__text": {
-            width: "100%",
-            margin: "-20px 0",
-            padding: "20px 0"
-        },
-        ".mdc-deprecated-list-item__meta": {
-            alignItems: "center",
-            display: "flex",
-            justifyContent: "space-between",
-            flexDirection: "column",
-            position: "relative",
-            padding: "5px 0",
-            boxSizing: "border-box",
-            height: "100%",
-            whiteSpace: "nowrap",
-            marginTop: -10,
-            marginBottom: -10,
-            ".webiny-list-actions": {
-                display: "none"
-            },
-            ".webiny-list-top-caption, .webiny-list-bottom-caption": {
-                //position: 'absolute',
-                width: "100%",
-                textAlign: "right"
-            },
-            ".webiny-list-top-caption": {
-                marginBottom: 20
-            }
-        },
-        "&:hover": {
-            ".mdc-deprecated-list-item__meta": {
-                ".webiny-list-top-caption, .webiny-list-bottom-caption": {
-                    display: "none"
-                },
-                ".webiny-list-actions": {
-                    display: "flex",
-                    height: "100%",
-                    alignItems: "center"
-                }
-            }
-        }
-    }
-});
-
-const ListHeader = styled.div`
-    border-bottom: 1px solid var(--mdc-theme-on-background);
-    color: var(--mdc-theme-text-primary-on-background);
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 0 24px;
-    max-height: 85px;
-    min-height: 85px;
-`;
-
-const ListSubHeader = styled.div`
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-    padding: 10px;
-    border-bottom: 1px solid var(--mdc-theme-on-background);
-`;
-
-const ListHeaderItem = styled("div")({
-    display: "inline-block",
-    verticalAlign: "middle",
-    "&.disabled": {
-        opacity: 0.5,
-        pointerEvents: "none"
-    }
-});
-
-const scrollList = css({
-    overflow: "auto",
-    height: "calc(100vh - 235px)"
-});
-
-const dataListContent = css({
-    position: "relative",
-    height: "100%",
-    overflow: "auto"
-});
-
-// This was copied from "./types" so that it can be outputted in docs.
-interface DataListProps {
-    // Pass a function to take full control of list render.
-    children?: ((props: any) => React.ReactNode) | null;
-
-    // A title of paginated list.
-    title?: React.ReactNode;
-
-    // FormData that needs to be shown in the list.
-    data?: Record<string, any>[] | null;
-
-    // A callback that must refresh current view by repeating the previous query.
-    refresh?: (() => void) | null;
-
-    // If true, Loader component will be shown, disallowing any interaction.
-    loading?: boolean;
-
-    // Provide a custom loader. Shown while the content is loading.
-    loader?: React.ReactNode;
-
-    // Provide a custom no data component. Shown while there is no data to be shown.
-    noData?: React.ReactNode;
-
-    // Provide all pagination data, options and callbacks here.
-    pagination?: PaginationProp;
-
-    // Triggered once a sorter has been selected.
-    setSorters?: ((sorter: any) => void) | null;
-
-    // Provide all sorters options and callbacks here.
-    sorters?: SortersProp | null;
-
-    // Provide actions that will be shown in the top right corner (eg. export or import actions).
-    actions?: React.ReactNode;
-
-    // Provide filters that will be shown in the top left corner (eg. filter by category or status).
-    filters?: React.ReactNode;
-
-    // Provide actions that can be executed on one or more multi-selected list items (eg. export or delete).
-    multiSelectActions?: React.ReactNode;
-
-    // Provide callback that will be executed once user selects all list items.
-    multiSelectAll?: (value: boolean, data: Record<string, any>[] | null) => void;
-
-    // Callback which returns true if all items were selected, otherwise returns false.
-    isAllMultiSelected?: (data: Record<string, any>[] | null) => boolean;
-
-    // Callback which returns true if none of the items were selected, otherwise returns false.
-    isNoneMultiSelected?: (data: Record<string, any>[] | null) => boolean;
-
-    showOptions?: {
-        refresh?: boolean;
-        pagination?: boolean;
-        filters?: boolean;
-        sorters?: boolean;
-        [key: string]: any;
-    };
-
-    // Provide search UI that will be shown in the top left corner.
-    search?: React.ReactElement;
-    // Provide simple modal UI that will be shown over the list content.
-    modalOverlay?: React.ReactElement;
-    // Provide an action element that handle toggling the "Modal overlay".
-    modalOverlayAction?: React.ReactElement;
-    // Provide additional UI for list sub-header.
-    subHeader?: React.ReactElement;
-
-    meta?: Record<string, any> | null;
-
-    setPage?: ((page: string) => void) | null;
-
-    setPerPage?: ((page: string) => void) | null;
-
-    perPageOptions?: number[];
-}
-
-const MultiSelectAll = (props: DataListProps) => {
-    const { multiSelectActions } = props;
-    if (!multiSelectActions) {
-        return null;
-    }
-    /**
-     * We can safely cast because we have defaults.
-     */
-    const { isAllMultiSelected, isNoneMultiSelected, multiSelectAll, data } =
-        props as Required<DataListProps>;
-
-    return (
-        <React.Fragment>
-            {typeof multiSelectAll === "function" && (
-                <ListHeaderItem>
-                    <Checkbox
-                        indeterminate={!isAllMultiSelected(data) && !isNoneMultiSelected(data)}
-                        value={isAllMultiSelected(data)}
-                        onClick={() => {
-                            multiSelectAll(!isAllMultiSelected(data), data);
-                        }}
-                    />
-                </ListHeaderItem>
-            )}
-        </React.Fragment>
-    );
-};
-
-const MultiSelectActions = (props: DataListProps) => {
-    const { multiSelectActions } = props;
-    if (!multiSelectActions) {
-        return null;
-    }
-
-    return <ListHeaderItem>{multiSelectActions}</ListHeaderItem>;
-};
-
-const RefreshButton = (props: DataListProps) => {
-    const refresh = props.refresh;
-    if (!refresh) {
-        return null;
-    }
-
-    return (
-        <ListHeaderItem>
-            <RefreshIcon onClick={() => refresh()} />
-        </ListHeaderItem>
-    );
-};
-
-const Sorters = (props: DataListProps) => {
-    const sorters = props.sorters;
-    if (!sorters) {
-        return null;
-    }
-
-    return (
-        <ListHeaderItem>
-            <Menu handle={<SortIcon />}>
-                {sorters.map(sorter => (
-                    <MenuItem
-                        key={sorter.label}
-                        onClick={() => {
-                            if (sorters && props.setSorters) {
-                                props.setSorters(sorter.value);
-                            }
-                        }}
-                    >
-                        {sorter.label}
-                    </MenuItem>
-                ))}
-            </Menu>
-        </ListHeaderItem>
-    );
-};
-
-const Filters = (props: DataListProps) => {
-    const filters = props.filters;
-    if (!filters) {
-        return null;
-    }
-
-    return (
-        <ListHeaderItem>
-            <Menu handle={<FilterIcon />}>{filters}</Menu>
-        </ListHeaderItem>
-    );
-};
-
-const Pagination = (props: DataListProps) => {
-    const { pagination } = props;
-    if (!pagination) {
-        return null;
-    }
-
-    return (
-        <React.Fragment>
-            {pagination.setNextPage && (
-                <React.Fragment>
-                    <ListHeaderItem
-                        className={classNames({
-                            disabled: !pagination.hasPreviousPage
-                        })}
-                    >
-                        <PreviousPageIcon
-                            onClick={() => {
-                                if (pagination.setPreviousPage && pagination.hasPreviousPage) {
-                                    pagination.setPreviousPage();
-                                }
-                            }}
-                        />
-                    </ListHeaderItem>
-
-                    <ListHeaderItem
-                        className={classNames({
-                            disabled: !pagination.hasNextPage
-                        })}
-                    >
-                        <NextPageIcon
-                            onClick={() => {
-                                if (pagination.setNextPage && pagination.hasNextPage) {
-                                    pagination.setNextPage();
-                                }
-                            }}
-                        />
-                    </ListHeaderItem>
-                </React.Fragment>
-            )}
-
-            {Array.isArray(pagination.perPageOptions) && pagination.setPerPage && (
-                <ListHeaderItem>
-                    <Menu handle={<OptionsIcon />}>
-                        {pagination.setPerPage &&
-                            pagination.perPageOptions.map(perPage => (
-                                <MenuItem
-                                    key={perPage}
-                                    onClick={() =>
-                                        pagination.setPerPage && pagination.setPerPage(perPage)
-                                    }
-                                >
-                                    {perPage}
-                                </MenuItem>
-                            ))}
-                    </Menu>
-                </ListHeaderItem>
-            )}
-        </React.Fragment>
-    );
-};
-
-const defaultDataListProps = {
-    children: null,
-    title: null,
-    data: null,
-    meta: null,
-    loading: false,
-    refresh: () => {
-        return void 0;
-    },
-    setPage: null,
-    setPerPage: null,
-    perPageOptions: [10, 25, 50],
-    filters: null,
-    sorters: null,
-    setSorters: null,
-    actions: null,
-    multiSelectAll: noop,
-    isAllMultiSelected: () => false,
-    isNoneMultiSelected: () => false,
-    loader: <Loader />,
-    noData: <NoData />,
-    showOptions: {
-        refresh: true,
-        pagination: true,
-        sorters: true,
-        filters: true
-    }
-};
-
-export const DataList = (propsInput: DataListProps) => {
-    let render: React.ReactNode | null;
-
-    const props = useMemo(() => {
-        return {
-            ...defaultDataListProps,
-            ...propsInput
-        };
-    }, [propsInput]);
-
-    if (props.loading) {
-        render = props.loader;
-    } else if (isEmpty(props.data)) {
-        render = props.noData;
-    } else {
-        const ch = props.children;
-        render = typeof ch === "function" ? ch(props) : null;
-    }
-
-    const showOptions = props.showOptions || {};
-
-    return (
-        <DataListModalOverlayProvider>
-            <ListContainer className={"webiny-data-list"} data-testid={"ui.list.data-list"}>
-                {(props.title || props.actions) && (
-                    <ListHeader>
-                        <Typography use="headline5">{props.title}</Typography>
-                        {props.actions}
-                    </ListHeader>
-                )}
-
-                {Object.keys(showOptions).length > 0 && (
-                    <ListSubHeader>
-                        {props.search ? React.cloneElement(props.search, props) : null}
-                        <MultiSelectAll {...props} />
-                        {showOptions.refresh && <RefreshButton {...props} />}
-                        {showOptions.pagination && <Pagination {...props} />}
-                        {showOptions.sorters && <Sorters {...props} />}
-                        {showOptions.filters && <Filters {...props} />}
-                        {props.modalOverlayAction ? (
-                            <ListHeaderItem>{props.modalOverlayAction}</ListHeaderItem>
-                        ) : null}
-                        <MultiSelectActions {...props} />
-                    </ListSubHeader>
-                )}
-
-                <div className={classNames(dataListContent, "webiny-data-list__content")}>
-                    {props.subHeader}
-                    {render}
-                    {props.modalOverlay}
-                </div>
-            </ListContainer>
-        </DataListModalOverlayProvider>
-    );
+/**
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please use the `DataList` component from the `@webiny/admin-ui` package instead.
+ */
+export const DataList = (props: DataListProps<Record<string, any>>) => {
+    return <AdminDatalist {...props} />;
 };
 
 export interface ScrollListProps extends ListProps {
-    children: React.ReactElement<typeof ListItem>[];
+    children: React.ReactElement<ListItemProps>[];
 }
 
+/**
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please use the `List` component from the `@webiny/admin-ui` package instead.
+ */
 export const ScrollList = (props: ScrollListProps) => {
-    return (
-        <List {...props} className={classNames(props.className, scrollList)}>
-            {props.children}
-        </List>
-    );
+    return <List {...props} />;
 };
diff --git a/packages/ui/src/List/DataList/DataListModalOverlay/DataListModalOverlay.tsx b/packages/ui/src/List/DataList/DataListModalOverlay/DataListModalOverlay.tsx
deleted file mode 100644
index 26efda2f6ec..00000000000
--- a/packages/ui/src/List/DataList/DataListModalOverlay/DataListModalOverlay.tsx
+++ /dev/null
@@ -1,93 +0,0 @@
-import React, { useContext } from "react";
-import styled from "@emotion/styled";
-import { DataListModalOverlayContext } from "./DataListModalOverlayContext";
-
-export type SimpleOverlayProps = { showOverlay: boolean };
-export const SimpleOverlay = styled.div<SimpleOverlayProps>(({ showOverlay }) => ({
-    width: "100%",
-    height: "100%",
-    position: "absolute",
-    top: 0,
-    left: 0,
-    backgroundColor: showOverlay ? "rgba(0, 0, 0, 0.32)" : "transparent",
-    transition: "150ms all ease-in-out",
-    pointerEvents: showOverlay ? "auto" : "none",
-    zIndex: showOverlay ? 5 : -1,
-    opacity: showOverlay ? 1 : 0
-}));
-
-export interface DataListModalWrapperProps {
-    showOverlay: boolean;
-}
-
-export const DataListModalWrapper = styled.div<DataListModalWrapperProps>(({ showOverlay }) => ({
-    position: "absolute",
-    top: "0px",
-    left: "50%",
-    width: "90%",
-    height: "auto",
-    maxWidth: "426px",
-    maxHeight: "520px",
-    overflow: "visible",
-    backgroundColor: "var(--mdc-theme-surface)",
-    boxShadow: "0px 1px 5px rgba(0, 0, 0, 0.12)",
-    borderRadius: "0px 0px 4px 4px",
-    transition: "150ms opacity ease-in-out",
-    pointerEvents: showOverlay ? "auto" : "none",
-    zIndex: showOverlay ? 5 : -1,
-    opacity: showOverlay ? 1 : 0,
-    transform: showOverlay ? "translateX(-50%)" : "translateX(-1000px)",
-
-    "& .input-wrapper": {
-        paddingBottom: "16px"
-    },
-
-    "& .datalist-modal__footer": {
-        padding: "24px",
-        display: "flex",
-        justifyContent: "space-between",
-        "& .mdc-button": {
-            borderRadius: 4,
-            padding: "0px 32px"
-        },
-        "& .datalist-modal__footer__action--secondary": {
-            color: "var(--mdc-theme-text-primary-on-background)",
-            border: "1px solid var(--mdc-theme-on-background)"
-        },
-        "& .datalist-modal__footer__action--primary": {
-            backgroundColor: "var(--mdc-theme-secondary)"
-        }
-    }
-}));
-
-export interface DataListModalOverlayProps {
-    /*
-     * This function is called after closing the modal overlay.
-     */
-    onDismiss?: (event?: React.SyntheticEvent) => void;
-
-    children: React.ReactNode;
-}
-
-export const DataListModalOverlay = ({ onDismiss, children }: DataListModalOverlayProps) => {
-    const { isOpen, setIsOpen } = useContext(DataListModalOverlayContext);
-    return (
-        <React.Fragment>
-            <SimpleOverlay
-                onClick={e => {
-                    e.stopPropagation();
-                    // Close the modal.
-                    setIsOpen(false);
-
-                    if (typeof onDismiss === "function") {
-                        onDismiss();
-                    }
-                }}
-                showOverlay={isOpen}
-            />
-            <DataListModalWrapper showOverlay={isOpen} data-testid={"data-list-modal-wrapper"}>
-                {children}
-            </DataListModalWrapper>
-        </React.Fragment>
-    );
-};
diff --git a/packages/ui/src/List/DataList/DataListModalOverlay/DataListModalOverlayAction.tsx b/packages/ui/src/List/DataList/DataListModalOverlay/DataListModalOverlayAction.tsx
deleted file mode 100644
index f6bc02401b5..00000000000
--- a/packages/ui/src/List/DataList/DataListModalOverlay/DataListModalOverlayAction.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import React, { useContext } from "react";
-import { IconButton } from "../../../Button";
-import { DataListModalOverlayContext } from "./DataListModalOverlayContext";
-
-export interface DataListModalOverlayActionProps {
-    icon: React.ReactNode;
-    "data-testid"?: string;
-}
-
-export const DataListModalOverlayAction = ({ icon, ...rest }: DataListModalOverlayActionProps) => {
-    const { isOpen, setIsOpen } = useContext(DataListModalOverlayContext);
-
-    return (
-        <IconButton
-            data-testid={rest["data-testid"]}
-            icon={icon}
-            onClick={() => setIsOpen(!isOpen)}
-        />
-    );
-};
diff --git a/packages/ui/src/List/DataList/DataListModalOverlay/DataListModalOverlayContext.tsx b/packages/ui/src/List/DataList/DataListModalOverlay/DataListModalOverlayContext.tsx
deleted file mode 100644
index 45d16923e1b..00000000000
--- a/packages/ui/src/List/DataList/DataListModalOverlay/DataListModalOverlayContext.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import React from "react";
-
-interface DataListModalOverlayProviderContext {
-    isOpen: boolean;
-    setIsOpen: (value: boolean) => void;
-}
-export const DataListModalOverlayContext = React.createContext<DataListModalOverlayProviderContext>(
-    {
-        isOpen: false,
-        setIsOpen: () => {
-            return void 0;
-        }
-    }
-);
-
-export interface DataListModalOverlayProviderProps {
-    children?: React.ReactChild | React.ReactChild[];
-}
-
-export const DataListModalOverlayProvider = ({ children }: DataListModalOverlayProviderProps) => {
-    const [isOpen, setIsOpen] = React.useState<boolean>(false);
-
-    return (
-        <DataListModalOverlayContext.Provider value={{ isOpen, setIsOpen }}>
-            {children}
-        </DataListModalOverlayContext.Provider>
-    );
-};
diff --git a/packages/ui/src/List/DataList/DataListModalOverlay/index.ts b/packages/ui/src/List/DataList/DataListModalOverlay/index.ts
index 822922fa79d..b8ba6fe614f 100644
--- a/packages/ui/src/List/DataList/DataListModalOverlay/index.ts
+++ b/packages/ui/src/List/DataList/DataListModalOverlay/index.ts
@@ -1,6 +1,15 @@
-export { DataListModalOverlay } from "./DataListModalOverlay";
-export { DataListModalOverlayAction } from "./DataListModalOverlayAction";
-export {
-    DataListModalOverlayContext,
-    DataListModalOverlayProvider
-} from "./DataListModalOverlayContext";
+import { DataListModal } from "@webiny/admin-ui";
+
+/**
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please use the `DataListModal.Content` component from the `@webiny/admin-ui` package instead.
+ */
+const DataListModalOverlay = DataListModal.Content;
+
+/**
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please use the `DataListModal.Trigger` component from the `@webiny/admin-ui` package instead.
+ */
+const DataListModalOverlayAction = DataListModal.Trigger;
+
+export { DataListModalOverlay, DataListModalOverlayAction };
diff --git a/packages/ui/src/List/DataList/DataListWithSections.tsx b/packages/ui/src/List/DataList/DataListWithSections.tsx
index ed706aab1d9..1ad81fca919 100644
--- a/packages/ui/src/List/DataList/DataListWithSections.tsx
+++ b/packages/ui/src/List/DataList/DataListWithSections.tsx
@@ -1,477 +1,29 @@
-import React, { useMemo } from "react";
-import styled from "@emotion/styled";
-import classNames from "classnames";
-import Loader from "./Loader";
-import NoData from "./NoData";
-import { Typography } from "~/Typography";
-import { css } from "emotion";
-import noop from "lodash/noop";
-import isEmpty from "lodash/isEmpty";
-
-import { Checkbox } from "../../Checkbox";
-import { Menu, MenuItem } from "../../Menu";
-import { Cell, Grid } from "../../Grid";
-
-import {
-    FilterIcon,
-    NextPageIcon,
-    OptionsIcon,
-    PreviousPageIcon,
-    RefreshIcon,
-    SortIcon
-} from "./icons";
-import { List, ListItem, ListProps } from "..";
-import { DataListModalOverlayProvider } from "./DataListModalOverlay";
-import { PaginationProp, SortersProp } from "./types";
-
-const ListContainer = styled("div")({
-    position: "relative",
-    height: "100%",
-    ".mdc-deprecated-list": {
-        paddingBottom: 0,
-        paddingTop: 0
-    },
-    ".mdc-deprecated-list-item": {
-        borderBottom: "1px solid var(--mdc-theme-on-background)",
-        padding: "10px 20px 10px 20px",
-        height: "auto",
-        minHeight: 40,
-        ".mdc-deprecated-list-item__text, .mdc-deprecated-list-item__secondary-text, .webiny-list-text-overline":
-            {
-                display: "block"
-            },
-        ".mdc-deprecated-list-item__graphic": {
-            marginRight: 20
-        },
-        ".mdc-deprecated-list-item__text": {
-            width: "100%",
-            margin: "-20px 0",
-            padding: "20px 0"
-        },
-        ".mdc-deprecated-list-item__meta": {
-            alignItems: "center",
-            display: "flex",
-            justifyContent: "space-between",
-            flexDirection: "column",
-            position: "relative",
-            padding: "5px 0",
-            boxSizing: "border-box",
-            height: "100%",
-            whiteSpace: "nowrap",
-            marginTop: -10,
-            marginBottom: -10,
-            ".webiny-list-actions": {
-                display: "none"
-            },
-            ".webiny-list-top-caption, .webiny-list-bottom-caption": {
-                //position: 'absolute',
-                width: "100%",
-                textAlign: "right"
-            },
-            ".webiny-list-top-caption": {
-                marginBottom: 20
-            }
-        },
-        "&:hover": {
-            ".mdc-deprecated-list-item__meta": {
-                ".webiny-list-top-caption, .webiny-list-bottom-caption": {
-                    display: "none"
-                },
-                ".webiny-list-actions": {
-                    display: "flex",
-                    height: "100%",
-                    alignItems: "center"
-                }
-            }
-        }
-    }
-});
-
-const listHeader = css({
-    borderBottom: "1px solid var(--mdc-theme-on-background)",
-    color: "var(--mdc-theme-text-primary-on-background)",
-    width: "100%"
-});
-
-const listSubHeader = css({
-    width: "100%",
-    "&.mdc-layout-grid": {
-        borderBottom: "1px solid var(--mdc-theme-on-background)",
-        padding: "10px 24px 10px 12px",
-        color: "var(--mdc-theme-text-primary-on-background)"
-    }
-});
-
-const ListHeaderItem = styled("div")({
-    display: "inline-block",
-    verticalAlign: "middle",
-    "&.disabled": {
-        opacity: 0.5,
-        pointerEvents: "none"
-    }
-});
-
-const listTitle = css({
-    display: "flex",
-    alignItems: "center"
-});
-
-const listActions = css({
-    textAlign: "right"
-});
-
-const scrollList = css({
-    overflow: "auto",
-    height: "calc(100vh - 235px)"
-});
-
-const dataListContent = css({
-    position: "relative",
-    height: "100%",
-    overflow: "auto"
-});
+import React from "react";
+import { DataListWithSections as AdminDataListWithSections, List } from "@webiny/admin-ui";
+import { ListProps } from "../List";
+import { DataListProps } from "@webiny/admin-ui/DataList/types";
+import { ListItem } from "@webiny/admin-ui/List/components";
 
 interface DataListData {
     [key: string]: Record<string, any>[];
 }
 
-// This was copied from "./types" so that it can be outputted in docs.
-interface DataListWithSectionsProps {
-    // Pass a function to take full control of list render.
-    children?: ((props: any) => React.ReactNode) | null;
-
-    // A title of paginated list.
-    title?: React.ReactNode;
-
-    // FormData that needs to be shown in the list.
-    data?: DataListData | null;
-
-    // A callback that must refresh current view by repeating the previous query.
-    refresh?: (() => void) | null;
-
-    // If true, Loader component will be shown, disallowing any interaction.
-    loading?: boolean;
-
-    // Provide a custom loader. Shown while the content is loading.
-    loader?: React.ReactNode;
-
-    // Provide a custom no data component. Shown while there is no data to be shown.
-    noData?: React.ReactNode;
-
-    // Provide all pagination data, options and callbacks here.
-    pagination?: PaginationProp;
-
-    // Triggered once a sorter has been selected.
-    setSorters?: ((sorter: any) => void) | null;
-
-    // Provide all sorters options and callbacks here.
-    sorters?: SortersProp | null;
-
-    // Provide actions that will be shown in the top right corner (eg. export or import actions).
-    actions?: React.ReactNode;
-
-    // Provide filters that will be shown in the top left corner (eg. filter by category or status).
-    filters?: React.ReactNode;
-
-    // Provide actions that can be executed on one or more multi-selected list items (eg. export or delete).
-    multiSelectActions?: React.ReactNode;
-
-    // Provide callback that will be executed once user selects all list items.
-    multiSelectAll?: (value: boolean, data: DataListData | null) => void;
-
-    // Callback which returns true if all items were selected, otherwise returns false.
-    isAllMultiSelected?: (data: DataListData | null) => boolean;
-
-    // Callback which returns true if none of the items were selected, otherwise returns false.
-    isNoneMultiSelected?: (data: DataListData | null) => boolean;
-
-    showOptions?: {
-        refresh?: boolean;
-        pagination?: boolean;
-        filters?: boolean;
-        sorters?: boolean;
-        [key: string]: any;
-    };
-
-    // Provide search UI that will be shown in the top left corner.
-    search?: React.ReactElement;
-    // Provide simple modal UI that will be shown over the list content.
-    modalOverlay?: React.ReactElement;
-    // Provide an action element that handle toggling the "Modal overlay".
-    modalOverlayAction?: React.ReactElement;
-    // Provide additional UI for list sub-header.
-    subHeader?: React.ReactElement;
-
-    meta?: Record<string, any> | null;
-
-    setPage?: ((page: string) => void) | null;
-
-    setPerPage?: ((page: string) => void) | null;
-
-    perPageOptions?: number[];
-}
-
-const MultiSelectAll = (props: DataListWithSectionsProps) => {
-    const { multiSelectActions } = props;
-    if (!multiSelectActions) {
-        return null;
-    }
-    /**
-     * We can safely cast because we have defaults.
-     */
-    const { isAllMultiSelected, isNoneMultiSelected, multiSelectAll, data } =
-        props as Required<DataListWithSectionsProps>;
-
-    return (
-        <React.Fragment>
-            {typeof multiSelectAll === "function" && (
-                <ListHeaderItem>
-                    <Checkbox
-                        indeterminate={!isAllMultiSelected(data) && !isNoneMultiSelected(data)}
-                        value={isAllMultiSelected(data)}
-                        onClick={() => {
-                            multiSelectAll(!isAllMultiSelected(data), data);
-                        }}
-                    />
-                </ListHeaderItem>
-            )}
-        </React.Fragment>
-    );
-};
-
-const MultiSelectActions = (props: DataListWithSectionsProps) => {
-    const { multiSelectActions } = props;
-    if (!multiSelectActions) {
-        return null;
-    }
-
-    return <ListHeaderItem>{multiSelectActions}</ListHeaderItem>;
-};
-
-const RefreshButton = (props: DataListWithSectionsProps) => {
-    const refresh = props.refresh;
-    if (!refresh) {
-        return null;
-    }
-
-    return (
-        <ListHeaderItem>
-            <RefreshIcon onClick={() => refresh()} />
-        </ListHeaderItem>
-    );
-};
-
-const Sorters = (props: DataListWithSectionsProps) => {
-    const sorters = props.sorters;
-    if (!sorters) {
-        return null;
-    }
-
-    return (
-        <ListHeaderItem>
-            <Menu handle={<SortIcon />}>
-                {sorters.map(sorter => (
-                    <MenuItem
-                        key={sorter.label}
-                        onClick={() => {
-                            if (sorters && props.setSorters) {
-                                props.setSorters(sorter.value);
-                            }
-                        }}
-                    >
-                        {sorter.label}
-                    </MenuItem>
-                ))}
-            </Menu>
-        </ListHeaderItem>
-    );
-};
-
-const Filters = (props: DataListWithSectionsProps) => {
-    const filters = props.filters;
-    if (!filters) {
-        return null;
-    }
-
-    return (
-        <ListHeaderItem>
-            <Menu handle={<FilterIcon />}>{filters}</Menu>
-        </ListHeaderItem>
-    );
-};
-
-const Pagination = (props: DataListWithSectionsProps) => {
-    const { pagination } = props;
-    if (!pagination) {
-        return null;
-    }
-
-    return (
-        <React.Fragment>
-            {pagination.setNextPage && (
-                <React.Fragment>
-                    <ListHeaderItem
-                        className={classNames({
-                            disabled: !pagination.hasPreviousPage
-                        })}
-                    >
-                        <PreviousPageIcon
-                            onClick={() => {
-                                if (pagination.setPreviousPage && pagination.hasPreviousPage) {
-                                    pagination.setPreviousPage();
-                                }
-                            }}
-                        />
-                    </ListHeaderItem>
-
-                    <ListHeaderItem
-                        className={classNames({
-                            disabled: !pagination.hasNextPage
-                        })}
-                    >
-                        <NextPageIcon
-                            onClick={() => {
-                                if (pagination.setNextPage && pagination.hasNextPage) {
-                                    pagination.setNextPage();
-                                }
-                            }}
-                        />
-                    </ListHeaderItem>
-                </React.Fragment>
-            )}
-
-            {Array.isArray(pagination.perPageOptions) && pagination.setPerPage && (
-                <ListHeaderItem>
-                    <Menu handle={<OptionsIcon />}>
-                        {pagination.setPerPage &&
-                            pagination.perPageOptions.map(perPage => (
-                                <MenuItem
-                                    key={perPage}
-                                    onClick={() =>
-                                        pagination.setPerPage && pagination.setPerPage(perPage)
-                                    }
-                                >
-                                    {perPage}
-                                </MenuItem>
-                            ))}
-                    </Menu>
-                </ListHeaderItem>
-            )}
-        </React.Fragment>
-    );
-};
-
-const Search = (props: DataListWithSectionsProps) => {
-    if (!props.search) {
-        return null;
-    }
-    return <Cell span={7}>{React.cloneElement(props.search, props)}</Cell>;
-};
-
-const dataListWithSectionsDefaultProps = {
-    children: null,
-    title: null,
-    data: null,
-    meta: null,
-    loading: false,
-    refresh: () => {
-        return void 0;
-    },
-    setPage: null,
-    setPerPage: null,
-    perPageOptions: [10, 25, 50],
-    filters: null,
-    sorters: null,
-    setSorters: null,
-    actions: null,
-    multiSelectAll: noop,
-    isAllMultiSelected: () => false,
-    isNoneMultiSelected: () => false,
-    loader: <Loader />,
-    noData: <NoData />,
-    showOptions: {
-        refresh: true,
-        pagination: true,
-        sorters: true,
-        filters: true
-    }
-};
-
-export const DataListWithSections = (propsInput: DataListWithSectionsProps) => {
-    let render: React.ReactNode | null;
-
-    const props = useMemo(() => {
-        return {
-            ...dataListWithSectionsDefaultProps,
-            ...propsInput
-        };
-    }, [propsInput]);
-
-    if (props.loading) {
-        render = props.loader;
-    } else if (isEmpty(props.data)) {
-        render = props.noData;
-    } else {
-        const ch = props.children;
-        render = typeof ch === "function" ? ch(props) : null;
-    }
-
-    const showOptions = props.showOptions || {};
-
-    const listHeaderActionsCellSpan = props.actions ? 7 : 0;
-    const listHeaderTitleCellSpan = 12 - listHeaderActionsCellSpan;
-
-    return (
-        <DataListModalOverlayProvider>
-            <ListContainer className={"webiny-data-list"} data-testid={"ui.list.data-list"}>
-                {(props.title || props.actions) && (
-                    <Grid className={listHeader}>
-                        <Cell span={listHeaderTitleCellSpan} className={listTitle}>
-                            <Typography use="headline5">{props.title}</Typography>
-                        </Cell>
-                        {props.actions && (
-                            <Cell span={listHeaderActionsCellSpan} className={listActions}>
-                                {props.actions}
-                            </Cell>
-                        )}
-                    </Grid>
-                )}
-
-                {Object.keys(showOptions).length > 0 && (
-                    <Grid className={listSubHeader}>
-                        <Search {...props} />
-                        <Cell span={props.search ? 5 : 12} style={{ justifySelf: "end" }}>
-                            <MultiSelectAll {...props} />
-                            {showOptions.refresh && <RefreshButton {...props} />}
-                            {showOptions.pagination && <Pagination {...props} />}
-                            {showOptions.sorters && <Sorters {...props} />}
-                            {showOptions.filters && <Filters {...props} />}
-                            {props.modalOverlayAction ? (
-                                <ListHeaderItem>{props.modalOverlayAction}</ListHeaderItem>
-                            ) : null}
-                            <MultiSelectActions {...props} />
-                        </Cell>
-                    </Grid>
-                )}
-
-                <div className={classNames(dataListContent, "webiny-data-list__content")}>
-                    {props.subHeader}
-                    {render}
-                    {props.modalOverlay}
-                </div>
-            </ListContainer>
-        </DataListModalOverlayProvider>
-    );
+/**
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please use the `DataList` component from the `@webiny/admin-ui` package instead.
+ */
+export const DataListWithSections = (props: DataListProps<DataListData>) => {
+    return <AdminDataListWithSections {...props} />;
 };
 
 interface ScrollListWithSectionsProps extends ListProps {
     children: React.ReactElement<typeof ListItem>[];
 }
 
+/**
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please use the `List` component from the `@webiny/admin-ui` package instead.
+ */
 export const ScrollListWithSections = (props: ScrollListWithSectionsProps) => {
-    return (
-        <List {...props} className={classNames(props.className, scrollList)}>
-            {props.children}
-        </List>
-    );
+    return <List {...props} />;
 };
diff --git a/packages/ui/src/List/DataList/Loader.tsx b/packages/ui/src/List/DataList/Loader.tsx
deleted file mode 100644
index a77f9960837..00000000000
--- a/packages/ui/src/List/DataList/Loader.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-import React, { ReactElement } from "react";
-import styled from "@emotion/styled";
-
-import { Skeleton } from "~/Skeleton";
-
-const LoaderUl = styled("ul")`
-    list-style: none;
-    padding: 24px 20px;
-`;
-
-const LoaderWrapper = styled("div")`
-    margin-bottom: 16px;
-    display: flex;
-    width: 100%;
-    align-items: center;
-    justify-content: space-around;
-`;
-
-const Graphic = styled("div")`
-    width: 36px;
-`;
-
-const Data = styled("div")`
-    width: calc(-42px + 75%);
-
-    .data-skeleton-container {
-        height: 36px;
-        display: flex;
-        flex-direction: column;
-        justify-content: space-between;
-    }
-`;
-
-const Actions = styled("div")`
-    width: calc(-42px + 25%);
-    margin-left: 10px;
-    text-align: right;
-
-    .actions-skeleton-container {
-        height: 24px;
-        display: flex;
-        justify-content: end;
-    }
-
-    .actions-skeleton {
-        width: 24px;
-        height: 24px;
-        margin-left: 16px;
-    }
-`;
-
-const Loader = (): ReactElement => {
-    const lines = Array.from(Array(5).keys());
-
-    return (
-        <LoaderUl data-testid={"default-data-list.loading"}>
-            {lines.map(line => (
-                <li key={"list-" + line}>
-                    <LoaderWrapper>
-                        <Graphic>
-                            <Skeleton height={36} />
-                        </Graphic>
-                        <Data>
-                            <Skeleton
-                                inline={true}
-                                count={2}
-                                containerClassName={"data-skeleton-container"}
-                            />
-                        </Data>
-                        <Actions>
-                            <Skeleton
-                                inline={true}
-                                count={2}
-                                className={"actions-skeleton"}
-                                containerClassName={"actions-skeleton-container"}
-                            />
-                        </Actions>
-                    </LoaderWrapper>
-                </li>
-            ))}
-        </LoaderUl>
-    );
-};
-
-export default Loader;
diff --git a/packages/ui/src/List/DataList/NoData.tsx b/packages/ui/src/List/DataList/NoData.tsx
deleted file mode 100644
index eb72837865f..00000000000
--- a/packages/ui/src/List/DataList/NoData.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from "react";
-import { Typography } from "../../Typography";
-import styled from "@emotion/styled";
-
-const NoDataWrapper = styled("div")({
-    textAlign: "center",
-    padding: 100,
-    color: "var(--mdc-theme-on-surface)"
-});
-
-const NoData = () => (
-    <NoDataWrapper>
-        <Typography use="overline">No records found.</Typography>
-    </NoDataWrapper>
-);
-
-export default NoData;
diff --git a/packages/ui/src/List/DataList/README.md b/packages/ui/src/List/DataList/README.md
deleted file mode 100644
index 5b2b13dc96d..00000000000
--- a/packages/ui/src/List/DataList/README.md
+++ /dev/null
@@ -1,17 +0,0 @@
-# DataList
-
-### Description
-
-Use `DataList` component to display paginated data and provide actions for switching pages, filters, and sorters.
-
-### Import
-
-```js
-import { DataList } from "@webiny/ui/DataList";
-```
-
-Also note, before using `DeleteIcon` and `EditIcon` components, import them with following statement:
-
-```js
-import { DeleteIcon, EditIcon } from "@webiny/ui/DataList/icons";
-```
diff --git a/packages/ui/src/List/DataList/icons/baseline-autorenew-24px.svg b/packages/ui/src/List/DataList/icons/baseline-autorenew-24px.svg
deleted file mode 100644
index f79fa263d10..00000000000
--- a/packages/ui/src/List/DataList/icons/baseline-autorenew-24px.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-    <path d="M12 6v3l4-4-4-4v3c-4.42 0-8 3.58-8 8 0 1.57.46 3.03 1.24 4.26L6.7 14.8c-.45-.83-.7-1.79-.7-2.8 0-3.31 2.69-6 6-6zm6.76 1.74L17.3 9.2c.44.84.7 1.79.7 2.8 0 3.31-2.69 6-6 6v-3l-4 4 4 4v-3c4.42 0 8-3.58 8-8 0-1.57-.46-3.03-1.24-4.26z"/>
-    <path d="M0 0h24v24H0z" fill="none"/>
-</svg>
diff --git a/packages/ui/src/List/DataList/icons/baseline-delete-24px.svg b/packages/ui/src/List/DataList/icons/baseline-delete-24px.svg
deleted file mode 100644
index 9308f4df566..00000000000
--- a/packages/ui/src/List/DataList/icons/baseline-delete-24px.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-    <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/>
-    <path d="M0 0h24v24H0z" fill="none"/>
-</svg>
diff --git a/packages/ui/src/List/DataList/icons/baseline-edit-24px.svg b/packages/ui/src/List/DataList/icons/baseline-edit-24px.svg
deleted file mode 100644
index 015dc1bcd42..00000000000
--- a/packages/ui/src/List/DataList/icons/baseline-edit-24px.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-    <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/>
-    <path d="M0 0h24v24H0z" fill="none"/>
-</svg>
diff --git a/packages/ui/src/List/DataList/icons/baseline-navigate_before-24px.svg b/packages/ui/src/List/DataList/icons/baseline-navigate_before-24px.svg
deleted file mode 100644
index 050d3785e48..00000000000
--- a/packages/ui/src/List/DataList/icons/baseline-navigate_before-24px.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-    <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
-    <path d="M0 0h24v24H0z" fill="none"/>
-</svg>
diff --git a/packages/ui/src/List/DataList/icons/baseline-navigate_next-24px.svg b/packages/ui/src/List/DataList/icons/baseline-navigate_next-24px.svg
deleted file mode 100644
index 22c6db123a3..00000000000
--- a/packages/ui/src/List/DataList/icons/baseline-navigate_next-24px.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-    <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
-    <path d="M0 0h24v24H0z" fill="none"/>
-</svg>
diff --git a/packages/ui/src/List/DataList/icons/baseline-sort-24px.svg b/packages/ui/src/List/DataList/icons/baseline-sort-24px.svg
deleted file mode 100644
index 6710a90436a..00000000000
--- a/packages/ui/src/List/DataList/icons/baseline-sort-24px.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-    <path d="M3 18h6v-2H3v2zM3 6v2h18V6H3zm0 7h12v-2H3v2z"/>
-    <path d="M0 0h24v24H0z" fill="none"/>
-</svg>
diff --git a/packages/ui/src/List/DataList/icons/baseline-tune-24px.svg b/packages/ui/src/List/DataList/icons/baseline-tune-24px.svg
deleted file mode 100644
index 44ac8fd1f98..00000000000
--- a/packages/ui/src/List/DataList/icons/baseline-tune-24px.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-    <path d="M0 0h24v24H0z" fill="none"/>
-    <path d="M3 17v2h6v-2H3zM3 5v2h10V5H3zm10 16v-2h8v-2h-8v-2h-2v6h2zM7 9v2H3v2h4v2h2V9H7zm14 4v-2H11v2h10zm-6-4h2V7h4V5h-4V3h-2v6z"/>
-</svg>
diff --git a/packages/ui/src/List/DataList/icons/filter_alt-24px.svg b/packages/ui/src/List/DataList/icons/filter_alt-24px.svg
deleted file mode 100644
index 741d6403742..00000000000
--- a/packages/ui/src/List/DataList/icons/filter_alt-24px.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24" viewBox="0 0 24 24" width="24"><g><path d="M0,0h24 M24,24H0" fill="none"/><path d="M4.25,5.61C6.57,8.59,10,13,10,13v5c0,1.1,0.9,2,2,2h0c1.1,0,2-0.9,2-2v-5c0,0,3.43-4.41,5.75-7.39 C20.26,4.95,19.79,4,18.95,4H5.04C4.21,4,3.74,4.95,4.25,5.61z"/><path d="M0,0h24v24H0V0z" fill="none"/></g></svg>
\ No newline at end of file
diff --git a/packages/ui/src/List/DataList/icons/index.tsx b/packages/ui/src/List/DataList/icons/index.tsx
index 7a2f1873a86..f575b8046bb 100644
--- a/packages/ui/src/List/DataList/icons/index.tsx
+++ b/packages/ui/src/List/DataList/icons/index.tsx
@@ -1,50 +1 @@
-import React from "react";
-import { IconButton, IconButtonProps as BaseIconProps } from "../../../Button";
-import { ReactComponent as AutoRenew } from "./baseline-autorenew-24px.svg";
-import { ReactComponent as Pen } from "./baseline-edit-24px.svg";
-import { ReactComponent as Delete } from "./baseline-delete-24px.svg";
-import { ReactComponent as Sort } from "./baseline-sort-24px.svg";
-import { ReactComponent as Filter } from "./filter_alt-24px.svg";
-import { ReactComponent as NavigateBefore } from "./baseline-navigate_before-24px.svg";
-import { ReactComponent as NavigateNext } from "./baseline-navigate_next-24px.svg";
-import { ReactComponent as TuneIcon } from "./baseline-tune-24px.svg";
-
-type IconButtonProps = Omit<BaseIconProps, "icon"> & {
-    icon?: React.ReactElement<any>;
-};
-
-export const RefreshIcon = (props: IconButtonProps) => {
-    return <IconButton icon={<AutoRenew />} {...props} />;
-};
-
-export const DeleteIcon = (props: IconButtonProps) => {
-    return <IconButton icon={<Delete />} {...props} />;
-};
-
-export const CreateIcon = (props: IconButtonProps) => {
-    return <IconButton icon={<Pen />} {...props} />;
-};
-
-export const EditIcon = (props: IconButtonProps) => {
-    return <IconButton icon={<Pen />} {...props} />;
-};
-
-export const SortIcon = (props: IconButtonProps) => {
-    return <IconButton icon={<Sort />} {...props} />;
-};
-
-export const FilterIcon = (props: IconButtonProps) => {
-    return <IconButton icon={<Filter />} {...props} />;
-};
-
-export const PreviousPageIcon = (props: IconButtonProps) => {
-    return <IconButton icon={<NavigateBefore />} {...props} />;
-};
-
-export const NextPageIcon = (props: IconButtonProps) => {
-    return <IconButton icon={<NavigateNext />} {...props} />;
-};
-
-export const OptionsIcon = (props: IconButtonProps) => {
-    return <IconButton icon={<TuneIcon />} {...props} />;
-};
+export * from "@webiny/admin-ui/DataList/DataListIcons";
diff --git a/packages/ui/src/List/DataList/icons/round-more_vert-24px.svg b/packages/ui/src/List/DataList/icons/round-more_vert-24px.svg
deleted file mode 100644
index b92cdd99458..00000000000
--- a/packages/ui/src/List/DataList/icons/round-more_vert-24px.svg
+++ /dev/null
@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px"
-	 height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
-<g id="Bounding_Boxes">
-	<path fill="none" d="M0,0h24v24H0V0z"/>
-</g>
-<g id="Rounded">
-	<path d="M12,8c1.1,0,2-0.9,2-2s-0.9-2-2-2s-2,0.9-2,2S10.9,8,12,8z M12,10c-1.1,0-2,0.9-2,2s0.9,2,2,2s2-0.9,2-2S13.1,10,12,10z
-		 M12,16c-1.1,0-2,0.9-2,2s0.9,2,2,2s2-0.9,2-2S13.1,16,12,16z"/>
-</g>
-</svg>
diff --git a/packages/ui/src/List/DataList/index.ts b/packages/ui/src/List/DataList/index.ts
index b6ba45e1312..19f10de65fd 100644
--- a/packages/ui/src/List/DataList/index.ts
+++ b/packages/ui/src/List/DataList/index.ts
@@ -1,4 +1,3 @@
 export { DataList, ScrollList } from "./DataList";
 export { DataListWithSections, ScrollListWithSections } from "./DataListWithSections";
-export { default as NoData } from "./NoData";
 export * from "./DataListModalOverlay";
diff --git a/packages/ui/src/List/DataList/types.ts b/packages/ui/src/List/DataList/types.ts
index 4a3be190433..5e832749c3c 100644
--- a/packages/ui/src/List/DataList/types.ts
+++ b/packages/ui/src/List/DataList/types.ts
@@ -1,63 +1 @@
-import React from "react";
-
-export type PaginationProp = {
-    // Triggered when a page is about to be changed.
-    setPage?: (page: number) => void;
-
-    // Triggered when previous page is requested.
-    setPreviousPage?: () => void;
-
-    // Triggered when next page is requested.
-    setNextPage?: () => void;
-
-    // Triggered internally when in need to determine if there is a next page and apply UI changes accordingly.
-    hasNextPage?: boolean;
-
-    // Triggered internally when in need to determine if there is a previous page and apply UI changes accordingly.
-    hasPreviousPage?: boolean;
-
-    // Triggered when number of entries per page has been changed.
-    setPerPage?: (amount: number) => void;
-
-    // By default, users can choose from 10, 25 or 50 entries per page.
-    perPageOptions?: number[];
-};
-
-export type SortersProp = Array<{ label: string; value: any }>;
-
-export type Props = {
-    // Pass a function to take full control of list render.
-    children?: <T = Record<string, any>>(props: T) => React.ReactNode;
-
-    // A title of paginated list.
-    title?: React.ReactNode;
-
-    // FormData that needs to be shown in the list.
-    data?: Record<string, any>[];
-
-    // A callback that must refresh current view by repeating the previous query.
-    refresh?: () => void;
-
-    // If true, Loader component will be shown, disallowing any interaction.
-    loading?: boolean;
-
-    // Provide a custom loader. Shown while the content is being loaded.
-    loader?: React.ReactNode;
-
-    // Provide all pagination data, options and callbacks here.
-    pagination?: PaginationProp;
-
-    // Triggered once the page has been selected.
-    setPage?: (page: string) => void;
-
-    // Triggered once a sorter has been selected.
-    setSorters?: (sorter: any) => void;
-
-    // Triggered once selected filters are submitted.
-    setFilters?: (filters: any) => void;
-
-    // Provide all sorters options and callbacks here.
-    sorters?: SortersProp;
-
-    multiActions?: any[]; // TODO: define
-};
+export * from "@webiny/admin-ui/DataList/types";
diff --git a/packages/ui/src/List/List.tsx b/packages/ui/src/List/List.tsx
deleted file mode 100644
index 4d7aaeb09ca..00000000000
--- a/packages/ui/src/List/List.tsx
+++ /dev/null
@@ -1,225 +0,0 @@
-import React from "react";
-import {
-    List as RmwcList,
-    ListProps as RmwcListProps,
-    ListItem as RmwcListItem,
-    ListItemProps as RmwcListItemProps,
-    ListItemText as RmwcListItemText,
-    ListItemTextProps as RmwcListItemTextProps,
-    ListItemPrimaryText as RmwcListItemPrimaryText,
-    ListItemSecondaryText as RmwcListItemSecondaryText,
-    SimpleListItem as RmwcSimpleListItem,
-    SimpleListItemProps as RmwcSimpleListItemProps
-} from "@rmwc/list";
-import { Typography } from "~/Typography";
-import classNames from "classnames";
-import { SelectBoxWrapper, webinyList } from "./styled";
-
-export type ListItemProps = RmwcListItemProps & {
-    children: React.ReactNode;
-    className?: string;
-    style?: React.CSSProperties;
-    onClick?: (e: React.MouseEvent) => void;
-};
-
-/**
- * ListItem components are placed as direct children to List component.
- * @param props
- * @returns {*}
- * @constructor
- */
-export const ListItem = (props: ListItemProps) => {
-    return <RmwcListItem {...props} />;
-};
-
-export type ListProps = RmwcListProps & {
-    children?: any;
-
-    className?: string;
-
-    style?: React.CSSProperties;
-};
-
-/**
- * Use List component to display data and offer additional actions if needed.
- */
-export class List extends React.Component<ListProps> {
-    public override render() {
-        return (
-            <RmwcList {...this.props} className={classNames(webinyList, this.props.className)}>
-                {this.props.children}
-            </RmwcList>
-        );
-    }
-}
-
-export type ListItemTextProps = RmwcListItemTextProps & {
-    children: React.ReactNode;
-    className?: string;
-    onClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
-};
-
-/**
- * Used to show regular text in list items.
- * @param props
- * @returns {*}
- * @constructor
- */
-export const ListItemText = (props: ListItemTextProps) => {
-    return <RmwcListItemText {...props}>{props.children}</RmwcListItemText>;
-};
-
-export type ListItemTextPrimaryProps = {
-    /**
-     * Text content
-     */
-    children: React.ReactNode;
-};
-
-export const ListItemTextPrimary = (props: ListItemTextPrimaryProps) => {
-    return <RmwcListItemPrimaryText>{props.children}</RmwcListItemPrimaryText>;
-};
-
-export type ListItemTextSecondaryProps = {
-    /**
-     * Text content
-     */
-    children: React.ReactNode;
-};
-
-/**
- * Used to show secondary text in list items.
- * @param props
- * @returns {*}
- * @constructor
- */
-export const ListItemTextSecondary = (props: ListItemTextSecondaryProps) => {
-    return <RmwcListItemSecondaryText>{props.children}</RmwcListItemSecondaryText>;
-};
-
-export type ListItemGraphicProps = { children: React.ReactNode; className?: string };
-
-/**
- * Can be used to show an icon or any other custom element. Rendered on the left side.
- * @param props
- * @returns {*}
- * @constructor
- */
-export const ListItemGraphic = (props: ListItemGraphicProps) => {
-    return (
-        <div
-            {...props}
-            className={classNames("mdc-deprecated-list-item__graphic", props.className)}
-        >
-            {props.children}
-        </div>
-    );
-};
-
-export type ListItemMetaProps = { children: React.ReactNode; className?: string };
-
-/**
- * Can be used to show an icon or any other custom element. Rendered on the right side.
- * @param props
- * @returns {*}
- * @constructor
- */
-export const ListItemMeta = (props: ListItemMetaProps) => {
-    return (
-        <span {...props} className={classNames("mdc-deprecated-list-item__meta", props.className)}>
-            {props.children}
-        </span>
-    );
-};
-
-export type ListTopCaptionProps = {
-    children: React.ReactNode;
-};
-
-/**
- * Can be used to show a top caption inside ListItemMeta component.
- * @param props
- * @returns {*}
- * @constructor
- */
-export const ListTopCaption = (props: ListTopCaptionProps) => {
-    return (
-        <span {...props} className={"webiny-list-top-caption"}>
-            <Typography use="overline">{props.children}</Typography>
-        </span>
-    );
-};
-
-export type ListBottomCaptionProps = {
-    children: React.ReactNode;
-};
-
-/**
- * Can be used to show a bottom caption inside ListItemMeta component.
- * @param props
- * @returns {*}
- * @constructor
- */
-export const ListBottomCaption = (props: ListBottomCaptionProps) => {
-    return (
-        <span {...props} className={"webiny-list-bottom-caption"}>
-            <Typography use="overline">{props.children}</Typography>
-        </span>
-    );
-};
-
-export type ListTextOverlineProps = {
-    children: React.ReactNode;
-};
-
-/**
- * Can be used to show an overline text inside ListItem component.
- * @param props
- * @returns {*}
- * @constructor
- */
-export const ListTextOverline = (props: ListTextOverlineProps) => {
-    return (
-        <span {...props} className={"webiny-list-text-overline"}>
-            <Typography use="overline">{props.children}</Typography>
-        </span>
-    );
-};
-
-export type ListActionsProps = {
-    children: React.ReactNode;
-};
-
-/**
- * Used to contain the actions inside ListItemMate component.
- * @param props
- * @returns {*}
- * @constructor
- */
-export const ListActions = (props: ListActionsProps) => {
-    return (
-        <span {...props} className={"webiny-list-actions"}>
-            {props.children}
-        </span>
-    );
-};
-
-export type ListSelectBoxProps = {
-    children: React.ReactNode;
-};
-
-/**
- * Used to hold the Checkbox element for multi-select options.
- * @param {*} props
- */
-export const ListSelectBox = (props: ListSelectBoxProps) => {
-    return (
-        <ListItemGraphic>
-            <SelectBoxWrapper>{props.children}</SelectBoxWrapper>
-        </ListItemGraphic>
-    );
-};
-
-export const SimpleListItem = (props: RmwcSimpleListItemProps & { onClick?: any }) => {
-    return <RmwcSimpleListItem {...props} />;
-};
diff --git a/packages/ui/src/List/List/List.tsx b/packages/ui/src/List/List/List.tsx
new file mode 100644
index 00000000000..77af66e8d25
--- /dev/null
+++ b/packages/ui/src/List/List/List.tsx
@@ -0,0 +1,56 @@
+import React from "react";
+import { List as AdminList } from "@webiny/admin-ui";
+
+/** A List Component */
+export type ListProps = {
+    /** Reduces the padding on List items. */
+    dense?: boolean;
+    /** Gives more space for dual lined list items. */
+    twoLine?: boolean;
+    /** Makes the list start detail circular for avatars. */
+    avatarList?: boolean;
+    /** Makes the list non interactive. In addition, you'll have to set `ripple={false}` on the individual ListItems. */
+    nonInteractive?: boolean;
+    /** A callback for when a list item is interacted with. evt.detail = number */
+    onAction?: (evt: CustomEvent<{ index: number }> & React.SyntheticEvent<EventTarget>) => void;
+    /** An internal api used for cross component communication */
+    apiRef?: (api: ListApi | null) => void;
+    /** Advanced: A reference to the MDCFoundation. */
+    foundationRef?: any;
+    /** Sets the list to allow the up arrow on the first element to focus the
+     * last element of the list and vice versa. Defaults to true */
+    wrapFocus?: boolean;
+    /** Sets the lists vertical orientation. Defaults to true */
+    vertical?: boolean;
+    /** Sets the selectedIndex for singleSelection, radiogroup, or checkboxlist variants. Only supply number[] to checkboxlists */
+    selectedIndex?: number[] | number;
+
+    /** Custom */
+    children?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+    onClick?: (e: React.MouseEvent) => void;
+};
+
+export interface ListApi {
+    listElements: () => HTMLLIElement[];
+    focusRoot: () => void;
+    getClasses: () => string;
+    addClassToElementIndex: (index: number, className: string) => void;
+    removeClassFromElementAtIndex: (index: number, className: string) => void;
+    setAttributeForElementIndex: (index: number, attr: string, value: any) => void;
+    getListItemCount: () => number;
+    focusItemAtIndex: (index: number) => void;
+    selectedIndex: number | number[];
+    setSelectedIndex: (index: number) => void;
+}
+
+/**
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please use the `List` component from the `@webiny/admin-ui` package instead.
+ */
+export class List extends React.Component<ListProps> {
+    public override render() {
+        return <AdminList>{this.props.children}</AdminList>;
+    }
+}
diff --git a/packages/ui/src/List/List/ListItem.tsx b/packages/ui/src/List/List/ListItem.tsx
new file mode 100644
index 00000000000..c459b0c5323
--- /dev/null
+++ b/packages/ui/src/List/List/ListItem.tsx
@@ -0,0 +1,151 @@
+import React, { createContext, useMemo, useState } from "react";
+import { List as AdminList, ListItemProps as AdminListItemProps } from "@webiny/admin-ui";
+
+/**
+ * Ripples
+ */
+export declare type RipplePropT =
+    | boolean
+    | {
+          accent?: boolean;
+          surface?: boolean;
+          unbounded?: boolean;
+      };
+
+/** A ListItem component. */
+export type ListItemProps = {
+    /** A modifier for a selected state. */
+    selected?: boolean;
+    /** A modifier for an active state. */
+    activated?: boolean;
+    /** A modifier for a disabled state. */
+    disabled?: boolean;
+    /** Adds a ripple effect to the component */
+    ripple?: RipplePropT;
+
+    /** Custom */
+    children: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+    onClick?: (e: React.MouseEvent) => void;
+};
+
+interface DeprecatedListItemContext {
+    addTitle(value: React.ReactNode): void;
+    addDescription(value?: React.ReactNode): void;
+    addIcon(value: React.ReactNode): void;
+    addActions(value?: React.ReactNode): void;
+    addOnClickCallback(callback: React.MouseEventHandler<HTMLDivElement>): void;
+}
+
+const initializeListItemState = (): AdminListItemProps => {
+    return {
+        title: undefined,
+        description: undefined,
+        actions: undefined,
+        icon: undefined,
+        onClick: undefined
+    };
+};
+
+export const DeprecatedListItemContext = createContext<DeprecatedListItemContext | undefined>(
+    undefined
+);
+
+/**
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please use the `List.Item` component from the `@webiny/admin-ui` package instead.
+ */
+export const ListItem = (props: ListItemProps) => {
+    const [item, setItem] = useState<AdminListItemProps>(initializeListItemState());
+
+    const context: DeprecatedListItemContext = useMemo(
+        () => ({
+            addTitle(value: React.ReactNode) {
+                setItem(state => ({
+                    ...state,
+                    title: value
+                }));
+            },
+            addDescription(value: React.ReactNode) {
+                setItem(state => ({
+                    ...state,
+                    description: value
+                }));
+            },
+            addIcon(value: React.ReactNode) {
+                setItem(state => ({
+                    ...state,
+                    icon: value
+                }));
+            },
+            addActions(value?: React.ReactNode) {
+                setItem(state => ({
+                    ...state,
+                    actions: value
+                }));
+            },
+            addOnClickCallback(callback: React.MouseEventHandler<HTMLDivElement>) {
+                setItem(state => ({
+                    ...state,
+                    onClick: callback
+                }));
+            }
+        }),
+        [setItem, props]
+    );
+
+    return (
+        <AdminList.Item
+            activated={props.activated}
+            disabled={props.disabled}
+            selected={props.selected}
+            onClick={item.onClick ?? props.onClick}
+            className={props.className}
+            style={props.style}
+            title={item.title}
+            description={item.description}
+            actions={item.actions}
+            icon={item.icon}
+        >
+            <DeprecatedListItemContext.Provider value={context}>
+                {props.children}
+            </DeprecatedListItemContext.Provider>
+        </AdminList.Item>
+    );
+};
+
+/** A simple list item template. */
+export interface SimpleListItemProps extends ListItemProps {
+    /** Text for the ListItem. */
+    text?: React.ReactNode;
+    /** Secondary Text for the ListItem. */
+    secondaryText?: React.ReactNode;
+    /** A graphic icon for the ListItem. */
+    graphic?: any;
+    /** A meta icon for the ListItem */
+    metaIcon?: any;
+    /** Meta content for the ListItem instead of an icon. */
+    meta?: React.ReactNode;
+    /** Children to render */
+    children: React.ReactNode;
+
+    /** Custom */
+    onClick?: any;
+}
+
+/**
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please use the `List.Item` component from the `@webiny/admin-ui` package instead.
+ */
+export const SimpleListItem = (props: SimpleListItemProps) => {
+    return (
+        <AdminList.Item
+            title={props.text}
+            description={props.secondaryText}
+            icon={props.graphic}
+            actions={props.meta ?? props.metaIcon}
+            onClick={props.onClick}
+        />
+    );
+};
diff --git a/packages/ui/src/List/List/ListItemAction.tsx b/packages/ui/src/List/List/ListItemAction.tsx
new file mode 100644
index 00000000000..5aa48a0bc02
--- /dev/null
+++ b/packages/ui/src/List/List/ListItemAction.tsx
@@ -0,0 +1,20 @@
+import React, { useContext, useEffect } from "react";
+import { DeprecatedListItemContext } from "~/List";
+
+export type ListActionsProps = {
+    children: React.ReactNode;
+};
+
+/**
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please find out the new `ListItem` component props from the `@webiny/admin-ui` package instead.
+ */
+export const ListActions = (props: ListActionsProps) => {
+    const listItemContext = useContext(DeprecatedListItemContext);
+
+    useEffect(() => {
+        listItemContext!.addActions(props.children);
+    }, [props]);
+
+    return null;
+};
diff --git a/packages/ui/src/List/List/ListItemGraphic.tsx b/packages/ui/src/List/List/ListItemGraphic.tsx
new file mode 100644
index 00000000000..d4ed947f78f
--- /dev/null
+++ b/packages/ui/src/List/List/ListItemGraphic.tsx
@@ -0,0 +1,36 @@
+import React, { useContext, useEffect } from "react";
+import { DeprecatedListItemContext } from "~/List";
+
+export type ListItemGraphicProps = { children: React.ReactNode; className?: string };
+
+/**
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please find out the new `ListItem` component props from the `@webiny/admin-ui` package instead.
+ */
+export const ListItemGraphic = (props: ListItemGraphicProps) => {
+    const listItemContext = useContext(DeprecatedListItemContext);
+
+    useEffect(() => {
+        listItemContext!.addIcon(props.children);
+    }, [props]);
+
+    return null;
+};
+
+export type ListSelectBoxProps = {
+    children: React.ReactNode;
+};
+
+/**
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please find out the new `ListItem` component props from the `@webiny/admin-ui` package instead.
+ */
+export const ListSelectBox = (props: ListSelectBoxProps) => {
+    const listItemContext = useContext(DeprecatedListItemContext);
+
+    useEffect(() => {
+        listItemContext!.addIcon(props.children);
+    }, [props]);
+
+    return null;
+};
diff --git a/packages/ui/src/List/List/ListItemMeta.tsx b/packages/ui/src/List/List/ListItemMeta.tsx
new file mode 100644
index 00000000000..7601eec4a26
--- /dev/null
+++ b/packages/ui/src/List/List/ListItemMeta.tsx
@@ -0,0 +1,35 @@
+import React from "react";
+
+export type ListItemMetaProps = { children: React.ReactNode; className?: string };
+
+/**
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please find out the new `ListItem` component props from the `@webiny/admin-ui` package instead.
+ */
+export const ListItemMeta = (props: ListItemMetaProps) => {
+    return <span {...props}>{props.children}</span>;
+};
+
+export type ListTopCaptionProps = {
+    children: React.ReactNode;
+};
+
+/**
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please find out the new `ListItem` component props from the `@webiny/admin-ui` package instead.
+ */
+export const ListTopCaption = ({}: ListTopCaptionProps) => {
+    return null;
+};
+
+export type ListBottomCaptionProps = {
+    children: React.ReactNode;
+};
+
+/**
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please find out the new `ListItem` component props from the `@webiny/admin-ui` package instead.
+ */
+export const ListBottomCaption = ({}: ListBottomCaptionProps) => {
+    return null;
+};
diff --git a/packages/ui/src/List/List/ListItemText.tsx b/packages/ui/src/List/List/ListItemText.tsx
new file mode 100644
index 00000000000..2b398b99659
--- /dev/null
+++ b/packages/ui/src/List/List/ListItemText.tsx
@@ -0,0 +1,83 @@
+import React, { useContext, useEffect } from "react";
+import { DeprecatedListItemContext } from "~/List";
+
+/** Text Wrapper for the ListItem */
+export type ListItemTextProps = {
+    children: React.ReactNode;
+    className?: string;
+    onClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+};
+
+/**
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please find out the new `ListItem` component props from the `@webiny/admin-ui` package instead.
+ */
+export const ListItemText = (props: ListItemTextProps) => {
+    const listItemContext = useContext(DeprecatedListItemContext);
+
+    useEffect(() => {
+        props.onClick && listItemContext!.addOnClickCallback(props.onClick);
+    }, [props]);
+
+    return props.children;
+};
+
+export type ListItemTextPrimaryProps = {
+    /**
+     * Text content
+     */
+    children: React.ReactNode;
+};
+
+/**
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please find out the new `ListItem` component props from the `@webiny/admin-ui` package instead.
+ */
+export const ListItemTextPrimary = (props: ListItemTextPrimaryProps) => {
+    const listItemContext = useContext(DeprecatedListItemContext);
+
+    useEffect(() => {
+        listItemContext!.addTitle(props.children);
+    }, [props]);
+
+    return null;
+};
+
+export type ListItemTextSecondaryProps = {
+    /**
+     * Text content
+     */
+    children: React.ReactNode;
+};
+
+/**
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please find out the new `ListItem` component props from the `@webiny/admin-ui` package instead.
+ */
+export const ListItemTextSecondary = (props: ListItemTextSecondaryProps) => {
+    const listItemContext = useContext(DeprecatedListItemContext);
+
+    useEffect(() => {
+        listItemContext!.addDescription(props.children);
+    }, [props]);
+
+    return null;
+};
+
+export type ListTextOverlineProps = {
+    children: React.ReactNode;
+};
+
+/**
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please find out the new `ListItem` component props from the `@webiny/admin-ui` package instead.
+ */
+export const ListTextOverline = (props: ListTextOverlineProps) => {
+    const listItemContext = useContext(DeprecatedListItemContext);
+
+    useEffect(() => {
+        listItemContext!.addDescription(props.children);
+    }, [props]);
+
+    return null;
+};
diff --git a/packages/ui/src/List/List/index.ts b/packages/ui/src/List/List/index.ts
new file mode 100644
index 00000000000..b90931de441
--- /dev/null
+++ b/packages/ui/src/List/List/index.ts
@@ -0,0 +1,6 @@
+export * from "./List";
+export * from "./ListItem";
+export * from "./ListItemAction";
+export * from "./ListItemGraphic";
+export * from "./ListItemMeta";
+export * from "./ListItemText";
diff --git a/packages/ui/src/List/README.md b/packages/ui/src/List/README.md
deleted file mode 100644
index 3fefaed9988..00000000000
--- a/packages/ui/src/List/README.md
+++ /dev/null
@@ -1,22 +0,0 @@
-# List
-
-### Design
-
-<a href="https://material.io/design/components/lists.html" target="_blank">https://material.io/design/components/lists.html</a>
-
-### Description
-
-Use `List` component to display data and offer additional actions if needed.
-
-### Import
-
-```js
-import {
-  List,
-  ListItem,
-  ListItemText,
-  ListItemTextSecondary,
-  ListItemGraphic,
-  ListItemMeta
-} from "@webiny/ui/List";
-```
diff --git a/packages/ui/src/List/icons/baseline-autorenew-24px.svg b/packages/ui/src/List/icons/baseline-autorenew-24px.svg
deleted file mode 100644
index f79fa263d10..00000000000
--- a/packages/ui/src/List/icons/baseline-autorenew-24px.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-    <path d="M12 6v3l4-4-4-4v3c-4.42 0-8 3.58-8 8 0 1.57.46 3.03 1.24 4.26L6.7 14.8c-.45-.83-.7-1.79-.7-2.8 0-3.31 2.69-6 6-6zm6.76 1.74L17.3 9.2c.44.84.7 1.79.7 2.8 0 3.31-2.69 6-6 6v-3l-4 4 4 4v-3c4.42 0 8-3.58 8-8 0-1.57-.46-3.03-1.24-4.26z"/>
-    <path d="M0 0h24v24H0z" fill="none"/>
-</svg>
diff --git a/packages/ui/src/List/icons/baseline-cloud_done-24px.svg b/packages/ui/src/List/icons/baseline-cloud_done-24px.svg
deleted file mode 100644
index ef9bea0eed4..00000000000
--- a/packages/ui/src/List/icons/baseline-cloud_done-24px.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-    <path d="M0 0h24v24H0z" fill="none"/>
-    <path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM10 17l-3.5-3.5 1.41-1.41L10 14.17 15.18 9l1.41 1.41L10 17z"/>
-</svg>
diff --git a/packages/ui/src/List/icons/baseline-delete-24px.svg b/packages/ui/src/List/icons/baseline-delete-24px.svg
deleted file mode 100644
index 9308f4df566..00000000000
--- a/packages/ui/src/List/icons/baseline-delete-24px.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-    <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/>
-    <path d="M0 0h24v24H0z" fill="none"/>
-</svg>
diff --git a/packages/ui/src/List/icons/baseline-done-24px.svg b/packages/ui/src/List/icons/baseline-done-24px.svg
deleted file mode 100644
index 8541f456ba6..00000000000
--- a/packages/ui/src/List/icons/baseline-done-24px.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-    <path fill="none" d="M0 0h24v24H0z"/>
-    <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/>
-</svg>
diff --git a/packages/ui/src/List/icons/baseline-email-24px.svg b/packages/ui/src/List/icons/baseline-email-24px.svg
deleted file mode 100644
index e1560c6374d..00000000000
--- a/packages/ui/src/List/icons/baseline-email-24px.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-    <path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/>
-    <path d="M0 0h24v24H0z" fill="none"/>
-</svg>
diff --git a/packages/ui/src/List/icons/index.ts b/packages/ui/src/List/icons/index.ts
deleted file mode 100644
index 0114c4ff86d..00000000000
--- a/packages/ui/src/List/icons/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import refreshIcon from "./baseline-autorenew-24px.svg";
-import deleteIcon from "./baseline-delete-24px.svg";
-
-export { refreshIcon, deleteIcon };
diff --git a/packages/ui/src/List/index.ts b/packages/ui/src/List/index.ts
index 4dff4047ba5..81de6052838 100644
--- a/packages/ui/src/List/index.ts
+++ b/packages/ui/src/List/index.ts
@@ -8,4 +8,5 @@ export {
     DataListWithSections,
     ScrollListWithSections
 } from "./DataList";
+export * from "./DataList/icons";
 export { CollapsibleList } from "./CollapsibleList";
diff --git a/packages/ui/src/List/styled.tsx b/packages/ui/src/List/styled.tsx
deleted file mode 100644
index a5e5434e34b..00000000000
--- a/packages/ui/src/List/styled.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import styled from "@emotion/styled";
-import { css } from "emotion";
-
-export const SelectBoxWrapper = styled.div`
-    overflow: hidden;
-    width: 25px;
-    height: 25px;
-    display: flex;
-    position: relative;
-    align-items: center;
-    justify-content: center;
-`;
-
-export const webinyList = css`
-    // Remove ripple effect on non-interactive list
-    &.mdc-deprecated-list--non-interactive .mdc-deprecated-list-item {
-        cursor: default;
-
-        > .mdc-deprecated-list-item__ripple::after,
-        > .mdc-deprecated-list-item__ripple::before {
-            display: none;
-        }
-    }
-`;
diff --git a/packages/ui/src/Menu/Menu.tsx b/packages/ui/src/Menu/Menu.tsx
index 24e59147edc..472b7f545fe 100644
--- a/packages/ui/src/Menu/Menu.tsx
+++ b/packages/ui/src/Menu/Menu.tsx
@@ -1,21 +1,6 @@
-import React, { useState, useEffect, useCallback } from "react";
-import {
-    Menu as BaseMenu,
-    MenuProps as RmwcMenuProps,
-    MenuItem as BaseMenuItem,
-    MenuItemProps as BaseMenuItemProps,
-    MenuSurface,
-    MenuSurfaceAnchor
-} from "@rmwc/menu";
-import { css } from "emotion";
-import classNames from "classnames";
-
-const style = {
-    disabledMenuItem: css({
-        opacity: 0.5,
-        pointerEvents: "none"
-    })
-};
+import React, { useMemo } from "react";
+import { DropdownMenu as AdminUiDropdownMenu } from "@webiny/admin-ui/DropdownMenu";
+import { ListItemGraphic } from "~/List";
 
 export type MenuChildrenFunctionProps = {
     closeMenu: () => void;
@@ -25,10 +10,41 @@ export interface RenderableMenuChildren {
     (props: MenuChildrenFunctionProps): React.ReactNode;
 }
 
-export type MenuProps = Omit<RmwcMenuProps, "children"> & {
+export interface BaseMenuItemProps {
+    /** Adds a ripple effect to the component */
+    ripple?: any;
+    /** A modifier for a selected state. */
+    selected?: boolean;
+    /** A modifier for an active state. */
+    activated?: boolean;
+    /** A modifier for a disabled state. */
+    disabled?: boolean;
+}
+
+export type MenuProps = {
+    /** Opens the menu. */
+    open?: boolean;
+    /** Make the menu position fixed. */
+    fixed?: boolean;
+    /** Renders the menu to a portal. Useful for situations where the content might be cutoff by an overflow: hidden container. You can pass "true" to render to the default RMWC portal. */
+    renderToPortal?: any;
+    /** Manually position the menu to one of the corners. */
+    anchorCorner?: any;
+    /** Children to render. */
+    children?: React.ReactNode;
+    /** An internal api for cross component communication. */
+    apiRef?: (api: any | null) => void;
+    /** Advanced: A reference to the MDCFoundation. */
+    foundationRef?: any;
+    /** Callback that fires when a Menu item is selected. evt.detail = { index: number; item: HTMLElement; } */
+    onSelect?: (evt: any) => void;
+    /** Whether or not to focus the first list item on open. Defaults to true. */
+    focusOnOpen?: boolean;
+
     // A handler which triggers the menu, e.g. button or link.
     handle?: React.ReactElement;
 
+    // @deprecated With the introduction of the new Admin UI, this prop is no longer supported, and it will be removed in future releases.
     // Position the menu to one of anchor corners.
     // 'bottomEnd' | 'bottomLeft' | 'bottomRight' | 'bottomStart' | 'topEnd' | 'topLeft' | 'topRight' | 'topStart'
     anchor?:
@@ -44,6 +60,7 @@ export type MenuProps = Omit<RmwcMenuProps, "children"> & {
     // Class that will be added to the Menu element.
     className?: string;
 
+    // @deprecated With the introduction of the new Admin UI, this prop is no longer supported, and it will be removed in future releases.
     // If true, prevents menu from opening when clicked.
     disabled?: boolean;
 
@@ -53,100 +70,77 @@ export type MenuProps = Omit<RmwcMenuProps, "children"> & {
     // For testing purposes.
     "data-testid"?: string;
 
+    // @deprecated With the introduction of the new Admin UI, this prop is no longer supported, and it will be removed in future releases.
     // If rendering to portal, you can specify an exact zIndex.
     portalZIndex?: number;
 } & ( // You can use either `children` or `render`, but not both.
-        | {
-              // One or more MenuItem components.
-              children: React.ReactNode | RenderableMenuChildren;
-              render?: never;
-          }
-        | {
-              render: RenderableMenuChildren;
-              children?: never;
-          }
-    );
+    | {
+          // One or more MenuItem components.
+          children: React.ReactNode | RenderableMenuChildren;
+          render?: never;
+      }
+    | {
+          render: RenderableMenuChildren;
+          children?: never;
+      }
+);
 
 /**
- * Use Menu component to display a list of choices, once the handler is triggered.
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please use the `DropdownMenu` component from the `@webiny/admin-ui` package instead.
  */
 const Menu = (props: MenuProps) => {
     const {
         children,
         handle,
-        anchor = "topStart",
+
         className,
-        disabled,
         onOpen,
-        onClose,
-        onSelect,
         open,
-        render,
-        renderToPortal,
-        portalZIndex = 99
+        onClose
+
+        // Deprecated properties.
+        // disabled,
+        // onSelect,
+        // anchor = "topStart",
+        // render,
+        // renderToPortal,
+        // portalZIndex = 99
     } = props;
 
-    const [menuIsOpen, setMenuIsOpen] = useState(false);
-
-    useEffect(() => {
-        if (typeof open === "boolean") {
-            setMenuIsOpen(open);
-        }
-    }, [open]);
-
-    const openMenu = useCallback(() => {
-        if (disabled) {
-            return;
-        }
-
-        setMenuIsOpen(true);
-
-        if (onOpen) {
-            onOpen();
-        }
-    }, [disabled, onOpen]);
-
-    const closeMenu = useCallback(() => {
-        setMenuIsOpen(false);
-
-        if (onClose) {
-            onClose();
-        }
-    }, [onClose]);
-
-    const renderMenuWithPortal = () => (
-        <BaseMenu
-            anchorCorner={anchor}
-            open={menuIsOpen}
+    return (
+        <AdminUiDropdownMenu
+            open={open}
+            trigger={handle}
             className={className}
-            onClose={closeMenu}
-            onSelect={onSelect}
-            renderToPortal={true}
-            style={{ zIndex: portalZIndex }} // Fixes Menu in Drawers
+            onOpenChange={open => {
+                if (open) {
+                    onOpen && onOpen();
+                } else {
+                    onClose && onClose();
+                }
+            }}
+            data-testid={props["data-testid"]}
         >
-            <>{children}</>
-        </BaseMenu>
-    );
-
-    const renderCustomContent = () => {
-        const renderer = render || children;
-        return (
-            <MenuSurface open={menuIsOpen} onClose={closeMenu} renderToPortal={renderToPortal}>
-                {typeof renderer === "function" ? renderer({ closeMenu }) : renderer}
-            </MenuSurface>
-        );
-    };
-
-    return (
-        <MenuSurfaceAnchor data-testid={props["data-testid"]}>
-            {Array.isArray(children) ? renderMenuWithPortal() : renderCustomContent()}
-            {handle && React.cloneElement(handle, { onClick: openMenu })}
-        </MenuSurfaceAnchor>
+            {typeof children === "function"
+                ? children({
+                      closeMenu: () => {
+                          console.log(
+                              "Deprecated: This function is deprecated and will be removed in future releases."
+                          );
+                      }
+                  })
+                : children}
+        </AdminUiDropdownMenu>
     );
 };
 
+/**
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please use the `DropdownMenu.Separator` component from the `@webiny/admin-ui` package instead.
+ */
 const MenuDivider = () => {
-    return <li className="mdc-list-divider" role="separator" />;
+    return <AdminUiDropdownMenu.Separator />;
 };
 
 interface MenuItemProps extends BaseMenuItemProps {
@@ -156,13 +150,31 @@ interface MenuItemProps extends BaseMenuItemProps {
     "data-testid"?: string;
 }
 
-const MenuItem = ({ disabled, className, ...rest }: MenuItemProps) => {
-    return (
-        <BaseMenuItem
-            {...rest}
-            className={classNames(className, { [style.disabledMenuItem]: disabled })}
-        />
-    );
+const isIconElement = (element: React.ReactNode) => {
+    return React.isValidElement(element) && element.type === ListItemGraphic;
+};
+
+/**
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please use the `DropdownMenu/Item` component from the `@webiny/admin-ui` package instead.
+ */
+const MenuItem = ({ children, ...rest }: MenuItemProps) => {
+    const icon = useMemo(() => {
+        const foundIcon = React.Children.toArray(children).find(isIconElement);
+        // Handles this usage: packages/app-admin/src/components/OptionsMenu/OptionsMenuItem.tsx
+        if (React.isValidElement(foundIcon) && foundIcon.type === ListItemGraphic) {
+            return foundIcon.props.children;
+        }
+        return foundIcon;
+    }, [children]);
+
+    const content = useMemo(() => {
+        return React.Children.toArray(children).filter(child => {
+            return !isIconElement(child);
+        });
+    }, [children]);
+
+    return <AdminUiDropdownMenu.Item icon={icon} text={content} {...rest} />;
 };
 
 export { Menu, MenuItem, MenuDivider };
diff --git a/packages/ui/src/Menu/README.md b/packages/ui/src/Menu/README.md
deleted file mode 100644
index 9ebd0913ba6..00000000000
--- a/packages/ui/src/Menu/README.md
+++ /dev/null
@@ -1,15 +0,0 @@
-# Menu
-
-### Design
-
-<a href="https://material.io/design/components/menus.html" target="_blank">https://material.io/design/components/menus.html</a>
-
-### Description
-
-Use `Menu` component to display a list of choices, once the handler is triggered.
-
-### Import
-
-```js
-import { Menu, MenuItem } from "@webiny/ui/Menu";
-```
diff --git a/packages/ui/src/Mosaic/Mosaic.tsx b/packages/ui/src/Mosaic/Mosaic.tsx
index 3a25fdba6ca..daeb03ca937 100644
--- a/packages/ui/src/Mosaic/Mosaic.tsx
+++ b/packages/ui/src/Mosaic/Mosaic.tsx
@@ -1,29 +1,15 @@
 import React from "react";
-/**
- * Package react-columned does not have types.
- */
-// @ts-expect-error
-import Columned from "react-columned";
-
-export interface MosaicProps {
-    // Number of columns, per max screen size, eg. { "320": 1, "480": 2, "800": 3, "1366": 4 }.
-    columns?: {
-        [key: string]: number;
-    };
-
-    // Custom class for the mosaic container.
-    className?: string;
 
+export interface MosaicProps extends Record<string, any> {
     children: React.ReactNode;
 }
 
+/**
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please implement your own `Mosaic` component or reach out on Slack.
+ */
 const Mosaic = (props: MosaicProps) => {
-    const { children, columns = { 320: 1, 480: 2, 800: 3, 1366: 4 }, className } = props;
-    return (
-        <Columned columns={columns} className={className}>
-            {children}
-        </Columned>
-    );
+    return <>{props.children}</>;
 };
 
 export { Mosaic };
diff --git a/packages/ui/src/Mosaic/README.md b/packages/ui/src/Mosaic/README.md
deleted file mode 100644
index 08c9aa53ef2..00000000000
--- a/packages/ui/src/Mosaic/README.md
+++ /dev/null
@@ -1,15 +0,0 @@
-# Mosaic
-
-### Additional information
-
-<a href="https://www.npmjs.com/package/react-columned" target="_blank">https://www.npmjs.com/package/react-columned</a>
-
-### Description
-
-`Mosaic` component is used to show images or any other component in columns.
-
-### Import
-
-```js
-import { Mosaic } from "@webiny/ui/Mosaic";
-```
diff --git a/packages/ui/src/Progress/CircularProgress.tsx b/packages/ui/src/Progress/CircularProgress.tsx
index caf3e6b522e..cae74d8dc5c 100644
--- a/packages/ui/src/Progress/CircularProgress.tsx
+++ b/packages/ui/src/Progress/CircularProgress.tsx
@@ -1,8 +1,5 @@
-// This is just to center the spinner
-import React from "react";
-import styled from "@emotion/styled";
-import Spinner from "react-spinner-material";
-import { Typography } from "../Typography";
+import * as React from "react";
+import { OverlayLoader } from "@webiny/admin-ui";
 
 interface CircularProgressProps {
     label?: React.ReactNode;
@@ -13,60 +10,17 @@ interface CircularProgressProps {
     style?: React.CSSProperties;
 }
 
-const SpinnerWrapper = styled("div")({
-    width: "100%",
-    height: "100%",
-    position: "absolute",
-    background: "var(--mdc-theme-surface)",
-    opacity: 0.92,
-    top: 0,
-    left: 0,
-    zIndex: 3,
-    "& .spinner__inner-wrapper": {
-        position: "absolute",
-        top: "50%",
-        left: "50%",
-        transform: "translate(-50%, -50%)",
-        display: "flex",
-        flexDirection: "column",
-        justifyContent: "center",
-        alignItems: "center"
-    }
-});
-
-const Label = styled("div")({
-    marginTop: 15
-});
-
+/**
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please use the `Loader` or `OverlayLoader` components from the `@webiny/admin-ui` package instead.
+ */
 const CircularProgress = (props: CircularProgressProps) => {
-    const {
-        label,
-        size = 45,
-        spinnerWidth = 4,
-        spinnerColor = "var(--mdc-theme-primary)",
-        visible = true,
-        style
-    } = props;
-    /**
-     * We can safely cast because we have default props
-     */
-    return (
-        <SpinnerWrapper style={style}>
-            <div className={"spinner__inner-wrapper"}>
-                <Spinner
-                    size={size as number}
-                    spinnerColor={spinnerColor as string}
-                    spinnerWidth={spinnerWidth as number}
-                    visible={visible as boolean}
-                />
-                {label && (
-                    <Label>
-                        <Typography use={"overline"}>{label}</Typography>
-                    </Label>
-                )}
-            </div>
-        </SpinnerWrapper>
-    );
+    return <OverlayLoader text={props.label} style={props.style} />;
 };
 
+CircularProgress.displayName = "CircularProgress";
+
+export { CircularProgress };
+
+// Needed for backward compatibility.
 export default CircularProgress;
diff --git a/packages/ui/src/Progress/README.md b/packages/ui/src/Progress/README.md
deleted file mode 100644
index 5030f7e49e1..00000000000
--- a/packages/ui/src/Progress/README.md
+++ /dev/null
@@ -1,19 +0,0 @@
-# Progress
-
-### Design
-
-<a href="https://material.io/design/components/progress-indicators.html#circular-progress-indicators" target="_blank">
-    https://material.io/design/components/progress-indicators.html#circular-progress-indicators
-</a>
-
-### Description
-
-Progress components are used in cases where user has to wait for a background process to finish.
-
-Currently only the `CircularProgress` component is available, which is ideal for forms.
-
-### Import
-
-```js
-import { CircularProgress } from "@webiny/ui/Progress";
-```
diff --git a/packages/ui/src/Progress/index.ts b/packages/ui/src/Progress/index.ts
index ea96def72da..d85a26d6b8d 100644
--- a/packages/ui/src/Progress/index.ts
+++ b/packages/ui/src/Progress/index.ts
@@ -1 +1 @@
-export { default as CircularProgress } from "./CircularProgress";
+export * from "./CircularProgress";
diff --git a/packages/ui/src/Progress/svg/circularProgress.svg b/packages/ui/src/Progress/svg/circularProgress.svg
deleted file mode 100644
index d248754eb7e..00000000000
--- a/packages/ui/src/Progress/svg/circularProgress.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg class="spinner" width="65px" height="65px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
-    <circle class="path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
-</svg>
\ No newline at end of file
diff --git a/packages/ui/src/Radio/README.md b/packages/ui/src/Radio/README.md
deleted file mode 100644
index adc77eed6a2..00000000000
--- a/packages/ui/src/Radio/README.md
+++ /dev/null
@@ -1,17 +0,0 @@
-# Group
-
-### Design
-
-<a href="https://material.io/design/components/selection-controls.html#radio-buttons" target="_blank">https://material.io/design/components/selection-controls.html#radio-buttons</a>
-
-### Description
-
-Wrap `Radio` components with `RadioGroup` to create a set of options.
-Each `Radio` component must receive `value` and `onChange` callback via props.
-
-### Import
-To use, import base `Radio` component.
-
-```js
-import { Radio, RadioGroup } from "@webiny/ui/Radio";
-```
diff --git a/packages/ui/src/Radio/Radio.styles.ts b/packages/ui/src/Radio/Radio.styles.ts
deleted file mode 100644
index 307e93a218d..00000000000
--- a/packages/ui/src/Radio/Radio.styles.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { css } from "emotion";
-
-/**
- * Controls the helper text below the checkbox.
- * @type {string}
- */
-const webinyRadioTitle = css(
-    {},
-    {
-        "&.mdc-text-field-helper-text": {
-            paddingLeft: 10,
-            //textTransform: "uppercase",
-            //fontWeight: "bold",
-            marginBottom: "5px"
-        }
-    }
-);
-
-export { webinyRadioTitle };
diff --git a/packages/ui/src/Radio/Radio.tsx b/packages/ui/src/Radio/Radio.tsx
index 2fb9ace55ad..d9b1264b836 100644
--- a/packages/ui/src/Radio/Radio.tsx
+++ b/packages/ui/src/Radio/Radio.tsx
@@ -1,7 +1,11 @@
 import React from "react";
-import { Radio as RmwcRadio } from "@rmwc/radio";
+import {
+    FormComponentErrorMessage,
+    FormComponentNote,
+    Radio as AdminRadio
+} from "@webiny/admin-ui";
 import { FormComponentProps } from "~/types";
-import { FormElementMessage } from "~/FormElementMessage";
+import { generateId } from "@webiny/admin-ui/utils";
 
 type Props = FormComponentProps & {
     // Component label.
@@ -15,11 +19,11 @@ type Props = FormComponentProps & {
 };
 
 /**
- * Wrap Radio components with RadioGroup to create a set of options.
- * Each Radio component must receive value and onChange callback via props.
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please find out the new `Radio` component props from the `@webiny/admin-ui` package instead.
  */
 class Radio extends React.Component<Props> {
-    onChange = (e: React.SyntheticEvent<HTMLInputElement>) => {
+    onChange = (e: React.SyntheticEvent<HTMLInputElement> | any) => {
         this.props.onChange && this.props.onChange((e.target as HTMLInputElement).checked);
     };
 
@@ -30,19 +34,12 @@ class Radio extends React.Component<Props> {
 
         return (
             <React.Fragment>
-                <RmwcRadio
-                    disabled={disabled}
-                    checked={Boolean(value)}
-                    onChange={this.onChange}
-                    label={label}
+                <AdminRadio id={generateId()} disabled={disabled} value={value} label={label} />
+                <FormComponentErrorMessage
+                    invalid={Boolean(validationIsValid === false)}
+                    text={validationMessage}
                 />
-                {validationIsValid === false && (
-                    <FormElementMessage error>{validationMessage}</FormElementMessage>
-                )}
-
-                {validationIsValid !== false && description && (
-                    <FormElementMessage>{description}</FormElementMessage>
-                )}
+                <FormComponentNote text={description} />
             </React.Fragment>
         );
     }
diff --git a/packages/ui/src/Radio/RadioGroup.tsx b/packages/ui/src/Radio/RadioGroup.tsx
index 45b3e01c5a5..dc899a01ec0 100644
--- a/packages/ui/src/Radio/RadioGroup.tsx
+++ b/packages/ui/src/Radio/RadioGroup.tsx
@@ -1,11 +1,15 @@
 import React from "react";
 import { FormComponentProps } from "~/types";
-import { webinyRadioTitle } from "./Radio.styles";
-import { FormElementMessage } from "~/FormElementMessage";
+import {
+    DeprecatedRadioGroup as DeprecatedAdminRadioGroup,
+    FormComponentDescription,
+    FormComponentErrorMessage,
+    FormComponentLabel
+} from "@webiny/admin-ui";
 
 interface RadioGroupRenderParams {
-    onChange: (id: string | number) => () => void;
-    getValue: (id: string | number) => boolean;
+    onChange: (value: string | number) => () => void;
+    getValue: (value: string | number) => string | number;
 }
 
 type Props = FormComponentProps & {
@@ -19,38 +23,31 @@ type Props = FormComponentProps & {
     children: (props: RadioGroupRenderParams) => React.ReactNode;
 };
 
+/**
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please find out the new `RadioGroup` component props from the `@webiny/admin-ui` package instead.
+ */
 class RadioGroup extends React.Component<Props> {
     public override render() {
-        const { description, label, validation } = this.props;
+        const { description, label, validation, value, onChange } = this.props;
 
         const { isValid: validationIsValid, message: validationMessage } = validation || {};
 
         return (
-            <React.Fragment>
-                {label && (
-                    <div
-                        className={
-                            "mdc-text-field-helper-text mdc-text-field-helper-text--persistent " +
-                            webinyRadioTitle
-                        }
-                    >
-                        {label}
-                    </div>
-                )}
-
-                {this.props.children({
-                    onChange: value => () => this.props.onChange && this.props.onChange(value),
-                    getValue: id => this.props.value === id
-                })}
-
-                {validationIsValid === false && (
-                    <FormElementMessage error>{validationMessage}</FormElementMessage>
-                )}
-
-                {validationIsValid !== false && description && (
-                    <FormElementMessage>{description}</FormElementMessage>
-                )}
-            </React.Fragment>
+            <div className={"w-full"}>
+                <FormComponentLabel text={label} />
+                <FormComponentDescription text={description} />
+                <DeprecatedAdminRadioGroup value={value} onValueChange={onChange}>
+                    {this.props.children({
+                        onChange: value => () => this.props.onChange && this.props.onChange(value),
+                        getValue: value => value
+                    })}
+                </DeprecatedAdminRadioGroup>
+                <FormComponentErrorMessage
+                    text={validationMessage}
+                    invalid={validationIsValid === false}
+                />
+            </div>
         );
     }
 }
diff --git a/packages/ui/src/RichTextEditor/README.md b/packages/ui/src/RichTextEditor/README.md
deleted file mode 100644
index 97a45fe3e66..00000000000
--- a/packages/ui/src/RichTextEditor/README.md
+++ /dev/null
@@ -1,10 +0,0 @@
-# RichTextEditor
-
-### Description
-https://editorjs.io
-
-### Import
-
-```js
-import { RichTextEditor } from "@webiny/ui/RichTextEditor";
-```
diff --git a/packages/ui/src/RichTextEditor/RichTextEditor.tsx b/packages/ui/src/RichTextEditor/RichTextEditor.tsx
index 33cd943e964..e83faa0942f 100644
--- a/packages/ui/src/RichTextEditor/RichTextEditor.tsx
+++ b/packages/ui/src/RichTextEditor/RichTextEditor.tsx
@@ -1,171 +1,23 @@
-import React, { Fragment, useEffect, useRef } from "react";
-import EditorJS, {
-    LogLevels,
-    OutputBlockData,
-    OutputData,
-    SanitizerConfig,
-    ToolSettings
-} from "@editorjs/editorjs";
-import { FormElementMessage } from "~/FormElementMessage";
-import { css } from "emotion";
-import classNames from "classnames";
-import { FormComponentProps } from "@webiny/form";
-import { generateAlphaNumericId } from "@webiny/utils/generateId";
-
-const classes = {
-    wrapper: css({
-        backgroundColor: "var(--mdc-theme-background)",
-        padding: "20px 16px 6px"
-    }),
-    label: css({
-        marginBottom: "10px !important"
-    }),
-    disable: css({
-        opacity: 0.7,
-        pointerEvents: "none"
-    })
-};
-
-interface EditorJSType {
-    destroy?: () => void;
-    save: () => Promise<any>;
-}
-
-export interface OnReadyParams {
-    editor: any;
-    initialData: OutputData;
-}
-
-export type RichTextEditorValue = OutputBlockData[];
-
-export interface RichTextEditorProps {
-    autofocus?: boolean;
-    className?: string;
-    context?: { [key: string]: any };
-    description?: string;
-    disabled?: boolean;
-    label?: string;
-    logLevel?: string;
-    minHeight?: number;
-    onChange?: (data: RichTextEditorValue) => void;
-    onReady?: (params: OnReadyParams) => void;
-    placeholder?: string;
-    readOnly?: boolean;
-    sanitizer?: SanitizerConfig;
-    tools?: {
-        [toolName: string]: ToolSettings;
+import React from "react";
+import {
+    RichTextEditor as AdminRichTextEditor,
+    type RichTextEditorProps as AdminRichTextEditorProps,
+    type RichTextEditorValue,
+    type OnReadyParams
+} from "@webiny/admin-ui";
+import { FormComponentProps } from "~/types";
+
+type RichTextEditorProps = FormComponentProps &
+    AdminRichTextEditorProps & {
+        readOnly?: boolean;
     };
-    validation?: FormComponentProps["validation"];
-    value?: RichTextEditorValue;
-}
-
-const waitForDom = (id: string, callback: () => void) => {
-    let timeSpent = 0;
-    const interval = setInterval(() => {
-        if (timeSpent > 1000) {
-            clearInterval(interval);
-            return;
-        }
-
-        const dom = document.querySelector(`#${id}`);
-        if (!dom) {
-            timeSpent += 10;
-            return;
-        }
-
-        clearInterval(interval);
-        callback();
-    }, 10);
 
-    return () => {
-        clearInterval(interval);
-    };
+/**
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please find out the new `RichTextEditor` component props from the `@webiny/admin-ui` package instead.
+ */
+const RichTextEditor = ({ readOnly, ...props }: RichTextEditorProps) => {
+    return <AdminRichTextEditor disabled={readOnly} {...props} />;
 };
 
-export const RichTextEditor = (props: RichTextEditorProps) => {
-    const elementId = useRef("rte-" + generateAlphaNumericId());
-    const editorRef = useRef<EditorJSType>();
-
-    useEffect(() => {
-        const { value, context, onReady, ...nativeProps } = props;
-
-        const initialData = value ? { blocks: value } : { blocks: [] };
-
-        const clearWait = waitForDom(elementId.current, () => {
-            editorRef.current = new EditorJS({
-                ...nativeProps,
-                holder: elementId.current,
-                logLevel: "ERROR" as LogLevels.ERROR,
-                data: initialData,
-                onChange: async () => {
-                    if (!editorRef.current) {
-                        return;
-                    }
-                    const { blocks: data } = await editorRef.current.save();
-                    if (!props.onChange) {
-                        return;
-                    }
-                    props.onChange(data);
-                },
-                onReady() {
-                    if (typeof onReady !== "function") {
-                        return;
-                    }
-                    onReady({ editor: editorRef.current, initialData });
-                },
-                tools: Object.keys(props.tools || {}).reduce((tools, name) => {
-                    const tool = props.tools ? props.tools[name] : null;
-                    if (!tool) {
-                        return tools;
-                    }
-                    tools[name] = tool;
-                    if (!tool.config) {
-                        tool.config = { context };
-                    } else if (typeof tool.config === "function") {
-                        tool.config = tool.config();
-                    } else {
-                        tool.config = { ...tool.config, context };
-                    }
-                    return tools;
-                }, {} as Record<string, ToolSettings>)
-            });
-        });
-
-        return () => {
-            clearWait();
-            if (!editorRef.current || typeof editorRef.current.destroy !== "function") {
-                return;
-            }
-
-            editorRef.current.destroy();
-        };
-    }, []);
-
-    const { label, description, disabled, validation, className } = props;
-
-    return (
-        <Fragment>
-            <div
-                className={classNames(classes.wrapper, className, { [classes.disable]: disabled })}
-            >
-                {label && (
-                    <div
-                        className={classNames(
-                            "mdc-text-field-helper-text mdc-text-field-helper-text--persistent",
-                            classes.label
-                        )}
-                    >
-                        {label}
-                    </div>
-                )}
-                <div id={elementId.current} />
-            </div>
-            {validation && validation.isValid === false && (
-                <FormElementMessage error>{validation.message}</FormElementMessage>
-            )}
-            {validation && validation.isValid !== false && description && (
-                <FormElementMessage>{description}</FormElementMessage>
-            )}
-        </Fragment>
-    );
-};
+export { RichTextEditor, type RichTextEditorProps, type RichTextEditorValue, type OnReadyParams };
diff --git a/packages/ui/src/RichTextEditor/index.ts b/packages/ui/src/RichTextEditor/index.ts
index c387a3efd5b..2712bda80a9 100644
--- a/packages/ui/src/RichTextEditor/index.ts
+++ b/packages/ui/src/RichTextEditor/index.ts
@@ -1,3 +1,4 @@
 export * from "./RichTextEditor";
-export type { RichTextEditorProps, OnReadyParams, RichTextEditorValue } from "./RichTextEditor";
-export { createPropsFromConfig } from "./createPropsFromConfig";
+export type { RichTextEditorProps } from "./RichTextEditor";
+export { createPropsFromConfig } from "@webiny/admin-ui";
+export type { OnReadyParams, RichTextEditorValue } from "@webiny/admin-ui";
diff --git a/packages/ui/src/Ripple/README.md b/packages/ui/src/Ripple/README.md
deleted file mode 100644
index b8dca3a45fe..00000000000
--- a/packages/ui/src/Ripple/README.md
+++ /dev/null
@@ -1,15 +0,0 @@
-# Ripple
-
-### Design
-
-<a href="https://material.io/develop/web/components/ripples/" target="_blank">https://material.io/develop/web/components/ripples/</a>
-
-### Description
-
-`Ripple` component is used to represent interactive surfaces.
-
-### Import
-
-```js
-import { Ripple } from "@webiny/ui/Ripple";
-```
diff --git a/packages/ui/src/Ripple/Ripple.tsx b/packages/ui/src/Ripple/Ripple.tsx
index 4a909ff2a5f..7e13002d09a 100644
--- a/packages/ui/src/Ripple/Ripple.tsx
+++ b/packages/ui/src/Ripple/Ripple.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-import { Ripple as RmwcRipple } from "@rmwc/ripple";
 
 interface Props {
     // Choose the type of ripple.
@@ -12,17 +11,11 @@ interface Props {
 }
 
 /**
- * Use Ripple component to display a list of choices, once the handler is triggered.
+ * @deprecated This component is deprecated and will be removed in future releases.
  */
 const Ripple = (props: Props) => {
-    // Let's pass "unbounded" / "primary" / "accent" flags as "type" prop instead.
-    const type = props.type || "surface";
-
-    return (
-        <RmwcRipple {...{ [type]: true }} {...props}>
-            {props.children}
-        </RmwcRipple>
-    );
+    console.warn("The `Ripple` component is deprecated and will be removed in future releases.");
+    return <>{props.children}</>;
 };
 
 export { Ripple };
diff --git a/packages/ui/src/Ripple/svg/baseline-autorenew-24px.svg b/packages/ui/src/Ripple/svg/baseline-autorenew-24px.svg
deleted file mode 100644
index f79fa263d10..00000000000
--- a/packages/ui/src/Ripple/svg/baseline-autorenew-24px.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-    <path d="M12 6v3l4-4-4-4v3c-4.42 0-8 3.58-8 8 0 1.57.46 3.03 1.24 4.26L6.7 14.8c-.45-.83-.7-1.79-.7-2.8 0-3.31 2.69-6 6-6zm6.76 1.74L17.3 9.2c.44.84.7 1.79.7 2.8 0 3.31-2.69 6-6 6v-3l-4 4 4 4v-3c4.42 0 8-3.58 8-8 0-1.57-.46-3.03-1.24-4.26z"/>
-    <path d="M0 0h24v24H0z" fill="none"/>
-</svg>
diff --git a/packages/ui/src/Ripple/svg/baseline-cloud_done-24px.svg b/packages/ui/src/Ripple/svg/baseline-cloud_done-24px.svg
deleted file mode 100644
index 20e491fc9bc..00000000000
--- a/packages/ui/src/Ripple/svg/baseline-cloud_done-24px.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" viewBox="0 0 24 24">
-    <path d="M0 0h24v24H0z" fill="none"/>
-    <path fill="currentColor" d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM10 17l-3.5-3.5 1.41-1.41L10 14.17 15.18 9l1.41 1.41L10 17z"/>
-</svg>
diff --git a/packages/ui/src/Ripple/svg/baseline-delete-24px.svg b/packages/ui/src/Ripple/svg/baseline-delete-24px.svg
deleted file mode 100644
index f08d602814e..00000000000
--- a/packages/ui/src/Ripple/svg/baseline-delete-24px.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" viewBox="0 0 24 24">
-    <path fill="currentColor" d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/>
-    <path d="M0 0h24v24H0z" fill="none"/>
-</svg>
diff --git a/packages/ui/src/Ripple/svg/baseline-done-24px.svg b/packages/ui/src/Ripple/svg/baseline-done-24px.svg
deleted file mode 100644
index 0482857b7b8..00000000000
--- a/packages/ui/src/Ripple/svg/baseline-done-24px.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" viewBox="0 0 24 24">
-    <path fill="none" d="M0 0h24v24H0z"/>
-    <path fill="currentColor" d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/>
-</svg>
diff --git a/packages/ui/src/Scrollbar/README.md b/packages/ui/src/Scrollbar/README.md
deleted file mode 100644
index ee69571ea07..00000000000
--- a/packages/ui/src/Scrollbar/README.md
+++ /dev/null
@@ -1,15 +0,0 @@
-# Scrollbar
-
-### Additional information
-
-<a href="https://github.com/malte-wessel/react-custom-scrollbars" target="_blank">https://github.com/malte-wessel/react-custom-scrollbars</a>
-
-### Description
-
-Use `Scrollbar` component to show vertical or horizontal scrollbars.
-
-### Import
-
-```js
-import { Scrollbar } from "@webiny/ui/Scrollbar";
-```
diff --git a/packages/ui/src/Scrollbar/Scrollbar.tsx b/packages/ui/src/Scrollbar/Scrollbar.tsx
index c3a43059ef5..3bce59cde37 100644
--- a/packages/ui/src/Scrollbar/Scrollbar.tsx
+++ b/packages/ui/src/Scrollbar/Scrollbar.tsx
@@ -1,16 +1,12 @@
 import React from "react";
-import { ScrollbarProps, Scrollbars } from "react-custom-scrollbars";
-
-interface Props extends ScrollbarProps {
-    style?: React.CSSProperties;
-    [key: string]: any;
-}
+import { Scrollbar as AdminScrollbar, type ScrollbarProps } from "@webiny/admin-ui";
 
 /**
- * Use Scrollbar component to show vertical or horizontal scrollbars.
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please find out the new `Scrollbar` component props from the `@webiny/admin-ui` package instead.
  */
-const Scrollbar = (props: Props) => {
-    return <Scrollbars {...props} />;
+const Scrollbar = (props: ScrollbarProps) => {
+    return <AdminScrollbar {...props} />;
 };
 
-export { Scrollbar };
+export { Scrollbar, type ScrollbarProps };
diff --git a/packages/ui/src/Section/README.md b/packages/ui/src/Section/README.md
deleted file mode 100644
index b277562efcd..00000000000
--- a/packages/ui/src/Section/README.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# Section
-
-### Description
-
-Use `Section` to nicely separate components vertically in the UI.
-
-### Import
-
-```js
-import Section from "@webiny/ui/Section";
-```
diff --git a/packages/ui/src/Section/index.tsx b/packages/ui/src/Section/index.tsx
index ce76b573eef..d6ccfabe187 100644
--- a/packages/ui/src/Section/index.tsx
+++ b/packages/ui/src/Section/index.tsx
@@ -1,50 +1,21 @@
 import React from "react";
-import styled from "@emotion/styled";
-import { css } from "emotion";
-import { Typography } from "~/Typography";
-import { Elevation } from "~/Elevation";
-
-const SectionWrapper = styled("div")({
-    backgroundColor: "var(--mdc-theme-background)",
-    padding: "0 0 25px 0"
-});
-
-const titleStyle = css({
-    display: "flex",
-    alignItems: "center",
-    color: "var(--mdc-theme-on-surface)",
-    ".tooltip-content-wrapper": {
-        lineHeight: "100%",
-        svg: {
-            height: 13,
-            color: "var(--mdc-theme-on-surface)"
-        }
-    }
-});
-
-const ElevationContent = styled("div")({
-    padding: 20,
-    backgroundColor: "#fff"
-});
 
 interface SectionProps {
     title?: string;
     children: React.ReactNode;
 }
 
+/**
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please implement your own `Section` component or reach out on Slack.
+ */
 const Section = ({ children, title, ...props }: SectionProps) => {
+    console.warn("The `Section` component is deprecated and will be removed in future releases.");
     return (
-        <SectionWrapper {...props}>
-            <h4>
-                <Typography className={titleStyle} use={"overline"}>
-                    {title}
-                </Typography>
-            </h4>
-
-            <Elevation z={2}>
-                <ElevationContent>{children}</ElevationContent>
-            </Elevation>
-        </SectionWrapper>
+        <div {...props}>
+            <div>{title}</div>
+            <div>{children}</div>
+        </div>
     );
 };
 
diff --git a/packages/ui/src/Select/README.md b/packages/ui/src/Select/README.md
deleted file mode 100644
index f5e93d458fe..00000000000
--- a/packages/ui/src/Select/README.md
+++ /dev/null
@@ -1,15 +0,0 @@
-# Select
-
-### Design
-
-<a href="https://material.io/develop/web/components/input-controls/select-menus/" target="_blank">https://material.io/develop/web/components/input-controls/select-menus/</a>
-
-### Description
-
-`Select` component lets users choose a value from given set of options.
-
-### Import
-
-```js
-import { Select, SelectOptionGroup, SelectOption } from "@webiny/ui/Select";
-```
diff --git a/packages/ui/src/Select/Select.tsx b/packages/ui/src/Select/Select.tsx
index 6b5f76a42b9..d25bdb4ad9d 100644
--- a/packages/ui/src/Select/Select.tsx
+++ b/packages/ui/src/Select/Select.tsx
@@ -1,13 +1,47 @@
 import React, { useMemo } from "react";
-import {
-    FormattedOption,
-    Select as RmwcSelect,
-    SelectProps as RmwcSelectProps
-} from "@rmwc/select";
-import { FormElementMessage } from "~/FormElementMessage";
 import { FormComponentProps } from "~/types";
-import classNames from "classnames";
-import { webinySelect } from "./styled";
+import { Select as AdminSelect } from "@webiny/admin-ui";
+import { SelectOptionDto } from "@webiny/admin-ui";
+
+export interface FormattedOption extends Omit<React.AllHTMLAttributes<any>, "label"> {
+    label: React.ReactNode;
+    value?: string;
+    options?: FormattedOption[];
+}
+
+export interface RmwcSelectProps {
+    /** The value for a controlled select. */
+    value?: string;
+    /** Adds help text to the field */
+    helpText?: React.ReactNode;
+    /** Options accepts flat arrays, value => label maps, and more. See examples for details. */
+    options?:
+        | FormattedOption[]
+        | string[]
+        | {
+              [value: string]: string;
+          };
+    /** A label for the form control. */
+    label?: string;
+    /** Placeholder text for the form control. Set to a blank string to create a non-floating placeholder label. */
+    placeholder?: string;
+    /** Makes the select outlined. */
+    outlined?: boolean;
+    /** Makes the Select visually invalid. This is sometimes automatically my material-components-web.  */
+    invalid?: boolean;
+    /** Makes the Select disabled.  */
+    disabled?: boolean;
+    /** Makes the Select required.  */
+    required?: boolean;
+    /** Props for the root element. By default, additional props spread to the native select element.  */
+    // rootProps?: Object;
+    /** A reference to the native select element. Not applicable when `enhanced` is true. */
+    inputRef?: (ref: HTMLSelectElement | null) => void;
+    /** Add a leading icon. */
+    icon?: React.ReactNode;
+    /** Advanced: A reference to the MDCFoundation. */
+    foundationRef?: any;
+}
 
 export type SelectProps = FormComponentProps &
     RmwcSelectProps & {
@@ -44,11 +78,11 @@ export type SelectProps = FormComponentProps &
 /**
  * TODO verify that this is correct method get all options.
  */
-const getOptions = (initialOptions: SelectProps["options"]): FormattedOption[] => {
+const getOptions = (initialOptions: SelectProps["options"]): SelectOptionDto[] => {
     if (!initialOptions) {
         return [];
     } else if (Array.isArray(initialOptions)) {
-        const options: FormattedOption[] = [];
+        const options: SelectOptionDto[] = [];
         for (const option of initialOptions) {
             if (typeof option === "string") {
                 options.push({
@@ -58,9 +92,9 @@ const getOptions = (initialOptions: SelectProps["options"]): FormattedOption[] =
                 continue;
             }
             options.push({
-                label: option.label,
+                label: String(option.label),
                 value: option.value,
-                options: option.options
+                options: getOptions(option.options)
             });
         }
         return options;
@@ -73,6 +107,42 @@ const getOptions = (initialOptions: SelectProps["options"]): FormattedOption[] =
     });
 };
 
+/**
+ * Select component lets users to manually build the option list.
+ */
+function getChildrenOptions(children: React.ReactNode): SelectOptionDto[] {
+    return React.Children.toArray(children)
+        .filter(
+            child =>
+                React.isValidElement(child) &&
+                (child.type === "option" || child.type === "optgroup")
+        )
+        .map(child => {
+            const element = child as React.ReactElement<{
+                value?: string;
+                label?: string;
+                children?: React.ReactNode;
+            }>;
+
+            if (React.isValidElement(child) && child.type === "option") {
+                return {
+                    value: element.props.value || "",
+                    label: element.props.children?.toString() || ""
+                };
+            }
+
+            if (React.isValidElement(child) && child.type === "optgroup") {
+                return {
+                    label: element.props.label || "",
+                    options: getChildrenOptions(element.props.children)
+                };
+            }
+
+            return null; // This shouldn't be reached
+        })
+        .filter(Boolean) as SelectOptionDto[];
+}
+
 /**
  * Select component lets users choose a value from given set of options.
  */
@@ -87,18 +157,17 @@ const getRmwcProps = (props: SelectProps): FormComponentProps & RmwcSelectProps
 
     return newProps;
 };
+
 /**
- * We check for null and undefined in the value because React is complaining about those values.
- * Error says to use the empty string in null/undefined case.
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please use the `Select` component from the `@webiny/admin-ui` package instead.
  */
 export const Select = (props: SelectProps) => {
-    const { value: initialValue, description, validation, ...other } = props;
-
+    const { value: initialValue, ...other } = props;
     const value = initialValue === null || initialValue === undefined ? "" : initialValue;
 
-    const { isValid: validationIsValid, message: validationMessage } = validation || {};
-
     const options = getOptions(other.options);
+    const childrenOptions = getChildrenOptions(props.children);
 
     // Memoize the label and placeholder values based on the component size.
     const { label, placeholder } = useMemo(() => {
@@ -122,34 +191,28 @@ export const Select = (props: SelectProps) => {
         };
     }, [props.label, props.placeholder, props.size]);
 
+    const size = useMemo(() => {
+        if (props.size === "medium") {
+            return "md";
+        }
+
+        if (props.size === "large") {
+            return "lg";
+        }
+
+        return "lg";
+    }, [props.size]);
+
     return (
-        <>
-            <RmwcSelect
-                {...getRmwcProps(other)}
-                ref={undefined}
-                options={options}
-                value={value}
-                label={label}
-                placeholder={placeholder}
-                className={classNames(
-                    "webiny-ui-select mdc-ripple-surface mdc-ripple-upgraded",
-                    webinySelect,
-                    props.size ? `webiny-ui-select--size-${props.size}` : null,
-                    props.className
-                )}
-                onChange={(e: React.ChangeEvent<HTMLSelectElement>) => {
-                    props.onChange && props.onChange(e.target.value);
-                }}
-            />
-
-            {validationIsValid === false && (
-                <FormElementMessage error>{validationMessage}</FormElementMessage>
-            )}
-
-            {validationIsValid !== false && description && (
-                <FormElementMessage>{description}</FormElementMessage>
-            )}
-        </>
+        <AdminSelect
+            {...getRmwcProps(other)}
+            options={[...options, ...childrenOptions]}
+            value={value}
+            label={label}
+            placeholder={placeholder}
+            size={size}
+            onChange={value => props?.onChange?.(value)}
+        />
     );
 };
 
diff --git a/packages/ui/src/Select/styled.tsx b/packages/ui/src/Select/styled.tsx
deleted file mode 100644
index 787574e6a31..00000000000
--- a/packages/ui/src/Select/styled.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import { css } from "emotion";
-
-/**
- * @type {string}
- */
-export const webinySelect = css`
-    display: grid;
-    background-color: transparent;
-    border-color: transparent;
-    color: var(--webiny-theme-color-primary);
-    width: 100%;
-
-    .rmwc-select__native-control {
-        opacity: 0;
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        left: 0;
-        right: 0;
-    }
-
-    > .mdc-select__anchor {
-        width: auto !important;
-    }
-
-    &.webiny-ui-select--size-medium {
-        &.mdc-select,
-        .mdc-select__anchor {
-            height: 40px;
-            .mdc-select__selected-text {
-                font-size: 0.95rem;
-            }
-        }
-    }
-
-    &.webiny-ui-select--size-small {
-        &.mdc-select,
-        .mdc-select__anchor {
-            height: 30px;
-            .mdc-select__native-control {
-                padding-top: 0;
-            }
-            .mdc-select__selected-text {
-                font-size: 0.9rem;
-            }
-        }
-    }
-`;
-
-/**
- * @type {string}
- */
-export const noLabel = css`
-    &.mdc-select {
-        height: 35px;
-        .mdc-select__native-control {
-            padding-top: 0;
-        }
-    &.mdc-select--box {
-        .mdc-select__native-control {
-            height: 35px;
-            padding-top: 5px;
-        }
-    }
-`;
diff --git a/packages/ui/src/Skeleton/README.md b/packages/ui/src/Skeleton/README.md
deleted file mode 100644
index 369b708cf96..00000000000
--- a/packages/ui/src/Skeleton/README.md
+++ /dev/null
@@ -1,21 +0,0 @@
-# Skeleton
-
-### Additional information
-
-[https://www.npmjs.com/package/react-loading-skeleton](https://www.npmjs.com/package/react-loading-skeleton)
-
-### Description
-
-`Skeleton` component is used to render animated loading skeletons within Webiny.
-
-### Usage
-
-```jsx
-import { Skeleton } from "@webiny/ui/Skeleton";
-
-...
-
-return (
-    <Skeleton />
-)
-```
diff --git a/packages/ui/src/Skeleton/Skeleton.tsx b/packages/ui/src/Skeleton/Skeleton.tsx
index a2c6ff477ac..43613a76cee 100644
--- a/packages/ui/src/Skeleton/Skeleton.tsx
+++ b/packages/ui/src/Skeleton/Skeleton.tsx
@@ -1,26 +1,33 @@
-import React, { ReactElement } from "react";
-import ReactLoadingSkeleton, {
-    SkeletonProps as BaseSkeletonProps,
-    SkeletonTheme
-} from "react-loading-skeleton";
+import React, { CSSProperties, PropsWithChildren } from "react";
+import { Skeleton as AdminSkeleton, SkeletonProps as AdminSkeletonProps } from "@webiny/admin-ui";
 
-import "react-loading-skeleton/dist/skeleton.css";
-
-interface SkeletonProps extends BaseSkeletonProps {
+export interface SkeletonProps extends AdminSkeletonProps {
+    //SkeletonStyleProps from "react-loading-skeleton"
+    baseColor?: string;
+    highlightColor?: string;
+    width?: string | number;
+    height?: string | number;
+    borderRadius?: string | number;
+    inline?: boolean;
+    duration?: number;
+    direction?: "ltr" | "rtl";
+    enableAnimation?: boolean;
+    // SkeletonProps from "react-loading-skeleton"
+    count?: number;
+    wrapper?: React.FunctionComponent<PropsWithChildren<unknown>>;
+    className?: string;
+    containerClassName?: string;
+    containerTestId?: string;
+    circle?: boolean;
+    style?: CSSProperties;
+    // Custom props
     theme?: "dark" | "light";
 }
 
-export const Skeleton = ({ theme, ...props }: SkeletonProps): ReactElement => {
-    return (
-        <SkeletonTheme
-            baseColor={
-                theme === "dark" ? "var(--mdc-theme-on-background)" : "var(--mdc-theme-background)"
-            }
-            highlightColor={
-                theme === "dark" ? "var(--mdc-theme-background)" : "var(--mdc-theme-surface)"
-            }
-        >
-            <ReactLoadingSkeleton {...props} />
-        </SkeletonTheme>
-    );
+/**
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please use the `Skeleton` component from the `@webiny/admin-ui` package instead.
+ */
+export const Skeleton = ({ className, type, size }: SkeletonProps) => {
+    return <AdminSkeleton className={className} type={type} size={size} />;
 };
diff --git a/packages/ui/src/Slider/README.md b/packages/ui/src/Slider/README.md
deleted file mode 100644
index b28e2d4f33e..00000000000
--- a/packages/ui/src/Slider/README.md
+++ /dev/null
@@ -1,15 +0,0 @@
-# Slider
-
-### Design
-
-<a href="https://material.io/design/components/sliders.html" target="_blank">https://material.io/design/components/sliders.html</a>
-
-### Description
-
-`Slider` component lets users choose a value from given range.
-
-### Import
-
-```js
-import { Slider } from "@webiny/ui/Slider";
-```
diff --git a/packages/ui/src/Slider/Slider.tsx b/packages/ui/src/Slider/Slider.tsx
index 46ac9a0fe92..8342d365547 100644
--- a/packages/ui/src/Slider/Slider.tsx
+++ b/packages/ui/src/Slider/Slider.tsx
@@ -1,8 +1,7 @@
 import React from "react";
-import { Slider as RmwcSlider } from "@rmwc/slider";
+import omit from "lodash/omit";
+import { Slider as AdminSlider } from "@webiny/admin-ui";
 import { FormComponentProps } from "~/types";
-import styled from "@emotion/styled";
-import { FormElementMessage } from "~/FormElementMessage";
 
 type Props = FormComponentProps & {
     // Component label.
@@ -15,10 +14,10 @@ type Props = FormComponentProps & {
     description?: string;
 
     // The minimum value of the Slider.
-    min: number | string;
+    min?: number | string;
 
     // The maximum value of the Slider.
-    max: number | string;
+    max?: number | string;
 
     // A step to quantize values by.
     step?: number | string;
@@ -35,24 +34,29 @@ type Props = FormComponentProps & {
     readOnly?: boolean;
 };
 
-// wrapper fixes a bug in slider where the slider handle is rendered outside the bounds of the slider box
-const Wrapper = styled("div")({
-    width: "100%",
-    ".mdc-slider .mdc-slider__thumb-container": {
-        left: 5
-    }
-});
-
 /**
- * Slider component lets users choose a value from given range.
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please use the `Slider` component from the `@webiny/admin-ui` package instead.
  */
 class Slider extends React.Component<Props> {
-    onChange = (e: { detail: { value: number } }) => {
-        this.props.onChange && this.props.onChange(e.detail.value);
+    onValueCommit = (value: number) => {
+        this.props.onChange && this.props.onChange(value);
+    };
+
+    onValueChange = (value: number) => {
+        this.props.onInput && this.props.onInput(value);
     };
 
-    onInput = (e: { detail: { value: number } }) => {
-        this.props.onInput && this.props.onInput(e.detail.value);
+    toFloat = (value: number | string | undefined, defaultValue = 0): number => {
+        if (!value) {
+            return defaultValue;
+        }
+
+        // Convert the value to a string before passing it to parseFloat
+        const result = parseFloat(value.toString());
+
+        // Check if the result is a valid number
+        return isNaN(result) ? defaultValue : result;
     };
 
     public override render() {
@@ -63,35 +67,20 @@ class Slider extends React.Component<Props> {
             sliderValue = this.props.min || 0;
         }
 
-        const { isValid: validationIsValid, message: validationMessage } = validation || {};
-
         return (
-            <React.Fragment>
-                {label && (
-                    <div className="mdc-text-field-helper-text mdc-text-field-helper-text--persistent">
-                        {label}
-                    </div>
-                )}
-
-                <Wrapper>
-                    <RmwcSlider
-                        // Had to add readOnly so the warning does not appear in the console.
-                        readOnly={true}
-                        {...this.props}
-                        value={sliderValue}
-                        onChange={this.onChange}
-                        onInput={this.onInput}
-                    />
-                </Wrapper>
-
-                {validationIsValid === false && (
-                    <FormElementMessage error>{validationMessage}</FormElementMessage>
-                )}
-
-                {validationIsValid !== false && description && (
-                    <FormElementMessage>{description}</FormElementMessage>
-                )}
-            </React.Fragment>
+            <AdminSlider
+                {...omit(this.props, ["displayMarkers", "discrete", "onInput", "onChange"])}
+                label={label}
+                min={this.toFloat(this.props.min)}
+                max={this.toFloat(this.props.max, 100)}
+                step={this.toFloat(this.props.step, 1)}
+                value={sliderValue}
+                onValueCommit={this.onValueCommit}
+                onValueChange={this.onValueChange}
+                showTooltip={this.props.discrete}
+                validation={validation}
+                note={description}
+            />
         );
     }
 }
diff --git a/packages/ui/src/Snackbar/README.md b/packages/ui/src/Snackbar/README.md
deleted file mode 100644
index 96b8b91fa91..00000000000
--- a/packages/ui/src/Snackbar/README.md
+++ /dev/null
@@ -1,15 +0,0 @@
-# Snackbar
-
-### Design
-
-<a href="https://material.io/design/components/snackbars.html" target="_blank">https://material.io/design/components/snackbars.html</a>
-
-### Description
-
-Use `Snackbar` component to display an informative or alert message and allow users to act upon it.
-
-### Import
-
-```js
-import { Snackbar } from "@webiny/ui/Snackbar";
-```
diff --git a/packages/ui/src/Snackbar/Snackbar.tsx b/packages/ui/src/Snackbar/Snackbar.tsx
index 040f29d1f28..136d8da5805 100644
--- a/packages/ui/src/Snackbar/Snackbar.tsx
+++ b/packages/ui/src/Snackbar/Snackbar.tsx
@@ -1,34 +1,68 @@
 import React from "react";
-import ReactDOM from "react-dom";
-import { Snackbar as RmwcSnackbar, SnackbarAction, SnackbarProps } from "@rmwc/snackbar";
+import { Button, ButtonProps } from "@webiny/admin-ui";
 
-type Props = SnackbarProps;
+type CustomEventT<T> = CustomEvent<T> & React.SyntheticEvent<EventTarget>;
 
-/**
- * Use Snackbar component to display an informative or alert message and allow users to act upon it.
- */
-class Snackbar extends React.Component<Props> {
-    public readonly container: HTMLElement | null = null;
+type SnackbarActionProps = ButtonProps & {
+    /** Content specified as a label prop. */
+    label?: React.ReactNode | any;
+    /** An action returned in evt.detail.reason to the onClose handler. */
+    action?: string;
+};
 
-    public constructor(props: Props) {
-        super(props);
+type ToastActionWithDataActionProps = ButtonProps & {
+    "data-action"?: string;
+};
 
-        this.container = document.getElementById("snackbar-container");
+type SnackbarProps = {
+    open?: boolean;
+    /** A callback thats fired when the Snackbar shows. */
+    onOpen?: (evt: CustomEventT<any>) => void;
+    /** A callback thats fired when the Snackbar hides. evt.detail = { reason?: string } */
+    onClose?: (
+        evt: CustomEventT<{
+            reason?: string;
+        }>
+    ) => void;
+    /** A string or other renderable JSX to be used as the message body. */
+    message?: React.ReactNode;
+    /** One or more actions to add to the snackbar. */
+    action?:
+        | React.ReactElement<ToastActionWithDataActionProps>
+        | React.ReactElement<ToastActionWithDataActionProps>[];
+    /** Milliseconds to show the Snackbar for. Set to -1 to show indefinitely. */
+    timeout?: number;
+    /** Places the action underneath the message text. */
+    stacked?: boolean;
+    leading?: boolean;
+    dismissIcon?: boolean | React.ReactNode;
+    /** Whether or not your want clicking an action to close the Snackbar. */
+    dismissesOnAction?: boolean;
+    /** An icon for the snackbar */
+    icon?: React.ReactNode;
+};
 
-        if (!this.container) {
-            this.container = document.createElement("div");
-            this.container.setAttribute("id", "snackbar-container");
-            const container: HTMLElement = this.container;
-            document.body && document.body.appendChild(container);
-        }
-    }
+/**
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please use the `useToast` hook from the `@webiny/admin-ui` to show messages package instead.
+ */
+const Snackbar = ({ message }: SnackbarProps) => {
+    console.warn(
+        "Snackbar component has been deprecated: use the `useToast` hook from the `@webiny/admin-ui` to show messages package instead."
+    );
+    return <>{message}</>;
+};
 
-    public override render(): React.ReactElement {
-        return ReactDOM.createPortal(
-            <RmwcSnackbar {...this.props} />,
-            this.container as HTMLElement
-        );
-    }
-}
+/**
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please use the `Button` component from the `@webiny/admin-ui` package instead.
+ */
+const SnackbarAction = ({
+    label,
+    action,
+    onClick
+}: SnackbarActionProps): React.ReactElement<ButtonProps & { "data-action"?: string }> => {
+    return <Button variant={"primary"} onClick={onClick} data-action={action} text={label} />;
+};
 
 export { Snackbar, SnackbarAction };
diff --git a/packages/ui/src/Switch/README.md b/packages/ui/src/Switch/README.md
deleted file mode 100644
index b5a3b1f1a13..00000000000
--- a/packages/ui/src/Switch/README.md
+++ /dev/null
@@ -1,15 +0,0 @@
-# Switch
-
-### Design
-
-<a href="https://material.io/design/components/selection-controls.html#switches" target="_blank">https://material.io/design/components/selection-controls.html#switches</a>
-
-### Description
-
-`Switch` component can be used to store simple boolean values.
-
-### Import
-
-```js
-import { Switch } from "@webiny/ui/Switch";
-```
diff --git a/packages/ui/src/Switch/Switch.tsx b/packages/ui/src/Switch/Switch.tsx
index 9ab4648e806..a51587b58f1 100644
--- a/packages/ui/src/Switch/Switch.tsx
+++ b/packages/ui/src/Switch/Switch.tsx
@@ -1,9 +1,23 @@
 import React from "react";
-import { Switch as RmwcSwitch, SwitchProps } from "@rmwc/switch";
 import { FormComponentProps } from "~/types";
-import pick from "lodash/pick";
-import { FormElementMessage } from "~/FormElementMessage";
-import { getClasses } from "~/Helpers";
+import { Switch as AdminSwitch } from "@webiny/admin-ui";
+
+type SwitchProps = {
+    /** A DOM ID for the toggle. */
+    id?: string;
+    /** Disables the control. */
+    disabled?: boolean;
+    /** Toggle the control on and off. */
+    checked?: boolean;
+    /** The value of the control. */
+    value?: string | number | string[];
+    /** A label for the control. */
+    label?: React.ReactNode;
+    /** By default, all props except className and style spread to the input. These are additional props for the root of the checkbox. */
+    rootProps?: React.HTMLProps<any>;
+    /** A reference to the native input. */
+    inputRef?: React.Ref<HTMLInputElement>;
+};
 
 type Props = Omit<SwitchProps, "value"> &
     FormComponentProps<boolean> & {
@@ -15,32 +29,24 @@ type Props = Omit<SwitchProps, "value"> &
     };
 
 /**
- * Switch component can be used to store simple boolean values.
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please use the `Switch` component from the `@webiny/admin-ui` package instead.
  */
 class Switch extends React.Component<Props> {
-    static rmwcProps = ["id", "disabled", "checked", "label", "rootProps", "className"];
-
     public override render() {
-        const { value, description, validation } = this.props;
-
-        const { isValid: validationIsValid, message: validationMessage } = validation || {};
+        const { value, description, validation, label, disabled } = this.props;
 
         return (
-            <React.Fragment>
-                <RmwcSwitch
-                    {...getClasses({ ...pick(this.props, Switch.rmwcProps) }, "webiny-ui-switch")}
-                    checked={Boolean(value)}
-                    onClick={() => this.props.onChange && this.props.onChange(!value)}
-                />
-
-                {validationIsValid === false && (
-                    <FormElementMessage error>{validationMessage}</FormElementMessage>
-                )}
-
-                {validationIsValid !== false && description && (
-                    <FormElementMessage>{description}</FormElementMessage>
-                )}
-            </React.Fragment>
+            <AdminSwitch
+                label={label}
+                note={description}
+                validation={validation}
+                className={"webiny-ui-switch"}
+                checked={Boolean(value)}
+                value={String(value)}
+                onChange={() => this.props.onChange && this.props.onChange(!value)}
+                disabled={disabled}
+            />
         );
     }
 }
diff --git a/packages/ui/src/Tabs/Tab.tsx b/packages/ui/src/Tabs/Tab.tsx
index 456ce1e2f7c..4eb050210a6 100644
--- a/packages/ui/src/Tabs/Tab.tsx
+++ b/packages/ui/src/Tabs/Tab.tsx
@@ -1,11 +1,27 @@
 import React, { useContext, useEffect, useRef } from "react";
-import { TabProps as RmwcTabProps } from "@rmwc/tabs";
 import { generateAlphaNumericId } from "@webiny/utils/generateId";
-import { TabsContext } from "./Tabs";
+import { DeprecatedTabsContext } from "./Tabs";
 
-export type TabProps = RmwcTabProps & {
+export type TabProps = {
+    /**
+     * A label for the tab.
+     */
+    label?: any;
+    /**
+     * The label for the tab, passed as children.
+     */
+    children?: React.ReactNode;
+    /**
+     * The icon to use for the tab.
+     */
+    icon?: React.ReactElement;
+    /**
+     * Is tab visible?
+     */
     visible?: boolean;
-
+    /**
+     * @deprecated
+     */
     tag?: string;
     /**
      * Is tab disabled?
@@ -21,8 +37,12 @@ export type TabProps = RmwcTabProps & {
     "data-testid"?: string;
 };
 
+/**
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please find out the new `Tabs` component props from the `@webiny/admin-ui` package instead.
+ */
 export const Tab = React.memo((props: TabProps) => {
-    const tabsContext = useContext(TabsContext);
+    const tabsContext = useContext(DeprecatedTabsContext);
     const idRef = useRef(generateAlphaNumericId(12));
 
     useEffect(() => {
diff --git a/packages/ui/src/Tabs/Tabs.tsx b/packages/ui/src/Tabs/Tabs.tsx
index d5f6a1f3670..fa9b77c0d08 100644
--- a/packages/ui/src/Tabs/Tabs.tsx
+++ b/packages/ui/src/Tabs/Tabs.tsx
@@ -1,9 +1,15 @@
-import React, { createContext, useMemo, useState } from "react";
-import classNames from "classnames";
-import { TabBar, Tab as RmwcTab } from "@rmwc/tabs";
+import React, { createContext, PropsWithChildren, useCallback, useMemo, useState } from "react";
+import { Tabs as AdminTabs } from "@webiny/admin-ui";
 import { TabProps } from "./Tab";
 
-export interface TabsProps extends React.HTMLAttributes<HTMLDivElement> {
+const VALUE_PREFIX = "tab-";
+
+export type TabsProps = PropsWithChildren<{
+    /**
+     * Append an ID.
+     */
+    id?: string;
+
     /**
      * Append a class name.
      */
@@ -23,82 +29,62 @@ export interface TabsProps extends React.HTMLAttributes<HTMLDivElement> {
      * Tab ID for the testing.
      */
     "data-testid"?: string;
-}
-
-const disabledStyles: Record<string, string | number> = {
-    opacity: 0.5,
-    pointerEvents: "none"
-};
+}>;
 
 interface TabItem extends TabProps {
     id: string;
 }
 
-interface TabsContext {
+interface DeprecatedTabsContext {
     addTab(props: TabItem): void;
+
     removeTab(id: string): void;
 }
 
-export const TabsContext = createContext<TabsContext | undefined>(undefined);
+export const DeprecatedTabsContext = createContext<DeprecatedTabsContext | undefined>(undefined);
 
 /**
- * Use Tabs component to display a list of choices, once the handler is triggered.
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please use the `Tabs` component from the `@webiny/admin-ui` package instead.
  */
-export const Tabs = ({ children, value, onActivate, className, ...props }: TabsProps) => {
+export const Tabs = ({ value, onActivate, ...props }: TabsProps) => {
     const [activeTabIndex, setActiveIndex] = useState(0);
     const [tabs, setTabs] = useState<TabItem[]>([]);
 
     const activeIndex = value !== undefined ? value : activeTabIndex;
 
-    /* We need to generate a key like this to trigger a proper component re-render when child tabs change. */
-    const tabBar = (
-        <TabBar
-            key={tabs.map(tab => tab.id).join(";")}
-            className="webiny-ui-tabs__tab-bar"
-            activeTabIndex={activeIndex}
-            onActivate={evt => {
-                setActiveIndex(evt.detail.index);
-                onActivate && onActivate(evt.detail.index);
-            }}
-        >
-            {tabs.map(item => {
-                if (!item.visible) {
-                    return <RmwcTab tag={"div"} style={{ display: "none" }} key={item.id} />;
-                }
-
-                const style = item.style || {};
-                if (item.disabled) {
-                    Object.assign(style, disabledStyles);
-                }
-
-                return (
-                    <RmwcTab
-                        tag={"div"}
-                        style={style}
-                        key={item.id}
-                        data-testid={item["data-testid"]}
-                        {...(item.icon ? { icon: item.icon } : {})}
-                    >
-                        {item.label}
-                    </RmwcTab>
-                );
-            })}
-        </TabBar>
+    const onValueChange = useCallback(
+        (value: string) => {
+            const parts = value.split(VALUE_PREFIX);
+            const index = parseInt(parts[1]);
+
+            if (isNaN(index)) {
+                return;
+            }
+
+            setActiveIndex(index);
+            onActivate && onActivate(index);
+        },
+        [onActivate]
     );
 
-    const content = tabs.filter(Boolean).map((tab, index) => {
-        if (activeIndex === index) {
-            return <div key={index}>{tab.children}</div>;
-        } else {
-            return (
-                <div key={index} style={{ display: "none" }}>
-                    {tab.children}
-                </div>
-            );
-        }
+    /* We need to generate a key like this to trigger a proper component re-render when child tabs change. */
+    const newTabs = tabs.map((tab, index) => {
+        return (
+            <AdminTabs.Tab
+                key={`${VALUE_PREFIX}${index}`}
+                value={`${VALUE_PREFIX}${index}`}
+                trigger={tab.label}
+                content={tab.children}
+                icon={tab.icon}
+                disabled={tab.disabled}
+                visible={tab.visible !== false}
+                data-testid={tab["data-testid"]}
+            />
+        );
     });
 
-    const context: TabsContext = useMemo(
+    const context: DeprecatedTabsContext = useMemo(
         () => ({
             addTab(props) {
                 setTabs(tabs => {
@@ -121,11 +107,20 @@ export const Tabs = ({ children, value, onActivate, className, ...props }: TabsP
     );
 
     return (
-        <div id={props.id} className={classNames("webiny-ui-tabs", className)}>
-            {tabBar}
-            <div className={"webiny-ui-tabs__content mdc-tab-content"}>{content}</div>
-            <TabsContext.Provider value={context}>{children}</TabsContext.Provider>
-        </div>
+        <>
+            <AdminTabs
+                {...props}
+                value={`${VALUE_PREFIX}${activeIndex}`}
+                onValueChange={onValueChange}
+                tabs={newTabs}
+                size={"md"}
+                separator={true}
+                spacing={"lg"}
+            />
+            <DeprecatedTabsContext.Provider value={context}>
+                {props.children}
+            </DeprecatedTabsContext.Provider>
+        </>
     );
 };
 
diff --git a/packages/ui/src/Tabs/svg/baseline-autorenew-24px.svg b/packages/ui/src/Tabs/svg/baseline-autorenew-24px.svg
deleted file mode 100644
index 545839a1f3a..00000000000
--- a/packages/ui/src/Tabs/svg/baseline-autorenew-24px.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-    <path d="M12 6v3l4-4-4-4v3c-4.42 0-8 3.58-8 8 0 1.57.46 3.03 1.24 4.26L6.7 14.8c-.45-.83-.7-1.79-.7-2.8 0-3.31 2.69-6 6-6zm6.76 1.74L17.3 9.2c.44.84.7 1.79.7 2.8 0 3.31-2.69 6-6 6v-3l-4 4 4 4v-3c4.42 0 8-3.58 8-8 0-1.57-.46-3.03-1.24-4.26z"/>
-    <path d="M0 0h24v24H0z" fill="none"/>
-</svg>
diff --git a/packages/ui/src/Tabs/svg/baseline-cloud_done-24px.svg b/packages/ui/src/Tabs/svg/baseline-cloud_done-24px.svg
deleted file mode 100644
index b3525605684..00000000000
--- a/packages/ui/src/Tabs/svg/baseline-cloud_done-24px.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-    <path d="M0 0h24v24H0z" fill="none"/>
-    <path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM10 17l-3.5-3.5 1.41-1.41L10 14.17 15.18 9l1.41 1.41L10 17z"/>
-</svg>
diff --git a/packages/ui/src/Tabs/svg/baseline-delete-24px.svg b/packages/ui/src/Tabs/svg/baseline-delete-24px.svg
deleted file mode 100644
index e4e672e991f..00000000000
--- a/packages/ui/src/Tabs/svg/baseline-delete-24px.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-    <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/>
-    <path d="M0 0h24v24H0z" fill="none"/>
-</svg>
diff --git a/packages/ui/src/Tabs/svg/baseline-done-24px.svg b/packages/ui/src/Tabs/svg/baseline-done-24px.svg
deleted file mode 100644
index 7c71b80eddf..00000000000
--- a/packages/ui/src/Tabs/svg/baseline-done-24px.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-    <path fill="none" d="M0 0h24v24H0z"/>
-    <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/>
-</svg>
diff --git a/packages/ui/src/Tags/README.md b/packages/ui/src/Tags/README.md
deleted file mode 100644
index 896cf4102ef..00000000000
--- a/packages/ui/src/Tags/README.md
+++ /dev/null
@@ -1,15 +0,0 @@
-# Tags
-
-### Design
-
-N/A
-
-### Description
-
-`Tags` component lets users to input one or more tags.
-
-### Import
-
-```js
-import { Tags } from "@webiny/ui/Tags";
-```
diff --git a/packages/ui/src/Tags/Tags.tsx b/packages/ui/src/Tags/Tags.tsx
index b85e67a508a..31a1242b348 100644
--- a/packages/ui/src/Tags/Tags.tsx
+++ b/packages/ui/src/Tags/Tags.tsx
@@ -1,18 +1,15 @@
 import React, { SyntheticEvent, useCallback, useState } from "react";
-import { css } from "emotion";
 import keycode from "keycode";
 import minimatch from "minimatch";
 import { Input, InputProps } from "~/Input";
 import { Chips, Chip } from "~/Chips";
 import { FormComponentProps } from "~/types";
-import { ReactComponent as BaselineCloseIcon } from "./icons/baseline-close-24px.svg";
-import { FormElementMessage } from "~/FormElementMessage";
 
 interface TagsProps extends FormComponentProps {
     /**
      * Component label.
      */
-    label?: string;
+    label?: React.ReactNode;
 
     /**
      * Are input and chosen tags disabled?
@@ -60,40 +57,10 @@ interface TagsProps extends FormComponentProps {
     protectedTags?: string[];
 }
 
-const tagsStyle = css({
-    position: "relative",
-    ".mdc-elevation--z1": {
-        position: "absolute",
-        width: "calc(100% - 2px)",
-        left: 1,
-        top: 56,
-        zIndex: 10,
-        maxHeight: 200,
-        overflowY: "scroll",
-        backgroundColor: "var(--mdc-theme-surface)"
-    },
-    ul: {
-        listStyle: "none",
-        width: "100%",
-        padding: 0,
-        li: {
-            padding: 10
-        }
-    }
-});
-
 export const Tags = (props: TagsProps) => {
     const [inputValue, setInputValue] = useState("");
 
-    const {
-        validation,
-        value,
-        disabled,
-        onChange,
-        description,
-        protectedTags = [],
-        ...otherInputProps
-    } = props;
+    const { value, disabled, onChange, protectedTags = [], ...otherInputProps } = props;
 
     const isProtected = useCallback(
         (tag: string) => protectedTags.some(pattern => minimatch(tag, pattern)),
@@ -134,42 +101,33 @@ export const Tags = (props: TagsProps) => {
         }
     };
 
-    const { isValid: validationIsValid, message: validationMessage } = validation || {};
-
     return (
-        <div className={tagsStyle}>
-            <div>
-                <Input {...inputProps} />
-
-                {validationIsValid === false && (
-                    <FormElementMessage error>{validationMessage}</FormElementMessage>
-                )}
-                {validationIsValid !== false && description && (
-                    <FormElementMessage>{description}</FormElementMessage>
-                )}
-
-                {Array.isArray(value) && value.length ? (
-                    <Chips disabled={disabled}>
-                        {value.map((item, index) => {
-                            return (
-                                <Chip
-                                    label={item}
-                                    trailingIcon={isProtected(item) ? null : <BaselineCloseIcon />}
-                                    key={`${item}-${index}`}
-                                    onRemove={() => {
-                                        // On removal, let's update the value and call "onChange" callback.
-                                        if (onChange) {
-                                            const newValue = [...value];
-                                            newValue.splice(index, 1);
-                                            onChange(newValue);
-                                        }
-                                    }}
-                                />
-                            );
-                        })}
-                    </Chips>
-                ) : null}
-            </div>
+        <div>
+            <Input {...inputProps} />
+            {Array.isArray(value) && value.length ? (
+                <Chips disabled={disabled}>
+                    {value.map((item, index) => {
+                        return (
+                            <Chip
+                                label={item}
+                                key={`${item}-${index}`}
+                                onRemove={
+                                    !isProtected(item)
+                                        ? () => {
+                                              // On removal, let's update the value and call "onChange" callback.
+                                              if (onChange) {
+                                                  const newValue = [...value];
+                                                  newValue.splice(index, 1);
+                                                  onChange(newValue);
+                                              }
+                                          }
+                                        : undefined
+                                }
+                            />
+                        );
+                    })}
+                </Chips>
+            ) : null}
         </div>
     );
 };
diff --git a/packages/ui/src/Tags/icons/baseline-close-24px.svg b/packages/ui/src/Tags/icons/baseline-close-24px.svg
deleted file mode 100644
index dd64bafb1a8..00000000000
--- a/packages/ui/src/Tags/icons/baseline-close-24px.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" viewBox="0 0 24 24">
-    <path fill="currentColor" d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
-    <path d="M0 0h24v24H0z" fill="none"/>
-</svg>
diff --git a/packages/ui/src/TimeAgo/index.ts b/packages/ui/src/TimeAgo/index.ts
index 60c745d4535..be5220cf317 100644
--- a/packages/ui/src/TimeAgo/index.ts
+++ b/packages/ui/src/TimeAgo/index.ts
@@ -1,5 +1,8 @@
-import TimeAgo from "timeago-react";
-
-export type { TimeAgoProps, Opts, TDate } from "timeago-react";
+import { TimeAgo } from "@webiny/admin-ui";
+export type { TimeAgoProps, Opts, TDate } from "@webiny/admin-ui";
 
+/**
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please use the `TimeAgo` component from the `@webiny/admin-ui` package instead.
+ */
 export { TimeAgo };
diff --git a/packages/ui/src/Tooltip/README.md b/packages/ui/src/Tooltip/README.md
deleted file mode 100644
index 2e5b1204efa..00000000000
--- a/packages/ui/src/Tooltip/README.md
+++ /dev/null
@@ -1,15 +0,0 @@
-# Tooltip
-
-### Additional information
-
-<a href="http://react-component.github.io/tooltip/" target="_blank">http://react-component.github.io/tooltip/</a>
-
-### Description
-
-Use `Tooltip` component to display useful messages to users.
-
-### Import
-
-```js
-import { Tooltip } from "@webiny/ui/Tooltip";
-```
diff --git a/packages/ui/src/Tooltip/Tooltip.tsx b/packages/ui/src/Tooltip/Tooltip.tsx
index c9ff5a033e3..1fedd76050a 100644
--- a/packages/ui/src/Tooltip/Tooltip.tsx
+++ b/packages/ui/src/Tooltip/Tooltip.tsx
@@ -1,20 +1,12 @@
-import React from "react";
-import { default as RcTooltip } from "rc-tooltip";
-import "rc-tooltip/assets/bootstrap_white.css";
-import "./style.scss";
-
-type TooltipPropsContent =
-    | (() => React.ReactChild)
-    | React.ReactChild
-    | React.ReactFragment
-    | React.ReactPortal;
+import React, { useMemo } from "react";
+import { Tooltip as TooltipBase, TooltipProps as TooltipPropsBase } from "@webiny/admin-ui";
 
 export interface TooltipProps {
     // A component (eg. button) which will trigger the tooltip.
     children: React.ReactNode;
 
     // Content which will be shown inside the tooltip.
-    content: TooltipPropsContent;
+    content: React.ReactNode;
 
     // Defines which action will trigger the tooltip: "hover", "click" or "focus".
     trigger?: string;
@@ -34,38 +26,41 @@ export interface TooltipProps {
     className?: string;
 }
 
-interface State {
-    tooltipIsOpen: boolean;
-}
-
 /**
- * Use Tooltip component to display a list of choices, once the handler is triggered.
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please use the `Tooltip` component from the `@webiny/admin-ui` package instead.
  */
-class Tooltip extends React.Component<TooltipProps, State> {
-    public override state = {
-        tooltipIsOpen: false
-    };
+export const Tooltip = ({
+    children,
+    content,
+    placement,
+    className = "webiny-ui-tooltip"
+}: TooltipProps) => {
+    const { side, align } = useMemo(() => {
+        const placementMapping: Record<
+            string,
+            { side: TooltipPropsBase["side"]; align: TooltipPropsBase["align"] }
+        > = {
+            left: { side: "left", align: undefined },
+            right: { side: "right", align: undefined },
+            top: { side: "top", align: undefined },
+            bottom: { side: "bottom", align: undefined },
+            topLeft: { side: "top", align: "start" },
+            topRight: { side: "top", align: "end" },
+            bottomLeft: { side: "bottom", align: "start" },
+            bottomRight: { side: "bottom", align: "end" }
+        };
 
-    onVisibleChange = (visible?: boolean) => {
-        this.setState({
-            tooltipIsOpen: visible || false
-        });
-    };
-
-    public override render() {
-        return (
-            <RcTooltip
-                animation={"fade"}
-                onVisibleChange={this.onVisibleChange}
-                overlay={this.props.content}
-                {...this.props}
-            >
-                <span className="webiny-ui-tooltip tooltip-content-wrapper">
-                    {this.props.children}
-                </span>
-            </RcTooltip>
-        );
-    }
-}
+        return placementMapping[placement ?? ""] || { side: undefined, align: undefined };
+    }, [placement]);
 
-export { Tooltip };
+    return (
+        <TooltipBase
+            trigger={children}
+            content={content}
+            className={className}
+            side={side}
+            align={align}
+        />
+    );
+};
diff --git a/packages/ui/src/Tooltip/style.scss b/packages/ui/src/Tooltip/style.scss
deleted file mode 100644
index 94b5d157983..00000000000
--- a/packages/ui/src/Tooltip/style.scss
+++ /dev/null
@@ -1,97 +0,0 @@
-// Ensures we have a "solid" child for the tooltip.
-// Will take height / width of its child element, making it easier for the tooltip to be applied.
-.tooltip-content-wrapper {
-  display: inline-block;
-}
-
-.rc-tooltip {
-  opacity: 1;
-  max-width: 250px;
-}
-
-.rc-tooltip-arrow {
-  //display: none;
-}
-
-.rc-tooltip-placement-top .rc-tooltip-arrow,
-.rc-tooltip-placement-topLeft .rc-tooltip-arrow,
-.rc-tooltip-placement-topRight .rc-tooltip-arrow {
-  border-top-color: var(--mdc-theme-secondary);
-}
-
-.rc-tooltip-placement-right .rc-tooltip-arrow,
-.rc-tooltip-placement-rightTop .rc-tooltip-arrow,
-.rc-tooltip-placement-rightBottom .rc-tooltip-arrow {
-  border-right-color: var(--mdc-theme-secondary);
-}
-
-.rc-tooltip-placement-left .rc-tooltip-arrow,
-.rc-tooltip-placement-leftTop .rc-tooltip-arrow,
-.rc-tooltip-placement-leftBottom .rc-tooltip-arrow {
-  border-left-color: var(--mdc-theme-secondary);
-}
-
-.rc-tooltip-placement-bottom .rc-tooltip-arrow,
-.rc-tooltip-placement-bottomLeft .rc-tooltip-arrow,
-.rc-tooltip-placement-bottomRight .rc-tooltip-arrow {
-  border-bottom-color: var(--mdc-theme-secondary);
-}
-
-.rc-tooltip-inner {
-  min-height: auto;
-  background-color: var(--mdc-theme-secondary);
-  border: none;
-  color: var(--mdc-theme-on-secondary);
-  border-radius: 0;
-
-  font-family: var(--mdc-typography-font-family);
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-  font-size: 0.75rem;
-  line-height: 125%;
-  font-weight: 500;
-  letter-spacing: 0.16667em;
-  text-decoration: none;
-  text-transform: uppercase;
-  text-align: center;
-  font-weight: 600;
-}
-
-.rc-tooltip.rc-tooltip-fade-enter {
-  display: block;
-  opacity: 0;
-}
-
-.rc-tooltip.rc-tooltip-fade-enter.rc-tooltip-fade-enter-active {
-  opacity: 1;
-  transition-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28);
-  transition: opacity 0.2s;
-}
-
-.rc-tooltip.rc-tooltip-fade-leave {
-  opacity: 0;
-}
-
-.rc-tooltip.rc-tooltip-fade-enter.rc-tooltip-fade-lave-active {
-  opacity: 0;
-  transition-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28);
-  transition: opacity 0.2s;
-}
-
-.example-enter {
-  opacity: 0.01;
-}
-
-.example-enter.example-enter-active {
-  opacity: 1;
-  transition: opacity 500ms ease-in;
-}
-
-.example-leave {
-  opacity: 1;
-}
-
-.example-leave.example-leave-active {
-  opacity: 0.01;
-  transition: opacity 300ms ease-in;
-}
diff --git a/packages/ui/src/TopAppBar/README.md b/packages/ui/src/TopAppBar/README.md
deleted file mode 100644
index d657eacd9c0..00000000000
--- a/packages/ui/src/TopAppBar/README.md
+++ /dev/null
@@ -1,20 +0,0 @@
-# TopAppBar
-
-### Design
-
-<a href="https://material.io/design/components/app-bars-top.html" target="_blank">https://material.io/design/components/app-bars-top.html</a>
-
-### Description
-
-Use `TopAppBar` component to display title, navigation or additional actions for your app.
-
-### Import
-
-```js
-import {
-  TopAppBar,
-  TopAppBarSection,
-  TopAppBarActionItem,
-  TopAppBarTitle
-} from "@webiny/ui/TopAppBar";
-```
diff --git a/packages/ui/src/TopAppBar/TopAppBar.tsx b/packages/ui/src/TopAppBar/TopAppBar.tsx
index cdfa1460b1b..b9eeb2695b7 100644
--- a/packages/ui/src/TopAppBar/TopAppBar.tsx
+++ b/packages/ui/src/TopAppBar/TopAppBar.tsx
@@ -1,10 +1,27 @@
 import React from "react";
+import { HeaderBar } from "@webiny/admin-ui";
 
-import {
-    TopAppBar as RmwcTopAppBar,
-    TopAppBarProps as RmwcTopAppBarProps,
-    TopAppBarRow
-} from "@rmwc/top-app-bar";
+/*********************************************************************
+ * TopAppBar
+ *********************************************************************/
+export interface RmwcTopAppBarProps {
+    /** Emits when the navigation icon is clicked. */
+    onNav?: (evt: any) => void;
+    /** Styles the top app bar as a fixed top app bar. */
+    fixed?: boolean;
+    /** Styles the top app bar as a prominent top app bar. */
+    prominent?: boolean;
+    /** Styles the top app bar as a short top app bar. */
+    short?: boolean;
+    /** Styles the top app bar to always be collapsed. */
+    shortCollapsed?: boolean;
+    /** Styles the top app bar to be dense. */
+    dense?: boolean;
+    /** Set a scrollTarget other than the window when you are using the TopAppBar inside of a nested scrolling DOM Element. Please note that you should store your scrollTarget in a stateful variable. See example https://codesandbox.io/s/reverent-austin-16zzi.*/
+    scrollTarget?: Element | null;
+    /** Advanced: A reference to the MDCFoundation. */
+    foundationRef?: any;
+}
 
 export type TopAppBarProps = RmwcTopAppBarProps & {
     /**
@@ -21,13 +38,28 @@ export type TopAppBarProps = RmwcTopAppBarProps & {
     style?: React.CSSProperties;
 };
 
+/**
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please use the `HeaderBar` component from the `@webiny/admin-ui` package instead.
+ */
 const TopAppBar = (props: TopAppBarProps) => {
     const { children, ...rest } = props;
-    return (
-        <RmwcTopAppBar {...rest}>
-            <TopAppBarRow>{children}</TopAppBarRow>
-        </RmwcTopAppBar>
-    );
+
+    let start, middle, end;
+    React.Children.forEach(children, child => {
+        if (!React.isValidElement(child)) {
+            return;
+        }
+
+        if (child.props.alignStart) {
+            start = child;
+        } else if (child.props.alignEnd) {
+            end = child;
+        } else {
+            middle = child;
+        }
+    });
+    return <HeaderBar start={start} middle={middle} end={end} {...rest} />;
 };
 
 export { TopAppBar };
diff --git a/packages/ui/src/TopAppBar/TopAppBarActionItem.tsx b/packages/ui/src/TopAppBar/TopAppBarActionItem.tsx
index 13fbb8a0688..86aff5620e8 100644
--- a/packages/ui/src/TopAppBar/TopAppBarActionItem.tsx
+++ b/packages/ui/src/TopAppBar/TopAppBarActionItem.tsx
@@ -1,13 +1,12 @@
 import React from "react";
-import {
-    TopAppBarActionItem as RmwcTopAppBarActionItem,
-    TopAppBarActionItemProps as RmwcTopAppBarActionItemProps
-} from "@rmwc/top-app-bar";
 
-export type TopAppBarActionItemProps = Omit<RmwcTopAppBarActionItemProps, "onChange">;
+export type TopAppBarActionItemProps = Omit<React.HTMLAttributes<HTMLDivElement>, "onChange">;
 
-const TopAppBarActionItem = (props: TopAppBarActionItemProps) => {
-    return <RmwcTopAppBarActionItem {...props} />;
+/**
+ * @deprecated This component is deprecated and will be removed in future releases.
+ */
+const TopAppBarActionItem = ({ children, ...props }: TopAppBarActionItemProps) => {
+    return <div {...props}>{children}</div>;
 };
 
 export { TopAppBarActionItem };
diff --git a/packages/ui/src/TopAppBar/TopAppBarNavigationIcon.tsx b/packages/ui/src/TopAppBar/TopAppBarNavigationIcon.tsx
index 452d5e15d59..07bc7b2374a 100644
--- a/packages/ui/src/TopAppBar/TopAppBarNavigationIcon.tsx
+++ b/packages/ui/src/TopAppBar/TopAppBarNavigationIcon.tsx
@@ -1,14 +1,12 @@
 import React from "react";
 
-import {
-    TopAppBarNavigationIcon as RmwcTopAppBarNavigationIcon,
-    TopAppBarNavigationIconProps as RmwcTopAppBarNavigationIconProps
-} from "@rmwc/top-app-bar";
+export type TopAppBarNavigationIconProps = Omit<React.HTMLAttributes<HTMLDivElement>, "onChange">;
 
-export type TopAppBarNavigationIconProps = Omit<RmwcTopAppBarNavigationIconProps, "onChange">;
-
-const TopAppBarNavigationIcon = (props: TopAppBarNavigationIconProps) => {
-    return <RmwcTopAppBarNavigationIcon {...props} />;
+/**
+ * @deprecated This component is deprecated and will be removed in future releases.
+ */
+const TopAppBarNavigationIcon = ({ children, ...props }: TopAppBarNavigationIconProps) => {
+    return <div {...props}>{children}</div>;
 };
 
 export { TopAppBarNavigationIcon };
diff --git a/packages/ui/src/TopAppBar/TopAppBarPrimary.tsx b/packages/ui/src/TopAppBar/TopAppBarPrimary.tsx
index 4af5a433345..5b887b123fe 100644
--- a/packages/ui/src/TopAppBar/TopAppBarPrimary.tsx
+++ b/packages/ui/src/TopAppBar/TopAppBarPrimary.tsx
@@ -3,6 +3,10 @@ import { TopAppBar, TopAppBarProps } from "./TopAppBar";
 
 export type TopAppBarPrimaryProps = TopAppBarProps;
 
+/**
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please use the `HeaderBar` component from the `@webiny/admin-ui` package instead.
+ */
 const TopAppBarPrimary = (props: TopAppBarPrimaryProps) => {
     const { children, ...other } = props;
     return (
diff --git a/packages/ui/src/TopAppBar/TopAppBarSecondary.tsx b/packages/ui/src/TopAppBar/TopAppBarSecondary.tsx
index 8b7d758deff..c31649dc959 100644
--- a/packages/ui/src/TopAppBar/TopAppBarSecondary.tsx
+++ b/packages/ui/src/TopAppBar/TopAppBarSecondary.tsx
@@ -3,6 +3,10 @@ import { TopAppBar, TopAppBarProps } from "./TopAppBar";
 
 export type TopAppBarSecondaryProps = TopAppBarProps;
 
+/**
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please use the `HeaderBar` component from the `@webiny/admin-ui` package instead.
+ */
 const TopAppBarSecondary = (props: TopAppBarSecondaryProps) => {
     const { style = {}, children, ...other } = props;
     return (
diff --git a/packages/ui/src/TopAppBar/TopAppBarSection.tsx b/packages/ui/src/TopAppBar/TopAppBarSection.tsx
index ba9fc47f699..dd27cf1a8a1 100644
--- a/packages/ui/src/TopAppBar/TopAppBarSection.tsx
+++ b/packages/ui/src/TopAppBar/TopAppBarSection.tsx
@@ -1,8 +1,11 @@
 import React from "react";
-import {
-    TopAppBarSection as RmwcTopAppBarSection,
-    TopAppBarSectionProps as RmwcTopAppBarSectionProps
-} from "@rmwc/top-app-bar";
+
+export interface RmwcTopAppBarSectionProps {
+    /** Aligns the section to the start. */
+    alignStart?: boolean;
+    /** Aligns the section to the end. */
+    alignEnd?: boolean;
+}
 
 export type TopAppBarSectionProps = RmwcTopAppBarSectionProps & {
     /**
@@ -21,9 +24,12 @@ export type TopAppBarSectionProps = RmwcTopAppBarSectionProps & {
     className?: string;
 };
 
+/**
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please use the `HeaderBar` component from the `@webiny/admin-ui` package instead.
+ */
 const TopAppBarSection = (props: TopAppBarSectionProps) => {
-    const { children, ...rest } = props;
-    return <RmwcTopAppBarSection {...rest}>{children}</RmwcTopAppBarSection>;
+    return <>{props.children}</>;
 };
 
 export { TopAppBarSection };
diff --git a/packages/ui/src/TopAppBar/TopAppBarTitle.tsx b/packages/ui/src/TopAppBar/TopAppBarTitle.tsx
index b31106c78c8..ef5fe5afabd 100644
--- a/packages/ui/src/TopAppBar/TopAppBarTitle.tsx
+++ b/packages/ui/src/TopAppBar/TopAppBarTitle.tsx
@@ -1,19 +1,19 @@
 import React from "react";
-import {
-    TopAppBarTitle as RmwcTopAppBarTitle,
-    TopAppBarTitleProps as RmwcTopAppBarTitleProps
-} from "@rmwc/top-app-bar";
+import { Text } from "@webiny/admin-ui";
 
-export type TopAppBarTitleProps = RmwcTopAppBarTitleProps & {
+export type TopAppBarTitleProps = {
     /**
      * Element children
      */
-    children: React.ReactNode[] | React.ReactNode;
+    children: React.ReactNode;
 };
 
+/**
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please use the `HeaderBar` component from the `@webiny/admin-ui` package instead.
+ */
 const TopAppBarTitle = (props: TopAppBarTitleProps) => {
-    const { children, ...rest } = props;
-    return <RmwcTopAppBarTitle {...rest}>{children}</RmwcTopAppBarTitle>;
+    return <Text {...props} />;
 };
 
 export { TopAppBarTitle };
diff --git a/packages/ui/src/TopAppBar/icons/baseline-autorenew-24px.svg b/packages/ui/src/TopAppBar/icons/baseline-autorenew-24px.svg
deleted file mode 100644
index f79fa263d10..00000000000
--- a/packages/ui/src/TopAppBar/icons/baseline-autorenew-24px.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-    <path d="M12 6v3l4-4-4-4v3c-4.42 0-8 3.58-8 8 0 1.57.46 3.03 1.24 4.26L6.7 14.8c-.45-.83-.7-1.79-.7-2.8 0-3.31 2.69-6 6-6zm6.76 1.74L17.3 9.2c.44.84.7 1.79.7 2.8 0 3.31-2.69 6-6 6v-3l-4 4 4 4v-3c4.42 0 8-3.58 8-8 0-1.57-.46-3.03-1.24-4.26z"/>
-    <path d="M0 0h24v24H0z" fill="none"/>
-</svg>
diff --git a/packages/ui/src/TopAppBar/icons/baseline-cloud_done-24px.svg b/packages/ui/src/TopAppBar/icons/baseline-cloud_done-24px.svg
deleted file mode 100644
index ef9bea0eed4..00000000000
--- a/packages/ui/src/TopAppBar/icons/baseline-cloud_done-24px.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-    <path d="M0 0h24v24H0z" fill="none"/>
-    <path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM10 17l-3.5-3.5 1.41-1.41L10 14.17 15.18 9l1.41 1.41L10 17z"/>
-</svg>
diff --git a/packages/ui/src/TopAppBar/icons/baseline-delete-24px.svg b/packages/ui/src/TopAppBar/icons/baseline-delete-24px.svg
deleted file mode 100644
index 9308f4df566..00000000000
--- a/packages/ui/src/TopAppBar/icons/baseline-delete-24px.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-    <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/>
-    <path d="M0 0h24v24H0z" fill="none"/>
-</svg>
diff --git a/packages/ui/src/TopAppBar/icons/baseline-email-24px.svg b/packages/ui/src/TopAppBar/icons/baseline-email-24px.svg
deleted file mode 100644
index e1560c6374d..00000000000
--- a/packages/ui/src/TopAppBar/icons/baseline-email-24px.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-    <path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/>
-    <path d="M0 0h24v24H0z" fill="none"/>
-</svg>
diff --git a/packages/ui/src/TopAppBar/icons/baseline-menu-24px.svg b/packages/ui/src/TopAppBar/icons/baseline-menu-24px.svg
deleted file mode 100644
index 37e9cfb5525..00000000000
--- a/packages/ui/src/TopAppBar/icons/baseline-menu-24px.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-    <path d="M0 0h24v24H0z" fill="none"/>
-    <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/>
-</svg>
diff --git a/packages/ui/src/TopProgressBar/README.md b/packages/ui/src/TopProgressBar/README.md
deleted file mode 100644
index b602420074e..00000000000
--- a/packages/ui/src/TopProgressBar/README.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# TopProgressBar
-
-### Description
-
-Use `TopProgressBar` to let users know their actions are being processed.
-
-### Import
-
-```js
-import { TopProgressBar } from "@webiny/ui/TopProgressBar";
-```
diff --git a/packages/ui/src/TopProgressBar/TopProgressBar.tsx b/packages/ui/src/TopProgressBar/TopProgressBar.tsx
deleted file mode 100644
index d02ea78ea4c..00000000000
--- a/packages/ui/src/TopProgressBar/TopProgressBar.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import React from "react";
-import nprogress from "nprogress";
-import "./style.scss";
-
-export interface TopProgressBarRender {
-    start: () => void;
-    finish: () => void;
-    nprogress: typeof nprogress;
-}
-
-export interface TopProgressBarProps {
-    /**
-     * Elements that require top loading bar to be shown.
-     */
-    children: (params: TopProgressBarRender) => React.ReactElement;
-}
-
-export const TopProgressBar = (props: TopProgressBarProps) => {
-    return props.children({
-        start: nprogress.start,
-        finish: nprogress.done,
-        nprogress
-    });
-};
diff --git a/packages/ui/src/TopProgressBar/hoc/index.ts b/packages/ui/src/TopProgressBar/hoc/index.ts
deleted file mode 100644
index 9ca0173b8ff..00000000000
--- a/packages/ui/src/TopProgressBar/hoc/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as withTopProgressBar } from "./withTopProgressBar";
diff --git a/packages/ui/src/TopProgressBar/hoc/withTopProgressBar.tsx b/packages/ui/src/TopProgressBar/hoc/withTopProgressBar.tsx
deleted file mode 100644
index ff299f46949..00000000000
--- a/packages/ui/src/TopProgressBar/hoc/withTopProgressBar.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from "react";
-import { TopProgressBar } from "..";
-
-const withTopProgressBar = () => {
-    return (BaseComponent: React.ComponentType<any>) => {
-        const WithTopProgressBar = (props: any) => {
-            return (
-                <TopProgressBar>
-                    {({ start, finish, nprogress }) => (
-                        <BaseComponent
-                            {...props}
-                            startTopProgressBar={start}
-                            finishTopProgressBar={finish}
-                            nprogress={nprogress}
-                        />
-                    )}
-                </TopProgressBar>
-            );
-        };
-
-        return WithTopProgressBar;
-    };
-};
-
-export default withTopProgressBar;
diff --git a/packages/ui/src/TopProgressBar/index.ts b/packages/ui/src/TopProgressBar/index.ts
deleted file mode 100644
index f885bc298ce..00000000000
--- a/packages/ui/src/TopProgressBar/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./TopProgressBar";
diff --git a/packages/ui/src/TopProgressBar/style.scss b/packages/ui/src/TopProgressBar/style.scss
deleted file mode 100644
index d2ae4d4c0b0..00000000000
--- a/packages/ui/src/TopProgressBar/style.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-/* Make clicks pass-through */
-#nprogress {
-  pointer-events: none;
-}
-
-#nprogress .bar {
-  background: var(--mdc-theme-secondary);
-
-  position: fixed;
-  z-index: 1031;
-  top: 64px;
-  left: 0;
-
-  width: 100%;
-  height: 2px;
-}
-
-/* Fancy blur effect */
-#nprogress .peg {
-  display: none;
-}
diff --git a/packages/ui/src/Typography/README.md b/packages/ui/src/Typography/README.md
deleted file mode 100644
index 7e25c03600b..00000000000
--- a/packages/ui/src/Typography/README.md
+++ /dev/null
@@ -1,15 +0,0 @@
-# Typography
-
-### Design
-
-<a href="https://material.io/design/typography/the-type-system.html" target="_blank">https://material.io/design/typography/the-type-system.html</a>
-
-### Description
-
-`Typography` component is used to represent different text sizes and styles.
-
-### Import
-
-```js
-import { Typography } from "@webiny/ui/Typography";
-```
diff --git a/packages/ui/src/Typography/Typography.tsx b/packages/ui/src/Typography/Typography.tsx
index 0edff2ea3e9..736ce61a377 100644
--- a/packages/ui/src/Typography/Typography.tsx
+++ b/packages/ui/src/Typography/Typography.tsx
@@ -1,21 +1,63 @@
 import React from "react";
-import {
-    Typography as RwmcTypography,
-    TypographyProps as RmwcTypographyProps
-} from "@rmwc/typography";
+import { Heading, HeadingLevels, Text } from "@webiny/admin-ui";
 
-interface TypographyProps extends RmwcTypographyProps {
+export declare type TypographyT =
+    | "headline1"
+    | "headline2"
+    | "headline3"
+    | "headline4"
+    | "headline5"
+    | "headline6"
+    | "subtitle1"
+    | "subtitle2"
+    | "body1"
+    | "body2"
+    | "caption"
+    | "button"
+    | "overline";
+
+interface TypographyProps {
+    use: TypographyT;
     children?: React.ReactNode;
     className?: string;
+    /**
+     * @deprecated
+     */
     style?: React.CSSProperties;
     tag?: string;
 }
 
 /**
- * Use Ripple component to display a list of choices, once the handler is triggered.
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please use the `Heading` or `Text` components from the `@webiny/admin-ui` package instead.
  */
 const Typography = (props: TypographyProps) => {
-    return <RwmcTypography {...props}>{props.children}</RwmcTypography>;
+    const { children, use, className } = props;
+
+    // Define a mapping of use values to heading levels
+    const headingLevelMap: { [key: string]: HeadingLevels } = {
+        headline1: 1,
+        headline2: 2,
+        headline3: 3,
+        headline4: 4,
+        headline5: 5,
+        headline6: 6
+    };
+
+    if (use in headingLevelMap) {
+        const level = headingLevelMap[use];
+        return (
+            <Heading level={level} className={className}>
+                {children}
+            </Heading>
+        );
+    }
+
+    return (
+        <Text size={"md"} className={className}>
+            {children}
+        </Text>
+    );
 };
 
 export { Typography, TypographyProps };
diff --git a/packages/ui/src/styles.scss b/packages/ui/src/styles.scss
index 09db25cb88c..7447daa7670 100644
--- a/packages/ui/src/styles.scss
+++ b/packages/ui/src/styles.scss
@@ -1,43 +1,17 @@
-// webiny light theme
-$webiny-theme-light-primary: #fa5723 !default;
-$webiny-theme-light-secondary: #00ccb0 !default;
-$webiny-theme-light-background: #f2f2f2 !default;
-$webiny-theme-light-surface: #fff !default;
-$webiny-theme-light-on-primary: #ffffff !default;
-$webiny-theme-light-on-secondary: #ffffff !default;
-$webiny-theme-light-on-surface: #000000 !default;
-$webiny-theme-light-on-background: rgba(212, 212, 212, 0.5) !default;
-$webiny-theme-light-text-primary-on-background: rgba(0, 0, 0, 0.87);
-$webiny-theme-light-text-secondary-on-background: rgba(0, 0, 0, 0.54);
-$webiny-theme-light-text-hint-on-dark: rgba(255, 255, 255, 0.5);
-$webiny-theme-light-caret-down: url("data:image/svg+xml,%3Csvg%20width%3D%2210px%22%20height%3D%225px%22%20viewBox%3D%227%2010%2010%205%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%20%20%3Cpolygon%20id%3D%22Shape%22%20stroke%3D%22none%22%20fill%3D%22%23000000%22%20fill-rule%3D%22evenodd%22%20opacity%3D%220.54%22%20points%3D%227%2010%2012%2015%2017%2010%22%3E%3C%2Fpolygon%3E%0A%3C%2Fsvg%3E");
-$webiny-theme-typography-font-family: "Source Sans Pro" !default;
-$webiny-theme-typography-subtitle2-font-weight: 600 !default;
+// ⚠️ DEPRECATED STYLESHEET ⚠️
+// We no longer rely on @material or RMWC for theming or component styling.
+// We still need to support these variables for backward compatibility.
+// Refer to the updated design system and theming approach from @webiny/admin-ui for current styling practices.
 
-$mdc-theme-primary: $webiny-theme-light-primary;
-$mdc-theme-on-primary: $webiny-theme-light-on-primary;
-$mdc-theme-secondary: $webiny-theme-light-secondary;
-$mdc-theme-on-secondary: $webiny-theme-light-on-secondary;
-$mdc-theme-surface: $webiny-theme-light-surface;
-$mdc-theme-on-surface: $webiny-theme-light-on-surface;
-$mdc-theme-background: $webiny-theme-light-background;
-$mdc-theme-on-background: $webiny-theme-light-on-background;
-$mdc-theme-text-primary-on-background: $webiny-theme-light-text-primary-on-background !global;
-$mdc-theme-text-secondary-on-background: $webiny-theme-light-text-secondary-on-background;
-$mdc-theme-text-hint-on-dark: $webiny-theme-light-text-hint-on-dark;
-$mdc-typography-font-family: $webiny-theme-typography-font-family;
-
-@import "material-components-web/material-components-web.scss";
-@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700|Open+Sans:300,400,600,700|Source+Code+Pro:400,700|Material+Icons");
-
-/*
-Fix for select box appearance. For some reason browser prefix css attributes are striped away.
- */
-.mdc-select__native-control {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-}
-
-.mdc-select--box .mdc-select__native-control {
-  padding-top: 10px;
+:root {
+  --mdc-theme-primary: hsl(var(--color-primary-500));
+  --mdc-theme-on-primary: hsl(var(--color-neutral-0));
+  --mdc-theme-secondary: hsl(var(--color-secondary-500));
+  --mdc-theme-on-secondary: hsl(var(--color-neutral-0));
+  --mdc-theme-surface: hsl(var(--color-neutral-0));
+  --mdc-theme-on-surface: hsl(var(--color-neutral-900));
+  --mdc-theme-background: hsl(var(--color-neutral-200));
+  --mdc-theme-on-background: hsl(var(--color-neutral-300));
+  --mdc-theme-text-primary-on-background: hsl(var(--color-neutral-700));
+  --mdc-theme-text-secondary-on-background: hsl(var(--color-neutral-500));
 }
diff --git a/packages/ui/tsconfig.build.json b/packages/ui/tsconfig.build.json
index da71f644d7f..5c186b9041a 100644
--- a/packages/ui/tsconfig.build.json
+++ b/packages/ui/tsconfig.build.json
@@ -2,7 +2,7 @@
   "extends": "../../tsconfig.build.json",
   "include": ["src"],
   "references": [
-    { "path": "../form/tsconfig.build.json" },
+    { "path": "../admin-ui/tsconfig.build.json" },
     { "path": "../utils/tsconfig.build.json" },
     { "path": "../validation/tsconfig.build.json" }
   ],
diff --git a/packages/ui/tsconfig.json b/packages/ui/tsconfig.json
index 12d87396cc6..44b2c7c91a5 100644
--- a/packages/ui/tsconfig.json
+++ b/packages/ui/tsconfig.json
@@ -1,7 +1,7 @@
 {
   "extends": "../../tsconfig.json",
   "include": ["src", "__tests__"],
-  "references": [{ "path": "../form" }, { "path": "../utils" }, { "path": "../validation" }],
+  "references": [{ "path": "../admin-ui" }, { "path": "../utils" }, { "path": "../validation" }],
   "compilerOptions": {
     "rootDirs": ["./src", "./__tests__"],
     "outDir": "./dist",
@@ -9,8 +9,8 @@
     "paths": {
       "~/*": ["./src/*"],
       "~tests/*": ["./__tests__/*"],
-      "@webiny/form/*": ["../form/src/*"],
-      "@webiny/form": ["../form/src"],
+      "@webiny/admin-ui/*": ["../admin-ui/src/*"],
+      "@webiny/admin-ui": ["../admin-ui/src"],
       "@webiny/utils/*": ["../utils/src/*"],
       "@webiny/utils": ["../utils/src"],
       "@webiny/validation/*": ["../validation/src/*"],
diff --git a/packages/utils/__tests__/compression/gzip.test.ts b/packages/utils/__tests__/compression/gzip.test.ts
new file mode 100644
index 00000000000..548bbe00afd
--- /dev/null
+++ b/packages/utils/__tests__/compression/gzip.test.ts
@@ -0,0 +1,30 @@
+import { compress, decompress } from "~/compression/gzip";
+
+const testingData = Object.freeze({
+    name: "John Doe",
+    age: 30,
+    address: {
+        street: "123 Main St",
+        city: "Anytown",
+        state: "CA",
+        zip: "12345"
+    },
+    hobbies: ["reading", "gaming", "hiking"]
+});
+
+const testingDataPacked =
+    "H4sIAAAAAAAAEyXMMQvCMBCG4b8SvvkGtbpkKzoJTo7icDVHckgTSQ6klv53Kd2e5X1nZB4FHteSsrsUAYGjwHc7AodQpTX4Gc2qiMFjf+jcjTW7u4HwUpvg0efJyjeD0Ixt3Z17EH762YrjCQshlWFQafAPVOGgOYIQedyQ9L3iufwBfHAQEZMAAAA=";
+
+describe("gzip", () => {
+    it("should compress the data", async () => {
+        const value = await compress(JSON.stringify(testingData));
+
+        expect(value.toString("utf-8")).toBeString();
+    });
+
+    it("should decompress the data", async () => {
+        const value = await decompress(Buffer.from(testingDataPacked, "base64"));
+
+        expect(value.toString("utf8")).toEqual(JSON.stringify(testingData));
+    });
+});
diff --git a/packages/utils/__tests__/compression/jsonpack.test.ts b/packages/utils/__tests__/compression/jsonpack.test.ts
new file mode 100644
index 00000000000..84865d6ad91
--- /dev/null
+++ b/packages/utils/__tests__/compression/jsonpack.test.ts
@@ -0,0 +1,30 @@
+import { compress, decompress } from "~/compression/jsonpack";
+
+const testingData = Object.freeze({
+    name: "John Doe",
+    age: 30,
+    address: {
+        street: "123 Main St",
+        city: "Anytown",
+        state: "CA",
+        zip: "12345"
+    },
+    hobbies: ["reading", "gaming", "hiking"]
+});
+
+const testingDataPacked =
+    "name|John+Doe|age|address|street|123+Main+St|city|Anytown|state|CA|zip|12345|hobbies|reading|gaming|hiking^U^^$0|1|2|G|3|$4|5|6|7|8|9|A|B]|C|@D|E|F]]";
+
+describe("jsonpack", () => {
+    it("should compress the data", async () => {
+        const value = await compress(testingData);
+
+        expect(value).toEqual(testingDataPacked);
+    });
+
+    it("should decompress the data", async () => {
+        const value = await decompress(testingDataPacked);
+
+        expect(value).toEqual(testingData);
+    });
+});
diff --git a/packages/utils/package.json b/packages/utils/package.json
index 68a8ae9483c..415e709e25a 100644
--- a/packages/utils/package.json
+++ b/packages/utils/package.json
@@ -16,6 +16,8 @@
   },
   "dependencies": {
     "@webiny/error": "0.0.0",
+    "@webiny/plugins": "0.0.0",
+    "jsonpack": "^1.1.5",
     "mdbid": "^1.0.0",
     "nanoid": "^3.3.8",
     "nanoid-dictionary": "^4.3.0",
diff --git a/packages/utils/src/compression/CompressionPlugin.ts b/packages/utils/src/compression/CompressionPlugin.ts
new file mode 100644
index 00000000000..743d6299c80
--- /dev/null
+++ b/packages/utils/src/compression/CompressionPlugin.ts
@@ -0,0 +1,14 @@
+import { Plugin } from "@webiny/plugins";
+
+export interface ICompressedValue {
+    compression: string;
+    value: string;
+}
+
+export abstract class CompressionPlugin extends Plugin {
+    public static override type: string = "utils.compression";
+    public abstract canCompress(data: any): boolean;
+    public abstract compress(data: any): Promise<ICompressedValue>;
+    public abstract canDecompress(data: ICompressedValue | unknown): boolean;
+    public abstract decompress(data: ICompressedValue | unknown): Promise<any>;
+}
diff --git a/packages/utils/src/compression/Compressor.ts b/packages/utils/src/compression/Compressor.ts
new file mode 100644
index 00000000000..7cedabd4e23
--- /dev/null
+++ b/packages/utils/src/compression/Compressor.ts
@@ -0,0 +1,91 @@
+import { PluginsContainer } from "@webiny/plugins";
+import { CompressionPlugin, type ICompressedValue } from "./CompressionPlugin";
+import { createGzipCompression } from "./plugins/GzipCompression";
+import { createJsonpackCompression } from "./plugins/JsonpackCompression";
+
+export interface ICompressorParams {
+    plugins: PluginsContainer;
+}
+
+export interface ICompressor {
+    disable(name: string): void;
+    enable(name: string): void;
+    /**
+     * Compresses the given data using the first plugin that can compress it.
+     */
+    compress<T = unknown>(data: T): Promise<T | ICompressedValue>;
+    /**
+     * Decompresses the given data using the first plugin that can decompress it.
+     */
+    decompress<T = unknown>(data: ICompressedValue | unknown): Promise<T>;
+}
+
+class Compressor implements ICompressor {
+    private readonly _plugins: PluginsContainer;
+
+    private readonly disabled: Set<string> = new Set();
+
+    private get plugins(): CompressionPlugin[] {
+        return this._plugins.byType<CompressionPlugin>(CompressionPlugin.type).reverse();
+    }
+
+    public constructor(params: ICompressorParams) {
+        this._plugins = params.plugins;
+    }
+
+    public disable(name: string): void {
+        this.disabled.add(name);
+    }
+
+    public enable(name: string): void {
+        this.disabled.delete(name);
+    }
+
+    public async compress<T = unknown>(data: T): Promise<T | ICompressedValue> {
+        for (const plugin of this.plugins) {
+            /**
+             * We can skip compressing with disable plugin.
+             */
+            if (plugin.name && this.disabled.has(plugin.name)) {
+                continue;
+            }
+            if (plugin.canCompress(data) === false) {
+                continue;
+            }
+            try {
+                return await plugin.compress(data);
+            } catch (ex) {
+                console.error(
+                    `Could not compress given data. More info in next line. Trying next plugin.`
+                );
+                console.log(ex);
+            }
+        }
+        return data;
+    }
+
+    public async decompress<T = unknown>(data: ICompressedValue | unknown): Promise<T> {
+        for (const plugin of this.plugins) {
+            if (plugin.canDecompress(data) === false) {
+                continue;
+            }
+            try {
+                return await plugin.decompress(data);
+            } catch (ex) {
+                console.error(
+                    `Could not decompress given data. More info in next line. Trying next plugin.`
+                );
+                console.log(ex);
+            }
+        }
+        return data as T;
+    }
+}
+
+export const createDefaultCompressor = (params: ICompressorParams) => {
+    const { plugins } = params;
+    plugins.register([createJsonpackCompression(), createGzipCompression()]);
+    return new Compressor({
+        plugins
+    });
+};
diff --git a/packages/utils/src/compression/index.ts b/packages/utils/src/compression/index.ts
new file mode 100644
index 00000000000..c11d6dbd5bb
--- /dev/null
+++ b/packages/utils/src/compression/index.ts
@@ -0,0 +1,4 @@
+export * from "./Compressor";
+export * from "./CompressionPlugin";
+export * from "./plugins/GzipCompression";
+export * from "./plugins/JsonpackCompression";
diff --git a/packages/utils/src/compression/jsonpack.ts b/packages/utils/src/compression/jsonpack.ts
new file mode 100644
index 00000000000..96ba493b4f4
--- /dev/null
+++ b/packages/utils/src/compression/jsonpack.ts
@@ -0,0 +1,11 @@
+import jsonpack from "jsonpack";
+
+export const compress = async (value: any) => {
+    return jsonpack.pack(value, {
+        verbose: false
+    });
+};
+
+export const decompress = async (value: string) => {
+    return jsonpack.unpack(value);
+};
diff --git a/packages/utils/src/compression/plugins/GzipCompression.ts b/packages/utils/src/compression/plugins/GzipCompression.ts
new file mode 100644
index 00000000000..cccc523cd2e
--- /dev/null
+++ b/packages/utils/src/compression/plugins/GzipCompression.ts
@@ -0,0 +1,58 @@
+import { CompressionPlugin, type ICompressedValue } from "../CompressionPlugin";
+import { compress as gzip, decompress as ungzip } from "~/compression/gzip";
+
+const GZIP = "gzip";
+const TO_STORAGE_ENCODING = "base64";
+const FROM_STORAGE_ENCODING = "utf8";
+
+export const convertToBuffer = (value: string | Buffer) => {
+    if (typeof value === "string") {
+        return Buffer.from(value, TO_STORAGE_ENCODING);
+    }
+    return value;
+};
+
+export class GzipCompression extends CompressionPlugin {
+    public override name = "utils.compression.gzip";
+
+    public override canCompress(data: any): boolean {
+        if (!!data?.compression) {
+            return false;
+        }
+        return true;
+    }
+
+    public override async compress(data: any): Promise<ICompressedValue> {
+        const value = await gzip(JSON.stringify(data));
+
+        return {
+            compression: GZIP,
+            value: value.toString(TO_STORAGE_ENCODING)
+        };
+    }
+
+    public override canDecompress(data: Partial<ICompressedValue>): boolean {
+        if (!data?.compression) {
+            return false;
+        }
+
+        const compression = data.compression as string;
+
+        return compression.toLowerCase() === GZIP;
+    }
+
+    public override async decompress(data: ICompressedValue): Promise<any> {
+        try {
+            const buf = await ungzip(convertToBuffer(data.value));
+            const value = buf.toString(FROM_STORAGE_ENCODING);
+            return JSON.parse(value);
+        } catch (ex) {
+            console.log(`Could not decompress given data.`, ex.message);
+            return null;
+        }
+    }
+}
+
+export const createGzipCompression = () => {
+    return new GzipCompression();
+};
diff --git a/packages/utils/src/compression/plugins/JsonpackCompression.ts b/packages/utils/src/compression/plugins/JsonpackCompression.ts
new file mode 100644
index 00000000000..a7dd471acba
--- /dev/null
+++ b/packages/utils/src/compression/plugins/JsonpackCompression.ts
@@ -0,0 +1,51 @@
+import { CompressionPlugin, type ICompressedValue } from "../CompressionPlugin";
+import { compress, decompress } from "~/compression/jsonpack";
+
+const JSONPACK = "jsonpack";
+
+export class JsonpackCompression extends CompressionPlugin {
+    public override name = "utils.compression.jsonpack";
+
+    public override canCompress(data: any): boolean {
+        if (typeof data !== "object") {
+            return false;
+        } else if (!!data.compression) {
+            return false;
+        }
+        // TODO Do we want to compress anything with jsonpack anymore? Maybe not...
+        return false;
+    }
+
+    public override async compress(data: any): Promise<ICompressedValue> {
+        const value = await compress(data);
+
+        return {
+            compression: JSONPACK,
+            value
+        };
+    }
+
+    public override canDecompress(data: Partial<ICompressedValue>): boolean {
+        if (typeof data !== "object") {
+            return false;
+        } else if (!data?.compression) {
+            return false;
+        }
+
+        const compression = data.compression as string;
+        return compression.toLowerCase() === JSONPACK;
+    }
+
+    public override async decompress(data: ICompressedValue): Promise<any> {
+        try {
+            return await decompress(data.value);
+        } catch (ex) {
+            console.log(`Could not decompress given data.`, ex.message);
+            return null;
+        }
+    }
+}
+
+export const createJsonpackCompression = () => {
+    return new JsonpackCompression();
+};
diff --git a/packages/utils/tsconfig.build.json b/packages/utils/tsconfig.build.json
index 13f52b8b902..f31aa70c60c 100644
--- a/packages/utils/tsconfig.build.json
+++ b/packages/utils/tsconfig.build.json
@@ -1,7 +1,10 @@
 {
   "extends": "../../tsconfig.build.json",
   "include": ["src"],
-  "references": [{ "path": "../error/tsconfig.build.json" }],
+  "references": [
+    { "path": "../error/tsconfig.build.json" },
+    { "path": "../plugins/tsconfig.build.json" }
+  ],
   "compilerOptions": {
     "rootDir": "./src",
     "outDir": "./dist",
diff --git a/packages/utils/tsconfig.json b/packages/utils/tsconfig.json
index 1298dfec2e6..f1a4a0672eb 100644
--- a/packages/utils/tsconfig.json
+++ b/packages/utils/tsconfig.json
@@ -1,7 +1,7 @@
 {
   "extends": "../../tsconfig.json",
   "include": ["src", "__tests__"],
-  "references": [{ "path": "../error" }],
+  "references": [{ "path": "../error" }, { "path": "../plugins" }],
   "compilerOptions": {
     "rootDirs": ["./src", "./__tests__"],
     "outDir": "./dist",
@@ -10,7 +10,9 @@
       "~/*": ["./src/*"],
       "~tests/*": ["./__tests__/*"],
       "@webiny/error/*": ["../error/src/*"],
-      "@webiny/error": ["../error/src"]
+      "@webiny/error": ["../error/src"],
+      "@webiny/plugins/*": ["../plugins/src/*"],
+      "@webiny/plugins": ["../plugins/src"]
     },
     "baseUrl": "."
   }
diff --git a/scripts/buildPackages/src/getBatches.ts b/scripts/buildPackages/src/getBatches.ts
index 743284cba10..e585f00967f 100644
--- a/scripts/buildPackages/src/getBatches.ts
+++ b/scripts/buildPackages/src/getBatches.ts
@@ -25,12 +25,13 @@ export async function getBatches(options: GetBatchesOptions = {}) {
         getPackages({
             includes: ["/packages/"]
         }) as Package[]
-    )
-        .filter(pkg => pkg.isTs)
-        .filter(pkg => {
-            // Check if packages has a build script
-            return pkg.packageJson.scripts && "build" in pkg.packageJson.scripts;
-        });
+    ).filter(pkg => {
+        if (pkg.isTs) {
+            return true;
+        }
+
+        return pkg.packageJson.scripts && "build" in pkg.packageJson.scripts;
+    });
 
     const packagesWhitelist = options.packagesWhitelist;
     if (Array.isArray(packagesWhitelist) && packagesWhitelist.length) {
diff --git a/typings/shared/index.d.ts b/typings/shared/index.d.ts
index 557c0e7f17d..d27260040c0 100644
--- a/typings/shared/index.d.ts
+++ b/typings/shared/index.d.ts
@@ -1,8 +1,3 @@
-declare module "*.md" {
-    const md: string;
-    export default md;
-}
-
 declare module "*.png" {
     const png: string;
     export default png;
diff --git a/webiny.project.ts b/webiny.project.ts
index 9c5f0cd687d..01ae88bd89e 100644
--- a/webiny.project.ts
+++ b/webiny.project.ts
@@ -57,7 +57,6 @@ export default {
     },
 
     featureFlags: {
-        experimentalAdminOmniSearch: true,
         experimentalDynamicPages: false,
         newWatchCommand: true,
         rspack: true
diff --git a/yarn.lock b/yarn.lock
index 0bee959d3ee..559d6f8739f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -21,6 +21,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@alloc/quick-lru@npm:^5.2.0":
+  version: 5.2.0
+  resolution: "@alloc/quick-lru@npm:5.2.0"
+  checksum: 10/bdc35758b552bcf045733ac047fb7f9a07c4678b944c641adfbd41f798b4b91fffd0fdc0df2578d9b0afc7b4d636aa6e110ead5d6281a2adc1ab90efd7f057f8
+  languageName: node
+  linkType: hard
+
 "@ampproject/remapping@npm:^2.2.0":
   version: 2.2.1
   resolution: "@ampproject/remapping@npm:2.2.1"
@@ -106,6 +113,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@aw-web-design/x-default-browser@npm:1.4.126":
+  version: 1.4.126
+  resolution: "@aw-web-design/x-default-browser@npm:1.4.126"
+  dependencies:
+    default-browser-id: "npm:3.0.0"
+  bin:
+    x-default-browser: bin/x-default-browser.js
+  checksum: 10/f7111a6f00953f32d344a05c9a1bc1f22124dfc2696b2b7906ca856a9f845a282f272f603c997ebbb8a2d6b865664f46fda3bec1c480f040e21b815ff8ed3607
+  languageName: node
+  linkType: hard
+
 "@aws-amplify/auth@npm:^5.6.15":
   version: 5.6.15
   resolution: "@aws-amplify/auth@npm:5.6.15"
@@ -2287,6 +2305,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/code-frame@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/code-frame@npm:7.27.1"
+  dependencies:
+    "@babel/helper-validator-identifier": "npm:^7.27.1"
+    js-tokens: "npm:^4.0.0"
+    picocolors: "npm:^1.1.1"
+  checksum: 10/721b8a6e360a1fa0f1c9fe7351ae6c874828e119183688b533c477aa378f1010f37cc9afbfc4722c686d1f5cdd00da02eab4ba7278a0c504fa0d7a321dcd4fdf
+  languageName: node
+  linkType: hard
+
 "@babel/compat-data@npm:7.26.5, @babel/compat-data@npm:^7.20.5, @babel/compat-data@npm:^7.22.6, @babel/compat-data@npm:^7.25.9, @babel/compat-data@npm:^7.26.5":
   version: 7.26.5
   resolution: "@babel/compat-data@npm:7.26.5"
@@ -2294,6 +2323,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/compat-data@npm:^7.27.2":
+  version: 7.27.3
+  resolution: "@babel/compat-data@npm:7.27.3"
+  checksum: 10/3bc4f53f2c076468c1df405e3fb3aac60a8118f46ff4ea8d093e00dcf919e915adc68d9c0a46fffe9cdc5b0d41fefe3b44370d43da09bbd7c9e5474d2cd4c656
+  languageName: node
+  linkType: hard
+
 "@babel/core@npm:7.26.7, @babel/core@npm:^7.11.6, @babel/core@npm:^7.12.3, @babel/core@npm:^7.19.6, @babel/core@npm:^7.23.9":
   version: 7.26.7
   resolution: "@babel/core@npm:7.26.7"
@@ -2317,6 +2353,42 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/core@npm:^7.18.9, @babel/core@npm:^7.23.0, @babel/core@npm:^7.23.2":
+  version: 7.27.3
+  resolution: "@babel/core@npm:7.27.3"
+  dependencies:
+    "@ampproject/remapping": "npm:^2.2.0"
+    "@babel/code-frame": "npm:^7.27.1"
+    "@babel/generator": "npm:^7.27.3"
+    "@babel/helper-compilation-targets": "npm:^7.27.2"
+    "@babel/helper-module-transforms": "npm:^7.27.3"
+    "@babel/helpers": "npm:^7.27.3"
+    "@babel/parser": "npm:^7.27.3"
+    "@babel/template": "npm:^7.27.2"
+    "@babel/traverse": "npm:^7.27.3"
+    "@babel/types": "npm:^7.27.3"
+    convert-source-map: "npm:^2.0.0"
+    debug: "npm:^4.1.0"
+    gensync: "npm:^1.0.0-beta.2"
+    json5: "npm:^2.2.3"
+    semver: "npm:^6.3.1"
+  checksum: 10/c0cf72f01c9913b10e974e548e46359563cae849e914211df951bbfc90ceac75c609156f20faa2db784308dc413ba64e2c0b94f9173e7e1e92a75053aab1e1bb
+  languageName: node
+  linkType: hard
+
+"@babel/generator@npm:^7.23.0, @babel/generator@npm:^7.27.3":
+  version: 7.27.3
+  resolution: "@babel/generator@npm:7.27.3"
+  dependencies:
+    "@babel/parser": "npm:^7.27.3"
+    "@babel/types": "npm:^7.27.3"
+    "@jridgewell/gen-mapping": "npm:^0.3.5"
+    "@jridgewell/trace-mapping": "npm:^0.3.25"
+    jsesc: "npm:^3.0.2"
+  checksum: 10/3b8477ae0c305639f86aeb553115535b103626008945462d32171fa4ebd77f2a0345600dc5baee7ced98d54cc7da9c806808a04b555c75136f42e0e9d7794bdf
+  languageName: node
+  linkType: hard
+
 "@babel/generator@npm:^7.26.5":
   version: 7.26.5
   resolution: "@babel/generator@npm:7.26.5"
@@ -2359,6 +2431,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-annotate-as-pure@npm:^7.27.1":
+  version: 7.27.3
+  resolution: "@babel/helper-annotate-as-pure@npm:7.27.3"
+  dependencies:
+    "@babel/types": "npm:^7.27.3"
+  checksum: 10/63863a5c936ef82b546ca289c9d1b18fabfc24da5c4ee382830b124e2e79b68d626207febc8d4bffc720f50b2ee65691d7d12cc0308679dee2cd6bdc926b7190
+  languageName: node
+  linkType: hard
+
 "@babel/helper-compilation-targets@npm:^7.20.7":
   version: 7.20.7
   resolution: "@babel/helper-compilation-targets@npm:7.20.7"
@@ -2415,6 +2496,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-compilation-targets@npm:^7.27.1, @babel/helper-compilation-targets@npm:^7.27.2":
+  version: 7.27.2
+  resolution: "@babel/helper-compilation-targets@npm:7.27.2"
+  dependencies:
+    "@babel/compat-data": "npm:^7.27.2"
+    "@babel/helper-validator-option": "npm:^7.27.1"
+    browserslist: "npm:^4.24.0"
+    lru-cache: "npm:^5.1.1"
+    semver: "npm:^6.3.1"
+  checksum: 10/bd53c30a7477049db04b655d11f4c3500aea3bcbc2497cf02161de2ecf994fec7c098aabbcebe210ffabc2ecbdb1e3ffad23fb4d3f18723b814f423ea1749fe8
+  languageName: node
+  linkType: hard
+
 "@babel/helper-create-class-features-plugin@npm:^7.18.6":
   version: 7.20.12
   resolution: "@babel/helper-create-class-features-plugin@npm:7.20.12"
@@ -2450,6 +2544,23 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-create-class-features-plugin@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/helper-create-class-features-plugin@npm:7.27.1"
+  dependencies:
+    "@babel/helper-annotate-as-pure": "npm:^7.27.1"
+    "@babel/helper-member-expression-to-functions": "npm:^7.27.1"
+    "@babel/helper-optimise-call-expression": "npm:^7.27.1"
+    "@babel/helper-replace-supers": "npm:^7.27.1"
+    "@babel/helper-skip-transparent-expression-wrappers": "npm:^7.27.1"
+    "@babel/traverse": "npm:^7.27.1"
+    semver: "npm:^6.3.1"
+  peerDependencies:
+    "@babel/core": ^7.0.0
+  checksum: 10/701579b49046cd42f6a6b1e693e6827df8623185adf0911c4d68a219a082d8fd4501672880d92b6b96263d1c92a3beb891b3464a662a55e69e7539d8db9277da
+  languageName: node
+  linkType: hard
+
 "@babel/helper-create-regexp-features-plugin@npm:^7.18.6":
   version: 7.20.5
   resolution: "@babel/helper-create-regexp-features-plugin@npm:7.20.5"
@@ -2475,6 +2586,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-create-regexp-features-plugin@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/helper-create-regexp-features-plugin@npm:7.27.1"
+  dependencies:
+    "@babel/helper-annotate-as-pure": "npm:^7.27.1"
+    regexpu-core: "npm:^6.2.0"
+    semver: "npm:^6.3.1"
+  peerDependencies:
+    "@babel/core": ^7.0.0
+  checksum: 10/dea272628cd8874f127ab7b2ee468620aabc1383d38bb40c49a9c7667db2258cdfe6620a1d1412f5f0706583f6301b4b7ad3d5932f24df7fe72e66bf9bc0be45
+  languageName: node
+  linkType: hard
+
 "@babel/helper-define-polyfill-provider@npm:^0.6.1, @babel/helper-define-polyfill-provider@npm:^0.6.2, @babel/helper-define-polyfill-provider@npm:^0.6.3":
   version: 0.6.3
   resolution: "@babel/helper-define-polyfill-provider@npm:0.6.3"
@@ -2528,6 +2652,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-member-expression-to-functions@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/helper-member-expression-to-functions@npm:7.27.1"
+  dependencies:
+    "@babel/traverse": "npm:^7.27.1"
+    "@babel/types": "npm:^7.27.1"
+  checksum: 10/533a5a2cf1c9a8770d241b86d5f124c88e953c831a359faf1ac7ba1e632749c1748281b83295d227fe6035b202d81f3d3a1ea13891f150c6538e040668d6126a
+  languageName: node
+  linkType: hard
+
 "@babel/helper-module-imports@npm:^7.0.0, @babel/helper-module-imports@npm:^7.16.7":
   version: 7.18.6
   resolution: "@babel/helper-module-imports@npm:7.18.6"
@@ -2547,6 +2681,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-module-imports@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/helper-module-imports@npm:7.27.1"
+  dependencies:
+    "@babel/traverse": "npm:^7.27.1"
+    "@babel/types": "npm:^7.27.1"
+  checksum: 10/58e792ea5d4ae71676e0d03d9fef33e886a09602addc3bd01388a98d87df9fcfd192968feb40ac4aedb7e287ec3d0c17b33e3ecefe002592041a91d8a1998a8d
+  languageName: node
+  linkType: hard
+
 "@babel/helper-module-transforms@npm:^7.25.9, @babel/helper-module-transforms@npm:^7.26.0":
   version: 7.26.0
   resolution: "@babel/helper-module-transforms@npm:7.26.0"
@@ -2560,6 +2704,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-module-transforms@npm:^7.27.1, @babel/helper-module-transforms@npm:^7.27.3":
+  version: 7.27.3
+  resolution: "@babel/helper-module-transforms@npm:7.27.3"
+  dependencies:
+    "@babel/helper-module-imports": "npm:^7.27.1"
+    "@babel/helper-validator-identifier": "npm:^7.27.1"
+    "@babel/traverse": "npm:^7.27.3"
+  peerDependencies:
+    "@babel/core": ^7.0.0
+  checksum: 10/47abc90ceb181b4bdea9bf1717adf536d1b5e5acb6f6d8a7a4524080318b5ca8a99e6d58677268c596bad71077d1d98834d2c3815f2443e6d3f287962300f15d
+  languageName: node
+  linkType: hard
+
 "@babel/helper-optimise-call-expression@npm:^7.18.6":
   version: 7.18.6
   resolution: "@babel/helper-optimise-call-expression@npm:7.18.6"
@@ -2578,6 +2735,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-optimise-call-expression@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/helper-optimise-call-expression@npm:7.27.1"
+  dependencies:
+    "@babel/types": "npm:^7.27.1"
+  checksum: 10/0fb7ee824a384529d6b74f8a58279f9b56bfe3cce332168067dddeab2552d8eeb56dc8eaf86c04a3a09166a316cb92dfc79c4c623cd034ad4c563952c98b464f
+  languageName: node
+  linkType: hard
+
 "@babel/helper-plugin-utils@npm:^7.0.0, @babel/helper-plugin-utils@npm:^7.10.4, @babel/helper-plugin-utils@npm:^7.12.13, @babel/helper-plugin-utils@npm:^7.14.5, @babel/helper-plugin-utils@npm:^7.18.6, @babel/helper-plugin-utils@npm:^7.19.0, @babel/helper-plugin-utils@npm:^7.20.2, @babel/helper-plugin-utils@npm:^7.8.0":
   version: 7.20.2
   resolution: "@babel/helper-plugin-utils@npm:7.20.2"
@@ -2606,6 +2772,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-plugin-utils@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/helper-plugin-utils@npm:7.27.1"
+  checksum: 10/96136c2428888e620e2ec493c25888f9ceb4a21099dcf3dd4508ea64b58cdedbd5a9fb6c7b352546de84d6c24edafe482318646932a22c449ebd16d16c22d864
+  languageName: node
+  linkType: hard
+
 "@babel/helper-remap-async-to-generator@npm:^7.25.9":
   version: 7.25.9
   resolution: "@babel/helper-remap-async-to-generator@npm:7.25.9"
@@ -2619,6 +2792,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-remap-async-to-generator@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/helper-remap-async-to-generator@npm:7.27.1"
+  dependencies:
+    "@babel/helper-annotate-as-pure": "npm:^7.27.1"
+    "@babel/helper-wrap-function": "npm:^7.27.1"
+    "@babel/traverse": "npm:^7.27.1"
+  peerDependencies:
+    "@babel/core": ^7.0.0
+  checksum: 10/0747397ba013f87dbf575454a76c18210d61c7c9af0f697546b4bcac670b54ddc156330234407b397f0c948738c304c228e0223039bc45eab4fbf46966a5e8cc
+  languageName: node
+  linkType: hard
+
 "@babel/helper-replace-supers@npm:^7.20.7":
   version: 7.20.7
   resolution: "@babel/helper-replace-supers@npm:7.20.7"
@@ -2646,6 +2832,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-replace-supers@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/helper-replace-supers@npm:7.27.1"
+  dependencies:
+    "@babel/helper-member-expression-to-functions": "npm:^7.27.1"
+    "@babel/helper-optimise-call-expression": "npm:^7.27.1"
+    "@babel/traverse": "npm:^7.27.1"
+  peerDependencies:
+    "@babel/core": ^7.0.0
+  checksum: 10/72e3f8bef744c06874206bf0d80a0abbedbda269586966511c2491df4f6bf6d47a94700810c7a6737345a545dfb8295222e1e72f506bcd0b40edb3f594f739ea
+  languageName: node
+  linkType: hard
+
 "@babel/helper-skip-transparent-expression-wrappers@npm:^7.20.0":
   version: 7.20.0
   resolution: "@babel/helper-skip-transparent-expression-wrappers@npm:7.20.0"
@@ -2665,6 +2864,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-skip-transparent-expression-wrappers@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/helper-skip-transparent-expression-wrappers@npm:7.27.1"
+  dependencies:
+    "@babel/traverse": "npm:^7.27.1"
+    "@babel/types": "npm:^7.27.1"
+  checksum: 10/4f380c5d0e0769fa6942a468b0c2d7c8f0c438f941aaa88f785f8752c103631d0904c7b4e76207a3b0e6588b2dec376595370d92ca8f8f1b422c14a69aa146d4
+  languageName: node
+  linkType: hard
+
 "@babel/helper-split-export-declaration@npm:^7.18.6":
   version: 7.18.6
   resolution: "@babel/helper-split-export-declaration@npm:7.18.6"
@@ -2681,6 +2890,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-string-parser@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/helper-string-parser@npm:7.27.1"
+  checksum: 10/0ae29cc2005084abdae2966afdb86ed14d41c9c37db02c3693d5022fba9f5d59b011d039380b8e537c34daf117c549f52b452398f576e908fb9db3c7abbb3a00
+  languageName: node
+  linkType: hard
+
 "@babel/helper-validator-identifier@npm:^7.25.9":
   version: 7.25.9
   resolution: "@babel/helper-validator-identifier@npm:7.25.9"
@@ -2688,6 +2904,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-validator-identifier@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/helper-validator-identifier@npm:7.27.1"
+  checksum: 10/75041904d21bdc0cd3b07a8ac90b11d64cd3c881e89cb936fa80edd734bf23c35e6bd1312611e8574c4eab1f3af0f63e8a5894f4699e9cfdf70c06fcf4252320
+  languageName: node
+  linkType: hard
+
 "@babel/helper-validator-option@npm:^7.18.6":
   version: 7.18.6
   resolution: "@babel/helper-validator-option@npm:7.18.6"
@@ -2709,6 +2932,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-validator-option@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/helper-validator-option@npm:7.27.1"
+  checksum: 10/db73e6a308092531c629ee5de7f0d04390835b21a263be2644276cb27da2384b64676cab9f22cd8d8dbd854c92b1d7d56fc8517cf0070c35d1c14a8c828b0903
+  languageName: node
+  linkType: hard
+
 "@babel/helper-wrap-function@npm:^7.25.9":
   version: 7.25.9
   resolution: "@babel/helper-wrap-function@npm:7.25.9"
@@ -2720,6 +2950,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-wrap-function@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/helper-wrap-function@npm:7.27.1"
+  dependencies:
+    "@babel/template": "npm:^7.27.1"
+    "@babel/traverse": "npm:^7.27.1"
+    "@babel/types": "npm:^7.27.1"
+  checksum: 10/effa5ba1732764982db52295a0003d0d6b527edf70d8c649f5a521808decbc47fc8f3c21cd31f7b6331192289f3bf5617141bce778fec45dcaedf5708d9c3140
+  languageName: node
+  linkType: hard
+
 "@babel/helpers@npm:^7.26.7":
   version: 7.26.7
   resolution: "@babel/helpers@npm:7.26.7"
@@ -2730,6 +2971,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helpers@npm:^7.27.3":
+  version: 7.27.3
+  resolution: "@babel/helpers@npm:7.27.3"
+  dependencies:
+    "@babel/template": "npm:^7.27.2"
+    "@babel/types": "npm:^7.27.3"
+  checksum: 10/534e6bd68d96a7e548aeab7a4cf8003d7cffc0202448e47242095692e243d08fcf89b6f4b9ea369b4fc29a4247b443da9fa29f43de4b71639b3687c1c8f534d2
+  languageName: node
+  linkType: hard
+
 "@babel/parser@npm:7.26.7, @babel/parser@npm:^7.1.0, @babel/parser@npm:^7.14.7, @babel/parser@npm:^7.20.7, @babel/parser@npm:^7.23.9, @babel/parser@npm:^7.25.9, @babel/parser@npm:^7.26.5, @babel/parser@npm:^7.26.7, @babel/parser@npm:^7.6.4":
   version: 7.26.7
   resolution: "@babel/parser@npm:7.26.7"
@@ -2741,6 +2992,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/parser@npm:^7.23.0, @babel/parser@npm:^7.27.2, @babel/parser@npm:^7.27.3":
+  version: 7.27.3
+  resolution: "@babel/parser@npm:7.27.3"
+  dependencies:
+    "@babel/types": "npm:^7.27.3"
+  bin:
+    parser: ./bin/babel-parser.js
+  checksum: 10/ea5a0cd55e18f905d4c732b009ca0f66b0e5580f0d2af82643c26ef0909a16704778f59b7a2959096e9cf881b6291da747bfd29e400422e04d9074eb1f80983e
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-bugfix-firefox-class-in-computed-class-key@npm:^7.25.9":
   version: 7.25.9
   resolution: "@babel/plugin-bugfix-firefox-class-in-computed-class-key@npm:7.25.9"
@@ -2753,6 +3015,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-bugfix-firefox-class-in-computed-class-key@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-bugfix-firefox-class-in-computed-class-key@npm:7.27.1"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
+    "@babel/traverse": "npm:^7.27.1"
+  peerDependencies:
+    "@babel/core": ^7.0.0
+  checksum: 10/fe65257d5b82558bc6bc0f3a5a7a35b4166f71bed3747714dafb6360fadb15f036d568bc1fbeedae819165008c8feb646633ab91c0e3a95284963972f4fa9751
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-bugfix-safari-class-field-initializer-scope@npm:^7.25.9":
   version: 7.25.9
   resolution: "@babel/plugin-bugfix-safari-class-field-initializer-scope@npm:7.25.9"
@@ -2764,6 +3038,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-bugfix-safari-class-field-initializer-scope@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-bugfix-safari-class-field-initializer-scope@npm:7.27.1"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
+  peerDependencies:
+    "@babel/core": ^7.0.0
+  checksum: 10/eb7f4146dc01f1198ce559a90b077e58b951a07521ec414e3c7d4593bf6c4ab5c2af22242a7e9fec085e20299e0ba6ea97f44a45e84ab148141bf9eb959ad25e
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:^7.25.9":
   version: 7.25.9
   resolution: "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:7.25.9"
@@ -2775,6 +3060,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:7.27.1"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
+  peerDependencies:
+    "@babel/core": ^7.0.0
+  checksum: 10/621cfddfcc99a81e74f8b6f9101fd260b27500cb1a568e3ceae9cc8afe9aee45ac3bca3900a2b66c612b1a2366d29ef67d4df5a1c975be727eaad6906f98c2c6
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@npm:^7.25.9":
   version: 7.25.9
   resolution: "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@npm:7.25.9"
@@ -2788,6 +3084,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@npm:7.27.1"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
+    "@babel/helper-skip-transparent-expression-wrappers": "npm:^7.27.1"
+    "@babel/plugin-transform-optional-chaining": "npm:^7.27.1"
+  peerDependencies:
+    "@babel/core": ^7.13.0
+  checksum: 10/f07aa80272bd7a46b7ba11a4644da6c9b6a5a64e848dfaffdad6f02663adefd512e1aaebe664c4dd95f7ed4f80c872c7f8db8d8e34b47aae0930b412a28711a0
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@npm:^7.25.9":
   version: 7.25.9
   resolution: "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@npm:7.25.9"
@@ -2800,6 +3109,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@npm:7.27.1"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
+    "@babel/traverse": "npm:^7.27.1"
+  peerDependencies:
+    "@babel/core": ^7.0.0
+  checksum: 10/dfa68da5f68c0fa9deff1739ac270a5643ea07540b26a2a05403bc536c96595f0fe98a5eac9f9b3501b79ce57caa3045a94c75d5ccbfed946a62469a370ecdc2
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-proposal-class-properties@npm:^7.18.6":
   version: 7.18.6
   resolution: "@babel/plugin-proposal-class-properties@npm:7.18.6"
@@ -2880,6 +3201,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-syntax-flow@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-syntax-flow@npm:7.27.1"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10/7baca3171ed595d04c865b0ce46fca7f21900686df9d7fcd1017036ce78bb5483e33803de810831e68d39cf478953db69f49ae3f3de2e3207bc4ba49a96b6739
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-syntax-import-assertions@npm:^7.26.0":
   version: 7.26.0
   resolution: "@babel/plugin-syntax-import-assertions@npm:7.26.0"
@@ -2891,6 +3223,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-syntax-import-assertions@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-syntax-import-assertions@npm:7.27.1"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10/fb661d630808d67ecb85eabad25aac4e9696a20464bad4c4a6a0d3d40e4dc22557d47e9be3d591ec06429cf048cfe169b8891c373606344d51c4f3ac0f91d6d0
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-syntax-import-attributes@npm:^7.26.0":
   version: 7.26.0
   resolution: "@babel/plugin-syntax-import-attributes@npm:7.26.0"
@@ -2902,6 +3245,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-syntax-import-attributes@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-syntax-import-attributes@npm:7.27.1"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10/97973982fff1bbf86b3d1df13380567042887c50e2ae13a400d02a8ff2c9742a60a75e279bfb73019e1cd9710f04be5e6ab81f896e6678dcfcec8b135e8896cf
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-syntax-import-meta@npm:^7.8.3":
   version: 7.10.4
   resolution: "@babel/plugin-syntax-import-meta@npm:7.10.4"
@@ -2935,6 +3289,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-syntax-jsx@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-syntax-jsx@npm:7.27.1"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10/c6d1324cff286a369aa95d99b8abd21dd07821b5d3affd5fe7d6058c84cff9190743287826463ee57a7beecd10fa1e4bc99061df532ee14e188c1c8937b13e3a
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-syntax-jsx@npm:^7.7.2":
   version: 7.21.4
   resolution: "@babel/plugin-syntax-jsx@npm:7.21.4"
@@ -3034,6 +3399,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-syntax-typescript@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-syntax-typescript@npm:7.27.1"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10/87836f7e32af624c2914c73cd6b9803cf324e07d43f61dbb973c6a86f75df725e12540d91fac7141c14b697aa9268fd064220998daced156e96ac3062d7afb41
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-syntax-typescript@npm:^7.7.2":
   version: 7.20.0
   resolution: "@babel/plugin-syntax-typescript@npm:7.20.0"
@@ -3068,6 +3444,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-arrow-functions@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-arrow-functions@npm:7.27.1"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10/62c2cc0ae2093336b1aa1376741c5ed245c0987d9e4b4c5313da4a38155509a7098b5acce582b6781cc0699381420010da2e3086353344abe0a6a0ec38961eb7
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-async-generator-functions@npm:^7.25.9":
   version: 7.25.9
   resolution: "@babel/plugin-transform-async-generator-functions@npm:7.25.9"
@@ -3081,6 +3468,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-async-generator-functions@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-async-generator-functions@npm:7.27.1"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
+    "@babel/helper-remap-async-to-generator": "npm:^7.27.1"
+    "@babel/traverse": "npm:^7.27.1"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10/92e8ba589e8b128255846375e13fee30a3b77c889578f1f30da57ee26133f397dbbc81b27e1f19c12080b096930e62bce1dcbaa7a1453d296f51eb8bda3b8d39
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-async-to-generator@npm:^7.25.9":
   version: 7.25.9
   resolution: "@babel/plugin-transform-async-to-generator@npm:7.25.9"
@@ -3094,6 +3494,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-async-to-generator@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-async-to-generator@npm:7.27.1"
+  dependencies:
+    "@babel/helper-module-imports": "npm:^7.27.1"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
+    "@babel/helper-remap-async-to-generator": "npm:^7.27.1"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10/d79d7a7ae7d416f6a48200017d027a6ba94c09c7617eea8b4e9c803630f00094c1a4fc32bf20ce3282567824ce3fcbda51653aac4003c71ea4e681b331338979
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-block-scoped-functions@npm:^7.26.5":
   version: 7.26.5
   resolution: "@babel/plugin-transform-block-scoped-functions@npm:7.26.5"
@@ -3105,6 +3518,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-block-scoped-functions@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-block-scoped-functions@npm:7.27.1"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10/7fb4988ca80cf1fc8345310d5edfe38e86b3a72a302675cdd09404d5064fe1d1fe1283ebe658ad2b71445ecef857bfb29a748064306b5f6c628e0084759c2201
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-block-scoping@npm:^7.25.9":
   version: 7.25.9
   resolution: "@babel/plugin-transform-block-scoping@npm:7.25.9"
@@ -3116,6 +3540,29 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-block-scoping@npm:^7.27.1":
+  version: 7.27.3
+  resolution: "@babel/plugin-transform-block-scoping@npm:7.27.3"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10/0c174b0820edf6efc203de06e86897090cc91cb2beec6cfadb53baa1fe4619d11115578e3d56aa37ab5dee4fa79ecf8a736fdb689456a92666e55d0f86ae40ed
+  languageName: node
+  linkType: hard
+
+"@babel/plugin-transform-class-properties@npm:^7.22.5, @babel/plugin-transform-class-properties@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-class-properties@npm:7.27.1"
+  dependencies:
+    "@babel/helper-create-class-features-plugin": "npm:^7.27.1"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10/475a6e5a9454912fe1bdc171941976ca10ea4e707675d671cdb5ce6b6761d84d1791ac61b6bca81a2e5f6430cb7b9d8e4b2392404110e69c28207a754e196294
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-class-properties@npm:^7.25.9":
   version: 7.25.9
   resolution: "@babel/plugin-transform-class-properties@npm:7.25.9"
@@ -3140,6 +3587,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-class-static-block@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-class-static-block@npm:7.27.1"
+  dependencies:
+    "@babel/helper-create-class-features-plugin": "npm:^7.27.1"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
+  peerDependencies:
+    "@babel/core": ^7.12.0
+  checksum: 10/2d49de0f5ffc66ae873be1d8c3bf4d22e51889cc779d534e4dbda0f91e36907479e5c650b209fcfc80f922a6c3c2d76c905fc2f5dc78cc9a836f8c31b10686c4
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-classes@npm:^7.25.9":
   version: 7.25.9
   resolution: "@babel/plugin-transform-classes@npm:7.25.9"
@@ -3156,6 +3615,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-classes@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-classes@npm:7.27.1"
+  dependencies:
+    "@babel/helper-annotate-as-pure": "npm:^7.27.1"
+    "@babel/helper-compilation-targets": "npm:^7.27.1"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
+    "@babel/helper-replace-supers": "npm:^7.27.1"
+    "@babel/traverse": "npm:^7.27.1"
+    globals: "npm:^11.1.0"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10/4ac2224fa68b933c80b4755300d795e055f6fb18c51432e9a4c048edcd6c64cae097eb9063d25f6c7e706ecd85a4c0b89b6f89b320b5798e3139c9cc4ff99f61
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-computed-properties@npm:^7.25.9":
   version: 7.25.9
   resolution: "@babel/plugin-transform-computed-properties@npm:7.25.9"
@@ -3168,6 +3643,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-computed-properties@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-computed-properties@npm:7.27.1"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
+    "@babel/template": "npm:^7.27.1"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10/101f6d4575447070943d5a9efaa5bea8c552ea3083d73a9612f1a16d38b0a0a7b79a5feb65c6cc4e4fcabf28e85a570b97ccd3294da966e8fbbb6dfb97220eda
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-destructuring@npm:^7.25.9":
   version: 7.25.9
   resolution: "@babel/plugin-transform-destructuring@npm:7.25.9"
@@ -3179,6 +3666,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-destructuring@npm:^7.27.1, @babel/plugin-transform-destructuring@npm:^7.27.3":
+  version: 7.27.3
+  resolution: "@babel/plugin-transform-destructuring@npm:7.27.3"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10/d5b1868d079551c0a2e923419613efe18a987548219bb378c61ab7e005d4f3ea590067f93996df6d896177c1cae1396b4aae9163c8a4ee77e9ffbc11a78fb88d
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-dotall-regex@npm:^7.25.9":
   version: 7.25.9
   resolution: "@babel/plugin-transform-dotall-regex@npm:7.25.9"
@@ -3191,6 +3689,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-dotall-regex@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-dotall-regex@npm:7.27.1"
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin": "npm:^7.27.1"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10/2173e5b13f403538ffc6bd57b190cedf4caf320abc13a99e5b2721864e7148dbd3bd7c82d92377136af80432818f665fdd9a1fd33bc5549a4c91e24e5ce2413c
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-duplicate-keys@npm:^7.25.9":
   version: 7.25.9
   resolution: "@babel/plugin-transform-duplicate-keys@npm:7.25.9"
@@ -3202,6 +3712,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-duplicate-keys@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-duplicate-keys@npm:7.27.1"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10/987b718d2fab7626f61b72325c8121ead42341d6f46ad3a9b5e5f67f3ec558c903f1b8336277ffc43caac504ce00dd23a5456b5d1da23913333e1da77751f08d
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-duplicate-named-capturing-groups-regex@npm:^7.25.9":
   version: 7.25.9
   resolution: "@babel/plugin-transform-duplicate-named-capturing-groups-regex@npm:7.25.9"
@@ -3214,6 +3735,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-duplicate-named-capturing-groups-regex@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-duplicate-named-capturing-groups-regex@npm:7.27.1"
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin": "npm:^7.27.1"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
+  peerDependencies:
+    "@babel/core": ^7.0.0
+  checksum: 10/2a109613535e6ac79240dced71429e988affd6a5b3d0cd0f563c8d6c208c51ce7bf2c300bc1150502376b26a51f279119b3358f1c0f2d2f8abca3bcd62e1ae46
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-dynamic-import@npm:^7.25.9":
   version: 7.25.9
   resolution: "@babel/plugin-transform-dynamic-import@npm:7.25.9"
@@ -3225,6 +3758,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-dynamic-import@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-dynamic-import@npm:7.27.1"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10/7a9fbc8d17148b7f11a1d1ca3990d2c2cd44bd08a45dcaf14f20a017721235b9044b20e6168b6940282bb1b48fb78e6afbdfb9dd9d82fde614e15baa7d579932
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-exponentiation-operator@npm:^7.26.3":
   version: 7.26.3
   resolution: "@babel/plugin-transform-exponentiation-operator@npm:7.26.3"
@@ -3236,6 +3780,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-exponentiation-operator@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-exponentiation-operator@npm:7.27.1"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10/dbbedd24724c2d590ef59d32cb1fef34e99daba41c5b621f9f4c4da23e15c2bb4b1e3d954c314645016391404cf00f1e4ddec8f1f7891438bcde9aaf16e16ee0
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-export-namespace-from@npm:^7.25.9":
   version: 7.25.9
   resolution: "@babel/plugin-transform-export-namespace-from@npm:7.25.9"
@@ -3247,6 +3802,29 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-export-namespace-from@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-export-namespace-from@npm:7.27.1"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10/85082923eca317094f08f4953d8ea2a6558b3117826c0b740676983902b7236df1f4213ad844cb38c2dae104753dbe8f1cc51f01567835d476d32f5f544a4385
+  languageName: node
+  linkType: hard
+
+"@babel/plugin-transform-flow-strip-types@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-flow-strip-types@npm:7.27.1"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
+    "@babel/plugin-syntax-flow": "npm:^7.27.1"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10/22e260866b122b7d0c35f2c55b2d422b175606b4d14c9ba116b1fbe88e08cc8b024c1c41bb62527cfc5f7ccc0ed06c752e5945cb1ee22465a30aa5623e617940
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-for-of@npm:^7.25.9":
   version: 7.25.9
   resolution: "@babel/plugin-transform-for-of@npm:7.25.9"
@@ -3259,6 +3837,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-for-of@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-for-of@npm:7.27.1"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
+    "@babel/helper-skip-transparent-expression-wrappers": "npm:^7.27.1"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10/705c591d17ef263c309bba8c38e20655e8e74ff7fd21883a9cdaf5bf1df42d724383ad3d88ac01f42926e15b1e1e66f2f7f8c4e87de955afffa290d52314b019
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-function-name@npm:^7.25.9":
   version: 7.25.9
   resolution: "@babel/plugin-transform-function-name@npm:7.25.9"
@@ -3272,6 +3862,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-function-name@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-function-name@npm:7.27.1"
+  dependencies:
+    "@babel/helper-compilation-targets": "npm:^7.27.1"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
+    "@babel/traverse": "npm:^7.27.1"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10/26a2a183c3c52a96495967420a64afc5a09f743a230272a131668abf23001e393afa6371e6f8e6c60f4182bea210ed31d1caf866452d91009c1daac345a52f23
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-json-strings@npm:^7.25.9":
   version: 7.25.9
   resolution: "@babel/plugin-transform-json-strings@npm:7.25.9"
@@ -3283,6 +3886,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-json-strings@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-json-strings@npm:7.27.1"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10/2c05a02f63b49f47069271b3405a66c3c8038de5b995b0700b1bd9a5e2bb3e67abd01e4604629302a521f4d8122a4233944aefa16559fd4373d256cc5d3da57f
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-literals@npm:^7.25.9":
   version: 7.25.9
   resolution: "@babel/plugin-transform-literals@npm:7.25.9"
@@ -3294,6 +3908,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-literals@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-literals@npm:7.27.1"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10/0a76d12ab19f32dd139964aea7da48cecdb7de0b75e207e576f0f700121fe92367d788f328bf4fb44b8261a0f605c97b44e62ae61cddbb67b14e94c88b411f95
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-logical-assignment-operators@npm:^7.25.9":
   version: 7.25.9
   resolution: "@babel/plugin-transform-logical-assignment-operators@npm:7.25.9"
@@ -3305,6 +3930,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-logical-assignment-operators@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-logical-assignment-operators@npm:7.27.1"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10/2757955d81d65cc4701c17b83720745f6858f7a1d1d58117e379c204f47adbeb066b778596b6168bdbf4a22c229aab595d79a9abc261d0c6bfd62d4419466e73
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-member-expression-literals@npm:^7.25.9":
   version: 7.25.9
   resolution: "@babel/plugin-transform-member-expression-literals@npm:7.25.9"
@@ -3316,6 +3952,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-member-expression-literals@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-member-expression-literals@npm:7.27.1"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10/804121430a6dcd431e6ffe99c6d1fbbc44b43478113b79c677629e7f877b4f78a06b69c6bfb2747fd84ee91879fe2eb32e4620b53124603086cf5b727593ebe8
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-modules-amd@npm:^7.25.9":
   version: 7.25.9
   resolution: "@babel/plugin-transform-modules-amd@npm:7.25.9"
@@ -3328,6 +3975,30 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-modules-amd@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-modules-amd@npm:7.27.1"
+  dependencies:
+    "@babel/helper-module-transforms": "npm:^7.27.1"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10/5ca9257981f2bbddd9dccf9126f1368de1cb335e7a5ff5cca9282266825af5b18b5f06c144320dcf5d2a200d2b53b6d22d9b801a55dc0509ab5a5838af7e61b7
+  languageName: node
+  linkType: hard
+
+"@babel/plugin-transform-modules-commonjs@npm:^7.23.0, @babel/plugin-transform-modules-commonjs@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-modules-commonjs@npm:7.27.1"
+  dependencies:
+    "@babel/helper-module-transforms": "npm:^7.27.1"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10/9059243a977bc1f13e3dccfc6feb6508890e7c7bb191f7eb56626b20672b4b12338051ca835ab55426875a473181502c8f35b4df58ba251bef63b25866d995fe
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-modules-commonjs@npm:^7.25.9, @babel/plugin-transform-modules-commonjs@npm:^7.26.3":
   version: 7.26.3
   resolution: "@babel/plugin-transform-modules-commonjs@npm:7.26.3"
@@ -3354,6 +4025,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-modules-systemjs@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-modules-systemjs@npm:7.27.1"
+  dependencies:
+    "@babel/helper-module-transforms": "npm:^7.27.1"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
+    "@babel/helper-validator-identifier": "npm:^7.27.1"
+    "@babel/traverse": "npm:^7.27.1"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10/06d7bf76ac4688a36ae8e8d2dde1c3b8bab4594362132b74a00d5a32e6716944d68911b9bc53df60e59f4f9c7f1796525503ce3e3eed42f842d7775ccdfd836e
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-modules-umd@npm:^7.25.9":
   version: 7.25.9
   resolution: "@babel/plugin-transform-modules-umd@npm:7.25.9"
@@ -3366,6 +4051,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-modules-umd@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-modules-umd@npm:7.27.1"
+  dependencies:
+    "@babel/helper-module-transforms": "npm:^7.27.1"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10/7388932863b4ee01f177eb6c2e2df9e2312005e43ada99897624d5565db4b9cef1e30aa7ad2c79bbe5373f284cfcddea98d8fe212714a24c6aba223272163058
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-named-capturing-groups-regex@npm:^7.25.9":
   version: 7.25.9
   resolution: "@babel/plugin-transform-named-capturing-groups-regex@npm:7.25.9"
@@ -3378,6 +4075,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-named-capturing-groups-regex@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-named-capturing-groups-regex@npm:7.27.1"
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin": "npm:^7.27.1"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
+  peerDependencies:
+    "@babel/core": ^7.0.0
+  checksum: 10/a711c92d9753df26cefc1792481e5cbff4fe4f32b383d76b25e36fa865d8023b1b9aa6338cf18f5c0e864c71a7fbe8115e840872ccd61a914d9953849c68de7d
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-new-target@npm:^7.25.9":
   version: 7.25.9
   resolution: "@babel/plugin-transform-new-target@npm:7.25.9"
@@ -3389,6 +4098,28 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-new-target@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-new-target@npm:7.27.1"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10/620d78ee476ae70960989e477dc86031ffa3d554b1b1999e6ec95261629f7a13e5a7b98579c63a009f9fdf14def027db57de1f0ae1f06fb6eaed8908ff65cf68
+  languageName: node
+  linkType: hard
+
+"@babel/plugin-transform-nullish-coalescing-operator@npm:^7.22.11, @babel/plugin-transform-nullish-coalescing-operator@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-nullish-coalescing-operator@npm:7.27.1"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10/15333f4888ffedc449a2a21a0b1ca7983e089f43faa00cfb71d2466e20221a5fd979cdb1a3f57bc20fc62c67bd3ff3dde054133fb6324a58be8f64d20aefacd2
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-nullish-coalescing-operator@npm:^7.26.6":
   version: 7.26.6
   resolution: "@babel/plugin-transform-nullish-coalescing-operator@npm:7.26.6"
@@ -3411,6 +4142,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-numeric-separator@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-numeric-separator@npm:7.27.1"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10/049b958911de86d32408cd78017940a207e49c054ae9534ab53a32a57122cc592c0aae3c166d6f29bd1a7d75cc779d71883582dd76cb28b2fbb493e842d8ffca
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-object-rest-spread@npm:^7.25.9":
   version: 7.25.9
   resolution: "@babel/plugin-transform-object-rest-spread@npm:7.25.9"
@@ -3424,6 +4166,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-object-rest-spread@npm:^7.27.2":
+  version: 7.27.3
+  resolution: "@babel/plugin-transform-object-rest-spread@npm:7.27.3"
+  dependencies:
+    "@babel/helper-compilation-targets": "npm:^7.27.2"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
+    "@babel/plugin-transform-destructuring": "npm:^7.27.3"
+    "@babel/plugin-transform-parameters": "npm:^7.27.1"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10/7cc7be29a99010aac04fd78383f06d550b26460ea5367489e58ae484f0ed2f176966f0196bea0c2114a9872dd854a482bca38a9fad661c9d10d102c7195d53fd
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-object-super@npm:^7.25.9":
   version: 7.25.9
   resolution: "@babel/plugin-transform-object-super@npm:7.25.9"
@@ -3436,6 +4192,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-object-super@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-object-super@npm:7.27.1"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
+    "@babel/helper-replace-supers": "npm:^7.27.1"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10/46b819cb9a6cd3cfefe42d07875fee414f18d5e66040366ae856116db560ad4e16f3899a0a7fddd6773e0d1458444f94b208b67c0e3b6977a27ea17a5c13dbf6
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-optional-catch-binding@npm:^7.25.9":
   version: 7.25.9
   resolution: "@babel/plugin-transform-optional-catch-binding@npm:7.25.9"
@@ -3447,6 +4215,29 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-optional-catch-binding@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-optional-catch-binding@npm:7.27.1"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10/f4356b04cf21a98480f9788ea50f1f13ee88e89bb6393ba4b84d1f39a4a84c7928c9a4328e8f4c5b6deb218da68a8fd17bf4f46faec7653ddc20ffaaa5ba49f4
+  languageName: node
+  linkType: hard
+
+"@babel/plugin-transform-optional-chaining@npm:^7.23.0, @babel/plugin-transform-optional-chaining@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-optional-chaining@npm:7.27.1"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
+    "@babel/helper-skip-transparent-expression-wrappers": "npm:^7.27.1"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10/34b0f96400c259a2722740d17a001fe45f78d8ff052c40e29db2e79173be72c1cfe8d9681067e3f5da3989e4a557402df5c982c024c18257587a41e022f95640
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-optional-chaining@npm:^7.25.9":
   version: 7.25.9
   resolution: "@babel/plugin-transform-optional-chaining@npm:7.25.9"
@@ -3481,6 +4272,29 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-parameters@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-parameters@npm:7.27.1"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10/47db574f8f3adf7a5d85933c9a2a2dee956ceda9e00fb4e03e9a9d600b559f06cba2da7c5e78a12b05dcf993cf147634edf0391f3f20a6b451830f41be47fe68
+  languageName: node
+  linkType: hard
+
+"@babel/plugin-transform-private-methods@npm:^7.22.5, @babel/plugin-transform-private-methods@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-private-methods@npm:7.27.1"
+  dependencies:
+    "@babel/helper-create-class-features-plugin": "npm:^7.27.1"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10/c76f8f6056946466116e67eb9d8014a2d748ade2062636ab82045c1dac9c233aff10e597777bc5af6f26428beb845ceb41b95007abef7d0484da95789da56662
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-private-methods@npm:^7.25.9":
   version: 7.25.9
   resolution: "@babel/plugin-transform-private-methods@npm:7.25.9"
@@ -3506,6 +4320,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-private-property-in-object@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-private-property-in-object@npm:7.27.1"
+  dependencies:
+    "@babel/helper-annotate-as-pure": "npm:^7.27.1"
+    "@babel/helper-create-class-features-plugin": "npm:^7.27.1"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10/d4466d42a02c5a318d9d7b8102969fd032b17ff044918dfd462d5cc49bd11f5773ee0794781702afdf4727ba11e9be6cbea1e396bc0a7307761bb9a56399012a
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-property-literals@npm:^7.25.9":
   version: 7.25.9
   resolution: "@babel/plugin-transform-property-literals@npm:7.25.9"
@@ -3517,6 +4344,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-property-literals@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-property-literals@npm:7.27.1"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10/7caec27d5ed8870895c9faf4f71def72745d69da0d8e77903146a4e135fd7bed5778f5f9cebb36c5fba86338e6194dd67a08c033fc84b4299b7eceab6d9630cb
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-react-constant-elements@npm:^7.18.12":
   version: 7.21.3
   resolution: "@babel/plugin-transform-react-constant-elements@npm:7.21.3"
@@ -3539,6 +4377,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-react-display-name@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-react-display-name@npm:7.27.1"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10/5c794e91da4f27b39314b5354bbede049074c04646949ad3a4c5788b9a1a6fa649d2f0fa95587209219443c97127e0cfa41ab56a3eaf68e91a319948518f8357
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-react-jsx-development@npm:^7.25.9":
   version: 7.25.9
   resolution: "@babel/plugin-transform-react-jsx-development@npm:7.25.9"
@@ -3550,6 +4399,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-react-jsx-development@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-react-jsx-development@npm:7.27.1"
+  dependencies:
+    "@babel/plugin-transform-react-jsx": "npm:^7.27.1"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10/b88865d5b8c018992f2332da939faa15c4d4a864c9435a5937beaff3fe43781432cc42e0a5d5631098e0bd4066fc33f5fa72203b388b074c3545fe7aaa21e474
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-react-jsx@npm:^7.25.9":
   version: 7.25.9
   resolution: "@babel/plugin-transform-react-jsx@npm:7.25.9"
@@ -3565,6 +4425,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-react-jsx@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-react-jsx@npm:7.27.1"
+  dependencies:
+    "@babel/helper-annotate-as-pure": "npm:^7.27.1"
+    "@babel/helper-module-imports": "npm:^7.27.1"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
+    "@babel/plugin-syntax-jsx": "npm:^7.27.1"
+    "@babel/types": "npm:^7.27.1"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10/e865f194770906398957df23530af9a46009ac3737aaa10026b3925fe0a38fc3254f4b227d3b8807ab66ac92c14323bef561dd2217644052de5a9702af76e2f6
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-react-pure-annotations@npm:^7.25.9":
   version: 7.25.9
   resolution: "@babel/plugin-transform-react-pure-annotations@npm:7.25.9"
@@ -3577,6 +4452,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-react-pure-annotations@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-react-pure-annotations@npm:7.27.1"
+  dependencies:
+    "@babel/helper-annotate-as-pure": "npm:^7.27.1"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10/a6f591c5e85a1ab0685d4a25afe591fe8d11dc0b73c677cf9560ff8d540d036a1cce9efcb729fc9092def4d854dc304ffdc063a89a9247900b69c516bf971a4c
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-regenerator@npm:^7.25.9":
   version: 7.25.9
   resolution: "@babel/plugin-transform-regenerator@npm:7.25.9"
@@ -3589,6 +4476,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-regenerator@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-regenerator@npm:7.27.1"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10/a6a3f818e4cc5ac5a01962a1d66515cb6791f32eb1dcd810dbb39f6e580c0c96b47fcc5c5633137e040f4e137e40e6f4dad8a3d57d49b15aed40e72e13e30d93
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-regexp-modifiers@npm:^7.26.0":
   version: 7.26.0
   resolution: "@babel/plugin-transform-regexp-modifiers@npm:7.26.0"
@@ -3601,6 +4499,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-regexp-modifiers@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-regexp-modifiers@npm:7.27.1"
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin": "npm:^7.27.1"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
+  peerDependencies:
+    "@babel/core": ^7.0.0
+  checksum: 10/f6cb385fe0e798bff7e9b20cf5912bf40e180895ff3610b1ccdce260f3c20daaebb3a99dc087c8168a99151cd3e16b94f4689fd5a4b01cf1834b45c133e620b2
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-reserved-words@npm:^7.25.9":
   version: 7.25.9
   resolution: "@babel/plugin-transform-reserved-words@npm:7.25.9"
@@ -3612,6 +4522,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-reserved-words@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-reserved-words@npm:7.27.1"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10/dea0b66742d2863b369c06c053e11e15ba785892ea19cccf7aef3c1bdaa38b6ab082e19984c5ea7810d275d9445c5400fcc385ad71ce707ed9256fadb102af3b
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-runtime@npm:^7.25.9":
   version: 7.25.9
   resolution: "@babel/plugin-transform-runtime@npm:7.25.9"
@@ -3639,6 +4560,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-shorthand-properties@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-shorthand-properties@npm:7.27.1"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10/fbba6e2aef0b69681acb68202aa249c0598e470cc0853d7ff5bd0171fd6a7ec31d77cfabcce9df6360fc8349eded7e4a65218c32551bd3fc0caaa1ac899ac6d4
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-spread@npm:^7.25.9":
   version: 7.25.9
   resolution: "@babel/plugin-transform-spread@npm:7.25.9"
@@ -3651,6 +4583,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-spread@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-spread@npm:7.27.1"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
+    "@babel/helper-skip-transparent-expression-wrappers": "npm:^7.27.1"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10/3edd28b07e1951f32aa2d380d9a0e0ed408c64a5cea2921d02308541042aca18f146b3a61e82e534d4d61cb3225dbc847f4f063aedfff6230b1a41282e95e8a2
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-sticky-regex@npm:^7.25.9":
   version: 7.25.9
   resolution: "@babel/plugin-transform-sticky-regex@npm:7.25.9"
@@ -3662,6 +4606,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-sticky-regex@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-sticky-regex@npm:7.27.1"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10/e1414a502efba92c7974681767e365a8cda6c5e9e5f33472a9eaa0ce2e75cea0a9bef881ff8dda37c7810ad902f98d3c00ead92a3ac3b73a79d011df85b5a189
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-template-literals@npm:^7.25.9":
   version: 7.25.9
   resolution: "@babel/plugin-transform-template-literals@npm:7.25.9"
@@ -3673,6 +4628,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-template-literals@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-template-literals@npm:7.27.1"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10/93aad782503b691faef7c0893372d5243df3219b07f1f22cfc32c104af6a2e7acd6102c128439eab15336d048f1b214ca134b87b0630d8cd568bf447f78b25ce
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-typeof-symbol@npm:^7.26.7":
   version: 7.26.7
   resolution: "@babel/plugin-transform-typeof-symbol@npm:7.26.7"
@@ -3684,6 +4650,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-typeof-symbol@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-typeof-symbol@npm:7.27.1"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10/812d736402a6f9313b86b8adf36740394400be7a09c48e51ee45ab4a383a3f46fc618d656dd12e44934665e42ae71cf143e25b95491b699ef7c737950dbdb862
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-typescript@npm:^7.25.9":
   version: 7.25.9
   resolution: "@babel/plugin-transform-typescript@npm:7.25.9"
@@ -3699,6 +4676,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-typescript@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-typescript@npm:7.27.1"
+  dependencies:
+    "@babel/helper-annotate-as-pure": "npm:^7.27.1"
+    "@babel/helper-create-class-features-plugin": "npm:^7.27.1"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
+    "@babel/helper-skip-transparent-expression-wrappers": "npm:^7.27.1"
+    "@babel/plugin-syntax-typescript": "npm:^7.27.1"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10/069b37c5beeb613635e65a3024d6f5f3da09c82137e055a7d413bfd2778d623879bd7b2985466fb66f8a32e805a9bf6aa7e336e6bfcf0304c869bb850e8400c9
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-unicode-escapes@npm:^7.25.9":
   version: 7.25.9
   resolution: "@babel/plugin-transform-unicode-escapes@npm:7.25.9"
@@ -3710,6 +4702,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-unicode-escapes@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-unicode-escapes@npm:7.27.1"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10/87b9e49dee4ab6e78f4cdcdbdd837d7784f02868a96bfc206c8dbb17dd85db161b5a0ecbe95b19a42e8aea0ce57e80249e1facbf9221d7f4114d52c3b9136c9e
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-unicode-property-regex@npm:^7.25.9":
   version: 7.25.9
   resolution: "@babel/plugin-transform-unicode-property-regex@npm:7.25.9"
@@ -3722,6 +4725,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-unicode-property-regex@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-unicode-property-regex@npm:7.27.1"
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin": "npm:^7.27.1"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10/5d99c89537d1ebaac3f526c04b162cf95a47d363d4829f78c6701a2c06ab78a48da66a94f853f85f44a3d72153410ba923e072bed4b7166fa097f503eb14131d
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-unicode-regex@npm:^7.25.9":
   version: 7.25.9
   resolution: "@babel/plugin-transform-unicode-regex@npm:7.25.9"
@@ -3734,6 +4749,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-unicode-regex@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-unicode-regex@npm:7.27.1"
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin": "npm:^7.27.1"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10/a34d89a2b75fb78e66d97c3dc90d4877f7e31f43316b52176f95a5dee20e9bb56ecf158eafc42a001676ddf7b393d9e67650bad6b32f5405780f25fb83cd68e3
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-unicode-sets-regex@npm:^7.25.9":
   version: 7.25.9
   resolution: "@babel/plugin-transform-unicode-sets-regex@npm:7.25.9"
@@ -3746,7 +4773,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/polyfill@npm:^7.10.1, @babel/polyfill@npm:^7.4.4":
+"@babel/plugin-transform-unicode-sets-regex@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-transform-unicode-sets-regex@npm:7.27.1"
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin": "npm:^7.27.1"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
+  peerDependencies:
+    "@babel/core": ^7.0.0
+  checksum: 10/295126074c7388ab05c82ef3ed0907a1ee4666bbdd763477ead9aba6eb2c74bdf65669416861ac93d337a4a27640963bb214acadc2697275ce95aab14868d57f
+  languageName: node
+  linkType: hard
+
+"@babel/polyfill@npm:^7.10.1":
   version: 7.12.1
   resolution: "@babel/polyfill@npm:7.12.1"
   dependencies:
@@ -3835,6 +4874,98 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/preset-env@npm:^7.23.2":
+  version: 7.27.2
+  resolution: "@babel/preset-env@npm:7.27.2"
+  dependencies:
+    "@babel/compat-data": "npm:^7.27.2"
+    "@babel/helper-compilation-targets": "npm:^7.27.2"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
+    "@babel/helper-validator-option": "npm:^7.27.1"
+    "@babel/plugin-bugfix-firefox-class-in-computed-class-key": "npm:^7.27.1"
+    "@babel/plugin-bugfix-safari-class-field-initializer-scope": "npm:^7.27.1"
+    "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": "npm:^7.27.1"
+    "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": "npm:^7.27.1"
+    "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly": "npm:^7.27.1"
+    "@babel/plugin-proposal-private-property-in-object": "npm:7.21.0-placeholder-for-preset-env.2"
+    "@babel/plugin-syntax-import-assertions": "npm:^7.27.1"
+    "@babel/plugin-syntax-import-attributes": "npm:^7.27.1"
+    "@babel/plugin-syntax-unicode-sets-regex": "npm:^7.18.6"
+    "@babel/plugin-transform-arrow-functions": "npm:^7.27.1"
+    "@babel/plugin-transform-async-generator-functions": "npm:^7.27.1"
+    "@babel/plugin-transform-async-to-generator": "npm:^7.27.1"
+    "@babel/plugin-transform-block-scoped-functions": "npm:^7.27.1"
+    "@babel/plugin-transform-block-scoping": "npm:^7.27.1"
+    "@babel/plugin-transform-class-properties": "npm:^7.27.1"
+    "@babel/plugin-transform-class-static-block": "npm:^7.27.1"
+    "@babel/plugin-transform-classes": "npm:^7.27.1"
+    "@babel/plugin-transform-computed-properties": "npm:^7.27.1"
+    "@babel/plugin-transform-destructuring": "npm:^7.27.1"
+    "@babel/plugin-transform-dotall-regex": "npm:^7.27.1"
+    "@babel/plugin-transform-duplicate-keys": "npm:^7.27.1"
+    "@babel/plugin-transform-duplicate-named-capturing-groups-regex": "npm:^7.27.1"
+    "@babel/plugin-transform-dynamic-import": "npm:^7.27.1"
+    "@babel/plugin-transform-exponentiation-operator": "npm:^7.27.1"
+    "@babel/plugin-transform-export-namespace-from": "npm:^7.27.1"
+    "@babel/plugin-transform-for-of": "npm:^7.27.1"
+    "@babel/plugin-transform-function-name": "npm:^7.27.1"
+    "@babel/plugin-transform-json-strings": "npm:^7.27.1"
+    "@babel/plugin-transform-literals": "npm:^7.27.1"
+    "@babel/plugin-transform-logical-assignment-operators": "npm:^7.27.1"
+    "@babel/plugin-transform-member-expression-literals": "npm:^7.27.1"
+    "@babel/plugin-transform-modules-amd": "npm:^7.27.1"
+    "@babel/plugin-transform-modules-commonjs": "npm:^7.27.1"
+    "@babel/plugin-transform-modules-systemjs": "npm:^7.27.1"
+    "@babel/plugin-transform-modules-umd": "npm:^7.27.1"
+    "@babel/plugin-transform-named-capturing-groups-regex": "npm:^7.27.1"
+    "@babel/plugin-transform-new-target": "npm:^7.27.1"
+    "@babel/plugin-transform-nullish-coalescing-operator": "npm:^7.27.1"
+    "@babel/plugin-transform-numeric-separator": "npm:^7.27.1"
+    "@babel/plugin-transform-object-rest-spread": "npm:^7.27.2"
+    "@babel/plugin-transform-object-super": "npm:^7.27.1"
+    "@babel/plugin-transform-optional-catch-binding": "npm:^7.27.1"
+    "@babel/plugin-transform-optional-chaining": "npm:^7.27.1"
+    "@babel/plugin-transform-parameters": "npm:^7.27.1"
+    "@babel/plugin-transform-private-methods": "npm:^7.27.1"
+    "@babel/plugin-transform-private-property-in-object": "npm:^7.27.1"
+    "@babel/plugin-transform-property-literals": "npm:^7.27.1"
+    "@babel/plugin-transform-regenerator": "npm:^7.27.1"
+    "@babel/plugin-transform-regexp-modifiers": "npm:^7.27.1"
+    "@babel/plugin-transform-reserved-words": "npm:^7.27.1"
+    "@babel/plugin-transform-shorthand-properties": "npm:^7.27.1"
+    "@babel/plugin-transform-spread": "npm:^7.27.1"
+    "@babel/plugin-transform-sticky-regex": "npm:^7.27.1"
+    "@babel/plugin-transform-template-literals": "npm:^7.27.1"
+    "@babel/plugin-transform-typeof-symbol": "npm:^7.27.1"
+    "@babel/plugin-transform-unicode-escapes": "npm:^7.27.1"
+    "@babel/plugin-transform-unicode-property-regex": "npm:^7.27.1"
+    "@babel/plugin-transform-unicode-regex": "npm:^7.27.1"
+    "@babel/plugin-transform-unicode-sets-regex": "npm:^7.27.1"
+    "@babel/preset-modules": "npm:0.1.6-no-external-plugins"
+    babel-plugin-polyfill-corejs2: "npm:^0.4.10"
+    babel-plugin-polyfill-corejs3: "npm:^0.11.0"
+    babel-plugin-polyfill-regenerator: "npm:^0.6.1"
+    core-js-compat: "npm:^3.40.0"
+    semver: "npm:^6.3.1"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10/3748b5e5582bee12f2b21ee4af9552a0ea8851fdfa8e54cdab142ac9191b7e9b1673d23056c0d2c3c6fd554eb85873664acfc9829c4f14a8ae7676548184eff6
+  languageName: node
+  linkType: hard
+
+"@babel/preset-flow@npm:^7.22.15":
+  version: 7.27.1
+  resolution: "@babel/preset-flow@npm:7.27.1"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
+    "@babel/helper-validator-option": "npm:^7.27.1"
+    "@babel/plugin-transform-flow-strip-types": "npm:^7.27.1"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10/f3f25b390debf72a6ff0170a2d5198aea344ba96f05eaca0bae2c7072119706fd46321604d89646bda1842527cfc6eab8828a983ec90149218d2120b9cd26596
+  languageName: node
+  linkType: hard
+
 "@babel/preset-modules@npm:0.1.6-no-external-plugins":
   version: 0.1.6-no-external-plugins
   resolution: "@babel/preset-modules@npm:0.1.6-no-external-plugins"
@@ -3864,6 +4995,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/preset-react@npm:^7.22.15":
+  version: 7.27.1
+  resolution: "@babel/preset-react@npm:7.27.1"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
+    "@babel/helper-validator-option": "npm:^7.27.1"
+    "@babel/plugin-transform-react-display-name": "npm:^7.27.1"
+    "@babel/plugin-transform-react-jsx": "npm:^7.27.1"
+    "@babel/plugin-transform-react-jsx-development": "npm:^7.27.1"
+    "@babel/plugin-transform-react-pure-annotations": "npm:^7.27.1"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10/26dd63164ada235ddca53c074944f52cea9a6d8064d02871cad672fe92cc2e136dd1809fb61fa0313a3c19d8e32a00a667d0cbd79465ad8460e2c1b88e5509ae
+  languageName: node
+  linkType: hard
+
 "@babel/preset-typescript@npm:^7.18.6, @babel/preset-typescript@npm:^7.26.0":
   version: 7.26.0
   resolution: "@babel/preset-typescript@npm:7.26.0"
@@ -3879,6 +5026,36 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/preset-typescript@npm:^7.23.0":
+  version: 7.27.1
+  resolution: "@babel/preset-typescript@npm:7.27.1"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
+    "@babel/helper-validator-option": "npm:^7.27.1"
+    "@babel/plugin-syntax-jsx": "npm:^7.27.1"
+    "@babel/plugin-transform-modules-commonjs": "npm:^7.27.1"
+    "@babel/plugin-transform-typescript": "npm:^7.27.1"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10/9d8e75326b3c93fa016ba7aada652800fc77bc05fcc181888700a049935e8cf1284b549de18a5d62ef3591d02f097ea6de1111f7d71a991aaf36ba74657bd145
+  languageName: node
+  linkType: hard
+
+"@babel/register@npm:^7.22.15":
+  version: 7.27.1
+  resolution: "@babel/register@npm:7.27.1"
+  dependencies:
+    clone-deep: "npm:^4.0.1"
+    find-cache-dir: "npm:^2.0.0"
+    make-dir: "npm:^2.1.0"
+    pirates: "npm:^4.0.6"
+    source-map-support: "npm:^0.5.16"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10/497e0c902614dd66cc70b1c611830f9cdf093bf6c321dae872c3dd42a6f28ddf627d835998568a44a6673af9021239f9f2911b67dcc10f8ffd8995d5f21a7fc0
+  languageName: node
+  linkType: hard
+
 "@babel/register@npm:^7.25.9":
   version: 7.25.9
   resolution: "@babel/register@npm:7.25.9"
@@ -3904,7 +5081,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/runtime@npm:^7.26.0":
+"@babel/runtime@npm:7.26.10":
   version: 7.26.10
   resolution: "@babel/runtime@npm:7.26.10"
   dependencies:
@@ -3924,6 +5101,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/template@npm:^7.27.1, @babel/template@npm:^7.27.2":
+  version: 7.27.2
+  resolution: "@babel/template@npm:7.27.2"
+  dependencies:
+    "@babel/code-frame": "npm:^7.27.1"
+    "@babel/parser": "npm:^7.27.2"
+    "@babel/types": "npm:^7.27.1"
+  checksum: 10/fed15a84beb0b9340e5f81566600dbee5eccd92e4b9cc42a944359b1aa1082373391d9d5fc3656981dff27233ec935d0bc96453cf507f60a4b079463999244d8
+  languageName: node
+  linkType: hard
+
 "@babel/traverse@npm:7.26.7, @babel/traverse@npm:^7.20.7, @babel/traverse@npm:^7.25.9, @babel/traverse@npm:^7.26.7":
   version: 7.26.7
   resolution: "@babel/traverse@npm:7.26.7"
@@ -3939,6 +5127,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/traverse@npm:^7.18.9, @babel/traverse@npm:^7.23.2, @babel/traverse@npm:^7.27.1, @babel/traverse@npm:^7.27.3":
+  version: 7.27.3
+  resolution: "@babel/traverse@npm:7.27.3"
+  dependencies:
+    "@babel/code-frame": "npm:^7.27.1"
+    "@babel/generator": "npm:^7.27.3"
+    "@babel/parser": "npm:^7.27.3"
+    "@babel/template": "npm:^7.27.2"
+    "@babel/types": "npm:^7.27.3"
+    debug: "npm:^4.3.1"
+    globals: "npm:^11.1.0"
+  checksum: 10/caccdb8335705847d34123ee76d70c3fb575f8c8b3de83ff1560c5d3229269fd4721510b7b63564a122995eb844f651313cad57b85d45023a0f50f848bf23c55
+  languageName: node
+  linkType: hard
+
 "@babel/types@npm:7.26.7, @babel/types@npm:^7.0.0, @babel/types@npm:^7.18.6, @babel/types@npm:^7.19.0, @babel/types@npm:^7.20.0, @babel/types@npm:^7.20.7, @babel/types@npm:^7.24.7, @babel/types@npm:^7.25.9, @babel/types@npm:^7.26.5, @babel/types@npm:^7.26.7, @babel/types@npm:^7.3.0, @babel/types@npm:^7.3.3, @babel/types@npm:^7.4.4":
   version: 7.26.7
   resolution: "@babel/types@npm:7.26.7"
@@ -3949,6 +5152,23 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/types@npm:^7.18.9, @babel/types@npm:^7.23.0, @babel/types@npm:^7.27.1, @babel/types@npm:^7.27.3":
+  version: 7.27.3
+  resolution: "@babel/types@npm:7.27.3"
+  dependencies:
+    "@babel/helper-string-parser": "npm:^7.27.1"
+    "@babel/helper-validator-identifier": "npm:^7.27.1"
+  checksum: 10/a24e6accd85c4747b974b3d68a3210d0aa1180c1a77b287ffcb7401cd2edad7bdecadaeb40fe5191be3990c3a5252943f7de7c09da13ed269adbb054b97056ee
+  languageName: node
+  linkType: hard
+
+"@base2/pretty-print-object@npm:1.0.1":
+  version: 1.0.1
+  resolution: "@base2/pretty-print-object@npm:1.0.1"
+  checksum: 10/c1b78a521ac712baa076589f3bc81318d07c34a5747e9177b6af37043592252587d98f9b7b59ec174968c6bea31a99fe4d7884121173a449b75fe602b7eb2839
+  languageName: node
+  linkType: hard
+
 "@bcoe/v8-coverage@npm:^0.2.3":
   version: 0.2.3
   resolution: "@bcoe/v8-coverage@npm:0.2.3"
@@ -4682,6 +5902,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@discoveryjs/json-ext@npm:^0.5.3":
+  version: 0.5.7
+  resolution: "@discoveryjs/json-ext@npm:0.5.7"
+  checksum: 10/b95682a852448e8ef50d6f8e3b7ba288aab3fd98a2bafbe46881a3db0c6e7248a2debe9e1ee0d4137c521e4743ca5bbcb1c0765c9d7b3e0ef53231506fec42b4
+  languageName: node
+  linkType: hard
+
 "@dnd-kit/accessibility@npm:^3.1.0":
   version: 3.1.0
   resolution: "@dnd-kit/accessibility@npm:3.1.0"
@@ -4905,6 +6132,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@emotion/css@npm:11.10.6":
+  version: 11.10.6
+  resolution: "@emotion/css@npm:11.10.6"
+  dependencies:
+    "@emotion/babel-plugin": "npm:^11.10.6"
+    "@emotion/cache": "npm:^11.10.5"
+    "@emotion/serialize": "npm:^1.1.1"
+    "@emotion/sheet": "npm:^1.2.1"
+    "@emotion/utils": "npm:^1.2.0"
+  checksum: 10/e6d8d80ac1b1a1bba4a041d35ace7cce211a82cd93dd38a41d19ab19c2d9c47cf2189bec0c4cbdfd2018ad371f07f8e4ebe09d9ef9556d4a28fd386b89ce8b8d
+  languageName: node
+  linkType: hard
+
 "@emotion/hash@npm:0.8.0":
   version: 0.8.0
   resolution: "@emotion/hash@npm:0.8.0"
@@ -5172,6 +6412,160 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/android-arm64@npm:0.18.20":
+  version: 0.18.20
+  resolution: "@esbuild/android-arm64@npm:0.18.20"
+  conditions: os=android & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@esbuild/android-arm@npm:0.18.20":
+  version: 0.18.20
+  resolution: "@esbuild/android-arm@npm:0.18.20"
+  conditions: os=android & cpu=arm
+  languageName: node
+  linkType: hard
+
+"@esbuild/android-x64@npm:0.18.20":
+  version: 0.18.20
+  resolution: "@esbuild/android-x64@npm:0.18.20"
+  conditions: os=android & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@esbuild/darwin-arm64@npm:0.18.20":
+  version: 0.18.20
+  resolution: "@esbuild/darwin-arm64@npm:0.18.20"
+  conditions: os=darwin & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@esbuild/darwin-x64@npm:0.18.20":
+  version: 0.18.20
+  resolution: "@esbuild/darwin-x64@npm:0.18.20"
+  conditions: os=darwin & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@esbuild/freebsd-arm64@npm:0.18.20":
+  version: 0.18.20
+  resolution: "@esbuild/freebsd-arm64@npm:0.18.20"
+  conditions: os=freebsd & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@esbuild/freebsd-x64@npm:0.18.20":
+  version: 0.18.20
+  resolution: "@esbuild/freebsd-x64@npm:0.18.20"
+  conditions: os=freebsd & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@esbuild/linux-arm64@npm:0.18.20":
+  version: 0.18.20
+  resolution: "@esbuild/linux-arm64@npm:0.18.20"
+  conditions: os=linux & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@esbuild/linux-arm@npm:0.18.20":
+  version: 0.18.20
+  resolution: "@esbuild/linux-arm@npm:0.18.20"
+  conditions: os=linux & cpu=arm
+  languageName: node
+  linkType: hard
+
+"@esbuild/linux-ia32@npm:0.18.20":
+  version: 0.18.20
+  resolution: "@esbuild/linux-ia32@npm:0.18.20"
+  conditions: os=linux & cpu=ia32
+  languageName: node
+  linkType: hard
+
+"@esbuild/linux-loong64@npm:0.18.20":
+  version: 0.18.20
+  resolution: "@esbuild/linux-loong64@npm:0.18.20"
+  conditions: os=linux & cpu=loong64
+  languageName: node
+  linkType: hard
+
+"@esbuild/linux-mips64el@npm:0.18.20":
+  version: 0.18.20
+  resolution: "@esbuild/linux-mips64el@npm:0.18.20"
+  conditions: os=linux & cpu=mips64el
+  languageName: node
+  linkType: hard
+
+"@esbuild/linux-ppc64@npm:0.18.20":
+  version: 0.18.20
+  resolution: "@esbuild/linux-ppc64@npm:0.18.20"
+  conditions: os=linux & cpu=ppc64
+  languageName: node
+  linkType: hard
+
+"@esbuild/linux-riscv64@npm:0.18.20":
+  version: 0.18.20
+  resolution: "@esbuild/linux-riscv64@npm:0.18.20"
+  conditions: os=linux & cpu=riscv64
+  languageName: node
+  linkType: hard
+
+"@esbuild/linux-s390x@npm:0.18.20":
+  version: 0.18.20
+  resolution: "@esbuild/linux-s390x@npm:0.18.20"
+  conditions: os=linux & cpu=s390x
+  languageName: node
+  linkType: hard
+
+"@esbuild/linux-x64@npm:0.18.20":
+  version: 0.18.20
+  resolution: "@esbuild/linux-x64@npm:0.18.20"
+  conditions: os=linux & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@esbuild/netbsd-x64@npm:0.18.20":
+  version: 0.18.20
+  resolution: "@esbuild/netbsd-x64@npm:0.18.20"
+  conditions: os=netbsd & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@esbuild/openbsd-x64@npm:0.18.20":
+  version: 0.18.20
+  resolution: "@esbuild/openbsd-x64@npm:0.18.20"
+  conditions: os=openbsd & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@esbuild/sunos-x64@npm:0.18.20":
+  version: 0.18.20
+  resolution: "@esbuild/sunos-x64@npm:0.18.20"
+  conditions: os=sunos & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@esbuild/win32-arm64@npm:0.18.20":
+  version: 0.18.20
+  resolution: "@esbuild/win32-arm64@npm:0.18.20"
+  conditions: os=win32 & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@esbuild/win32-ia32@npm:0.18.20":
+  version: 0.18.20
+  resolution: "@esbuild/win32-ia32@npm:0.18.20"
+  conditions: os=win32 & cpu=ia32
+  languageName: node
+  linkType: hard
+
+"@esbuild/win32-x64@npm:0.18.20":
+  version: 0.18.20
+  resolution: "@esbuild/win32-x64@npm:0.18.20"
+  conditions: os=win32 & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@eslint-community/eslint-utils@npm:^4.2.0":
   version: 4.4.0
   resolution: "@eslint-community/eslint-utils@npm:4.4.0"
@@ -5239,6 +6633,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@fal-works/esbuild-plugin-global-externals@npm:^2.1.2":
+  version: 2.1.2
+  resolution: "@fal-works/esbuild-plugin-global-externals@npm:2.1.2"
+  checksum: 10/fd68714cccfbd33a8ec31d11ac7c6373100a5e1b8e31941a45c723c802feccb0a00dde946f55cc91d58bff77d405adc2064b22f0faf5ee165968965e5da758a1
+  languageName: node
+  linkType: hard
+
 "@fastify/accept-negotiator@npm:^1.1.0":
   version: 1.1.0
   resolution: "@fastify/accept-negotiator@npm:1.1.0"
@@ -5315,6 +6716,44 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@floating-ui/core@npm:^1.7.0":
+  version: 1.7.0
+  resolution: "@floating-ui/core@npm:1.7.0"
+  dependencies:
+    "@floating-ui/utils": "npm:^0.2.9"
+  checksum: 10/b047b9b5e18d9c2b737aa1cd0aadd138da15e6ca4ba35cc8b41eff280a66f84c749739234d782e8f250de0d6d5afed4b1d06ed9bf2635e0743aa9868d32fe94a
+  languageName: node
+  linkType: hard
+
+"@floating-ui/dom@npm:^1.0.0":
+  version: 1.7.0
+  resolution: "@floating-ui/dom@npm:1.7.0"
+  dependencies:
+    "@floating-ui/core": "npm:^1.7.0"
+    "@floating-ui/utils": "npm:^0.2.9"
+  checksum: 10/9c3561981ea389fe39b7095d7a3771fd906580eedc43fda0eb554faa5f2f9756169fef1824d66198314a41c7f8d63e56bc7f5b24fc528471c9e6bc43cafa6a00
+  languageName: node
+  linkType: hard
+
+"@floating-ui/react-dom@npm:^2.0.0":
+  version: 2.1.2
+  resolution: "@floating-ui/react-dom@npm:2.1.2"
+  dependencies:
+    "@floating-ui/dom": "npm:^1.0.0"
+  peerDependencies:
+    react: ">=16.8.0"
+    react-dom: ">=16.8.0"
+  checksum: 10/2a67dc8499674e42ff32c7246bded185bb0fdd492150067caf9568569557ac4756a67787421d8604b0f241e5337de10762aee270d9aeef106d078a0ff13596c4
+  languageName: node
+  linkType: hard
+
+"@floating-ui/utils@npm:^0.2.9":
+  version: 0.2.9
+  resolution: "@floating-ui/utils@npm:0.2.9"
+  checksum: 10/0ca786347db3dd8d9034b86d1449fabb96642788e5900cc5f2aee433cd7b243efbcd7a165bead50b004ee3f20a90ddebb6a35296fc41d43cfd361b6f01b69ffb
+  languageName: node
+  linkType: hard
+
 "@fortawesome/fontawesome-common-types@npm:6.2.1":
   version: 6.2.1
   resolution: "@fortawesome/fontawesome-common-types@npm:6.2.1"
@@ -5798,7 +7237,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@jest/transform@npm:^29.7.0":
+"@jest/transform@npm:^29.3.1, @jest/transform@npm:^29.7.0":
   version: 29.7.0
   resolution: "@jest/transform@npm:29.7.0"
   dependencies:
@@ -5933,6 +7372,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@jridgewell/sourcemap-codec@npm:^1.5.0":
+  version: 1.5.0
+  resolution: "@jridgewell/sourcemap-codec@npm:1.5.0"
+  checksum: 10/4ed6123217569a1484419ac53f6ea0d9f3b57e5b57ab30d7c267bdb27792a27eb0e4b08e84a2680aa55cc2f2b411ffd6ec3db01c44fdc6dc43aca4b55f8374fd
+  languageName: node
+  linkType: hard
+
 "@jridgewell/trace-mapping@npm:0.3.9":
   version: 0.3.9
   resolution: "@jridgewell/trace-mapping@npm:0.3.9"
@@ -6002,6 +7448,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@juggle/resize-observer@npm:^3.3.1":
+  version: 3.4.0
+  resolution: "@juggle/resize-observer@npm:3.4.0"
+  checksum: 10/73d1d00ee9132fb6f0aea0531940a6b93603e935590bd450fc6285a328d906102eeeb95dea77b2edac0e779031a9708aa8c82502bd298ee4dd26e7dff48f397a
+  languageName: node
+  linkType: hard
+
 "@ladjs/country-language@npm:^0.2.1":
   version: 0.2.1
   resolution: "@ladjs/country-language@npm:0.2.1"
@@ -6360,810 +7813,22 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@material-design-icons/svg@npm:^0.14.13":
-  version: 0.14.13
-  resolution: "@material-design-icons/svg@npm:0.14.13"
-  checksum: 10/e8d65e68a474b4ff57cd899faa6de2b0f4102ea98346ffcb75de3cacbef6e72faa6c51a3e73dfd06b913a7fca5d66efc1d5b4330d936a69d70cf38e5af4e660b
-  languageName: node
-  linkType: hard
-
-"@material-symbols/svg-400@npm:^0.4.1":
-  version: 0.4.3
-  resolution: "@material-symbols/svg-400@npm:0.4.3"
-  checksum: 10/6251011d1deb2a90d21f5114f5aa953b126274a6e5e92f6a80a4cb2fc22954dc8f2031fdfe04df56823a43bed0a566029e7735d001fbeca331e5d5e0bb65f186
-  languageName: node
-  linkType: hard
-
-"@material/animation@npm:^14.0.0":
-  version: 14.0.0
-  resolution: "@material/animation@npm:14.0.0"
-  dependencies:
-    tslib: "npm:^2.1.0"
-  checksum: 10/62a3ef242fe50de7464876a665d54d24a34858a8e82ca33f4771120b81b329aab141e4e33c44c90095f3a1aebc6be807ad5e2199ff5ed6f3b7ea043624d0d10d
-  languageName: node
-  linkType: hard
-
-"@material/auto-init@npm:^14.0.0":
-  version: 14.0.0
-  resolution: "@material/auto-init@npm:14.0.0"
-  dependencies:
-    "@material/base": "npm:^14.0.0"
-    tslib: "npm:^2.1.0"
-  checksum: 10/f040753e5466bd9d9fa2898829509290100a73d28ff9329966220458dec5c5b48975a1b459898008927819628de043947e35d02e1708eac20f00fa7c4a1966ea
-  languageName: node
-  linkType: hard
-
-"@material/banner@npm:^14.0.0":
-  version: 14.0.0
-  resolution: "@material/banner@npm:14.0.0"
-  dependencies:
-    "@material/base": "npm:^14.0.0"
-    "@material/button": "npm:^14.0.0"
-    "@material/dom": "npm:^14.0.0"
-    "@material/elevation": "npm:^14.0.0"
-    "@material/feature-targeting": "npm:^14.0.0"
-    "@material/ripple": "npm:^14.0.0"
-    "@material/rtl": "npm:^14.0.0"
-    "@material/shape": "npm:^14.0.0"
-    "@material/theme": "npm:^14.0.0"
-    "@material/tokens": "npm:^14.0.0"
-    "@material/typography": "npm:^14.0.0"
-    tslib: "npm:^2.1.0"
-  checksum: 10/1cb5b9bbf267e45690ae56e39e18d34ce7e7fa26130b3b665b6314eed4fb2106f588c255d55595930cab81f08953d00684bb0db809ab7171d8b14e15830fe335
-  languageName: node
-  linkType: hard
-
-"@material/base@npm:14.0.0":
-  version: 14.0.0
-  resolution: "@material/base@npm:14.0.0"
-  dependencies:
-    tslib: "npm:^2.1.0"
-  checksum: 10/df2a063cde0af5305a5f9dad5508fac7cb93e46f9d638105e0b9df7b3367d0eb27879432d1ae6692d278c7aa11eab9845e10c365f079bd1b19689b120cb0597f
-  languageName: node
-  linkType: hard
-
-"@material/base@patch:@material/base@npm%3A14.0.0#./.yarn/patches/@material-base-npm-14.0.0-36e0a55c42.patch::locator=root-workspace-0b6124%40workspace%3A.":
-  version: 14.0.0
-  resolution: "@material/base@patch:@material/base@npm%3A14.0.0#./.yarn/patches/@material-base-npm-14.0.0-36e0a55c42.patch::version=14.0.0&hash=ed4a27&locator=root-workspace-0b6124%40workspace%3A."
-  dependencies:
-    tslib: "npm:^2.1.0"
-  checksum: 10/9fc2d75d55573831aa54032b0dfd83fc041692d5ed9b9883a15690bd5c7bd4f8c329f5c96f04405b3346c9b3700df96902554e8cb76b50848528076413bd1a67
-  languageName: node
-  linkType: hard
-
-"@material/button@npm:^14.0.0":
-  version: 14.0.0
-  resolution: "@material/button@npm:14.0.0"
-  dependencies:
-    "@material/density": "npm:^14.0.0"
-    "@material/dom": "npm:^14.0.0"
-    "@material/elevation": "npm:^14.0.0"
-    "@material/feature-targeting": "npm:^14.0.0"
-    "@material/focus-ring": "npm:^14.0.0"
-    "@material/ripple": "npm:^14.0.0"
-    "@material/rtl": "npm:^14.0.0"
-    "@material/shape": "npm:^14.0.0"
-    "@material/theme": "npm:^14.0.0"
-    "@material/tokens": "npm:^14.0.0"
-    "@material/touch-target": "npm:^14.0.0"
-    "@material/typography": "npm:^14.0.0"
-    tslib: "npm:^2.1.0"
-  checksum: 10/d69934a505f3418f310a30e3bce6940b5cace8b2d859e17502d61f9c24c1cf765c2d9c7326636c8cb30889c1630ee5e39678da423c6c8890c8dd85bff674befd
-  languageName: node
-  linkType: hard
-
-"@material/card@npm:^14.0.0":
-  version: 14.0.0
-  resolution: "@material/card@npm:14.0.0"
-  dependencies:
-    "@material/dom": "npm:^14.0.0"
-    "@material/elevation": "npm:^14.0.0"
-    "@material/feature-targeting": "npm:^14.0.0"
-    "@material/ripple": "npm:^14.0.0"
-    "@material/rtl": "npm:^14.0.0"
-    "@material/shape": "npm:^14.0.0"
-    "@material/theme": "npm:^14.0.0"
-    tslib: "npm:^2.1.0"
-  checksum: 10/bab21cdca0530fcb7d4d668ba9ad35cf18aca03973cbb87ec17580d72bd017e9807172599a001d80ab449fe545548df5aca124ea2a708b8f87f20dd7a1b436e3
-  languageName: node
-  linkType: hard
-
-"@material/checkbox@npm:^14.0.0":
-  version: 14.0.0
-  resolution: "@material/checkbox@npm:14.0.0"
-  dependencies:
-    "@material/animation": "npm:^14.0.0"
-    "@material/base": "npm:^14.0.0"
-    "@material/density": "npm:^14.0.0"
-    "@material/dom": "npm:^14.0.0"
-    "@material/feature-targeting": "npm:^14.0.0"
-    "@material/focus-ring": "npm:^14.0.0"
-    "@material/ripple": "npm:^14.0.0"
-    "@material/theme": "npm:^14.0.0"
-    "@material/touch-target": "npm:^14.0.0"
-    tslib: "npm:^2.1.0"
-  checksum: 10/098862b5dbe9d2030bc10c44f400b37d8bc9d4bed2f9b2b58f0b35d67af324969c53f6aaef8569010eea87ef94b1b0ec21015ff90695f423e33eb8bec5b93d19
-  languageName: node
-  linkType: hard
-
-"@material/chips@npm:^14.0.0":
-  version: 14.0.0
-  resolution: "@material/chips@npm:14.0.0"
-  dependencies:
-    "@material/animation": "npm:^14.0.0"
-    "@material/base": "npm:^14.0.0"
-    "@material/checkbox": "npm:^14.0.0"
-    "@material/density": "npm:^14.0.0"
-    "@material/dom": "npm:^14.0.0"
-    "@material/elevation": "npm:^14.0.0"
-    "@material/feature-targeting": "npm:^14.0.0"
-    "@material/focus-ring": "npm:^14.0.0"
-    "@material/ripple": "npm:^14.0.0"
-    "@material/rtl": "npm:^14.0.0"
-    "@material/shape": "npm:^14.0.0"
-    "@material/theme": "npm:^14.0.0"
-    "@material/tokens": "npm:^14.0.0"
-    "@material/touch-target": "npm:^14.0.0"
-    "@material/typography": "npm:^14.0.0"
-    tslib: "npm:^2.1.0"
-  checksum: 10/bbfeaba221e989342de0ace2603ce72a94ddc99f8dacce5e3ecdc7505e07208e38f27eb82fe651831270c878d82fb4674b506cfeae72be301522c5beef77e07e
-  languageName: node
-  linkType: hard
-
-"@material/circular-progress@npm:^14.0.0":
-  version: 14.0.0
-  resolution: "@material/circular-progress@npm:14.0.0"
-  dependencies:
-    "@material/animation": "npm:^14.0.0"
-    "@material/base": "npm:^14.0.0"
-    "@material/feature-targeting": "npm:^14.0.0"
-    "@material/progress-indicator": "npm:^14.0.0"
-    "@material/rtl": "npm:^14.0.0"
-    "@material/theme": "npm:^14.0.0"
-    tslib: "npm:^2.1.0"
-  checksum: 10/ce08bc6e6fdf545c60047650e41c567d46a4717fecef659f196933638c07f637d92155154b2600b160f45269bb8b2b322be2a686ea6ef987e155aa7ccc1c4df0
-  languageName: node
-  linkType: hard
-
-"@material/data-table@npm:^14.0.0":
-  version: 14.0.0
-  resolution: "@material/data-table@npm:14.0.0"
-  dependencies:
-    "@material/animation": "npm:^14.0.0"
-    "@material/base": "npm:^14.0.0"
-    "@material/checkbox": "npm:^14.0.0"
-    "@material/density": "npm:^14.0.0"
-    "@material/dom": "npm:^14.0.0"
-    "@material/elevation": "npm:^14.0.0"
-    "@material/feature-targeting": "npm:^14.0.0"
-    "@material/icon-button": "npm:^14.0.0"
-    "@material/linear-progress": "npm:^14.0.0"
-    "@material/list": "npm:^14.0.0"
-    "@material/menu": "npm:^14.0.0"
-    "@material/rtl": "npm:^14.0.0"
-    "@material/select": "npm:^14.0.0"
-    "@material/shape": "npm:^14.0.0"
-    "@material/theme": "npm:^14.0.0"
-    "@material/touch-target": "npm:^14.0.0"
-    "@material/typography": "npm:^14.0.0"
-    tslib: "npm:^2.1.0"
-  checksum: 10/21fb03dfb9a3467817efb572a2e2789f1e3364e651aa6445371e836e045797547de29840fa21efc75aabf66557bad28e2431f9bd35c9c9e3843845f09a2ac5a9
-  languageName: node
-  linkType: hard
-
-"@material/density@npm:^14.0.0":
-  version: 14.0.0
-  resolution: "@material/density@npm:14.0.0"
-  dependencies:
-    tslib: "npm:^2.1.0"
-  checksum: 10/805ba0760ed31fac7e30fe95a3e075300dfa321a1abf1527560687a396c426fc9fd4499baf9ea0059e94404651e0380ed095bf43534d0bda8684323671e80701
-  languageName: node
-  linkType: hard
-
-"@material/dialog@npm:^14.0.0":
-  version: 14.0.0
-  resolution: "@material/dialog@npm:14.0.0"
-  dependencies:
-    "@material/animation": "npm:^14.0.0"
-    "@material/base": "npm:^14.0.0"
-    "@material/button": "npm:^14.0.0"
-    "@material/dom": "npm:^14.0.0"
-    "@material/elevation": "npm:^14.0.0"
-    "@material/feature-targeting": "npm:^14.0.0"
-    "@material/icon-button": "npm:^14.0.0"
-    "@material/ripple": "npm:^14.0.0"
-    "@material/rtl": "npm:^14.0.0"
-    "@material/shape": "npm:^14.0.0"
-    "@material/theme": "npm:^14.0.0"
-    "@material/tokens": "npm:^14.0.0"
-    "@material/touch-target": "npm:^14.0.0"
-    "@material/typography": "npm:^14.0.0"
-    tslib: "npm:^2.1.0"
-  checksum: 10/343143c0bd37223c5eeeba23551a6c9d9e5ae2e7ffda3b83d26fdd8fb9e31e7cbf0390fc9192c5bd24136cf0b3ed8d7c75d557d8d017466408fa0e9fd37bb130
-  languageName: node
-  linkType: hard
-
-"@material/dom@npm:^14.0.0":
-  version: 14.0.0
-  resolution: "@material/dom@npm:14.0.0"
-  dependencies:
-    "@material/feature-targeting": "npm:^14.0.0"
-    tslib: "npm:^2.1.0"
-  checksum: 10/1cb0d9b223510187fcabbcdd9c5b2a1221599dd3be25079e6cd102e85bda4af04b7327e22f5a0cfa1a2536918269115add60ff85734ab53fccb4fc3e23515db7
-  languageName: node
-  linkType: hard
-
-"@material/drawer@npm:^14.0.0":
-  version: 14.0.0
-  resolution: "@material/drawer@npm:14.0.0"
-  dependencies:
-    "@material/animation": "npm:^14.0.0"
-    "@material/base": "npm:^14.0.0"
-    "@material/dom": "npm:^14.0.0"
-    "@material/elevation": "npm:^14.0.0"
-    "@material/feature-targeting": "npm:^14.0.0"
-    "@material/list": "npm:^14.0.0"
-    "@material/ripple": "npm:^14.0.0"
-    "@material/rtl": "npm:^14.0.0"
-    "@material/shape": "npm:^14.0.0"
-    "@material/theme": "npm:^14.0.0"
-    "@material/typography": "npm:^14.0.0"
-    tslib: "npm:^2.1.0"
-  checksum: 10/013535ee5b1ef620e525f3763e54192ffbc3534831fafcbd9222ba477b0012553087d7e800ed413b5627b8505a8070b791e2b2c119df601402229a03fbc6fb9d
-  languageName: node
-  linkType: hard
-
-"@material/elevation@npm:^14.0.0":
-  version: 14.0.0
-  resolution: "@material/elevation@npm:14.0.0"
-  dependencies:
-    "@material/animation": "npm:^14.0.0"
-    "@material/base": "npm:^14.0.0"
-    "@material/feature-targeting": "npm:^14.0.0"
-    "@material/rtl": "npm:^14.0.0"
-    "@material/theme": "npm:^14.0.0"
-    tslib: "npm:^2.1.0"
-  checksum: 10/90b5da72672108c3a1b1a1ee9e28547c1f42a8d2f95c42004554c77cee082ad00e450a256c18ba32381d1b1289b73d18954bec6828669bf9799636e8341abc8e
-  languageName: node
-  linkType: hard
-
-"@material/fab@npm:^14.0.0":
-  version: 14.0.0
-  resolution: "@material/fab@npm:14.0.0"
-  dependencies:
-    "@material/animation": "npm:^14.0.0"
-    "@material/dom": "npm:^14.0.0"
-    "@material/elevation": "npm:^14.0.0"
-    "@material/feature-targeting": "npm:^14.0.0"
-    "@material/focus-ring": "npm:^14.0.0"
-    "@material/ripple": "npm:^14.0.0"
-    "@material/rtl": "npm:^14.0.0"
-    "@material/shape": "npm:^14.0.0"
-    "@material/theme": "npm:^14.0.0"
-    "@material/tokens": "npm:^14.0.0"
-    "@material/touch-target": "npm:^14.0.0"
-    "@material/typography": "npm:^14.0.0"
-    tslib: "npm:^2.1.0"
-  checksum: 10/c5342e47d316dba5212e686b70a8897df953972b98220ef3a64e4a3abf2530efe313f4e772d2f71b3d6c81d1f74ce02837ca0e6c0ab8d14ccf9ce86c8f807b00
-  languageName: node
-  linkType: hard
-
-"@material/feature-targeting@npm:^14.0.0":
-  version: 14.0.0
-  resolution: "@material/feature-targeting@npm:14.0.0"
-  dependencies:
-    tslib: "npm:^2.1.0"
-  checksum: 10/a755aad3e5ac38e13426adeb9e1817ca4524ba2a16d264f4b20b649c6a7110b579328ced22680f69e5d038fea45a402d8e13675c560d511ad61cc70136b634af
-  languageName: node
-  linkType: hard
-
-"@material/floating-label@npm:^14.0.0":
-  version: 14.0.0
-  resolution: "@material/floating-label@npm:14.0.0"
-  dependencies:
-    "@material/animation": "npm:^14.0.0"
-    "@material/base": "npm:^14.0.0"
-    "@material/dom": "npm:^14.0.0"
-    "@material/feature-targeting": "npm:^14.0.0"
-    "@material/rtl": "npm:^14.0.0"
-    "@material/theme": "npm:^14.0.0"
-    "@material/typography": "npm:^14.0.0"
-    tslib: "npm:^2.1.0"
-  checksum: 10/64a32ec8dd987a9d208d44ff28260da384af222be5f3de9efdeddb05a0c3f90a0e8eb29c1aeb45b02dc620a90015aeb21f998b4e352b47759528768c78c05776
-  languageName: node
-  linkType: hard
-
-"@material/focus-ring@npm:^14.0.0":
-  version: 14.0.0
-  resolution: "@material/focus-ring@npm:14.0.0"
-  dependencies:
-    "@material/dom": "npm:^14.0.0"
-    "@material/feature-targeting": "npm:^14.0.0"
-    "@material/rtl": "npm:^14.0.0"
-  checksum: 10/f175b1c16d347298c3e61971e1ed93043fa6ec3457fc7797085b26436a10ad8ebd00833749520953389d3428214a5d8e300baa1bd1061d76ff0dee3ad82721d2
-  languageName: node
-  linkType: hard
-
-"@material/form-field@npm:^14.0.0":
-  version: 14.0.0
-  resolution: "@material/form-field@npm:14.0.0"
-  dependencies:
-    "@material/base": "npm:^14.0.0"
-    "@material/feature-targeting": "npm:^14.0.0"
-    "@material/ripple": "npm:^14.0.0"
-    "@material/rtl": "npm:^14.0.0"
-    "@material/theme": "npm:^14.0.0"
-    "@material/typography": "npm:^14.0.0"
-    tslib: "npm:^2.1.0"
-  checksum: 10/0398eb6a99d181977dd916a62b78c315c501f88070c2e11f3d233916c37d826abf4f251e33695c1b7698cd030cb43913c3beff011ff69cb2c03c6ea028dffaa2
-  languageName: node
-  linkType: hard
-
-"@material/icon-button@npm:^14.0.0":
-  version: 14.0.0
-  resolution: "@material/icon-button@npm:14.0.0"
-  dependencies:
-    "@material/base": "npm:^14.0.0"
-    "@material/density": "npm:^14.0.0"
-    "@material/dom": "npm:^14.0.0"
-    "@material/elevation": "npm:^14.0.0"
-    "@material/feature-targeting": "npm:^14.0.0"
-    "@material/focus-ring": "npm:^14.0.0"
-    "@material/ripple": "npm:^14.0.0"
-    "@material/rtl": "npm:^14.0.0"
-    "@material/theme": "npm:^14.0.0"
-    "@material/touch-target": "npm:^14.0.0"
-    tslib: "npm:^2.1.0"
-  checksum: 10/225ebc1506a2f1eee814ddd5c61e5670c7061158f3af86889b06718f1b926a28ade90f5f139bb3ffe0ecdf035e843788a773fc117b3bc9baf049f67a8db68300
-  languageName: node
-  linkType: hard
-
-"@material/image-list@npm:^14.0.0":
-  version: 14.0.0
-  resolution: "@material/image-list@npm:14.0.0"
-  dependencies:
-    "@material/feature-targeting": "npm:^14.0.0"
-    "@material/shape": "npm:^14.0.0"
-    "@material/theme": "npm:^14.0.0"
-    "@material/typography": "npm:^14.0.0"
-    tslib: "npm:^2.1.0"
-  checksum: 10/e1e1ebf5ff99d19052e81e859a1c1d653df1467306001aaf9e2b2a04412395a931acd9336723d16103ed5f2bef07e69d3a85a195fc204eb657ebe602c72c6b37
-  languageName: node
-  linkType: hard
-
-"@material/layout-grid@npm:^14.0.0":
-  version: 14.0.0
-  resolution: "@material/layout-grid@npm:14.0.0"
-  dependencies:
-    tslib: "npm:^2.1.0"
-  checksum: 10/88ee15f43d65e4907ab6d6f3250b2751bc18bfb8efd1f27af44b6216fc2e8fd77676c49d016bb7d5131c7ed1e4b01b6a4a058de99d8428a58883fb7087f00dc5
-  languageName: node
-  linkType: hard
-
-"@material/line-ripple@npm:^14.0.0":
-  version: 14.0.0
-  resolution: "@material/line-ripple@npm:14.0.0"
-  dependencies:
-    "@material/animation": "npm:^14.0.0"
-    "@material/base": "npm:^14.0.0"
-    "@material/feature-targeting": "npm:^14.0.0"
-    "@material/theme": "npm:^14.0.0"
-    tslib: "npm:^2.1.0"
-  checksum: 10/87c7b072475f062aec80196e8d2c4c0211e2907978bf6e26c12bccc171065cb0d4b6d44b88e3f3f67baf55eccd9618c2387e746197857704d91b91bab3345a8e
-  languageName: node
-  linkType: hard
-
-"@material/linear-progress@npm:^14.0.0":
-  version: 14.0.0
-  resolution: "@material/linear-progress@npm:14.0.0"
-  dependencies:
-    "@material/animation": "npm:^14.0.0"
-    "@material/base": "npm:^14.0.0"
-    "@material/dom": "npm:^14.0.0"
-    "@material/feature-targeting": "npm:^14.0.0"
-    "@material/progress-indicator": "npm:^14.0.0"
-    "@material/rtl": "npm:^14.0.0"
-    "@material/theme": "npm:^14.0.0"
-    tslib: "npm:^2.1.0"
-  checksum: 10/2e1b177e9a75b6729d88213ddfebadfe62640e01c34c240ccb8d9fea80dd3d0e88c5bd48c54f7855966a30402d4eedb26982abac9153856da69e9447c311af23
-  languageName: node
-  linkType: hard
-
-"@material/list@npm:^14.0.0":
-  version: 14.0.0
-  resolution: "@material/list@npm:14.0.0"
-  dependencies:
-    "@material/base": "npm:^14.0.0"
-    "@material/density": "npm:^14.0.0"
-    "@material/dom": "npm:^14.0.0"
-    "@material/feature-targeting": "npm:^14.0.0"
-    "@material/ripple": "npm:^14.0.0"
-    "@material/rtl": "npm:^14.0.0"
-    "@material/shape": "npm:^14.0.0"
-    "@material/theme": "npm:^14.0.0"
-    "@material/typography": "npm:^14.0.0"
-    tslib: "npm:^2.1.0"
-  checksum: 10/3443fc9e6ae42b9ae4a5e8686bb8014a6bc1ea60e206e224d8f382c967a48f2046406dbc9e29338999ee8c82bc5c40865bb597d63578ed1d32050e129164264a
-  languageName: node
-  linkType: hard
-
-"@material/menu-surface@npm:^14.0.0":
-  version: 14.0.0
-  resolution: "@material/menu-surface@npm:14.0.0"
-  dependencies:
-    "@material/animation": "npm:^14.0.0"
-    "@material/base": "npm:^14.0.0"
-    "@material/elevation": "npm:^14.0.0"
-    "@material/feature-targeting": "npm:^14.0.0"
-    "@material/rtl": "npm:^14.0.0"
-    "@material/shape": "npm:^14.0.0"
-    "@material/theme": "npm:^14.0.0"
-    tslib: "npm:^2.1.0"
-  checksum: 10/34ca4549b177f00f0cf6dc0bee151b8c6876383504586985ef3382e10f0c6ab4fa62a6967cf4b50489c5ec71ced1709f3099fbd134083b51e73c2d22ff51100a
-  languageName: node
-  linkType: hard
-
-"@material/menu@npm:^14.0.0":
-  version: 14.0.0
-  resolution: "@material/menu@npm:14.0.0"
-  dependencies:
-    "@material/base": "npm:^14.0.0"
-    "@material/dom": "npm:^14.0.0"
-    "@material/elevation": "npm:^14.0.0"
-    "@material/feature-targeting": "npm:^14.0.0"
-    "@material/list": "npm:^14.0.0"
-    "@material/menu-surface": "npm:^14.0.0"
-    "@material/ripple": "npm:^14.0.0"
-    "@material/rtl": "npm:^14.0.0"
-    "@material/theme": "npm:^14.0.0"
-    tslib: "npm:^2.1.0"
-  checksum: 10/6a6507c1a3650c5ba1e1795ef58440d09a37f82158bf3a1b06a0b099b4f07c06802fe83ff08fe8a159de8530fdd87f5420cf59b9730d0b8586eb7547120ca4f3
-  languageName: node
-  linkType: hard
-
-"@material/notched-outline@npm:^14.0.0":
-  version: 14.0.0
-  resolution: "@material/notched-outline@npm:14.0.0"
-  dependencies:
-    "@material/base": "npm:^14.0.0"
-    "@material/feature-targeting": "npm:^14.0.0"
-    "@material/floating-label": "npm:^14.0.0"
-    "@material/rtl": "npm:^14.0.0"
-    "@material/shape": "npm:^14.0.0"
-    "@material/theme": "npm:^14.0.0"
-    tslib: "npm:^2.1.0"
-  checksum: 10/67e0b3c75d0dafe6817fc1b6d394f926bdd878f1e160f83a496ea0a44bd415de9bbea17032a4a81508d5a6865df04bd55c10ae93fff5e3c498b79a02d0c572ae
-  languageName: node
-  linkType: hard
-
-"@material/progress-indicator@npm:^14.0.0":
-  version: 14.0.0
-  resolution: "@material/progress-indicator@npm:14.0.0"
-  dependencies:
-    tslib: "npm:^2.1.0"
-  checksum: 10/eeb661ed5890988a40fd954131de2d199bc6d4c87093d6f011c5f5a77336ac49ee9d4b96bd99d45c0cc8ce1e935b070586955959bcc569fdbd36a2026c0652d7
-  languageName: node
-  linkType: hard
-
-"@material/radio@npm:^14.0.0":
-  version: 14.0.0
-  resolution: "@material/radio@npm:14.0.0"
-  dependencies:
-    "@material/animation": "npm:^14.0.0"
-    "@material/base": "npm:^14.0.0"
-    "@material/density": "npm:^14.0.0"
-    "@material/dom": "npm:^14.0.0"
-    "@material/feature-targeting": "npm:^14.0.0"
-    "@material/focus-ring": "npm:^14.0.0"
-    "@material/ripple": "npm:^14.0.0"
-    "@material/theme": "npm:^14.0.0"
-    "@material/touch-target": "npm:^14.0.0"
-    tslib: "npm:^2.1.0"
-  checksum: 10/ed71250c815e8f82084492f33bc52d30641d0f8c12115f71d77cccfbc3ff04e47d2b77d52a19bdee7546d462e95cff797d9347f9bedb38b9e2b58b0540e5c3e4
-  languageName: node
-  linkType: hard
-
-"@material/ripple@npm:^14.0.0":
-  version: 14.0.0
-  resolution: "@material/ripple@npm:14.0.0"
-  dependencies:
-    "@material/animation": "npm:^14.0.0"
-    "@material/base": "npm:^14.0.0"
-    "@material/dom": "npm:^14.0.0"
-    "@material/feature-targeting": "npm:^14.0.0"
-    "@material/rtl": "npm:^14.0.0"
-    "@material/theme": "npm:^14.0.0"
-    tslib: "npm:^2.1.0"
-  checksum: 10/61ca6dc347e560485809b9c5e1928b34866adb7ab39badc9de9859aa619f7cc67ab2ae0fcfd72d76af3eadfd2ea9194fdc49b313dd30d4afb16126b3bb3348c2
-  languageName: node
-  linkType: hard
-
-"@material/rtl@npm:^14.0.0":
-  version: 14.0.0
-  resolution: "@material/rtl@npm:14.0.0"
-  dependencies:
-    "@material/theme": "npm:^14.0.0"
-    tslib: "npm:^2.1.0"
-  checksum: 10/ad30bd42cc5379f7c9d993c94628095342e686db1959fe0f769e8e44b1f1a2612956a7738c6894ac164af2fef8fbf09c6563e4a9f834b94f8d60c033e22705ec
-  languageName: node
-  linkType: hard
-
-"@material/segmented-button@npm:^14.0.0":
-  version: 14.0.0
-  resolution: "@material/segmented-button@npm:14.0.0"
-  dependencies:
-    "@material/base": "npm:^14.0.0"
-    "@material/elevation": "npm:^14.0.0"
-    "@material/feature-targeting": "npm:^14.0.0"
-    "@material/ripple": "npm:^14.0.0"
-    "@material/theme": "npm:^14.0.0"
-    "@material/touch-target": "npm:^14.0.0"
-    "@material/typography": "npm:^14.0.0"
-    tslib: "npm:^2.1.0"
-  checksum: 10/88b840e30ae4672131eff8628631b0ab237d92029be3cc41cd48f72fe2146fd49dded60b41de0877f9d3d584629531cefb4b137cec80ee1a64ed26eb87f9c772
-  languageName: node
-  linkType: hard
-
-"@material/select@npm:^14.0.0":
-  version: 14.0.0
-  resolution: "@material/select@npm:14.0.0"
-  dependencies:
-    "@material/animation": "npm:^14.0.0"
-    "@material/base": "npm:^14.0.0"
-    "@material/density": "npm:^14.0.0"
-    "@material/dom": "npm:^14.0.0"
-    "@material/elevation": "npm:^14.0.0"
-    "@material/feature-targeting": "npm:^14.0.0"
-    "@material/floating-label": "npm:^14.0.0"
-    "@material/line-ripple": "npm:^14.0.0"
-    "@material/list": "npm:^14.0.0"
-    "@material/menu": "npm:^14.0.0"
-    "@material/menu-surface": "npm:^14.0.0"
-    "@material/notched-outline": "npm:^14.0.0"
-    "@material/ripple": "npm:^14.0.0"
-    "@material/rtl": "npm:^14.0.0"
-    "@material/shape": "npm:^14.0.0"
-    "@material/theme": "npm:^14.0.0"
-    "@material/tokens": "npm:^14.0.0"
-    "@material/typography": "npm:^14.0.0"
-    tslib: "npm:^2.1.0"
-  checksum: 10/fe97b1133cf8cfb7b5e3366c48047267d60d13fbf94ee55a0b8790ee3408b1920d6aa8e33373547509af96b9ae3d92c51e54907ad9e34fcb75da6da519b2765d
-  languageName: node
-  linkType: hard
-
-"@material/shape@npm:^14.0.0":
-  version: 14.0.0
-  resolution: "@material/shape@npm:14.0.0"
-  dependencies:
-    "@material/feature-targeting": "npm:^14.0.0"
-    "@material/rtl": "npm:^14.0.0"
-    "@material/theme": "npm:^14.0.0"
-    tslib: "npm:^2.1.0"
-  checksum: 10/91893ac256894400aec82ad4fc264f08ac67b45ff865642a71f69ffb13e37f2584dd1ffe8844d8c44772d3645e6380b458a020211f2e92d8091c69df1ec42185
-  languageName: node
-  linkType: hard
-
-"@material/slider@npm:^14.0.0":
-  version: 14.0.0
-  resolution: "@material/slider@npm:14.0.0"
-  dependencies:
-    "@material/animation": "npm:^14.0.0"
-    "@material/base": "npm:^14.0.0"
-    "@material/dom": "npm:^14.0.0"
-    "@material/elevation": "npm:^14.0.0"
-    "@material/feature-targeting": "npm:^14.0.0"
-    "@material/ripple": "npm:^14.0.0"
-    "@material/rtl": "npm:^14.0.0"
-    "@material/theme": "npm:^14.0.0"
-    "@material/typography": "npm:^14.0.0"
-    tslib: "npm:^2.1.0"
-  checksum: 10/475e60a5a95fb90530ab53563772763509d8ab9735d4582c49937c376dcbb687817509d1884e0ee7af909174ef6044f1261c7688d4cd90a4f64cb4a76ad54daa
-  languageName: node
-  linkType: hard
-
-"@material/snackbar@npm:^14.0.0":
-  version: 14.0.0
-  resolution: "@material/snackbar@npm:14.0.0"
-  dependencies:
-    "@material/animation": "npm:^14.0.0"
-    "@material/base": "npm:^14.0.0"
-    "@material/button": "npm:^14.0.0"
-    "@material/dom": "npm:^14.0.0"
-    "@material/elevation": "npm:^14.0.0"
-    "@material/feature-targeting": "npm:^14.0.0"
-    "@material/icon-button": "npm:^14.0.0"
-    "@material/ripple": "npm:^14.0.0"
-    "@material/rtl": "npm:^14.0.0"
-    "@material/shape": "npm:^14.0.0"
-    "@material/theme": "npm:^14.0.0"
-    "@material/typography": "npm:^14.0.0"
-    tslib: "npm:^2.1.0"
-  checksum: 10/df97c257396df1985a894b2095633871f53ee2ac2f19a85b9e6e4e78e416acecd9daecf5d224b2cb8b4ba2abd1a544d0c6e3334cfb9895476c37f6aa58c28929
-  languageName: node
-  linkType: hard
-
-"@material/switch@npm:^14.0.0":
-  version: 14.0.0
-  resolution: "@material/switch@npm:14.0.0"
-  dependencies:
-    "@material/animation": "npm:^14.0.0"
-    "@material/base": "npm:^14.0.0"
-    "@material/density": "npm:^14.0.0"
-    "@material/dom": "npm:^14.0.0"
-    "@material/elevation": "npm:^14.0.0"
-    "@material/feature-targeting": "npm:^14.0.0"
-    "@material/focus-ring": "npm:^14.0.0"
-    "@material/ripple": "npm:^14.0.0"
-    "@material/rtl": "npm:^14.0.0"
-    "@material/shape": "npm:^14.0.0"
-    "@material/theme": "npm:^14.0.0"
-    "@material/tokens": "npm:^14.0.0"
-    tslib: "npm:^2.1.0"
-  checksum: 10/bf8350bf43d49ae450ce9677b7af6edd578187ec25f6aabcfce92ff6b369b0523e6ccc8eea1b30777cb6420431678cd07a8647be0a4b93ef58c63aa4c2c643e9
-  languageName: node
-  linkType: hard
-
-"@material/tab-bar@npm:^14.0.0":
-  version: 14.0.0
-  resolution: "@material/tab-bar@npm:14.0.0"
-  dependencies:
-    "@material/animation": "npm:^14.0.0"
-    "@material/base": "npm:^14.0.0"
-    "@material/density": "npm:^14.0.0"
-    "@material/elevation": "npm:^14.0.0"
-    "@material/feature-targeting": "npm:^14.0.0"
-    "@material/tab": "npm:^14.0.0"
-    "@material/tab-indicator": "npm:^14.0.0"
-    "@material/tab-scroller": "npm:^14.0.0"
-    "@material/theme": "npm:^14.0.0"
-    "@material/typography": "npm:^14.0.0"
-    tslib: "npm:^2.1.0"
-  checksum: 10/c17531abdb2499f0d1cc51ae27cb0317ea222b4a33877033c205803a6a1de993544c0063697983364523bb128c3f6ffa0a3dc993f550efa0d2d8e708935002a5
-  languageName: node
-  linkType: hard
-
-"@material/tab-indicator@npm:^14.0.0":
-  version: 14.0.0
-  resolution: "@material/tab-indicator@npm:14.0.0"
-  dependencies:
-    "@material/animation": "npm:^14.0.0"
-    "@material/base": "npm:^14.0.0"
-    "@material/feature-targeting": "npm:^14.0.0"
-    "@material/theme": "npm:^14.0.0"
-    tslib: "npm:^2.1.0"
-  checksum: 10/5f9a33cfa134cd332f5512f00b3ee2fdf9d940fbab9ef801dce524f2b55e6c24525b7d4d19d753b076ac51842b29bc5278a0a7802e1768739b5cd3f61527bb91
-  languageName: node
-  linkType: hard
-
-"@material/tab-scroller@npm:^14.0.0":
-  version: 14.0.0
-  resolution: "@material/tab-scroller@npm:14.0.0"
-  dependencies:
-    "@material/animation": "npm:^14.0.0"
-    "@material/base": "npm:^14.0.0"
-    "@material/dom": "npm:^14.0.0"
-    "@material/feature-targeting": "npm:^14.0.0"
-    "@material/tab": "npm:^14.0.0"
-    tslib: "npm:^2.1.0"
-  checksum: 10/223a5f9f76c40383a54c650bf68f684206443482703be6b03e8f479c25a663c826833212b59b0dd10367519cacc479c30a38ff52739e235ecc3218344b440a17
-  languageName: node
-  linkType: hard
-
-"@material/tab@npm:^14.0.0":
-  version: 14.0.0
-  resolution: "@material/tab@npm:14.0.0"
-  dependencies:
-    "@material/base": "npm:^14.0.0"
-    "@material/elevation": "npm:^14.0.0"
-    "@material/feature-targeting": "npm:^14.0.0"
-    "@material/focus-ring": "npm:^14.0.0"
-    "@material/ripple": "npm:^14.0.0"
-    "@material/rtl": "npm:^14.0.0"
-    "@material/tab-indicator": "npm:^14.0.0"
-    "@material/theme": "npm:^14.0.0"
-    "@material/typography": "npm:^14.0.0"
-    tslib: "npm:^2.1.0"
-  checksum: 10/d3ede158b38a007cdb2f7fd05dd080d09a125c1950b6d6ea73959acf52be21ccdf53614ded1ea23bdb8c76e85e06e631ec02a74a0da48a8c9c19f9ad3e659ebb
-  languageName: node
-  linkType: hard
-
-"@material/textfield@npm:^14.0.0":
-  version: 14.0.0
-  resolution: "@material/textfield@npm:14.0.0"
-  dependencies:
-    "@material/animation": "npm:^14.0.0"
-    "@material/base": "npm:^14.0.0"
-    "@material/density": "npm:^14.0.0"
-    "@material/dom": "npm:^14.0.0"
-    "@material/feature-targeting": "npm:^14.0.0"
-    "@material/floating-label": "npm:^14.0.0"
-    "@material/line-ripple": "npm:^14.0.0"
-    "@material/notched-outline": "npm:^14.0.0"
-    "@material/ripple": "npm:^14.0.0"
-    "@material/rtl": "npm:^14.0.0"
-    "@material/shape": "npm:^14.0.0"
-    "@material/theme": "npm:^14.0.0"
-    "@material/tokens": "npm:^14.0.0"
-    "@material/typography": "npm:^14.0.0"
-    tslib: "npm:^2.1.0"
-  checksum: 10/1d4e0d68c1e0f893913b57c6c0dc0791f9990d07a7c796770dd03fefee3a27465e3879d128e5fca09ac46b5a2afa63c96c76a93ec7ced3f2ba9214bba4e94429
-  languageName: node
-  linkType: hard
-
-"@material/theme@npm:^14.0.0":
-  version: 14.0.0
-  resolution: "@material/theme@npm:14.0.0"
-  dependencies:
-    "@material/feature-targeting": "npm:^14.0.0"
-    tslib: "npm:^2.1.0"
-  checksum: 10/56506d1e01d4eebefba88ee102bb47847b2cc2fa6e481068bce92ba15adf99cda07a89bc24e81458fadf80c89803a8a217ed7b53c3f9559e8bc5a20ae12af9f7
-  languageName: node
-  linkType: hard
-
-"@material/tokens@npm:^14.0.0":
-  version: 14.0.0
-  resolution: "@material/tokens@npm:14.0.0"
-  dependencies:
-    "@material/elevation": "npm:^14.0.0"
-  checksum: 10/93eef9100f4c0926904121a4d41b515957745e189ad70fae3a175cedd6863d14374e71bcd31cc4dd31cbbb18d6f4b6da675cb75873e176706ac831e822841d09
-  languageName: node
-  linkType: hard
-
-"@material/tooltip@npm:^14.0.0":
-  version: 14.0.0
-  resolution: "@material/tooltip@npm:14.0.0"
-  dependencies:
-    "@material/animation": "npm:^14.0.0"
-    "@material/base": "npm:^14.0.0"
-    "@material/dom": "npm:^14.0.0"
-    "@material/elevation": "npm:^14.0.0"
-    "@material/feature-targeting": "npm:^14.0.0"
-    "@material/rtl": "npm:^14.0.0"
-    "@material/shape": "npm:^14.0.0"
-    "@material/theme": "npm:^14.0.0"
-    "@material/typography": "npm:^14.0.0"
-    tslib: "npm:^2.1.0"
-  checksum: 10/2c8d5311adb7ca81555c2c8cf208753f3a279c2f95b6754f9b3e842cf9262c915eff9855131f6237bc8235fcc50ec776be6e4aaaadb1b2792adc88b102fbe083
-  languageName: node
-  linkType: hard
-
-"@material/top-app-bar@npm:^14.0.0":
-  version: 14.0.0
-  resolution: "@material/top-app-bar@npm:14.0.0"
-  dependencies:
-    "@material/animation": "npm:^14.0.0"
-    "@material/base": "npm:^14.0.0"
-    "@material/elevation": "npm:^14.0.0"
-    "@material/ripple": "npm:^14.0.0"
-    "@material/rtl": "npm:^14.0.0"
-    "@material/shape": "npm:^14.0.0"
-    "@material/theme": "npm:^14.0.0"
-    "@material/typography": "npm:^14.0.0"
-    tslib: "npm:^2.1.0"
-  checksum: 10/e561c507f00e140c6492dae11eee577b28ab6b4036161081a2bc3925ccd88c4bc7aeae162afd2197486f97de4d9a5f86491d3c55b90713a421411ef029f88e0c
-  languageName: node
-  linkType: hard
-
-"@material/touch-target@npm:^14.0.0":
-  version: 14.0.0
-  resolution: "@material/touch-target@npm:14.0.0"
-  dependencies:
-    "@material/base": "npm:^14.0.0"
-    "@material/feature-targeting": "npm:^14.0.0"
-    "@material/rtl": "npm:^14.0.0"
-    tslib: "npm:^2.1.0"
-  checksum: 10/b621cc79e7468d24c32ccbfe14fffb0e565a77e21c3f999f9b516c1f315900a68b612f75407298d9abfbae8aa25734d004bf6d9bd75673f65b278607fce3941b
+"@material-design-icons/svg@npm:^0.14.15":
+  version: 0.14.15
+  resolution: "@material-design-icons/svg@npm:0.14.15"
+  checksum: 10/bba04aae11b4d1667d6bc7dfa4331141a7f94484aa30ebc8d2ab411a67cf83e7d09e656d51027a0d829852824ef4b91dfccc4476945a76c95908c06148c14038
   languageName: node
   linkType: hard
 
-"@material/typography@npm:^14.0.0":
-  version: 14.0.0
-  resolution: "@material/typography@npm:14.0.0"
+"@mdx-js/react@npm:^2.1.5":
+  version: 2.3.0
+  resolution: "@mdx-js/react@npm:2.3.0"
   dependencies:
-    "@material/feature-targeting": "npm:^14.0.0"
-    "@material/theme": "npm:^14.0.0"
-    tslib: "npm:^2.1.0"
-  checksum: 10/37071c19d3021764b6a8805dbd24aa59fd25eab21555cf7d3f603b5306a798149069df229622d727400caebec08edf4853b33c6c479b1b426745732af88ee8ca
+    "@types/mdx": "npm:^2.0.0"
+    "@types/react": "npm:>=16"
+  peerDependencies:
+    react: ">=16"
+  checksum: 10/bce1cb1dde0a9a2b786cd9167b9e2bc0e3be52c195a4a79aaf1677470566d1fd2979d01baca2380c76aa4a1a27cd89f051484e595fdc4144a428d6af39bb667a
   languageName: node
   linkType: hard
 
@@ -7250,6 +7915,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@ndelangen/get-tarball@npm:^3.0.7":
+  version: 3.0.9
+  resolution: "@ndelangen/get-tarball@npm:3.0.9"
+  dependencies:
+    gunzip-maybe: "npm:^1.4.2"
+    pump: "npm:^3.0.0"
+    tar-fs: "npm:^2.1.1"
+  checksum: 10/39697cef2b92f6e08e3590467cc6da88cd6757b2a27cb9208879c2316ed71d6be4608892ee0a86eb0343140da1a5df498f93a32c2aaf8f1fbd90f883f08b5f63
+  languageName: node
+  linkType: hard
+
 "@nicolo-ribaudo/chokidar-2@npm:2.1.8-no-fsevents.3":
   version: 2.1.8-no-fsevents.3
   resolution: "@nicolo-ribaudo/chokidar-2@npm:2.1.8-no-fsevents.3"
@@ -8444,6 +9120,43 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@pmmmwh/react-refresh-webpack-plugin@npm:^0.5.11":
+  version: 0.5.16
+  resolution: "@pmmmwh/react-refresh-webpack-plugin@npm:0.5.16"
+  dependencies:
+    ansi-html: "npm:^0.0.9"
+    core-js-pure: "npm:^3.23.3"
+    error-stack-parser: "npm:^2.0.6"
+    html-entities: "npm:^2.1.0"
+    loader-utils: "npm:^2.0.4"
+    schema-utils: "npm:^4.2.0"
+    source-map: "npm:^0.7.3"
+  peerDependencies:
+    "@types/webpack": 4.x || 5.x
+    react-refresh: ">=0.10.0 <1.0.0"
+    sockjs-client: ^1.4.0
+    type-fest: ">=0.17.0 <5.0.0"
+    webpack: ">=4.43.0 <6.0.0"
+    webpack-dev-server: 3.x || 4.x || 5.x
+    webpack-hot-middleware: 2.x
+    webpack-plugin-serve: 0.x || 1.x
+  peerDependenciesMeta:
+    "@types/webpack":
+      optional: true
+    sockjs-client:
+      optional: true
+    type-fest:
+      optional: true
+    webpack-dev-server:
+      optional: true
+    webpack-hot-middleware:
+      optional: true
+    webpack-plugin-serve:
+      optional: true
+  checksum: 10/d7ac4c58a377d37a4dc2f19d1434a14f83ff73d38fd7e374bdab2b2b73b7dc398803c1fb6eb84e8787417bffdc1735f83f65f55d8acac30a800de7122c16428e
+  languageName: node
+  linkType: hard
+
 "@pmmmwh/react-refresh-webpack-plugin@npm:^0.5.15":
   version: 0.5.15
   resolution: "@pmmmwh/react-refresh-webpack-plugin@npm:0.5.15"
@@ -8690,522 +9403,1447 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@react-dnd/asap@npm:^5.0.1":
-  version: 5.0.2
-  resolution: "@react-dnd/asap@npm:5.0.2"
-  checksum: 10/a75039720b89da11bc678c2b61b1d2840c8349023ef2b8f8ca9099e7ece6953e9be704bf393bf799eae83d245f62115eb5302499612c2aa009c1d91caa9462df
+"@radix-ui/number@npm:1.0.1":
+  version: 1.0.1
+  resolution: "@radix-ui/number@npm:1.0.1"
+  dependencies:
+    "@babel/runtime": "npm:^7.13.10"
+  checksum: 10/621ea8b7d4195d1a65a9c0aee918e8335e7f198088eec91577512c89c2ba3a3bab4a767cfb872a2b9c3092a78ff41cad9a924845a939f6bb87fe9356241ea0ea
   languageName: node
   linkType: hard
 
-"@react-dnd/invariant@npm:^4.0.1":
-  version: 4.0.2
-  resolution: "@react-dnd/invariant@npm:4.0.2"
-  checksum: 10/b638e9643e6e93da03ef463be3c1b92055daadc391fc08e4ce8639ef8c7738f91058ec83ee52a0d0df0d3a6dd2811a7703e1450737708f043c2e909c0a99dd31
+"@radix-ui/number@npm:1.1.1":
+  version: 1.1.1
+  resolution: "@radix-ui/number@npm:1.1.1"
+  checksum: 10/58717faf3f7aa180fdfcde7083cae0bc06677cbd08fd2bed5a3f8820deeb6f514f7d475f1fbb61e1f9a16cb2e7daf1000b2c614b0de3520fccfc04e3576e4566
   languageName: node
   linkType: hard
 
-"@react-dnd/shallowequal@npm:^4.0.1":
-  version: 4.0.2
-  resolution: "@react-dnd/shallowequal@npm:4.0.2"
-  checksum: 10/7f21d691bddbfd4d2830948cbeefecca1600b2b46bcb1934926795f07ae8a1fa60a3dfd3a2112be5ef682c3820c80a99711e9fa15843f7e300acb25a4ecb70ab
+"@radix-ui/primitive@npm:1.0.1":
+  version: 1.0.1
+  resolution: "@radix-ui/primitive@npm:1.0.1"
+  dependencies:
+    "@babel/runtime": "npm:^7.13.10"
+  checksum: 10/2b93e161d3fdabe9a64919def7fa3ceaecf2848341e9211520c401181c9eaebb8451c630b066fad2256e5c639c95edc41de0ba59c40eff37e799918d019822d1
+  languageName: node
+  linkType: hard
+
+"@radix-ui/primitive@npm:1.1.2":
+  version: 1.1.2
+  resolution: "@radix-ui/primitive@npm:1.1.2"
+  checksum: 10/6cb2ac097faf77b7288bdfd87d92e983e357252d00ee0d2b51ad8e7897bf9f51ec53eafd7dd64c613671a2b02cb8166177bc3de444a6560ec60835c363321c18
   languageName: node
   linkType: hard
 
-"@rmwc/base@npm:14.3.5":
-  version: 14.3.5
-  resolution: "@rmwc/base@npm:14.3.5"
+"@radix-ui/react-accessible-icon@npm:^1.1.2":
+  version: 1.1.7
+  resolution: "@radix-ui/react-accessible-icon@npm:1.1.7"
   dependencies:
-    "@material/dom": "npm:^14.0.0"
-    "@rmwc/types": "npm:14.3.5"
-    classnames: "npm:^2.3.1"
-    hyperform: "npm:^0.11.0"
-    mutation-observer: "npm:^1.0.3"
-    tslib: "npm:^2.4.0"
+    "@radix-ui/react-visually-hidden": "npm:1.2.3"
   peerDependencies:
-    react: ">=16.8.x"
-    react-dom: ">=16.8.x"
-  checksum: 10/47f84dda1eae76dbb83db772ad3ad761d3d6c354f5017f779eef2e7e29850f5a2021066f7e7d038317a9f909c693ce444fbbcfeeb507287ef722db4f80c5012c
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10/716230e25f7342516f8cd5530fed815356c79d2ea3c5cc31129749e49cd6fd20bea548781b04349fe8136fd71caabf693b1268f7fe8d32dcd765fa3e051dbc19
   languageName: node
   linkType: hard
 
-"@rmwc/button@npm:14.3.5":
-  version: 14.3.5
-  resolution: "@rmwc/button@npm:14.3.5"
+"@radix-ui/react-arrow@npm:1.0.3":
+  version: 1.0.3
+  resolution: "@radix-ui/react-arrow@npm:1.0.3"
   dependencies:
-    "@material/button": "npm:^14.0.0"
-    "@rmwc/base": "npm:14.3.5"
-    "@rmwc/icon": "npm:14.3.5"
-    "@rmwc/provider": "npm:14.3.5"
-    "@rmwc/ripple": "npm:14.3.5"
-    "@rmwc/types": "npm:14.3.5"
+    "@babel/runtime": "npm:^7.13.10"
+    "@radix-ui/react-primitive": "npm:1.0.3"
   peerDependencies:
-    react: ">=16.8.x"
-    react-dom: ">=16.8.x"
-  checksum: 10/a3a584eed0f2d19697f40ca5d9b5eb3048818d90493666112a540ee0aebb506c8780bd10b7e435fded9fa135df2b199bfaf3c65a285248ef7e4bfc5970624466
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+    react-dom: ^16.8 || ^17.0 || ^18.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10/8cca086f0dbb33360e3c0142adf72f99fc96352d7086d6c2356dbb2ea5944cfb720a87d526fc48087741c602cd8162ca02b0af5e6fdf5f56d20fddb44db8b4c3
   languageName: node
   linkType: hard
 
-"@rmwc/checkbox@npm:14.3.5":
-  version: 14.3.5
-  resolution: "@rmwc/checkbox@npm:14.3.5"
+"@radix-ui/react-arrow@npm:1.1.7":
+  version: 1.1.7
+  resolution: "@radix-ui/react-arrow@npm:1.1.7"
   dependencies:
-    "@material/checkbox": "npm:^14.0.0"
-    "@material/form-field": "npm:^14.0.0"
-    "@rmwc/base": "npm:14.3.5"
-    "@rmwc/formfield": "npm:14.3.5"
-    "@rmwc/ripple": "npm:14.3.5"
-    "@rmwc/toggleable": "npm:14.3.5"
-    "@rmwc/types": "npm:14.3.5"
+    "@radix-ui/react-primitive": "npm:2.1.3"
   peerDependencies:
-    react: ">=16.8.x"
-    react-dom: ">=16.8.x"
-  checksum: 10/abf53b35a8750ff8ae7af440a46f394bdfedaba0d97b8c5f663952ca5a408678a3682f8a921518c778f25b41d4e7373deb4832f44a51084b6c47cbd497e22df6
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10/6cdf74f06090f8994cdf6d3935a44ea3ac309163a4f59c476482c4907e8e0775f224045030abf10fa4f9e1cb7743db034429249b9e59354988e247eeb0f4fdcf
   languageName: node
   linkType: hard
 
-"@rmwc/chip@npm:14.3.5":
-  version: 14.3.5
-  resolution: "@rmwc/chip@npm:14.3.5"
+"@radix-ui/react-avatar@npm:^1.1.3":
+  version: 1.1.10
+  resolution: "@radix-ui/react-avatar@npm:1.1.10"
+  dependencies:
+    "@radix-ui/react-context": "npm:1.1.2"
+    "@radix-ui/react-primitive": "npm:2.1.3"
+    "@radix-ui/react-use-callback-ref": "npm:1.1.1"
+    "@radix-ui/react-use-is-hydrated": "npm:0.1.0"
+    "@radix-ui/react-use-layout-effect": "npm:1.1.1"
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10/5485763c44793aa833572989913b491b40470b013e0be0dd7e72392ac9e80e91bd6c48c6c7f7053b906b70a13829a6cb30e268b8daf71359ac86cf27c300b82f
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-checkbox@npm:^1.1.4":
+  version: 1.3.2
+  resolution: "@radix-ui/react-checkbox@npm:1.3.2"
+  dependencies:
+    "@radix-ui/primitive": "npm:1.1.2"
+    "@radix-ui/react-compose-refs": "npm:1.1.2"
+    "@radix-ui/react-context": "npm:1.1.2"
+    "@radix-ui/react-presence": "npm:1.1.4"
+    "@radix-ui/react-primitive": "npm:2.1.3"
+    "@radix-ui/react-use-controllable-state": "npm:1.2.2"
+    "@radix-ui/react-use-previous": "npm:1.1.1"
+    "@radix-ui/react-use-size": "npm:1.1.1"
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10/616de67a4e287872ba905ed0702dabad575fe4a65a5d3ad4475694f7cb8b04eacd4551d025678e7276d804dca0b286544844ae2d450f91d843bf0228d679bdcd
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-collapsible@npm:^1.1.3":
+  version: 1.1.11
+  resolution: "@radix-ui/react-collapsible@npm:1.1.11"
+  dependencies:
+    "@radix-ui/primitive": "npm:1.1.2"
+    "@radix-ui/react-compose-refs": "npm:1.1.2"
+    "@radix-ui/react-context": "npm:1.1.2"
+    "@radix-ui/react-id": "npm:1.1.1"
+    "@radix-ui/react-presence": "npm:1.1.4"
+    "@radix-ui/react-primitive": "npm:2.1.3"
+    "@radix-ui/react-use-controllable-state": "npm:1.2.2"
+    "@radix-ui/react-use-layout-effect": "npm:1.1.1"
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10/41b0026a2b3ccf774e74ff43ea33160ac03e557f960fca8767e5836043d32a360c9a11384cb7a8d771281423e8dffca72a94da60a7bc90373ab768e674209da7
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-collection@npm:1.0.3":
+  version: 1.0.3
+  resolution: "@radix-ui/react-collection@npm:1.0.3"
+  dependencies:
+    "@babel/runtime": "npm:^7.13.10"
+    "@radix-ui/react-compose-refs": "npm:1.0.1"
+    "@radix-ui/react-context": "npm:1.0.1"
+    "@radix-ui/react-primitive": "npm:1.0.3"
+    "@radix-ui/react-slot": "npm:1.0.2"
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+    react-dom: ^16.8 || ^17.0 || ^18.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10/2ac740ab746f411942dc95100f1eb60b9a3670960a805e266533fa1bc7dec31a6dabddd746ab788ebd5a9c22b468e38922f39d30447925515f8e44f0a3b2e56c
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-collection@npm:1.1.7":
+  version: 1.1.7
+  resolution: "@radix-ui/react-collection@npm:1.1.7"
   dependencies:
-    "@material/chips": "npm:^14.0.0"
-    "@rmwc/base": "npm:14.3.5"
-    "@rmwc/icon": "npm:14.3.5"
-    "@rmwc/ripple": "npm:14.3.5"
-    "@rmwc/types": "npm:14.3.5"
+    "@radix-ui/react-compose-refs": "npm:1.1.2"
+    "@radix-ui/react-context": "npm:1.1.2"
+    "@radix-ui/react-primitive": "npm:2.1.3"
+    "@radix-ui/react-slot": "npm:1.2.3"
   peerDependencies:
-    react: ">=16.8.x"
-    react-dom: ">=16.8.x"
-  checksum: 10/86ce598715fda5872d872b0bd18871ba7b8277738274537abd8d658f646d136fe5372a6499bf6cfbbd6581d43b963a46ec0757296d83dc6b420f8cbfc01dd0ec
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10/cd53e2a2be82be7bc4014164cac0b42948401a203e5d0294d3947a5193f1d56bd23eb60e878a98dba50d08283254e79c3b873de5f935276b849686a868d51dd5
   languageName: node
   linkType: hard
 
-"@rmwc/data-table@npm:14.3.5":
-  version: 14.3.5
-  resolution: "@rmwc/data-table@npm:14.3.5"
+"@radix-ui/react-compose-refs@npm:1.0.1":
+  version: 1.0.1
+  resolution: "@radix-ui/react-compose-refs@npm:1.0.1"
   dependencies:
-    "@material/data-table": "npm:^14.0.0"
-    "@rmwc/base": "npm:14.3.5"
-    "@rmwc/checkbox": "npm:14.3.5"
-    "@rmwc/icon": "npm:14.3.5"
-    "@rmwc/select": "npm:14.3.5"
-    "@rmwc/switch": "npm:14.3.5"
-    "@rmwc/types": "npm:14.3.5"
+    "@babel/runtime": "npm:^7.13.10"
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10/2b9a613b6db5bff8865588b6bf4065f73021b3d16c0a90b2d4c23deceeb63612f1f15de188227ebdc5f88222cab031be617a9dd025874c0487b303be3e5cc2a8
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-compose-refs@npm:1.1.2, @radix-ui/react-compose-refs@npm:^1.1.1":
+  version: 1.1.2
+  resolution: "@radix-ui/react-compose-refs@npm:1.1.2"
   peerDependencies:
-    react: ">=16.8.x"
-    react-dom: ">=16.8.x"
-  checksum: 10/9fd94adf6ad275f155383a9d9ccc36236b3149becff0b95ed89ff63f573bcf65322548424ac27e6455e10d475312a3028e7251a4cf3b975c548b4f2c8a9e0fe0
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10/9a91f0213014ffa40c5b8aae4debb993be5654217e504e35aa7422887eb2d114486d37e53c482d0fffb00cd44f51b5269fcdf397b280c71666fa11b7f32f165d
   languageName: node
   linkType: hard
 
-"@rmwc/dialog@npm:14.3.5":
-  version: 14.3.5
-  resolution: "@rmwc/dialog@npm:14.3.5"
+"@radix-ui/react-context@npm:1.0.1":
+  version: 1.0.1
+  resolution: "@radix-ui/react-context@npm:1.0.1"
   dependencies:
-    "@material/dialog": "npm:^14.0.0"
-    "@rmwc/base": "npm:14.3.5"
-    "@rmwc/button": "npm:14.3.5"
-    "@rmwc/textfield": "npm:14.3.5"
-    "@rmwc/types": "npm:14.3.5"
+    "@babel/runtime": "npm:^7.13.10"
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10/a02187a3bae3a0f1be5fab5ad19c1ef06ceff1028d957e4d9994f0186f594a9c3d93ee34bacb86d1fa8eb274493362944398e1c17054d12cb3b75384f9ae564b
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-context@npm:1.1.2":
+  version: 1.1.2
+  resolution: "@radix-ui/react-context@npm:1.1.2"
   peerDependencies:
-    react: ">=16.8.x"
-    react-dom: ">=16.8.x"
-  checksum: 10/c2c178025f15c46277f13e02fa1719976350aada6d61cc7bb9c9e3daf830c65e986f2d6f067fae9987616352982495dd5076e23034d0ffe6c4cd298dcbe5fc65
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10/156088367de42afa3c7e3acf5f0ba7cad6b359f3d17485585e80c2418434a6ed7cac2602eb73bca265d0091a1ad380f9405c069f103983e53497097ff35ba8f2
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-dialog@npm:^1.1.6":
+  version: 1.1.14
+  resolution: "@radix-ui/react-dialog@npm:1.1.14"
+  dependencies:
+    "@radix-ui/primitive": "npm:1.1.2"
+    "@radix-ui/react-compose-refs": "npm:1.1.2"
+    "@radix-ui/react-context": "npm:1.1.2"
+    "@radix-ui/react-dismissable-layer": "npm:1.1.10"
+    "@radix-ui/react-focus-guards": "npm:1.1.2"
+    "@radix-ui/react-focus-scope": "npm:1.1.7"
+    "@radix-ui/react-id": "npm:1.1.1"
+    "@radix-ui/react-portal": "npm:1.1.9"
+    "@radix-ui/react-presence": "npm:1.1.4"
+    "@radix-ui/react-primitive": "npm:2.1.3"
+    "@radix-ui/react-slot": "npm:1.2.3"
+    "@radix-ui/react-use-controllable-state": "npm:1.2.2"
+    aria-hidden: "npm:^1.2.4"
+    react-remove-scroll: "npm:^2.6.3"
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10/b87f8a4cec795cb7f956eec669c9452ac33a3c1a77b2872193b0feb231e10c00640bc734ba4209ac1f6bbf29d2e619828834fd208179619a8e1317ff87cb6e71
   languageName: node
   linkType: hard
 
-"@rmwc/drawer@npm:14.3.5":
-  version: 14.3.5
-  resolution: "@rmwc/drawer@npm:14.3.5"
+"@radix-ui/react-direction@npm:1.0.1":
+  version: 1.0.1
+  resolution: "@radix-ui/react-direction@npm:1.0.1"
   dependencies:
-    "@material/drawer": "npm:^14.0.0"
-    "@rmwc/base": "npm:14.3.5"
-    "@rmwc/types": "npm:14.3.5"
+    "@babel/runtime": "npm:^7.13.10"
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10/5336a8b0d4f1cde585d5c2b4448af7b3d948bb63a1aadb37c77771b0e5902dc6266e409cf35fd0edaca7f33e26424be19e64fb8f9d7f7be2d6f1714ea2764210
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-direction@npm:1.1.1":
+  version: 1.1.1
+  resolution: "@radix-ui/react-direction@npm:1.1.1"
   peerDependencies:
-    react: ">=16.8.x"
-    react-dom: ">=16.8.x"
-  checksum: 10/b6cb000e8c1819121ee05038f16198c7df4f1f79a6bee48d78393c9bb7240de5636b47472b4c84d45b64186db0c656e03674dff28f4745cd0c8c8ff4ae86a5cc
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10/8cc330285f1d06829568042ca9aabd3295be4690ae93683033fc8632b5c4dfc60f5c1312f6e2cae27c196189c719de3cfbcf792ff74800f9ccae0ab4abc1bc92
   languageName: node
   linkType: hard
 
-"@rmwc/elevation@npm:14.3.5":
-  version: 14.3.5
-  resolution: "@rmwc/elevation@npm:14.3.5"
+"@radix-ui/react-dismissable-layer@npm:1.0.4":
+  version: 1.0.4
+  resolution: "@radix-ui/react-dismissable-layer@npm:1.0.4"
+  dependencies:
+    "@babel/runtime": "npm:^7.13.10"
+    "@radix-ui/primitive": "npm:1.0.1"
+    "@radix-ui/react-compose-refs": "npm:1.0.1"
+    "@radix-ui/react-primitive": "npm:1.0.3"
+    "@radix-ui/react-use-callback-ref": "npm:1.0.1"
+    "@radix-ui/react-use-escape-keydown": "npm:1.0.3"
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+    react-dom: ^16.8 || ^17.0 || ^18.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10/bcc14f0704fdc19430a2b922106a278e64401decffd6e47f427aa5de2d63367ba3e848b012c464a6b39a6e057060e41ad16964385941735a329e319cea46711a
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-dismissable-layer@npm:1.1.10":
+  version: 1.1.10
+  resolution: "@radix-ui/react-dismissable-layer@npm:1.1.10"
+  dependencies:
+    "@radix-ui/primitive": "npm:1.1.2"
+    "@radix-ui/react-compose-refs": "npm:1.1.2"
+    "@radix-ui/react-primitive": "npm:2.1.3"
+    "@radix-ui/react-use-callback-ref": "npm:1.1.1"
+    "@radix-ui/react-use-escape-keydown": "npm:1.1.1"
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10/e08733ee345521a09100f922191302960d87a723d3bebb804f5659ff37f2fae57e335b2debad5ac17cb929be6b1fa8bc092c016723665ea8c90f7cf396c92d3b
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-dropdown-menu@npm:^2.1.6":
+  version: 2.1.15
+  resolution: "@radix-ui/react-dropdown-menu@npm:2.1.15"
   dependencies:
-    "@material/elevation": "npm:^14.0.0"
-    "@rmwc/base": "npm:14.3.5"
-    "@rmwc/types": "npm:14.3.5"
+    "@radix-ui/primitive": "npm:1.1.2"
+    "@radix-ui/react-compose-refs": "npm:1.1.2"
+    "@radix-ui/react-context": "npm:1.1.2"
+    "@radix-ui/react-id": "npm:1.1.1"
+    "@radix-ui/react-menu": "npm:2.1.15"
+    "@radix-ui/react-primitive": "npm:2.1.3"
+    "@radix-ui/react-use-controllable-state": "npm:1.2.2"
   peerDependencies:
-    react: ">=16.8.x"
-    react-dom: ">=16.8.x"
-  checksum: 10/eea2b191b800ba76f00a3b270bee5fd721add5b7993102183b3e3da4be11c87912b65aee0e671693de51678ecea6620d941a70d8792ef77f3f5d976d3a3285b4
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10/1300aa871dec358ddf42dfba48b59f25963d9aa7584726e71ba8b676b08d443d2933ec95c6112e1bb0cc60e79c06700cc83e1dad3f2762f8779e8e89ce1eddad
   languageName: node
   linkType: hard
 
-"@rmwc/fab@npm:14.3.5":
-  version: 14.3.5
-  resolution: "@rmwc/fab@npm:14.3.5"
+"@radix-ui/react-focus-guards@npm:1.0.1":
+  version: 1.0.1
+  resolution: "@radix-ui/react-focus-guards@npm:1.0.1"
   dependencies:
-    "@material/fab": "npm:^14.0.0"
-    "@rmwc/base": "npm:14.3.5"
-    "@rmwc/icon": "npm:14.3.5"
-    "@rmwc/provider": "npm:14.3.5"
-    "@rmwc/ripple": "npm:14.3.5"
-    "@rmwc/types": "npm:14.3.5"
+    "@babel/runtime": "npm:^7.13.10"
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10/1f8ca8f83b884b3612788d0742f3f054e327856d90a39841a47897dbed95e114ee512362ae314177de226d05310047cabbf66b686ae86ad1b65b6b295be24ef7
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-focus-guards@npm:1.1.2":
+  version: 1.1.2
+  resolution: "@radix-ui/react-focus-guards@npm:1.1.2"
   peerDependencies:
-    react: ">=16.8.x"
-    react-dom: ">=16.8.x"
-  checksum: 10/cd89044cc0830c0a7532f81f65d58aa3561ea5c7a85e00338ea5cda75cd50d7042d1a57f36ef7952429fd82095dd95b02d7f970010ea58d5efbe3e89d3a5435e
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10/618658e2b98575198b94ccfdd27f41beb37f83721c9a04617e848afbc47461124ae008d703d713b9644771d96d4852e49de322cf4be3b5f10a4f94d200db5248
   languageName: node
   linkType: hard
 
-"@rmwc/floating-label@npm:14.3.5":
-  version: 14.3.5
-  resolution: "@rmwc/floating-label@npm:14.3.5"
+"@radix-ui/react-focus-scope@npm:1.0.3":
+  version: 1.0.3
+  resolution: "@radix-ui/react-focus-scope@npm:1.0.3"
   dependencies:
-    "@material/floating-label": "npm:^14.0.0"
-    "@rmwc/base": "npm:14.3.5"
-    "@rmwc/types": "npm:14.3.5"
+    "@babel/runtime": "npm:^7.13.10"
+    "@radix-ui/react-compose-refs": "npm:1.0.1"
+    "@radix-ui/react-primitive": "npm:1.0.3"
+    "@radix-ui/react-use-callback-ref": "npm:1.0.1"
   peerDependencies:
-    react: ">=16.8.x"
-    react-dom: ">=16.8.x"
-  checksum: 10/3cece2936fc4af2fa69c49a67e93d515d8a31a253d29a68ae6ea0af4b24955e7c568dbcc7d8f1c683f1dcb1c5c4c30b31f1635907d3f19fd816af59b15037cfb
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+    react-dom: ^16.8 || ^17.0 || ^18.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10/d62631cc06a2f37d483d106f3732ffc00831498fc2306df51c675d7cdb9727169512a1ca43ce06d1bfd578e8d8d67a80858c7531579bacaf6079d3aaf0ca8663
   languageName: node
   linkType: hard
 
-"@rmwc/formfield@npm:14.3.5":
-  version: 14.3.5
-  resolution: "@rmwc/formfield@npm:14.3.5"
+"@radix-ui/react-focus-scope@npm:1.1.7":
+  version: 1.1.7
+  resolution: "@radix-ui/react-focus-scope@npm:1.1.7"
   dependencies:
-    "@material/form-field": "npm:^14.0.0"
-    "@rmwc/base": "npm:14.3.5"
-    "@rmwc/types": "npm:14.3.5"
+    "@radix-ui/react-compose-refs": "npm:1.1.2"
+    "@radix-ui/react-primitive": "npm:2.1.3"
+    "@radix-ui/react-use-callback-ref": "npm:1.1.1"
   peerDependencies:
-    react: ">=16.8.x"
-    react-dom: ">=16.8.x"
-  checksum: 10/7b89f657bfc0c8a44f4c75dbbb462e82755a346f828d0292c36abf6c670916cb3e9245d6eb9241d02857756ff8934225c82bc281c5877b9f5c58a6a42c8666ce
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10/2a7cd00e39e01756999ebf0bdb3401d6a8efa489a7b19e6b629b40bad3022b7b1f616555ccb4b0505bc0ba53e13a1fb51be905db138b16ec39c4fe319fe701d3
   languageName: node
   linkType: hard
 
-"@rmwc/grid@npm:14.3.5":
-  version: 14.3.5
-  resolution: "@rmwc/grid@npm:14.3.5"
+"@radix-ui/react-id@npm:1.0.1":
+  version: 1.0.1
+  resolution: "@radix-ui/react-id@npm:1.0.1"
   dependencies:
-    "@material/layout-grid": "npm:^14.0.0"
-    "@rmwc/base": "npm:14.3.5"
-    "@rmwc/types": "npm:14.3.5"
+    "@babel/runtime": "npm:^7.13.10"
+    "@radix-ui/react-use-layout-effect": "npm:1.0.1"
   peerDependencies:
-    react: ">=16.8.x"
-    react-dom: ">=16.8.x"
-  checksum: 10/6466a9bb4d8b533ae09df4b320f7bc6be7c6e9274a11a47a08174b9e7cdbe6e9669b513d292b55391fe387609b9839a5bae36d9659a660f9be989461c677e65a
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10/446a453d799cc790dd2a1583ff8328da88271bff64530b5a17c102fa7fb35eece3cf8985359d416f65e330cd81aa7b8fe984ea125fc4f4eaf4b3801d698e49fe
   languageName: node
   linkType: hard
 
-"@rmwc/icon-button@npm:14.3.5":
-  version: 14.3.5
-  resolution: "@rmwc/icon-button@npm:14.3.5"
+"@radix-ui/react-id@npm:1.1.1, @radix-ui/react-id@npm:^1.1.0":
+  version: 1.1.1
+  resolution: "@radix-ui/react-id@npm:1.1.1"
   dependencies:
-    "@material/icon-button": "npm:^14.0.0"
-    "@rmwc/base": "npm:14.3.5"
-    "@rmwc/icon": "npm:14.3.5"
-    "@rmwc/ripple": "npm:14.3.5"
-    "@rmwc/types": "npm:14.3.5"
+    "@radix-ui/react-use-layout-effect": "npm:1.1.1"
   peerDependencies:
-    react: ">=16.8.x"
-    react-dom: ">=16.8.x"
-  checksum: 10/6eb9e2e1c6dd56c0c79802df1d5aa554cef8c2fecbb39dad373975faa1f6872efab2c015f48aeb4f3c32d42c1a82d818bf7b8ce1a589e38ce883e1d02e59fe10
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10/8d68e200778eb3038906870fc869b3d881f4a46715fb20cddd9c76cba42fdaaa4810a3365b6ec2daf0f185b9201fc99d009167f59c7921bc3a139722c2e976db
   languageName: node
   linkType: hard
 
-"@rmwc/icon@npm:14.3.5":
-  version: 14.3.5
-  resolution: "@rmwc/icon@npm:14.3.5"
+"@radix-ui/react-label@npm:^2.1.2":
+  version: 2.1.7
+  resolution: "@radix-ui/react-label@npm:2.1.7"
   dependencies:
-    "@rmwc/base": "npm:14.3.5"
-    "@rmwc/provider": "npm:14.3.5"
-    "@rmwc/types": "npm:14.3.5"
+    "@radix-ui/react-primitive": "npm:2.1.3"
   peerDependencies:
-    react: ">=16.8.x"
-    react-dom: ">=16.8.x"
-  checksum: 10/3ad0ae335d30075103c937674f2abee07bd20c6676213f29746d543847ac1fd7eafb6e3cd589ee2d5af0164330d3e5c567c449920c045db42b7e3492735386e2
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10/6fe47ff695ac127a87a3ee77489fb345a89515edc8df4b2b290c801a9ae14ad934cc64ddad7638cddb71b064ff898bd1c2ac88c16dd1b8236a0939d7fea95e3b
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-menu@npm:2.1.15":
+  version: 2.1.15
+  resolution: "@radix-ui/react-menu@npm:2.1.15"
+  dependencies:
+    "@radix-ui/primitive": "npm:1.1.2"
+    "@radix-ui/react-collection": "npm:1.1.7"
+    "@radix-ui/react-compose-refs": "npm:1.1.2"
+    "@radix-ui/react-context": "npm:1.1.2"
+    "@radix-ui/react-direction": "npm:1.1.1"
+    "@radix-ui/react-dismissable-layer": "npm:1.1.10"
+    "@radix-ui/react-focus-guards": "npm:1.1.2"
+    "@radix-ui/react-focus-scope": "npm:1.1.7"
+    "@radix-ui/react-id": "npm:1.1.1"
+    "@radix-ui/react-popper": "npm:1.2.7"
+    "@radix-ui/react-portal": "npm:1.1.9"
+    "@radix-ui/react-presence": "npm:1.1.4"
+    "@radix-ui/react-primitive": "npm:2.1.3"
+    "@radix-ui/react-roving-focus": "npm:1.1.10"
+    "@radix-ui/react-slot": "npm:1.2.3"
+    "@radix-ui/react-use-callback-ref": "npm:1.1.1"
+    aria-hidden: "npm:^1.2.4"
+    react-remove-scroll: "npm:^2.6.3"
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10/7876c0892b3327f03685b564ae13e058627546346d60b5ee10559dea6a1c514660f7b6b4cffc9253b59de97dffda0512a99c5181446e0f4f5ef33b67dda03072
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-popover@npm:^1.1.6":
+  version: 1.1.14
+  resolution: "@radix-ui/react-popover@npm:1.1.14"
+  dependencies:
+    "@radix-ui/primitive": "npm:1.1.2"
+    "@radix-ui/react-compose-refs": "npm:1.1.2"
+    "@radix-ui/react-context": "npm:1.1.2"
+    "@radix-ui/react-dismissable-layer": "npm:1.1.10"
+    "@radix-ui/react-focus-guards": "npm:1.1.2"
+    "@radix-ui/react-focus-scope": "npm:1.1.7"
+    "@radix-ui/react-id": "npm:1.1.1"
+    "@radix-ui/react-popper": "npm:1.2.7"
+    "@radix-ui/react-portal": "npm:1.1.9"
+    "@radix-ui/react-presence": "npm:1.1.4"
+    "@radix-ui/react-primitive": "npm:2.1.3"
+    "@radix-ui/react-slot": "npm:1.2.3"
+    "@radix-ui/react-use-controllable-state": "npm:1.2.2"
+    aria-hidden: "npm:^1.2.4"
+    react-remove-scroll: "npm:^2.6.3"
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10/c2d3945bc9d9b8629c5f669b61744d4fef2d789ef5143d76853cc93136b13c6c03308d352810a8ca9f27e829007f7459f8b91780b226748eee7d2a7cd2eca055
   languageName: node
   linkType: hard
 
-"@rmwc/line-ripple@npm:14.3.5":
-  version: 14.3.5
-  resolution: "@rmwc/line-ripple@npm:14.3.5"
+"@radix-ui/react-popper@npm:1.1.2":
+  version: 1.1.2
+  resolution: "@radix-ui/react-popper@npm:1.1.2"
+  dependencies:
+    "@babel/runtime": "npm:^7.13.10"
+    "@floating-ui/react-dom": "npm:^2.0.0"
+    "@radix-ui/react-arrow": "npm:1.0.3"
+    "@radix-ui/react-compose-refs": "npm:1.0.1"
+    "@radix-ui/react-context": "npm:1.0.1"
+    "@radix-ui/react-primitive": "npm:1.0.3"
+    "@radix-ui/react-use-callback-ref": "npm:1.0.1"
+    "@radix-ui/react-use-layout-effect": "npm:1.0.1"
+    "@radix-ui/react-use-rect": "npm:1.0.1"
+    "@radix-ui/react-use-size": "npm:1.0.1"
+    "@radix-ui/rect": "npm:1.0.1"
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+    react-dom: ^16.8 || ^17.0 || ^18.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10/be32677e846ef93e8cbf219550e55b99583cb927b572a9ee466b0c242156d42ddc70f43135e22acffe48bba4cd3fe28888cc3f929947e078d8732bee958df4c4
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-popper@npm:1.2.7":
+  version: 1.2.7
+  resolution: "@radix-ui/react-popper@npm:1.2.7"
+  dependencies:
+    "@floating-ui/react-dom": "npm:^2.0.0"
+    "@radix-ui/react-arrow": "npm:1.1.7"
+    "@radix-ui/react-compose-refs": "npm:1.1.2"
+    "@radix-ui/react-context": "npm:1.1.2"
+    "@radix-ui/react-primitive": "npm:2.1.3"
+    "@radix-ui/react-use-callback-ref": "npm:1.1.1"
+    "@radix-ui/react-use-layout-effect": "npm:1.1.1"
+    "@radix-ui/react-use-rect": "npm:1.1.1"
+    "@radix-ui/react-use-size": "npm:1.1.1"
+    "@radix-ui/rect": "npm:1.1.1"
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10/1d1bcb679f914cd01649fdd5106b3a845d9f68cf0660c209e29baf95e92f9ac8a97e5bb8b56911b11b0291db8d4b6c8adc4040af23e0149e4235e669f5f4703b
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-portal@npm:1.0.3":
+  version: 1.0.3
+  resolution: "@radix-ui/react-portal@npm:1.0.3"
   dependencies:
-    "@material/line-ripple": "npm:^14.0.0"
-    "@rmwc/base": "npm:14.3.5"
-    "@rmwc/types": "npm:14.3.5"
+    "@babel/runtime": "npm:^7.13.10"
+    "@radix-ui/react-primitive": "npm:1.0.3"
   peerDependencies:
-    react: ">=16.8.x"
-    react-dom: ">=16.8.x"
-  checksum: 10/468fe957ca9cf97e803035238f9f5815ab248442a570e0cf34f31aa725d808647b2bff13933dacbc453d9142b5a50dcd9ddaf31cd56e1005c24389877d695611
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+    react-dom: ^16.8 || ^17.0 || ^18.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10/d352bcd6ad65eb43c9e0d72d0755c2aae85e03fb287770866262be3a2d5302b2885aee3cd99f2bbf62ecd14fcb1460703f1dcdc40351f77ad887b931c6f0012a
   languageName: node
   linkType: hard
 
-"@rmwc/list@npm:14.3.5":
-  version: 14.3.5
-  resolution: "@rmwc/list@npm:14.3.5"
+"@radix-ui/react-portal@npm:1.1.9":
+  version: 1.1.9
+  resolution: "@radix-ui/react-portal@npm:1.1.9"
   dependencies:
-    "@material/list": "npm:^14.0.0"
-    "@rmwc/base": "npm:14.3.5"
-    "@rmwc/icon": "npm:14.3.5"
-    "@rmwc/provider": "npm:14.3.5"
-    "@rmwc/ripple": "npm:14.3.5"
-    "@rmwc/types": "npm:14.3.5"
+    "@radix-ui/react-primitive": "npm:2.1.3"
+    "@radix-ui/react-use-layout-effect": "npm:1.1.1"
   peerDependencies:
-    react: ">=16.8.x"
-    react-dom: ">=16.8.x"
-  checksum: 10/5912affeb0a2d39aedf93f9e158427088c310c8237591ffa50abd23442d02ae4d210fcbe96d38701901f7b903a34140b966e08ae0ed3073050e9ce85129a9b1f
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10/bd6be39bf021d5c917e2474ecba411e2625171f7ef96862b9af04bbd68833bb3662a7f1fbdeb5a7a237111b10e811e76d2cd03e957dadd6e668ef16541bfbd68
   languageName: node
   linkType: hard
 
-"@rmwc/menu@npm:14.3.5":
-  version: 14.3.5
-  resolution: "@rmwc/menu@npm:14.3.5"
+"@radix-ui/react-presence@npm:1.1.4":
+  version: 1.1.4
+  resolution: "@radix-ui/react-presence@npm:1.1.4"
   dependencies:
-    "@material/animation": "npm:^14.0.0"
-    "@material/menu": "npm:^14.0.0"
-    "@material/menu-surface": "npm:^14.0.0"
-    "@rmwc/base": "npm:14.3.5"
-    "@rmwc/list": "npm:14.3.5"
-    "@rmwc/types": "npm:14.3.5"
+    "@radix-ui/react-compose-refs": "npm:1.1.2"
+    "@radix-ui/react-use-layout-effect": "npm:1.1.1"
   peerDependencies:
-    react: ">=16.8.x"
-    react-dom: ">=16.8.x"
-  checksum: 10/48199b23eef5b1a7a7c80aaf9260bbd88df6d906bb96abead36c44b1c46c353fb51c4a19b5a95268ecb01e0f88cc7e04ac165974cfa9ec82e9dd4746d87b181e
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10/ba01f385f6beedba7bf50ffd4aca8091554a67aee2b7252605876136155ceb2fcf1b627dccaf2e49032231eda271fe0e8915040729da9d1f95d08b854d815305
   languageName: node
   linkType: hard
 
-"@rmwc/notched-outline@npm:14.3.5":
-  version: 14.3.5
-  resolution: "@rmwc/notched-outline@npm:14.3.5"
+"@radix-ui/react-primitive@npm:1.0.3":
+  version: 1.0.3
+  resolution: "@radix-ui/react-primitive@npm:1.0.3"
   dependencies:
-    "@material/notched-outline": "npm:^14.0.0"
-    "@rmwc/base": "npm:14.3.5"
-    "@rmwc/types": "npm:14.3.5"
+    "@babel/runtime": "npm:^7.13.10"
+    "@radix-ui/react-slot": "npm:1.0.2"
   peerDependencies:
-    react: ">=16.8.x"
-    react-dom: ">=16.8.x"
-  checksum: 10/47d1d5636f3da309666a3d112595cecb35701c8b63cba792e1e4c3c2e50389b7eb82c4e3fc4388c604c760ba54450c43f9b1f18f39076a88131c47801b536ea6
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+    react-dom: ^16.8 || ^17.0 || ^18.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10/bedb934ac07c710dc5550a7bfc7065d47e099d958cde1d37e4b1947ae5451f1b7e6f8ff5965e242578bf2c619065e6038c3a3aa779e5eafa7da3e3dbc685799f
   languageName: node
   linkType: hard
 
-"@rmwc/provider@npm:14.3.5":
-  version: 14.3.5
-  resolution: "@rmwc/provider@npm:14.3.5"
+"@radix-ui/react-primitive@npm:2.1.3, @radix-ui/react-primitive@npm:^2.0.2":
+  version: 2.1.3
+  resolution: "@radix-ui/react-primitive@npm:2.1.3"
   dependencies:
-    "@rmwc/base": "npm:14.3.5"
-    "@rmwc/types": "npm:14.3.5"
+    "@radix-ui/react-slot": "npm:1.2.3"
   peerDependencies:
-    react: ">=16.8.x"
-    react-dom: ">=16.8.x"
-  checksum: 10/6a154b447ffc1322efc7405b2cdc3dbffb214d75af72c59eb923751543a23c5d375e231ecc3f3120354ded810214e258d3a73a2fc8f002ea736b00734baff9f9
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10/1dbbf932a3527f4e62f210bb72944eff605c3e38c8d3275ed5a5c570c02820ab156169756a65ad9a638d2089a828a04a7903795377384e98c87d0ca456303253
   languageName: node
   linkType: hard
 
-"@rmwc/radio@npm:14.3.5":
-  version: 14.3.5
-  resolution: "@rmwc/radio@npm:14.3.5"
+"@radix-ui/react-progress@npm:^1.1.7":
+  version: 1.1.7
+  resolution: "@radix-ui/react-progress@npm:1.1.7"
   dependencies:
-    "@material/radio": "npm:^14.0.0"
-    "@rmwc/base": "npm:14.3.5"
-    "@rmwc/formfield": "npm:14.3.5"
-    "@rmwc/ripple": "npm:14.3.5"
-    "@rmwc/toggleable": "npm:14.3.5"
-    "@rmwc/types": "npm:14.3.5"
+    "@radix-ui/react-context": "npm:1.1.2"
+    "@radix-ui/react-primitive": "npm:2.1.3"
   peerDependencies:
-    react: ">=16.8.x"
-    react-dom: ">=16.8.x"
-  checksum: 10/b5957b66e93bc07509acb9e3be72570383de779515482f5938d060700b8e16d0887831a1d7a472e036e5f0d842a7617414c48cab15c02848be97ce264ffb4c86
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10/ecdcebd586c17150351d22b9441928c07d62d7dd99688fc3ef8f04798e8a70ae436d2c6e7b30d0f266f7974f895c46bb347846ecf2617ab4196e937fe4d50a0a
   languageName: node
   linkType: hard
 
-"@rmwc/ripple@npm:14.3.5":
-  version: 14.3.5
-  resolution: "@rmwc/ripple@npm:14.3.5"
+"@radix-ui/react-radio-group@npm:^1.2.3":
+  version: 1.3.7
+  resolution: "@radix-ui/react-radio-group@npm:1.3.7"
   dependencies:
-    "@material/ripple": "npm:^14.0.0"
-    "@rmwc/base": "npm:14.3.5"
-    "@rmwc/provider": "npm:14.3.5"
-    "@rmwc/types": "npm:14.3.5"
+    "@radix-ui/primitive": "npm:1.1.2"
+    "@radix-ui/react-compose-refs": "npm:1.1.2"
+    "@radix-ui/react-context": "npm:1.1.2"
+    "@radix-ui/react-direction": "npm:1.1.1"
+    "@radix-ui/react-presence": "npm:1.1.4"
+    "@radix-ui/react-primitive": "npm:2.1.3"
+    "@radix-ui/react-roving-focus": "npm:1.1.10"
+    "@radix-ui/react-use-controllable-state": "npm:1.2.2"
+    "@radix-ui/react-use-previous": "npm:1.1.1"
+    "@radix-ui/react-use-size": "npm:1.1.1"
   peerDependencies:
-    react: ">=16.8.x"
-    react-dom: ">=16.8.x"
-  checksum: 10/648e07339ab19b1186ce986c02b63fd722749183b1499fe935e0070473f07b9c700da15fe4648257fc083b19a0d248a059f04f7c3b5081a5d542a37b40b06d12
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10/b1dfea8ff3046e838791a3b8bb0e67f60fe6c5ee94a7243985d0350c64fcfdb22b180f7fb125e1c53921048be9a29e3e084271731994ba80807e0c816b85ad26
   languageName: node
   linkType: hard
 
-"@rmwc/select@npm:14.3.5":
-  version: 14.3.5
-  resolution: "@rmwc/select@npm:14.3.5"
+"@radix-ui/react-roving-focus@npm:1.1.10":
+  version: 1.1.10
+  resolution: "@radix-ui/react-roving-focus@npm:1.1.10"
+  dependencies:
+    "@radix-ui/primitive": "npm:1.1.2"
+    "@radix-ui/react-collection": "npm:1.1.7"
+    "@radix-ui/react-compose-refs": "npm:1.1.2"
+    "@radix-ui/react-context": "npm:1.1.2"
+    "@radix-ui/react-direction": "npm:1.1.1"
+    "@radix-ui/react-id": "npm:1.1.1"
+    "@radix-ui/react-primitive": "npm:2.1.3"
+    "@radix-ui/react-use-callback-ref": "npm:1.1.1"
+    "@radix-ui/react-use-controllable-state": "npm:1.2.2"
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10/65241d84cb62d79115185df02f292a682dda08d920152ed5881a24cc656c60bbf97530af012b422619862dc0956ee301e4d0d65b0cb82e72a689135ac8afe5a8
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-select@npm:^1.2.2":
+  version: 1.2.2
+  resolution: "@radix-ui/react-select@npm:1.2.2"
+  dependencies:
+    "@babel/runtime": "npm:^7.13.10"
+    "@radix-ui/number": "npm:1.0.1"
+    "@radix-ui/primitive": "npm:1.0.1"
+    "@radix-ui/react-collection": "npm:1.0.3"
+    "@radix-ui/react-compose-refs": "npm:1.0.1"
+    "@radix-ui/react-context": "npm:1.0.1"
+    "@radix-ui/react-direction": "npm:1.0.1"
+    "@radix-ui/react-dismissable-layer": "npm:1.0.4"
+    "@radix-ui/react-focus-guards": "npm:1.0.1"
+    "@radix-ui/react-focus-scope": "npm:1.0.3"
+    "@radix-ui/react-id": "npm:1.0.1"
+    "@radix-ui/react-popper": "npm:1.1.2"
+    "@radix-ui/react-portal": "npm:1.0.3"
+    "@radix-ui/react-primitive": "npm:1.0.3"
+    "@radix-ui/react-slot": "npm:1.0.2"
+    "@radix-ui/react-use-callback-ref": "npm:1.0.1"
+    "@radix-ui/react-use-controllable-state": "npm:1.0.1"
+    "@radix-ui/react-use-layout-effect": "npm:1.0.1"
+    "@radix-ui/react-use-previous": "npm:1.0.1"
+    "@radix-ui/react-visually-hidden": "npm:1.0.3"
+    aria-hidden: "npm:^1.1.1"
+    react-remove-scroll: "npm:2.5.5"
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+    react-dom: ^16.8 || ^17.0 || ^18.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10/4d7b6d9d988f78764783a4b2fd6523457ff735436829e122dae824bdea4f2835ad0150dfc060517d6c29d953ef61ee12d7ce10cf160593e56967e528bf6f8ee5
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-select@npm:^2.1.6":
+  version: 2.2.5
+  resolution: "@radix-ui/react-select@npm:2.2.5"
+  dependencies:
+    "@radix-ui/number": "npm:1.1.1"
+    "@radix-ui/primitive": "npm:1.1.2"
+    "@radix-ui/react-collection": "npm:1.1.7"
+    "@radix-ui/react-compose-refs": "npm:1.1.2"
+    "@radix-ui/react-context": "npm:1.1.2"
+    "@radix-ui/react-direction": "npm:1.1.1"
+    "@radix-ui/react-dismissable-layer": "npm:1.1.10"
+    "@radix-ui/react-focus-guards": "npm:1.1.2"
+    "@radix-ui/react-focus-scope": "npm:1.1.7"
+    "@radix-ui/react-id": "npm:1.1.1"
+    "@radix-ui/react-popper": "npm:1.2.7"
+    "@radix-ui/react-portal": "npm:1.1.9"
+    "@radix-ui/react-primitive": "npm:2.1.3"
+    "@radix-ui/react-slot": "npm:1.2.3"
+    "@radix-ui/react-use-callback-ref": "npm:1.1.1"
+    "@radix-ui/react-use-controllable-state": "npm:1.2.2"
+    "@radix-ui/react-use-layout-effect": "npm:1.1.1"
+    "@radix-ui/react-use-previous": "npm:1.1.1"
+    "@radix-ui/react-visually-hidden": "npm:1.2.3"
+    aria-hidden: "npm:^1.2.4"
+    react-remove-scroll: "npm:^2.6.3"
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10/d78459b5bdbbf1aa81a6aed95758412e6870c3979aff992ce8251d3394ef7e3c596529cadc0dfe9e3048c1b28f954ce3ef4d08fd7a71fe5b999390d8eeb33a64
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-separator@npm:1.1.7, @radix-ui/react-separator@npm:^1.1.2":
+  version: 1.1.7
+  resolution: "@radix-ui/react-separator@npm:1.1.7"
   dependencies:
-    "@material/select": "npm:^14.0.0"
-    "@rmwc/base": "npm:14.3.5"
-    "@rmwc/floating-label": "npm:14.3.5"
-    "@rmwc/icon": "npm:14.3.5"
-    "@rmwc/line-ripple": "npm:14.3.5"
-    "@rmwc/list": "npm:14.3.5"
-    "@rmwc/menu": "npm:14.3.5"
-    "@rmwc/notched-outline": "npm:14.3.5"
-    "@rmwc/ripple": "npm:14.3.5"
-    "@rmwc/types": "npm:14.3.5"
+    "@radix-ui/react-primitive": "npm:2.1.3"
   peerDependencies:
-    react: ">=16.8.x"
-    react-dom: ">=16.8.x"
-  checksum: 10/3ddaee73fe9af77a42269a37b24963e45b1820221a7e56da8637b7efe372ed5bca9bc8d38c163467d603312207ac311d075b35a6af4435f0fe906330a18e5491
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10/c5c19b7991bf5395eb2b849145deeb9aa307d9fcf220380497992ff2a301753ab477d0329af51b6d500cd3c1d777edbd2504b544d9254542fb5f829ac5ddbcf3
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-slider@npm:^1.2.3":
+  version: 1.3.5
+  resolution: "@radix-ui/react-slider@npm:1.3.5"
+  dependencies:
+    "@radix-ui/number": "npm:1.1.1"
+    "@radix-ui/primitive": "npm:1.1.2"
+    "@radix-ui/react-collection": "npm:1.1.7"
+    "@radix-ui/react-compose-refs": "npm:1.1.2"
+    "@radix-ui/react-context": "npm:1.1.2"
+    "@radix-ui/react-direction": "npm:1.1.1"
+    "@radix-ui/react-primitive": "npm:2.1.3"
+    "@radix-ui/react-use-controllable-state": "npm:1.2.2"
+    "@radix-ui/react-use-layout-effect": "npm:1.1.1"
+    "@radix-ui/react-use-previous": "npm:1.1.1"
+    "@radix-ui/react-use-size": "npm:1.1.1"
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10/623ba303e739dd9e3d70d9046e40e120693ab1fbbb09469a1037e741df522037d03041f3b2bc55ec05653ce3477cdbd9bd605dc9a122a3ebb563673e585c45bb
   languageName: node
   linkType: hard
 
-"@rmwc/slider@npm:14.3.5":
-  version: 14.3.5
-  resolution: "@rmwc/slider@npm:14.3.5"
+"@radix-ui/react-slot@npm:1.0.2":
+  version: 1.0.2
+  resolution: "@radix-ui/react-slot@npm:1.0.2"
   dependencies:
-    "@material/slider": "npm:^14.0.0"
-    "@rmwc/base": "npm:14.3.5"
-    "@rmwc/types": "npm:14.3.5"
+    "@babel/runtime": "npm:^7.13.10"
+    "@radix-ui/react-compose-refs": "npm:1.0.1"
   peerDependencies:
-    react: ">=16.8.x"
-    react-dom: ">=16.8.x"
-  checksum: 10/d22f01f83a34736a149ed3f6334b0706dc5ff6b20190161db9ce3161950c8a9c26b225a51145b36695e89f55fc3076691c5ee55ff943f3531a80ed2069f804f3
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10/734866561e991438fbcf22af06e56b272ed6ee8f7b536489ee3bf2f736f8b53bf6bc14ebde94834aa0aceda854d018a0ce20bb171defffbaed1f566006cbb887
   languageName: node
   linkType: hard
 
-"@rmwc/snackbar@npm:14.3.5":
-  version: 14.3.5
-  resolution: "@rmwc/snackbar@npm:14.3.5"
+"@radix-ui/react-slot@npm:1.2.3, @radix-ui/react-slot@npm:^1.1.2":
+  version: 1.2.3
+  resolution: "@radix-ui/react-slot@npm:1.2.3"
   dependencies:
-    "@material/snackbar": "npm:^14.0.0"
-    "@rmwc/base": "npm:14.3.5"
-    "@rmwc/button": "npm:14.3.5"
-    "@rmwc/icon": "npm:14.3.5"
-    "@rmwc/icon-button": "npm:14.3.5"
-    "@rmwc/types": "npm:14.3.5"
+    "@radix-ui/react-compose-refs": "npm:1.1.2"
   peerDependencies:
-    react: ">=16.8.x"
-    react-dom: ">=16.8.x"
-  checksum: 10/c4517210d66aa58ce8670a2e72ad1f94dd28f023aa5d57c4fc43a20f1328258a6b556aca97fcae4a117343ed52655cd9690221219095701440c06eaa71864e25
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10/fe484c2741e31d9c20a8fb53c5790a73c0664e2bea35e27f4d484a90c42135fcfffe11a08abfcacb7a8ee2faf013471f0e856818f3ddac8ac51ceb8869e0fd08
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-switch@npm:^1.1.3":
+  version: 1.2.5
+  resolution: "@radix-ui/react-switch@npm:1.2.5"
+  dependencies:
+    "@radix-ui/primitive": "npm:1.1.2"
+    "@radix-ui/react-compose-refs": "npm:1.1.2"
+    "@radix-ui/react-context": "npm:1.1.2"
+    "@radix-ui/react-primitive": "npm:2.1.3"
+    "@radix-ui/react-use-controllable-state": "npm:1.2.2"
+    "@radix-ui/react-use-previous": "npm:1.1.1"
+    "@radix-ui/react-use-size": "npm:1.1.1"
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10/6b6482b76931bdbaa88b7af52be3d168415d35ebab110d94a14796929465f836ecfef6244f9412bfed12088a5183c7e0dbed53d134db21274c077c295952525b
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-tabs@npm:^1.1.3":
+  version: 1.1.12
+  resolution: "@radix-ui/react-tabs@npm:1.1.12"
+  dependencies:
+    "@radix-ui/primitive": "npm:1.1.2"
+    "@radix-ui/react-context": "npm:1.1.2"
+    "@radix-ui/react-direction": "npm:1.1.1"
+    "@radix-ui/react-id": "npm:1.1.1"
+    "@radix-ui/react-presence": "npm:1.1.4"
+    "@radix-ui/react-primitive": "npm:2.1.3"
+    "@radix-ui/react-roving-focus": "npm:1.1.10"
+    "@radix-ui/react-use-controllable-state": "npm:1.2.2"
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10/7c6ef386071558e50940d7625d25e221185c41f79b948b1fc9b5ca82e68a3511e6bdcf421d39cc297f0de9e37e3428b7e5097e915a7d6b627163be950c16aaee
   languageName: node
   linkType: hard
 
-"@rmwc/switch@npm:14.3.5":
-  version: 14.3.5
-  resolution: "@rmwc/switch@npm:14.3.5"
+"@radix-ui/react-toggle-group@npm:1.1.10":
+  version: 1.1.10
+  resolution: "@radix-ui/react-toggle-group@npm:1.1.10"
+  dependencies:
+    "@radix-ui/primitive": "npm:1.1.2"
+    "@radix-ui/react-context": "npm:1.1.2"
+    "@radix-ui/react-direction": "npm:1.1.1"
+    "@radix-ui/react-primitive": "npm:2.1.3"
+    "@radix-ui/react-roving-focus": "npm:1.1.10"
+    "@radix-ui/react-toggle": "npm:1.1.9"
+    "@radix-ui/react-use-controllable-state": "npm:1.2.2"
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10/c7282e97e2401855018d16a97af202d3a366786bdef81394ea47007df5e669181342fbe01a25307d45fb48cfb031cd3f9f6cd939bc1a447d78c10ccb02bd2458
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-toggle@npm:1.1.9":
+  version: 1.1.9
+  resolution: "@radix-ui/react-toggle@npm:1.1.9"
   dependencies:
-    "@material/switch": "npm:^14.0.0"
-    "@rmwc/base": "npm:14.3.5"
-    "@rmwc/formfield": "npm:14.3.5"
-    "@rmwc/ripple": "npm:14.3.5"
-    "@rmwc/toggleable": "npm:14.3.5"
-    "@rmwc/types": "npm:14.3.5"
+    "@radix-ui/primitive": "npm:1.1.2"
+    "@radix-ui/react-primitive": "npm:2.1.3"
+    "@radix-ui/react-use-controllable-state": "npm:1.2.2"
   peerDependencies:
-    react: ">=16.8.x"
-    react-dom: ">=16.8.x"
-  checksum: 10/11d87c5bec90636fa32a7c3f8a9c47919ccf767d95cdd70450323d57bd879fe987d7c734b4a1f8f979677d700ea593126b14a066fcaceffc321bc0eca70399d6
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10/844e44da16dea79c005629f96eba40423d6b76c23f4ccfc1a45ccb1afdf681d7434c103d217c0b80e00b809bbbc7b457cdcc1255c3424db3f3d818992995f17f
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-toolbar@npm:^1.0.4":
+  version: 1.1.10
+  resolution: "@radix-ui/react-toolbar@npm:1.1.10"
+  dependencies:
+    "@radix-ui/primitive": "npm:1.1.2"
+    "@radix-ui/react-context": "npm:1.1.2"
+    "@radix-ui/react-direction": "npm:1.1.1"
+    "@radix-ui/react-primitive": "npm:2.1.3"
+    "@radix-ui/react-roving-focus": "npm:1.1.10"
+    "@radix-ui/react-separator": "npm:1.1.7"
+    "@radix-ui/react-toggle-group": "npm:1.1.10"
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10/bdc328da18e5367ec34dde7d253e9d83e752defd8e5dd52a21907a195047efb1ae5d114fc6354cdbda1a1127e3375ca8e513dc7f7c08a5fe3fbbb7ff42e51349
   languageName: node
   linkType: hard
 
-"@rmwc/tabs@npm:14.3.5":
-  version: 14.3.5
-  resolution: "@rmwc/tabs@npm:14.3.5"
+"@radix-ui/react-tooltip@npm:^1.1.8":
+  version: 1.2.7
+  resolution: "@radix-ui/react-tooltip@npm:1.2.7"
+  dependencies:
+    "@radix-ui/primitive": "npm:1.1.2"
+    "@radix-ui/react-compose-refs": "npm:1.1.2"
+    "@radix-ui/react-context": "npm:1.1.2"
+    "@radix-ui/react-dismissable-layer": "npm:1.1.10"
+    "@radix-ui/react-id": "npm:1.1.1"
+    "@radix-ui/react-popper": "npm:1.2.7"
+    "@radix-ui/react-portal": "npm:1.1.9"
+    "@radix-ui/react-presence": "npm:1.1.4"
+    "@radix-ui/react-primitive": "npm:2.1.3"
+    "@radix-ui/react-slot": "npm:1.2.3"
+    "@radix-ui/react-use-controllable-state": "npm:1.2.2"
+    "@radix-ui/react-visually-hidden": "npm:1.2.3"
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10/c52f46592ee4f2239d87f41de5d9bc3e788095968da65e759f51a75de10401c76daa6a4ec034158f130da779e149989d2e01560793bc17ac79b09d575e30b0e7
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-use-callback-ref@npm:1.0.1":
+  version: 1.0.1
+  resolution: "@radix-ui/react-use-callback-ref@npm:1.0.1"
   dependencies:
-    "@material/tab": "npm:^14.0.0"
-    "@material/tab-bar": "npm:^14.0.0"
-    "@material/tab-indicator": "npm:^14.0.0"
-    "@material/tab-scroller": "npm:^14.0.0"
-    "@rmwc/base": "npm:14.3.5"
-    "@rmwc/icon": "npm:14.3.5"
-    "@rmwc/ripple": "npm:14.3.5"
-    "@rmwc/types": "npm:14.3.5"
+    "@babel/runtime": "npm:^7.13.10"
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10/b9fd39911c3644bbda14a84e4fca080682bef84212b8d8931fcaa2d2814465de242c4cfd8d7afb3020646bead9c5e539d478cea0a7031bee8a8a3bb164f3bc4c
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-use-callback-ref@npm:1.1.1":
+  version: 1.1.1
+  resolution: "@radix-ui/react-use-callback-ref@npm:1.1.1"
   peerDependencies:
-    react: ">=16.8.x"
-    react-dom: ">=16.8.x"
-  checksum: 10/858af186a8b3254232f1e62d60d6e347562650fe49cfcdae96fb02550526d2a04de6448572f6df0c26379c98b91030c6e517096707ce35b8eea5d460cae718f8
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10/cde8c40f1d4e79e6e71470218163a746858304bad03758ac84dc1f94247a046478e8e397518350c8d6609c84b7e78565441d7505bb3ed573afce82cfdcd19faf
   languageName: node
   linkType: hard
 
-"@rmwc/textfield@npm:14.3.5":
-  version: 14.3.5
-  resolution: "@rmwc/textfield@npm:14.3.5"
+"@radix-ui/react-use-controllable-state@npm:1.0.1":
+  version: 1.0.1
+  resolution: "@radix-ui/react-use-controllable-state@npm:1.0.1"
   dependencies:
-    "@material/textfield": "npm:^14.0.0"
-    "@rmwc/base": "npm:14.3.5"
-    "@rmwc/floating-label": "npm:14.3.5"
-    "@rmwc/icon": "npm:14.3.5"
-    "@rmwc/line-ripple": "npm:14.3.5"
-    "@rmwc/notched-outline": "npm:14.3.5"
-    "@rmwc/ripple": "npm:14.3.5"
-    "@rmwc/types": "npm:14.3.5"
+    "@babel/runtime": "npm:^7.13.10"
+    "@radix-ui/react-use-callback-ref": "npm:1.0.1"
   peerDependencies:
-    react: ">=16.8.x"
-    react-dom: ">=16.8.x"
-  checksum: 10/efc758612f8c1b160995a451860cf50a52c9761c931712be9696fa869bf3aac323ba460f531c77b14698273f48d19a0afb385c6831758b5311851ad58292700d
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10/dee2be1937d293c3a492cb6d279fc11495a8f19dc595cdbfe24b434e917302f9ac91db24e8cc5af9a065f3f209c3423115b5442e65a5be9fd1e9091338972be9
   languageName: node
   linkType: hard
 
-"@rmwc/toggleable@npm:14.3.5":
-  version: 14.3.5
-  resolution: "@rmwc/toggleable@npm:14.3.5"
+"@radix-ui/react-use-controllable-state@npm:1.2.2":
+  version: 1.2.2
+  resolution: "@radix-ui/react-use-controllable-state@npm:1.2.2"
   dependencies:
-    "@rmwc/base": "npm:14.3.5"
-    "@rmwc/formfield": "npm:14.3.5"
-    "@rmwc/types": "npm:14.3.5"
+    "@radix-ui/react-use-effect-event": "npm:0.0.2"
+    "@radix-ui/react-use-layout-effect": "npm:1.1.1"
   peerDependencies:
-    react: ">=16.8.x"
-    react-dom: ">=16.8.x"
-  checksum: 10/cb6a9be137f663e3b48781056440910142a27a539783a6d2707799c5798638a5be0cdfbeafd0bbef207764b31a5c722cf85343a0fb6d768e44d2f10afa698031
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10/a100bff3ddecb753dab17444147273c9f70046c5949712c52174b259622eaef12acbf7ebcf289bae4e714eb84d0a7317c1aa44064cd997f327d77b62bc732a7c
   languageName: node
   linkType: hard
 
-"@rmwc/top-app-bar@npm:14.3.5":
-  version: 14.3.5
-  resolution: "@rmwc/top-app-bar@npm:14.3.5"
+"@radix-ui/react-use-effect-event@npm:0.0.2":
+  version: 0.0.2
+  resolution: "@radix-ui/react-use-effect-event@npm:0.0.2"
   dependencies:
-    "@material/top-app-bar": "npm:^14.0.0"
-    "@rmwc/base": "npm:14.3.5"
-    "@rmwc/icon-button": "npm:14.3.5"
-    "@rmwc/ripple": "npm:14.3.5"
-    "@rmwc/types": "npm:14.3.5"
+    "@radix-ui/react-use-layout-effect": "npm:1.1.1"
   peerDependencies:
-    react: ">=16.8.x"
-    react-dom: ">=16.8.x"
-  checksum: 10/220bc172f8146a9bbe389917c07ae3426d392a32a4d69758b6108641de9e3d65f3479f497d597a2b26f170ee5ce291c98f9a9dbecfb4606229c50e58e2c64cba
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10/5a1950a30a399ea7e4b98154da9f536737a610de80189b7aacd4f064a89a3cd0d2a48571d527435227252e72e872bdb544ff6ffcfbdd02de2efd011be4aaa902
   languageName: node
   linkType: hard
 
-"@rmwc/touch-target@npm:14.3.5":
-  version: 14.3.5
-  resolution: "@rmwc/touch-target@npm:14.3.5"
+"@radix-ui/react-use-escape-keydown@npm:1.0.3":
+  version: 1.0.3
+  resolution: "@radix-ui/react-use-escape-keydown@npm:1.0.3"
   dependencies:
-    "@material/touch-target": "npm:^14.0.0"
-    "@rmwc/base": "npm:14.3.5"
+    "@babel/runtime": "npm:^7.13.10"
+    "@radix-ui/react-use-callback-ref": "npm:1.0.1"
   peerDependencies:
-    react: ">=16.8.x"
-    react-dom: ">=16.8.x"
-  checksum: 10/754abb6e725f48a2e74b97d0197db8286b7d9e535062d0f32f82db5a430e52d03ce019f3a2bfdd4d9f7262e4bc2bbab87fc76cd3682d2b786c1dd0ea56ad6901
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10/c6ed0d9ce780f67f924980eb305af1f6cce2a8acbaf043a58abe0aa3cc551d9aa76ccee14531df89bbee302ead7ecc7fce330886f82d4672c5eda52f357ef9b8
   languageName: node
   linkType: hard
 
-"@rmwc/types@npm:14.3.5":
-  version: 14.3.5
-  resolution: "@rmwc/types@npm:14.3.5"
-  checksum: 10/f68d6c18a7342bbdc3c4aeac5640d14a5bfcfec7616a6f783b9c52bed0aab7973d7c56a029779f7237cad93017736538149cc35923711f56d77ebc188679d81f
+"@radix-ui/react-use-escape-keydown@npm:1.1.1":
+  version: 1.1.1
+  resolution: "@radix-ui/react-use-escape-keydown@npm:1.1.1"
+  dependencies:
+    "@radix-ui/react-use-callback-ref": "npm:1.1.1"
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10/0eb0756c2c55ddcde9ff01446ab01c085ab2bf799173e97db7ef5f85126f9e8600225570801a1f64740e6d14c39ffe8eed7c14d29737345a5797f4622ac96f6f
   languageName: node
   linkType: hard
 
-"@rmwc/typography@npm:14.3.5":
-  version: 14.3.5
-  resolution: "@rmwc/typography@npm:14.3.5"
+"@radix-ui/react-use-is-hydrated@npm:0.1.0":
+  version: 0.1.0
+  resolution: "@radix-ui/react-use-is-hydrated@npm:0.1.0"
   dependencies:
-    "@material/typography": "npm:^14.0.0"
-    "@rmwc/base": "npm:14.3.5"
-    "@rmwc/provider": "npm:14.3.5"
-    "@rmwc/types": "npm:14.3.5"
+    use-sync-external-store: "npm:^1.5.0"
   peerDependencies:
-    react: ">=16.8.x"
-    react-dom: ">=16.8.x"
-  checksum: 10/adccc71e3dda683c707b31dd77e7f4bba5b969d5e30755d862564190660fcc2fba7ff0f629560254e77b0c9b8e0a957070b0a507e19f19a2f761481c91a7c497
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10/72e68a85a7a4a6dafd255a0cc87b6410bf0356c5e296e2eb82c265559408a735204cd150408b9c0d598057dafad3d51086e0362633bd728e95655b3bfd70ae26
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-use-layout-effect@npm:1.0.1":
+  version: 1.0.1
+  resolution: "@radix-ui/react-use-layout-effect@npm:1.0.1"
+  dependencies:
+    "@babel/runtime": "npm:^7.13.10"
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10/bed9c7e8de243a5ec3b93bb6a5860950b0dba359b6680c84d57c7a655e123dec9b5891c5dfe81ab970652e7779fe2ad102a23177c7896dde95f7340817d47ae5
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-use-layout-effect@npm:1.1.1":
+  version: 1.1.1
+  resolution: "@radix-ui/react-use-layout-effect@npm:1.1.1"
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10/bad2ba4f206e6255263582bedfb7868773c400836f9a1b423c0b464ffe4a17e13d3f306d1ce19cf7a19a492e9d0e49747464f2656451bb7c6a99f5a57bd34de2
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-use-previous@npm:1.0.1":
+  version: 1.0.1
+  resolution: "@radix-ui/react-use-previous@npm:1.0.1"
+  dependencies:
+    "@babel/runtime": "npm:^7.13.10"
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10/66b4312e857c58b75f3bf62a2048ef090b79a159e9da06c19a468c93e62336969c33dbef60ff16969f00b20386cc25d138f6a353f1658b35baac0a6eff4761b9
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-use-previous@npm:1.1.1":
+  version: 1.1.1
+  resolution: "@radix-ui/react-use-previous@npm:1.1.1"
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10/ea6ea13523a0561dda9b14b9d44e299484816a6762d7fb50b91b27b6aec89f78c85245b69d5a904750d43919dbb7ef6ce6d3823639346675aa3a5cb9de32d984
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-use-rect@npm:1.0.1":
+  version: 1.0.1
+  resolution: "@radix-ui/react-use-rect@npm:1.0.1"
+  dependencies:
+    "@babel/runtime": "npm:^7.13.10"
+    "@radix-ui/rect": "npm:1.0.1"
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10/433f07e61e04eb222349825bb05f3591fca131313a1d03709565d6226d8660bd1d0423635553f95ee4fcc25c8f2050972d848808d753c388e2a9ae191ebf17f3
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-use-rect@npm:1.1.1":
+  version: 1.1.1
+  resolution: "@radix-ui/react-use-rect@npm:1.1.1"
+  dependencies:
+    "@radix-ui/rect": "npm:1.1.1"
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10/116461bebc49472f7497e66a9bd413541181b3d00c5e0aaeef45d790dc1fbd7c8dcea80b169ea273306228b9a3c2b70067e902d1fd5004b3057e3bbe35b9d55d
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-use-size@npm:1.0.1":
+  version: 1.0.1
+  resolution: "@radix-ui/react-use-size@npm:1.0.1"
+  dependencies:
+    "@babel/runtime": "npm:^7.13.10"
+    "@radix-ui/react-use-layout-effect": "npm:1.0.1"
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10/6cc150ad1e9fa85019c225c5a5d50a0af6cdc4653dad0c21b4b40cd2121f36ee076db326c43e6bc91a69766ccff5a84e917d27970176b592577deea3c85a3e26
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-use-size@npm:1.1.1":
+  version: 1.1.1
+  resolution: "@radix-ui/react-use-size@npm:1.1.1"
+  dependencies:
+    "@radix-ui/react-use-layout-effect": "npm:1.1.1"
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10/64e61f65feb67ffc80e1fc4a8d5e32480fb6d68475e2640377e021178dead101568cba5f936c9c33e6c142c7cf2fb5d76ad7b23ef80e556ba142d56cf306147b
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-visually-hidden@npm:1.0.3":
+  version: 1.0.3
+  resolution: "@radix-ui/react-visually-hidden@npm:1.0.3"
+  dependencies:
+    "@babel/runtime": "npm:^7.13.10"
+    "@radix-ui/react-primitive": "npm:1.0.3"
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+    react-dom: ^16.8 || ^17.0 || ^18.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10/2e9d0c8253f97e7d6ffb2e52a5cfd40ba719f813b39c3e2e42c496d54408abd09ef66b5aec4af9b8ab0553215e32452a5d0934597a49c51dd90dc39181ed0d57
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-visually-hidden@npm:1.2.3":
+  version: 1.2.3
+  resolution: "@radix-ui/react-visually-hidden@npm:1.2.3"
+  dependencies:
+    "@radix-ui/react-primitive": "npm:2.1.3"
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10/42296bde1ddf4af4e7445e914c35d6bc8406d6ede49f0a959a553e75b3ed21da09fda80a81c48d8ec058ed8129ce7137499d02ee26f90f0d3eaa2417922d6509
+  languageName: node
+  linkType: hard
+
+"@radix-ui/rect@npm:1.0.1":
+  version: 1.0.1
+  resolution: "@radix-ui/rect@npm:1.0.1"
+  dependencies:
+    "@babel/runtime": "npm:^7.13.10"
+  checksum: 10/e25492cb8a683246161d781f0f3205f79507280a60f50eb763f06e8b6fa211b940b784aa581131ed76695bd5df5d1033a6246b43a6996cf8959a326fe4d3eb00
+  languageName: node
+  linkType: hard
+
+"@radix-ui/rect@npm:1.1.1":
+  version: 1.1.1
+  resolution: "@radix-ui/rect@npm:1.1.1"
+  checksum: 10/b6c5eb787640775b53dd52fa47218a089f0a0d8220d3ebff079c0b754e1fb82d89b6bdf08a82fd0d59549bdeb52678c0cca091c302da49dcf74c3c989cb55678
+  languageName: node
+  linkType: hard
+
+"@react-dnd/asap@npm:^5.0.1":
+  version: 5.0.2
+  resolution: "@react-dnd/asap@npm:5.0.2"
+  checksum: 10/a75039720b89da11bc678c2b61b1d2840c8349023ef2b8f8ca9099e7ece6953e9be704bf393bf799eae83d245f62115eb5302499612c2aa009c1d91caa9462df
+  languageName: node
+  linkType: hard
+
+"@react-dnd/invariant@npm:^4.0.1":
+  version: 4.0.2
+  resolution: "@react-dnd/invariant@npm:4.0.2"
+  checksum: 10/b638e9643e6e93da03ef463be3c1b92055daadc391fc08e4ce8639ef8c7738f91058ec83ee52a0d0df0d3a6dd2811a7703e1450737708f043c2e909c0a99dd31
+  languageName: node
+  linkType: hard
+
+"@react-dnd/shallowequal@npm:^4.0.1":
+  version: 4.0.2
+  resolution: "@react-dnd/shallowequal@npm:4.0.2"
+  checksum: 10/7f21d691bddbfd4d2830948cbeefecca1600b2b46bcb1934926795f07ae8a1fa60a3dfd3a2112be5ef682c3820c80a99711e9fa15843f7e300acb25a4ecb70ab
   languageName: node
   linkType: hard
 
@@ -10201,6 +11839,805 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/addon-a11y@npm:7.6.20":
+  version: 7.6.20
+  resolution: "@storybook/addon-a11y@npm:7.6.20"
+  dependencies:
+    "@storybook/addon-highlight": "npm:7.6.20"
+    axe-core: "npm:^4.2.0"
+  checksum: 10/4da3479a6db035092d6ef59dfd4465357976623db9ff84b9178dd30210e63f728d9f2819850fdfcd6fe00739b3849d4399255e90917ac6083c37ece97d4da30a
+  languageName: node
+  linkType: hard
+
+"@storybook/addon-actions@npm:7.6.20":
+  version: 7.6.20
+  resolution: "@storybook/addon-actions@npm:7.6.20"
+  dependencies:
+    "@storybook/core-events": "npm:7.6.20"
+    "@storybook/global": "npm:^5.0.0"
+    "@types/uuid": "npm:^9.0.1"
+    dequal: "npm:^2.0.2"
+    polished: "npm:^4.2.2"
+    uuid: "npm:^9.0.0"
+  checksum: 10/cbec5ebbb8a4a632a14b04c0ae32adc4d9783ecc3faba325ede0e172170b579ffd8e5d7c825a1cd61a1008ed69fc78eda7c63df58490c543534f63318683d4b9
+  languageName: node
+  linkType: hard
+
+"@storybook/addon-backgrounds@npm:7.6.20":
+  version: 7.6.20
+  resolution: "@storybook/addon-backgrounds@npm:7.6.20"
+  dependencies:
+    "@storybook/global": "npm:^5.0.0"
+    memoizerific: "npm:^1.11.3"
+    ts-dedent: "npm:^2.0.0"
+  checksum: 10/458c9493fb8f8efe552efd4a3f4f3a1c3fc0bee539c508de92da6af7efd3fde047d0fce40521bf8b9453747b7c9f07352483500cef173fb8ee382817e2ec692e
+  languageName: node
+  linkType: hard
+
+"@storybook/addon-controls@npm:7.6.20":
+  version: 7.6.20
+  resolution: "@storybook/addon-controls@npm:7.6.20"
+  dependencies:
+    "@storybook/blocks": "npm:7.6.20"
+    lodash: "npm:^4.17.21"
+    ts-dedent: "npm:^2.0.0"
+  checksum: 10/27b0f4d5e751445c16e1a86de4013ee8d60136cc040914cc8e7a9cc53ca93084094335d4bc78fa74cb566d38ce519d5a5dd3cd7f4985cc4c2062f70ad9ebe3b9
+  languageName: node
+  linkType: hard
+
+"@storybook/addon-docs@npm:7.6.20":
+  version: 7.6.20
+  resolution: "@storybook/addon-docs@npm:7.6.20"
+  dependencies:
+    "@jest/transform": "npm:^29.3.1"
+    "@mdx-js/react": "npm:^2.1.5"
+    "@storybook/blocks": "npm:7.6.20"
+    "@storybook/client-logger": "npm:7.6.20"
+    "@storybook/components": "npm:7.6.20"
+    "@storybook/csf-plugin": "npm:7.6.20"
+    "@storybook/csf-tools": "npm:7.6.20"
+    "@storybook/global": "npm:^5.0.0"
+    "@storybook/mdx2-csf": "npm:^1.0.0"
+    "@storybook/node-logger": "npm:7.6.20"
+    "@storybook/postinstall": "npm:7.6.20"
+    "@storybook/preview-api": "npm:7.6.20"
+    "@storybook/react-dom-shim": "npm:7.6.20"
+    "@storybook/theming": "npm:7.6.20"
+    "@storybook/types": "npm:7.6.20"
+    fs-extra: "npm:^11.1.0"
+    remark-external-links: "npm:^8.0.0"
+    remark-slug: "npm:^6.0.0"
+    ts-dedent: "npm:^2.0.0"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+  checksum: 10/04b162f169f2d203089a04a522f5c7923f856e6708fb5da5509ba075abea000dac9fdb4e198bcb0f0b58dd31b79a67126fe1ced210fce6193c3c6b6c4f0123ff
+  languageName: node
+  linkType: hard
+
+"@storybook/addon-essentials@npm:7.6.20":
+  version: 7.6.20
+  resolution: "@storybook/addon-essentials@npm:7.6.20"
+  dependencies:
+    "@storybook/addon-actions": "npm:7.6.20"
+    "@storybook/addon-backgrounds": "npm:7.6.20"
+    "@storybook/addon-controls": "npm:7.6.20"
+    "@storybook/addon-docs": "npm:7.6.20"
+    "@storybook/addon-highlight": "npm:7.6.20"
+    "@storybook/addon-measure": "npm:7.6.20"
+    "@storybook/addon-outline": "npm:7.6.20"
+    "@storybook/addon-toolbars": "npm:7.6.20"
+    "@storybook/addon-viewport": "npm:7.6.20"
+    "@storybook/core-common": "npm:7.6.20"
+    "@storybook/manager-api": "npm:7.6.20"
+    "@storybook/node-logger": "npm:7.6.20"
+    "@storybook/preview-api": "npm:7.6.20"
+    ts-dedent: "npm:^2.0.0"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+  checksum: 10/caa019515d0cf6b628a13611d231145254ca4c69aa01de78f597aef32425cdd1b227ec916f45e56ccf30790503e552adc931d44cb1e76e11a24a19378638bfdd
+  languageName: node
+  linkType: hard
+
+"@storybook/addon-highlight@npm:7.6.20":
+  version: 7.6.20
+  resolution: "@storybook/addon-highlight@npm:7.6.20"
+  dependencies:
+    "@storybook/global": "npm:^5.0.0"
+  checksum: 10/80258b39b9611c633ee131424af7694addaf66cc4b39e120202634ac30c401d1b654662e8d2677151743e10cf21b5711fe8c2f7a4e695c994240e4ad84251d5b
+  languageName: node
+  linkType: hard
+
+"@storybook/addon-measure@npm:7.6.20":
+  version: 7.6.20
+  resolution: "@storybook/addon-measure@npm:7.6.20"
+  dependencies:
+    "@storybook/global": "npm:^5.0.0"
+    tiny-invariant: "npm:^1.3.1"
+  checksum: 10/ef2db439402bd8710513ecfb1ecf47d3572e93229d6a41287a8114fc714039387ef3562ddb5a4f1a9930a96587073e59975a87f47cf45c90d0deb7052662cf82
+  languageName: node
+  linkType: hard
+
+"@storybook/addon-outline@npm:7.6.20":
+  version: 7.6.20
+  resolution: "@storybook/addon-outline@npm:7.6.20"
+  dependencies:
+    "@storybook/global": "npm:^5.0.0"
+    ts-dedent: "npm:^2.0.0"
+  checksum: 10/74cf0cde404f883c1dfdda64036d90dc0174ab742d9f81c8a88fc1c131230aec494236bdd8fa00e0ac7e0e4d153de54bdfe6ef55733d775932f5f62ee8239775
+  languageName: node
+  linkType: hard
+
+"@storybook/addon-toolbars@npm:7.6.20":
+  version: 7.6.20
+  resolution: "@storybook/addon-toolbars@npm:7.6.20"
+  checksum: 10/3338badd22714001ba022a9d41a3bf7d9e178fdf26652914b09b7cfb3ed2cd6e680360d8b9f667ae8043c215d009965b119fd4918676f2ebeafc888eec5310a3
+  languageName: node
+  linkType: hard
+
+"@storybook/addon-viewport@npm:7.6.20":
+  version: 7.6.20
+  resolution: "@storybook/addon-viewport@npm:7.6.20"
+  dependencies:
+    memoizerific: "npm:^1.11.3"
+  checksum: 10/aba68c9de68d61e7b915909ba6296e9091e8be48d193ac3f84acebf7488bf96ee1e754f6b2a3728765d15d3ecef491531130246f9e9a08b395c21f88ef584043
+  languageName: node
+  linkType: hard
+
+"@storybook/blocks@npm:7.6.20":
+  version: 7.6.20
+  resolution: "@storybook/blocks@npm:7.6.20"
+  dependencies:
+    "@storybook/channels": "npm:7.6.20"
+    "@storybook/client-logger": "npm:7.6.20"
+    "@storybook/components": "npm:7.6.20"
+    "@storybook/core-events": "npm:7.6.20"
+    "@storybook/csf": "npm:^0.1.2"
+    "@storybook/docs-tools": "npm:7.6.20"
+    "@storybook/global": "npm:^5.0.0"
+    "@storybook/manager-api": "npm:7.6.20"
+    "@storybook/preview-api": "npm:7.6.20"
+    "@storybook/theming": "npm:7.6.20"
+    "@storybook/types": "npm:7.6.20"
+    "@types/lodash": "npm:^4.14.167"
+    color-convert: "npm:^2.0.1"
+    dequal: "npm:^2.0.2"
+    lodash: "npm:^4.17.21"
+    markdown-to-jsx: "npm:^7.1.8"
+    memoizerific: "npm:^1.11.3"
+    polished: "npm:^4.2.2"
+    react-colorful: "npm:^5.1.2"
+    telejson: "npm:^7.2.0"
+    tocbot: "npm:^4.20.1"
+    ts-dedent: "npm:^2.0.0"
+    util-deprecate: "npm:^1.0.2"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+  checksum: 10/fa893dbf5600b48bdcea757e844f2fc70ab5b68309527802e639c4c596d53c937cc53ec6246afa93ac3da0d83bfb65c50666e66a7c474a776c57fe80a5c7c98f
+  languageName: node
+  linkType: hard
+
+"@storybook/builder-manager@npm:7.6.20":
+  version: 7.6.20
+  resolution: "@storybook/builder-manager@npm:7.6.20"
+  dependencies:
+    "@fal-works/esbuild-plugin-global-externals": "npm:^2.1.2"
+    "@storybook/core-common": "npm:7.6.20"
+    "@storybook/manager": "npm:7.6.20"
+    "@storybook/node-logger": "npm:7.6.20"
+    "@types/ejs": "npm:^3.1.1"
+    "@types/find-cache-dir": "npm:^3.2.1"
+    "@yarnpkg/esbuild-plugin-pnp": "npm:^3.0.0-rc.10"
+    browser-assert: "npm:^1.2.1"
+    ejs: "npm:^3.1.8"
+    esbuild: "npm:^0.18.0"
+    esbuild-plugin-alias: "npm:^0.2.1"
+    express: "npm:^4.17.3"
+    find-cache-dir: "npm:^3.0.0"
+    fs-extra: "npm:^11.1.0"
+    process: "npm:^0.11.10"
+    util: "npm:^0.12.4"
+  checksum: 10/08e6b1294495bcfdfafa3ce1159785fcf4bc0b7ea2f1cdeb88b8ac952017c6106209617cd01c59c35d4dd74cc61eead3c9746ffca6ccf4e18e9ebf0bbda1c819
+  languageName: node
+  linkType: hard
+
+"@storybook/builder-webpack5@npm:7.6.20":
+  version: 7.6.20
+  resolution: "@storybook/builder-webpack5@npm:7.6.20"
+  dependencies:
+    "@babel/core": "npm:^7.23.2"
+    "@storybook/channels": "npm:7.6.20"
+    "@storybook/client-logger": "npm:7.6.20"
+    "@storybook/core-common": "npm:7.6.20"
+    "@storybook/core-events": "npm:7.6.20"
+    "@storybook/core-webpack": "npm:7.6.20"
+    "@storybook/node-logger": "npm:7.6.20"
+    "@storybook/preview": "npm:7.6.20"
+    "@storybook/preview-api": "npm:7.6.20"
+    "@swc/core": "npm:^1.3.82"
+    "@types/node": "npm:^18.0.0"
+    "@types/semver": "npm:^7.3.4"
+    babel-loader: "npm:^9.0.0"
+    browser-assert: "npm:^1.2.1"
+    case-sensitive-paths-webpack-plugin: "npm:^2.4.0"
+    cjs-module-lexer: "npm:^1.2.3"
+    constants-browserify: "npm:^1.0.0"
+    css-loader: "npm:^6.7.1"
+    es-module-lexer: "npm:^1.4.1"
+    express: "npm:^4.17.3"
+    fork-ts-checker-webpack-plugin: "npm:^8.0.0"
+    fs-extra: "npm:^11.1.0"
+    html-webpack-plugin: "npm:^5.5.0"
+    magic-string: "npm:^0.30.5"
+    path-browserify: "npm:^1.0.1"
+    process: "npm:^0.11.10"
+    semver: "npm:^7.3.7"
+    style-loader: "npm:^3.3.1"
+    swc-loader: "npm:^0.2.3"
+    terser-webpack-plugin: "npm:^5.3.1"
+    ts-dedent: "npm:^2.0.0"
+    url: "npm:^0.11.0"
+    util: "npm:^0.12.4"
+    util-deprecate: "npm:^1.0.2"
+    webpack: "npm:5"
+    webpack-dev-middleware: "npm:^6.1.1"
+    webpack-hot-middleware: "npm:^2.25.1"
+    webpack-virtual-modules: "npm:^0.5.0"
+  peerDependenciesMeta:
+    typescript:
+      optional: true
+  checksum: 10/deb645ccb3a3f83172e91450177db4256dac1d35994a7b5d81184065914b084475eda585b718cf7f2e7b6059f20d3a68899b4d4d059d59b765a17c1efff4c3c1
+  languageName: node
+  linkType: hard
+
+"@storybook/channels@npm:7.6.20":
+  version: 7.6.20
+  resolution: "@storybook/channels@npm:7.6.20"
+  dependencies:
+    "@storybook/client-logger": "npm:7.6.20"
+    "@storybook/core-events": "npm:7.6.20"
+    "@storybook/global": "npm:^5.0.0"
+    qs: "npm:^6.10.0"
+    telejson: "npm:^7.2.0"
+    tiny-invariant: "npm:^1.3.1"
+  checksum: 10/3dc827df9d0d0c0c68f10edbf5169e42c2cdb43832cb14ce3ac8149f295219f8bae6ed27300fd50e6a78080914cf142d1810fdbcf687dd313a7bfac41386cd95
+  languageName: node
+  linkType: hard
+
+"@storybook/cli@npm:7.6.20":
+  version: 7.6.20
+  resolution: "@storybook/cli@npm:7.6.20"
+  dependencies:
+    "@babel/core": "npm:^7.23.2"
+    "@babel/preset-env": "npm:^7.23.2"
+    "@babel/types": "npm:^7.23.0"
+    "@ndelangen/get-tarball": "npm:^3.0.7"
+    "@storybook/codemod": "npm:7.6.20"
+    "@storybook/core-common": "npm:7.6.20"
+    "@storybook/core-events": "npm:7.6.20"
+    "@storybook/core-server": "npm:7.6.20"
+    "@storybook/csf-tools": "npm:7.6.20"
+    "@storybook/node-logger": "npm:7.6.20"
+    "@storybook/telemetry": "npm:7.6.20"
+    "@storybook/types": "npm:7.6.20"
+    "@types/semver": "npm:^7.3.4"
+    "@yarnpkg/fslib": "npm:2.10.3"
+    "@yarnpkg/libzip": "npm:2.3.0"
+    chalk: "npm:^4.1.0"
+    commander: "npm:^6.2.1"
+    cross-spawn: "npm:^7.0.3"
+    detect-indent: "npm:^6.1.0"
+    envinfo: "npm:^7.7.3"
+    execa: "npm:^5.0.0"
+    express: "npm:^4.17.3"
+    find-up: "npm:^5.0.0"
+    fs-extra: "npm:^11.1.0"
+    get-npm-tarball-url: "npm:^2.0.3"
+    get-port: "npm:^5.1.1"
+    giget: "npm:^1.0.0"
+    globby: "npm:^11.0.2"
+    jscodeshift: "npm:^0.15.1"
+    leven: "npm:^3.1.0"
+    ora: "npm:^5.4.1"
+    prettier: "npm:^2.8.0"
+    prompts: "npm:^2.4.0"
+    puppeteer-core: "npm:^2.1.1"
+    read-pkg-up: "npm:^7.0.1"
+    semver: "npm:^7.3.7"
+    strip-json-comments: "npm:^3.0.1"
+    tempy: "npm:^1.0.1"
+    ts-dedent: "npm:^2.0.0"
+    util-deprecate: "npm:^1.0.2"
+  bin:
+    getstorybook: ./bin/index.js
+    sb: ./bin/index.js
+  checksum: 10/0de9d7e77e1f0d97781b5acde906fe99c62caf182a9fcd1bbb7c852745208e74a8295c3cbbfcec41337a0d3ab7f97a43fdb3a6139f36ebabbe9b80b3c0fc2ca9
+  languageName: node
+  linkType: hard
+
+"@storybook/client-logger@npm:7.6.20":
+  version: 7.6.20
+  resolution: "@storybook/client-logger@npm:7.6.20"
+  dependencies:
+    "@storybook/global": "npm:^5.0.0"
+  checksum: 10/0062c440c825ab460667d799b00d3ff87dcf4dabce05733c11ffbb1ea70e0a2e77fdc313ce9bdeccc4ac816101abe17572b96cc20c975874812f875828653704
+  languageName: node
+  linkType: hard
+
+"@storybook/codemod@npm:7.6.20":
+  version: 7.6.20
+  resolution: "@storybook/codemod@npm:7.6.20"
+  dependencies:
+    "@babel/core": "npm:^7.23.2"
+    "@babel/preset-env": "npm:^7.23.2"
+    "@babel/types": "npm:^7.23.0"
+    "@storybook/csf": "npm:^0.1.2"
+    "@storybook/csf-tools": "npm:7.6.20"
+    "@storybook/node-logger": "npm:7.6.20"
+    "@storybook/types": "npm:7.6.20"
+    "@types/cross-spawn": "npm:^6.0.2"
+    cross-spawn: "npm:^7.0.3"
+    globby: "npm:^11.0.2"
+    jscodeshift: "npm:^0.15.1"
+    lodash: "npm:^4.17.21"
+    prettier: "npm:^2.8.0"
+    recast: "npm:^0.23.1"
+  checksum: 10/ac4e2132be665e173bf7ce121341e847e6fed225e3fef4518a1a3d6f005d7677d116febe0d08f2ecb5f479823dcefa720ac4cf9b6b72ff9b557dbc7db7bd8b2f
+  languageName: node
+  linkType: hard
+
+"@storybook/components@npm:7.6.20":
+  version: 7.6.20
+  resolution: "@storybook/components@npm:7.6.20"
+  dependencies:
+    "@radix-ui/react-select": "npm:^1.2.2"
+    "@radix-ui/react-toolbar": "npm:^1.0.4"
+    "@storybook/client-logger": "npm:7.6.20"
+    "@storybook/csf": "npm:^0.1.2"
+    "@storybook/global": "npm:^5.0.0"
+    "@storybook/theming": "npm:7.6.20"
+    "@storybook/types": "npm:7.6.20"
+    memoizerific: "npm:^1.11.3"
+    use-resize-observer: "npm:^9.1.0"
+    util-deprecate: "npm:^1.0.2"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+  checksum: 10/1b3e267ae73a4afad61aec99202e3d483dea079a02046bfa75ddb03726c5d59de4200f745c843b7c45dd8cea7159c85e2919ce83adff045f592fa04658d6d1e8
+  languageName: node
+  linkType: hard
+
+"@storybook/core-client@npm:7.6.20":
+  version: 7.6.20
+  resolution: "@storybook/core-client@npm:7.6.20"
+  dependencies:
+    "@storybook/client-logger": "npm:7.6.20"
+    "@storybook/preview-api": "npm:7.6.20"
+  checksum: 10/e89fb4d9944715bed204371d8edf66b3d9038912b13e16962ea90e2d863331591b9dc10fa00a4218a4d770c56dd72bfc0b7d0a3ad3d7594cd3ebf218fa760a49
+  languageName: node
+  linkType: hard
+
+"@storybook/core-common@npm:7.6.20":
+  version: 7.6.20
+  resolution: "@storybook/core-common@npm:7.6.20"
+  dependencies:
+    "@storybook/core-events": "npm:7.6.20"
+    "@storybook/node-logger": "npm:7.6.20"
+    "@storybook/types": "npm:7.6.20"
+    "@types/find-cache-dir": "npm:^3.2.1"
+    "@types/node": "npm:^18.0.0"
+    "@types/node-fetch": "npm:^2.6.4"
+    "@types/pretty-hrtime": "npm:^1.0.0"
+    chalk: "npm:^4.1.0"
+    esbuild: "npm:^0.18.0"
+    esbuild-register: "npm:^3.5.0"
+    file-system-cache: "npm:2.3.0"
+    find-cache-dir: "npm:^3.0.0"
+    find-up: "npm:^5.0.0"
+    fs-extra: "npm:^11.1.0"
+    glob: "npm:^10.0.0"
+    handlebars: "npm:^4.7.7"
+    lazy-universal-dotenv: "npm:^4.0.0"
+    node-fetch: "npm:^2.0.0"
+    picomatch: "npm:^2.3.0"
+    pkg-dir: "npm:^5.0.0"
+    pretty-hrtime: "npm:^1.0.3"
+    resolve-from: "npm:^5.0.0"
+    ts-dedent: "npm:^2.0.0"
+  checksum: 10/adc2c6dabd01904f10d2bce4f8d21fced023dfd3651661655844fa2e4f779e3774b1bf3328fd85e40091785bdb3a1cbb7bfca5b78c546493824322cd9ddae934
+  languageName: node
+  linkType: hard
+
+"@storybook/core-events@npm:7.6.20":
+  version: 7.6.20
+  resolution: "@storybook/core-events@npm:7.6.20"
+  dependencies:
+    ts-dedent: "npm:^2.0.0"
+  checksum: 10/bd72649a262017f244aa6311352c1b38f2b38478c19b9aee4851bfdff5b2b11565dd768fe144f1304f9f130b533ffa4ab3fd2eea1361d202a76ff920cc377601
+  languageName: node
+  linkType: hard
+
+"@storybook/core-server@npm:7.6.20":
+  version: 7.6.20
+  resolution: "@storybook/core-server@npm:7.6.20"
+  dependencies:
+    "@aw-web-design/x-default-browser": "npm:1.4.126"
+    "@discoveryjs/json-ext": "npm:^0.5.3"
+    "@storybook/builder-manager": "npm:7.6.20"
+    "@storybook/channels": "npm:7.6.20"
+    "@storybook/core-common": "npm:7.6.20"
+    "@storybook/core-events": "npm:7.6.20"
+    "@storybook/csf": "npm:^0.1.2"
+    "@storybook/csf-tools": "npm:7.6.20"
+    "@storybook/docs-mdx": "npm:^0.1.0"
+    "@storybook/global": "npm:^5.0.0"
+    "@storybook/manager": "npm:7.6.20"
+    "@storybook/node-logger": "npm:7.6.20"
+    "@storybook/preview-api": "npm:7.6.20"
+    "@storybook/telemetry": "npm:7.6.20"
+    "@storybook/types": "npm:7.6.20"
+    "@types/detect-port": "npm:^1.3.0"
+    "@types/node": "npm:^18.0.0"
+    "@types/pretty-hrtime": "npm:^1.0.0"
+    "@types/semver": "npm:^7.3.4"
+    better-opn: "npm:^3.0.2"
+    chalk: "npm:^4.1.0"
+    cli-table3: "npm:^0.6.1"
+    compression: "npm:^1.7.4"
+    detect-port: "npm:^1.3.0"
+    express: "npm:^4.17.3"
+    fs-extra: "npm:^11.1.0"
+    globby: "npm:^11.0.2"
+    lodash: "npm:^4.17.21"
+    open: "npm:^8.4.0"
+    pretty-hrtime: "npm:^1.0.3"
+    prompts: "npm:^2.4.0"
+    read-pkg-up: "npm:^7.0.1"
+    semver: "npm:^7.3.7"
+    telejson: "npm:^7.2.0"
+    tiny-invariant: "npm:^1.3.1"
+    ts-dedent: "npm:^2.0.0"
+    util: "npm:^0.12.4"
+    util-deprecate: "npm:^1.0.2"
+    watchpack: "npm:^2.2.0"
+    ws: "npm:^8.2.3"
+  checksum: 10/994dcdbd475650d396ad5f13113412779b23c910133e2fd45a2f7bd31c24a2bd351db977d6ae05b18dc6807edc7ac756286533145449e4e4f4d2bb99507586bb
+  languageName: node
+  linkType: hard
+
+"@storybook/core-webpack@npm:7.6.20":
+  version: 7.6.20
+  resolution: "@storybook/core-webpack@npm:7.6.20"
+  dependencies:
+    "@storybook/core-common": "npm:7.6.20"
+    "@storybook/node-logger": "npm:7.6.20"
+    "@storybook/types": "npm:7.6.20"
+    "@types/node": "npm:^18.0.0"
+    ts-dedent: "npm:^2.0.0"
+  checksum: 10/2277c5f996e2936955e19ba52600e286cf28eca7a24eba373329ca804e3e0d5da4047a15c01cdbb03abdf59690dbd96592c1f2c10d77af2463917555774ad9e0
+  languageName: node
+  linkType: hard
+
+"@storybook/csf-plugin@npm:7.6.20":
+  version: 7.6.20
+  resolution: "@storybook/csf-plugin@npm:7.6.20"
+  dependencies:
+    "@storybook/csf-tools": "npm:7.6.20"
+    unplugin: "npm:^1.3.1"
+  checksum: 10/0f40b4968e9abb0abf6657548fc6338755133b2c8bb788caf55b101b4558c9c55c428e357659723e06ab385a22fa96ba14059149c4473dd3d0190d6d21088a90
+  languageName: node
+  linkType: hard
+
+"@storybook/csf-tools@npm:7.6.20":
+  version: 7.6.20
+  resolution: "@storybook/csf-tools@npm:7.6.20"
+  dependencies:
+    "@babel/generator": "npm:^7.23.0"
+    "@babel/parser": "npm:^7.23.0"
+    "@babel/traverse": "npm:^7.23.2"
+    "@babel/types": "npm:^7.23.0"
+    "@storybook/csf": "npm:^0.1.2"
+    "@storybook/types": "npm:7.6.20"
+    fs-extra: "npm:^11.1.0"
+    recast: "npm:^0.23.1"
+    ts-dedent: "npm:^2.0.0"
+  checksum: 10/f0ca4a7e7309548bf647fbbc175bccb56fe4df210e3e52f96a5cc553bc06253c8fd7fcceb00ee7192e09fd073fd67fdaacab0ba81c56d440116114355b5f0935
+  languageName: node
+  linkType: hard
+
+"@storybook/csf@npm:^0.1.2":
+  version: 0.1.13
+  resolution: "@storybook/csf@npm:0.1.13"
+  dependencies:
+    type-fest: "npm:^2.19.0"
+  checksum: 10/8a590703c44180798869fd12c1f314cb96de18349415a33bcfe30ef6af11fdc1cdb755ea620dedfd5eb7666cf05af5647b77fe28b63000aa52b53b0dc3c77bb5
+  languageName: node
+  linkType: hard
+
+"@storybook/docs-mdx@npm:^0.1.0":
+  version: 0.1.0
+  resolution: "@storybook/docs-mdx@npm:0.1.0"
+  checksum: 10/f830eda81606a8af86d2bbf9ed6e36c70d9e88442990684139629742f2cc5d7ddddba91338fe2fc5e9b98e74af1940a9899fde471a8bfbfec744deaa990592e7
+  languageName: node
+  linkType: hard
+
+"@storybook/docs-tools@npm:7.6.20":
+  version: 7.6.20
+  resolution: "@storybook/docs-tools@npm:7.6.20"
+  dependencies:
+    "@storybook/core-common": "npm:7.6.20"
+    "@storybook/preview-api": "npm:7.6.20"
+    "@storybook/types": "npm:7.6.20"
+    "@types/doctrine": "npm:^0.0.3"
+    assert: "npm:^2.1.0"
+    doctrine: "npm:^3.0.0"
+    lodash: "npm:^4.17.21"
+  checksum: 10/735a64bc90aaf51532104c6835e5fba7b30db33513b069404f3ed610ddfdd4c8689ea61630c1b6d04985a4faef8331d05ef95999983cdb244448229e5e3ef6bf
+  languageName: node
+  linkType: hard
+
+"@storybook/global@npm:^5.0.0":
+  version: 5.0.0
+  resolution: "@storybook/global@npm:5.0.0"
+  checksum: 10/0e7b495f4fe7f36447e793926f1c0460ec07fd66f0da68e3150da5878f6043c9eeb9b41614a45c5ec0d48d5d383c59ca8f88b6dc7882a2a784ac9b20375d8edb
+  languageName: node
+  linkType: hard
+
+"@storybook/manager-api@npm:7.6.20":
+  version: 7.6.20
+  resolution: "@storybook/manager-api@npm:7.6.20"
+  dependencies:
+    "@storybook/channels": "npm:7.6.20"
+    "@storybook/client-logger": "npm:7.6.20"
+    "@storybook/core-events": "npm:7.6.20"
+    "@storybook/csf": "npm:^0.1.2"
+    "@storybook/global": "npm:^5.0.0"
+    "@storybook/router": "npm:7.6.20"
+    "@storybook/theming": "npm:7.6.20"
+    "@storybook/types": "npm:7.6.20"
+    dequal: "npm:^2.0.2"
+    lodash: "npm:^4.17.21"
+    memoizerific: "npm:^1.11.3"
+    store2: "npm:^2.14.2"
+    telejson: "npm:^7.2.0"
+    ts-dedent: "npm:^2.0.0"
+  checksum: 10/ad66099e1bdcab11ac6542c65849b7dcf905207b2e6cc2bff8684450ce2b9838e1e913160803e4cd0d59c708400a25f0225d1b083853e737516e99eab6636315
+  languageName: node
+  linkType: hard
+
+"@storybook/manager@npm:7.6.20":
+  version: 7.6.20
+  resolution: "@storybook/manager@npm:7.6.20"
+  checksum: 10/542b5c765cf7704e157e6aea1bcf6b90e00cbb286251257b5e41bc35737f2df05215fecfdad89b3efa780341c1adf671eba71b7ee3164993bdf48bee3ad7c0a0
+  languageName: node
+  linkType: hard
+
+"@storybook/mdx2-csf@npm:^1.0.0":
+  version: 1.1.0
+  resolution: "@storybook/mdx2-csf@npm:1.1.0"
+  checksum: 10/acc368a8c8915e9487aa8e0c59241a39533d83635ddcc37fa4095cc239268a75900ec2bbfff65b573ead6ebcadcb1de0e4d70c9112faf105e0821de0a4803ca2
+  languageName: node
+  linkType: hard
+
+"@storybook/node-logger@npm:7.6.20":
+  version: 7.6.20
+  resolution: "@storybook/node-logger@npm:7.6.20"
+  checksum: 10/4e6cf2be559e91b111142cdd2ed7c742f2d231ea30c3df773de0e1daec9986c4db3724ddf3c6dcbc873784a49dc8c7a9e3780037d0690a95a0a0c2d6b7ce0968
+  languageName: node
+  linkType: hard
+
+"@storybook/postinstall@npm:7.6.20":
+  version: 7.6.20
+  resolution: "@storybook/postinstall@npm:7.6.20"
+  checksum: 10/bb743168ce64e90d95ded66742d76cf4818d41a29e84f6d88044f680f83e24fbce159555670754fe58a414193139373ea03c7699adbac3599e860eed092c11bc
+  languageName: node
+  linkType: hard
+
+"@storybook/preset-react-webpack@npm:7.6.20":
+  version: 7.6.20
+  resolution: "@storybook/preset-react-webpack@npm:7.6.20"
+  dependencies:
+    "@babel/preset-flow": "npm:^7.22.15"
+    "@babel/preset-react": "npm:^7.22.15"
+    "@pmmmwh/react-refresh-webpack-plugin": "npm:^0.5.11"
+    "@storybook/core-webpack": "npm:7.6.20"
+    "@storybook/docs-tools": "npm:7.6.20"
+    "@storybook/node-logger": "npm:7.6.20"
+    "@storybook/react": "npm:7.6.20"
+    "@storybook/react-docgen-typescript-plugin": "npm:1.0.6--canary.9.0c3f3b7.0"
+    "@types/node": "npm:^18.0.0"
+    "@types/semver": "npm:^7.3.4"
+    babel-plugin-add-react-displayname: "npm:^0.0.5"
+    fs-extra: "npm:^11.1.0"
+    magic-string: "npm:^0.30.5"
+    react-docgen: "npm:^7.0.0"
+    react-refresh: "npm:^0.14.0"
+    semver: "npm:^7.3.7"
+    webpack: "npm:5"
+  peerDependencies:
+    "@babel/core": ^7.22.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+  peerDependenciesMeta:
+    "@babel/core":
+      optional: true
+    typescript:
+      optional: true
+  checksum: 10/bcce20358d85b5fb143a3bb184d4305ba96c4c54bed09b61b3a10e6748e4c3721069b7f7c89f9a1d62ba8234c215759a38d4d39f26e3e6b0c2b19a8ce23e13a1
+  languageName: node
+  linkType: hard
+
+"@storybook/preview-api@npm:7.6.20":
+  version: 7.6.20
+  resolution: "@storybook/preview-api@npm:7.6.20"
+  dependencies:
+    "@storybook/channels": "npm:7.6.20"
+    "@storybook/client-logger": "npm:7.6.20"
+    "@storybook/core-events": "npm:7.6.20"
+    "@storybook/csf": "npm:^0.1.2"
+    "@storybook/global": "npm:^5.0.0"
+    "@storybook/types": "npm:7.6.20"
+    "@types/qs": "npm:^6.9.5"
+    dequal: "npm:^2.0.2"
+    lodash: "npm:^4.17.21"
+    memoizerific: "npm:^1.11.3"
+    qs: "npm:^6.10.0"
+    synchronous-promise: "npm:^2.0.15"
+    ts-dedent: "npm:^2.0.0"
+    util-deprecate: "npm:^1.0.2"
+  checksum: 10/1facc19c6f3723d509114e3023dca1d19fd28f199673c81b77a2f31dea6d13c31455ce3b0eb57841e77b438479df9a6b73f2d5d0d4636bb123a3637c81910b49
+  languageName: node
+  linkType: hard
+
+"@storybook/preview@npm:7.6.20":
+  version: 7.6.20
+  resolution: "@storybook/preview@npm:7.6.20"
+  checksum: 10/1d1e4c7dc47898467f8ce9caa5026e902e420dac23a51782f3e65ecb50639d0cc1b0b32b7d28ad82b9c7b5e0ffcb528911948fbd952ac45aaec0ccace9aecd71
+  languageName: node
+  linkType: hard
+
+"@storybook/react-docgen-typescript-plugin@npm:1.0.6--canary.9.0c3f3b7.0":
+  version: 1.0.6--canary.9.0c3f3b7.0
+  resolution: "@storybook/react-docgen-typescript-plugin@npm:1.0.6--canary.9.0c3f3b7.0"
+  dependencies:
+    debug: "npm:^4.1.1"
+    endent: "npm:^2.0.1"
+    find-cache-dir: "npm:^3.3.1"
+    flat-cache: "npm:^3.0.4"
+    micromatch: "npm:^4.0.2"
+    react-docgen-typescript: "npm:^2.2.2"
+    tslib: "npm:^2.0.0"
+  peerDependencies:
+    typescript: ">= 4.x"
+    webpack: ">= 4"
+  checksum: 10/5d3c64b022d10d7316b600a41eec2cf38ba460e11bf9a01ae976e8d0efe6959633423d2a3546a5d3f9f04bcc946e83774e8efdf9ccfedb76a7065ec08e7ec809
+  languageName: node
+  linkType: hard
+
+"@storybook/react-dom-shim@npm:7.6.20":
+  version: 7.6.20
+  resolution: "@storybook/react-dom-shim@npm:7.6.20"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+  checksum: 10/8639816eda50e2ca507a9cb78d5a67b9aaabd26ca03177fb93c5de9d233f0bb3e708524fc8ce14df0c7d3d65347ec581df922c28ceee7df265c2e04bf5b72784
+  languageName: node
+  linkType: hard
+
+"@storybook/react-webpack5@npm:7.6.20":
+  version: 7.6.20
+  resolution: "@storybook/react-webpack5@npm:7.6.20"
+  dependencies:
+    "@storybook/builder-webpack5": "npm:7.6.20"
+    "@storybook/preset-react-webpack": "npm:7.6.20"
+    "@storybook/react": "npm:7.6.20"
+    "@types/node": "npm:^18.0.0"
+  peerDependencies:
+    "@babel/core": ^7.22.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+    typescript: "*"
+  peerDependenciesMeta:
+    "@babel/core":
+      optional: true
+    typescript:
+      optional: true
+  checksum: 10/a6213abdbdc652d7acc045d7aa716f696090f0813b8234acbc2c6fa71282556e0207ebf36aa3d74f6ab1980a0a43bc7b4b431fd9377912b8a253e1ab0ee1c124
+  languageName: node
+  linkType: hard
+
+"@storybook/react@npm:7.6.20":
+  version: 7.6.20
+  resolution: "@storybook/react@npm:7.6.20"
+  dependencies:
+    "@storybook/client-logger": "npm:7.6.20"
+    "@storybook/core-client": "npm:7.6.20"
+    "@storybook/docs-tools": "npm:7.6.20"
+    "@storybook/global": "npm:^5.0.0"
+    "@storybook/preview-api": "npm:7.6.20"
+    "@storybook/react-dom-shim": "npm:7.6.20"
+    "@storybook/types": "npm:7.6.20"
+    "@types/escodegen": "npm:^0.0.6"
+    "@types/estree": "npm:^0.0.51"
+    "@types/node": "npm:^18.0.0"
+    acorn: "npm:^7.4.1"
+    acorn-jsx: "npm:^5.3.1"
+    acorn-walk: "npm:^7.2.0"
+    escodegen: "npm:^2.1.0"
+    html-tags: "npm:^3.1.0"
+    lodash: "npm:^4.17.21"
+    prop-types: "npm:^15.7.2"
+    react-element-to-jsx-string: "npm:^15.0.0"
+    ts-dedent: "npm:^2.0.0"
+    type-fest: "npm:~2.19"
+    util-deprecate: "npm:^1.0.2"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+    typescript: "*"
+  peerDependenciesMeta:
+    typescript:
+      optional: true
+  checksum: 10/2a0602c42b91a52fd6247b94933680caa498469104311793613a473f2cb395aa467e837d1094fcf0b4becb2b83b34026bef4a7a1c4e238546c800ab8167f2b06
+  languageName: node
+  linkType: hard
+
+"@storybook/router@npm:7.6.20":
+  version: 7.6.20
+  resolution: "@storybook/router@npm:7.6.20"
+  dependencies:
+    "@storybook/client-logger": "npm:7.6.20"
+    memoizerific: "npm:^1.11.3"
+    qs: "npm:^6.10.0"
+  checksum: 10/dd7a7ef64efc4d7d133be1f17667b2d8d8a0b6ee8738ce971d783fb4b0c9213d52cacc08513287e36683b3ea93f94e91b5211a458dad466006213cb1bfa12f4a
+  languageName: node
+  linkType: hard
+
+"@storybook/telemetry@npm:7.6.20":
+  version: 7.6.20
+  resolution: "@storybook/telemetry@npm:7.6.20"
+  dependencies:
+    "@storybook/client-logger": "npm:7.6.20"
+    "@storybook/core-common": "npm:7.6.20"
+    "@storybook/csf-tools": "npm:7.6.20"
+    chalk: "npm:^4.1.0"
+    detect-package-manager: "npm:^2.0.1"
+    fetch-retry: "npm:^5.0.2"
+    fs-extra: "npm:^11.1.0"
+    read-pkg-up: "npm:^7.0.1"
+  checksum: 10/ce679a0b1bf975e7de6ca77f40942ade9f549da156d40c019e9b3bbbdf87cdb5a4ffdea52b80315f6af5354e3a51e7b4241b8d514c78d7403c99648318bc3246
+  languageName: node
+  linkType: hard
+
+"@storybook/theming@npm:7.6.20":
+  version: 7.6.20
+  resolution: "@storybook/theming@npm:7.6.20"
+  dependencies:
+    "@emotion/use-insertion-effect-with-fallbacks": "npm:^1.0.0"
+    "@storybook/client-logger": "npm:7.6.20"
+    "@storybook/global": "npm:^5.0.0"
+    memoizerific: "npm:^1.11.3"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+  checksum: 10/c26ba05d8fa1ba6c9d62b1d690dc55ba56874c493a7dfef5e85df89fc1da2ce8be09d7426071e43dbb3bf16ca4bc579a94f8f1a1ab14cfd29465a6a6eca5b158
+  languageName: node
+  linkType: hard
+
+"@storybook/types@npm:7.6.20":
+  version: 7.6.20
+  resolution: "@storybook/types@npm:7.6.20"
+  dependencies:
+    "@storybook/channels": "npm:7.6.20"
+    "@types/babel__core": "npm:^7.0.0"
+    "@types/express": "npm:^4.7.0"
+    file-system-cache: "npm:2.3.0"
+  checksum: 10/8da9513f1f34f606b114026af5fad5a7658ce5e2fa7af3363d9f3d481e5e22ed9ae6343f28aa9d14208bff07f489cb7f5ae3adcad5a603f8181e952b2ee29f3f
+  languageName: node
+  linkType: hard
+
 "@svgr/babel-plugin-add-jsx-attribute@npm:^6.5.1":
   version: 6.5.1
   resolution: "@svgr/babel-plugin-add-jsx-attribute@npm:6.5.1"
@@ -10357,6 +12794,138 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@swc/core-darwin-arm64@npm:1.11.29":
+  version: 1.11.29
+  resolution: "@swc/core-darwin-arm64@npm:1.11.29"
+  conditions: os=darwin & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@swc/core-darwin-x64@npm:1.11.29":
+  version: 1.11.29
+  resolution: "@swc/core-darwin-x64@npm:1.11.29"
+  conditions: os=darwin & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@swc/core-linux-arm-gnueabihf@npm:1.11.29":
+  version: 1.11.29
+  resolution: "@swc/core-linux-arm-gnueabihf@npm:1.11.29"
+  conditions: os=linux & cpu=arm
+  languageName: node
+  linkType: hard
+
+"@swc/core-linux-arm64-gnu@npm:1.11.29":
+  version: 1.11.29
+  resolution: "@swc/core-linux-arm64-gnu@npm:1.11.29"
+  conditions: os=linux & cpu=arm64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@swc/core-linux-arm64-musl@npm:1.11.29":
+  version: 1.11.29
+  resolution: "@swc/core-linux-arm64-musl@npm:1.11.29"
+  conditions: os=linux & cpu=arm64 & libc=musl
+  languageName: node
+  linkType: hard
+
+"@swc/core-linux-x64-gnu@npm:1.11.29":
+  version: 1.11.29
+  resolution: "@swc/core-linux-x64-gnu@npm:1.11.29"
+  conditions: os=linux & cpu=x64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@swc/core-linux-x64-musl@npm:1.11.29":
+  version: 1.11.29
+  resolution: "@swc/core-linux-x64-musl@npm:1.11.29"
+  conditions: os=linux & cpu=x64 & libc=musl
+  languageName: node
+  linkType: hard
+
+"@swc/core-win32-arm64-msvc@npm:1.11.29":
+  version: 1.11.29
+  resolution: "@swc/core-win32-arm64-msvc@npm:1.11.29"
+  conditions: os=win32 & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@swc/core-win32-ia32-msvc@npm:1.11.29":
+  version: 1.11.29
+  resolution: "@swc/core-win32-ia32-msvc@npm:1.11.29"
+  conditions: os=win32 & cpu=ia32
+  languageName: node
+  linkType: hard
+
+"@swc/core-win32-x64-msvc@npm:1.11.29":
+  version: 1.11.29
+  resolution: "@swc/core-win32-x64-msvc@npm:1.11.29"
+  conditions: os=win32 & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@swc/core@npm:^1.3.82":
+  version: 1.11.29
+  resolution: "@swc/core@npm:1.11.29"
+  dependencies:
+    "@swc/core-darwin-arm64": "npm:1.11.29"
+    "@swc/core-darwin-x64": "npm:1.11.29"
+    "@swc/core-linux-arm-gnueabihf": "npm:1.11.29"
+    "@swc/core-linux-arm64-gnu": "npm:1.11.29"
+    "@swc/core-linux-arm64-musl": "npm:1.11.29"
+    "@swc/core-linux-x64-gnu": "npm:1.11.29"
+    "@swc/core-linux-x64-musl": "npm:1.11.29"
+    "@swc/core-win32-arm64-msvc": "npm:1.11.29"
+    "@swc/core-win32-ia32-msvc": "npm:1.11.29"
+    "@swc/core-win32-x64-msvc": "npm:1.11.29"
+    "@swc/counter": "npm:^0.1.3"
+    "@swc/types": "npm:^0.1.21"
+  peerDependencies:
+    "@swc/helpers": ">=0.5.17"
+  dependenciesMeta:
+    "@swc/core-darwin-arm64":
+      optional: true
+    "@swc/core-darwin-x64":
+      optional: true
+    "@swc/core-linux-arm-gnueabihf":
+      optional: true
+    "@swc/core-linux-arm64-gnu":
+      optional: true
+    "@swc/core-linux-arm64-musl":
+      optional: true
+    "@swc/core-linux-x64-gnu":
+      optional: true
+    "@swc/core-linux-x64-musl":
+      optional: true
+    "@swc/core-win32-arm64-msvc":
+      optional: true
+    "@swc/core-win32-ia32-msvc":
+      optional: true
+    "@swc/core-win32-x64-msvc":
+      optional: true
+  peerDependenciesMeta:
+    "@swc/helpers":
+      optional: true
+  checksum: 10/6945229bf6da91adff26033910e8e02ccc457a8229724d0539a0b32995d05949c7709cb9cae2cd7ab10cf4d346b235e22dd4d6b207ded765597304e21e6b6101
+  languageName: node
+  linkType: hard
+
+"@swc/counter@npm:^0.1.3":
+  version: 0.1.3
+  resolution: "@swc/counter@npm:0.1.3"
+  checksum: 10/df8f9cfba9904d3d60f511664c70d23bb323b3a0803ec9890f60133954173047ba9bdeabce28cd70ba89ccd3fd6c71c7b0bd58be85f611e1ffbe5d5c18616598
+  languageName: node
+  linkType: hard
+
+"@swc/types@npm:^0.1.21":
+  version: 0.1.21
+  resolution: "@swc/types@npm:0.1.21"
+  dependencies:
+    "@swc/counter": "npm:^0.1.3"
+  checksum: 10/6554bf5c78519f49099a2ba448d170191a14b1c7a35df848f10ee4d6c03ecd681e5213884905187de1d1d221589ec8b5cb77f477d099dc1627c3ec9d7f2fcdb0
+  languageName: node
+  linkType: hard
+
 "@szmarczak/http-timer@npm:^4.0.5":
   version: 4.0.6
   resolution: "@szmarczak/http-timer@npm:4.0.6"
@@ -10366,22 +12935,22 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@tanstack/react-table@npm:^8.5.22":
-  version: 8.7.9
-  resolution: "@tanstack/react-table@npm:8.7.9"
+"@tanstack/react-table@npm:^8.20.6":
+  version: 8.21.3
+  resolution: "@tanstack/react-table@npm:8.21.3"
   dependencies:
-    "@tanstack/table-core": "npm:8.7.9"
+    "@tanstack/table-core": "npm:8.21.3"
   peerDependencies:
-    react: ">=16"
-    react-dom: ">=16"
-  checksum: 10/eaaa35b1a9037d91c5c68cbcde951817c7742e55678fefe8460472db8de5712f85d5e0860624755f077a602fc091b7224c9518d2998e28b00815857131a20426
+    react: ">=16.8"
+    react-dom: ">=16.8"
+  checksum: 10/a32217ebe64d24e71dea6a6742bc288dcabf389657b16805a1ab3f347d3dca8262759c45c604a1f65bd97925d5cbdfb66d1be7637100a12eb5b279bdd420962d
   languageName: node
   linkType: hard
 
-"@tanstack/table-core@npm:8.7.9":
-  version: 8.7.9
-  resolution: "@tanstack/table-core@npm:8.7.9"
-  checksum: 10/2bc2ae77885d643ac1d4afefb6e7651247f9b3e78c7d7f67d71700b368898da154e11b98ce01e1885c5201e0707e4734200c04f94ae62236c126f8e61a9f094b
+"@tanstack/table-core@npm:8.21.3":
+  version: 8.21.3
+  resolution: "@tanstack/table-core@npm:8.21.3"
+  checksum: 10/aa05e5f80110f0f56d66161e950668ea6ef3e2ea4f3a2ccd5d5980b39b4feea987245b20531aee2c6743e6edd12c0361503413b63090c807f88a61b19bfd04f3
   languageName: node
   linkType: hard
 
@@ -10618,6 +13187,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/babel__core@npm:^7.0.0, @types/babel__core@npm:^7.18.0":
+  version: 7.20.5
+  resolution: "@types/babel__core@npm:7.20.5"
+  dependencies:
+    "@babel/parser": "npm:^7.20.7"
+    "@babel/types": "npm:^7.20.7"
+    "@types/babel__generator": "npm:*"
+    "@types/babel__template": "npm:*"
+    "@types/babel__traverse": "npm:*"
+  checksum: 10/c32838d280b5ab59d62557f9e331d3831f8e547ee10b4f85cb78753d97d521270cebfc73ce501e9fb27fe71884d1ba75e18658692c2f4117543f0fc4e3e118b3
+  languageName: node
+  linkType: hard
+
 "@types/babel__core@npm:^7.1.14":
   version: 7.20.0
   resolution: "@types/babel__core@npm:7.20.0"
@@ -10659,6 +13241,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/babel__traverse@npm:^7.18.0":
+  version: 7.20.7
+  resolution: "@types/babel__traverse@npm:7.20.7"
+  dependencies:
+    "@babel/types": "npm:^7.20.7"
+  checksum: 10/d005b58e1c26bdafc1ce564f60db0ee938393c7fc586b1197bdb71a02f7f33f72bc10ae4165776b6cafc77c4b6f2e1a164dd20bc36518c471b1131b153b4baa6
+  languageName: node
+  linkType: hard
+
 "@types/body-parser@npm:*":
   version: 1.19.5
   resolution: "@types/body-parser@npm:1.19.5"
@@ -10737,6 +13328,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/cross-spawn@npm:^6.0.2":
+  version: 6.0.6
+  resolution: "@types/cross-spawn@npm:6.0.6"
+  dependencies:
+    "@types/node": "npm:*"
+  checksum: 10/b4172927cd1387cf037c3ade785ef46c87537b7bc2803d7f6663b4904d0c5d6f726415d1adb2fee4fecb21746738f11336076449265d46be4ce110cc3a8c8436
+  languageName: node
+  linkType: hard
+
 "@types/crypto-js@npm:^4.2.2":
   version: 4.2.2
   resolution: "@types/crypto-js@npm:4.2.2"
@@ -10744,6 +13344,48 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/detect-port@npm:^1.3.0":
+  version: 1.3.5
+  resolution: "@types/detect-port@npm:1.3.5"
+  checksum: 10/923cf04c6a05af59090743baeb9948f1938ceb98c1f7ea93db7ac310210426b385aa00005d23039ebb8019a9d13e141f5246e9c733b290885018d722a4787921
+  languageName: node
+  linkType: hard
+
+"@types/doctrine@npm:^0.0.3":
+  version: 0.0.3
+  resolution: "@types/doctrine@npm:0.0.3"
+  checksum: 10/398c30efc903a750c71166c7385d763c98605723dfae23f0134d6de4d365a8f0a5585a0fe6f959569ff33646e7f43fa83bacb5f2a4d5929cd0f6163d06e4f6b3
+  languageName: node
+  linkType: hard
+
+"@types/doctrine@npm:^0.0.9":
+  version: 0.0.9
+  resolution: "@types/doctrine@npm:0.0.9"
+  checksum: 10/64ef06e6eea2f4f9684d259fedbcb8bf21c954630b96ea2e04875ca42763552b0ba3b01b3dd27ec0f9ea6f8b3b0dba4965d31d5a925cd4c6225fd13a93ae9354
+  languageName: node
+  linkType: hard
+
+"@types/ejs@npm:^3.1.1":
+  version: 3.1.5
+  resolution: "@types/ejs@npm:3.1.5"
+  checksum: 10/918898fd279108087722c1713e2ddb0c152ab839397946d164db8a18b5bbd732af9746373882a9bcf4843d35c6b191a8f569a7a4e51e90726d24501b39f40367
+  languageName: node
+  linkType: hard
+
+"@types/emscripten@npm:^1.39.6":
+  version: 1.40.1
+  resolution: "@types/emscripten@npm:1.40.1"
+  checksum: 10/d1aa8b91416c0d8ea7d2f3b99c8c40327350dff632ad98cb67f9df9afa13efd4d755c273b49a37797390a94180c7cc98397bbbe1d8def4ea1d5d3bff9c816ac9
+  languageName: node
+  linkType: hard
+
+"@types/escodegen@npm:^0.0.6":
+  version: 0.0.6
+  resolution: "@types/escodegen@npm:0.0.6"
+  checksum: 10/2e91554a47eb98076a3ba6e3548640e50b28a0f5b69134f99dd1e0ce5223c0a1726f23d25aafd40e4c7961d7c3c519782949aa606d58d0e7431c7fb1ec011c4c
+  languageName: node
+  linkType: hard
+
 "@types/eslint-scope@npm:^3.7.7":
   version: 3.7.7
   resolution: "@types/eslint-scope@npm:3.7.7"
@@ -10781,6 +13423,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/estree@npm:^0.0.51":
+  version: 0.0.51
+  resolution: "@types/estree@npm:0.0.51"
+  checksum: 10/b566c7a3fc8a81ca3d9e00a717e90b8f5d567e2476b4f6d76a20ec6da33ec28165b8f989ed8dd0c9df41405199777ec36a4f85f32a347fbc6c3f696a3128b6e7
+  languageName: node
+  linkType: hard
+
 "@types/estree@npm:^1.0.6":
   version: 1.0.6
   resolution: "@types/estree@npm:1.0.6"
@@ -10812,6 +13461,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/express@npm:^4.7.0":
+  version: 4.17.22
+  resolution: "@types/express@npm:4.17.22"
+  dependencies:
+    "@types/body-parser": "npm:*"
+    "@types/express-serve-static-core": "npm:^4.17.33"
+    "@types/qs": "npm:*"
+    "@types/serve-static": "npm:*"
+  checksum: 10/9497634fc341ff4ac966ec0c529ded03bdacd2c3dae164f10a060ff250c66591b873aedce92d0239869cf3d05615ae9bcad584c7349fe68780242f6fef010c62
+  languageName: node
+  linkType: hard
+
 "@types/extract-zip@npm:^1.6.2":
   version: 1.6.2
   resolution: "@types/extract-zip@npm:1.6.2"
@@ -10826,6 +13487,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/find-cache-dir@npm:^3.2.1":
+  version: 3.2.1
+  resolution: "@types/find-cache-dir@npm:3.2.1"
+  checksum: 10/bf5c4e96da40247cd9e6327f54dfccda961a0fb2d70e3c71bd05def94de4c2e6fb310fe8ecb0f04ecf5dbc52214e184b55a2337b0f87250d4ae1e2e7d58321e4
+  languageName: node
+  linkType: hard
+
 "@types/folder-hash@npm:^4.0.4":
   version: 4.0.4
   resolution: "@types/folder-hash@npm:4.0.4"
@@ -11009,7 +13677,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/json-schema@npm:^7.0.12":
+"@types/json-schema@npm:^7.0.12, @types/json-schema@npm:^7.0.15":
   version: 7.0.15
   resolution: "@types/json-schema@npm:7.0.15"
   checksum: 10/1a3c3e06236e4c4aab89499c428d585527ce50c24fe8259e8b3926d3df4cfbbbcf306cfc73ddfb66cbafc973116efd15967020b0f738f63e09e64c7d260519e7
@@ -11092,6 +13760,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/lodash@npm:^4.14.167":
+  version: 4.17.17
+  resolution: "@types/lodash@npm:4.17.17"
+  checksum: 10/496459a3cb1a0733bb60532de3899ad6297717af0b9b26ad6821154b2005fec86f29ccd47a2e6f4da4a8c7c818bb8ae73901144e8057ea86b7b02a3d7bb9d13f
+  languageName: node
+  linkType: hard
+
 "@types/lodash@npm:^4.17.13":
   version: 4.17.13
   resolution: "@types/lodash@npm:4.17.13"
@@ -11106,6 +13781,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/mdx@npm:^2.0.0":
+  version: 2.0.13
+  resolution: "@types/mdx@npm:2.0.13"
+  checksum: 10/b73ed5f08114879b9590dc6a9ee8b648643c57c708583cd24b2bc3cc8961361fc63139ac7e9291e7b3b6e6b45707749d01d6f9727ddec5533df75dc3b90871a4
+  languageName: node
+  linkType: hard
+
 "@types/medium-editor@npm:^5.0.3":
   version: 5.0.5
   resolution: "@types/medium-editor@npm:5.0.5"
@@ -11113,6 +13795,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/mime-types@npm:^2.1.0":
+  version: 2.1.4
+  resolution: "@types/mime-types@npm:2.1.4"
+  checksum: 10/f8c521c54ee0c0b9f90a65356a80b1413ed27ccdc94f5c7ebb3de5d63cedb559cd2610ea55b4100805c7349606a920d96e54f2d16b2f0afa6b7cd5253967ccc9
+  languageName: node
+  linkType: hard
+
 "@types/mime@npm:*":
   version: 3.0.4
   resolution: "@types/mime@npm:3.0.4"
@@ -11184,6 +13873,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/node-fetch@npm:^2.6.4":
+  version: 2.6.12
+  resolution: "@types/node-fetch@npm:2.6.12"
+  dependencies:
+    "@types/node": "npm:*"
+    form-data: "npm:^4.0.0"
+  checksum: 10/8107c479da83a3114fcbfa882eba95ee5175cccb5e4dd53f737a96f2559ae6262f662176b8457c1656de09ec393cc7b20a266c077e4bfb21e929976e1cf4d0f9
+  languageName: node
+  linkType: hard
+
 "@types/node-forge@npm:^1.3.0":
   version: 1.3.11
   resolution: "@types/node-forge@npm:1.3.11"
@@ -11211,6 +13910,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/node@npm:^18.0.0":
+  version: 18.19.104
+  resolution: "@types/node@npm:18.19.104"
+  dependencies:
+    undici-types: "npm:~5.26.4"
+  checksum: 10/da12e9f9caa2bb6dbe67aafea64c7608842378b5744db1d2f476c02fa4a53cc60322024a2c3b43373a0807d2dc3580e2af77e774d675e2c943a6c8357ce6402f
+  languageName: node
+  linkType: hard
+
 "@types/node@npm:^20.17.10":
   version: 20.17.10
   resolution: "@types/node@npm:20.17.10"
@@ -11236,13 +13944,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/nprogress@npm:^0.2.0":
-  version: 0.2.0
-  resolution: "@types/nprogress@npm:0.2.0"
-  checksum: 10/031a685af2d7c7f43f34f124e32954efbfbb1773ebcf5af70b43dc01631f949b4288bbdccdc0d1e33abcb982fa9155538c5ccf0ceced45beef023a74478657f0
-  languageName: node
-  linkType: hard
-
 "@types/object-hash@npm:^2.2.1":
   version: 2.2.1
   resolution: "@types/object-hash@npm:2.2.1"
@@ -11285,6 +13986,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/pretty-hrtime@npm:^1.0.0":
+  version: 1.0.3
+  resolution: "@types/pretty-hrtime@npm:1.0.3"
+  checksum: 10/288061dff992c8107d5c7b5a1277bbb0a314a27eb10087dea628a08fa37694a655191a69e25a212c95e61e498363c48ad9e281d23964a448f6c14100a6be0910
+  languageName: node
+  linkType: hard
+
 "@types/prismjs@npm:^1.26.4":
   version: 1.26.4
   resolution: "@types/prismjs@npm:1.26.4"
@@ -11306,6 +14014,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/qs@npm:^6.9.5":
+  version: 6.14.0
+  resolution: "@types/qs@npm:6.14.0"
+  checksum: 10/1909205514d22b3cbc7c2314e2bd8056d5f05dfb21cf4377f0730ee5e338ea19957c41735d5e4806c746176563f50005bbab602d8358432e25d900bdf4970826
+  languageName: node
+  linkType: hard
+
 "@types/range-parser@npm:*":
   version: 1.2.7
   resolution: "@types/range-parser@npm:1.2.7"
@@ -11386,22 +14101,22 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react-transition-group@npm:^4.4.4":
-  version: 4.4.5
-  resolution: "@types/react-transition-group@npm:4.4.5"
-  dependencies:
-    "@types/react": "npm:*"
-  checksum: 10/5ea4d14eb0834e493a9896c6d0b6833f20dbaea394455fd6226af97385863a111bec51900e304ea1af5be3d7f8e193b215c2bc9379b26eff2b9cefefc440f5f2
+"@types/react-transition-group@npm:^4.4.12":
+  version: 4.4.12
+  resolution: "@types/react-transition-group@npm:4.4.12"
+  peerDependencies:
+    "@types/react": "*"
+  checksum: 10/ea14bc84f529a3887f9954b753843820ac8a3c49fcdfec7840657ecc6a8800aad98afdbe4b973eb96c7252286bde38476fcf64b1c09527354a9a9366e516d9a2
   languageName: node
   linkType: hard
 
-"@types/react-virtualized@npm:^9.21.16":
-  version: 9.21.21
-  resolution: "@types/react-virtualized@npm:9.21.21"
+"@types/react-virtualized@npm:^9.22.0":
+  version: 9.22.2
+  resolution: "@types/react-virtualized@npm:9.22.2"
   dependencies:
     "@types/prop-types": "npm:*"
-    "@types/react": "npm:^17"
-  checksum: 10/549ada449c05347035520297b7d6f145ebd298d0c0dd304848c6c575f2291c33b4429b29a05123fb7a8767e2e43167c3433234a49209d08f0fe6aef4e6b013cd
+    "@types/react": "npm:*"
+  checksum: 10/3a95451cbedcf25da9db627239b7a61167c2fa44ec4bb19a8c5dce2560a207f5fb6a80fd2e44dda539fbe8f5ae67fe8a1b5094e901166f3ebfa85d79b98bb1fe
   languageName: node
   linkType: hard
 
@@ -11441,6 +14156,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/resolve@npm:^1.20.2":
+  version: 1.20.6
+  resolution: "@types/resolve@npm:1.20.6"
+  checksum: 10/dc35f5517606b6687cd971c0281ac58bdee2c50c051b030f04647d3991688be2259c304ee97e5b5d4b9936072c36767eb5933b54611a407d6557972bb6fea4f6
+  languageName: node
+  linkType: hard
+
 "@types/responselike@npm:^1.0.0":
   version: 1.0.3
   resolution: "@types/responselike@npm:1.0.3"
@@ -11600,6 +14322,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/tinycolor2@npm:^1.4.6":
+  version: 1.4.6
+  resolution: "@types/tinycolor2@npm:1.4.6"
+  checksum: 10/a662fd177135d27779b7ccba39881a85167f969787c71c7bf51903d288a519ad5b9526e0a4af7bde6444df6b7abe88bae893d569c6d804108c03dfec9509bdf6
+  languageName: node
+  linkType: hard
+
 "@types/tmp@npm:^0.2.6":
   version: 0.2.6
   resolution: "@types/tmp@npm:0.2.6"
@@ -11614,6 +14343,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/unist@npm:^2.0.0":
+  version: 2.0.11
+  resolution: "@types/unist@npm:2.0.11"
+  checksum: 10/6d436e832bc35c6dde9f056ac515ebf2b3384a1d7f63679d12358766f9b313368077402e9c1126a14d827f10370a5485e628bf61aa91117cf4fc882423191a4e
+  languageName: node
+  linkType: hard
+
 "@types/unzipper@npm:^0.10.10":
   version: 0.10.10
   resolution: "@types/unzipper@npm:0.10.10"
@@ -12341,6 +15077,77 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@webiny/admin-ui@npm:0.0.0, @webiny/admin-ui@workspace:packages/admin-ui":
+  version: 0.0.0-use.local
+  resolution: "@webiny/admin-ui@workspace:packages/admin-ui"
+  dependencies:
+    "@editorjs/editorjs": "npm:2.26.5"
+    "@fortawesome/fontawesome-svg-core": "npm:^1.3.0"
+    "@fortawesome/free-solid-svg-icons": "npm:^6.0.0"
+    "@fortawesome/react-fontawesome": "npm:^0.1.17"
+    "@radix-ui/react-accessible-icon": "npm:^1.1.2"
+    "@radix-ui/react-avatar": "npm:^1.1.3"
+    "@radix-ui/react-checkbox": "npm:^1.1.4"
+    "@radix-ui/react-collapsible": "npm:^1.1.3"
+    "@radix-ui/react-dialog": "npm:^1.1.6"
+    "@radix-ui/react-dropdown-menu": "npm:^2.1.6"
+    "@radix-ui/react-label": "npm:^2.1.2"
+    "@radix-ui/react-popover": "npm:^1.1.6"
+    "@radix-ui/react-progress": "npm:^1.1.7"
+    "@radix-ui/react-radio-group": "npm:^1.2.3"
+    "@radix-ui/react-select": "npm:^2.1.6"
+    "@radix-ui/react-separator": "npm:^1.1.2"
+    "@radix-ui/react-slider": "npm:^1.2.3"
+    "@radix-ui/react-slot": "npm:^1.1.2"
+    "@radix-ui/react-switch": "npm:^1.1.3"
+    "@radix-ui/react-tabs": "npm:^1.1.3"
+    "@radix-ui/react-tooltip": "npm:^1.1.8"
+    "@storybook/addon-a11y": "npm:7.6.20"
+    "@storybook/addon-essentials": "npm:7.6.20"
+    "@storybook/react": "npm:7.6.20"
+    "@storybook/react-webpack5": "npm:7.6.20"
+    "@storybook/theming": "npm:7.6.20"
+    "@svgr/webpack": "npm:^6.1.1"
+    "@tanstack/react-table": "npm:^8.20.6"
+    "@types/react": "npm:18.2.79"
+    "@types/react-color": "npm:^2.17.11"
+    "@types/react-custom-scrollbars": "npm:^4.0.10"
+    "@types/react-virtualized": "npm:^9.22.0"
+    "@webiny/cli": "npm:0.0.0"
+    "@webiny/icons": "npm:0.0.0"
+    "@webiny/project-utils": "npm:0.0.0"
+    "@webiny/react-composition": "npm:0.0.0"
+    "@webiny/react-router": "npm:0.0.0"
+    "@webiny/utils": "npm:0.0.0"
+    ace-builds: "npm:^1.37.1"
+    bytes: "npm:^3.1.2"
+    chalk: "npm:^4.1.2"
+    class-variance-authority: "npm:^0.7.0"
+    clsx: "npm:^2.1.1"
+    cmdk: "npm:^1.0.4"
+    css-loader: "npm:^6.10.0"
+    file-loader: "npm:6.2.0"
+    lodash: "npm:^4.17.21"
+    mobx: "npm:^6.9.0"
+    postcss-loader: "npm:^6.2.1"
+    prettier: "npm:^2.8.8"
+    react: "npm:18.2.0"
+    react-ace: "npm:^13.0.0"
+    react-color: "npm:^2.19.3"
+    react-custom-scrollbars: "npm:^4.2.1"
+    react-virtualized: "npm:^9.22.5"
+    rimraf: "npm:^6.0.1"
+    sass: "npm:1.44.0"
+    sonner: "npm:^2.0.1"
+    storybook: "npm:7.6.20"
+    tailwind-merge: "npm:^2.4.0"
+    tailwindcss: "npm:^3.4.6"
+    tailwindcss-animate: "npm:^1.0.7"
+    timeago-react: "npm:^3.0.6"
+    typescript: "npm:5.3.3"
+  languageName: unknown
+  linkType: soft
+
 "@webiny/api-aco@npm:0.0.0, @webiny/api-aco@workspace:packages/api-aco":
   version: 0.0.0-use.local
   resolution: "@webiny/api-aco@workspace:packages/api-aco"
@@ -12357,6 +15164,8 @@ __metadata:
     "@webiny/api-tenancy": "npm:0.0.0"
     "@webiny/api-tenancy-so-ddb": "npm:0.0.0"
     "@webiny/api-wcp": "npm:0.0.0"
+    "@webiny/aws-sdk": "npm:0.0.0"
+    "@webiny/db-dynamodb": "npm:0.0.0"
     "@webiny/error": "npm:0.0.0"
     "@webiny/handler": "npm:0.0.0"
     "@webiny/handler-aws": "npm:0.0.0"
@@ -12364,6 +15173,8 @@ __metadata:
     "@webiny/plugins": "npm:0.0.0"
     "@webiny/project-utils": "npm:0.0.0"
     "@webiny/pubsub": "npm:0.0.0"
+    "@webiny/shared-aco": "npm:0.0.0"
+    "@webiny/tasks": "npm:0.0.0"
     "@webiny/utils": "npm:0.0.0"
     "@webiny/validation": "npm:0.0.0"
     "@webiny/wcp": "npm:0.0.0"
@@ -12621,6 +15432,7 @@ __metadata:
     "@webiny/handler-aws": "npm:0.0.0"
     "@webiny/plugins": "npm:0.0.0"
     "@webiny/project-utils": "npm:0.0.0"
+    "@webiny/utils": "npm:0.0.0"
     p-retry: "npm:^4.6.2"
     typescript: "npm:5.3.3"
   languageName: unknown
@@ -12666,7 +15478,6 @@ __metadata:
     "@webiny/error": "npm:0.0.0"
     "@webiny/plugins": "npm:0.0.0"
     "@webiny/project-utils": "npm:0.0.0"
-    "@webiny/utils": "npm:0.0.0"
     aws-elasticsearch-connector: "patch:aws-elasticsearch-connector@npm%3A9.2.0#~/.yarn/patches/aws-elasticsearch-connector-npm-9.2.0-e1245671b1.patch"
     elastic-ts: "npm:^0.12.0"
     rimraf: "npm:^6.0.1"
@@ -12694,7 +15505,7 @@ __metadata:
     "@webiny/wcp": "npm:0.0.0"
     graphql: "npm:^15.9.0"
     ttypescript: "npm:^1.5.15"
-    typescript: "npm:4.9.5"
+    typescript: "npm:5.3.3"
   languageName: unknown
   linkType: soft
 
@@ -12702,6 +15513,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@webiny/api-file-manager-ddb@workspace:packages/api-file-manager-ddb"
   dependencies:
+    "@webiny/api": "npm:0.0.0"
     "@webiny/api-file-manager": "npm:0.0.0"
     "@webiny/aws-sdk": "npm:0.0.0"
     "@webiny/db-dynamodb": "npm:0.0.0"
@@ -12783,6 +15595,7 @@ __metadata:
   resolution: "@webiny/api-form-builder-so-ddb-es@workspace:packages/api-form-builder-so-ddb-es"
   dependencies:
     "@elastic/elasticsearch": "npm:7.12.0"
+    "@webiny/api": "npm:0.0.0"
     "@webiny/api-dynamodb-to-elasticsearch": "npm:0.0.0"
     "@webiny/api-elasticsearch": "npm:0.0.0"
     "@webiny/api-elasticsearch-tasks": "npm:0.0.0"
@@ -12808,6 +15621,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@webiny/api-form-builder-so-ddb@workspace:packages/api-form-builder-so-ddb"
   dependencies:
+    "@webiny/api": "npm:0.0.0"
     "@webiny/api-form-builder": "npm:0.0.0"
     "@webiny/aws-sdk": "npm:0.0.0"
     "@webiny/db-dynamodb": "npm:0.0.0"
@@ -12941,7 +15755,6 @@ __metadata:
     dataloader: "npm:^2.2.2"
     jest: "npm:^29.7.0"
     jest-dynalite: "npm:^3.6.1"
-    jsonpack: "npm:^1.1.5"
     lodash: "npm:^4.17.21"
     prettier: "npm:^2.8.8"
     rimraf: "npm:^6.0.1"
@@ -12967,7 +15780,6 @@ __metadata:
     dot-prop: "npm:^6.0.1"
     jest: "npm:^29.7.0"
     jest-dynalite: "npm:^3.6.1"
-    jsonpack: "npm:^1.1.5"
     lodash: "npm:^4.17.21"
     typescript: "npm:5.3.3"
   languageName: unknown
@@ -13378,6 +16190,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@webiny/api-page-builder-so-ddb@workspace:packages/api-page-builder-so-ddb"
   dependencies:
+    "@webiny/api": "npm:0.0.0"
     "@webiny/api-page-builder": "npm:0.0.0"
     "@webiny/api-security": "npm:0.0.0"
     "@webiny/api-tenancy": "npm:0.0.0"
@@ -13820,6 +16633,7 @@ __metadata:
     "@webiny/aws-sdk": "npm:0.0.0"
     "@webiny/plugins": "npm:0.0.0"
     "@webiny/project-utils": "npm:0.0.0"
+    "@webiny/utils": "npm:0.0.0"
     rimraf: "npm:^6.0.1"
     typescript: "npm:5.3.3"
   languageName: unknown
@@ -13830,12 +16644,9 @@ __metadata:
   resolution: "@webiny/app-aco@workspace:packages/app-aco"
   dependencies:
     "@apollo/react-hooks": "npm:^3.1.5"
-    "@emotion/react": "npm:11.10.8"
-    "@emotion/styled": "npm:11.10.6"
-    "@material-design-icons/svg": "npm:^0.14.13"
-    "@material-symbols/svg-400": "npm:^0.4.1"
     "@minoru/react-dnd-treeview": "npm:3.2.1"
     "@types/react": "npm:18.2.79"
+    "@webiny/admin-ui": "npm:0.0.0"
     "@webiny/app": "npm:0.0.0"
     "@webiny/app-admin": "npm:0.0.0"
     "@webiny/app-headless-cms-common": "npm:0.0.0"
@@ -13843,11 +16654,12 @@ __metadata:
     "@webiny/app-utils": "npm:0.0.0"
     "@webiny/app-wcp": "npm:0.0.0"
     "@webiny/form": "npm:0.0.0"
+    "@webiny/icons": "npm:0.0.0"
     "@webiny/plugins": "npm:0.0.0"
     "@webiny/project-utils": "npm:0.0.0"
     "@webiny/react-properties": "npm:0.0.0"
     "@webiny/react-router": "npm:0.0.0"
-    "@webiny/ui": "npm:0.0.0"
+    "@webiny/shared-aco": "npm:0.0.0"
     "@webiny/utils": "npm:0.0.0"
     "@webiny/validation": "npm:0.0.0"
     apollo-client: "npm:^2.6.10"
@@ -13878,6 +16690,7 @@ __metadata:
     "@apollo/react-hooks": "npm:^3.1.5"
     "@auth0/auth0-react": "npm:^2.2.4"
     "@emotion/styled": "npm:11.10.6"
+    "@webiny/admin-ui": "npm:0.0.0"
     "@webiny/app": "npm:0.0.0"
     "@webiny/app-admin": "npm:0.0.0"
     "@webiny/app-security": "npm:0.0.0"
@@ -13885,6 +16698,7 @@ __metadata:
     "@webiny/app-tenancy": "npm:0.0.0"
     "@webiny/app-tenant-manager": "npm:0.0.0"
     "@webiny/form": "npm:0.0.0"
+    "@webiny/icons": "npm:0.0.0"
     "@webiny/plugins": "npm:0.0.0"
     "@webiny/project-utils": "npm:0.0.0"
     "@webiny/react-router": "npm:0.0.0"
@@ -13910,7 +16724,7 @@ __metadata:
   dependencies:
     "@apollo/react-hooks": "npm:^3.1.5"
     "@aws-amplify/auth": "npm:^5.6.15"
-    "@emotion/styled": "npm:11.10.6"
+    "@webiny/admin-ui": "npm:0.0.0"
     "@webiny/app": "npm:0.0.0"
     "@webiny/app-admin": "npm:0.0.0"
     "@webiny/app-cognito-authenticator": "npm:0.0.0"
@@ -13919,11 +16733,9 @@ __metadata:
     "@webiny/plugins": "npm:0.0.0"
     "@webiny/project-utils": "npm:0.0.0"
     "@webiny/react-composition": "npm:0.0.0"
-    "@webiny/ui": "npm:0.0.0"
     "@webiny/validation": "npm:0.0.0"
     apollo-client: "npm:^2.6.10"
     apollo-link-context: "npm:^1.0.20"
-    emotion: "npm:10.0.27"
     react: "npm:18.2.0"
     react-dom: "npm:18.2.0"
     rimraf: "npm:^6.0.1"
@@ -13940,6 +16752,7 @@ __metadata:
     "@okta/okta-auth-js": "npm:^5.3.1"
     "@okta/okta-react": "npm:^6.1.0"
     "@okta/okta-signin-widget": "npm:^5.9.4"
+    "@webiny/admin-ui": "npm:0.0.0"
     "@webiny/app": "npm:0.0.0"
     "@webiny/app-admin": "npm:0.0.0"
     "@webiny/app-security": "npm:0.0.0"
@@ -13947,6 +16760,7 @@ __metadata:
     "@webiny/app-tenancy": "npm:0.0.0"
     "@webiny/app-tenant-manager": "npm:0.0.0"
     "@webiny/form": "npm:0.0.0"
+    "@webiny/icons": "npm:0.0.0"
     "@webiny/plugins": "npm:0.0.0"
     "@webiny/project-utils": "npm:0.0.0"
     "@webiny/ui": "npm:0.0.0"
@@ -13965,37 +16779,27 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@webiny/app-admin-rmwc@npm:0.0.0, @webiny/app-admin-rmwc@workspace:packages/app-admin-rmwc":
+"@webiny/app-admin-ui@npm:0.0.0, @webiny/app-admin-ui@workspace:packages/app-admin-ui":
   version: 0.0.0-use.local
-  resolution: "@webiny/app-admin-rmwc@workspace:packages/app-admin-rmwc"
+  resolution: "@webiny/app-admin-ui@workspace:packages/app-admin-ui"
   dependencies:
     "@emotion/babel-plugin": "npm:^11.11.0"
-    "@emotion/styled": "npm:11.10.6"
-    "@material-design-icons/svg": "npm:^0.14.13"
-    "@rmwc/base": "npm:14.3.5"
-    "@rmwc/provider": "npm:14.3.5"
     "@types/react": "npm:18.2.79"
     "@types/react-helmet": "npm:^6.1.11"
+    "@webiny/admin-ui": "npm:0.0.0"
     "@webiny/app": "npm:0.0.0"
     "@webiny/app-admin": "npm:0.0.0"
     "@webiny/app-plugin-admin-welcome-screen": "npm:0.0.0"
     "@webiny/app-security": "npm:0.0.0"
-    "@webiny/feature-flags": "npm:0.0.0"
+    "@webiny/icons": "npm:0.0.0"
     "@webiny/plugins": "npm:0.0.0"
     "@webiny/project-utils": "npm:0.0.0"
     "@webiny/react-router": "npm:0.0.0"
-    "@webiny/ui": "npm:0.0.0"
     babel-plugin-named-asset-import: "npm:^1.0.0-next.3e165448"
-    classnames: "npm:^2.5.1"
-    emotion: "npm:10.0.27"
-    lodash: "npm:^4.17.21"
     react: "npm:18.2.0"
     react-dom: "npm:18.2.0"
     react-helmet: "npm:^6.1.0"
-    react-hotkeyz: "npm:^1.0.4"
-    react-transition-group: "npm:^4.4.5"
     rimraf: "npm:^6.0.1"
-    store: "npm:^2.0.12"
     typescript: "npm:5.3.3"
   languageName: unknown
   linkType: soft
@@ -14006,6 +16810,7 @@ __metadata:
   dependencies:
     "@apollo/react-hooks": "npm:^3.1.5"
     "@emotion/styled": "npm:11.10.6"
+    "@webiny/admin-ui": "npm:0.0.0"
     "@webiny/app": "npm:0.0.0"
     "@webiny/app-admin": "npm:0.0.0"
     "@webiny/app-admin-cognito": "npm:0.0.0"
@@ -14013,6 +16818,7 @@ __metadata:
     "@webiny/app-security-access-management": "npm:0.0.0"
     "@webiny/app-tenancy": "npm:0.0.0"
     "@webiny/form": "npm:0.0.0"
+    "@webiny/icons": "npm:0.0.0"
     "@webiny/plugins": "npm:0.0.0"
     "@webiny/project-utils": "npm:0.0.0"
     "@webiny/react-router": "npm:0.0.0"
@@ -14042,7 +16848,6 @@ __metadata:
     "@emotion/react": "npm:11.10.8"
     "@emotion/styled": "npm:11.10.6"
     "@iconify/json": "npm:^2.2.142"
-    "@material-design-icons/svg": "npm:^0.14.13"
     "@monaco-editor/react": "npm:^4.7.0"
     "@svgr/webpack": "npm:^6.1.1"
     "@types/bytes": "npm:^3.1.4"
@@ -14051,13 +16856,17 @@ __metadata:
     "@types/mime": "npm:^2.0.3"
     "@types/react": "npm:18.2.79"
     "@types/react-resizable": "npm:^3.0.8"
+    "@types/react-transition-group": "npm:^4.4.12"
     "@types/store": "npm:^2.0.2"
+    "@types/tinycolor2": "npm:^1.4.6"
+    "@webiny/admin-ui": "npm:0.0.0"
     "@webiny/app": "npm:0.0.0"
     "@webiny/app-security": "npm:0.0.0"
     "@webiny/app-theme": "npm:0.0.0"
     "@webiny/app-wcp": "npm:0.0.0"
     "@webiny/cli": "npm:0.0.0"
     "@webiny/form": "npm:0.0.0"
+    "@webiny/icons": "npm:0.0.0"
     "@webiny/lexical-editor": "npm:0.0.0"
     "@webiny/lexical-theme": "npm:0.0.0"
     "@webiny/plugins": "npm:0.0.0"
@@ -14076,7 +16885,6 @@ __metadata:
     apollo-utilities: "npm:^1.3.4"
     classnames: "npm:^2.5.1"
     dot-prop-immutable: "npm:^2.1.1"
-    downshift: "npm:^3.1.2"
     emotion: "npm:10.0.27"
     graphlib: "npm:^2.1.8"
     graphql: "npm:^15.9.0"
@@ -14090,7 +16898,6 @@ __metadata:
     react: "npm:18.2.0"
     react-dom: "npm:18.2.0"
     react-draggable: "npm:^4.4.6"
-    react-hotkeyz: "npm:^1.0.4"
     react-resizable: "npm:^3.0.5"
     react-resizable-panels: "npm:^2.0.19"
     react-transition-group: "npm:^4.4.5"
@@ -14098,6 +16905,7 @@ __metadata:
     reset-css: "npm:^5.0.1"
     rimraf: "npm:^6.0.1"
     store: "npm:^2.0.12"
+    tinycolor2: "npm:^1.6.0"
     typescript: "npm:5.3.3"
     unicode-emoji-json: "npm:^0.4.0"
   languageName: unknown
@@ -14113,6 +16921,7 @@ __metadata:
     "@emotion/react": "npm:11.10.8"
     "@emotion/styled": "npm:11.10.6"
     "@types/react": "npm:18.2.79"
+    "@webiny/admin-ui": "npm:0.0.0"
     "@webiny/app": "npm:0.0.0"
     "@webiny/app-admin": "npm:0.0.0"
     "@webiny/app-headless-cms": "npm:0.0.0"
@@ -14120,6 +16929,7 @@ __metadata:
     "@webiny/app-page-builder": "npm:0.0.0"
     "@webiny/app-security": "npm:0.0.0"
     "@webiny/form": "npm:0.0.0"
+    "@webiny/icons": "npm:0.0.0"
     "@webiny/plugins": "npm:0.0.0"
     "@webiny/project-utils": "npm:0.0.0"
     "@webiny/react-router": "npm:0.0.0"
@@ -14153,15 +16963,15 @@ __metadata:
     "@apollo/react-hooks": "npm:^3.1.5"
     "@emotion/react": "npm:11.10.8"
     "@emotion/styled": "npm:11.10.6"
-    "@material-design-icons/svg": "npm:^0.14.13"
-    "@material-symbols/svg-400": "npm:^0.4.1"
     "@types/react": "npm:18.2.79"
+    "@webiny/admin-ui": "npm:0.0.0"
     "@webiny/api-audit-logs": "npm:0.0.0"
     "@webiny/app": "npm:0.0.0"
     "@webiny/app-aco": "npm:0.0.0"
     "@webiny/app-admin": "npm:0.0.0"
     "@webiny/app-security": "npm:0.0.0"
     "@webiny/form": "npm:0.0.0"
+    "@webiny/icons": "npm:0.0.0"
     "@webiny/plugins": "npm:0.0.0"
     "@webiny/project-utils": "npm:0.0.0"
     "@webiny/react-properties": "npm:0.0.0"
@@ -14203,13 +17013,13 @@ __metadata:
     "@emotion/styled": "npm:11.10.6"
     "@fortawesome/fontawesome-svg-core": "npm:^1.3.0"
     "@fortawesome/react-fontawesome": "npm:^0.1.17"
-    "@material-design-icons/svg": "npm:^0.14.13"
     "@types/react": "npm:18.2.79"
     "@webiny/app": "npm:0.0.0"
     "@webiny/app-admin": "npm:0.0.0"
     "@webiny/app-headless-cms": "npm:0.0.0"
     "@webiny/app-page-builder": "npm:0.0.0"
     "@webiny/app-page-builder-elements": "npm:0.0.0"
+    "@webiny/icons": "npm:0.0.0"
     "@webiny/plugins": "npm:0.0.0"
     "@webiny/project-utils": "npm:0.0.0"
     "@webiny/react-router": "npm:0.0.0"
@@ -14222,7 +17032,6 @@ __metadata:
     react-dom: "npm:18.2.0"
     rimraf: "npm:^6.0.1"
     slugify: "npm:^1.6.6"
-    ttypescript: "npm:^1.5.15"
     typescript: "npm:5.3.3"
   languageName: unknown
   linkType: soft
@@ -14247,11 +17056,9 @@ __metadata:
     "@apollo/react-common": "npm:^3.1.4"
     "@apollo/react-components": "npm:^3.1.5"
     "@apollo/react-hooks": "npm:^3.1.5"
-    "@emotion/react": "npm:11.10.8"
-    "@emotion/styled": "npm:11.10.6"
-    "@material-design-icons/svg": "npm:^0.14.13"
     "@svgr/webpack": "npm:^6.1.1"
     "@types/react": "npm:18.2.79"
+    "@webiny/admin-ui": "npm:0.0.0"
     "@webiny/app": "npm:0.0.0"
     "@webiny/app-aco": "npm:0.0.0"
     "@webiny/app-admin": "npm:0.0.0"
@@ -14263,11 +17070,11 @@ __metadata:
     "@webiny/app-websockets": "npm:0.0.0"
     "@webiny/error": "npm:0.0.0"
     "@webiny/form": "npm:0.0.0"
+    "@webiny/icons": "npm:0.0.0"
     "@webiny/plugins": "npm:0.0.0"
     "@webiny/project-utils": "npm:0.0.0"
     "@webiny/react-composition": "npm:0.0.0"
     "@webiny/react-properties": "npm:0.0.0"
-    "@webiny/ui": "npm:0.0.0"
     "@webiny/utils": "npm:0.0.0"
     "@webiny/validation": "npm:0.0.0"
     apollo-cache: "npm:^1.3.5"
@@ -14275,12 +17082,13 @@ __metadata:
     apollo-link: "npm:^1.2.14"
     apollo-utilities: "npm:^1.3.4"
     bytes: "npm:^3.1.2"
+    cropperjs: "npm:^1.4.3"
     dataurl-to-blob: "npm:^0.0.1"
     dayjs: "npm:^1.11.13"
     dot-prop-immutable: "npm:^2.1.1"
-    emotion: "npm:10.0.27"
     graphql: "npm:^15.9.0"
     graphql-tag: "npm:^2.12.6"
+    load-script: "npm:^1.0.0"
     lodash: "npm:^4.17.21"
     mime: "npm:^3.0.0"
     minimatch: "npm:^5.1.6"
@@ -14312,13 +17120,12 @@ __metadata:
     "@emotion/babel-plugin": "npm:^11.11.0"
     "@emotion/react": "npm:11.10.8"
     "@emotion/styled": "npm:11.10.6"
-    "@material-design-icons/svg": "npm:^0.14.13"
-    "@material-symbols/svg-400": "npm:^0.4.1"
     "@svgr/webpack": "npm:^6.1.1"
     "@types/gtag.js": "npm:^0.0.20"
     "@types/json2csv": "npm:^4.5.1"
     "@types/react": "npm:18.2.79"
     "@types/react-google-recaptcha": "npm:^1.1.2"
+    "@webiny/admin-ui": "npm:0.0.0"
     "@webiny/app": "npm:0.0.0"
     "@webiny/app-admin": "npm:0.0.0"
     "@webiny/app-page-builder": "npm:0.0.0"
@@ -14327,6 +17134,7 @@ __metadata:
     "@webiny/app-security": "npm:0.0.0"
     "@webiny/app-tenancy": "npm:0.0.0"
     "@webiny/form": "npm:0.0.0"
+    "@webiny/icons": "npm:0.0.0"
     "@webiny/plugins": "npm:0.0.0"
     "@webiny/project-utils": "npm:0.0.0"
     "@webiny/react-router": "npm:0.0.0"
@@ -14394,6 +17202,7 @@ __metadata:
     "@emotion/styled": "npm:11.10.6"
     "@fortawesome/fontawesome-svg-core": "npm:^1.3.0"
     "@types/react": "npm:18.2.79"
+    "@webiny/admin-ui": "npm:0.0.0"
     "@webiny/app": "npm:0.0.0"
     "@webiny/app-admin": "npm:0.0.0"
     "@webiny/app-security": "npm:0.0.0"
@@ -14402,10 +17211,8 @@ __metadata:
     "@webiny/plugins": "npm:0.0.0"
     "@webiny/project-utils": "npm:0.0.0"
     "@webiny/react-composition": "npm:0.0.0"
-    "@webiny/ui": "npm:0.0.0"
     "@webiny/validation": "npm:0.0.0"
     babel-plugin-module-resolver: "npm:^5.0.2"
-    classnames: "npm:^2.5.1"
     dnd-core: "npm:^16.0.1"
     graphql: "npm:^15.9.0"
     graphql-tag: "npm:^2.12.6"
@@ -14424,6 +17231,7 @@ __metadata:
     "@apollo/react-common": "npm:^3.1.4"
     "@apollo/react-hooks": "npm:^3.1.5"
     "@emotion/babel-plugin": "npm:^11.11.0"
+    "@emotion/css": "npm:11.10.6"
     "@emotion/react": "npm:11.10.8"
     "@emotion/styled": "npm:11.10.6"
     "@fortawesome/fontawesome-common-types": "npm:^0.3.0"
@@ -14433,9 +17241,9 @@ __metadata:
     "@fortawesome/free-solid-svg-icons": "npm:^6.0.0"
     "@fortawesome/react-fontawesome": "npm:^0.1.17"
     "@lexical/utils": "npm:0.23.1"
-    "@material-design-icons/svg": "npm:^0.14.13"
     "@svgr/webpack": "npm:^6.1.1"
     "@types/react": "npm:18.2.79"
+    "@webiny/admin-ui": "npm:0.0.0"
     "@webiny/app": "npm:0.0.0"
     "@webiny/app-aco": "npm:0.0.0"
     "@webiny/app-admin": "npm:0.0.0"
@@ -14449,6 +17257,7 @@ __metadata:
     "@webiny/error": "npm:0.0.0"
     "@webiny/feature-flags": "npm:0.0.0"
     "@webiny/form": "npm:0.0.0"
+    "@webiny/icons": "npm:0.0.0"
     "@webiny/lexical-editor": "npm:0.0.0"
     "@webiny/lexical-nodes": "npm:0.0.0"
     "@webiny/lexical-theme": "npm:0.0.0"
@@ -14469,7 +17278,6 @@ __metadata:
     classnames: "npm:^2.5.1"
     dnd-core: "npm:^16.0.1"
     dot-prop-immutable: "npm:^2.1.1"
-    emotion: "npm:10.0.27"
     graphql: "npm:^15.9.0"
     graphql-tag: "npm:^2.12.6"
     lodash: "npm:^4.17.21"
@@ -14485,7 +17293,6 @@ __metadata:
     react-dom: "npm:18.2.0"
     react-helmet: "npm:^6.1.0"
     react-hotkeyz: "npm:^1.0.4"
-    react-virtualized: "npm:^9.22.5"
     rimraf: "npm:^6.0.1"
     typescript: "npm:5.3.3"
     use-deep-compare-effect: "npm:^1.8.1"
@@ -14497,15 +17304,15 @@ __metadata:
   resolution: "@webiny/app-i18n-content@workspace:packages/app-i18n-content"
   dependencies:
     "@emotion/babel-plugin": "npm:^11.11.0"
+    "@webiny/admin-ui": "npm:0.0.0"
     "@webiny/app": "npm:0.0.0"
     "@webiny/app-admin": "npm:0.0.0"
     "@webiny/app-i18n": "npm:0.0.0"
     "@webiny/app-security": "npm:0.0.0"
     "@webiny/form": "npm:0.0.0"
+    "@webiny/icons": "npm:0.0.0"
     "@webiny/plugins": "npm:0.0.0"
     "@webiny/project-utils": "npm:0.0.0"
-    "@webiny/ui": "npm:0.0.0"
-    emotion: "npm:10.0.27"
     react: "npm:18.2.0"
     react-dom: "npm:18.2.0"
     rimraf: "npm:^6.0.1"
@@ -14518,14 +17325,13 @@ __metadata:
   resolution: "@webiny/app-i18n@workspace:packages/app-i18n"
   dependencies:
     "@apollo/react-hooks": "npm:^3.1.5"
-    "@emotion/babel-plugin": "npm:^11.11.0"
-    "@emotion/react": "npm:11.10.8"
-    "@emotion/styled": "npm:11.10.6"
     "@types/react": "npm:18.2.79"
+    "@webiny/admin-ui": "npm:0.0.0"
     "@webiny/app": "npm:0.0.0"
     "@webiny/app-admin": "npm:0.0.0"
     "@webiny/app-security": "npm:0.0.0"
     "@webiny/form": "npm:0.0.0"
+    "@webiny/icons": "npm:0.0.0"
     "@webiny/plugins": "npm:0.0.0"
     "@webiny/project-utils": "npm:0.0.0"
     "@webiny/react-router": "npm:0.0.0"
@@ -14552,9 +17358,8 @@ __metadata:
   resolution: "@webiny/app-mailer@workspace:packages/app-mailer"
   dependencies:
     "@apollo/react-components": "npm:^3.1.5"
-    "@emotion/babel-plugin": "npm:^11.11.0"
-    "@emotion/react": "npm:11.10.8"
     "@types/react": "npm:18.2.79"
+    "@webiny/admin-ui": "npm:0.0.0"
     "@webiny/app-admin": "npm:0.0.0"
     "@webiny/app-security": "npm:0.0.0"
     "@webiny/form": "npm:0.0.0"
@@ -14633,7 +17438,6 @@ __metadata:
     "@fortawesome/free-regular-svg-icons": "npm:^6.0.0"
     "@fortawesome/free-solid-svg-icons": "npm:^6.0.0"
     "@fortawesome/react-fontawesome": "npm:^0.1.17"
-    "@material-design-icons/svg": "npm:^0.14.13"
     "@svgr/webpack": "npm:^6.1.1"
     "@types/aos": "npm:^3.0.4"
     "@types/is-hotkey": "npm:^0.1.10"
@@ -14642,9 +17446,9 @@ __metadata:
     "@types/platform": "npm:^1.3.4"
     "@types/react": "npm:18.2.79"
     "@types/react-images": "npm:^0.5.3"
-    "@types/react-virtualized": "npm:^9.21.16"
     "@types/resize-observer-browser": "npm:^0.1.4"
     "@types/store": "npm:^2.0.2"
+    "@webiny/admin-ui": "npm:0.0.0"
     "@webiny/app": "npm:0.0.0"
     "@webiny/app-aco": "npm:0.0.0"
     "@webiny/app-admin": "npm:0.0.0"
@@ -14658,6 +17462,7 @@ __metadata:
     "@webiny/error": "npm:0.0.0"
     "@webiny/feature-flags": "npm:0.0.0"
     "@webiny/form": "npm:0.0.0"
+    "@webiny/icons": "npm:0.0.0"
     "@webiny/lexical-editor": "npm:0.0.0"
     "@webiny/plugins": "npm:0.0.0"
     "@webiny/project-utils": "npm:0.0.0"
@@ -14694,6 +17499,7 @@ __metadata:
     prop-types: "npm:^15.8.1"
     react: "npm:18.2.0"
     react-color: "npm:^2.19.3"
+    react-columned: "npm:^1.1.3"
     react-dnd: "npm:^16.0.1"
     react-dnd-html5-backend: "npm:^16.0.1"
     react-dom: "npm:18.2.0"
@@ -14701,7 +17507,6 @@ __metadata:
     react-images: "npm:^0.5.19"
     react-in-viewport: "npm:^1.0.0-alpha.30"
     react-sortable: "npm:^2.0.0"
-    react-virtualized: "npm:^9.22.5"
     recoil: "npm:^0.7.7"
     rimraf: "npm:^6.0.1"
     slugify: "npm:^1.6.6"
@@ -14730,8 +17535,7 @@ __metadata:
   resolution: "@webiny/app-record-locking@workspace:packages/app-record-locking"
   dependencies:
     "@apollo/react-hooks": "npm:^3.1.5"
-    "@emotion/styled": "npm:11.10.6"
-    "@material-design-icons/svg": "npm:^0.14.13"
+    "@webiny/admin-ui": "npm:0.0.0"
     "@webiny/app": "npm:0.0.0"
     "@webiny/app-aco": "npm:0.0.0"
     "@webiny/app-admin": "npm:0.0.0"
@@ -14741,10 +17545,10 @@ __metadata:
     "@webiny/app-websockets": "npm:0.0.0"
     "@webiny/error": "npm:0.0.0"
     "@webiny/form": "npm:0.0.0"
+    "@webiny/icons": "npm:0.0.0"
     "@webiny/plugins": "npm:0.0.0"
     "@webiny/project-utils": "npm:0.0.0"
     "@webiny/react-router": "npm:0.0.0"
-    "@webiny/ui": "npm:0.0.0"
     "@webiny/utils": "npm:0.0.0"
     apollo-client: "npm:^2.6.10"
     apollo-link: "npm:^1.2.14"
@@ -14764,18 +17568,18 @@ __metadata:
     "@apollo/react-hooks": "npm:^3.1.5"
     "@emotion/babel-plugin": "npm:^11.11.0"
     "@emotion/styled": "npm:11.10.6"
-    "@material-design-icons/svg": "npm:^0.14.13"
     "@types/react-helmet": "npm:^6.1.11"
+    "@webiny/admin-ui": "npm:0.0.0"
     "@webiny/app": "npm:0.0.0"
     "@webiny/app-admin": "npm:0.0.0"
     "@webiny/app-security": "npm:0.0.0"
     "@webiny/form": "npm:0.0.0"
+    "@webiny/icons": "npm:0.0.0"
     "@webiny/plugins": "npm:0.0.0"
     "@webiny/project-utils": "npm:0.0.0"
     "@webiny/react-router": "npm:0.0.0"
     "@webiny/ui": "npm:0.0.0"
     "@webiny/validation": "npm:0.0.0"
-    emotion: "npm:10.0.27"
     graphql-tag: "npm:^2.12.6"
     lodash: "npm:^4.17.21"
     react: "npm:18.2.0"
@@ -14811,7 +17615,7 @@ __metadata:
     "@webiny/app": "npm:0.0.0"
     "@webiny/app-aco": "npm:0.0.0"
     "@webiny/app-admin": "npm:0.0.0"
-    "@webiny/app-admin-rmwc": "npm:0.0.0"
+    "@webiny/app-admin-ui": "npm:0.0.0"
     "@webiny/app-apw": "npm:0.0.0"
     "@webiny/app-audit-logs": "npm:0.0.0"
     "@webiny/app-dynamic-pages": "npm:0.0.0"
@@ -14833,6 +17637,7 @@ __metadata:
     "@webiny/app-websockets": "npm:0.0.0"
     "@webiny/lexical-editor-actions": "npm:0.0.0"
     "@webiny/lexical-editor-pb-element": "npm:0.0.0"
+    "@webiny/lexical-theme": "npm:0.0.0"
     "@webiny/plugins": "npm:0.0.0"
     "@webiny/project-utils": "npm:0.0.0"
     apollo-cache: "npm:^1.3.5"
@@ -14876,15 +17681,14 @@ __metadata:
   resolution: "@webiny/app-tenant-manager@workspace:packages/app-tenant-manager"
   dependencies:
     "@apollo/react-hooks": "npm:^3.1.5"
-    "@emotion/babel-plugin": "npm:^11.11.0"
-    "@emotion/react": "npm:11.10.8"
-    "@emotion/styled": "npm:11.10.6"
     "@types/react": "npm:18.2.79"
+    "@webiny/admin-ui": "npm:0.0.0"
     "@webiny/app": "npm:0.0.0"
     "@webiny/app-admin": "npm:0.0.0"
     "@webiny/app-security": "npm:0.0.0"
     "@webiny/app-tenancy": "npm:0.0.0"
     "@webiny/form": "npm:0.0.0"
+    "@webiny/icons": "npm:0.0.0"
     "@webiny/project-utils": "npm:0.0.0"
     "@webiny/react-router": "npm:0.0.0"
     "@webiny/ui": "npm:0.0.0"
@@ -14893,7 +17697,6 @@ __metadata:
     apollo-client: "npm:^2.6.10"
     apollo-link: "npm:^1.2.14"
     apollo-utilities: "npm:^1.3.4"
-    emotion: "npm:10.0.27"
     graphql: "npm:^15.9.0"
     graphql-tag: "npm:^2.12.6"
     lodash: "npm:^4.17.21"
@@ -14961,12 +17764,12 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@webiny/app-trash-bin@workspace:packages/app-trash-bin"
   dependencies:
-    "@emotion/styled": "npm:11.10.6"
-    "@material-design-icons/svg": "npm:^0.14.13"
     "@types/react": "npm:18.2.79"
+    "@webiny/admin-ui": "npm:0.0.0"
     "@webiny/app-aco": "npm:0.0.0"
     "@webiny/app-admin": "npm:0.0.0"
     "@webiny/app-utils": "npm:0.0.0"
+    "@webiny/icons": "npm:0.0.0"
     "@webiny/project-utils": "npm:0.0.0"
     "@webiny/react-composition": "npm:0.0.0"
     "@webiny/react-properties": "npm:0.0.0"
@@ -15027,6 +17830,7 @@ __metadata:
     "@webiny/app-page-builder": "npm:0.0.0"
     "@webiny/app-page-builder-elements": "npm:0.0.0"
     "@webiny/app-theme": "npm:0.0.0"
+    "@webiny/lexical-theme": "npm:0.0.0"
     "@webiny/plugins": "npm:0.0.0"
     "@webiny/project-utils": "npm:0.0.0"
     "@webiny/react-router": "npm:0.0.0"
@@ -15075,6 +17879,7 @@ __metadata:
     "@webiny/plugins": "npm:0.0.0"
     "@webiny/project-utils": "npm:0.0.0"
     "@webiny/react-composition": "npm:0.0.0"
+    "@webiny/react-properties": "npm:0.0.0"
     "@webiny/react-router": "npm:0.0.0"
     "@webiny/ui": "npm:0.0.0"
     apollo-cache: "npm:^1.3.5"
@@ -15157,7 +17962,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@webiny/cli-plugin-dependencies@workspace:packages/cli-plugin-dependencies"
   dependencies:
-    "@babel/runtime": "npm:7.26.7"
+    "@babel/runtime": "npm:7.26.10"
     "@webiny/cli": "npm:0.0.0"
     "@webiny/project-utils": "npm:0.0.0"
     chalk: "npm:^4.1.2"
@@ -15217,7 +18022,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@webiny/cli-plugin-extensions@workspace:packages/cli-plugin-extensions"
   dependencies:
-    "@babel/runtime": "npm:7.26.7"
+    "@babel/runtime": "npm:7.26.10"
     "@types/inquirer": "npm:8.2.10"
     "@webiny/aws-sdk": "npm:0.0.0"
     "@webiny/cli": "npm:0.0.0"
@@ -15730,6 +18535,16 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@webiny/icons@npm:0.0.0, @webiny/icons@workspace:packages/icons":
+  version: 0.0.0-use.local
+  resolution: "@webiny/icons@workspace:packages/icons"
+  dependencies:
+    "@material-design-icons/svg": "npm:^0.14.15"
+    "@webiny/cli": "npm:0.0.0"
+    rimraf: "npm:^6.0.1"
+  languageName: unknown
+  linkType: soft
+
 "@webiny/ioc@npm:0.0.0, @webiny/ioc@workspace:packages/ioc":
   version: 0.0.0-use.local
   resolution: "@webiny/ioc@workspace:packages/ioc"
@@ -15780,10 +18595,10 @@ __metadata:
   dependencies:
     "@emotion/styled": "npm:11.10.6"
     "@lexical/utils": "npm:0.23.1"
-    "@material-design-icons/svg": "npm:^0.14.13"
     "@webiny/app-admin": "npm:0.0.0"
     "@webiny/app-page-builder": "npm:0.0.0"
     "@webiny/app-page-builder-elements": "npm:0.0.0"
+    "@webiny/icons": "npm:0.0.0"
     "@webiny/lexical-editor": "npm:0.0.0"
     "@webiny/lexical-nodes": "npm:0.0.0"
     "@webiny/lexical-theme": "npm:0.0.0"
@@ -15815,7 +18630,6 @@ __metadata:
     "@webiny/react-properties": "npm:0.0.0"
     emotion: "npm:10.0.27"
     lexical: "npm:0.23.1"
-    lodash: "npm:4.17.21"
     react: "npm:18.2.0"
     react-dom: "npm:18.2.0"
   languageName: unknown
@@ -15883,6 +18697,7 @@ __metadata:
     "@webiny/logger": "npm:0.0.0"
     "@webiny/plugins": "npm:0.0.0"
     "@webiny/project-utils": "npm:0.0.0"
+    "@webiny/tasks": "npm:0.0.0"
     "@webiny/utils": "npm:0.0.0"
     elastic-ts: "npm:^0.12.0"
     jest-dynalite: "npm:^3.6.1"
@@ -15916,7 +18731,7 @@ __metadata:
     "@babel/preset-env": "npm:7.26.7"
     "@babel/preset-react": "npm:^7.26.3"
     "@babel/preset-typescript": "npm:^7.26.0"
-    "@babel/runtime": "npm:7.26.7"
+    "@babel/runtime": "npm:7.26.10"
     "@elastic/elasticsearch": "npm:7.12.0"
     "@pmmmwh/react-refresh-webpack-plugin": "npm:^0.5.15"
     "@rspack/core": "npm:^1.2.2"
@@ -15929,7 +18744,7 @@ __metadata:
     "@webiny/global-config": "npm:0.0.0"
     "@webiny/telemetry": "npm:0.0.0"
     assert-browserify: "npm:^2.0.0"
-    babel-loader: "npm:^9.2.1"
+    babel-loader: "npm:9.2.1"
     buffer: "npm:^6.0.3"
     bufferutil: "npm:^4.0.1"
     camelcase: "npm:^6.3.0"
@@ -16158,6 +18973,7 @@ __metadata:
   dependencies:
     "@pulumi/aws": "npm:6.67.0"
     "@pulumi/pulumi": "npm:3.147.0"
+    "@webiny/admin-ui": "npm:0.0.0"
     "@webiny/api-aco": "npm:0.0.0"
     "@webiny/api-apw": "npm:0.0.0"
     "@webiny/api-apw-scheduler-so-ddb": "npm:0.0.0"
@@ -16208,11 +19024,21 @@ __metadata:
     invariant: "npm:^2.2.4"
     node-fetch: "npm:2.6.7"
     ora: "npm:^4.1.1"
+    tailwindcss: "npm:^3.4.6"
     typescript: "npm:5.3.3"
     webpack: "npm:^5.97.0"
   languageName: unknown
   linkType: soft
 
+"@webiny/shared-aco@npm:0.0.0, @webiny/shared-aco@workspace:packages/shared-aco":
+  version: 0.0.0-use.local
+  resolution: "@webiny/shared-aco@workspace:packages/shared-aco"
+  dependencies:
+    "@webiny/project-utils": "npm:0.0.0"
+    typescript: "npm:5.3.3"
+  languageName: unknown
+  linkType: soft
+
 "@webiny/system-requirements@npm:0.0.0, @webiny/system-requirements@workspace:packages/system-requirements":
   version: 0.0.0-use.local
   resolution: "@webiny/system-requirements@workspace:packages/system-requirements"
@@ -16221,8 +19047,6 @@ __metadata:
     cli-table3: "npm:^0.6.5"
     execa: "npm:^5.1.1"
     semver: "npm:^7.6.3"
-  bin:
-    webiny: ./bin.js
   languageName: unknown
   linkType: soft
 
@@ -16302,73 +19126,22 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@webiny/ui@workspace:packages/ui"
   dependencies:
-    "@editorjs/editorjs": "npm:2.26.5"
     "@emotion/babel-plugin": "npm:^11.11.0"
-    "@emotion/react": "npm:11.10.8"
-    "@emotion/styled": "npm:11.10.6"
-    "@material-design-icons/svg": "npm:^0.14.13"
-    "@rmwc/button": "npm:14.3.5"
-    "@rmwc/checkbox": "npm:14.3.5"
-    "@rmwc/chip": "npm:14.3.5"
-    "@rmwc/data-table": "npm:14.3.5"
-    "@rmwc/dialog": "npm:14.3.5"
-    "@rmwc/drawer": "npm:14.3.5"
-    "@rmwc/elevation": "npm:14.3.5"
-    "@rmwc/fab": "npm:14.3.5"
-    "@rmwc/grid": "npm:14.3.5"
-    "@rmwc/icon-button": "npm:14.3.5"
-    "@rmwc/list": "npm:14.3.5"
-    "@rmwc/menu": "npm:14.3.5"
-    "@rmwc/radio": "npm:14.3.5"
-    "@rmwc/ripple": "npm:14.3.5"
-    "@rmwc/select": "npm:14.3.5"
-    "@rmwc/slider": "npm:14.3.5"
-    "@rmwc/snackbar": "npm:14.3.5"
-    "@rmwc/switch": "npm:14.3.5"
-    "@rmwc/tabs": "npm:14.3.5"
-    "@rmwc/textfield": "npm:14.3.5"
-    "@rmwc/top-app-bar": "npm:14.3.5"
-    "@rmwc/touch-target": "npm:14.3.5"
-    "@rmwc/typography": "npm:14.3.5"
     "@svgr/webpack": "npm:^6.1.1"
-    "@tanstack/react-table": "npm:^8.5.22"
     "@testing-library/react": "npm:^15.0.7"
-    "@types/nprogress": "npm:^0.2.0"
-    "@types/react-color": "npm:^2.17.11"
-    "@types/react-custom-scrollbars": "npm:^4.0.10"
-    "@types/react-transition-group": "npm:^4.4.4"
+    "@webiny/admin-ui": "npm:0.0.0"
     "@webiny/cli": "npm:0.0.0"
-    "@webiny/form": "npm:0.0.0"
     "@webiny/project-utils": "npm:0.0.0"
     "@webiny/utils": "npm:0.0.0"
     "@webiny/validation": "npm:0.0.0"
-    babel-loader: "npm:^9.2.1"
-    brace: "npm:^0.11.1"
+    babel-loader: "npm:9.2.1"
     classnames: "npm:^2.5.1"
-    cropperjs: "npm:^1.4.3"
-    dot-prop-immutable: "npm:^2.1.1"
-    downshift: "npm:^2.1.5"
-    emotion: "npm:10.0.27"
     execa: "npm:^5.1.1"
     keycode: "npm:^2.2.0"
-    load-script: "npm:^1.0.0"
     lodash: "npm:^4.17.21"
-    material-components-web: "npm:^14.0.0"
     ncp: "npm:^2.0.0"
-    nprogress: "npm:^0.2.0"
-    nuka-carousel: "npm:4.7.1"
     raw-loader: "npm:^4.0.2"
-    rc-tooltip: "npm:^5.3.1"
-    react-ace: "npm:^6.1.4"
-    react-butterfiles: "npm:^1.3.3"
-    react-color: "npm:^2.19.3"
-    react-columned: "npm:^1.1.3"
-    react-custom-scrollbars: "npm:^4.2.1"
-    react-loading-skeleton: "npm:^3.1.0"
-    react-spinner-material: "npm:1.1.4"
-    react-transition-group: "npm:^4.4.5"
     rimraf: "npm:^6.0.1"
-    timeago-react: "npm:^3.0.6"
     typescript: "npm:5.3.3"
   peerDependencies:
     minimatch: ^5.1.6
@@ -16382,7 +19155,9 @@ __metadata:
   resolution: "@webiny/utils@workspace:packages/utils"
   dependencies:
     "@webiny/error": "npm:0.0.0"
+    "@webiny/plugins": "npm:0.0.0"
     "@webiny/project-utils": "npm:0.0.0"
+    jsonpack: "npm:^1.1.5"
     mdbid: "npm:^1.0.0"
     nanoid: "npm:^3.3.8"
     nanoid-dictionary: "npm:^4.3.0"
@@ -16452,6 +19227,37 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@yarnpkg/esbuild-plugin-pnp@npm:^3.0.0-rc.10":
+  version: 3.0.0-rc.15
+  resolution: "@yarnpkg/esbuild-plugin-pnp@npm:3.0.0-rc.15"
+  dependencies:
+    tslib: "npm:^2.4.0"
+  peerDependencies:
+    esbuild: ">=0.10.0"
+  checksum: 10/454f521088c1fa24fda51f83ca4a50ba6e3bd147e5dee8c899e6bf24a7196186532c3abb18480e83395708ffb7238c9cac5b82595c3985ce93593b5afbd0a9f0
+  languageName: node
+  linkType: hard
+
+"@yarnpkg/fslib@npm:2.10.3":
+  version: 2.10.3
+  resolution: "@yarnpkg/fslib@npm:2.10.3"
+  dependencies:
+    "@yarnpkg/libzip": "npm:^2.3.0"
+    tslib: "npm:^1.13.0"
+  checksum: 10/29b38bd2054e3ec14677c16321a20ed69ac41d9d6f2fee7d9d7bc0a5a737e6d94add79cfa5f6ab867b5a98ab6aa2df3b53cb34f81159907cc308576a7bc08c67
+  languageName: node
+  linkType: hard
+
+"@yarnpkg/libzip@npm:2.3.0, @yarnpkg/libzip@npm:^2.3.0":
+  version: 2.3.0
+  resolution: "@yarnpkg/libzip@npm:2.3.0"
+  dependencies:
+    "@types/emscripten": "npm:^1.39.6"
+    tslib: "npm:^1.13.0"
+  checksum: 10/0eb147f39eab2830c29120d17e8bfba5aa15dedb940a7378070c67d4de08e9ba8d34068522e15e6b4db94ecaed4ad520e1e517588a36a348d1aa160bc36156ea
+  languageName: node
+  linkType: hard
+
 "@yarnpkg/lockfile@npm:^1.1.0":
   version: 1.1.0
   resolution: "@yarnpkg/lockfile@npm:1.1.0"
@@ -16586,6 +19392,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ace-builds@npm:^1.36.3, ace-builds@npm:^1.37.1":
+  version: 1.41.0
+  resolution: "ace-builds@npm:1.41.0"
+  checksum: 10/ab5a482c67913ca4750fa3c522ae7257fba09b45398cc9358fc7bb4c653ca7938b14e72e006a36f196da9ffcdc3859a289ed99c28b0abf9001fa74a53ae30666
+  languageName: node
+  linkType: hard
+
 "acorn-globals@npm:^7.0.0":
   version: 7.0.1
   resolution: "acorn-globals@npm:7.0.1"
@@ -16605,7 +19418,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"acorn-jsx@npm:^5.3.2":
+"acorn-jsx@npm:^5.3.1, acorn-jsx@npm:^5.3.2":
   version: 5.3.2
   resolution: "acorn-jsx@npm:5.3.2"
   peerDependencies:
@@ -16614,6 +19427,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"acorn-walk@npm:^7.2.0":
+  version: 7.2.0
+  resolution: "acorn-walk@npm:7.2.0"
+  checksum: 10/4d3e186f729474aed3bc3d0df44692f2010c726582655b20a23347bef650867655521c48ada444cb4fda241ee713dcb792da363ec74c6282fa884fb7144171bb
+  languageName: node
+  linkType: hard
+
 "acorn-walk@npm:^8.0.2":
   version: 8.3.4
   resolution: "acorn-walk@npm:8.3.4"
@@ -16630,6 +19450,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"acorn@npm:^7.4.1":
+  version: 7.4.1
+  resolution: "acorn@npm:7.4.1"
+  bin:
+    acorn: bin/acorn
+  checksum: 10/8be2a40714756d713dfb62544128adce3b7102c6eb94bc312af196c2cc4af76e5b93079bd66b05e9ca31b35a9b0ce12171d16bc55f366cafdb794fdab9d753ec
+  languageName: node
+  linkType: hard
+
 "acorn@npm:^8.1.0, acorn@npm:^8.11.0, acorn@npm:^8.14.0, acorn@npm:^8.8.1":
   version: 8.14.0
   resolution: "acorn@npm:8.14.0"
@@ -16751,6 +19580,13 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"agent-base@npm:5":
+  version: 5.1.1
+  resolution: "agent-base@npm:5.1.1"
+  checksum: 10/82954db5dccdccccf52c4b7f548394a696accd259d564bfb325fb02586aaaa9df96f5d50bb19134923fe5ff9c21195e7a88871bf4e086cca9014a549a0ba2a5f
+  languageName: node
+  linkType: hard
+
 "agent-base@npm:6, agent-base@npm:^6.0.2":
   version: 6.0.2
   resolution: "agent-base@npm:6.0.2"
@@ -16968,7 +19804,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ansi-html-community@npm:^0.0.8":
+"ansi-html-community@npm:0.0.8, ansi-html-community@npm:^0.0.8":
   version: 0.0.8
   resolution: "ansi-html-community@npm:0.0.8"
   bin:
@@ -17074,6 +19910,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"any-promise@npm:^1.0.0":
+  version: 1.3.0
+  resolution: "any-promise@npm:1.3.0"
+  checksum: 10/6737469ba353b5becf29e4dc3680736b9caa06d300bda6548812a8fee63ae7d336d756f88572fa6b5219aed36698d808fa55f62af3e7e6845c7a1dc77d240edb
+  languageName: node
+  linkType: hard
+
 "anymatch@npm:^3.0.3, anymatch@npm:~3.1.2":
   version: 3.1.3
   resolution: "anymatch@npm:3.1.3"
@@ -17497,6 +20340,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"app-root-dir@npm:^1.0.2":
+  version: 1.0.2
+  resolution: "app-root-dir@npm:1.0.2"
+  checksum: 10/d4b1653fc60b6465b982bf5a88b12051ed2d807d70609386a809306e1c636496f53522d61fa30f9f98c71aaae34f34e1651889cf17d81a44e3dafd2859d495ad
+  languageName: node
+  linkType: hard
+
 "aproba@npm:^1.0.3 || ^2.0.0":
   version: 2.0.0
   resolution: "aproba@npm:2.0.0"
@@ -17579,6 +20429,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"arg@npm:^5.0.2":
+  version: 5.0.2
+  resolution: "arg@npm:5.0.2"
+  checksum: 10/92fe7de222054a060fd2329e92e867410b3ea260328147ee3fb7855f78efae005f4087e698d4e688a856893c56bb09951588c40f2c901cf6996cd8cd7bcfef2c
+  languageName: node
+  linkType: hard
+
 "argparse@npm:^1.0.7":
   version: 1.0.10
   resolution: "argparse@npm:1.0.10"
@@ -17595,6 +20452,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"aria-hidden@npm:^1.1.1, aria-hidden@npm:^1.2.4":
+  version: 1.2.6
+  resolution: "aria-hidden@npm:1.2.6"
+  dependencies:
+    tslib: "npm:^2.0.0"
+  checksum: 10/1914e5a36225dccdb29f0b88cc891eeca736cdc5b0c905ab1437b90b28b5286263ed3a221c75b7dc788f25b942367be0044b2ac8ccf073a72e07a50b1d964202
+  languageName: node
+  linkType: hard
+
 "aria-query@npm:5.1.3":
   version: 5.1.3
   resolution: "aria-query@npm:5.1.3"
@@ -17861,6 +20727,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"assert@npm:^2.1.0":
+  version: 2.1.0
+  resolution: "assert@npm:2.1.0"
+  dependencies:
+    call-bind: "npm:^1.0.2"
+    is-nan: "npm:^1.3.2"
+    object-is: "npm:^1.1.5"
+    object.assign: "npm:^4.1.4"
+    util: "npm:^0.12.5"
+  checksum: 10/6b9d813c8eef1c0ac13feac5553972e4bd180ae16000d4eb5c0ded2489188737c75a5aacefc97a985008b37502f62fe1bad34da1a7481a54bbfabec3964c8aa7
+  languageName: node
+  linkType: hard
+
 "ast-types@npm:^0.13.4":
   version: 0.13.4
   resolution: "ast-types@npm:0.13.4"
@@ -17870,6 +20749,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ast-types@npm:^0.16.1":
+  version: 0.16.1
+  resolution: "ast-types@npm:0.16.1"
+  dependencies:
+    tslib: "npm:^2.0.1"
+  checksum: 10/f569b475eb1c8cb93888cb6e7b7e36dc43fa19a77e4eb132cbff6e3eb1598ca60f850db6e60b070e5a0ee8c1559fca921dac0916e576f2f104e198793b0bdd8d
+  languageName: node
+  linkType: hard
+
 "astral-regex@npm:^2.0.0":
   version: 2.0.0
   resolution: "astral-regex@npm:2.0.0"
@@ -17877,6 +20765,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"async-limiter@npm:~1.0.0":
+  version: 1.0.1
+  resolution: "async-limiter@npm:1.0.1"
+  checksum: 10/2b849695b465d93ad44c116220dee29a5aeb63adac16c1088983c339b0de57d76e82533e8e364a93a9f997f28bbfc6a92948cefc120652bd07f3b59f8d75cf2b
+  languageName: node
+  linkType: hard
+
 "async@npm:3.2.4, async@npm:^3.2.0, async@npm:^3.2.3, async@npm:~3.2.0":
   version: 3.2.4
   resolution: "async@npm:3.2.4"
@@ -18030,6 +20925,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"axe-core@npm:^4.2.0":
+  version: 4.10.3
+  resolution: "axe-core@npm:4.10.3"
+  checksum: 10/9ff51ad0fd0fdec5c0247ea74e8ace5990b54c7f01f8fa3e5cd8ba98b0db24d8ebd7bab4a9bd4d75c28c4edcd1eac455b44c8c6c258c6a98f3d2f88bc60af4cc
+  languageName: node
+  linkType: hard
+
 "axios@npm:^1.6.0, axios@npm:^1.7.9":
   version: 1.7.9
   resolution: "axios@npm:1.7.9"
@@ -18048,6 +20950,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"babel-core@npm:^7.0.0-bridge.0":
+  version: 7.0.0-bridge.0
+  resolution: "babel-core@npm:7.0.0-bridge.0"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10/2a1cb879019dffb08d17bec36e13c3a6d74c94773f41c1fd8b14de13f149cc34b705b0a1e07b42fcf35917b49d78db6ff0c5c3b00b202a5235013d517b5c6bbb
+  languageName: node
+  linkType: hard
+
 "babel-jest@npm:29.7.0, babel-jest@npm:^29.7.0":
   version: 29.7.0
   resolution: "babel-jest@npm:29.7.0"
@@ -18065,7 +20976,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"babel-loader@npm:^9.2.1":
+"babel-loader@npm:9.2.1, babel-loader@npm:^9.0.0, babel-loader@npm:^9.2.1":
   version: 9.2.1
   resolution: "babel-loader@npm:9.2.1"
   dependencies:
@@ -18078,6 +20989,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"babel-plugin-add-react-displayname@npm:^0.0.5":
+  version: 0.0.5
+  resolution: "babel-plugin-add-react-displayname@npm:0.0.5"
+  checksum: 10/5aa2dfa89da8091f7b372861b2f19a333abd3a321ac60b2b438589f81a5924c3551764526d894438e020e832b5490b0de81af8583b475bed6c70532903026bc3
+  languageName: node
+  linkType: hard
+
 "babel-plugin-dynamic-import-node@npm:2.3.3":
   version: 2.3.3
   resolution: "babel-plugin-dynamic-import-node@npm:2.3.3"
@@ -18199,6 +21117,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"babel-plugin-polyfill-corejs3@npm:^0.11.0":
+  version: 0.11.1
+  resolution: "babel-plugin-polyfill-corejs3@npm:0.11.1"
+  dependencies:
+    "@babel/helper-define-polyfill-provider": "npm:^0.6.3"
+    core-js-compat: "npm:^3.40.0"
+  peerDependencies:
+    "@babel/core": ^7.4.0 || ^8.0.0-0 <8.0.0
+  checksum: 10/19a2978ee3462cc3b98e7d36e6537bf9fb1fb61f42fd96cb41e9313f2ac6f2c62380d94064366431eff537f342184720fe9bce73eb65fd57c5311d15e8648f62
+  languageName: node
+  linkType: hard
+
 "babel-plugin-polyfill-regenerator@npm:^0.6.1":
   version: 0.6.1
   resolution: "babel-plugin-polyfill-regenerator@npm:0.6.1"
@@ -18352,6 +21282,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"better-opn@npm:^3.0.2":
+  version: 3.0.2
+  resolution: "better-opn@npm:3.0.2"
+  dependencies:
+    open: "npm:^8.0.4"
+  checksum: 10/24668e5a837d0d2c0edf17ad5ebcfeb00a8a5578a5eb09f7a409e1a60617cdfea40b8ebfc95e5f12d9568157930d033e6805788fcf0780413ac982c95d3745d1
+  languageName: node
+  linkType: hard
+
+"big-integer@npm:^1.6.44":
+  version: 1.6.52
+  resolution: "big-integer@npm:1.6.52"
+  checksum: 10/4bc6ae152a96edc9f95020f5fc66b13d26a9ad9a021225a9f0213f7e3dc44269f423aa8c42e19d6ac4a63bb2b22140b95d10be8f9ca7a6d9aa1b22b330d1f514
+  languageName: node
+  linkType: hard
+
 "big.js@npm:^5.2.2":
   version: 5.2.2
   resolution: "big.js@npm:5.2.2"
@@ -18520,6 +21466,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"bplist-parser@npm:^0.2.0":
+  version: 0.2.0
+  resolution: "bplist-parser@npm:0.2.0"
+  dependencies:
+    big-integer: "npm:^1.6.44"
+  checksum: 10/15d31c1b0c7e0fb384e96349453879a33609d92d91b55a9ccee04b4be4b0645f1c823253d73326a1a23104521fbc45c2dd97fb05adf61863841b68cbb2ca7a3d
+  languageName: node
+  linkType: hard
+
 "brace-expansion@npm:^1.1.7":
   version: 1.1.11
   resolution: "brace-expansion@npm:1.1.11"
@@ -18539,13 +21494,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"brace@npm:^0.11.1":
-  version: 0.11.1
-  resolution: "brace@npm:0.11.1"
-  checksum: 10/4eca4d27fb32fc34894e8a092753df21c05c1a6c8fe05c60da97bd92571eb03c5cfa27ca79fb93b7d17e6013d78d650db43f42aa6212e02d58e61ee56306fe7e
-  languageName: node
-  linkType: hard
-
 "braces@npm:^3.0.3, braces@npm:~3.0.2":
   version: 3.0.3
   resolution: "braces@npm:3.0.3"
@@ -18562,6 +21510,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"browser-assert@npm:^1.2.1":
+  version: 1.2.1
+  resolution: "browser-assert@npm:1.2.1"
+  checksum: 10/8b2407cd04c1ed592cf892dec35942b7d72635829221e0788c9a16c4d2afa8b7156bc9705b1c4b32c30d88136c576fda3cbcb8f494d6f865264c706ea8798d92
+  languageName: node
+  linkType: hard
+
 "browserify-aes@npm:^1.0.0, browserify-aes@npm:^1.0.4, browserify-aes@npm:^1.2.0":
   version: 1.2.0
   resolution: "browserify-aes@npm:1.2.0"
@@ -18692,6 +21647,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"browserslist@npm:^4.24.4":
+  version: 4.24.5
+  resolution: "browserslist@npm:4.24.5"
+  dependencies:
+    caniuse-lite: "npm:^1.0.30001716"
+    electron-to-chromium: "npm:^1.5.149"
+    node-releases: "npm:^2.0.19"
+    update-browserslist-db: "npm:^1.1.3"
+  bin:
+    browserslist: cli.js
+  checksum: 10/93fde829b77f20e2c4e1e0eaed154681c05e4828420e4afba790d480daa5de742977a44bbac8567881b8fbec3da3dea7ca1cb578ac1fd4385ef4ae91ca691d64
+  languageName: node
+  linkType: hard
+
 "bs-logger@npm:0.x":
   version: 0.2.6
   resolution: "bs-logger@npm:0.2.6"
@@ -19083,6 +22052,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"camelcase-css@npm:^2.0.1":
+  version: 2.0.1
+  resolution: "camelcase-css@npm:2.0.1"
+  checksum: 10/1cec2b3b3dcb5026688a470b00299a8db7d904c4802845c353dbd12d9d248d3346949a814d83bfd988d4d2e5b9904c07efe76fecd195a1d4f05b543e7c0b56b1
+  languageName: node
+  linkType: hard
+
 "camelcase-keys@npm:^6.2.2":
   version: 6.2.2
   resolution: "camelcase-keys@npm:6.2.2"
@@ -19155,7 +22131,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"case-sensitive-paths-webpack-plugin@npm:2.4.0":
+"caniuse-lite@npm:^1.0.30001716":
+  version: 1.0.30001718
+  resolution: "caniuse-lite@npm:1.0.30001718"
+  checksum: 10/e172a4c156f743cc947e659f353ad9edb045725cc109a02cc792dcbf98569356ebfa4bb4356e3febf87427aab0951c34c1ee5630629334f25ae6f76de7d86fd0
+  languageName: node
+  linkType: hard
+
+"case-sensitive-paths-webpack-plugin@npm:2.4.0, case-sensitive-paths-webpack-plugin@npm:^2.4.0":
   version: 2.4.0
   resolution: "case-sensitive-paths-webpack-plugin@npm:2.4.0"
   checksum: 10/8187f4a6d9c1342a62e76466d4f2ed53e6c0ea73fdbf7779751538f2abe49738bfd16b43592367f00f37fdd593accf92162c1043c016dd6d9ccb55180b6b5fa7
@@ -19420,6 +22403,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"citty@npm:^0.1.6":
+  version: 0.1.6
+  resolution: "citty@npm:0.1.6"
+  dependencies:
+    consola: "npm:^3.2.3"
+  checksum: 10/3208947e73abb699a12578ee2bfee254bf8dd1ce0d5698e8a298411cabf16bd3620d63433aef5bd88cdb2b9da71aef18adefa3b4ffd18273bb62dd1d28c344f5
+  languageName: node
+  linkType: hard
+
 "cjs-module-lexer@npm:^1.0.0":
   version: 1.2.2
   resolution: "cjs-module-lexer@npm:1.2.2"
@@ -19434,6 +22426,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"cjs-module-lexer@npm:^1.2.3":
+  version: 1.4.3
+  resolution: "cjs-module-lexer@npm:1.4.3"
+  checksum: 10/d2b92f919a2dedbfd61d016964fce8da0035f827182ed6839c97cac56e8a8077cfa6a59388adfe2bc588a19cef9bbe830d683a76a6e93c51f65852062cfe2591
+  languageName: node
+  linkType: hard
+
+"class-variance-authority@npm:^0.7.0":
+  version: 0.7.1
+  resolution: "class-variance-authority@npm:0.7.1"
+  dependencies:
+    clsx: "npm:^2.1.1"
+  checksum: 10/27a1face3f5ee88caa7813743461977aef5110830dc8e8960e7c9570598b37ffb8b2760b4e5d738dc827b0eb9058ddd204e9002e9af0ef39b6851f6ea9aa82c1
+  languageName: node
+  linkType: hard
+
 "classlist-polyfill@npm:^1.0.3":
   version: 1.2.0
   resolution: "classlist-polyfill@npm:1.2.0"
@@ -19441,7 +22449,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"classnames@npm:2.x, classnames@npm:^2.2.1, classnames@npm:^2.2.6, classnames@npm:^2.3.1, classnames@npm:^2.5.1":
+"classnames@npm:^2.5.1":
   version: 2.5.1
   resolution: "classnames@npm:2.5.1"
   checksum: 10/58eb394e8817021b153bb6e7d782cfb667e4ab390cb2e9dac2fc7c6b979d1cc2b2a733093955fc5c94aa79ef5c8c89f11ab77780894509be6afbb91dddd79d15
@@ -19512,7 +22520,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"cli-table3@npm:^0.6.5":
+"cli-table3@npm:^0.6.1, cli-table3@npm:^0.6.5":
   version: 0.6.5
   resolution: "cli-table3@npm:0.6.5"
   dependencies:
@@ -19697,6 +22705,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"clsx@npm:^2.1.1":
+  version: 2.1.1
+  resolution: "clsx@npm:2.1.1"
+  checksum: 10/cdfb57fa6c7649bbff98d9028c2f0de2f91c86f551179541cf784b1cfdc1562dcb951955f46d54d930a3879931a980e32a46b598acaea274728dbe068deca919
+  languageName: node
+  linkType: hard
+
 "cmd-shim@npm:6.0.1":
   version: 6.0.1
   resolution: "cmd-shim@npm:6.0.1"
@@ -19711,6 +22726,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"cmdk@npm:^1.0.4":
+  version: 1.1.1
+  resolution: "cmdk@npm:1.1.1"
+  dependencies:
+    "@radix-ui/react-compose-refs": "npm:^1.1.1"
+    "@radix-ui/react-dialog": "npm:^1.1.6"
+    "@radix-ui/react-id": "npm:^1.1.0"
+    "@radix-ui/react-primitive": "npm:^2.0.2"
+  peerDependencies:
+    react: ^18 || ^19 || ^19.0.0-rc
+    react-dom: ^18 || ^19 || ^19.0.0-rc
+  checksum: 10/8f52beee4a6289d67138bdeb3b9833fb67fb06cfea53968803f31b6a39b09ca3c8698a302c6bf8286ee6cc0c8f5dc2c4e5a398450f48db7b9f2d1657f3c4bde2
+  languageName: node
+  linkType: hard
+
 "co@npm:^4.6.0":
   version: 4.6.0
   resolution: "co@npm:4.6.0"
@@ -19868,6 +22898,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"commander@npm:^4.0.0":
+  version: 4.1.1
+  resolution: "commander@npm:4.1.1"
+  checksum: 10/3b2dc4125f387dab73b3294dbcb0ab2a862f9c0ad748ee2b27e3544d25325b7a8cdfbcc228d103a98a716960b14478114a5206b5415bd48cdafa38797891562c
+  languageName: node
+  linkType: hard
+
 "commander@npm:^6.2.0, commander@npm:^6.2.1":
   version: 6.2.1
   resolution: "commander@npm:6.2.1"
@@ -20014,13 +23051,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"compute-scroll-into-view@npm:^1.0.2, compute-scroll-into-view@npm:^1.0.9":
-  version: 1.0.20
-  resolution: "compute-scroll-into-view@npm:1.0.20"
-  checksum: 10/a72e2595ccab57ca61bb14b368738c7473ebb96da6c85f4dbe00cb810570f71f52d9c26b4463f6092663cbf917d0693881eef4f8e8d4204d7581a83bef082afe
-  languageName: node
-  linkType: hard
-
 "concat-map@npm:0.0.1":
   version: 0.0.1
   resolution: "concat-map@npm:0.0.1"
@@ -20052,6 +23082,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"confbox@npm:^0.1.8":
+  version: 0.1.8
+  resolution: "confbox@npm:0.1.8"
+  checksum: 10/4ebcfb1c6a3b25276734ec5722e88768eb61fc02f98e11960b845c5c62bc27fd05f493d2a8244d9675b24ef95afe4c0d511cdcad02c72f5eeea463cc26687999
+  languageName: node
+  linkType: hard
+
 "confusing-browser-globals@npm:^1.0.10":
   version: 1.0.11
   resolution: "confusing-browser-globals@npm:1.0.11"
@@ -20073,6 +23110,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"consola@npm:^3.4.0":
+  version: 3.4.2
+  resolution: "consola@npm:3.4.2"
+  checksum: 10/32192c9f50d7cac27c5d7c4ecd3ff3679aea863e6bf5bd6a9cc2b05d1cd78addf5dae71df08c54330c142be8e7fbd46f051030129b57c6aacdd771efe409c4b2
+  languageName: node
+  linkType: hard
+
 "console-browserify@npm:1.1.x":
   version: 1.1.0
   resolution: "console-browserify@npm:1.1.0"
@@ -20089,6 +23133,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"constants-browserify@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "constants-browserify@npm:1.0.0"
+  checksum: 10/49ef0babd907616dddde6905b80fe44ad5948e1eaaf6cf65d5f23a8c60c029ff63a1198c364665be1d6b2cb183d7e12921f33049cc126734ade84a3cfdbc83f6
+  languageName: node
+  linkType: hard
+
 "content-disposition@npm:0.5.4":
   version: 0.5.4
   resolution: "content-disposition@npm:0.5.4"
@@ -20298,6 +23349,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"core-js-compat@npm:^3.40.0":
+  version: 3.42.0
+  resolution: "core-js-compat@npm:3.42.0"
+  dependencies:
+    browserslist: "npm:^4.24.4"
+  checksum: 10/2052c73e500e95420d948a0595f4055e40ca6a208cc15c7981b7f202efa851bfae3de59a13009dc367cc5fbaeb8ff84a64c7c0bfc37de4b3bd2cf6b0e14290bd
+  languageName: node
+  linkType: hard
+
 "core-js-pure@npm:^3.10.2, core-js-pure@npm:^3.23.3, core-js-pure@npm:^3.25.1":
   version: 3.27.2
   resolution: "core-js-pure@npm:3.27.2"
@@ -20642,6 +23702,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"crypto-random-string@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "crypto-random-string@npm:2.0.0"
+  checksum: 10/0283879f55e7c16fdceacc181f87a0a65c53bc16ffe1d58b9d19a6277adcd71900d02bb2c4843dd55e78c51e30e89b0fec618a7f170ebcc95b33182c28f05fd6
+  languageName: node
+  linkType: hard
+
 "css-blank-pseudo@npm:^6.0.1":
   version: 6.0.1
   resolution: "css-blank-pseudo@npm:6.0.1"
@@ -20699,6 +23766,30 @@ __metadata:
   languageName: node
   linkType: hard
 
+"css-loader@npm:^6.7.1":
+  version: 6.11.0
+  resolution: "css-loader@npm:6.11.0"
+  dependencies:
+    icss-utils: "npm:^5.1.0"
+    postcss: "npm:^8.4.33"
+    postcss-modules-extract-imports: "npm:^3.1.0"
+    postcss-modules-local-by-default: "npm:^4.0.5"
+    postcss-modules-scope: "npm:^3.2.0"
+    postcss-modules-values: "npm:^4.0.0"
+    postcss-value-parser: "npm:^4.2.0"
+    semver: "npm:^7.5.4"
+  peerDependencies:
+    "@rspack/core": 0.x || 1.x
+    webpack: ^5.0.0
+  peerDependenciesMeta:
+    "@rspack/core":
+      optional: true
+    webpack:
+      optional: true
+  checksum: 10/9e3665509f6786d46683de5c5f5c4bdd4aa62396b4017b41dbbb41ea5ada4012c80ee1e3302b79b504bc24da7fa69e3552d99006cecc953e0d9eef4a3053b929
+  languageName: node
+  linkType: hard
+
 "css-minimizer-webpack-plugin@npm:^7.0.0":
   version: 7.0.0
   resolution: "css-minimizer-webpack-plugin@npm:7.0.0"
@@ -20927,7 +24018,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"csstype@npm:^2.5.7, csstype@npm:^2.6.6":
+"csstype@npm:^2.5.7":
   version: 2.6.21
   resolution: "csstype@npm:2.6.21"
   checksum: 10/bf9072344fac1b56dc390fbc410b411bbc2a03fa9c3d243a74ff5687f94777f9da03a5681ac01efc2e68b51055e2c7d6a489185a85a8f01c976a85f9eec3b75e
@@ -21069,20 +24160,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"d3-ease@npm:^1.0.3":
-  version: 1.0.7
-  resolution: "d3-ease@npm:1.0.7"
-  checksum: 10/7bddd332094e4d02964f414e4b70d02db5efb920065c0a3dd850c1b16b2bd8e930d1a37d2b2f0e8322ce943710e0f395f06870a8ad0ba2d33a5835ec9356bbaa
-  languageName: node
-  linkType: hard
-
-"d3-timer@npm:^1.0.9":
-  version: 1.0.10
-  resolution: "d3-timer@npm:1.0.10"
-  checksum: 10/aeaf0f849f1ed316ab4467b822333b22851f174faa6c7dd24735b86bf5f3dc75bb3c3ae02b99ba1f16260a7570ac59563728577ecb6083e47edbaff2ca5c9237
-  languageName: node
-  linkType: hard
-
 "dargs@npm:^7.0.0":
   version: 7.0.0
   resolution: "dargs@npm:7.0.0"
@@ -21401,7 +24478,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"dedent@npm:0.7.0":
+"dedent@npm:0.7.0, dedent@npm:^0.7.0":
   version: 0.7.0
   resolution: "dedent@npm:0.7.0"
   checksum: 10/87de191050d9a40dd70cad01159a0bcf05ecb59750951242070b6abf9569088684880d00ba92a955b4058804f16eeaf91d604f283929b4f614d181cd7ae633d2
@@ -21506,6 +24583,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"default-browser-id@npm:3.0.0":
+  version: 3.0.0
+  resolution: "default-browser-id@npm:3.0.0"
+  dependencies:
+    bplist-parser: "npm:^0.2.0"
+    untildify: "npm:^4.0.0"
+  checksum: 10/279c7ad492542e5556336b6c254a4eaf31b2c63a5433265655ae6e47301197b6cfb15c595a6fdc6463b2ff8e1a1a1ed3cba56038a60e1527ba4ab1628c6b9941
+  languageName: node
+  linkType: hard
+
 "default-gateway@npm:^6.0.3":
   version: 6.0.3
   resolution: "default-gateway@npm:6.0.3"
@@ -21608,6 +24695,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"defu@npm:^6.1.4":
+  version: 6.1.4
+  resolution: "defu@npm:6.1.4"
+  checksum: 10/aeffdb47300f45b4fdef1c5bd3880ac18ea7a1fd5b8a8faf8df29350ff03bf16dd34f9800205cab513d476e4c0a3783aa0cff0a433aff0ac84a67ddc4c8a2d64
+  languageName: node
+  linkType: hard
+
 "degenerator@npm:^5.0.0":
   version: 5.0.1
   resolution: "degenerator@npm:5.0.1"
@@ -21701,7 +24795,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"detect-indent@npm:^6.0.0":
+"detect-indent@npm:^6.0.0, detect-indent@npm:^6.1.0":
   version: 6.1.0
   resolution: "detect-indent@npm:6.1.0"
   checksum: 10/ab953a73c72dbd4e8fc68e4ed4bfd92c97eb6c43734af3900add963fd3a9316f3bc0578b018b24198d4c31a358571eff5f0656e81a1f3b9ad5c547d58b2d093d
@@ -21722,6 +24816,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"detect-node-es@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "detect-node-es@npm:1.1.0"
+  checksum: 10/e46307d7264644975b71c104b9f028ed1d3d34b83a15b8a22373640ce5ea630e5640b1078b8ea15f202b54641da71e4aa7597093bd4b91f113db520a26a37449
+  languageName: node
+  linkType: hard
+
 "detect-node@npm:^2.0.4":
   version: 2.1.0
   resolution: "detect-node@npm:2.1.0"
@@ -21729,6 +24830,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"detect-package-manager@npm:^2.0.1":
+  version: 2.0.1
+  resolution: "detect-package-manager@npm:2.0.1"
+  dependencies:
+    execa: "npm:^5.1.1"
+  checksum: 10/e72b910182d5ad479198d4235be206ac64a479257b32201bb06f3c842cc34c65ea851d46f72cc1d4bf535bcc6c4b44b5b86bb29fe1192b8c9c07b46883672f28
+  languageName: node
+  linkType: hard
+
 "detect-port-alt@npm:^1.1.6":
   version: 1.1.6
   resolution: "detect-port-alt@npm:1.1.6"
@@ -21742,6 +24852,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"detect-port@npm:^1.3.0":
+  version: 1.6.1
+  resolution: "detect-port@npm:1.6.1"
+  dependencies:
+    address: "npm:^1.0.1"
+    debug: "npm:4"
+  bin:
+    detect: bin/detect-port.js
+    detect-port: bin/detect-port.js
+  checksum: 10/0429fa423abb15fc453face64e6ffa406e375f51f5b4421a7886962e680dc05824eae9b6ee4594ba273685c3add415ad00982b5da54802ac3de6f846173284c3
+  languageName: node
+  linkType: hard
+
 "devtools-protocol@npm:0.0.1367902":
   version: 0.0.1367902
   resolution: "devtools-protocol@npm:0.0.1367902"
@@ -21749,7 +24872,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"diff-match-patch@npm:^1.0.4":
+"didyoumean@npm:^1.2.2":
+  version: 1.2.2
+  resolution: "didyoumean@npm:1.2.2"
+  checksum: 10/de7f11b6a0c8c61018629b7f405bb9746d6e994ce87c1a4b7655c3c718442dc69037a3d46d804950604fd9cbe85c074f7b224a119fc1bda851690a74540c6cf8
+  languageName: node
+  linkType: hard
+
+"diff-match-patch@npm:^1.0.5":
   version: 1.0.5
   resolution: "diff-match-patch@npm:1.0.5"
   checksum: 10/fd1ab417eba9559bda752a4dfc9a8ac73fa2ca8b146d29d153964b437168e301c09d8a688fae0cd81d32dc6508a4918a94614213c85df760793f44e245173bb6
@@ -21804,6 +24934,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"dlv@npm:^1.1.3":
+  version: 1.1.3
+  resolution: "dlv@npm:1.1.3"
+  checksum: 10/836459ec6b50e43e9ed388a5fc28954be99e3481af3fa4b5d82a600762eb65ef8faacd454097ed7fc2f8a60aea2800d65a4cece5cd0d81ab82b2031f3f759e6e
+  languageName: node
+  linkType: hard
+
 "dnd-core@npm:^16.0.1":
   version: 16.0.1
   resolution: "dnd-core@npm:16.0.1"
@@ -21872,13 +25009,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"dom-align@npm:^1.7.0":
-  version: 1.12.4
-  resolution: "dom-align@npm:1.12.4"
-  checksum: 10/fbfb005fcb1572700dc164bdb0c5ba2a6b438ddf8b7fb1d7250b697f7899922364a671a37fa3f09b16596fc289d9bddeae6406a45f9587b91c24438590c73a2b
-  languageName: node
-  linkType: hard
-
 "dom-converter@npm:^0.2.0":
   version: 0.2.0
   resolution: "dom-converter@npm:0.2.0"
@@ -22086,13 +25216,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"dotenv-expand@npm:~10.0.0":
+"dotenv-expand@npm:^10.0.0, dotenv-expand@npm:~10.0.0":
   version: 10.0.0
   resolution: "dotenv-expand@npm:10.0.0"
   checksum: 10/b41eb278bc96b92cbf3037ca5f3d21e8845bf165dc06b6f9a0a03d278c2bd5a01c0cfbb3528ae3a60301ba1a8a9cace30e748c54b460753bc00d4c014b675597
   languageName: node
   linkType: hard
 
+"dotenv@npm:^16.0.0":
+  version: 16.5.0
+  resolution: "dotenv@npm:16.5.0"
+  checksum: 10/e68a16834f1a41cc2dfb01563bc150668ad675e6cd09191211467b5c0806b6ecd6ec438e021aa8e01cd0e72d2b70ef4302bec7cc0fe15b6955f85230b62dc8a9
+  languageName: node
+  linkType: hard
+
 "dotenv@npm:^8.2.0":
   version: 8.6.0
   resolution: "dotenv@npm:8.6.0"
@@ -22107,32 +25244,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"downshift@npm:^2.1.5":
-  version: 2.2.3
-  resolution: "downshift@npm:2.2.3"
-  dependencies:
-    compute-scroll-into-view: "npm:^1.0.2"
-    prop-types: "npm:^15.6.0"
-  peerDependencies:
-    react: ">=0.14.9"
-  checksum: 10/d0c8d7cd0c29466e2df6be49e30148bd5ecf72bbb40f87e753ff3985bac338f69007cb318f2fa7e8b862f437a6f94ca0fa02a9bffecca20508a94ae2570b82d7
-  languageName: node
-  linkType: hard
-
-"downshift@npm:^3.1.2":
-  version: 3.4.8
-  resolution: "downshift@npm:3.4.8"
-  dependencies:
-    "@babel/runtime": "npm:^7.4.5"
-    compute-scroll-into-view: "npm:^1.0.9"
-    prop-types: "npm:^15.7.2"
-    react-is: "npm:^16.9.0"
-  peerDependencies:
-    react: ">=0.14.9"
-  checksum: 10/7776751cd4a4d655bf615a34609d634bb1e2abf1718da15d4b8a46ee2847c2c5641ca3937c17f4ef3d4bfc31bbcdd6d77872041e325318d0939b7ad842221f24
-  languageName: node
-  linkType: hard
-
 "dset@npm:^3.1.2":
   version: 3.1.4
   resolution: "dset@npm:3.1.4"
@@ -22261,7 +25372,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ejs@npm:^3.1.5, ejs@npm:^3.1.7":
+"ejs@npm:^3.1.5, ejs@npm:^3.1.7, ejs@npm:^3.1.8":
   version: 3.1.10
   resolution: "ejs@npm:3.1.10"
   dependencies:
@@ -22302,6 +25413,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"electron-to-chromium@npm:^1.5.149":
+  version: 1.5.159
+  resolution: "electron-to-chromium@npm:1.5.159"
+  checksum: 10/ca2ce6cbbde3cfeb7f2f584ff91bbebce17900bf6c1c7a2220e71431da359f0284fbd92b13e74e08a2f31f087073a7dc3e7d7de014c8a642a182b61c6c240760
+  languageName: node
+  linkType: hard
+
 "electron-to-chromium@npm:^1.5.41":
   version: 1.5.57
   resolution: "electron-to-chromium@npm:1.5.57"
@@ -22436,6 +25554,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"endent@npm:^2.0.1":
+  version: 2.1.0
+  resolution: "endent@npm:2.1.0"
+  dependencies:
+    dedent: "npm:^0.7.0"
+    fast-json-parse: "npm:^1.0.3"
+    objectorarray: "npm:^1.0.5"
+  checksum: 10/c352831088fce745a39ddbd5f87a17e073ea6556e7e96e9010d945a3f3020f836b9a84657123fa01e897db9216f4b080d950b5ded9bf3a8227f14a34efaaaf7c
+  languageName: node
+  linkType: hard
+
 "enhanced-resolve@npm:^5.17.1":
   version: 5.17.1
   resolution: "enhanced-resolve@npm:5.17.1"
@@ -22507,7 +25636,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"envinfo@npm:7.14.0":
+"envinfo@npm:7.14.0, envinfo@npm:^7.7.3":
   version: 7.14.0
   resolution: "envinfo@npm:7.14.0"
   bin:
@@ -22739,6 +25868,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"es-module-lexer@npm:^1.4.1":
+  version: 1.7.0
+  resolution: "es-module-lexer@npm:1.7.0"
+  checksum: 10/b6f3e576a3fed4d82b0d0ad4bbf6b3a5ad694d2e7ce8c4a069560da3db6399381eaba703616a182b16dde50ce998af64e07dcf49f2ae48153b9e07be3f107087
+  languageName: node
+  linkType: hard
+
 "es-object-atoms@npm:^1.0.0":
   version: 1.0.0
   resolution: "es-object-atoms@npm:1.0.0"
@@ -22809,6 +25945,101 @@ __metadata:
   languageName: node
   linkType: hard
 
+"esbuild-plugin-alias@npm:^0.2.1":
+  version: 0.2.1
+  resolution: "esbuild-plugin-alias@npm:0.2.1"
+  checksum: 10/afe2d2c8b5f09d5321cb8d9c0825e8a9f6e03c2d50df92f953a291d4620cc29eddb3da9e33b238f6d8f77738e0277bdcb831f127399449fecf78fb84c04e5da9
+  languageName: node
+  linkType: hard
+
+"esbuild-register@npm:^3.5.0":
+  version: 3.6.0
+  resolution: "esbuild-register@npm:3.6.0"
+  dependencies:
+    debug: "npm:^4.3.4"
+  peerDependencies:
+    esbuild: ">=0.12 <1"
+  checksum: 10/4ae1a016e3dad5b53c3d68cf07e31d8c1cec1a0b584038ece726097ac80bd33ab48fb224c766c9b341c04793837e652461eaca9327a116e7564f553b61ccca71
+  languageName: node
+  linkType: hard
+
+"esbuild@npm:^0.18.0":
+  version: 0.18.20
+  resolution: "esbuild@npm:0.18.20"
+  dependencies:
+    "@esbuild/android-arm": "npm:0.18.20"
+    "@esbuild/android-arm64": "npm:0.18.20"
+    "@esbuild/android-x64": "npm:0.18.20"
+    "@esbuild/darwin-arm64": "npm:0.18.20"
+    "@esbuild/darwin-x64": "npm:0.18.20"
+    "@esbuild/freebsd-arm64": "npm:0.18.20"
+    "@esbuild/freebsd-x64": "npm:0.18.20"
+    "@esbuild/linux-arm": "npm:0.18.20"
+    "@esbuild/linux-arm64": "npm:0.18.20"
+    "@esbuild/linux-ia32": "npm:0.18.20"
+    "@esbuild/linux-loong64": "npm:0.18.20"
+    "@esbuild/linux-mips64el": "npm:0.18.20"
+    "@esbuild/linux-ppc64": "npm:0.18.20"
+    "@esbuild/linux-riscv64": "npm:0.18.20"
+    "@esbuild/linux-s390x": "npm:0.18.20"
+    "@esbuild/linux-x64": "npm:0.18.20"
+    "@esbuild/netbsd-x64": "npm:0.18.20"
+    "@esbuild/openbsd-x64": "npm:0.18.20"
+    "@esbuild/sunos-x64": "npm:0.18.20"
+    "@esbuild/win32-arm64": "npm:0.18.20"
+    "@esbuild/win32-ia32": "npm:0.18.20"
+    "@esbuild/win32-x64": "npm:0.18.20"
+  dependenciesMeta:
+    "@esbuild/android-arm":
+      optional: true
+    "@esbuild/android-arm64":
+      optional: true
+    "@esbuild/android-x64":
+      optional: true
+    "@esbuild/darwin-arm64":
+      optional: true
+    "@esbuild/darwin-x64":
+      optional: true
+    "@esbuild/freebsd-arm64":
+      optional: true
+    "@esbuild/freebsd-x64":
+      optional: true
+    "@esbuild/linux-arm":
+      optional: true
+    "@esbuild/linux-arm64":
+      optional: true
+    "@esbuild/linux-ia32":
+      optional: true
+    "@esbuild/linux-loong64":
+      optional: true
+    "@esbuild/linux-mips64el":
+      optional: true
+    "@esbuild/linux-ppc64":
+      optional: true
+    "@esbuild/linux-riscv64":
+      optional: true
+    "@esbuild/linux-s390x":
+      optional: true
+    "@esbuild/linux-x64":
+      optional: true
+    "@esbuild/netbsd-x64":
+      optional: true
+    "@esbuild/openbsd-x64":
+      optional: true
+    "@esbuild/sunos-x64":
+      optional: true
+    "@esbuild/win32-arm64":
+      optional: true
+    "@esbuild/win32-ia32":
+      optional: true
+    "@esbuild/win32-x64":
+      optional: true
+  bin:
+    esbuild: bin/esbuild
+  checksum: 10/1f723ec71c3aa196473bf3298316eedc3f62d523924652dfeb60701b609792f918fc60db84b420d1d8ba9bfa7d69de2fc1d3157ba47c028bdae5d507a26a3c64
+  languageName: node
+  linkType: hard
+
 "escalade@npm:^3.1.1":
   version: 3.1.1
   resolution: "escalade@npm:3.1.1"
@@ -23217,7 +26448,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"esprima@npm:^4.0.0, esprima@npm:^4.0.1":
+"esprima@npm:^4.0.0, esprima@npm:^4.0.1, esprima@npm:~4.0.0":
   version: 4.0.1
   resolution: "esprima@npm:4.0.1"
   bin:
@@ -23454,7 +26685,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"exenv@npm:^1.2.0, exenv@npm:^1.2.2":
+"exenv@npm:^1.2.2":
   version: 1.2.2
   resolution: "exenv@npm:1.2.2"
   checksum: 10/6840185e421394bcb143debb866d31d19c3e4a4bca87d2f319d68d61afff353b3c678f2eb389e3b98ab9aecbec19f6bebbdc4193984378af0a3366c498a7efc8
@@ -23548,7 +26779,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"extend@npm:~3.0.2":
+"extend@npm:^3.0.0, extend@npm:~3.0.2":
   version: 3.0.2
   resolution: "extend@npm:3.0.2"
   checksum: 10/59e89e2dc798ec0f54b36d82f32a27d5f6472c53974f61ca098db5d4648430b725387b53449a34df38fd0392045434426b012f302b3cc049a6500ccf82877e4e
@@ -23601,7 +26832,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"extract-zip@npm:^1.6.7":
+"extract-zip@npm:^1.6.6, extract-zip@npm:^1.6.7":
   version: 1.7.0
   resolution: "extract-zip@npm:1.7.0"
   dependencies:
@@ -23713,6 +26944,26 @@ __metadata:
   languageName: node
   linkType: hard
 
+"fast-glob@npm:^3.3.2":
+  version: 3.3.3
+  resolution: "fast-glob@npm:3.3.3"
+  dependencies:
+    "@nodelib/fs.stat": "npm:^2.0.2"
+    "@nodelib/fs.walk": "npm:^1.2.3"
+    glob-parent: "npm:^5.1.2"
+    merge2: "npm:^1.3.0"
+    micromatch: "npm:^4.0.8"
+  checksum: 10/dcc6432b269762dd47381d8b8358bf964d8f4f60286ac6aa41c01ade70bda459ff2001b516690b96d5365f68a49242966112b5d5cc9cd82395fa8f9d017c90ad
+  languageName: node
+  linkType: hard
+
+"fast-json-parse@npm:^1.0.3":
+  version: 1.0.3
+  resolution: "fast-json-parse@npm:1.0.3"
+  checksum: 10/4ae38b50a4641d503995862e3f103ad77b865a5c8c8894923a88eb1839af35fe7d2f1a7b2cabb42481fec781fad9876cc6e37d9bf25d175da35ea47e874dafb5
+  languageName: node
+  linkType: hard
+
 "fast-json-patch@npm:^3.0.0-1":
   version: 3.1.1
   resolution: "fast-json-patch@npm:3.1.1"
@@ -23916,6 +27167,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"fetch-retry@npm:^5.0.2":
+  version: 5.0.6
+  resolution: "fetch-retry@npm:5.0.6"
+  checksum: 10/9d64b37f9d179fecf486725ada210d169375803b731304a9500754e094a2a6aa81630d946adbb313d7f9d54457ad0d17c3ed5c115034961a719e8a65faa8b77c
+  languageName: node
+  linkType: hard
+
 "figures@npm:3.2.0, figures@npm:^3.0.0, figures@npm:^3.2.0":
   version: 3.2.0
   resolution: "figures@npm:3.2.0"
@@ -23965,6 +27223,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"file-system-cache@npm:2.3.0":
+  version: 2.3.0
+  resolution: "file-system-cache@npm:2.3.0"
+  dependencies:
+    fs-extra: "npm:11.1.1"
+    ramda: "npm:0.29.0"
+  checksum: 10/8f0530aaa8bed115ef1b00f69accde8d1311d0eaffc6e37bb0b5057b8be79e6e960823025ea3c980a58147eed0ba690b9906c2229e132f5d96158e9b635a052c
+  languageName: node
+  linkType: hard
+
 "file-type@npm:^3.8.0":
   version: 3.9.0
   resolution: "file-type@npm:3.9.0"
@@ -24046,6 +27314,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"find-cache-dir@npm:^3.0.0, find-cache-dir@npm:^3.3.1":
+  version: 3.3.2
+  resolution: "find-cache-dir@npm:3.3.2"
+  dependencies:
+    commondir: "npm:^1.0.1"
+    make-dir: "npm:^3.0.2"
+    pkg-dir: "npm:^4.1.0"
+  checksum: 10/3907c2e0b15132704ed67083686cd3e68ab7d9ecc22e50ae9da20678245d488b01fa22c0e34c0544dc6edc4354c766f016c8c186a787be7c17f7cde8c5281e85
+  languageName: node
+  linkType: hard
+
 "find-cache-dir@npm:^4.0.0":
   version: 4.0.0
   resolution: "find-cache-dir@npm:4.0.0"
@@ -24164,6 +27443,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"flow-parser@npm:0.*":
+  version: 0.272.1
+  resolution: "flow-parser@npm:0.272.1"
+  checksum: 10/0bf6c92ab651d1a65af4a20801d602695c6b7f11550dbcee3f470f35572d56108091b558c8c1451055463e7ae3213c79b5a26a4028ef734958ecfd4733c9dfbd
+  languageName: node
+  linkType: hard
+
 "folder-hash@npm:^4.0.4":
   version: 4.0.4
   resolution: "folder-hash@npm:4.0.4"
@@ -24243,6 +27529,29 @@ __metadata:
   languageName: node
   linkType: hard
 
+"fork-ts-checker-webpack-plugin@npm:^8.0.0":
+  version: 8.0.0
+  resolution: "fork-ts-checker-webpack-plugin@npm:8.0.0"
+  dependencies:
+    "@babel/code-frame": "npm:^7.16.7"
+    chalk: "npm:^4.1.2"
+    chokidar: "npm:^3.5.3"
+    cosmiconfig: "npm:^7.0.1"
+    deepmerge: "npm:^4.2.2"
+    fs-extra: "npm:^10.0.0"
+    memfs: "npm:^3.4.1"
+    minimatch: "npm:^3.0.4"
+    node-abort-controller: "npm:^3.0.1"
+    schema-utils: "npm:^3.1.1"
+    semver: "npm:^7.3.5"
+    tapable: "npm:^2.2.1"
+  peerDependencies:
+    typescript: ">3.6.0"
+    webpack: ^5.11.0
+  checksum: 10/49be81a780271b0e1f8c230c32ddb54d7e7ca562565b29811a94d5e679607b947850b133c3bb63057a71e67ac717c6c86c6d0390d1ecc885b506ae9158cf9bb5
+  languageName: node
+  linkType: hard
+
 "fork-ts-checker-webpack-plugin@npm:^9.0.2":
   version: 9.0.2
   resolution: "fork-ts-checker-webpack-plugin@npm:9.0.2"
@@ -24327,6 +27636,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"fs-extra@npm:11.1.1":
+  version: 11.1.1
+  resolution: "fs-extra@npm:11.1.1"
+  dependencies:
+    graceful-fs: "npm:^4.2.0"
+    jsonfile: "npm:^6.0.1"
+    universalify: "npm:^2.0.0"
+  checksum: 10/c4e9fabf9762a70d1403316b7faa899f3d3303c8afa765b891c2210fdeba368461e04ae1203920b64ef6a7d066a39ab8cef2160b5ce8d1011bb4368688cd9bb7
+  languageName: node
+  linkType: hard
+
 "fs-extra@npm:^10.0.0":
   version: 10.1.0
   resolution: "fs-extra@npm:10.1.0"
@@ -24589,6 +27909,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"get-nonce@npm:^1.0.0":
+  version: 1.0.1
+  resolution: "get-nonce@npm:1.0.1"
+  checksum: 10/ad5104871d114a694ecc506a2d406e2331beccb961fe1e110dc25556b38bcdbf399a823a8a375976cd8889668156a9561e12ebe3fa6a4c6ba169c8466c2ff868
+  languageName: node
+  linkType: hard
+
+"get-npm-tarball-url@npm:^2.0.3":
+  version: 2.1.0
+  resolution: "get-npm-tarball-url@npm:2.1.0"
+  checksum: 10/02b96993ad5a04cbd0ef0577ac3cc9e2e78a7c60db6bb5e6c8fe78950fc1fc3d093314987629a2fda3083228d91a93670bde321767ca2cf89ce7f463c9e44071
+  languageName: node
+  linkType: hard
+
 "get-package-type@npm:^0.1.0":
   version: 0.1.0
   resolution: "get-package-type@npm:0.1.0"
@@ -24610,7 +27944,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"get-port@npm:5.1.1":
+"get-port@npm:5.1.1, get-port@npm:^5.1.1":
   version: 5.1.1
   resolution: "get-port@npm:5.1.1"
   checksum: 10/0162663ffe5c09e748cd79d97b74cd70e5a5c84b760a475ce5767b357fb2a57cb821cee412d646aa8a156ed39b78aab88974eddaa9e5ee926173c036c0713787
@@ -24759,6 +28093,23 @@ __metadata:
   languageName: node
   linkType: hard
 
+"giget@npm:^1.0.0":
+  version: 1.2.5
+  resolution: "giget@npm:1.2.5"
+  dependencies:
+    citty: "npm:^0.1.6"
+    consola: "npm:^3.4.0"
+    defu: "npm:^6.1.4"
+    node-fetch-native: "npm:^1.6.6"
+    nypm: "npm:^0.5.4"
+    pathe: "npm:^2.0.3"
+    tar: "npm:^6.2.1"
+  bin:
+    giget: dist/cli.mjs
+  checksum: 10/3992a6882c9c25d530ca610ab21501f6f0189b95102ae7f4374fa6c8b3fbf860b9eb162cd036cbb773db5d5ad568001bb23a9245693f0cf30acc1ccb59c59948
+  languageName: node
+  linkType: hard
+
 "git-cz@npm:^1.7.1":
   version: 1.8.4
   resolution: "git-cz@npm:1.8.4"
@@ -24888,6 +28239,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"github-slugger@npm:^1.0.0":
+  version: 1.5.0
+  resolution: "github-slugger@npm:1.5.0"
+  checksum: 10/c70988224578b3bdaa25df65973ffc8c24594a77a28550c3636e495e49d17aef5cdb04c04fa3f1744babef98c61eecc6a43299a13ea7f3cc33d680bf9053ffbe
+  languageName: node
+  linkType: hard
+
 "glob-parent@npm:5.1.2, glob-parent@npm:^5.1.2, glob-parent@npm:~5.1.2":
   version: 5.1.2
   resolution: "glob-parent@npm:5.1.2"
@@ -25082,7 +28440,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"globby@npm:11.1.0, globby@npm:^11.0.1, globby@npm:^11.0.4, globby@npm:^11.1.0":
+"globby@npm:11.1.0, globby@npm:^11.0.1, globby@npm:^11.0.2, globby@npm:^11.0.4, globby@npm:^11.1.0":
   version: 11.1.0
   resolution: "globby@npm:11.1.0"
   dependencies:
@@ -25670,7 +29028,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"html-webpack-plugin@npm:^5.6.3":
+"html-tags@npm:^3.1.0":
+  version: 3.3.1
+  resolution: "html-tags@npm:3.3.1"
+  checksum: 10/d0e808544b92d8b999cbcc86d539577255a2f0f2f4f73110d10749d1d36e6fe6ad706a0355a8477afb6e000ecdc93d8455b3602951f9a2b694ac9e28f1b52878
+  languageName: node
+  linkType: hard
+
+"html-webpack-plugin@npm:^5.5.0, html-webpack-plugin@npm:^5.6.3":
   version: 5.6.3
   resolution: "html-webpack-plugin@npm:5.6.3"
   dependencies:
@@ -25895,6 +29260,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"https-proxy-agent@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "https-proxy-agent@npm:4.0.0"
+  dependencies:
+    agent-base: "npm:5"
+    debug: "npm:4"
+  checksum: 10/e90ca77ec10ef9987ad464853dfee744fb13fb02ad72f31c770ba09fb55675206a1de3c8b7e74d809fc00ed3baa7e01a48c569a419a675bfa3ef1ee975822b70
+  languageName: node
+  linkType: hard
+
 "https-proxy-agent@npm:^7.0.1, https-proxy-agent@npm:^7.0.2":
   version: 7.0.4
   resolution: "https-proxy-agent@npm:7.0.4"
@@ -25980,13 +29355,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"hyperform@npm:^0.11.0":
-  version: 0.11.0
-  resolution: "hyperform@npm:0.11.0"
-  checksum: 10/0c244f4768c58417247b719d8cfda97966d840a59b4026e4150b767d5d305f956afc39586569175eb3b3eb472d0473531b0645e1d567982995d361c98c3a3d33
-  languageName: node
-  linkType: hard
-
 "hyphenate-style-name@npm:^1.0.1":
   version: 1.0.4
   resolution: "hyphenate-style-name@npm:1.0.4"
@@ -26416,6 +29784,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-absolute-url@npm:^3.0.0":
+  version: 3.0.3
+  resolution: "is-absolute-url@npm:3.0.3"
+  checksum: 10/5159b51d065d9ad29e16a2f78d6c0e41c43227caf90a45e659c54ea6fd50ef0595b1871ce392e84b1df7cfdcad9a8e66eec0813a029112188435abf115accb16
+  languageName: node
+  linkType: hard
+
 "is-arguments@npm:^1.0.4, is-arguments@npm:^1.1.1":
   version: 1.1.1
   resolution: "is-arguments@npm:1.1.1"
@@ -26797,7 +30172,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-nan@npm:^1.2.1":
+"is-nan@npm:^1.2.1, is-nan@npm:^1.3.2":
   version: 1.3.2
   resolution: "is-nan@npm:1.3.2"
   dependencies:
@@ -26898,6 +30273,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-plain-object@npm:5.0.0, is-plain-object@npm:^5.0.0":
+  version: 5.0.0
+  resolution: "is-plain-object@npm:5.0.0"
+  checksum: 10/e32d27061eef62c0847d303125440a38660517e586f2f3db7c9d179ae5b6674ab0f469d519b2e25c147a1a3bc87156d0d5f4d8821e0ce4a9ee7fe1fcf11ce45c
+  languageName: node
+  linkType: hard
+
 "is-plain-object@npm:^2.0.4":
   version: 2.0.4
   resolution: "is-plain-object@npm:2.0.4"
@@ -26907,13 +30289,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-plain-object@npm:^5.0.0":
-  version: 5.0.0
-  resolution: "is-plain-object@npm:5.0.0"
-  checksum: 10/e32d27061eef62c0847d303125440a38660517e586f2f3db7c9d179ae5b6674ab0f469d519b2e25c147a1a3bc87156d0d5f4d8821e0ce4a9ee7fe1fcf11ce45c
-  languageName: node
-  linkType: hard
-
 "is-potential-custom-element-name@npm:^1.0.1":
   version: 1.0.1
   resolution: "is-potential-custom-element-name@npm:1.0.1"
@@ -27950,6 +31325,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"jiti@npm:^1.21.6":
+  version: 1.21.7
+  resolution: "jiti@npm:1.21.7"
+  bin:
+    jiti: bin/jiti.js
+  checksum: 10/6a182521532126e4b7b5ad64b64fb2e162718fc03bc6019c21aa2222aacde6c6dfce4fc3bce9f69561a73b24ab5f79750ad353c37c3487a220d5869a39eae3a2
+  languageName: node
+  linkType: hard
+
 "joycon@npm:^3.1.1":
   version: 3.1.1
   resolution: "joycon@npm:3.1.1"
@@ -28034,6 +31418,41 @@ __metadata:
   languageName: node
   linkType: hard
 
+"jscodeshift@npm:^0.15.1":
+  version: 0.15.2
+  resolution: "jscodeshift@npm:0.15.2"
+  dependencies:
+    "@babel/core": "npm:^7.23.0"
+    "@babel/parser": "npm:^7.23.0"
+    "@babel/plugin-transform-class-properties": "npm:^7.22.5"
+    "@babel/plugin-transform-modules-commonjs": "npm:^7.23.0"
+    "@babel/plugin-transform-nullish-coalescing-operator": "npm:^7.22.11"
+    "@babel/plugin-transform-optional-chaining": "npm:^7.23.0"
+    "@babel/plugin-transform-private-methods": "npm:^7.22.5"
+    "@babel/preset-flow": "npm:^7.22.15"
+    "@babel/preset-typescript": "npm:^7.23.0"
+    "@babel/register": "npm:^7.22.15"
+    babel-core: "npm:^7.0.0-bridge.0"
+    chalk: "npm:^4.1.2"
+    flow-parser: "npm:0.*"
+    graceful-fs: "npm:^4.2.4"
+    micromatch: "npm:^4.0.4"
+    neo-async: "npm:^2.5.0"
+    node-dir: "npm:^0.1.17"
+    recast: "npm:^0.23.3"
+    temp: "npm:^0.8.4"
+    write-file-atomic: "npm:^2.3.0"
+  peerDependencies:
+    "@babel/preset-env": ^7.1.6
+  peerDependenciesMeta:
+    "@babel/preset-env":
+      optional: true
+  bin:
+    jscodeshift: bin/jscodeshift.js
+  checksum: 10/5f4354d80a95de4dba5dd402e97e5bba8c6b31261f426719cb184099ac83c57c47e4160923b7c035a5da4113e56c39eb68233e3b55a910372013d66d3b1f1c64
+  languageName: node
+  linkType: hard
+
 "jsdom@npm:^20.0.0":
   version: 20.0.3
   resolution: "jsdom@npm:20.0.3"
@@ -28421,15 +31840,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"kapellmeister@npm:^3.0.1":
-  version: 3.0.1
-  resolution: "kapellmeister@npm:3.0.1"
-  dependencies:
-    d3-timer: "npm:^1.0.9"
-  checksum: 10/53dc1f72fe6b4b2487294bb0eef655dfc5181a1768cef3e7c62fd5f35c9a1e146c8a59fd3e2b8b5da55bf3c349b6e9dcab6a68d932ab65158bbe022b11fee39c
-  languageName: node
-  linkType: hard
-
 "keycode@npm:^2.2.0":
   version: 2.2.1
   resolution: "keycode@npm:2.2.1"
@@ -28498,6 +31908,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lazy-universal-dotenv@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "lazy-universal-dotenv@npm:4.0.0"
+  dependencies:
+    app-root-dir: "npm:^1.0.2"
+    dotenv: "npm:^16.0.0"
+    dotenv-expand: "npm:^10.0.0"
+  checksum: 10/5aa4d1a01d108d1f4a565576b58e728be949ceccecef894d6a9de56cb2b8e2e033abd47424190d0a546cb22b4b4a3ab553346b9710c3294870660d4a3555dd34
+  languageName: node
+  linkType: hard
+
 "lazy@npm:^1.0.11, lazy@npm:~1.0.11":
   version: 1.0.11
   resolution: "lazy@npm:1.0.11"
@@ -28822,7 +32243,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lilconfig@npm:^3.1.2, lilconfig@npm:~3.1.3":
+"lilconfig@npm:^3.0.0, lilconfig@npm:^3.1.2, lilconfig@npm:^3.1.3, lilconfig@npm:~3.1.3":
   version: 3.1.3
   resolution: "lilconfig@npm:3.1.3"
   checksum: 10/b932ce1af94985f0efbe8896e57b1f814a48c8dbd7fc0ef8469785c6303ed29d0090af3ccad7e36b626bfca3a4dc56cc262697e9a8dd867623cf09a39d54e4c3
@@ -29440,6 +32861,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"magic-string@npm:^0.30.5":
+  version: 0.30.17
+  resolution: "magic-string@npm:0.30.17"
+  dependencies:
+    "@jridgewell/sourcemap-codec": "npm:^1.5.0"
+  checksum: 10/2f71af2b0afd78c2e9012a29b066d2c8ba45a9cd0c8070f7fd72de982fb1c403b4e3afdb1dae00691d56885ede66b772ef6bedf765e02e3a7066208fe2fec4aa
+  languageName: node
+  linkType: hard
+
 "make-dir@npm:4.0.0":
   version: 4.0.0
   resolution: "make-dir@npm:4.0.0"
@@ -29468,7 +32898,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"make-dir@npm:^3.0.0":
+"make-dir@npm:^3.0.0, make-dir@npm:^3.0.2":
   version: 3.1.0
   resolution: "make-dir@npm:3.1.0"
   dependencies:
@@ -29573,6 +33003,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"map-or-similar@npm:^1.5.0":
+  version: 1.5.0
+  resolution: "map-or-similar@npm:1.5.0"
+  checksum: 10/3cf43bcd0e7af41d7bade5f8b5be6bb9d021cc47e6008ad545d071cf3a709ba782884002f9eec6ccd51f572fc17841e07bf74628e0bc3694c33f4622b03e4b4c
+  languageName: node
+  linkType: hard
+
+"markdown-to-jsx@npm:^7.1.8":
+  version: 7.7.6
+  resolution: "markdown-to-jsx@npm:7.7.6"
+  peerDependencies:
+    react: ">= 0.14.0"
+  checksum: 10/0bf73f6163c0586059adff5a5a3855a1f6b2ea7081a9c68a65397a5e94b55f88fa11956ce48907da18aae3e7f78f8e4fb1a81d9a8b9db1e0a07ec2219e748c33
+  languageName: node
+  linkType: hard
+
 "matcher@npm:^4.0.0":
   version: 4.0.0
   resolution: "matcher@npm:4.0.0"
@@ -29589,63 +33035,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"material-components-web@npm:^14.0.0":
-  version: 14.0.0
-  resolution: "material-components-web@npm:14.0.0"
-  dependencies:
-    "@material/animation": "npm:^14.0.0"
-    "@material/auto-init": "npm:^14.0.0"
-    "@material/banner": "npm:^14.0.0"
-    "@material/base": "npm:^14.0.0"
-    "@material/button": "npm:^14.0.0"
-    "@material/card": "npm:^14.0.0"
-    "@material/checkbox": "npm:^14.0.0"
-    "@material/chips": "npm:^14.0.0"
-    "@material/circular-progress": "npm:^14.0.0"
-    "@material/data-table": "npm:^14.0.0"
-    "@material/density": "npm:^14.0.0"
-    "@material/dialog": "npm:^14.0.0"
-    "@material/dom": "npm:^14.0.0"
-    "@material/drawer": "npm:^14.0.0"
-    "@material/elevation": "npm:^14.0.0"
-    "@material/fab": "npm:^14.0.0"
-    "@material/feature-targeting": "npm:^14.0.0"
-    "@material/floating-label": "npm:^14.0.0"
-    "@material/focus-ring": "npm:^14.0.0"
-    "@material/form-field": "npm:^14.0.0"
-    "@material/icon-button": "npm:^14.0.0"
-    "@material/image-list": "npm:^14.0.0"
-    "@material/layout-grid": "npm:^14.0.0"
-    "@material/line-ripple": "npm:^14.0.0"
-    "@material/linear-progress": "npm:^14.0.0"
-    "@material/list": "npm:^14.0.0"
-    "@material/menu": "npm:^14.0.0"
-    "@material/menu-surface": "npm:^14.0.0"
-    "@material/notched-outline": "npm:^14.0.0"
-    "@material/radio": "npm:^14.0.0"
-    "@material/ripple": "npm:^14.0.0"
-    "@material/rtl": "npm:^14.0.0"
-    "@material/segmented-button": "npm:^14.0.0"
-    "@material/select": "npm:^14.0.0"
-    "@material/shape": "npm:^14.0.0"
-    "@material/slider": "npm:^14.0.0"
-    "@material/snackbar": "npm:^14.0.0"
-    "@material/switch": "npm:^14.0.0"
-    "@material/tab": "npm:^14.0.0"
-    "@material/tab-bar": "npm:^14.0.0"
-    "@material/tab-indicator": "npm:^14.0.0"
-    "@material/tab-scroller": "npm:^14.0.0"
-    "@material/textfield": "npm:^14.0.0"
-    "@material/theme": "npm:^14.0.0"
-    "@material/tokens": "npm:^14.0.0"
-    "@material/tooltip": "npm:^14.0.0"
-    "@material/top-app-bar": "npm:^14.0.0"
-    "@material/touch-target": "npm:^14.0.0"
-    "@material/typography": "npm:^14.0.0"
-  checksum: 10/52bd68a9b5c64a6ca0224611c8c62a3abb5ed4a3c4d498bb9369644964d2daf0abac6f727b0e219bb9881bb01167e54d1f1177fc5ce022cfe08a651a1c4ef84d
-  languageName: node
-  linkType: hard
-
 "math-intrinsics@npm:^1.1.0":
   version: 1.1.0
   resolution: "math-intrinsics@npm:1.1.0"
@@ -29675,6 +33064,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"mdast-util-definitions@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "mdast-util-definitions@npm:4.0.0"
+  dependencies:
+    unist-util-visit: "npm:^2.0.0"
+  checksum: 10/c76da4b4f1e28f8e7c85bf664ab65060f5aa7e0fd0392a24482980984d4ba878b7635a08bcaccca060d6602f478ac6cadaffbbe65f910f75ce332fd67d0ade69
+  languageName: node
+  linkType: hard
+
+"mdast-util-to-string@npm:^1.0.0":
+  version: 1.1.0
+  resolution: "mdast-util-to-string@npm:1.1.0"
+  checksum: 10/eec1eb283f3341376c8398b67ce512a11ab3e3191e3dbd5644d32a26784eac8d5f6d0b0fb81193af00d75a2c545cde765c8b03e966bd890076efb5d357fb4fe2
+  languageName: node
+  linkType: hard
+
 "mdbid@npm:^1.0.0":
   version: 1.0.0
   resolution: "mdbid@npm:1.0.0"
@@ -29742,7 +33147,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"memfs@npm:^3.4.1, memfs@npm:^3.4.3":
+"memfs@npm:^3.4.1, memfs@npm:^3.4.12, memfs@npm:^3.4.3":
   version: 3.5.3
   resolution: "memfs@npm:3.5.3"
   dependencies:
@@ -29763,6 +33168,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"memoizerific@npm:^1.11.3":
+  version: 1.11.3
+  resolution: "memoizerific@npm:1.11.3"
+  dependencies:
+    map-or-similar: "npm:^1.5.0"
+  checksum: 10/72b6b80699777d000f03db6e15fdabcd4afe77feb45be51fe195cb230c64a368fcfcfbb976375eac3283bd8193d6b1a67ac3081cae07f64fca73f1aa568d59e3
+  languageName: node
+  linkType: hard
+
 "meow@npm:^8.0.0, meow@npm:^8.1.2":
   version: 8.1.2
   resolution: "meow@npm:8.1.2"
@@ -29846,7 +33260,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"mime-types@npm:^2.1.12, mime-types@npm:^2.1.27, mime-types@npm:^2.1.31, mime-types@npm:~2.1.17, mime-types@npm:~2.1.19, mime-types@npm:~2.1.24, mime-types@npm:~2.1.34":
+"mime-types@npm:^2.1.12, mime-types@npm:^2.1.25, mime-types@npm:^2.1.27, mime-types@npm:^2.1.31, mime-types@npm:~2.1.17, mime-types@npm:~2.1.19, mime-types@npm:~2.1.24, mime-types@npm:~2.1.34":
   version: 2.1.35
   resolution: "mime-types@npm:2.1.35"
   dependencies:
@@ -29864,7 +33278,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"mime@npm:2.6.0, mime@npm:^2.0.0":
+"mime@npm:2.6.0, mime@npm:^2.0.0, mime@npm:^2.0.3":
   version: 2.6.0
   resolution: "mime@npm:2.6.0"
   bin:
@@ -29924,7 +33338,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"min-indent@npm:^1.0.0":
+"min-indent@npm:^1.0.0, min-indent@npm:^1.0.1":
   version: 1.0.1
   resolution: "min-indent@npm:1.0.1"
   checksum: 10/bfc6dd03c5eaf623a4963ebd94d087f6f4bbbfd8c41329a7f09706b0cb66969c4ddd336abeb587bc44bc6f08e13bf90f0b374f9d71f9f01e04adc2cd6f083ef1
@@ -29992,7 +33406,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"minimatch@npm:^3.0.4, minimatch@npm:^3.0.5, minimatch@npm:^3.1.1, minimatch@npm:^3.1.2":
+"minimatch@npm:^3.0.2, minimatch@npm:^3.0.4, minimatch@npm:^3.0.5, minimatch@npm:^3.1.1, minimatch@npm:^3.1.2":
   version: 3.1.2
   resolution: "minimatch@npm:3.1.2"
   dependencies:
@@ -30237,6 +33651,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"mlly@npm:^1.7.4":
+  version: 1.7.4
+  resolution: "mlly@npm:1.7.4"
+  dependencies:
+    acorn: "npm:^8.14.0"
+    pathe: "npm:^2.0.1"
+    pkg-types: "npm:^1.3.0"
+    ufo: "npm:^1.5.4"
+  checksum: 10/1b36163d38c2331f8ae480e6a11da3d15927a2148d729fcd9df6d0059ca74869aa693931bd1f762f82eb534b84c921bdfbc036eb0e4da4faeb55f1349d254f35
+  languageName: node
+  linkType: hard
+
 "mnemonist@npm:0.38.3":
   version: 0.38.3
   resolution: "mnemonist@npm:0.38.3"
@@ -30374,13 +33800,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"mutation-observer@npm:^1.0.3":
-  version: 1.0.3
-  resolution: "mutation-observer@npm:1.0.3"
-  checksum: 10/09735d9985423eee7651bee1fc68a7b3eded1c04c0b977b31cf190c35cf5239278add8314ba745f41e21aa74006e27622c4e675ff31a098eda7a5a7b9791311e
-  languageName: node
-  linkType: hard
-
 "mute-stream@npm:0.0.7":
   version: 0.0.7
   resolution: "mute-stream@npm:0.0.7"
@@ -30402,6 +33821,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"mz@npm:^2.7.0":
+  version: 2.7.0
+  resolution: "mz@npm:2.7.0"
+  dependencies:
+    any-promise: "npm:^1.0.0"
+    object-assign: "npm:^4.0.1"
+    thenify-all: "npm:^1.0.0"
+  checksum: 10/8427de0ece99a07e9faed3c0c6778820d7543e3776f9a84d22cf0ec0a8eb65f6e9aee9c9d353ff9a105ff62d33a9463c6ca638974cc652ee8140cd1e35951c87
+  languageName: node
+  linkType: hard
+
 "nanoid-dictionary@npm:^4.3.0":
   version: 4.3.0
   resolution: "nanoid-dictionary@npm:4.3.0"
@@ -30475,7 +33905,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"neo-async@npm:^2.6.0, neo-async@npm:^2.6.2":
+"neo-async@npm:^2.5.0, neo-async@npm:^2.6.0, neo-async@npm:^2.6.2":
   version: 2.6.2
   resolution: "neo-async@npm:2.6.2"
   checksum: 10/1a7948fea86f2b33ec766bc899c88796a51ba76a4afc9026764aedc6e7cde692a09067031e4a1bf6db4f978ccd99e7f5b6c03fe47ad9865c3d4f99050d67e002
@@ -30553,6 +33983,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"node-dir@npm:^0.1.17":
+  version: 0.1.17
+  resolution: "node-dir@npm:0.1.17"
+  dependencies:
+    minimatch: "npm:^3.0.2"
+  checksum: 10/281fdea12d9c080a7250e5b5afefa3ab39426d40753ec8126a2d1e67f189b8824723abfed74f5d8549c5d78352d8c489fe08d0b067d7684c87c07283d38374a5
+  languageName: node
+  linkType: hard
+
+"node-fetch-native@npm:^1.6.6":
+  version: 1.6.6
+  resolution: "node-fetch-native@npm:1.6.6"
+  checksum: 10/e90d5287fdfb10b9b13276158c9c0ff4318eef222562cf4a504e71665236dea9dda10ae77eb9f0f89cb7677a32ccf2326b9b54f7090121c2af2ac617c1256f8f
+  languageName: node
+  linkType: hard
+
 "node-fetch@npm:2.6.7, node-fetch@npm:cjs":
   version: 2.6.7
   resolution: "node-fetch@npm:2.6.7"
@@ -30567,7 +34013,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"node-fetch@npm:^2.6.1, node-fetch@npm:^2.7.0":
+"node-fetch@npm:^2.0.0, node-fetch@npm:^2.6.1, node-fetch@npm:^2.7.0":
   version: 2.7.0
   resolution: "node-fetch@npm:2.7.0"
   dependencies:
@@ -30699,6 +34145,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"node-releases@npm:^2.0.19":
+  version: 2.0.19
+  resolution: "node-releases@npm:2.0.19"
+  checksum: 10/c2b33b4f0c40445aee56141f13ca692fa6805db88510e5bbb3baadb2da13e1293b738e638e15e4a8eb668bb9e97debb08e7a35409b477b5cc18f171d35a83045
+  languageName: node
+  linkType: hard
+
 "node-releases@npm:^2.0.8":
   version: 2.0.10
   resolution: "node-releases@npm:2.0.10"
@@ -31012,13 +34465,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"nprogress@npm:^0.2.0":
-  version: 0.2.0
-  resolution: "nprogress@npm:0.2.0"
-  checksum: 10/1870a74c054c01899f89e85122d7548832d083b5fa5d3cc6aafc2d4f92901e15face402ef557be5b103aed7b6e1406c656b842dec32b553b4b052031ea1b0935
-  languageName: node
-  linkType: hard
-
 "nssocket@npm:0.6.0":
   version: 0.6.0
   resolution: "nssocket@npm:0.6.0"
@@ -31038,23 +34484,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"nuka-carousel@npm:4.7.1":
-  version: 4.7.1
-  resolution: "nuka-carousel@npm:4.7.1"
-  dependencies:
-    csstype: "npm:^2.6.6"
-    d3-ease: "npm:^1.0.3"
-    exenv: "npm:^1.2.0"
-    prop-types: "npm:^15.6.0"
-    react-move: "npm:^6.1.0"
-    wicg-inert: "npm:^3.0.3"
-  peerDependencies:
-    react: ^0.14.9 || ^15.3.0 || ^16.0.0
-    react-dom: ^0.14.9 || ^15.3.0 || ^16.0.0
-  checksum: 10/7d909c1967dda3cfd1e04629ddd8835ffd4496b9e86fa5baf9ba0a5d8f401368226b37338c110b7635b59a1ac9966aa1581e6c636edfae1c7a6d526c304483a0
-  languageName: node
-  linkType: hard
-
 "null-loader@npm:^4.0.1":
   version: 4.0.1
   resolution: "null-loader@npm:4.0.1"
@@ -31175,6 +34604,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"nypm@npm:^0.5.4":
+  version: 0.5.4
+  resolution: "nypm@npm:0.5.4"
+  dependencies:
+    citty: "npm:^0.1.6"
+    consola: "npm:^3.4.0"
+    pathe: "npm:^2.0.3"
+    pkg-types: "npm:^1.3.1"
+    tinyexec: "npm:^0.3.2"
+    ufo: "npm:^1.5.4"
+  bin:
+    nypm: dist/cli.mjs
+  checksum: 10/b93e072d26ee32dee445e1689e4e99c645d75cc282ac8b1e0e7ad2c17259ea0ca2883acec732ae588ac3bed04c6839fcb69b2e9dd2a2e257baba3f505b0e6859
+  languageName: node
+  linkType: hard
+
 "object-assign@npm:^4, object-assign@npm:^4.0.1, object-assign@npm:^4.1.0, object-assign@npm:^4.1.1":
   version: 4.1.1
   resolution: "object-assign@npm:4.1.1"
@@ -31317,6 +34762,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"objectorarray@npm:^1.0.5":
+  version: 1.0.5
+  resolution: "objectorarray@npm:1.0.5"
+  checksum: 10/8fd776aa495d113e217837f4adc1d53e63f656498237094d25f84c3e2c038b34b71d6fd85c4b60c7ae5f558790e5042426a400fae3eac35f297e11be12643a78
+  languageName: node
+  linkType: hard
+
 "obliterator@npm:^1.6.1":
   version: 1.6.1
   resolution: "obliterator@npm:1.6.1"
@@ -31427,7 +34879,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"open@npm:^8.0.9, open@npm:^8.4.2":
+"open@npm:^8.0.4, open@npm:^8.0.9, open@npm:^8.4.2":
   version: 8.4.2
   resolution: "open@npm:8.4.2"
   dependencies:
@@ -32166,6 +35618,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"pathe@npm:^2.0.1, pathe@npm:^2.0.3":
+  version: 2.0.3
+  resolution: "pathe@npm:2.0.3"
+  checksum: 10/01e9a69928f39087d96e1751ce7d6d50da8c39abf9a12e0ac2389c42c83bc76f78c45a475bd9026a02e6a6f79be63acc75667df855862fe567d99a00a540d23d
+  languageName: node
+  linkType: hard
+
 "pbkdf2@npm:^3.0.3, pbkdf2@npm:^3.1.2":
   version: 3.1.2
   resolution: "pbkdf2@npm:3.1.2"
@@ -32218,7 +35677,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"picomatch@npm:^2.0.4, picomatch@npm:^2.2.1, picomatch@npm:^2.2.3, picomatch@npm:^2.3.1":
+"picomatch@npm:^2.0.4, picomatch@npm:^2.2.1, picomatch@npm:^2.2.3, picomatch@npm:^2.3.0, picomatch@npm:^2.3.1":
   version: 2.3.1
   resolution: "picomatch@npm:2.3.1"
   checksum: 10/60c2595003b05e4535394d1da94850f5372c9427ca4413b71210f437f7b2ca091dbd611c45e8b37d10036fa8eade25c1b8951654f9d3973bfa66a2ff4d3b08bc
@@ -32433,6 +35892,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"pirates@npm:^4.0.1":
+  version: 4.0.7
+  resolution: "pirates@npm:4.0.7"
+  checksum: 10/2427f371366081ae42feb58214f04805d6b41d6b84d74480ebcc9e0ddbd7105a139f7c653daeaf83ad8a1a77214cf07f64178e76de048128fec501eab3305a96
+  languageName: node
+  linkType: hard
+
 "pirates@npm:^4.0.4":
   version: 4.0.5
   resolution: "pirates@npm:4.0.5"
@@ -32467,7 +35933,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"pkg-dir@npm:^4.2.0":
+"pkg-dir@npm:^4.1.0, pkg-dir@npm:^4.2.0":
   version: 4.2.0
   resolution: "pkg-dir@npm:4.2.0"
   dependencies:
@@ -32494,6 +35960,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"pkg-types@npm:^1.3.0, pkg-types@npm:^1.3.1":
+  version: 1.3.1
+  resolution: "pkg-types@npm:1.3.1"
+  dependencies:
+    confbox: "npm:^0.1.8"
+    mlly: "npm:^1.7.4"
+    pathe: "npm:^2.0.1"
+  checksum: 10/6d491f2244597b24fb59a50e3c258f27da3839555d2a4e112b31bcf536e9359fc4edc98639cd74d2cf16fcd4269e5a09d99fc05d89e2acc896a2f027c2f6ec44
+  languageName: node
+  linkType: hard
+
 "pkg-up@npm:^3.1.0":
   version: 3.1.0
   resolution: "pkg-up@npm:3.1.0"
@@ -32656,6 +36133,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"polished@npm:^4.2.2":
+  version: 4.3.1
+  resolution: "polished@npm:4.3.1"
+  dependencies:
+    "@babel/runtime": "npm:^7.17.8"
+  checksum: 10/0902fe2eb16aecde1587a00efee7db8081b1331ac7bcfb6e61214d266388723a84858d732ad9395028e0aecd2bb8d0c39cc03d14b4c24c22329a0e40c38141eb
+  languageName: node
+  linkType: hard
+
 "possible-typed-array-names@npm:^1.0.0":
   version: 1.0.0
   resolution: "possible-typed-array-names@npm:1.0.0"
@@ -32938,6 +36424,30 @@ __metadata:
   languageName: node
   linkType: hard
 
+"postcss-import@npm:^15.1.0":
+  version: 15.1.0
+  resolution: "postcss-import@npm:15.1.0"
+  dependencies:
+    postcss-value-parser: "npm:^4.0.0"
+    read-cache: "npm:^1.0.0"
+    resolve: "npm:^1.1.7"
+  peerDependencies:
+    postcss: ^8.0.0
+  checksum: 10/33c91b7e6b794b5c33d7d7d4730e5f0729c131d2de1ada7fcc116955625a78c3ce613983f019fa9447681795cf3f851e9c38dfbe3f48a2d08a8aef917c70a32a
+  languageName: node
+  linkType: hard
+
+"postcss-js@npm:^4.0.1":
+  version: 4.0.1
+  resolution: "postcss-js@npm:4.0.1"
+  dependencies:
+    camelcase-css: "npm:^2.0.1"
+  peerDependencies:
+    postcss: ^8.4.21
+  checksum: 10/ef2cfe8554daab4166cfcb290f376e7387964c36503f5bd42008778dba735685af8d4f5e0aba67cae999f47c855df40a1cd31ae840e0df320ded36352581045e
+  languageName: node
+  linkType: hard
+
 "postcss-lab-function@npm:^6.0.10":
   version: 6.0.12
   resolution: "postcss-lab-function@npm:6.0.12"
@@ -32953,7 +36463,25 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss-loader@npm:6.2.1":
+"postcss-load-config@npm:^4.0.2":
+  version: 4.0.2
+  resolution: "postcss-load-config@npm:4.0.2"
+  dependencies:
+    lilconfig: "npm:^3.0.0"
+    yaml: "npm:^2.3.4"
+  peerDependencies:
+    postcss: ">=8.0.9"
+    ts-node: ">=9.0.0"
+  peerDependenciesMeta:
+    postcss:
+      optional: true
+    ts-node:
+      optional: true
+  checksum: 10/e2c2ed9b7998a5b123e1ce0c124daf6504b1454c67dcc1c8fdbcc5ffb2597b7de245e3ac34f63afc928d3fd3260b1e36492ebbdb01a9ff63f16b3c8b7b925d1b
+  languageName: node
+  linkType: hard
+
+"postcss-loader@npm:6.2.1, postcss-loader@npm:^6.2.1":
   version: 6.2.1
   resolution: "postcss-loader@npm:6.2.1"
   dependencies:
@@ -33062,6 +36590,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"postcss-modules-extract-imports@npm:^3.1.0":
+  version: 3.1.0
+  resolution: "postcss-modules-extract-imports@npm:3.1.0"
+  peerDependencies:
+    postcss: ^8.1.0
+  checksum: 10/00bfd3aff045fc13ded8e3bbfd8dfc73eff9a9708db1b2a132266aef6544c8d2aee7a5d7e021885f6f9bbd5565a9a9ab52990316e21ad9468a2534f87df8e849
+  languageName: node
+  linkType: hard
+
 "postcss-modules-local-by-default@npm:^4.0.4":
   version: 4.0.4
   resolution: "postcss-modules-local-by-default@npm:4.0.4"
@@ -33075,6 +36612,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"postcss-modules-local-by-default@npm:^4.0.5":
+  version: 4.2.0
+  resolution: "postcss-modules-local-by-default@npm:4.2.0"
+  dependencies:
+    icss-utils: "npm:^5.0.0"
+    postcss-selector-parser: "npm:^7.0.0"
+    postcss-value-parser: "npm:^4.1.0"
+  peerDependencies:
+    postcss: ^8.1.0
+  checksum: 10/552329aa39fbf229b8ac5a04f8aed0b1553e7a3c10b165ee700d1deb020c071875b3df7ab5e3591f6af33d461df66d330ec9c1256229e45fc618a47c60f41536
+  languageName: node
+  linkType: hard
+
 "postcss-modules-scope@npm:^3.1.1":
   version: 3.1.1
   resolution: "postcss-modules-scope@npm:3.1.1"
@@ -33086,6 +36636,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"postcss-modules-scope@npm:^3.2.0":
+  version: 3.2.1
+  resolution: "postcss-modules-scope@npm:3.2.1"
+  dependencies:
+    postcss-selector-parser: "npm:^7.0.0"
+  peerDependencies:
+    postcss: ^8.1.0
+  checksum: 10/51c747fa15cedf1b2856da472985ea7a7bb510a63daf30f95f250f34fce9e28ef69b802e6cc03f9c01f69043d171bc33279109a9235847c2d3a75c44eac67334
+  languageName: node
+  linkType: hard
+
 "postcss-modules-values@npm:^4.0.0":
   version: 4.0.0
   resolution: "postcss-modules-values@npm:4.0.0"
@@ -33097,6 +36658,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"postcss-nested@npm:^6.2.0":
+  version: 6.2.0
+  resolution: "postcss-nested@npm:6.2.0"
+  dependencies:
+    postcss-selector-parser: "npm:^6.1.1"
+  peerDependencies:
+    postcss: ^8.2.14
+  checksum: 10/d7f6ba6bfd03d42f84689a0630d4e393c421bb53723f16fe179a840f03ed17763b0fe494458577d2a015e857e0ec27c7e194909ffe209ee5f0676aec39737317
+  languageName: node
+  linkType: hard
+
 "postcss-nesting@npm:^12.0.3":
   version: 12.1.0
   resolution: "postcss-nesting@npm:12.1.0"
@@ -33418,7 +36990,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss-selector-parser@npm:^6.1.2":
+"postcss-selector-parser@npm:^6.1.1, postcss-selector-parser@npm:^6.1.2":
   version: 6.1.2
   resolution: "postcss-selector-parser@npm:6.1.2"
   dependencies:
@@ -33428,6 +37000,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"postcss-selector-parser@npm:^7.0.0":
+  version: 7.1.0
+  resolution: "postcss-selector-parser@npm:7.1.0"
+  dependencies:
+    cssesc: "npm:^3.0.0"
+    util-deprecate: "npm:^1.0.2"
+  checksum: 10/2caf09e66e2be81d45538f8afdc5439298c89bea71e9943b364e69dce9443d9c5ab33f4dd8b237f1ed7d2f38530338dcc189c1219d888159e6afb5b0afe58b19
+  languageName: node
+  linkType: hard
+
 "postcss-svgo@npm:^7.0.1":
   version: 7.0.1
   resolution: "postcss-svgo@npm:7.0.1"
@@ -33451,7 +37033,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss-value-parser@npm:^4.1.0, postcss-value-parser@npm:^4.2.0":
+"postcss-value-parser@npm:^4.0.0, postcss-value-parser@npm:^4.1.0, postcss-value-parser@npm:^4.2.0":
   version: 4.2.0
   resolution: "postcss-value-parser@npm:4.2.0"
   checksum: 10/e4e4486f33b3163a606a6ed94f9c196ab49a37a7a7163abfcd469e5f113210120d70b8dd5e33d64636f41ad52316a3725655421eb9a1094f1bcab1db2f555c62
@@ -33577,7 +37159,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"prettier@npm:^2.8.8":
+"prettier@npm:^2.8.0, prettier@npm:^2.8.8":
   version: 2.8.8
   resolution: "prettier@npm:2.8.8"
   bin:
@@ -33636,6 +37218,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"pretty-hrtime@npm:^1.0.3":
+  version: 1.0.3
+  resolution: "pretty-hrtime@npm:1.0.3"
+  checksum: 10/0a462e88a0a3fd3320288fd8307f488974326ae8e13eea8c27f590f8ee767ccb59cf35bcae1cadff241cd8b72f3e373fc76ff1be95243649899bf8c816874af9
+  languageName: node
+  linkType: hard
+
 "pretty-time@npm:^1.1.0":
   version: 1.1.0
   resolution: "pretty-time@npm:1.1.0"
@@ -33706,7 +37295,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"progress@npm:^2.0.3":
+"progress@npm:^2.0.1, progress@npm:^2.0.3":
   version: 2.0.3
   resolution: "progress@npm:2.0.3"
   checksum: 10/e6f0bcb71f716eee9dfac0fe8a2606e3704d6a64dd93baaf49fbadbc8499989a610fe14cf1bc6f61b6d6653c49408d94f4a94e124538084efd8e4cf525e0293d
@@ -33753,7 +37342,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"prompts@npm:^2.0.1, prompts@npm:^2.4.2":
+"prompts@npm:^2.0.1, prompts@npm:^2.4.0, prompts@npm:^2.4.2":
   version: 2.4.2
   resolution: "prompts@npm:2.4.2"
   dependencies:
@@ -33859,7 +37448,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"proxy-from-env@npm:^1.1.0":
+"proxy-from-env@npm:^1.0.0, proxy-from-env@npm:^1.1.0":
   version: 1.1.0
   resolution: "proxy-from-env@npm:1.1.0"
   checksum: 10/f0bb4a87cfd18f77bc2fba23ae49c3b378fb35143af16cc478171c623eebe181678f09439707ad80081d340d1593cd54a33a0113f3ccb3f4bc9451488780ee23
@@ -33964,6 +37553,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"puppeteer-core@npm:^2.1.1":
+  version: 2.1.1
+  resolution: "puppeteer-core@npm:2.1.1"
+  dependencies:
+    "@types/mime-types": "npm:^2.1.0"
+    debug: "npm:^4.1.0"
+    extract-zip: "npm:^1.6.6"
+    https-proxy-agent: "npm:^4.0.0"
+    mime: "npm:^2.0.3"
+    mime-types: "npm:^2.1.25"
+    progress: "npm:^2.0.1"
+    proxy-from-env: "npm:^1.0.0"
+    rimraf: "npm:^2.6.1"
+    ws: "npm:^6.1.0"
+  checksum: 10/fcbf80c954f9562f88b53886dc377595bf478abbb47c005f9131a56b6704cdd0a26b60f2646d2340866ed9f5059aae2b9f06a0f04310f5f14520ec94a687fbe6
+  languageName: node
+  linkType: hard
+
 "puppeteer-core@npm:^23.11.1":
   version: 23.11.1
   resolution: "puppeteer-core@npm:23.11.1"
@@ -34033,6 +37640,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"qs@npm:^6.10.0":
+  version: 6.14.0
+  resolution: "qs@npm:6.14.0"
+  dependencies:
+    side-channel: "npm:^1.1.0"
+  checksum: 10/a60e49bbd51c935a8a4759e7505677b122e23bf392d6535b8fc31c1e447acba2c901235ecb192764013cd2781723dc1f61978b5fdd93cc31d7043d31cdc01974
+  languageName: node
+  linkType: hard
+
 "querystring@npm:0.2.0":
   version: 0.2.0
   resolution: "querystring@npm:0.2.0"
@@ -34091,6 +37707,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ramda@npm:0.29.0":
+  version: 0.29.0
+  resolution: "ramda@npm:0.29.0"
+  checksum: 10/b156660f2c58b4a13bcc4f1a0eabc1145d8db11d33d26a2fb03cd6adf3983a1c1f2bbaaf708c421029e9b09684262d056752623f7e62b79a503fb9217dec69d4
+  languageName: node
+  linkType: hard
+
 "randombytes@npm:^2.0.0, randombytes@npm:^2.0.1, randombytes@npm:^2.0.5, randombytes@npm:^2.1.0":
   version: 2.1.0
   resolution: "randombytes@npm:2.1.0"
@@ -34150,79 +37773,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"rc-align@npm:^4.0.0":
-  version: 4.0.15
-  resolution: "rc-align@npm:4.0.15"
-  dependencies:
-    "@babel/runtime": "npm:^7.10.1"
-    classnames: "npm:2.x"
-    dom-align: "npm:^1.7.0"
-    rc-util: "npm:^5.26.0"
-    resize-observer-polyfill: "npm:^1.5.1"
-  peerDependencies:
-    react: ">=16.9.0"
-    react-dom: ">=16.9.0"
-  checksum: 10/de1af4a58a371bc01cf5f327ce82b5e5631960c3e2dbae03532081e63bf86a809cebf9b8a231495db1dc659c28b6dbb35b0b33f2c29579b8b068388c1288c1b1
-  languageName: node
-  linkType: hard
-
-"rc-motion@npm:^2.0.0":
-  version: 2.9.0
-  resolution: "rc-motion@npm:2.9.0"
-  dependencies:
-    "@babel/runtime": "npm:^7.11.1"
-    classnames: "npm:^2.2.1"
-    rc-util: "npm:^5.21.0"
-  peerDependencies:
-    react: ">=16.9.0"
-    react-dom: ">=16.9.0"
-  checksum: 10/12bb290860865edbc8d08a731d377ccc62936a28bbfa83246cfca5b831843a6bfa8912c5ca3624823b28ab43e0ac46215f67e198729f6f6d91e826f64af514a9
-  languageName: node
-  linkType: hard
-
-"rc-tooltip@npm:^5.3.1":
-  version: 5.3.1
-  resolution: "rc-tooltip@npm:5.3.1"
-  dependencies:
-    "@babel/runtime": "npm:^7.11.2"
-    classnames: "npm:^2.3.1"
-    rc-trigger: "npm:^5.3.1"
-  peerDependencies:
-    react: ">=16.9.0"
-    react-dom: ">=16.9.0"
-  checksum: 10/c7627fbfae753a0e73548d1f93329a5132d76727f737d4eedc5a142f2950986f429dae11b5d8bc13f39bd72a631a22cb32f3b8aaad83bfdde770c19e220708bf
-  languageName: node
-  linkType: hard
-
-"rc-trigger@npm:^5.3.1":
-  version: 5.3.4
-  resolution: "rc-trigger@npm:5.3.4"
-  dependencies:
-    "@babel/runtime": "npm:^7.18.3"
-    classnames: "npm:^2.2.6"
-    rc-align: "npm:^4.0.0"
-    rc-motion: "npm:^2.0.0"
-    rc-util: "npm:^5.19.2"
-  peerDependencies:
-    react: ">=16.9.0"
-    react-dom: ">=16.9.0"
-  checksum: 10/32e0a3083ecea27b44d47c8638e399fadab658fe48a526b0f072011acd99f5b26871a9b3c07fc7f121ddbec900e41bf3eb9085a7be18aa66007aae7fd311b1f9
-  languageName: node
-  linkType: hard
-
-"rc-util@npm:^5.19.2, rc-util@npm:^5.21.0, rc-util@npm:^5.26.0":
-  version: 5.39.3
-  resolution: "rc-util@npm:5.39.3"
-  dependencies:
-    "@babel/runtime": "npm:^7.18.3"
-    react-is: "npm:^18.2.0"
-  peerDependencies:
-    react: ">=16.9.0"
-    react-dom: ">=16.9.0"
-  checksum: 10/55d7fe0664fbc025473f678ac8db874bcb6e1788f7b2dc785d90713ee3cd25d2a6706a98d456c5fd60e742220a3f52f45cca888d9c322787fc3952a0239737b1
-  languageName: node
-  linkType: hard
-
 "rc@npm:^1.2.7":
   version: 1.2.8
   resolution: "rc@npm:1.2.8"
@@ -34244,20 +37794,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-ace@npm:^6.1.4":
-  version: 6.6.0
-  resolution: "react-ace@npm:6.6.0"
+"react-ace@npm:^13.0.0":
+  version: 13.0.0
+  resolution: "react-ace@npm:13.0.0"
   dependencies:
-    "@babel/polyfill": "npm:^7.4.4"
-    brace: "npm:^0.11.1"
-    diff-match-patch: "npm:^1.0.4"
+    ace-builds: "npm:^1.36.3"
+    diff-match-patch: "npm:^1.0.5"
     lodash.get: "npm:^4.4.2"
     lodash.isequal: "npm:^4.5.0"
-    prop-types: "npm:^15.7.2"
+    prop-types: "npm:^15.8.1"
   peerDependencies:
-    react: ^0.13.0 || ^0.14.0 || ^15.0.1 || ^16.0.0
-    react-dom: ^0.13.0 || ^0.14.0 || ^15.0.1 || ^16.0.0
-  checksum: 10/9d9af86149384c345a77da5f47a83bb726bcf329e54cc684c71d74a90b66b7f99bf5bb6edb20b2daa319d90879abd5b5a0e4dd61ab486d7882247514573e5d61
+    react: ^0.13.0 || ^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^0.13.0 || ^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0
+  checksum: 10/93bf67725641d6533d25e930c309e86ea13f91299c6f3fa7ae90c35d647a8309beca2f031c31bf7fe2f3bc9d88831430befa3340eb6c1ed8d651529613363240
   languageName: node
   linkType: hard
 
@@ -34302,6 +37851,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-colorful@npm:^5.1.2":
+  version: 5.6.1
+  resolution: "react-colorful@npm:5.6.1"
+  peerDependencies:
+    react: ">=16.8.0"
+    react-dom: ">=16.8.0"
+  checksum: 10/3e02ba013454818d0c323949bd961fb2c19ac18130dfc67a4032aa5b03787c5ffe7ff159c4b97dc3475072d576828ca0c4b8e8ce85b55eaf484180596cdf0403
+  languageName: node
+  linkType: hard
+
 "react-columned@npm:^1.1.3":
   version: 1.1.3
   resolution: "react-columned@npm:1.1.3"
@@ -34404,6 +37963,33 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-docgen-typescript@npm:^2.2.2":
+  version: 2.2.2
+  resolution: "react-docgen-typescript@npm:2.2.2"
+  peerDependencies:
+    typescript: ">= 4.3.x"
+  checksum: 10/081fc3a876f53b9eeffcff357e5b6c190db799d50edcf11b187857d8cb8cce28000ed777ed16dd52a1c955f332612ef6b1f02cf8adcbcb084b8da9ff1ae5fd13
+  languageName: node
+  linkType: hard
+
+"react-docgen@npm:^7.0.0":
+  version: 7.1.1
+  resolution: "react-docgen@npm:7.1.1"
+  dependencies:
+    "@babel/core": "npm:^7.18.9"
+    "@babel/traverse": "npm:^7.18.9"
+    "@babel/types": "npm:^7.18.9"
+    "@types/babel__core": "npm:^7.18.0"
+    "@types/babel__traverse": "npm:^7.18.0"
+    "@types/doctrine": "npm:^0.0.9"
+    "@types/resolve": "npm:^1.20.2"
+    doctrine: "npm:^3.0.0"
+    resolve: "npm:^1.22.1"
+    strip-indent: "npm:^4.0.0"
+  checksum: 10/501e5fa0d00e32ee27559f44462a34e9531018ccb46c51efbe60b98a4c077f43dbe8999da5bb91d2ab45a83a34099436a3b725fdabd3f218dbb4493c0b1c9f95
+  languageName: node
+  linkType: hard
+
 "react-dom@npm:18.2.0":
   version: 18.2.0
   resolution: "react-dom@npm:18.2.0"
@@ -34429,6 +38015,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-element-to-jsx-string@npm:^15.0.0":
+  version: 15.0.0
+  resolution: "react-element-to-jsx-string@npm:15.0.0"
+  dependencies:
+    "@base2/pretty-print-object": "npm:1.0.1"
+    is-plain-object: "npm:5.0.0"
+    react-is: "npm:18.1.0"
+  peerDependencies:
+    react: ^0.14.8 || ^15.0.1 || ^16.0.0 || ^17.0.1 || ^18.0.0
+    react-dom: ^0.14.8 || ^15.0.1 || ^16.0.0 || ^17.0.1 || ^18.0.0
+  checksum: 10/9a874b2f16b4624a72c4b766b096d693a382b9dc7f2264f802395852ae3435ccde8e9e47bbe45cf5f30eba70f8126af6aca832190e285b0096af3ecade994df1
+  languageName: node
+  linkType: hard
+
 "react-error-boundary@npm:^3.1.4":
   version: 3.1.4
   resolution: "react-error-boundary@npm:3.1.4"
@@ -34529,7 +38129,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-is@npm:^16.13.1, react-is@npm:^16.7.0, react-is@npm:^16.9.0":
+"react-is@npm:18.1.0":
+  version: 18.1.0
+  resolution: "react-is@npm:18.1.0"
+  checksum: 10/fe09c86d5e12a8531bf3e748660f3dffbe900a6da0b488c7efaf0a866e16b74ecc1b0011b0960b13594f8719f39f87a987c0c85edff0b2d3e2f14b87e7230ad2
+  languageName: node
+  linkType: hard
+
+"react-is@npm:^16.13.1, react-is@npm:^16.7.0":
   version: 16.13.1
   resolution: "react-is@npm:16.13.1"
   checksum: 10/5aa564a1cde7d391ac980bedee21202fc90bdea3b399952117f54fb71a932af1e5902020144fb354b4690b2414a0c7aafe798eb617b76a3d441d956db7726fdf
@@ -34550,13 +38157,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-is@npm:^18.2.0":
-  version: 18.3.1
-  resolution: "react-is@npm:18.3.1"
-  checksum: 10/d5f60c87d285af24b1e1e7eaeb123ec256c3c8bdea7061ab3932e3e14685708221bf234ec50b21e10dd07f008f1b966a2730a0ce4ff67905b3872ff2042aec22
-  languageName: node
-  linkType: hard
-
 "react-lazy-load@npm:^3.1.14":
   version: 3.1.14
   resolution: "react-lazy-load@npm:3.1.14"
@@ -34579,15 +38179,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-loading-skeleton@npm:^3.1.0":
-  version: 3.1.0
-  resolution: "react-loading-skeleton@npm:3.1.0"
-  peerDependencies:
-    react: ">=16.8.0"
-  checksum: 10/44c096dd39233c1b3f1bd8f4c02566c64196d6e84d2d794296ebd888f6da6c99e5488da7c6e397ac757bd29ffa30892adbb24f7cfcc93d588f797c619344e6fd
-  languageName: node
-  linkType: hard
-
 "react-merge-refs@npm:^2.0.1":
   version: 2.1.1
   resolution: "react-merge-refs@npm:2.1.1"
@@ -34595,19 +38186,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-move@npm:^6.1.0":
-  version: 6.5.0
-  resolution: "react-move@npm:6.5.0"
-  dependencies:
-    "@babel/runtime": "npm:^7.14.5"
-    kapellmeister: "npm:^3.0.1"
-    prop-types: "npm:^15.7.2"
-  peerDependencies:
-    react: ">=16.3.0"
-  checksum: 10/0009e64f815a209b6778e863e76a7c6e89c87902c0adacab42916a611fff4c16601715d5b4ba9d3bf536be2349b2989df0c73ca2ab8f6252cc72098ffbb8bbb3
-  languageName: node
-  linkType: hard
-
 "react-native-get-random-values@npm:^1.4.0":
   version: 1.8.0
   resolution: "react-native-get-random-values@npm:1.8.0"
@@ -34647,6 +38225,67 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-refresh@npm:^0.14.0":
+  version: 0.14.2
+  resolution: "react-refresh@npm:0.14.2"
+  checksum: 10/512abf97271ab8623486061be04b608c39d932e3709f9af1720b41573415fa4993d0009fa5138b6705b60a98f4102f744d4e26c952b14f41a0e455521c6be4cc
+  languageName: node
+  linkType: hard
+
+"react-remove-scroll-bar@npm:^2.3.3, react-remove-scroll-bar@npm:^2.3.7":
+  version: 2.3.8
+  resolution: "react-remove-scroll-bar@npm:2.3.8"
+  dependencies:
+    react-style-singleton: "npm:^2.2.2"
+    tslib: "npm:^2.0.0"
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10/6c0f8cff98b9f49a4ee2263f1eedf12926dced5ce220fbe83bd93544460e2a7ec8ec39b35d1b2a75d2fced0b2d64afeb8e66f830431ca896e05a20585f9fc350
+  languageName: node
+  linkType: hard
+
+"react-remove-scroll@npm:2.5.5":
+  version: 2.5.5
+  resolution: "react-remove-scroll@npm:2.5.5"
+  dependencies:
+    react-remove-scroll-bar: "npm:^2.3.3"
+    react-style-singleton: "npm:^2.2.1"
+    tslib: "npm:^2.1.0"
+    use-callback-ref: "npm:^1.3.0"
+    use-sidecar: "npm:^1.1.2"
+  peerDependencies:
+    "@types/react": ^16.8.0 || ^17.0.0 || ^18.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10/f0646ac384ce3852d1f41e30a9f9e251b11cf3b430d1d114c937c8fa7f90a895c06378d0d6b6ff0b2d00cbccf15e845921944fd6074ae67a0fb347a718106d88
+  languageName: node
+  linkType: hard
+
+"react-remove-scroll@npm:^2.6.3":
+  version: 2.7.0
+  resolution: "react-remove-scroll@npm:2.7.0"
+  dependencies:
+    react-remove-scroll-bar: "npm:^2.3.7"
+    react-style-singleton: "npm:^2.2.3"
+    tslib: "npm:^2.1.0"
+    use-callback-ref: "npm:^1.3.3"
+    use-sidecar: "npm:^1.1.3"
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10/6fa65227b101f097be17126dbefdaaa170b39f8e4f53b4e90f058501e14047215de7eea7ce4516aa18b9daaee5b32e84abf0360dd7f0156d8017da64c8cc84e0
+  languageName: node
+  linkType: hard
+
 "react-resizable-panels@npm:^2.0.19":
   version: 2.0.19
   resolution: "react-resizable-panels@npm:2.0.19"
@@ -34736,6 +38375,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-style-singleton@npm:^2.2.1, react-style-singleton@npm:^2.2.2, react-style-singleton@npm:^2.2.3":
+  version: 2.2.3
+  resolution: "react-style-singleton@npm:2.2.3"
+  dependencies:
+    get-nonce: "npm:^1.0.0"
+    tslib: "npm:^2.0.0"
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10/62498094ff3877a37f351b29e6cad9e38b2eb1ac3c0cb27ebf80aee96554f80b35e17bdb552bcd7ac8b7cb9904fea93ea5668f2057c73d38f90b5d46bb9b27ab
+  languageName: node
+  linkType: hard
+
 "react-transition-group@npm:2":
   version: 2.9.0
   resolution: "react-transition-group@npm:2.9.0"
@@ -34801,6 +38456,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"read-cache@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "read-cache@npm:1.0.0"
+  dependencies:
+    pify: "npm:^2.3.0"
+  checksum: 10/83a39149d9dfa38f0c482ea0d77b34773c92fef07fe7599cdd914d255b14d0453e0229ef6379d8d27d6947f42d7581635296d0cfa7708f05a9bd8e789d398b31
+  languageName: node
+  linkType: hard
+
 "read-cmd-shim@npm:4.0.0, read-cmd-shim@npm:^4.0.0":
   version: 4.0.0
   resolution: "read-cmd-shim@npm:4.0.0"
@@ -35038,6 +38702,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"recast@npm:^0.23.1, recast@npm:^0.23.3":
+  version: 0.23.11
+  resolution: "recast@npm:0.23.11"
+  dependencies:
+    ast-types: "npm:^0.16.1"
+    esprima: "npm:~4.0.0"
+    source-map: "npm:~0.6.1"
+    tiny-invariant: "npm:^1.3.3"
+    tslib: "npm:^2.0.1"
+  checksum: 10/a622b7848efe13a59a40c9a1a3a8178433eae1048780e04d7392406e2d67fc29e3efa84b3aa8cfda28fd58989f4b59fa968bed295b739987a666bd11cc57a5b2
+  languageName: node
+  linkType: hard
+
 "recoil@npm:^0.7.7":
   version: 0.7.7
   resolution: "recoil@npm:0.7.7"
@@ -35231,6 +38908,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"regexpu-core@npm:^6.2.0":
+  version: 6.2.0
+  resolution: "regexpu-core@npm:6.2.0"
+  dependencies:
+    regenerate: "npm:^1.4.2"
+    regenerate-unicode-properties: "npm:^10.2.0"
+    regjsgen: "npm:^0.8.0"
+    regjsparser: "npm:^0.12.0"
+    unicode-match-property-ecmascript: "npm:^2.0.0"
+    unicode-match-property-value-ecmascript: "npm:^2.1.0"
+  checksum: 10/4d054ffcd98ca4f6ca7bf0df6598ed5e4a124264602553308add41d4fa714a0c5bcfb5bc868ac91f7060a9c09889cc21d3180a3a14c5f9c5838442806129ced3
+  languageName: node
+  linkType: hard
+
 "regjsgen@npm:^0.7.1":
   version: 0.7.1
   resolution: "regjsgen@npm:0.7.1"
@@ -35256,6 +38947,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"regjsparser@npm:^0.12.0":
+  version: 0.12.0
+  resolution: "regjsparser@npm:0.12.0"
+  dependencies:
+    jsesc: "npm:~3.0.2"
+  bin:
+    regjsparser: bin/parser
+  checksum: 10/c2d6506b3308679de5223a8916984198e0493649a67b477c66bdb875357e3785abbf3bedf7c5c2cf8967d3b3a7bdf08b7cbd39e65a70f9e1ffad584aecf5f06a
+  languageName: node
+  linkType: hard
+
 "regjsparser@npm:^0.9.1":
   version: 0.9.1
   resolution: "regjsparser@npm:0.9.1"
@@ -35288,6 +38990,30 @@ __metadata:
   languageName: node
   linkType: hard
 
+"remark-external-links@npm:^8.0.0":
+  version: 8.0.0
+  resolution: "remark-external-links@npm:8.0.0"
+  dependencies:
+    extend: "npm:^3.0.0"
+    is-absolute-url: "npm:^3.0.0"
+    mdast-util-definitions: "npm:^4.0.0"
+    space-separated-tokens: "npm:^1.0.0"
+    unist-util-visit: "npm:^2.0.0"
+  checksum: 10/48c4a41fe38916f79febb390b0c4deefe82b554dd36dc534262d851860d17fb6d15d78d515f29194e5fa48db5f01f4405a6f6dd077aaf32812a2efffb01700d7
+  languageName: node
+  linkType: hard
+
+"remark-slug@npm:^6.0.0":
+  version: 6.1.0
+  resolution: "remark-slug@npm:6.1.0"
+  dependencies:
+    github-slugger: "npm:^1.0.0"
+    mdast-util-to-string: "npm:^1.0.0"
+    unist-util-visit: "npm:^2.0.0"
+  checksum: 10/8c90815a0f1f0568450e923391de0183205e18befb7a7e19e111c75ad08cabf7daebe62fccc82b6fbf9f54148dd311b87463632299dbf9fdfe412f6a0a9ab3ea
+  languageName: node
+  linkType: hard
+
 "renderkid@npm:^3.0.0":
   version: 3.0.0
   resolution: "renderkid@npm:3.0.0"
@@ -35399,13 +39125,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"resize-observer-polyfill@npm:^1.5.1":
-  version: 1.5.1
-  resolution: "resize-observer-polyfill@npm:1.5.1"
-  checksum: 10/e10ee50cd6cf558001de5c6fb03fee15debd011c2f694564b71f81742eef03fb30d6c2596d1d5bf946d9991cb692fcef529b7bd2e4057041377ecc9636c753ce
-  languageName: node
-  linkType: hard
-
 "resolve-alpn@npm:^1.0.0":
   version: 1.2.1
   resolution: "resolve-alpn@npm:1.2.1"
@@ -35485,7 +39204,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"resolve@npm:^1.22.2, resolve@npm:^1.22.4":
+"resolve@npm:^1.1.7, resolve@npm:^1.22.2, resolve@npm:^1.22.4":
   version: 1.22.10
   resolution: "resolve@npm:1.22.10"
   dependencies:
@@ -35537,7 +39256,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"resolve@patch:resolve@npm%3A^1.22.2#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.22.4#optional!builtin<compat/resolve>":
+"resolve@patch:resolve@npm%3A^1.1.7#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.22.2#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.22.4#optional!builtin<compat/resolve>":
   version: 1.22.10
   resolution: "resolve@patch:resolve@npm%3A1.22.10#optional!builtin<compat/resolve>::version=1.22.10&hash=c3c19d"
   dependencies:
@@ -35657,7 +39376,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"rimraf@npm:^2.6.2":
+"rimraf@npm:^2.6.1, rimraf@npm:^2.6.2":
   version: 2.7.1
   resolution: "rimraf@npm:2.7.1"
   dependencies:
@@ -35744,7 +39463,7 @@ __metadata:
     "@babel/preset-react": "npm:^7.26.3"
     "@babel/preset-typescript": "npm:^7.26.0"
     "@babel/register": "npm:^7.25.9"
-    "@babel/runtime": "npm:7.26.7"
+    "@babel/runtime": "npm:7.26.10"
     "@babel/template": "npm:^7.25.9"
     "@babel/traverse": "npm:7.26.7"
     "@babel/types": "npm:7.26.7"
@@ -36148,6 +39867,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"schema-utils@npm:^4.3.0, schema-utils@npm:^4.3.2":
+  version: 4.3.2
+  resolution: "schema-utils@npm:4.3.2"
+  dependencies:
+    "@types/json-schema": "npm:^7.0.9"
+    ajv: "npm:^8.9.0"
+    ajv-formats: "npm:^2.1.1"
+    ajv-keywords: "npm:^5.1.0"
+  checksum: 10/02c32c34aae762d48468f98465a96a167fede637772871c7c7d8923671ddb9f20b2cc6f6e8448ae6bef5363e3597493c655212c8b06a4ee73aa099d9452fbd8b
+  languageName: node
+  linkType: hard
+
 "secure-json-parse@npm:^2.3.1, secure-json-parse@npm:^2.4.0, secure-json-parse@npm:^2.7.0":
   version: 2.7.0
   resolution: "secure-json-parse@npm:2.7.0"
@@ -36795,6 +40526,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"sonner@npm:^2.0.1":
+  version: 2.0.3
+  resolution: "sonner@npm:2.0.3"
+  peerDependencies:
+    react: ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+    react-dom: ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+  checksum: 10/e7e4233c9ef96f2db4f5516a181d0b464104a6b8554ac36b403a53d14f21baddae48187ce48d22a7821eb1e3e9168f7df471405001652ab3abfcfe8930f7a6fa
+  languageName: node
+  linkType: hard
+
 "sort-keys@npm:^2.0.0":
   version: 2.0.0
   resolution: "sort-keys@npm:2.0.0"
@@ -36907,6 +40648,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"space-separated-tokens@npm:^1.0.0":
+  version: 1.1.5
+  resolution: "space-separated-tokens@npm:1.1.5"
+  checksum: 10/8ef68f1cfa8ccad316b7f8d0df0919d0f1f6d32101e8faeee34ea3a923ce8509c1ad562f57388585ee4951e92d27afa211ed0a077d3d5995b5ba9180331be708
+  languageName: node
+  linkType: hard
+
 "spdx-correct@npm:^3.0.0":
   version: 3.1.1
   resolution: "spdx-correct@npm:3.1.1"
@@ -37159,6 +40907,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"store2@npm:^2.14.2":
+  version: 2.14.4
+  resolution: "store2@npm:2.14.4"
+  checksum: 10/c92713e75544693b47053531b6e98d7b538512061017e06b8c7e99937da67866856227862f7bf1a818ecc36673b8d343c7b67c9cce03bd4ba0f68eff7cccaa8c
+  languageName: node
+  linkType: hard
+
 "store@npm:^2.0.12":
   version: 2.0.12
   resolution: "store@npm:2.0.12"
@@ -37166,6 +40921,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"storybook@npm:7.6.20":
+  version: 7.6.20
+  resolution: "storybook@npm:7.6.20"
+  dependencies:
+    "@storybook/cli": "npm:7.6.20"
+  bin:
+    sb: ./index.js
+    storybook: ./index.js
+  checksum: 10/7442d0bf404fafdfa6921d388b7af78e835bd4278ec7cc0c6565d3723cb1cd7d24621a97186abd553f1345ddf78628e517656af64bcb4a3d9e9c6253b01461e8
+  languageName: node
+  linkType: hard
+
 "stream-browserify@npm:3.0.0":
   version: 3.0.0
   resolution: "stream-browserify@npm:3.0.0"
@@ -37521,6 +41288,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"strip-indent@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "strip-indent@npm:4.0.0"
+  dependencies:
+    min-indent: "npm:^1.0.1"
+  checksum: 10/06cbcd93da721c46bc13caeb1c00af93a9b18146a1c95927672d2decab6a25ad83662772417cea9317a2507fb143253ecc23c4415b64f5828cef9b638a744598
+  languageName: node
+  linkType: hard
+
 "strip-json-comments@npm:1.0.x":
   version: 1.0.4
   resolution: "strip-json-comments@npm:1.0.4"
@@ -37530,7 +41306,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"strip-json-comments@npm:^3.1.1":
+"strip-json-comments@npm:^3.0.1, strip-json-comments@npm:^3.1.1":
   version: 3.1.1
   resolution: "strip-json-comments@npm:3.1.1"
   checksum: 10/492f73e27268f9b1c122733f28ecb0e7e8d8a531a6662efbd08e22cccb3f9475e90a1b82cab06a392f6afae6d2de636f977e231296400d0ec5304ba70f166443
@@ -37573,6 +41349,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"style-loader@npm:^3.3.1":
+  version: 3.3.4
+  resolution: "style-loader@npm:3.3.4"
+  peerDependencies:
+    webpack: ^5.0.0
+  checksum: 10/2dd2a77d4fc689e1f73836ed7653830cb4e628af0b2979dcf6f31524c72bf44fca4bac8aebe62df95a5f9be19bea18f952a2cfcaaeff32c524c4402226d9c58f
+  languageName: node
+  linkType: hard
+
 "stylehacks@npm:^7.0.4":
   version: 7.0.4
   resolution: "stylehacks@npm:7.0.4"
@@ -37620,6 +41405,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"sucrase@npm:^3.35.0":
+  version: 3.35.0
+  resolution: "sucrase@npm:3.35.0"
+  dependencies:
+    "@jridgewell/gen-mapping": "npm:^0.3.2"
+    commander: "npm:^4.0.0"
+    glob: "npm:^10.3.10"
+    lines-and-columns: "npm:^1.1.6"
+    mz: "npm:^2.7.0"
+    pirates: "npm:^4.0.1"
+    ts-interface-checker: "npm:^0.1.9"
+  bin:
+    sucrase: bin/sucrase
+    sucrase-node: bin/sucrase-node
+  checksum: 10/bc601558a62826f1c32287d4fdfa4f2c09fe0fec4c4d39d0e257fd9116d7d6227a18309721d4185ec84c9dc1af0d5ec0e05a42a337fbb74fc293e068549aacbe
+  languageName: node
+  linkType: hard
+
 "supports-color@npm:^2.0.0":
   version: 2.0.0
   resolution: "supports-color@npm:2.0.0"
@@ -37712,6 +41515,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"swc-loader@npm:^0.2.3":
+  version: 0.2.6
+  resolution: "swc-loader@npm:0.2.6"
+  dependencies:
+    "@swc/counter": "npm:^0.1.3"
+  peerDependencies:
+    "@swc/core": ^1.2.147
+    webpack: ">=2"
+  checksum: 10/fe90948c02a51bb8ffcff1ce3590e01dc12860b0bb7c9e22052b14fa846ed437781ae265614a5e14344bea22001108780f00a6e350e28c0b3499bc4cd11335fb
+  languageName: node
+  linkType: hard
+
 "swiper@npm:^9.3.2":
   version: 9.3.2
   resolution: "swiper@npm:9.3.2"
@@ -37742,6 +41557,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"synchronous-promise@npm:^2.0.15":
+  version: 2.0.17
+  resolution: "synchronous-promise@npm:2.0.17"
+  checksum: 10/dd74b1c05caab8ea34e26c8b52a0966efd70b0229ad39447ce066501dd6931d4d97a3f88b0f306880a699660cd334180a24d9738b385aed0bd0104a5be207ec1
+  languageName: node
+  linkType: hard
+
 "systeminformation@npm:^5.23.18":
   version: 5.23.18
   resolution: "systeminformation@npm:5.23.18"
@@ -37751,6 +41573,55 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tailwind-merge@npm:^2.4.0":
+  version: 2.6.0
+  resolution: "tailwind-merge@npm:2.6.0"
+  checksum: 10/a84f49d6f2cfb18ba06dc51b446b69f6b42cedcb9c9fa4e7c5f931b56e739870e513339e02b348b43f44011fa4852f02f72658a3f3e066e5101b09fc28644210
+  languageName: node
+  linkType: hard
+
+"tailwindcss-animate@npm:^1.0.7":
+  version: 1.0.7
+  resolution: "tailwindcss-animate@npm:1.0.7"
+  peerDependencies:
+    tailwindcss: "*"
+  checksum: 10/ef176fbb0bf9dca84178b35b6a9615cd756358ea80be9c575456d12ecd7f3c431e9e571915c7df72959dc798a730959e9a4739d59eab55d8cc6db390870ff0d2
+  languageName: node
+  linkType: hard
+
+"tailwindcss@npm:^3.4.6":
+  version: 3.4.17
+  resolution: "tailwindcss@npm:3.4.17"
+  dependencies:
+    "@alloc/quick-lru": "npm:^5.2.0"
+    arg: "npm:^5.0.2"
+    chokidar: "npm:^3.6.0"
+    didyoumean: "npm:^1.2.2"
+    dlv: "npm:^1.1.3"
+    fast-glob: "npm:^3.3.2"
+    glob-parent: "npm:^6.0.2"
+    is-glob: "npm:^4.0.3"
+    jiti: "npm:^1.21.6"
+    lilconfig: "npm:^3.1.3"
+    micromatch: "npm:^4.0.8"
+    normalize-path: "npm:^3.0.0"
+    object-hash: "npm:^3.0.0"
+    picocolors: "npm:^1.1.1"
+    postcss: "npm:^8.4.47"
+    postcss-import: "npm:^15.1.0"
+    postcss-js: "npm:^4.0.1"
+    postcss-load-config: "npm:^4.0.2"
+    postcss-nested: "npm:^6.2.0"
+    postcss-selector-parser: "npm:^6.1.2"
+    resolve: "npm:^1.22.8"
+    sucrase: "npm:^3.35.0"
+  bin:
+    tailwind: lib/cli.js
+    tailwindcss: lib/cli.js
+  checksum: 10/b0e00533ae3800223b5b71af9cb1dd9bfea5ef5ffa01300f1ced99de9511487aa41e03106173e4168c56c8f6600ee21c98c1d75a5def23cddf9b39b4ad71210d
+  languageName: node
+  linkType: hard
+
 "tapable@npm:^1.0.0":
   version: 1.1.3
   resolution: "tapable@npm:1.1.3"
@@ -37777,6 +41648,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tar-fs@npm:^2.1.1":
+  version: 2.1.3
+  resolution: "tar-fs@npm:2.1.3"
+  dependencies:
+    chownr: "npm:^1.1.1"
+    mkdirp-classic: "npm:^0.5.2"
+    pump: "npm:^3.0.0"
+    tar-stream: "npm:^2.1.4"
+  checksum: 10/37fdfd3aa73f4f49c0821ef75f67647ecafd5370d2e311d9ace6ff3825ff4355014055c3d43407c6a655adf6c5bfb0cbcf93412161dad5af7110eb7d7a0c2eae
+  languageName: node
+  linkType: hard
+
 "tar-fs@npm:^3.0.4":
   version: 3.0.4
   resolution: "tar-fs@npm:3.0.4"
@@ -37869,6 +41752,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"telejson@npm:^7.2.0":
+  version: 7.2.0
+  resolution: "telejson@npm:7.2.0"
+  dependencies:
+    memoizerific: "npm:^1.11.3"
+  checksum: 10/6e89b3d3c45b5a2aced9132f6a968fcdf758c00be4c3acb115d7d81e95c9e04083a7a4a9b43057fcf48b101156c1607a38f5491615956acb28d4d1f78a4bda20
+  languageName: node
+  linkType: hard
+
 "temp-dir@npm:1.0.0":
   version: 1.0.0
   resolution: "temp-dir@npm:1.0.0"
@@ -37876,6 +41768,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"temp-dir@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "temp-dir@npm:2.0.0"
+  checksum: 10/cc4f0404bf8d6ae1a166e0e64f3f409b423f4d1274d8c02814a59a5529f07db6cd070a749664141b992b2c1af337fa9bb451a460a43bb9bcddc49f235d3115aa
+  languageName: node
+  linkType: hard
+
+"temp@npm:^0.8.4":
+  version: 0.8.4
+  resolution: "temp@npm:0.8.4"
+  dependencies:
+    rimraf: "npm:~2.6.2"
+  checksum: 10/0a7f76b49637415bc391c3f6e69377cc4c38afac95132b4158fa711e77b70b082fe56fd886f9d11ffab9d148df181a105a93c8b618fb72266eeaa5e5ddbfe37f
+  languageName: node
+  linkType: hard
+
 "temp@npm:^0.9.4":
   version: 0.9.4
   resolution: "temp@npm:0.9.4"
@@ -37886,6 +41794,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tempy@npm:^1.0.1":
+  version: 1.0.1
+  resolution: "tempy@npm:1.0.1"
+  dependencies:
+    del: "npm:^6.0.0"
+    is-stream: "npm:^2.0.0"
+    temp-dir: "npm:^2.0.0"
+    type-fest: "npm:^0.16.0"
+    unique-string: "npm:^2.0.0"
+  checksum: 10/e3a3857cd102db84c484b8e878203b496f0e927025b7c60dd118c0c9a0962f4589321c6b3093185d529576af5c58be65d755e72c2a6ad009ff340ab8cbbe4d33
+  languageName: node
+  linkType: hard
+
 "term-img@npm:^4.0.0":
   version: 4.1.0
   resolution: "term-img@npm:4.1.0"
@@ -37906,6 +41827,28 @@ __metadata:
   languageName: node
   linkType: hard
 
+"terser-webpack-plugin@npm:^5.3.1, terser-webpack-plugin@npm:^5.3.11":
+  version: 5.3.14
+  resolution: "terser-webpack-plugin@npm:5.3.14"
+  dependencies:
+    "@jridgewell/trace-mapping": "npm:^0.3.25"
+    jest-worker: "npm:^27.4.5"
+    schema-utils: "npm:^4.3.0"
+    serialize-javascript: "npm:^6.0.2"
+    terser: "npm:^5.31.1"
+  peerDependencies:
+    webpack: ^5.1.0
+  peerDependenciesMeta:
+    "@swc/core":
+      optional: true
+    esbuild:
+      optional: true
+    uglify-js:
+      optional: true
+  checksum: 10/5b7290f7edb179b83cefb8827c12371ddddc088cf251cf58a1c738d82628331ae6604273b61fe991d77411d4bb6b7178c3826aa47edf01b4ee21f973d6c8b8fb
+  languageName: node
+  linkType: hard
+
 "terser-webpack-plugin@npm:^5.3.10":
   version: 5.3.10
   resolution: "terser-webpack-plugin@npm:5.3.10"
@@ -37956,6 +41899,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"terser@npm:^5.31.1":
+  version: 5.40.0
+  resolution: "terser@npm:5.40.0"
+  dependencies:
+    "@jridgewell/source-map": "npm:^0.3.3"
+    acorn: "npm:^8.14.0"
+    commander: "npm:^2.20.0"
+    source-map-support: "npm:~0.5.20"
+  bin:
+    terser: bin/terser
+  checksum: 10/686ff65c1f379fedd38d688c7d9b21af590191c61934d2181645a12a539bc738ecabd99ab7219320d93dcc0f42a0b02924b34cce2cc718f88091f18c0d871e8c
+  languageName: node
+  linkType: hard
+
 "test-exclude@npm:^6.0.0":
   version: 6.0.0
   resolution: "test-exclude@npm:6.0.0"
@@ -38012,6 +41969,24 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"thenify-all@npm:^1.0.0":
+  version: 1.6.0
+  resolution: "thenify-all@npm:1.6.0"
+  dependencies:
+    thenify: "npm:>= 3.1.0 < 4"
+  checksum: 10/dba7cc8a23a154cdcb6acb7f51d61511c37a6b077ec5ab5da6e8b874272015937788402fd271fdfc5f187f8cb0948e38d0a42dcc89d554d731652ab458f5343e
+  languageName: node
+  linkType: hard
+
+"thenify@npm:>= 3.1.0 < 4":
+  version: 3.3.1
+  resolution: "thenify@npm:3.3.1"
+  dependencies:
+    any-promise: "npm:^1.0.0"
+  checksum: 10/486e1283a867440a904e36741ff1a177faa827cf94d69506f7e3ae4187b9afdf9ec368b3d8da225c192bfe2eb943f3f0080594156bf39f21b57cd1411e2e7f6d
+  languageName: node
+  linkType: hard
+
 "thingies@npm:^1.20.0":
   version: 1.21.0
   resolution: "thingies@npm:1.21.0"
@@ -38104,13 +42079,27 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tinycolor2@npm:^1.4.1":
+"tiny-invariant@npm:^1.3.1, tiny-invariant@npm:^1.3.3":
+  version: 1.3.3
+  resolution: "tiny-invariant@npm:1.3.3"
+  checksum: 10/5e185c8cc2266967984ce3b352a4e57cb89dad5a8abb0dea21468a6ecaa67cd5bb47a3b7a85d08041008644af4f667fb8b6575ba38ba5fb00b3b5068306e59fe
+  languageName: node
+  linkType: hard
+
+"tinycolor2@npm:^1.4.1, tinycolor2@npm:^1.6.0":
   version: 1.6.0
   resolution: "tinycolor2@npm:1.6.0"
   checksum: 10/066c3acf4f82b81c58a0d3ab85f49407efe95ba87afc3c7a16b1d77625193dfbe10dd46c26d0a263c1137361dd5a6a68bff2fb71def5fb9b9aec940fb030bcd4
   languageName: node
   linkType: hard
 
+"tinyexec@npm:^0.3.2":
+  version: 0.3.2
+  resolution: "tinyexec@npm:0.3.2"
+  checksum: 10/b9d5fed3166fb1acd1e7f9a89afcd97ccbe18b9c1af0278e429455f6976d69271ba2d21797e7c36d57d6b05025e525d2882d88c2ab435b60d1ddf2fea361de57
+  languageName: node
+  linkType: hard
+
 "tldts-core@npm:^6.1.66":
   version: 6.1.66
   resolution: "tldts-core@npm:6.1.66"
@@ -38209,6 +42198,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tocbot@npm:^4.20.1":
+  version: 4.36.4
+  resolution: "tocbot@npm:4.36.4"
+  checksum: 10/e59c237d1b02ff1deeddd28d87a786cdd7eb65342906c47b8cc7860d8aab6ea7e8509e58fdcc2d8c11daa53f05ee8f66845ee57749503557cec8a9c936d1cbf9
+  languageName: node
+  linkType: hard
+
 "toidentifier@npm:1.0.1":
   version: 1.0.1
   resolution: "toidentifier@npm:1.0.1"
@@ -38332,6 +42328,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ts-dedent@npm:^2.0.0":
+  version: 2.2.0
+  resolution: "ts-dedent@npm:2.2.0"
+  checksum: 10/93ed8f7878b6d5ed3c08d99b740010eede6bccfe64bce61c5a4da06a2c17d6ddbb80a8c49c2d15251de7594a4f93ffa21dd10e7be75ef66a4dc9951b4a94e2af
+  languageName: node
+  linkType: hard
+
 "ts-expect@npm:^1.3.0":
   version: 1.3.0
   resolution: "ts-expect@npm:1.3.0"
@@ -38339,6 +42342,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ts-interface-checker@npm:^0.1.9":
+  version: 0.1.13
+  resolution: "ts-interface-checker@npm:0.1.13"
+  checksum: 10/9f7346b9e25bade7a1050c001ec5a4f7023909c0e1644c5a96ae20703a131627f081479e6622a4ecee2177283d0069e651e507bedadd3904fc4010ab28ffce00
+  languageName: node
+  linkType: hard
+
 "ts-invariant@npm:^0.10.3":
   version: 0.10.3
   resolution: "ts-invariant@npm:0.10.3"
@@ -38533,7 +42543,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tslib@npm:^1.10.0, tslib@npm:^1.11.1, tslib@npm:^1.8.0, tslib@npm:^1.8.1, tslib@npm:^1.9.0, tslib@npm:^1.9.3":
+"tslib@npm:^1.10.0, tslib@npm:^1.11.1, tslib@npm:^1.13.0, tslib@npm:^1.8.0, tslib@npm:^1.8.1, tslib@npm:^1.9.0, tslib@npm:^1.9.3":
   version: 1.14.1
   resolution: "tslib@npm:1.14.1"
   checksum: 10/7dbf34e6f55c6492637adb81b555af5e3b4f9cc6b998fb440dac82d3b42bdc91560a35a5fb75e20e24a076c651438234da6743d139e4feabf0783f3cdfe1dddb
@@ -38685,6 +42695,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"type-fest@npm:^0.16.0":
+  version: 0.16.0
+  resolution: "type-fest@npm:0.16.0"
+  checksum: 10/fd8c47ccb90e9fe7bae8bfc0e116e200e096120200c1ab1737bf0bc9334b344dd4925f876ed698174ffd58cd179bb56a55467be96aedc22d5d72748eac428bc8
+  languageName: node
+  linkType: hard
+
 "type-fest@npm:^0.18.0":
   version: 0.18.1
   resolution: "type-fest@npm:0.18.1"
@@ -38727,6 +42744,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"type-fest@npm:^2.19.0, type-fest@npm:~2.19":
+  version: 2.19.0
+  resolution: "type-fest@npm:2.19.0"
+  checksum: 10/7bf9e8fdf34f92c8bb364c0af14ca875fac7e0183f2985498b77be129dc1b3b1ad0a6b3281580f19e48c6105c037fb966ad9934520c69c6434d17fd0af4eed78
+  languageName: node
+  linkType: hard
+
 "type-is@npm:~1.6.18":
   version: 1.6.18
   resolution: "type-is@npm:1.6.18"
@@ -38835,16 +42859,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"typescript@npm:4.9.5":
-  version: 4.9.5
-  resolution: "typescript@npm:4.9.5"
-  bin:
-    tsc: bin/tsc
-    tsserver: bin/tsserver
-  checksum: 10/458f7220ab11e0fc191514cc41be1707645ec9a8c2d609448a448e18c522cef9646f58728f6811185a4c35613dacdf6c98cf8965c88b3541d0288c47291e4300
-  languageName: node
-  linkType: hard
-
 "typescript@npm:5.3.3":
   version: 5.3.3
   resolution: "typescript@npm:5.3.3"
@@ -38865,16 +42879,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"typescript@patch:typescript@npm%3A4.9.5#optional!builtin<compat/typescript>":
-  version: 4.9.5
-  resolution: "typescript@patch:typescript@npm%3A4.9.5#optional!builtin<compat/typescript>::version=4.9.5&hash=289587"
-  bin:
-    tsc: bin/tsc
-    tsserver: bin/tsserver
-  checksum: 10/5659316360b5cc2d6f5931b346401fa534107b68b60179cf14970e27978f0936c1d5c46f4b5b8175f8cba0430f522b3ce355b4b724c0ea36ce6c0347fab25afd
-  languageName: node
-  linkType: hard
-
 "typescript@patch:typescript@npm%3A5.3.3#optional!builtin<compat/typescript>":
   version: 5.3.3
   resolution: "typescript@patch:typescript@npm%3A5.3.3#optional!builtin<compat/typescript>::version=5.3.3&hash=e012d7"
@@ -38902,6 +42906,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ufo@npm:^1.5.4":
+  version: 1.6.1
+  resolution: "ufo@npm:1.6.1"
+  checksum: 10/088a68133b93af183b093e5a8730a40fe7fd675d3dc0656ea7512f180af45c92300c294f14d4d46d4b2b553e3e52d3b13d4856b9885e620e7001edf85531234e
+  languageName: node
+  linkType: hard
+
 "uglify-js@npm:^3.1.4":
   version: 3.17.4
   resolution: "uglify-js@npm:3.17.4"
@@ -38968,6 +42979,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"undici-types@npm:~5.26.4":
+  version: 5.26.5
+  resolution: "undici-types@npm:5.26.5"
+  checksum: 10/0097779d94bc0fd26f0418b3a05472410408877279141ded2bd449167be1aed7ea5b76f756562cb3586a07f251b90799bab22d9019ceba49c037c76445f7cddd
+  languageName: node
+  linkType: hard
+
 "undici-types@npm:~6.19.2":
   version: 6.19.8
   resolution: "undici-types@npm:6.19.8"
@@ -39070,6 +43088,43 @@ __metadata:
   languageName: node
   linkType: hard
 
+"unique-string@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "unique-string@npm:2.0.0"
+  dependencies:
+    crypto-random-string: "npm:^2.0.0"
+  checksum: 10/107cae65b0b618296c2c663b8e52e4d1df129e9af04ab38d53b4f2189e96da93f599c85f4589b7ffaf1a11c9327cbb8a34f04c71b8d4950d3e385c2da2a93828
+  languageName: node
+  linkType: hard
+
+"unist-util-is@npm:^4.0.0":
+  version: 4.1.0
+  resolution: "unist-util-is@npm:4.1.0"
+  checksum: 10/c046cc87c0a4f797b2afce76d917218e6a9af946a56cb5a88cb7f82be34f16c11050a10ddc4c66a3297dbb2782ca7d72a358cd77900b439ea9c683ba003ffe90
+  languageName: node
+  linkType: hard
+
+"unist-util-visit-parents@npm:^3.0.0":
+  version: 3.1.1
+  resolution: "unist-util-visit-parents@npm:3.1.1"
+  dependencies:
+    "@types/unist": "npm:^2.0.0"
+    unist-util-is: "npm:^4.0.0"
+  checksum: 10/1b18343d88a0ad9cafaf8164ff8a1d3e3903328b3936b1565d61731f0b5778b9b9f400c455d3ad5284eeebcfdd7558ce24eb15c303a9cc0bd9218d01b2116923
+  languageName: node
+  linkType: hard
+
+"unist-util-visit@npm:^2.0.0":
+  version: 2.0.3
+  resolution: "unist-util-visit@npm:2.0.3"
+  dependencies:
+    "@types/unist": "npm:^2.0.0"
+    unist-util-is: "npm:^4.0.0"
+    unist-util-visit-parents: "npm:^3.0.0"
+  checksum: 10/1fe19d500e212128f96d8c3cfa3312846e586b797748a1fd195fe6479f06bc90a6f6904deb08eefc00dd58e83a1c8a32fb8677252d2273ad7a5e624525b69b8f
+  languageName: node
+  linkType: hard
+
 "universal-cookie@npm:^7.2.2":
   version: 7.2.2
   resolution: "universal-cookie@npm:7.2.2"
@@ -39132,6 +43187,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"unplugin@npm:^1.3.1":
+  version: 1.16.1
+  resolution: "unplugin@npm:1.16.1"
+  dependencies:
+    acorn: "npm:^8.14.0"
+    webpack-virtual-modules: "npm:^0.6.2"
+  checksum: 10/4b46d7d2a63d334a45111ba57a266b3f8993ef12a72b77d7b31ffc455e8a9bef9c0e37ea463eb409dbf7ccec0b9868aeb845dd42c690d9288e4b8ac2d90fbefd
+  languageName: node
+  linkType: hard
+
 "untildify@npm:^4.0.0":
   version: 4.0.0
   resolution: "untildify@npm:4.0.0"
@@ -39222,6 +43287,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"update-browserslist-db@npm:^1.1.3":
+  version: 1.1.3
+  resolution: "update-browserslist-db@npm:1.1.3"
+  dependencies:
+    escalade: "npm:^3.2.0"
+    picocolors: "npm:^1.1.1"
+  peerDependencies:
+    browserslist: ">= 4.21.0"
+  bin:
+    update-browserslist-db: cli.js
+  checksum: 10/87af2776054ffb9194cf95e0201547d041f72ee44ce54b144da110e65ea7ca01379367407ba21de5c9edd52c74d95395366790de67f3eb4cc4afa0fe4424e76f
+  languageName: node
+  linkType: hard
+
 "uri-js@npm:^4.2.2":
   version: 4.4.1
   resolution: "uri-js@npm:4.4.1"
@@ -39278,6 +43357,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"use-callback-ref@npm:^1.3.0, use-callback-ref@npm:^1.3.3":
+  version: 1.3.3
+  resolution: "use-callback-ref@npm:1.3.3"
+  dependencies:
+    tslib: "npm:^2.0.0"
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10/adf06a7b6a27d3651c325ac9b66d2b82ccacaed7450b85b211d123e91d9a23cb5a587fcc6db5b4fd07ac7233e5abf024d30cf02ddc2ec46bca712151c0836151
+  languageName: node
+  linkType: hard
+
 "use-deep-compare-effect@npm:^1.8.1":
   version: 1.8.1
   resolution: "use-deep-compare-effect@npm:1.8.1"
@@ -39290,6 +43384,43 @@ __metadata:
   languageName: node
   linkType: hard
 
+"use-resize-observer@npm:^9.1.0":
+  version: 9.1.0
+  resolution: "use-resize-observer@npm:9.1.0"
+  dependencies:
+    "@juggle/resize-observer": "npm:^3.3.1"
+  peerDependencies:
+    react: 16.8.0 - 18
+    react-dom: 16.8.0 - 18
+  checksum: 10/821d3f783090e36c694ef0ae3e366b364a691a8254d04337700ea79757e01e2d79f307ee517487c9246db7e8bc9625b474dd6ac7dad18d777004dee817826080
+  languageName: node
+  linkType: hard
+
+"use-sidecar@npm:^1.1.2, use-sidecar@npm:^1.1.3":
+  version: 1.1.3
+  resolution: "use-sidecar@npm:1.1.3"
+  dependencies:
+    detect-node-es: "npm:^1.1.0"
+    tslib: "npm:^2.0.0"
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10/2fec05eb851cdfc4a4657b1dfb434e686f346c3265ffc9db8a974bb58f8128bd4a708a3cc00e8f51655fccf81822ed4419ebed42f41610589e3aab0cf2492edb
+  languageName: node
+  linkType: hard
+
+"use-sync-external-store@npm:^1.5.0":
+  version: 1.5.0
+  resolution: "use-sync-external-store@npm:1.5.0"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+  checksum: 10/ddae7c4572511f7f641d6977bd0725340aa7dbeda8250418b54c1a57ec285083d96cf50d1a1acbd6cf729f7a87071b2302c6fbd29310432bf1b21a961a313279
+  languageName: node
+  linkType: hard
+
 "utf-8-validate@npm:>=5.0.2":
   version: 6.0.5
   resolution: "utf-8-validate@npm:6.0.5"
@@ -39324,7 +43455,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"util@npm:^0.12.0":
+"util@npm:^0.12.0, util@npm:^0.12.4, util@npm:^0.12.5":
   version: 0.12.5
   resolution: "util@npm:0.12.5"
   dependencies:
@@ -39594,6 +43725,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"watchpack@npm:^2.2.0":
+  version: 2.4.4
+  resolution: "watchpack@npm:2.4.4"
+  dependencies:
+    glob-to-regexp: "npm:^0.4.1"
+    graceful-fs: "npm:^4.1.2"
+  checksum: 10/cfa3473fc12a1a1b88123056941e90c462a67aedc10b242229eeeccdd45ed0b763c3b591caaffb0f7d77295b539b5518bb1ad3bcd891ae6505dfeae4cf51fd15
+  languageName: node
+  linkType: hard
+
 "watchpack@npm:^2.4.1":
   version: 2.4.1
   resolution: "watchpack@npm:2.4.1"
@@ -39678,6 +43819,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"webpack-dev-middleware@npm:^6.1.1":
+  version: 6.1.3
+  resolution: "webpack-dev-middleware@npm:6.1.3"
+  dependencies:
+    colorette: "npm:^2.0.10"
+    memfs: "npm:^3.4.12"
+    mime-types: "npm:^2.1.31"
+    range-parser: "npm:^1.2.1"
+    schema-utils: "npm:^4.0.0"
+  peerDependencies:
+    webpack: ^5.0.0
+  peerDependenciesMeta:
+    webpack:
+      optional: true
+  checksum: 10/ee699430c33c4dfa2a016becc85e32a9b04aa0b6edbce0bb173c4dfd29c80c77d192d14fd2f2ec500dbdede4e0f1c5557993aa20a04a44190750a1e8e13f6d67
+  languageName: node
+  linkType: hard
+
 "webpack-dev-server@npm:^4.15.2":
   version: 4.15.2
   resolution: "webpack-dev-server@npm:4.15.2"
@@ -39725,6 +43884,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"webpack-hot-middleware@npm:^2.25.1":
+  version: 2.26.1
+  resolution: "webpack-hot-middleware@npm:2.26.1"
+  dependencies:
+    ansi-html-community: "npm:0.0.8"
+    html-entities: "npm:^2.1.0"
+    strip-ansi: "npm:^6.0.0"
+  checksum: 10/69fa1a25284eeba386c99b0b159d61b0cf800d21379ae7b03203c52e5d58d9082d96ca9f98ebbd8436165cd105de496a0356a8191064b277abff4d3c56825843
+  languageName: node
+  linkType: hard
+
 "webpack-manifest-plugin@npm:^5.0.0":
   version: 5.0.0
   resolution: "webpack-manifest-plugin@npm:5.0.0"
@@ -39754,6 +43924,57 @@ __metadata:
   languageName: node
   linkType: hard
 
+"webpack-virtual-modules@npm:^0.5.0":
+  version: 0.5.0
+  resolution: "webpack-virtual-modules@npm:0.5.0"
+  checksum: 10/65a8f90c7e6609ba1c4ad2697bb83ae662485893fb545f6aa9a74e3a5d7485bbc50ef057c5bc3feca25d3153ebf9c097c233cbe4d67b52418bc84348dfb20c1a
+  languageName: node
+  linkType: hard
+
+"webpack-virtual-modules@npm:^0.6.2":
+  version: 0.6.2
+  resolution: "webpack-virtual-modules@npm:0.6.2"
+  checksum: 10/d9a0d035f7ec0c7f1055aaf88bfe48b7f96458043916a1b2926d9012fd61de3810a6b768e31a8cd4b3c84a9b6d55824361a9dd20aaf9f5ccfb6f017af216a178
+  languageName: node
+  linkType: hard
+
+"webpack@npm:5":
+  version: 5.99.9
+  resolution: "webpack@npm:5.99.9"
+  dependencies:
+    "@types/eslint-scope": "npm:^3.7.7"
+    "@types/estree": "npm:^1.0.6"
+    "@types/json-schema": "npm:^7.0.15"
+    "@webassemblyjs/ast": "npm:^1.14.1"
+    "@webassemblyjs/wasm-edit": "npm:^1.14.1"
+    "@webassemblyjs/wasm-parser": "npm:^1.14.1"
+    acorn: "npm:^8.14.0"
+    browserslist: "npm:^4.24.0"
+    chrome-trace-event: "npm:^1.0.2"
+    enhanced-resolve: "npm:^5.17.1"
+    es-module-lexer: "npm:^1.2.1"
+    eslint-scope: "npm:5.1.1"
+    events: "npm:^3.2.0"
+    glob-to-regexp: "npm:^0.4.1"
+    graceful-fs: "npm:^4.2.11"
+    json-parse-even-better-errors: "npm:^2.3.1"
+    loader-runner: "npm:^4.2.0"
+    mime-types: "npm:^2.1.27"
+    neo-async: "npm:^2.6.2"
+    schema-utils: "npm:^4.3.2"
+    tapable: "npm:^2.1.1"
+    terser-webpack-plugin: "npm:^5.3.11"
+    watchpack: "npm:^2.4.1"
+    webpack-sources: "npm:^3.2.3"
+  peerDependenciesMeta:
+    webpack-cli:
+      optional: true
+  bin:
+    webpack: bin/webpack.js
+  checksum: 10/cf4a217239bcaa892f93702639ac837a16510edb7a1326955fb042d499d297cbdb16f20a81f3be6ec041b22ab47c599c757e505fdee1dd89b7f7a1ce4337fbf3
+  languageName: node
+  linkType: hard
+
 "webpack@npm:^5.97.0":
   version: 5.97.1
   resolution: "webpack@npm:5.97.1"
@@ -40135,13 +44356,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"wicg-inert@npm:^3.0.3":
-  version: 3.1.2
-  resolution: "wicg-inert@npm:3.1.2"
-  checksum: 10/a726f5ca2d3535dba9a638ff60b720d9f81857cb9b51bcaf9c2a71ee50d784ff3be6c5d9f0acc35edd8fee92bb3587c0a9daabb70baa725a106d149ae0fd8584
-  languageName: node
-  linkType: hard
-
 "wide-align@npm:^1.1.5":
   version: 1.1.5
   resolution: "wide-align@npm:1.1.5"
@@ -40274,7 +44488,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"write-file-atomic@npm:^2.4.2":
+"write-file-atomic@npm:^2.3.0, write-file-atomic@npm:^2.4.2":
   version: 2.4.3
   resolution: "write-file-atomic@npm:2.4.3"
   dependencies:
@@ -40346,6 +44560,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ws@npm:^6.1.0":
+  version: 6.2.3
+  resolution: "ws@npm:6.2.3"
+  dependencies:
+    async-limiter: "npm:~1.0.0"
+  checksum: 10/19f8d1608317f4c98f63da6eebaa85260a6fe1ba459cbfedd83ebe436368177fb1e2944761e2392c6b7321cbb7a375c8a81f9e1be35d555b6b4647eb61eadd46
+  languageName: node
+  linkType: hard
+
 "ws@npm:^7.0.0, ws@npm:~7.5.10":
   version: 7.5.10
   resolution: "ws@npm:7.5.10"
@@ -40376,6 +44599,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ws@npm:^8.2.3":
+  version: 8.18.2
+  resolution: "ws@npm:8.18.2"
+  peerDependencies:
+    bufferutil: ^4.0.1
+    utf-8-validate: ">=5.0.2"
+  peerDependenciesMeta:
+    bufferutil:
+      optional: true
+    utf-8-validate:
+      optional: true
+  checksum: 10/018e04ec95561d88248d53a2eaf094b4ae131e9b062f2679e6e8a62f04649bc543448f1e038125225ac6bbb25f54c1e65d7a2cc9dbc1e28b43e5e6b7162ad88e
+  languageName: node
+  linkType: hard
+
 "wts-client@npm:^1.0.1":
   version: 1.0.1
   resolution: "wts-client@npm:1.0.1"
@@ -40464,6 +44702,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"yaml@npm:^2.3.4":
+  version: 2.8.0
+  resolution: "yaml@npm:2.8.0"
+  bin:
+    yaml: bin.mjs
+  checksum: 10/7d4bd9c10d0e467601f496193f2ac254140f8e36f96f5ff7f852b9ce37974168eb7354f4c36dc8837dde527a2043d004b6aff48818ec24a69ab2dd3c6b6c381c
+  languageName: node
+  linkType: hard
+
 "yaml@npm:~2.6.1":
   version: 2.6.1
   resolution: "yaml@npm:2.6.1"